@servicetitan/dte-pdf-editor 1.0.0

package/dist/utils/handle-field-resize.utils.js

@@ -0,0 +1,66 @@
+import { FIELD_CONSTANTS } from '../constants';
+import { getPageDimensions } from './get-page-dimensions.utils';
+import { getPagePosition } from './get-page-position.utils';
+/**
+ * Calculates the initial resize data when user starts resizing
+ * @param e - Mouse event
+ * @param field - The field being resized
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @returns Resize start data or null if calculation fails
+ */
+export const handleFieldResizeStart = (e, field, pdfWrapperRef) => {
+    if (!pdfWrapperRef.current) {
+        return null;
+    }
+    const pagePos = getPagePosition(field.page, pdfWrapperRef);
+    const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
+    // Calculate mouse position relative to the page
+    const startX = e.clientX - wrapperRect.left - pagePos.left;
+    const startY = e.clientY - wrapperRect.top - pagePos.top;
+    return {
+        startX,
+        startY,
+        startWidth: field.width,
+        startHeight: field.height,
+        page: field.page,
+    };
+};
+/**
+ * Handles the resize event for a PDF field from bottom-right corner
+ * Only changes width and height, keeping x and y coordinates unchanged
+ * @param e - Mouse event
+ * @param field - The field being resized
+ * @param resizeStartData - Data from resize start
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @param onFieldResize - Callback to update field dimensions
+ */
+export const handleFieldResize = (e, field, resizeStartData, pdfWrapperRef, onFieldResize) => {
+    if (!pdfWrapperRef.current) {
+        return;
+    }
+    const pageDimensions = getPageDimensions(resizeStartData.page, pdfWrapperRef);
+    const pagePos = getPagePosition(resizeStartData.page, pdfWrapperRef);
+    const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
+    // Calculate mouse position relative to the page
+    const mouseX = e.clientX - wrapperRect.left - pagePos.left;
+    const mouseY = e.clientY - wrapperRect.top - pagePos.top;
+    // Calculate delta from the start position
+    const deltaX = mouseX - resizeStartData.startX;
+    const deltaY = mouseY - resizeStartData.startY;
+    /*
+     * Calculate new width and height based on which handle is being used
+     * x and y always stay the same
+     */
+    let newWidth = resizeStartData.startWidth + deltaX;
+    let newHeight = resizeStartData.startHeight + deltaY;
+    // Clamp to minimum dimensions
+    newWidth = Math.max(FIELD_CONSTANTS.minWidth, newWidth);
+    newHeight = Math.max(FIELD_CONSTANTS.minHeight, newHeight);
+    // Clamp to page boundaries (ensure the field doesn't go outside the page)
+    const maxWidth = pageDimensions.width - field.x;
+    const maxHeight = pageDimensions.height - field.y;
+    newWidth = Math.min(newWidth, maxWidth);
+    newHeight = Math.min(newHeight, maxHeight);
+    onFieldResize(field.id, newWidth, newHeight, resizeStartData.page);
+};
+//# sourceMappingURL=handle-field-resize.utils.js.map

package/dist/utils/handle-field-resize.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle-field-resize.utils.js","sourceRoot":"","sources":["../../src/utils/handle-field-resize.utils.ts"],"names":[],"mappings":"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"}

package/dist/utils/index.d.ts

@@ -0,0 +1,13 @@
+export * from './calculate-drop-coordinates.utils';
+export * from './extract-grouped-fields-from-data-model.utils';
+export * from './get-page-dimensions.utils';
+export * from './get-page-number-from-client-y.utils';
+export * from './get-page-position.utils';
+export * from './handle-field-drag.utils';
+export * from './handle-field-drag-start.utils';
+export * from './handle-field-resize.utils';
+export * from './is-drag-over-canvas.utils';
+export * from './map-colors-to-recipients';
+export * from './pdfjs-init';
+export * from './generate-e-sign-path';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,13 @@
+export * from './calculate-drop-coordinates.utils';
+export * from './extract-grouped-fields-from-data-model.utils';
+export * from './get-page-dimensions.utils';
+export * from './get-page-number-from-client-y.utils';
+export * from './get-page-position.utils';
+export * from './handle-field-drag.utils';
+export * from './handle-field-drag-start.utils';
+export * from './handle-field-resize.utils';
+export * from './is-drag-over-canvas.utils';
+export * from './map-colors-to-recipients';
+export * from './pdfjs-init';
+export * from './generate-e-sign-path';
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC"}

