@declarion/react 0.61.1 → 0.63.0

package/dist-lib/CommandPalette.impl-Db3AFA5w.js

@@ -0,0 +1,383 @@
+import { wt as e, xt as t } from "./useCurrentScreen--UovgvRj.js";
+import { t as n } from "./Icons-lt-7lhYR.js";
+import { n as r } from "./CopyButton-C0iEvaT1.js";
+import { t as i } from "./Kbd-CNttVu0z.js";
+import { t as a } from "./DynamicIcon-DuBSz6TZ.js";
+import { r as o } from "./useBranding-Ckp_AuJb.js";
+import { useEffect as s, useMemo 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/layout/CommandPalette.impl.tsx
+var m = "Esc";
+function h(e, t = 14) {
+	if (!e) return null;
+	let r = n[e];
+	return r ? /* @__PURE__ */ f(r, { size: t }) : /* @__PURE__ */ f(a, {
+		name: e,
+		size: t
+	});
+}
+function g(e, t, r, i) {
+	if (!t || !r) return [];
+	let a = [], o = (t) => {
+		if (t.screen) {
+			let o = r[t.screen];
+			if (o) {
+				let r = e(t.name) || t.screen;
+				a.push({
+					group: e("shell.palette.group.navigate", "Navigate"),
+					icon: h(t.icon || o.display?.icon || "folder"),
+					label: e("shell.palette.go_to", "Go to {name}", { name: r }),
+					act: () => i({
+						type: "nav",
+						id: t.screen,
+						route: o.route
+					}),
+					actionType: "nav"
+				}), o.type === "list" && o.entity && a.push({
+					group: e("shell.palette.group.create", "Create"),
+					icon: /* @__PURE__ */ f(n.plus, { size: 14 }),
+					label: e("shell.palette.new_in_screen", "New {name}", { name: r }),
+					act: () => i({
+						type: "new",
+						id: t.screen,
+						route: o.route
+					}),
+					actionType: "new"
+				});
+			}
+		}
+		for (let e of t.items || []) o(e);
+		for (let e of t.children || []) o(e);
+	};
+	for (let e of t) o(e);
+	return a;
+}
+function _({ open: a, onClose: h, onAction: _, mode: v = "default", navigation: y, screens: b, includeAI: x = !0, aiName: S = "" }) {
+	let C = e(), w = o()?.app_name?.trim(), [T, E] = u(""), [D, O] = u(0), k = l(null), A = t().category === "phone";
+	s(() => {
+		a && (setTimeout(() => k.current?.focus(), 50), E(v === "new" ? C("shell.palette.new_in_screen", "New {name}").split("{name}")[0] : ""), O(0));
+	}, [
+		a,
+		v,
+		C
+	]);
+	let j = c(() => {
+		let e = [];
+		if (e.push(...g(C, y, b, _)), x) {
+			let t = C("shell.palette.group.ai", "AI");
+			e.push({
+				group: t,
+				icon: /* @__PURE__ */ f(n.sparkle, { size: 14 }),
+				label: C("shell.palette.ai.draft_entity", "Draft YAML for new entity…"),
+				hint: "✨",
+				act: () => _({
+					type: "ai",
+					q: "draft entity"
+				}),
+				actionType: "ai"
+			}, {
+				group: t,
+				icon: /* @__PURE__ */ f(n.sparkle, { size: 14 }),
+				label: C("shell.palette.ai.explain_record", "Explain this record with AI"),
+				hint: "✨",
+				act: () => _({ type: "ai-panel" }),
+				actionType: "ai-panel"
+			}, {
+				group: t,
+				icon: /* @__PURE__ */ f(n.sparkle, { size: 14 }),
+				label: C("shell.palette.ai.summarize_rows", "Summarize activity on selected rows"),
+				hint: "✨",
+				act: () => _({ type: "ai-panel" }),
+				actionType: "ai-panel"
+			});
+		}
+		let t = C("shell.palette.group.tabs", "Tabs"), r = C("shell.palette.group.settings", "Settings");
+		return e.push({
+			group: t,
+			icon: /* @__PURE__ */ f(n.x, { size: 14 }),
+			label: C("shell.tabs.close_all", "Close all tabs"),
+			act: () => _({
+				type: "tab-close",
+				tabCloseScope: "all"
+			}),
+			actionType: "tab-close"
+		}, {
+			group: t,
+			icon: /* @__PURE__ */ f(n.x, { size: 14 }),
+			label: C("shell.tabs.close_other_tabs", "Close other tabs"),
+			act: () => _({
+				type: "tab-close",
+				tabCloseScope: "others"
+			}),
+			actionType: "tab-close"
+		}, {
+			group: t,
+			icon: /* @__PURE__ */ f(n.x, { size: 14 }),
+			label: C("shell.tabs.close_right", "Close tabs to the right"),
+			act: () => _({
+				type: "tab-close",
+				tabCloseScope: "right"
+			}),
+			actionType: "tab-close"
+		}, {
+			group: r,
+			icon: /* @__PURE__ */ f(n.settings, { size: 14 }),
+			label: C("shell.palette.open_preferences", "Open Preferences"),
+			act: () => _({
+				type: "nav",
+				id: "preferences",
+				route: "/preferences"
+			}),
+			actionType: "nav"
+		}, {
+			group: r,
+			icon: /* @__PURE__ */ f(n.moon, { size: 14 }),
+			label: C("shell.palette.toggle_dark_mode", "Toggle dark mode"),
+			act: () => _({ type: "theme" }),
+			actionType: "theme"
+		}), v === "new" ? e.filter((e) => e.actionType === "new") : e;
+	}, [
+		C,
+		y,
+		b,
+		x,
+		_,
+		v
+	]), M = T ? j.filter((e) => e.label.toLowerCase().includes(T.toLowerCase()) || e.group.toLowerCase().includes(T.toLowerCase())) : j, N = {};
+	return M.forEach((e, t) => {
+		N[e.group] = N[e.group] || [], N[e.group].push({
+			...e,
+			_i: t
+		});
+	}), a ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
+		onClick: h,
+		style: {
+			position: "fixed",
+			inset: 0,
+			background: "var(--scrim-strong)",
+			zIndex: 70,
+			backdropFilter: "blur(3px)"
+		}
+	}), /* @__PURE__ */ p("div", {
+		role: "dialog",
+		"aria-label": C("shell.palette.label", "Command palette"),
+		"data-testid": "command-palette",
+		style: {
+			position: "fixed",
+			top: "calc(var(--safe-area-top) + 12px)",
+			left: "50%",
+			transform: "translateX(-50%)",
+			width: "min(640px, calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 16px))",
+			zIndex: 71,
+			background: "var(--surface)",
+			borderRadius: 12,
+			boxShadow: "var(--shadow-lg)",
+			border: "1px solid var(--border)",
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			maxHeight: "calc(var(--app-height) - var(--safe-area-top) - var(--safe-area-bottom) - 24px)",
+			boxSizing: "border-box",
+			minWidth: 0
+		},
+		onKeyDown: (e) => {
+			e.key === "ArrowDown" ? (e.preventDefault(), O(Math.min(D + 1, M.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), O(Math.max(D - 1, 0))) : e.key === "Enter" && M[D] ? (M[D].act(), h()) : e.key === "Enter" && x && T.trim() ? (e.preventDefault(), _({
+				type: "ai",
+				q: T.trim()
+			}), h()) : e.key === "Escape" && h();
+		},
+		children: [
+			/* @__PURE__ */ p("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					padding: "14px 16px",
+					gap: 10,
+					borderBottom: "1px solid var(--divider)",
+					minWidth: 0
+				},
+				children: [
+					/* @__PURE__ */ f(n.command, {
+						size: 15,
+						style: { color: "var(--text-3)" }
+					}),
+					/* @__PURE__ */ f("input", {
+						ref: k,
+						value: T,
+						onChange: (e) => {
+							E(e.target.value), O(0);
+						},
+						placeholder: x ? C("shell.palette.search_ai", "Search or run command — type / for AI") : C("shell.palette.search", "Search or run command"),
+						style: {
+							flex: 1,
+							border: 0,
+							outline: 0,
+							background: "transparent",
+							fontSize: "var(--control-font-size)",
+							color: "var(--text)",
+							minWidth: 0
+						}
+					}),
+					A && /* @__PURE__ */ f(r, {
+						icon: /* @__PURE__ */ f(n.x, { size: 14 }),
+						title: C("shell.palette.close", "Close command palette"),
+						onClick: h
+					}),
+					!A && /* @__PURE__ */ f(i, { children: m })
+				]
+			}),
+			/* @__PURE__ */ p("div", {
+				style: {
+					flex: 1,
+					overflowY: "auto",
+					padding: 6
+				},
+				children: [Object.entries(N).map(([e, t]) => /* @__PURE__ */ p("div", {
+					style: { marginBottom: 6 },
+					children: [/* @__PURE__ */ f("div", {
+						style: {
+							padding: "8px 10px 4px",
+							fontSize: 10,
+							fontWeight: 700,
+							color: "var(--text-3)",
+							letterSpacing: "0.08em",
+							textTransform: "uppercase"
+						},
+						children: e
+					}), t.map((e) => /* @__PURE__ */ p("div", {
+						onClick: () => {
+							e.act(), h();
+						},
+						onMouseEnter: () => O(e._i),
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 10,
+							padding: "7px 10px",
+							borderRadius: 6,
+							cursor: "pointer",
+							background: e._i === D ? "var(--accent-soft)" : "transparent",
+							color: e._i === D ? "var(--accent)" : "var(--text-2)",
+							minWidth: 0
+						},
+						children: [
+							/* @__PURE__ */ f("span", {
+								style: {
+									color: e._i === D ? "var(--accent)" : "var(--text-3)",
+									display: "flex"
+								},
+								children: e.icon
+							}),
+							/* @__PURE__ */ f("span", {
+								style: {
+									flex: 1,
+									minWidth: 0,
+									fontSize: 13,
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap"
+								},
+								children: e.label
+							}),
+							e.hint && /* @__PURE__ */ f("span", {
+								className: "mono",
+								style: {
+									fontSize: 10.5,
+									color: "var(--text-4)"
+								},
+								children: e.hint
+							})
+						]
+					}, `${e.group}:${e.label}`))]
+				}, e)), M.length === 0 && /* @__PURE__ */ p("div", {
+					style: {
+						padding: "24px 16px",
+						textAlign: "center",
+						color: "var(--text-3)",
+						fontSize: 12.5
+					},
+					children: [
+						/* @__PURE__ */ f(n.sparkle, {
+							size: 20,
+							style: {
+								color: "var(--accent)",
+								marginBottom: 8
+							}
+						}),
+						/* @__PURE__ */ f("div", { children: x ? C("shell.palette.ask_prompt", "Press Enter to ask {name}:", { name: S }) : C("shell.palette.no_matches", "No matches") }),
+						x && /* @__PURE__ */ f("div", {
+							style: {
+								fontWeight: 600,
+								color: "var(--text)",
+								marginTop: 4
+							},
+							children: C("shell.palette.ask_query", "“{query}”", { query: T })
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ p("div", {
+				style: {
+					padding: "8px 12px",
+					borderTop: "1px solid var(--divider)",
+					background: "var(--surface-2)",
+					display: "flex",
+					alignItems: "center",
+					flexWrap: "wrap",
+					gap: 10,
+					fontSize: 11,
+					color: "var(--text-3)",
+					minWidth: 0
+				},
+				children: [
+					/* @__PURE__ */ p("span", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 4,
+							minWidth: 0
+						},
+						children: [
+							/* @__PURE__ */ f(i, { children: "↑↓" }),
+							" ",
+							C("shell.palette.hint.navigate", "navigate")
+						]
+					}),
+					/* @__PURE__ */ p("span", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 4,
+							minWidth: 0
+						},
+						children: [
+							/* @__PURE__ */ f(i, { children: "↵" }),
+							" ",
+							C("shell.palette.hint.select", "select")
+						]
+					}),
+					x && /* @__PURE__ */ p("span", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 4,
+							minWidth: 0
+						},
+						children: [
+							/* @__PURE__ */ f(i, { children: "/" }),
+							" ",
+							C("shell.palette.hint.ask_ai", "ask AI")
+						]
+					}),
+					/* @__PURE__ */ f("div", { style: { flex: 1 } }),
+					w && /* @__PURE__ */ f("span", {
+						className: "mono",
+						children: w
+					})
+				]
+			})
+		]
+	})] }) : null;
+}
+//#endregion
+export { _ as CommandPalette };

