@bigbinary/neeto-pdf-frontend 1.0.2 → 1.0.3

package/dist/cjs/v2/PdfEditorPage.js

@@ -0,0 +1,1920 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var reactDom = require('react-dom');
+var reactI18next = require('react-i18next');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var classNames = require('classnames');
+var neetoCist = require('@bigbinary/neeto-cist');
+var Calendar = require('@bigbinary/neeto-icons/Calendar');
+var Hash = require('@bigbinary/neeto-icons/Hash');
+var TextLines = require('@bigbinary/neeto-icons/TextLines');
+var pdf_mapping_schema = require('../../pdf_mapping_schema-CS6f9Kug.js');
+var jsxRuntime = require('react/jsx-runtime');
+var pdfjsLib = require('pdfjs-dist');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
+var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
+var Delete = require('@bigbinary/neeto-icons/Delete');
+var Folder = require('@bigbinary/neeto-icons/Folder');
+var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
+var RightAlign = require('@bigbinary/neeto-icons/RightAlign');
+var Search = require('@bigbinary/neeto-icons/Search');
+var Drag = require('@bigbinary/neeto-icons/Drag');
+var logger = require('js-logger');
+var FilenameUtilities = require('../../FilenameUtilities-DFEKeP7n.js');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var ramda = require('ramda');
+var Left = require('@bigbinary/neeto-icons/Left');
+var Right = require('@bigbinary/neeto-icons/Right');
+var _typeof = require('@babel/runtime/helpers/typeof');
+var utils = require('@bigbinary/neeto-commons-frontend/v2/utils');
+var Download = require('@bigbinary/neeto-icons/Download');
+var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var Minus = require('@bigbinary/neeto-icons/Minus');
+var Plus = require('@bigbinary/neeto-icons/Plus');
+var NavigationHeader = require('@bigbinary/neeto-molecules/v2/NavigationHeader');
+require('@tanstack/react-query');
+require('../../pdf_documents-PKt4xiTc.js');
+require('axios');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var pdfjsLib__namespace = /*#__PURE__*/_interopNamespaceDefault(pdfjsLib);
+
+var mappingDefaults = pdf_mapping_schema.pdfMappingSchema.defaults;
+
+// CSS pixels per PDF point (96dpi / 72dpi). `renderScale = CSS_PX_PER_PT * zoom`
+// maps a page's intrinsic point dimensions to on-screen pixels, and font sizes
+// (stored in points) to pixels. Keeping geometry in point-fractions keeps
+// mappings resolution independent.
+var CSS_PX_PER_PT = 96 / 72;
+var ZOOM = {
+  MIN: 0.5,
+  MAX: 2,
+  STEP: 0.1,
+  DEFAULT: 1
+};
+var PDF_CANVAS = {
+  MAX_DISPLAY_SIZE: 1400,
+  MAX_RENDER_SIZE: 8192,
+  MAX_RENDER_PIXELS: 16000000
+};
+var EDITOR_MODES = {
+  MAP: "map",
+  PREVIEW: "preview"
+};
+var PDF_LOAD_INITIAL_STATE = {
+  pages: [],
+  isLoading: true,
+  error: null
+};
+var EMPTY_MAPPINGS = [];
+var FIELD_SOURCES = {
+  ANSWER: pdf_mapping_schema.pdfMappingSchema.enums.sources[0],
+  SYSTEM: pdf_mapping_schema.pdfMappingSchema.enums.sources[1]
+};
+var DRAG_KINDS = {
+  MOVE: "move",
+  RESIZE: "resize"
+};
+var ALIGNMENTS = {
+  LEFT: pdf_mapping_schema.pdfMappingSchema.enums.alignments[0],
+  CENTER: pdf_mapping_schema.pdfMappingSchema.enums.alignments[1],
+  RIGHT: pdf_mapping_schema.pdfMappingSchema.enums.alignments[2]
+};
+var FORM_THEME_COLOR = "rgb(var(--neeto-form-answer-color, 0, 128, 104))";
+var FORM_THEME_BACKGROUND = "rgba(var(--neeto-form-answer-color, 0, 128, 104), 0.08)";
+var RESIZE_HANDLES = [{
+  key: "top-left",
+  x: "left",
+  y: "top",
+  className: "-left-1.5 -top-1.5 cursor-nwse-resize"
+}, {
+  key: "top-right",
+  x: "right",
+  y: "top",
+  className: "-right-1.5 -top-1.5 cursor-nesw-resize"
+}, {
+  key: "bottom-left",
+  x: "left",
+  y: "bottom",
+  className: "-left-1.5 -bottom-1.5 cursor-nesw-resize"
+}, {
+  key: "bottom-right",
+  x: "right",
+  y: "bottom",
+  className: "-right-1.5 -bottom-1.5 cursor-nwse-resize"
+}];
+
+// Curated, PDF/web-safe fonts. The JSON schema also supplies the server-side
+// variants so client/server rendering cannot drift when the list changes.
+var FONTS = pdf_mapping_schema.pdfMappingSchema.fonts.map(function (_ref) {
+  var label = _ref.label,
+    stack = _ref.stack,
+    value = _ref.value;
+  return {
+    value: value,
+    label: label,
+    stack: stack
+  };
+});
+
+// Maps a curated font to pdf-lib StandardFont variant names, indexed by
+// (bold ? 1 : 0) + (italic ? 2 : 0).
+var STANDARD_FONT_VARIANTS = Object.fromEntries(pdf_mapping_schema.pdfMappingSchema.fonts.map(function (_ref2) {
+  var clientVariants = _ref2.client_variants,
+    value = _ref2.value;
+  return [value, clientVariants];
+}));
+var DEFAULT_FONT_SIZE = mappingDefaults.style.font_size;
+var DEFAULT_DISPLAY_FONT_SIZE = DEFAULT_FONT_SIZE * CSS_PX_PER_PT;
+var FONT_SIZE_LIMITS = pdf_mapping_schema.pdfMappingSchema.ranges.font_size;
+var DEFAULT_STYLE = {
+  font: mappingDefaults.style.font,
+  fontSize: DEFAULT_FONT_SIZE,
+  color: mappingDefaults.style.color,
+  bold: mappingDefaults.style.bold,
+  italic: mappingDefaults.style.italic,
+  underline: mappingDefaults.style.underline,
+  align: mappingDefaults.style.align
+};
+
+// Default placement box as a fraction of the page (top-left origin).
+var DEFAULT_BOX = mappingDefaults.box;
+var MIN_BOX = {
+  width: 0.03,
+  height: 0.012
+};
+var SYSTEM_FIELD_KEYS = {
+  FORM_NAME: "form_name",
+  SUBMISSION_ID: "submission_id",
+  SUBMISSION_DATE: "submission_date"
+};
+
+// System fields are not form questions; they resolve from submission metadata.
+var SYSTEM_FIELDS = [{
+  key: SYSTEM_FIELD_KEYS.FORM_NAME,
+  labelKey: "neetoPdf.pdfDocuments.editor.systemFields.formName",
+  icon: TextLines
+}, {
+  key: SYSTEM_FIELD_KEYS.SUBMISSION_ID,
+  labelKey: "neetoPdf.pdfDocuments.editor.systemFields.submissionId",
+  icon: Hash
+}, {
+  key: SYSTEM_FIELD_KEYS.SUBMISSION_DATE,
+  labelKey: "neetoPdf.pdfDocuments.editor.systemFields.submissionDate",
+  icon: Calendar
+}];
+
+var clamp = function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+};
+var getPdfPageDisplayScale = function getPdfPageDisplayScale(_ref) {
+  var heightPt = _ref.heightPt,
+    rawScale = _ref.rawScale,
+    widthPt = _ref.widthPt;
+  var maxPageSize = Math.max(widthPt, heightPt);
+  if (!maxPageSize) return rawScale;
+  var zoom = rawScale / CSS_PX_PER_PT;
+  var baseScale = Math.min(CSS_PX_PER_PT, PDF_CANVAS.MAX_DISPLAY_SIZE / maxPageSize);
+  return baseScale * zoom;
+};
+var getDefaultFontSizeForScale = function getDefaultFontSizeForScale(scale) {
+  if (!scale || Number.isNaN(scale)) return DEFAULT_STYLE.fontSize;
+  return clamp(Math.round(DEFAULT_DISPLAY_FONT_SIZE / scale), FONT_SIZE_LIMITS.min, FONT_SIZE_LIMITS.max);
+};
+var getFontStack = function getFontStack(font) {
+  var _findBy;
+  return ((_findBy = neetoCist.findBy({
+    value: font
+  }, FONTS)) === null || _findBy === void 0 ? void 0 : _findBy.stack) || FONTS[0].stack;
+};
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getJustifyContent = function getJustifyContent(align) {
+  if (align === "center") return "center";
+  if (align === "right") return "flex-end";
+  return "flex-start";
+};
+var PlacedField = function PlacedField(_ref) {
+  var mapping = _ref.mapping,
+    mode = _ref.mode,
+    isSelected = _ref.isSelected,
+    scale = _ref.scale,
+    pageWidthPx = _ref.pageWidthPx,
+    pageHeightPx = _ref.pageHeightPx,
+    previewValue = _ref.previewValue,
+    onSelect = _ref.onSelect,
+    onChange = _ref.onChange;
+  var dragRef = react.useRef(null);
+  var draftPatchRef = react.useRef(null);
+  var _useState = react.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    draftPatch = _useState2[0],
+    setDraftPatch = _useState2[1];
+  var isPreview = mode === EDITOR_MODES.PREVIEW;
+  var displayMapping = draftPatch ? _objectSpread$3(_objectSpread$3({}, mapping), draftPatch) : mapping;
+  var style = {
+    left: "".concat(displayMapping.x * pageWidthPx, "px"),
+    top: "".concat(displayMapping.y * pageHeightPx, "px"),
+    width: "".concat(displayMapping.width * pageWidthPx, "px"),
+    height: "".concat(displayMapping.height * pageHeightPx, "px")
+  };
+  var selectedStyle = isSelected ? {
+    borderColor: FORM_THEME_COLOR,
+    backgroundColor: FORM_THEME_BACKGROUND
+  } : {};
+  var textStyle = {
+    fontFamily: getFontStack(displayMapping.font),
+    fontSize: "".concat(displayMapping.fontSize * scale, "px"),
+    color: displayMapping.color,
+    fontWeight: displayMapping.bold ? 700 : 400,
+    fontStyle: displayMapping.italic ? "italic" : "normal",
+    textDecoration: displayMapping.underline ? "underline" : "none",
+    textAlign: displayMapping.align,
+    justifyContent: getJustifyContent(displayMapping.align)
+  };
+  var getResizePatch = function getResizePatch(_ref2) {
+    var drag = _ref2.drag,
+      dxFrac = _ref2.dxFrac,
+      dyFrac = _ref2.dyFrac;
+    var patch = {};
+    var originRight = drag.originX + drag.originWidth;
+    var originBottom = drag.originY + drag.originHeight;
+    if (drag.handle.x === "left") {
+      var x = clamp(drag.originX + dxFrac, 0, originRight - MIN_BOX.width);
+      patch.x = x;
+      patch.width = originRight - x;
+    } else {
+      patch.width = clamp(drag.originWidth + dxFrac, MIN_BOX.width, 1 - drag.originX);
+    }
+    if (drag.handle.y === "top") {
+      var y = clamp(drag.originY + dyFrac, 0, originBottom - MIN_BOX.height);
+      patch.y = y;
+      patch.height = originBottom - y;
+    } else {
+      patch.height = clamp(drag.originHeight + dyFrac, MIN_BOX.height, 1 - drag.originY);
+    }
+    return patch;
+  };
+  var handlePointerMove = function handlePointerMove(event) {
+    var drag = dragRef.current;
+    if (!drag) return;
+    var dxFrac = (event.clientX - drag.startX) / pageWidthPx;
+    var dyFrac = (event.clientY - drag.startY) / pageHeightPx;
+    var patch = drag.kind === DRAG_KINDS.MOVE ? {
+      x: clamp(drag.originX + dxFrac, 0, 1 - mapping.width),
+      y: clamp(drag.originY + dyFrac, 0, 1 - mapping.height)
+    } : getResizePatch({
+      drag: drag,
+      dxFrac: dxFrac,
+      dyFrac: dyFrac
+    });
+    draftPatchRef.current = patch;
+    setDraftPatch(patch);
+  };
+  var startDrag = function startDrag(event, kind) {
+    var handle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    if (isPreview) return;
+    event.stopPropagation();
+    event.preventDefault();
+    onSelect(mapping.id);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = {
+      kind: kind,
+      handle: handle,
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: mapping.x,
+      originY: mapping.y,
+      originWidth: mapping.width,
+      originHeight: mapping.height
+    };
+    draftPatchRef.current = null;
+    setDraftPatch(null);
+  };
+  var endDrag = function endDrag(event) {
+    var _event$currentTarget$, _event$currentTarget;
+    if (!dragRef.current) return;
+    (_event$currentTarget$ = (_event$currentTarget = event.currentTarget).releasePointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
+    dragRef.current = null;
+    if (draftPatchRef.current) onChange(mapping.id, draftPatchRef.current);
+    draftPatchRef.current = null;
+    setDraftPatch(null);
+  };
+  var renderResizeHandle = function renderResizeHandle(handle) {
+    return /*#__PURE__*/jsxRuntime.jsx("span", {
+      style: {
+        backgroundColor: FORM_THEME_COLOR
+      },
+      className: classNames("rounded-full border-background absolute h-3 w-3 border-2", handle.className),
+      onPointerCancel: endDrag,
+      onPointerDown: function onPointerDown(event) {
+        return startDrag(event, DRAG_KINDS.RESIZE, handle);
+      },
+      onPointerMove: handlePointerMove,
+      onPointerUp: endDrag
+    }, handle.key);
+  };
+  if (isPreview) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: style,
+      className: "pointer-events-none absolute flex items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "w-full overflow-hidden leading-tight whitespace-pre-wrap",
+        style: textStyle,
+        children: previewValue
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: _objectSpread$3(_objectSpread$3({}, style), selectedStyle),
+    className: classNames("rounded-sm absolute flex cursor-move items-center border transition-colors select-none", {
+      "z-10": isSelected,
+      "border-border bg-opacity-40 bg-background border-dashed": !isSelected
+    }),
+    onPointerCancel: endDrag,
+    onPointerDown: function onPointerDown(event) {
+      return startDrag(event, DRAG_KINDS.MOVE);
+    },
+    onPointerMove: handlePointerMove,
+    onPointerUp: endDrag,
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "flex w-full items-center gap-1 overflow-hidden px-1 leading-tight",
+      style: textStyle,
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "truncate",
+        children: displayMapping.label
+      })
+    }), isSelected && RESIZE_HANDLES.map(renderResizeHandle)]
+  });
+};
+
+var getRenderPixelRatio = function getRenderPixelRatio(viewport) {
+  var dpr = window.devicePixelRatio || 1;
+  var widthRatio = PDF_CANVAS.MAX_RENDER_SIZE / viewport.width;
+  var heightRatio = PDF_CANVAS.MAX_RENDER_SIZE / viewport.height;
+  var pixelRatio = Math.sqrt(PDF_CANVAS.MAX_RENDER_PIXELS / (viewport.width * viewport.height));
+  return Math.min(dpr, widthRatio, heightRatio, pixelRatio);
+};
+var PdfPage = function PdfPage(_ref) {
+  var pageDescriptor = _ref.pageDescriptor,
+    rawScale = _ref.scale,
+    mappings = _ref.mappings,
+    selectedId = _ref.selectedId,
+    mode = _ref.mode,
+    resolveValue = _ref.resolveValue,
+    onSelect = _ref.onSelect,
+    onChange = _ref.onChange,
+    onDropField = _ref.onDropField,
+    onScaleChange = _ref.onScaleChange;
+  var page = pageDescriptor.page,
+    pageNumber = pageDescriptor.pageNumber,
+    widthPt = pageDescriptor.widthPt,
+    heightPt = pageDescriptor.heightPt;
+  var canvasRef = react.useRef(null);
+  var overlayRef = react.useRef(null);
+  var scale = react.useMemo(function () {
+    return getPdfPageDisplayScale({
+      heightPt: heightPt,
+      rawScale: rawScale,
+      widthPt: widthPt
+    });
+  }, [heightPt, rawScale, widthPt]);
+  var defaultMappingScale = react.useMemo(function () {
+    return getPdfPageDisplayScale({
+      heightPt: heightPt,
+      rawScale: CSS_PX_PER_PT,
+      widthPt: widthPt
+    });
+  }, [heightPt, widthPt]);
+  var viewport = react.useMemo(function () {
+    return page.getViewport({
+      scale: scale
+    });
+  }, [page, scale]);
+  var pageWidthPx = viewport.width;
+  var pageHeightPx = viewport.height;
+  react.useEffect(function () {
+    onScaleChange(pageNumber, defaultMappingScale);
+  }, [defaultMappingScale, onScaleChange, pageNumber]);
+  react.useEffect(function () {
+    var canvas = canvasRef.current;
+    if (!canvas) return undefined;
+    var renderPixelRatio = getRenderPixelRatio(viewport);
+    canvas.width = Math.floor(viewport.width * renderPixelRatio);
+    canvas.height = Math.floor(viewport.height * renderPixelRatio);
+    canvas.style.width = "".concat(viewport.width, "px");
+    canvas.style.height = "".concat(viewport.height, "px");
+    var renderTask = page.render({
+      canvasContext: canvas.getContext("2d"),
+      viewport: viewport,
+      transform: renderPixelRatio !== 1 ? [renderPixelRatio, 0, 0, renderPixelRatio, 0, 0] : undefined
+    });
+    var render = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return renderTask.promise;
+            case 3:
+              _context.next = 7;
+              break;
+            case 5:
+              _context.prev = 5;
+              _context.t0 = _context["catch"](0);
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 5]]);
+      }));
+      return function render() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    render();
+    return function () {
+      return renderTask.cancel();
+    };
+  }, [page, scale, viewport]);
+  var handleDrop = function handleDrop(event) {
+    event.preventDefault();
+    var rect = overlayRef.current.getBoundingClientRect();
+    var xFrac = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+    var yFrac = clamp((event.clientY - rect.top) / rect.height, 0, 1);
+    onDropField({
+      pageNumber: pageNumber,
+      scale: defaultMappingScale,
+      x: xFrac,
+      y: yFrac
+    });
+  };
+  var handleDragOver = function handleDragOver(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "shadow-md bg-background relative",
+    style: {
+      width: "".concat(pageWidthPx, "px"),
+      height: "".concat(pageHeightPx, "px")
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("canvas", {
+      ref: canvasRef
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "absolute inset-0",
+      ref: overlayRef,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      onPointerDown: function onPointerDown() {
+        return onSelect(null);
+      },
+      children: mappings.map(function (mapping) {
+        return /*#__PURE__*/react.createElement(PlacedField, {
+          mapping: mapping,
+          mode: mode,
+          onChange: onChange,
+          onSelect: onSelect,
+          pageHeightPx: pageHeightPx,
+          pageWidthPx: pageWidthPx,
+          scale: scale,
+          isSelected: mapping.id === selectedId,
+          key: mapping.id,
+          previewValue: mode === EDITOR_MODES.PREVIEW ? resolveValue(mapping) : null
+        });
+      })
+    })]
+  });
+};
+
+// The worker is vendored into public/ (see the sync:pdf-worker script) so it is
+// served as a static asset with a JS MIME type. pdf.js always loads it as a
+// module worker. Its version must stay in sync with pdfjs-dist.
+pdfjsLib__namespace.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.js";
+
+// Loads a PDF via pdf.js and returns one descriptor per page:
+// { pageNumber, page (PDFPageProxy), widthPt, heightPt }. Dimensions are in PDF
+// points (viewport scale 1), which the canvas scales by CSS_PX_PER_PT * zoom.
+var usePdfDocument = function usePdfDocument(url) {
+  var _useState = react.useState(PDF_LOAD_INITIAL_STATE),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  react.useEffect(function () {
+    if (!url) return undefined;
+    var isCancelled = false;
+    var pdf;
+    setState(PDF_LOAD_INITIAL_STATE);
+    var loadingTask = pdfjsLib__namespace.getDocument({
+      url: url
+    });
+    var loadPages = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var pages, pageNumber, page, viewport;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return loadingTask.promise;
+            case 3:
+              pdf = _context.sent;
+              pages = [];
+              pageNumber = 1;
+            case 6:
+              if (!(pageNumber <= pdf.numPages)) {
+                _context.next = 15;
+                break;
+              }
+              _context.next = 9;
+              return pdf.getPage(pageNumber);
+            case 9:
+              page = _context.sent;
+              viewport = page.getViewport({
+                scale: 1
+              });
+              pages.push({
+                pageNumber: pageNumber,
+                page: page,
+                widthPt: viewport.width,
+                heightPt: viewport.height
+              });
+            case 12:
+              pageNumber += 1;
+              _context.next = 6;
+              break;
+            case 15:
+              if (!isCancelled) setState({
+                pages: pages,
+                isLoading: false,
+                error: null
+              });
+              _context.next = 21;
+              break;
+            case 18:
+              _context.prev = 18;
+              _context.t0 = _context["catch"](0);
+              if (!isCancelled) setState({
+                pages: [],
+                isLoading: false,
+                error: _context.t0
+              });
+            case 21:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 18]]);
+      }));
+      return function loadPages() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    loadPages();
+    return function () {
+      var _loadingTask$destroy, _pdf, _pdf$destroy;
+      isCancelled = true;
+      (_loadingTask$destroy = loadingTask.destroy) === null || _loadingTask$destroy === void 0 || _loadingTask$destroy.call(loadingTask);
+      (_pdf = pdf) === null || _pdf === void 0 || (_pdf$destroy = _pdf.destroy) === null || _pdf$destroy === void 0 || _pdf$destroy.call(_pdf);
+    };
+  }, [url]);
+  return state;
+};
+
+var Canvas = function Canvas(_ref) {
+  var templateUrl = _ref.templateUrl,
+    zoom = _ref.zoom,
+    mappings = _ref.mappings,
+    selectedId = _ref.selectedId,
+    mode = _ref.mode,
+    resolveValue = _ref.resolveValue,
+    onSelect = _ref.onSelect,
+    onChange = _ref.onChange,
+    onDropField = _ref.onDropField,
+    onPageScaleChange = _ref.onPageScaleChange;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _usePdfDocument = usePdfDocument(templateUrl),
+    pages = _usePdfDocument.pages,
+    isLoading = _usePdfDocument.isLoading,
+    error = _usePdfDocument.error;
+  var scale = CSS_PX_PER_PT * zoom;
+  var mappingsByPage = react.useMemo(function () {
+    return mappings.reduce(function (groupedMappings, mapping) {
+      var pageMappings = groupedMappings.get(mapping.page) || [];
+      pageMappings.push(mapping);
+      groupedMappings.set(mapping.page, pageMappings);
+      return groupedMappings;
+    }, new Map());
+  }, [mappings]);
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+    });
+  }
+  if (error || !templateUrl) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center p-8",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "text-muted-foreground",
+        variant: "body2",
+        children: t("neetoPdf.pdfDocuments.editor.renderError")
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "bg-muted absolute inset-0 overflow-auto",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex min-h-full min-w-full w-max flex-col items-center gap-6 p-8",
+      children: pages.map(function (pageDescriptor) {
+        return /*#__PURE__*/react.createElement(PdfPage, {
+          mode: mode,
+          onChange: onChange,
+          onDropField: onDropField,
+          onSelect: onSelect,
+          pageDescriptor: pageDescriptor,
+          resolveValue: resolveValue,
+          scale: scale,
+          selectedId: selectedId,
+          key: pageDescriptor.pageNumber,
+          mappings: mappingsByPage.get(pageDescriptor.pageNumber) || EMPTY_MAPPINGS,
+          onScaleChange: onPageScaleChange
+        });
+      })
+    })
+  });
+};
+
+var _excluded = ["isActive", "onClick", "className", "children"];
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ToggleButton = function ToggleButton(_ref) {
+  var isActive = _ref.isActive,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread$2(_objectSpread$2({
+    onClick: onClick,
+    type: "button",
+    className: classNames("border-border flex h-8 items-center justify-center border text-sm first:rounded-l-md last:rounded-r-md", className, {
+      "bg-foreground text-background": isActive,
+      "bg-background text-foreground hover:bg-muted": !isActive
+    })
+  }, rest), {}, {
+    children: children
+  }));
+};
+var EmptyState = reactUtils.withT(function (_ref2) {
+  var t = _ref2.t;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex h-full flex-col items-center justify-center gap-2 p-8 text-center",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Folder, {
+      className: "text-muted-foreground",
+      size: 32
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      variant: "body2",
+      weight: "medium",
+      children: t("neetoPdf.pdfDocuments.editor.field.emptyTitle")
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      className: "text-muted-foreground",
+      variant: "body3",
+      children: t("neetoPdf.pdfDocuments.editor.field.emptyDescription")
+    })]
+  });
+});
+var renderFontOptionLabel = function renderFontOptionLabel(_ref3) {
+  var label = _ref3.label,
+    stack = _ref3.stack;
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    style: {
+      fontFamily: stack
+    },
+    children: label
+  });
+};
+var sanitizeFontSize = function sanitizeFontSize(value) {
+  var fontSize = Number(value);
+  if (Number.isNaN(fontSize)) return FONT_SIZE_LIMITS.min;
+  return Math.min(Math.max(fontSize, FONT_SIZE_LIMITS.min), FONT_SIZE_LIMITS.max);
+};
+var FieldPanel = reactUtils.withT(function (_ref4) {
+  var t = _ref4.t,
+    mapping = _ref4.mapping,
+    _onChange = _ref4.onChange,
+    onRemove = _ref4.onRemove;
+  return mapping ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "border-border bg-background flex h-full w-72 shrink-0 flex-col overflow-y-auto border-l p-4",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "mb-4 flex place-content-between items-center gap-2",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "truncate",
+        "data-testid": "field-header",
+        variant: "h3",
+        children: mapping.label
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "grow space-y-5",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          className: "text-foreground",
+          variant: "body3",
+          children: t("neetoPdf.pdfDocuments.editor.field.font")
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Select, {
+          formatOptionLabel: renderFontOptionLabel,
+          isSearchable: false,
+          options: FONTS,
+          size: "small",
+          value: mapping.font,
+          onChange: function onChange(font) {
+            return _onChange(mapping.id, {
+              font: font
+            });
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-4",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "min-w-0 flex-1 space-y-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            className: "text-foreground",
+            variant: "body3",
+            children: t("neetoPdf.pdfDocuments.editor.field.size")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+            max: FONT_SIZE_LIMITS.max,
+            min: FONT_SIZE_LIMITS.min,
+            size: "small",
+            type: "number",
+            value: mapping.fontSize,
+            onChange: function onChange(event) {
+              return _onChange(mapping.id, {
+                fontSize: sanitizeFontSize(event.target.value)
+              });
+            }
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            className: "text-foreground",
+            variant: "body3",
+            children: t("neetoPdf.pdfDocuments.editor.field.format")
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex",
+            children: [/*#__PURE__*/jsxRuntime.jsx(ToggleButton, {
+              "aria-label": "bold",
+              className: "w-9",
+              isActive: mapping.bold,
+              onClick: function onClick() {
+                return _onChange(mapping.id, {
+                  bold: !mapping.bold
+                });
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "font-bold",
+                children: "B"
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(ToggleButton, {
+              "aria-label": "italic",
+              className: "w-9",
+              isActive: mapping.italic,
+              onClick: function onClick() {
+                return _onChange(mapping.id, {
+                  italic: !mapping.italic
+                });
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "italic",
+                children: "I"
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(ToggleButton, {
+              "aria-label": "underline",
+              className: "w-9",
+              isActive: mapping.underline,
+              onClick: function onClick() {
+                return _onChange(mapping.id, {
+                  underline: !mapping.underline
+                });
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "underline",
+                children: "U"
+              })
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          className: "text-foreground",
+          variant: "body3",
+          children: t("neetoPdf.pdfDocuments.editor.field.fontColor")
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.ColorPicker, {
+          showHexValue: true,
+          color: mapping.color,
+          size: "small",
+          onChange: function onChange(_ref5) {
+            var hex = _ref5.hex;
+            return _onChange(mapping.id, {
+              color: hex
+            });
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          className: "text-foreground",
+          variant: "body3",
+          children: t("neetoPdf.pdfDocuments.editor.field.alignment")
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex w-full",
+          children: [/*#__PURE__*/jsxRuntime.jsx(ToggleButton, {
+            "aria-label": "align-left",
+            className: "flex-1",
+            isActive: mapping.align === ALIGNMENTS.LEFT,
+            onClick: function onClick() {
+              return _onChange(mapping.id, {
+                align: ALIGNMENTS.LEFT
+              });
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(LeftAlign, {
+              size: 16
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(ToggleButton, {
+            "aria-label": "align-center",
+            className: "flex-1",
+            isActive: mapping.align === ALIGNMENTS.CENTER,
+            onClick: function onClick() {
+              return _onChange(mapping.id, {
+                align: ALIGNMENTS.CENTER
+              });
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(CenterAlign, {
+              size: 16
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(ToggleButton, {
+            "aria-label": "align-right",
+            className: "flex-1",
+            isActive: mapping.align === ALIGNMENTS.RIGHT,
+            onClick: function onClick() {
+              return _onChange(mapping.id, {
+                align: ALIGNMENTS.RIGHT
+              });
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(RightAlign, {
+              size: 16
+            })
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      fullWidth: true,
+      className: "mt-4",
+      icon: Delete,
+      label: t("neetoPdf.pdfDocuments.editor.field.remove"),
+      variant: "destructive",
+      onClick: function onClick() {
+        return onRemove(mapping.id);
+      }
+    })]
+  }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "border-border bg-background flex h-full w-72 shrink-0 flex-col border-l",
+    children: /*#__PURE__*/jsxRuntime.jsx(EmptyState, {})
+  });
+});
+
+var FieldCard = function FieldCard(_ref) {
+  var field = _ref.field,
+    onPlace = _ref.onPlace,
+    onDragStart = _ref.onDragStart,
+    onDragEnd = _ref.onDragEnd;
+  var Icon = field.icon;
+  var handleDragStart = function handleDragStart(event) {
+    event.dataTransfer.effectAllowed = "copy";
+    event.dataTransfer.setData("text/plain", field.key);
+    onDragStart(field);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    onDragEnd: onDragEnd,
+    draggable: true,
+    className: "border-border bg-background hover:bg-muted rounded-lg relative mb-2 flex h-10 cursor-pointer items-center gap-2 border p-3 transition-all duration-300 ease-in-out",
+    "data-testid": "add-".concat(field.key, "-field"),
+    onClick: function onClick() {
+      return onPlace(field);
+    },
+    onDragStart: handleDragStart,
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "absolute end-full top-1/2 me-0.5 flex-shrink-0 -translate-y-1/2 cursor-grab",
+      "data-testid": "drag-handle",
+      children: /*#__PURE__*/jsxRuntime.jsx(Drag, {
+        className: "text-muted-foreground hover:text-muted-foreground transition-all duration-300 ease-in-out",
+        size: 16
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-grow items-center gap-2 overflow-hidden",
+      children: [Icon && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-shrink-0",
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "truncate leading-4",
+        variant: "body2",
+        children: field.label
+      })]
+    })]
+  });
+};
+
+var Section = function Section(_ref) {
+  var title = _ref.title,
+    children = _ref.children;
+  if (!(children !== null && children !== void 0 && children.length)) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      className: "mt-1 mb-3",
+      variant: "h3",
+      children: title
+    }), children]
+  });
+};
+var FieldsPanel = function FieldsPanel(_ref2) {
+  var answerFields = _ref2.answerFields,
+    systemFields = _ref2.systemFields,
+    onPlace = _ref2.onPlace,
+    onDragStartField = _ref2.onDragStartField,
+    onDragEndField = _ref2.onDragEndField;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = react.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var query = searchTerm.trim().toLowerCase();
+  var matches = function matches(field) {
+    return field.label.toLowerCase().includes(query);
+  };
+  var filteredAnswers = query ? answerFields.filter(matches) : answerFields;
+  var filteredSystem = query ? systemFields.filter(matches) : systemFields;
+  var renderField = function renderField(field) {
+    return /*#__PURE__*/react.createElement(FieldCard, {
+      field: field,
+      onPlace: onPlace,
+      key: "".concat(field.source, "-").concat(field.key),
+      onDragEnd: onDragEndField,
+      onDragStart: onDragStartField
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "border-border bg-muted flex h-full w-[360px] shrink-0 flex-col border-r",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "p-6 pb-1",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        lineHeight: "normal",
+        variant: "h3",
+        weight: "semibold",
+        children: t("neetoPdf.pdfDocuments.editor.addNewElement")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "mb-1 px-6",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "mb-3",
+        variant: "body3",
+        children: t("neetoPdf.pdfDocuments.editor.addNewElementDescription")
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+        autoFocus: true,
+        "data-testid": "elements-panel-search-field",
+        placeholder: t("neetoPdf.pdfDocuments.editor.searchElements"),
+        prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
+        type: "search",
+        value: searchTerm,
+        onChange: function onChange(event) {
+          return setSearchTerm(event.target.value);
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "grow overflow-y-auto px-6 pb-2",
+      "data-testid": "elements-container",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Section, {
+        title: t("neetoPdf.pdfDocuments.editor.answers"),
+        children: filteredAnswers.map(renderField)
+      }), /*#__PURE__*/jsxRuntime.jsx(Section, {
+        title: t("neetoPdf.pdfDocuments.editor.system"),
+        children: filteredSystem.map(renderField)
+      }), filteredAnswers.length === 0 && filteredSystem.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "text-foreground text-md flex h-full items-center justify-center",
+        weight: "bold",
+        children: t("neetoPdf.pdfDocuments.editor.noFields")
+      }) : null]
+    })]
+  });
+};
+
+// pdf-lib StandardFonts only support WinAnsi encoding and single-line text, so
+// collapse whitespace and drop characters they cannot encode.
+var sanitizeForPdf = function sanitizeForPdf(text) {
+  return text.replace(/\s+/g, " ").trim().replace(/[^\x20-\x7E\xA0-\xFF]/g, "").trim();
+};
+var hexToRgbComponents = function hexToRgbComponents(hex) {
+  var value = (hex || DEFAULT_STYLE.color).replace("#", "");
+  var full = value.length === 3 ? value.split("").map(function (_char) {
+    return _char + _char;
+  }).join("") : value;
+  var _int = parseInt(full, 16);
+  return {
+    r: (_int >> 16 & 255) / 255,
+    g: (_int >> 8 & 255) / 255,
+    b: (_int & 255) / 255
+  };
+};
+var standardFontName = function standardFontName(font, bold, italic) {
+  var variants = STANDARD_FONT_VARIANTS[font] || STANDARD_FONT_VARIANTS.Helvetica;
+  return variants[(bold ? 1 : 0) + (italic ? 2 : 0)];
+};
+var triggerBlobDownload = function triggerBlobDownload(bytes, fileName) {
+  var blob = new Blob([bytes], {
+    type: "application/pdf"
+  });
+  var url = URL.createObjectURL(blob);
+  var link = window.document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  window.document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+};
+
+// Stamp the resolved values for one submission onto the template PDF (client
+// side, via pdf-lib) and trigger a browser download. pdf-lib is imported lazily
+// so it only loads on the first download.
+var downloadFilledPdf = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref) {
+    var templateUrl, mappings, valueFor, fileName, pdfLibModule, PDFDocument, StandardFonts, rgb, response, bytes, pdfDoc, pages, fontNames, embeddedFonts;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          templateUrl = _ref.templateUrl, mappings = _ref.mappings, valueFor = _ref.valueFor, fileName = _ref.fileName;
+          _context2.next = 3;
+          return import('pdf-lib');
+        case 3:
+          pdfLibModule = _context2.sent;
+          PDFDocument = pdfLibModule.PDFDocument, StandardFonts = pdfLibModule.StandardFonts, rgb = pdfLibModule.rgb;
+          _context2.next = 7;
+          return fetch(templateUrl);
+        case 7:
+          response = _context2.sent;
+          if (response.ok) {
+            _context2.next = 10;
+            break;
+          }
+          throw new Error("Failed to fetch template PDF (".concat(response.status, ")"));
+        case 10:
+          _context2.next = 12;
+          return response.arrayBuffer();
+        case 12:
+          bytes = _context2.sent;
+          _context2.next = 15;
+          return PDFDocument.load(bytes, {
+            ignoreEncryption: true
+          });
+        case 15:
+          pdfDoc = _context2.sent;
+          pages = pdfDoc.getPages();
+          fontNames = _toConsumableArray(new Set(mappings.map(function (mapping) {
+            return standardFontName(mapping.font, mapping.bold, mapping.italic);
+          })));
+          _context2.t0 = Object;
+          _context2.next = 21;
+          return Promise.all(fontNames.map(/*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(name) {
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.t0 = name;
+                    _context.next = 3;
+                    return pdfDoc.embedFont(StandardFonts[name]);
+                  case 3:
+                    _context.t1 = _context.sent;
+                    return _context.abrupt("return", [_context.t0, _context.t1]);
+                  case 5:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            return function (_x2) {
+              return _ref3.apply(this, arguments);
+            };
+          }()));
+        case 21:
+          _context2.t1 = _context2.sent;
+          embeddedFonts = _context2.t0.fromEntries.call(_context2.t0, _context2.t1);
+          mappings.forEach(function (mapping) {
+            var page = pages[mapping.page - 1];
+            if (!page) return;
+            var text = sanitizeForPdf(valueFor(mapping) || "");
+            if (!text) return;
+            var _page$getSize = page.getSize(),
+              pageWidth = _page$getSize.width,
+              pageHeight = _page$getSize.height;
+            var font = embeddedFonts[standardFontName(mapping.font, mapping.bold, mapping.italic)];
+            var size = mapping.fontSize;
+            var _hexToRgbComponents = hexToRgbComponents(mapping.color),
+              r = _hexToRgbComponents.r,
+              g = _hexToRgbComponents.g,
+              b = _hexToRgbComponents.b;
+            var color = rgb(r, g, b);
+            var boxLeft = mapping.x * pageWidth;
+            var boxWidth = mapping.width * pageWidth;
+            var textWidth = font.widthOfTextAtSize(text, size);
+            var x = boxLeft;
+            if (mapping.align === "center") x = boxLeft + (boxWidth - textWidth) / 2;else if (mapping.align === "right") x = boxLeft + boxWidth - textWidth;
+            var y = pageHeight - mapping.y * pageHeight - size;
+            page.drawText(text, {
+              x: x,
+              y: y,
+              size: size,
+              font: font,
+              color: color
+            });
+            if (mapping.underline) {
+              var lineY = y - size * 0.1;
+              page.drawLine({
+                start: {
+                  x: x,
+                  y: lineY
+                },
+                end: {
+                  x: x + textWidth,
+                  y: lineY
+                },
+                thickness: Math.max(0.5, size * 0.06),
+                color: color
+              });
+            }
+          });
+          _context2.t2 = triggerBlobDownload;
+          _context2.next = 27;
+          return pdfDoc.save();
+        case 27:
+          _context2.t3 = _context2.sent;
+          _context2.t4 = fileName;
+          (0, _context2.t2)(_context2.t3, _context2.t4);
+        case 30:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function downloadFilledPdf(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+var usePdfDownload = function usePdfDownload(_ref) {
+  var mappings = _ref.mappings,
+    pdfDocument = _ref.pdfDocument,
+    previewRecord = _ref.previewRecord,
+    resolveValue = _ref.resolveValue,
+    t = _ref.t;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDownloading = _useState2[0],
+    setIsDownloading = _useState2[1];
+  var downloadPdf = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _pdfDocument$template;
+      var templateUrl;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            templateUrl = pdfDocument === null || pdfDocument === void 0 || (_pdfDocument$template = pdfDocument.templateFile) === null || _pdfDocument$template === void 0 ? void 0 : _pdfDocument$template.url;
+            if (!(!templateUrl || !previewRecord)) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            setIsDownloading(true);
+            _context.prev = 4;
+            _context.next = 7;
+            return downloadFilledPdf({
+              templateUrl: templateUrl,
+              mappings: mappings,
+              valueFor: resolveValue,
+              fileName: FilenameUtilities.buildOutputFilename(pdfDocument, previewRecord)
+            });
+          case 7:
+            _context.next = 13;
+            break;
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](4);
+            logger.error(_context.t0);
+            neetoAtoms.Toastr.error(t("neetoPdf.pdfDocuments.editor.downloadError"));
+          case 13:
+            _context.prev = 13;
+            setIsDownloading(false);
+            return _context.finish(13);
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 9, 13, 16]]);
+    }));
+    return function downloadPdf() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return {
+    downloadPdf: downloadPdf,
+    isDownloading: isDownloading
+  };
+};
+
+var usePdfEditorDocument = function usePdfEditorDocument(_ref) {
+  var _pdfDocument$template;
+  var apiBaseUrl = _ref.apiBaseUrl,
+    documentId = _ref.documentId,
+    ownerId = _ref.ownerId,
+    t = _ref.t;
+  var _useFetchPdfDocument = FilenameUtilities.useFetchPdfDocument({
+      apiBaseUrl: apiBaseUrl,
+      ownerId: ownerId,
+      documentId: documentId
+    }),
+    documentResponse = _useFetchPdfDocument.data,
+    isDocumentLoading = _useFetchPdfDocument.isLoading;
+  var pdfDocument = documentResponse === null || documentResponse === void 0 ? void 0 : documentResponse.document;
+  var _useUpdatePdfDocument = FilenameUtilities.useUpdatePdfDocument({
+      apiBaseUrl: apiBaseUrl,
+      ownerId: ownerId,
+      options: {
+        onSuccess: function onSuccess() {
+          return neetoAtoms.Toastr.success(t("neetoPdf.pdfDocuments.editor.saveSuccess"));
+        },
+        onError: function onError(error) {
+          return neetoAtoms.Toastr.error(FilenameUtilities.getPdfDocumentApiErrorMessage(error, t("neetoPdf.pdfDocuments.editor.saveError")));
+        }
+      }
+    }),
+    saveMappings = _useUpdatePdfDocument.mutate,
+    isSaving = _useUpdatePdfDocument.isPending;
+  var _useUpdatePdfDocument2 = FilenameUtilities.useUpdatePdfDocument({
+      apiBaseUrl: apiBaseUrl,
+      ownerId: ownerId,
+      options: {
+        onSuccess: function onSuccess() {
+          return neetoAtoms.Toastr.success(t("neetoPdf.pdfDocuments.rename.success"));
+        },
+        onError: function onError(error) {
+          return neetoAtoms.Toastr.error(FilenameUtilities.getPdfDocumentApiErrorMessage(error, t("neetoPdf.pdfDocuments.rename.error")));
+        }
+      }
+    }),
+    renameDocument = _useUpdatePdfDocument2.mutate;
+  var saveDocumentMappings = function saveDocumentMappings(_ref2) {
+    var mappings = _ref2.mappings,
+      onSuccess = _ref2.onSuccess;
+    saveMappings({
+      documentId: documentId,
+      payload: {
+        mappings: mappings
+      }
+    }, {
+      onSuccess: onSuccess
+    });
+  };
+  var renamePdfDocument = function renamePdfDocument(name) {
+    var trimmedName = name.trim();
+    renameDocument({
+      documentId: documentId,
+      payload: {
+        name: trimmedName,
+        outputFilename: FilenameUtilities.buildOutputFilenameTemplate(trimmedName)
+      }
+    });
+  };
+  return {
+    documentName: (pdfDocument === null || pdfDocument === void 0 ? void 0 : pdfDocument.name) || "",
+    isDocumentLoading: isDocumentLoading,
+    isSaving: isSaving,
+    pdfDocument: pdfDocument,
+    renamePdfDocument: renamePdfDocument,
+    saveDocumentMappings: saveDocumentMappings,
+    templateUrl: pdfDocument === null || pdfDocument === void 0 || (_pdfDocument$template = pdfDocument.templateFile) === null || _pdfDocument$template === void 0 ? void 0 : _pdfDocument$template.url
+  };
+};
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var htmlToPlainText = function htmlToPlainText(value) {
+  var element = window.document.createElement("div");
+  element.innerHTML = value || "";
+  return element.textContent || element.innerText || "";
+};
+var generateId = function generateId() {
+  var _window$crypto, _window$crypto$random;
+  return ((_window$crypto = window.crypto) === null || _window$crypto === void 0 || (_window$crypto$random = _window$crypto.randomUUID) === null || _window$crypto$random === void 0 ? void 0 : _window$crypto$random.call(_window$crypto)) || "".concat(Date.now(), "-").concat(Math.random());
+};
+
+// Turn the form's records into the "Answers" list shown in the left panel.
+var buildAnswerFields = function buildAnswerFields() {
+  var fields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return fields.filter(function (field) {
+    return field;
+  }).map(function (field) {
+    return {
+      source: FIELD_SOURCES.ANSWER,
+      key: field.key || field.slug,
+      recordId: field.recordId || field.id || null,
+      slug: field.slug || field.key,
+      label: htmlToPlainText(field.label || ""),
+      kind: field.kind,
+      icon: field.icon,
+      typeLabel: field.typeLabel || field.kind || ""
+    };
+  });
+};
+var buildMapping = function buildMapping(_ref) {
+  var _field$recordId;
+  var field = _ref.field,
+    page = _ref.page,
+    scale = _ref.scale;
+  return _objectSpread$1(_objectSpread$1(_objectSpread$1({
+    id: generateId(),
+    source: field.source,
+    fieldSlug: field.key,
+    recordId: (_field$recordId = field.recordId) !== null && _field$recordId !== void 0 ? _field$recordId : null,
+    label: field.label,
+    kind: field.kind,
+    page: page
+  }, DEFAULT_BOX), DEFAULT_STYLE), {}, {
+    fontSize: getDefaultFontSizeForScale(scale)
+  });
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var usePdfMappingsState = function usePdfMappingsState(_ref) {
+  var documentId = _ref.documentId,
+    pdfDocument = _ref.pdfDocument;
+  var _useState = react.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    mappings = _useState2[0],
+    setMappings = _useState2[1];
+  var _useState3 = react.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedId = _useState4[0],
+    setSelectedId = _useState4[1];
+  var _useState5 = react.useState(function () {
+      return new Map();
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    pageScales = _useState6[0],
+    setPageScales = _useState6[1];
+  var _useState7 = react.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isDirty = _useState8[0],
+    setIsDirty = _useState8[1];
+  var draggedFieldRef = react.useRef(null);
+  var initializedRef = react.useRef(null);
+  react.useEffect(function () {
+    if (!(pdfDocument && initializedRef.current !== documentId)) return;
+    initializedRef.current = documentId;
+    setMappings(pdfDocument.mappings || []);
+    setIsDirty(false);
+  }, [pdfDocument, documentId]);
+  var selectedMapping = neetoCist.findById(selectedId, mappings) || null;
+  var mutateMappings = function mutateMappings(updater) {
+    setMappings(updater);
+    setIsDirty(true);
+  };
+  var handleAddField = function handleAddField(field) {
+    var mapping = buildMapping({
+      field: field,
+      page: 1,
+      scale: pageScales.get(1)
+    });
+    mutateMappings(ramda.append(mapping));
+    setSelectedId(mapping.id);
+  };
+  var handleDropField = function handleDropField(_ref2) {
+    var pageNumber = _ref2.pageNumber,
+      scale = _ref2.scale,
+      x = _ref2.x,
+      y = _ref2.y;
+    var field = draggedFieldRef.current;
+    if (!field) return;
+    var mapping = _objectSpread(_objectSpread({}, buildMapping({
+      field: field,
+      page: pageNumber,
+      scale: scale
+    })), {}, {
+      x: clamp(x, 0, 1 - DEFAULT_BOX.width),
+      y: clamp(y, 0, 1 - DEFAULT_BOX.height)
+    });
+    mutateMappings(ramda.append(mapping));
+    setSelectedId(mapping.id);
+  };
+  var handleChangeMapping = function handleChangeMapping(id, patch) {
+    return mutateMappings(function (prev) {
+      return prev.map(function (mapping) {
+        return mapping.id === id ? _objectSpread(_objectSpread({}, mapping), patch) : mapping;
+      });
+    });
+  };
+  var handlePageScaleChange = function handlePageScaleChange(pageNumber, scale) {
+    setPageScales(function (prev) {
+      if (prev.get(pageNumber) === scale) return prev;
+      var nextPageScales = new Map(prev);
+      nextPageScales.set(pageNumber, scale);
+      return nextPageScales;
+    });
+  };
+  var handleRemoveMapping = function handleRemoveMapping(id) {
+    mutateMappings(function (prev) {
+      return neetoCist.removeById(id, prev);
+    });
+    setSelectedId(function (current) {
+      return current === id ? null : current;
+    });
+  };
+  var handleDragEndField = function handleDragEndField() {
+    draggedFieldRef.current = null;
+  };
+  var handleDragStartField = function handleDragStartField(field) {
+    draggedFieldRef.current = field;
+  };
+  return {
+    handleAddField: handleAddField,
+    handleChangeMapping: handleChangeMapping,
+    handleDragEndField: handleDragEndField,
+    handleDragStartField: handleDragStartField,
+    handleDropField: handleDropField,
+    handlePageScaleChange: handlePageScaleChange,
+    handleRemoveMapping: handleRemoveMapping,
+    isDirty: isDirty,
+    mappings: mappings,
+    selectedId: selectedId,
+    selectedMapping: selectedMapping,
+    setIsDirty: setIsDirty,
+    setSelectedId: setSelectedId
+  };
+};
+
+var usePreviewPagination = function usePreviewPagination(_ref) {
+  var controlledMode = _ref.controlledMode,
+    onModeChange = _ref.onModeChange,
+    onPreviewPageChange = _ref.onPreviewPageChange,
+    previewPage = _ref.previewPage,
+    setSelectedId = _ref.setSelectedId;
+  var _useState = react.useState(previewPage),
+    _useState2 = _slicedToArray(_useState, 2),
+    localPreviewPage = _useState2[0],
+    setLocalPreviewPage = _useState2[1];
+  var _useState3 = react.useState(EDITOR_MODES.MAP),
+    _useState4 = _slicedToArray(_useState3, 2),
+    localMode = _useState4[0],
+    setLocalMode = _useState4[1];
+  var mode = controlledMode || localMode;
+  var isPreview = mode === EDITOR_MODES.PREVIEW;
+  var currentPreviewPage = onPreviewPageChange ? previewPage : localPreviewPage;
+  react.useEffect(function () {
+    if (!isPreview) return;
+    setSelectedId(null);
+    setLocalPreviewPage(1);
+    onPreviewPageChange === null || onPreviewPageChange === void 0 || onPreviewPageChange(1);
+  }, [isPreview, onPreviewPageChange, setSelectedId]);
+  var setPreviewPage = function setPreviewPage(page) {
+    setLocalPreviewPage(page);
+    onPreviewPageChange === null || onPreviewPageChange === void 0 || onPreviewPageChange(page);
+  };
+  var handleModeChange = function handleModeChange(nextMode) {
+    setLocalMode(nextMode);
+    onModeChange === null || onModeChange === void 0 || onModeChange(nextMode);
+  };
+  return {
+    currentPreviewPage: currentPreviewPage,
+    handleModeChange: handleModeChange,
+    isPreview: isPreview,
+    mode: mode,
+    setPreviewPage: setPreviewPage
+  };
+};
+
+var PreviewPager = function PreviewPager(_ref) {
+  var page = _ref.page,
+    total = _ref.total,
+    isLoading = _ref.isLoading,
+    onPrev = _ref.onPrev,
+    onNext = _ref.onNext;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  if (!isLoading && total === 0) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "border-border bg-background shadow-md rounded-lg border px-3 py-1.5",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "text-muted-foreground",
+        variant: "body3",
+        children: t("neetoPdf.pdfDocuments.editor.preview.noSubmissions")
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "border-border bg-background shadow-md rounded-lg flex items-center gap-1 border px-1",
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      disabled: page <= 1 || isLoading,
+      icon: Left,
+      size: "small",
+      variant: "ghost",
+      onClick: onPrev
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      className: "px-1 whitespace-nowrap",
+      variant: "body3",
+      children: t("neetoPdf.pdfDocuments.editor.preview.counter", {
+        page: page,
+        total: total
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      disabled: page >= total || isLoading,
+      icon: Right,
+      size: "small",
+      variant: "ghost",
+      onClick: onNext
+    })]
+  });
+};
+
+var _coerceToText = function coerceToText(value) {
+  if (value === null || value === undefined) return "";
+  if (Array.isArray(value)) {
+    return value.map(_coerceToText).filter(Boolean).join(", ");
+  }
+  if (_typeof(value) === "object") {
+    if ("value" in value) return _coerceToText(value.value);
+    if ("label" in value) return _coerceToText(value.label);
+    return "";
+  }
+  return String(value);
+};
+
+// Resolve the text shown for a placement in "Preview with data" mode. Returns
+// "" (rendered blank) when the current submission has no answer for the field.
+var resolvePreviewValue = function resolvePreviewValue(_ref) {
+  var mapping = _ref.mapping,
+    _ref$responsesBySlug = _ref.responsesBySlug,
+    responsesBySlug = _ref$responsesBySlug === void 0 ? {} : _ref$responsesBySlug,
+    form = _ref.form,
+    submission = _ref.submission;
+  if (mapping.source === FIELD_SOURCES.SYSTEM) {
+    switch (mapping.fieldSlug) {
+      case SYSTEM_FIELD_KEYS.FORM_NAME:
+        return (form === null || form === void 0 ? void 0 : form.title) || (form === null || form === void 0 ? void 0 : form.name) || "";
+      case SYSTEM_FIELD_KEYS.SUBMISSION_ID:
+        return (submission === null || submission === void 0 ? void 0 : submission.id) || "";
+      case SYSTEM_FIELD_KEYS.SUBMISSION_DATE:
+        return submission !== null && submission !== void 0 && submission.createdAt ? utils.dateFormat.dateTime(submission.createdAt) : "";
+      default:
+        return "";
+    }
+  }
+  return _coerceToText(responsesBySlug[mapping.fieldSlug]);
+};
+
+// Build a slug -> value lookup from a single submission's responses array.
+var buildResponsesBySlug = function buildResponsesBySlug() {
+  var responses = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return responses.reduce(function (acc, response) {
+    if ((response === null || response === void 0 ? void 0 : response.slug) !== undefined) acc[response.slug] = response.value;
+    return acc;
+  }, {});
+};
+
+var TopBar = function TopBar(_ref) {
+  var name = _ref.name,
+    onRename = _ref.onRename,
+    canManage = _ref.canManage,
+    homeUrl = _ref.homeUrl,
+    isPreview = _ref.isPreview,
+    zoom = _ref.zoom,
+    onZoomIn = _ref.onZoomIn,
+    onZoomOut = _ref.onZoomOut,
+    onDownload = _ref.onDownload,
+    isDownloading = _ref.isDownloading,
+    canDownload = _ref.canDownload,
+    onSave = _ref.onSave,
+    isSaving = _ref.isSaving,
+    isDirty = _ref.isDirty,
+    onBack = _ref.onBack,
+    onModeChange = _ref.onModeChange;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var headerLinks = [{
+    key: EDITOR_MODES.MAP,
+    label: t("neetoPdf.pdfDocuments.editor.mapFields"),
+    to: "#map",
+    isActive: function isActive() {
+      return !isPreview;
+    },
+    onClick: function onClick(event) {
+      event.preventDefault();
+      onModeChange(EDITOR_MODES.MAP);
+    }
+  }, {
+    key: EDITOR_MODES.PREVIEW,
+    label: t("neetoPdf.pdfDocuments.editor.previewWithData"),
+    to: "#preview",
+    isActive: function isActive() {
+      return isPreview;
+    },
+    onClick: function onClick(event) {
+      event.preventDefault();
+      onModeChange(EDITOR_MODES.PREVIEW);
+    }
+  }];
+  var rightActionBlock = /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex w-full items-center justify-end gap-3",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-1",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        disabled: zoom <= ZOOM.MIN,
+        icon: Minus,
+        size: "small",
+        variant: "ghost",
+        onClick: onZoomOut
+      }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
+        className: "w-10 text-center",
+        variant: "body3",
+        children: [Math.round(zoom * 100), "%"]
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        disabled: zoom >= ZOOM.MAX,
+        icon: Plus,
+        size: "small",
+        variant: "ghost",
+        onClick: onZoomIn
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      disabled: !canDownload,
+      icon: Download,
+      label: t("neetoPdf.pdfDocuments.editor.downloadPdf"),
+      loading: isDownloading,
+      variant: "secondary",
+      tooltipProps: {
+        content: canDownload ? t("neetoPdf.pdfDocuments.editor.downloadTooltip") : t("neetoPdf.pdfDocuments.editor.downloadHint")
+      },
+      onClick: onDownload
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      disabled: !isDirty,
+      label: t("neetoPdf.common.save"),
+      loading: isSaving,
+      onClick: onSave
+    })]
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(NavigationHeader, {
+    rightActionBlock: rightActionBlock,
+    leftActionBlock: /*#__PURE__*/jsxRuntime.jsx(NavigationHeader.LeftActionBlock, {
+      homeUrl: homeUrl || "#",
+      homeButtonProps: {
+        icon: /*#__PURE__*/jsxRuntime.jsx(LeftArrow, {}),
+        tooltip: {
+          content: t("neetoPdf.pdfDocuments.editor.back"),
+          position: "bottom"
+        },
+        onClick: onBack
+      },
+      renameProps: {
+        value: name,
+        disabled: !canManage,
+        placeholder: t("neetoPdf.pdfDocuments.rename.placeholder"),
+        onRename: onRename
+      }
+    }),
+    navigationLinks: /*#__PURE__*/jsxRuntime.jsx(NavigationHeader.NavigationLinks, {
+      headerLinks: headerLinks,
+      maxVisibleLinks: 2
+    })
+  });
+};
+
+var FullScreenSpinner = function FullScreenSpinner() {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "bg-background fixed inset-0 z-50 flex items-center justify-center",
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+  });
+};
+var PdfEditorPage = function PdfEditorPage(_ref) {
+  var apiBaseUrl = _ref.apiBaseUrl,
+    ownerId = _ref.ownerId,
+    documentId = _ref.documentId,
+    _ref$canManage = _ref.canManage,
+    canManage = _ref$canManage === void 0 ? true : _ref$canManage,
+    _ref$fields = _ref.fields,
+    fields = _ref$fields === void 0 ? [] : _ref$fields,
+    _ref$ownerRecord = _ref.ownerRecord,
+    ownerRecord = _ref$ownerRecord === void 0 ? {} : _ref$ownerRecord,
+    previewRecord = _ref.previewRecord,
+    _ref$previewTotal = _ref.previewTotal,
+    previewTotal = _ref$previewTotal === void 0 ? 0 : _ref$previewTotal,
+    _ref$previewPage = _ref.previewPage,
+    previewPage = _ref$previewPage === void 0 ? 1 : _ref$previewPage,
+    _ref$isPreviewLoading = _ref.isPreviewLoading,
+    isPreviewLoading = _ref$isPreviewLoading === void 0 ? false : _ref$isPreviewLoading,
+    controlledMode = _ref.mode,
+    homeUrl = _ref.homeUrl,
+    onBack = _ref.onBack,
+    onModeChange = _ref.onModeChange,
+    onPreviewPageChange = _ref.onPreviewPageChange;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = react.useState(ZOOM.DEFAULT),
+    _useState2 = _slicedToArray(_useState, 2),
+    zoom = _useState2[0],
+    setZoom = _useState2[1];
+  var _usePdfEditorDocument = usePdfEditorDocument({
+      apiBaseUrl: apiBaseUrl,
+      documentId: documentId,
+      ownerId: ownerId,
+      t: t
+    }),
+    documentName = _usePdfEditorDocument.documentName,
+    isDocumentLoading = _usePdfEditorDocument.isDocumentLoading,
+    isSaving = _usePdfEditorDocument.isSaving,
+    pdfDocument = _usePdfEditorDocument.pdfDocument,
+    renamePdfDocument = _usePdfEditorDocument.renamePdfDocument,
+    saveDocumentMappings = _usePdfEditorDocument.saveDocumentMappings,
+    templateUrl = _usePdfEditorDocument.templateUrl;
+  var _usePdfMappingsState = usePdfMappingsState({
+      documentId: documentId,
+      pdfDocument: pdfDocument
+    }),
+    handleAddField = _usePdfMappingsState.handleAddField,
+    handleChangeMapping = _usePdfMappingsState.handleChangeMapping,
+    handleDragEndField = _usePdfMappingsState.handleDragEndField,
+    handleDragStartField = _usePdfMappingsState.handleDragStartField,
+    handleDropField = _usePdfMappingsState.handleDropField,
+    handlePageScaleChange = _usePdfMappingsState.handlePageScaleChange,
+    handleRemoveMapping = _usePdfMappingsState.handleRemoveMapping,
+    isDirty = _usePdfMappingsState.isDirty,
+    mappings = _usePdfMappingsState.mappings,
+    selectedId = _usePdfMappingsState.selectedId,
+    selectedMapping = _usePdfMappingsState.selectedMapping,
+    setIsDirty = _usePdfMappingsState.setIsDirty,
+    setSelectedId = _usePdfMappingsState.setSelectedId;
+  var _usePreviewPagination = usePreviewPagination({
+      controlledMode: controlledMode,
+      onModeChange: onModeChange,
+      onPreviewPageChange: onPreviewPageChange,
+      previewPage: previewPage,
+      setSelectedId: setSelectedId
+    }),
+    currentPreviewPage = _usePreviewPagination.currentPreviewPage,
+    handleModeChange = _usePreviewPagination.handleModeChange,
+    isPreview = _usePreviewPagination.isPreview,
+    mode = _usePreviewPagination.mode,
+    setPreviewPage = _usePreviewPagination.setPreviewPage;
+  var answerFields = react.useMemo(function () {
+    return buildAnswerFields(fields);
+  }, [fields]);
+  var systemFields = react.useMemo(function () {
+    return SYSTEM_FIELDS.map(function (_ref2) {
+      var key = _ref2.key,
+        labelKey = _ref2.labelKey,
+        icon = _ref2.icon;
+      return {
+        source: FIELD_SOURCES.SYSTEM,
+        key: key,
+        label: t(labelKey),
+        typeLabel: t("neetoPdf.pdfDocuments.editor.system"),
+        kind: key,
+        icon: icon
+      };
+    });
+  }, [t]);
+  var responsesBySlug = react.useMemo(function () {
+    return buildResponsesBySlug(previewRecord === null || previewRecord === void 0 ? void 0 : previewRecord.responses);
+  }, [previewRecord]);
+  var resolveValue = function resolveValue(mapping) {
+    return resolvePreviewValue({
+      mapping: mapping,
+      responsesBySlug: responsesBySlug,
+      form: ownerRecord,
+      submission: previewRecord
+    });
+  };
+  var _usePdfDownload = usePdfDownload({
+      mappings: mappings,
+      pdfDocument: pdfDocument,
+      previewRecord: previewRecord,
+      resolveValue: resolveValue,
+      t: t
+    }),
+    downloadPdf = _usePdfDownload.downloadPdf,
+    isDownloading = _usePdfDownload.isDownloading;
+  var handleSave = function handleSave() {
+    return saveDocumentMappings({
+      mappings: mappings,
+      onSuccess: function onSuccess() {
+        return setIsDirty(false);
+      }
+    });
+  };
+  if (isDocumentLoading) return /*#__PURE__*/jsxRuntime.jsx(FullScreenSpinner, {});
+  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "bg-background fixed inset-0 z-50 flex flex-col",
+    children: [/*#__PURE__*/jsxRuntime.jsx(TopBar, {
+      canManage: canManage,
+      documentId: documentId,
+      homeUrl: homeUrl,
+      isDirty: isDirty,
+      isDownloading: isDownloading,
+      isPreview: isPreview,
+      isSaving: isSaving,
+      mode: mode,
+      onBack: onBack,
+      zoom: zoom,
+      canDownload: isPreview && Boolean(previewRecord),
+      name: documentName,
+      onDownload: downloadPdf,
+      onModeChange: handleModeChange,
+      onRename: renamePdfDocument,
+      onSave: handleSave,
+      onZoomIn: function onZoomIn() {
+        return setZoom(function (value) {
+          return clamp(value + ZOOM.STEP, ZOOM.MIN, ZOOM.MAX);
+        });
+      },
+      onZoomOut: function onZoomOut() {
+        return setZoom(function (value) {
+          return clamp(value - ZOOM.STEP, ZOOM.MIN, ZOOM.MAX);
+        });
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex min-h-0 grow overflow-hidden",
+      children: [!isPreview && /*#__PURE__*/jsxRuntime.jsx(FieldsPanel, {
+        answerFields: answerFields,
+        systemFields: systemFields,
+        onDragEndField: handleDragEndField,
+        onDragStartField: handleDragStartField,
+        onPlace: handleAddField
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "relative h-full min-w-0 flex-1 overflow-hidden",
+        children: [isPreview && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "absolute top-4 left-1/2 z-10 -translate-x-1/2",
+          children: /*#__PURE__*/jsxRuntime.jsx(PreviewPager, {
+            isLoading: isPreviewLoading,
+            page: currentPreviewPage,
+            total: previewTotal,
+            onNext: function onNext() {
+              return setPreviewPage(Math.min(currentPreviewPage + 1, previewTotal));
+            },
+            onPrev: function onPrev() {
+              return setPreviewPage(Math.max(currentPreviewPage - 1, 1));
+            }
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Canvas, {
+          mappings: mappings,
+          mode: mode,
+          resolveValue: resolveValue,
+          selectedId: selectedId,
+          templateUrl: templateUrl,
+          zoom: zoom,
+          onChange: handleChangeMapping,
+          onDropField: handleDropField,
+          onPageScaleChange: handlePageScaleChange,
+          onSelect: setSelectedId
+        })]
+      }), !isPreview && /*#__PURE__*/jsxRuntime.jsx(FieldPanel, {
+        mapping: selectedMapping,
+        onChange: handleChangeMapping,
+        onRemove: handleRemoveMapping
+      })]
+    })]
+  }), window.document.body);
+};
+
+module.exports = PdfEditorPage;
+//# sourceMappingURL=PdfEditorPage.js.map