@dxos/plugin-search 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

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 { random } 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';
+
+random.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, random 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,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { SearchArticle as default } from './SearchArticle';

package/src/containers/SearchDialog/SearchDialog.stories.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+
+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 { random } from '@dxos/random';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Dialog } from '@dxos/react-ui';
+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 { SearchDialog } from './SearchDialog';
+
+random.seed(0);
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  if (!space) {
+    return <Loading />;
+  }
+
+  return (
+    <SearchContextProvider>
+      <Dialog.Root defaultOpen>
+        <Dialog.Overlay>
+          <SearchDialog pivotId='storybook' space={space} />
+        </Dialog.Overlay>
+      </Dialog.Root>
+    </SearchContextProvider>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-search/containers/SearchDialog',
+  component: SearchDialog,
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    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, random as any);
+              yield* Effect.promise(() =>
+                factory([
+                  { type: Organization.Organization, count: 10 },
+                  { type: Person.Person, count: 50 },
+                ]),
+              );
+            }),
+        }),
+      ],
+    }),
+  ],
+  tags: ['test'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof SearchDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Test: Story = {
+  play: async () => {
+    const body = within(document.body);
+
+    // Wait for the dialog to render and the search input to appear.
+    const searchInput = await body.findByRole('textbox', undefined, { timeout: 10_000 });
+    await expect(searchInput).toBeInTheDocument();
+
+    // Type a search term that should match generated Person/Organization names.
+    await userEvent.type(searchInput, 'a');
+
+    // Wait for search results to appear as options in the listbox.
+    await waitFor(
+      async () => {
+        const options = body.queryAllByRole('option');
+        await expect(options.length).toBeGreaterThan(0);
+      },
+      { timeout: 10_000 },
+    );
+  },
+};

package/src/containers/SearchDialog/SearchDialog.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { getObjectPathFromObject, LayoutOperation } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
+import { useActiveSpace } from '@dxos/app-toolkit/ui';
+import { Entity, Obj, Query } from '@dxos/echo';
+import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { SearchList } from '@dxos/react-ui-search';
+import { Text } from '@dxos/schema';
+
+import { useGlobalSearch, useGlobalSearchResults } from '#hooks';
+import { meta } from '#meta';
+import { type SearchResult } from '#types';
+
+export type SearchDialogProps = {
+  pivotId?: string;
+  space?: Space;
+};
+
+export const SearchDialog = ({ pivotId: pivotIdProp, space: spaceProp }: SearchDialogProps) => {
+  const { t } = useTranslation(meta.id);
+  const layout = useLayout();
+  const pivotId = pivotIdProp ?? layout.active[layout.active.length - 1];
+  const { invokePromise } = useOperationInvoker();
+  const { setMatch } = useGlobalSearch();
+  const [query, setQuery] = useState<string>();
+
+  const activeSpace = useActiveSpace();
+  const space = spaceProp ?? activeSpace;
+  // 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 results = useGlobalSearchResults(objects);
+  const allResults = useMemo(() => results.filter(({ object }) => object && Entity.getLabel(object)), [results]);
+
+  const handleSearch = useCallback(
+    (text: string) => {
+      setQuery(text);
+      setMatch?.(text);
+    },
+    [setMatch],
+  );
+
+  const handleSelect = useCallback(
+    async (result: SearchResult) => {
+      if (!result.object || !Obj.isObject(result.object)) {
+        return;
+      }
+
+      const qualifiedPath = getObjectPathFromObject(result.object);
+      await invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      await invokePromise(LayoutOperation.Open, {
+        subject: [qualifiedPath],
+        pivotId,
+        positioning: 'end',
+      });
+    },
+    [pivotId, invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('search-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <SearchList.Root onSearch={handleSearch}>
+          <SearchList.Content classNames='max-h-[24rem]'>
+            <SearchList.Input classNames='px-0' autoFocus placeholder={t('search.placeholder')} />
+            <SearchList.Viewport>
+              {allResults.map((result) => (
+                <SearchList.Item
+                  key={result.id}
+                  classNames='flex gap-2 items-center'
+                  value={result.id}
+                  label={result.label ?? (result.object ? Entity.getLabel(result.object) : undefined) ?? result.id}
+                  icon={result.icon}
+                  onSelect={() => void handleSelect(result)}
+                />
+              ))}
+              {query && allResults.length === 0 && <SearchList.Empty />}
+            </SearchList.Viewport>
+          </SearchList.Content>
+        </SearchList.Root>
+      </Dialog.Body>
+    </Dialog.Content>
+  );
+};

package/src/containers/SearchDialog/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { SearchDialog, type SearchDialogProps } from './SearchDialog';
+export { SearchDialog as default } from './SearchDialog';

package/src/containers/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export type { SearchDialogProps } from './SearchDialog';
+
+export const SearchDialog: ComponentType<any> = lazy(() => import('./SearchDialog'));
+export const SearchArticle: ComponentType<any> = lazy(() => import('./SearchArticle'));

package/src/hooks/sync.test.ts

@@ -5,17 +5,19 @@
 import { describe, expect, test } from 'vitest';
 
 import { Client } from '@dxos/client';
-import { Filter, Obj, Type } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { Filter, Obj } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
+import { random } from '@dxos/random';
 
 import { filterObjectsSync } from './sync';
 
-faker.seed(1);
+random.seed(1);
 
 // TODO(burdon): Reconcile with agent/minisearch.
 
 describe('Search', () => {
-  test('Prefix text search', async () => {
+  // TODO(mykola): Fix FTS index to filter by fields.
+  test.skip('Prefix text search', async () => {
     const client = new Client();
     await client.initialize();
     await client.halo.createIdentity();
@@ -24,11 +26,11 @@ describe('Search', () => {
     const space = await client.spaces.create();
     Array.from({ length: 20 }).map((_, i) => {
       const content =
-        i === 10 ? faker.lorem.sentence() + ` ${match}}. ` + faker.lorem.sentence() : faker.lorem.sentences();
-      return space.db.add(Obj.make(Type.Expando, { title: faker.lorem.sentence(), content }));
+        i === 10 ? random.lorem.sentence() + ` ${match}}. ` + random.lorem.sentence() : random.lorem.sentences();
+      return space.db.add(Obj.make(TestSchema.Expando, { title: random.lorem.sentence(), content }));
     });
 
-    const { objects } = await space.db.query(Filter.everything()).run();
+    const objects = await space.db.query(Filter.everything()).run();
     const results = filterObjectsSync(objects, new RegExp(match, 'i'));
     expect(results).to.have.length(1);
   });

package/src/hooks/sync.ts

@@ -5,10 +5,10 @@
 import type * as Schema from 'effect/Schema';
 import * as SchemaAST from 'effect/SchemaAST';
 
-import { Obj } from '@dxos/echo';
+import { type Entity, Obj } from '@dxos/echo';
 import { Text } from '@dxos/schema';
 
-import { type SearchResult } from '../types';
+import { type SearchResult } from '#types';
 
 export const queryStringToMatch = (queryString?: string): RegExp | undefined => {
   const trimmed = queryString?.trim();
@@ -39,12 +39,12 @@ const getIcon = (schema: Schema.Schema.AnyNoContext | undefined): string | undef
 export type TextFields = Record<string, string>;
 
 // TODO(thure): This returns `SearchResult[]` which is not just a narrower set of objects as the name implies.
-export const filterObjectsSync = <T extends Record<string, any>>(objects: T[], match?: RegExp): SearchResult[] => {
+export const filterObjectsSync = <T extends Entity.Unknown>(objects: T[], match?: RegExp): SearchResult<T>[] => {
   if (!match) {
     return [];
   }
 
-  return objects.reduce<SearchResult[]>((results, object) => {
+  return objects.reduce<SearchResult<T>[]>((results, object) => {
     // TODO(burdon): Hack to ignore Text objects.
     if (object instanceof Text.Text) {
       return results;
@@ -52,26 +52,21 @@ export const filterObjectsSync = <T extends Record<string, any>>(objects: T[], m
 
     const fields = mapObjectToTextFields(object);
     Object.entries(fields).some(([, value]) => {
-      const result = value.match(match);
-      if (result) {
-        // TODO(burdon): Use schema.
-        const label = getStringProperty(object, ['label', 'name', 'title']);
-
-        results.push({
-          id: object.id,
-          type: getIcon(Obj.getSchema(object)),
-          label,
-          match,
-          // TODO(burdon): Truncate.
-          // TODO(burdon): Issue with sketch documents.
-          snippet: value !== label ? value : (fields.content ?? fields.description ?? undefined),
-          object,
-        });
-
-        return true;
-      }
+      // TODO(burdon): Use schema.
+      const label = Obj.getLabel(object as any);
+
+      results.push({
+        id: object.id,
+        type: getIcon(Obj.getSchema(object)),
+        label,
+        match,
+        // TODO(burdon): Truncate.
+        // TODO(burdon): Issue with sketch documents.
+        snippet: value !== label ? value : (fields.content ?? fields.description ?? undefined),
+        object,
+      });
 
-      return false;
+      return true;
     });
 
     return results;
@@ -95,13 +90,13 @@ export const getStringProperty = (object: any, keys: string[]): string | undefin
 };
 
 // TODO(burdon): Filter system fields.
-const getKeys = (object: Record<string, unknown>): string[] => {
+const getKeys = <T extends Entity.Unknown>(object: T): string[] => {
   try {
     const obj = JSON.parse(JSON.stringify(object));
     return Object.keys(obj).filter(
       (key) => key !== 'id' && key !== 'identityKey' && key[0] !== '_' && key[0] !== '@',
     ) as string[];
-  } catch (err) {
+  } catch {
     // TODO(burdon): Error with TLDraw sketch.
     //  Uncaught Error: Type with the name content has already been defined with a different constructor
     return [];
@@ -109,13 +104,13 @@ const getKeys = (object: Record<string, unknown>): string[] => {
 };
 
 // TODO(burdon): Use ECHO schema.
-export const mapObjectToTextFields = <T extends Record<string, unknown>>(object: T): TextFields => {
+export const mapObjectToTextFields = <T extends Entity.Unknown>(object: T): TextFields => {
   return getKeys(object).reduce<TextFields>((fields, key) => {
-    const value = object[key] as any;
+    const value = (object as any)[key];
     if (typeof value === 'string' || value instanceof Text.Text) {
       try {
         fields[key] = String(value);
-      } catch (err) {
+      } catch {
         // TODO(burdon): Exception when parsing sketch document.
       }
     }

package/src/hooks/useGlobalSearch.tsx

@@ -2,14 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
 import { raise } from '@dxos/debug';
+import { type Entity } from '@dxos/echo';
+import { GlobalFilterProvider } from '@dxos/react-ui-search';
 
-import { type SearchResult } from '../types';
+import { type SearchResult } from '#types';
 
 import { filterObjectsSync, queryStringToMatch } from './sync';
 
+// Re-export for backward compatibility.
+export { useGlobalFilteredObjects, GlobalFilterProvider } from '@dxos/react-ui-search';
+
 type SearchContextType = {
   match?: RegExp;
   setMatch?: (text?: string) => void;
@@ -17,26 +22,40 @@ type SearchContextType = {
 
 const SearchContext = createContext<SearchContextType>({});
 
+/**
+ * Provider for global search context.
+ * Also provides the GlobalFilterProvider for useGlobalFilteredObjects to work.
+ */
 export const SearchContextProvider = ({ children }: PropsWithChildren) => {
   const [match, setMatch] = useState<RegExp>();
   const handleMatch = (text?: string) => setMatch(queryStringToMatch(text));
-  return <SearchContext.Provider value={{ match, setMatch: handleMatch }}>{children}</SearchContext.Provider>;
+
+  // Provide a filter function for useGlobalFilteredObjects.
+  const filterFn = useCallback(
+    <T extends Entity.Any>(objects: T[]): T[] => {
+      if (!match) {
+        return objects;
+      }
+
+      return filterObjectsSync(objects, match)
+        .filter((result) => result.object)
+        .map((result) => result.object!);
+    },
+    [match],
+  );
+
+  return (
+    <SearchContext.Provider value={{ match, setMatch: handleMatch }}>
+      <GlobalFilterProvider filter={filterFn}>{children}</GlobalFilterProvider>
+    </SearchContext.Provider>
+  );
 };
 
 export const useGlobalSearch = () => {
   return useContext(SearchContext) ?? raise(new Error('Missing SearchContext.'));
 };
 
-export const useGlobalSearchResults = <T extends Record<string, any>>(objects?: T[]): SearchResult[] => {
+export const useGlobalSearchResults = <T extends Entity.Unknown>(objects?: T[]): SearchResult<T>[] => {
   const { match } = useGlobalSearch();
   return objects && match ? filterObjectsSync(objects, match) : [];
 };
-
-export const useGlobalFilteredObjects = <T extends Record<string, any>>(objects?: T[]): T[] => {
-  const { match } = useGlobalSearch();
-  if (!match || !objects) {
-    return objects ?? [];
-  }
-
-  return useMemo(() => filterObjectsSync(objects, match).map((result) => result.object), [objects, match]);
-};

package/src/hooks/useSearchResults.ts

@@ -5,12 +5,13 @@
 import { yieldOrContinue } from 'main-thread-scheduling';
 import { useEffect, useState } from 'react';
 
+import { type Entity } from '@dxos/echo';
 import { Text } from '@dxos/schema';
 
 // TODO(thure): Deprecate search-sync, move still-relevant utilities elsewhere (here, probably).
 import { mapObjectToTextFields, queryStringToMatch } from './sync';
 
-export const filterObjects = async <T extends Record<string, any>>(
+export const filterObjects = async <T extends Entity.Unknown>(
   objects: T[],
   match?: RegExp,
 ): Promise<Map<T, string[][]>> => {
@@ -18,6 +19,7 @@ export const filterObjects = async <T extends Record<string, any>>(
   if (!match) {
     return result;
   }
+
   await Promise.all(
     objects
       .filter((object) => !(object instanceof Text.Text))
@@ -34,10 +36,11 @@ export const filterObjects = async <T extends Record<string, any>>(
           });
       }),
   );
+
   return result;
 };
 
-export const useSearchResults = <T extends Record<string, any>>(
+export const useSearchResults = <T extends Entity.Unknown>(
   queryString?: string,
   objects?: T[],
   delay: number = 400,