@declarion/react 0.65.0 → 0.66.0

package/dist-lib/components/detail-layout/EvidenceBlock.js

@@ -0,0 +1,66 @@
+import { Pill as e } from "../primitives/Pill.js";
+import { useText as t } from "../../hooks/useText.js";
+import { verdictLabel as n, verdictTone as r } from "../../lib/evidence-verdict.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/detail-layout/EvidenceBlock.tsx
+function o(e, t) {
+	if (!e) return;
+	let n = new Date(e);
+	if (!Number.isNaN(n.getTime())) return n.toLocaleString(t);
+}
+function s({ evidence: s }) {
+	let c = t(), l = s?.verdict ?? "unverified", u = o(s?.verified_at, c.language), d = [];
+	return s?.seq && d.push(c("record.evidence.chain", "chain #{seq}", { seq: s.seq })), s?.generation && d.push(c("record.evidence.generation", "generation {number}", { number: s.generation })), /* @__PURE__ */ a("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6
+		},
+		children: [/* @__PURE__ */ a("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 10,
+				flexWrap: "wrap"
+			},
+			children: [
+				/* @__PURE__ */ i("span", {
+					style: {
+						fontSize: 12,
+						fontWeight: 600,
+						color: "var(--muted-foreground)"
+					},
+					children: c("record.evidence.title", "Evidence")
+				}),
+				d.length > 0 && /* @__PURE__ */ i("span", {
+					style: {
+						fontSize: 12,
+						color: "var(--muted-foreground)"
+					},
+					children: d.join(" · ")
+				}),
+				/* @__PURE__ */ i(e, {
+					tone: r(l),
+					size: "sm",
+					dot: !0,
+					children: n(c, l)
+				}),
+				u && /* @__PURE__ */ i("span", {
+					style: {
+						fontSize: 12,
+						color: "var(--muted-foreground)"
+					},
+					children: c("record.evidence.verified", "Verified {when}", { when: u })
+				})
+			]
+		}), s?.reason && /* @__PURE__ */ i("span", {
+			style: {
+				fontSize: 12,
+				color: "var(--destructive)"
+			},
+			children: s.reason
+		})]
+	});
+}
+//#endregion
+export { s as EvidenceBlock };

package/dist-lib/{FieldRow-DedGIY9R.js → components/detail-layout/FieldRow.js}

@@ -1,6 +1,7 @@
-import { wn as e, wt as t } from "./useCurrentScreen-BZOHBGQZ.js";
-import { t as n } from "./Icons-lt-7lhYR.js";
-import { t as r } from "./CopyButton-DRIT_f0k.js";
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { useText as n } from "../../hooks/useText.js";
+import { CopyButton as r } from "../shared/CopyButton.js";
 import { createContext as i, useContext as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/detail-layout/FieldRow.tsx
@@ -50,7 +51,7 @@ function y({ columns: e = 2, children: t }) {
 	});
 }
 function b({ label: e, children: i, span: o = !1, required: s, error: c, hint: f, actions: p, copyValue: g, mode: _ = "display", htmlFor: y, labelId: b, labelTitle: x, "data-testid": S }) {
-	let C = t(), w = a(v), T = o || w.stackPairs, E = !!c;
+	let C = n(), w = a(v), T = o || w.stackPairs, E = !!c;
 	return /* @__PURE__ */ u("div", {
 		className: "detail-row",
 		"data-error": E || void 0,
@@ -120,7 +121,7 @@ function b({ label: e, children: i, span: o = !1, required: s, error: c, hint: f
 					},
 					children: E && _ === "edit" ? /* @__PURE__ */ l("div", {
 						style: {
-							borderRadius: 6,
+							borderRadius: "var(--radius-md)",
 							boxShadow: "0 0 0 1.5px var(--danger)"
 						},
 						children: i
@@ -148,10 +149,10 @@ function b({ label: e, children: i, span: o = !1, required: s, error: c, hint: f
 					alignItems: "center",
 					gap: 4
 				},
-				children: [E && /* @__PURE__ */ l(n.warning, { size: 11 }), /* @__PURE__ */ l("span", { children: E ? c : f })]
+				children: [E && /* @__PURE__ */ l(t.warning, { size: 11 }), /* @__PURE__ */ l("span", { children: E ? c : f })]
 			})]
 		})]
 	});
 }
 //#endregion
