@servicetitan/dte-pdf-editor 1.95.0 → 1.96.1

package/dist/vendor/dte-shared/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.95.0",
+  "version": "1.96.1",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
@@ -13,7 +13,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "tsc --build && startup prepare-package"
+    "build": "npm run build --prefix ../shared && tsc --build && startup prepare-package && node scripts/bundle-shared.mjs"
   },
   "cli": {
     "webpack": false
@@ -23,6 +23,9 @@
     "react-pdf": "^10.3.0",
     "uuid": "^9.0.0"
   },
+  "devDependencies": {
+    "@servicetitan/dte-shared": "^0.0.1"
+  },
   "peerDependencies": {
     "@servicetitan/anvil2": "^3.7.1",
     "react": "~18.3.1",

package/src/__tests__/field-types/date-fields.test.ts

@@ -111,6 +111,15 @@ describe('date field scenarios', () => {
         const subject = (formula: StructuredFormula, data: Record<string, string>) =>
             evaluateFormula(formula, data);
 
+        // The default calendar covers the current year ± 1.
+        beforeAll(() => {
+            jest.useFakeTimers({ now: new Date('2024-06-01T00:00:00Z') });
+        });
+
+        afterAll(() => {
+            jest.useRealTimers();
+        });
+
         test('adds business days to a date and returns epoch ms of the result', () => {
             // Monday 2024-06-10 + 3 business days = Thursday 2024-06-13
             const formula: StructuredFormula = {
@@ -120,7 +129,7 @@ describe('date field scenarios', () => {
                     { type: 'number', value: '3' },
                 ],
             };
-            const result = subject(formula, { start: '2024-06-10' });
+            const result = evaluateFormula(formula, { start: '2024-06-10' }, { enabled: true });
             expect(result).not.toBeNull();
             const resolved = new Date(result as number);
             expect(resolved.getUTCFullYear()).toBe(2024);
@@ -137,7 +146,7 @@ describe('date field scenarios', () => {
                     { type: 'number', value: '1' },
                 ],
             };
-            const result = subject(formula, { start: '2024-06-14' });
+            const result = evaluateFormula(formula, { start: '2024-06-14' }, { enabled: true });
             expect(new Date(result as number).getUTCDate()).toBe(17);
         });
 
@@ -150,10 +159,27 @@ describe('date field scenarios', () => {
                 ],
             };
             // Mon 2024-06-10 + 1 day, but 2024-06-11 is a holiday => Wed 2024-06-12
-            const result = evaluateFormula(formula, { start: '2024-06-10' }, ['2024-06-11']);
+            const result = evaluateFormula(
+                formula,
+                { start: '2024-06-10' },
+                { enabled: true, holidays: ['2024-06-11'] },
+            );
             expect(new Date(result as number).getUTCDate()).toBe(12);
         });
 
+        test('adds plain calendar days (no weekend/holiday skipping) when the exclusion toggle is off', () => {
+            // The toggle defaults to off: Friday 2024-06-14 + 1 day = Saturday 2024-06-15, unskipped.
+            const formula: StructuredFormula = {
+                tokens: [
+                    { type: 'field', path: 'start', fieldType: 'date' },
+                    { type: 'operator', value: '+' },
+                    { type: 'number', value: '1' },
+                ],
+            };
+            const result = subject(formula, { start: '2024-06-14' });
+            expect(new Date(result as number).getUTCDate()).toBe(15);
+        });
+
         test('returns null when date field has invalid value', () => {
             const formula: StructuredFormula = {
                 tokens: [

package/src/__tests__/field-types/e-sign-fields.test.ts

@@ -65,8 +65,8 @@ describe('e-sign field scenarios', () => {
             expect(getFieldColor(field.recipient, colors)).toBeDefined();
         });
 
-        test('returns "none" for an unknown recipient', () => {
-            expect(getFieldColor('unknown', colors)).toBe('none');
+        test('returns undefined for an unknown recipient', () => {
+            expect(getFieldColor('unknown', colors)).toBeUndefined();
         });
     });
 

package/src/__tests__/field-types/fillable-fields.test.ts

@@ -296,8 +296,8 @@ describe('fillable field scenarios', () => {
             );
         });
 
-        test('returns "none" when field has no recipient', () => {
-            expect(getFieldColor(undefined, colors)).toBe('none');
+        test('returns undefined when field has no recipient', () => {
+            expect(getFieldColor(undefined, colors)).toBeUndefined();
         });
     });
 

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

@@ -1,4 +1,5 @@
 import { Flex, SegmentedControl, Switch, Text } from '@servicetitan/anvil2';
+import { BusinessCalendarSection, type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { Dispatch, FC, SetStateAction } from 'react';
 import { DEFAULT_DATE_FORMAT, ROUNDING_OPTIONS } from '../../constants';
 import { type CalculatedFieldFormat, type CalculatedFormatForNumber } from '../../interface/types';
@@ -6,9 +7,10 @@ import { type CalculatedFieldFormat, type CalculatedFormatForNumber } from '../.
 interface AdvancedSettingsProps {
     format: CalculatedFieldFormat;
     setFormat: Dispatch<SetStateAction<CalculatedFieldFormat>>;
+    businessCalendar?: ScheduleEditorContext;
 }
 
-const DateFormatSettings: FC<AdvancedSettingsProps> = ({ format, setFormat }) => (
+const DateFormatSettings: FC<AdvancedSettingsProps> = ({ businessCalendar, format, setFormat }) => (
     <div className="dte-formula-advanced">
         <Text variant="body" size="small">
             Date format
@@ -24,12 +26,23 @@ const DateFormatSettings: FC<AdvancedSettingsProps> = ({ format, setFormat }) =>
         <Text variant="body" size="small" color="tertiary">
             Tokens: YYYY, YY, MMMM, MMM, MM, M, DD, D
         </Text>
+        {businessCalendar && <BusinessCalendarSection businessCalendar={businessCalendar} />}
     </div>
 );
 
-export const AdvancedSettings: FC<AdvancedSettingsProps> = ({ format, setFormat }) => {
+export const AdvancedSettings: FC<AdvancedSettingsProps> = ({
+    businessCalendar,
+    format,
+    setFormat,
+}) => {
     if (format.resultType === 'date') {
-        return <DateFormatSettings format={format} setFormat={setFormat} />;
+        return (
+            <DateFormatSettings
+                format={format}
+                setFormat={setFormat}
+                businessCalendar={businessCalendar}
+            />
+        );
     }
 
     return (

package/src/components/field-config-panel/e-sign-options-modal.tsx

@@ -1,5 +1,6 @@
 import { Button, Flex, NumberField } from '@servicetitan/anvil2';
 import AddIcon from '@servicetitan/anvil2/assets/icons/material/round/add_circle.svg';
+import { BusinessCalendarSection, type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { FC, Fragment, useState } from 'react';
 import {
     ESignDateSignedOffsetSettings,
@@ -23,9 +24,12 @@ interface ESignOptionsModalProps {
     formFieldsByFormId?: FormFieldsByFormIdI;
     onRequestFormFields?: (formId: number) => void;
     formFieldsLoadingFormId?: number | null;
+    /** The business-day exclusion toggle/picker/drawer state and callbacks for this field. */
+    businessCalendar?: ScheduleEditorContext;
 }
 
 export const ESignOptionsModal: FC<ESignOptionsModalProps> = ({
+    businessCalendar,
     documentFields,
     formFieldsByFormId,
     formFieldsLoadingFormId,
@@ -51,6 +55,7 @@ export const ESignOptionsModal: FC<ESignOptionsModalProps> = ({
 
     const handleDaysChange = (days: number | null) => {
         onSave({
+            ...initialState,
             rules: [...rulesWithConditions, { days: Math.max(Math.min(365, days ?? 0), 0) }],
         });
     };
@@ -59,11 +64,11 @@ export const ESignOptionsModal: FC<ESignOptionsModalProps> = ({
         rules: ESignDateSignedOffsetSettingsRule[],
         finalRule: ESignDateSignedOffsetSettingsFinalRule,
     ) => {
-        onSave({ rules: [...rules, finalRule] });
+        onSave({ ...initialState, rules: [...rules, finalRule] });
     };
 
     const handleClearRules = () => {
-        onSave(createClearedESignOffsetSettings());
+        onSave({ ...initialState, ...createClearedESignOffsetSettings() });
     };
 
     return (
@@ -113,6 +118,12 @@ export const ESignOptionsModal: FC<ESignOptionsModalProps> = ({
                     schema={schema}
                 />
             )}
+            {businessCalendar && (
+                <BusinessCalendarSection
+                    businessCalendar={businessCalendar}
+                    label="Exclude weekends & holidays from the calculation"
+                />
+            )}
         </Fragment>
     );
 };

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

@@ -1,13 +1,20 @@
 import { Button, Flex, Text } from '@servicetitan/anvil2';
 import IconClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
-import { FC } from 'react';
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
+import { FC, useCallback, useMemo } from 'react';
 import {
+    type BusinessCalendar,
+    type BusinessDaySchedule,
+    type FieldScheduleBinding,
     type FormFieldsByFormIdI,
     type FormInfo,
+    type HolidayCatalog,
     type PdfField,
     type RecipientInfo,
+    type SaveScheduleRequest,
     type SchemaObject,
 } from '../../interface/types';
+import { getFieldDateCalcOptions, setFieldSchedule, setFieldScheduleEnabled } from '../../utils';
 import { FieldConfigPanel } from './field-config-panel';
 
 interface FieldConfigPanelOverlayProps {
@@ -19,6 +26,19 @@ interface FieldConfigPanelOverlayProps {
     selectedField: PdfField;
     recipients: RecipientInfo[];
     hideConditionalLogic?: boolean;
+    holidays?: string[];
+    fieldCalendars?: Record<string, BusinessCalendar>;
+    scheduleBindings?: FieldScheduleBinding[];
+    holidayCatalog?: HolidayCatalog;
+    holidayCatalogLoading?: boolean;
+    holidayCatalogError?: string;
+    schedules?: BusinessDaySchedule[];
+    schedulesLoading?: boolean;
+    schedulesError?: string;
+    onScheduleBindingsChange?(bindings: FieldScheduleBinding[]): void;
+    onCreateSchedule?(request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    onUpdateSchedule?(id: number, request: SaveScheduleRequest): Promise<BusinessDaySchedule>;
+    onDeleteSchedule?(id: number): Promise<void>;
     onFieldConfigChange(updates: Partial<PdfField>): void;
     onMatchingFieldsConfigChange?(
         predicate: (field: PdfField) => boolean,
@@ -32,18 +52,92 @@ interface FieldConfigPanelOverlayProps {
 export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
     dataModel,
     documentFields = [],
+    fieldCalendars,
     formFieldsByFormId,
     forms,
     formulaLoadingFormId,
     hideConditionalLogic,
+    holidayCatalog,
+    holidayCatalogError,
+    holidayCatalogLoading,
+    holidays,
+    onCreateSchedule,
     onDeleteField,
+    onDeleteSchedule,
     onDeselectField,
     onFieldConfigChange,
     onMatchingFieldsConfigChange,
     onRequestFormFields,
+    onScheduleBindingsChange,
+    onUpdateSchedule,
     recipients,
+    scheduleBindings,
+    schedules,
+    schedulesError,
+    schedulesLoading,
     selectedField,
 }) => {
+    const dateCalcOptions = useMemo(
+        () => getFieldDateCalcOptions(selectedField.id, scheduleBindings, holidays, fieldCalendars),
+        [selectedField.id, scheduleBindings, holidays, fieldCalendars],
+    );
+
+    const selectedFieldId = selectedField.id;
+    const selectedBinding = useMemo(
+        () => scheduleBindings?.find(b => b.fieldKey === selectedFieldId),
+        [scheduleBindings, selectedFieldId],
+    );
+
+    const handleToggle = useCallback(
+        (enabled: boolean) => {
+            onScheduleBindingsChange?.(
+                setFieldScheduleEnabled(scheduleBindings ?? [], selectedFieldId, enabled),
+            );
+        },
+        [scheduleBindings, selectedFieldId, onScheduleBindingsChange],
+    );
+
+    const handleSelectSchedule = useCallback(
+        (scheduleId: number | undefined) => {
+            onScheduleBindingsChange?.(
+                setFieldSchedule(scheduleBindings ?? [], selectedFieldId, scheduleId),
+            );
+        },
+        [scheduleBindings, selectedFieldId, onScheduleBindingsChange],
+    );
+
+    const businessCalendar: ScheduleEditorContext = useMemo(
+        () => ({
+            enabled: !!selectedBinding,
+            selectedScheduleId: selectedBinding?.scheduleId,
+            onToggle: handleToggle,
+            onSelectSchedule: handleSelectSchedule,
+            holidayCatalog,
+            holidayCatalogLoading,
+            holidayCatalogError,
+            schedules,
+            schedulesLoading,
+            schedulesError,
+            onCreateSchedule,
+            onUpdateSchedule,
+            onDeleteSchedule,
+        }),
+        [
+            selectedBinding,
+            handleToggle,
+            handleSelectSchedule,
+            holidayCatalog,
+            holidayCatalogLoading,
+            holidayCatalogError,
+            schedules,
+            schedulesLoading,
+            schedulesError,
+            onCreateSchedule,
+            onUpdateSchedule,
+            onDeleteSchedule,
+        ],
+    );
+
     return (
         <Flex className="dte-field-config-panel-overlay" onClick={e => e.stopPropagation()}>
             <Flex
@@ -75,6 +169,8 @@ export const FieldConfigPanelOverlay: FC<FieldConfigPanelOverlayProps> = ({
                     onMatchingFieldsConfigChange={onMatchingFieldsConfigChange}
                     onDeleteField={onDeleteField}
                     hideConditionalLogic={hideConditionalLogic}
+                    dateCalcOptions={dateCalcOptions}
+                    businessCalendar={businessCalendar}
                     onRequestFormFields={onRequestFormFields}
                 />
             </div>

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

@@ -1,4 +1,5 @@
 import { Button, Checkbox, Flex, SelectFieldSync, Textarea, TextField } from '@servicetitan/anvil2';
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { FC, useMemo } from 'react';
 import { FIELD_FONT_SIZE_OPTIONS } from '../../constants';
 import {
@@ -12,6 +13,7 @@ import {
     type SchemaObject,
 } from '../../interface/types';
 import {
+    type DateCalcOptions,
     generateESignPath,
     generateFillablePath,
     getFieldFontSize,
@@ -35,6 +37,10 @@ interface FieldConfigPanelProps {
     formulaLoadingFormId?: number | null;
     recipients: RecipientInfo[];
     hideConditionalLogic?: boolean;
+    /** The calendar of this field's formula preview. */
+    dateCalcOptions?: DateCalcOptions;
+    /** The business-calendar toggle/picker/drawer state and callbacks for this field. */
+    businessCalendar?: ScheduleEditorContext;
     onDeleteField(): void;
     onFieldConfigChange(updates: Partial<PdfField>): void;
     onMatchingFieldsConfigChange?(
@@ -45,7 +51,9 @@ interface FieldConfigPanelProps {
 }
 
 export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
+    businessCalendar,
     dataModel,
+    dateCalcOptions,
     documentFields = [],
     field,
     formFieldsByFormId,
@@ -88,6 +96,23 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
         onFieldConfigChange({ data });
     };
 
+    /*
+     * Reuses the catalog/CRUD half of `businessCalendar` (shared tenant schedules, same as a
+     * calculated field's), but overrides the enabled/selected-schedule half to read and write
+     * `ESignDateSignedOffsetSettings` instead of a `scheduleBindings` entry, since the toggle here
+     * applies to every `dateSignedOffset` field in the document, same as `rules` does.
+     */
+    const dateSignedOffsetData = field.data as ESignDateSignedOffsetSettings;
+    const eSignBusinessCalendar: ScheduleEditorContext | undefined = businessCalendar && {
+        ...businessCalendar,
+        enabled: !!dateSignedOffsetData?.businessCalendarEnabled,
+        selectedScheduleId: dateSignedOffsetData?.scheduleId,
+        onToggle: businessCalendarEnabled =>
+            handleDateSignedOffsetSave({ ...dateSignedOffsetData, businessCalendarEnabled }),
+        onSelectSchedule: scheduleId =>
+            handleDateSignedOffsetSave({ ...dateSignedOffsetData, scheduleId }),
+    };
+
     const handleRecipientChange = (item: { id: string; label: string } | null) => {
         if (!item) {
             return;
@@ -245,7 +270,9 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                 )}
             {field.type === FieldTypeEnum.calculated && (
                 <FormulaGenerator
+                    businessCalendar={businessCalendar}
                     dataModel={dataModel}
+                    dateCalcOptions={dateCalcOptions}
                     documentFields={documentFields}
                     formFieldsByFormId={formFieldsByFormId}
                     forms={forms}
@@ -281,6 +308,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                     <ESignOptionsModal
                         initialState={field.data as ESignDateSignedOffsetSettings}
                         onSave={handleDateSignedOffsetSave}
+                        businessCalendar={eSignBusinessCalendar}
                         documentFields={documentFields}
                         formFieldsByFormId={formFieldsByFormId}
                         formFieldsLoadingFormId={formulaLoadingFormId}

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

@@ -1,5 +1,6 @@
 import { Button } from '@servicetitan/anvil2';
 import EditIcon from '@servicetitan/anvil2/assets/icons/material/round/edit.svg';
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { FC, Fragment, useMemo, useState } from 'react';
 import {
     type CalculatedFieldFormat,
@@ -12,11 +13,13 @@ import {
     type SchemaObject,
     type StructuredFormula,
 } from '../../interface/types';
-import { extractGroupedFieldsFromDataModel } from '../../utils';
+import { type DateCalcOptions, extractGroupedFieldsFromDataModel } from '../../utils';
 import { FormulaModal } from './formula-modal';
 
 export interface FormulaGeneratorProps {
+    businessCalendar?: ScheduleEditorContext;
     dataModel?: SchemaObject;
+    dateCalcOptions?: DateCalcOptions;
     documentFields?: PdfField[];
     formFieldsByFormId?: FormFieldsByFormIdI;
     forms: FormInfo[];
@@ -43,7 +46,9 @@ function getFillableFilteredBuySubTypeFields(
 }
 
 export const FormulaGenerator: FC<FormulaGeneratorProps> = ({
+    businessCalendar,
     dataModel,
+    dateCalcOptions,
     documentFields = [],
     formFieldsByFormId,
     forms,
@@ -87,7 +92,9 @@ export const FormulaGenerator: FC<FormulaGeneratorProps> = ({
                 <FormulaModal
                     initialFormula={formula}
                     initialFormat={formulaFormat}
+                    businessCalendar={businessCalendar}
                     dataModelGroups={dataModelGroups}
+                    dateCalcOptions={dateCalcOptions}
                     fillableFieldsFromDocument={fillableFieldsFromDocument}
                     formFieldsByFormId={formFieldsByFormId}
                     forms={forms}

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

@@ -1,6 +1,7 @@
 import { Button, Dialog, Divider, Flex } from '@servicetitan/anvil2';
 import IconRedo from '@servicetitan/anvil2/assets/icons/material/round/redo.svg';
 import IconUndo from '@servicetitan/anvil2/assets/icons/material/round/undo.svg';
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import {
     DEFAULT_DATE_CALCULATED_FORMAT,
@@ -18,6 +19,7 @@ import {
     type StructuredFormula,
 } from '../../interface/types';
 import {
+    type DateCalcOptions,
     evaluateFormula,
     formatCalculatedResult,
     formFieldInfosToCalculationOptions,
@@ -68,7 +70,10 @@ function setSampleValueAtPath(target: DataModelValues, path: string, value: unkn
 export interface FormulaModalProps {
     initialFormula: StructuredFormula | undefined;
     initialFormat?: CalculatedFieldFormat;
+    businessCalendar?: ScheduleEditorContext;
     dataModelGroups: DataModelFieldGroup[];
+    /** The calendar the preview uses: the field's own, or the default one. */
+    dateCalcOptions?: DateCalcOptions;
     fillableFieldsFromDocument?: FieldTypeOption[];
     formFieldsByFormId?: FormFieldsByFormIdI;
     forms: FormInfo[];
@@ -79,7 +84,9 @@ export interface FormulaModalProps {
 }
 
 export const FormulaModal: FC<FormulaModalProps> = ({
+    businessCalendar,
     dataModelGroups,
+    dateCalcOptions,
     fillableFieldsFromDocument = [],
     formFieldsByFormId = {},
     forms,
@@ -255,21 +262,28 @@ export const FormulaModal: FC<FormulaModalProps> = ({
         if (parsedTokens.length === 0 || !formulaValidation.valid) {
             return '';
         }
-        return hasDivisionByZero({ tokens: parsedTokens }, sampleData)
+        return hasDivisionByZero({ tokens: parsedTokens }, sampleData, dateCalcOptions)
             ? 'Division by zero is not allowed'
             : '';
-    }, [parsedTokens, formulaValidation.valid, sampleData]);
+    }, [parsedTokens, formulaValidation.valid, sampleData, dateCalcOptions]);
 
     const previewValue = useMemo(() => {
         if (parsedTokens.length === 0 || !formulaValidation.valid || divisionByZeroError) {
             return '';
         }
-        const computed = evaluateFormula({ tokens: parsedTokens }, sampleData);
+        const computed = evaluateFormula({ tokens: parsedTokens }, sampleData, dateCalcOptions);
         if (computed === null) {
             return '';
         }
         return formatCalculatedResult(computed, format);
-    }, [parsedTokens, formulaValidation.valid, divisionByZeroError, sampleData, format]);
+    }, [
+        parsedTokens,
+        formulaValidation.valid,
+        divisionByZeroError,
+        sampleData,
+        format,
+        dateCalcOptions,
+    ]);
 
     const handleClose = useCallback(() => {
         onClose();
@@ -317,6 +331,7 @@ export const FormulaModal: FC<FormulaModalProps> = ({
                         selectedPaths={formulaEditor.selectedFieldPaths}
                     />
                     <FormulaWorkspace
+                        businessCalendar={businessCalendar}
                         disabledOperators={formulaEditor.disabledOperators}
                         editorRef={formulaEditor.editorRef}
                         isInvalid={isInvalid && formulaEditor.isDirty}

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

@@ -1,4 +1,8 @@
-import { Alert, Button, Flex, LinkButton, Text } from '@servicetitan/anvil2';
+import { Alert, Button, Flex, Text } from '@servicetitan/anvil2';
+import IconExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
+import IconArrowForward from '@servicetitan/anvil2/assets/icons/material/round/keyboard_arrow_right.svg';
+
+import { type ScheduleEditorContext } from '@servicetitan/dte-shared';
 import {
     Dispatch,
     FC,
@@ -17,6 +21,7 @@ import { ResultTypeSelector } from './result-type-selector';
 interface FormulaWorkspaceProps {
     actions: ReactNode;
     advancedOpen: boolean;
+    businessCalendar?: ScheduleEditorContext;
     disabledOperators?: Set<string>;
     editorRef: RefObject<HTMLDivElement | null>;
     format: CalculatedFieldFormat;
@@ -38,6 +43,7 @@ interface FormulaWorkspaceProps {
 export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
     actions,
     advancedOpen,
+    businessCalendar,
     disabledOperators,
     editorRef,
     format,
@@ -75,7 +81,7 @@ export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
     );
 
     return (
-        <Flex direction="column" flex={1} gap={2} style={{ padding: '12px' }}>
+        <Flex direction="column" flex={1} gap={2} style={{ padding: '12px', overflowY: 'auto' }}>
             <Flex direction="column" gap={1}>
                 <Text variant="body" size="small">
                     Preview (uses demo sample data)
@@ -132,10 +138,29 @@ export const FormulaWorkspace: FC<FormulaWorkspaceProps> = ({
                 })}
             </Flex>
             <ResultTypeSelector format={format} onChange={onResultTypeChange} />
-            <LinkButton appearance="primary" onClick={onToggleAdvanced}>
-                {advancedOpen ? 'Hide advanced settings' : 'Show advanced settings'}
-            </LinkButton>
-            {advancedOpen && <AdvancedSettings format={format} setFormat={setFormat} />}
+            <Flex
+                role="button"
+                onClick={onToggleAdvanced}
+                alignItems="center"
+                gap={1}
+                style={{ cursor: 'pointer', marginTop: 16 }}
+            >
+                <Text variant="eyebrow" size="small">
+                    Advanced settings
+                </Text>
+                {advancedOpen ? (
+                    <IconExpandMore fontSize="small" />
+                ) : (
+                    <IconArrowForward fontSize="small" />
+                )}
+            </Flex>
+            {advancedOpen && (
+                <AdvancedSettings
+                    format={format}
+                    setFormat={setFormat}
+                    businessCalendar={businessCalendar}
+                />
+            )}
         </Flex>
     );
 };