package/dist-lib/CopyButton-C0iEvaT1.js

@@ -0,0 +1,119 @@
+import { wt as e } from "./useCurrentScreen--UovgvRj.js";
+import { t } from "./Icons-lt-7lhYR.js";
+import { forwardRef as n, useCallback as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/primitives/Btn.tsx
+var s = n(function({ kind: e = "default", size: t = "sm", icon: n, iconRight: r, children: i, onClick: a, active: s, danger: c, style: l, disabled: u, type: d = "button", title: f, ...p }, m) {
+	let h = {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 6,
+		height: t === "xs" ? 24 : t === "sm" ? 28 : t === "md" ? 32 : 36,
+		padding: `0 ${t === "xs" ? 8 : t === "sm" ? 10 : t === "md" ? 12 : 14}px`,
+		borderRadius: 6,
+		fontSize: t === "xs" ? 11.5 : 12.5,
+		fontWeight: 500,
+		cursor: "pointer",
+		transition: "background .12s, border-color .12s, color .12s",
+		whiteSpace: "nowrap"
+	};
+	return e === "primary" ? Object.assign(h, {
+		background: "var(--accent)",
+		color: "var(--accent-foreground)",
+		border: "1px solid var(--accent)"
+	}) : e === "ghost" ? Object.assign(h, {
+		background: "transparent",
+		color: s ? "var(--text)" : "var(--text-2)",
+		border: "1px solid transparent",
+		...s && { background: "var(--surface-3)" }
+	}) : e === "subtle" ? Object.assign(h, {
+		background: s ? "var(--surface-3)" : "var(--surface-2)",
+		color: "var(--text-2)",
+		border: "1px solid var(--border)"
+	}) : Object.assign(h, {
+		background: "var(--surface)",
+		color: "var(--text)",
+		border: "1px solid var(--border)"
+	}), c && (e === "primary" ? Object.assign(h, {
+		background: "var(--danger)",
+		color: "var(--accent-foreground)",
+		borderColor: "var(--danger)"
+	}) : Object.assign(h, {
+		color: "var(--danger)",
+		borderColor: "var(--border)"
+	})), u && Object.assign(h, {
+		opacity: .5,
+		pointerEvents: "none"
+	}), Object.assign(h, l || {}), /* @__PURE__ */ o("button", {
+		ref: m,
+		type: d,
+		onClick: a,
+		title: f,
+		disabled: u,
+		...p,
+		style: h,
+		onMouseEnter: (t) => {
+			e === "primary" && c ? t.currentTarget.style.background = "var(--danger-hover, var(--danger))" : e === "primary" ? t.currentTarget.style.background = "var(--accent-hover)" : t.currentTarget.style.background = "var(--surface-3)";
+		},
+		onMouseLeave: (e) => {
+			e.currentTarget.style.background = h.background ?? "";
+		},
+		children: [
+			n,
+			i,
+			r
+		]
+	});
+}), c = n(function({ icon: e, onClick: t, title: n, size: r = 28, active: i, disabled: o, style: s }, c) {
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		ref: c,
+		onClick: t,
+		title: n,
+		"aria-label": n,
+		disabled: o,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: r,
+			height: r,
+			borderRadius: 6,
+			border: "1px solid transparent",
+			background: i ? "var(--surface-3)" : "transparent",
+			color: i ? "var(--text)" : "var(--text-2)",
+			cursor: o ? "not-allowed" : "pointer",
+			padding: 0,
+			opacity: o ? .4 : 1,
+			...s
+		},
+		onMouseEnter: (e) => {
+			o || (e.currentTarget.style.background = "var(--surface-3)", e.currentTarget.style.color = "var(--text)");
+		},
+		onMouseLeave: (e) => {
+			o || (e.currentTarget.style.background = i ? "var(--surface-3)" : "transparent", e.currentTarget.style.color = i ? "var(--text)" : "var(--text-2)");
+		},
+		children: e
+	});
+});
+//#endregion
+//#region src/components/shared/CopyButton.tsx
+function l({ value: n, title: o, size: s = "icon" }) {
+	let l = e(), [u, d] = i(!1), f = r(async (e) => {
+		e.stopPropagation(), e.preventDefault();
+		try {
+			await navigator.clipboard.writeText(n), d(!0), setTimeout(() => d(!1), 2e3);
+		} catch {}
+	}, [n]), p = s === "sm" ? 12 : 14;
+	return /* @__PURE__ */ a(c, {
+		size: s === "sm" ? 22 : 28,
+		icon: u ? /* @__PURE__ */ a(t.check, {
+			size: p,
+			style: { color: "var(--success)" }
+		}) : /* @__PURE__ */ a(t.copy, { size: p }),
+		onClick: f,
+		title: o ?? l("control.copy_to_clipboard", "Copy to clipboard")
+	});
+}
+//#endregion
+export { c as n, s as r, l as t };

