@dxos/plugin-search 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-search",
-  "version": "0.8.4-main.e098934",
+  "version": "0.8.4-main.e8ec1fe",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,50 +27,50 @@
     "@preact-signals/safe-react": "^0.9.0",
     "exa-js": "^1.5.12",
     "main-thread-scheduling": "^14.1.1",
-    "@dxos/ai": "0.8.4-main.e098934",
-    "@dxos/app-framework": "0.8.4-main.e098934",
-    "@dxos/assistant": "0.8.4-main.e098934",
-    "@dxos/blueprints": "0.8.4-main.e098934",
-    "@dxos/debug": "0.8.4-main.e098934",
-    "@dxos/echo": "0.8.4-main.e098934",
-    "@dxos/echo-protocol": "0.8.4-main.e098934",
-    "@dxos/echo-schema": "0.8.4-main.e098934",
-    "@dxos/effect": "0.8.4-main.e098934",
-    "@dxos/invariant": "0.8.4-main.e098934",
-    "@dxos/log": "0.8.4-main.e098934",
-    "@dxos/live-object": "0.8.4-main.e098934",
-    "@dxos/plugin-deck": "0.8.4-main.e098934",
-    "@dxos/react-client": "0.8.4-main.e098934",
-    "@dxos/plugin-client": "0.8.4-main.e098934",
-    "@dxos/plugin-space": "0.8.4-main.e098934",
-    "@dxos/react-ui-stack": "0.8.4-main.e098934",
-    "@dxos/react-ui-searchlist": "0.8.4-main.e098934",
-    "@dxos/plugin-graph": "0.8.4-main.e098934",
-    "@dxos/schema": "0.8.4-main.e098934",
-    "@dxos/util": "0.8.4-main.e098934"
+    "@dxos/ai": "0.8.4-main.e8ec1fe",
+    "@dxos/app-framework": "0.8.4-main.e8ec1fe",
+    "@dxos/assistant": "0.8.4-main.e8ec1fe",
+    "@dxos/blueprints": "0.8.4-main.e8ec1fe",
+    "@dxos/debug": "0.8.4-main.e8ec1fe",
+    "@dxos/echo": "0.8.4-main.e8ec1fe",
+    "@dxos/echo-protocol": "0.8.4-main.e8ec1fe",
+    "@dxos/effect": "0.8.4-main.e8ec1fe",
+    "@dxos/invariant": "0.8.4-main.e8ec1fe",
+    "@dxos/live-object": "0.8.4-main.e8ec1fe",
+    "@dxos/log": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-client": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-deck": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-graph": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-space": "0.8.4-main.e8ec1fe",
+    "@dxos/react-client": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-searchlist": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-stack": "0.8.4-main.e8ec1fe",
+    "@dxos/schema": "0.8.4-main.e8ec1fe",
+    "@dxos/types": "0.8.4-main.e8ec1fe",
+    "@dxos/util": "0.8.4-main.e8ec1fe"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.90.2",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.17.7",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/random": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934",
-    "@dxos/storybook-utils": "0.8.4-main.e098934",
-    "@dxos/react-ui": "0.8.4-main.e098934"
+    "@effect-atom/atom-react": "^0.3.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe",
+    "@dxos/storybook-utils": "0.8.4-main.e8ec1fe"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934",
-    "@dxos/react-ui": "0.8.4-main.e098934"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
   },
   "publishConfig": {
     "access": "public"

package/src/SearchPlugin.tsx

@@ -9,46 +9,45 @@ import { SEARCH_RESULT, meta } from './meta';
 import { translations } from './translations';
 import { type SearchResult } from './types';
 
-export const SearchPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/metadata`,
-      activatesOn: Events.SetupMetadata,
-      activate: () =>
-        contributes(Capabilities.Metadata, {
-          id: SEARCH_RESULT,
-          metadata: {
-            parse: (item: SearchResult, type: string) => {
-              switch (type) {
-                case 'node':
-                  return { id: item.id, label: item.label, data: item.object };
-                case 'object':
-                  return item.object;
-                case 'view-object':
-                  return item;
-              }
-            },
+export const SearchPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/metadata`,
+    activatesOn: Events.SetupMetadata,
+    activate: () =>
+      contributes(Capabilities.Metadata, {
+        id: SEARCH_RESULT,
+        metadata: {
+          parse: (item: SearchResult, type: string) => {
+            switch (type) {
+              case 'node':
+                return { id: item.id, label: item.label, data: item.object };
+              case 'object':
+                return item.object;
+              case 'view-object':
+                return item;
+            }
           },
-        }),
-    }),
-    defineModule({
-      id: `${meta.id}/module/app-graph-builder`,
-      activatesOn: Events.SetupAppGraph,
-      activate: AppGraphBuilder,
-    }),
-    defineModule({
-      id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: IntentResolver,
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      activate: ReactSurface,
-    }),
-  ]);
+        },
+      }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: AppGraphBuilder,
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: IntentResolver,
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+]);

