synapse-react-client 4.0.40 → 4.0.42

package/dist/components/FilePreview/PdfPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"PdfPreview.js","names":[],"sources":["../../../src/components/FilePreview/PdfPreview.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport { calculateFriendlyFileSize } from '@/utils/functions/calculateFriendlyFileSize'\nimport { Alert, Skeleton } from '@mui/material'\nimport {\n  FileHandle,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport { useFetchBlobUrl } from '@/utils/hooks/useFetchBlobUrl'\n\nexport type PdfPreviewProps = {\n  fileHandle: FileHandle\n  fileHandleAssociation: FileHandleAssociation\n}\n\nexport const maxPdfSize = Math.pow(1024, 2) * 30 // 30MB\nconst friendlyMaxPdfSize = calculateFriendlyFileSize(maxPdfSize) // 30MB\n\n/**\n * Renders raw HTML. Uses file handle data to determine if the content should be sanitized.\n * @param props\n * @returns\n */\nexport default function PdfPreview(props: PdfPreviewProps) {\n  const { fileHandle, fileHandleAssociation: fha } = props\n\n  const { blobUrl, error: blobError } = useFetchBlobUrl(\n    fileHandle.contentSize > maxPdfSize\n      ? undefined\n      : SynapseClient.getPortalFileHandleServletUrl(\n          fha.fileHandleId,\n          fha.associateObjectId,\n          fha.associateObjectType,\n        ),\n  )\n\n  const friendlyFileSize = calculateFriendlyFileSize(fileHandle.contentSize)\n  if (fileHandle.contentSize > maxPdfSize) {\n    return (\n      <Alert severity=\"error\" sx={{ marginBottom: '20px' }}>\n        The PDF preview was not shown because the file size ({friendlyFileSize})\n        exceeds the maximum preview size ({friendlyMaxPdfSize})\n      </Alert>\n    )\n  }\n\n  if (blobError) {\n    return (\n      <Alert severity=\"error\" sx={{ marginBottom: '20px' }}>\n        The PDF preview could not be loaded: {blobError.message}\n      </Alert>\n    )\n  }\n\n  if (!blobUrl) {\n    return <Skeleton variant=\"rectangular\" width=\"100%\" height=\"800px\" />\n  }\n\n  return (\n    <iframe src={blobUrl} height=\"800px\" style={{ border: 0, width: '100%' }} />\n  )\n}\n"],"mappings":";;;;;;AAcA,IAAa,IAAsB,QAAM,IAAK,IACxC,IAAqB,EAA0B,CAAU;AAO/D,SAAwB,EAAW,GAAwB;CACzD,IAAM,EAAE,eAAY,uBAAuB,MAAQ,GAE7C,EAAE,YAAS,OAAO,MAAc,EACpC,EAAW,cAAc,IACrB,KAAA,IACA,EAAc,8BACZ,EAAI,cACJ,EAAI,mBACJ,EAAI,mBACN,CACN,GAEM,IAAmB,EAA0B,EAAW,WAAW;CAsBzE,OArBI,EAAW,cAAc,IAEzB,kBAAC,GAAD;EAAO,UAAS;EAAQ,IAAI,EAAE,cAAc,OAAO;YAAnD;GAAsD;GACE;GAAiB;GACpC;GAAmB;EACjD;MAIP,IAEA,kBAAC,GAAD;EAAO,UAAS;EAAQ,IAAI,EAAE,cAAc,OAAO;YAAnD,CAAsD,yCACd,EAAU,OAC3C;MAIN,IAKH,kBAAC,UAAD;EAAQ,KAAK;EAAS,QAAO;EAAQ,OAAO;GAAE,QAAQ;GAAG,OAAO;EAAO;CAAI,CAAA,IAJpE,kBAAC,GAAD;EAAU,SAAQ;EAAc,OAAM;EAAO,QAAO;CAAS,CAAA;AAMxE"}
+{"version":3,"file":"PdfPreview.js","names":[],"sources":["../../../src/components/FilePreview/PdfPreview.tsx"],"sourcesContent":["import { useGetStablePresignedUrl } from '@/synapse-queries/file/useFiles'\nimport { calculateFriendlyFileSize } from '@/utils/functions/calculateFriendlyFileSize'\nimport { Alert, Skeleton } from '@mui/material'\nimport {\n  FileHandle,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\n\nexport type PdfPreviewProps = {\n  fileHandle: FileHandle\n  fileHandleAssociation: FileHandleAssociation\n}\n\nexport const maxPdfSize = Math.pow(1024, 2) * 30 // 30MB\nconst friendlyMaxPdfSize = calculateFriendlyFileSize(maxPdfSize) // 30MB\n\n/**\n * Renders a PDF file handle in an iframe.\n * @param props\n * @returns\n */\nexport default function PdfPreview(props: PdfPreviewProps) {\n  const { fileHandle, fileHandleAssociation } = props\n\n  const exceedsMaxSize = fileHandle.contentSize > maxPdfSize\n\n  // The presigned URL is fetched into a blob rather than used as the iframe src directly: Synapse signs the URL with\n  // `response-content-disposition=attachment`, which would make the browser download the file instead of rendering it.\n  const stablePresignedUrl = useGetStablePresignedUrl(\n    fileHandleAssociation,\n    false,\n    { enabled: !exceedsMaxSize },\n  )\n  const blobUrl = stablePresignedUrl?.dataUrl\n  const blobError = stablePresignedUrl?.queryResult.error\n\n  const friendlyFileSize = calculateFriendlyFileSize(fileHandle.contentSize)\n  if (exceedsMaxSize) {\n    return (\n      <Alert severity=\"error\" sx={{ marginBottom: '20px' }}>\n        The PDF preview was not shown because the file size ({friendlyFileSize})\n        exceeds the maximum preview size ({friendlyMaxPdfSize})\n      </Alert>\n    )\n  }\n\n  if (blobError) {\n    return (\n      <Alert severity=\"error\" sx={{ marginBottom: '20px' }}>\n        The PDF preview could not be loaded: {blobError.message}\n      </Alert>\n    )\n  }\n\n  if (!blobUrl) {\n    return <Skeleton variant=\"rectangular\" width=\"100%\" height=\"800px\" />\n  }\n\n  return (\n    <iframe src={blobUrl} height=\"800px\" style={{ border: 0, width: '100%' }} />\n  )\n}\n"],"mappings":";;;;;AAaA,IAAa,IAAsB,QAAM,IAAK,IACxC,IAAqB,EAA0B,CAAU;AAO/D,SAAwB,EAAW,GAAwB;CACzD,IAAM,EAAE,eAAY,6BAA0B,GAExC,IAAiB,EAAW,cAAc,GAI1C,IAAqB,EACzB,GACA,IACA,EAAE,SAAS,CAAC,EAAe,CAC7B,GACM,IAAU,GAAoB,SAC9B,IAAY,GAAoB,YAAY,OAE5C,IAAmB,EAA0B,EAAW,WAAW;CAsBzE,OArBI,IAEA,kBAAC,GAAD;EAAO,UAAS;EAAQ,IAAI,EAAE,cAAc,OAAO;YAAnD;GAAsD;GACE;GAAiB;GACpC;GAAmB;EACjD;MAIP,IAEA,kBAAC,GAAD;EAAO,UAAS;EAAQ,IAAI,EAAE,cAAc,OAAO;YAAnD,CAAsD,yCACd,EAAU,OAC3C;MAIN,IAKH,kBAAC,UAAD;EAAQ,KAAK;EAAS,QAAO;EAAQ,OAAO;GAAE,QAAQ;GAAG,OAAO;EAAO;CAAI,CAAA,IAJpE,kBAAC,GAAD;EAAU,SAAQ;EAAc,OAAM;EAAO,QAAO;CAAS,CAAA;AAMxE"}