-export { g as i, y as n, _ as r, b as t };
+export { b as FieldRow, y as FieldsGrid, _ as SPAN_FIELD_TYPES, g as copyableValue };

package/dist-lib/components/detail-layout/FieldsBlock.js

@@ -0,0 +1,74 @@
+import { useText as e } from "../../hooks/useText.js";
+import { ClassifiedFieldLocked as t } from "../primitives/ClassifiedFieldLocked.js";
+import { classificationTier as n, fieldAccessInfo as r } from "../../lib/field-classification.js";
+import { renderSchemaField as i, resolveSchemaFieldLabel as a, schemaFieldHasValue as o } from "../file-widgets/host.js";
+import { ActionButton as s } from "../actions/ActionButton.js";
+import { FieldRow as c, FieldsGrid as l, SPAN_FIELD_TYPES as u, copyableValue as d } from "./FieldRow.js";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/detail-layout/FieldsBlock.tsx
+function h({ fields: h, ctx: g }) {
+	let _ = e(), { entity: v, entityCode: y, record: b, mode: x, onFieldChange: S, schema: C } = g, w = g.columns ?? 2, T = g.hideEmptyFields && x === "display" ? h.filter((e) => o(v, b, e.code)) : h, E = w === 1 && h.length === 1;
+	return T.length === 0 ? null : /* @__PURE__ */ p(l, {
+		columns: w,
+		children: T.map((e) => {
+			let o = e.code, l = `${y ?? "field"}-${o}`, h = `${l}-label`, w = v.fields.get(o), T = !!(w?.auto || w?.readonly || w?.source), D = r(v, o), O = D?.read === "denied", k = D?.write === "denied", A = x === "display" ? O : k || O, j = T || x === "edit" && k ? "display" : x, M = A ? /* @__PURE__ */ p(t, {
+				tier: D.classification,
+				tierDef: n(C, v, o),
+				requiredPermission: D?.required_permission,
+				variant: j === "edit" ? "input" : "value"
+			}) : i({
+				entity: v,
+				entityCode: y,
+				fieldName: o,
+				record: b,
+				mode: j,
+				onChange: S && !T ? (e) => S(o, e) : void 0,
+				refs: g.refs,
+				entities: C?.entities,
+				screens: C?.screens,
+				t: _,
+				fieldId: l,
+				labelId: h,
+				structure: e.structure,
+				detailScreen: e.detail_screen
+			});
+			if (!M) return null;
+			let N = x === "display" && e.actions && e.actions.length > 0 ? /* @__PURE__ */ p(f, { children: e.actions.map((e, t) => /* @__PURE__ */ p(s, {
+				actionCode: `${o}.action[${t}]`,
+				action: e,
+				entityCode: y,
+				row: b,
+				variant: "ghost",
+				size: "icon"
+			}, t)) }) : void 0, P = !!w && u.has(w.type), F = j === "display" ? d(w, b?.[o]) : void 0, I = _(w?.display?.description);
+			return E && (P || e.structure) ? /* @__PURE__ */ m("div", {
+				style: { gridColumn: "1 / -1" },
+				children: [M, j === "edit" && I && /* @__PURE__ */ p("div", {
+					style: {
+						fontSize: 11.5,
+						lineHeight: 1.4,
+						color: "var(--text-3)",
+						marginTop: 3
+					},
+					children: I
+				})]
+			}, o) : /* @__PURE__ */ p(c, {
+				"data-testid": `field-${o}`,
+				label: a(_, v, o, C.entities),
+				htmlFor: j === "edit" ? l : void 0,
+				labelId: h,
+				labelTitle: I || void 0,
+				required: w?.required ?? !1,
+				mode: j,
+				span: P,
+				error: g.fieldErrors?.[o],
+				hint: j === "edit" && I ? I : void 0,
+				actions: N,
+				copyValue: F,
+				children: M
+			}, o);
+		})
+	});
+}
+//#endregion
+export { h as FieldsBlock };

