@parallelworks/tandem-web 0.141.2 → 0.143.0

package/components/CustomFields.js

@@ -0,0 +1,349 @@
+import { issueQuery as e } from "../api/queries.js";
+import { useConfirm as t } from "../lib/confirm.js";
+import { customFieldsQuery as n, fieldKinds as r, fieldsFor as i, hasValue as a, setIssueFields as o, setProjectFields as s, useCustomFieldActions as c } from "../lib/customFields.js";
+import { issueTypesQuery as l, typeShows as u } from "../lib/issueTypes.js";
+import { AddIcon as d } from "./icons.js";
+import { invalidateIssueViews as f } from "../api/mutations.js";
+import { PropertyField as p, usePropertyText as m } from "./DocProperties.js";
+import { Button as h, Checkbox as g, ErrorText as _, IconButton as v, Input as y, Select as b, SettingsCard as x, Textarea as S, menuDivider as C, useOpenMenu as w } from "@parallelworks/ui";
+import { useId as T, useState as E } from "react";
+import { useErrorMessage as D } from "@parallelworks/problem/react";
+import { useTranslations as O } from "use-intl";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { useMutation as M, useQuery as N, useQueryClient as P } from "@tanstack/react-query";
+// src/components/CustomFields.tsx
+function F(e) {
+	let t = m(e);
+	return (e, n) => t(e, n);
+}
+function I({ workspace: t, issue: r, label: a }) {
+	let s = D(), c = P(), { data: d } = N(n(t)), { data: m } = N(l(t)), h = m?.find((e) => e.id === r.type?.id), g = i(d, "issue", r.teamId).filter((e) => u(h, e.id)), v = e(t, r.identifier).queryKey, y = M({
+		mutationFn: (e) => o(t, r.identifier, e),
+		onMutate: async (e) => {
+			await c.cancelQueries({ queryKey: v });
+			let t = c.getQueryData(v);
+			return t && c.setQueryData(v, {
+				...t,
+				fields: {
+					...t.fields,
+					...e
+				}
+			}), { previous: t };
+		},
+		onError: (e, t, n) => {
+			n?.previous && c.setQueryData(v, n.previous);
+		},
+		onSuccess: (e) => c.setQueryData(v, e),
+		onSettled: () => f(c, t, r.identifier)
+	});
+	return g.length === 0 ? null : /* @__PURE__ */ j(k, { children: [g.map((e) => a(e.name, /* @__PURE__ */ A("div", {
+		className: "px-2",
+		children: /* @__PURE__ */ A(p, {
+			workspace: t,
+			property: e,
+			value: r.fields[e.id],
+			editable: !0,
+			onChange: (t) => y.mutate({ [e.id]: t })
+		})
+	}), e.id)), y.error && /* @__PURE__ */ A(_, {
+		className: "px-2",
+		children: s(y.error)
+	})] });
+}
+function L({ workspace: e, project: t, editable: r, onChange: a }) {
+	let o = O("customFields"), c = D(), { data: l } = N(n(e)), u = i(l, "project"), d = M({
+		mutationFn: (n) => s(e, t.id, n),
+		onSuccess: a
+	});
+	return u.length === 0 ? null : /* @__PURE__ */ j("section", {
+		"aria-label": o("title"),
+		className: "max-w-xl space-y-0.5 text-sm",
+		children: [u.map((n) => /* @__PURE__ */ j("div", {
+			className: "flex min-h-8 items-center gap-2",
+			children: [/* @__PURE__ */ A("span", {
+				className: "w-36 shrink-0 truncate text-muted-foreground",
+				children: n.name
+			}), /* @__PURE__ */ A("div", {
+				className: "min-w-0 flex-1",
+				children: /* @__PURE__ */ A(p, {
+					workspace: e,
+					property: n,
+					value: t.fields[n.id],
+					editable: r,
+					onChange: (e) => d.mutate({ [n.id]: e })
+				})
+			})]
+		}, n.id)), d.error && /* @__PURE__ */ A(_, { children: c(d.error) })]
+	});
+}
+function R({ workspace: e, teamId: t, typeId: r, values: o, onChange: s }) {
+	let c = O("customFields"), { data: d } = N(n(e)), { data: f } = N(l(e)), m = f?.find((e) => e.id === r), h = i(d, "issue", t).filter((e) => u(m, e.id)).map((e) => m?.requiredFieldIds.includes(e.id) ? {
+		...e,
+		required: !0
+	} : e).filter((e) => e.required || a(o[e.id]));
+	return h.length === 0 ? null : /* @__PURE__ */ j("fieldset", {
+		className: "space-y-0.5 text-sm",
+		children: [/* @__PURE__ */ A("legend", {
+			className: "sr-only",
+			children: c("title")
+		}), h.map((t) => /* @__PURE__ */ j("div", {
+			className: "flex min-h-8 items-center gap-2",
+			children: [/* @__PURE__ */ j("span", {
+				className: "w-36 shrink-0 truncate text-muted-foreground",
+				children: [t.name, t.required && /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ j("span", {
+					"aria-hidden": !0,
+					className: "text-destructive",
+					children: [" ", "*"]
+				}), /* @__PURE__ */ A("span", {
+					className: "sr-only",
+					children: c("required")
+				})] })]
+			}), /* @__PURE__ */ A("div", {
+				className: "min-w-0 flex-1",
+				children: /* @__PURE__ */ A(p, {
+					workspace: e,
+					property: t,
+					value: o[t.id],
+					editable: !0,
+					onChange: (e) => s({
+						...o,
+						[t.id]: e
+					})
+				})
+			})]
+		}, t.id))]
+	});
+}
+function z({ workspace: e, target: t, team: r }) {
+	let i = O("customFields"), { data: a } = N(n(e)), o = (a ?? []).filter((e) => e.target === t && (r ? e.teamId === r.id : !e.teamId)).sort((e, t) => e.position - t.position), [s, c] = E(!1);
+	return /* @__PURE__ */ j(x, {
+		title: i(t === "issue" ? "issueFields" : "projectFields"),
+		description: i(r ? "teamFieldsHelp" : t === "issue" ? "issueFieldsHelp" : "projectFieldsHelp"),
+		action: /* @__PURE__ */ A(h, {
+			size: "sm",
+			icon: /* @__PURE__ */ A(d, {}),
+			onClick: () => c(!0),
+			children: i("add")
+		}),
+		children: [s && /* @__PURE__ */ A(V, {
+			workspace: e,
+			target: t,
+			team: r?.key,
+			onDone: () => c(!1)
+		}), o.length === 0 && !s ? /* @__PURE__ */ A("p", {
+			className: "px-3 py-3 text-sm text-muted-foreground",
+			children: i("none")
+		}) : /* @__PURE__ */ A("ul", {
+			className: "divide-y divide-border",
+			children: o.map((t, n) => /* @__PURE__ */ A(B, {
+				workspace: e,
+				field: t,
+				before: o[n - 1],
+				after: o[n + 1]
+			}, t.id))
+		})]
+	});
+}
+function B({ workspace: e, field: n, before: r, after: i }) {
+	let a = O("customFields"), o = c(e), s = w(), { confirm: l, dialog: u } = t(), [d, f] = E(!1), p = (e, t) => e && o.update.mutate({
+		id: n.id,
+		position: t ? (e.position + t.position) / 2 : e.position + (e === i ? 1 : -1)
+	}), m = () => l({
+		title: a("deleteTitle", { name: n.name }),
+		description: a("deleteDescription", { count: n.values }),
+		confirmLabel: a("delete"),
+		destructive: !0,
+		onConfirm: () => o.remove.mutateAsync(n.id)
+	}), h = () => [
+		{
+			label: a("edit"),
+			onClick: () => f(!0)
+		},
+		...r ? [{
+			label: a("moveUp"),
+			onClick: () => p(r, void 0)
+		}] : [],
+		...i ? [{
+			label: a("moveDown"),
+			onClick: () => p(i, void 0)
+		}] : [],
+		{
+			label: n.archivedAt ? a("restore") : a("archive"),
+			onClick: () => o.update.mutate({
+				id: n.id,
+				archived: !n.archivedAt
+			})
+		},
+		C,
+		{
+			label: a("delete"),
+			destructive: !0,
+			onClick: m
+		}
+	];
+	return d ? /* @__PURE__ */ A("li", {
+		className: "p-2",
+		children: /* @__PURE__ */ A(V, {
+			workspace: e,
+			target: n.target,
+			field: n,
+			onDone: () => f(!1)
+		})
+	}) : /* @__PURE__ */ j("li", {
+		className: "flex min-h-10 items-center gap-3 px-3 py-1.5",
+		onContextMenu: (e) => s(e, h()),
+		children: [
+			/* @__PURE__ */ j("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ j("p", {
+					className: `truncate text-sm ${n.archivedAt ? "text-muted-foreground" : ""}`,
+					children: [n.name, n.required && /* @__PURE__ */ A("span", {
+						className: "ml-2 text-xs text-muted-foreground",
+						children: a("required")
+					})]
+				}), n.description && /* @__PURE__ */ A("p", {
+					className: "truncate text-xs text-muted-foreground",
+					children: n.description
+				})]
+			}),
+			n.archivedAt && /* @__PURE__ */ A("span", {
+				className: "shrink-0 text-xs text-muted-foreground",
+				children: a("archived")
+			}),
+			/* @__PURE__ */ A("span", {
+				className: "shrink-0 text-xs text-muted-foreground",
+				children: a(`kinds.${n.kind}`)
+			}),
+			/* @__PURE__ */ A("span", {
+				className: "w-20 shrink-0 text-right text-xs tabular-nums text-muted-foreground",
+				children: a("values", { count: n.values })
+			}),
+			/* @__PURE__ */ A(v, {
+				variant: "ghost",
+				size: "sm",
+				label: a("actions", { name: n.name }),
+				icon: /* @__PURE__ */ A("span", {
+					"aria-hidden": !0,
+					children: "⋯"
+				}),
+				onClick: (e) => s(e, h())
+			}),
+			u
+		]
+	});
+}
+function V({ workspace: e, target: t, team: n, field: i, onDone: a }) {
+	let o = O("customFields"), s = D(), l = c(e), [u, d] = E(i?.name ?? ""), [f, p] = E(i?.description ?? ""), [m, v] = E(i?.kind ?? "text"), [x, C] = E(i?.required ?? !1), w = T(), [k, M] = E((i?.options ?? []).map((e) => e.name).join("\n")), N = m === "select" || m === "multi_select", P = () => k.split("\n").map((e) => e.trim()).filter(Boolean).map((e) => {
+		let t = i?.options.find((t) => t.name === e)?.id;
+		return {
+			name: e,
+			...t && { id: t }
+		};
+	}), F = i ? l.update : l.create;
+	return /* @__PURE__ */ j("form", {
+		onSubmit: (e) => {
+			e.preventDefault(), i ? l.update.mutate({
+				id: i.id,
+				name: u,
+				description: f,
+				...t === "issue" && { required: x },
+				...N && { options: P() }
+			}, { onSuccess: a }) : l.create.mutate({
+				target: t,
+				...n && { team: n },
+				name: u,
+				description: f,
+				kind: m,
+				...t === "issue" && { required: x },
+				...N && { options: P() }
+			}, { onSuccess: a });
+		},
+		className: "space-y-3 rounded-md border border-border p-3 text-sm",
+		children: [
+			/* @__PURE__ */ j("div", {
+				className: "grid gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ j("label", {
+					className: "block text-xs font-medium text-muted-foreground",
+					children: [o("name"), /* @__PURE__ */ A(y, {
+						value: u,
+						onChange: (e) => d(e.target.value),
+						required: !0,
+						maxLength: 60,
+						className: "mt-1",
+						autoFocus: !0
+					})]
+				}), /* @__PURE__ */ j("div", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: [o("kind"), /* @__PURE__ */ A("div", {
+						className: "mt-1",
+						children: /* @__PURE__ */ A(b, {
+							value: m,
+							items: r.map((e) => ({
+								value: e,
+								label: o(`kinds.${e}`)
+							})),
+							onValueChange: v,
+							"aria-label": o("kind"),
+							width: "fill",
+							disabled: !!i
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ j("label", {
+				className: "block text-xs font-medium text-muted-foreground",
+				children: [o("description"), /* @__PURE__ */ A(y, {
+					value: f,
+					onChange: (e) => p(e.target.value),
+					maxLength: 500,
+					className: "mt-1"
+				})]
+			}),
+			N && /* @__PURE__ */ j("label", {
+				className: "block text-xs font-medium text-muted-foreground",
+				children: [
+					o("options"),
+					/* @__PURE__ */ A(S, {
+						value: k,
+						onChange: (e) => M(e.target.value),
+						rows: 4,
+						className: "mt-1"
+					}),
+					/* @__PURE__ */ A("span", {
+						className: "mt-1 block font-normal",
+						children: o("optionsHint")
+					})
+				]
+			}),
+			t === "issue" && /* @__PURE__ */ j("div", {
+				className: "flex items-center gap-2 text-sm",
+				children: [/* @__PURE__ */ A(g, {
+					id: w,
+					checked: x,
+					onCheckedChange: (e) => C(e === !0)
+				}), /* @__PURE__ */ A("label", {
+					htmlFor: w,
+					children: o("requiredLabel")
+				})]
+			}),
+			F.error && /* @__PURE__ */ A(_, { children: s(F.error) }),
+			/* @__PURE__ */ j("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ A(h, {
+					size: "sm",
+					variant: "ghost",
+					onClick: a,
+					children: o("cancel")
+				}), /* @__PURE__ */ A(h, {
+					type: "submit",
+					size: "sm",
+					variant: "primary",
+					loading: F.isPending,
+					disabled: !u.trim(),
+					children: o(i ? "save" : "add")
+				})]
+			})
+		]
+	});
+}
+export { z as FieldSettings, I as IssueFields, R as NewIssueFields, L as ProjectFields, F as useFieldText };

package/components/DocProperties.js

@@ -0,0 +1,320 @@
+import { AddIcon as e } from "./icons.js";
+import { usePeople as t } from "../lib/people.js";
+import { useCan as n } from "../lib/roles.js";
+import { docPropertiesQuery as r, propertyKinds as i, spaceScope as a, useDocPropertyActions as o } from "../lib/docProperties.js";
+import { Button as s, Checkbox as c, ErrorText as l, IconButton as u, Input as d, Popover as f, Select as p, Textarea as m, menuDivider as h, useOpenMenu as g } from "@parallelworks/ui";
+import { Link as _ } from "@tanstack/react-router";
+import { useEffect as v, useState as y } from "react";
+import { useErrorMessage as b } from "@parallelworks/problem/react";
+import { useTranslations as x } from "use-intl";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useQuery as w } from "@tanstack/react-query";
+// src/components/DocProperties.tsx
+function T(e) {
+	let { nameOf: n } = t(e), r = x("docProperties");
+	return (e, t) => {
+		if (t == null) return "";
+		let i = (t) => e.options.find((e) => e.id === t)?.name ?? String(t);
+		switch (e.kind) {
+			case "select": return i(t);
+			case "multi_select": return Array.isArray(t) ? t.map(i).join(", ") : "";
+			case "person": return n("user", String(t));
+			case "checkbox": return t === !0 ? r("yes") : "";
+			default: return String(t);
+		}
+	};
+}
+function E({ workspace: e, doc: t, space: i, editable: s }) {
+	let c = x("docProperties"), u = b(), { data: d = [] } = w(r(e, i)), f = n(e, "manage_labels", a(i)), p = o(e), m = t.properties ?? {};
+	if (d.length === 0 && !(s && f)) return null;
+	let h = (e, n) => p.setValues.mutate({
+		doc: t.key,
+		values: { [e]: n }
+	});
+	return /* @__PURE__ */ C("section", {
+		"aria-label": c("title"),
+		className: "mt-3 space-y-0.5 text-sm",
+		children: [
+			d.map((t) => /* @__PURE__ */ C("div", {
+				className: "flex min-h-8 items-center gap-2",
+				children: [/* @__PURE__ */ S(D, {
+					workspace: e,
+					property: t,
+					admin: s && f
+				}), /* @__PURE__ */ S("div", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ S(O, {
+						workspace: e,
+						property: t,
+						value: m[t.id],
+						editable: s,
+						onChange: (e) => h(t.id, e)
+					})
+				})]
+			}, t.id)),
+			s && f && /* @__PURE__ */ S(A, {
+				workspace: e,
+				space: i
+			}),
+			p.setValues.error && /* @__PURE__ */ S(l, { children: u(p.setValues.error) })
+		]
+	});
+}
+function D({ workspace: e, property: t, admin: n }) {
+	let r = x("docProperties"), i = g(), a = o(e), [s, c] = y(!1), l = /* @__PURE__ */ S("span", {
+		className: "truncate",
+		children: t.name
+	});
+	if (!n) return /* @__PURE__ */ S("span", {
+		className: "flex w-36 shrink-0 text-muted-foreground",
+		children: l
+	});
+	let u = () => [
+		{
+			label: r("edit"),
+			onClick: () => c(!0)
+		},
+		h,
+		{
+			label: r("remove"),
+			destructive: !0,
+			onClick: () => a.remove.mutate(t.id)
+		}
+	];
+	return /* @__PURE__ */ S(f, {
+		open: s,
+		onOpenChange: c,
+		trigger: /* @__PURE__ */ S("button", {
+			type: "button",
+			onContextMenu: (e) => i(e, u()),
+			className: "flex h-7 w-36 shrink-0 items-center rounded-md px-1.5 text-left text-muted-foreground hover:bg-muted",
+			children: l
+		}),
+		align: "start",
+		className: "w-72",
+		initialFocus: "first-control",
+		"aria-label": r("edit"),
+		children: /* @__PURE__ */ S(j, {
+			workspace: e,
+			property: t,
+			onDone: () => c(!1),
+			onRemove: () => {
+				a.remove.mutate(t.id), c(!1);
+			}
+		})
+	});
+}
+function O({ workspace: e, property: n, value: r, editable: i, onChange: a }) {
+	let o = x("docProperties"), { members: s } = t(e), l = T(e), u = o("empty");
+	if (!i) {
+		let t = l(n, r);
+		return n.kind === "issue" && t ? /* @__PURE__ */ S(_, {
+			to: "/$workspace/issues/$identifier",
+			params: {
+				workspace: e,
+				identifier: t
+			},
+			className: "text-primary hover:underline",
+			children: t
+		}) : n.kind === "url" && t ? /* @__PURE__ */ S("a", {
+			href: t,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "truncate text-primary hover:underline",
+			children: t
+		}) : /* @__PURE__ */ S("span", {
+			className: t ? "" : "text-muted-foreground",
+			children: t || u
+		});
+	}
+	switch (n.kind) {
+		case "select": return /* @__PURE__ */ S(p, {
+			value: typeof r == "string" ? r : "",
+			items: [{
+				value: "",
+				label: u
+			}, ...n.options.map((e) => ({
+				value: e.id ?? "",
+				label: e.name
+			}))],
+			onValueChange: (e) => a(e || null),
+			"aria-label": n.name,
+			size: "sm",
+			width: "content"
+		});
+		case "multi_select": return /* @__PURE__ */ S(p, {
+			multiple: !0,
+			value: Array.isArray(r) ? r : [],
+			items: n.options.map((e) => ({
+				value: e.id ?? "",
+				label: e.name
+			})),
+			onValueChange: (e) => a(e),
+			placeholder: u,
+			"aria-label": n.name,
+			size: "sm",
+			width: "content"
+		});
+		case "person": return /* @__PURE__ */ S(p, {
+			value: typeof r == "string" ? r : "",
+			items: [{
+				value: "",
+				label: u
+			}, ...s.map((e) => ({
+				value: e.user.username,
+				label: e.user.name
+			}))],
+			onValueChange: (e) => a(e || null),
+			"aria-label": n.name,
+			size: "sm",
+			width: "content"
+		});
+		case "checkbox": return /* @__PURE__ */ S(c, {
+			checked: r === !0,
+			onCheckedChange: (e) => a(e === !0),
+			"aria-label": n.name
+		});
+		case "date": return /* @__PURE__ */ S(d, {
+			type: "date",
+			value: typeof r == "string" ? r : "",
+			onChange: (e) => a(e.target.value || null),
+			"aria-label": n.name,
+			className: "h-7 px-1.5 w-40"
+		});
+		default: return /* @__PURE__ */ S(k, {
+			property: n,
+			value: r,
+			onChange: a
+		});
+	}
+}
+function k({ property: e, value: t, onChange: n }) {
+	let r = x("docProperties"), i = t == null ? "" : String(t), [a, o] = y(i);
+	v(() => o(i), [i]);
+	let s = () => {
+		a !== i && (a.trim() ? n(e.kind === "number" ? Number(a) : a) : n(null));
+	};
+	return /* @__PURE__ */ S(d, {
+		type: e.kind === "number" ? "number" : e.kind === "url" ? "url" : "text",
+		value: a,
+		onChange: (e) => o(e.target.value),
+		onBlur: s,
+		onKeyDown: (e) => e.key === "Enter" && s(),
+		placeholder: r(e.kind === "issue" ? "issueExample" : e.kind === "url" ? "urlExample" : "empty"),
+		"aria-label": e.name,
+		className: "h-7 border-transparent px-1.5 shadow-none hover:border-border"
+	});
+}
+function A({ workspace: t, space: n }) {
+	let r = x("docProperties"), [i, a] = y(!1);
+	return /* @__PURE__ */ S(f, {
+		open: i,
+		onOpenChange: a,
+		trigger: /* @__PURE__ */ S(s, {
+			size: "xs",
+			variant: "ghost",
+			icon: /* @__PURE__ */ S(e, {}),
+			className: "mt-1 text-muted-foreground",
+			children: r("add")
+		}),
+		align: "start",
+		className: "w-72",
+		initialFocus: "first-control",
+		"aria-label": r("add"),
+		children: /* @__PURE__ */ S(j, {
+			workspace: t,
+			space: n,
+			onDone: () => a(!1)
+		})
+	});
+}
+function j({ workspace: e, space: t, property: n, onDone: r, onRemove: a }) {
+	let c = x("docProperties"), f = b(), h = o(e), [g, _] = y(n?.name ?? ""), [v, w] = y(n?.kind ?? "text"), [T, E] = y((n?.options ?? []).map((e) => e.name).join("\n")), D = v === "select" || v === "multi_select", O = () => T.split("\n").map((e) => e.trim()).filter(Boolean).map((e) => {
+		let t = n?.options.find((t) => t.name === e)?.id;
+		return {
+			name: e,
+			...t && { id: t }
+		};
+	}), k = n ? h.update : h.create;
+	return /* @__PURE__ */ C("form", {
+		onSubmit: (e) => {
+			e.preventDefault(), n ? h.update.mutate({
+				id: n.id,
+				name: g,
+				...D && { options: O() }
+			}, { onSuccess: r }) : h.create.mutate({
+				...t && { space: t },
+				name: g,
+				kind: v,
+				...D && { options: O() }
+			}, { onSuccess: r });
+		},
+		className: "space-y-3 text-sm",
+		children: [
+			/* @__PURE__ */ C("label", {
+				className: "block text-xs font-medium text-muted-foreground",
+				children: [c("name"), /* @__PURE__ */ S(d, {
+					value: g,
+					onChange: (e) => _(e.target.value),
+					required: !0,
+					maxLength: 60,
+					className: "mt-1"
+				})]
+			}),
+			!n && /* @__PURE__ */ C("div", {
+				className: "text-xs font-medium text-muted-foreground",
+				children: [c("kind"), /* @__PURE__ */ S("div", {
+					className: "mt-1",
+					children: /* @__PURE__ */ S(p, {
+						value: v,
+						items: i.map((e) => ({
+							value: e,
+							label: c(`kinds.${e}`)
+						})),
+						onValueChange: w,
+						"aria-label": c("kind"),
+						width: "fill"
+					})
+				})]
+			}),
+			D && /* @__PURE__ */ C("label", {
+				className: "block text-xs font-medium text-muted-foreground",
+				children: [
+					c("options"),
+					/* @__PURE__ */ S(m, {
+						value: T,
+						onChange: (e) => E(e.target.value),
+						rows: 4,
+						className: "mt-1"
+					}),
+					/* @__PURE__ */ S("span", {
+						className: "mt-1 block font-normal",
+						children: c("optionsHint")
+					})
+				]
+			}),
+			k.error && /* @__PURE__ */ S(l, { children: f(k.error) }),
+			/* @__PURE__ */ C("div", {
+				className: "flex justify-between gap-2",
+				children: [a ? /* @__PURE__ */ S(u, {
+					variant: "ghost",
+					size: "sm",
+					label: c("remove"),
+					icon: /* @__PURE__ */ S("span", {
+						"aria-hidden": !0,
+						children: "×"
+					}),
+					onClick: a
+				}) : /* @__PURE__ */ S("span", {}), /* @__PURE__ */ S(s, {
+					type: "submit",
+					size: "sm",
+					variant: "primary",
+					loading: k.isPending,
+					disabled: !g.trim(),
+					children: c(n ? "save" : "add")
+				})]
+			})
+		]
+	});
+}
+export { E as DocProperties, O as PropertyField, T as usePropertyText };