package/dist/components/FormTemplateEditor/ChoiceOptionsEditor.d.ts

@@ -0,0 +1,11 @@
+type ChoiceOptionsEditorProps = {
+    options: string[];
+    onChange: (next: string[]) => void;
+};
+/**
+ * Edits a choice field's options. At least one option is always kept, and added options get a
+ * unique `Option N` label.
+ */
+export declare function ChoiceOptionsEditor({ options, onChange, }: ChoiceOptionsEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChoiceOptionsEditor.d.ts.map

package/dist/components/FormTemplateEditor/ChoiceOptionsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/ChoiceOptionsEditor.tsx"],"names":[],"mappings":"AAUA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACnC,CAAA;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE,wBAAwB,2CAkD1B"}

package/dist/components/FormTemplateEditor/ChoiceOptionsEditor.js

@@ -0,0 +1,61 @@
+import { Box as e, Button as t, IconButton as n, Stack as r, TextField as i, Typography as a } from "@mui/material";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Add as c, Delete as l } from "@mui/icons-material";
+//#region src/components/FormTemplateEditor/ChoiceOptionsEditor.tsx
+function u({ options: u, onChange: d }) {
+	let f = (e, t) => {
+		d(u.map((n, r) => r === e ? t : n));
+	}, p = (e) => {
+		d(u.filter((t, n) => n !== e));
+	};
+	return /* @__PURE__ */ s(e, {
+		sx: {
+			pl: 1,
+			borderLeft: 2,
+			borderColor: "divider"
+		},
+		children: [/* @__PURE__ */ o(a, {
+			variant: "caption",
+			color: "text.secondary",
+			sx: {
+				display: "block",
+				mb: .5
+			},
+			children: "Choices"
+		}), /* @__PURE__ */ s(r, {
+			spacing: 1,
+			children: [u.map((t, r) => /* @__PURE__ */ s(e, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: 1
+				},
+				children: [/* @__PURE__ */ o(i, {
+					value: t,
+					onChange: (e) => f(r, e.target.value),
+					size: "small",
+					fullWidth: !0
+				}), /* @__PURE__ */ o(n, {
+					size: "small",
+					"aria-label": "Delete choice",
+					onClick: () => p(r),
+					disabled: u.length <= 1,
+					children: /* @__PURE__ */ o(l, { fontSize: "small" })
+				})]
+			}, r)), /* @__PURE__ */ o(e, { children: /* @__PURE__ */ o(t, {
+				size: "small",
+				startIcon: /* @__PURE__ */ o(c, {}),
+				onClick: () => {
+					let e = u.length + 1;
+					for (; u.includes(`Option ${e}`);) e++;
+					d([...u, `Option ${e}`]);
+				},
+				children: "Add choice"
+			}) })]
+		})]
+	});
+}
+//#endregion
+export { u as ChoiceOptionsEditor };
+
+//# sourceMappingURL=ChoiceOptionsEditor.js.map

