@dxos/react-ui-form 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/src/components/Settings/Settings.stories.tsx

@@ -3,13 +3,15 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { random } from '@dxos/random';
 import { Button, Input } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { Settings } from './Settings';
 
 random.seed(132);
@@ -53,3 +55,50 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+const TestViewModes = ['preview', 'readonly', 'source'] as const;
+const TestViewMode = Schema.Union(...TestViewModes.map((mode) => Schema.Literal(mode)));
+
+const TestSettings = Schema.mutable(
+  Schema.Struct({
+    viewMode: TestViewMode.annotations({ title: 'View mode', description: 'Default document view mode.' }),
+    toolbar: Schema.optional(
+      Schema.Boolean.annotations({ title: 'Show toolbar', description: 'Display formatting toolbar.' }),
+    ),
+    fontSize: Schema.optional(
+      Schema.Number.annotations({ title: 'Font size', description: 'Editor font size in pixels.' }),
+    ),
+    placeholder: Schema.optional(
+      Schema.String.annotations({ title: 'Placeholder', description: 'Default placeholder text.' }),
+    ),
+    debug: Schema.optional(Schema.Boolean.annotations({ title: 'Debug mode', description: 'Enable debug features.' })),
+  }),
+);
+
+type TestSettings = Schema.Schema.Type<typeof TestSettings>;
+
+const FieldSetStory = () => {
+  const [values, setValues] = React.useState<TestSettings>({
+    viewMode: 'preview',
+    toolbar: true,
+    fontSize: 14,
+    debug: false,
+  });
+
+  return (
+    <Settings.Viewport>
+      <Settings.Section title='Plugin Settings (Auto-generated)'>
+        <Settings.FieldSet
+          schema={TestSettings}
+          values={values}
+          onValuesChanged={setValues}
+          visible={(path, values) => path !== 'placeholder' || !!values.debug}
+        />
+      </Settings.Section>
+    </Settings.Viewport>
+  );
+};
+
+export const FieldSet: Story = {
+  render: FieldSetStory,
+};

package/src/components/Settings/Settings.tsx

@@ -4,16 +4,17 @@
 
 import React, { type PropsWithChildren } from 'react';
 
