@servicetitan/dte-pdf-editor 1.4.0 → 1.6.0

package/dist/utils/pdf/pdf-rendering.utils.js

@@ -0,0 +1,75 @@
+/**
+ * Gets the dimensions of a PDF page (width and height)
+ * @param pageNumber - The page number to get dimensions for
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @returns Dimensions object with width and height, or { width: 0, height: 0 } if not found
+ */
+export const getPageDimensions = (pageNumber, pdfWrapperRef) => {
+    if (!pdfWrapperRef.current) {
+        return { width: 0, height: 0 };
+    }
+    const pageElement = pdfWrapperRef.current.querySelector(`[data-page-number="${pageNumber}"]`);
+    if (!pageElement) {
+        return { width: 0, height: 0 };
+    }
+    // Get the canvas element inside the page to get actual PDF dimensions
+    const canvas = pageElement.querySelector('canvas');
+    if (canvas) {
+        const canvasRect = canvas.getBoundingClientRect();
+        return {
+            width: canvasRect.width,
+            height: canvasRect.height,
+        };
+    }
+    // Fallback to page element dimensions
+    const pageRect = pageElement.getBoundingClientRect();
+    return {
+        width: pageRect.width,
+        height: pageRect.height,
+    };
+};
+/**
+ * Determines which page number a client Y coordinate falls within
+ * @param clientY - The client Y coordinate to check
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @returns The page number (defaults to 1 if not found or wrapper is null)
+ */
+export const getPageNumberFromClientY = (clientY, pdfWrapperRef) => {
+    if (!pdfWrapperRef.current) {
+        return 1;
+    }
+    const pageElements = pdfWrapperRef.current.querySelectorAll('[data-page-number]');
+    let targetPage = 1;
+    pageElements.forEach(pageElement => {
+        const rect = pageElement.getBoundingClientRect();
+        if (clientY >= rect.top && clientY <= rect.bottom) {
+            const pageNumber = pageElement.getAttribute('data-page-number');
+            if (pageNumber) {
+                targetPage = parseInt(pageNumber, 10);
+            }
+        }
+    });
+    return targetPage;
+};
+/**
+ * Gets the position of a PDF page relative to the wrapper element
+ * @param pageNumber - The page number to get the position for
+ * @param pdfWrapperRef - Reference to the PDF wrapper element
+ * @returns Position object with top and left coordinates, or { top: 0, left: 0 } if not found
+ */
+export const getPagePosition = (pageNumber, pdfWrapperRef) => {
+    if (!pdfWrapperRef.current) {
+        return { top: 0, left: 0 };
+    }
+    const pageElement = pdfWrapperRef.current.querySelector(`[data-page-number="${pageNumber}"]`);
+    if (!pageElement) {
+        return { top: 0, left: 0 };
+    }
+    const wrapperRect = pdfWrapperRef.current.getBoundingClientRect();
+    const pageRect = pageElement.getBoundingClientRect();
+    return {
+        top: pageRect.top - wrapperRect.top,
+        left: pageRect.left - wrapperRect.left,
+    };
+};
+//# sourceMappingURL=pdf-rendering.utils.js.map

package/dist/utils/pdf/pdf-rendering.utils.js.map

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

package/dist/utils/{pdfjs-init.d.ts → pdf/pdfjs-init.d.ts}

@@ -1,6 +1,7 @@
 /**
  * Initializes PDF.js worker if not already initialized
  * Safe to call multiple times - will only initialize once
+ * Should be called in a useEffect hook within React components
  */
 export declare const initializePdfJsWorker: () => void;
 //# sourceMappingURL=pdfjs-init.d.ts.map

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

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

package/dist/utils/{pdfjs-init.js → pdf/pdfjs-init.js}

