@industream/flowmaker-flowbox-ui-components 0.0.13 → 0.0.15

package/dist/DCCatalogEntry.svelte

@@ -2,6 +2,11 @@
     import { DataCatalogClient } from '@industream/datacatalog-client';
     import type { CatalogEntry, DataType, SourceType } from '@industream/datacatalog-client/dto';
 
+    interface FilterOptions {
+        searchtext?: string | null;   // Case-insensitive LIKE %text% filter on entry name
+        datasetfilter?: string | null; // Filter entries by sourceParams.dataset
+    }
+
     interface Props {
         id?: string;
         dcapiurl?: string;
@@ -9,8 +14,9 @@
         datatypefilter?: DataType | DataType[] | null;
         namefilter?: string | string[] | null;
         initialselection?: string | null;
-        onentryselect?: (entry: CatalogEntry) => void;
-        onitemsloaded?: (entries: CatalogEntry[]) => void;
+        onentryselect?: (entry: CatalogEntry | null) => void;
+        onitemsloaded?: (filtered: CatalogEntry[], all: CatalogEntry[]) => void;
+        onsearchmiss?: (text: string) => void;  // Called when searchtext matches nothing
     }
 
     let {
@@ -21,7 +27,8 @@
         namefilter = null,
         initialselection = null,
         onentryselect = null,
-        onitemsloaded = null
+        onitemsloaded = null,
+        onsearchmiss = null
     }: Props = $props();
 
     let catalogEntries = $state<CatalogEntry[]>([]);
@@ -31,6 +38,13 @@
     let error = $state<string | null>(null);
     let dropdownRef = $state<HTMLElement | null>(null);
 
+    // Active dynamic filters (set via setFilters method)
+    let activeSearchtext: string | null = null;
+    let activeDatasetfilter: string | null = null;
+    let autoSelectedId: string | null = null;
+    let searchMissText = $state<string | null>(null);
+    let multipleMatchText = $state<string | null>(null);
+
     // Load catalog entries when component mounts or dcapiurl/sourcetypefilter changes
     $effect(() => {
         // Read sourcetypefilter to establish dependency tracking
@@ -40,11 +54,6 @@
         }
     });
 
-    // Apply client-side filters when entries or filters change
-    $effect(() => {
-        filteredEntries = applyFilters(catalogEntries);
-    });
-
     // Inject styles into shadow DOM to fix trigger-label width
     $effect(() => {
         if (dropdownRef) {
@@ -60,11 +69,10 @@
         }
     });
 
