@servicetitan/dte-pdf-editor 1.55.0 → 1.57.0

package/src/components/pdf-fields-overlay/pdf-overlay-field-e-sign.tsx

@@ -9,7 +9,9 @@ export const PdfOverlayFieldESign: FC<PdfOverlayFieldESignProps> = ({ field }) =
     return (
         <span>
             {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value">{field.path}</div>
+            <div className="dte-pdf-field-value" style={{ fontSize: '8px' }}>
+                {field.path}
+            </div>
         </span>
     );
 };

package/src/components/pdf-fields-overlay/pdf-overlay-field-fillable.tsx

@@ -1,7 +1,7 @@
 import { FC, Fragment } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { PdfField } from '../../interface/types';
-import { getFieldPlaceholderText } from '../../utils';
+import { getFieldPlaceholderText, getFieldTextClipClassName } from '../../utils';
 import { AddHandle } from './add-handle';
 
 interface PdfOverlayFieldFillableProps {
@@ -15,14 +15,34 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
 }) => {
     const placeholderText = getFieldPlaceholderText(field);
 
+    const clipClassName = getFieldTextClipClassName(field);
+
     switch (field.subType) {
         case 'checkbox':
-            return <input type="checkbox" readOnly className="dte-pdf-field-fillable" />;
+            return (
+                <input
+                    type="checkbox"
+                    readOnly
+                    className="dte-pdf-field-fillable"
+                    style={{
+                        width: field.width,
+                        height: field.height,
+                    }}
+                />
+            );
 
         case 'radio':
             return (
                 <Fragment>
-                    <input type="radio" readOnly className="dte-pdf-field-fillable" />
+                    <input
+                        type="radio"
+                        readOnly
+                        className="dte-pdf-field-fillable"
+                        style={{
+                            width: field.width,
+                            height: field.height,
+                        }}
+                    />
                     <AddHandle
                         onClick={() =>
                             handleAddNewField({
@@ -40,7 +60,7 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
                 <input
                     type="date"
                     readOnly
-                    className="dte-pdf-field-fillable"
+                    className={`dte-pdf-field-fillable ${clipClassName}`}
                     placeholder={placeholderText}
                 />
             );
@@ -50,7 +70,7 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
                 <input
                     type="number"
                     readOnly
-                    className="dte-pdf-field-fillable"
+                    className={`dte-pdf-field-fillable ${clipClassName}`}
                     placeholder={placeholderText}
                 />
             );
@@ -60,9 +80,9 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
                 return (
                     <textarea
                         readOnly
+                        style={{ font: 'inherit', lineHeight: 'inherit', outline: 'none' }}
                         placeholder={placeholderText}
-                        className="dte-pdf-field-fillable"
-                        style={{ resize: 'none' }}
+                        className={`dte-pdf-field-fillable ${clipClassName}`}
                     />
                 );
             }
@@ -71,7 +91,7 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
                     type="text"
                     readOnly
                     placeholder={placeholderText}
-                    className="dte-pdf-field-fillable"
+                    className={`dte-pdf-field-fillable ${clipClassName}`}
                 />
             );
     }

package/src/components/pdf-fields-overlay/pdf-overlay-field-generic.tsx

@@ -62,7 +62,15 @@ const GenericFieldText: FC<GenericFieldTextProps> = ({ data, onChange }) => {
 
     return isActive ? (
         <textarea
-            style={{ width: '100%', height: '100%' }}
+            style={{
+                width: '100%',
+                height: '100%',
+                font: 'inherit',
+                lineHeight: 'inherit',
+                outline: 'none',
+                border: 'none',
+                padding: 0,
+            }}
             value={editingValue}
             placeholder="Type here..."
             onChange={e => setEditingValue(e.target.value)}

package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx

@@ -4,9 +4,8 @@ import { useFieldDrag, useFieldResize } from '../../hooks';
 import { FieldTypeEnum, PdfField } from '../../interface/types';
 import {
     getFieldBackgroundColor,
-    getFieldFontSizeInPixels,
+    getFieldBoundsStyle,
     getPagePosition,
-    supportsFieldFontSize,
 } from '../../utils';
 import { PdfOverlayFieldCalculated } from './pdf-overlay-field-calculated';
 import { PdfOverlayFieldDataModel } from './pdf-overlay-field-data-model';
@@ -63,16 +62,13 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
     const resizeConfig = DISABLE_FIELD_RESIZE[field.type]?.[field.subType!];
     const hideResizeHandle = resizeConfig?.disableVertical && resizeConfig.disableHorizontal;
 
-    const style = {
-        left: pagePos.left + x,
-        top: pagePos.top + y,
-        width: field.width,
-        height: field.height,
-        backgroundColor: getFieldBackgroundColor(field.recipient, recipientsColors),
-        ...(supportsFieldFontSize(field)
-            ? { fontSize: `${getFieldFontSizeInPixels(field)}px` }
-            : {}),
-    };
+    const style = getFieldBoundsStyle(
+        { ...field, page, x, y },
+        {
+            pageOffset: pagePos,
+            backgroundColor: getFieldBackgroundColor(field.recipient, recipientsColors),
+        },
+    );
 
     return (
         <div
@@ -82,7 +78,7 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
             onDragStart={e => handleDragStart(e, field)}
             onDrag={e => handleDrag(e, field)}
             onDragEnd={handleDragEnd}
-            className={`dte-pdf-field ${isSelected ? '--selected' : '--unselected'} ${isDragging ? '--dragging' : ''} ${isSameGroup ? '--colored' : ''} ${error ? '--error' : ''}`}
+            className={`dte-pdf-field-editor ${isSelected ? '--selected' : '--unselected'} ${isDragging ? '--dragging' : ''} ${isSameGroup ? '--colored' : ''} ${error ? '--error' : ''}`}
             style={style}
         >
             {field.type === FieldTypeEnum.calculated && (

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

@@ -1,6 +1,11 @@
 import { FC, useMemo } from 'react';
 import { DataModelValues, PdfField, PdfViewMode } from '../../interface/types';
-import { evaluateFormula, formatCalculatedResult, resolvePdfDataValues } from '../../utils';
+import {
+    evaluateFormula,
+    formatCalculatedResult,
+    getFieldTextClipClassName,
+    resolvePdfDataValues,
+} from '../../utils';
 
 interface PdfViewCalculatedProps {
     field: PdfField;
@@ -33,5 +38,7 @@ export const PdfViewCalculated: FC<PdfViewCalculatedProps> = ({
     const shouldShowPreviewFallback = isPreview && displayValue === '';
     const content = shouldShowPreviewFallback ? field.label || 'Calculated Field' : displayValue;
 
-    return <div className="dte-pdf-field-value">{content}</div>;
+    return (
+        <div className={`dte-pdf-field-value ${getFieldTextClipClassName(field)}`}>{content}</div>
+    );
 };

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { DataModelValues, PdfField } from '../../interface/types';
-import { nl2br, resolvePdfDataValues } from '../../utils';
+import { getFieldTextClipClassName, nl2br, resolvePdfDataValues } from '../../utils';
 
 interface PdfViewDataModelProps {
     field: PdfField;
@@ -16,7 +16,7 @@ export const PdfViewDataModel: FC<PdfViewDataModelProps> = ({ data, field }) =>
      */
     return (
         <div
-            className="dte-pdf-field-value"
+            className={`dte-pdf-field-value ${getFieldTextClipClassName(field)}`}
             // eslint-disable-next-line react/no-danger, @typescript-eslint/naming-convention
             dangerouslySetInnerHTML={{ __html: nl2br(resolvedValue ?? '') }}
         />

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

@@ -9,10 +9,9 @@ export const PdfViewESign: FC<PdfViewESignProps> = ({ field }) => {
     return (
         <span>
             {field.label} {field.required ? '*' : ''}
-            <div
-                className="dte-pdf-field-value"
-                style={{ opacity: 0.1, color: '#fff' }}
-            >{`{{${field.path}}}`}</div>
+            <div className="dte-pdf-field-value" style={{ fontSize: '8px' }}>
+                {field.path}
+            </div>
         </span>
     );
 };

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

@@ -3,9 +3,8 @@ import { DataModelValues, PdfField } from '../../interface/types';
 import {
     evaluateDisplayCondition,
     getFieldBackgroundColor,
-    getFieldFontSizeInPixels,
+    getFieldBoundsStyle,
     getPagePosition,
-    supportsFieldFontSize,
 } from '../../utils';
 
 interface PdfViewFieldContainer {
@@ -35,21 +34,12 @@ export const PdfViewFieldContainer: FC<PropsWithChildren<PdfViewFieldContainer>>
     const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
     return (
         <div
-            style={{
-                display: 'flex',
-                alignItems: 'center',
-                position: 'absolute',
-                padding: '4px',
-                background: bgColor,
-                left: `${pagePos.left + field.x}px`,
-                top: `${pagePos.top + field.y}px`,
-                width: `${field.width}px`,
-                height: `${field.height}px`,
-                ...(supportsFieldFontSize(field)
-                    ? { fontSize: `${getFieldFontSizeInPixels(field)}px` }
-                    : {}),
+            className="dte-pdf-field-view"
+            style={getFieldBoundsStyle(field, {
+                pageOffset: pagePos,
+                backgroundColor: bgColor,
                 borderColor: error ? 'red' : undefined,
-            }}
+            })}
         >
             {children}
             {error && (

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

@@ -1,6 +1,11 @@
 import { FC } from 'react';
 import { DataChangePayload, DataModelValues, PdfField, PdfViewMode } from '../../interface/types';
-import { dateToUtcZero, getFieldPlaceholderText, toDateInputValue } from '../../utils';
+import {
+    dateToUtcZero,
+    getFieldPlaceholderText,
+    getFieldTextClipClassName,
+    toDateInputValue,
+} from '../../utils';
 
 interface PdfViewFillableProps {
     field: PdfField;
@@ -21,10 +26,13 @@ interface FillableTextInputProps {
 
 const fillableTextStyles = {
     background: 'inherit',
-    width: 'inherit',
-    height: 'inherit',
-    borderColor: 'inherit',
+    width: '100%',
+    height: '100%',
+    border: 'none',
     fontSize: 'inherit',
+    boxSizing: 'border-box' as const,
+    padding: 0,
+    margin: 0,
 } as const;
 
 export const FillableTextInput: FC<FillableTextInputProps> = ({
@@ -38,6 +46,7 @@ export const FillableTextInput: FC<FillableTextInputProps> = ({
         <input
             readOnly={readOnly}
             type="text"
+            className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
             style={fillableTextStyles}
             disabled={disabled}
             id={field.path}
@@ -59,6 +68,7 @@ export const FillableTextareaInput: FC<FillableTextInputProps> = ({
     return (
         <textarea
             readOnly={readOnly}
+            className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
             style={{ ...fillableTextStyles, resize: 'none' }}
             disabled={disabled}
             id={field.path}
@@ -96,20 +106,20 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     if (field.subType === 'checkbox') {
         return (
             <div
+                className="dte-pdf-field-content"
                 style={{
                     display: 'flex',
                     alignItems: 'center',
                     background: 'inherit',
-                    width: 'inherit',
-                    height: 'inherit',
                 }}
             >
                 <input
+                    title={field.label}
                     style={{
-                        width: 'inherit',
-                        height: 'inherit',
+                        width: field.width,
+                        height: field.height,
                         margin: 0,
-                        borderColor: 'inherit',
+                        border: 'none',
                     }}
                     type="checkbox"
                     checked={resolvedValue ?? false}
@@ -125,20 +135,21 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     if (field.subType === 'radio') {
         return (
             <div
+                className="dte-pdf-field-content"
                 style={{
                     display: 'flex',
                     alignItems: 'center',
                     background: 'inherit',
-                    width: 'inherit',
-                    height: 'inherit',
+                    width: '100%',
+                    height: '100%',
                 }}
             >
                 <input
                     style={{
-                        width: 'inherit',
-                        height: 'inherit',
+                        width: field.width,
+                        height: field.height,
                         margin: 0,
-                        borderColor: 'inherit',
+                        border: 'none',
                     }}
                     type="radio"
                     value={field.id}
@@ -158,13 +169,8 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
             <input
                 readOnly={readOnly}
                 type="date"
-                style={{
-                    background: 'inherit',
-                    width: 'inherit',
-                    height: 'inherit',
-                    borderColor: 'inherit',
-                    fontSize: 'inherit',
-                }}
+                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                style={fillableTextStyles}
                 disabled={!isFillable}
                 id={field.path}
                 name={field.path}
@@ -183,13 +189,8 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
             <input
                 readOnly={readOnly}
                 type="number"
-                style={{
-                    background: 'inherit',
-                    width: 'inherit',
-                    height: 'inherit',
-                    borderColor: 'inherit',
-                    fontSize: 'inherit',
-                }}
+                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                style={fillableTextStyles}
                 disabled={!isFillable}
                 id={field.path}
                 name={field.path}

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

@@ -24,7 +24,7 @@ interface GenericFieldTextProps {
 
 export const GenericFieldText: FC<GenericFieldTextProps> = ({ data }) => {
     return (
-        <div className="dte-pdf-field-value">
+        <div className="dte-pdf-field-value dte-pdf-field-text--wrapped">
             <pre className="inline-editable-html-text">{data?.value ?? ''}</pre>
         </div>
     );

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

@@ -111,7 +111,10 @@ export const PdfView: FC<PdfViewProps> = ({
                             >
                                 {(field.type === FieldTypeEnum.dataModel ||
                                     field.type === FieldTypeEnum.forms) && (
-                                    <PdfViewDataModel field={field} data={data} />
+                                    <PdfViewDataModel
+                                        field={field}
+                                        data={viewMode === 'preview' ? previewData : data}
+                                    />
                                 )}
                                 {field.type === FieldTypeEnum.eSign && (
                                     <PdfViewESign field={field} />

package/src/constants/field.constants.ts

@@ -20,6 +20,11 @@ export const FIELD_CONSTANTS = {
 
 export const DEFAULT_FIELD_FONT_SIZE = 8;
 
+/** Matches the PdfSharp default face used by `/conversions/templatetopdf`. */
+export const DEFAULT_FIELD_FONT_FAMILY = 'Arial, Helvetica, sans-serif';
+
+export const DEFAULT_FIELD_FONT_WEIGHT = 'normal' as const;
+
 export const FIELD_FONT_SIZE_OPTIONS = Array.from({ length: 17 }, (_, index) => {
     return 4 + index;
 });

package/src/hooks/useLookupOptions.ts

@@ -1,45 +1,62 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
     createLookupRequestId,
     emitLookupOptionsRequest,
-    isSearchableLookupSource,
     type LookupOption,
     onLookupOptionsResponse,
 } from '../interface/host-events';
 
 /**
- * - `idle`     -> no lookup source (or a searchable source we skip for now): use free-text input.
- * - `loading`  -> request in flight: show a disabled/loading value control.
- * - `ready`    -> host returned options: render the dropdown.
- * - `fallback` -> empty/error/timeout: fall back to free-text so the user is never blocked.
+ * - `idle`       -> no lookup source: use free-text input.
+ * - `loading`    -> initial request in flight: show a disabled/loading value control.
+ * - `static`     -> host returned a full list: render a locally-filtered dropdown.
+ * - `searchable` -> host wants per-query search: render an async dropdown driven by `loadOptions`.
+ * - `fallback`   -> empty/error/timeout: fall back to free-text so the user is never blocked.
  */
-export type LookupOptionsStatus = 'idle' | 'loading' | 'ready' | 'fallback';
+export type LookupOptionsStatus = 'idle' | 'loading' | 'static' | 'searchable' | 'fallback';
 
 /** Time to wait for the host before falling back to free-text input. */
 const LOOKUP_OPTIONS_TIMEOUT_MS = 10_000;
 
 interface UseLookupOptionsResult {
     status: LookupOptionsStatus;
+    /** Full option list for `static` sources; empty for `searchable`/`idle`/`fallback`. */
     options: LookupOption[];
+    /**
+     * Per-query resolver for `searchable` sources. Emits a request with the typed `query` and
+     * resolves with the host's fresh list (or `[]` on timeout). Wire this into an async dropdown
+     * (e.g. Anvil2 `SelectField`'s `loadOptions`).
+     */
+    loadOptions: (query: string) => Promise<LookupOption[]>;
+    /**
+     * Resolve the option(s) for already-stored keys (exact match, not a text search). Used on open
+     * to turn a saved searchable value back into its human-readable label. Resolves with `[]` on
+     * timeout.
+     */
+    resolveOptions: (keys: string[]) => Promise<LookupOption[]>;
 }
 
 /**
  * Requests host-resolved dropdown options for a field's `fieldLookupSource` and exposes the
  * resulting render state.
  *
- * Re-runs whenever `sourceKey` changes, ignores stale responses whose `requestId` does not match
- * the latest request, and tears down its listener/timeout on unmount or source change. Falls back
- * to free text for empty/searchable sources and on error/timeout so the user is never blocked.
+ * Fires a single query-less request whenever `sourceKey` changes. The host's response decides the
+ * mode: a full list (`static`, filtered locally) or a searchable source (`searchable`, driven by
+ * `loadOptions` per keystroke). Ignores stale responses whose `requestId` does not match the latest
+ * request, and tears down its listener/timeout on unmount or source change. Falls back to free text
+ * on empty/error/timeout so the user is never blocked.
  */
 export const useLookupOptions = (sourceKey: string | undefined): UseLookupOptionsResult => {
     const [status, setStatus] = useState<LookupOptionsStatus>('idle');
     const [options, setOptions] = useState<LookupOption[]>([]);
     const latestRequestIdRef = useRef<string | null>(null);
+    const sourceKeyRef = useRef<string | undefined>(sourceKey);
 
     useEffect(() => {
+        sourceKeyRef.current = sourceKey;
         const normalizedSourceKey = sourceKey?.trim();
-        // No source, or a searchable source we intentionally skip for now.
-        if (!normalizedSourceKey || isSearchableLookupSource(normalizedSourceKey)) {
+
+        if (!normalizedSourceKey) {
             latestRequestIdRef.current = null;
             setStatus('idle');
             setOptions([]);
@@ -65,9 +82,14 @@ export const useLookupOptions = (sourceKey: string | undefined): UseLookupOption
                 return;
             }
             clearTimeout(timeoutId);
+            if (response.searchable) {
+                setOptions([]);
+                setStatus('searchable');
+                return;
+            }
             if (response.options.length > 0) {
                 setOptions(response.options);
-                setStatus('ready');
+                setStatus('static');
             } else {
                 setOptions([]);
                 setStatus('fallback');
@@ -82,5 +104,45 @@ export const useLookupOptions = (sourceKey: string | undefined): UseLookupOption
         };
     }, [sourceKey]);
 
-    return { status, options };
+    const requestOptions = useCallback((payload: { query?: string; keys?: string[] }) => {
+        const normalizedSourceKey = sourceKeyRef.current?.trim();
+        if (!normalizedSourceKey) {
+            return Promise.resolve<LookupOption[]>([]);
+        }
+
+        return new Promise<LookupOption[]>(resolve => {
+            const requestId = createLookupRequestId();
+            let settled = false;
+
+            const finish = (result: LookupOption[]) => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                clearTimeout(timeoutId);
+                unsubscribe();
+                resolve(result);
+            };
+
+            const timeoutId = setTimeout(() => finish([]), LOOKUP_OPTIONS_TIMEOUT_MS);
+
+            const unsubscribe = onLookupOptionsResponse(response => {
+                if (response.requestId !== requestId) {
+                    return;
+                }
+                finish(response.options);
+            });
+
+            emitLookupOptionsRequest({ requestId, sourceKey: normalizedSourceKey, ...payload });
+        });
+    }, []);
+
+    const loadOptions = useCallback((query: string) => requestOptions({ query }), [requestOptions]);
+
+    const resolveOptions = useCallback(
+        (keys: string[]) => requestOptions({ keys }),
+        [requestOptions],
+    );
+
+    return { status, options, loadOptions, resolveOptions };
 };

package/src/interface/host-events.ts

@@ -6,6 +6,15 @@
  * data — it asks the HOST for it over the EventTarget bus below and renders whatever the host
  * returns.
  *
+ * Two host-driven modes are supported (the host decides, the editor adapts):
+ *   1. Full-list source (e.g. "state", "jobType"): the host returns every option on the first
+ *      request and omits `searchable`. The editor caches that list and filters it LOCALLY as the
+ *      user types — no further requests are sent.
+ *   2. Searchable source (e.g. "city"): the list is too large to send at once. The host returns
+ *      `searchable: true` (typically with an empty list on the first, query-less request). The
+ *      editor then re-requests with the typed `query` on each keystroke and the host returns a
+ *      fresh, server-filtered list per query.
+ *
  * Transport mirrors the unlayer `displayConditionController` / `lookupOptionsController` pattern: a
  * module-scoped `EventTarget` shared by every consumer of this package (no global `window`
  * pollution, no cross-instance leakage). The host imports `onLookupOptionsRequest` /
@@ -16,7 +25,7 @@
  *   - "dte-byod-client-mfe:lookup-options-response"  (host -> editor)
  *
  * The host-side resolver is implemented separately (it wires these events to the app's data
- * providers, e.g. job types / states).
+ * providers, e.g. job types / states / cities).
  */
 
 /** A single selectable option for a lookup-backed condition value. */
@@ -33,8 +42,18 @@ export interface LookupOptionsRequest {
     requestId: string;
     /** The field's `options.fieldLookupSource` value. */
     sourceKey: string;
-    /** Reserved for searchable sources (e.g. "city"); omitted for full-list sources. */
+    /**
+     * The text the user has typed. Sent on each (debounced) keystroke once the host has declared
+     * the source `searchable`. Empty/omitted on the first request, where the host decides whether
+     * the source is searchable.
+     */
     query?: string;
+    /**
+     * Resolve mode: the editor is asking the host to return the option(s) for these EXACT stored
+     * keys (not a text search). Used on open to turn a saved searchable value (a bare key) back into
+     * a human-readable label. When present the host should match by key and ignore `query`.
+     */
+    keys?: string[];
 }
 
 /** host -> editor: the resolved options for a previously emitted request. */
@@ -42,6 +61,12 @@ export interface LookupOptionsResponse {
     /** Echoes {@link LookupOptionsRequest.requestId}; responses with a stale id are ignored. */
     requestId: string;
     options: LookupOption[];
+    /**
+     * Set to `true` by the host when the source must be searched per query (server-side). When
+     * omitted/false the editor treats `options` as the complete list and switches to local
+     * filtering. Only read from the first (query-less) response for a given source.
+     */
+    searchable?: boolean;
 }
 
 /** editor -> host event name. */
@@ -49,19 +74,6 @@ export const LOOKUP_OPTIONS_REQUEST_EVENT = 'dte-byod-client-mfe:lookup-options-
 /** host -> editor event name. */
 export const LOOKUP_OPTIONS_RESPONSE_EVENT = 'dte-byod-client-mfe:lookup-options-response';
 
-/**
- * Lookup sources that require the host to search an API per typed query. These keep the free-text
- * input for now (the editor only handles full-list, load-once sources).
- */
-export const SEARCHABLE_LOOKUP_SOURCES = ['city'] as const;
-
-export type SearchableLookupSource = (typeof SEARCHABLE_LOOKUP_SOURCES)[number];
-
-/** True when a lookup source is searchable (host-side per-query search) rather than a full list. */
-export const isSearchableLookupSource = (sourceKey: string | undefined): boolean => {
-    return !!sourceKey && (SEARCHABLE_LOOKUP_SOURCES as readonly string[]).includes(sourceKey);
-};
-
 /** Generate a unique request id for correlating request/response pairs. */
 export const createLookupRequestId = (): string => {
     return `lookup-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;

package/src/interface/types.ts

@@ -71,6 +71,12 @@ export interface DisplayConditionGroup {
 export interface DisplayConditionSingle {
     id: string;
     value: string;
+    /**
+     * Human-readable label for `value` when it came from a searchable lookup source. Persisted so a
+     * saved condition can render the selected option's label on reopen (the searched list is empty
+     * until the user types). Display-only — never used in condition evaluation.
+     */
+    valueLabel?: string;
     operator: string;
     dataPointKey: string;
     logicalOperator?: 'and' | 'or';
@@ -79,6 +85,8 @@ export interface DisplayConditionSingle {
 
 export interface PdfFieldStyles {
     fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold';
 }
 
 export interface PdfField {

package/src/styles/inline-editable.css

@@ -18,4 +18,5 @@
 .inline-editable-html-text {
     margin: var(--spacing-0, 0);
     white-space: pre-wrap;
+    font-family: 'Arial', sans-serif;
 }