@dxos/plugin-search 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-search",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.bcb3aa67d6",
   "description": "Search plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,6 +12,15 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": "./src/capabilities/index.ts",
+    "#components": "./src/components/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#hooks": "./src/hooks/index.ts",
+    "#meta": "./src/meta.ts",
+    "#operations": "./src/operations/index.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -28,56 +37,59 @@
   "dependencies": {
     "exa-js": "^1.5.12",
     "main-thread-scheduling": "^14.1.1",
-    "@dxos/assistant": "0.8.4-main.bc674ce",
-    "@dxos/ai": "0.8.4-main.bc674ce",
-    "@dxos/app-framework": "0.8.4-main.bc674ce",
-    "@dxos/async": "0.8.4-main.bc674ce",
-    "@dxos/debug": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/echo-protocol": "0.8.4-main.bc674ce",
-    "@dxos/echo-query": "0.8.4-main.bc674ce",
-    "@dxos/blueprints": "0.8.4-main.bc674ce",
-    "@dxos/effect": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/operation": "0.8.4-main.bc674ce",
-    "@dxos/plugin-deck": "0.8.4-main.bc674ce",
-    "@dxos/plugin-graph": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/plugin-space": "0.8.4-main.bc674ce",
-    "@dxos/react-client": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-components": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-searchlist": "0.8.4-main.bc674ce",
-    "@dxos/schema": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-stack": "0.8.4-main.bc674ce",
-    "@dxos/types": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce",
-    "@dxos/plugin-client": "0.8.4-main.bc674ce"
+    "@dxos/ai": "0.8.4-main.bcb3aa67d6",
+    "@dxos/app-toolkit": "0.8.4-main.bcb3aa67d6",
+    "@dxos/app-framework": "0.8.4-main.bcb3aa67d6",
+    "@dxos/assistant": "0.8.4-main.bcb3aa67d6",
+    "@dxos/async": "0.8.4-main.bcb3aa67d6",
+    "@dxos/blueprints": "0.8.4-main.bcb3aa67d6",
+    "@dxos/debug": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo-protocol": "0.8.4-main.bcb3aa67d6",
+    "@dxos/effect": "0.8.4-main.bcb3aa67d6",
+    "@dxos/invariant": "0.8.4-main.bcb3aa67d6",
+    "@dxos/operation": "0.8.4-main.bcb3aa67d6",
+    "@dxos/log": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-space": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-graph": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-deck": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo-query": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-attention": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-components": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-menu": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-search": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-mosaic": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-stack": "0.8.4-main.bcb3aa67d6",
+    "@dxos/util": "0.8.4-main.bcb3aa67d6",
+    "@dxos/schema": "0.8.4-main.bcb3aa67d6",
+    "@dxos/types": "0.8.4-main.bcb3aa67d6"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/plugin-preview": "0.8.4-main.bc674ce",
-    "@dxos/plugin-testing": "0.8.4-main.bc674ce",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/plugin-testing": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-preview": "0.8.4-main.bcb3aa67d6",
+    "@dxos/random": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/storybook-utils": "0.8.4-main.bcb3aa67d6"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "publishConfig": {
     "access": "public"

package/src/SearchPlugin.tsx

@@ -2,16 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Common, Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 
-import { AppGraphBuilder, OperationResolver, ReactSurface } from './capabilities';
-import { SEARCH_RESULT, meta } from './meta';
+import { SEARCH_RESULT, meta } from '#meta';
 import { translations } from './translations';
-import { type SearchResult } from './types';
+import { type SearchResult } from '#types';
+
+import { AppGraphBuilder, OperationHandler, ReactSurface } from '#capabilities';
 
 export const SearchPlugin = Plugin.define(meta).pipe(
-  Common.Plugin.addTranslationsModule({ translations }),
-  Common.Plugin.addMetadataModule({
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addMetadataModule({
     metadata: {
       id: SEARCH_RESULT,
       metadata: {
@@ -28,8 +30,8 @@ export const SearchPlugin = Plugin.define(meta).pipe(
       },
     },
   }),
-  Common.Plugin.addAppGraphModule({ activate: AppGraphBuilder }),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
-  Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
   Plugin.make,
 );

package/src/capabilities/{app-graph-builder/app-graph-builder.ts → app-graph-builder.ts}

@@ -4,40 +4,36 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, AppNode, getSpaceIdFromPath } from '@dxos/app-toolkit';
+import { linkedSegment } from '@dxos/react-ui-attention';
 import { Operation } from '@dxos/operation';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { ClientCapabilities } from '@dxos/plugin-client/types';
 import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
-import { parseId } from '@dxos/react-client/echo';
 
-import { meta } from '../../meta';
-import { SearchOperation } from '../../types';
+import { meta } from '#meta';
+import { SearchOperation } from '#operations';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const extensions = yield* Effect.all([
       GraphBuilder.createExtension({
-        id: `${meta.id}/space-search`,
+        id: `${meta.id}.space-search`,
         match: NodeMatcher.whenRoot,
         connector: Effect.fnUntraced(function* (node, get) {
           const client = yield* Capability.get(ClientCapabilities.Client);
-          const layoutAtom = get(yield* Capability.atom(Common.Capability.Layout))[0];
+          const layoutAtom = get(yield* Capability.atom(AppCapabilities.Layout))[0];
           const layout = layoutAtom ? get(layoutAtom) : undefined;
-          const { spaceId } = parseId(layout?.workspace);
+          const spaceId = layout?.workspace ? getSpaceIdFromPath(layout.workspace) : undefined;
           const space = spaceId ? client.spaces.get(spaceId) : null;
 
           return [
-            {
-              id: [node.id, 'search'].join(ATTENDABLE_PATH_SEPARATOR),
-              type: DECK_COMPANION_TYPE,
+            AppNode.makeDeckCompanion({
+              id: linkedSegment('search'),
+              label: ['search.label', { ns: meta.id }],
+              icon: 'ph--magnifying-glass--regular',
               data: space,
-              properties: {
-                label: ['search label', { ns: meta.id }],
-                icon: 'ph--magnifying-glass--regular',
-                disposition: 'hidden',
-              },
-            },
+            }),
           ];
         }),
       }),
@@ -53,7 +49,7 @@ export default Capability.makeModule(
                 return false;
               }),
               properties: {
-                label: ['search action label', { ns: meta.id }],
+                label: ['search-action.label', { ns: meta.id }],
                 icon: 'ph--magnifying-glass--regular',
                 keyBinding: {
                   macos: 'shift+meta+f',
@@ -65,6 +61,6 @@ export default Capability.makeModule(
       }),
     ]);
 
-    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
   }),
 );