package/dist-lib/components/detail-layout/LayoutColumn.js

@@ -0,0 +1,16 @@
+import { LayoutNodeRenderer as e } from "./LayoutRenderer.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/detail-layout/LayoutColumn.tsx
+function n({ config: n, ctx: r }) {
+	let { items: i, gap: a = 12 } = n;
+	return /* @__PURE__ */ t("div", {
+		className: "flex flex-col h-full",
+		style: { gap: a ? `${a}px` : void 0 },
+		children: i.map((n, i) => /* @__PURE__ */ t(e, {
+			node: n,
+			ctx: r
+		}, i))
+	});
+}
+//#endregion
+export { n as LayoutColumn };

package/dist-lib/components/detail-layout/LayoutRenderer.js

@@ -0,0 +1,54 @@
+import { LayoutRow as e } from "./LayoutRow.js";
+import { LayoutColumn as t } from "./LayoutColumn.js";
+import { LayoutTabs as n } from "./LayoutTabs.js";
+import { SectionBlock as r } from "./SectionBlock.js";
+import { ChildrenBlock as i } from "./ChildrenBlock.js";
+import { AssociatedBlock as a } from "./AssociatedBlock.js";
+import { FieldsBlock as o } from "./FieldsBlock.js";
+import { PropertiesBlock as s } from "./PropertiesBlock.js";
+import { StatusesBlock as c } from "./StatusesBlock.js";
+import { WidgetHost as l } from "./widgets/WidgetHost.js";
+import { Fragment as u, jsx as d } from "react/jsx-runtime";
+//#region src/components/detail-layout/LayoutRenderer.tsx
+function f({ nodes: e, ctx: t }) {
+	return /* @__PURE__ */ d(u, { children: e.map((e, n) => /* @__PURE__ */ d(p, {
+		node: e,
+		ctx: t
+	}, n)) });
+}
+function p({ node: u, ctx: f }) {
+	return u.row ? /* @__PURE__ */ d(e, {
+		config: u.row,
+		ctx: f
+	}) : u.column ? /* @__PURE__ */ d(t, {
+		config: u.column,
+		node: u,
+		ctx: f
+	}) : u.tabs ? /* @__PURE__ */ d(n, {
+		config: u.tabs,
+		ctx: f
+	}) : u.section ? /* @__PURE__ */ d(r, {
+		config: u.section,
+		ctx: f
+	}) : u.children ? /* @__PURE__ */ d(i, {
+		node: u,
+		ctx: f
+	}) : u.associated ? /* @__PURE__ */ d(a, {
+		node: u,
+		ctx: f
+	}) : u.fields ? /* @__PURE__ */ d(o, {
+		fields: u.fields,
+		ctx: f
+	}) : u.properties == null ? u.statuses == null ? u.widget ? /* @__PURE__ */ d(l, {
+		config: u.widget,
+		ctx: f
+	}) : null : /* @__PURE__ */ d(c, {
+		node: u,
+		ctx: f
+	}) : /* @__PURE__ */ d(s, {
+		node: u,
+		ctx: f
+	});
+}
+//#endregion
+export { p as LayoutNodeRenderer, f as LayoutRenderer };

package/dist-lib/components/detail-layout/LayoutRow.js

