@dxos/react-ui-query 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-query",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Editors for ECHO queries: a query-language input and a type/tag form.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -38,39 +38,39 @@
   ],
   "dependencies": {
     "@codemirror/language": "^6.12.4",
-    "@codemirror/state": "^6.7.4",
-    "@codemirror/view": "^6.43.11",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.13",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
     "json5": "^2.2.3",
-    "@dxos/echo": "0.12.0",
-    "@dxos/keys": "0.12.0",
-    "@dxos/echo-query": "0.12.0",
-    "@dxos/ui-editor": "0.12.0",
-    "@dxos/ui": "0.12.0",
-    "@dxos/react-ui-editor": "0.12.0"
+    "@dxos/echo": "0.13.0",
+    "@dxos/echo-query": "0.13.0",
+    "@dxos/keys": "0.13.0",
+    "@dxos/react-ui-attention": "0.13.0",
+    "@dxos/react-ui-editor": "0.13.0",
+    "@dxos/ui": "0.13.0",
+    "@dxos/ui-editor": "0.13.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.0",
     "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "effect": "4.0.0",
-    "jsdom": "^29.1.1",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
     "vite": "^8.2.2",
-    "@dxos/react-client": "0.12.0",
-    "@dxos/react-ui-syntax-highlighter": "0.12.0",
-    "@dxos/react-ui": "0.12.0",
-    "@dxos/ui-theme": "0.12.0",
-    "@dxos/types": "0.12.0"
+    "@dxos/react-client": "0.13.0",
+    "@dxos/react-ui": "0.13.0",
+    "@dxos/react-ui-syntax-highlighter": "0.13.0",
+    "@dxos/types": "0.13.0",
+    "@dxos/ui-theme": "0.13.0"
   },
   "peerDependencies": {
     "effect": "4.0.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.12.0",
-    "@dxos/ui-theme": "^0.12.0"
+    "@dxos/react-ui": "^0.13.0",
+    "@dxos/ui-theme": "^0.13.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/QueryEditor/QueryEditor.stories.tsx

@@ -9,9 +9,9 @@ import { expect, userEvent, waitFor } from 'storybook/test';
 
 import { type Filter, Tag } from '@dxos/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { Toolbar } from '@dxos/react-ui';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
 import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
 import { translations } from '#translations';

package/src/components/QueryEditor/QueryEditor.tsx

@@ -6,7 +6,6 @@ import { type Extension, Prec } from '@codemirror/state';
 import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
 
 import { type BuildResult, QueryBuilder } from '@dxos/echo-query';
-import { type ThemedClassName, useThemeMode, useTranslation } from '@dxos/react-ui';
 import {
   Editor,
   type EditorController,
@@ -15,6 +14,8 @@ import {
   type UseEditorMenuProps,
   createMenuGroup,
 } from '@dxos/react-ui-editor';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import type * as Util from '@dxos/react-ui/Util';
 import { createBasicExtensions, createThemeExtensions, keymap } from '@dxos/ui-editor';
 
 import { translationKey } from '#translations';
@@ -22,7 +23,7 @@ import { translationKey } from '#translations';
 import { type CompletionOptions, completions } from './autocomplete.ts';
 import { query } from './query-extension.ts';
 
-export type QueryEditorProps = ThemedClassName<
+export type QueryEditorProps = Util.ThemedClassName<
   {
     value?: string;
     readonly?: boolean;
@@ -43,7 +44,7 @@ export type QueryEditorProps = ThemedClassName<
  */
 export const QueryEditor = forwardRef<EditorController, QueryEditorProps>(
   ({ db, tags, value, readonly, numItems = 8, onChange, onFilterChange, ...props }, forwardedRef) => {
-    const { t } = useTranslation(translationKey);
+    const { t } = Hooks.useTranslation(translationKey);
 
     const getOptions = useMemo(() => completions({ db, tags }), [db, tags]);
     const getMenu = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
@@ -78,7 +79,7 @@ export const QueryEditor = forwardRef<EditorController, QueryEditorProps>(
     const tagsRef = useRef(tags);
     tagsRef.current = tags;
 
-    const themeMode = useThemeMode();
+    const themeMode = Hooks.useThemeMode();
     const extensions = useMemo<Extension[]>(
       () => [
         createBasicExtensions({

package/src/components/QueryForm/Picker.tsx

@@ -4,7 +4,8 @@
 
 import React, { useMemo } from 'react';
 
-import { Select, useTranslation } from '@dxos/react-ui';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Select from '@dxos/react-ui/Select';
 
 import { translationKey } from '#translations';
 
@@ -24,7 +25,7 @@ export const Picker = <T extends { value: string; label: string }>({
   value,
   onChange,
 }: PickerProps<T>) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = Hooks.useTranslation(translationKey);
   const sorted = useMemo(() => values?.sort(({ label: a }, { label: b }) => a.localeCompare(b)) ?? [], [values]);
 
   return (

package/src/components/QueryForm/QueryForm.stories.tsx

@@ -8,9 +8,9 @@ import React, { useState } from 'react';
 import { Filter, Query, Tag, Type } from '@dxos/echo';
 import { EntityId } from '@dxos/keys';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Toolbar } from '@dxos/react-ui';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
 import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
 import { translations } from '#translations';

package/src/components/QueryForm/QueryForm.tsx

@@ -7,8 +7,8 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { Filter, Obj, Query, type QueryAST, type Tag } from '@dxos/echo';
 import { URI } from '@dxos/keys';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { useTranslation } from '@dxos/react-ui';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import type * as Util from '@dxos/react-ui/Util';
 import { mx } from '@dxos/ui-theme';
 
 import { translationKey } from '#translations';
@@ -16,7 +16,7 @@ import { translationKey } from '#translations';
 import { Picker } from './Picker.tsx';
 import { extractTag, extractTypename } from './query.ts';
 
-export type QueryFormProps = ThemedClassName<{
+export type QueryFormProps = Util.ThemedClassName<{
   initialQuery?: QueryAST.Query;
   types?: { value: URI.URI; label: string }[];
   tags?: Tag.Tag[];
@@ -25,7 +25,7 @@ export type QueryFormProps = ThemedClassName<{
 
 // TODO(wittjosiah): Support more complex queries and traversals.
 export const QueryForm = ({ classNames, initialQuery, types, tags, onChange }: QueryFormProps) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = Hooks.useTranslation(translationKey);
 
   const initialType = initialQuery ? Option.getOrUndefined(extractTypename(initialQuery)) : undefined;
   const initialTag = initialQuery ? Option.getOrUndefined(extractTag(initialQuery)) : undefined;

package/src/hooks/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './useQueryBuilder.ts';
+export * from './usePersistentQuery.ts';

package/src/hooks/usePersistentQuery.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type RefObject, useCallback, useEffect } from 'react';
+
+import { useManagerOptional, useViewState, useViewStateActions } from '@dxos/react-ui-attention';
+import { type ViewState } from '@dxos/react-ui-attention/types';
+import { type EditorController } from '@dxos/react-ui-editor';
+
+/** A view-state value that carries a {@link QueryEditor}'s text beside whatever else the view persists. */
+export type QueryViewState = { query: string };
+
+export type PersistentQuerySetter = (query: string | ((query: string) => string)) => void;
+
+/**
+ * A list's filter query, held in a `ViewState` aspect (so it persists per device and per `contextId`)
+ * and mirrored into the {@link QueryEditor} behind `editorRef`.
+ *
+ * The editor takes its text once, as `initialValue`, so a write that did not come from typing — a
+ * picker over the same text, clear, another view of the same list, another tab — is pushed into it
+ * here. Pushed from the subscription rather than from a render effect: the subscription fires as the
+ * value is written, when the editor already holds whatever was just typed, whereas an effect can run
+ * for a render that trails fast typing and rewrite the document back to older text.
+ */
+export const usePersistentQuery = <T extends QueryViewState, Encoded = T>(
+  aspect: ViewState.Aspect<T, Encoded>,
+  contextId: string | undefined,
+  editorRef: RefObject<EditorController | null>,
+): [string, PersistentQuerySetter] => {
+  const manager = useManagerOptional();
+  const { query } = useViewState(aspect, contextId);
+  const { update } = useViewStateActions(aspect, contextId);
+  useEffect(() => {
+    if (!manager || !contextId) {
+      return;
+    }
+    return manager.subscribe(aspect, contextId, ({ query }) => {
+      const editor = editorRef.current;
+      if (editor && editor.getText() !== query) {
+        editor.setText(query);
+      }
+    });
+  }, [manager, aspect, contextId, editorRef]);
+
+  // Unchanged text keeps the same value, so the editor echoing a pushed text back is not a write.
+  const setQuery = useCallback<PersistentQuerySetter>(
+    (next) =>
+      update((view) => {
+        const query = typeof next === 'function' ? next(view.query) : next;
+        return view.query === query ? view : { ...view, query };
+      }),
+    [update],
+  );
+
+  return [query, setQuery];
+};

package/src/translations.ts

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import { type Resource } from '@dxos/react-ui';
+import type * as Theme from '@dxos/react-ui/Theme';
 
 export const translationKey = '@dxos/react-ui-query';
 
@@ -19,4 +19,4 @@ export const translations = [
       },
     },
   },
-] as const satisfies Resource[];
+] as const satisfies Theme.Resource[];