@@ -8,6 +8,7 @@ let isInitialized = false;
 /**
  * Initializes PDF.js worker if not already initialized
  * Safe to call multiple times - will only initialize once
+ * Should be called in a useEffect hook within React components
  */
 export const initializePdfJsWorker = () => {
     if (isInitialized || typeof window === 'undefined') {
@@ -21,5 +22,4 @@ export const initializePdfJsWorker = () => {
         throw new Error('Failed to initialize PDF.js worker:' + error.message);
     }
 };
-initializePdfJsWorker();
 //# sourceMappingURL=pdfjs-init.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pdfjs-init.js","sourceRoot":"","sources":["../../../src/utils/pdf/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;;;;GAIG;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"}

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

@@ -0,0 +1,2 @@
+export * from './map-colors';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/recipients/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/utils/recipients/index.js

@@ -0,0 +1,2 @@
+export * from './map-colors';
+//# sourceMappingURL=index.js.map

package/dist/utils/recipients/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/recipients/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

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

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

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

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

package/dist/utils/{map-colors-to-recipients.js → recipients/map-colors.js}

@@ -32,4 +32,4 @@ export const mapColorsToRecipients = (recipients) => {
         return acc;
     }, {});
 };
-//# sourceMappingURL=map-colors-to-recipients.js.map
+//# sourceMappingURL=map-colors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"map-colors.js","sourceRoot":"","sources":["../../../src/utils/recipients/map-colors.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

package/src/components/{field-config-panel-overlay.tsx → field-config-panel/field-config-panel-overlay.tsx}

@@ -1,9 +1,8 @@
 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 { PdfField, RecipientInfo } from '../../interface/types';
 import { FieldConfigPanel } from './field-config-panel';