package/dist/utils/is-drag-over-canvas.utils.d.ts

@@ -0,0 +1,9 @@
+import { DragEvent, RefObject } from 'react';
+/**
+ * Checks if a drag event is over any PDF canvas within the wrapper
+ * @param e - The drag event
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @returns true if the drag is over a canvas, false otherwise
+ */
+export declare const isDragOverCanvas: (e: DragEvent<HTMLDivElement>, pdfWrapperRef: RefObject<HTMLDivElement>) => boolean;
+//# sourceMappingURL=is-drag-over-canvas.utils.d.ts.map

package/dist/utils/is-drag-over-canvas.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-drag-over-canvas.utils.d.ts","sourceRoot":"","sources":["../../src/utils/is-drag-over-canvas.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GACzB,GAAG,SAAS,CAAC,cAAc,CAAC,EAC5B,eAAe,SAAS,CAAC,cAAc,CAAC,KACzC,OAuBF,CAAC"}

package/dist/utils/is-drag-over-canvas.utils.js

@@ -0,0 +1,26 @@
+/**
+ * Checks if a drag event is over any PDF canvas within the wrapper
+ * @param e - The drag event
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @returns true if the drag is over a canvas, false otherwise
+ */
+export const isDragOverCanvas = (e, pdfWrapperRef) => {
+    if (!pdfWrapperRef.current) {
+        return false;
+    }
+    const pageElements = pdfWrapperRef.current.querySelectorAll('[data-page-number]');
+    for (const pageElement of pageElements) {
+        const canvas = pageElement.querySelector('canvas');
+        if (canvas) {
+            const canvasRect = canvas.getBoundingClientRect();
+            if (e.clientX >= canvasRect.left &&
+                e.clientX <= canvasRect.right &&
+                e.clientY >= canvasRect.top &&
+                e.clientY <= canvasRect.bottom) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+//# sourceMappingURL=is-drag-over-canvas.utils.js.map

package/dist/utils/is-drag-over-canvas.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-drag-over-canvas.utils.js","sourceRoot":"","sources":["../../src/utils/is-drag-over-canvas.utils.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC5B,CAA4B,EAC5B,aAAwC,EACjC,EAAE;IACT,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IAElF,KAAK,MAAM,WAAW,IAAI,YAAY,EAAE,CAAC;QACrC,MAAM,MAAM,GAAG,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACnD,IAAI,MAAM,EAAE,CAAC;YACT,MAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;YAClD,IACI,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI;gBAC5B,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC,KAAK;gBAC7B,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC,GAAG;gBAC3B,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC,MAAM,EAChC,CAAC;gBACC,OAAO,IAAI,CAAC;YAChB,CAAC;QACL,CAAC;IACL,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC"}

package/dist/utils/map-colors-to-recipients.d.ts

@@ -0,0 +1,3 @@
+import { RecipientInfo } from '../components/pdf-editor';
+export declare const mapColorsToRecipients: (recipients?: RecipientInfo[]) => Record<string, string>;
+//# sourceMappingURL=map-colors-to-recipients.d.ts.map

package/dist/utils/map-colors-to-recipients.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-colors-to-recipients.d.ts","sourceRoot":"","sources":["../../src/utils/map-colors-to-recipients.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AA4BzD,eAAO,MAAM,qBAAqB,GAAI,aAAa,aAAa,EAAE,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAQzF,CAAC"}

package/dist/utils/map-colors-to-recipients.js

@@ -0,0 +1,35 @@
+const colors = [
+    '#1F77B41f',
+    '#FF7F0E1f',
+    '#2CA02C1f',
+    '#9467BD1f',
+    '#8C564B1f',
+    '#E377C21f',
+    '#7F7F7F1f',
+    '#BCBD221f',
+    '#17BECF1f',
+    '#D627281f',
+    '#98DF8A1f',
+    '#FFBB781f',
+    '#C5B0D51f',
+    '#C49C941f',
+    '#F7B6D21f',
+    '#C7C7C71f',
+    '#DBDB8D1f',
+    '#9EDAE51f',
+    '#E5E5E51f',
+    '#393B791f',
+    '#5254A31f',
+    '#6B6EBD1f',
+    '#9C9EDA1f',
+];
+export const mapColorsToRecipients = (recipients) => {
+    if (!recipients) {
+        return {};
+    }
+    return recipients.reduce((acc, curr, i) => {
+        acc[curr.name] = colors[i];
+        return acc;
+    }, {});
+};
+//# sourceMappingURL=map-colors-to-recipients.js.map

package/dist/utils/map-colors-to-recipients.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-colors-to-recipients.js","sourceRoot":"","sources":["../../src/utils/map-colors-to-recipients.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAG;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,UAA4B,EAA0B,EAAE;IAC1F,IAAI,CAAC,UAAU,EAAE,CAAC;QACd,OAAO,EAAE,CAAC;IACd,CAAC;IACD,OAAO,UAAU,CAAC,MAAM,CAAyB,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;QAC9D,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QAC3B,OAAO,GAAG,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC,CAAC"}

package/dist/utils/pdfjs-init.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Initializes PDF.js worker if not already initialized
+ * Safe to call multiple times - will only initialize once
+ */
+export declare const initializePdfJsWorker: () => void;
+//# sourceMappingURL=pdfjs-init.d.ts.map

package/dist/utils/pdfjs-init.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdfjs-init.d.ts","sourceRoot":"","sources":["../../src/utils/pdfjs-init.ts"],"names":[],"mappings":"AASA;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAAO,IAWxC,CAAC"}

package/dist/utils/pdfjs-init.js

@@ -0,0 +1,25 @@
+/*
+ * Initialize PDF.js worker - centralized configuration
+ * This ensures the worker is configured once and can be imported by any component
+ */
+import * as pdfjsLib from 'pdfjs-dist';
+import workerSrc from 'pdfjs-dist/build/pdf.worker.min.js?url';
+let isInitialized = false;
+/**
+ * Initializes PDF.js worker if not already initialized
+ * Safe to call multiple times - will only initialize once
+ */
+export const initializePdfJsWorker = () => {
+    if (isInitialized || typeof window === 'undefined') {
+        return;
+    }
+    try {
+        pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
+        isInitialized = true;
+    }
+    catch (error) {
+        throw new Error('Failed to initialize PDF.js worker:' + error.message);
+    }
+};
+initializePdfJsWorker();
+//# sourceMappingURL=pdfjs-init.js.map

package/dist/utils/pdfjs-init.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdfjs-init.js","sourceRoot":"","sources":["../../src/utils/pdfjs-init.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,SAAS,MAAM,wCAAwC,CAAC;AAE/D,IAAI,aAAa,GAAG,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAS,EAAE;IAC5C,IAAI,aAAa,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QACjD,OAAO;IACX,CAAC;IAED,IAAI,CAAC;QACD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,GAAG,SAAS,CAAC;QACnD,aAAa,GAAG,IAAI,CAAC;IACzB,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,qCAAqC,GAAI,KAAe,CAAC,OAAO,CAAC,CAAC;IACtF,CAAC;AACL,CAAC,CAAC;AAEF,qBAAqB,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@servicetitan/dte-pdf-editor",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "cli": {
+    "webpack": false
+  },
+  "dependencies": {
+    "pdfjs-dist": "^3.11.0",
+    "react-pdf": "^7.5.0",
+    "uuid": "^9.0.0"
+  },
+  "peerDependencies": {
+    "@servicetitan/anvil2": "^1.46.9",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1"
+  }
+}

package/src/components/data-model-field-type-list.tsx

@@ -0,0 +1,58 @@
+import { Flex, Text } from '@servicetitan/anvil2';
+import { FC, Fragment, useMemo } from 'react';
+import { DataModelFieldGroup, FieldTypeOption } from '../interface/pdf-editor';
+import { FieldType } from './field-type';
+
+interface DataModelFieldTypeListProps {
+    searchText?: string;
+    dataModelGroups?: DataModelFieldGroup[];
+    onDragStart(fieldOption: FieldTypeOption): void;
+    onDragEnd(): void;
+}
+
+export const DataModelFieldTypeList: FC<DataModelFieldTypeListProps> = ({
+    dataModelGroups = [],
+    onDragEnd,
+    onDragStart,
+    searchText,
+}) => {
+    const searchedFieldGroups = useMemo(() => {
+        if (!searchText) {
+            return dataModelGroups;
+        }
+
+        const searchLower = searchText.toLowerCase();
+        return dataModelGroups
+            .map(group => ({
+                ...group,
+                fieldTypes: group.fields.filter(({ label }) =>
+                    label.toLowerCase().includes(searchLower),
+                ),
+            }))
+            .filter(group => group.fieldTypes.length > 0);
+    }, [dataModelGroups, searchText]);
+    return (
+        <Fragment>
+            {searchedFieldGroups.map(group => (
+                <div key={group.groupName} className="dte-field-type-group m-t-1">
+                    <Flex alignItems="center" gap={1} className="dte-field-type-group-header">
+                        <Text variant="headline" el="h6" size="small">
+                            {group.groupName}
+                        </Text>
+                    </Flex>
+                    {group.fields.map(fieldOption => {
+                        const key = `${fieldOption.type}-${group.groupName}-${fieldOption.path}`;
+                        return (
+                            <FieldType
+                                key={key}
+                                label={fieldOption.label}
+                                onDragEnd={onDragEnd}
+                                onDragStart={() => onDragStart(fieldOption)}
+                            />
+                        );
+                    })}
+                </div>
+            ))}
+        </Fragment>
+    );
+};

package/src/components/e-sign-field-type-list.tsx

@@ -0,0 +1,27 @@
+import { FC, Fragment } from 'react';
+import { E_SIGN_FIELD_TYPES } from '../constants';
+import { FieldTypeOption } from '../interface/pdf-editor';
+import { FieldType } from './field-type';
+
+interface ESignFieldTypeListProps {
+    onDragStart(fieldOption: FieldTypeOption): void;
+    onDragEnd(): void;
+}
+
+export const ESignFieldTypeList: FC<ESignFieldTypeListProps> = ({ onDragEnd, onDragStart }) => {
+    return (
+        <Fragment>
+            {E_SIGN_FIELD_TYPES.map(fieldOption => {
+                const key = `${fieldOption.type}-${fieldOption.path ?? fieldOption.label}`;
+                return (
+                    <FieldType
+                        key={key}
+                        label={fieldOption.label}
+                        onDragEnd={onDragEnd}
+                        onDragStart={() => onDragStart(fieldOption)}
+                    />
+                );
+            })}
+        </Fragment>
+    );
+};

package/src/components/field-config-panel-overlay.tsx

@@ -0,0 +1,51 @@
+import { Button, Flex, Text } from '@servicetitan/anvil2';
+import IconClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
+import { FC } from 'react';
+import { PdfField } from '../interface/pdf-editor';
+import { FieldConfigPanel } from './field-config-panel';
+import { RecipientInfo } from './pdf-editor';
+
+interface FieldConfigPanelOverlayProps {
+    selectedField: PdfField;
+    recipients?: RecipientInfo[];
+    onFieldConfigChange(updates: Partial<PdfField>): void;
+    onDeleteField(): void;
+    onDeselectField?(): void;
+}
+
+export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
+    onDeleteField,
+    onDeselectField,
+    onFieldConfigChange,
+    recipients,
+    selectedField,
+}) => {
+    return (
+        <Flex className="dte-field-config-panel-overlay" onClick={e => e.stopPropagation()}>
+            <Flex
+                className="dte-field-config-panel-header"
+                alignItems="center"
+                justifyContent="space-between"
+            >
+                <Text variant="headline" el="h6" size="small">
+                    Field Configuration
+                </Text>
+                <Button
+                    appearance="ghost"
+                    size="small"
+                    onClick={onDeselectField}
+                    aria-label="Close"
+                    icon={IconClose}
+                />
+            </Flex>
+            <div className="dte-field-config-panel-content">
+                <FieldConfigPanel
+                    field={selectedField}
+                    recipients={recipients}
+                    onFieldConfigChange={onFieldConfigChange}
+                    onDeleteField={onDeleteField}
+                />
+            </div>
+        </Flex>
+    );
+};