-    function applyFilters(entries: CatalogEntry[]): CatalogEntry[] {
+    function applyBaseFilters(entries: CatalogEntry[]): CatalogEntry[] {
         let result = entries;
 
         // Filter by source type name (from sourceConnection.sourceType.name)
-        // Note: Server-side filtering is now done via API, this is just for additional client-side filtering if needed
         if (sourcetypefilter && sourcetypefilter.length > 0) {
             const sourceTypeNames = Array.isArray(sourcetypefilter) ? sourcetypefilter : [sourcetypefilter];
             result = result.filter(entry =>
@@ -84,6 +92,54 @@
         return result;
     }
 
+    function applyDynamicFilters(entries: CatalogEntry[], { skipSearch = false } = {}): CatalogEntry[] {
+        let result = entries;
+
+        if (activeDatasetfilter) {
+            result = result.filter(entry =>
+                entry.sourceParams?.dataset === activeDatasetfilter
+            );
+        }
+
+        if (!skipSearch && activeSearchtext?.trim()) {
+            const needle = activeSearchtext.trim().toLowerCase();
+            result = result.filter(entry =>
+                entry.name?.toLowerCase().includes(needle)
+            );
+        }
+
+        return result;
+    }
+
+    function runFilters() {
+        const base = applyBaseFilters(catalogEntries);
+        let result = applyDynamicFilters(base);
+
+        // Search-miss fallback: drop search filter and notify consumer
+        if (result.length === 0 && activeSearchtext?.trim()) {
+            searchMissText = activeSearchtext.trim();
+            multipleMatchText = null;
+            result = applyDynamicFilters(base, { skipSearch: true });
+            onsearchmiss?.(activeSearchtext.trim());
+        } else {
+            searchMissText = null;
+            multipleMatchText = (result.length > 1 && activeSearchtext?.trim()) ? activeSearchtext.trim() : null;
+        }
+
+        filteredEntries = result;
+
+        // Auto-select / auto-clear only when dynamic filters are active
+        if (activeSearchtext?.trim() || activeDatasetfilter) {
+            if (result.length === 1 && result[0].id !== autoSelectedId) {
+                autoSelectedId = result[0].id;
+                select(result[0]);
+            } else if (result.length !== 1) {
+                autoSelectedId = null;
+                select(null);
+            }
+        }
+    }
+
     async function loadCatalogEntries() {
         loading = true;
         error = null;
@@ -104,8 +160,13 @@
 
             const result = await client.catalogEntries.get(filters);
             catalogEntries = result.items || [];
-            // Apply filters synchronously so initialselection works
-            filteredEntries = applyFilters(catalogEntries);
+            // Apply base filters synchronously so initialselection works
+            filteredEntries = applyBaseFilters(catalogEntries);
+
+            // Re-apply dynamic filters if any are active
+            if (activeSearchtext || activeDatasetfilter) {
+                runFilters();
+            }
 
             // Auto-select initial selection if provided
             if (initialselection) {
@@ -116,7 +177,7 @@
                 }
             }
 
-            onitemsloaded?.(filteredEntries);
+            onitemsloaded?.(filteredEntries, catalogEntries);
         } catch (e) {
             console.error('Failed to load catalog entries:', e);
             error = e.message || 'Failed to load catalog entries';
@@ -138,20 +199,29 @@
         }
     }
 
-    // Exposed method to programmatically select a catalog entry
-    export function select(idOrEntry: string | CatalogEntry) {
+    // Set dynamic filters and re-run filter logic. Call with {} to clear all dynamic filters.
+    export function setFilters(opts: FilterOptions) {
+        activeSearchtext = opts.searchtext ?? null;
+        activeDatasetfilter = opts.datasetfilter ?? null;
+        runFilters();
+    }
+
+    // Programmatically select a catalog entry (pass null to clear)
+    export function select(idOrEntry: string | CatalogEntry | null) {
+        if (!idOrEntry) {
+            selectedValue = '';
+            if (dropdownRef) dropdownRef.value = '';
+            onentryselect?.(null);
+            return;
+        }
         const id = typeof idOrEntry === 'string' ? idOrEntry : idOrEntry?.id;
         if (!id) return;
 
         const entry = filteredEntries.find(ce => ce.id === id);
         if (entry) {
             selectedValue = id;
-            if (dropdownRef) {
-                dropdownRef.value = id;
-            }
-            if (onentryselect) {
-                onentryselect(entry);
-            }
+            if (dropdownRef) dropdownRef.value = id;
+            onentryselect?.(entry);
         }
     }
 
@@ -169,6 +239,13 @@
     export function getAllEntries(): CatalogEntry[] {
         return catalogEntries;
     }
+
+    // Reload entries from the API, optionally auto-selecting an entry by ID after reload
+    export function reload(selectAfterReload?: string) {
+        loadCatalogEntries().then(() => {
+            if (selectAfterReload) select(selectAfterReload);
+        });
+    }
 </script>
 
 {#if loading}
@@ -208,8 +285,42 @@
             </cds-dropdown-item>
         {/each}
     </cds-dropdown>
+    {#if searchMissText}
+        <div class="search-miss search-miss-muted">
+            <svg viewBox="0 0 32 32" fill="currentColor" width="14" height="14">
+                <path d="M16 2a14 14 0 1014 14A14 14 0 0016 2zm-1.13 5h2.25v12h-2.25zm1.13 17a1.5 1.5 0 111.5-1.5A1.5 1.5 0 0116 24z"/>
+            </svg>
+            <span>No match for "{searchMissText}" — showing all entries</span>
+        </div>
+    {/if}
+    {#if multipleMatchText}
+        <div class="search-miss search-miss-muted">
+            <svg viewBox="0 0 32 32" fill="currentColor" width="14" height="14">
+                <path d="M16 2a14 14 0 1014 14A14 14 0 0016 2zm-1.13 5h2.25v12h-2.25zm1.13 17a1.5 1.5 0 111.5-1.5A1.5 1.5 0 0116 24z"/>
+            </svg>
+            <span>Multiple entries found for "{multipleMatchText}" — please make a selection</span>
+        </div>
+    {/if}
 {/if}
 
 <style>
-    /* Styles moved to inline for shadow DOM compatibility */
+    .search-miss {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        margin-top: 0.25rem;
+        font-size: 0.875rem;
+        background: var(--cds-support-warning, #f1c21b);
+        color: #161616;
+    }
+
+    .search-miss-muted {
+        background: var(--cds-layer-02, #e0e0e0);
+        color: var(--cds-text-secondary, #525252);
+    }
+
+    .search-miss svg {
+        flex-shrink: 0;
+    }
 </style>

package/dist/DCCatalogEntry.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { CatalogEntry, DataType } from '@industream/datacatalog-client/dto';
+interface FilterOptions {
+    searchtext?: string | null;
+    datasetfilter?: string | null;
+}
 interface Props {
     id?: string;
     dcapiurl?: string;
@@ -6,14 +10,17 @@ interface Props {
     datatypefilter?: DataType | DataType[] | null;
     namefilter?: string | string[] | null;
     initialselection?: string | null;
-    onentryselect?: (entry: CatalogEntry) => void;
-    onitemsloaded?: (entries: CatalogEntry[]) => void;
+    onentryselect?: (entry: CatalogEntry | null) => void;
+    onitemsloaded?: (filtered: CatalogEntry[], all: CatalogEntry[]) => void;
+    onsearchmiss?: (text: string) => void;
 }
 declare const DCCatalogEntry: import("svelte").Component<Props, {
-    select: (idOrEntry: string | CatalogEntry) => void;
+    setFilters: (opts: FilterOptions) => void;
+    select: (idOrEntry: string | CatalogEntry | null) => void;
     getSelection: () => CatalogEntry | null;
     getEntries: () => CatalogEntry[];
     getAllEntries: () => CatalogEntry[];
+    reload: (selectAfterReload?: string) => void;
 }, "">;
 type DCCatalogEntry = ReturnType<typeof DCCatalogEntry>;
 export default DCCatalogEntry;

package/dist/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

@@ -5,12 +5,14 @@
      * Composes TagBrowser (searchable table with multi-select) and SelectedTags
      * (collapsible summary with remove). Owns the DataCatalog fetch lifecycle.
      *
-     * Column keys reference the COLUMN_DEFS registry in columns.ts:
-     *   'name'     → CatalogEntry.name              (text)
-     *   'dataType' → CatalogEntry.dataType           (pill)
-     *   'nodeId'   → CatalogEntry.sourceParams.nodeId (code)
-     *   'unit'     → CatalogEntry.metadata.unit       (pill)
-     *   'labels'   → CatalogEntry.labels[]            (label pills)
+     * Uses `client.catalogEntries.search()` (v1.4.0+) for both initial load and
+     * server-side search. Filters by `sourceConnections` to scope entries.
+     *
+     * Load strategy:
+     *   1. Initial load fetches up to MAX_ENTRIES + 1 items.
+     *   2. If ≤ MAX_ENTRIES → client mode (client-side search in TagBrowser).
+     *   3. If > MAX_ENTRIES → server mode (TagBrowser search triggers server search
+     *      with 1s debounce, AbortSignal cancels in-flight requests).
      *
      * @prop dcApiUrl           — DataCatalog API base URL
      * @prop sourceConnectionId — Filters catalog entries by source connection
@@ -28,6 +30,8 @@
     import TagBrowser from './TagBrowser.svelte';
     import SelectedTags from './SelectedTags.svelte';
 
+    const MAX_ENTRIES = 100;
+
     interface Props {
         dcApiUrl?: string;
         sourceConnectionId?: string;
@@ -53,24 +57,65 @@
     }: Props = $props();
 
     let loading = $state(false);
+    let searching = $state(false);
     let error = $state('');
+    let tooMany = $state(false);
+
+    /** Abort controller for cancelling in-flight search requests */
+    let searchAbort: AbortController | null = null;
+
+    /** Cached client instance — recreated when dcApiUrl changes */
+    let client: DataCatalogClient | null = null;
+    let clientUrl = '';
+
+    function getClient(apiUrl: string): DataCatalogClient {
+        if (client && clientUrl === apiUrl) return client;
+        client = new DataCatalogClient({ baseUrl: apiUrl });
+        clientUrl = apiUrl;
+        return client;
+    }
 
     $effect(() => {
         if (dcApiUrl && sourceConnectionId) {
-            loadEntries(dcApiUrl, sourceConnectionId);
+            loadInitial(dcApiUrl, sourceConnectionId);
         } else {
             entries = [];
             error = '';
+            tooMany = false;
         }
     });
 
-    async function loadEntries(apiUrl: string, connId: string) {
+    /**
+     * Initial load — fetch MAX_ENTRIES + 1 to detect overflow.
+     * If ≤ MAX_ENTRIES items, stay in client mode.
+     * If more, switch to server search mode.
+     */
+    async function loadInitial(apiUrl: string, connId: string) {
+        // Cancel any in-flight search
+        searchAbort?.abort();
+        searchAbort = null;
+
         loading = true;
         error = '';
+        tooMany = false;
+        entries = [];
+
         try {
-            const client = new DataCatalogClient({ baseUrl: apiUrl });
-            const result = await client.catalogEntries.get({ sourceConnectionIds: [connId] });
-            entries = result.items ?? [];
+            const dc = getClient(apiUrl);
+            const result = await dc.catalogEntries.search('%', {
+                sourceConnectionIds: [connId],
+                limit: MAX_ENTRIES + 1
+            });
+            const items = result.items ?? [];
+
+            if (items.length > MAX_ENTRIES) {
+                // Too many — enter server search mode, don't show entries
+                tooMany = true;
+                entries = [];
+            } else {
+                tooMany = false;
+                entries = items;
+            }
         } catch (err: any) {
             error = err.message ?? 'Failed to load catalog entries';
             entries = [];
@@ -78,6 +123,45 @@
             loading = false;
         }
     }
+
+    /**
+     * Server-side search — called by TagBrowser when in server mode (tooMany).
+     * Cancels previous in-flight request via AbortSignal.
+     */
+    function handleServerSearch(query: string) {
+        if (!dcApiUrl || !sourceConnectionId) return;
+
+        // Cancel previous in-flight search
+        searchAbort?.abort();
+
+        if (!query) {
+            // Empty query in too-many mode → clear results, show hint again
+            entries = [];
+            searching = false;
+            return;
+        }
+
+        const abort = new AbortController();
+        searchAbort = abort;
+        searching = true;
+
+        const dc = getClient(dcApiUrl);
+        dc.catalogEntries.search(query, {
+            sourceConnectionIds: [sourceConnectionId],
+            limit: MAX_ENTRIES
+        }, abort.signal)
+            .then((result) => {
+                if (abort.signal.aborted) return;
+                entries = result.items ?? [];
+                searching = false;
+            })
+            .catch((err) => {
+                if (abort.signal.aborted) return;
+                error = err.message ?? 'Search failed';
+                entries = [];
+                searching = false;
+            });
+    }
 </script>
 
 <TagBrowser
@@ -88,6 +172,9 @@
     {error}
     {emptyMessage}
     {onSelectionChange}
+    onSearch={tooMany ? handleServerSearch : null}
+    {searching}
+    {tooMany}
 />
 
 {#if selectedIds.length > 0}

package/dist/DCCatalogEntryPicker/SelectedTags.svelte

@@ -56,17 +56,18 @@
                             <div class="tag-info">
                                 {#each columnDescriptors as columnDescriptor, index (columnDescriptor.key)}
                                     {@const val = resolveValue(entry, columnDescriptor.key)}
+                                    {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
                                     {#if index === 0}
                                         <!-- First column: bold primary label -->
-                                        <span class="tag-primary">{val ?? '-'}</span>
+                                        <span class="tag-primary">{displayVal ?? '-'}</span>
                                     {:else if columnDescriptor.type === 'labels' && Array.isArray(val)}
                                         {#each val as label (label.id)}
                                             <span class="meta-item">{label.name}</span>
                                         {/each}
                                     {:else if columnDescriptor.type === 'code'}
-                                        {#if val}<code class="tag-code">{val}</code>{/if}
+                                        {#if displayVal}<code class="tag-code">{displayVal}</code>{/if}
                                     {:else}
-                                        {#if val}<span class="meta-item">{val}</span>{/if}
+                                        {#if displayVal}<span class="meta-item">{displayVal}</span>{/if}
                                     {/if}
                                 {/each}
                             </div>

package/dist/DCCatalogEntryPicker/TagBrowser.svelte

@@ -8,10 +8,14 @@
         loading = false,
         error = '',
         emptyMessage = 'No entries found for this source connection.',
-        onSelectionChange = null
+        onSelectionChange = null,
+        onSearch = null,
+        searching = false,
+        tooMany = false
     } = $props();
 
     let searchQuery = $state('');
+    let debounceTimer = null;
 
     /** Resolved column descriptors for rendering — maps each column key to its label, resolver and render type */
     const columnDescriptors = $derived(
@@ -20,7 +24,12 @@
             .filter(Boolean)
     );
 
+    /**
+     * When onSearch is set (server mode), entries are already filtered server-side.
+     * When onSearch is NOT set (client mode), filter locally.
+     */
     const filtered = $derived(() => {
+        if (onSearch) return entries;
         if (!searchQuery.trim()) return entries;
         const q = searchQuery.toLowerCase();
         return entries.filter(e => resolveSearchText(e, columns).includes(q));
@@ -30,6 +39,20 @@
     const totalCount = $derived(entries.length);
     const allVisibleSelected = $derived(filtered().length > 0 && filtered().every(e => selectedIds.includes(e.id)));
 
+    /** Whether to show the "too many entries" hint instead of the table */
+    const showTooManyHint = $derived(tooMany && !searchQuery.trim());
+
+    function handleSearchInput(e) {
+        searchQuery = e.target.value;
+        if (!onSearch) return;
+
+        // Debounce 1s for server search
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+            onSearch(searchQuery.trim());
+        }, 1000);
+    }
+
     function toggleEntry(id) {
         selectedIds = selectedIds.indexOf(id) >= 0
             ? selectedIds.filter(s => s !== id)
@@ -61,12 +84,21 @@
             <svg class="search-icon" viewBox="0 0 16 16" width="16" height="16">
                 <path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path>
             </svg>
-            <input type="text" class="search-input" placeholder="Search..." bind:value={searchQuery} />
+            <input
+                type="text"
+                class="search-input"
+                placeholder={tooMany ? "Search to find entries..." : "Search..."}
+                value={searchQuery}
+                oninput={handleSearchInput}
+            />
+            {#if searching}
+                <div class="search-spinner"></div>
+            {/if}
         </div>
         <div class="toolbar-actions">
             <span class="count-indicator">{selectedCount} / {totalCount} selected</span>
-            <button class="action-button" onclick={selectAll} disabled={loading || filtered().length === 0}>Select All</button>
-            <button class="action-button" onclick={deselectAll} disabled={loading || selectedCount === 0}>Deselect All</button>
+            <button class="action-button" onclick={selectAll} disabled={loading || searching || filtered().length === 0}>Select All</button>
+            <button class="action-button" onclick={deselectAll} disabled={loading || searching || selectedCount === 0}>Deselect All</button>
         </div>
     </div>
 
@@ -77,7 +109,12 @@
             <svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.5h1.5v5h-1.5zm.75 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" fill="currentColor"></path></svg>
             <span>{error}</span>
         </div>
-    {:else if entries.length === 0}
+    {:else if showTooManyHint}
+        <div class="state-message too-many-state">
+            <svg viewBox="0 0 16 16" width="16" height="16"><path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path></svg>
+            <span>Too many entries. Type in the search box to refine.</span>
+        </div>
+    {:else if entries.length === 0 && !searching}
         <div class="state-message empty-state"><span>{emptyMessage}</span></div>
     {:else}
         <div class="table-container">
@@ -102,17 +139,18 @@
                             <!-- Render each column cell according to its type (text, code, pill, labels) -->
                             {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
                                 {@const val = resolveValue(entry, columnDescriptor.key)}
-                                <td title={columnDescriptor.type === 'text' ? (val ?? '') : ''}>
+                                {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
+                                <td title={columnDescriptor.type === 'text' ? (displayVal ?? '') : ''}>
                                     {#if columnDescriptor.type === 'labels' && Array.isArray(val)}
                                         {#each val as label (label.id)}
                                             <span class="label-pill">{label.name}</span>
                                         {/each}
                                     {:else if columnDescriptor.type === 'code'}
-                                        <code>{val ?? '-'}</code>
+                                        <code>{displayVal ?? '-'}</code>
                                     {:else if columnDescriptor.type === 'pill'}
-                                        {#if val}<span class="pill">{val}</span>{:else}-{/if}
+                                        {#if displayVal}<span class="pill">{displayVal}</span>{:else}-{/if}
                                     {:else}
-                                        {val ?? '-'}
+                                        {displayVal ?? '-'}
                                     {/if}
                                 </td>
                             {/each}
@@ -121,7 +159,7 @@
                 </tbody>
             </table>
         </div>
-        {#if filtered().length !== entries.length}
+        {#if !onSearch && filtered().length !== entries.length}
             <div class="filter-info">Showing {filtered().length} of {entries.length} entries</div>
         {/if}
     {/if}
@@ -141,6 +179,13 @@
     }
     .search-input::placeholder { color: var(--cds-text-placeholder, #6f6f6f); }
     .search-input:focus { border-bottom-color: var(--cds-focus, #0f62fe); }
+    .search-spinner {
+        position: absolute; right: 0.75rem;
+        width: 0.875rem; height: 0.875rem;
+        border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
+        border-top-color: var(--cds-interactive, #0f62fe);
+        border-radius: 50%; animation: spin 0.8s linear infinite;
+    }
     .toolbar-actions { display: flex; align-items: center; gap: 0.5rem; }
     .count-indicator { font-size: 0.75rem; color: var(--cds-text-secondary, #c6c6c6); margin-right: auto; }
     .action-button {
@@ -158,6 +203,7 @@
     }
     .error-state { color: var(--cds-support-error, #fa4d56); }
     .empty-state { color: var(--cds-text-helper, #8d8d8d); }
+    .too-many-state { color: var(--cds-support-warning, #f1c21b); }
     .spinner {
         width: 1rem; height: 1rem;
         border: 2px solid var(--cds-border-subtle-01, #e0e0e0);

package/dist/DCCatalogEntryPicker/TagBrowser.svelte.d.ts

@@ -11,6 +11,9 @@ declare const TagBrowser: import("svelte").Component<{
     error?: string;
     emptyMessage?: string;
     onSelectionChange?: any;
+    onSearch?: any;
+    searching?: boolean;
+    tooMany?: boolean;
 }, {}, "selectedIds">;
 type $$ComponentProps = {
     entries?: any[];
@@ -20,5 +23,8 @@ type $$ComponentProps = {
     error?: string;
     emptyMessage?: string;
     onSelectionChange?: any;
+    onSearch?: any;
+    searching?: boolean;
+    tooMany?: boolean;
 };
 import { DEFAULT_COLUMNS } from './picker-column-helpers';

package/dist/DCCatalogEntryPicker/picker-column-helpers.d.ts

@@ -43,6 +43,8 @@ export interface ColumnDef {
     label: string;
     resolve: (entry: CatalogEntry) => unknown;
     type: ColumnType;
+    /** Optional formatter function to transform the resolved value for display */
+    format?: (value: unknown, key: string) => string;
 }
 /**
  * Static column definitions for top-level CatalogEntry fields.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industream/flowmaker-flowbox-ui-components",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Reusable Svelte components for FlowMaker FlowBox UI",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -43,9 +43,10 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@industream/datacatalog-client": "^1.0.0-preview.2"
+    "@industream/datacatalog-client": "^1.4.0"
   },
   "devDependencies": {
+    "@industream/datacatalog-client": "1.4.1",
     "svelte": "^5.0.0",
     "vite": "^6.0.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",

package/src/DCCatalogEntry.svelte

@@ -2,6 +2,11 @@
     import { DataCatalogClient } from '@industream/datacatalog-client';
     import type { CatalogEntry, DataType, SourceType } from '@industream/datacatalog-client/dto';
 
+    interface FilterOptions {
+        searchtext?: string | null;   // Case-insensitive LIKE %text% filter on entry name
+        datasetfilter?: string | null; // Filter entries by sourceParams.dataset
+    }
+
     interface Props {
         id?: string;
         dcapiurl?: string;
@@ -9,8 +14,9 @@
         datatypefilter?: DataType | DataType[] | null;
         namefilter?: string | string[] | null;
         initialselection?: string | null;
-        onentryselect?: (entry: CatalogEntry) => void;
-        onitemsloaded?: (entries: CatalogEntry[]) => void;
+        onentryselect?: (entry: CatalogEntry | null) => void;
+        onitemsloaded?: (filtered: CatalogEntry[], all: CatalogEntry[]) => void;
+        onsearchmiss?: (text: string) => void;  // Called when searchtext matches nothing
     }
 
     let {
@@ -21,7 +27,8 @@
         namefilter = null,
         initialselection = null,
         onentryselect = null,
-        onitemsloaded = null
+        onitemsloaded = null,
+        onsearchmiss = null
     }: Props = $props();
 
     let catalogEntries = $state<CatalogEntry[]>([]);
@@ -31,6 +38,13 @@
     let error = $state<string | null>(null);
     let dropdownRef = $state<HTMLElement | null>(null);
 
+    // Active dynamic filters (set via setFilters method)
+    let activeSearchtext: string | null = null;
+    let activeDatasetfilter: string | null = null;
+    let autoSelectedId: string | null = null;
+    let searchMissText = $state<string | null>(null);
+    let multipleMatchText = $state<string | null>(null);
+
     // Load catalog entries when component mounts or dcapiurl/sourcetypefilter changes
     $effect(() => {
         // Read sourcetypefilter to establish dependency tracking
@@ -40,11 +54,6 @@
         }
     });
 
-    // Apply client-side filters when entries or filters change
-    $effect(() => {
-        filteredEntries = applyFilters(catalogEntries);
-    });
-
     // Inject styles into shadow DOM to fix trigger-label width
     $effect(() => {
         if (dropdownRef) {
@@ -60,11 +69,10 @@
         }
     });
 
-    function applyFilters(entries: CatalogEntry[]): CatalogEntry[] {
+    function applyBaseFilters(entries: CatalogEntry[]): CatalogEntry[] {
         let result = entries;
 
         // Filter by source type name (from sourceConnection.sourceType.name)
-        // Note: Server-side filtering is now done via API, this is just for additional client-side filtering if needed
         if (sourcetypefilter && sourcetypefilter.length > 0) {
             const sourceTypeNames = Array.isArray(sourcetypefilter) ? sourcetypefilter : [sourcetypefilter];
             result = result.filter(entry =>
@@ -84,6 +92,54 @@
         return result;
     }
 
+    function applyDynamicFilters(entries: CatalogEntry[], { skipSearch = false } = {}): CatalogEntry[] {
+        let result = entries;
+
+        if (activeDatasetfilter) {
+            result = result.filter(entry =>
+                entry.sourceParams?.dataset === activeDatasetfilter
+            );
+        }
+
+        if (!skipSearch && activeSearchtext?.trim()) {
+            const needle = activeSearchtext.trim().toLowerCase();
+            result = result.filter(entry =>
+                entry.name?.toLowerCase().includes(needle)
+            );
+        }
+
+        return result;
+    }
+
+    function runFilters() {
+        const base = applyBaseFilters(catalogEntries);
+        let result = applyDynamicFilters(base);
+
+        // Search-miss fallback: drop search filter and notify consumer
+        if (result.length === 0 && activeSearchtext?.trim()) {
+            searchMissText = activeSearchtext.trim();
+            multipleMatchText = null;
+            result = applyDynamicFilters(base, { skipSearch: true });
+            onsearchmiss?.(activeSearchtext.trim());
+        } else {
+            searchMissText = null;
+            multipleMatchText = (result.length > 1 && activeSearchtext?.trim()) ? activeSearchtext.trim() : null;
+        }
+
+        filteredEntries = result;
+
+        // Auto-select / auto-clear only when dynamic filters are active
+        if (activeSearchtext?.trim() || activeDatasetfilter) {
+            if (result.length === 1 && result[0].id !== autoSelectedId) {
+                autoSelectedId = result[0].id;
+                select(result[0]);
+            } else if (result.length !== 1) {
+                autoSelectedId = null;
+                select(null);
+            }
+        }
+    }
+
     async function loadCatalogEntries() {
         loading = true;
         error = null;
@@ -104,8 +160,13 @@
 
             const result = await client.catalogEntries.get(filters);
             catalogEntries = result.items || [];
-            // Apply filters synchronously so initialselection works
-            filteredEntries = applyFilters(catalogEntries);
+            // Apply base filters synchronously so initialselection works
+            filteredEntries = applyBaseFilters(catalogEntries);
+
+            // Re-apply dynamic filters if any are active
+            if (activeSearchtext || activeDatasetfilter) {
+                runFilters();
+            }
 
             // Auto-select initial selection if provided
             if (initialselection) {
@@ -116,7 +177,7 @@
                 }
             }
 
-            onitemsloaded?.(filteredEntries);
+            onitemsloaded?.(filteredEntries, catalogEntries);
         } catch (e) {
             console.error('Failed to load catalog entries:', e);
             error = e.message || 'Failed to load catalog entries';
@@ -138,20 +199,29 @@
         }
     }
 
-    // Exposed method to programmatically select a catalog entry
-    export function select(idOrEntry: string | CatalogEntry) {
+    // Set dynamic filters and re-run filter logic. Call with {} to clear all dynamic filters.
+    export function setFilters(opts: FilterOptions) {
+        activeSearchtext = opts.searchtext ?? null;
+        activeDatasetfilter = opts.datasetfilter ?? null;
+        runFilters();
+    }
+
+    // Programmatically select a catalog entry (pass null to clear)
+    export function select(idOrEntry: string | CatalogEntry | null) {
+        if (!idOrEntry) {
+            selectedValue = '';
+            if (dropdownRef) dropdownRef.value = '';
+            onentryselect?.(null);
+            return;
+        }
         const id = typeof idOrEntry === 'string' ? idOrEntry : idOrEntry?.id;
         if (!id) return;
 
         const entry = filteredEntries.find(ce => ce.id === id);
         if (entry) {
             selectedValue = id;
-            if (dropdownRef) {
-                dropdownRef.value = id;
-            }
-            if (onentryselect) {
-                onentryselect(entry);
-            }
+            if (dropdownRef) dropdownRef.value = id;
+            onentryselect?.(entry);
         }
     }
 
@@ -169,6 +239,13 @@
     export function getAllEntries(): CatalogEntry[] {
         return catalogEntries;
     }
+
+    // Reload entries from the API, optionally auto-selecting an entry by ID after reload
+    export function reload(selectAfterReload?: string) {
+        loadCatalogEntries().then(() => {
+            if (selectAfterReload) select(selectAfterReload);
+        });
+    }
 </script>
 
 {#if loading}
@@ -208,8 +285,42 @@
             </cds-dropdown-item>
         {/each}
     </cds-dropdown>
+    {#if searchMissText}
+        <div class="search-miss search-miss-muted">
+            <svg viewBox="0 0 32 32" fill="currentColor" width="14" height="14">
+                <path d="M16 2a14 14 0 1014 14A14 14 0 0016 2zm-1.13 5h2.25v12h-2.25zm1.13 17a1.5 1.5 0 111.5-1.5A1.5 1.5 0 0116 24z"/>
+            </svg>
+            <span>No match for "{searchMissText}" — showing all entries</span>
+        </div>
+    {/if}
+    {#if multipleMatchText}
+        <div class="search-miss search-miss-muted">
+            <svg viewBox="0 0 32 32" fill="currentColor" width="14" height="14">
+                <path d="M16 2a14 14 0 1014 14A14 14 0 0016 2zm-1.13 5h2.25v12h-2.25zm1.13 17a1.5 1.5 0 111.5-1.5A1.5 1.5 0 0116 24z"/>
+            </svg>
+            <span>Multiple entries found for "{multipleMatchText}" — please make a selection</span>
+        </div>
+    {/if}
 {/if}
 
 <style>
-    /* Styles moved to inline for shadow DOM compatibility */
+    .search-miss {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        margin-top: 0.25rem;
+        font-size: 0.875rem;
+        background: var(--cds-support-warning, #f1c21b);
+        color: #161616;
+    }
+
+    .search-miss-muted {
+        background: var(--cds-layer-02, #e0e0e0);
+        color: var(--cds-text-secondary, #525252);
+    }
+
+    .search-miss svg {
+        flex-shrink: 0;
+    }
 </style>

package/src/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

@@ -5,12 +5,14 @@
      * Composes TagBrowser (searchable table with multi-select) and SelectedTags
      * (collapsible summary with remove). Owns the DataCatalog fetch lifecycle.
      *
-     * Column keys reference the COLUMN_DEFS registry in columns.ts:
-     *   'name'     → CatalogEntry.name              (text)
-     *   'dataType' → CatalogEntry.dataType           (pill)
-     *   'nodeId'   → CatalogEntry.sourceParams.nodeId (code)
-     *   'unit'     → CatalogEntry.metadata.unit       (pill)
-     *   'labels'   → CatalogEntry.labels[]            (label pills)
+     * Uses `client.catalogEntries.search()` (v1.4.0+) for both initial load and
+     * server-side search. Filters by `sourceConnections` to scope entries.
+     *
+     * Load strategy:
+     *   1. Initial load fetches up to MAX_ENTRIES + 1 items.
+     *   2. If ≤ MAX_ENTRIES → client mode (client-side search in TagBrowser).
+     *   3. If > MAX_ENTRIES → server mode (TagBrowser search triggers server search
+     *      with 1s debounce, AbortSignal cancels in-flight requests).
      *
      * @prop dcApiUrl           — DataCatalog API base URL
      * @prop sourceConnectionId — Filters catalog entries by source connection
@@ -28,6 +30,8 @@
     import TagBrowser from './TagBrowser.svelte';
     import SelectedTags from './SelectedTags.svelte';
 
+    const MAX_ENTRIES = 100;
+
     interface Props {
         dcApiUrl?: string;
         sourceConnectionId?: string;
@@ -53,24 +57,65 @@
     }: Props = $props();
 
     let loading = $state(false);
+    let searching = $state(false);
     let error = $state('');
+    let tooMany = $state(false);
+
+    /** Abort controller for cancelling in-flight search requests */
+    let searchAbort: AbortController | null = null;
+
+    /** Cached client instance — recreated when dcApiUrl changes */
+    let client: DataCatalogClient | null = null;
+    let clientUrl = '';
+
+    function getClient(apiUrl: string): DataCatalogClient {
+        if (client && clientUrl === apiUrl) return client;
+        client = new DataCatalogClient({ baseUrl: apiUrl });
+        clientUrl = apiUrl;
+        return client;
+    }
 
     $effect(() => {
         if (dcApiUrl && sourceConnectionId) {
-            loadEntries(dcApiUrl, sourceConnectionId);
+            loadInitial(dcApiUrl, sourceConnectionId);
         } else {
             entries = [];
             error = '';
+            tooMany = false;
         }
     });
 
-    async function loadEntries(apiUrl: string, connId: string) {
+    /**
+     * Initial load — fetch MAX_ENTRIES + 1 to detect overflow.
+     * If ≤ MAX_ENTRIES items, stay in client mode.
+     * If more, switch to server search mode.
+     */
+    async function loadInitial(apiUrl: string, connId: string) {
+        // Cancel any in-flight search
+        searchAbort?.abort();
+        searchAbort = null;
+
         loading = true;
         error = '';
+        tooMany = false;
+        entries = [];
+
         try {
-            const client = new DataCatalogClient({ baseUrl: apiUrl });
-            const result = await client.catalogEntries.get({ sourceConnectionIds: [connId] });
-            entries = result.items ?? [];
+            const dc = getClient(apiUrl);
+            const result = await dc.catalogEntries.search('%', {
+                sourceConnectionIds: [connId],
+                limit: MAX_ENTRIES + 1
+            });
+            const items = result.items ?? [];
+
+            if (items.length > MAX_ENTRIES) {
+                // Too many — enter server search mode, don't show entries
+                tooMany = true;
+                entries = [];
+            } else {
+                tooMany = false;
+                entries = items;
+            }
         } catch (err: any) {
             error = err.message ?? 'Failed to load catalog entries';
             entries = [];
@@ -78,6 +123,45 @@
             loading = false;
         }
     }
+
+    /**
+     * Server-side search — called by TagBrowser when in server mode (tooMany).
+     * Cancels previous in-flight request via AbortSignal.
+     */
+    function handleServerSearch(query: string) {
+        if (!dcApiUrl || !sourceConnectionId) return;
+
+        // Cancel previous in-flight search
+        searchAbort?.abort();
+
+        if (!query) {
+            // Empty query in too-many mode → clear results, show hint again
+            entries = [];
+            searching = false;
+            return;
+        }
+
+        const abort = new AbortController();
+        searchAbort = abort;
+        searching = true;
+
+        const dc = getClient(dcApiUrl);
+        dc.catalogEntries.search(query, {
+            sourceConnectionIds: [sourceConnectionId],
+            limit: MAX_ENTRIES
+        }, abort.signal)
+            .then((result) => {
+                if (abort.signal.aborted) return;
+                entries = result.items ?? [];
+                searching = false;
+            })
+            .catch((err) => {
+                if (abort.signal.aborted) return;
+                error = err.message ?? 'Search failed';
+                entries = [];
+                searching = false;
+            });
+    }
 </script>
 
 <TagBrowser
@@ -88,6 +172,9 @@
     {error}
     {emptyMessage}
     {onSelectionChange}
+    onSearch={tooMany ? handleServerSearch : null}
+    {searching}
+    {tooMany}
 />
 
 {#if selectedIds.length > 0}

package/src/DCCatalogEntryPicker/SelectedTags.svelte

@@ -56,17 +56,18 @@
                             <div class="tag-info">
                                 {#each columnDescriptors as columnDescriptor, index (columnDescriptor.key)}
                                     {@const val = resolveValue(entry, columnDescriptor.key)}
+                                    {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
                                     {#if index === 0}
                                         <!-- First column: bold primary label -->
-                                        <span class="tag-primary">{val ?? '-'}</span>
+                                        <span class="tag-primary">{displayVal ?? '-'}</span>
                                     {:else if columnDescriptor.type === 'labels' && Array.isArray(val)}
                                         {#each val as label (label.id)}
                                             <span class="meta-item">{label.name}</span>
                                         {/each}
                                     {:else if columnDescriptor.type === 'code'}
-                                        {#if val}<code class="tag-code">{val}</code>{/if}
+                                        {#if displayVal}<code class="tag-code">{displayVal}</code>{/if}
                                     {:else}
-                                        {#if val}<span class="meta-item">{val}</span>{/if}
+                                        {#if displayVal}<span class="meta-item">{displayVal}</span>{/if}
                                     {/if}
                                 {/each}
                             </div>

package/src/DCCatalogEntryPicker/TagBrowser.svelte

@@ -8,10 +8,14 @@
         loading = false,
         error = '',
         emptyMessage = 'No entries found for this source connection.',
-        onSelectionChange = null
+        onSelectionChange = null,
+        onSearch = null,
+        searching = false,
+        tooMany = false
     } = $props();
 
     let searchQuery = $state('');
+    let debounceTimer = null;
 
     /** Resolved column descriptors for rendering — maps each column key to its label, resolver and render type */
     const columnDescriptors = $derived(
@@ -20,7 +24,12 @@
             .filter(Boolean)
     );
 
+    /**
+     * When onSearch is set (server mode), entries are already filtered server-side.
+     * When onSearch is NOT set (client mode), filter locally.
+     */
     const filtered = $derived(() => {
+        if (onSearch) return entries;
         if (!searchQuery.trim()) return entries;
         const q = searchQuery.toLowerCase();
         return entries.filter(e => resolveSearchText(e, columns).includes(q));
@@ -30,6 +39,20 @@
     const totalCount = $derived(entries.length);
     const allVisibleSelected = $derived(filtered().length > 0 && filtered().every(e => selectedIds.includes(e.id)));
 
+    /** Whether to show the "too many entries" hint instead of the table */
+    const showTooManyHint = $derived(tooMany && !searchQuery.trim());
+
+    function handleSearchInput(e) {
+        searchQuery = e.target.value;
+        if (!onSearch) return;
+
+        // Debounce 1s for server search
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+            onSearch(searchQuery.trim());
+        }, 1000);
+    }
+
     function toggleEntry(id) {
         selectedIds = selectedIds.indexOf(id) >= 0
             ? selectedIds.filter(s => s !== id)
@@ -61,12 +84,21 @@
             <svg class="search-icon" viewBox="0 0 16 16" width="16" height="16">
                 <path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path>
             </svg>
-            <input type="text" class="search-input" placeholder="Search..." bind:value={searchQuery} />
+            <input
+                type="text"
+                class="search-input"
+                placeholder={tooMany ? "Search to find entries..." : "Search..."}
+                value={searchQuery}
+                oninput={handleSearchInput}
+            />
+            {#if searching}
+                <div class="search-spinner"></div>
+            {/if}
         </div>
         <div class="toolbar-actions">
             <span class="count-indicator">{selectedCount} / {totalCount} selected</span>
-            <button class="action-button" onclick={selectAll} disabled={loading || filtered().length === 0}>Select All</button>
-            <button class="action-button" onclick={deselectAll} disabled={loading || selectedCount === 0}>Deselect All</button>
+            <button class="action-button" onclick={selectAll} disabled={loading || searching || filtered().length === 0}>Select All</button>
+            <button class="action-button" onclick={deselectAll} disabled={loading || searching || selectedCount === 0}>Deselect All</button>
         </div>
     </div>
 
@@ -77,7 +109,12 @@
             <svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.5h1.5v5h-1.5zm.75 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" fill="currentColor"></path></svg>
             <span>{error}</span>
         </div>
-    {:else if entries.length === 0}
+    {:else if showTooManyHint}
+        <div class="state-message too-many-state">
+            <svg viewBox="0 0 16 16" width="16" height="16"><path d="M15.5 13.586L11.742 9.828A5.514 5.514 0 0 0 13 6.5 5.506 5.506 0 0 0 7.5 1 5.506 5.506 0 0 0 2 6.5 5.506 5.506 0 0 0 7.5 12a5.514 5.514 0 0 0 3.328-1.258l3.758 3.758zM3 6.5A4.505 4.505 0 0 1 7.5 2 4.505 4.505 0 0 1 12 6.5 4.505 4.505 0 0 1 7.5 11 4.505 4.505 0 0 1 3 6.5z" fill="currentColor"></path></svg>
+            <span>Too many entries. Type in the search box to refine.</span>
+        </div>
+    {:else if entries.length === 0 && !searching}
         <div class="state-message empty-state"><span>{emptyMessage}</span></div>
     {:else}
         <div class="table-container">
@@ -102,17 +139,18 @@
                             <!-- Render each column cell according to its type (text, code, pill, labels) -->
                             {#each columnDescriptors as columnDescriptor (columnDescriptor.key)}
                                 {@const val = resolveValue(entry, columnDescriptor.key)}
-                                <td title={columnDescriptor.type === 'text' ? (val ?? '') : ''}>
+                                {@const displayVal = columnDescriptor.format ? columnDescriptor.format(val, columnDescriptor.key) : val}
+                                <td title={columnDescriptor.type === 'text' ? (displayVal ?? '') : ''}>
                                     {#if columnDescriptor.type === 'labels' && Array.isArray(val)}
                                         {#each val as label (label.id)}
                                             <span class="label-pill">{label.name}</span>
                                         {/each}
                                     {:else if columnDescriptor.type === 'code'}
-                                        <code>{val ?? '-'}</code>
+                                        <code>{displayVal ?? '-'}</code>
                                     {:else if columnDescriptor.type === 'pill'}
-                                        {#if val}<span class="pill">{val}</span>{:else}-{/if}
+                                        {#if displayVal}<span class="pill">{displayVal}</span>{:else}-{/if}
                                     {:else}
-                                        {val ?? '-'}
+                                        {displayVal ?? '-'}
                                     {/if}
                                 </td>
                             {/each}
@@ -121,7 +159,7 @@
                 </tbody>
             </table>
         </div>
-        {#if filtered().length !== entries.length}
+        {#if !onSearch && filtered().length !== entries.length}
             <div class="filter-info">Showing {filtered().length} of {entries.length} entries</div>
         {/if}
     {/if}
@@ -141,6 +179,13 @@
     }
     .search-input::placeholder { color: var(--cds-text-placeholder, #6f6f6f); }
     .search-input:focus { border-bottom-color: var(--cds-focus, #0f62fe); }
+    .search-spinner {
+        position: absolute; right: 0.75rem;
+        width: 0.875rem; height: 0.875rem;
+        border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
+        border-top-color: var(--cds-interactive, #0f62fe);
+        border-radius: 50%; animation: spin 0.8s linear infinite;
+    }
     .toolbar-actions { display: flex; align-items: center; gap: 0.5rem; }
     .count-indicator { font-size: 0.75rem; color: var(--cds-text-secondary, #c6c6c6); margin-right: auto; }
     .action-button {
@@ -158,6 +203,7 @@
     }
     .error-state { color: var(--cds-support-error, #fa4d56); }
     .empty-state { color: var(--cds-text-helper, #8d8d8d); }
+    .too-many-state { color: var(--cds-support-warning, #f1c21b); }
     .spinner {
         width: 1rem; height: 1rem;
         border: 2px solid var(--cds-border-subtle-01, #e0e0e0);

package/src/DCCatalogEntryPicker/picker-column-helpers.ts

@@ -46,6 +46,8 @@ export interface ColumnDef {
     label: string;
     resolve: (entry: CatalogEntry) => unknown;
     type: ColumnType;
+    /** Optional formatter function to transform the resolved value for display */
+    format?: (value: unknown, key: string) => string;
 }
 
 /**