-import { RecipientInfo } from './pdf-editor';
 
 interface FieldConfigPanelOverlayProps {
     selectedField: PdfField;

package/src/components/{field-config-panel.tsx → field-config-panel/field-config-panel.tsx}

@@ -1,9 +1,8 @@
-import { Button, Checkbox, Combobox, Flex, TextField } from '@servicetitan/anvil2';
+import { Button, Checkbox, Combobox, Flex, Textarea, 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, generateFillablePath, parseFillablePathName } from '../utils';
-import { RecipientInfo } from './pdf-editor';
+import { E_SIGN_FIELD_TYPE_OPTIONS } from '../../constants';
+import { ESignFieldType, FieldTypeEnum, PdfField, RecipientInfo } from '../../interface/types';
+import { generateESignPath } from '../../utils';
 
 interface FieldConfigPanelProps {
     field: PdfField;
@@ -79,11 +78,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                     onChange={handleRecipientChange}
                     selectedItem={selectedRecipient}
                 >
-                    <Combobox.SearchField
-                        placeholder=""
-                        label="Recipient"
-                        labelProps={{ required: true }}
-                    />
+                    <Combobox.SearchField placeholder="" label="Recipient" />
                     <Combobox.Content>
                         {({ items }) => (
                             <Combobox.List>
@@ -105,7 +100,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                     onChange={handleESignFieldTypeChange}
                     selectedItem={selectedESignFieldType}
                 >
-                    <Combobox.SearchField label="Field Type" labelProps={{ required: true }} />
+                    <Combobox.SearchField label="Field Type" />
                     <Combobox.Content>
                         {({ items }) => (
                             <Combobox.List>
@@ -120,20 +115,8 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 </Combobox>
             )}
 
-            {field.type === FieldTypeEnum.dataModel && field.path && (
-                <TextField label="Data Path" value={field.path} disabled />
-            )}
-            {field.type === FieldTypeEnum.fillable && (
-                <TextField
-                    label="Input Name"
-                    value={parseFillablePathName(field.path)}
-                    onChange={e =>
-                        onFieldConfigChange({
-                            path: generateFillablePath(field.recipient!, e.target.value),
-                        })
-                    }
-                />
-            )}
+            <TextField label="Data Path" value={field.path} disabled />
+
             {field.type === FieldTypeEnum.fillable && (
                 <Checkbox
                     label="Required"
@@ -146,6 +129,16 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 />
             )}
 
+            <Textarea
+                label="Description"
+                value={field.description}
+                onChange={e =>
+                    onFieldConfigChange({
+                        description: e?.target.value ?? '',
+                    })
+                }
+            />
+
             <Button className="full-width" onClick={onDeleteField}>
                 Delete Field
             </Button>

package/src/components/{data-model-field-type-list.tsx → field-sidebar/data-model-field-type-list.tsx}

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

package/src/components/{e-sign-field-type-list.tsx → field-sidebar/e-sign-field-type-list.tsx}

@@ -1,6 +1,6 @@
 import { FC, Fragment } from 'react';
-import { E_SIGN_FIELD_TYPES } from '../constants';
-import { FieldTypeOption } from '../interface/pdf-editor';
+import { E_SIGN_FIELD_TYPES } from '../../constants';
+import { FieldTypeOption } from '../../interface/types';
 import { FieldType } from './field-type';
 
 interface ESignFieldTypeListProps {

package/src/components/field-sidebar/field-sidebar.tsx

@@ -0,0 +1,119 @@
+import { Button, Flex, Icon, SearchField, Text } from '@servicetitan/anvil2';
+import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
+import IconMenuOpen from '@servicetitan/anvil2/assets/icons/material/round/menu_open.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 { useToggle } from '../../hooks';
+import { DataModelFieldGroup, FieldTypeEnum, FieldTypeOption } from '../../interface/types';
+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('');
+    const { isOpen, open, toggle } = useToggle(true);
+
+    const handleActiveFieldTypeChange = (activeFieldType: FieldTypeEnum) => {
+        setActiveFieldType(activeFieldType);
+        open();
+    };
+
+    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 ${key === activeFieldType ? '--active' : ''}`}
+                        onClick={() => handleActiveFieldTypeChange(key)}
+                    >
+                        <Icon
+                            svg={svgIcon}
+                            size="large"
+                            className="dte-field-sidebar-menu-item-icon"
+                        />
+                        <Text
+                            variant="body"
+                            size="small"
+                            className="dte-field-sidebar-menu-item-text"
+                        >
+                            {label}
+                        </Text>
+                    </Flex>
+                ))}
+            </Flex>
+
+            <Flex
+                className={`dte-field-sidebar-content skeleton-item ${isOpen ? '--open' : ''}`}
+                shrink={0}
+            >
+                <Flex className="dte-field-sidebar-content-inner">
+                    <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>
+            <Button
+                size="small"
+                appearance="ghost"
+                onClick={toggle}
+                className="dte-field-sidebar-toggler"
+            >
+                <Icon svg={IconMenuOpen} size="medium" />
+            </Button>
+        </Flex>
+    );
+};

package/src/components/{field-type.tsx → field-sidebar/field-type.tsx}

@@ -19,7 +19,7 @@ export const FieldType: FC<FieldTypeProps> = ({ label, onDragEnd, onDragStart })
                 e.dataTransfer.setData('text/plain', 'new-field-type');
             }}
             onDragEnd={onDragEnd}
-            className="dte-field-type-item border m-t-1"
+            className="dte-field-type-item"
         >
             <Icon svg={IconDragIndicator} size="medium" />
             <Text size="small">{label}</Text>

package/src/components/{fillable-field-type-list.tsx → field-sidebar/fillable-field-type-list.tsx}

@@ -1,6 +1,6 @@
 import { FC, Fragment, useMemo } from 'react';
-import { FILLABLE_FIELD_TYPES } from '../constants';
-import { FieldTypeOption } from '../interface/pdf-editor';
+import { FILLABLE_FIELD_TYPES } from '../../constants';
+import { FieldTypeOption } from '../../interface/types';
 import { FieldType } from './field-type';
 
 interface FillableFieldTypeListProps {

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './pdf-editor/pdf-editor';
+export * from './pdf-view/pdf-view';

package/src/components/{pdf-canvas.tsx → pdf-canvas/pdf-canvas.tsx}

@@ -1,9 +1,9 @@
 import { Flex } from '@servicetitan/anvil2';
 import { DragEvent, FC, MouseEvent, ReactNode, RefObject, useState } from 'react';
-import { BASE_PAGE_WIDTH } from '../constants';
-import { PdfField } from '../interface/pdf-editor';
+import { BASE_PAGE_WIDTH } from '../../constants';
+import { PdfField } from '../../interface/types';
+import { PdfFieldsOverlay } from '../pdf-fields-overlay/pdf-fields-overlay';
 import { PdfDocumentRenderer } from './pdf-document-renderer';
-import { PdfFieldOverlay } from './pdf-field-overlay';
 
 interface PdfCanvasProps {
     pdfUrl: string;
@@ -11,10 +11,11 @@ interface PdfCanvasProps {
     loadingPlaceholder?: ReactNode;
     fields: PdfField[];
     loading: boolean;
-    selectedField: string | null;
+    selectedField: PdfField | null;
     pdfContainerRef: RefObject<HTMLDivElement>;
     pdfWrapperRef: RefObject<HTMLDivElement>;
     recipientsColors: Record<string, string>;
+    handleAddNewField(field: PdfField): void;
     onDragOver(e: DragEvent<HTMLDivElement>): void;
     onDrop(e: DragEvent<HTMLDivElement>, pageNumber: number): void;
     onFieldClick(fieldId: string, e: MouseEvent): void;
@@ -26,6 +27,7 @@ interface PdfCanvasProps {
 export const PdfCanvas: FC<PdfCanvasProps> = ({
     errorPlaceholder,
     fields,
+    handleAddNewField,
     loading,
     loadingPlaceholder,
     onDeselectField,
@@ -53,7 +55,7 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
             className="dte-pdf-canvas-container"
             onClick={onDeselectField}
         >
-            <div ref={pdfWrapperRef} className="dte-pdf-wrapper">
+            <div ref={pdfWrapperRef} className="dte-pdf-wrapper" style={{ width: BASE_PAGE_WIDTH }}>
                 <PdfDocumentRenderer
                     pdfUrl={pdfUrl}
                     onDrop={onDrop}
@@ -65,14 +67,15 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
                     onDocumentLoadSuccess={onDocumentLoadSuccess}
                 />
                 {isPdfLoaded && fields && (
-                    <PdfFieldOverlay
+                    <PdfFieldsOverlay
                         fields={fields}
+                        handleAddNewField={handleAddNewField}
                         pdfWrapperRef={pdfWrapperRef}
                         recipientsColors={recipientsColors}
                         selectedField={selectedField ?? null}
-                        onFieldClick={onFieldClick ?? (() => {})}
-                        onFieldMove={onFieldMove ?? (() => {})}
-                        onFieldResize={onFieldResize ?? (() => {})}
+                        onFieldClick={onFieldClick}
+                        onFieldMove={onFieldMove}
+                        onFieldResize={onFieldResize}
                     />
                 )}
             </div>

package/src/components/{pdf-document-renderer.tsx → pdf-canvas/pdf-document-renderer.tsx}

@@ -2,10 +2,7 @@ import { DragEvent, FC, ReactNode } from 'react';
 import { Document, Page } from 'react-pdf';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
-import { usePdfDocumentRenderer } from '../hooks';
-import { initializePdfJsWorker } from '../utils';
-
-initializePdfJsWorker();
+import { useInitializePdfJsWorker, usePdfDocumentRenderer } from '../../hooks';
 
 interface PdfDocumentRendererProps {
     pdfUrl: string;
@@ -28,6 +25,8 @@ export const PdfDocumentRenderer: FC<PdfDocumentRendererProps> = ({
     pageWidth,
     pdfUrl,
 }) => {
+    useInitializePdfJsWorker();
+
     const { handleDocumentLoadSuccess: handleLoadSuccess, pages } = usePdfDocumentRenderer();
 
     const handleDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {

package/src/components/pdf-editor/pdf-editor.tsx

@@ -0,0 +1,109 @@
+import { Flex } from '@servicetitan/anvil2';
+import { FC, ReactNode, useCallback, useMemo, useRef } from 'react';
+import { useInitializePdfJsWorker, usePdfFieldDnD, usePdfFieldSelection } from '../../hooks';
+import { PdfField, RecipientInfo, SchemaObject } from '../../interface/types';
+import { extractGroupedFieldsFromDataModel, mapColorsToRecipients } from '../../utils';
+import { FieldConfigPanelOverlay } from '../field-config-panel/field-config-panel-overlay';
+import { FieldSidebar } from '../field-sidebar/field-sidebar';
+import { PdfCanvas } from '../pdf-canvas/pdf-canvas';
+
+import '../../styles/index.css';
+
+interface PdfEditorProps {
+    pdfUrl: string;
+    loading?: boolean;
+    loadingPlaceholder?: ReactNode;
+    errorPlaceholder?: ReactNode;
+    dataModel?: SchemaObject;
+    recipients?: RecipientInfo[];
+    fields?: PdfField[];
+    onFieldsChange(fields: PdfField[]): void;
+}
+
+export const PdfEditor: FC<PdfEditorProps> = ({
+    dataModel,
+    errorPlaceholder,
+    fields = [],
+    loading = false,
+    loadingPlaceholder,
+    onFieldsChange,
+    pdfUrl,
+    recipients = [],
+}) => {
+    const pdfContainerRef = useRef<HTMLDivElement>(null);
+    const pdfWrapperRef = useRef<HTMLDivElement>(null);
+    useInitializePdfJsWorker();
+    const {
+        deleteSelectedField,
+        deselectField,
+        moveField,
+        resizeField,
+        selectField,
+        selectedField,
+        setSelectedFieldId,
+        updateField,
+    } = usePdfFieldSelection(fields, onFieldsChange);
+
+    const pdfFieldDnd = usePdfFieldDnD({
+        fields,
+        recipients,
+        onFieldsChange,
+        pdfWrapperRef,
+        onSelectField: setSelectedFieldId,
+    });
+
+    const dataModelGroups = useMemo(
+        () => (dataModel ? extractGroupedFieldsFromDataModel(dataModel) : []),
+        [dataModel],
+    );
+
+    const handleAddNewField = useCallback(
+        (field: PdfField) => onFieldsChange([...fields, field]),
+        [fields, onFieldsChange],
+    );
+
+    const recipientsColors = mapColorsToRecipients(recipients);
+
+    return (
+        <Flex flex={1} className={`dte-pdf-editor ${loading ? 'skeleton' : ''}`}>
+            {selectedField && (
+                <FieldConfigPanelOverlay
+                    selectedField={selectedField}
+                    onFieldConfigChange={updateField}
+                    onDeleteField={deleteSelectedField}
+                    recipients={recipients}
+                    onDeselectField={deselectField}
+                />
+            )}
+
+            <Flex className="dte-pdf-editor-sidebar-container">
+                <FieldSidebar
+                    dataModelGroups={dataModelGroups}
+                    onDragStart={pdfFieldDnd.handleDragStart}
+                    onDragEnd={pdfFieldDnd.handleDragEnd}
+                />
+            </Flex>
+
+            <Flex gap={12} flex={1} className="dte-pdf-editor-content-container skeleton-item">
+                <PdfCanvas
+                    pdfUrl={pdfUrl}
+                    fields={fields}
+                    loading={loading}
+                    recipientsColors={recipientsColors}
+                    selectedField={selectedField}
+                    pdfContainerRef={pdfContainerRef}
+                    pdfWrapperRef={pdfWrapperRef}
+                    errorPlaceholder={errorPlaceholder}
+                    loadingPlaceholder={loadingPlaceholder}
+                    handleAddNewField={handleAddNewField}
+                    onDrop={pdfFieldDnd.handleDrop}
+                    onDragOver={pdfFieldDnd.handleDragOver}
+                    onFieldClick={selectField}
+                    onFieldMove={moveField}
+                    onFieldResize={resizeField}
+                    onDeselectField={deselectField}
+                />
+            </Flex>
+        </Flex>
+    );
+};

package/src/components/pdf-fields-overlay/add-handle.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+interface AddHandleProps {
+    onClick(): void;
+}
+export const AddHandle: FC<AddHandleProps> = ({ onClick }) => {
+    return (
+        <button className="dte-add-field-button" onClick={onClick} title="Add Field to This Group">
+            +
+        </button>
+    );
+};