package/dist-lib/DirtyTabsCloseDialog.impl-DWaFaWKn.js

@@ -0,0 +1,191 @@
+import { Nt as e, wt as t } from "./useCurrentScreen--UovgvRj.js";
+import { t as n } from "./Icons-lt-7lhYR.js";
+import { n as r, r as i } from "./CopyButton-C0iEvaT1.js";
+import { t as a } from "./DynamicIcon-DuBSz6TZ.js";
+import { t as o } from "./useTabTitle-CZZnWIQi.js";
+import { useEffect as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/layout/DirtyTabsCloseDialog.impl.tsx
+function d({ pending: d, onCancel: f, onCloseClean: p, onDiscardAll: m }) {
+	let h = t(), g = o();
+	if (s(() => {
+		if (!d) return;
+		let e = (e) => {
+			e.key === "Escape" && f();
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [d, f]), !d) return null;
+	let _ = d.ids.length, v = d.dirtyTabs.length, y = d.cleanIds.length, b = e(h, "shell.tabs.close_dialog.title", _, {
+		one: "Close {count} tab?",
+		other: "Close {count} tabs?"
+	});
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
+		onClick: f,
+		style: {
+			position: "fixed",
+			inset: 0,
+			background: "var(--scrim)",
+			zIndex: 60,
+			backdropFilter: "blur(2px)"
+		}
+	}), /* @__PURE__ */ u("div", {
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": b,
+		style: {
+			position: "fixed",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			zIndex: 61,
+			width: 460,
+			maxWidth: "calc(100vw - 32px)",
+			background: "var(--surface)",
+			borderRadius: 12,
+			boxShadow: "var(--shadow-lg)",
+			border: "1px solid var(--border)",
+			overflow: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ u("div", {
+				style: {
+					padding: "14px 18px",
+					display: "flex",
+					alignItems: "center",
+					gap: 10
+				},
+				children: [
+					/* @__PURE__ */ l("span", {
+						style: {
+							width: 28,
+							height: 28,
+							borderRadius: 7,
+							background: "var(--warn-soft)",
+							color: "var(--warn)",
+							display: "inline-flex",
+							alignItems: "center",
+							justifyContent: "center",
+							flexShrink: 0
+						},
+						children: /* @__PURE__ */ l(n.warning, { size: 15 })
+					}),
+					/* @__PURE__ */ u("div", {
+						style: {
+							flex: 1,
+							minWidth: 0
+						},
+						children: [/* @__PURE__ */ l("div", {
+							style: {
+								fontSize: 14,
+								fontWeight: 600,
+								color: "var(--text)"
+							},
+							children: b
+						}), /* @__PURE__ */ l("div", {
+							style: {
+								fontSize: 11.5,
+								color: "var(--text-3)",
+								marginTop: 2
+							},
+							children: e(h, "shell.tabs.close_dialog.dirty", v, {
+								one: "{count} tab has unsaved changes.",
+								other: "{count} tabs have unsaved changes."
+							})
+						})]
+					}),
+					/* @__PURE__ */ l(r, {
+						icon: /* @__PURE__ */ l(n.x, { size: 14 }),
+						onClick: f,
+						title: h("dialog.cancel", "Cancel")
+					})
+				]
+			}),
+			/* @__PURE__ */ u("div", {
+				style: { padding: "0 18px 14px" },
+				children: [/* @__PURE__ */ l("div", {
+					style: {
+						background: "var(--surface-2)",
+						border: "1px solid var(--border)",
+						borderRadius: 8,
+						padding: "8px 10px",
+						maxHeight: 190,
+						overflow: "auto"
+					},
+					children: d.dirtyTabs.map((e) => /* @__PURE__ */ u("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 8,
+							padding: "4px 0",
+							fontSize: 12,
+							color: "var(--text-2)",
+							minWidth: 0
+						},
+						children: [
+							/* @__PURE__ */ l("span", { style: {
+								width: 6,
+								height: 6,
+								borderRadius: 999,
+								background: "var(--warn)",
+								flexShrink: 0
+							} }),
+							e.icon && /* @__PURE__ */ l(a, {
+								name: e.icon,
+								size: 12,
+								style: { color: "var(--text-4)" }
+							}),
+							/* @__PURE__ */ l("span", {
+								style: {
+									whiteSpace: "nowrap",
+									overflow: "hidden",
+									textOverflow: "ellipsis"
+								},
+								children: g(e)
+							})
+						]
+					}, e.id))
+				}), y > 0 && /* @__PURE__ */ l("div", {
+					style: {
+						fontSize: 11.5,
+						color: "var(--text-4)",
+						marginTop: 10
+					},
+					children: e(h, "shell.tabs.close_dialog.clean", y, {
+						one: "Other {count} tab has no unsaved changes.",
+						other: "Other {count} tabs have no unsaved changes."
+					})
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				style: {
+					padding: "10px 16px",
+					borderTop: "1px solid var(--divider)",
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					background: "var(--surface-2)"
+				},
+				children: [
+					/* @__PURE__ */ l("div", { style: { flex: 1 } }),
+					/* @__PURE__ */ l(i, {
+						onClick: f,
+						children: h("dialog.cancel", "Cancel")
+					}),
+					y > 0 && /* @__PURE__ */ l(i, {
+						autoFocus: !0,
+						onClick: p,
+						children: h("shell.tabs.close_dialog.close_clean", "Close clean only")
+					}),
+					/* @__PURE__ */ l(i, {
+						kind: "primary",
+						danger: !0,
+						onClick: m,
+						children: y > 0 ? h("shell.tabs.close_dialog.discard_all", "Discard all") : h("shell.tabs.close_dialog.discard", "Discard")
+					})
+				]
+			})
+		]
+	})] });
+}
+//#endregion
+export { d as DirtyTabsCloseDialog };