@dxos/react-ui-form 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/src/components/ObjectProperties/ObjectProperties.tsx

@@ -15,7 +15,8 @@ import { FactoryAnnotation } from '@dxos/schema';
 import { composable, composableProps } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { Form, type FormFieldMap, omitId } from '../Form';
 
 export type ObjectPropertiesProps = PropsWithChildren<{ object: Obj.Unknown }>;
@@ -70,10 +71,10 @@ export const ObjectProperties = composable<HTMLDivElement, ObjectPropertiesProps
 
         const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
 
-        // Handle tags separately using Obj.change.
+        // Handle tags separately using Obj.update.
         const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
         if (hasTagsChange) {
-          Obj.change(object, (object) => {
+          Obj.update(object, (object) => {
             Obj.getMeta(object).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
           });
         }
@@ -81,7 +82,7 @@ export const ObjectProperties = composable<HTMLDivElement, ObjectPropertiesProps
         // Handle other property changes.
         const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
         if (nonTagPaths.length > 0) {
-          Obj.change(object, () => {
+          Obj.update(object, () => {
             for (const path of nonTagPaths) {
               const parts = splitJsonPath(path);
               const value = Obj.getValue(values as any, parts);

package/src/components/Settings/AUDIT.md

@@ -0,0 +1,52 @@
+# Plugin Settings Audit
+
+Tracks which plugin settings panels use schema-driven `Settings.FieldSet` and which still hand-roll their controls.
+
+The target shape for a plugin settings panel is:
+
+```tsx
+<SettingsForm.Viewport>
+  <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
+    <SettingsForm.FieldSet
+      readonly={!onSettingsChange}
+      schema={Settings.Settings}
+      values={settings}
+      onValuesChanged={(values) => onSettingsChange?.(() => values)}
+    />
+  </SettingsForm.Section>
+</SettingsForm.Viewport>
+```
+
+Field labels and descriptions come from `.annotations({ title, description })` on each schema field. Use `fieldMap` for runtime-driven option lists (model pickers, etc.). Use the `visible` callback to gate fields on environment or sibling values.
+
+## FieldSet adopters
+
+| Plugin                 | Notes                                                                                                    |
+| ---------------------- | -------------------------------------------------------------------------------------------------------- |
+| `plugin-assistant`     | Nested `modelDefaults` struct; `fieldMap` provides per-provider model selectors via `createSelectField`. |
+| `plugin-crx`           | Two booleans.                                                                                            |
+| `plugin-deck`          | Five booleans; `enableNativeRedirect` hidden via `visible` when `isSocket`.                              |
+| `plugin-inbox`         | Single boolean.                                                                                          |
+| `plugin-markdown`      | Original reference adopter. `snippets` text field gated via `visible`/`fieldMap`.                        |
+| `plugin-meeting`       | Single boolean.                                                                                          |
+| `plugin-observability` | Boolean; info `Message.Root` banner kept above `FieldSet`.                                               |
+| `plugin-presenter`     | Single boolean.                                                                                          |
+| `plugin-sample`        | Single boolean.                                                                                          |
+| `plugin-script`        | Mixed: auth `Button` retained as a manual `SettingsForm.Item`; `editorInputMode` rendered by `FieldSet`. |
+| `plugin-sketch`        | Boolean + `gridType` literal union (rendered as a Select — was previously a Switch).                     |
+
+## Skipped
+
+| Plugin             | Reason                                                                                                                                                               |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `plugin-debug`     | Action buttons (download diagnostics, download logs, repair), `Toast`, and a storage-adapter selector wired to `client.config` rather than the plugin settings atom. |
+| `plugin-files`     | `IconButton` actions (select root, export, import) and gating on non-schema state (`state.rootHandle`).                                                              |
+| `plugin-space`     | Renders a list of spaces with per-space "open settings" buttons — not bound to any schema field.                                                                     |
+| `plugin-spacetime` | Section is currently empty; nothing to render.                                                                                                                       |
+| `plugin-thread`    | Settings schema is `Schema.Struct({})` — nothing to render.                                                                                                          |
+
+## When to extend `SettingsFieldSet` vs. add a custom field
+
+- **Extend `SettingsFieldSet`** when the rendering rule applies generally to a schema construct (e.g. nested structs recursing into sibling fields, literal unions becoming Selects). Keep auto-detection in `detectFieldType`.
+- **Use `fieldMap`** when the schema can't fully describe the rendering — runtime-driven option lists, custom inputs, or override of the auto-rendered control. Use the typed form `SettingsFieldMap<T>` (or `satisfies SettingsFieldMap<Settings>`) so the entries are checked against the values shape.
+- **Drop back to manual `SettingsForm.Item`** when the panel needs UI that isn't bound to a settings field at all (action buttons, info banners, lists of external entities). These coexist as siblings of `FieldSet` inside the same `Section`.

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

@@ -10,7 +10,8 @@ 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);

package/src/components/Settings/Settings.tsx

@@ -7,7 +7,8 @@ import React, { type PropsWithChildren } from 'react';
 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';
 
@@ -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>
   );

package/src/components/Settings/SettingsFieldSet.tsx

@@ -27,9 +27,14 @@ export type SettingsFieldProps<T = any> = {
 };
 
 /**
- * Map of property names to custom field renderers.
+ * 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 = Record<string, React.FC<SettingsFieldProps>>;
+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. */
@@ -44,14 +49,17 @@ export type SettingsFieldSetProps<T extends Record<string, any> = Record<string,
   /** When true, all controls are disabled. */
   readonly?: boolean;
 
-  /** Map of property names to custom field renderers. */
-  fieldMap?: SettingsFieldMap;
+  /** Map of property names to custom field renderers. Nested objects map to struct sub-fields. */
+  fieldMap?: SettingsFieldMap<T>;
 
-  /** Control field visibility. Return false to hide a field. */
+  /** 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. */
+  /** 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;
 };
 
 //
@@ -66,6 +74,7 @@ export const SettingsFieldSet = <T extends Record<string, any>>({
   fieldMap,
   visible,
   sort,
+  pathPrefix = '',
 }: SettingsFieldSetProps<T>) => {
   const properties = useMemo(() => {
     const props = getFormProperties(schema.ast);
@@ -90,18 +99,27 @@ export const SettingsFieldSet = <T extends Record<string, any>>({
     <>
       {properties.map((property) => {
         const name = property.name.toString();
-        if (visible && !visible(name, values)) {
+        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={fieldMap?.[name]}
+            customField={typeof entry === 'function' ? entry : undefined}
+            nestedFieldMap={typeof entry === 'object' ? entry : undefined}
+            visible={visible as (path: string, values: any) => boolean}
+            sort={sort}
           />
         );
       })}
@@ -117,13 +135,27 @@ SettingsFieldSet.displayName = 'Settings.FieldSet';
 
 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, value, onChange, readonly, customField }: SettingsFieldItemProps) => {
+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);
@@ -142,6 +174,20 @@ const SettingsFieldItem = ({ property, value, onChange, readonly, customField }:
   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}>

package/src/components/Settings/SettingsItem.tsx

@@ -7,7 +7,7 @@ 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';
+import { translationKey } from '#translations';
 
 const SETTINGS_PANEL_NAME = 'Settings.Panel';
 const SETTINGS_ITEM_NAME = 'Settings.Item';
@@ -20,9 +20,7 @@ type SettingsPanelProps = ThemedClassName<PropsWithChildren>;
 
 export 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>
+    <div className={mx('flex flex-col gap-3 p-trim-md border border-separator rounded-sm', classNames)}>{children}</div>
   );
 };
 
@@ -43,7 +41,7 @@ export const SettingsItem = ({ title, description = '', children }: SettingsItem
   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'>
+        <Input.Label classNames='pb-trim-md text-base-foreground text-lg md:col-span-2'>
           {toLocalizedString(title, t)}
         </Input.Label>
         <Input.DescriptionAndValidation>
@@ -51,9 +49,7 @@ export const SettingsItem = ({ title, description = '', children }: SettingsItem
             {toLocalizedString(description, t)}
           </Input.Description>
         </Input.DescriptionAndValidation>
-        <div role='none' className='text-end py-1'>
-          {children}
-        </div>
+        <div className='text-end py-1'>{children}</div>
       </SettingsPanel>
     </Input.Root>
   );

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

@@ -4,3 +4,4 @@
 
 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,8 +89,8 @@ 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, (view) => {
+        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>;
         });
 
@@ -104,12 +104,12 @@ const DefaultStory = (props: DefaultStoryProps) => {
           query,
           jsonSchema: newSchema.jsonSchema,
         });
-        Obj.change(view, (view) => {
+        Obj.update(view, (view) => {
           view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;
         });
         setSchema(() => newSchema);
       } else {
-        Obj.change(view, (view) => {
+        Obj.update(view, (view) => {
           view.query.ast = newQuery as Mutable<typeof newQuery>;
         });
         schema.updateTypename(getTypenameFromQuery(newQuery));

package/src/components/ViewEditor/ViewEditor.tsx

@@ -9,8 +9,7 @@ import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
 import React, { forwardRef, useCallback, useContext, useImperativeHandle, useMemo, useState } from 'react';
 
-import { Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, type SchemaRegistry } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, type SchemaRegistry, View } from '@dxos/echo';
 import { EchoSchema, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { useObject, useQuery } from '@dxos/react-client/echo';
@@ -24,9 +23,10 @@ import {
   createEchoChangeCallback,
   getTypenameFromQuery,
 } from '@dxos/schema';
-import { mx, osTranslations, subtleHover } from '@dxos/ui-theme';
+import { mx, osTranslations } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
 import {
   Form,
@@ -100,8 +100,8 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
         if (from._tag !== 'scope') {
           return undefined;
         }
-        return Option.fromNullable(from.scope.queues).pipe(
-          Option.flatMap((queues) => Array.head(queues)),
+        return Option.fromNullable(from.scope.feeds).pipe(
+          Option.flatMap((feeds) => Array.head(feeds)),
           Option.map(String),
           Option.getOrUndefined,
         );
@@ -160,13 +160,13 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     const handleUpdate = useCallback(
       (values: any) => {
         const targetValue = values.target;
-        let queueDxn: string | undefined;
+        let feedDXN: string | undefined;
 
         if (Ref.isRef(targetValue)) {
-          const feedDxn = targetValue.dxn.toString();
-          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === feedDxn);
+          const targetDXN = targetValue.dxn.toString();
+          const feed = feeds.find((feed) => Obj.getDXN(feed).toString() === targetDXN);
           if (feed) {
-            queueDxn = Feed.getQueueDxn(feed)?.toString();
+            feedDXN = Feed.getQueueDxn(feed)?.toString();
           }
         }
 
@@ -175,7 +175,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
           mode === 'schema'
             ? Query.select(Filter.typename(values.query)).ast
             : JSON.parse(JSON.stringify(values.query));
-        onQueryChanged?.(query, queueDxn);
+        onQueryChanged?.(query, feedDXN);
       },
       [onQueryChanged, mode, feeds],
     );
@@ -189,7 +189,7 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     );
 
     return (
-      <div role='none' className={mx(classNames)}>
+      <div className={mx(classNames)}>
         {/* If readonly is set, then the callout is not needed. */}
         {schemaReadonly && !readonly && (
           <Message.Root valence='info' classNames='my-form-padding'>
@@ -274,7 +274,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       invariant(!readonly);
-      Obj.change(view, (view) => {
+      Obj.update(view, (view) => {
         // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
         const fields = [...view.projection.fields];
         const [moved] = fields.splice(fromIndex, 1);
@@ -328,20 +328,13 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                   classNames={'grid grid-cols-subgrid col-span-5'}
                   aria-expanded={expandedField === field.id}
                 >
-                  <div
-                    role='none'
-                    className={mx(
-                      subtleHover,
-                      'grid grid-cols-subgrid col-span-5',
-                      'rounded-xs cursor-pointer min-h-10',
-                    )}
-                  >
+                  <div className='grid grid-cols-subgrid col-span-5 rounded-xs cursor-pointer min-h-10 dx-hover'>
                     <List.ItemDragHandle disabled={readonly || schemaReadonly} />
                     <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
                       {field.path}
                     </List.ItemTitle>
                     <List.ItemIconButton
-                      label={t(hidden ? 'show field label' : 'hide field label')}
+                      label={t(hidden ? 'show-field.label' : 'hide-field.label')}
                       data-testid={hidden ? 'show-field-button' : 'hide-field-button'}
                       icon={hidden ? 'ph--eye-closed--regular' : 'ph--eye--regular'}
                       autoHide={false}
@@ -369,7 +362,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                     )}
                   </div>
                   {expandedField === field.id && !readonly && (
-                    <div role='none' className='col-span-full mt-1 mb-1 border border-separator rounded-md'>
+                    <div className='col-span-full mt-1 mb-1 border border-separator rounded-md'>
                       <FieldEditor
                         readonly={readonly || schemaReadonly}
                         registry={registry}
@@ -384,7 +377,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
             })}
           </div>
           {!readonly && !expandedField && (
-            <div role='none' className='my-form-padding'>
+            <div className='my-form-padding'>
               <IconButton
                 icon='ph--plus--regular'
                 label={t('add-property-button.label')}

package/src/components/testing.tsx

@@ -12,7 +12,7 @@ type TestLayoutProps = PropsWithChildren<{ json?: any }>;
 
 export const TestLayout = ({ children, json }: TestLayoutProps) => {
   return (
-    <div role='none' className='dx-container grid grid-cols-[1fr_1fr] p-4 gap-4'>
+    <div className='dx-container grid grid-cols-[1fr_1fr] p-4 gap-4'>
       <TestPanel>{children}</TestPanel>
       <TestPanel>
         <Syntax.Root data={json}>

package/src/index.ts

@@ -2,10 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { translations } from './translations';
-
 export * from './components';
 export * from './hooks';
 export * from './util';
-
-export { translations };

package/src/util/field-type.ts

@@ -9,7 +9,7 @@ import { getAnnotation, isLiteralUnion } from '@dxos/effect';
 /**
  * Detected field type for a schema property.
  */
-export type SettingsFieldType = 'boolean' | 'string' | 'number' | 'select';
+export type SettingsFieldType = 'boolean' | 'string' | 'number' | 'select' | 'struct';
 
 export type SelectOption = {
   value: string | number;
@@ -23,6 +23,9 @@ export const detectFieldType = (ast: SchemaAST.AST): SettingsFieldType | undefin
   if (isLiteralUnion(ast)) {
     return 'select';
   }
+  if (SchemaAST.isTypeLiteral(ast)) {
+    return 'struct';
+  }
 
   switch (ast._tag) {
     case 'BooleanKeyword':