@@ -0,0 +1,83 @@
+import { cn as e } from "../../lib/utils.js";
+import { parseSizeValue as t } from "../../lib/size-value.js";
+import { LayoutNodeRenderer as n } from "./LayoutRenderer.js";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/detail-layout/LayoutRow.tsx
+function l({ config: l, ctx: f }) {
+	let { items: p, gap: m = 0, resizable: h = !1, stack_below: g } = l, _ = g === "never" ? 0 : g ?? 768, [v, y] = o(!1), b = a(null);
+	i(() => {
+		if (_ === 0) return;
+		let e = b.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			for (let t of e) y(t.contentRect.width < _);
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [_]);
+	let [x, S] = o(null), C = a(null), w = r(() => p.map((e) => {
+		let n = e.width ?? e.column?.width ?? e.row?.width ?? l.width, r = t(n);
+		return r && r.kind === "weight" ? r.value : 1;
+	}), [p, l.width]), T = r((e, t) => {
+		t.preventDefault();
+		let n = x ?? w();
+		C.current = {
+			index: e,
+			startX: t.clientX,
+			startSizes: [...n]
+		};
+		let r = (e) => {
+			let t = C.current;
+			if (!t || !b.current) return;
+			let n = b.current.getBoundingClientRect().width, r = e.clientX - t.startX, i = t.startSizes.reduce((e, t) => e + t, 0), a = r / n * i, o = [...t.startSizes];
+			o[t.index] = Math.max(.1, t.startSizes[t.index] + a), o[t.index + 1] = Math.max(.1, t.startSizes[t.index + 1] - a), S(o);
+		}, i = () => {
+			C.current = null, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i);
+		};
+		document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
+	}, [x, w]), E = x ?? w(), D = l.height ? d(l.height) : void 0;
+	return /* @__PURE__ */ s("div", {
+		ref: b,
+		className: e("flex", v && "flex-col"),
+		style: {
+			gap: m ? `${m}px` : void 0,
+			...D
+		},
+		children: p.map((t, r) => /* @__PURE__ */ c("div", {
+			className: e("min-w-0 flex items-stretch", v && "w-full"),
+			style: v ? void 0 : u(t.width ?? t.column?.width ?? t.row?.width ?? l.width, E[r], t.min_width, t.max_width),
+			children: [/* @__PURE__ */ s("div", {
+				className: e("flex-1 min-w-0 flex flex-col", D && "overflow-y-auto overflow-x-hidden"),
+				children: /* @__PURE__ */ s(n, {
+					node: t,
+					ctx: f
+				})
+			}), h && !v && r < p.length - 1 && /* @__PURE__ */ s("div", {
+				className: "detail-resize-handle",
+				onMouseDown: (e) => T(r, e)
+			})]
+		}, r))
+	});
+}
+function u(e, n, r, i) {
+	let a = t(e), o;
+	return o = !a || a.kind === "weight" ? `${n} 1 0%` : a.kind === "px" ? `0 0 ${a.value}px` : a.kind === "fill" ? "1 1 0%" : "0 0 auto", {
+		flex: o,
+		minWidth: r,
+		maxWidth: i
+	};
+}
+function d(e) {
+	if (!e) return;
+	let n = t(e);
+	if (n?.kind === "px") return {
+		height: `${n.value}px`,
+		overflow: "hidden"
+	};
+	if (typeof e == "string" && (e.includes("vh") || e.includes("calc") || e.includes("%"))) return {
+		height: e,
+		overflow: "hidden"
+	};
+}
+//#endregion
+export { l as LayoutRow };

package/dist-lib/components/detail-layout/LayoutTabs.js

