@industream/flowmaker-flowbox-ui-components 1.1.1 → 1.2.2

package/dist/DCCatalogEntryPicker/picker-tree.d.ts

@@ -0,0 +1,20 @@
+import type { AssetNode, AssetDictionary } from '@industream/datacatalog-client/dto';
+import type { CatalogEntry } from '@industream/datacatalog-client/dto';
+/** Depth-first flatten of a node forest — self emitted before its children. */
+export declare function flattenNodes(nodes: AssetNode[]): AssetNode[];
+/** Find a node by id anywhere in the forest; null when absent. */
+export declare function findNodeById(nodes: AssetNode[], id: string): AssetNode | null;
+/**
+ * Collect a node's assigned parent entryIds. With `includeDescendants`, unions
+ * every descendant's entryIds too. De-duplicated, node-first, DFS order.
+ */
+export declare function collectEntryIds(node: AssetNode, includeDescendants?: boolean): string[];
+/**
+ * Keep only binding rows on the given source connection. An empty
+ * `sourceConnectionId` disables filtering (returns the input unchanged).
+ * The typed `query` filter cannot scope by connection, so the container
+ * filters client-side (node entry counts are small).
+ */
+export declare function filterEntriesByConnection(entries: CatalogEntry[], sourceConnectionId: string): CatalogEntry[];
+/** Id of the first dictionary (default selection), or undefined for an empty list. */
+export declare function firstDictionaryId(dictionaries: AssetDictionary[]): string | undefined;

package/dist/DCCatalogEntryPicker/picker-tree.js

