synapse-react-client 4.0.41 → 4.0.42

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepCard.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/StepCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,gBAAgB,EACjB,MAAM,kCAAkC,CAAA;AAmBzC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAGxC,OAAO,EAGL,sBAAsB,EAEvB,MAAM,sCAAsC,CAAA;AAa7C,OAAO,EAAoB,wBAAwB,EAAY,MAAM,SAAS,CAAA;AAS9E,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,wBAAwB,CAAA;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,4DAA4D;IAC5D,iBAAiB,EAAE,sBAAsB,EAAE,CAAA;IAC3C,0EAA0E;IAC1E,UAAU,EAAE,UAAU,CAAA;IACtB,iGAAiG;IACjG,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;IAClC,wDAAwD;IACxD,eAAe,EAAE,OAAO,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACpD,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,OAAO,EACP,MAAM,EACN,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,eAAe,EACf,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE,aAAa,2CAoNf"}

package/dist/components/FormTemplateEditor/StepCard.js

@@ -0,0 +1,203 @@
+import { moveItem as e } from "../../utils/functions/ArrayUtils.js";
+import { pointerToPropertyKey as t, propertyKeyToPointer as n, resolveSchemaPropertyAtPointer as r } from "../../utils/jsonschema/submissionContext.js";
+import i from "./dragHandle.module.js";
+import { FIELD_DRAG_TYPE as a, SLOT_SORTABLE_TYPE as o, STEP_SORTABLE_GROUP as s, STEP_SORTABLE_TYPE as c, slotGroupId as l, slotSortableId as u, stepSortableId as d } from "./sortableIds.js";
+import f from "./dropTarget.module.js";
+import { StepFieldRow as p } from "./StepFieldRow.js";
+import { BIND_FIELD_LABEL as m } from "./utils.js";
+import { useState as h } from "react";
+import { Box as g, Collapse as _, IconButton as v, MenuItem as y, Paper as b, Stack as ee, TextField as x, Typography as S } from "@mui/material";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { ArrowDownward as T, ArrowUpward as E, Delete as D, DragIndicator as O, ExpandLess as k, ExpandMore as A } from "@mui/icons-material";
+import j from "pluralize";
+import { useDroppable as M } from "@dnd-kit/react";
+import { useSortable as N } from "@dnd-kit/react/sortable";
+//#region src/components/FormTemplateEditor/StepCard.tsx
+var P = 1;
+function F({ step: F, stepIndex: I, isFirst: te, isLast: L, unboundProperties: R, jsonSchema: z, formTemplateId: B, defaultExpanded: V, onChange: H, onBindField: U, onMoveUp: W, onMoveDown: G, onRemove: K }) {
+	let [q, J] = h(V), { ref: Y, handleRef: X, isDragging: Z, isDropTarget: Q } = N({
+		id: d(F),
+		index: I,
+		group: s,
+		type: c,
+		accept: [c, a]
+	}), { ref: ne, isDropTarget: re } = M({
+		id: l(F),
+		accept: o,
+		collisionPriority: P
+	}), ie = (e, t) => {
+		H({ fields: F.fields.map((n, r) => r === e ? {
+			...n,
+			...t
+		} : n) });
+	}, $ = (t, n) => {
+		H({ fields: e(F.fields, t, n) });
+	}, ae = (e) => {
+		H({ fields: F.fields.filter((t, n) => n !== e) });
+	}, oe = j("field", F.fields.length, !0);
+	return /* @__PURE__ */ w(b, {
+		ref: Y,
+		variant: "outlined",
+		className: `${f.dropTarget} ${i.dragSource}`,
+		"data-drop-target": Q,
+		"data-dragging": Z,
+		sx: { p: 1.5 },
+		children: [/* @__PURE__ */ w(g, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .5
+			},
+			children: [
+				/* @__PURE__ */ C(g, {
+					ref: X,
+					role: "button",
+					tabIndex: 0,
+					"aria-label": "Drag to reorder step",
+					className: i.dragHandle,
+					sx: { color: "text.secondary" },
+					children: /* @__PURE__ */ C(O, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ C(v, {
+					size: "small",
+					onClick: () => J((e) => !e),
+					"aria-label": q ? "Collapse step" : "Expand step",
+					children: C(q ? k : A, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ w(g, {
+					sx: {
+						flexGrow: 1,
+						minWidth: 0
+					},
+					children: [/* @__PURE__ */ w(S, {
+						variant: "body2",
+						fontWeight: 500,
+						noWrap: !0,
+						children: [
+							"Step ",
+							I + 1,
+							": ",
+							F.title || "(untitled)"
+						]
+					}), /* @__PURE__ */ C(S, {
+						variant: "caption",
+						color: "text.secondary",
+						children: oe
+					})]
+				}),
+				/* @__PURE__ */ C(v, {
+					size: "small",
+					disabled: te,
+					onClick: W,
+					"aria-label": "Move step up",
+					children: /* @__PURE__ */ C(E, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ C(v, {
+					size: "small",
+					disabled: L,
+					onClick: G,
+					"aria-label": "Move step down",
+					children: /* @__PURE__ */ C(T, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ C(v, {
+					size: "small",
+					onClick: K,
+					"aria-label": "Remove step",
+					children: /* @__PURE__ */ C(D, { fontSize: "small" })
+				})
+			]
+		}), /* @__PURE__ */ C(_, {
+			in: q,
+			unmountOnExit: !0,
+			children: /* @__PURE__ */ w(g, {
+				sx: { pt: 1.5 },
+				children: [
+					/* @__PURE__ */ C(x, {
+						label: "Title",
+						value: F.title,
+						onChange: (e) => H({ title: e.target.value }),
+						size: "small",
+						fullWidth: !0,
+						sx: { mb: 1 }
+					}),
+					/* @__PURE__ */ C(x, {
+						label: "Description",
+						value: F.description ?? "",
+						onChange: (e) => H({ description: e.target.value }),
+						size: "small",
+						multiline: !0,
+						rows: 2,
+						fullWidth: !0,
+						sx: { mb: 1.5 }
+					}),
+					/* @__PURE__ */ C(g, {
+						ref: ne,
+						className: f.dropTarget,
+						"data-drop-target": re,
+						sx: {
+							display: "flex",
+							flexDirection: "column",
+							gap: 1,
+							mb: 1,
+							p: .5,
+							borderRadius: 1
+						},
+						children: F.fields.length === 0 ? /* @__PURE__ */ C(S, {
+							variant: "caption",
+							color: "text.secondary",
+							sx: { p: 1 },
+							children: "Drag a field here, or bind one below."
+						}) : F.fields.map((e, n) => {
+							let i = r(z, e.schemaPath);
+							return /* @__PURE__ */ C(p, {
+								sortableId: u(e),
+								sortableIndex: n,
+								sortableGroup: l(F),
+								field: e,
+								resolvedProperty: i?.subSchema,
+								context: i?.context ?? "ALWAYS",
+								propertyKey: t(e.schemaPath) ?? e.schemaPath,
+								isFirst: n === 0,
+								isLast: n === F.fields.length - 1,
+								formTemplateId: B,
+								onChange: (e) => ie(n, e),
+								onMoveUp: () => $(n, -1),
+								onMoveDown: () => $(n, 1),
+								onRemove: () => ae(n)
+							}, e.schemaPath);
+						})
+					}),
+					/* @__PURE__ */ C(ee, {
+						spacing: 1,
+						children: /* @__PURE__ */ C(x, {
+							select: !0,
+							size: "small",
+							label: m,
+							value: "",
+							onChange: (e) => {
+								e.target.value && U(e.target.value);
+							},
+							disabled: R.length === 0,
+							helperText: R.length === 0 ? "All fields are bound to a step." : "Add a field from the library to this step.",
+							children: R.length === 0 ? /* @__PURE__ */ C(y, {
+								value: "",
+								disabled: !0,
+								children: "All fields bound"
+							}) : R.map((e) => {
+								let t = n(e.propertyKey);
+								return /* @__PURE__ */ C(y, {
+									value: e.propertyKey,
+									children: e.subSchema.title ? `${e.subSchema.title} (${t})` : t
+								}, e.propertyKey);
+							})
+						})
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { F as StepCard };
+
+//# sourceMappingURL=StepCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepCard.js","names":[],"sources":["../../../src/components/FormTemplateEditor/StepCard.tsx"],"sourcesContent":["import { useDroppable } from '@dnd-kit/react'\nimport { useSortable } from '@dnd-kit/react/sortable'\nimport {\n  FormTemplateField,\n  FormTemplateStep,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  Box,\n  Collapse,\n  IconButton,\n  MenuItem,\n  Paper,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport {\n  ArrowDownward as DownIcon,\n  Delete as DeleteIcon,\n  DragIndicator as DragHandleIcon,\n  ExpandLess as ExpandLessIcon,\n  ExpandMore as ExpandMoreIcon,\n  ArrowUpward as UpIcon,\n} from '@mui/icons-material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport pluralize from 'pluralize'\nimport { useState } from 'react'\nimport {\n  pointerToPropertyKey,\n  propertyKeyToPointer,\n  ResolvedSchemaProperty,\n  resolveSchemaPropertyAtPointer,\n} from '@/utils/jsonschema/submissionContext'\nimport dragHandleStyles from './dragHandle.module.scss'\nimport dropTargetStyles from './dropTarget.module.scss'\nimport { StepFieldRow } from './StepFieldRow'\nimport {\n  FIELD_DRAG_TYPE,\n  slotGroupId,\n  SLOT_SORTABLE_TYPE,\n  slotSortableId,\n  stepSortableId,\n  STEP_SORTABLE_GROUP,\n  STEP_SORTABLE_TYPE,\n} from './sortableIds'\nimport { BIND_FIELD_LABEL, EditableFormTemplateStep, moveItem } from './utils'\n\n/**\n * The slot list must lose to the slot rows inside it so that dragging over a populated step\n * targets a row (which resolves to a precise insertion index) and only an empty or below-the-last-\n * row region falls through to the list itself.\n */\nconst SLOT_LIST_COLLISION_PRIORITY = 1\n\nexport type StepCardProps = {\n  step: EditableFormTemplateStep\n  stepIndex: number\n  isFirst: boolean\n  isLast: boolean\n  /** Properties not yet bound to any step in the template. */\n  unboundProperties: ResolvedSchemaProperty[]\n  /** The full JSON Schema, used to resolve display labels for slot rows. */\n  jsonSchema: RJSFSchema\n  /** The FormTemplate's id, if it has been saved. Threaded down to file-field template uploads. */\n  formTemplateId: string | undefined\n  /** If true, render expanded by default (first step). */\n  defaultExpanded: boolean\n  onChange: (patch: Partial<FormTemplateStep>) => void\n  onBindField: (propertyKey: string) => void\n  onMoveUp: () => void\n  onMoveDown: () => void\n  onRemove: () => void\n}\n\nexport function StepCard({\n  step,\n  stepIndex,\n  isFirst,\n  isLast,\n  unboundProperties,\n  jsonSchema,\n  formTemplateId,\n  defaultExpanded,\n  onChange,\n  onBindField,\n  onMoveUp,\n  onMoveDown,\n  onRemove,\n}: StepCardProps) {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  // Step is sortable within its group, and also accepts field drops to bind.\n  const { ref, handleRef, isDragging, isDropTarget } = useSortable({\n    id: stepSortableId(step),\n    index: stepIndex,\n    group: STEP_SORTABLE_GROUP,\n    type: STEP_SORTABLE_TYPE,\n    accept: [STEP_SORTABLE_TYPE, FIELD_DRAG_TYPE],\n  })\n\n  // The slot list is the drop target for slots dragged in from another step, which is the only\n  // way to reach a step whose list is empty and therefore has no slot rows to target.\n  const { ref: slotListRef, isDropTarget: isSlotDropTarget } = useDroppable({\n    id: slotGroupId(step),\n    accept: SLOT_SORTABLE_TYPE,\n    collisionPriority: SLOT_LIST_COLLISION_PRIORITY,\n  })\n\n  const handleFieldChange = (\n    fieldIdx: number,\n    patch: Partial<FormTemplateField>,\n  ) => {\n    onChange({\n      fields: step.fields.map((f, i) =>\n        i === fieldIdx ? { ...f, ...patch } : f,\n      ),\n    })\n  }\n\n  const handleFieldMove = (fieldIdx: number, direction: -1 | 1) => {\n    onChange({ fields: moveItem(step.fields, fieldIdx, direction) })\n  }\n\n  const handleFieldRemove = (fieldIdx: number) => {\n    onChange({ fields: step.fields.filter((_, i) => i !== fieldIdx) })\n  }\n\n  const fieldCountLabel = pluralize('field', step.fields.length, true)\n\n  return (\n    <Paper\n      ref={ref}\n      variant=\"outlined\"\n      className={`${dropTargetStyles.dropTarget} ${dragHandleStyles.dragSource}`}\n      data-drop-target={isDropTarget}\n      data-dragging={isDragging}\n      sx={{ p: 1.5 }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n        <Box\n          ref={handleRef}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Drag to reorder step\"\n          className={dragHandleStyles.dragHandle}\n          sx={{ color: 'text.secondary' }}\n        >\n          <DragHandleIcon fontSize=\"small\" />\n        </Box>\n        <IconButton\n          size=\"small\"\n          onClick={() => setExpanded(prev => !prev)}\n          aria-label={expanded ? 'Collapse step' : 'Expand step'}\n        >\n          {expanded ? (\n            <ExpandLessIcon fontSize=\"small\" />\n          ) : (\n            <ExpandMoreIcon fontSize=\"small\" />\n          )}\n        </IconButton>\n        <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n          <Typography variant=\"body2\" fontWeight={500} noWrap>\n            Step {stepIndex + 1}: {step.title || '(untitled)'}\n          </Typography>\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {fieldCountLabel}\n          </Typography>\n        </Box>\n        <IconButton\n          size=\"small\"\n          disabled={isFirst}\n          onClick={onMoveUp}\n          aria-label=\"Move step up\"\n        >\n          <UpIcon fontSize=\"small\" />\n        </IconButton>\n        <IconButton\n          size=\"small\"\n          disabled={isLast}\n          onClick={onMoveDown}\n          aria-label=\"Move step down\"\n        >\n          <DownIcon fontSize=\"small\" />\n        </IconButton>\n        <IconButton size=\"small\" onClick={onRemove} aria-label=\"Remove step\">\n          <DeleteIcon fontSize=\"small\" />\n        </IconButton>\n      </Box>\n\n      <Collapse in={expanded} unmountOnExit>\n        <Box sx={{ pt: 1.5 }}>\n          <TextField\n            label=\"Title\"\n            value={step.title}\n            onChange={e => onChange({ title: e.target.value })}\n            size=\"small\"\n            fullWidth\n            sx={{ mb: 1 }}\n          />\n          <TextField\n            label=\"Description\"\n            value={step.description ?? ''}\n            onChange={e => onChange({ description: e.target.value })}\n            size=\"small\"\n            multiline\n            rows={2}\n            fullWidth\n            sx={{ mb: 1.5 }}\n          />\n\n          <Box\n            ref={slotListRef}\n            className={dropTargetStyles.dropTarget}\n            data-drop-target={isSlotDropTarget}\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 1,\n              mb: 1,\n              p: 0.5,\n              borderRadius: 1,\n            }}\n          >\n            {step.fields.length === 0 ? (\n              <Typography\n                variant=\"caption\"\n                color=\"text.secondary\"\n                sx={{ p: 1 }}\n              >\n                Drag a field here, or bind one below.\n              </Typography>\n            ) : (\n              step.fields.map((field, fieldIdx) => {\n                const resolved = resolveSchemaPropertyAtPointer(\n                  jsonSchema,\n                  field.schemaPath,\n                )\n                return (\n                  <StepFieldRow\n                    key={field.schemaPath}\n                    sortableId={slotSortableId(field)}\n                    sortableIndex={fieldIdx}\n                    sortableGroup={slotGroupId(step)}\n                    field={field}\n                    resolvedProperty={resolved?.subSchema}\n                    context={resolved?.context ?? 'ALWAYS'}\n                    propertyKey={\n                      pointerToPropertyKey(field.schemaPath) ?? field.schemaPath\n                    }\n                    isFirst={fieldIdx === 0}\n                    isLast={fieldIdx === step.fields.length - 1}\n                    formTemplateId={formTemplateId}\n                    onChange={patch => handleFieldChange(fieldIdx, patch)}\n                    onMoveUp={() => handleFieldMove(fieldIdx, -1)}\n                    onMoveDown={() => handleFieldMove(fieldIdx, 1)}\n                    onRemove={() => handleFieldRemove(fieldIdx)}\n                  />\n                )\n              })\n            )}\n          </Box>\n\n          <Stack spacing={1}>\n            <TextField\n              select\n              size=\"small\"\n              label={BIND_FIELD_LABEL}\n              value=\"\"\n              onChange={e => {\n                if (e.target.value) onBindField(e.target.value)\n              }}\n              disabled={unboundProperties.length === 0}\n              helperText={\n                unboundProperties.length === 0\n                  ? 'All fields are bound to a step.'\n                  : 'Add a field from the library to this step.'\n              }\n            >\n              {unboundProperties.length === 0 ? (\n                <MenuItem value=\"\" disabled>\n                  All fields bound\n                </MenuItem>\n              ) : (\n                unboundProperties.map(p => {\n                  const pointer = propertyKeyToPointer(p.propertyKey)\n                  return (\n                    <MenuItem key={p.propertyKey} value={p.propertyKey}>\n                      {p.subSchema.title\n                        ? `${p.subSchema.title} (${pointer})`\n                        : pointer}\n                    </MenuItem>\n                  )\n                })\n              )}\n            </TextField>\n          </Stack>\n        </Box>\n      </Collapse>\n    </Paper>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+import { FormTemplateField } from '@sage-bionetworks/synapse-client';
+import { RJSFSchema } from '@rjsf/utils';
+import { SchemaPropertyContext } from '@/utils/jsonschema/submissionContext';
+export type StepFieldRowProps = {
+    /** Sortable id assigned by parent: `slot:{stepIndex}:{fieldIndex}`. */
+    sortableId: string;
+    /** Position within its step's fields array. */
+    sortableIndex: number;
+    /** Sortable group; slots only reorder within the same step. */
+    sortableGroup: string;
+    field: FormTemplateField;
+    /** The schema property this slot resolves to, if it still exists. */
+    resolvedProperty: RJSFSchema | undefined;
+    /** Which submission context (per the schema's `x-synapse-submissionContext` convention)
+     * gates this field, derived from `resolvedProperty`. */
+    context: SchemaPropertyContext;
+    /** Underlying property key (the segment after `/` in `schemaPath`). */
+    propertyKey: string;
+    isFirst: boolean;
+    isLast: boolean;
+    /** The FormTemplate's id, if it has been saved. Used to build the template file download. */
+    formTemplateId: string | undefined;
+    onChange: (patch: Partial<FormTemplateField>) => void;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onRemove: () => void;
+};
+/**
+ * A slot row inside a step. Compact by default — shows the field's display
+ * name. Expand to reveal slot-specific config: (for file fields) an
+ * optional template file handle. Sortable within its parent step.
+ */
+export declare function StepFieldRow({ sortableId, sortableIndex, sortableGroup, field, resolvedProperty, context, propertyKey, isFirst, isLast, formTemplateId, onChange, onMoveUp, onMoveDown, onRemove, }: StepFieldRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StepFieldRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepFieldRow.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/StepFieldRow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAmBpE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EACL,qBAAqB,EAEtB,MAAM,sCAAsC,CAAA;AAM7C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uEAAuE;IACvE,UAAU,EAAE,MAAM,CAAA;IAClB,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAA;IACrB,+DAA+D;IAC/D,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,iBAAiB,CAAA;IACxB,qEAAqE;IACrE,gBAAgB,EAAE,UAAU,GAAG,SAAS,CAAA;IACxC;4DACwD;IACxD,OAAO,EAAE,qBAAqB,CAAA;IAC9B,uEAAuE;IACvE,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,6FAA6F;IAC7F,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACrD,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,aAAa,EACb,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,OAAO,EACP,MAAM,EACN,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE,iBAAiB,2CA4HnB"}

package/dist/components/FormTemplateEditor/StepFieldRow.js

@@ -0,0 +1,128 @@
+import { submissionContextLabel as e } from "../../utils/jsonschema/submissionContext.js";
+import { detectFieldType as t, fieldTypeLabel as n } from "./schemaFieldUtils.js";
+import r from "./dragHandle.module.js";
+import { SLOT_SORTABLE_TYPE as i } from "./sortableIds.js";
+import { TemplateFileHandleField as a } from "./TemplateFileHandleField.js";
+import { useState as o } from "react";
+import { Box as s, Checkbox as c, Collapse as l, FormControlLabel as u, IconButton as d, Paper as f, Stack as p, Typography as m } from "@mui/material";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { ArrowDownward as _, ArrowUpward as v, Delete as y, DragIndicator as b, ExpandLess as x, ExpandMore as S } from "@mui/icons-material";
+import { useSortable as C } from "@dnd-kit/react/sortable";
+//#region src/components/FormTemplateEditor/StepFieldRow.tsx
+function w({ sortableId: w, sortableIndex: T, sortableGroup: E, field: D, resolvedProperty: O, context: k, propertyKey: A, isFirst: j, isLast: M, formTemplateId: N, onChange: P, onMoveUp: F, onMoveDown: I, onRemove: L }) {
+	let [R, z] = o(!1), { ref: B, handleRef: V, isDragging: H } = C({
+		id: w,
+		index: T,
+		group: E,
+		type: i,
+		accept: i
+	}), U = O ? t(O) : null, W = O?.title || A, G = U === "file", K = !O, q = `Missing field: ${D.schemaPath}`;
+	if (!K) {
+		let t = [n(U)];
+		k !== "ALWAYS" && t.push(e(k)), D.isPublic && t.push("Public"), q = t.join(" · ");
+	}
+	return /* @__PURE__ */ g(f, {
+		ref: B,
+		variant: "outlined",
+		className: r.dragSource,
+		"data-dragging": H,
+		sx: {
+			p: 1,
+			backgroundColor: "action.hover",
+			borderColor: K ? "error.main" : void 0
+		},
+		children: [/* @__PURE__ */ g(s, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .5
+			},
+			children: [
+				/* @__PURE__ */ h(s, {
+					ref: V,
+					role: "button",
+					tabIndex: 0,
+					"aria-label": "Drag to reorder field",
+					className: r.dragHandle,
+					sx: { color: "text.secondary" },
+					children: /* @__PURE__ */ h(b, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ h(d, {
+					size: "small",
+					onClick: () => z((e) => !e),
+					"aria-label": R ? "Collapse field" : "Expand field",
+					children: h(R ? x : S, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ g(s, {
+					sx: {
+						flexGrow: 1,
+						minWidth: 0
+					},
+					children: [/* @__PURE__ */ h(m, {
+						variant: "body2",
+						noWrap: !0,
+						title: W,
+						children: W
+					}), /* @__PURE__ */ h(m, {
+						variant: "caption",
+						color: K ? "error" : "text.secondary",
+						children: q
+					})]
+				}),
+				/* @__PURE__ */ h(d, {
+					size: "small",
+					disabled: j,
+					onClick: F,
+					"aria-label": "Move field up",
+					children: /* @__PURE__ */ h(v, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ h(d, {
+					size: "small",
+					disabled: M,
+					onClick: I,
+					"aria-label": "Move field down",
+					children: /* @__PURE__ */ h(_, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ h(d, {
+					size: "small",
+					onClick: L,
+					"aria-label": "Remove field from step",
+					children: /* @__PURE__ */ h(y, { fontSize: "small" })
+				})
+			]
+		}), /* @__PURE__ */ h(l, {
+			in: R,
+			unmountOnExit: !0,
+			children: /* @__PURE__ */ g(p, {
+				spacing: 1,
+				sx: {
+					pt: 1,
+					pl: 4
+				},
+				children: [
+					G && /* @__PURE__ */ h(a, {
+						fileHandleId: D.templateFileHandleId,
+						formTemplateId: N,
+						onChange: (e) => P({ templateFileHandleId: e })
+					}),
+					/* @__PURE__ */ h(u, {
+						control: /* @__PURE__ */ h(c, {
+							checked: D.isPublic ?? !1,
+							onChange: (e) => P({ isPublic: e.target.checked })
+						}),
+						label: "Publicly viewable after approval"
+					}),
+					/* @__PURE__ */ h(m, {
+						variant: "caption",
+						color: "text.secondary",
+						children: "Answers appear in this AR's public submission info once a submission is approved. Snapshotted at submit time."
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { w as StepFieldRow };
+
+//# sourceMappingURL=StepFieldRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepFieldRow.js","names":[],"sources":["../../../src/components/FormTemplateEditor/StepFieldRow.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/react/sortable'\nimport { FormTemplateField } from '@sage-bionetworks/synapse-client'\nimport {\n  Box,\n  Checkbox,\n  Collapse,\n  FormControlLabel,\n  IconButton,\n  Paper,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport {\n  ArrowDownward as DownIcon,\n  Delete as DeleteIcon,\n  DragIndicator as DragHandleIcon,\n  ExpandLess as ExpandLessIcon,\n  ExpandMore as ExpandMoreIcon,\n  ArrowUpward as UpIcon,\n} from '@mui/icons-material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport { useState } from 'react'\nimport {\n  SchemaPropertyContext,\n  submissionContextLabel,\n} from '@/utils/jsonschema/submissionContext'\nimport styles from './dragHandle.module.scss'\nimport { detectFieldType, fieldTypeLabel } from './schemaFieldUtils'\nimport { SLOT_SORTABLE_TYPE } from './sortableIds'\nimport { TemplateFileHandleField } from './TemplateFileHandleField'\n\nexport type StepFieldRowProps = {\n  /** Sortable id assigned by parent: `slot:{stepIndex}:{fieldIndex}`. */\n  sortableId: string\n  /** Position within its step's fields array. */\n  sortableIndex: number\n  /** Sortable group; slots only reorder within the same step. */\n  sortableGroup: string\n  field: FormTemplateField\n  /** The schema property this slot resolves to, if it still exists. */\n  resolvedProperty: RJSFSchema | undefined\n  /** Which submission context (per the schema's `x-synapse-submissionContext` convention)\n   * gates this field, derived from `resolvedProperty`. */\n  context: SchemaPropertyContext\n  /** Underlying property key (the segment after `/` in `schemaPath`). */\n  propertyKey: string\n  isFirst: boolean\n  isLast: boolean\n  /** The FormTemplate's id, if it has been saved. Used to build the template file download. */\n  formTemplateId: string | undefined\n  onChange: (patch: Partial<FormTemplateField>) => void\n  onMoveUp: () => void\n  onMoveDown: () => void\n  onRemove: () => void\n}\n\n/**\n * A slot row inside a step. Compact by default — shows the field's display\n * name. Expand to reveal slot-specific config: (for file fields) an\n * optional template file handle. Sortable within its parent step.\n */\nexport function StepFieldRow({\n  sortableId,\n  sortableIndex,\n  sortableGroup,\n  field,\n  resolvedProperty,\n  context,\n  propertyKey,\n  isFirst,\n  isLast,\n  formTemplateId,\n  onChange,\n  onMoveUp,\n  onMoveDown,\n  onRemove,\n}: StepFieldRowProps) {\n  const [expanded, setExpanded] = useState(false)\n\n  const { ref, handleRef, isDragging } = useSortable({\n    id: sortableId,\n    index: sortableIndex,\n    group: sortableGroup,\n    type: SLOT_SORTABLE_TYPE,\n    accept: SLOT_SORTABLE_TYPE,\n  })\n\n  const type = resolvedProperty ? detectFieldType(resolvedProperty) : null\n  const displayLabel = resolvedProperty?.title || propertyKey\n  const isFileField = type === 'file'\n  const isUnresolved = !resolvedProperty\n\n  let caption = `Missing field: ${field.schemaPath}`\n  if (!isUnresolved) {\n    const captionParts = [fieldTypeLabel(type)]\n    if (context !== 'ALWAYS') {\n      captionParts.push(submissionContextLabel(context))\n    }\n    if (field.isPublic) {\n      captionParts.push('Public')\n    }\n    caption = captionParts.join(' · ')\n  }\n\n  return (\n    <Paper\n      ref={ref}\n      variant=\"outlined\"\n      className={styles.dragSource}\n      data-dragging={isDragging}\n      sx={{\n        p: 1,\n        backgroundColor: 'action.hover',\n        borderColor: isUnresolved ? 'error.main' : undefined,\n      }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n        <Box\n          ref={handleRef}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Drag to reorder field\"\n          className={styles.dragHandle}\n          sx={{ color: 'text.secondary' }}\n        >\n          <DragHandleIcon fontSize=\"small\" />\n        </Box>\n        <IconButton\n          size=\"small\"\n          onClick={() => setExpanded(prev => !prev)}\n          aria-label={expanded ? 'Collapse field' : 'Expand field'}\n        >\n          {expanded ? (\n            <ExpandLessIcon fontSize=\"small\" />\n          ) : (\n            <ExpandMoreIcon fontSize=\"small\" />\n          )}\n        </IconButton>\n        <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n          <Typography variant=\"body2\" noWrap title={displayLabel}>\n            {displayLabel}\n          </Typography>\n          <Typography\n            variant=\"caption\"\n            color={isUnresolved ? 'error' : 'text.secondary'}\n          >\n            {caption}\n          </Typography>\n        </Box>\n        <IconButton\n          size=\"small\"\n          disabled={isFirst}\n          onClick={onMoveUp}\n          aria-label=\"Move field up\"\n        >\n          <UpIcon fontSize=\"small\" />\n        </IconButton>\n        <IconButton\n          size=\"small\"\n          disabled={isLast}\n          onClick={onMoveDown}\n          aria-label=\"Move field down\"\n        >\n          <DownIcon fontSize=\"small\" />\n        </IconButton>\n        <IconButton\n          size=\"small\"\n          onClick={onRemove}\n          aria-label=\"Remove field from step\"\n        >\n          <DeleteIcon fontSize=\"small\" />\n        </IconButton>\n      </Box>\n\n      <Collapse in={expanded} unmountOnExit>\n        <Stack spacing={1} sx={{ pt: 1, pl: 4 }}>\n          {isFileField && (\n            <TemplateFileHandleField\n              fileHandleId={field.templateFileHandleId}\n              formTemplateId={formTemplateId}\n              onChange={next => onChange({ templateFileHandleId: next })}\n            />\n          )}\n          <FormControlLabel\n            control={\n              <Checkbox\n                checked={field.isPublic ?? false}\n                onChange={e => onChange({ isPublic: e.target.checked })}\n              />\n            }\n            label=\"Publicly viewable after approval\"\n          />\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            Answers appear in this AR's public submission info once a submission\n            is approved. Snapshotted at submit time.\n          </Typography>\n        </Stack>\n      </Collapse>\n    </Paper>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA6DA,SAAgB,EAAa,EAC3B,eACA,kBACA,kBACA,UACA,qBACA,YACA,gBACA,YACA,WACA,mBACA,aACA,aACA,eACA,eACoB;CACpB,IAAM,CAAC,GAAU,KAAe,EAAS,EAAK,GAExC,EAAE,QAAK,cAAW,kBAAe,EAAY;EACjD,IAAI;EACJ,OAAO;EACP,OAAO;EACP,MAAM;EACN,QAAQ;CACV,CAAC,GAEK,IAAO,IAAmB,EAAgB,CAAgB,IAAI,MAC9D,IAAe,GAAkB,SAAS,GAC1C,IAAc,MAAS,QACvB,IAAe,CAAC,GAElB,IAAU,kBAAkB,EAAM;CACtC,IAAI,CAAC,GAAc;EACjB,IAAM,IAAe,CAAC,EAAe,CAAI,CAAC;EAO1C,AANI,MAAY,YACd,EAAa,KAAK,EAAuB,CAAO,CAAC,GAE/C,EAAM,YACR,EAAa,KAAK,QAAQ,GAE5B,IAAU,EAAa,KAAK,KAAK;CACnC;CAEA,OACE,kBAAC,GAAD;EACO;EACL,SAAQ;EACR,WAAW,EAAO;EAClB,iBAAe;EACf,IAAI;GACF,GAAG;GACH,iBAAiB;GACjB,aAAa,IAAe,eAAe,KAAA;EAC7C;YATF,CAWE,kBAAC,GAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAI;aAA3D;IACE,kBAAC,GAAD;KACE,KAAK;KACL,MAAK;KACL,UAAU;KACV,cAAW;KACX,WAAW,EAAO;KAClB,IAAI,EAAE,OAAO,iBAAiB;eAE9B,kBAAC,GAAD,EAAgB,UAAS,QAAS,CAAA;IAC/B,CAAA;IACL,kBAAC,GAAD;KACE,MAAK;KACL,eAAe,GAAY,MAAQ,CAAC,CAAI;KACxC,cAAY,IAAW,mBAAmB;eAGxC,EADD,IACE,IAEA,GAFD,EAAgB,UAAS,QAAS,CAEA;IAE1B,CAAA;IACZ,kBAAC,GAAD;KAAK,IAAI;MAAE,UAAU;MAAG,UAAU;KAAE;eAApC,CACE,kBAAC,GAAD;MAAY,SAAQ;MAAQ,QAAA;MAAO,OAAO;gBACvC;KACS,CAAA,GACZ,kBAAC,GAAD;MACE,SAAQ;MACR,OAAO,IAAe,UAAU;gBAE/B;KACS,CAAA,CACT;;IACL,kBAAC,GAAD;KACE,MAAK;KACL,UAAU;KACV,SAAS;KACT,cAAW;eAEX,kBAAC,GAAD,EAAQ,UAAS,QAAS,CAAA;IAChB,CAAA;IACZ,kBAAC,GAAD;KACE,MAAK;KACL,UAAU;KACV,SAAS;KACT,cAAW;eAEX,kBAAC,GAAD,EAAU,UAAS,QAAS,CAAA;IAClB,CAAA;IACZ,kBAAC,GAAD;KACE,MAAK;KACL,SAAS;KACT,cAAW;eAEX,kBAAC,GAAD,EAAY,UAAS,QAAS,CAAA;IACpB,CAAA;GACT;MAEL,kBAAC,GAAD;GAAU,IAAI;GAAU,eAAA;aACtB,kBAAC,GAAD;IAAO,SAAS;IAAG,IAAI;KAAE,IAAI;KAAG,IAAI;IAAE;cAAtC;KACG,KACC,kBAAC,GAAD;MACE,cAAc,EAAM;MACJ;MAChB,WAAU,MAAQ,EAAS,EAAE,sBAAsB,EAAK,CAAC;KAC1D,CAAA;KAEH,kBAAC,GAAD;MACE,SACE,kBAAC,GAAD;OACE,SAAS,EAAM,YAAY;OAC3B,WAAU,MAAK,EAAS,EAAE,UAAU,EAAE,OAAO,QAAQ,CAAC;MACvD,CAAA;MAEH,OAAM;KACP,CAAA;KACD,kBAAC,GAAD;MAAY,SAAQ;MAAU,OAAM;gBAAiB;KAGzC,CAAA;IACP;;EACC,CAAA,CACL;;AAEX"}

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

@@ -0,0 +1,19 @@
+export type TemplateFileHandleFieldProps = {
+    /** The slot's `templateFileHandleId`, if one is attached. */
+    fileHandleId: string | undefined;
+    /**
+     * The FormTemplate's id, used to build the download association. Undefined for a template
+     * that has not been saved yet (a brand-new draft), in which case the file is downloaded
+     * directly as a file handle the current user uploaded.
+     */
+    formTemplateId: string | undefined;
+    onChange: (fileHandleId: string | undefined) => void;
+};
+/**
+ * Upload/download control for a file field's optional template attachment
+ * (`FormTemplateField.templateFileHandleId`) — e.g. a fillable document requesters must
+ * download, complete, and re-upload to answer this slot. Uploads immediately via
+ * `BasicFileHandleUpload` in a dialog; download reuses `FileHandleLink`.
+ */
+export declare function TemplateFileHandleField({ fileHandleId, formTemplateId, onChange, }: TemplateFileHandleFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TemplateFileHandleField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateFileHandleField.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/TemplateFileHandleField.tsx"],"names":[],"mappings":"AAwBA,MAAM,MAAM,4BAA4B,GAAG;IACzC,6DAA6D;IAC7D,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC;;;;OAIG;IACH,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;IAClC,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;CACrD,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,cAAc,EACd,QAAQ,GACT,EAAE,4BAA4B,2CA+F9B"}

package/dist/components/FormTemplateEditor/TemplateFileHandleField.js

@@ -0,0 +1,78 @@
+import { DialogBase as e } from "../DialogBase.js";
+import { FileHandleLink as t } from "../widgets/FileHandleLink.js";
+import { BasicFileHandleUpload as n } from "../file/upload/BasicFileHandleUpload.js";
+import { useMemo as r, useRef as i, useState as a } from "react";
+import { Alert as o, Box as s, Button as c, IconButton as l, Stack as u, Typography as d } from "@mui/material";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { FileHandleAssociateType as h } from "@sage-bionetworks/synapse-types";
+import { Close as g, UploadFile as _ } from "@mui/icons-material";
+//#region src/components/FormTemplateEditor/TemplateFileHandleField.tsx
+function v({ fileHandleId: v, formTemplateId: y, onChange: b }) {
+	let [x, S] = a(!1), [C, w] = a(null), T = i(null), E = r(() => v && y ? {
+		fileHandleId: v,
+		associateObjectType: h.AccessRequirementAttachment,
+		associateObjectId: y
+	} : void 0, [v, y]);
+	return /* @__PURE__ */ m(s, { children: [
+		/* @__PURE__ */ p(d, {
+			variant: "caption",
+			color: "text.secondary",
+			component: "div",
+			children: "Template file"
+		}),
+		/* @__PURE__ */ m(u, {
+			direction: "row",
+			spacing: 1,
+			alignItems: "center",
+			children: [v ? /* @__PURE__ */ m(f, { children: [E ? /* @__PURE__ */ p(t, {
+				fileHandleAssociation: E,
+				showDownloadIcon: !0
+			}) : /* @__PURE__ */ p(t, {
+				creatorFileHandleId: v,
+				showDownloadIcon: !0
+			}), /* @__PURE__ */ p(l, {
+				size: "small",
+				onClick: () => b(void 0),
+				"aria-label": "Remove template file",
+				children: /* @__PURE__ */ p(g, { fontSize: "small" })
+			})] }) : /* @__PURE__ */ p(d, {
+				variant: "body2",
+				color: "text.secondary",
+				children: "None"
+			}), /* @__PURE__ */ p(c, {
+				size: "small",
+				startIcon: /* @__PURE__ */ p(_, { fontSize: "small" }),
+				onClick: () => S(!0),
+				children: v ? "Replace" : "Upload"
+			})]
+		}),
+		/* @__PURE__ */ p(e, {
+			open: x,
+			onCancel: () => S(!1),
+			title: "Upload template file",
+			maxWidth: "sm",
+			content: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(n, {
+				ref: T,
+				allowMultipleUpload: !1,
+				disableDragAndDrop: !0,
+				onValidationError: w,
+				onFileUploadComplete: (e) => {
+					b(e), S(!1);
+				}
+			}), C && /* @__PURE__ */ p(o, {
+				severity: "error",
+				sx: { mt: 2 },
+				children: C
+			})] }),
+			actions: /* @__PURE__ */ p(c, {
+				variant: "outlined",
+				onClick: () => S(!1),
+				children: "Cancel"
+			})
+		})
+	] });
+}
+//#endregion
+export { v as TemplateFileHandleField };
+
+//# sourceMappingURL=TemplateFileHandleField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateFileHandleField.js","names":[],"sources":["../../../src/components/FormTemplateEditor/TemplateFileHandleField.tsx"],"sourcesContent":["import { DialogBase } from '@/components/DialogBase'\nimport {\n  BasicFileHandleUpload,\n  FileUploadHandle,\n} from '@/components/file/upload/BasicFileHandleUpload'\nimport { FileHandleLink } from '@/components/widgets/FileHandleLink'\nimport {\n  Close as RemoveIcon,\n  UploadFile as UploadIcon,\n} from '@mui/icons-material'\nimport {\n  Alert,\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport {\n  FileHandleAssociateType,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport { useMemo, useRef, useState } from 'react'\n\nexport type TemplateFileHandleFieldProps = {\n  /** The slot's `templateFileHandleId`, if one is attached. */\n  fileHandleId: string | undefined\n  /**\n   * The FormTemplate's id, used to build the download association. Undefined for a template\n   * that has not been saved yet (a brand-new draft), in which case the file is downloaded\n   * directly as a file handle the current user uploaded.\n   */\n  formTemplateId: string | undefined\n  onChange: (fileHandleId: string | undefined) => void\n}\n\n/**\n * Upload/download control for a file field's optional template attachment\n * (`FormTemplateField.templateFileHandleId`) — e.g. a fillable document requesters must\n * download, complete, and re-upload to answer this slot. Uploads immediately via\n * `BasicFileHandleUpload` in a dialog; download reuses `FileHandleLink`.\n */\nexport function TemplateFileHandleField({\n  fileHandleId,\n  formTemplateId,\n  onChange,\n}: TemplateFileHandleFieldProps) {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const [validationError, setValidationError] = useState<string | null>(null)\n  const uploadRef = useRef<FileUploadHandle | null>(null)\n  // FileHandleLink refetches whenever the association's identity changes.\n  const fileHandleAssociation = useMemo<FileHandleAssociation | undefined>(\n    () =>\n      fileHandleId && formTemplateId\n        ? {\n            fileHandleId,\n            // AccessRequirementAttachment is a stand-in: a FormTemplate is not an\n            // AccessRequirement, so the server may not authorize this download.\n            // Supported FormTemplate template-file downloads are tracked in PLFM-10013.\n            associateObjectType:\n              FileHandleAssociateType.AccessRequirementAttachment,\n            associateObjectId: formTemplateId,\n          }\n        : undefined,\n    [fileHandleId, formTemplateId],\n  )\n\n  return (\n    <Box>\n      <Typography variant=\"caption\" color=\"text.secondary\" component=\"div\">\n        Template file\n      </Typography>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n        {fileHandleId ? (\n          <>\n            {/* A template that has not been saved yet can only reference a file handle that the current user uploaded, so it is downloaded directly. */}\n            {fileHandleAssociation ? (\n              <FileHandleLink\n                fileHandleAssociation={fileHandleAssociation}\n                showDownloadIcon\n              />\n            ) : (\n              <FileHandleLink\n                creatorFileHandleId={fileHandleId}\n                showDownloadIcon\n              />\n            )}\n            <IconButton\n              size=\"small\"\n              onClick={() => onChange(undefined)}\n              aria-label=\"Remove template file\"\n            >\n              <RemoveIcon fontSize=\"small\" />\n            </IconButton>\n          </>\n        ) : (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            None\n          </Typography>\n        )}\n        <Button\n          size=\"small\"\n          startIcon={<UploadIcon fontSize=\"small\" />}\n          onClick={() => setDialogOpen(true)}\n        >\n          {fileHandleId ? 'Replace' : 'Upload'}\n        </Button>\n      </Stack>\n\n      <DialogBase\n        open={dialogOpen}\n        onCancel={() => setDialogOpen(false)}\n        title=\"Upload template file\"\n        maxWidth=\"sm\"\n        content={\n          <>\n            <BasicFileHandleUpload\n              ref={uploadRef}\n              allowMultipleUpload={false}\n              disableDragAndDrop={true}\n              onValidationError={setValidationError}\n              onFileUploadComplete={newFileHandleId => {\n                onChange(newFileHandleId)\n                setDialogOpen(false)\n              }}\n            />\n            {validationError && (\n              <Alert severity=\"error\" sx={{ mt: 2 }}>\n                {validationError}\n              </Alert>\n            )}\n          </>\n        }\n        actions={\n          <Button variant=\"outlined\" onClick={() => setDialogOpen(false)}>\n            Cancel\n          </Button>\n        }\n      />\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;AA0CA,SAAgB,EAAwB,EACtC,iBACA,mBACA,eAC+B;CAC/B,IAAM,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,CAAC,GAAiB,KAAsB,EAAwB,IAAI,GACpE,IAAY,EAAgC,IAAI,GAEhD,IAAwB,QAE1B,KAAgB,IACZ;EACE;EAIA,qBACE,EAAwB;EAC1B,mBAAmB;CACrB,IACA,KAAA,GACN,CAAC,GAAc,CAAc,CAC/B;CAEA,OACE,kBAAC,GAAD,EAAA,UAAA;EACE,kBAAC,GAAD;GAAY,SAAQ;GAAU,OAAM;GAAiB,WAAU;aAAM;EAEzD,CAAA;EACZ,kBAAC,GAAD;GAAO,WAAU;GAAM,SAAS;GAAG,YAAW;aAA9C,CACG,IACC,kBAAA,GAAA,EAAA,UAAA,CAEG,IACC,kBAAC,GAAD;IACyB;IACvB,kBAAA;GACD,CAAA,IAED,kBAAC,GAAD;IACE,qBAAqB;IACrB,kBAAA;GACD,CAAA,GAEH,kBAAC,GAAD;IACE,MAAK;IACL,eAAe,EAAS,KAAA,CAAS;IACjC,cAAW;cAEX,kBAAC,GAAD,EAAY,UAAS,QAAS,CAAA;GACpB,CAAA,CACZ,EAAA,CAAA,IAEF,kBAAC,GAAD;IAAY,SAAQ;IAAQ,OAAM;cAAiB;GAEvC,CAAA,GAEd,kBAAC,GAAD;IACE,MAAK;IACL,WAAW,kBAAC,GAAD,EAAY,UAAS,QAAS,CAAA;IACzC,eAAe,EAAc,EAAI;cAEhC,IAAe,YAAY;GACtB,CAAA,CACH;;EAEP,kBAAC,GAAD;GACE,MAAM;GACN,gBAAgB,EAAc,EAAK;GACnC,OAAM;GACN,UAAS;GACT,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,KAAK;IACL,qBAAqB;IACrB,oBAAoB;IACpB,mBAAmB;IACnB,uBAAsB,MAAmB;KAEvC,AADA,EAAS,CAAe,GACxB,EAAc,EAAK;IACrB;GACD,CAAA,GACA,KACC,kBAAC,GAAD;IAAO,UAAS;IAAQ,IAAI,EAAE,IAAI,EAAE;cACjC;GACI,CAAA,CAET,EAAA,CAAA;GAEJ,SACE,kBAAC,GAAD;IAAQ,SAAQ;IAAW,eAAe,EAAc,EAAK;cAAG;GAExD,CAAA;EAEX,CAAA;CACE,EAAA,CAAA;AAET"}

package/dist/components/FormTemplateEditor/dragHandle.css

@@ -0,0 +1 @@
+._dragHandle_9lwpq_1{touch-action:none;cursor:grab;align-items:center;display:flex}._dragHandle_9lwpq_1:active{cursor:grabbing}._dragSource_9lwpq_11{transition:opacity .12s}._dragSource_9lwpq_11[data-dragging=true]{opacity:var(--synapse-drag-source-opacity)}

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

@@ -0,0 +1,8 @@
+import './dragHandle.css';var e = {
+	dragHandle: "_dragHandle_9lwpq_1",
+	dragSource: "_dragSource_9lwpq_11"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=dragHandle.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dragHandle.module.js","names":[],"sources":["../../../src/components/FormTemplateEditor/dragHandle.module.scss"],"sourcesContent":["// Shared layout for the drag-indicator handles in FieldLibraryRow and StepFieldRow. Per-instance\n// color/cursor variations (e.g. disabled state) are layered on top via `sx`.\n.dragHandle {\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  cursor: grab;\n\n  &:active {\n    cursor: grabbing;\n  }\n}\n\n// Shared fade for the draggable item itself while it is the active drag source. Toggled with\n// `data-dragging` so each usage only reports state and the transition lives here once.\n.dragSource {\n  transition: opacity 120ms;\n\n  &[data-dragging='true'] {\n    opacity: var(--synapse-drag-source-opacity);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,22 @@
+// Shared layout for the drag-indicator handles in FieldLibraryRow and StepFieldRow. Per-instance
+// color/cursor variations (e.g. disabled state) are layered on top via `sx`.
+.dragHandle {
+  display: flex;
+  align-items: center;
+  touch-action: none;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+// Shared fade for the draggable item itself while it is the active drag source. Toggled with
+// `data-dragging` so each usage only reports state and the transition lives here once.
+.dragSource {
+  transition: opacity 120ms;
+
+  &[data-dragging='true'] {
+    opacity: var(--synapse-drag-source-opacity);
+  }
+}

package/dist/components/FormTemplateEditor/dropTarget.css

@@ -0,0 +1 @@
+._dropTarget_f4wz1_1{outline-offset:-2px;outline:2px dashed #0000;transition:outline-color .12s,background-color .12s}._dropTarget_f4wz1_1[data-drop-target=true]{outline-color:var(--synapse-primary-action-color);background-color:var(--synapse-primary-action-color-alpha-4)}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropTarget.module.js","names":[],"sources":["../../../src/components/FormTemplateEditor/dropTarget.module.scss"],"sourcesContent":["// Shared highlight for the step card and its slot list while a compatible drag hovers over them.\n// Toggled with `data-drop-target` so the component only reports state and the look lives here.\n.dropTarget {\n  outline: 2px dashed transparent;\n  outline-offset: -2px;\n  transition:\n    outline-color 120ms,\n    background-color 120ms;\n\n  &[data-drop-target='true'] {\n    outline-color: var(--synapse-primary-action-color);\n    background-color: var(--synapse-primary-action-color-alpha-4);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,14 @@
+// Shared highlight for the step card and its slot list while a compatible drag hovers over them.
+// Toggled with `data-drop-target` so the component only reports state and the look lives here.
+.dropTarget {
+  outline: 2px dashed transparent;
+  outline-offset: -2px;
+  transition:
+    outline-color 120ms,
+    background-color 120ms;
+
+  &[data-drop-target='true'] {
+    outline-color: var(--synapse-primary-action-color);
+    background-color: var(--synapse-primary-action-color-alpha-4);
+  }
+}