synapse-react-client 4.0.45 → 4.0.47

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

@@ -1 +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"}
+{"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 AddIcon from '@mui/icons-material/Add'\nimport SearchIcon from '@mui/icons-material/Search'\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":";;;;;;;;;AAoCA,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/FieldLibraryRow.js

@@ -4,11 +4,11 @@ import r from "./dragHandle.module.js";
 import { FIELD_DRAG_TYPE as i, fieldDragData as a } from "./sortableIds.js";
 import { Box as o, Chip as s, Paper as c, Stack as l, Typography as u } from "@mui/material";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { DragIndicator as m } from "@mui/icons-material";
-import { useDraggable as h } from "@dnd-kit/react";
+import { useDraggable as m } from "@dnd-kit/react";
+import h from "@mui/icons-material/DragIndicator";
 //#region src/components/FormTemplateEditor/FieldLibraryRow.tsx
 function g({ propertyKey: g, property: _, isRequired: v, context: y, isUsedInSteps: b, onClick: x }) {
-	let S = t(_), C = _.title || g, { ref: w, handleRef: T, isDragging: E } = h({
+	let S = t(_), C = _.title || g, { ref: w, handleRef: T, isDragging: E } = m({
 		id: `field:${g}`,
 		type: i,
 		data: a(g),
@@ -36,7 +36,7 @@ function g({ propertyKey: g, property: _, isRequired: v, context: y, isUsedInSte
 					color: b ? "text.disabled" : "text.secondary",
 					cursor: b ? "not-allowed" : void 0
 				},
-				children: /* @__PURE__ */ f(m, { fontSize: "small" })
+				children: /* @__PURE__ */ f(h, { fontSize: "small" })
 			}), /* @__PURE__ */ p(o, {
 				role: "button",
 				tabIndex: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"FieldLibraryRow.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FieldLibraryRow.tsx"],"sourcesContent":["import { useDraggable } from '@dnd-kit/react'\nimport { Box, Chip, Paper, Stack, Typography } from '@mui/material'\nimport { DragIndicator as DragHandleIcon } from '@mui/icons-material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport {\n  SchemaPropertyContext,\n  submissionContextLabel,\n} from '@/utils/jsonschema/submissionContext'\nimport styles from './dragHandle.module.scss'\nimport { detectFieldType, fieldTypeLabel } from './schemaFieldUtils'\nimport { FIELD_DRAG_TYPE, fieldDragData } from './sortableIds'\n\nexport type FieldLibraryRowProps = {\n  propertyKey: string\n  property: RJSFSchema\n  isRequired: boolean\n  /** Which submission context (per the schema's `x-synapse-submissionContext` convention)\n   * gates this property. `ALWAYS` properties show no badge. */\n  context: SchemaPropertyContext\n  isUsedInSteps: boolean\n  onClick: () => void\n}\n\n/**\n * A compact row in the field library. Click anywhere to edit the field's\n * definition; grab the drag indicator on the left to bind it to a step.\n * Rows already bound to a step are non-draggable.\n */\nexport function FieldLibraryRow({\n  propertyKey,\n  property,\n  isRequired,\n  context,\n  isUsedInSteps,\n  onClick,\n}: FieldLibraryRowProps) {\n  const type = detectFieldType(property)\n  const displayLabel = property.title || propertyKey\n\n  const { ref, handleRef, isDragging } = useDraggable({\n    id: `field:${propertyKey}`,\n    type: FIELD_DRAG_TYPE,\n    data: fieldDragData(propertyKey),\n    disabled: isUsedInSteps,\n  })\n\n  return (\n    <Paper\n      ref={ref}\n      variant=\"outlined\"\n      className={styles.dragSource}\n      data-dragging={isDragging}\n      sx={{ p: 1.25 }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n        <Box\n          ref={handleRef}\n          role=\"button\"\n          tabIndex={isUsedInSteps ? -1 : 0}\n          aria-label={\n            isUsedInSteps ? 'Already in a form step' : 'Drag to add to a step'\n          }\n          className={styles.dragHandle}\n          sx={{\n            color: isUsedInSteps ? 'text.disabled' : 'text.secondary',\n            cursor: isUsedInSteps ? 'not-allowed' : undefined,\n          }}\n        >\n          <DragHandleIcon fontSize=\"small\" />\n        </Box>\n        <Box\n          role=\"button\"\n          tabIndex={0}\n          aria-label={`Edit ${displayLabel}`}\n          onClick={onClick}\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onClick()\n            }\n          }}\n          sx={{\n            flexGrow: 1,\n            minWidth: 0,\n            display: 'flex',\n            alignItems: 'center',\n            gap: 0.5,\n            cursor: 'pointer',\n            borderRadius: 1,\n            p: 0.5,\n            m: -0.5,\n            '&:hover': { backgroundColor: 'action.hover' },\n          }}\n        >\n          <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n            <Typography\n              variant=\"body2\"\n              fontWeight={500}\n              noWrap\n              title={displayLabel}\n            >\n              {displayLabel}\n            </Typography>\n            <Stack\n              direction=\"row\"\n              spacing={0.5}\n              alignItems=\"center\"\n              sx={{ mt: 0.25 }}\n            >\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                {fieldTypeLabel(type)}\n              </Typography>\n              {isRequired && (\n                <>\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    ·\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    Required\n                  </Typography>\n                </>\n              )}\n              {context !== 'ALWAYS' && (\n                <>\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    ·\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    {submissionContextLabel(context)}\n                  </Typography>\n                </>\n              )}\n            </Stack>\n          </Box>\n          <Chip\n            label={isUsedInSteps ? 'In form' : 'Not in form'}\n            size=\"small\"\n            color={isUsedInSteps ? 'success' : 'warning'}\n            variant=\"outlined\"\n          />\n        </Box>\n      </Box>\n    </Paper>\n  )\n}\n"],"mappings":";;;;;;;;;AA4BA,SAAgB,EAAgB,EAC9B,gBACA,aACA,eACA,YACA,kBACA,cACuB;CACvB,IAAM,IAAO,EAAgB,CAAQ,GAC/B,IAAe,EAAS,SAAS,GAEjC,EAAE,QAAK,cAAW,kBAAe,EAAa;EAClD,IAAI,SAAS;EACb,MAAM;EACN,MAAM,EAAc,CAAW;EAC/B,UAAU;CACZ,CAAC;CAED,OACE,kBAAC,GAAD;EACO;EACL,SAAQ;EACR,WAAW,EAAO;EAClB,iBAAe;EACf,IAAI,EAAE,GAAG,KAAK;YAEd,kBAAC,GAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAI;aAA3D,CACE,kBAAC,GAAD;IACE,KAAK;IACL,MAAK;IACL,UAAU,IAAgB,KAAK;IAC/B,cACE,IAAgB,2BAA2B;IAE7C,WAAW,EAAO;IAClB,IAAI;KACF,OAAO,IAAgB,kBAAkB;KACzC,QAAQ,IAAgB,gBAAgB,KAAA;IAC1C;cAEA,kBAAC,GAAD,EAAgB,UAAS,QAAS,CAAA;GAC/B,CAAA,GACL,kBAAC,GAAD;IACE,MAAK;IACL,UAAU;IACV,cAAY,QAAQ;IACX;IACT,YAAW,MAAK;KACd,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACjB,EAAQ;IAEZ;IACA,IAAI;KACF,UAAU;KACV,UAAU;KACV,SAAS;KACT,YAAY;KACZ,KAAK;KACL,QAAQ;KACR,cAAc;KACd,GAAG;KACH,GAAG;KACH,WAAW,EAAE,iBAAiB,eAAe;IAC/C;cAtBF,CAwBE,kBAAC,GAAD;KAAK,IAAI;MAAE,UAAU;MAAG,UAAU;KAAE;eAApC,CACE,kBAAC,GAAD;MACE,SAAQ;MACR,YAAY;MACZ,QAAA;MACA,OAAO;gBAEN;KACS,CAAA,GACZ,kBAAC,GAAD;MACE,WAAU;MACV,SAAS;MACT,YAAW;MACX,IAAI,EAAE,IAAI,IAAK;gBAJjB;OAME,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBACjC,EAAe,CAAI;OACV,CAAA;OACX,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBAAiB;OAEzC,CAAA,GACZ,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBAAiB;OAEzC,CAAA,CACZ,EAAA,CAAA;OAEH,MAAY,YACX,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBAAiB;OAEzC,CAAA,GACZ,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBACjC,EAAuB,CAAO;OACrB,CAAA,CACZ,EAAA,CAAA;MAEC;OACJ;QACL,kBAAC,GAAD;KACE,OAAO,IAAgB,YAAY;KACnC,MAAK;KACL,OAAO,IAAgB,YAAY;KACnC,SAAQ;IACT,CAAA,CACE;KACF;;CACA,CAAA;AAEX"}
+{"version":3,"file":"FieldLibraryRow.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FieldLibraryRow.tsx"],"sourcesContent":["import { useDraggable } from '@dnd-kit/react'\nimport { Box, Chip, Paper, Stack, Typography } from '@mui/material'\nimport DragHandleIcon from '@mui/icons-material/DragIndicator'\nimport { RJSFSchema } from '@rjsf/utils'\nimport {\n  SchemaPropertyContext,\n  submissionContextLabel,\n} from '@/utils/jsonschema/submissionContext'\nimport styles from './dragHandle.module.scss'\nimport { detectFieldType, fieldTypeLabel } from './schemaFieldUtils'\nimport { FIELD_DRAG_TYPE, fieldDragData } from './sortableIds'\n\nexport type FieldLibraryRowProps = {\n  propertyKey: string\n  property: RJSFSchema\n  isRequired: boolean\n  /** Which submission context (per the schema's `x-synapse-submissionContext` convention)\n   * gates this property. `ALWAYS` properties show no badge. */\n  context: SchemaPropertyContext\n  isUsedInSteps: boolean\n  onClick: () => void\n}\n\n/**\n * A compact row in the field library. Click anywhere to edit the field's\n * definition; grab the drag indicator on the left to bind it to a step.\n * Rows already bound to a step are non-draggable.\n */\nexport function FieldLibraryRow({\n  propertyKey,\n  property,\n  isRequired,\n  context,\n  isUsedInSteps,\n  onClick,\n}: FieldLibraryRowProps) {\n  const type = detectFieldType(property)\n  const displayLabel = property.title || propertyKey\n\n  const { ref, handleRef, isDragging } = useDraggable({\n    id: `field:${propertyKey}`,\n    type: FIELD_DRAG_TYPE,\n    data: fieldDragData(propertyKey),\n    disabled: isUsedInSteps,\n  })\n\n  return (\n    <Paper\n      ref={ref}\n      variant=\"outlined\"\n      className={styles.dragSource}\n      data-dragging={isDragging}\n      sx={{ p: 1.25 }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n        <Box\n          ref={handleRef}\n          role=\"button\"\n          tabIndex={isUsedInSteps ? -1 : 0}\n          aria-label={\n            isUsedInSteps ? 'Already in a form step' : 'Drag to add to a step'\n          }\n          className={styles.dragHandle}\n          sx={{\n            color: isUsedInSteps ? 'text.disabled' : 'text.secondary',\n            cursor: isUsedInSteps ? 'not-allowed' : undefined,\n          }}\n        >\n          <DragHandleIcon fontSize=\"small\" />\n        </Box>\n        <Box\n          role=\"button\"\n          tabIndex={0}\n          aria-label={`Edit ${displayLabel}`}\n          onClick={onClick}\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onClick()\n            }\n          }}\n          sx={{\n            flexGrow: 1,\n            minWidth: 0,\n            display: 'flex',\n            alignItems: 'center',\n            gap: 0.5,\n            cursor: 'pointer',\n            borderRadius: 1,\n            p: 0.5,\n            m: -0.5,\n            '&:hover': { backgroundColor: 'action.hover' },\n          }}\n        >\n          <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n            <Typography\n              variant=\"body2\"\n              fontWeight={500}\n              noWrap\n              title={displayLabel}\n            >\n              {displayLabel}\n            </Typography>\n            <Stack\n              direction=\"row\"\n              spacing={0.5}\n              alignItems=\"center\"\n              sx={{ mt: 0.25 }}\n            >\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                {fieldTypeLabel(type)}\n              </Typography>\n              {isRequired && (\n                <>\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    ·\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    Required\n                  </Typography>\n                </>\n              )}\n              {context !== 'ALWAYS' && (\n                <>\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    ·\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    {submissionContextLabel(context)}\n                  </Typography>\n                </>\n              )}\n            </Stack>\n          </Box>\n          <Chip\n            label={isUsedInSteps ? 'In form' : 'Not in form'}\n            size=\"small\"\n            color={isUsedInSteps ? 'success' : 'warning'}\n            variant=\"outlined\"\n          />\n        </Box>\n      </Box>\n    </Paper>\n  )\n}\n"],"mappings":";;;;;;;;;AA4BA,SAAgB,EAAgB,EAC9B,gBACA,aACA,eACA,YACA,kBACA,cACuB;CACvB,IAAM,IAAO,EAAgB,CAAQ,GAC/B,IAAe,EAAS,SAAS,GAEjC,EAAE,QAAK,cAAW,kBAAe,EAAa;EAClD,IAAI,SAAS;EACb,MAAM;EACN,MAAM,EAAc,CAAW;EAC/B,UAAU;CACZ,CAAC;CAED,OACE,kBAAC,GAAD;EACO;EACL,SAAQ;EACR,WAAW,EAAO;EAClB,iBAAe;EACf,IAAI,EAAE,GAAG,KAAK;YAEd,kBAAC,GAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAI;aAA3D,CACE,kBAAC,GAAD;IACE,KAAK;IACL,MAAK;IACL,UAAU,IAAgB,KAAK;IAC/B,cACE,IAAgB,2BAA2B;IAE7C,WAAW,EAAO;IAClB,IAAI;KACF,OAAO,IAAgB,kBAAkB;KACzC,QAAQ,IAAgB,gBAAgB,KAAA;IAC1C;cAEA,kBAAC,GAAD,EAAgB,UAAS,QAAS,CAAA;GAC/B,CAAA,GACL,kBAAC,GAAD;IACE,MAAK;IACL,UAAU;IACV,cAAY,QAAQ;IACX;IACT,YAAW,MAAK;KACd,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACjB,EAAQ;IAEZ;IACA,IAAI;KACF,UAAU;KACV,UAAU;KACV,SAAS;KACT,YAAY;KACZ,KAAK;KACL,QAAQ;KACR,cAAc;KACd,GAAG;KACH,GAAG;KACH,WAAW,EAAE,iBAAiB,eAAe;IAC/C;cAtBF,CAwBE,kBAAC,GAAD;KAAK,IAAI;MAAE,UAAU;MAAG,UAAU;KAAE;eAApC,CACE,kBAAC,GAAD;MACE,SAAQ;MACR,YAAY;MACZ,QAAA;MACA,OAAO;gBAEN;KACS,CAAA,GACZ,kBAAC,GAAD;MACE,WAAU;MACV,SAAS;MACT,YAAW;MACX,IAAI,EAAE,IAAI,IAAK;gBAJjB;OAME,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBACjC,EAAe,CAAI;OACV,CAAA;OACX,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBAAiB;OAEzC,CAAA,GACZ,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBAAiB;OAEzC,CAAA,CACZ,EAAA,CAAA;OAEH,MAAY,YACX,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBAAiB;OAEzC,CAAA,GACZ,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBACjC,EAAuB,CAAO;OACrB,CAAA,CACZ,EAAA,CAAA;MAEC;OACJ;QACL,kBAAC,GAAD;KACE,OAAO,IAAgB,YAAY;KACnC,MAAK;KACL,OAAO,IAAgB,YAAY;KACnC,SAAQ;IACT,CAAA,CACE;KACF;;CACA,CAAA;AAEX"}

package/dist/components/FormTemplateEditor/FormStructurePanel.js

@@ -4,8 +4,8 @@ import { createEditableStep as n } from "./utils.js";
 import { StepCard as r } from "./StepCard.js";
 import { Alert as i, Box as a, Button as o, Paper as s, Stack as c, Typography as l } from "@mui/material";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Add as f } from "@mui/icons-material";
-import p from "pluralize";
+import f from "pluralize";
+import p from "@mui/icons-material/Add";
 //#region src/components/FormTemplateEditor/FormStructurePanel.tsx
 function m({ steps: m, jsonSchema: h, unboundProperties: g, formTemplateId: _, onStepsChange: v, onBindField: y }) {
 	let b = (e, t) => {
@@ -45,7 +45,7 @@ function m({ steps: m, jsonSchema: h, unboundProperties: g, formTemplateId: _, o
 				})] }), /* @__PURE__ */ u(o, {
 					size: "small",
 					variant: "outlined",
-					startIcon: /* @__PURE__ */ u(f, {}),
+					startIcon: /* @__PURE__ */ u(p, {}),
 					onClick: x,
 					children: "Add step"
 				})]
@@ -54,9 +54,9 @@ function m({ steps: m, jsonSchema: h, unboundProperties: g, formTemplateId: _, o
 				severity: "error",
 				sx: { mb: 1.5 },
 				children: [
-					p("required field", w.length, !0),
+					f("required field", w.length, !0),
 					" ",
-					p("is", w.length),
+					f("is", w.length),
 					" not bound to a step and must be bound before saving:",
 					" ",
 					w.map((e) => e.subSchema.title ?? t(e.propertyKey)).join(", "),
@@ -67,9 +67,9 @@ function m({ steps: m, jsonSchema: h, unboundProperties: g, formTemplateId: _, o
 				severity: "warning",
 				sx: { mb: 1.5 },
 				children: [
-					p("field", T.length, !0),
+					f("field", T.length, !0),
 					" ",
-					p("is", T.length),
+					f("is", T.length),
 					" not yet bound to a step. Use a step's \"",
 					"Bind field",
 					"\" dropdown to add",

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

@@ -1 +1 @@
-{"version":3,"file":"FormStructurePanel.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FormStructurePanel.tsx"],"sourcesContent":["import { FormTemplateStep } from '@sage-bionetworks/synapse-client'\nimport { Alert, Box, Button, Paper, Stack, Typography } from '@mui/material'\nimport { Add as AddIcon } from '@mui/icons-material'\nimport pluralize from 'pluralize'\nimport { RJSFSchema } from '@rjsf/utils'\nimport {\n  propertyKeyToPointer,\n  ResolvedSchemaProperty,\n} from '@/utils/jsonschema/submissionContext'\nimport { StepCard } from './StepCard'\nimport {\n  BIND_FIELD_LABEL,\n  createEditableStep,\n  EditableFormTemplateStep,\n  moveItem,\n} from './utils'\n\nexport type FormStructurePanelProps = {\n  steps: EditableFormTemplateStep[]\n  jsonSchema: RJSFSchema\n  /** Properties not yet bound to any step in the template. */\n  unboundProperties: ResolvedSchemaProperty[]\n  /** The FormTemplate's id, if it has been saved. Threaded down to file-field template uploads. */\n  formTemplateId: string | undefined\n  onStepsChange: (next: EditableFormTemplateStep[]) => void\n  onBindField: (propertyKey: string, stepKey: string) => void\n}\n\n/**\n * Right pane: the multi-step form structure. Steps are collapsible cards;\n * each step contains a list of field slots (with inline-expand for slot config)\n * and a \"Bind field\" dropdown listing any library fields not yet bound to a\n * step.\n */\nexport function FormStructurePanel({\n  steps,\n  jsonSchema,\n  unboundProperties,\n  formTemplateId,\n  onStepsChange,\n  onBindField,\n}: FormStructurePanelProps) {\n  const handleStepChange = (idx: number, patch: Partial<FormTemplateStep>) => {\n    onStepsChange(steps.map((s, i) => (i === idx ? { ...s, ...patch } : s)))\n  }\n\n  const handleAddStep = () => {\n    onStepsChange([...steps, createEditableStep()])\n  }\n\n  const handleRemoveStep = (idx: number) => {\n    onStepsChange(steps.filter((_, i) => i !== idx))\n  }\n\n  const handleMoveStep = (idx: number, direction: -1 | 1) => {\n    onStepsChange(moveItem(steps, idx, direction))\n  }\n\n  const requiredUnbound = unboundProperties.filter(p => p.isRequired)\n  const optionalUnbound = unboundProperties.filter(p => !p.isRequired)\n\n  return (\n    <Paper variant=\"outlined\" sx={{ p: 2, height: '100%' }}>\n      <Box\n        sx={{\n          mb: 1.5,\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'flex-start',\n          gap: 1,\n        }}\n      >\n        <Box>\n          <Typography variant=\"subtitle2\">Steps</Typography>\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            Arrange fields into pages requesters will fill out in order.\n          </Typography>\n        </Box>\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          startIcon={<AddIcon />}\n          onClick={handleAddStep}\n        >\n          Add step\n        </Button>\n      </Box>\n\n      {requiredUnbound.length > 0 && (\n        <Alert severity=\"error\" sx={{ mb: 1.5 }}>\n          {pluralize('required field', requiredUnbound.length, true)}{' '}\n          {pluralize('is', requiredUnbound.length)} not bound to a step and must\n          be bound before saving:{' '}\n          {requiredUnbound\n            .map(p => p.subSchema.title ?? propertyKeyToPointer(p.propertyKey))\n            .join(', ')}\n          .\n        </Alert>\n      )}\n\n      {optionalUnbound.length > 0 && (\n        <Alert severity=\"warning\" sx={{ mb: 1.5 }}>\n          {pluralize('field', optionalUnbound.length, true)}{' '}\n          {pluralize('is', optionalUnbound.length)} not yet bound to a step. Use\n          a step's \"{BIND_FIELD_LABEL}\" dropdown to add{' '}\n          {optionalUnbound.length === 1 ? 'it' : 'them'}.\n        </Alert>\n      )}\n\n      <Stack spacing={1.5}>\n        {steps.length === 0 ? (\n          <Alert severity=\"info\">\n            No steps yet. Click \"Add step\" to create the first one.\n          </Alert>\n        ) : (\n          steps.map((step, stepIdx) => (\n            <StepCard\n              key={step.uiKey}\n              step={step}\n              stepIndex={stepIdx}\n              isFirst={stepIdx === 0}\n              isLast={stepIdx === steps.length - 1}\n              unboundProperties={unboundProperties}\n              jsonSchema={jsonSchema}\n              formTemplateId={formTemplateId}\n              defaultExpanded={stepIdx === 0}\n              onChange={patch => handleStepChange(stepIdx, patch)}\n              onBindField={propertyKey => onBindField(propertyKey, step.uiKey)}\n              onMoveUp={() => handleMoveStep(stepIdx, -1)}\n              onMoveDown={() => handleMoveStep(stepIdx, 1)}\n              onRemove={() => handleRemoveStep(stepIdx)}\n            />\n          ))\n        )}\n      </Stack>\n    </Paper>\n  )\n}\n"],"mappings":";;;;;;;;;AAkCA,SAAgB,EAAmB,EACjC,UACA,eACA,sBACA,mBACA,kBACA,kBAC0B;CAC1B,IAAM,KAAoB,GAAa,MAAqC;EAC1E,EAAc,EAAM,KAAK,GAAG,MAAO,MAAM,IAAM;GAAE,GAAG;GAAG,GAAG;EAAM,IAAI,CAAE,CAAC;CACzE,GAEM,UAAsB;EAC1B,EAAc,CAAC,GAAG,GAAO,EAAmB,CAAC,CAAC;CAChD,GAEM,KAAoB,MAAgB;EACxC,EAAc,EAAM,QAAQ,GAAG,MAAM,MAAM,CAAG,CAAC;CACjD,GAEM,KAAkB,GAAa,MAAsB;EACzD,EAAc,EAAS,GAAO,GAAK,CAAS,CAAC;CAC/C,GAEM,IAAkB,EAAkB,QAAO,MAAK,EAAE,UAAU,GAC5D,IAAkB,EAAkB,QAAO,MAAK,CAAC,EAAE,UAAU;CAEnE,OACE,kBAAC,GAAD;EAAO,SAAQ;EAAW,IAAI;GAAE,GAAG;GAAG,QAAQ;EAAO;YAArD;GACE,kBAAC,GAAD;IACE,IAAI;KACF,IAAI;KACJ,SAAS;KACT,gBAAgB;KAChB,YAAY;KACZ,KAAK;IACP;cAPF,CASE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KAAY,SAAQ;eAAY;IAAiB,CAAA,GACjD,kBAAC,GAAD;KAAY,SAAQ;KAAU,OAAM;eAAiB;IAEzC,CAAA,CACT,EAAA,CAAA,GACL,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,WAAW,kBAAC,GAAD,CAAU,CAAA;KACrB,SAAS;eACV;IAEO,CAAA,CACL;;GAEJ,EAAgB,SAAS,KACxB,kBAAC,GAAD;IAAO,UAAS;IAAQ,IAAI,EAAE,IAAI,IAAI;cAAtC;KACG,EAAU,kBAAkB,EAAgB,QAAQ,EAAI;KAAG;KAC3D,EAAU,MAAM,EAAgB,MAAM;KAAE;KACjB;KACvB,EACE,KAAI,MAAK,EAAE,UAAU,SAAS,EAAqB,EAAE,WAAW,CAAC,EACjE,KAAK,IAAI;KAAE;IAET;;GAGR,EAAgB,SAAS,KACxB,kBAAC,GAAD;IAAO,UAAS;IAAU,IAAI,EAAE,IAAI,IAAI;cAAxC;KACG,EAAU,SAAS,EAAgB,QAAQ,EAAI;KAAG;KAClD,EAAU,MAAM,EAAgB,MAAM;KAAE;;KACb;KAAkB;KAC7C,EAAgB,WAAW,IAAI,OAAO;KAAO;IACzC;;GAGT,kBAAC,GAAD;IAAO,SAAS;cACb,EAAM,WAAW,IAChB,kBAAC,GAAD;KAAO,UAAS;eAAO;IAEhB,CAAA,IAEP,EAAM,KAAK,GAAM,MACf,kBAAC,GAAD;KAEQ;KACN,WAAW;KACX,SAAS,MAAY;KACrB,QAAQ,MAAY,EAAM,SAAS;KAChB;KACP;KACI;KAChB,iBAAiB,MAAY;KAC7B,WAAU,MAAS,EAAiB,GAAS,CAAK;KAClD,cAAa,MAAe,EAAY,GAAa,EAAK,KAAK;KAC/D,gBAAgB,EAAe,GAAS,EAAE;KAC1C,kBAAkB,EAAe,GAAS,CAAC;KAC3C,gBAAgB,EAAiB,CAAO;IACzC,GAdM,EAAK,KAcX,CACF;GAEE,CAAA;EACF;;AAEX"}
+{"version":3,"file":"FormStructurePanel.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FormStructurePanel.tsx"],"sourcesContent":["import { FormTemplateStep } from '@sage-bionetworks/synapse-client'\nimport { Alert, Box, Button, Paper, Stack, Typography } from '@mui/material'\nimport AddIcon from '@mui/icons-material/Add'\nimport pluralize from 'pluralize'\nimport { RJSFSchema } from '@rjsf/utils'\nimport {\n  propertyKeyToPointer,\n  ResolvedSchemaProperty,\n} from '@/utils/jsonschema/submissionContext'\nimport { StepCard } from './StepCard'\nimport {\n  BIND_FIELD_LABEL,\n  createEditableStep,\n  EditableFormTemplateStep,\n  moveItem,\n} from './utils'\n\nexport type FormStructurePanelProps = {\n  steps: EditableFormTemplateStep[]\n  jsonSchema: RJSFSchema\n  /** Properties not yet bound to any step in the template. */\n  unboundProperties: ResolvedSchemaProperty[]\n  /** The FormTemplate's id, if it has been saved. Threaded down to file-field template uploads. */\n  formTemplateId: string | undefined\n  onStepsChange: (next: EditableFormTemplateStep[]) => void\n  onBindField: (propertyKey: string, stepKey: string) => void\n}\n\n/**\n * Right pane: the multi-step form structure. Steps are collapsible cards;\n * each step contains a list of field slots (with inline-expand for slot config)\n * and a \"Bind field\" dropdown listing any library fields not yet bound to a\n * step.\n */\nexport function FormStructurePanel({\n  steps,\n  jsonSchema,\n  unboundProperties,\n  formTemplateId,\n  onStepsChange,\n  onBindField,\n}: FormStructurePanelProps) {\n  const handleStepChange = (idx: number, patch: Partial<FormTemplateStep>) => {\n    onStepsChange(steps.map((s, i) => (i === idx ? { ...s, ...patch } : s)))\n  }\n\n  const handleAddStep = () => {\n    onStepsChange([...steps, createEditableStep()])\n  }\n\n  const handleRemoveStep = (idx: number) => {\n    onStepsChange(steps.filter((_, i) => i !== idx))\n  }\n\n  const handleMoveStep = (idx: number, direction: -1 | 1) => {\n    onStepsChange(moveItem(steps, idx, direction))\n  }\n\n  const requiredUnbound = unboundProperties.filter(p => p.isRequired)\n  const optionalUnbound = unboundProperties.filter(p => !p.isRequired)\n\n  return (\n    <Paper variant=\"outlined\" sx={{ p: 2, height: '100%' }}>\n      <Box\n        sx={{\n          mb: 1.5,\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'flex-start',\n          gap: 1,\n        }}\n      >\n        <Box>\n          <Typography variant=\"subtitle2\">Steps</Typography>\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            Arrange fields into pages requesters will fill out in order.\n          </Typography>\n        </Box>\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          startIcon={<AddIcon />}\n          onClick={handleAddStep}\n        >\n          Add step\n        </Button>\n      </Box>\n\n      {requiredUnbound.length > 0 && (\n        <Alert severity=\"error\" sx={{ mb: 1.5 }}>\n          {pluralize('required field', requiredUnbound.length, true)}{' '}\n          {pluralize('is', requiredUnbound.length)} not bound to a step and must\n          be bound before saving:{' '}\n          {requiredUnbound\n            .map(p => p.subSchema.title ?? propertyKeyToPointer(p.propertyKey))\n            .join(', ')}\n          .\n        </Alert>\n      )}\n\n      {optionalUnbound.length > 0 && (\n        <Alert severity=\"warning\" sx={{ mb: 1.5 }}>\n          {pluralize('field', optionalUnbound.length, true)}{' '}\n          {pluralize('is', optionalUnbound.length)} not yet bound to a step. Use\n          a step's \"{BIND_FIELD_LABEL}\" dropdown to add{' '}\n          {optionalUnbound.length === 1 ? 'it' : 'them'}.\n        </Alert>\n      )}\n\n      <Stack spacing={1.5}>\n        {steps.length === 0 ? (\n          <Alert severity=\"info\">\n            No steps yet. Click \"Add step\" to create the first one.\n          </Alert>\n        ) : (\n          steps.map((step, stepIdx) => (\n            <StepCard\n              key={step.uiKey}\n              step={step}\n              stepIndex={stepIdx}\n              isFirst={stepIdx === 0}\n              isLast={stepIdx === steps.length - 1}\n              unboundProperties={unboundProperties}\n              jsonSchema={jsonSchema}\n              formTemplateId={formTemplateId}\n              defaultExpanded={stepIdx === 0}\n              onChange={patch => handleStepChange(stepIdx, patch)}\n              onBindField={propertyKey => onBindField(propertyKey, step.uiKey)}\n              onMoveUp={() => handleMoveStep(stepIdx, -1)}\n              onMoveDown={() => handleMoveStep(stepIdx, 1)}\n              onRemove={() => handleRemoveStep(stepIdx)}\n            />\n          ))\n        )}\n      </Stack>\n    </Paper>\n  )\n}\n"],"mappings":";;;;;;;;;AAkCA,SAAgB,EAAmB,EACjC,UACA,eACA,sBACA,mBACA,kBACA,kBAC0B;CAC1B,IAAM,KAAoB,GAAa,MAAqC;EAC1E,EAAc,EAAM,KAAK,GAAG,MAAO,MAAM,IAAM;GAAE,GAAG;GAAG,GAAG;EAAM,IAAI,CAAE,CAAC;CACzE,GAEM,UAAsB;EAC1B,EAAc,CAAC,GAAG,GAAO,EAAmB,CAAC,CAAC;CAChD,GAEM,KAAoB,MAAgB;EACxC,EAAc,EAAM,QAAQ,GAAG,MAAM,MAAM,CAAG,CAAC;CACjD,GAEM,KAAkB,GAAa,MAAsB;EACzD,EAAc,EAAS,GAAO,GAAK,CAAS,CAAC;CAC/C,GAEM,IAAkB,EAAkB,QAAO,MAAK,EAAE,UAAU,GAC5D,IAAkB,EAAkB,QAAO,MAAK,CAAC,EAAE,UAAU;CAEnE,OACE,kBAAC,GAAD;EAAO,SAAQ;EAAW,IAAI;GAAE,GAAG;GAAG,QAAQ;EAAO;YAArD;GACE,kBAAC,GAAD;IACE,IAAI;KACF,IAAI;KACJ,SAAS;KACT,gBAAgB;KAChB,YAAY;KACZ,KAAK;IACP;cAPF,CASE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KAAY,SAAQ;eAAY;IAAiB,CAAA,GACjD,kBAAC,GAAD;KAAY,SAAQ;KAAU,OAAM;eAAiB;IAEzC,CAAA,CACT,EAAA,CAAA,GACL,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,WAAW,kBAAC,GAAD,CAAU,CAAA;KACrB,SAAS;eACV;IAEO,CAAA,CACL;;GAEJ,EAAgB,SAAS,KACxB,kBAAC,GAAD;IAAO,UAAS;IAAQ,IAAI,EAAE,IAAI,IAAI;cAAtC;KACG,EAAU,kBAAkB,EAAgB,QAAQ,EAAI;KAAG;KAC3D,EAAU,MAAM,EAAgB,MAAM;KAAE;KACjB;KACvB,EACE,KAAI,MAAK,EAAE,UAAU,SAAS,EAAqB,EAAE,WAAW,CAAC,EACjE,KAAK,IAAI;KAAE;IAET;;GAGR,EAAgB,SAAS,KACxB,kBAAC,GAAD;IAAO,UAAS;IAAU,IAAI,EAAE,IAAI,IAAI;cAAxC;KACG,EAAU,SAAS,EAAgB,QAAQ,EAAI;KAAG;KAClD,EAAU,MAAM,EAAgB,MAAM;KAAE;;KACb;KAAkB;KAC7C,EAAgB,WAAW,IAAI,OAAO;KAAO;IACzC;;GAGT,kBAAC,GAAD;IAAO,SAAS;cACb,EAAM,WAAW,IAChB,kBAAC,GAAD;KAAO,UAAS;eAAO;IAEhB,CAAA,IAEP,EAAM,KAAK,GAAM,MACf,kBAAC,GAAD;KAEQ;KACN,WAAW;KACX,SAAS,MAAY;KACrB,QAAQ,MAAY,EAAM,SAAS;KAChB;KACP;KACI;KAChB,iBAAiB,MAAY;KAC7B,WAAU,MAAS,EAAiB,GAAS,CAAK;KAClD,cAAa,MAAe,EAAY,GAAa,EAAK,KAAK;KAC/D,gBAAgB,EAAe,GAAS,EAAE;KAC1C,kBAAkB,EAAe,GAAS,CAAC;KAC3C,gBAAgB,EAAiB,CAAO;IACzC,GAdM,EAAK,KAcX,CACF;GAEE,CAAA;EACF;;AAEX"}

package/dist/components/FormTemplateEditor/FormTemplateEditorForm.js

@@ -18,7 +18,7 @@ import { useSaveFormTemplate as p } from "./useSaveFormTemplate.js";
 import { useMemo as m, useState as h } from "react";
 import { Accordion as g, AccordionDetails as _, AccordionSummary as ae, Alert as oe, Box as v, Button as y, Divider as b, Grid as x, Paper as S, TextField as C, Typography as w } from "@mui/material";
 import { jsx as T, jsxs as E } from "react/jsx-runtime";
-import { ExpandMore as D } from "@mui/icons-material";
+import D from "@mui/icons-material/ExpandMore";
 import { DragDropProvider as O, DragOverlay as k } from "@dnd-kit/react";
 //#region src/components/FormTemplateEditor/FormTemplateEditorForm.tsx
 function A({ initialTemplate: A, initialJsonSchema: j, onSaved: M, onCancel: N }) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormTemplateEditorForm.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FormTemplateEditorForm.tsx"],"sourcesContent":["/*\n * Editing UI for a FormTemplate draft: composes the pure `useFormTemplateDraft` state with save\n * orchestration (`useSaveFormTemplate`) and client-side validation. Receives already-resolved\n * initial data — the caller (`FormTemplateEditor`)\n * owns fetching, so this component never renders a loading state.\n */\nimport { DragDropProvider, DragOverlay } from '@dnd-kit/react'\nimport { FormTemplate } from '@sage-bionetworks/synapse-client'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Alert,\n  Box,\n  Button,\n  Divider,\n  Grid,\n  Paper,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { ExpandMore as ExpandMoreIcon } from '@mui/icons-material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport { useMemo, useState } from 'react'\nimport { displayToast } from '@/components/ToastMessage'\nimport {\n  propertyKeyToPointer,\n  resolveSchemaPropertyAtPointer,\n} from '@/utils/jsonschema/submissionContext'\nimport { FieldDefinitionDrawer } from './FieldDefinitionDrawer'\nimport { FieldValidationErrorAlert } from './FieldValidationErrorAlert'\nimport { FieldLibrary } from './FieldLibrary'\nimport { FIELD_DRAG_TYPE, readFieldDragData } from './sortableIds'\nimport { FormStructurePanel } from './FormStructurePanel'\nimport { FormTemplatePreview } from './FormTemplatePreview'\nimport { JsonSchemaBodyEditor } from './JsonSchemaBodyEditor'\nimport { detectFieldType, fieldTypeLabel } from './schemaFieldUtils'\nimport {\n  formatSchema$id,\n  resolveFormTemplateSchemaName,\n} from './formTemplateSchema'\nimport { toFormTemplateSteps } from './utils'\nimport {\n  FormTemplateFieldValidationError,\n  validateFormTemplateFields,\n} from './formTemplateValidation'\nimport { useFormTemplateDraft } from './useFormTemplateDraft'\nimport { useFormTemplateDrag } from './useFormTemplateDrag'\nimport { useSaveFormTemplate } from './useSaveFormTemplate'\n\nexport type FormTemplateEditorFormProps = {\n  /** Existing template to edit, or undefined for creating a new one. */\n  initialTemplate?: FormTemplate\n  /**\n   * The JSON Schema body the template's `schema$id` resolves to. Required when editing an\n   * existing template.\n   */\n  initialJsonSchema?: RJSFSchema\n  onSaved?: (template: FormTemplate) => void\n  onCancel?: () => void\n}\n\nexport function FormTemplateEditorForm({\n  initialTemplate,\n  initialJsonSchema,\n  onSaved,\n  onCancel,\n}: FormTemplateEditorFormProps) {\n  const draft = useFormTemplateDraft(initialTemplate, initialJsonSchema)\n  const {\n    name,\n    setName,\n    jsonSchema,\n    setJsonSchema,\n    steps,\n    setSteps,\n    editingPropertyKey,\n    setEditingPropertyKey,\n    usedPaths,\n    existingPropertyKeys,\n    unboundProperties,\n    handleCreateField,\n    renamePropertyKey,\n    handleUpdateProperty,\n    handleReplaceProperty,\n    handleChangeRequired,\n    handleChangeContext,\n    handleRemoveProperty,\n    bindField,\n    previewTemplate,\n  } = draft\n  const dragHandlers = useFormTemplateDrag(draft)\n\n  const { mutateAsync: save, isPending: isSaving } = useSaveFormTemplate()\n  const [saveError, setSaveError] = useState<\n    FormTemplateFieldValidationError[] | null\n  >(null)\n\n  const validationErrors = useMemo(\n    () => validateFormTemplateFields(toFormTemplateSteps(steps), jsonSchema),\n    [steps, jsonSchema],\n  )\n\n  const handleSave = async () => {\n    setSaveError(null)\n    try {\n      const result = await save({\n        initialTemplate,\n        initialJsonSchema,\n        name,\n        jsonSchema,\n        steps,\n      })\n      if (!result.ok) {\n        setSaveError(result.validationErrors)\n        return\n      }\n      displayToast(\n        initialTemplate\n          ? 'Your changes were saved as a new version.'\n          : 'The form template was created.',\n        'success',\n        { title: 'Template saved' },\n      )\n      onSaved?.(result.template)\n    } catch (error) {\n      const clientError = error as SynapseClientError\n      if (clientError.status === 412) {\n        displayToast(\n          'This template was changed by someone else since you opened it. Reload it to see the latest version, then reapply your changes.',\n          'warning',\n          { title: 'Template updated since you started editing' },\n        )\n      } else {\n        displayToast(\n          clientError.reason ?? 'An error occurred while saving.',\n          'danger',\n          { title: 'Could not save template' },\n        )\n      }\n    }\n  }\n\n  const editingResolved =\n    editingPropertyKey !== null\n      ? resolveSchemaPropertyAtPointer(\n          jsonSchema,\n          propertyKeyToPointer(editingPropertyKey),\n        )\n      : undefined\n  const editingProperty: RJSFSchema | null = editingResolved?.subSchema ?? null\n  const editingIsRequired = editingResolved?.isRequired ?? false\n  const editingContext = editingResolved?.context ?? 'ALWAYS'\n  const editingIsUsedInSteps =\n    editingPropertyKey !== null &&\n    usedPaths.has(propertyKeyToPointer(editingPropertyKey))\n\n  const templateSchemaName = resolveFormTemplateSchemaName(\n    name,\n    initialTemplate?.schema$id,\n  )\n\n  return (\n    <DragDropProvider {...dragHandlers}>\n      <Paper sx={{ p: 3 }}>\n        <Typography variant=\"h6\" gutterBottom>\n          {initialTemplate ? 'Edit Form Template' : 'Create Form Template'}\n        </Typography>\n\n        <Divider sx={{ mb: 2 }} />\n\n        <TextField\n          label=\"Internal Name\"\n          value={name}\n          onChange={e => setName(e.target.value)}\n          size=\"small\"\n          fullWidth\n          helperText=\"Used by ACT to identify and find this template. Not shown to requesters.\"\n          sx={{ mb: 1 }}\n        />\n        <Typography\n          variant=\"caption\"\n          color=\"text.secondary\"\n          component=\"p\"\n          sx={{ mb: 3 }}\n        >\n          JSON Schema:{' '}\n          {initialTemplate?.schema$id ?? formatSchema$id(templateSchemaName)}\n          {!initialTemplate && ' (a new version is registered when saved)'}\n        </Typography>\n\n        <Grid container spacing={2} alignItems=\"stretch\">\n          <Grid size={{ xs: 12, md: 4 }}>\n            <FieldLibrary\n              jsonSchema={jsonSchema}\n              usedPaths={usedPaths}\n              selectedPropertyKey={editingPropertyKey}\n              onSelectField={setEditingPropertyKey}\n              onCreateField={handleCreateField}\n            />\n          </Grid>\n          <Grid size={{ xs: 12, md: 4 }}>\n            <FormStructurePanel\n              steps={steps}\n              jsonSchema={jsonSchema}\n              unboundProperties={unboundProperties}\n              formTemplateId={initialTemplate?.id}\n              onStepsChange={setSteps}\n              onBindField={bindField}\n            />\n          </Grid>\n          <Grid size={{ xs: 12, md: 4 }}>\n            <Box sx={{ position: 'sticky', top: 16 }}>\n              <Typography\n                variant=\"subtitle2\"\n                color=\"text.secondary\"\n                gutterBottom\n              >\n                Live Preview\n              </Typography>\n              <FormTemplatePreview\n                template={previewTemplate}\n                jsonSchema={jsonSchema}\n              />\n            </Box>\n          </Grid>\n        </Grid>\n\n        <Accordion\n          sx={{ mt: 3 }}\n          disableGutters\n          elevation={0}\n          variant=\"outlined\"\n        >\n          <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n            <Typography variant=\"subtitle2\">\n              Advanced: Edit raw JSON Schema\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <Alert severity=\"info\" variant=\"outlined\" sx={{ mb: 2 }}>\n              Direct access to the JSON Schema body. Most editing happens in the\n              Fields panel above — use this view for features the simple editor\n              doesn't support (nested objects, advanced validation, etc.).\n            </Alert>\n            <JsonSchemaBodyEditor value={jsonSchema} onChange={setJsonSchema} />\n          </AccordionDetails>\n        </Accordion>\n\n        {validationErrors.length > 0 && (\n          <FieldValidationErrorAlert errors={validationErrors}>\n            Fix the following before saving:\n          </FieldValidationErrorAlert>\n        )}\n\n        {saveError && <FieldValidationErrorAlert errors={saveError} />}\n\n        <Divider sx={{ my: 2 }} />\n\n        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>\n          {onCancel && (\n            <Button variant=\"outlined\" onClick={onCancel} disabled={isSaving}>\n              Cancel\n            </Button>\n          )}\n          <Button\n            variant=\"contained\"\n            onClick={() => void handleSave()}\n            disabled={!name || isSaving || validationErrors.length > 0}\n          >\n            {isSaving\n              ? 'Saving…'\n              : initialTemplate\n                ? 'Save Changes'\n                : 'Create Template'}\n          </Button>\n        </Box>\n\n        <FieldDefinitionDrawer\n          open={editingPropertyKey !== null}\n          propertyKey={editingPropertyKey}\n          existingKeys={existingPropertyKeys}\n          property={editingProperty}\n          isRequired={editingIsRequired}\n          context={editingContext}\n          isUsedInSteps={editingIsUsedInSteps}\n          onClose={() => setEditingPropertyKey(null)}\n          onUpdate={patch => {\n            if (editingPropertyKey)\n              handleUpdateProperty(editingPropertyKey, patch)\n          }}\n          onRenameKey={newKey => {\n            if (editingPropertyKey)\n              renamePropertyKey(editingPropertyKey, newKey)\n          }}\n          onReplace={next => {\n            if (editingPropertyKey)\n              handleReplaceProperty(editingPropertyKey, next)\n          }}\n          onChangeRequired={isReq => {\n            if (editingPropertyKey)\n              handleChangeRequired(editingPropertyKey, isReq)\n          }}\n          onChangeContext={context => {\n            if (editingPropertyKey)\n              handleChangeContext(editingPropertyKey, context)\n          }}\n          onRemove={() => {\n            if (editingPropertyKey) handleRemoveProperty(editingPropertyKey)\n          }}\n        />\n      </Paper>\n\n      <DragOverlay>\n        {source => {\n          if (source.type !== FIELD_DRAG_TYPE) return null\n          const propertyKey = readFieldDragData(source.data)\n          if (!propertyKey) return null\n          const property = resolveSchemaPropertyAtPointer(\n            jsonSchema,\n            propertyKeyToPointer(propertyKey),\n          )?.subSchema\n          if (!property) return null\n          return (\n            <Paper\n              elevation={6}\n              sx={{ p: 1.25, cursor: 'grabbing', opacity: 0.95 }}\n            >\n              <Typography variant=\"body2\" fontWeight={500}>\n                {property.title || propertyKey}\n              </Typography>\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                {fieldTypeLabel(detectFieldType(property))}\n              </Typography>\n            </Paper>\n          )\n        }}\n      </DragOverlay>\n    </DragDropProvider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"FormTemplateEditorForm.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FormTemplateEditorForm.tsx"],"sourcesContent":["/*\n * Editing UI for a FormTemplate draft: composes the pure `useFormTemplateDraft` state with save\n * orchestration (`useSaveFormTemplate`) and client-side validation. Receives already-resolved\n * initial data — the caller (`FormTemplateEditor`)\n * owns fetching, so this component never renders a loading state.\n */\nimport { DragDropProvider, DragOverlay } from '@dnd-kit/react'\nimport { FormTemplate } from '@sage-bionetworks/synapse-client'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Alert,\n  Box,\n  Button,\n  Divider,\n  Grid,\n  Paper,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore'\nimport { RJSFSchema } from '@rjsf/utils'\nimport { useMemo, useState } from 'react'\nimport { displayToast } from '@/components/ToastMessage'\nimport {\n  propertyKeyToPointer,\n  resolveSchemaPropertyAtPointer,\n} from '@/utils/jsonschema/submissionContext'\nimport { FieldDefinitionDrawer } from './FieldDefinitionDrawer'\nimport { FieldValidationErrorAlert } from './FieldValidationErrorAlert'\nimport { FieldLibrary } from './FieldLibrary'\nimport { FIELD_DRAG_TYPE, readFieldDragData } from './sortableIds'\nimport { FormStructurePanel } from './FormStructurePanel'\nimport { FormTemplatePreview } from './FormTemplatePreview'\nimport { JsonSchemaBodyEditor } from './JsonSchemaBodyEditor'\nimport { detectFieldType, fieldTypeLabel } from './schemaFieldUtils'\nimport {\n  formatSchema$id,\n  resolveFormTemplateSchemaName,\n} from './formTemplateSchema'\nimport { toFormTemplateSteps } from './utils'\nimport {\n  FormTemplateFieldValidationError,\n  validateFormTemplateFields,\n} from './formTemplateValidation'\nimport { useFormTemplateDraft } from './useFormTemplateDraft'\nimport { useFormTemplateDrag } from './useFormTemplateDrag'\nimport { useSaveFormTemplate } from './useSaveFormTemplate'\n\nexport type FormTemplateEditorFormProps = {\n  /** Existing template to edit, or undefined for creating a new one. */\n  initialTemplate?: FormTemplate\n  /**\n   * The JSON Schema body the template's `schema$id` resolves to. Required when editing an\n   * existing template.\n   */\n  initialJsonSchema?: RJSFSchema\n  onSaved?: (template: FormTemplate) => void\n  onCancel?: () => void\n}\n\nexport function FormTemplateEditorForm({\n  initialTemplate,\n  initialJsonSchema,\n  onSaved,\n  onCancel,\n}: FormTemplateEditorFormProps) {\n  const draft = useFormTemplateDraft(initialTemplate, initialJsonSchema)\n  const {\n    name,\n    setName,\n    jsonSchema,\n    setJsonSchema,\n    steps,\n    setSteps,\n    editingPropertyKey,\n    setEditingPropertyKey,\n    usedPaths,\n    existingPropertyKeys,\n    unboundProperties,\n    handleCreateField,\n    renamePropertyKey,\n    handleUpdateProperty,\n    handleReplaceProperty,\n    handleChangeRequired,\n    handleChangeContext,\n    handleRemoveProperty,\n    bindField,\n    previewTemplate,\n  } = draft\n  const dragHandlers = useFormTemplateDrag(draft)\n\n  const { mutateAsync: save, isPending: isSaving } = useSaveFormTemplate()\n  const [saveError, setSaveError] = useState<\n    FormTemplateFieldValidationError[] | null\n  >(null)\n\n  const validationErrors = useMemo(\n    () => validateFormTemplateFields(toFormTemplateSteps(steps), jsonSchema),\n    [steps, jsonSchema],\n  )\n\n  const handleSave = async () => {\n    setSaveError(null)\n    try {\n      const result = await save({\n        initialTemplate,\n        initialJsonSchema,\n        name,\n        jsonSchema,\n        steps,\n      })\n      if (!result.ok) {\n        setSaveError(result.validationErrors)\n        return\n      }\n      displayToast(\n        initialTemplate\n          ? 'Your changes were saved as a new version.'\n          : 'The form template was created.',\n        'success',\n        { title: 'Template saved' },\n      )\n      onSaved?.(result.template)\n    } catch (error) {\n      const clientError = error as SynapseClientError\n      if (clientError.status === 412) {\n        displayToast(\n          'This template was changed by someone else since you opened it. Reload it to see the latest version, then reapply your changes.',\n          'warning',\n          { title: 'Template updated since you started editing' },\n        )\n      } else {\n        displayToast(\n          clientError.reason ?? 'An error occurred while saving.',\n          'danger',\n          { title: 'Could not save template' },\n        )\n      }\n    }\n  }\n\n  const editingResolved =\n    editingPropertyKey !== null\n      ? resolveSchemaPropertyAtPointer(\n          jsonSchema,\n          propertyKeyToPointer(editingPropertyKey),\n        )\n      : undefined\n  const editingProperty: RJSFSchema | null = editingResolved?.subSchema ?? null\n  const editingIsRequired = editingResolved?.isRequired ?? false\n  const editingContext = editingResolved?.context ?? 'ALWAYS'\n  const editingIsUsedInSteps =\n    editingPropertyKey !== null &&\n    usedPaths.has(propertyKeyToPointer(editingPropertyKey))\n\n  const templateSchemaName = resolveFormTemplateSchemaName(\n    name,\n    initialTemplate?.schema$id,\n  )\n\n  return (\n    <DragDropProvider {...dragHandlers}>\n      <Paper sx={{ p: 3 }}>\n        <Typography variant=\"h6\" gutterBottom>\n          {initialTemplate ? 'Edit Form Template' : 'Create Form Template'}\n        </Typography>\n\n        <Divider sx={{ mb: 2 }} />\n\n        <TextField\n          label=\"Internal Name\"\n          value={name}\n          onChange={e => setName(e.target.value)}\n          size=\"small\"\n          fullWidth\n          helperText=\"Used by ACT to identify and find this template. Not shown to requesters.\"\n          sx={{ mb: 1 }}\n        />\n        <Typography\n          variant=\"caption\"\n          color=\"text.secondary\"\n          component=\"p\"\n          sx={{ mb: 3 }}\n        >\n          JSON Schema:{' '}\n          {initialTemplate?.schema$id ?? formatSchema$id(templateSchemaName)}\n          {!initialTemplate && ' (a new version is registered when saved)'}\n        </Typography>\n\n        <Grid container spacing={2} alignItems=\"stretch\">\n          <Grid size={{ xs: 12, md: 4 }}>\n            <FieldLibrary\n              jsonSchema={jsonSchema}\n              usedPaths={usedPaths}\n              selectedPropertyKey={editingPropertyKey}\n              onSelectField={setEditingPropertyKey}\n              onCreateField={handleCreateField}\n            />\n          </Grid>\n          <Grid size={{ xs: 12, md: 4 }}>\n            <FormStructurePanel\n              steps={steps}\n              jsonSchema={jsonSchema}\n              unboundProperties={unboundProperties}\n              formTemplateId={initialTemplate?.id}\n              onStepsChange={setSteps}\n              onBindField={bindField}\n            />\n          </Grid>\n          <Grid size={{ xs: 12, md: 4 }}>\n            <Box sx={{ position: 'sticky', top: 16 }}>\n              <Typography\n                variant=\"subtitle2\"\n                color=\"text.secondary\"\n                gutterBottom\n              >\n                Live Preview\n              </Typography>\n              <FormTemplatePreview\n                template={previewTemplate}\n                jsonSchema={jsonSchema}\n              />\n            </Box>\n          </Grid>\n        </Grid>\n\n        <Accordion\n          sx={{ mt: 3 }}\n          disableGutters\n          elevation={0}\n          variant=\"outlined\"\n        >\n          <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n            <Typography variant=\"subtitle2\">\n              Advanced: Edit raw JSON Schema\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <Alert severity=\"info\" variant=\"outlined\" sx={{ mb: 2 }}>\n              Direct access to the JSON Schema body. Most editing happens in the\n              Fields panel above — use this view for features the simple editor\n              doesn't support (nested objects, advanced validation, etc.).\n            </Alert>\n            <JsonSchemaBodyEditor value={jsonSchema} onChange={setJsonSchema} />\n          </AccordionDetails>\n        </Accordion>\n\n        {validationErrors.length > 0 && (\n          <FieldValidationErrorAlert errors={validationErrors}>\n            Fix the following before saving:\n          </FieldValidationErrorAlert>\n        )}\n\n        {saveError && <FieldValidationErrorAlert errors={saveError} />}\n\n        <Divider sx={{ my: 2 }} />\n\n        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>\n          {onCancel && (\n            <Button variant=\"outlined\" onClick={onCancel} disabled={isSaving}>\n              Cancel\n            </Button>\n          )}\n          <Button\n            variant=\"contained\"\n            onClick={() => void handleSave()}\n            disabled={!name || isSaving || validationErrors.length > 0}\n          >\n            {isSaving\n              ? 'Saving…'\n              : initialTemplate\n                ? 'Save Changes'\n                : 'Create Template'}\n          </Button>\n        </Box>\n\n        <FieldDefinitionDrawer\n          open={editingPropertyKey !== null}\n          propertyKey={editingPropertyKey}\n          existingKeys={existingPropertyKeys}\n          property={editingProperty}\n          isRequired={editingIsRequired}\n          context={editingContext}\n          isUsedInSteps={editingIsUsedInSteps}\n          onClose={() => setEditingPropertyKey(null)}\n          onUpdate={patch => {\n            if (editingPropertyKey)\n              handleUpdateProperty(editingPropertyKey, patch)\n          }}\n          onRenameKey={newKey => {\n            if (editingPropertyKey)\n              renamePropertyKey(editingPropertyKey, newKey)\n          }}\n          onReplace={next => {\n            if (editingPropertyKey)\n              handleReplaceProperty(editingPropertyKey, next)\n          }}\n          onChangeRequired={isReq => {\n            if (editingPropertyKey)\n              handleChangeRequired(editingPropertyKey, isReq)\n          }}\n          onChangeContext={context => {\n            if (editingPropertyKey)\n              handleChangeContext(editingPropertyKey, context)\n          }}\n          onRemove={() => {\n            if (editingPropertyKey) handleRemoveProperty(editingPropertyKey)\n          }}\n        />\n      </Paper>\n\n      <DragOverlay>\n        {source => {\n          if (source.type !== FIELD_DRAG_TYPE) return null\n          const propertyKey = readFieldDragData(source.data)\n          if (!propertyKey) return null\n          const property = resolveSchemaPropertyAtPointer(\n            jsonSchema,\n            propertyKeyToPointer(propertyKey),\n          )?.subSchema\n          if (!property) return null\n          return (\n            <Paper\n              elevation={6}\n              sx={{ p: 1.25, cursor: 'grabbing', opacity: 0.95 }}\n            >\n              <Typography variant=\"body2\" fontWeight={500}>\n                {property.title || propertyKey}\n              </Typography>\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                {fieldTypeLabel(detectFieldType(property))}\n              </Typography>\n            </Paper>\n          )\n        }}\n      </DragOverlay>\n    </DragDropProvider>\n  )\n}\n"],"mappings":"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"}

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

@@ -1 +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"}
+{"version":3,"file":"StepCard.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/StepCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,gBAAgB,EACjB,MAAM,kCAAkC,CAAA;AAiBzC,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

@@ -8,9 +8,14 @@ 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 T from "pluralize";
+import E from "@mui/icons-material/ExpandLess";
+import D from "@mui/icons-material/ExpandMore";
+import O from "@mui/icons-material/ArrowDownward";
+import k from "@mui/icons-material/ArrowUpward";
+import A from "@mui/icons-material/Delete";
+import { useDroppable as j } from "@dnd-kit/react";
+import M from "@mui/icons-material/DragIndicator";
 import { useSortable as N } from "@dnd-kit/react/sortable";
 //#region src/components/FormTemplateEditor/StepCard.tsx
 var P = 1;
@@ -21,7 +26,7 @@ function F({ step: F, stepIndex: I, isFirst: te, isLast: L, unboundProperties: R
 		group: s,
 		type: c,
 		accept: [c, a]
-	}), { ref: ne, isDropTarget: re } = M({
+	}), { ref: ne, isDropTarget: re } = j({
 		id: l(F),
 		accept: o,
 		collisionPriority: P
@@ -34,7 +39,7 @@ function F({ step: F, stepIndex: I, isFirst: te, isLast: L, unboundProperties: R
 		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);
+	}, oe = T("field", F.fields.length, !0);
 	return /* @__PURE__ */ w(b, {
 		ref: Y,
 		variant: "outlined",
@@ -56,13 +61,13 @@ function F({ step: F, stepIndex: I, isFirst: te, isLast: L, unboundProperties: R
 					"aria-label": "Drag to reorder step",
 					className: i.dragHandle,
 					sx: { color: "text.secondary" },
-					children: /* @__PURE__ */ C(O, { fontSize: "small" })
+					children: /* @__PURE__ */ C(M, { 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" })
+					children: C(q ? E : D, { fontSize: "small" })
 				}),
 				/* @__PURE__ */ w(g, {
 					sx: {
@@ -90,20 +95,20 @@ function F({ step: F, stepIndex: I, isFirst: te, isLast: L, unboundProperties: R
 					disabled: te,
 					onClick: W,
 					"aria-label": "Move step up",
-					children: /* @__PURE__ */ C(E, { fontSize: "small" })
+					children: /* @__PURE__ */ C(k, { fontSize: "small" })
 				}),
 				/* @__PURE__ */ C(v, {
 					size: "small",
 					disabled: L,
 					onClick: G,
 					"aria-label": "Move step down",
-					children: /* @__PURE__ */ C(T, { fontSize: "small" })
+					children: /* @__PURE__ */ C(O, { fontSize: "small" })
 				}),
 				/* @__PURE__ */ C(v, {
 					size: "small",
 					onClick: K,
 					"aria-label": "Remove step",
-					children: /* @__PURE__ */ C(D, { fontSize: "small" })
+					children: /* @__PURE__ */ C(A, { fontSize: "small" })
 				})
 			]
 		}), /* @__PURE__ */ C(_, {

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

@@ -1 +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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"}
+{"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 DownIcon from '@mui/icons-material/ArrowDownward'\nimport DeleteIcon from '@mui/icons-material/Delete'\nimport DragHandleIcon from '@mui/icons-material/DragIndicator'\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess'\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore'\nimport UpIcon from '@mui/icons-material/ArrowUpward'\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.map

@@ -1 +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"}
+{"version":3,"file":"StepFieldRow.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/StepFieldRow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAiBpE,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

@@ -6,7 +6,12 @@ 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 _ from "@mui/icons-material/ExpandLess";
+import v from "@mui/icons-material/ExpandMore";
+import y from "@mui/icons-material/ArrowDownward";
+import b from "@mui/icons-material/ArrowUpward";
+import x from "@mui/icons-material/Delete";
+import S from "@mui/icons-material/DragIndicator";
 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 }) {
@@ -45,13 +50,13 @@ function w({ sortableId: w, sortableIndex: T, sortableGroup: E, field: D, resolv
 					"aria-label": "Drag to reorder field",
 					className: r.dragHandle,
 					sx: { color: "text.secondary" },
-					children: /* @__PURE__ */ h(b, { fontSize: "small" })
+					children: /* @__PURE__ */ h(S, { 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" })
+					children: h(R ? _ : v, { fontSize: "small" })
 				}),
 				/* @__PURE__ */ g(s, {
 					sx: {
@@ -74,20 +79,20 @@ function w({ sortableId: w, sortableIndex: T, sortableGroup: E, field: D, resolv
 					disabled: j,
 					onClick: F,
 					"aria-label": "Move field up",
-					children: /* @__PURE__ */ h(v, { fontSize: "small" })
+					children: /* @__PURE__ */ h(b, { fontSize: "small" })
 				}),
 				/* @__PURE__ */ h(d, {
 					size: "small",
 					disabled: M,
 					onClick: I,
 					"aria-label": "Move field down",
-					children: /* @__PURE__ */ h(_, { fontSize: "small" })
+					children: /* @__PURE__ */ h(y, { fontSize: "small" })
 				}),
 				/* @__PURE__ */ h(d, {
 					size: "small",
 					onClick: L,
 					"aria-label": "Remove field from step",
-					children: /* @__PURE__ */ h(y, { fontSize: "small" })
+					children: /* @__PURE__ */ h(x, { fontSize: "small" })
 				})
 			]
 		}), /* @__PURE__ */ h(l, {

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

@@ -1 +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"}
+{"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 DownIcon from '@mui/icons-material/ArrowDownward'\nimport DeleteIcon from '@mui/icons-material/Delete'\nimport DragHandleIcon from '@mui/icons-material/DragIndicator'\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess'\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore'\nimport UpIcon from '@mui/icons-material/ArrowUpward'\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":";;;;;;;;;;;;;;;;AA2DA,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.map

@@ -1 +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"}
+{"version":3,"file":"TemplateFileHandleField.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/TemplateFileHandleField.tsx"],"names":[],"mappings":"AAsBA,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

@@ -5,7 +5,8 @@ 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";
+import g from "@mui/icons-material/Close";
+import _ from "@mui/icons-material/UploadFile";
 //#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 ? {

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

@@ -1 +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"}
+{"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 RemoveIcon from '@mui/icons-material/Close'\nimport UploadIcon from '@mui/icons-material/UploadFile'\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":";;;;;;;;;;AAwCA,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/schemaFieldUtils.js

@@ -70,12 +70,12 @@ function i(e, t) {
 	return n;
 }
 function a(e, t) {
-	let n = e.toLowerCase().replace(/[^a-z0-9\s]/g, "").trim().split(/\s+/).filter(Boolean).map((e, t) => t === 0 ? e : e.charAt(0).toUpperCase() + e.slice(1)).join("") || "field", r = n, i = 1;
+	let n = e.toLowerCase().replaceAll(/[^a-z0-9\s]/g, "").trim().split(/\s+/).filter(Boolean).map((e, t) => t === 0 ? e : e.charAt(0).toUpperCase() + e.slice(1)).join("") || "field", r = n, i = 1;
 	for (; t.has(r);) i += 1, r = `${n}${i}`;
 	return r;
 }
 function o(e) {
-	let t = e.replace(/[^A-Za-z0-9_]/g, "");
+	let t = e.replaceAll(/[^A-Za-z0-9_]/g, "");
 	return /^[0-9]/.test(t) ? `_${t}` : t;
 }
 //#endregion