package/src/components/field-config-panel.tsx

@@ -0,0 +1,142 @@
+import { Button, Checkbox, Combobox, Flex, TextField } from '@servicetitan/anvil2';
+import { FC, useMemo } from 'react';
+import { E_SIGN_FIELD_TYPE_OPTIONS } from '../constants';
+import { ESignFieldType, FieldTypeEnum, PdfField } from '../interface/pdf-editor';
+import { generateESignPath } from '../utils';
+import { RecipientInfo } from './pdf-editor';
+
+interface FieldConfigPanelProps {
+    field: PdfField;
+    recipients?: RecipientInfo[];
+    onDeleteField(): void;
+    onFieldConfigChange(updates: Partial<PdfField>): void;
+}
+
+export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
+    field,
+    onDeleteField,
+    onFieldConfigChange,
+    recipients = [],
+}) => {
+    const recipientOptions = useMemo(
+        () =>
+            recipients.map(recipient => ({
+                id: recipient.name,
+                name: recipient.displayName,
+            })),
+        [recipients],
+    );
+
+    const selectedRecipient = useMemo(
+        () => recipientOptions.find(option => option.id === field.recipient) ?? null,
+        [recipientOptions, field.recipient],
+    );
+
+    const handleRecipientChange = (item: { id: string; name: string } | null) => {
+        if (item) {
+            onFieldConfigChange({
+                recipient: item.id,
+                path:
+                    field.type === FieldTypeEnum.eSign
+                        ? generateESignPath(item.id, field.subType as ESignFieldType)
+                        : field.path,
+            });
+        }
+    };
+
+    const selectedESignFieldType = useMemo(
+        () => E_SIGN_FIELD_TYPE_OPTIONS.find(option => option.id === field.subType) ?? null,
+        [field],
+    );
+
+    const handleESignFieldTypeChange = (item: { id: ESignFieldType; name: string } | null) => {
+        if (item) {
+            onFieldConfigChange({
+                subType: item.id,
+                path: generateESignPath(field.recipient!, item.id),
+            });
+        }
+    };
+
+    return (
+        <Flex direction="column" gap="4">
+            {(field.type === FieldTypeEnum.fillable || field.type === FieldTypeEnum.eSign) && (
+                <TextField
+                    label="Label"
+                    value={field.label}
+                    onChange={e =>
+                        onFieldConfigChange({
+                            label: e.target.value,
+                        })
+                    }
+                />
+            )}
+
+            {(field.type === FieldTypeEnum.fillable || field.type === FieldTypeEnum.eSign) && (
+                <Combobox
+                    items={recipientOptions}
+                    itemToString={item => item?.name ?? ''}
+                    onChange={handleRecipientChange}
+                    selectedItem={selectedRecipient}
+                >
+                    <Combobox.SearchField
+                        placeholder=""
+                        label="Recipient"
+                        labelProps={{ required: true }}
+                    />
+                    <Combobox.Content>
+                        {({ items }) => (
+                            <Combobox.List>
+                                {items.map((item, i) => (
+                                    <Combobox.Item key={item.id} item={item} index={i}>
+                                        {item.name}
+                                    </Combobox.Item>
+                                ))}
+                            </Combobox.List>
+                        )}
+                    </Combobox.Content>
+                </Combobox>
+            )}
+
+            {field.type === FieldTypeEnum.eSign && (
+                <Combobox
+                    items={E_SIGN_FIELD_TYPE_OPTIONS}
+                    itemToString={item => item?.name ?? ''}
+                    onChange={handleESignFieldTypeChange}
+                    selectedItem={selectedESignFieldType}
+                >
+                    <Combobox.SearchField label="Field Type" labelProps={{ required: true }} />
+                    <Combobox.Content>
+                        {({ items }) => (
+                            <Combobox.List>
+                                {items.map((item, i) => (
+                                    <Combobox.Item key={item.id} item={item} index={i}>
+                                        {item.name}
+                                    </Combobox.Item>
+                                ))}
+                            </Combobox.List>
+                        )}
+                    </Combobox.Content>
+                </Combobox>
+            )}
+
+            {field.type === FieldTypeEnum.dataModel && field.path && (
+                <TextField label="Data Path" value={field.path} disabled />
+            )}
+            {field.type === FieldTypeEnum.fillable && (
+                <Checkbox
+                    label="Required"
+                    checked={field.required}
+                    onChange={() =>
+                        onFieldConfigChange({
+                            required: !field.required,
+                        })
+                    }
+                />
+            )}
+            <Button className="full-width" onClick={onDeleteField}>
+                Delete Field
+            </Button>
+        </Flex>
+    );
+};

