@declarion/react 0.65.1 → 0.66.0

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

@@ -0,0 +1,149 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { useAnchoredTooltip as t } from "../primitives/Tooltip.js";
+import { useText as n } from "../../hooks/useText.js";
+import { DynamicIcon as r } from "../shared/DynamicIcon.js";
+import { isValidLogoUrl as i } from "../../lib/branding.js";
+import { useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/layout/Rail.tsx
+var l = 32;
+function u(e, t) {
+	return !t || t.length === 0 ? [] : t.map((t) => ({
+		id: t.code,
+		icon: t.icon || void 0,
+		label: e(t.name) || t.code
+	}));
+}
+function d({ activeArea: t, onPick: r, onToggleAI: a, aiOpen: o, onCmdK: d, areas: m, branding: h }) {
+	let g = n(), _ = u(g, m), v = h?.app_name ?? "", y = i(h?.app_logo) ? h?.app_logo : void 0;
+	return /* @__PURE__ */ c("div", {
+		style: {
+			gridArea: "rail",
+			background: "var(--rail)",
+			color: "var(--rail-fg)",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			padding: "8px 0",
+			gap: 2
+		},
+		children: [
+			/* @__PURE__ */ s("div", {
+				style: {
+					width: l,
+					height: l,
+					borderRadius: "var(--radius-md)",
+					background: y ? "transparent" : "linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%)",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					marginBottom: 8,
+					boxShadow: y ? "none" : "var(--shadow-sm)",
+					overflow: "hidden"
+				},
+				title: v ? g("shell.rail.home_named", "{brand} — home", { brand: v }) : g("shell.rail.home", "home"),
+				children: y ? /* @__PURE__ */ s("img", {
+					src: y,
+					alt: v,
+					width: l,
+					height: l,
+					style: {
+						display: "block",
+						objectFit: "contain"
+					}
+				}) : v ? /* @__PURE__ */ s("span", {
+					style: {
+						fontSize: 11,
+						fontWeight: 700,
+						letterSpacing: "0.04em"
+					},
+					children: v.charAt(0).toUpperCase()
+				}) : null
+			}),
+			_.map((e) => /* @__PURE__ */ s(f, {
+				item: e,
+				active: t === e.id,
+				onPick: r
+			}, e.id)),
+			/* @__PURE__ */ s("div", { style: { flex: 1 } }),
+			/* @__PURE__ */ s("button", {
+				onClick: d,
+				title: g("shell.palette.open", "Command Palette (⌘K)"),
+				style: p(!1),
+				children: e.command && /* @__PURE__ */ s(e.command, { size: 16 })
+			}),
+			/* @__PURE__ */ s("button", {
+				onClick: a,
+				title: g("shell.ai_assistant", "AI Assistant"),
+				style: {
+					...p(!1),
+					background: o ? "var(--accent)" : "transparent",
+					color: o ? "var(--rail-fg)" : "var(--rail-muted)"
+				},
+				children: e.sparkle && /* @__PURE__ */ s(e.sparkle, { size: 16 })
+			})
+		]
+	});
+}
+function f({ item: e, active: n, onPick: i }) {
+	let [l, u] = o(!1), d = a(null), f = t(d, e.label), p = n ? "var(--rail-active)" : l ? "var(--rail-hover)" : "transparent", m = n || l ? "var(--rail-fg)" : "var(--rail-muted)";
+	return /* @__PURE__ */ c("button", {
+		ref: d,
+		onClick: () => i(e.id),
+		"aria-label": e.label,
+		"aria-describedby": f.describedBy,
+		onMouseEnter: () => {
+			u(!0), f.triggerHandlers.onMouseEnter();
+		},
+		onMouseLeave: () => {
+			u(!1), f.triggerHandlers.onMouseLeave();
+		},
+		onFocus: f.triggerHandlers.onFocus,
+		onBlur: f.triggerHandlers.onBlur,
+		style: {
+			width: 36,
+			height: 36,
+			borderRadius: "var(--radius-md)",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			background: p,
+			color: m,
+			border: "none",
+			cursor: "pointer",
+			position: "relative"
+		},
+		children: [
+			e.icon ? /* @__PURE__ */ s(r, {
+				name: e.icon,
+				size: 16
+			}) : null,
+			n && /* @__PURE__ */ s("span", { style: {
+				position: "absolute",
+				left: -1,
+				top: 8,
+				bottom: 8,
+				width: 2,
+				background: "var(--accent)",
+				borderRadius: "var(--radius-xs)"
+			} }),
+			f.portal
+		]
+	});
+}
+function p(e) {
+	return {
+		width: 36,
+		height: 36,
+		borderRadius: "var(--radius-md)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		background: "transparent",
+		color: "var(--rail-muted)",
+		border: 0,
+		cursor: "pointer"
+	};
+}
+//#endregion
+export { d as Rail };

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

@@ -0,0 +1,362 @@
+import { useSchema as e } from "../../hooks/useSchema.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { Kbd as n } from "../primitives/Kbd.js";
+import { useText as r } from "../../hooks/useText.js";
+import { DynamicIcon as i } from "../shared/DynamicIcon.js";
+import { BrandLogo as a } from "../primitives/BrandLogo.js";
+import { useBrandingIdentity as o } from "../../hooks/useBranding.js";
+import { usePreferencesStore as s } from "../../stores/preferences.js";
+import { isModifiedClick as c } from "../../lib/utils.js";
+import { useTabNavigate as l } from "../../hooks/useTabNavigate.js";
+import { useIntentPrefetch as u } from "../../hooks/useIntentPrefetch.js";
+import { useMemo as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useLocation as g } from "react-router";
+//#region src/components/layout/Sidebar.tsx
+function _({ activeArea: i }) {
+	let c = r(), { data: u } = e(), _ = g(), y = l(), x = s((e) => e.sidebar), S = s((e) => e.set), C = x === "collapsed", [w, T] = f({}), E = o(), D = E?.app_name ?? "", O = E?.app_logo, k = E?.version_label ?? "", A = d(() => v(c, u?.navigation ?? [], i), [
+		c,
+		u?.navigation,
+		i
+	]), j = (e) => e ? _.pathname === e || _.pathname.startsWith(e + "/") : !1, M = (e, t) => {
+		if (!e.screen) return;
+		let n = u?.screens[e.screen];
+		n && y(n.route, {
+			title: c(e.name),
+			icon: e.icon,
+			topLevel: !0
+		});
+	};
+	return /* @__PURE__ */ h("aside", {
+		style: {
+			gridArea: "sidebar",
+			background: "var(--sidebar)",
+			borderRight: "1px solid var(--border)",
+			display: "flex",
+			flexDirection: "column",
+			overflow: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ m("div", {
+				style: {
+					height: 44,
+					display: "flex",
+					alignItems: "center",
+					padding: C ? 0 : "0 12px",
+					justifyContent: C ? "center" : "flex-start",
+					borderBottom: "1px solid var(--divider)",
+					gap: 8
+				},
+				children: C ? O ? /* @__PURE__ */ m(a, {
+					appLogo: O,
+					size: 18
+				}) : D ? /* @__PURE__ */ m("span", {
+					style: {
+						fontSize: 11,
+						fontWeight: 700,
+						color: "var(--accent-text)"
+					},
+					children: D.charAt(0)
+				}) : null : /* @__PURE__ */ h(p, { children: [
+					/* @__PURE__ */ m(a, {
+						appLogo: O,
+						size: 20
+					}),
+					/* @__PURE__ */ m("div", {
+						style: {
+							fontSize: 13,
+							fontWeight: 600,
+							letterSpacing: "-0.01em",
+							color: "var(--text)"
+						},
+						children: D
+					}),
+					k && /* @__PURE__ */ m("span", {
+						style: {
+							padding: "1px 6px",
+							background: "var(--accent-soft)",
+							color: "var(--accent-text)",
+							fontSize: 9.5,
+							fontWeight: 600,
+							borderRadius: "var(--radius-xs)",
+							letterSpacing: "0.04em",
+							textTransform: "uppercase"
+						},
+						children: k
+					})
+				] })
+			}),
+			/* @__PURE__ */ m("nav", {
+				style: {
+					flex: 1,
+					overflowY: "auto",
+					padding: C ? "8px 4px" : "8px 6px"
+				},
+				children: A.map((e, t) => /* @__PURE__ */ h("div", {
+					style: { marginBottom: 12 },
+					children: [!C && e.title && /* @__PURE__ */ m("div", {
+						style: {
+							fontSize: 9.5,
+							fontWeight: 700,
+							color: "var(--text-3)",
+							letterSpacing: "0.08em",
+							padding: "4px 10px 4px",
+							textTransform: "uppercase"
+						},
+						children: e.title
+					}), e.items.map((e, n) => {
+						let r = `${t}-${n}-${e.screen || c(e.name)}`, i = e.screen ? u?.screens[e.screen] : void 0, a = j(i?.route), o = !!(e.children && e.children.length > 0), s = !!w[r];
+						return /* @__PURE__ */ m(b, {
+							item: e,
+							href: i?.route,
+							collapsed: C,
+							active: a,
+							hasKids: o,
+							expanded: s,
+							onToggleExpand: () => T((e) => ({
+								...e,
+								[r]: !e[r]
+							})),
+							onPick: (t) => M(e, t),
+							resolveChild: (e) => e.screen ? u?.screens[e.screen] : void 0,
+							onPickChild: (e) => {
+								let t = e.screen ? u?.screens[e.screen] : void 0;
+								t && y(t.route, {
+									title: c(e.name),
+									icon: e.icon,
+									topLevel: !0
+								});
+							}
+						}, r);
+					})]
+				}, t))
+			}),
+			/* @__PURE__ */ h("div", {
+				style: {
+					padding: "6px 8px",
+					borderTop: "1px solid var(--divider)",
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					justifyContent: C ? "center" : "space-between"
+				},
+				children: [/* @__PURE__ */ m("button", {
+					onClick: () => S("sidebar", C ? "wide" : "collapsed"),
+					title: C ? c("shell.sidebar.expand", "Expand sidebar (⌘B)") : c("shell.sidebar.collapse", "Collapse sidebar (⌘B)"),
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						width: 26,
+						height: 26,
+						borderRadius: "var(--radius-sm)",
+						background: "transparent",
+						border: 0,
+						color: "var(--text-3)",
+						cursor: "pointer"
+					},
+					children: m(C ? t.right : t.left, { size: 14 })
+				}), !C && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", {
+					style: {
+						flex: 1,
+						fontSize: 11,
+						color: "var(--text-3)"
+					},
+					children: c("shell.sidebar.footer", "Docs · API · Help")
+				}), /* @__PURE__ */ m(n, { children: "?" })] })]
+			})
+		]
+	});
+}
+function v(e, t, n) {
+	let r = [];
+	for (let i of t) if (y(i, n)) {
+		if (i.items && i.items.length > 0) r.push({
+			title: e(i.name) || "",
+			items: i.items
+		});
+		else if (i.screen) {
+			let e = r.find((e) => e.title === "");
+			e || (e = {
+				title: "",
+				items: []
+			}, r.push(e)), e.items.push(i);
+		}
+	}
+	return r;
+}
+function y(e, t) {
+	return (e.area || "default") === t;
+}
+function b({ item: e, href: n, collapsed: a, active: o, hasKids: s, expanded: l, onToggleExpand: d, onPick: g, onPickChild: _, resolveChild: v }) {
+	let y = r(), [b, S] = f(!1), C = u(n), w = !!e.icon, T = y(e.name) || e.screen || "";
+	if (a) {
+		let t = {
+			width: 40,
+			height: 32,
+			margin: "2px auto",
+			borderRadius: "var(--radius-md)",
+			border: 0,
+			cursor: "pointer",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			background: o ? "var(--sidebar-active)" : b ? "var(--sidebar-hover)" : "transparent",
+			color: o ? "var(--accent)" : "var(--text-3)",
+			textDecoration: "none"
+		};
+		return n ? /* @__PURE__ */ m("a", {
+			href: n,
+			"data-declarion-native-link": "",
+			...C,
+			onClick: (e) => {
+				c(e) || (e.preventDefault(), g());
+			},
+			title: T,
+			onMouseEnter: () => S(!0),
+			onMouseLeave: () => S(!1),
+			style: t,
+			children: w && /* @__PURE__ */ m(i, {
+				name: e.icon,
+				size: 14
+			})
+		}) : /* @__PURE__ */ m("button", {
+			onClick: () => g(),
+			title: T,
+			onMouseEnter: () => S(!0),
+			onMouseLeave: () => S(!1),
+			style: t,
+			children: w && /* @__PURE__ */ m(i, {
+				name: e.icon,
+				size: 14
+			})
+		});
+	}
+	let E = {
+		width: "calc(100% - 4px)",
+		margin: "0 2px",
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		padding: "5px 8px",
+		borderRadius: "var(--radius-sm)",
+		border: 0,
+		cursor: "pointer",
+		textAlign: "left",
+		background: o ? "var(--sidebar-active)" : b ? "var(--sidebar-hover)" : "transparent",
+		color: o ? "var(--accent)" : "var(--text-2)",
+		fontSize: 12.5,
+		fontWeight: o ? 600 : 500,
+		textDecoration: "none"
+	}, D = /* @__PURE__ */ h(p, { children: [
+		w && /* @__PURE__ */ m(i, {
+			name: e.icon,
+			size: 14
+		}),
+		/* @__PURE__ */ m("span", {
+			style: { flex: 1 },
+			children: T
+		}),
+		e.badge && /* @__PURE__ */ m("span", {
+			style: {
+				padding: "1px 5px",
+				background: "var(--surface-3)",
+				color: "var(--text-2)",
+				borderRadius: "var(--radius-xs)",
+				fontSize: 10,
+				fontWeight: 600
+			},
+			children: e.badge
+		}),
+		s && /* @__PURE__ */ m("span", {
+			role: "button",
+			"aria-label": l ? y("shell.sidebar.collapse_item", "Collapse") : y("shell.sidebar.expand_item", "Expand"),
+			onClick: (e) => {
+				e.stopPropagation(), e.preventDefault(), d();
+			},
+			style: {
+				display: "inline-flex",
+				padding: 2,
+				cursor: "pointer"
+			},
+			children: /* @__PURE__ */ m(t.down, {
+				size: 11,
+				style: {
+					transform: l ? "rotate(0)" : "rotate(-90deg)",
+					transition: "transform .15s",
+					color: "var(--text-3)"
+				}
+			})
+		})
+	] });
+	return /* @__PURE__ */ h("div", { children: [n ? /* @__PURE__ */ m("a", {
+		href: n,
+		"data-declarion-native-link": "",
+		...C,
+		onClick: (e) => {
+			c(e) || (e.preventDefault(), g());
+		},
+		onMouseEnter: () => S(!0),
+		onMouseLeave: () => S(!1),
+		style: E,
+		children: D
+	}) : /* @__PURE__ */ m("button", {
+		onClick: () => {
+			s && d();
+		},
+		onMouseEnter: () => S(!0),
+		onMouseLeave: () => S(!1),
+		style: E,
+		children: D
+	}), s && l && /* @__PURE__ */ m("div", {
+		style: {
+			marginLeft: 22,
+			borderLeft: "1px solid var(--divider)",
+			paddingLeft: 6
+		},
+		children: (e.children || []).map((e, t) => {
+			let n = v(e), r = e.screen || `${t}`;
+			return /* @__PURE__ */ m(x, {
+				label: y(e.name) || e.screen || "",
+				href: n?.route,
+				enabled: !!n,
+				onPick: () => _(e)
+			}, r);
+		})
+	})] });
+}
+function x({ label: e, href: t, enabled: n, onPick: r }) {
+	let [i, a] = f(!1), o = u(n ? t : void 0), s = {
+		width: "100%",
+		display: "block",
+		padding: "4px 8px",
+		borderRadius: "var(--radius-sm)",
+		background: i ? "var(--sidebar-hover)" : "transparent",
+		border: 0,
+		textAlign: "left",
+		cursor: n ? "pointer" : "default",
+		fontSize: 12,
+		color: "var(--text-3)",
+		textDecoration: "none"
+	};
+	return n && t ? /* @__PURE__ */ m("a", {
+		href: t,
+		"data-declarion-native-link": "",
+		...o,
+		onClick: (e) => {
+			c(e) || (e.preventDefault(), r());
+		},
+		onMouseEnter: () => a(!0),
+		onMouseLeave: () => a(!1),
+		style: s,
+		children: e
+	}) : /* @__PURE__ */ m("button", {
+		onClick: () => n && r(),
+		onMouseEnter: () => a(!0),
+		onMouseLeave: () => a(!1),
+		style: s,
+		children: e
+	});
+}
+//#endregion
+export { _ as Sidebar, v as buildSections };