@@ -0,0 +1,195 @@
+import { useText as e } from "../../hooks/useText.js";
+import { useResponsiveMode as t } from "../../hooks/useResponsiveMode.js";
+import { DynamicIcon as n } from "../shared/DynamicIcon.js";
+import { resolveBlockIcon as r, resolveBlockLabel as i } from "./blockMeta.js";
+import { LayoutNodeRenderer as a } from "./LayoutRenderer.js";
+import { useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/detail-layout/LayoutTabs.tsx
+function l({ config: l, ctx: u }) {
+	let d = e(), { items: f } = l, [p, m] = o(0), h = t(), g = u.detailTabsPresentation ?? (h.isPhone ? "sections" : "scroll");
+	if (f.length === 0) return null;
+	if (g === "sections") {
+		let e = f.map((e, t) => `detail-tab-section-${t}`);
+		return /* @__PURE__ */ c("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 10,
+				minWidth: 0
+			},
+			children: [f.length > 1 && /* @__PURE__ */ s("nav", {
+				"aria-label": d("record.tabs.sections", "Detail sections"),
+				style: {
+					display: "flex",
+					gap: 6,
+					overflowX: "auto",
+					padding: "0 2px 2px",
+					WebkitOverflowScrolling: "touch"
+				},
+				children: f.map((t, a) => {
+					let o = i(t, u, d), l = r(t, u);
+					return /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: () => document.getElementById(e[a])?.scrollIntoView({
+							block: "start",
+							behavior: "smooth"
+						}),
+						style: {
+							display: "inline-flex",
+							alignItems: "center",
+							gap: 6,
+							minHeight: 36,
+							maxWidth: 220,
+							padding: "7px 10px",
+							border: "1px solid var(--border)",
+							borderRadius: "var(--radius-md)",
+							background: "var(--surface)",
+							color: "var(--text-2)",
+							fontSize: 12.5,
+							fontWeight: 600,
+							whiteSpace: "nowrap",
+							cursor: "pointer"
+						},
+						children: [l && /* @__PURE__ */ s(n, {
+							name: l,
+							size: 13
+						}), /* @__PURE__ */ s("span", {
+							style: {
+								overflow: "hidden",
+								textOverflow: "ellipsis"
+							},
+							children: o
+						})]
+					}, a);
+				})
+			}), f.map((t, o) => {
+				let l = i(t, u, d), f = r(t, u);
+				return /* @__PURE__ */ c("section", {
+					id: e[o],
+					style: {
+						background: "var(--surface)",
+						border: "1px solid var(--border)",
+						borderRadius: "var(--radius-lg)",
+						boxShadow: "var(--shadow-xs)",
+						overflow: "hidden",
+						minWidth: 0,
+						scrollMarginTop: 12
+					},
+					children: [/* @__PURE__ */ c("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 8,
+							padding: "12px 14px",
+							borderBottom: "1px solid var(--divider)",
+							color: "var(--text)",
+							fontSize: 13,
+							fontWeight: 700
+						},
+						children: [f && /* @__PURE__ */ s(n, {
+							name: f,
+							size: 14
+						}), /* @__PURE__ */ s("span", {
+							style: { overflowWrap: "anywhere" },
+							children: l
+						})]
+					}), /* @__PURE__ */ s("div", {
+						style: {
+							padding: 14,
+							minWidth: 0
+						},
+						children: /* @__PURE__ */ s(a, {
+							node: t,
+							ctx: {
+								...u,
+								withinCard: !0
+							}
+						})
+					})]
+				}, o);
+			})]
+		});
+	}
+	return /* @__PURE__ */ c("div", {
+		style: {
+			background: "var(--surface)",
+			border: "1px solid var(--border)",
+			borderRadius: "var(--radius-lg)",
+			overflow: "hidden",
+			boxShadow: "var(--shadow-xs)",
+			flexShrink: 0
+		},
+		children: [/* @__PURE__ */ s("div", {
+			role: "tablist",
+			style: {
+				display: "flex",
+				alignItems: "stretch",
+				gap: 4,
+				borderBottom: "1px solid var(--divider)",
+				padding: "6px 10px 0 10px",
+				overflowX: "auto"
+			},
+			children: f.map((e, t) => {
+				let a = i(e, u, d), o = r(e, u), l = t === p;
+				return /* @__PURE__ */ c("button", {
+					role: "tab",
+					"aria-selected": l,
+					onClick: (e) => {
+						e.stopPropagation(), m(t);
+					},
+					style: {
+						position: "relative",
+						display: "inline-flex",
+						alignItems: "center",
+						gap: 6,
+						padding: "8px 12px",
+						background: "transparent",
+						border: 0,
+						cursor: "pointer",
+						fontSize: 12.5,
+						fontWeight: 500,
+						fontFamily: "inherit",
+						color: l ? "var(--text)" : "var(--text-3)",
+						whiteSpace: "nowrap",
+						transition: "color .12s"
+					},
+					onMouseEnter: (e) => {
+						l || (e.currentTarget.style.color = "var(--text-2)");
+					},
+					onMouseLeave: (e) => {
+						l || (e.currentTarget.style.color = "var(--text-3)");
+					},
+					children: [
+						o && /* @__PURE__ */ s(n, {
+							name: o,
+							size: 13
+						}),
+						a,
+						l && /* @__PURE__ */ s("span", { style: {
+							position: "absolute",
+							left: 4,
+							right: 4,
+							bottom: -1,
+							height: 2,
+							background: "var(--accent)",
+							borderRadius: "var(--radius-xs)"
+						} })
+					]
+				}, t);
+			})
+		}), /* @__PURE__ */ s("div", {
+			role: "tabpanel",
+			style: { padding: 14 },
+			children: /* @__PURE__ */ s(a, {
+				node: f[p],
+				ctx: {
+					...u,
+					withinCard: !0
+				}
+			}, p)
+		})]
+	});
+}
+//#endregion
+export { l as LayoutTabs };

