@servicetitan/dte-pdf-editor 1.92.1 → 1.92.2

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

@@ -1,7 +1,7 @@
-import { Flex, Text } from '@servicetitan/anvil2';
-import { FC, ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Flex } from '@servicetitan/anvil2';
+import { FC, ReactNode, useMemo, useRef, useState } from 'react';
 import { BASE_PAGE_WIDTH } from '../../constants';
-import { usePinchZoom, useZoom } from '../../hooks';
+import { useZoom } from '../../hooks';
 import {
     type DataChangePayload,
     type DataModelValues,
@@ -15,11 +15,7 @@ import {
     mapColorsToRecipients,
     sortFieldsByReadingOrder,
 } from '../../utils';
-import {
-    FieldNavigationControls,
-    ZoomControls,
-    ZoomControlsProps,
-} from '../pdf-canvas/canvas-controls';
+import { CanvasControls } from '../pdf-canvas/canvas-controls';
 import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
 import { PdfViewCalculated } from './pdf-view-calculated';
 import { PdfViewDataModel } from './pdf-view-data-model';
@@ -34,10 +30,6 @@ export interface PdfViewProps {
     viewMode?: PdfViewMode;
     data?: DataModelValues;
     zoomable?: boolean;
-    zoomProps?: {
-        vertical: ZoomControlsProps['vertical'];
-        position: ZoomControlsProps['position'];
-    };
     enableInputNavigation?: boolean;
     pdfUrl: string;
     loading?: boolean;
@@ -82,23 +74,14 @@ export const PdfView: FC<PdfViewProps> = ({
     pdfUrl,
     recipients,
     viewMode,
-    zoomProps,
     zoomable = true,
 }) => {
     const [isPdfLoaded, setIsPdfLoaded] = useState<boolean>(false);
     const [previewData, setPreviewData] = useState<DataModelValues>(data ?? {});
-    const { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut } = useZoom();
+    const { resetZoom, zoom, zoomIn, zoomOut } = useZoom();
     const activeData = viewMode === 'preview' ? previewData : data;
 
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
-    const navControlsRef = useRef<HTMLDivElement>(null);
-    const contentContainerRef = useRef<HTMLDivElement>(null);
-    usePinchZoom(contentContainerRef, {
-        enabled: zoomable,
-        setZoomValue,
-        zoom,
-        zoomByFactor,
-    });
 
     const onDocumentLoadSuccess = (pageNum: number) => {
         setIsPdfLoaded(true);
@@ -128,6 +111,7 @@ export const PdfView: FC<PdfViewProps> = ({
         [navigableFields],
     );
 
+    // -1 means no field has been navigated to yet, so the first "next" lands on index 0.
     const [currentFieldIndex, setCurrentFieldIndex] = useState(-1);
 
     const handleFieldOverlayFocus = (fieldId: string) => {
@@ -136,160 +120,115 @@ export const PdfView: FC<PdfViewProps> = ({
         }
     };
 
-    const getFieldElement = (fieldId: string) => {
-        const root = pdfWrapperRef.current?.getRootNode() as Document | ShadowRoot | undefined;
-        return root?.querySelector<HTMLElement>(`[id="dte-pdf-field-${fieldId}"]`) ?? undefined;
-    };
-
-    useLayoutEffect(() => {
-        const field = navigableFields[currentFieldIndex];
-        const navControlsEl = navControlsRef.current;
-        if (!field || !navControlsEl) {
-            return;
-        }
-
-        const fieldEl = getFieldElement(field.id);
-        if (!fieldEl) {
-            return;
-        }
-
-        const containerTop = contentContainerRef.current?.getBoundingClientRect().top ?? 0;
-        navControlsEl.style.top = `${fieldEl.getBoundingClientRect().top - containerTop}px`;
-    }, [currentFieldIndex, navigableFields]);
-
     const handleFocusField = (fieldId: string) => {
-        const fieldEl = getFieldElement(fieldId);
-        if (fieldEl) {
-            fieldEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            const focusableChild = fieldEl.querySelector<HTMLElement>('input, textarea');
-            (focusableChild ?? fieldEl)?.focus();
-        }
+        const root = pdfWrapperRef.current?.getRootNode() as Document | ShadowRoot | undefined;
+        const fieldEl = root?.querySelector<HTMLElement>(`[id="dte-pdf-field-${fieldId}"]`);
+        fieldEl?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        const focusableElement = fieldEl?.querySelector<HTMLElement>('input, textarea') ?? fieldEl;
+        focusableElement?.focus();
     };
 
     const goToField = (index: number) => {
-        const fieldIndex = index < 0 || index >= navigableFields.length ? -1 : index;
-        const field = navigableFields[fieldIndex];
-
-        setCurrentFieldIndex(fieldIndex);
-        if (field) {
-            handleFocusField(field.id);
+        let i = index;
+        if (i < 0) {
+            i = 0;
+        } else if (i >= navigableFields.length) {
+            i = navigableFields.length - 1;
         }
-    };
+        const field = navigableFields[i];
 
-    const handleNextField = () => {
-        goToField(currentFieldIndex + 1);
+        setCurrentFieldIndex(i);
+        handleFocusField(field.id);
     };
 
     const recipientsColors = mapColorsToRecipients(recipients);
-    const hasNavigableFields = navigableFields.length !== 0;
-    const shouldShowFieldNavigation = enableInputNavigation && hasNavigableFields;
-
+    const hasNavigableFields = navigableFields.length === 0;
     return (
         <Flex
+            flex={1}
+            className="dte-pdf-editor-theme dte-pdf-editor-content-container --view-mode"
             direction="column"
-            style={{ position: 'relative', minWidth: 0 }}
-            className="dte-pdf-editor-theme"
-            ref={contentContainerRef}
         >
-            {isPdfLoaded && shouldShowFieldNavigation && (
-                <div ref={navControlsRef} className="dte-pdf-movable-next-button-wrapper">
-                    <FieldNavigationControls
-                        isStarted={currentFieldIndex !== -1}
-                        onNextField={handleNextField}
-                    />
-                </div>
-            )}
-            {isPdfLoaded && zoomable && (
-                <ZoomControls
-                    {...zoomProps}
+            {isPdfLoaded && (
+                <CanvasControls
                     zoom={zoom}
                     onZoomIn={zoomIn}
                     onZoomOut={zoomOut}
+                    zoomable={zoomable}
                     onResetZoom={resetZoom}
+                    enableInputNavigation={enableInputNavigation}
+                    disabledPrev={hasNavigableFields}
+                    disabledNext={hasNavigableFields}
+                    disabledOnFirstField={hasNavigableFields}
+                    disabledOnLastField={hasNavigableFields}
+                    onPrevField={() => goToField(currentFieldIndex - 1)}
+                    onNextField={() => goToField(currentFieldIndex + 1)}
+                    onFirstField={() => goToField(0)}
+                    onLastField={() => goToField(navigableFields.length - 1)}
                 />
             )}
-            {shouldShowFieldNavigation && (
-                <Flex
-                    justifyContent="space-between"
-                    alignItems="center"
-                    gap={2}
-                    className="dte-pdf-canvas-controls"
-                >
-                    <Text style={{ color: '#ffffff' }}>Review and complete</Text>
-                    <FieldNavigationControls
-                        isStarted={currentFieldIndex !== -1}
-                        onNextField={handleNextField}
-                    />
-                </Flex>
-            )}
-            <Flex
-                flex={1}
-                className="dte-pdf-editor-content-container --view-mode"
-                direction="column"
+            <div
+                ref={pdfWrapperRef}
+                className="dte-pdf-wrapper"
+                style={{ width: BASE_PAGE_WIDTH * zoom }}
             >
-                <div
-                    ref={pdfWrapperRef}
-                    className="dte-pdf-wrapper"
-                    style={{ width: BASE_PAGE_WIDTH * zoom }}
-                >
-                    <PdfDocumentRenderer
-                        pdfUrl={pdfUrl}
-                        loading={loading}
-                        pageWidth={BASE_PAGE_WIDTH * zoom}
-                        errorPlaceholder={errorPlaceholder}
-                        loadingPlaceholder={loadingPlaceholder}
-                        onDocumentLoadSuccess={onDocumentLoadSuccess}
-                    />
-                    {isPdfLoaded && (
-                        <div className="dte-pdf-field-overlay --view-mode">
-                            {fields.map(field => (
-                                <PdfViewFieldContainer
-                                    key={field.id}
-                                    field={field}
-                                    data={viewMode === 'preview' ? previewData : data}
-                                    error={errors[field.path!] || ''}
-                                    recipientsColors={recipientsColors}
-                                    pdfWrapperRef={pdfWrapperRef}
-                                    zoom={zoom}
-                                    onFocus={handleFieldOverlayFocus}
-                                >
-                                    {(field.type === FieldTypeEnum.dataModel ||
-                                        field.type === FieldTypeEnum.forms) && (
-                                        <PdfViewDataModel
-                                            field={field}
-                                            data={viewMode === 'preview' ? previewData : data}
-                                        />
-                                    )}
-                                    {field.type === FieldTypeEnum.eSign && (
-                                        <PdfViewESign field={field} />
-                                    )}
-                                    {field.type === FieldTypeEnum.calculated && (
-                                        <PdfViewCalculated
-                                            field={field}
-                                            data={viewMode === 'preview' ? previewData : data}
-                                            holidays={holidays}
-                                            viewMode={viewMode}
-                                        />
-                                    )}
-                                    {field.type === FieldTypeEnum.fillable && (
-                                        <PdfViewFillable
-                                            data={viewMode === 'preview' ? previewData : data}
-                                            field={field}
-                                            readOnly={makeFillableFieldsReadonly}
-                                            fillingBy={fillingBy}
-                                            viewMode={viewMode}
-                                            onDataChange={handleDataChange}
-                                        />
-                                    )}
-                                    {field.type === FieldTypeEnum.generic && (
-                                        <PdfViewGeneric field={field} />
-                                    )}
-                                </PdfViewFieldContainer>
-                            ))}
-                        </div>
-                    )}
-                </div>
-            </Flex>
+                <PdfDocumentRenderer
+                    pdfUrl={pdfUrl}
+                    loading={loading}
+                    pageWidth={BASE_PAGE_WIDTH * zoom}
+                    errorPlaceholder={errorPlaceholder}
+                    loadingPlaceholder={loadingPlaceholder}
+                    onDocumentLoadSuccess={onDocumentLoadSuccess}
+                />
+                {isPdfLoaded && (
+                    <div className="dte-pdf-field-overlay --view-mode">
+                        {fields.map(field => (
+                            <PdfViewFieldContainer
+                                key={field.id}
+                                field={field}
+                                data={viewMode === 'preview' ? previewData : data}
+                                error={errors[field.path!] || ''}
+                                recipientsColors={recipientsColors}
+                                pdfWrapperRef={pdfWrapperRef}
+                                zoom={zoom}
+                                onFocus={handleFieldOverlayFocus}
+                            >
+                                {(field.type === FieldTypeEnum.dataModel ||
+                                    field.type === FieldTypeEnum.forms) && (
+                                    <PdfViewDataModel
+                                        field={field}
+                                        data={viewMode === 'preview' ? previewData : data}
+                                    />
+                                )}
+                                {field.type === FieldTypeEnum.eSign && (
+                                    <PdfViewESign field={field} />
+                                )}
+                                {field.type === FieldTypeEnum.calculated && (
+                                    <PdfViewCalculated
+                                        field={field}
+                                        data={viewMode === 'preview' ? previewData : data}
+                                        holidays={holidays}
+                                        viewMode={viewMode}
+                                    />
+                                )}
+                                {field.type === FieldTypeEnum.fillable && (
+                                    <PdfViewFillable
+                                        data={viewMode === 'preview' ? previewData : data}
+                                        field={field}
+                                        readOnly={makeFillableFieldsReadonly}
+                                        fillingBy={fillingBy}
+                                        viewMode={viewMode}
+                                        onDataChange={handleDataChange}
+                                    />
+                                )}
+                                {field.type === FieldTypeEnum.generic && (
+                                    <PdfViewGeneric field={field} />
+                                )}
+                            </PdfViewFieldContainer>
+                        ))}
+                    </div>
+                )}
+            </div>
         </Flex>
     );
 };

package/src/constants/field.constants.ts

@@ -1,17 +1,3 @@
-import NumbersIcon from '@servicetitan/anvil2/assets/icons/material/round/123.svg';
-import AbcIcon from '@servicetitan/anvil2/assets/icons/material/round/abc.svg';
-import BadgeIcon from '@servicetitan/anvil2/assets/icons/material/round/badge.svg';
-import CalculateIcon from '@servicetitan/anvil2/assets/icons/material/round/calculate.svg';
-import CalendarMonthIcon from '@servicetitan/anvil2/assets/icons/material/round/calendar_month.svg';
-import CheckboxIcon from '@servicetitan/anvil2/assets/icons/material/round/check_box.svg';
-import EventAvailableIcon from '@servicetitan/anvil2/assets/icons/material/round/event_available.svg';
-import GestureIcon from '@servicetitan/anvil2/assets/icons/material/round/gesture.svg';
-import RadioIcon from '@servicetitan/anvil2/assets/icons/material/round/radio_button_checked.svg';
-import ShortTextIcon from '@servicetitan/anvil2/assets/icons/material/round/short_text.svg';
-import TableChartIcon from '@servicetitan/anvil2/assets/icons/material/round/table_chart.svg';
-import TextIcon from '@servicetitan/anvil2/assets/icons/material/round/text_fields.svg';
-import IconAppointmentsIcon from '@servicetitan/anvil2/assets/icons/st/appointments.svg';
-
 import {
     type CalculatedFormatForDate,
     type CalculatedFormatForNumber,
@@ -58,11 +44,11 @@ export const GENERIC_FIELD_DEFAULT_SIZES = {
 } as Record<PdfFieldSubType, { width: number; height: number }>;
 
 export const FILLABLE_FIELD_TYPES: FieldTypeOption[] = [
-    { label: 'Text Field', type: FieldTypeEnum.fillable, subType: 'text', icon: ShortTextIcon },
-    { label: 'Number Field', type: FieldTypeEnum.fillable, subType: 'number', icon: NumbersIcon },
-    { label: 'Date Field', type: FieldTypeEnum.fillable, subType: 'date', icon: CalendarMonthIcon },
-    { label: 'Checkbox', type: FieldTypeEnum.fillable, subType: 'checkbox', icon: CheckboxIcon },
-    { label: 'Radio', type: FieldTypeEnum.fillable, subType: 'radio', icon: RadioIcon },
+    { label: 'Text Field', type: FieldTypeEnum.fillable, subType: 'text' },
+    { label: 'Number Field', type: FieldTypeEnum.fillable, subType: 'number' },
+    { label: 'Date Field', type: FieldTypeEnum.fillable, subType: 'date' },
+    { label: 'Checkbox', type: FieldTypeEnum.fillable, subType: 'checkbox' },
+    { label: 'Radio', type: FieldTypeEnum.fillable, subType: 'radio' },
 ];
 
 export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [
@@ -70,31 +56,26 @@ export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [
         label: 'Signature',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.signature,
-        icon: GestureIcon,
     },
     {
         label: 'Initials',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.initials,
-        icon: AbcIcon,
     },
     {
         label: 'Date Signed',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.dateSigned,
-        icon: EventAvailableIcon,
     },
     {
-        label: 'Calculated Singing Date',
+        label: 'Date Signed Offset',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.dateSignedOffset,
-        icon: IconAppointmentsIcon,
     },
     {
         label: 'Full Name',
         type: FieldTypeEnum.eSign,
         subType: ESignFieldType.fullName,
-        icon: BadgeIcon,
     },
 ];
 
@@ -102,7 +83,6 @@ export const CALCULATED_FIELD_TYPES: FieldTypeOption[] = [
     {
         label: 'Calculated Field',
         type: FieldTypeEnum.calculated,
-        icon: CalculateIcon,
     },
 ];
 
@@ -111,13 +91,11 @@ export const GENERIC_FIELD_TYPES: FieldTypeOption[] = [
         label: 'Text',
         type: FieldTypeEnum.generic,
         subType: 'text',
-        icon: TextIcon,
     },
     {
         label: 'Table',
         type: FieldTypeEnum.generic,
         subType: 'table',
-        icon: TableChartIcon,
     },
 ];
 

package/src/constants/menu-group.ts

@@ -1,6 +1,5 @@
 import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
 import IconCalculate from '@servicetitan/anvil2/assets/icons/material/round/calculate.svg';
-import IconFactCheck from '@servicetitan/anvil2/assets/icons/material/round/fact_check.svg';
 import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
 import IconCommercial from '@servicetitan/anvil2/assets/icons/st/commercial.svg';
 import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
@@ -12,6 +11,11 @@ export interface MenuGroupModel {
     key: FieldTypeEnum;
 }
 
+/**
+ * Sidebar tabs. Forms (`FieldTypeEnum.forms`) has no tab of its own: form fields are offered as a
+ * group inside Merge Tags, next to the data model groups. `hideFields: [FieldTypeEnum.forms]` still
+ * hides that group.
+ */
 export const menuGroups: MenuGroupModel[] = [
     { svgIcon: IconEstimate, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
     { svgIcon: IconBorderColor, label: 'E-Sign', key: FieldTypeEnum.eSign },
@@ -30,5 +34,4 @@ export const menuGroups: MenuGroupModel[] = [
         label: 'Generic Fields',
         key: FieldTypeEnum.generic,
     },
-    { svgIcon: IconFactCheck, label: 'Forms', key: FieldTypeEnum.forms },
 ];

package/src/hooks/index.ts

@@ -6,6 +6,5 @@ export * from './useFormulaEditor';
 export * from './usePdfDocumentRenderer';
 export * from './usePdfFieldDnD';
 export * from './usePdfFieldSelection';
-export * from './usePinchZoom';
 export * from './useToggle';
 export * from './useZoom';

package/src/hooks/useFormFields.ts

@@ -10,6 +10,8 @@ import { formFieldInfoToFieldTypeOption } from '../utils';
 
 interface UseFormFieldsResult {
     isLoading: boolean;
+    isLoadingForms: boolean;
+    formsWithFields: FormInfo[];
     formFieldsByFormId: FormFieldsByFormIdI;
     formulaLoadingFormId: null | number;
     formFieldOptions: FieldTypeOption[];
@@ -18,12 +20,15 @@ interface UseFormFieldsResult {
     requestFormFieldsById: (formId: number) => void;
 }
 
+const EMPTY_FORMS: FormInfo[] = [];
+
 export const useFormFields = (
     fields: PdfField[],
     onFormSelect?: (
         formIds: number[],
         sendFormFields: (formFieldsByFormId: FormFieldsByFormIdI) => void,
     ) => void,
+    forms: FormInfo[] = EMPTY_FORMS,
 ): UseFormFieldsResult => {
     const [formFieldsByFormId, setFormFieldsByFormId] = useState<FormFieldsByFormIdI>({});
     const [formulaLoadingFormId, setFormulaLoadingFormId] = useState<number | null>(null);
@@ -40,7 +45,13 @@ export const useFormFields = (
             return;
         }
 
-        const initialFormIds = new Set<number>();
+        /*
+         * Every form is asked for up front, not just the ones a formula already references: a form
+         * with no fields has nothing to offer and is dropped from the list (`formsWithFields`), and
+         * that cannot be decided without its fields. They go out as one batched call, and the reply
+         * is cached, so opening a form afterwards costs nothing.
+         */
+        const initialFormIds = new Set<number>(forms.map(form => form.id));
         fields.forEach(field => {
             if (field.type === FieldTypeEnum.calculated) {
                 if (field?.formula?.tokens.length) {
@@ -90,7 +101,7 @@ export const useFormFields = (
             cancelled = true;
             cancelAnimationFrame(rafId);
         };
-    }, [fields, onFormSelect]);
+    }, [fields, forms, onFormSelect]);
 
     const formFieldOptions = useMemo(() => {
         if (!selectedForm) {
@@ -143,10 +154,21 @@ export const useFormFields = (
         [formFieldsByFormId, onFormSelect],
     );
 
+    /*
+     * A form is offered only once it is known to have something to drag out of it. Until its reply
+     * lands it is neither listed nor counted as empty — `isLoadingForms` stands in for it.
+     */
+    const formsWithFields = useMemo(() => {
+        return forms.filter(form => !!formFieldsByFormId[form.id]?.length);
+    }, [forms, formFieldsByFormId]);
+
     const isLoading = selectedForm != null && formFieldsLoadingFormIds[selectedForm.id];
+    const isLoadingForms = forms.some(form => !!formFieldsLoadingFormIds[form.id]);
 
     return {
         isLoading,
+        isLoadingForms,
+        formsWithFields,
         formFieldsByFormId,
         formulaLoadingFormId,
         formFieldOptions,

package/src/hooks/useZoom.ts

@@ -1,37 +1,25 @@
 import { useCallback, useState } from 'react';
-import { ZOOM_DEFAULT, ZOOM_STEP } from '../constants';
-import { clampZoom } from '../utils';
+import { ZOOM_DEFAULT, ZOOM_MAX, ZOOM_MIN, ZOOM_STEP } from '../constants';
 
 export interface UseZoomReturn {
     zoom: number;
     zoomIn(): void;
     zoomOut(): void;
     resetZoom(): void;
-    setZoomValue(value: number): void;
-    zoomByFactor(factor: number): void;
 }
 
+const clampZoom = (value: number) =>
+    Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value * 100) / 100));
+
 /**
  * Manages a page zoom factor (1 = 100%), clamped to [ZOOM_MIN, ZOOM_MAX] in ZOOM_STEP increments.
  */
 export const useZoom = (initialZoom: number = ZOOM_DEFAULT): UseZoomReturn => {
     const [zoom, setZoom] = useState<number>(initialZoom);
 
-    const zoomIn = useCallback(() => {
-        setZoom(prev => clampZoom(prev + ZOOM_STEP));
-    }, []);
-    const zoomOut = useCallback(() => {
-        setZoom(prev => clampZoom(prev - ZOOM_STEP));
-    }, []);
-    const resetZoom = useCallback(() => {
-        setZoom(ZOOM_DEFAULT);
-    }, []);
-    const setZoomValue = useCallback((value: number) => {
-        setZoom(clampZoom(value));
-    }, []);
-    const zoomByFactor = useCallback((factor: number) => {
-        setZoom(prev => clampZoom(prev * factor));
-    }, []);
+    const zoomIn = useCallback(() => setZoom(prev => clampZoom(prev + ZOOM_STEP)), []);
+    const zoomOut = useCallback(() => setZoom(prev => clampZoom(prev - ZOOM_STEP)), []);
+    const resetZoom = useCallback(() => setZoom(ZOOM_DEFAULT), []);
 
-    return { resetZoom, setZoomValue, zoom, zoomByFactor, zoomIn, zoomOut };
+    return { zoom, zoomIn, zoomOut, resetZoom };
 };

package/src/interface/types.ts

@@ -1,5 +1,3 @@
-import { Svg } from '@servicetitan/anvil2';
-
 export enum FieldTypeEnum {
     dataModel = 'dataModel',
     forms = 'forms',
@@ -166,7 +164,6 @@ export interface FieldTypeOption {
     fieldType?: SchemaFieldType;
     formSnapshot?: FormulaFieldFormSnapshot;
     sampleData?: unknown;
-    icon?: Svg;
 }
 
 export interface DataModelFieldGroup {

package/src/styles/field-type.css

@@ -16,6 +16,11 @@
     box-shadow: 0 0 2px 0 var(--border-color-active);
 }
 
+.dte-field-type-item.--skeleton {
+    cursor: default;
+    pointer-events: none;
+}
+
 .dte-field-type-items-wrapper {
     &.--grid-2 {
         display: grid;

package/src/styles/formula-modal.css

@@ -69,6 +69,18 @@
     gap: 0;
 }
 
+/*
+ * The panels share one scroller, so the list — always the taller of the two — would otherwise keep
+ * driving the scroll height while the fields panel is shown, leaving the fields followed by a
+ * screenful of nothing. Both bounds are needed: the min-content floor above keeps a max-height on
+ * its own from taking effect.
+ */
+.dte-formula-sidebar-slide-track.--detail .dte-formula-sidebar-slide-panel:not(.--form-fields) {
+    min-height: 0;
+    max-height: 0;
+    overflow: hidden;
+}
+
 .dte-formula-sidebar-forms-heading {
     flex-shrink: 0;
 }
@@ -94,6 +106,11 @@
     white-space: nowrap;
 }
 
+.dte-formula-field-list-item.--skeleton {
+    cursor: default;
+    pointer-events: none;
+}
+
 .dte-formula-field-list-item:hover,
 .dte-formula-field-list-item.--highlight {
     color: var(--color-neutral-100, #e8e8e8);