package/src/capabilities/app-graph-builder.ts

@@ -2,29 +2,30 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import { Atom } from '@effect-atom/atom-react';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 import { Capabilities, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
-import { ROOT_ID, createExtension, rxFromSignal } from '@dxos/plugin-graph';
+import { ROOT_ID, atomFromSignal, createExtension } from '@dxos/plugin-graph';
 import { parseId } from '@dxos/react-client/echo';
 
-import { SEARCH_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { SearchAction } from '../types';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
-      id: `${SEARCH_PLUGIN}/space-search`,
+      id: `${meta.id}/space-search`,
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map((node) => {
-              const workspace = get(rxFromSignal(() => context.getCapability(Capabilities.Layout).workspace));
+              const workspace = get(atomFromSignal(() => context.getCapability(Capabilities.Layout).workspace));
               const client = context.getCapability(ClientCapabilities.Client);
               const { spaceId } = parseId(workspace);
               const space = spaceId ? client.spaces.get(spaceId) : null;
@@ -35,7 +36,7 @@ export default (context: PluginContext) =>
                   type: DECK_COMPANION_TYPE,
                   data: space,
                   properties: {
-                    label: ['search label', { ns: SEARCH_PLUGIN }],
+                    label: ['search label', { ns: meta.id }],
                     icon: 'ph--magnifying-glass--regular',
                     disposition: 'hidden',
                   },
@@ -47,10 +48,10 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: SEARCH_PLUGIN,
+      id: meta.id,
       actions: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => {
@@ -62,7 +63,7 @@ export default (context: PluginContext) =>
                     await dispatch(createIntent(SearchAction.OpenSearch));
                   },
                   properties: {
-                    label: ['search action label', { ns: SEARCH_PLUGIN }],
+                    label: ['search action label', { ns: meta.id }],
                     icon: 'ph--magnifying-glass--regular',
                     keyBinding: {
                       macos: 'shift+meta+f',

package/src/capabilities/react-surface.tsx

@@ -28,9 +28,6 @@ export default () =>
       role: 'search-input',
       component: () => {
         const space = useActiveSpace();
-        if (!space) {
-          return null;
-        }
 
         return (
           <SearchContextProvider>

package/src/components/Search.stories.tsx

@@ -2,13 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Decorator, type Meta, type StoryFn, type StoryObj } from '@storybook/react-vite';
+import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { SearchContextProvider, useGlobalSearch, useGlobalSearchResults } from '../hooks';
 
@@ -28,7 +26,7 @@ const DefaultStory = ({ objects, ...props }: StoryProps) => {
 
   return (
     <div className='flex grow justify-center overflow-hidden'>
-      <div className='flex flex-col w-[300px] m-4 overflow-hidden'>
+      <div className='flex flex-col is-[300px] m-4 overflow-hidden'>
         <Searchbar variant='subdued' placeholder='Enter regular expression...' onChange={setMatch} {...props} />
         <SearchResults items={filteredItems} selected={selected} onSelect={setSelected} />
       </div>
@@ -36,8 +34,8 @@ const DefaultStory = ({ objects, ...props }: StoryProps) => {
   );
 };
 
-const SearchContextDecorator = (): Decorator => {
-  return (Story: StoryFn) => (
+const withSearchContext = (): Decorator => {
+  return (Story) => (
     <SearchContextProvider>
       <Story />
     </SearchContextProvider>
@@ -58,16 +56,7 @@ const meta = {
   title: 'plugins/plugin-search/Search',
   component: Searchbar,
   render: DefaultStory,
-  decorators: [
-    withTheme,
-    withLayout({
-      fullscreen: true,
-    }),
-    SearchContextDecorator(),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [withTheme, withLayout({ container: 'column' }), withSearchContext()],
 } satisfies Meta<typeof Searchbar>;
 
 export default meta;

package/src/components/SearchDialog.tsx

@@ -2,28 +2,30 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import React, { forwardRef, useCallback, useState } from 'react';
 
-import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher, useLayout } from '@dxos/app-framework';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { useAppGraph, useIntentDispatcher, useLayout } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
 import { type Node } from '@dxos/plugin-graph';
 import { useClient } from '@dxos/react-client';
-import { Filter, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
+import { Filter, useQuery } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { SearchList, type SearchListItemProps } from '@dxos/react-ui-searchlist';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 
 import { useSearchResults } from '../hooks';
-import { SEARCH_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
-export const SEARCH_DIALOG = `${SEARCH_PLUGIN}/SearchDialog`;
+export const SEARCH_DIALOG = `${meta.id}/SearchDialog`;
 
 type SearchListResultProps = {
   node: Node;
 } & Pick<SearchListItemProps, 'onSelect'>;
 
 const SearchListResult = forwardRef<HTMLDivElement, SearchListResultProps>(({ node, onSelect }, forwardedRef) => {
-  const { t } = useTranslation(SEARCH_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const label = toLocalizedString(node?.properties.label ?? 'never', t);
   return (
     <SearchList.Item
@@ -44,7 +46,7 @@ export type SearchDialogProps = {
 };
 
 export const SearchDialog = ({ pivotId }: SearchDialogProps) => {
-  const { t } = useTranslation(SEARCH_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
   const layout = useLayout();
   const closed = (Array.isArray(layout.inactive) ? layout.inactive : [layout.inactive])
@@ -59,12 +61,22 @@ export const SearchDialog = ({ pivotId }: SearchDialogProps) => {
 
   const handleSelect = useCallback(
     async (nodeId: string) => {
-      await dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
+      await dispatch(
+        createIntent(LayoutAction.UpdateDialog, {
+          part: 'dialog',
+          options: { state: false },
+        }),
+      );
 
       // If node is already present in the active parts, scroll to it and close the dialog.
       const index = layout.active.findIndex((id) => id === nodeId);
       if (index !== -1) {
-        await dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: nodeId }));
+        await dispatch(
+          createIntent(LayoutAction.ScrollIntoView, {
+            part: 'current',
+            subject: nodeId,
+          }),
+        );
       } else {
         await dispatch(
           createIntent(LayoutAction.Open, {
@@ -91,13 +103,13 @@ export const SearchDialog = ({ pivotId }: SearchDialogProps) => {
             setQueryString(nextValue);
           }}
           placeholder={t('search placeholder')}
-          classNames='px-1 my-2'
+          classNames='pli-1 my-2'
         />
         <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
           {queryString.length > 0 ? (
             resultObjects.length > 0 ? (
               resultObjects
-                .map((object) => graph.getNode(fullyQualifiedId(object)))
+                .map((object) => graph.getNode(Obj.getDXN(object).toString()))
                 .filter(Option.isSome)
                 .map((node) => <SearchListResult key={node.value.id} node={node.value} onSelect={handleSelect} />)
             ) : (

package/src/components/SearchMain.tsx

@@ -2,67 +2,61 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type FC, useState } from 'react';
+import React, { useState } from 'react';
 
-import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
-import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { useTranslation } from '@dxos/react-ui';
+import { Stack, StackItem } from '@dxos/react-ui-stack';
 import { activeSurface, mx } from '@dxos/react-ui-theme';
 
-import { useGlobalSearch, useGlobalSearchResults } from '../hooks';
-import { useWebSearch } from '../hooks/useWebSearch';
-import { SEARCH_PLUGIN } from '../meta';
+import { useGlobalSearch, useGlobalSearchResults, useWebSearch } from '../hooks';
+import { meta } from '../meta';
 
 import { Searchbar } from './Searchbar';
 import { SearchResults } from './SearchResults';
 
-export const SearchMain: FC<ThemedClassName<{ space: Space }>> = ({ classNames, space }) => {
-  const { t } = useTranslation(SEARCH_PLUGIN);
+export const SearchMain = ({ space }: { space?: Space }) => {
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const { setMatch } = useGlobalSearch();
   const [query, setQuery] = useState<string>();
-  // TODO(burdon): UX to select all spaces.
+  // TODO(burdon): Option to search across spaces.
   const allSpaces = false;
-
-  // TODO(burdon): Returns ALL objects (e.g., incl. Text objects that are fields of parent objects).
   const objects = useQuery(allSpaces ? client.spaces : space, Filter.everything());
   const results = useGlobalSearchResults(objects);
 
-  const {
-    runSearch,
-    results: webResults,
-    isLoading,
-  } = useWebSearch({
-    query,
-  });
-
-  const [selected, setSelected] = useState<string>();
+  const { runSearch, results: webResults } = useWebSearch({ query });
 
   // TODO(burdon): Activate and/or filter current main (set context).
+  const [selected, setSelected] = useState<string>();
   const handleSelect = (id: string) => {
     setSelected((selected) => (selected === id ? undefined : id));
   };
 
   const allResults = [...results, ...webResults];
-  log.info('results', { results, webResults });
 
   return (
-    <div className={mx('flex flex-col grow h-full overflow-hidden', classNames)}>
-      <Searchbar
-        placeholder={t('search placeholder')}
-        onChange={(text) => {
-          setQuery(text);
-          setMatch?.(text);
-        }}
-        onSubmit={runSearch}
-      />
-      {isLoading && <div className={mx('flex flex-col grow overflow-hidden', activeSurface)}>Loading...</div>}
-      {allResults.length > 0 && (
-        <div className={mx('flex flex-col grow overflow-hidden', activeSurface)}>
-          <SearchResults items={allResults} selected={selected} onSelect={handleSelect} />
-        </div>
-      )}
-    </div>
+    <Stack orientation='vertical' size='contain' itemsCount={1} rail={false} classNames={['bs-full', activeSurface]}>
+      <StackItem.Root item={{ id: 'search' }} role='article'>
+        <StackItem.Content toolbar>
+          <Searchbar
+            classNames='pli-2'
+            placeholder={t('search placeholder')}
+            delay={300}
+            onChange={(text) => {
+              setQuery(text);
+              setMatch?.(text);
+            }}
+            onSubmit={runSearch}
+          />
+          {allResults.length > 0 && (
+            <div className={mx('flex flex-col bs-full overflow-hidden')}>
+              <SearchResults items={allResults} selected={selected} onSelect={handleSelect} />
+            </div>
+          )}
+        </StackItem.Content>
+      </StackItem.Root>
+    </Stack>
   );
 };

package/src/components/SearchResults/SearchResults.stories.tsx

@@ -2,13 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
+import { withPluginManager } from '@dxos/app-framework/testing';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { filterObjectsSync } from '../../hooks';
 
@@ -21,7 +20,7 @@ const DefaultStory = (props: SearchResultsProps) => {
 
   return (
     <div className='flex grow justify-center overflow-hidden'>
-      <div className='flex w-[300px] m-4 overflow-hidden'>
+      <div className='flex is-[300px] m-4 overflow-hidden'>
         <SearchResults {...props} selected={selected} onSelect={setSelected} />
       </div>
     </div>
@@ -42,7 +41,7 @@ const meta = {
   title: 'plugins/plugin-search/SearchResults',
   component: SearchResults,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme, withPluginManager({ plugins: [] })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/SearchResults/SearchResults.tsx

@@ -4,12 +4,57 @@
 
 import React, { type FC, forwardRef } from 'react';
 
+import { Surface } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
 import { Card } from '@dxos/react-ui-stack';
 import { ghostHover } from '@dxos/react-ui-theme';
 
-import { SEARCH_RESULT } from '../../meta';
 import { type SearchResult } from '../../types';
 
+export type SearchResultsProps = {
+  items: SearchResult[];
+  match?: RegExp;
+  selected?: string;
+  onSelect?: (id: string) => void;
+};
+
+// TODO(burdon): Key cursor up/down.
+// TODO(burdon): Use stack (should be virtualized).
+export const SearchResults = ({ items }: SearchResultsProps) => {
+  return (
+    <div className='overflow-y-auto'>
+      <div className='flex flex-col'>
+        {items
+          // TODO(burdon): Hack to reduce noise from system objects.
+          .filter((item) => Obj.getLabel(item.object))
+          .map((item) => (
+            <div key={item.id} role='none' className='pli-2 first:pbs-2 pbe-2'>
+              <Surface role='card' data={{ subject: item.object }} limit={1} />
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export type SearchItemProps = SearchResult & { selected: boolean } & Pick<SearchResultsProps, 'onSelect'>;
+
+export const SearchItem = forwardRef<HTMLDivElement, SearchItemProps>((item, forwardRef) => {
+  const { id, objectType, label, snippet, match, selected, onSelect } = item;
+
+  return (
+    <Card.StaticRoot
+      ref={forwardRef}
+      classNames={['mx-2 mt-2 cursor-pointer', selected && '!bg-activeSurface', ghostHover]}
+      onClick={() => onSelect?.(id)}
+    >
+      {objectType && <div className='text-xs text-neutral-400 ml-4'>{objectType}</div>}
+      <Card.Heading>{label ?? 'Untitled'}</Card.Heading>
+      {snippet && <Snippet text={snippet} match={match} />}
+    </Card.StaticRoot>
+  );
+});
+
 export const Snippet: FC<{ text: string; match?: RegExp }> = ({ text, match }) => {
   let content = <>{text}</>;
   if (match) {
@@ -36,51 +81,3 @@ export const Snippet: FC<{ text: string; match?: RegExp }> = ({ text, match }) =
 
   return <span className='text-xs mb-1 line-clamp-3 text-neutral-300'>{content}</span>;
 };
-
-export type SearchItemProps = SearchResult & { selected: boolean } & Pick<SearchResultsProps, 'onSelect'>;
-
-export const SearchItem = forwardRef<HTMLDivElement, SearchItemProps>((item, forwardRef) => {
-  const { id, objectType, label, snippet, match, selected, onSelect } = item;
-
-  return (
-    <Card.StaticRoot
-      ref={forwardRef}
-      classNames={['mx-2 mt-2 cursor-pointer', selected && '!bg-activeSurface', ghostHover]}
-      onClick={() => onSelect?.(id)}
-    >
-      {objectType && (
-        <>
-          <div className='text-xs text-neutral-400 ml-4'>{objectType}</div>
-        </>
-      )}
-      <Card.Heading>{label ?? 'Untitled'}</Card.Heading>
-      {snippet && <Snippet text={snippet} match={match} />}
-    </Card.StaticRoot>
-  );
-});
-
-export type SearchResultsProps = {
-  match?: RegExp;
-  items: SearchResult[];
-  selected?: string;
-  onSelect?: (id: string) => void;
-};
-
-// TODO(burdon): Key cursor up/down.
-export const SearchResults = ({ items, selected, onSelect }: SearchResultsProps) => {
-  return (
-    <div className='flex flex-col grow overflow-y-auto'>
-      <div className='flex flex-col'>
-        {items.map((item) => (
-          <SearchItem
-            key={item.id}
-            type={SEARCH_RESULT}
-            {...item}
-            onSelect={onSelect}
-            selected={selected === item.id}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};