@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/settings/WorkbenchSettingsModal.tsx

@@ -1,25 +1,56 @@
-import { useId, useState, type FormEventHandler, type ReactNode } from 'react';
+import { useId, useMemo, useState, type FormEventHandler, type ReactNode } from 'react';
 import { Modal } from '../../modal/Modal';
 import type { ModalProps } from '../../modal/Modal';
-import { TextInput } from '../../primitives/TextInput';
+import { Button } from '../../primitives/button';
+import { ClearableTextInput } from '../../primitives/clearable-text-input';
 import { cx } from '../../utils/cx';
 import { WorkbenchNavigationPanel } from './NavigationPanel';
+import {
+  WorkbenchSettingsCommitProvider,
+  type WorkbenchSettingsCommitMode,
+  type WorkbenchSettingsPreferenceChange,
+} from './settingsCommit';
 import { WorkbenchSettingsNav } from './WorkbenchSettingsNav';
 import type { WorkbenchSettingsCategory, WorkbenchSettingsScope } from './types';
 
+export type { WorkbenchSettingsCommitMode, WorkbenchSettingsPreferenceChange };
+
 export interface WorkbenchSettingsModalProps extends Pick<
   ModalProps,
-  'className' | 'closeLabel' | 'footer' | 'labelledBy' | 'onClose' | 'title' | 'titleSuffix'
+  | 'chrome'
+  | 'className'
+  | 'closeLabel'
+  | 'footer'
+  | 'labelledBy'
+  | 'minHeight'
+  | 'minWidth'
+  | 'onClose'
+  | 'title'
+  | 'titleSuffix'
 > {
   categories: WorkbenchSettingsCategory[];
   activeCategoryId?: string;
   activeScopeId?: string;
   bodyClassName?: string;
+  /**
+   * How preference edits are committed.
+   *
+   * - `explicit` (default): keep the host-provided footer (typically Apply/Cancel) and `onSubmit`.
+   * - `immediate`: omit the footer and rely on per-field commits via `onPreferenceChange`
+   *   (or {@link useWorkbenchSettingsCommit} inside category content).
+   */
+  commitMode?: WorkbenchSettingsCommitMode;
   defaultActiveCategoryId?: string;
   defaultActiveScopeId?: string;
   defaultSearchValue?: string;
   emptyContent?: ReactNode;
   onActiveCategoryIdChange?: (categoryId: string) => void;
+  /**
+   * Called when category content commits a preference while `commitMode` is `immediate`.
+   * {@link WorkbenchSchemaForm} wires this automatically; custom fields should call
+   * {@link useWorkbenchSettingsCommit}.
+   */
+  onPreferenceChange?: (change: WorkbenchSettingsPreferenceChange) => void;
   onScopeChange?: (scopeId: string) => void;
   onSearchValueChange?: (value: string) => void;
   onSubmit?: FormEventHandler<HTMLFormElement>;
@@ -54,16 +85,21 @@ export function WorkbenchSettingsModal({
   activeScopeId,
   bodyClassName,
   categories,
+  chrome = 'platform',
   className,
   closeLabel = 'Close settings',
+  commitMode = 'explicit',
   defaultActiveCategoryId,
   defaultActiveScopeId,
   defaultSearchValue = '',
   emptyContent = null,
   footer,
   labelledBy,
+  minHeight,
+  minWidth,
   onActiveCategoryIdChange,
   onClose,
+  onPreferenceChange,
   onScopeChange,
   onSearchValueChange,
   onSubmit,
@@ -92,6 +128,18 @@ export function WorkbenchSettingsModal({
   const selectedScopeId =
     activeScopeId ?? uncontrolledScopeId ?? firstEnabledScope(scopes)?.id ?? '';
   const resolvedSearchValue = searchValue ?? uncontrolledSearchValue;
+  const isImmediateCommit = commitMode === 'immediate';
+  const resolvedFooter = isImmediateCommit ? undefined : footer;
+  const resolvedOnSubmit = isImmediateCommit ? undefined : onSubmit;
+  const commitContext = useMemo(
+    () => ({
+      categoryId: selectedCategoryId,
+      commitMode,
+      onPreferenceChange,
+      scopeId: selectedScopeId,
+    }),
+    [commitMode, onPreferenceChange, selectedCategoryId, selectedScopeId],
+  );
 
   const handleSelectCategory = (categoryId: string) => {
     const category = categories.find((candidate) => candidate.id === categoryId);
@@ -125,73 +173,79 @@ export function WorkbenchSettingsModal({
 
   return (
     <Modal
+      chrome={chrome}
       className={cx('workbench-settings-modal', className)}
       bodyClassName={cx('workbench-settings-modal__body', bodyClassName)}
       closeLabel={closeLabel}
-      footer={footer}
+      footer={resolvedFooter}
       labelledBy={titleId}
-      maximizable
-      movable
+      minHeight={minHeight}
+      minWidth={minWidth}
       title={title}
       titleSuffix={titleSuffix}
       onClose={onClose}
-      onSubmit={onSubmit}
+      onSubmit={resolvedOnSubmit}
     >
-      {showSearch ? (
-        <div className="workbench-settings-search">
-          <TextInput
-            aria-label={searchPlaceholder}
-            controlWidth="full"
-            placeholder={searchPlaceholder}
-            value={resolvedSearchValue}
-            onChange={(event) => handleSearchChange(event.currentTarget.value)}
-          />
-        </div>
-      ) : null}
-
-      {scopes?.length ? (
-        <div className="workbench-settings-tabs" aria-label="Settings scope">
-          {scopes.map((scope) => {
-            const isActive = scope.id === selectedScopeId;
-
-            return (
-              <button
-                key={scope.id}
-                type="button"
-                className={cx(
-                  'workbench-settings-tab',
-                  isActive && 'workbench-settings-tab--active',
-                )}
-                disabled={scope.disabled}
-                title={scope.title}
-                onClick={() => handleSelectScope(scope.id)}
-              >
-                {scope.label}
-              </button>
-            );
-          })}
-        </div>
-      ) : null}
-
-      <WorkbenchNavigationPanel
-        className="workbench-settings-layout"
-        content={
-          selectedCategory
-            ? (renderCategory?.(selectedCategory) ?? selectedCategory.content ?? emptyContent)
-            : emptyContent
-        }
-        contentClassName="workbench-settings-content ui-workbench-scrollbar ui-scroll-area--stable-gutter"
-        nav={
-          <WorkbenchSettingsNav
-            activeCategoryId={selectedCategoryId}
-            categories={categories}
-            renderContainer={false}
-            onSelectCategory={handleSelectCategory}
-          />
-        }
-        navClassName="workbench-settings-sidebar ui-workbench-scrollbar"
-        navProps={{ 'aria-label': 'Settings categories' }}
-      />
+      <WorkbenchSettingsCommitProvider value={commitContext}>
+        {showSearch ? (
+          <div className="workbench-settings-search">
+            <ClearableTextInput
+              aria-label={searchPlaceholder}
+              clearLabel="Clear settings search"
+              controlWidth="full"
+              placeholder={searchPlaceholder}
+              value={resolvedSearchValue}
+              onClear={() => handleSearchChange('')}
+              onChange={(event) => handleSearchChange(event.currentTarget.value)}
+            />
+          </div>
+        ) : null}
+
+        {scopes?.length ? (
+          <div className="workbench-settings-tabs" aria-label="Settings scope">
+            {scopes.map((scope) => {
+              const isActive = scope.id === selectedScopeId;
+
+              return (
+                <Button
+                  key={scope.id}
+                  className={cx(
+                    'workbench-settings-tab',
+                    isActive && 'workbench-settings-tab--active',
+                  )}
+                  disabled={scope.disabled}
+                  title={scope.title}
+                  onClick={() => handleSelectScope(scope.id)}
+                >
+                  {scope.label}
+                </Button>
+              );
+            })}
+          </div>
+        ) : null}
+
+        <WorkbenchNavigationPanel
+          className="workbench-settings-layout"
+          content={
+            selectedCategory
+              ? (renderCategory?.(selectedCategory) ?? selectedCategory.content ?? emptyContent)
+              : emptyContent
+          }
+          contentClassName="workbench-settings-content"
+          contentScrollGutter="auto"
+          nav={
+            <WorkbenchSettingsNav
+              activeCategoryId={selectedCategoryId}
+              categories={categories}
+              renderContainer={false}
+              onSelectCategory={handleSelectCategory}
+            />
+          }
+          navClassName="workbench-settings-sidebar"
+          navProps={{ 'aria-label': 'Settings categories' }}
+          navScrollGutter="auto"
+        />
+      </WorkbenchSettingsCommitProvider>
     </Modal>
   );
 }

package/src/workbench/settings/WorkbenchSettingsNav.tsx

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithRef } from 'react';
+import { Button } from '../../primitives/button';
 import { cx } from '../../utils/cx';
 import type { WorkbenchSettingsCategory } from './types';
 
@@ -26,9 +27,8 @@ export function WorkbenchSettingsNav({
     const isActive = category.id === activeCategoryId;
 
     return (
-      <button
+      <Button
         key={category.id}
-        type="button"
         className={cx(
           'workbench-settings-nav-item',
           isActive && 'workbench-settings-nav-item--active',
@@ -39,7 +39,7 @@ export function WorkbenchSettingsNav({
         onClick={() => onSelectCategory(category.id)}
       >
         {category.label}
-      </button>
+      </Button>
     );
   });
 

package/src/workbench/settings/extensionSettingsForm.ts

@@ -0,0 +1,34 @@
+import {
+  createWorkbenchSchemaFormFieldFromSettingSpec,
+  type WorkbenchSchemaFormSettingValueType,
+} from './schemaFormSettingSpec';
+import type { WorkbenchSchemaFormField } from './SchemaForm';
+
+export type WorkbenchExtensionSettingValueType = WorkbenchSchemaFormSettingValueType;
+
+export interface WorkbenchExtensionSettingSpec {
+  readonly default?: unknown;
+  readonly description?: string | undefined;
+  readonly enum?: readonly (boolean | number | string)[] | undefined;
+  readonly key: string;
+  readonly scope?: string | undefined;
+  readonly type: WorkbenchExtensionSettingValueType;
+}
+
+export function createWorkbenchSchemaFormFieldsFromSettings(
+  settings: readonly WorkbenchExtensionSettingSpec[],
+): WorkbenchSchemaFormField[] {
+  return settings.map((setting) => createWorkbenchSchemaFormFieldFromSetting(setting));
+}
+
+export function createWorkbenchSchemaFormFieldFromSetting(
+  setting: WorkbenchExtensionSettingSpec,
+): WorkbenchSchemaFormField {
+  return createWorkbenchSchemaFormFieldFromSettingSpec({
+    ...setting,
+    metadata: {
+      scope: setting.scope,
+      settingType: setting.type,
+    },
+  });
+}

package/src/workbench/settings/index.ts

@@ -4,6 +4,7 @@ export { WorkbenchNavigationPanel } from './NavigationPanel';
 export type { WorkbenchNavigationPanelProps } from './NavigationPanel';
 export { WorkbenchSectionedPanel } from './SectionedPanel';
 export type { WorkbenchSectionedPanelItem, WorkbenchSectionedPanelProps } from './SectionedPanel';
+export type { WorkbenchSectionedPanelScrollSpyAxis } from './sectionedPanelScrollSpy';
 export { WorkbenchStructuredDataSchemaPanel } from './StructuredDataSchemaPanel';
 export type {
   WorkbenchStructuredDataSchemaPanelClassNames,
@@ -29,6 +30,7 @@ export {
   WorkbenchStructuredDataTextArrayInput,
   appendWorkbenchStructuredDataSchemaTableRow,
   asWorkbenchStructuredDataRecord,
+  buildWorkbenchStructuredDataSchemaSelectOptions,
   booleanWorkbenchStructuredDataSchemaFieldValue,
   coerceWorkbenchStructuredDataFormFieldValue,
   coerceWorkbenchStructuredDataSchemaFieldValue,
@@ -64,14 +66,18 @@ export {
   getWorkbenchStructuredDataSchemaTablePath,
   getWorkbenchStructuredDataSchemaTableRowKey,
   getWorkbenchStructuredDataSchemaTableRows,
+  hasWorkbenchStructuredDataSchemaSelectOptions,
+  isWorkbenchStructuredDataSchemaColorField,
   getWorkbenchStructuredDataValue,
   isWorkbenchStructuredDataFormSubmittable,
   normalizeWorkbenchStructuredDataFormData,
   removeWorkbenchStructuredDataSchemaTableRow,
   setWorkbenchStructuredDataPathOrRootValue,
   setWorkbenchStructuredDataValue,
+  shouldUseWorkbenchStructuredDataSchemaRadioControl,
   slugWorkbenchStructuredDataSchemaAnchor,
   stringifyWorkbenchStructuredDataSchemaFieldValue,
+  validateWorkbenchStructuredDataSchemaFieldValue,
 } from './StructuredDataForm';
 export type {
   WorkbenchStructuredDataFieldType,
@@ -116,6 +122,29 @@ export {
   isWorkbenchSchemaFormSubmittable,
   normalizeWorkbenchSchemaFormValues,
 } from './SchemaForm';
+export {
+  createWorkbenchSchemaFormFieldFromSetting,
+  createWorkbenchSchemaFormFieldsFromSettings,
+} from './extensionSettingsForm';
+export {
+  coerceWorkbenchSchemaFormSettingDefaultValue,
+  createWorkbenchSchemaFormFieldsFromSettingDefinitions,
+  createWorkbenchSchemaFormFieldFromSettingSpec,
+  createWorkbenchSchemaFormSettingSpecFromDefinition,
+  createWorkbenchSchemaFormFieldsFromSettingSpecs,
+} from './schemaFormSettingSpec';
+export { createWorkbenchSchemaFormSettingsCategory } from './schemaFormSettingsCategory';
+export type {
+  WorkbenchExtensionSettingSpec,
+  WorkbenchExtensionSettingValueType,
+} from './extensionSettingsForm';
+export type { WorkbenchSchemaFormSettingsCategoryInput } from './schemaFormSettingsCategory';
+export type {
+  WorkbenchSchemaFormSettingDefinitionLike,
+  WorkbenchSchemaFormSettingDefinitionSpecOptions,
+  WorkbenchSchemaFormSettingSpec,
+  WorkbenchSchemaFormSettingValueType,
+} from './schemaFormSettingSpec';
 export type {
   WorkbenchSchemaFormCancelContext,
   WorkbenchSchemaFormCheckboxField,
@@ -134,7 +163,13 @@ export type {
   WorkbenchSchemaFormValues,
 } from './SchemaForm';
 export { WorkbenchSettingsModal } from './WorkbenchSettingsModal';
-export type { WorkbenchSettingsModalProps } from './WorkbenchSettingsModal';
+export type {
+  WorkbenchSettingsCommitMode,
+  WorkbenchSettingsModalProps,
+  WorkbenchSettingsPreferenceChange,
+} from './WorkbenchSettingsModal';
+export { useWorkbenchSettingsCommit } from './settingsCommit';
+export type { WorkbenchSettingsCommitContextValue } from './settingsCommit';
 export { WorkbenchSettingsNav } from './WorkbenchSettingsNav';
 export type { WorkbenchSettingsNavProps } from './WorkbenchSettingsNav';
 export { WorkbenchSettingsSection } from './WorkbenchSettingsSection';

package/src/workbench/settings/navigation-panel.css

@@ -0,0 +1,59 @@
+.ui-workbench-navigation-panel {
+  --ui-workbench-navigation-panel-nav-min-width: 200px;
+  --ui-workbench-navigation-panel-nav-width: 240px;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: grid;
+  grid-template-columns:
+    minmax(
+      var(--ui-workbench-navigation-panel-nav-min-width),
+      var(--ui-workbench-navigation-panel-nav-width)
+    )
+    minmax(0, 1fr);
+  align-items: stretch;
+  overflow: hidden;
+}
+
+.ui-workbench-navigation-panel:not([data-has-nav='true']) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.ui-workbench-navigation-panel[data-nav-orientation='horizontal'] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.ui-workbench-navigation-panel[data-nav-orientation='horizontal']
+  .ui-workbench-navigation-panel__nav {
+  height: auto;
+  border-right: 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.ui-workbench-navigation-panel__nav {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overscroll-behavior: contain;
+  border-right: 1px solid var(--color-border);
+}
+
+.ui-workbench-navigation-panel__nav-scroll,
+.ui-workbench-navigation-panel__content-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ui-workbench-navigation-panel__content {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overscroll-behavior: contain;
+}

package/src/workbench/settings/panel-region.css

@@ -7,8 +7,9 @@
 .ui-workbench-panel-region--scroll {
   display: flex;
   flex-direction: column;
-  gap: 22px;
-  padding: 18px 16px 28px;
+  gap: var(--workbench-panel-section-gap);
+  padding: var(--workbench-panel-padding-block-start) var(--workbench-panel-padding-inline)
+    var(--workbench-panel-padding-block-end);
 }
 
 .ui-workbench-panel-region--fill {

package/src/workbench/settings/schema-form.css

@@ -0,0 +1,36 @@
+.ui-workbench-schema-form {
+  max-width: 720px;
+}
+
+.ui-workbench-schema-form__fields {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ui-workbench-schema-form__field .ui-field {
+  margin-bottom: 14px;
+}
+
+.ui-workbench-schema-form__field[data-field-type='checkbox'] .ui-field {
+  margin-bottom: 10px;
+}
+
+.ui-workbench-schema-form__error {
+  margin: -8px 0 14px;
+  color: var(--color-danger);
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+}
+
+.ui-workbench-schema-form__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.ui-workbench-schema-form[data-readonly='true'] .ui-workbench-schema-form__actions {
+  opacity: 0.82;
+}

package/src/workbench/settings/schemaFormSettingSpec.ts

@@ -0,0 +1,177 @@
+import type { ReactNode } from 'react';
+import type {
+  WorkbenchSchemaFormField,
+  WorkbenchSchemaFormFieldBase,
+  WorkbenchSchemaFormFieldValue,
+  WorkbenchSchemaFormOption,
+} from './SchemaForm';
+
+export type WorkbenchSchemaFormSettingValueType =
+  'array' | 'boolean' | 'number' | 'object' | 'string';
+
+export interface WorkbenchSchemaFormSettingSpec {
+  readonly default?: unknown;
+  readonly description?: ReactNode | undefined;
+  readonly enum?: readonly (boolean | number | string)[] | undefined;
+  readonly key: string;
+  readonly label?: ReactNode | undefined;
+  readonly metadata?: Record<string, unknown> | undefined;
+  readonly options?: readonly WorkbenchSchemaFormOption[] | undefined;
+  readonly type: WorkbenchSchemaFormSettingValueType;
+}
+
+export interface WorkbenchSchemaFormSettingDefinitionLike {
+  readonly defaultValue?: unknown;
+  readonly enumValues?: readonly (boolean | number | string)[] | undefined;
+  readonly key: string;
+  readonly valueType: WorkbenchSchemaFormSettingValueType | 'enum';
+}
+
+export interface WorkbenchSchemaFormSettingDefinitionSpecOptions<
+  TDefinition extends WorkbenchSchemaFormSettingDefinitionLike,
+> {
+  readonly description?: ((definition: TDefinition) => ReactNode | undefined) | undefined;
+  readonly label?: ((definition: TDefinition) => ReactNode | undefined) | undefined;
+  readonly metadata?:
+    ((definition: TDefinition) => Record<string, unknown> | undefined) | undefined;
+  readonly options?:
+    ((definition: TDefinition) => readonly WorkbenchSchemaFormOption[] | undefined) | undefined;
+  readonly type?:
+    ((definition: TDefinition) => WorkbenchSchemaFormSettingValueType | undefined) | undefined;
+}
+
+export function createWorkbenchSchemaFormFieldsFromSettingSpecs(
+  settings: readonly WorkbenchSchemaFormSettingSpec[],
+): WorkbenchSchemaFormField[] {
+  return settings.map((setting) => createWorkbenchSchemaFormFieldFromSettingSpec(setting));
+}
+
+export function createWorkbenchSchemaFormFieldsFromSettingDefinitions<
+  TDefinition extends WorkbenchSchemaFormSettingDefinitionLike,
+>(
+  definitions: readonly TDefinition[],
+  options: WorkbenchSchemaFormSettingDefinitionSpecOptions<TDefinition> = {},
+): WorkbenchSchemaFormField[] {
+  return createWorkbenchSchemaFormFieldsFromSettingSpecs(
+    definitions.map((definition) =>
+      createWorkbenchSchemaFormSettingSpecFromDefinition(definition, options),
+    ),
+  );
+}
+
+export function createWorkbenchSchemaFormSettingSpecFromDefinition<
+  TDefinition extends WorkbenchSchemaFormSettingDefinitionLike,
+>(
+  definition: TDefinition,
+  options: WorkbenchSchemaFormSettingDefinitionSpecOptions<TDefinition> = {},
+): WorkbenchSchemaFormSettingSpec {
+  const resolvedOptions = options.options?.(definition);
+
+  return {
+    default: definition.defaultValue,
+    description: options.description?.(definition),
+    enum:
+      resolvedOptions === undefined && definition.valueType === 'enum'
+        ? definition.enumValues
+        : undefined,
+    key: definition.key,
+    label: options.label?.(definition),
+    metadata: options.metadata?.(definition),
+    options: resolvedOptions,
+    type: options.type?.(definition) ?? toWorkbenchSchemaFormSettingValueType(definition.valueType),
+  };
+}
+
+export function createWorkbenchSchemaFormFieldFromSettingSpec(
+  setting: WorkbenchSchemaFormSettingSpec,
+): WorkbenchSchemaFormField {
+  const base = createWorkbenchSchemaFormFieldBaseFromSettingSpec(setting);
+
+  if (setting.options?.length || setting.enum?.length) {
+    return {
+      ...base,
+      options: setting.options ?? setting.enum?.map(toWorkbenchSchemaFormOption) ?? [],
+      type: 'select',
+    };
+  }
+
+  if (setting.type === 'boolean') {
+    return {
+      ...base,
+      type: 'checkbox',
+    };
+  }
+
+  if (setting.type === 'number') {
+    return {
+      ...base,
+      type: 'number',
+    };
+  }
+
+  return {
+    ...base,
+    monospace: setting.type === 'array' || setting.type === 'object',
+    type: 'text',
+  };
+}
+
+function toWorkbenchSchemaFormSettingValueType(
+  valueType: WorkbenchSchemaFormSettingDefinitionLike['valueType'],
+): WorkbenchSchemaFormSettingValueType {
+  return valueType === 'enum' ? 'string' : valueType;
+}
+
+function createWorkbenchSchemaFormFieldBaseFromSettingSpec(
+  setting: WorkbenchSchemaFormSettingSpec,
+): WorkbenchSchemaFormFieldBase {
+  return {
+    defaultValue: coerceWorkbenchSchemaFormSettingDefaultValue(setting),
+    description: setting.description,
+    id: setting.key,
+    label: setting.label ?? setting.key,
+    metadata: setting.metadata,
+  };
+}
+
+export function coerceWorkbenchSchemaFormSettingDefaultValue(
+  setting: WorkbenchSchemaFormSettingSpec,
+): WorkbenchSchemaFormFieldValue | undefined {
+  if (setting.default === undefined) {
+    return undefined;
+  }
+
+  if (setting.type === 'boolean') {
+    return Boolean(setting.default);
+  }
+
+  if (setting.type === 'number') {
+    const value = Number(setting.default);
+    return Number.isFinite(value) ? value : undefined;
+  }
+
+  if (setting.type === 'array' || setting.type === 'object') {
+    return stringifyStructuredSettingDefault(setting.default);
+  }
+
+  return String(setting.default);
+}
+
+function stringifyStructuredSettingDefault(value: unknown) {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return '';
+  }
+}
+
+function toWorkbenchSchemaFormOption(value: boolean | number | string): WorkbenchSchemaFormOption {
+  return {
+    label: String(value),
+    value: String(value),
+  };
+}

package/src/workbench/settings/schemaFormSettingsCategory.tsx

@@ -0,0 +1,21 @@
+import { WorkbenchSchemaForm, type WorkbenchSchemaFormProps } from './SchemaForm';
+import type { WorkbenchSettingsCategory } from './types';
+
+export interface WorkbenchSchemaFormSettingsCategoryInput extends Omit<
+  WorkbenchSettingsCategory,
+  'content'
+> {
+  readonly fields: WorkbenchSchemaFormProps['fields'];
+  readonly formProps?: Omit<WorkbenchSchemaFormProps, 'fields'> | undefined;
+}
+
+export function createWorkbenchSchemaFormSettingsCategory({
+  fields,
+  formProps,
+  ...category
+}: WorkbenchSchemaFormSettingsCategoryInput): WorkbenchSettingsCategory {
+  return {
+    ...category,
+    content: <WorkbenchSchemaForm {...formProps} fields={fields} />,
+  };
+}