-import { Input, type Label, ScrollArea, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type Label, ScrollArea, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { composable, composableProps, mx } from '@dxos/ui-theme';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
+import { SettingsFieldSet } from './SettingsFieldSet';
+import { SettingsItem, SettingsPanel } from './SettingsItem';
 
 const SETTINGS_ROOT_NAME = 'Settings.Root';
 const SETTINGS_VIEWPORT_NAME = 'Settings.Viewport';
 const SETTINGS_SECTION_NAME = 'Settings.Section';
-const SETTINGS_PANEL_NAME = 'Settings.Panel';
-const SETTINGS_ITEM_NAME = 'Settings.Item';
 
 //
 // Root (headless — no styling, no scroll).
@@ -35,9 +36,7 @@ const SettingsViewport = composable<HTMLDivElement>(({ children, ...props }, for
   return (
     <ScrollArea.Root {...composableProps(props)} orientation='vertical' centered thin ref={forwardedRef}>
       <ScrollArea.Viewport classNames='px-4 pointer-coarse:px-2'>
-        <div role='none' className='dx-document flex flex-col gap-2 py-4'>
-          {children}
-        </div>
+        <div className='dx-document flex flex-col gap-2 py-4'>{children}</div>
       </ScrollArea.Viewport>
     </ScrollArea.Root>
   );
@@ -67,55 +66,6 @@ const SettingsSection = ({ title, description, children }: SettingsSectionProps)
 
 SettingsSection.displayName = SETTINGS_SECTION_NAME;
 
-//
-// Panel (bordered card container).
-//
-
-type SettingsPanelProps = ThemedClassName<PropsWithChildren>;
-
-const SettingsPanel = ({ classNames, children }: SettingsPanelProps) => {
-  return (
-    <div role='none' className={mx('flex flex-col gap-3 p-trim-md border border-separator rounded-sm', classNames)}>
-      {children}
-    </div>
-  );
-};
-
-SettingsPanel.displayName = SETTINGS_PANEL_NAME;
-
-//
-// Item (label + optional description + control, proper label semantics).
-//
-
-type SettingsItemProps = PropsWithChildren<{
-  title: Label;
-  description?: Label;
-}>;
-
-const SettingsItem = ({ title, description = '', children }: SettingsItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <Input.Root>
-      <SettingsPanel classNames='grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0'>
-        <Input.Label classNames='pb-trim-md text-base-surface-text text-lg md:col-span-2'>
-          {toLocalizedString(title, t)}
-        </Input.Label>
-        <Input.DescriptionAndValidation>
-          <Input.Description classNames='text-base text-description'>
-            {toLocalizedString(description, t)}
-          </Input.Description>
-        </Input.DescriptionAndValidation>
-        <div role='none' className='text-end py-1'>
-          {children}
-        </div>
-      </SettingsPanel>
-    </Input.Root>
-  );
-};
-
-SettingsItem.displayName = SETTINGS_ITEM_NAME;
-
 //
 // Settings
 //
@@ -126,4 +76,5 @@ export const Settings = {
   Section: SettingsSection,
   Panel: SettingsPanel,
   Item: SettingsItem,
+  FieldSet: SettingsFieldSet,
 };

package/src/components/Settings/SettingsFieldSet.tsx

@@ -0,0 +1,257 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as SchemaAST from 'effect/SchemaAST';
+import * as String from 'effect/String';
+import React, { useCallback, useMemo } from 'react';
+
+import { getAnnotation, type SchemaProperty } from '@dxos/effect';
+import { Input, Select } from '@dxos/react-ui';
+
+import { getFormProperties, type SelectOption, detectFieldType, getSelectOptionsFromAst } from '../../util';
+import { SettingsItem } from './SettingsItem';
+
+//
+// Types
+//
+
+/**
+ * Props for a custom field renderer.
+ * The renderer provides the control only; SettingsItem wrapper is handled by FieldSet.
+ */
+export type SettingsFieldProps<T = any> = {
+  value: T;
+  onChange: (value: T) => void;
+  readonly?: boolean;
+};
+
+/**
+ * Map of property names to either a custom field renderer or a nested field map for struct fields.
+ * When a value type `T` is provided, the map shape is checked against the schema's value type.
+ */
+export type SettingsFieldMap<T extends Record<string, any> = Record<string, any>> = {
+  [K in keyof T]?: NonNullable<T[K]> extends Record<string, any>
+    ? SettingsFieldMap<NonNullable<T[K]>>
+    : React.FC<SettingsFieldProps<T[K]>>;
+};
+
+export type SettingsFieldSetProps<T extends Record<string, any> = Record<string, any>> = {
+  /** Effect Schema for the settings object. */
+  schema: { ast: SchemaAST.AST };
+
+  /** Current settings values. */
+  values: T;
+
+  /** Callback when any value changes. Receives a new complete object. */
+  onValuesChanged?: (values: T) => void;
+
+  /** When true, all controls are disabled. */
+  readonly?: boolean;
+
+  /** Map of property names to custom field renderers. Nested objects map to struct sub-fields. */
+  fieldMap?: SettingsFieldMap<T>;
+
+  /** Control field visibility. Receives the dotted path (e.g. `'modelDefaults.edge'`) at every level. */
+  visible?: (path: string, values: T) => boolean;
+
+  /** Override the order of fields. Fields not listed are appended in schema order. Applied per scope. */
+  sort?: string[];
+
+  /** Internal: dot-path prefix used by recursive struct rendering. */
+  pathPrefix?: string;
+};
+
+//
+// Component
+//
+
+export const SettingsFieldSet = <T extends Record<string, any>>({
+  schema,
+  values,
+  onValuesChanged,
+  readonly,
+  fieldMap,
+  visible,
+  sort,
+  pathPrefix = '',
+}: SettingsFieldSetProps<T>) => {
+  const properties = useMemo(() => {
+    const props = getFormProperties(schema.ast);
+    if (!sort) {
+      return props;
+    }
+    const rank = (name: string) => {
+      const idx = sort.indexOf(name);
+      return idx === -1 ? Number.POSITIVE_INFINITY : idx;
+    };
+    return [...props].sort(({ name: a }, { name: b }) => rank(a.toString()) - rank(b.toString()));
+  }, [schema, sort]);
+
+  const handleChange = useCallback(
+    (name: string, value: unknown) => {
+      onValuesChanged?.({ ...values, [name]: value } as T);
+    },
+    [values, onValuesChanged],
+  );
+
+  return (
+    <>
+      {properties.map((property) => {
+        const name = property.name.toString();
+        const path = pathPrefix ? `${pathPrefix}.${name}` : name;
+        if (visible && !visible(path, values)) {
+          return null;
+        }
+
+        const entry = fieldMap?.[name as keyof typeof fieldMap] as
+          | React.FC<SettingsFieldProps>
+          | SettingsFieldMap
+          | undefined;
+        return (
+          <SettingsFieldItem
+            key={name}
+            path={path}
+            property={property}
+            value={values[name]}
+            onChange={(value) => handleChange(name, value)}
+            readonly={readonly}
+            customField={typeof entry === 'function' ? entry : undefined}
+            nestedFieldMap={typeof entry === 'object' ? entry : undefined}
+            visible={visible as (path: string, values: any) => boolean}
+            sort={sort}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+SettingsFieldSet.displayName = 'Settings.FieldSet';
+
+//
+// Internal: render a single settings field.
+//
+
+type SettingsFieldItemProps = {
+  property: SchemaProperty;
+  path: string;
+  value: any;
+  onChange: (value: any) => void;
+  readonly?: boolean;
+  customField?: React.FC<SettingsFieldProps>;
+  nestedFieldMap?: SettingsFieldMap;
+  visible?: (path: string, values: any) => boolean;
+  sort?: string[];
+};
+
+const SettingsFieldItem = ({
+  property,
+  path,
+  value,
+  onChange,
+  readonly,
+  customField,
+  nestedFieldMap,
+  visible,
+  sort,
+}: SettingsFieldItemProps) => {
+  const { type } = property;
+  const name = property.name.toString();
+  const title = getAnnotation<string>(SchemaAST.TitleAnnotationId)(type) ?? String.capitalize(name);
+  const description = getAnnotation<string>(SchemaAST.DescriptionAnnotationId)(type);
+
+  // Custom field renderer.
+  if (customField) {
+    const CustomField = customField;
+    return (
+      <SettingsItem title={title} description={description}>
+        <CustomField value={value} onChange={onChange} readonly={readonly} />
+      </SettingsItem>
+    );
+  }
+
+  const fieldType = detectFieldType(type);
+
+  switch (fieldType) {
+    case 'struct':
+      return (
+        <SettingsFieldSet
+          schema={{ ast: type }}
+          values={value ?? {}}
+          onValuesChanged={onChange}
+          readonly={readonly}
+          fieldMap={nestedFieldMap}
+          visible={visible}
+          sort={sort}
+          pathPrefix={path}
+        />
+      );
+
+    case 'boolean':
+      return (
+        <SettingsItem title={title} description={description}>
+          <Input.Switch disabled={readonly} checked={!!value} onCheckedChange={(checked) => onChange(!!checked)} />
+        </SettingsItem>
+      );
+
+    case 'select': {
+      const options = getSelectOptionsFromAst(type) ?? [];
+      return (
+        <SettingsItem title={title} description={description}>
+          <Select.Root
+            disabled={readonly}
+            value={value == null ? '' : globalThis.String(value)}
+            onValueChange={(selected) => {
+              const matched = options.find((option) => globalThis.String(option.value) === selected);
+              onChange(matched?.value ?? selected);
+            }}
+          >
+            <Select.TriggerButton disabled={readonly} />
+            <Select.Portal>
+              <Select.Content>
+                <Select.Viewport>
+                  {options.map((option: SelectOption) => (
+                    <Select.Option key={globalThis.String(option.value)} value={globalThis.String(option.value)}>
+                      {option.label ?? globalThis.String(option.value)}
+                    </Select.Option>
+                  ))}
+                </Select.Viewport>
+                <Select.Arrow />
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </SettingsItem>
+      );
+    }
+
+    case 'string':
+      return (
+        <SettingsItem title={title} description={description}>
+          <Input.TextInput disabled={readonly} value={value ?? ''} onChange={(event) => onChange(event.target.value)} />
+        </SettingsItem>
+      );
+
+    case 'number':
+      return (
+        <SettingsItem title={title} description={description}>
+          <Input.TextInput
+            disabled={readonly}
+            type='number'
+            value={value ?? ''}
+            onChange={(event) => {
+              if (event.target.value === '') {
+                onChange(undefined);
+                return;
+              }
+              const parsed = Number(event.target.value);
+              onChange(Number.isNaN(parsed) ? undefined : parsed);
+            }}
+          />
+        </SettingsItem>
+      );
+
+    default:
+      return null;
+  }
+};

package/src/components/Settings/SettingsItem.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { Input, type Label, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
+
+const SETTINGS_PANEL_NAME = 'Settings.Panel';
+const SETTINGS_ITEM_NAME = 'Settings.Item';
+
+//
+// Panel (bordered card container).
+//
+
+type SettingsPanelProps = ThemedClassName<PropsWithChildren>;
+
+export const SettingsPanel = ({ classNames, children }: SettingsPanelProps) => {
+  return (
+    <div className={mx('flex flex-col gap-3 p-trim-md border border-separator rounded-sm', classNames)}>{children}</div>
+  );
+};
+
+SettingsPanel.displayName = SETTINGS_PANEL_NAME;
+
+//
+// Item (label + optional description + control, proper label semantics).
+//
+
+type SettingsItemProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+export const SettingsItem = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <Input.Root>
+      <SettingsPanel classNames='grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0'>
+        <Input.Label classNames='pb-trim-md text-base-foreground text-lg md:col-span-2'>
+          {toLocalizedString(title, t)}
+        </Input.Label>
+        <Input.DescriptionAndValidation>
+          <Input.Description classNames='text-base text-description'>
+            {toLocalizedString(description, t)}
+          </Input.Description>
+        </Input.DescriptionAndValidation>
+        <div className='text-end py-1'>{children}</div>
+      </SettingsPanel>
+    </Input.Root>
+  );
+};
+
+SettingsItem.displayName = SETTINGS_ITEM_NAME;

package/src/components/Settings/SettingsSelectField.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Select } from '@dxos/react-ui';
+
+import { type SettingsFieldProps } from './SettingsFieldSet';
+
+export type SelectFieldOption = {
+  value: string;
+  label?: string;
+};
+
+export type CreateSelectFieldOptions = {
+  /** Options to display. Strings are used as both value and label. */
+  options: ReadonlyArray<string | SelectFieldOption>;
+  /** Label for the sentinel option that maps to `undefined`. Defaults to `'Default'`. Pass `null` to omit. */
+  defaultLabel?: string | null;
+};
+
+/**
+ * Factory for a `SettingsFieldSet` `fieldMap` entry that renders a Select control
+ * over a fixed list of options, with an optional sentinel for `undefined`.
+ */
+export const createSelectField = ({
+  options,
+  defaultLabel = 'Default',
+}: CreateSelectFieldOptions): React.FC<SettingsFieldProps<string | undefined>> => {
+  const normalized = options.map((option) => (typeof option === 'string' ? { value: option, label: option } : option));
+  const hasDefault = defaultLabel !== null;
+  // Per-instance sentinel avoids collisions with real option values; empty string when the
+  // sentinel is omitted so `undefined` maps to a value Select.Root treats as "no selection".
+  const sentinel = hasDefault ? `__default__${Math.random().toString(36).slice(2)}` : '';
+
+  return ({ value, onChange, readonly }) => (
+    <Select.Root
+      disabled={readonly}
+      value={value ?? sentinel}
+      onValueChange={(next) => onChange(hasDefault && next === sentinel ? undefined : next)}
+    >
+      <Select.TriggerButton disabled={readonly} />
+      <Select.Portal>
+        <Select.Content>
+          <Select.Viewport>
+            {hasDefault && <Select.Option value={sentinel}>{defaultLabel}</Select.Option>}
+            {normalized.map((option) => (
+              <Select.Option key={option.value} value={option.value}>
+                {option.label ?? option.value}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};

package/src/components/Settings/index.ts

@@ -3,3 +3,5 @@
 //
 
 export * from './Settings';
+export { type SettingsFieldMap, type SettingsFieldProps, type SettingsFieldSetProps } from './SettingsFieldSet';
+export { createSelectField, type CreateSelectFieldOptions, type SelectFieldOption } from './SettingsSelectField';

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -6,8 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
-import { type View } from '@dxos/echo';
+import { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type, type View } from '@dxos/echo';
 import { type EchoSchema, Format, type Mutable } from '@dxos/echo/internal';
 import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
@@ -16,7 +15,8 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ProjectionModel, ViewModel, getTypenameFromQuery } from '@dxos/schema';
 import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
@@ -89,9 +89,9 @@ const DefaultStory = (props: DefaultStoryProps) => {
 
       if (props.mode === 'tag') {
         const queue = target && DXN.tryParse(target) ? target : undefined;
-        const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);
-        Obj.change(view, (obj) => {
-          obj.query.ast = query.ast as Mutable<typeof query.ast>;
+        const query = queue ? Query.fromAst(newQuery).from({ feeds: [queue] }) : Query.fromAst(newQuery);
+        Obj.update(view, (view) => {
+          view.query.ast = query.ast as Mutable<typeof query.ast>;
         });
 
         const typename = getTypenameFromQuery(query.ast);
@@ -104,13 +104,13 @@ const DefaultStory = (props: DefaultStoryProps) => {
           query,
           jsonSchema: newSchema.jsonSchema,
         });
-        Obj.change(view, (obj) => {
-          obj.projection = Obj.getSnapshot(newView).projection as Mutable<typeof obj.projection>;
+        Obj.update(view, (view) => {
+          view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
         });
         setSchema(() => newSchema);
       } else {
-        Obj.change(view, (obj) => {
-          obj.query.ast = newQuery as Mutable<typeof newQuery>;
+        Obj.update(view, (view) => {
+          view.query.ast = newQuery as Mutable<typeof newQuery>;
         });
         schema.updateTypename(getTypenameFromQuery(newQuery));
       }