package/src/capabilities/index.ts

@@ -2,6 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './app-graph-builder';
-export * from './operation-resolver';
-export * from './react-surface';
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/operation';
+
+import { SearchOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, SearchOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { useActiveSpace } from '@dxos/app-toolkit/ui';
+import { type Space, isSpace } from '@dxos/react-client/echo';
+
+import { SEARCH_DIALOG } from '../constants';
+import { SearchArticle, SearchDialog, type SearchDialogProps } from '#containers';
+import { SearchContextProvider } from '#hooks';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: SEARCH_DIALOG,
+        role: 'dialog',
+        filter: (data): data is { props: SearchDialogProps } => data.component === SEARCH_DIALOG,
+        component: ({ data }) => (
+          <SearchContextProvider>
+            <SearchDialog {...data.props} />
+          </SearchContextProvider>
+        ),
+      }),
+      Surface.create({
+        id: `${SEARCH_DIALOG}.search-input`,
+        role: 'search-input',
+        component: () => {
+          const space = useActiveSpace();
+
+          return (
+            <SearchContextProvider>
+              <SearchArticle space={space} />
+            </SearchContextProvider>
+          );
+        },
+      }),
+      Surface.create({
+        id: `${SEARCH_DIALOG}.search`,
+        role: 'deck-companion--search',
+        filter: (data): data is { subject: Space } => isSpace(data.subject),
+        component: ({ data }) => {
+          const space = data.subject;
+          if (!space) {
+            return null;
+          }
+
+          return (
+            <SearchContextProvider>
+              <SearchArticle space={space} />
+            </SearchContextProvider>
+          );
+        },
+      }),
+    ]),
+  ),
+);