package/dist/components/FormTemplateEditor/ChoiceOptionsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceOptionsEditor.js","names":[],"sources":["../../../src/components/FormTemplateEditor/ChoiceOptionsEditor.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material'\n\ntype ChoiceOptionsEditorProps = {\n  options: string[]\n  onChange: (next: string[]) => void\n}\n\n/**\n * Edits a choice field's options. At least one option is always kept, and added options get a\n * unique `Option N` label.\n */\nexport function ChoiceOptionsEditor({\n  options,\n  onChange,\n}: ChoiceOptionsEditorProps) {\n  const update = (idx: number, next: string) => {\n    onChange(options.map((o, i) => (i === idx ? next : o)))\n  }\n  const remove = (idx: number) => {\n    onChange(options.filter((_, i) => i !== idx))\n  }\n  const add = () => {\n    let n = options.length + 1\n    while (options.includes(`Option ${n}`)) n++\n    onChange([...options, `Option ${n}`])\n  }\n\n  return (\n    <Box sx={{ pl: 1, borderLeft: 2, borderColor: 'divider' }}>\n      <Typography\n        variant=\"caption\"\n        color=\"text.secondary\"\n        sx={{ display: 'block', mb: 0.5 }}\n      >\n        Choices\n      </Typography>\n      <Stack spacing={1}>\n        {/* Index keys are safe: rows are fully controlled and hold no local state. */}\n        {options.map((opt, idx) => (\n          <Box key={idx} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n            <TextField\n              value={opt}\n              onChange={e => update(idx, e.target.value)}\n              size=\"small\"\n              fullWidth\n            />\n            <IconButton\n              size=\"small\"\n              aria-label=\"Delete choice\"\n              onClick={() => remove(idx)}\n              disabled={options.length <= 1}\n            >\n              <DeleteIcon fontSize=\"small\" />\n            </IconButton>\n          </Box>\n        ))}\n        <Box>\n          <Button size=\"small\" startIcon={<AddIcon />} onClick={add}>\n            Add choice\n          </Button>\n        </Box>\n      </Stack>\n    </Box>\n  )\n}\n"],"mappings":";;;;AAmBA,SAAgB,EAAoB,EAClC,YACA,eAC2B;CAC3B,IAAM,KAAU,GAAa,MAAiB;EAC5C,EAAS,EAAQ,KAAK,GAAG,MAAO,MAAM,IAAM,IAAO,CAAE,CAAC;CACxD,GACM,KAAU,MAAgB;EAC9B,EAAS,EAAQ,QAAQ,GAAG,MAAM,MAAM,CAAG,CAAC;CAC9C;CAOA,OACE,kBAAC,GAAD;EAAK,IAAI;GAAE,IAAI;GAAG,YAAY;GAAG,aAAa;EAAU;YAAxD,CACE,kBAAC,GAAD;GACE,SAAQ;GACR,OAAM;GACN,IAAI;IAAE,SAAS;IAAS,IAAI;GAAI;aACjC;EAEW,CAAA,GACZ,kBAAC,GAAD;GAAO,SAAS;aAAhB,CAEG,EAAQ,KAAK,GAAK,MACjB,kBAAC,GAAD;IAAe,IAAI;KAAE,SAAS;KAAQ,YAAY;KAAU,KAAK;IAAE;cAAnE,CACE,kBAAC,GAAD;KACE,OAAO;KACP,WAAU,MAAK,EAAO,GAAK,EAAE,OAAO,KAAK;KACzC,MAAK;KACL,WAAA;IACD,CAAA,GACD,kBAAC,GAAD;KACE,MAAK;KACL,cAAW;KACX,eAAe,EAAO,CAAG;KACzB,UAAU,EAAQ,UAAU;eAE5B,kBAAC,GAAD,EAAY,UAAS,QAAS,CAAA;IACpB,CAAA,CACT;MAfK,CAeL,CACN,GACD,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IAAQ,MAAK;IAAQ,WAAW,kBAAC,GAAD,CAAU,CAAA;IAAG,eApCnC;KAChB,IAAI,IAAI,EAAQ,SAAS;KACzB,OAAO,EAAQ,SAAS,UAAU,GAAG,IAAG;KACxC,EAAS,CAAC,GAAG,GAAS,UAAU,GAAG,CAAC;IACtC;cAgCmE;GAEnD,CAAA,EACL,CAAA,CACA;IACJ;;AAET"}

package/dist/components/FormTemplateEditor/FieldDefinitionDrawer.d.ts

