@vertesia/ui 1.5.0-dev.20260807.073259Z → 1.5.0-dev.20260826.064249Z

package/src/features/views/ViewExperience.tsx

@@ -1,20 +1,31 @@
+import type { VertesiaClient } from '@vertesia/client';
 import type {
     ExecuteViewRequest,
+    Permission,
     ViewDisplayConfiguration,
     ViewExecutionResult,
     ViewHit,
     ViewNavigationItem,
     ViewResultMedia,
 } from '@vertesia/common';
-import { ImageRenditionFormat } from '@vertesia/common';
+import { ImageRenditionFormat, Permission as PermissionValue } from '@vertesia/common';
 import { Button, ErrorBox, MessageBox, SelectBox, Spinner } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { FullHeightLayout } from '@vertesia/ui/layout';
 import { useUserSession } from '@vertesia/ui/session';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { GenericPageNavHeader } from '../layout/GenericPageNavHeader.js';
-import type { ViewExecutor, ViewExperienceRenderers, ViewMediaResolver } from './types.js';
+import { UserPermissionsContext } from '../permissions/UserPermissionsProvider.js';
+import type {
+    ViewExecutor,
+    ViewExperienceContributions,
+    ViewExperienceRenderers,
+    ViewMediaResolver,
+    ViewSelectionController,
+} from './types.js';
+import { ViewActionsProvider, ViewActionsToolbar } from './ViewActions.js';
+import { ViewDropTarget } from './ViewDropTarget.js';
 import { DefaultViewNavigation } from './ViewNavigation.js';
 import { DefaultViewResults } from './ViewResults.js';
 import { DefaultViewSearch } from './ViewSearch.js';
@@ -37,6 +48,7 @@ export interface ViewExperienceProps {
     /** Override execution for embedded apps or tests. Defaults to client.views.execute. */
     execute?: ViewExecutor;
     renderers?: ViewExperienceRenderers;
+    contributions?: ViewExperienceContributions;
     onOpenHit?: (hit: ViewHit) => void;
     /** Override media resolution for embedded apps or custom storage backends. */
     resolveMedia?: ViewMediaResolver;
@@ -55,8 +67,18 @@ function cleanRecord(values: Record<string, string[]>): Record<string, string[]>
     return Object.keys(filtered).length > 0 ? filtered : undefined;
 }
 
+function cleanStringRecord(values: Record<string, string>): Record<string, string> | undefined {
+    const filtered = Object.fromEntries(
+        Object.entries(values)
+            .map(([key, value]) => [key, value.trim()] as const)
+            .filter(([, value]) => value.length > 0),
+    );
+    return Object.keys(filtered).length > 0 ? filtered : undefined;
+}
+
 function ViewExperienceWithSession(props: Omit<ViewExperienceProps, 'execute'>) {
     const { client } = useUserSession();
+    const permissions = useContext(UserPermissionsContext);
     const execute = useCallback(
         (request: ExecuteViewRequest) => client.views.execute(props.viewId, request),
         [client, props.viewId],
@@ -88,11 +110,30 @@ function ViewExperienceWithSession(props: Omit<ViewExperienceProps, 'execute'>)
         },
         [client],
     );
