@industream/flowmaker-flowbox-ui-components 0.0.6 → 0.0.9

package/README.md

@@ -2,6 +2,10 @@
 
 Reusable Svelte 5 components for FlowMaker FlowBox configuration UIs.
 
+**Components:**
+- [DCSourceConnection](#dcsourceconnection) - Source connection selector
+- [DCCatalogEntry](#dccatalogentry) - Catalog entry selector
+
 ## Installation
 
 ```bash
@@ -175,3 +179,225 @@ interface SourceConnection {
     [key: string]: any;
 }
 ```
+
+---
+
+### DCCatalogEntry
+
+A dropdown component that fetches and displays catalog entries from the DataCatalog API. Catalog entries represent data sources with their connection parameters and entry-specific parameters.
+
+#### Quick Start
+
+```svelte
+<script>
+    import { DCCatalogEntry } from '@industream/flowmaker-flowbox-ui-components';
+
+    let selectedEntry = $state(null);
+</script>
+
+<DCCatalogEntry
+    dcapiurl="http://localhost:8002"
+    onentryselect={(entry) => selectedEntry = entry}
+/>
+
+{#if selectedEntry}
+    <p>Selected: {selectedEntry.name} ({selectedEntry.dataType})</p>
+{/if}
+```
+
+#### Environment Configuration with `jsonEnv`
+
+```svelte
+<script>
+    import { flowMakerBridge } from '@industream/flowmaker-flowbox-ui';
+    import { DCCatalogEntry } from '@industream/flowmaker-flowbox-ui-components';
+
+    const props = $props();
+    const { values, jsonEnv } = flowMakerBridge(props);
+
+    // Get DataCatalog config from environment variables (reactive derived store)
+    const dcConfig = jsonEnv('datacatalog');
+
+    // Optional: data type filter
+    const dataTypeFilter = "string";
+</script>
+
+<div class="dc-selector-container">
+    <div>Data Catalog Entry</div>
+
+    <DCCatalogEntry
+        dcapiurl={$dcConfig?.url}
+        datatypefilter={dataTypeFilter}
+        initialselection={$values?.catalogEntryId ?? ''}
+        onentryselect={(entry) => $values.catalogEntryId = entry.id}
+    />
+
+    {#if $values.catalogEntryId}
+        <div class="selection-info">
+            <h5>Selected Entry</h5>
+            <p><strong>ID:</strong> {$values.catalogEntryId}</p>
+        </div>
+    {/if}
+</div>
+```
+
+#### Filtering
+
+```svelte
+<!-- Filter by source type -->
+<DCCatalogEntry
+    dcapiurl={dcApiUrl}
+    sourcetypefilter="InfluxDB2"
+    onentryselect={handleSelect}
+/>
+
+<!-- Filter by data type -->
+<DCCatalogEntry
+    dcapiurl={dcApiUrl}
+    datatypefilter="string"
+    onentryselect={handleSelect}
+/>
+
+<!-- Filter by name(s) - sent to API -->
+<DCCatalogEntry
+    dcapiurl={dcApiUrl}
+    namefilter={["Entry1", "Entry2"]}
+    onentryselect={handleSelect}
+/>
+
+<!-- Multiple filters combined -->
+<DCCatalogEntry
+    dcapiurl={dcApiUrl}
+    sourcetypefilter={["InfluxDB2", "MQTT"]}
+    datatypefilter={["string", "number"]}
+    onentryselect={handleSelect}
+/>
+```
+
+#### Programmatic Methods
+
+```typescript
+// Select by ID
+dcCatalogEntry.select('xxxx-guid-1234-4567');
+
+// Select by entry object
+dcCatalogEntry.select(entryObject);
+
+// Get current selection
+const selected = dcCatalogEntry.getSelection();
+
+// Get all loaded entries (filtered)
+const filtered = dcCatalogEntry.getEntries();
+
+// Get all loaded entries (unfiltered)
+const all = dcCatalogEntry.getAllEntries();
+```
+
+---
+
+## API Reference
+
+### DCCatalogEntry
+
+##### Import
+
+```typescript
+import { DCCatalogEntry, type CatalogEntry, type DataType, type SourceType } from '@industream/flowmaker-flowbox-ui-components';
+```
+
+##### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | `undefined` | HTML id attribute for the dropdown |
+| `dcapiurl` | `string` | `''` | Base URL of the DataCatalog API |
+| `sourcetypefilter` | `SourceType \| SourceType[] \| null` | `null` | Filter entries by source type(s) (client-side) |
+| `datatypefilter` | `DataType \| DataType[] \| null` | `null` | Filter entries by data type(s) (client-side) |
+| `namefilter` | `string \| string[] \| null` | `null` | Filter entries by name(s) (API query) |
+| `initialselection` | `string \| null` | `null` | Entry ID to auto-select when items load |
+| `onentryselect` | `(entry: CatalogEntry) => void` | `null` | Callback when an entry is selected |
+| `onitemsloaded` | `(entries: CatalogEntry[]) => void` | `null` | Callback when entries are loaded |
+
+##### Exported Methods
+
+| Method | Signature | Description |
+|--------|-----------|-------------|
+| `select` | `(idOrEntry: string \| CatalogEntry) => void` | Programmatically select an entry |
+| `getSelection` | `() => CatalogEntry \| null` | Get the currently selected entry |
+| `getEntries` | `() => CatalogEntry[]` | Get all loaded entries (filtered) |
+| `getAllEntries` | `() => CatalogEntry[]` | Get all loaded entries (unfiltered) |
+
+##### CatalogEntry Type
+
+The `CatalogEntry` object returned on selection contains the full entry data including:
+
+- **sourceConnection**: The parent source connection with all connection parameters (hostname, credentials, etc.)
+- **sourceParams**: Entry-specific parameters that override or extend the connection settings
+- **labels**: User-defined labels for categorization
+- **metadata**: Additional metadata key-value pairs
+
+```typescript
+interface CatalogEntry {
+    id: string;
+    name: string;
+    dataType: string;                    // e.g., "string", "number", "boolean"
+    sourceConnection: {
+        id: string;
+        name: string;
+        sourceType: {
+            id: string;
+            name: string;               // e.g., "InfluxDB2", "MQTT", "DataBridge"
+            isProtected: boolean;
+        };
+        // Connection-level parameters (varies by source type)
+        hostname?: string;
+        token?: string;
+        bucket?: string;
+        organization?: string;
+        // ... other connection params
+    };
+    sourceParams: {                      // Entry-specific parameters
+        bucket?: string;                 // e.g., override bucket for this entry
+        // ... other entry-specific params
+    };
+    labels: Array<{
+        id: string;
+        name: string;
+    }>;
+    metadata: Record<string, any>;
+}
+```
+
+**Example CatalogEntry:**
+
+```json
+{
+    "id": "57c14290-4dc7-408f-84fa-8fbe568bd506",
+    "name": "Influx with myBucket",
+    "dataType": "string",
+    "sourceConnection": {
+        "id": "6e75699f-1e97-493d-9718-930a809b93a4",
+        "name": "Influx Localhost",
+        "sourceType": {
+            "id": "InfluxDB2",
+            "name": "InfluxDB2",
+            "isProtected": true
+        },
+        "hostname": "http://influxdb:8086",
+        "token": "DQxcrQBORed9pSzH11Ngvrn...",
+        "bucket": "test",
+        "organization": "industream",
+        "ingressHostname": "http://localhost:8086"
+    },
+    "sourceParams": {
+        "bucket": "myBucket"
+    },
+    "labels": [
+        { "id": "1f405a8c-...", "name": "zerzer" },
+        { "id": "76432802-...", "name": "Toto" }
+    ],
+    "metadata": {}
+}
+```
+
+In this example, the `sourceConnection` defines the InfluxDB connection to `test` bucket, but `sourceParams.bucket` overrides it to `myBucket` for this specific catalog entry.

package/dist/DCCatalogEntry.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+    import { DataCatalogClient } from '@industream/datacatalog-client';
+    import type { CatalogEntry, DataType, SourceType } from '@industream/datacatalog-client/dto';
+
+    interface Props {
+        id?: string;
+        dcapiurl?: string;
+        sourcetypefilter?: string | string[] | null;  // Source type names like "PostgreSQL", "InfluxDB2"
+        datatypefilter?: DataType | DataType[] | null;
+        namefilter?: string | string[] | null;
+        initialselection?: string | null;
+        onentryselect?: (entry: CatalogEntry) => void;
+        onitemsloaded?: (entries: CatalogEntry[]) => void;
+    }
+
+    let {
+        id = undefined,
+        dcapiurl = '',
+        sourcetypefilter = null,
+        datatypefilter = null,
+        namefilter = null,
+        initialselection = null,
+        onentryselect = null,
+        onitemsloaded = null
+    }: Props = $props();
+
+    let catalogEntries = $state<CatalogEntry[]>([]);
+    let filteredEntries = $state<CatalogEntry[]>([]);
+    let selectedValue = $state('');
+    let loading = $state(true);
+    let error = $state<string | null>(null);
+    let dropdownRef = $state<HTMLElement | null>(null);
+
+    // Load catalog entries when component mounts or dcapiurl changes
+    $effect(() => {
+        if (dcapiurl) {
+            loadCatalogEntries();
+        }
+    });
+
+    // 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) {
+            requestAnimationFrame(() => {
+                const sr = (dropdownRef as any)?.shadowRoot;
+                if (sr && !sr.querySelector('#dc-entry-fix')) {
+                    const style = document.createElement('style');
+                    style.id = 'dc-entry-fix';
+                    style.textContent = `.cds--list-box__field { display: flex; width: 100%; } .cds--list-box__label { flex: 1; width: 100%; }`;
+                    sr.appendChild(style);
+                }
+            });
+        }
+    });
+
+    function applyFilters(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 =>
+                entry.sourceConnection?.sourceType?.name &&
+                sourceTypeNames.includes(entry.sourceConnection.sourceType.name)
+            );
+        }
+
+        // Filter by data type
+        if (datatypefilter && datatypefilter.length > 0) {
+            const dataTypes = Array.isArray(datatypefilter) ? datatypefilter : [datatypefilter];
+            result = result.filter(entry =>
+                entry.dataType && dataTypes.includes(entry.dataType)
+            );
+        }
+
+        return result;
+    }
+
+    async function loadCatalogEntries() {
+        loading = true;
+        error = null;
+
+        try {
+            const client = new DataCatalogClient({ baseUrl: dcapiurl });
+            const filters: { names?: string[]; sourceTypes?: string[] } = {};
+
+            // Use name filter for API query if provided
+            if (namefilter && namefilter.length > 0) {
+                filters.names = Array.isArray(namefilter) ? namefilter : [namefilter];
+            }
+
+            // Use sourceType filter for API query if provided
+            if (sourcetypefilter && sourcetypefilter.length > 0) {
+                filters.sourceTypes = Array.isArray(sourcetypefilter) ? sourcetypefilter : [sourcetypefilter];
+            }
+
+            const result = await client.catalogEntries.get(filters);
+            catalogEntries = result.items || [];
+            // Apply filters synchronously so initialselection works
+            filteredEntries = applyFilters(catalogEntries);
+            console.log('Loaded catalog entries:', catalogEntries);
+
+            // Auto-select initial selection if provided
+            if (initialselection) {
+                selectedValue = initialselection;
+                const entry = filteredEntries.find(ce => ce.id === initialselection);
+                if (entry && onentryselect) {
+                    onentryselect(entry);
+                }
+            }
+
+            onitemsloaded?.(filteredEntries);
+        } catch (e) {
+            console.error('Failed to load catalog entries:', e);
+            error = e.message || 'Failed to load catalog entries';
+            catalogEntries = [];
+        } finally {
+            loading = false;
+        }
+    }
+
+    function handleSelect(e: CustomEvent) {
+        const selectedId = e.detail?.item?.value || e.target?.value;
+        console.log('Dropdown selected event:', e, 'selectedId:', selectedId);
+        selectedValue = selectedId;
+
+        if (selectedId && onentryselect) {
+            const selected = filteredEntries.find(ce => ce.id === selectedId);
+            console.log('Found selected:', selected);
+            if (selected) {
+                onentryselect(selected);
+            }
+        }
+
+    }
+
+    // Exposed method to programmatically select a catalog entry
+    export function select(idOrEntry: string | CatalogEntry) {
+        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);
+            }
+        }
+    }
+
+    // Exposed method to get current selection
+    export function getSelection(): CatalogEntry | null {
+        return filteredEntries.find(ce => ce.id === selectedValue) || null;
+    }
+
+    // Exposed method to get all loaded entries (filtered)
+    export function getEntries(): CatalogEntry[] {
+        return filteredEntries;
+    }
+
+    // Exposed method to get all loaded entries (unfiltered)
+    export function getAllEntries(): CatalogEntry[] {
+        return catalogEntries;
+    }
+</script>
+
+{#if loading}
+    <cds-dropdown {id} label="Catalog Entry" disabled>
+        <cds-dropdown-item value="">Loading...</cds-dropdown-item>
+    </cds-dropdown>
+{:else if error}
+    <cds-dropdown {id} label="Catalog Entry" invalid invalid-text={error}>
+        <cds-dropdown-item value="">Error loading entries</cds-dropdown-item>
+    </cds-dropdown>
+{:else}
+    <cds-dropdown
+        {id}
+        bind:this={dropdownRef}
+        label="Select a catalog entry"
+        value={selectedValue}
+        oncds-dropdown-selected={handleSelect}
+    >
+        {#each filteredEntries as entry}
+            <cds-dropdown-item value={entry.id}>
+                <span style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
+                    <span style="display: flex; align-items: center; gap: 0.5rem;">
+                        <span>{entry.name}</span>
+                        <cds-tag size="sm" type="green">{entry.dataType}</cds-tag>
+                    </span>
+                    <span style="display: flex; align-items: center; gap: 0.5rem;">
+                        <span style="color: var(--cds-text-secondary, #525252); font-size: 0.875rem;">Connection: {entry.sourceConnection?.name || 'Unknown'}</span>
+                        {#if entry.labels?.length}
+                            <span style="display: flex; gap: 0.25rem;">
+                                {#each entry.labels as label}
+                                    <cds-tag size="sm" type="purple">{label.name}</cds-tag>
+                                {/each}
+                            </span>
+                        {/if}
+                    </span>
+                </span>
+            </cds-dropdown-item>
+        {/each}
+    </cds-dropdown>
+{/if}
+
+<style>
+    /* Styles moved to inline for shadow DOM compatibility */
+</style>

package/dist/DCCatalogEntry.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { CatalogEntry, DataType } from '@industream/datacatalog-client/dto';
+interface Props {
+    id?: string;
+    dcapiurl?: string;
+    sourcetypefilter?: string | string[] | null;
+    datatypefilter?: DataType | DataType[] | null;
+    namefilter?: string | string[] | null;
+    initialselection?: string | null;
+    onentryselect?: (entry: CatalogEntry) => void;
+    onitemsloaded?: (entries: CatalogEntry[]) => void;
+}
+declare const DCCatalogEntry: import("svelte").Component<Props, {
+    select: (idOrEntry: string | CatalogEntry) => void;
+    getSelection: () => CatalogEntry | null;
+    getEntries: () => CatalogEntry[];
+    getAllEntries: () => CatalogEntry[];
+}, "">;
+type DCCatalogEntry = ReturnType<typeof DCCatalogEntry>;
+export default DCCatalogEntry;

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export { default as DCSourceConnection } from './DCSourceConnection.svelte';
 export type { SourceConnection } from './DCSourceConnection.svelte';
+export { default as DCCatalogEntry } from './DCCatalogEntry.svelte';
+export type { CatalogEntry, DataType, SourceType } from '@industream/datacatalog-client/dto';

package/dist/index.js

@@ -1 +1,2 @@
 export { default as DCSourceConnection } from './DCSourceConnection.svelte';
+export { default as DCCatalogEntry } from './DCCatalogEntry.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industream/flowmaker-flowbox-ui-components",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "description": "Reusable Svelte components for FlowMaker FlowBox UI",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -17,6 +17,11 @@
       "types": "./dist/DCSourceConnection.svelte.d.ts",
       "svelte": "./dist/DCSourceConnection.svelte",
       "import": "./dist/DCSourceConnection.svelte"
+    },
+    "./DCCatalogEntry.svelte": {
+      "types": "./dist/DCCatalogEntry.svelte.d.ts",
+      "svelte": "./dist/DCCatalogEntry.svelte",
+      "import": "./dist/DCCatalogEntry.svelte"
     }
   },
   "files": [
@@ -29,7 +34,7 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@industream/datacatalog-client": "^1.0.0-preview.1"
+    "@industream/datacatalog-client": "^1.0.0-preview.2"
   },
   "devDependencies": {
     "svelte": "^5.0.0",

package/src/DCCatalogEntry.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+    import { DataCatalogClient } from '@industream/datacatalog-client';
+    import type { CatalogEntry, DataType, SourceType } from '@industream/datacatalog-client/dto';
+
+    interface Props {
+        id?: string;
+        dcapiurl?: string;
+        sourcetypefilter?: string | string[] | null;  // Source type names like "PostgreSQL", "InfluxDB2"
+        datatypefilter?: DataType | DataType[] | null;
+        namefilter?: string | string[] | null;
+        initialselection?: string | null;
+        onentryselect?: (entry: CatalogEntry) => void;
+        onitemsloaded?: (entries: CatalogEntry[]) => void;
+    }
+
+    let {
+        id = undefined,
+        dcapiurl = '',
+        sourcetypefilter = null,
+        datatypefilter = null,
+        namefilter = null,
+        initialselection = null,
+        onentryselect = null,
+        onitemsloaded = null
+    }: Props = $props();
+
+    let catalogEntries = $state<CatalogEntry[]>([]);
+    let filteredEntries = $state<CatalogEntry[]>([]);
+    let selectedValue = $state('');
+    let loading = $state(true);
+    let error = $state<string | null>(null);
+    let dropdownRef = $state<HTMLElement | null>(null);
+
+    // Load catalog entries when component mounts or dcapiurl changes
+    $effect(() => {
+        if (dcapiurl) {
+            loadCatalogEntries();
+        }
+    });
+
+    // 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) {
+            requestAnimationFrame(() => {
+                const sr = (dropdownRef as any)?.shadowRoot;
+                if (sr && !sr.querySelector('#dc-entry-fix')) {
+                    const style = document.createElement('style');
+                    style.id = 'dc-entry-fix';
+                    style.textContent = `.cds--list-box__field { display: flex; width: 100%; } .cds--list-box__label { flex: 1; width: 100%; }`;
+                    sr.appendChild(style);
+                }
+            });
+        }
+    });
+
+    function applyFilters(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 =>
+                entry.sourceConnection?.sourceType?.name &&
+                sourceTypeNames.includes(entry.sourceConnection.sourceType.name)
+            );
+        }
+
+        // Filter by data type
+        if (datatypefilter && datatypefilter.length > 0) {
+            const dataTypes = Array.isArray(datatypefilter) ? datatypefilter : [datatypefilter];
+            result = result.filter(entry =>
+                entry.dataType && dataTypes.includes(entry.dataType)
+            );
+        }
+
+        return result;
+    }
+
+    async function loadCatalogEntries() {
+        loading = true;
+        error = null;
+
+        try {
+            const client = new DataCatalogClient({ baseUrl: dcapiurl });
+            const filters: { names?: string[]; sourceTypes?: string[] } = {};
+
+            // Use name filter for API query if provided
+            if (namefilter && namefilter.length > 0) {
+                filters.names = Array.isArray(namefilter) ? namefilter : [namefilter];
+            }
+
+            // Use sourceType filter for API query if provided
+            if (sourcetypefilter && sourcetypefilter.length > 0) {
+                filters.sourceTypes = Array.isArray(sourcetypefilter) ? sourcetypefilter : [sourcetypefilter];
+            }
+
+            const result = await client.catalogEntries.get(filters);
+            catalogEntries = result.items || [];
+            // Apply filters synchronously so initialselection works
+            filteredEntries = applyFilters(catalogEntries);
+            console.log('Loaded catalog entries:', catalogEntries);
+
+            // Auto-select initial selection if provided
+            if (initialselection) {
+                selectedValue = initialselection;
+                const entry = filteredEntries.find(ce => ce.id === initialselection);
+                if (entry && onentryselect) {
+                    onentryselect(entry);
+                }
+            }
+
+            onitemsloaded?.(filteredEntries);
+        } catch (e) {
+            console.error('Failed to load catalog entries:', e);
+            error = e.message || 'Failed to load catalog entries';
+            catalogEntries = [];
+        } finally {
+            loading = false;
+        }
+    }
+
+    function handleSelect(e: CustomEvent) {
+        const selectedId = e.detail?.item?.value || e.target?.value;
+        console.log('Dropdown selected event:', e, 'selectedId:', selectedId);
+        selectedValue = selectedId;
+
+        if (selectedId && onentryselect) {
+            const selected = filteredEntries.find(ce => ce.id === selectedId);
+            console.log('Found selected:', selected);
+            if (selected) {
+                onentryselect(selected);
+            }
+        }
+
+    }
+
+    // Exposed method to programmatically select a catalog entry
+    export function select(idOrEntry: string | CatalogEntry) {
+        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);
+            }
+        }
+    }
+
+    // Exposed method to get current selection
+    export function getSelection(): CatalogEntry | null {
+        return filteredEntries.find(ce => ce.id === selectedValue) || null;
+    }
+
+    // Exposed method to get all loaded entries (filtered)
+    export function getEntries(): CatalogEntry[] {
+        return filteredEntries;
+    }
+
+    // Exposed method to get all loaded entries (unfiltered)
+    export function getAllEntries(): CatalogEntry[] {
+        return catalogEntries;
+    }
+</script>
+
+{#if loading}
+    <cds-dropdown {id} label="Catalog Entry" disabled>
+        <cds-dropdown-item value="">Loading...</cds-dropdown-item>
+    </cds-dropdown>
+{:else if error}
+    <cds-dropdown {id} label="Catalog Entry" invalid invalid-text={error}>
+        <cds-dropdown-item value="">Error loading entries</cds-dropdown-item>
+    </cds-dropdown>
+{:else}
+    <cds-dropdown
+        {id}
+        bind:this={dropdownRef}
+        label="Select a catalog entry"
+        value={selectedValue}
+        oncds-dropdown-selected={handleSelect}
+    >
+        {#each filteredEntries as entry}
+            <cds-dropdown-item value={entry.id}>
+                <span style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
+                    <span style="display: flex; align-items: center; gap: 0.5rem;">
+                        <span>{entry.name}</span>
+                        <cds-tag size="sm" type="green">{entry.dataType}</cds-tag>
+                    </span>
+                    <span style="display: flex; align-items: center; gap: 0.5rem;">
+                        <span style="color: var(--cds-text-secondary, #525252); font-size: 0.875rem;">Connection: {entry.sourceConnection?.name || 'Unknown'}</span>
+                        {#if entry.labels?.length}
+                            <span style="display: flex; gap: 0.25rem;">
+                                {#each entry.labels as label}
+                                    <cds-tag size="sm" type="purple">{label.name}</cds-tag>
+                                {/each}
+                            </span>
+                        {/if}
+                    </span>
+                </span>
+            </cds-dropdown-item>
+        {/each}
+    </cds-dropdown>
+{/if}
+
+<style>
+    /* Styles moved to inline for shadow DOM compatibility */
+</style>

package/src/index.ts

@@ -1,5 +1,8 @@
 export { default as DCSourceConnection } from './DCSourceConnection.svelte';
 export type { SourceConnection } from './DCSourceConnection.svelte';
 
+export { default as DCCatalogEntry } from './DCCatalogEntry.svelte';
+export type { CatalogEntry, DataType, SourceType } from '@industream/datacatalog-client/dto';
+