package/src/components/SearchResultStack/SearchResultStack.tsx

@@ -0,0 +1,118 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type KeyboardEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { Entity } from '@dxos/echo';
+import { Card, Toolbar } from '@dxos/react-ui';
+import { Menu } from '@dxos/react-ui-menu';
+import { type MosaicTileProps, Mosaic, useMosaicContainer, Focus } from '@dxos/react-ui-mosaic';
+import { ScrollArea } from '@dxos/react-ui';
+import { type SearchResult } from '@dxos/react-ui-search';
+import { composable, composableProps } from '@dxos/ui-theme';
+
+//
+// SearchResultStack
+//
+
+export type SearchResultStackProps = {
+  results: SearchResult[];
+};
+
+export const SearchResultStack = composable<HTMLDivElement, SearchResultStackProps>(
+  ({ results, ...props }, forwardedRef) => {
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+    const items = useMemo(() => results.map((result) => ({ result })), [results]);
+
+    const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        (document.activeElement as HTMLElement | null)?.click();
+      }
+    }, []);
+
+    return (
+      <Focus.Group asChild {...composableProps(props)} onKeyDown={handleKeyDown} ref={forwardedRef}>
+        <Mosaic.Container asChild>
+          <ScrollArea.Root orientation='vertical' padding centered>
+            <ScrollArea.Viewport ref={setViewport}>
+              <Mosaic.VirtualStack
+                Tile={SearchResultTile}
+                classNames='my-2'
+                gap={8}
+                items={items}
+                draggable={false}
+                getId={(item) => item.result.id}
+                getScrollElement={() => viewport}
+                estimateSize={() => 150}
+              />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Mosaic.Container>
+      </Focus.Group>
+    );
+  },
+);
+
+SearchResultStack.displayName = 'SearchResultStack';
+
+//
+// SearchResultTile
+//
+
+type SearchResultTileData = {
+  result: SearchResult;
+};
+
+type SearchResultTileProps = Pick<MosaicTileProps<SearchResultTileData>, 'location' | 'data' | 'current'>;
+
+/**
+ * Search result tile that uses Surface to render object content.
+ */
+const SearchResultTile = forwardRef<HTMLDivElement, SearchResultTileProps>(
+  ({ data, location, current }, forwardedRef) => {
+    const { result } = data;
+    const menuItems = useObjectMenuItems(result.object);
+    const { setCurrentId } = useMosaicContainer('SearchResultTile');
+
+    const handleCurrentChange = useCallback(() => {
+      setCurrentId(result.id);
+    }, [result.id, setCurrentId]);
+
+    return (
+      <Menu.Root>
+        <Mosaic.Tile
+          asChild
+          classNames='dx-hover dx-current dx-selected'
+          id={result.id}
+          data={data}
+          location={location}
+        >
+          <Focus.Item asChild current={current} onCurrentChange={handleCurrentChange}>
+            <Card.Root ref={forwardedRef} role='button' classNames='cursor-pointer'>
+              <Card.Toolbar>
+                <Card.IconBlock />
+                <Card.Title>{result.label ?? (result.object && Entity.getLabel(result.object))}</Card.Title>
+                <Menu.Trigger asChild disabled={!menuItems?.length}>
+                  <Toolbar.IconButton
+                    iconOnly
+                    variant='ghost'
+                    icon='ph--dots-three-vertical--regular'
+                    label='Actions'
+                  />
+                </Menu.Trigger>
+                <Menu.Content items={menuItems} />
+              </Card.Toolbar>
+              <Surface.Surface role='card--content' data={{ subject: result.object }} limit={1} />
+            </Card.Root>
+          </Focus.Item>
+        </Mosaic.Tile>
+      </Menu.Root>
+    );
+  },
+);
+
+SearchResultTile.displayName = 'SearchResultTile';

