@dxos/react-ui-form 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/Form/FormTooltipsContext.ts

@@ -1,25 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { createContext, useContext } from 'react';
-
-/**
- * A standalone context for the `tooltips` flag (Form.Root's only label
- * decoration today: a JSON-path hover tooltip rendered by
- * `FormFieldLabel`).
- *
- * Lives in its own module so that `FormFieldComponent.tsx` -- imported at
- * the top of `Form.tsx` -- can read the flag without re-importing from
- * `Form.tsx`. That round-trip used to create a circular module-eval
- * dependency that intermittently hit a TDZ ("Cannot access 'FormFieldLabel'
- * before initialization") in browser-mode storybook tests.
- *
- * Defaults to `true` both when `Form.Root` doesn't pass an explicit value
- * AND when there is no enclosing `Form.Root` (e.g. `FormFieldWrapper`
- * stories that render an input without a Form provider).
- */
-export const FormTooltipsContext = createContext<boolean>(true);
-
-/** Returns whether the enclosing `Form.Root` has field tooltips enabled. */
-export const useFormTooltips = (): boolean => useContext(FormTooltipsContext);

package/src/components/Form/Layout/annotation.ts

@@ -1,38 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { createAnnotationHelper } from '@dxos/echo/internal';
-
-/**
- * Annotation carrying one or more named `FormLayout` DSL templates that
- * control how `Form.FieldSet` / `Form.Layout` arrange a schema's fields.
- * Callers select a variant via the `name` prop; the implicit name is
- * `DEFAULT_LAYOUT_NAME` (`'default'`).
- *
- * Templates use a minimal XML grammar — see `parser.ts`. Example:
- *
- *   FormLayoutAnnotation.set({
- *     default: `
- *       <grid cols="2">
- *         <field name="origin"/>
- *         <field name="destination"/>
- *         <field name="provider" span="2"/>
- *       </grid>
- *     `,
- *     card: `
- *       <grid cols="1">
- *         <field name="provider"/>
- *         <field name="number"/>
- *       </grid>
- *     `,
- *   })
- */
-export const FormLayoutAnnotationId = Symbol.for('@dxos/react-ui-form/annotation/Layout');
-
-export type FormLayoutMap = Record<string, string>;
-
-export const FormLayoutAnnotation = createAnnotationHelper<FormLayoutMap>(FormLayoutAnnotationId);
-
-/** Name used when no explicit variant is requested. */
-export const DEFAULT_LAYOUT_NAME = 'default';

package/src/components/Form/Layout/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-export * from './annotation';
-export { FormLayout } from './FormLayout';
-export { LayoutParseError, parseLayout, type LayoutNode } from './parser';

package/src/components/Form/README.md

@@ -1,3 +0,0 @@
-# Form
-
-- [ ] Layout options (e.g., label on the side.)

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

