@declarion/react 0.65.0 → 0.66.0

package/dist-lib/components/chrome/HighlightsStrip.js

@@ -0,0 +1,39 @@
+import { Fragment as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/chrome/HighlightsStrip.tsx
+function r({ items: r }) {
+	return r.length === 0 ? null : /* @__PURE__ */ t("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			flexWrap: "wrap",
+			gap: "6px 0",
+			fontSize: 12
+		},
+		children: r.map((r, i) => /* @__PURE__ */ n(e, { children: [i > 0 && /* @__PURE__ */ t("span", { style: {
+			width: 1,
+			height: 12,
+			background: "var(--divider)",
+			marginInline: 12
+		} }), /* @__PURE__ */ n("span", {
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 6,
+				lineHeight: 1.3
+			},
+			children: [/* @__PURE__ */ t("span", {
+				style: {
+					color: "var(--text-3)",
+					fontSize: 11.5
+				},
+				children: r.label
+			}), /* @__PURE__ */ t("span", {
+				style: { color: "var(--text)" },
+				children: r.value
+			})]
+		})] }, i))
+	});
+}
+//#endregion
+export { r as HighlightsStrip };

package/dist-lib/{PageHeader-DiwLe7CO.js → components/chrome/PageHeader.js}

@@ -1,19 +1,23 @@
-import { W as e, Xt as t, n, wt as r } from "./useCurrentScreen-BZOHBGQZ.js";
-import { t as i } from "./Icons-lt-7lhYR.js";
-import { n as a } from "./CopyButton-DRIT_f0k.js";
-import { L as o } from "./PropertyGridEditor-XrP6TZ5s.js";
-import { a as s, n as c } from "./useBrandingChrome-bxaR3G1R.js";
-import { t as l } from "./useScreenBack-DENlz844.js";
-import { t as u } from "./headerActionZone-bef-tZZ7.js";
+import { useEmbed as e } from "../../embed/EmbedContext.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { IconBtn as n } from "../primitives/IconBtn.js";
+import { InfoTooltip as r } from "../primitives/Tooltip.js";
+import { useText as i } from "../../hooks/useText.js";
+import { useTabStore as a } from "../../stores/tabs.js";
+import { useEmbedNavigate as o } from "../../embed/useEmbedNavigate.js";
+import { useBrandingChrome as s } from "../../hooks/useBrandingChrome.js";
+import { useCurrentScreen as c } from "../../hooks/useCurrentScreen.js";
+import { useScreenBack as l } from "../../hooks/useScreenBack.js";
+import { headerActionZoneStyle as u } from "./headerActionZone.js";
 import { useCallback as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/chrome/PageHeader.tsx
 function m({ title: m, description: h, backTo: g, actions: _ }) {
-	let v = r(), y = n(), b = m ?? v(y?.screen?.display?.name) ?? "", x = h ?? v(y?.screen?.display?.description), S = c("custom"), C = S.isVisible("show_title"), w = S.isVisible("show_actions"), T = t(), E = e(), D = d(() => {
+	let v = i(), y = c(), b = m ?? v(y?.screen?.display?.name) ?? "", x = h ?? v(y?.screen?.display?.description), S = s("custom"), C = S.isVisible("show_title"), w = S.isVisible("show_actions"), T = e(), E = o(), D = d(() => {
 		if (g) {
 			if (!T.enabled) {
-				let e = o.getState().findTabByPathname(g);
-				e && o.getState().switchTab(e.id);
+				let e = a.getState().findTabByPathname(g);
+				e && a.getState().switchTab(e.id);
 			}
 			E(g);
 		}
@@ -32,8 +36,8 @@ function m({ title: m, description: h, backTo: g, actions: _ }) {
 			minWidth: 0
 		},
 		children: [
-			C && (O || !!g) && /* @__PURE__ */ f(a, {
-				icon: /* @__PURE__ */ f(i.back, { size: 14 }),
+			C && (O || !!g) && /* @__PURE__ */ f(n, {
+				icon: /* @__PURE__ */ f(t.back, { size: 14 }),
 				onClick: k,
 				title: v("shell.back", "Back")
 			}),
@@ -42,7 +46,7 @@ function m({ title: m, description: h, backTo: g, actions: _ }) {
 					margin: 0,
 					fontSize: "var(--page-title-size, var(--page-title-size-page))",
 					lineHeight: "var(--page-title-line-height, var(--page-title-line-height-page))",
-					fontWeight: 600,
+					fontWeight: "var(--page-title-weight)",
 					letterSpacing: "-0.01em",
 					color: "var(--text)",
 					overflow: "hidden",
@@ -56,7 +60,7 @@ function m({ title: m, description: h, backTo: g, actions: _ }) {
 				},
 				children: b
 			}),
-			C && x && /* @__PURE__ */ f(s, {
+			C && x && /* @__PURE__ */ f(r, {
 				label: x,
 				"data-testid": "page-description-info"
 			}),
@@ -68,4 +72,4 @@ function m({ title: m, description: h, backTo: g, actions: _ }) {
 	});
 }
 //#endregion
-export { m as t };
+export { m as PageHeader };

package/dist-lib/{PageShell-BJz1MiTH.js → components/chrome/PageShell.js}

@@ -1,5 +1,5 @@
-import { xt as e } from "./useCurrentScreen-BZOHBGQZ.js";
-import { t } from "./page-inset-D_kkVwwN.js";
+import { useResponsiveMode as e } from "../../hooks/useResponsiveMode.js";
+import { pageInsetX as t } from "../../lib/page-inset.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/chrome/PageShell.tsx
 function i({ header: i, children: a, scrollRef: o }) {
@@ -44,4 +44,4 @@ function i({ header: i, children: a, scrollRef: o }) {
 	});
 }
 //#endregion
-export { i as t };
+export { i as PageShell };

package/dist-lib/components/chrome/RecordHeader.js

@@ -0,0 +1,119 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { IconBtn as t } from "../primitives/IconBtn.js";
+import { Pill as n } from "../primitives/Pill.js";
+import { InfoTooltip as r } from "../primitives/Tooltip.js";
+import { useText as i } from "../../hooks/useText.js";
+import { RecordIdBadge as a } from "../primitives/RecordIdBadge.js";
+import { headerActionZoneStyle as o } from "./headerActionZone.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/chrome/RecordHeader.tsx
+var u = 160;
+function d({ icon: d, title: f, recordId: p, description: m, highlights: h, mode: g, dirty: _ = !1, showBack: v = !1, onBack: y, right: b, identityControls: x, showTitle: S = !0 }) {
+	let C = i();
+	return /* @__PURE__ */ l("div", {
+		style: {
+			display: "flex",
+			alignItems: "flex-start",
+			gap: 10,
+			flexWrap: "wrap",
+			minWidth: 0
+		},
+		children: [
+			S && v && /* @__PURE__ */ c("div", {
+				style: {
+					paddingTop: 4,
+					flexShrink: 0
+				},
+				children: /* @__PURE__ */ c(t, {
+					size: 26,
+					icon: /* @__PURE__ */ c(e.back, { size: 14 }),
+					title: C("shell.back", "Back"),
+					onClick: y
+				})
+			}),
+			S && d && /* @__PURE__ */ c("div", {
+				style: {
+					flexShrink: 0,
+					paddingTop: 2
+				},
+				children: /* @__PURE__ */ c("span", {
+					style: {
+						width: 32,
+						height: 32,
+						borderRadius: "var(--radius-md)",
+						background: "var(--accent-soft)",
+						color: "var(--accent)",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: d
+				})
+			}),
+			S && /* @__PURE__ */ l(s, { children: [
+				/* @__PURE__ */ c("h1", {
+					style: {
+						margin: 0,
+						fontSize: "var(--page-title-size, var(--page-title-size-detail))",
+						fontWeight: "var(--page-title-weight)",
+						letterSpacing: 0,
+						lineHeight: "var(--page-title-line-height, var(--page-title-line-height-detail))",
+						color: "var(--text)",
+						minWidth: u,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+						overflowWrap: "anywhere",
+						maxWidth: "100%",
+						flexGrow: 0,
+						flexShrink: 1,
+						flexBasis: "auto"
+					},
+					children: f
+				}),
+				p && p !== f && /* @__PURE__ */ c(a, { value: p }),
+				m && /* @__PURE__ */ c(r, {
+					label: m,
+					"data-testid": "detail-description-info"
+				}),
+				x,
+				g === "edit" && _ && /* @__PURE__ */ l("span", {
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						gap: 5,
+						fontSize: 11,
+						color: "var(--warn)"
+					},
+					children: [/* @__PURE__ */ c("span", { style: {
+						width: 6,
+						height: 6,
+						borderRadius: 999,
+						background: "var(--warn)"
+					} }), C("shell.record.unsaved", "Unsaved")]
+				}),
+				g === "create" && /* @__PURE__ */ c(n, {
+					tone: "violet",
+					size: "xs",
+					dot: !0,
+					children: C("shell.record.new", "New record")
+				})
+			] }),
+			b && /* @__PURE__ */ c("div", {
+				role: "toolbar",
+				"aria-label": C("shell.record.page_actions", "Page actions"),
+				style: o,
+				children: b
+			}),
+			h && g === "display" && /* @__PURE__ */ c("div", {
+				style: {
+					flexBasis: "100%",
+					minWidth: 0
+				},
+				children: h
+			})
+		]
+	});
+}
+//#endregion
+export { d as RecordHeader };

package/dist-lib/{headerActionZone-bef-tZZ7.js → components/chrome/headerActionZone.js}

@@ -11,4 +11,4 @@ var e = {
 	justifyContent: "flex-end"
 };
 //#endregion
-export { e as t };
+export { e as headerActionZoneStyle };