package/dist-lib/components/detail-layout/PropertiesBlock.js

@@ -0,0 +1,74 @@
+import { propertyToField as e } from "../../types/schema.js";
+import { useText as t } from "../../hooks/useText.js";
+import { ClassifiedFieldLocked as n } from "../primitives/ClassifiedFieldLocked.js";
+import { classificationTier as r, fieldAccessInfo as i } from "../../lib/field-classification.js";
+import { renderField as a } from "../fields/index.js";
+import { FieldRow as o, FieldsGrid as s, SPAN_FIELD_TYPES as c } from "./FieldRow.js";
+import { useCallback as l, useEffect as u, useRef as d } from "react";
+import { jsx as f } from "react/jsx-runtime";
+//#region src/components/detail-layout/PropertiesBlock.tsx
+var p = /* @__PURE__ */ new Set([
+	"string",
+	"text",
+	"int",
+	"float",
+	"decimal",
+	"email",
+	"url"
+]), m = 500;
+function h({ node: t, ctx: n }) {
+	let { entity: r, objectProperties: i, onSetProperty: a, isNew: o, mode: c, refs: l } = n, u = r.properties ?? {};
+	if (o) return null;
+	let d = t.properties === !0 || t.properties, p = d === !0 ? Object.entries(u).sort(([e], [t]) => e.localeCompare(t)) : d.filter((e) => u[e] != null).map((e) => [e, u[e]]);
+	return p.length === 0 ? null : /* @__PURE__ */ f(s, {
+		columns: 2,
+		children: p.map(([t, o]) => {
+			let s = i?.find((e) => e.property_code === t), u = e(o), d = o.readonly || !a ? "display" : c;
+			return /* @__PURE__ */ f(g, {
+				propCode: t,
+				prop: o,
+				field: u,
+				value: s?.value,
+				mode: d,
+				onSetProperty: a,
+				refs: l,
+				entity: r,
+				schema: n.schema
+			}, t);
+		})
+	});
+}
+function g({ propCode: e, prop: s, field: h, value: g, mode: _, onSetProperty: v, refs: y, entity: b, schema: x }) {
+	let S = t(), C = d(null);
+	u(() => () => {
+		C.current && clearTimeout(C.current);
+	}, []);
+	let w = l((t) => {
+		v && (p.has(s.type) ? (C.current && clearTimeout(C.current), C.current = setTimeout(() => v(e, t), m)) : v(e, t));
+	}, [
+		e,
+		s.type,
+		v
+	]), T = i(b, e), E = T?.read === "denied", D = T?.write === "denied", O = _ === "display" ? E : D || E, k = _ === "edit" && D ? "display" : _;
+	return /* @__PURE__ */ f(o, {
+		label: S(s.display?.name ?? s.name),
+		mode: k,
+		span: c.has(s.type),
+		children: O ? /* @__PURE__ */ f(n, {
+			tier: T.classification,
+			tierDef: r(x, b, e),
+			requiredPermission: T?.required_permission,
+			variant: k === "edit" ? "input" : "value"
+		}) : a({
+			field: h,
+			fieldName: e,
+			value: g,
+			mode: k,
+			onChange: k === "edit" ? w : void 0,
+			refs: y,
+			t: S
+		})
+	});
+}
+//#endregion
+export { h as PropertiesBlock };