package/src/components/SearchResultStack/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SearchResultStack';

package/src/components/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './SearchMain';
-export * from './SearchDialog';
-export * from './SpaceMain';
+export * from './SearchResultStack';

package/src/constants.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from '#meta';
+
+export const SEARCH_DIALOG = `${meta.id}.SearchDialog`;

package/src/containers/SearchArticle/SearchArticle.stories.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { corePlugins, StorybookPlugin } from '@dxos/plugin-testing';
+import { faker } from '@dxos/random';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+import { createObjectFactory } from '@dxos/schema/testing';
+import { Organization, Person } from '@dxos/types';
+
+import { SearchContextProvider } from '#hooks';
+import { translations } from '../../translations';
+
+import { SearchArticle } from './SearchArticle';
+
+faker.seed(0);
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  if (!space) {
+    return <Loading />;
+  }
+
+  return (
+    <SearchContextProvider>
+      <SearchArticle space={space} />
+    </SearchContextProvider>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-search/containers/SearchArticle',
+  component: SearchArticle,
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      capabilities: [Capability.contributes(AppCapabilities.Translations, translations)],
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [Organization.Organization, Person.Person],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+
+              const factory = createObjectFactory(personalSpace.db, faker as any);
+              yield* Effect.promise(() =>
+                factory([
+                  { type: Organization.Organization, count: 10 },
+                  { type: Person.Person, count: 50 },
+                ]),
+              );
+            }),
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof SearchArticle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/SearchArticle/SearchArticle.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { Entity, Query } from '@dxos/echo';
+import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
+import { Panel, Toolbar } from '@dxos/react-ui';
+import { SearchList } from '@dxos/react-ui-search';
+import { Text } from '@dxos/schema';
+import { isTauri, getHostPlatform } from '@dxos/util';
+
+import { SearchResultStack } from '#components';
+import { useGlobalSearch, useGlobalSearchResults, useWebSearch } from '#hooks';
+
+export type SearchArticleProps = {
+  space?: Space;
+};
+
+export const SearchArticle = ({ space }: SearchArticleProps) => {
+  // TODO(burdon): Option to query across spaces.
+  const [query, setQuery] = useState<string>();
+  // TODO(burdon): Re-enable full-text search when indexer is available in all environments.
+  const objects = useQuery(
+    space?.db,
+    query === undefined ? Query.select(Filter.nothing()) : Query.select(Filter.not(Filter.type(Text.Text))),
+  );
+
+  const { setMatch } = useGlobalSearch();
+  const results = useGlobalSearchResults(objects);
+  const { results: webResults } = useWebSearch({ query });
+  const allResults = useMemo(
+    () => [...results, ...webResults].filter(({ object }) => object && Entity.getLabel(object)),
+    [results, webResults],
+  );
+
+  const handleSearch = useCallback(
+    (text: string) => {
+      setQuery(text);
+      setMatch?.(text);
+    },
+    [setMatch],
+  );
+
+  const autoFocus = !isTauri() || getHostPlatform() !== 'ios';
+
+  // TODO(burdon): Move current up/down without losing focus.
+  return (
+    <SearchList.Root onSearch={handleSearch}>
+      <Panel.Root>
+        <Panel.Content asChild>
+          <SearchResultStack results={allResults} />
+        </Panel.Content>
+        <Panel.Statusbar asChild>
+          <Toolbar.Root>
+            <SearchList.Input placeholder='Search...' autoFocus={autoFocus} />
+          </Toolbar.Root>
+        </Panel.Statusbar>
+      </Panel.Root>
+    </SearchList.Root>
+  );
+};

package/src/containers/SearchArticle/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { SearchArticle } from './SearchArticle';
+
+export default SearchArticle;