@dxos/react-ui-form 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/components/Form/fields/RefField.tsx

@@ -6,14 +6,15 @@ import '@dxos/lit-ui/dx-tag-picker.pcss';
 
 import React, { useCallback, useMemo } from 'react';
 
-import { type Database, Entity, Filter, Ref, type Type } from '@dxos/echo';
+import { type Database, Entity, Filter, Obj, Ref, Type } from '@dxos/echo';
 import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
 import { useQuery, useSchema as useSchema$ } from '@dxos/echo-react';
 import { findAnnotation } from '@dxos/effect';
 import { DXN } from '@dxos/keys';
 import { DxAnchor } from '@dxos/lit-ui/react';
 import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/ui-theme';
+import { ParentLabelAnnotationId } from '@dxos/schema';
+import { mx } from '@dxos/ui-theme';
 
 import { translationKey } from '../../../translations';
 import { ObjectPicker, type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
@@ -25,23 +26,35 @@ const isRefSnapshot = (val: any): val is { '/': string } => {
   return typeof val === 'object' && typeof (val as any)?.['/'] === 'string';
 };
 
-const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (results) =>
+const defaultGetOptions: NonNullable<RefFieldProps['getOptions']> = (results, { parentLabel } = {}) =>
   results.map((result) => {
     const id = Entity.getDXN(result).toString();
-    const label = Entity.getLabel(result);
+    const parent = parentLabel ? Obj.getParent(result as Obj.Unknown) : undefined;
+    const label = parent ? Entity.getLabel(parent) : Entity.getLabel(result);
     return { id, label: label ?? id };
   });
 
 const defaultResultsHook: NonNullable<RefFieldProps['resultsHook']> = (db, typename) =>
-  useQuery(db, typename ? Filter.typename(typename) : Filter.nothing());
+  useQuery(
+    db,
+    typename
+      ? // For Ref.Ref(Obj.Unknown) we want to show all objects.
+        typename === Type.getTypename(Obj.Unknown)
+        ? Filter.everything()
+        : Filter.typename(typename)
+      : Filter.nothing(),
+  );
 
 export type RefFieldProps = FormFieldComponentProps &
-  Pick<ObjectPickerContentProps, 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath'> & {
+  Pick<
+    ObjectPickerContentProps,
+    'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath' | 'createFieldMap'
+  > & {
     db?: Database.Database;
     resultsHook?: (db?: Database.Database, typename?: string) => Entity.Any[];
-    schemaHook?: (db?: Database.Database, typename?: string) => Type.Entity.Any;
-    getOptions?: (objects: Entity.Any[]) => RefOption[];
-    onCreate?: (schema: Type.Entity.Any, values: any) => void;
+    schemaHook?: (db?: Database.Database, typename?: string) => Type.AnyEntity;
+    getOptions?: (objects: Entity.Any[], options?: { parentLabel?: boolean }) => RefOption[];
+    onCreate?: (schema: Type.AnyEntity, values: any) => void;
   };
 
 export const RefField = (props: RefFieldProps) => {
@@ -56,6 +69,7 @@ export const RefField = (props: RefFieldProps) => {
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
+    createFieldMap,
     db,
     resultsHook: useResults = defaultResultsHook,
     schemaHook: useSchema = useSchema$,
@@ -72,7 +86,10 @@ export const RefField = (props: RefFieldProps) => {
   );
 
   const results = useResults(db, typename);
-  const options = useMemo(() => getOptions(results), [results, getOptions]);
+  const options = useMemo(() => {
+    const parentLabel = type ? findAnnotation<boolean>(type, ParentLabelAnnotationId) === true : false;
+    return getOptions(results, { parentLabel });
+  }, [results, getOptions, type]);
 
   const handleGetValue = useCallback(() => {
     const formValue = getValue();
@@ -135,9 +152,9 @@ export const RefField = (props: RefFieldProps) => {
       <div>
         {readonly ? (
           !item ? (
-            <p className={mx(descriptionText, 'mbe-2')}>{t('empty readonly ref field label')}</p>
+            <p className={mx('text-description', 'mb-2')}>{t('empty-readonly-ref-field.label')}</p>
           ) : (
-            <DxAnchor key={item.id} refid={item.id} rootclassname='mie-1'>
+            <DxAnchor key={item.id} dxn={item.id} rootclassname='me-1'>
               {item.label}
             </DxAnchor>
           )
@@ -145,15 +162,15 @@ export const RefField = (props: RefFieldProps) => {
           <ObjectPicker.Root>
             <ObjectPicker.Trigger asChild classNames='p-0'>
               {item ? (
-                <div className='flex gap-2 is-full'>
+                <div className='flex gap-form-gap w-full'>
                   <Input.Root key={item.id}>
-                    <Input.TextInput value={item.label} readOnly classNames='is-full' />
+                    <Input.TextInput value={item.label} readOnly classNames='w-full' />
                   </Input.Root>
                 </div>
               ) : (
-                <Button classNames='is-full text-start gap-2'>
+                <Button classNames='w-full text-start gap-form-gap'>
                   <div role='none' className='grow overflow-hidden'>
-                    <span className='flex truncate text-description'>{placeholder ?? t('ref field placeholder')}</span>
+                    <span className='flex truncate text-description'>{placeholder ?? t('ref-field.placeholder')}</span>
                   </div>
                   <Icon size={3} icon='ph--caret-down--bold' />
                 </Button>
@@ -161,13 +178,14 @@ export const RefField = (props: RefFieldProps) => {
             </ObjectPicker.Trigger>
             <ObjectPicker.Portal>
               <ObjectPicker.Content
-                classNames='popover-card-width'
+                classNames='dx-card-popover-width'
                 options={options}
                 selectedIds={selectedIds}
                 createSchema={createSchema && omitId(createSchema)}
                 createOptionLabel={createOptionLabel}
                 createOptionIcon={createOptionIcon}
                 createInitialValuePath={createInitialValuePath}
+                createFieldMap={createFieldMap}
                 onCreate={handleCreate}
                 onSelect={handleSelect}
               />

package/src/components/Form/fields/SelectField.tsx

@@ -43,7 +43,7 @@ export const SelectField = ({
       ) : (
         <Select.Root value={value} onValueChange={handleValueChange}>
           {/* TODO(burdon): Placeholder not working? */}
-          <Select.TriggerButton classNames='is-full' disabled={!!readonly} placeholder={placeholder} />
+          <Select.TriggerButton classNames='w-full' disabled={!!readonly} placeholder={placeholder} />
           <Select.Portal>
             <Select.Content>
               <Select.Viewport>

package/src/components/Form/fields/SelectOptionField.stories.tsx

@@ -7,7 +7,7 @@ import * as Schema from 'effect/Schema';
 import React, { useState } from 'react';
 
 import { SelectOption } from '@dxos/echo/internal';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../../translations';
 import { TestLayout } from '../../testing';
@@ -50,7 +50,7 @@ const meta = {
   title: 'ui/react-ui-form/SelectOptionField',
   component: SelectOptionField as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/Form/fields/SelectOptionField.tsx

@@ -128,13 +128,13 @@ export const SelectOptionField = ({
             readonly={!!readonly}
           >
             {({ items }) => (
-              <div role='list' className='is-full overflow-auto'>
+              <div role='list' className='w-full overflow-auto'>
                 {items?.map((item) => (
                   <div key={item.id}>
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-sm']}
+                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-xs']}
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
@@ -152,13 +152,12 @@ export const SelectOptionField = ({
                         />
                       </div>
                       {selected === item.id && (
-                        <div className='pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine'>
-                          {/* 16px to match drag handle width. */}
-                          <Input.Label classNames='text-xs'>{t('select option label')}</Input.Label>
-                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-1'>
+                        <div className='flex flex-col p-form-padding gap-form-gap dx-density-fine'>
+                          <Input.Label classNames='text-xs'>{t('select-option.label')}</Input.Label>
+                          <div className='grid grid-cols-[1fr_min-content_min-content] gap-form-gap'>
                             <Input.TextInput
                               disabled={!!readonly}
-                              placeholder={t('select option label placeholder')}
+                              placeholder={t('select-option-label.placeholder')}
                               ref={selected === item.id ? inputRef : undefined}
                               value={item.title}
                               onChange={handleTitleChange(item.id)}
@@ -170,7 +169,7 @@ export const SelectOptionField = ({
                               disabled={!!readonly}
                               icon='ph--trash--fill'
                               iconOnly
-                              label={t('select option delete')}
+                              label={t('select-option-delete.button')}
                               onClick={() => handleDelete(item.id)}
                             />
                           </div>
@@ -182,10 +181,10 @@ export const SelectOptionField = ({
                 <IconButton
                   variant='ghost'
                   icon='ph--plus--regular'
-                  label={t('select option add')}
+                  label={t('select-option-add.button')}
                   onClick={handleAdd}
                   disabled={!!readonly}
-                  classNames='is-full'
+                  classNames='w-full'
                 />
               </div>
             )}

package/src/components/Form/fields/TupleField.tsx

@@ -32,7 +32,7 @@ export const TupleField = ({
   return (
     <Input.Root validationValence={status}>
       <FormFieldLabel error={error} readonly={readonly} label={label} />
-      <div className={mx('grid gap-2', gridCols[binding.length - 1])}>
+      <div className={mx('grid gap-form-gap', gridCols[binding.length - 1])}>
         {binding.map((prop) => (
           <Input.TextInput
             key={prop}

package/src/components/ObjectPicker/ObjectPicker.stories.tsx

@@ -74,18 +74,18 @@ const DefaultStory = () => {
   );
 
   return (
-    <div role='none' className='flex is-96'>
+    <div role='none' className='w-96'>
       <ObjectPicker.Root open={isOpen} onOpenChange={setIsOpen}>
         <ObjectPicker.Trigger asChild>
-          <Button variant='primary' data-testid='trigger' classNames='is-full'>
+          <Button variant='primary' data-testid='trigger' classNames='w-full'>
             Select Person
           </Button>
         </ObjectPicker.Trigger>
         <ObjectPicker.Content
-          classNames='popover-card-width'
+          classNames='dx-card-popover-width'
           options={options}
           createSchema={personSchema}
-          createOptionLabel={['create new person label', { ns: osTranslations }]}
+          createOptionLabel={['create-new-person.label', { ns: osTranslations }]}
           createOptionIcon='ph--user-plus--regular'
           createInitialValuePath='fullName'
           onCreate={handleCreateCallback}
@@ -100,7 +100,7 @@ const meta = {
   title: 'ui/react-ui-form/ObjectPicker',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({
       types: [Person.Person],
       createIdentity: true,
@@ -201,14 +201,10 @@ export const WithTest: Story = {
     await userEvent.click(saveButton);
 
     // Check that clicking the save button calls onCreate with expected values.
-    await expect(mockHandleCreate).toHaveBeenCalledWith({
-      fullName: unrelatedTerm,
-      addresses: [],
-      phoneNumbers: [],
-      emails: [],
-      identities: [],
-      urls: [],
-      fields: [],
-    });
+    await expect(mockHandleCreate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fullName: unrelatedTerm,
+      }),
+    );
   },
 };

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -6,10 +6,11 @@ import type * as Schema from 'effect/Schema';
 import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
 
 import { type Palette, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Combobox, useSearchListInput, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { Combobox, useSearchListInput, useSearchListResults } from '@dxos/react-ui-search';
 
 import { translationKey } from '../../translations';
 import { Form } from '../Form';
+import { type FormFieldMap } from '../Form/FormFieldComponent';
 
 export type RefOption = {
   id: string;
@@ -24,36 +25,11 @@ export type ObjectPickerContentProps = ThemedClassName<{
   createOptionIcon?: string;
   createSchema?: Schema.Schema.AnyNoContext;
   createInitialValuePath?: string;
+  createFieldMap?: FormFieldMap;
   onCreate?: (values: any) => void;
   onSelect: (id: string) => void;
 }>;
 
-const CreateItem = ({
-  createOptionLabel,
-  createOptionIcon,
-  onCreateItemSelect,
-}: {
-  createOptionLabel: [string, { ns: string }];
-  createOptionIcon: string;
-  onCreateItemSelect: (query: string) => void;
-}) => {
-  const { t } = useTranslation(translationKey);
-  const { query } = useSearchListInput();
-
-  return (
-    <Combobox.Item
-      value='__create__'
-      label={t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })}
-      icon={createOptionIcon}
-      classNames='flex items-center gap-2'
-      closeOnSelect={false}
-      onSelect={() => {
-        onCreateItemSelect(query);
-      }}
-    />
-  );
-};
-
 const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>(
   (
     {
@@ -63,11 +39,12 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
       createOptionLabel,
       createOptionIcon,
       createInitialValuePath,
+      createFieldMap,
       onSelect,
       onCreate,
       ...props
     },
-    ref,
+    forwardedRef,
   ) => {
     const { t } = useTranslation(translationKey);
     const [showForm, setShowForm] = useState(false);
@@ -112,14 +89,15 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
       [createSchema],
     );
 
-    return (
-      <Combobox.Content {...props} ref={ref} onSearch={handleSearch} onKeyDownCapture={handleKeyDown}>
-        {showForm && createSchema ? (
+    if (showForm && createSchema) {
+      return (
+        <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
           <Popover.Viewport>
             <Form.Root
               testId='create-referenced-object-form'
               schema={createSchema}
-              values={createInitialValuePath ? { [createInitialValuePath]: formInitialValue } : {}}
+              defaultValues={createInitialValuePath ? { [createInitialValuePath]: formInitialValue } : {}}
+              fieldMap={createFieldMap}
               onSave={handleFormSave}
               onCancel={handleFormCancel}
             >
@@ -131,40 +109,73 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
               </Form.Viewport>
             </Form.Root>
           </Popover.Viewport>
-        ) : (
-          <>
-            <Combobox.Input placeholder={t('ref field combobox input placeholder')} autoFocus />
-            <Combobox.List>
-              {results.map((option) => (
-                <Combobox.Item
-                  key={option.id}
-                  value={option.id}
-                  label={option.label}
-                  checked={selectedIds?.includes(option.id)}
-                  onSelect={() => onSelect(option.id)}
-                  classNames='flex items-center gap-2'
-                />
-              ))}
-              {createOptionLabel && createOptionIcon && createSchema && onCreate && (
-                <CreateItem
-                  createOptionLabel={createOptionLabel}
-                  createOptionIcon={createOptionIcon}
-                  onCreateItemSelect={(query: string) => {
-                    setFormInitialValue(query);
-                    setShowForm(true);
-                  }}
-                />
-              )}
-            </Combobox.List>
-          </>
-        )}
+          <Combobox.Arrow />
+        </Combobox.Content>
+      );
+    }
+
+    return (
+      <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
+        <Combobox.Input placeholder={t('ref-field-combobox-input.placeholder')} autoFocus />
+        <Combobox.List>
+          {results.map((option) => (
+            <Combobox.Item
+              key={option.id}
+              value={option.id}
+              label={option.label}
+              checked={selectedIds?.includes(option.id)}
+              onSelect={() => onSelect(option.id)}
+              classNames='flex items-center gap-2'
+            />
+          ))}
+          {createSchema && onCreate && (
+            <CreateItem
+              createOptionLabel={createOptionLabel}
+              createOptionIcon={createOptionIcon ?? 'ph--plus--regular'}
+              onCreateItemSelect={(query: string) => {
+                setFormInitialValue(query);
+                setShowForm(true);
+              }}
+            />
+          )}
+        </Combobox.List>
         <Combobox.Arrow />
       </Combobox.Content>
     );
   },
 );
 
-ObjectPickerContent.displayName = 'ObjectPickerContent';
+const CreateItem = ({
+  createOptionLabel,
+  createOptionIcon,
+  onCreateItemSelect,
+}: {
+  createOptionLabel?: [string, { ns: string }];
+  createOptionIcon: string;
+  onCreateItemSelect: (query: string) => void;
+}) => {
+  const { t } = useTranslation(translationKey);
+  const { query } = useSearchListInput();
+
+  const label = createOptionLabel
+    ? t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })
+    : t('create-option.label');
+
+  return (
+    <Combobox.Item
+      value='__create__'
+      label={label}
+      icon={createOptionIcon}
+      classNames='flex items-center gap-2'
+      closeOnSelect={false}
+      onSelect={() => {
+        onCreateItemSelect(query);
+      }}
+    />
+  );
+};
+
+ObjectPickerContent.displayName = 'ObjectPicker.Content';
 
 export const ObjectPicker = {
   Root: Combobox.Root,

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

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { Button, Input } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { Settings } from './Settings';
+
+faker.seed(132);
+
+const DefaultStory = () => {
+  return (
+    <Settings.Viewport>
+      <Settings.Section title='Settings' description={faker.lorem.paragraphs(1)}>
+        <Settings.Item title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(1)}>
+          <Input.TextInput placeholder='Input' />
+        </Settings.Item>
+        <Settings.Item title={faker.lorem.sentence(2)} description={faker.lorem.paragraphs(2)}>
+          <Input.Switch />
+        </Settings.Item>
+        <Settings.Item title={faker.lorem.sentence(3)} description={faker.lorem.paragraphs(2)}>
+          <Button>Test</Button>
+        </Settings.Item>
+      </Settings.Section>
+      <Settings.Section title='Panel Example'>
+        <Settings.Panel>
+          <h3 className='text-lg mb-2'>Members</h3>
+          <p className='text-description'>Content inside a panel.</p>
+        </Settings.Panel>
+      </Settings.Section>
+    </Settings.Viewport>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/Settings',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Settings/Settings.tsx

@@ -0,0 +1,129 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { Input, type Label, ScrollArea, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../translations';
+
+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).
+//
+
+type SettingsRootProps = ThemedClassName<PropsWithChildren>;
+
+const SettingsRoot = ({ children, classNames }: SettingsRootProps) => {
+  return <div className={mx('flex flex-col gap-2', classNames)}>{children}</div>;
+};
+
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+
+//
+// Viewport (scroll area + padding + document layout).
+//
+
+const SettingsViewport = composable<HTMLDivElement>(({ children, ...props }, forwardedRef) => {
+  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>
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+});
+
+SettingsViewport.displayName = SETTINGS_VIEWPORT_NAME;
+
+//
+// Section (title + optional description + children with spacing).
+//
+
+type SettingsSectionProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsSection = ({ title, description, children }: SettingsSectionProps) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      <h2 className='px-trim-md mt-trim-md text-xl'>{toLocalizedString(title, t)}</h2>
+      {description && <p className='px-trim-md text-description'>{toLocalizedString(description, t)}</p>}
+      <div className='w-full pt-trim-md space-y-trim-md'>{children}</div>
+    </>
+  );
+};
+
+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
+//
+
+export const Settings = {
+  Root: SettingsRoot,
+  Viewport: SettingsViewport,
+  Section: SettingsSection,
+  Panel: SettingsPanel,
+  Item: SettingsItem,
+};

package/src/components/{ControlSection → Settings}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ControlSection';
+export * from './Settings';