@@ -0,0 +1,52 @@
+/** Depth-first flatten of a node forest — self emitted before its children. */
+export function flattenNodes(nodes) {
+    const result = [];
+    for (const n of nodes) {
+        result.push(n);
+        if (n.children && n.children.length > 0) {
+            result.push(...flattenNodes(n.children));
+        }
+    }
+    return result;
+}
+/** Find a node by id anywhere in the forest; null when absent. */
+export function findNodeById(nodes, id) {
+    for (const n of flattenNodes(nodes)) {
+        if (n.id === id)
+            return n;
+    }
+    return null;
+}
+/**
+ * Collect a node's assigned parent entryIds. With `includeDescendants`, unions
+ * every descendant's entryIds too. De-duplicated, node-first, DFS order.
+ */
+export function collectEntryIds(node, includeDescendants = false) {
+    const source = includeDescendants ? flattenNodes([node]) : [node];
+    const seen = new Set();
+    const result = [];
+    for (const n of source) {
+        for (const id of n.entryIds ?? []) {
+            if (!seen.has(id)) {
+                seen.add(id);
+                result.push(id);
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Keep only binding rows on the given source connection. An empty
+ * `sourceConnectionId` disables filtering (returns the input unchanged).
+ * The typed `query` filter cannot scope by connection, so the container
+ * filters client-side (node entry counts are small).
+ */
+export function filterEntriesByConnection(entries, sourceConnectionId) {
+    if (!sourceConnectionId)
+        return entries;
+    return entries.filter(e => e.sourceConnection?.id === sourceConnectionId);
+}
+/** Id of the first dictionary (default selection), or undefined for an empty list. */
+export function firstDictionaryId(dictionaries) {
+    return dictionaries.length > 0 ? dictionaries[0].id : undefined;
+}

package/dist/DCCatalogEntryPicker/picker-tree.test.d.ts

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

package/dist/DCCatalogEntryPicker/picker-tree.test.js

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import { flattenNodes, findNodeById, collectEntryIds, filterEntriesByConnection, firstDictionaryId } from './picker-tree';
+const node = (id, entryIds = [], children = []) => ({ id, dictionaryId: 'd1', name: id, order: 0, entryIds, children });
+const tree = [
+    node('root', ['e1'], [
+        node('zone-a', ['e2', 'e3'], [
+            node('leaf', ['e3', 'e4'])
+        ]),
+        node('zone-b', ['e5'])
+    ])
+];
+describe('flattenNodes', () => {
+    it('returns every node depth-first, self before children', () => {
+        expect(flattenNodes(tree).map(n => n.id)).toEqual(['root', 'zone-a', 'leaf', 'zone-b']);
+    });
+    it('handles an empty forest', () => {
+        expect(flattenNodes([])).toEqual([]);
+    });
+});
+describe('findNodeById', () => {
+    it('finds a nested node', () => {
+        expect(findNodeById(tree, 'leaf')?.id).toBe('leaf');
+    });
+    it('returns null when absent', () => {
+        expect(findNodeById(tree, 'nope')).toBeNull();
+    });
+});
+describe('collectEntryIds', () => {
+    it('returns only the node own entryIds by default', () => {
+        expect(collectEntryIds(findNodeById(tree, 'zone-a'))).toEqual(['e2', 'e3']);
+    });
+    it('unions descendants and de-duplicates, node first, DFS order', () => {
+        expect(collectEntryIds(findNodeById(tree, 'zone-a'), true)).toEqual(['e2', 'e3', 'e4']);
+    });
+    it('collects the whole tree from the root with descendants', () => {
+        expect(collectEntryIds(tree[0], true)).toEqual(['e1', 'e2', 'e3', 'e4', 'e5']);
+    });
+});
+describe('filterEntriesByConnection', () => {
+    const entry = (id, connId) => ({ id, sourceConnection: { id: connId } });
+    const rows = [entry('a', 'c1'), entry('b', 'c2'), entry('c', 'c1')];
+    it('keeps only rows on the given connection', () => {
+        expect(filterEntriesByConnection(rows, 'c1').map(e => e.id)).toEqual(['a', 'c']);
+    });
+    it('returns all rows when connection id is empty', () => {
+        expect(filterEntriesByConnection(rows, '')).toHaveLength(3);
+    });
+});
+describe('firstDictionaryId', () => {
+    it('returns the first id or undefined', () => {
+        expect(firstDictionaryId([{ id: 'x' }])).toBe('x');
+        expect(firstDictionaryId([])).toBeUndefined();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industream/flowmaker-flowbox-ui-components",
-  "version": "1.1.1",
+  "version": "1.2.2",
   "description": "Reusable Svelte components for FlowMaker FlowBox UI",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -45,10 +45,10 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@industream/datacatalog-client": "^1.9.1"
+    "@industream/datacatalog-client": "^1.10.0"
   },
   "devDependencies": {
-    "@industream/datacatalog-client": "1.9.2",
+    "@industream/datacatalog-client": "^1.10.0",
     "svelte": "^5.0.0",
     "vite": "^6.0.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",

package/src/DCCatalogEntryPicker/AssetTree.svelte

@@ -0,0 +1,197 @@
+<script>
+    /**
+     * AssetTree - loads an asset dictionary as a tree and lets the user pick a node.
+     * Emits the selected node's own entryIds to the container, which fetches and
+     * filters the entries. This component holds no selection or entry state.
+     */
+    import { firstDictionaryId, collectEntryIds } from './picker-tree';
+
+    let {
+        client = null,
+        onSelectNode = null
+    } = $props();
+
+    let dictionaries = $state([]);
+    let activeDictionaryId = $state('');
+    let rootNodes = $state([]);
+    let expanded = $state(new Set());
+    let selectedNodeId = $state('');
+    let loading = $state(false);
+    let error = $state('');
+
+    /** Cancels in-flight dictionary/tree fetches so rapid switching can't render a stale tree. */
+    let abort = null;
+    function newAbort() {
+        abort?.abort();
+        abort = new AbortController();
+        return abort.signal;
+    }
+
+    /** Load the dictionary list when a client becomes available. */
+    $effect(() => {
+        if (client) loadDictionaries(client);
+    });
+
+    async function loadDictionaries(dc) {
+        const signal = newAbort();
+        loading = true;
+        error = '';
+        try {
+            const result = await dc.assetDictionaries.get({ asTree: true }, signal);
+            if (signal.aborted) return;
+            dictionaries = result.items ?? [];
+            const first = firstDictionaryId(dictionaries);
+            if (first) {
+                activeDictionaryId = first;
+                await loadTreeInner(dc, first, signal);
+            } else {
+                rootNodes = [];
+            }
+        } catch (err) {
+            if (signal.aborted) return;
+            error = err?.message ?? 'Failed to load asset dictionaries';
+            dictionaries = [];
+            rootNodes = [];
+        } finally {
+            if (!signal.aborted) loading = false;
+        }
+    }
+
+    async function loadTree(dc, id) {
+        await loadTreeInner(dc, id, newAbort());
+    }
+
+    async function loadTreeInner(dc, id, signal) {
+        loading = true;
+        error = '';
+        try {
+            const dict = await dc.assetDictionaries.getById(id, { asTree: true }, signal);
+            if (signal.aborted) return;
+            rootNodes = dict.nodes ?? [];
+            expanded = new Set(rootNodes.map(n => n.id));
+        } catch (err) {
+            if (signal.aborted) return;
+            error = err?.message ?? 'Failed to load the asset tree';
+            rootNodes = [];
+        } finally {
+            if (!signal.aborted) loading = false;
+        }
+    }
+
+    function onDictionaryChange(e) {
+        activeDictionaryId = e.target.value;
+        selectedNodeId = '';
+        if (client && activeDictionaryId) loadTree(client, activeDictionaryId);
+    }
+
+    function toggleExpand(id) {
+        const next = new Set(expanded);
+        next.has(id) ? next.delete(id) : next.add(id);
+        expanded = next;
+    }
+
+    function selectNode(node) {
+        selectedNodeId = node.id;
+        onSelectNode?.(collectEntryIds(node), node.id);
+    }
+
+    function retry() {
+        if (client) loadDictionaries(client);
+    }
+</script>
+
+<div class="asset-tree">
+    {#if dictionaries.length > 1}
+        <select class="dict-select" value={activeDictionaryId} onchange={onDictionaryChange}>
+            {#each dictionaries as dict (dict.id)}
+                <option value={dict.id}>{dict.name}</option>
+            {/each}
+        </select>
+    {/if}
+
+    {#if loading}
+        <div class="tree-state"><div class="spinner"></div> <span>Loading tree...</span></div>
+    {:else if error}
+        <div class="tree-state error">{error} - <button class="link-button" onclick={retry}>retry</button></div>
+    {:else if rootNodes.length === 0}
+        <div class="tree-state muted">No asset dictionary available.</div>
+    {:else}
+        <ul class="tree-root">
+            {#each rootNodes as node (node.id)}
+                {@render treeNode(node, 0)}
+            {/each}
+        </ul>
+    {/if}
+</div>
+
+{#snippet treeNode(node, depth)}
+    {@const hasChildren = node.children && node.children.length > 0}
+    {@const isOpen = expanded.has(node.id)}
+    <li class="tree-item">
+        <div
+            class="node-row"
+            class:selected={selectedNodeId === node.id}
+            style="padding-left: {depth * 1}rem"
+        >
+            {#if hasChildren}
+                <button type="button" class="twisty" class:open={isOpen} onclick={() => toggleExpand(node.id)} aria-label="Toggle">
+                    <svg viewBox="0 0 16 16" width="12" height="12"><path d="M11 8L6 13V3z" fill="currentColor"></path></svg>
+                </button>
+            {:else}
+                <span class="twisty-spacer"></span>
+            {/if}
+            <button type="button" class="node-label" onclick={() => selectNode(node)}>
+                {node.name}
+                {#if node.entryIds && node.entryIds.length > 0}<span class="node-count">{node.entryIds.length}</span>{/if}
+            </button>
+        </div>
+        {#if hasChildren && isOpen}
+            <ul>
+                {#each node.children as child (child.id)}
+                    {@render treeNode(child, depth + 1)}
+                {/each}
+            </ul>
+        {/if}
+    </li>
+{/snippet}
+
+<style>
+    .asset-tree { font-size: 0.8125rem; }
+    .dict-select {
+        width: 100%; margin-bottom: 0.5rem; padding: 0.375rem 0.5rem;
+        background: var(--cds-field-01, #353535); color: var(--cds-text-primary, #f4f4f4);
+        border: none; border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f); font-size: 0.8125rem;
+    }
+    .tree-state { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; color: var(--cds-text-secondary, #c6c6c6); }
+    .tree-state.error { color: var(--cds-support-error, #fa4d56); }
+    .tree-state.muted { color: var(--cds-text-helper, #8d8d8d); }
+    .tree-root, .tree-item ul { list-style: none; margin: 0; padding: 0; }
+    .tree-root { max-height: 400px; overflow-y: auto; border: 1px solid var(--cds-border-subtle-01, #393939); }
+    .node-row { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; }
+    .node-row:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .node-row.selected { background: var(--cds-layer-selected-01, #3d3d3d); }
+    .twisty, .twisty-spacer { width: 1.25rem; height: 1.5rem; flex-shrink: 0; }
+    .twisty { background: none; border: none; color: var(--cds-text-secondary, #c6c6c6); cursor: pointer; padding: 0; }
+    .twisty svg { transition: transform 0.15s ease; }
+    .twisty.open svg { transform: rotate(90deg); }
+    .node-label {
+        flex: 1; display: flex; align-items: center; gap: 0.375rem;
+        background: none; border: none; color: var(--cds-text-primary, #f4f4f4);
+        text-align: left; padding: 0.25rem 0.25rem; cursor: pointer; font-size: 0.8125rem;
+    }
+    .node-count {
+        font-size: 0.625rem; padding: 0 0.375rem; border-radius: 1rem;
+        background: var(--cds-tag-background-gray, #393939); color: var(--cds-tag-color-gray, #c6c6c6);
+    }
+    .spinner {
+        width: 1rem; height: 1rem;
+        border: 2px solid var(--cds-border-subtle-01, #e0e0e0);
+        border-top-color: var(--cds-interactive, #052FAD);
+        border-radius: 50%; animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .link-button {
+        background: none; border: none; padding: 0; cursor: pointer;
+        color: var(--cds-link-primary, #78a9ff); text-decoration: underline; font-size: inherit;
+    }
+</style>

package/src/DCCatalogEntryPicker/DCCatalogEntryPicker.svelte

@@ -6,16 +6,15 @@
      * SelectedTags (collapsible summary with remove). Owns the DataCatalog fetch
      * lifecycle, pagination state, and the selected-entry metadata cache.
      *
-     * Strategy (see docs/superpowers/specs/2026-06-30-tag-picker-lazy-pagination-design.md):
-     *   - Always load page 1 on open — never a blank table.
-     *   - Lazy "load more" pagination via offset; totalCount drives the counter and end.
-     *   - Search: client-side instant when the whole catalog is loaded (small catalogs),
-     *     debounced server search otherwise.
-     *   - Selected entries are cached independently of the loaded window so their
-     *     metadata always renders.
+     * Two-tab layout (Lot B):
+     *   - Search tab: LabelFacet (label OR filter) + TagBrowser (paginated, server search).
+     *   - Tree tab: AssetTree (dictionary node picker) + TagBrowser (client-side, no load-more).
+     *   - selectedIds and selectedCache are shared across both tabs.
+     *   - sourceTypes scopes every fetch for type-correct entries.
      *
      * @prop dcApiUrl           — DataCatalog API base URL
      * @prop sourceConnectionId — Filters catalog entries by source connection
+     * @prop sourceTypes        — Optional type scope (e.g. ['OPC-UA']); empty = all types
      * @prop selectedIds        — (bindable) Array of selected CatalogEntry IDs
      * @prop entries            — (bindable) Loaded catalog entries (exposed for parent access)
      * @prop columns            — Column keys for the browse table
@@ -39,12 +38,16 @@
         upsertSelectedCache,
         resolveSelected
     } from './picker-pagination';
+    import { filterEntriesByConnection } from './picker-tree';
     import TagBrowser from './TagBrowser.svelte';
     import SelectedTags from './SelectedTags.svelte';
+    import LabelFacet from './LabelFacet.svelte';
+    import AssetTree from './AssetTree.svelte';
 
     interface Props {
         dcApiUrl?: string;
         sourceConnectionId?: string;
+        sourceTypes?: string[];
         selectedIds?: string[];
         entries?: CatalogEntry[];
         columns?: string[];
@@ -57,6 +60,7 @@
     let {
         dcApiUrl = '',
         sourceConnectionId = '',
+        sourceTypes = [],
         selectedIds = $bindable([]),
         entries = $bindable([]),
         columns = DEFAULT_COLUMNS,
@@ -75,6 +79,14 @@
     let currentQuery = $state(MATCH_ALL);
     let offset = $state(0);
 
+    let activeTab = $state<'search' | 'tree'>('search');
+    let activeLabelIds = $state<string[]>([]);
+    let treeNodeSelected = $state(false);
+    /** Tree-tab empty message: distinguishes "pick a node" from "node has no entries here". */
+    const treeEmptyMessage = $derived(treeNodeSelected
+        ? 'No entries for this node on this source connection.'
+        : 'Select a node in the tree to see its entries.');
+
     /**
      * Metadata for selected tags, kept across reloads/searches so SelectedTags always
      * renders. Invariant: every mutation of this Map is paired with an `entries`
@@ -102,7 +114,13 @@
     let clientUrl = '';
 
     /** Whether search runs server-side (large catalog) or client-side (everything loaded). */
-    const serverSearch = $derived(!isAllLoaded(MATCH_ALL, entries.length, totalCount) || currentQuery !== MATCH_ALL);
+    const searchModeServer = $derived(!isAllLoaded(MATCH_ALL, entries.length, totalCount) || currentQuery !== MATCH_ALL);
+
+    /**
+     * Force client-side filtering in the Tree tab (node entries are fully in memory).
+     * In the Search tab, use the derived server/client decision.
+     */
+    const serverSearch = $derived(activeTab === 'tree' ? false : searchModeServer);
 
     /** Resolved entries for the selected-tags panel: window first, cache fallback. */
     const selectedEntries = $derived(resolveSelected(entries, selectedCache, selectedIds));
@@ -114,14 +132,45 @@
         return client;
     }
 
+    /**
+     * Search options shared by page-1, server-search and load-more, so sourceTypes
+     * (mandatory scoping) and labelIds (OR facet) are threaded in exactly one place.
+     * `labelIds` is honoured by SDK >= 1.10.0; older runtimes ignore it (unfiltered).
+     */
+    function buildSearchOptions(offsetValue: number) {
+        return {
+            sourceConnectionIds: sourceConnectionId ? [sourceConnectionId] : [],
+            sourceTypes: sourceTypes,
+            labelIds: activeLabelIds,
+            limit: PAGE_SIZE,
+            offset: offsetValue
+        };
+    }
+
+    // Single source of truth for url/connection/tab changes. Runs when any is read here.
     $effect(() => {
-        if (dcApiUrl) {
-            loadInitial(dcApiUrl, sourceConnectionId);
+        const url = dcApiUrl;
+        const conn = sourceConnectionId;
+        const tab = activeTab;
+        if (!url) {
+            fetchAbort?.abort();
+            entries = [];
+            totalCount = 0;
+            error = '';
+            return;
+        }
+        if (tab === 'search') {
+            loadInitial(url, conn);
         } else {
+            // Tree tab: a url/connection change invalidates the resolved node entries
+            // (they were scoped to the previous connection). Clear and await a re-pick.
             fetchAbort?.abort();
             entries = [];
             totalCount = 0;
+            offset = 0;
+            currentQuery = MATCH_ALL;
             error = '';
+            treeNodeSelected = false;
         }
     });
 
@@ -141,11 +190,7 @@
 
         try {
             const dc = getClient(apiUrl);
-            const result = await dc.catalogEntries.search(MATCH_ALL, {
-                sourceConnectionIds: connId ? [connId] : [],
-                limit: PAGE_SIZE,
-                offset: 0
-            }, abort.signal);
+            const result = await dc.catalogEntries.search(MATCH_ALL, buildSearchOptions(0), abort.signal);
             if (abort.signal.aborted) return;
             const items = deduplicateEntries(result.items ?? []);
             entries = items;
@@ -178,11 +223,7 @@
         searching = true;
 
         const dc = getClient(dcApiUrl);
-        dc.catalogEntries.search(query, {
-            sourceConnectionIds: sourceConnectionId ? [sourceConnectionId] : [],
-            limit: PAGE_SIZE,
-            offset: 0
-        }, abort.signal)
+        dc.catalogEntries.search(query, buildSearchOptions(0), abort.signal)
             .then((result) => {
                 if (abort.signal.aborted) return;
                 const items = deduplicateEntries(result.items ?? []);
@@ -214,11 +255,7 @@
         const startOffset = offset;
 
         const dc = getClient(dcApiUrl);
-        dc.catalogEntries.search(currentQuery, {
-            sourceConnectionIds: sourceConnectionId ? [sourceConnectionId] : [],
-            limit: PAGE_SIZE,
-            offset: startOffset
-        }, abort.signal)
+        dc.catalogEntries.search(currentQuery, buildSearchOptions(startOffset), abort.signal)
             .then((result) => {
                 if (abort.signal.aborted) return;
                 const items = result.items ?? [];
@@ -235,26 +272,120 @@
             });
     }
 
+    // Just flip the tab; the $effect above reacts (search → loadInitial, tree → clear),
+    // so page-1 is fetched exactly once (no double fetch).
+    function selectTab(tab: 'search' | 'tree') {
+        if (activeTab === tab) return;
+        loadMoreError = '';
+        activeTab = tab;
+    }
+
+    /** Label chips changed — reset pagination and re-query server-side (Search tab). */
+    function handleLabelChange(ids: string[]) {
+        activeLabelIds = ids;
+        handleServerSearch(currentQuery === MATCH_ALL ? '' : currentQuery);
+    }
+
+    /** A tree node was picked — resolve its entries for the current connection/type. */
+    function handleSelectNode(entryIds: string[]) {
+        if (!dcApiUrl) return;
+        treeNodeSelected = true;
+        fetchAbort?.abort();
+        const abort = new AbortController();
+        fetchAbort = abort;
+
+        loading = true;
+        error = '';
+        loadMoreError = '';
+        currentQuery = MATCH_ALL;
+        entries = [];
+        totalCount = 0;
+        offset = 0;
+
+        if (entryIds.length === 0) {
+            entries = [];
+            totalCount = 0;
+            loading = false;
+            return;
+        }
+
+        const dc = getClient(dcApiUrl);
+        dc.catalogEntries.query({ entryIds, sourceTypes }, abort.signal)
+            .then((result) => {
+                if (abort.signal.aborted) return;
+                const scoped = filterEntriesByConnection(result.items ?? [], sourceConnectionId);
+                const items = deduplicateEntries(scoped);
+                entries = items;
+                totalCount = items.length;
+                offset = items.length;
+                upsertSelectedCache(selectedCache, items);
+                loading = false;
+            })
+            .catch((err: any) => {
+                if (abort.signal.aborted) return;
+                error = err?.message ?? 'Failed to load node entries';
+                entries = [];
+                loading = false;
+            });
+    }
+
     const remaining = $derived(remainingCount(entries.length, totalCount));
 </script>
 
-<TagBrowser
-    {entries}
-    bind:selectedIds
-    {columns}
-    {loading}
-    {loadingMore}
-    {error}
-    {loadMoreError}
-    {emptyMessage}
-    {totalCount}
-    {remaining}
-    serverSearch={serverSearch}
-    {searching}
-    {onSelectionChange}
-    onSearch={handleServerSearch}
-    onLoadMore={handleLoadMore}
-/>
+<div class="picker-tabs" role="tablist">
+    <button type="button" class="tab" class:active={activeTab === 'search'} role="tab" aria-selected={activeTab === 'search'} onclick={() => selectTab('search')}>Search</button>
+    <button type="button" class="tab" class:active={activeTab === 'tree'} role="tab" aria-selected={activeTab === 'tree'} onclick={() => selectTab('tree')}>Asset</button>
+</div>
+
+{#if activeTab === 'search'}
+    {#if dcApiUrl}
+        <LabelFacet client={getClient(dcApiUrl)} bind:selectedLabelIds={activeLabelIds} onChange={handleLabelChange} />
+    {/if}
+    <TagBrowser
+        {entries}
+        bind:selectedIds
+        {columns}
+        {loading}
+        {loadingMore}
+        {error}
+        {loadMoreError}
+        {emptyMessage}
+        {totalCount}
+        {remaining}
+        {serverSearch}
+        {searching}
+        {onSelectionChange}
+        onSearch={handleServerSearch}
+        onLoadMore={handleLoadMore}
+    />
+{:else}
+    <div class="tree-layout">
+        <div class="tree-pane">
+            {#if dcApiUrl}
+                <AssetTree client={getClient(dcApiUrl)} onSelectNode={handleSelectNode} />
+            {/if}
+        </div>
+        <div class="tree-entries">
+            <TagBrowser
+                {entries}
+                bind:selectedIds
+                {columns}
+                {loading}
+                loadingMore={false}
+                {error}
+                loadMoreError={''}
+                emptyMessage={treeEmptyMessage}
+                {totalCount}
+                remaining={0}
+                serverSearch={false}
+                searching={false}
+                {onSelectionChange}
+                onSearch={null}
+                onLoadMore={null}
+            />
+        </div>
+    </div>
+{/if}
 
 {#if selectedIds.length > 0}
     <SelectedTags
@@ -268,12 +399,17 @@
 {/if}
 
 <style>
-    .helper-text {
-        color: var(--cds-text-secondary, #525252);
-        font-size: 0.75rem;
-        margin-top: 0.25rem;
-    }
-    .helper-text.warning {
-        color: var(--cds-support-warning, #f1c21b);
+    .picker-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--cds-border-subtle-01, #393939); margin-bottom: 0.5rem; }
+    .tab {
+        padding: 0.5rem 1rem; background: transparent; border: none;
+        border-bottom: 2px solid transparent; color: var(--cds-text-secondary, #c6c6c6);
+        font-size: 0.8125rem; cursor: pointer; transition: color 0.15s, border-color 0.15s;
     }
+    .tab:hover { color: var(--cds-text-primary, #f4f4f4); }
+    .tab.active { color: var(--cds-text-primary, #f4f4f4); border-bottom-color: var(--cds-border-interactive, #052FAD); }
+    .tree-layout { display: grid; grid-template-columns: minmax(180px, 40%) 1fr; gap: 0.75rem; align-items: start; }
+    .tree-pane { min-width: 0; }
+    .tree-entries { min-width: 0; }
+    .helper-text { color: var(--cds-text-secondary, #525252); font-size: 0.75rem; margin-top: 0.25rem; }
+    .helper-text.warning { color: var(--cds-support-warning, #f1c21b); }
 </style>