package/src/components/field-sidebar.tsx

@@ -0,0 +1,93 @@
+import { Flex, Icon, SearchField, Text } from '@servicetitan/anvil2';
+import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
+import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
+import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
+
+import { FC, useState } from 'react';
+import { DataModelFieldGroup, FieldTypeEnum, FieldTypeOption } from '../interface/pdf-editor';
+import { DataModelFieldTypeList } from './data-model-field-type-list';
+import { ESignFieldTypeList } from './e-sign-field-type-list';
+import { FillableFieldTypeList } from './fillable-field-type-list';
+
+interface FieldSidebarProps {
+    dataModelGroups?: DataModelFieldGroup[];
+    onDragEnd(): void;
+    onDragStart(fieldOption: FieldTypeOption): void;
+}
+
+const menuGroups: { svgIcon: any; label: string; key: FieldTypeEnum }[] = [
+    { svgIcon: IconEstimate, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
+    { svgIcon: IconBorderColor, label: 'E-Sign', key: FieldTypeEnum.eSign },
+    {
+        svgIcon: IconPhotoSizeSelectSmall,
+        label: 'Fillable Fields',
+        key: FieldTypeEnum.fillable,
+    },
+];
+
+export const FieldSidebar: FC<FieldSidebarProps> = ({
+    dataModelGroups = [],
+    onDragEnd,
+    onDragStart,
+}) => {
+    const [activeFieldType, setActiveFieldType] = useState<FieldTypeEnum>(FieldTypeEnum.dataModel);
+    const [searchText, setSearchText] = useState('');
+
+    return (
+        <Flex className="dte-field-sidebar-container skeleton-item">
+            <Flex className="dte-field-sidebar-menu" shrink={0} direction="column" gap="3">
+                {menuGroups.map(({ key, label, svgIcon }) => (
+                    <Flex
+                        key={key}
+                        alignItems="center"
+                        justifyContent="center"
+                        direction="column"
+                        className="dte-field-sidebar-menu-item cursor-pointer"
+                        onClick={() => setActiveFieldType(key)}
+                    >
+                        <Icon svg={svgIcon} size="large" />
+                        <Text
+                            variant="body"
+                            size="small"
+                            className="dte-field-sidebar-menu-item-text"
+                        >
+                            {label}
+                        </Text>
+                    </Flex>
+                ))}
+            </Flex>
+            <Flex className="dte-field-sidebar-content skeleton-item" shrink={0}>
+                <Text variant="headline" el="h1" size="medium">
+                    Merge Tags
+                </Text>
+
+                {activeFieldType !== FieldTypeEnum.eSign && (
+                    <SearchField
+                        placeholder="Search"
+                        size="small"
+                        className="dte-field-sidebar-search"
+                        onChange={e => setSearchText(e.target.value ?? '')}
+                    />
+                )}
+                {activeFieldType === FieldTypeEnum.fillable && (
+                    <FillableFieldTypeList
+                        searchText={searchText}
+                        onDragStart={onDragStart}
+                        onDragEnd={onDragEnd}
+                    />
+                )}
+                {activeFieldType === FieldTypeEnum.eSign && (
+                    <ESignFieldTypeList onDragEnd={onDragEnd} onDragStart={onDragStart} />
+                )}
+                {activeFieldType === FieldTypeEnum.dataModel && (
+                    <DataModelFieldTypeList
+                        searchText={searchText}
+                        dataModelGroups={dataModelGroups}
+                        onDragStart={onDragStart}
+                        onDragEnd={onDragEnd}
+                    />
+                )}
+            </Flex>
+        </Flex>
+    );
+};