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

package/dist/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/dist/DCCatalogEntryPicker/AssetTree.svelte.d.ts

@@ -0,0 +1,13 @@
+export default AssetTree;
+type AssetTree = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const AssetTree: import("svelte").Component<{
+    client?: any;
+    onSelectNode?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    client?: any;
+    onSelectNode?: any;
+};

package/dist/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>

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

@@ -2,6 +2,7 @@ import type { CatalogEntry } from '@industream/datacatalog-client/dto';
 interface Props {
     dcApiUrl?: string;
     sourceConnectionId?: string;
+    sourceTypes?: string[];
     selectedIds?: string[];
     entries?: CatalogEntry[];
     columns?: string[];

package/dist/DCCatalogEntryPicker/LabelFacet.svelte

@@ -0,0 +1,97 @@
+<script>
+    /**
+     * LabelFacet - loads catalog labels and renders them as toggle chips.
+     * Selecting chips emits the active labelIds (OR filter) to the container,
+     * which owns the fetch. This component never fetches catalog entries.
+     */
+    let {
+        client = null,
+        selectedLabelIds = $bindable([]),
+        onChange = null
+    } = $props();
+
+    let labels = $state([]);
+    let loading = $state(false);
+    let error = $state('');
+
+    /** Cancels an in-flight labels fetch (e.g. client/url changes before it resolves). */
+    let abort = null;
+
+    /** Load labels once a client is available. */
+    $effect(() => {
+        if (client) loadLabels(client);
+    });
+
+    async function loadLabels(dc) {
+        abort?.abort();
+        const a = new AbortController();
+        abort = a;
+        loading = true;
+        error = '';
+        try {
+            const result = await dc.labels.get(undefined, a.signal);
+            if (a.signal.aborted) return;
+            labels = result.items ?? [];
+        } catch (err) {
+            if (a.signal.aborted) return;
+            error = err?.message ?? 'Failed to load labels';
+            labels = [];
+        } finally {
+            if (!a.signal.aborted) loading = false;
+        }
+    }
+
+    function toggle(id) {
+        selectedLabelIds = selectedLabelIds.indexOf(id) >= 0
+            ? selectedLabelIds.filter(x => x !== id)
+            : [...selectedLabelIds, id];
+        onChange?.(selectedLabelIds);
+    }
+
+    function clearAll() {
+        if (selectedLabelIds.length === 0) return;
+        selectedLabelIds = [];
+        onChange?.(selectedLabelIds);
+    }
+</script>
+
+{#if loading}
+    <div class="label-facet muted">Loading labels...</div>
+{:else if error}
+    <div class="label-facet notice">Labels unavailable - search works without label filtering.</div>
+{:else if labels.length > 0}
+    <div class="label-facet">
+        <span class="facet-label">Labels:</span>
+        {#each labels as label (label.id)}
+            {@const active = selectedLabelIds.includes(label.id)}
+            <button type="button" class="chip" class:active onclick={() => toggle(label.id)}>{label.name}</button>
+        {/each}
+        {#if selectedLabelIds.length > 0}
+            <button type="button" class="chip clear" onclick={clearAll}>Clear</button>
+        {/if}
+    </div>
+{/if}
+
+<style>
+    .label-facet {
+        display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
+        padding: 0.5rem 0; font-size: 0.75rem;
+    }
+    .facet-label { color: var(--cds-text-secondary, #c6c6c6); margin-right: 0.25rem; }
+    .muted { color: var(--cds-text-helper, #8d8d8d); }
+    .notice { color: var(--cds-support-warning, #f1c21b); }
+    .chip {
+        padding: 0.125rem 0.5rem;
+        background: var(--cds-tag-background-gray, #393939);
+        color: var(--cds-tag-color-gray, #c6c6c6);
+        border: 1px solid transparent; border-radius: 1rem;
+        font-size: 0.6875rem; cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
+    }
+    .chip:hover { background: var(--cds-layer-hover-01, #4c4c4c); }
+    .chip.active {
+        background: var(--cds-layer-selected-01, #052FAD);
+        color: var(--cds-text-on-color, #ffffff);
+        border-color: var(--cds-focus, #052FAD);
+    }
+    .chip.clear { background: transparent; border-color: var(--cds-border-strong-01, #6f6f6f); }
+</style>

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

@@ -0,0 +1,15 @@
+export default LabelFacet;
+type LabelFacet = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LabelFacet: import("svelte").Component<{
+    client?: any;
+    selectedLabelIds?: any[];
+    onChange?: any;
+}, {}, "selectedLabelIds">;
+type $$ComponentProps = {
+    client?: any;
+    selectedLabelIds?: any[];
+    onChange?: any;
+};

package/dist/DCCatalogEntryPicker/TagBrowser.svelte

@@ -183,7 +183,7 @@
             {#if showLoadMore}
                 <div class="load-more" use:autoLoad>
                     {#if loadingMore}
-                        <div class="spinner"></div> <span>Loading more…</span>
+                        <div class="spinner"></div> <span>Loading more...</span>
                     {:else}
                         <button class="action-button" onclick={() => onLoadMore?.()}>
                             Load more ({remaining} remaining)
@@ -191,7 +191,7 @@
                     {/if}
                 </div>
                 {#if loadMoreError}
-                    <div class="load-more-error">{loadMoreError} — <button class="link-button" onclick={() => onLoadMore?.()}>retry</button></div>
+                    <div class="load-more-error">{loadMoreError} - <button class="link-button" onclick={() => onLoadMore?.()}>retry</button></div>
                 {/if}
             {/if}
         </div>