@@ -0,0 +1,33 @@
+import { RJSFSchema } from '@rjsf/utils';
+import { SchemaPropertyContext } from '@/utils/jsonschema/submissionContext';
+export type FieldDefinitionDrawerProps = {
+    open: boolean;
+    propertyKey: string | null;
+    /** All property keys currently defined in the schema, including this one. */
+    existingKeys: Set<string>;
+    property: RJSFSchema | null;
+    isRequired: boolean;
+    /**
+     * Which submission context this property applies to (per the schema's
+     * `x-synapse-submissionContext` `allOf` convention). Editable here via a guided select box.
+     * This component only calls `onChangeContext`; a container elsewhere in the authoring flow is
+     * responsible for moving the property's definition between the schema's top-level `properties`
+     * and the matching `allOf` branch so ACT never has to hand-edit `allOf` for the common case.
+     */
+    context: SchemaPropertyContext;
+    /** True when this field is bound to one or more steps. Affects delete affordance. */
+    isUsedInSteps: boolean;
+    onClose: () => void;
+    onUpdate: (patch: Partial<RJSFSchema>) => void;
+    onRenameKey: (newKey: string) => void;
+    onReplace: (next: RJSFSchema) => void;
+    onChangeRequired: (isRequired: boolean) => void;
+    onChangeContext: (context: SchemaPropertyContext) => void;
+    onRemove: () => void;
+};
+/**
+ * Slide-in drawer for editing a single field's JSON Schema definition (label, help text, type,
+ * required, submission context, choice options, file format).
+ */
+export declare function FieldDefinitionDrawer({ open, propertyKey, existingKeys, property, isRequired, context, isUsedInSteps, onClose, onUpdate, onRenameKey, onReplace, onChangeRequired, onChangeContext, onRemove, }: FieldDefinitionDrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldDefinitionDrawer.d.ts.map

package/dist/components/FormTemplateEditor/FieldDefinitionDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDefinitionDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/FieldDefinitionDrawer.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAA;AAoB5E,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,EAAE,OAAO,CAAA;IACb,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,6EAA6E;IAC7E,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAA;IAC3B,UAAU,EAAE,OAAO,CAAA;IACnB;;;;;;OAMG;IACH,OAAO,EAAE,qBAAqB,CAAA;IAC9B,qFAAqF;IACrF,aAAa,EAAE,OAAO,CAAA;IACtB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IAC9C,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,gBAAgB,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAA;IAC/C,eAAe,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACzD,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,OAAO,EACP,aAAa,EACb,OAAO,EACP,QAAQ,EACR,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,QAAQ,GACT,EAAE,0BAA0B,2CA8M5B"}

package/dist/components/FormTemplateEditor/FieldDefinitionDrawer.js

@@ -0,0 +1,190 @@
+import { ChoiceOptionsEditor as e } from "./ChoiceOptionsEditor.js";
+import { FIELD_TYPE_OPTIONS as t, applyFieldType as n, choiceOptions as r, detectFieldType as i, sanitizePropertyKey as a } from "./schemaFieldUtils.js";
+import { useState as o } from "react";
+import { Alert as s, Box as c, Button as l, Drawer as u, FormControlLabel as d, IconButton as f, MenuItem as p, Stack as m, Switch as h, TextField as g, Typography as _ } from "@mui/material";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Close as b, Delete as x } from "@mui/icons-material";
+//#region src/components/FormTemplateEditor/FieldDefinitionDrawer.tsx
+var S = [
+	{
+		value: "ALWAYS",
+		label: "Always"
+	},
+	{
+		value: "REQUEST_ONLY",
+		label: "Initial request only"
+	},
+	{
+		value: "RENEWAL_ONLY",
+		label: "Renewal only"
+	}
+];
+function C({ open: C, propertyKey: w, existingKeys: T, property: E, isRequired: D, context: O, isUsedInSteps: k, onClose: A, onUpdate: j, onRenameKey: M, onReplace: N, onChangeRequired: P, onChangeContext: F, onRemove: I }) {
+	let L = E ? i(E) : null, R = E !== null && L === null, [z, B] = o(null), V = z?.forKey === w ? z.value : w ?? "", H = null;
+	V.length === 0 ? H = "Required" : V !== w && T.has(V) && (H = "Already used by another field");
+	let U = () => {
+		w && !H && V !== w && M(V), B(null);
+	}, W = (e) => {
+		E && N(n(E, e));
+	};
+	return /* @__PURE__ */ v(u, {
+		open: C,
+		onClose: A,
+		anchor: "right",
+		slotProps: { paper: { sx: { width: {
+			xs: "100%",
+			sm: 480
+		} } } },
+		children: /* @__PURE__ */ y(c, {
+			sx: {
+				p: 3,
+				display: "flex",
+				flexDirection: "column",
+				height: "100%"
+			},
+			children: [
+				/* @__PURE__ */ y(c, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						mb: 2
+					},
+					children: [/* @__PURE__ */ v(_, {
+						variant: "h6",
+						sx: { flexGrow: 1 },
+						children: "Edit field"
+					}), /* @__PURE__ */ v(f, {
+						onClick: A,
+						"aria-label": "Close field editor",
+						children: /* @__PURE__ */ v(b, {})
+					})]
+				}),
+				w && /* @__PURE__ */ v(g, {
+					label: "Property key",
+					value: V,
+					onChange: (e) => B({
+						forKey: w,
+						value: a(e.target.value)
+					}),
+					onBlur: U,
+					onKeyDown: (e) => {
+						e.key === "Enter" && (e.preventDefault(), U());
+					},
+					error: H !== null,
+					helperText: H ?? "Identifies this field in the JSON Schema and submitted requests.",
+					size: "small",
+					fullWidth: !0,
+					sx: { mb: 2 },
+					slotProps: { input: { sx: { fontFamily: "monospace" } } }
+				}),
+				E && /* @__PURE__ */ v(g, {
+					select: !0,
+					label: "Submission context",
+					value: O,
+					onChange: (e) => F(e.target.value),
+					size: "small",
+					fullWidth: !0,
+					sx: { mb: 2 },
+					helperText: "Controls whether requesters are asked this question on an initial request, a renewal, or both.",
+					children: S.map((e) => /* @__PURE__ */ v(p, {
+						value: e.value,
+						children: e.label
+					}, e.value))
+				}),
+				/* @__PURE__ */ v(c, {
+					sx: {
+						flexGrow: 1,
+						overflow: "auto"
+					},
+					children: E ? R ? /* @__PURE__ */ v(s, {
+						severity: "warning",
+						variant: "outlined",
+						children: "This field uses settings not supported by the simple editor. Edit it via the advanced raw JSON Schema view."
+					}) : /* @__PURE__ */ y(m, {
+						spacing: 2,
+						children: [
+							/* @__PURE__ */ v(g, {
+								label: "Question label",
+								value: E.title ?? "",
+								onChange: (e) => j({ title: e.target.value }),
+								size: "small",
+								fullWidth: !0
+							}),
+							/* @__PURE__ */ v(g, {
+								label: "Help text",
+								value: E.description ?? "",
+								onChange: (e) => j({ description: e.target.value }),
+								size: "small",
+								multiline: !0,
+								rows: 3,
+								fullWidth: !0,
+								helperText: "Shown to the requester below the question."
+							}),
+							/* @__PURE__ */ y(m, {
+								direction: "row",
+								spacing: 1,
+								alignItems: "center",
+								children: [/* @__PURE__ */ v(g, {
+									select: !0,
+									label: "Field type",
+									value: L,
+									onChange: (e) => W(e.target.value),
+									size: "small",
+									sx: { flexGrow: 1 },
+									children: t.map((e) => /* @__PURE__ */ v(p, {
+										value: e.value,
+										children: e.label
+									}, e.value))
+								}), /* @__PURE__ */ v(d, {
+									control: /* @__PURE__ */ v(h, {
+										checked: D,
+										onChange: (e) => P(e.target.checked)
+									}),
+									label: "Required"
+								})]
+							}),
+							(L === "choice" || L === "multiChoice") && /* @__PURE__ */ v(e, {
+								options: r(E),
+								onChange: (e) => j(L === "choice" ? { enum: e } : { items: {
+									...E.items,
+									enum: e
+								} })
+							}),
+							L === "file" && /* @__PURE__ */ v(s, {
+								severity: "info",
+								variant: "outlined",
+								children: "Requesters will be prompted to upload a file. You can attach a downloadable template to this field on each step that uses it."
+							})
+						]
+					}) : /* @__PURE__ */ v(s, {
+						severity: "info",
+						children: "No field selected."
+					})
+				}),
+				/* @__PURE__ */ y(c, {
+					sx: {
+						pt: 2,
+						display: "flex",
+						justifyContent: "space-between",
+						gap: 1
+					},
+					children: [/* @__PURE__ */ v(l, {
+						color: "error",
+						startIcon: /* @__PURE__ */ v(x, {}),
+						onClick: I,
+						disabled: !E,
+						children: k ? "Delete (will remove from form)" : "Delete field"
+					}), /* @__PURE__ */ v(l, {
+						variant: "contained",
+						onClick: A,
+						children: "Done"
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { C as FieldDefinitionDrawer };
+
+//# sourceMappingURL=FieldDefinitionDrawer.js.map

package/dist/components/FormTemplateEditor/FieldDefinitionDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDefinitionDrawer.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FieldDefinitionDrawer.tsx"],"sourcesContent":["import {\n  Alert,\n  Box,\n  Button,\n  Drawer,\n  FormControlLabel,\n  IconButton,\n  MenuItem,\n  Stack,\n  Switch,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { Close as CloseIcon, Delete as DeleteIcon } from '@mui/icons-material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport { useState } from 'react'\nimport { SchemaPropertyContext } from '@/utils/jsonschema/submissionContext'\nimport { ChoiceOptionsEditor } from './ChoiceOptionsEditor'\nimport {\n  applyFieldType,\n  choiceOptions,\n  detectFieldType,\n  FIELD_TYPE_OPTIONS,\n  sanitizePropertyKey,\n  SimpleFieldType,\n} from './schemaFieldUtils'\n\nconst SUBMISSION_CONTEXT_OPTIONS: {\n  value: SchemaPropertyContext\n  label: string\n}[] = [\n  { value: 'ALWAYS', label: 'Always' },\n  { value: 'REQUEST_ONLY', label: 'Initial request only' },\n  { value: 'RENEWAL_ONLY', label: 'Renewal only' },\n]\n\nexport type FieldDefinitionDrawerProps = {\n  open: boolean\n  propertyKey: string | null\n  /** All property keys currently defined in the schema, including this one. */\n  existingKeys: Set<string>\n  property: RJSFSchema | null\n  isRequired: boolean\n  /**\n   * Which submission context this property applies to (per the schema's\n   * `x-synapse-submissionContext` `allOf` convention). Editable here via a guided select box.\n   * This component only calls `onChangeContext`; a container elsewhere in the authoring flow is\n   * responsible for moving the property's definition between the schema's top-level `properties`\n   * and the matching `allOf` branch so ACT never has to hand-edit `allOf` for the common case.\n   */\n  context: SchemaPropertyContext\n  /** True when this field is bound to one or more steps. Affects delete affordance. */\n  isUsedInSteps: boolean\n  onClose: () => void\n  onUpdate: (patch: Partial<RJSFSchema>) => void\n  onRenameKey: (newKey: string) => void\n  onReplace: (next: RJSFSchema) => void\n  onChangeRequired: (isRequired: boolean) => void\n  onChangeContext: (context: SchemaPropertyContext) => void\n  onRemove: () => void\n}\n\n/**\n * Slide-in drawer for editing a single field's JSON Schema definition (label, help text, type,\n * required, submission context, choice options, file format).\n */\nexport function FieldDefinitionDrawer({\n  open,\n  propertyKey,\n  existingKeys,\n  property,\n  isRequired,\n  context,\n  isUsedInSteps,\n  onClose,\n  onUpdate,\n  onRenameKey,\n  onReplace,\n  onChangeRequired,\n  onChangeContext,\n  onRemove,\n}: FieldDefinitionDrawerProps) {\n  const type = property ? detectFieldType(property) : null\n  const isAdvanced = property !== null && type === null\n\n  // The draft exists only while the key is being edited, and is tagged with the key it was started\n  // from. When `propertyKey` changes underneath it (switching fields, or the container re-slugging\n  // the key from the label) the draft no longer applies and the prop is shown again.\n  const [keyDraft, setKeyDraft] = useState<{\n    forKey: string | null\n    value: string\n  } | null>(null)\n  const displayedKey =\n    keyDraft?.forKey === propertyKey ? keyDraft.value : (propertyKey ?? '')\n\n  let keyError: string | null = null\n  if (displayedKey.length === 0) {\n    keyError = 'Required'\n  } else if (displayedKey !== propertyKey && existingKeys.has(displayedKey)) {\n    keyError = 'Already used by another field'\n  }\n\n  const commitKeyDraft = () => {\n    if (propertyKey && !keyError && displayedKey !== propertyKey) {\n      onRenameKey(displayedKey)\n    }\n    setKeyDraft(null)\n  }\n\n  const handleChangeType = (next: SimpleFieldType) => {\n    if (!property) return\n    onReplace(applyFieldType(property, next))\n  }\n\n  return (\n    <Drawer\n      open={open}\n      onClose={onClose}\n      anchor=\"right\"\n      slotProps={{ paper: { sx: { width: { xs: '100%', sm: 480 } } } }}\n    >\n      <Box\n        sx={{ p: 3, display: 'flex', flexDirection: 'column', height: '100%' }}\n      >\n        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>\n          <Typography variant=\"h6\" sx={{ flexGrow: 1 }}>\n            Edit field\n          </Typography>\n          <IconButton onClick={onClose} aria-label=\"Close field editor\">\n            <CloseIcon />\n          </IconButton>\n        </Box>\n\n        {propertyKey && (\n          <TextField\n            label=\"Property key\"\n            value={displayedKey}\n            onChange={e =>\n              setKeyDraft({\n                forKey: propertyKey,\n                value: sanitizePropertyKey(e.target.value),\n              })\n            }\n            onBlur={commitKeyDraft}\n            onKeyDown={e => {\n              if (e.key === 'Enter') {\n                e.preventDefault()\n                commitKeyDraft()\n              }\n            }}\n            error={keyError !== null}\n            helperText={\n              keyError ??\n              'Identifies this field in the JSON Schema and submitted requests.'\n            }\n            size=\"small\"\n            fullWidth\n            sx={{ mb: 2 }}\n            slotProps={{ input: { sx: { fontFamily: 'monospace' } } }}\n          />\n        )}\n\n        {property && (\n          <TextField\n            select\n            label=\"Submission context\"\n            value={context}\n            onChange={e =>\n              onChangeContext(e.target.value as SchemaPropertyContext)\n            }\n            size=\"small\"\n            fullWidth\n            sx={{ mb: 2 }}\n            helperText=\"Controls whether requesters are asked this question on an initial request, a renewal, or both.\"\n          >\n            {SUBMISSION_CONTEXT_OPTIONS.map(opt => (\n              <MenuItem key={opt.value} value={opt.value}>\n                {opt.label}\n              </MenuItem>\n            ))}\n          </TextField>\n        )}\n\n        <Box sx={{ flexGrow: 1, overflow: 'auto' }}>\n          {!property ? (\n            <Alert severity=\"info\">No field selected.</Alert>\n          ) : isAdvanced ? (\n            <Alert severity=\"warning\" variant=\"outlined\">\n              This field uses settings not supported by the simple editor. Edit\n              it via the advanced raw JSON Schema view.\n            </Alert>\n          ) : (\n            <Stack spacing={2}>\n              <TextField\n                label=\"Question label\"\n                value={property.title ?? ''}\n                onChange={e => onUpdate({ title: e.target.value })}\n                size=\"small\"\n                fullWidth\n              />\n              <TextField\n                label=\"Help text\"\n                value={property.description ?? ''}\n                onChange={e => onUpdate({ description: e.target.value })}\n                size=\"small\"\n                multiline\n                rows={3}\n                fullWidth\n                helperText=\"Shown to the requester below the question.\"\n              />\n              <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n                <TextField\n                  select\n                  label=\"Field type\"\n                  value={type}\n                  onChange={e =>\n                    handleChangeType(e.target.value as SimpleFieldType)\n                  }\n                  size=\"small\"\n                  sx={{ flexGrow: 1 }}\n                >\n                  {FIELD_TYPE_OPTIONS.map(opt => (\n                    <MenuItem key={opt.value} value={opt.value}>\n                      {opt.label}\n                    </MenuItem>\n                  ))}\n                </TextField>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={isRequired}\n                      onChange={e => onChangeRequired(e.target.checked)}\n                    />\n                  }\n                  label=\"Required\"\n                />\n              </Stack>\n\n              {(type === 'choice' || type === 'multiChoice') && (\n                <ChoiceOptionsEditor\n                  options={choiceOptions(property)}\n                  onChange={next =>\n                    type === 'choice'\n                      ? onUpdate({ enum: next })\n                      : onUpdate({\n                          items: {\n                            ...(property.items as RJSFSchema),\n                            enum: next,\n                          },\n                        })\n                  }\n                />\n              )}\n\n              {type === 'file' && (\n                <Alert severity=\"info\" variant=\"outlined\">\n                  Requesters will be prompted to upload a file. You can attach a\n                  downloadable template to this field on each step that uses it.\n                </Alert>\n              )}\n            </Stack>\n          )}\n        </Box>\n\n        <Box\n          sx={{\n            pt: 2,\n            display: 'flex',\n            justifyContent: 'space-between',\n            gap: 1,\n          }}\n        >\n          <Button\n            color=\"error\"\n            startIcon={<DeleteIcon />}\n            onClick={onRemove}\n            disabled={!property}\n          >\n            {isUsedInSteps ? 'Delete (will remove from form)' : 'Delete field'}\n          </Button>\n          <Button variant=\"contained\" onClick={onClose}>\n            Done\n          </Button>\n        </Box>\n      </Box>\n    </Drawer>\n  )\n}\n"],"mappings":"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"}

package/dist/components/FormTemplateEditor/FieldLibrary.css

@@ -0,0 +1 @@
+._selectedRow_4haeg_1{outline-offset:-2px;border-radius:4px;outline:2px solid #0000}._selectedRow_4haeg_1[data-selected=true]{outline-color:var(--synapse-primary-action-color)}

package/dist/components/FormTemplateEditor/FieldLibrary.d.ts

@@ -0,0 +1,17 @@
+import { RJSFSchema } from '@rjsf/utils';
+export type FieldLibraryProps = {
+    jsonSchema: RJSFSchema;
+    /** Set of JSON pointers (e.g. `/institution`) currently bound to a step. */
+    usedPaths: Set<string>;
+    selectedPropertyKey: string | null;
+    onSelectField: (propertyKey: string) => void;
+    onCreateField: () => void;
+};
+/**
+ * Left pane: a compact list of all schema properties (the "fields" the form
+ * collects) -- both unconditional and any gated behind an
+ * `x-synapse-submissionContext` conditional. Each row is clickable and opens
+ * the field definition drawer.
+ */
+export declare function FieldLibrary({ jsonSchema, usedPaths, selectedPropertyKey, onSelectField, onCreateField, }: FieldLibraryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldLibrary.d.ts.map

package/dist/components/FormTemplateEditor/FieldLibrary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/FieldLibrary.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AASxC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,UAAU,CAAA;IACtB,4EAA4E;IAC5E,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACtB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,aAAa,EACb,aAAa,GACd,EAAE,iBAAiB,2CA4FnB"}

package/dist/components/FormTemplateEditor/FieldLibrary.js

@@ -0,0 +1,88 @@
+import { listResolvedSchemaProperties as e, propertyKeyToPointer as t } from "../../utils/jsonschema/submissionContext.js";
+import { FieldLibraryRow as n } from "./FieldLibraryRow.js";
+import r from "./FieldLibrary.module.js";
+import { useMemo as i, useState as a } from "react";
+import { Alert as o, Box as s, Button as c, InputAdornment as l, Paper as u, Stack as d, TextField as f, Typography as p } from "@mui/material";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Add as g, Search as _ } from "@mui/icons-material";
+//#region src/components/FormTemplateEditor/FieldLibrary.tsx
+function v({ jsonSchema: v, usedPaths: y, selectedPropertyKey: b, onSelectField: x, onCreateField: S }) {
+	let [C, w] = a(""), T = i(() => e(v), [v]), E = i(() => {
+		if (!C) return T;
+		let e = C.toLowerCase();
+		return T.filter((t) => `${t.propertyKey} ${t.subSchema.title ?? ""}`.toLowerCase().includes(e));
+	}, [T, C]), D;
+	return D = T.length === 0 ? /* @__PURE__ */ m(o, {
+		severity: "info",
+		children: "No fields yet. Click \"New\" to start collecting information."
+	}) : E.length === 0 ? /* @__PURE__ */ h(o, {
+		severity: "info",
+		children: [
+			"No fields match \"",
+			C,
+			"\"."
+		]
+	}) : /* @__PURE__ */ m(d, {
+		spacing: .75,
+		children: E.map((e) => /* @__PURE__ */ m(s, {
+			className: r.selectedRow,
+			"data-selected": b === e.propertyKey,
+			children: /* @__PURE__ */ m(n, {
+				propertyKey: e.propertyKey,
+				property: e.subSchema,
+				isRequired: e.isRequired,
+				context: e.context,
+				isUsedInSteps: y.has(t(e.propertyKey)),
+				onClick: () => x(e.propertyKey)
+			})
+		}, e.propertyKey))
+	}), /* @__PURE__ */ h(u, {
+		variant: "outlined",
+		sx: {
+			p: 2,
+			height: "100%"
+		},
+		children: [/* @__PURE__ */ h(s, {
+			sx: { mb: 1 },
+			children: [/* @__PURE__ */ m(p, {
+				variant: "subtitle2",
+				children: "Fields"
+			}), /* @__PURE__ */ m(p, {
+				variant: "caption",
+				color: "text.secondary",
+				children: "Define the data you want to collect. Click a field to edit it."
+			})]
+		}), /* @__PURE__ */ h(d, {
+			spacing: 1.5,
+			children: [/* @__PURE__ */ h(d, {
+				direction: "row",
+				spacing: 1,
+				alignItems: "center",
+				children: [/* @__PURE__ */ m(f, {
+					placeholder: "Search fields…",
+					value: C,
+					onChange: (e) => w(e.target.value),
+					size: "small",
+					fullWidth: !0,
+					slotProps: {
+						input: { startAdornment: /* @__PURE__ */ m(l, {
+							position: "start",
+							children: /* @__PURE__ */ m(_, { fontSize: "small" })
+						}) },
+						htmlInput: { "aria-label": "Search fields" }
+					}
+				}), /* @__PURE__ */ m(c, {
+					size: "small",
+					variant: "outlined",
+					startIcon: /* @__PURE__ */ m(g, {}),
+					onClick: S,
+					children: "New"
+				})]
+			}), D]
+		})]
+	});
+}
+//#endregion
+export { v as FieldLibrary };
+
+//# sourceMappingURL=FieldLibrary.js.map

package/dist/components/FormTemplateEditor/FieldLibrary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLibrary.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FieldLibrary.tsx"],"sourcesContent":["import {\n  Alert,\n  Box,\n  Button,\n  InputAdornment,\n  Paper,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { Add as AddIcon, Search as SearchIcon } from '@mui/icons-material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport { ReactNode, useMemo, useState } from 'react'\nimport {\n  listResolvedSchemaProperties,\n  propertyKeyToPointer,\n} from '@/utils/jsonschema/submissionContext'\nimport { FieldLibraryRow } from './FieldLibraryRow'\nimport fieldLibraryStyles from './FieldLibrary.module.scss'\n\nexport type FieldLibraryProps = {\n  jsonSchema: RJSFSchema\n  /** Set of JSON pointers (e.g. `/institution`) currently bound to a step. */\n  usedPaths: Set<string>\n  selectedPropertyKey: string | null\n  onSelectField: (propertyKey: string) => void\n  onCreateField: () => void\n}\n\n/**\n * Left pane: a compact list of all schema properties (the \"fields\" the form\n * collects) -- both unconditional and any gated behind an\n * `x-synapse-submissionContext` conditional. Each row is clickable and opens\n * the field definition drawer.\n */\nexport function FieldLibrary({\n  jsonSchema,\n  usedPaths,\n  selectedPropertyKey,\n  onSelectField,\n  onCreateField,\n}: FieldLibraryProps) {\n  const [search, setSearch] = useState('')\n\n  const resolvedProperties = useMemo(\n    () => listResolvedSchemaProperties(jsonSchema),\n    [jsonSchema],\n  )\n\n  const filtered = useMemo(() => {\n    if (!search) return resolvedProperties\n    const searchTerm = search.toLowerCase()\n    return resolvedProperties.filter(p => {\n      const entryAsString =\n        `${p.propertyKey} ${p.subSchema.title ?? ''}`.toLowerCase()\n      return entryAsString.includes(searchTerm)\n    })\n  }, [resolvedProperties, search])\n\n  let fieldList: ReactNode\n  if (resolvedProperties.length === 0) {\n    fieldList = (\n      <Alert severity=\"info\">\n        No fields yet. Click \"New\" to start collecting information.\n      </Alert>\n    )\n  } else if (filtered.length === 0) {\n    fieldList = <Alert severity=\"info\">No fields match \"{search}\".</Alert>\n  } else {\n    fieldList = (\n      <Stack spacing={0.75}>\n        {filtered.map(p => (\n          <Box\n            key={p.propertyKey}\n            className={fieldLibraryStyles.selectedRow}\n            data-selected={selectedPropertyKey === p.propertyKey}\n          >\n            <FieldLibraryRow\n              propertyKey={p.propertyKey}\n              property={p.subSchema}\n              isRequired={p.isRequired}\n              context={p.context}\n              isUsedInSteps={usedPaths.has(propertyKeyToPointer(p.propertyKey))}\n              onClick={() => onSelectField(p.propertyKey)}\n            />\n          </Box>\n        ))}\n      </Stack>\n    )\n  }\n\n  return (\n    <Paper variant=\"outlined\" sx={{ p: 2, height: '100%' }}>\n      <Box sx={{ mb: 1 }}>\n        <Typography variant=\"subtitle2\">Fields</Typography>\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          Define the data you want to collect. Click a field to edit it.\n        </Typography>\n      </Box>\n\n      <Stack spacing={1.5}>\n        <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n          <TextField\n            placeholder=\"Search fields…\"\n            value={search}\n            onChange={e => setSearch(e.target.value)}\n            size=\"small\"\n            fullWidth\n            slotProps={{\n              input: {\n                startAdornment: (\n                  <InputAdornment position=\"start\">\n                    <SearchIcon fontSize=\"small\" />\n                  </InputAdornment>\n                ),\n              },\n              htmlInput: { 'aria-label': 'Search fields' },\n            }}\n          />\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            startIcon={<AddIcon />}\n            onClick={onCreateField}\n          >\n            New\n          </Button>\n        </Stack>\n\n        {fieldList}\n      </Stack>\n    </Paper>\n  )\n}\n"],"mappings":";;;;;;;;AAmCA,SAAgB,EAAa,EAC3B,eACA,cACA,wBACA,kBACA,oBACoB;CACpB,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAE,GAEjC,IAAqB,QACnB,EAA6B,CAAU,GAC7C,CAAC,CAAU,CACb,GAEM,IAAW,QAAc;EAC7B,IAAI,CAAC,GAAQ,OAAO;EACpB,IAAM,IAAa,EAAO,YAAY;EACtC,OAAO,EAAmB,QAAO,MAE7B,GAAG,EAAE,YAAY,GAAG,EAAE,UAAU,SAAS,KAAK,YACzC,EAAc,SAAS,CAAU,CACzC;CACH,GAAG,CAAC,GAAoB,CAAM,CAAC,GAE3B;CAgCJ,OA/BA,AASE,IATE,EAAmB,WAAW,IAE9B,kBAAC,GAAD;EAAO,UAAS;YAAO;CAEhB,CAAA,IAEA,EAAS,WAAW,IACjB,kBAAC,GAAD;EAAO,UAAS;YAAhB;GAAuB;GAAkB;GAAO;EAAS;MAGnE,kBAAC,GAAD;EAAO,SAAS;YACb,EAAS,KAAI,MACZ,kBAAC,GAAD;GAEE,WAAW,EAAmB;GAC9B,iBAAe,MAAwB,EAAE;aAEzC,kBAAC,GAAD;IACE,aAAa,EAAE;IACf,UAAU,EAAE;IACZ,YAAY,EAAE;IACd,SAAS,EAAE;IACX,eAAe,EAAU,IAAI,EAAqB,EAAE,WAAW,CAAC;IAChE,eAAe,EAAc,EAAE,WAAW;GAC3C,CAAA;EACE,GAZE,EAAE,WAYJ,CACN;CACI,CAAA,GAKT,kBAAC,GAAD;EAAO,SAAQ;EAAW,IAAI;GAAE,GAAG;GAAG,QAAQ;EAAO;YAArD,CACE,kBAAC,GAAD;GAAK,IAAI,EAAE,IAAI,EAAE;aAAjB,CACE,kBAAC,GAAD;IAAY,SAAQ;cAAY;GAAkB,CAAA,GAClD,kBAAC,GAAD;IAAY,SAAQ;IAAU,OAAM;cAAiB;GAEzC,CAAA,CACT;MAEL,kBAAC,GAAD;GAAO,SAAS;aAAhB,CACE,kBAAC,GAAD;IAAO,WAAU;IAAM,SAAS;IAAG,YAAW;cAA9C,CACE,kBAAC,GAAD;KACE,aAAY;KACZ,OAAO;KACP,WAAU,MAAK,EAAU,EAAE,OAAO,KAAK;KACvC,MAAK;KACL,WAAA;KACA,WAAW;MACT,OAAO,EACL,gBACE,kBAAC,GAAD;OAAgB,UAAS;iBACvB,kBAAC,GAAD,EAAY,UAAS,QAAS,CAAA;MAChB,CAAA,EAEpB;MACA,WAAW,EAAE,cAAc,gBAAgB;KAC7C;IACD,CAAA,GACD,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,WAAW,kBAAC,GAAD,CAAU,CAAA;KACrB,SAAS;eACV;IAEO,CAAA,CACH;OAEN,CACI;IACF;;AAEX"}

package/dist/components/FormTemplateEditor/FieldLibrary.module.js

@@ -0,0 +1,5 @@
+import './FieldLibrary.css';var e = { selectedRow: "_selectedRow_4haeg_1" };
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=FieldLibrary.module.js.map

package/dist/components/FormTemplateEditor/FieldLibrary.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLibrary.module.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FieldLibrary.module.scss"],"sourcesContent":["// Highlight for the field-library row matching the currently selected property.\n// Toggled with `data-selected` so the component only reports state and the look lives here,\n// matching the pattern used by dropTarget.module.scss.\n.selectedRow {\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  border-radius: 4px;\n\n  &[data-selected='true'] {\n    outline-color: var(--synapse-primary-action-color);\n  }\n}\n"],"mappings":""}

package/dist/components/FormTemplateEditor/FieldLibrary.module.scss

@@ -0,0 +1,12 @@
+// Highlight for the field-library row matching the currently selected property.
+// Toggled with `data-selected` so the component only reports state and the look lives here,
+// matching the pattern used by dropTarget.module.scss.
+.selectedRow {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  border-radius: 4px;
+
+  &[data-selected='true'] {
+    outline-color: var(--synapse-primary-action-color);
+  }
+}

package/dist/components/FormTemplateEditor/FieldLibraryRow.d.ts

@@ -0,0 +1,19 @@
+import { RJSFSchema } from '@rjsf/utils';
+import { SchemaPropertyContext } from '@/utils/jsonschema/submissionContext';
+export type FieldLibraryRowProps = {
+    propertyKey: string;
+    property: RJSFSchema;
+    isRequired: boolean;
+    /** Which submission context (per the schema's `x-synapse-submissionContext` convention)
+     * gates this property. `ALWAYS` properties show no badge. */
+    context: SchemaPropertyContext;
+    isUsedInSteps: boolean;
+    onClick: () => void;
+};
+/**
+ * A compact row in the field library. Click anywhere to edit the field's
+ * definition; grab the drag indicator on the left to bind it to a step.
+ * Rows already bound to a step are non-draggable.
+ */
+export declare function FieldLibraryRow({ propertyKey, property, isRequired, context, isUsedInSteps, onClick, }: FieldLibraryRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldLibraryRow.d.ts.map

package/dist/components/FormTemplateEditor/FieldLibraryRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLibraryRow.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/FieldLibraryRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EACL,qBAAqB,EAEtB,MAAM,sCAAsC,CAAA;AAK7C,MAAM,MAAM,oBAAoB,GAAG;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,UAAU,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;IACnB;iEAC6D;IAC7D,OAAO,EAAE,qBAAqB,CAAA;IAC9B,aAAa,EAAE,OAAO,CAAA;IACtB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,QAAQ,EACR,UAAU,EACV,OAAO,EACP,aAAa,EACb,OAAO,GACR,EAAE,oBAAoB,2CA6GtB"}