@@ -1,173 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Option from 'effect/Option';
-import * as SchemaAST from 'effect/SchemaAST';
-import React, { useCallback } from 'react';
-
-import { Ref } from '@dxos/echo';
-import { SchemaEx } from '@dxos/effect';
-import { useTranslation } from '@dxos/react-ui';
-
-import { translationKey } from '#translations';
-
-import { getFormProperties } from '../../../util';
-import { useFormValues } from '../Form';
-import { FormField, IconBlock, type FormFieldProps } from '../FormField';
-import { FormFieldLabel, type FormFieldStateProps } from '../FormFieldComponent';
-
-export type ArrayFieldProps = {
-  label: string;
-  fieldProps: FormFieldStateProps;
-} & FormFieldProps;
-
-export const ArrayField = ({
-  type,
-  path,
-  label,
-  readonly,
-  layout,
-  fieldProps: inputProps,
-  ...props
-}: ArrayFieldProps) => {
-  const { t } = useTranslation(translationKey);
-  const elementType = SchemaEx.getArrayElementType(type);
-  const { onValueChange } = inputProps;
-  const values = useFormValues(ArrayField.displayName, path, () => []);
-
-  const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
-    const baseNode = SchemaEx.findNode(typeNode, SchemaEx.isDiscriminatedUnion);
-    const typeLiteral = baseNode
-      ? SchemaEx.getDiscriminatedType(baseNode, {})
-      : SchemaEx.findNode(typeNode, SchemaAST.isTypeLiteral);
-    if (!typeLiteral) {
-      return {};
-    }
-
-    return Object.fromEntries(
-      getFormProperties(typeLiteral).map((prop) => {
-        const defaultValue = SchemaAST.getDefaultAnnotation(prop.type).pipe((annotation) =>
-          Option.getOrUndefined(annotation),
-        );
-        return [prop.name, defaultValue];
-      }),
-    );
-  };
-
-  const handleAdd = useCallback(() => {
-    const defaultValue =
-      SchemaEx.isNestedType(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
-    // `values` is `undefined` on first render for arrays whose parent path
-    // hasn't been materialised in the form values yet (e.g. `package.repos`
-    // when the form starts with no `package`). `useFormValues`'s default-
-    // value effect would eventually backfill it to `[]`, but until then the
-    // old `values && ...` guard silently swallowed the click. Treat a
-    // missing array as empty so Add always produces `[defaultValue]`.
-    onValueChange(type, [...(values ?? []), defaultValue]);
-  }, [onValueChange, type, elementType, values]);
-
-  const handleDelete = useCallback(
-    (idx: number) => {
-      onValueChange(
-        type,
-        values?.filter((_, i) => i !== idx),
-      );
-    },
-    [onValueChange, type, values],
-  );
-
-  if (!elementType || ((readonly || layout === 'static') && values && values.length < 1)) {
-    return null;
-  }
-
-  const renderItemAsObject = elementType && SchemaEx.isNestedType(elementType) && !Ref.isRefType(elementType);
-
-  return (
-    <>
-      {(layout !== 'static' || (values && values.length > 0)) && (
-        <div className='flex items-center gap-2'>
-          <div className='flex-1 min-w-0'>
-            <FormFieldLabel readonly={readonly} label={label} path={SchemaEx.createJsonPath(path ?? [])} asChild />
-          </div>
-          {!readonly && layout !== 'static' && (
-            <IconBlock inline icon='ph--plus--regular' label={t('add-item.button')} onClick={handleAdd} />
-          )}
-        </div>
-      )}
-
-      <div className='flex flex-col'>
-        {values?.map((_, index) => {
-          const isLast = index === values.length - 1;
-
-          // Object items: each row contains a recursively-rendered FormField
-          //   (multiple sub-rows for the object's fields) wrapped in a border,
-          //   with the delete button bottom-aligned next to it.
-          // Scalar items: a single-row inline FormField with a center-aligned
-          //   delete button. Refs and primitive arrays use this layout.
-          const fieldField = (
-            <FormField
-              {...props}
-              autoFocus={isLast}
-              type={elementType}
-              // Suppress the per-item header for object items only — the recursive
-              // form already renders labels for each sub-field. Scalar items
-              // (refs, primitives) keep the parent name so inline-layout
-              // children (e.g. RefField) have a real label to use as a
-              // fallback placeholder.
-              {...(renderItemAsObject && { name: null })}
-              path={[...(path ?? []), index]}
-              readonly={readonly || layout === 'static'}
-              layout={renderItemAsObject ? (layout === 'static' ? 'static' : undefined) : 'inline'}
-            />
-          );
-
-          return (
-            <div key={index} className='grid grid-cols-[1fr_min-content] items-center mb-1 last:mb-form-gap'>
-              {fieldField}
-              {!readonly && layout !== 'static' && (
-                <IconBlock
-                  inline={!renderItemAsObject}
-                  icon='ph--x--regular'
-                  label={t('remove-item.button')}
-                  onClick={() => handleDelete(index)}
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
-};
-
-ArrayField.displayName = 'Form.ArrayField';
-
-/**
- * Returns the default empty value for a given AST.
- * Used for initializing new array values etc.
- */
-// TODO(wittjosiah): Factor out?
-export const getDefaultValue = (ast?: SchemaAST.AST): any => {
-  switch (ast?._tag) {
-    case 'StringKeyword': {
-      return '';
-    }
-    case 'NumberKeyword': {
-      return 0;
-    }
-    case 'BooleanKeyword': {
-      return false;
-    }
-    case 'Suspend': {
-      return getDefaultValue(ast.f());
-    }
-    default: {
-      if (ast && SchemaEx.isNestedType(ast)) {
-        return {};
-      } else {
-        throw new Error(`Unsupported type: ${ast?._tag}`);
-      }
-    }
-  }
-};

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

@@ -1,22 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { Input, type SwitchProps } from '@dxos/react-ui';
-
-import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
-
-export const BooleanField = ({ type, readonly, onValueChange, ...props }: FormFieldComponentProps<boolean>) => {
-  const handleChange = useCallback<NonNullable<SwitchProps['onCheckedChange']>>(
-    (value) => onValueChange?.(type, value),
-    [type, onValueChange],
-  );
-
-  return (
-    <FormFieldWrapper<boolean> readonly={readonly} {...props}>
-      {({ value }) => <Input.Switch disabled={!!readonly} checked={value} onCheckedChange={handleChange} />}
-    </FormFieldWrapper>
-  );
-};

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

@@ -1,76 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { Input, type TextInputProps } from '@dxos/react-ui';
-import { safeParseFloat } from '@dxos/util';
-
-import { type FormFieldComponentProps, FormFieldWrapper } from '../FormFieldComponent';
-
-export const NumberField = ({
-  type,
-  readonly,
-  placeholder,
-  getValue,
-  onValueChange,
-  onBlur,
-  ...props
-}: FormFieldComponentProps<number>) => {
-  // Track raw string input so the user can clear the field before typing a new number.
-  // We only commit to onValueChange when the raw string parses to a valid number.
-  const [raw, setRaw] = useState<string>(() => {
-    const v = getValue();
-    return v !== undefined ? String(v) : '';
-  });
-
-  // Sync display when an external change updates the committed value (e.g. reactive form
-  // calculations). Only overwrite raw when the external value differs from what raw parses
-  // to, preserving partial edits like "1." which correctly parse to 1.
-  const externalValue = getValue();
-  useEffect(() => {
-    if (externalValue !== safeParseFloat(raw)) {
-      setRaw(externalValue !== undefined ? String(externalValue) : '');
-    }
-  }, [externalValue]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const handleChange = useCallback<NonNullable<TextInputProps['onChange']>>(
-    (event) => {
-      const value = event.target.value;
-      setRaw(value);
-      const parsed = safeParseFloat(value);
-      if (parsed !== undefined) {
-        onValueChange(type, parsed);
-      }
-    },
-    [type, onValueChange],
-  );
-
-  const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLElement>) => {
-      // If the field was left empty or invalid, reset to the last committed value.
-      if (safeParseFloat(raw) === undefined) {
-        const committed = getValue();
-        setRaw(committed !== undefined ? String(committed) : '');
-      }
-      onBlur(event);
-    },
-    [raw, getValue, onBlur],
-  );
-
-  return (
-    <FormFieldWrapper<number> readonly={readonly} getValue={getValue} {...props}>
-      {() => (
-        <Input.TextInput
-          type='number'
-          disabled={!!readonly}
-          placeholder={placeholder}
-          value={raw}
-          onChange={handleChange}
-          onBlur={handleBlur}
-        />
-      )}
-    </FormFieldWrapper>
-  );
-};

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

@@ -1,77 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { Icon, Input, Select, type SelectRootProps } from '@dxos/react-ui';
-import { getStyles } from '@dxos/ui-theme';
-
-import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
-
-export type SelectFieldOptions = FormFieldComponentProps & {
-  options?: Array<{ value: string | number; label?: string; secondaryLabel?: string; icon?: string; iconHue?: string }>;
-};
-
-export const SelectField = ({
-  type,
-  readonly,
-  label,
-  jsonPath,
-  layout,
-  placeholder,
-  options,
-  getStatus,
-  getValue,
-  onValueChange,
-}: SelectFieldOptions) => {
-  const { status, error } = getStatus();
-  const value = getValue() as string | undefined;
-
-  const handleValueChange = useCallback<NonNullable<SelectRootProps['onValueChange']>>(
-    (value) => onValueChange(type, value),
-    [type, onValueChange],
-  );
-
-  if ((readonly || layout === 'static') && value == null) {
-    return null;
-  }
-
-  return (
-    <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />}
-      {layout === 'static' ? (
-        <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
-      ) : (
-        <Select.Root value={value} onValueChange={handleValueChange}>
-          {/* TODO(burdon): Placeholder not working? */}
-          <Select.TriggerButton classNames='w-full' disabled={!!readonly} placeholder={placeholder} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {options?.map(({ value, label, secondaryLabel, icon, iconHue }) => (
-                  // NOTE: Numeric values are converted to and from strings.
-                  <Select.Option key={String(value)} value={String(value)}>
-                    <span className='flex items-center flex-row gap-2'>
-                      {icon && <Icon icon={icon} classNames={getIconHueStyles(iconHue)} />}
-                      {label ?? String(value)}
-                      {secondaryLabel && <span className='text-subdued text-xs'>{secondaryLabel}</span>}
-                    </span>
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-              <Select.Arrow />
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      )}
-      {layout === 'full' && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
-    </Input.Root>
-  );
-};
-
-const getIconHueStyles = (iconHue?: string): string | undefined => {
-  const styles = iconHue ? getStyles(iconHue) : undefined;
-
-  return styles?.fg;
-};

package/src/components/Settings/AUDIT.md

@@ -1,51 +0,0 @@
-# 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-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

@@ -1,104 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-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 { Settings } from './Settings';
-
-random.seed(132);
-
-const DefaultStory = () => {
-  return (
-    <Settings.Viewport>
-      <Settings.Section title='Settings' description={random.lorem.paragraphs(1)}>
-        <Settings.Item title={random.lorem.sentence(2)} description={random.lorem.paragraphs(1)}>
-          <Input.TextInput placeholder='Input' />
-        </Settings.Item>
-        <Settings.Item title={random.lorem.sentence(2)} description={random.lorem.paragraphs(2)}>
-          <Input.Switch />
-        </Settings.Item>
-        <Settings.Item title={random.lorem.sentence(3)} description={random.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 = {};
-
-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

@@ -1,81 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { type Label, ScrollArea, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-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';
-
-//
-// 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 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;
-
-//
-// Settings
-//
-
-export const Settings = {
-  Root: SettingsRoot,
-  Viewport: SettingsViewport,
-  Section: SettingsSection,
-  Panel: SettingsPanel,
-  Item: SettingsItem,
-  FieldSet: SettingsFieldSet,
-};