package/dist-lib/components/detail-layout/QuickAddForm.js

@@ -0,0 +1,81 @@
+import { fieldDisplayName as e } from "../../types/schema.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { Btn as n } from "../primitives/Btn.js";
+import { useText as r } from "../../hooks/useText.js";
+import { useResponsiveMode as i } from "../../hooks/useResponsiveMode.js";
+import { failureTitle as a } from "../../lib/failure.js";
+import { renderField as o } from "../fields/index.js";
+import { useQuickAdd as s } from "./useQuickAdd.js";
+import { useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/detail-layout/QuickAddForm.tsx
+function d({ config: d, parentEntity: f, parentId: p, schema: m }) {
+	let h = r(), g = r("errors"), { values: _, quickAdd: v, childEntity: y, isPending: b, error: x, isReady: S, handleSubmit: C, handleFieldChange: w } = s(d, f, p, m), T = i(), E = c();
+	return !v || v.fields.length === 0 || !y ? null : /* @__PURE__ */ u("form", {
+		onSubmit: C,
+		style: {
+			display: "flex",
+			flexDirection: T.isPhone ? "column" : "row",
+			alignItems: "flex-end",
+			gap: 8,
+			padding: "8px 0",
+			borderBottom: "1px solid var(--divider)"
+		},
+		children: [
+			v.fields.map((t) => {
+				let n = y.fields.get(t);
+				if (!n) return null;
+				let r = `${E}-quick-add-${d.entity}-${t}`, i = `${r}-label`;
+				return /* @__PURE__ */ u("div", {
+					style: {
+						flex: 1,
+						minWidth: 0,
+						width: T.isPhone ? "100%" : void 0
+					},
+					children: [/* @__PURE__ */ l("label", {
+						id: i,
+						htmlFor: r,
+						style: {
+							fontSize: 11,
+							color: "var(--text-3)",
+							marginBottom: 4,
+							display: "block",
+							fontWeight: 500
+						},
+						children: e(h, n, t, m.entities)
+					}), o({
+						field: n,
+						fieldName: t,
+						value: _[t] ?? "",
+						mode: "edit",
+						onChange: (e) => w(t, e),
+						record: _,
+						fieldId: r,
+						labelId: i,
+						t: h
+					})]
+				}, t);
+			}),
+			/* @__PURE__ */ l(n, {
+				type: "submit",
+				kind: "primary",
+				size: T.isPhone ? "md" : "sm",
+				icon: /* @__PURE__ */ l(t.plus, { size: 12 }),
+				disabled: b || !S,
+				style: T.isPhone ? { alignSelf: "flex-end" } : void 0,
+				children: h("record.related.add", "Add")
+			}),
+			x != null && /* @__PURE__ */ l("span", {
+				style: {
+					fontSize: 11,
+					color: "var(--danger)",
+					alignSelf: "flex-end",
+					marginBottom: 4
+				},
+				children: a(g, x)
+			})
+		]
+	});
+}
+//#endregion
+export { d as QuickAddForm };