-    return <ViewExperienceRuntime {...props} execute={execute} resolveMedia={props.resolveMedia ?? resolveMedia} />;
+    const hasAnyPermission = (values: Permission[]) =>
+        permissions !== undefined && values.some((permission) => permissions.hasPermission(permission));
+    return (
+        <ViewExperienceRuntime
+            {...props}
+            execute={execute}
+            resolveMedia={props.resolveMedia ?? resolveMedia}
+            client={client}
+            canDelete={hasAnyPermission([
+                PermissionValue.content_delete,
+                PermissionValue.content_admin,
+                PermissionValue.content_superadmin,
+            ])}
+            canWrite={hasAnyPermission([
+                PermissionValue.content_write,
+                PermissionValue.content_admin,
+                PermissionValue.content_superadmin,
+            ])}
+        />
+    );
 }
 
 /**
- * Reusable renderer for stored and app-contributed View Experiences.
+ * Reusable renderer for stored, system, and app-contributed View Experiences.
  * Pass `execute` to use it outside Vertesia's session provider.
  */
 export function ViewExperience({ execute, ...props }: ViewExperienceProps) {
@@ -105,16 +146,23 @@ export function ViewExperience({ execute, ...props }: ViewExperienceProps) {
 
 interface ViewExperienceRuntimeProps extends Omit<ViewExperienceProps, 'execute'> {
     execute: ViewExecutor;
+    client?: VertesiaClient;
+    canDelete?: boolean;
+    canWrite?: boolean;
 }
 
 function ViewExperienceRuntime({
     execute,
     renderers,
+    contributions,
     onOpenHit,
     resolveMedia,
     syncUrl = true,
     showHeader = true,
     className,
+    client,
+    canDelete = false,
+    canWrite = false,
 }: ViewExperienceRuntimeProps) {
     const { t } = useUITranslation();
     const executeRef = useRef(execute);
@@ -126,10 +174,18 @@ function ViewExperienceRuntime({
     const [result, setResult] = useState<ViewExecutionResult>();
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<Error>();
+    const [selectedHits, setSelectedHits] = useState<Record<string, ViewHit>>({});
+    const selectionAnchorRef = useRef<string | undefined>(undefined);
+
+    const clearSelection = useCallback(() => {
+        selectionAnchorRef.current = undefined;
+        setSelectedHits({});
+    }, []);
 
     const runRequest = useCallback(
-        (next: ExecuteViewRequest, updateUrl: boolean) => {
+        (next: ExecuteViewRequest, updateUrl: boolean, preserveSelection = false) => {
             const generation = ++generationRef.current;
+            if (!preserveSelection) clearSelection();
             setRequest(next);
             if (updateUrl && syncUrl) replaceViewStateInUrl(next);
             setIsLoading(true);
@@ -153,7 +209,7 @@ function ViewExperienceRuntime({
                     if (generation === generationRef.current) setIsLoading(false);
                 });
         },
-        [syncUrl],
+        [clearSelection, syncUrl],
     );
 
     const loadUrlState = useCallback(() => {
@@ -183,6 +239,7 @@ function ViewExperienceRuntime({
         [definition?.navigation],
     );
     const resultsConfiguration = definition?.results;
+    const selectionConfiguration = resultsConfiguration?.selection;
     const effectiveDisplayId = result?.display ?? request.display ?? resultsConfiguration?.default_display;
     const display =
         resultsConfiguration?.displays.find((candidate) => candidate.id === effectiveDisplayId) ?? FALLBACK_DISPLAY;
@@ -199,6 +256,14 @@ function ViewExperienceRuntime({
         applyRequest({ ...request, navigation: nextNavigation, offset: undefined });
     };
 
+    const updateNavigationQuery = (item: ViewNavigationItem, query: string) => {
+        const navigation_queries = cleanStringRecord({
+            ...(request.navigation_queries ?? {}),
+            [item.id]: query,
+        });
+        applyRequest({ ...request, navigation_queries, offset: undefined });
+    };
+
     const submitSearch = () => {
         applyRequest({
             ...request,
@@ -208,6 +273,59 @@ function ViewExperienceRuntime({
         });
     };
 
+    const selection = useMemo<ViewSelectionController | undefined>(() => {
+        if (!selectionConfiguration) return undefined;
+        const selectedIds = Object.keys(selectedHits);
+        return {
+            mode: selectionConfiguration.mode,
+            selectAll: selectionConfiguration.mode === 'multiple' && selectionConfiguration.select_all === 'page',
+            selectedIds,
+            selectedHits: selectedIds.map((id) => selectedHits[id]).filter((hit): hit is ViewHit => hit !== undefined),
+            isSelected: (id) => selectedHits[id] !== undefined,
+            toggle: (hit, selected, options) => {
+                setSelectedHits((current) => {
+                    if (!selected) {
+                        const next = { ...current };
+                        delete next[hit.id];
+                        return next;
+                    }
+                    if (selectionConfiguration.mode === 'single') {
+                        selectionAnchorRef.current = hit.id;
+                        return { [hit.id]: hit };
+                    }
+                    const next = { ...current, [hit.id]: hit };
+                    if (options?.range && options.page && selectionAnchorRef.current) {
+                        const anchorIndex = options.page.findIndex(
+                            (candidate) => candidate.id === selectionAnchorRef.current,
+                        );
+                        const hitIndex = options.page.findIndex((candidate) => candidate.id === hit.id);
+                        if (anchorIndex >= 0 && hitIndex >= 0) {
+                            const start = Math.min(anchorIndex, hitIndex);
+                            const end = Math.max(anchorIndex, hitIndex);
+                            for (const candidate of options.page.slice(start, end + 1)) {
+                                next[candidate.id] = candidate;
+                            }
+                        }
+                    }
+                    selectionAnchorRef.current = hit.id;
+                    return next;
+                });
+            },
+            togglePage: (hits, selected) => {
+                if (selectionConfiguration.mode !== 'multiple') return;
+                setSelectedHits((current) => {
+                    const next = { ...current };
+                    for (const hit of hits) {
+                        if (selected) next[hit.id] = hit;
+                        else delete next[hit.id];
+                    }
+                    return next;
+                });
+            },
+            clear: clearSelection,
+        };
+    }, [clearSelection, selectedHits, selectionConfiguration]);
+
     if (!result && isLoading) {
         return (
             <div className="flex h-full min-h-48 items-center justify-center">
@@ -255,11 +373,14 @@ function ViewExperienceRuntime({
                 result={navigationResult}
                 isLoading={isLoading}
                 onChange={(values) => updateNavigation(item, values)}
+                onQueryChange={item.source === 'collection' ? (query) => updateNavigationQuery(item, query) : undefined}
             />
         );
     });
 
-    return (
+    const refresh = () => runRequest(request, false, true);
+
+    const content = (
         <FullHeightLayout className={className}>
             {showHeader && <GenericPageNavHeader title={definition.name} description={definition.description} />}
             <FullHeightLayout.Fixed heightClass="h-auto" className="space-y-3 border-b p-3">
@@ -324,6 +445,11 @@ function ViewExperienceRuntime({
                                 {isLoading && <Spinner size="sm" />}
                             </div>
                             <div className="flex flex-wrap items-center gap-3">
+                                <ViewActionsToolbar
+                                    selection={selection}
+                                    page={result.hits}
+                                    showSelectPage={display.type !== 'table'}
+                                />
                                 {resultsConfiguration?.allow_display_switch &&
                                     resultsConfiguration.displays.length > 1 && (
                                         <div className="flex items-center gap-2">
@@ -332,7 +458,11 @@ function ViewExperienceRuntime({
                                                 options={resultsConfiguration.displays}
                                                 value={display}
                                                 onChange={(option) =>
-                                                    applyRequest({ ...request, display: option.id, offset: undefined })
+                                                    void runRequest(
+                                                        { ...request, display: option.id, offset: undefined },
+                                                        true,
+                                                        true,
+                                                    )
                                                 }
                                                 optionLabel={(option) => option.label}
                                                 by="id"
@@ -351,7 +481,11 @@ function ViewExperienceRuntime({
                                                 (option) => option.id === effectiveSortId,
                                             )}
                                             onChange={(option) =>
-                                                applyRequest({ ...request, sort: option.id, offset: undefined })
+                                                void runRequest(
+                                                    { ...request, sort: option.id, offset: undefined },
+                                                    true,
+                                                    true,
+                                                )
                                             }
                                             optionLabel={(option) => option.label}
                                             by="id"
@@ -363,16 +497,28 @@ function ViewExperienceRuntime({
                                 )}
                             </div>
                         </div>
-                        <ResultsRenderer
-                            configuration={display}
+                        <ViewDropTarget
                             definition={definition}
                             request={request}
                             result={result}
-                            isLoading={isLoading}
-                            onSortChange={(sort) => applyRequest({ ...request, sort, offset: undefined })}
-                            onOpenHit={onOpenHit}
-                            resolveMedia={resolveMedia}
-                        />
+                            contribution={contributions?.drop}
+                            canWrite={canWrite}
+                            refresh={refresh}
+                        >
+                            <ResultsRenderer
+                                configuration={display}
+                                definition={definition}
+                                request={request}
+                                result={result}
+                                isLoading={isLoading}
+                                onSortChange={(sort) =>
+                                    void runRequest({ ...request, sort, offset: undefined }, true, true)
+                                }
+                                onOpenHit={onOpenHit}
+                                resolveMedia={resolveMedia}
+                                selection={selection}
+                            />
+                        </ViewDropTarget>
                         {(hasPrevious || hasNext) && (
                             <nav className="flex items-center justify-center gap-2" aria-label={t('view.pagination')}>
                                 <Button
@@ -380,10 +526,14 @@ function ViewExperienceRuntime({
                                     variant="outline"
                                     disabled={!hasPrevious || isLoading}
                                     onClick={() =>
-                                        applyRequest({
-                                            ...request,
-                                            offset: Math.max(0, offset - pageStep) || undefined,
-                                        })
+                                        void runRequest(
+                                            {
+                                                ...request,
+                                                offset: Math.max(0, offset - pageStep) || undefined,
+                                            },
+                                            true,
+                                            true,
+                                        )
                                     }
                                 >
                                     <ChevronLeft className="size-4 cn-rtl-flip" />
@@ -393,7 +543,9 @@ function ViewExperienceRuntime({
                                     type="button"
                                     variant="outline"
                                     disabled={!hasNext || isLoading}
-                                    onClick={() => applyRequest({ ...request, offset: offset + pageStep })}
+                                    onClick={() =>
+                                        void runRequest({ ...request, offset: offset + pageStep }, true, true)
+                                    }
                                 >
                                     {t('grounded.nextPage')}
                                     <ChevronRight className="size-4 cn-rtl-flip" />
@@ -405,4 +557,19 @@ function ViewExperienceRuntime({
             </FullHeightLayout.Body>
         </FullHeightLayout>
     );
+
+    return (
+        <ViewActionsProvider
+            definition={definition}
+            request={request}
+            result={result}
+            selection={selection}
+            contributions={contributions}
+            client={client}
+            canDelete={canDelete}
+            refresh={refresh}
+        >
+            {content}
+        </ViewActionsProvider>
+    );
 }

package/src/features/views/ViewMedia.test.tsx

@@ -0,0 +1,180 @@
+import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
+import {
+    ContentObjectStatus,
+    type ExecuteViewRequest,
+    type ViewDisplayConfiguration,
+    type ViewExecutionDefinition,
+    type ViewExecutionResult,
+} from '@vertesia/common';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils.js';
+import type { ViewMediaResolver } from './types.js';
+import { DefaultViewResults } from './ViewResults.js';
+
+const display: ViewDisplayConfiguration = {
+    id: 'list',
+    label: 'List',
+    type: 'list',
+    title: { field: 'name', label: 'Name' },
+    media: { source: 'content_thumbnail' },
+};
+
+const definition: ViewExecutionDefinition = {
+    name: 'Document Library',
+    results: { default_display: 'list', displays: [display] },
+};
+
+const request: ExecuteViewRequest = { display: 'list' };
+
+const result: ViewExecutionResult = {
+    view: 'document-lib',
+    revision: 1,
+    definition,
+    display: 'list',
+    search: { requested_mode: 'browse', applied_mode: 'browse', warnings: [] },
+    hits: [
+        {
+            id: 'document-1',
+            document: {
+                id: 'document-1',
+                name: 'Renewal Agreement',
+                created_at: '2026-01-01T00:00:00.000Z',
+                created_by: 'user-1',
+                updated_at: '2026-01-02T00:00:00.000Z',
+                updated_by: 'user-1',
+                location: '/Customers/Acme',
+                status: ContentObjectStatus.completed,
+                properties: {},
+                revision: { root: 'document-1', head: true },
+            },
+        },
+    ],
+    total: 1,
+    navigation: {},
+    took: 1,
+};
+
+function renderResults(resolveMedia: ViewMediaResolver) {
+    return renderWithProviders(
+        <DefaultViewResults
+            configuration={display}
+            definition={definition}
+            request={request}
+            result={result}
+            isLoading={false}
+            resolveMedia={resolveMedia}
+        />,
+    );
+}
+
+// Property-backed media: the URL comes straight off the hit, so no resolver runs and no mediaKey
+// exists. Rendered through the same DefaultViewResults path with a `thumbnail` property.
+const propertyDisplay: ViewDisplayConfiguration = {
+    ...display,
+    media: { source: 'property', field: 'properties.thumbnail' },
+};
+
+const propertyDefinition: ViewExecutionDefinition = {
+    name: 'Document Library',
+    results: { default_display: 'list', displays: [propertyDisplay] },
+};
+
+function propertyResults(thumbnail: string) {
+    const hit = result.hits[0];
+    const propertyResult: ViewExecutionResult = {
+        ...result,
+        definition: propertyDefinition,
+        hits: [{ ...hit, document: { ...hit.document, properties: { thumbnail } } }],
+    };
+    return (
+        <DefaultViewResults
+            configuration={propertyDisplay}
+            definition={propertyDefinition}
+            request={request}
+            result={propertyResult}
+            isLoading={false}
+        />
+    );
+}
+
+function renderPropertyResults(thumbnail: string) {
+    const rendered = renderWithProviders(propertyResults(thumbnail));
+    return {
+        container: rendered.container,
+        rerenderWith: (next: string) => rendered.rerender(propertyResults(next)),
+    };
+}
+
+describe('ViewMedia resolution', () => {
+    beforeEach(() => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+    });
+
+    afterEach(() => {
+        vi.useRealTimers();
+        cleanup();
+    });
+
+    it('keeps concurrent resolutions of the same media separate per resolver', async () => {
+        const first = vi.fn<ViewMediaResolver>(async () => 'https://cdn.test/first.png');
+        const second = vi.fn<ViewMediaResolver>(async () => 'https://cdn.test/second.png');
+
+        const a = renderResults(first);
+        const b = renderResults(second);
+
+        await waitFor(() => {
+            expect(a.container.querySelector('img')?.getAttribute('src')).toBe('https://cdn.test/first.png');
+            expect(b.container.querySelector('img')?.getAttribute('src')).toBe('https://cdn.test/second.png');
+        });
+        expect(first).toHaveBeenCalledTimes(1);
+        expect(second).toHaveBeenCalledTimes(1);
+    });
+
+    it('retries a resolution that has no URL yet, then settles on the fallback', async () => {
+        const resolveMedia = vi.fn<ViewMediaResolver>(async () => undefined);
+        renderResults(resolveMedia);
+
+        await waitFor(() => expect(resolveMedia).toHaveBeenCalledTimes(1));
+        // Three backoff steps (2s, 4s, 8s), then the tile stops asking.
+        for (const [delay, expected] of [
+            [2_000, 2],
+            [4_000, 3],
+            [8_000, 4],
+        ]) {
+            await vi.advanceTimersByTimeAsync(delay);
+            await waitFor(() => expect(resolveMedia).toHaveBeenCalledTimes(expected));
+        }
+        await vi.advanceTimersByTimeAsync(30_000);
+        expect(resolveMedia).toHaveBeenCalledTimes(4);
+        expect(screen.queryByRole('img')).toBeNull();
+    });
+
+    it('does not retry a failed resolution', async () => {
+        const resolveMedia = vi.fn<ViewMediaResolver>(async () => {
+            throw new Error('Internal Server Error');
+        });
+        renderResults(resolveMedia);
+
+        await waitFor(() => expect(resolveMedia).toHaveBeenCalledTimes(1));
+        await vi.advanceTimersByTimeAsync(60_000);
+        expect(resolveMedia).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows a refreshed direct URL after the previous one failed to load', async () => {
+        const { container, rerenderWith } = renderPropertyResults('https://cdn.test/stale.png');
+
+        const img = () => container.querySelector('img');
+        expect(img()?.getAttribute('src')).toBe('https://cdn.test/stale.png');
+
+        // The browser cannot fetch it — the tile falls back to the icon.
+        fireEvent.error(img() as HTMLImageElement);
+        await waitFor(() => expect(container.querySelector('img')).toBeNull());
+
+        // A refreshed URL arrives on the same hit. No mediaKey exists for property media, so only
+        // directUrl can tell the effect to clear the failure.
+        rerenderWith('https://cdn.test/fresh.png');
+        await waitFor(() =>
+            expect(container.querySelector('img')?.getAttribute('src')).toBe('https://cdn.test/fresh.png'),
+        );
+    });
+});

package/src/features/views/ViewNavigation.test.tsx

@@ -83,4 +83,46 @@ describe('DefaultViewNavigation', () => {
         fireEvent.click(screen.getByRole('button', { name: 'FL' }));
         expect(onChange).toHaveBeenLastCalledWith(['h1:florida']);
     });
+
+    it('renders location breadcrumbs and navigates to an ancestor', () => {
+        const onChange = vi.fn();
+        renderWithProviders(
+            <DefaultViewNavigation
+                configuration={{ id: 'location', label: 'Location', source: 'location' }}
+                result={{
+                    id: 'location',
+                    selected: ['/Customers/Acme'],
+                    breadcrumbs: [
+                        { id: '/Customers', label: 'Customers', count: 12 },
+                        { id: '/Customers/Acme', label: 'Acme', count: 8, selected: true },
+                    ],
+                    nodes: [{ id: '/Customers/Acme/Orders', label: 'Orders', count: 8 }],
+                }}
+                isLoading={false}
+                onChange={onChange}
+            />,
+        );
+
+        fireEvent.click(screen.getByRole('button', { name: 'Customers' }));
+        expect(onChange).toHaveBeenCalledWith(['/Customers']);
+    });
+
+    it('submits a collection navigation query', () => {
+        const onQueryChange = vi.fn();
+        renderWithProviders(
+            <DefaultViewNavigation
+                configuration={{ id: 'collections', label: 'Collections', source: 'collection' }}
+                result={{ id: 'collections', selected: [], nodes: [] }}
+                isLoading={false}
+                onChange={vi.fn()}
+                onQueryChange={onQueryChange}
+            />,
+        );
+
+        fireEvent.change(screen.getByRole('textbox', { name: 'Filter Collections' }), {
+            target: { value: '  legal  ' },
+        });
+        fireEvent.click(screen.getByRole('button', { name: 'Search Collections' }));
+        expect(onQueryChange).toHaveBeenCalledWith('legal');
+    });
 });

package/src/features/views/ViewNavigation.tsx

@@ -1,8 +1,8 @@
 import type { ViewNavigationNode } from '@vertesia/common';
-import { Button, Checkbox, SelectBox } from '@vertesia/ui/core';
+import { Button, Checkbox, Input, SelectBox } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
-import { ChevronRight, X } from 'lucide-react';
-import { useId } from 'react';
+import { ChevronRight, Search, X } from 'lucide-react';
+import { type SyntheticEvent, useEffect, useId, useState } from 'react';
 import type { ViewNavigationRendererProps } from './types.js';
 
 function nextSelection(current: string[], id: string, selected: boolean, multiSelect: boolean | undefined): string[] {
@@ -20,7 +20,13 @@ function NodeLabel({ node }: { node: ViewNavigationNode }) {
     );
 }
 
-export function DefaultViewNavigation({ configuration, result, isLoading, onChange }: ViewNavigationRendererProps) {
+export function DefaultViewNavigation({
+    configuration,
+    result,
+    isLoading,
+    onChange,
+    onQueryChange,
+}: ViewNavigationRendererProps) {
     const { t } = useUITranslation();
     const idPrefix = useId();
     const presentation =
@@ -28,11 +34,21 @@ export function DefaultViewNavigation({ configuration, result, isLoading, onChan
         (configuration.source === 'location' || configuration.source === 'hierarchy' ? 'tree' : 'list');
     const multiSelect = configuration.source === 'hierarchy' ? false : configuration.multi_select;
     const breadcrumbs = result.breadcrumbs ?? [];
+    const [draftQuery, setDraftQuery] = useState(result.query ?? '');
+
+    useEffect(() => {
+        setDraftQuery(result.query ?? '');
+    }, [result.query]);
 
     const toggle = (id: string, selected: boolean) => {
         onChange(nextSelection(result.selected, id, selected, multiSelect));
     };
 
+    const submitQuery = (event: SyntheticEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        onQueryChange?.(draftQuery.trim());
+    };
+
     return (
         <section className="space-y-2" aria-labelledby={`${idPrefix}-label`}>
             <div className="flex items-center justify-between gap-2">
@@ -54,7 +70,28 @@ export function DefaultViewNavigation({ configuration, result, isLoading, onChan
                 )}
             </div>
 
-            {configuration.source === 'hierarchy' && breadcrumbs.length > 0 && (
+            {configuration.source === 'collection' && onQueryChange && (
+                <form className="flex items-center gap-1" onSubmit={submitQuery}>
+                    <Input
+                        value={draftQuery}
+                        onChange={setDraftQuery}
+                        disabled={isLoading}
+                        placeholder={t('view.filterNavigation', { label: configuration.label })}
+                        aria-label={t('view.filterNavigation', { label: configuration.label })}
+                    />
+                    <Button
+                        type="submit"
+                        variant="outline"
+                        size="icon"
+                        disabled={isLoading}
+                        aria-label={t('view.searchNavigation', { label: configuration.label })}
+                    >
+                        <Search aria-hidden="true" className="size-4" />
+                    </Button>
+                </form>
+            )}
+
+            {breadcrumbs.length > 0 && (
                 <nav aria-label={`${configuration.label} path`}>
                     <ol className="flex flex-wrap items-center gap-1 text-sm">
                         {breadcrumbs.map((node, index) => (
@@ -77,6 +114,7 @@ export function DefaultViewNavigation({ configuration, result, isLoading, onChan
             )}
 
             {result.selected.length > 0 &&
+                breadcrumbs.length === 0 &&
                 (configuration.source === 'location' || configuration.source === 'collection') && (
                     <div className="flex flex-wrap gap-1">
                         {result.selected.map((value) => {