gloomberb 0.5.0 → 0.6.0

package/src/components/pane-settings-dialog.tsx

@@ -1,14 +1,17 @@
-import { TextAttributes } from "@opentui/core";
-import { useDialog, useDialogKeyboard, type AlertContext } from "@opentui-ui/dialog/react";
-import { useEffect, useRef, useState } from "react";
+/// <reference lib="dom" />
+
+import { Box, Text, useUiHost } from "../ui";
+import { TextAttributes } from "../ui";
+import { type AlertContext, useDialog, useDialogKeyboard } from "../ui/dialog";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import type {
   PaneSettingField,
   PaneSettingTextField,
 } from "../types/plugin";
 import type { PluginRegistry } from "../plugins/registry";
-import { useAppState } from "../state/app-context";
 import { colors } from "../theme/colors";
 import { Button, DialogFrame, ListView, MultiSelectDialogContent, TextField } from "./ui";
+import { NativeSelect, openNativeSelect, type NativeSelectElement } from "./ui/native-select";
 
 interface PaneSettingsDialogContentProps extends AlertContext {
   paneId: string;
@@ -16,6 +19,21 @@ interface PaneSettingsDialogContentProps extends AlertContext {
   applyFieldValue: (paneId: string, field: PaneSettingField, value: unknown) => Promise<void>;
 }
 
+type SelectPaneSettingField = Extract<PaneSettingField, { type: "select" }>;
+type MultiSelectPaneSettingField = Extract<PaneSettingField, { type: "multi-select" | "ordered-multi-select" }>;
+
+interface SelectFieldDialogProps extends AlertContext {
+  field: SelectPaneSettingField;
+  currentValue: unknown;
+  onApply: (value: string) => Promise<void>;
+}
+
+interface TextFieldDialogProps extends AlertContext {
+  field: PaneSettingTextField;
+  currentValue: unknown;
+  onApply: (value: string) => Promise<void>;
+}
+
 function isSpaceKey(event: { name?: string; sequence?: string }): boolean {
   return event.name === "space" || event.name === " " || event.sequence === " ";
 }
@@ -53,20 +71,258 @@ function coerceSelectedValues(value: unknown): string[] {
     : [];
 }
 
-function SelectFieldDialog({
+const DESKTOP_TEXT_STYLE = {
+  letterSpacing: 0,
+  lineHeight: "var(--cell-h)",
+} as const;
+
+function desktopText(weight?: number) {
+  return weight ? { ...DESKTOP_TEXT_STYLE, fontWeight: weight } : DESKTOP_TEXT_STYLE;
+}
+
+function DesktopDialogSurface({
+  title,
+  subtitle,
   dismiss,
-  dialogId,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  dismiss: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <Box
+      width={68}
+      maxWidth="calc(100vw - 72px)"
+      flexDirection="column"
+      style={{
+        padding: 12,
+      }}
+    >
+      <Box flexDirection="row" alignItems="flex-start" style={{ marginBottom: 10 }}>
+        <Box flexDirection="column" flexGrow={1} minWidth={0}>
+          <Text fg={colors.textBright} style={desktopText(700)}>{title}</Text>
+          {subtitle && (
+            <Text fg={colors.textMuted} wrapText style={{ ...desktopText(), marginTop: 3 }}>
+              {subtitle}
+            </Text>
+          )}
+        </Box>
+        <Box
+          width={3}
+          height={1}
+          alignItems="center"
+          justifyContent="center"
+          onMouseDown={(event: any) => {
+            event.stopPropagation?.();
+            event.preventDefault?.();
+            dismiss();
+          }}
+          data-gloom-interactive="true"
+          style={{
+            borderRadius: 6,
+            cursor: "pointer",
+            marginLeft: 16,
+            color: colors.textMuted,
+          }}
+        >
+          <Text fg={colors.textMuted} style={desktopText(700)}>x</Text>
+        </Box>
+      </Box>
+      {children}
+    </Box>
+  );
+}
+
+function DesktopSwitch({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <Box
+      width="42px"
+      height="18px"
+      flexDirection="row"
+      alignItems="center"
+      justifyContent={checked ? "flex-end" : "flex-start"}
+      backgroundColor={checked ? colors.selected : "rgba(255, 255, 255, 0.07)"}
+      onMouseDown={(event: any) => {
+        event.stopPropagation?.();
+        event.preventDefault?.();
+        onChange(!checked);
+      }}
+      data-gloom-interactive="true"
+      style={{
+        border: `1px solid ${checked ? colors.borderFocused : colors.border}`,
+        borderRadius: 999,
+        boxShadow: checked ? "inset 0 1px 0 rgba(255,255,255,0.10)" : "inset 0 1px 0 rgba(255,255,255,0.05)",
+        cursor: "pointer",
+        paddingInline: 2,
+      }}
+    >
+      <Box
+        width="14px"
+        height="14px"
+        backgroundColor={checked ? colors.selectedText : colors.textMuted}
+        style={{
+          borderRadius: 999,
+          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.35)",
+        }}
+      />
+    </Box>
+  );
+}
+
+function DesktopValuePill({ value }: { value: string }) {
+  return (
+    <Box
+      flexDirection="row"
+      alignItems="center"
+      backgroundColor="rgba(255, 255, 255, 0.06)"
+      style={{
+        border: `1px solid ${colors.border}`,
+        borderRadius: 6,
+        padding: "1px 7px",
+      }}
+    >
+      <Text fg={colors.textDim} style={desktopText(600)}>{value}</Text>
+    </Box>
+  );
+}
+
+function DesktopSettingsRow({
   field,
+  selected,
+  hovered,
   currentValue,
+  onHover,
+  onEdit,
+  onSelectRef,
   onApply,
-}: AlertContext & {
-  field: Extract<PaneSettingField, { type: "select" }>;
+}: {
+  field: PaneSettingField;
+  selected: boolean;
+  hovered: boolean;
   currentValue: unknown;
-  onApply: (value: string) => Promise<void>;
+  onHover: () => void;
+  onEdit: () => void;
+  onSelectRef: (fieldKey: string, element: NativeSelectElement | null) => void;
+  onApply: (field: PaneSettingField, value: unknown) => void;
+}) {
+  const isToggle = field.type === "toggle";
+  const summary = summarizeValue(field, currentValue);
+  const control = field.type === "toggle" ? (
+    <DesktopSwitch checked={currentValue === true} onChange={(checked) => onApply(field, checked)} />
+  ) : field.type === "select" ? (
+    <NativeSelect
+      value={typeof currentValue === "string" ? currentValue : ""}
+      options={field.options}
+      includeUnsetOption
+      selectRef={(element) => onSelectRef(field.key, element)}
+      onChange={(value) => onApply(field, value)}
+    />
+  ) : (
+    <Box flexDirection="row" alignItems="center" gap={1}>
+      <DesktopValuePill value={summary} />
+      <Text fg={colors.textMuted} style={desktopText(600)}>Edit</Text>
+    </Box>
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      minHeight={field.description ? undefined : 2}
+      backgroundColor={hovered || selected ? "rgba(255, 255, 255, 0.045)" : "transparent"}
+      onMouseMove={onHover}
+      onMouseDown={field.type === "select" ? undefined : (event: any) => {
+        event.stopPropagation?.();
+        event.preventDefault?.();
+        if (isToggle) onApply(field, currentValue !== true);
+        else onEdit();
+      }}
+      data-gloom-interactive={field.type === "select" ? undefined : "true"}
+      style={{
+        borderRadius: 6,
+        cursor: field.type === "select" ? "default" : "pointer",
+        padding: "7px 4px 8px",
+        transition: "background-color 100ms ease",
+      }}
+    >
+      <Box flexDirection="row" alignItems="center" width="100%">
+        <Box flexDirection="row" flexGrow={1} minWidth={0} style={{ paddingRight: 12 }}>
+          <Text fg={colors.text} style={desktopText(650)}>{field.label}</Text>
+        </Box>
+        {control}
+      </Box>
+      {field.description && (
+        <Text fg={colors.textMuted} wrapText style={desktopText()}>
+          {field.description}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+function DesktopSettingsList({
+  fields,
+  selectedIndex,
+  hoveredFieldKey,
+  settings,
+  onHover,
+  onEdit,
+  onSelectRef,
+  onApply,
+}: {
+  fields: PaneSettingField[];
+  selectedIndex: number;
+  hoveredFieldKey: string | null;
+  settings: Record<string, unknown>;
+  onHover: (field: PaneSettingField, index: number) => void;
+  onEdit: (field: PaneSettingField, index: number) => void;
+  onSelectRef: (fieldKey: string, element: NativeSelectElement | null) => void;
+  onApply: (field: PaneSettingField, value: unknown, index: number) => void;
 }) {
+  return (
+    <Box
+      flexDirection="column"
+      style={{
+        marginTop: 2,
+      }}
+    >
+      {fields.map((field, index) => (
+        <DesktopSettingsRow
+          key={field.key}
+          field={field}
+          selected={index === selectedIndex && hoveredFieldKey === null}
+          hovered={hoveredFieldKey === field.key}
+          currentValue={settings[field.key]}
+          onHover={() => onHover(field, index)}
+          onEdit={() => onEdit(field, index)}
+          onSelectRef={onSelectRef}
+          onApply={(targetField, value) => onApply(targetField, value, index)}
+        />
+      ))}
+    </Box>
+  );
+}
+
+function useSelectFieldDialogController({
+  dismiss,
+  field,
+  currentValue,
+  onApply,
+}: SelectFieldDialogProps) {
   const initialIndex = Math.max(0, field.options.findIndex((option) => option.value === currentValue));
   const [selectedIndex, setSelectedIndex] = useState(initialIndex);
 
+  const applyOption = (value: string) => {
+    void onApply(value).then(() => dismiss()).catch(() => {});
+  };
+
   useDialogKeyboard((event) => {
     event.stopPropagation();
     if (event.name === "up" || event.name === "k") setSelectedIndex((index) => Math.max(0, index - 1));
@@ -75,9 +331,16 @@ function SelectFieldDialog({
     else if (event.name === "enter" || event.name === "return" || isSpaceKey(event)) {
       const option = field.options[selectedIndex];
       if (!option) return;
-      void onApply(option.value).then(() => dismiss()).catch(() => {});
+      applyOption(option.value);
     }
-  }, dialogId);
+  });
+
+  return { selectedIndex, setSelectedIndex, applyOption };
+}
+
+function TuiSelectFieldDialog(props: SelectFieldDialogProps) {
+  const { field } = props;
+  const { selectedIndex, setSelectedIndex, applyOption } = useSelectFieldDialogController(props);
 
   return (
     <DialogFrame
@@ -95,24 +358,18 @@ function SelectFieldDialog({
         showSelectedDescription
         onSelect={setSelectedIndex}
         onActivate={(item) => {
-          void onApply(item.id).then(() => dismiss()).catch(() => {});
+          applyOption(item.id);
         }}
       />
     </DialogFrame>
   );
 }
 
-function TextFieldDialog({
+function useTextFieldDialogController({
   dismiss,
-  dialogId,
-  field,
   currentValue,
   onApply,
-}: AlertContext & {
-  field: PaneSettingTextField;
-  currentValue: unknown;
-  onApply: (value: string) => Promise<void>;
-}) {
+}: TextFieldDialogProps) {
   const [value, setValue] = useState(typeof currentValue === "string" ? currentValue : "");
   const [error, setError] = useState<string | null>(null);
   const inputRef = useRef<any>(null);
@@ -126,7 +383,7 @@ function TextFieldDialog({
       event.stopPropagation();
       dismiss();
     }
-  }, dialogId);
+  });
 
   const submit = async () => {
     try {
@@ -138,12 +395,56 @@ function TextFieldDialog({
     }
   };
 
+  return { value, setValue, error, inputRef, submit };
+}
+
+function TextFieldDialog(props: TextFieldDialogProps) {
+  return useUiHost().kind === "desktop-web"
+    ? <DesktopTextFieldDialog {...props} />
+    : <TuiTextFieldDialog {...props} />;
+}
+
+function DesktopTextFieldDialog(props: TextFieldDialogProps) {
+  const { dismiss, field } = props;
+  const { value, setValue, error, inputRef, submit } = useTextFieldDialogController(props);
+
+  return (
+    <DesktopDialogSurface
+      title={field.label}
+      subtitle={field.description}
+      dismiss={dismiss}
+    >
+      <Box flexDirection="column" gap={1}>
+        <TextField
+          inputRef={inputRef}
+          value={value}
+          placeholder={field.placeholder}
+          focused
+          width={56}
+          onChange={setValue}
+          onSubmit={() => { void submit(); }}
+        />
+        {error && (
+          <Text fg={colors.negative} wrapText style={desktopText(600)}>{error}</Text>
+        )}
+        <Box flexDirection="row" justifyContent="flex-end" style={{ marginTop: 12 }}>
+          <Button label="Save" variant="primary" onPress={() => { void submit(); }} />
+        </Box>
+      </Box>
+    </DesktopDialogSurface>
+  );
+}
+
+function TuiTextFieldDialog(props: TextFieldDialogProps) {
+  const { dismiss, field } = props;
+  const { value, setValue, error, inputRef, submit } = useTextFieldDialogController(props);
+
   return (
     <DialogFrame
       title={field.label}
       footer="Enter to apply · esc cancel"
     >
-      <box flexDirection="column" gap={1}>
+      <Box flexDirection="column" gap={1}>
         <TextField
           inputRef={inputRef}
           value={value}
@@ -153,20 +454,20 @@ function TextFieldDialog({
           onSubmit={() => { void submit(); }}
         />
         {error && (
-          <box height={1}>
-            <text fg={colors.negative}>{error}</text>
-          </box>
+          <Box height={1}>
+            <Text fg={colors.negative}>{error}</Text>
+          </Box>
         )}
         {field.description && (
-          <box height={1}>
-            <text fg={colors.textDim}>{field.description}</text>
-          </box>
+          <Box height={1}>
+            <Text fg={colors.textDim}>{field.description}</Text>
+          </Box>
         )}
-        <box flexDirection="row" gap={1}>
+        <Box flexDirection="row" gap={1}>
           <Button label="Apply" variant="primary" onPress={() => { void submit(); }} />
           <Button label="Cancel" variant="ghost" onPress={dismiss} />
-        </box>
-      </box>
+        </Box>
+      </Box>
     </DialogFrame>
   );
 }
@@ -178,7 +479,7 @@ function MultiSelectFieldDialog({
   currentValue,
   onApply,
 }: AlertContext & {
-  field: Extract<PaneSettingField, { type: "multi-select" | "ordered-multi-select" }>;
+  field: MultiSelectPaneSettingField;
   currentValue: unknown;
   onApply: (value: string[]) => Promise<void>;
 }) {
@@ -195,17 +496,144 @@ function MultiSelectFieldDialog({
   );
 }
 
+function DesktopUnavailablePaneSettingsDialog({ dismiss }: { dismiss: () => void }) {
+  return (
+    <DesktopDialogSurface title="Pane Settings" dismiss={dismiss}>
+      <Text fg={colors.textDim} wrapText style={desktopText()}>
+        This pane is no longer configurable.
+      </Text>
+    </DesktopDialogSurface>
+  );
+}
+
+function TuiUnavailablePaneSettingsDialog() {
+  return (
+    <DialogFrame title="Pane Settings" footer="Press esc to cancel">
+      <Text fg={colors.textDim}>This pane is no longer configurable.</Text>
+    </DialogFrame>
+  );
+}
+
+function DesktopPaneSettingsDialogBody({
+  title,
+  dismiss,
+  fields,
+  selectedIndex,
+  hoveredFieldKey,
+  settings,
+  onHover,
+  onEdit,
+  onSelectRef,
+  onApply,
+}: {
+  title: string;
+  dismiss: () => void;
+  fields: PaneSettingField[];
+  selectedIndex: number;
+  hoveredFieldKey: string | null;
+  settings: Record<string, unknown>;
+  onHover: (field: PaneSettingField, index: number) => void;
+  onEdit: (field: PaneSettingField, index: number) => void;
+  onSelectRef: (fieldKey: string, element: NativeSelectElement | null) => void;
+  onApply: (field: PaneSettingField, value: unknown, index: number) => void;
+}) {
+  return (
+    <DesktopDialogSurface
+      title={title}
+      dismiss={dismiss}
+    >
+      {fields.length === 0 ? (
+        <Text fg={colors.textDim} wrapText style={desktopText()}>
+          No settings available.
+        </Text>
+      ) : (
+        <DesktopSettingsList
+          fields={fields}
+          selectedIndex={selectedIndex}
+          hoveredFieldKey={hoveredFieldKey}
+          settings={settings}
+          onHover={onHover}
+          onEdit={onEdit}
+          onSelectRef={onSelectRef}
+          onApply={onApply}
+        />
+      )}
+    </DesktopDialogSurface>
+  );
+}
+
+function TuiPaneSettingsDialogBody({
+  title,
+  fields,
+  selectedIndex,
+  settings,
+  onSelect,
+  onActivate,
+}: {
+  title: string;
+  fields: PaneSettingField[];
+  selectedIndex: number;
+  settings: Record<string, unknown>;
+  onSelect: (index: number) => void;
+  onActivate: (field: PaneSettingField | undefined) => void;
+}) {
+  return (
+    <DialogFrame title={title} footer="Use ↑↓ to choose · enter to edit · esc cancel">
+      <ListView
+        items={fields.map((field) => ({
+          id: field.key,
+          label: field.label,
+          description: field.description,
+          detail: summarizeValue(field, settings[field.key]),
+        }))}
+        selectedIndex={selectedIndex}
+        bgColor={colors.commandBg}
+        showSelectedDescription
+        onSelect={onSelect}
+        onActivate={(_, index) => {
+          onActivate(fields[index]);
+        }}
+        renderRow={(item, rowState) => (
+          <Box flexDirection="row" justifyContent="space-between" width="100%">
+            <Box flexDirection="row">
+              <Text fg={rowState.selected ? colors.selectedText : colors.textDim}>
+                {rowState.selected ? "\u25b8 " : "  "}
+              </Text>
+              <Text
+                fg={rowState.selected ? colors.text : colors.textDim}
+                attributes={rowState.selected ? TextAttributes.BOLD : 0}
+              >
+                {item.label}
+              </Text>
+            </Box>
+            <Text fg={rowState.selected ? colors.textMuted : colors.textMuted}>
+              {item.detail}
+            </Text>
+          </Box>
+        )}
+      />
+      {fields.length === 0 && (
+        <Box height={1}>
+          <Text fg={colors.textDim}>No settings available.</Text>
+        </Box>
+      )}
+    </DialogFrame>
+  );
+}
+
 export function PaneSettingsDialogContent({
   dismiss,
-  dialogId,
   paneId,
   pluginRegistry,
   applyFieldValue,
 }: PaneSettingsDialogContentProps) {
-  const { state } = useAppState();
   const dialog = useDialog();
+  const isDesktop = useUiHost().kind === "desktop-web";
   const descriptor = pluginRegistry.resolvePaneSettings(paneId);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [hoveredFieldKey, setHoveredFieldKey] = useState<string | null>(null);
+  const [, setSettingsRevision] = useState(0);
+  const desktopSelectRefs = useRef(new Map<string, NativeSelectElement>());
 
   const fields = descriptor?.settingsDef.fields ?? [];
 
@@ -215,23 +643,37 @@ export function PaneSettingsDialogContent({
     }
   }, [fields.length, selectedIndex]);
 
+  const applyAndRefresh = async (field: PaneSettingField, value: unknown) => {
+    await applyFieldValue(paneId, field, value);
+    setSettingsRevision((revision) => revision + 1);
+  };
+
+  const setDesktopSelectRef = (fieldKey: string, element: NativeSelectElement | null) => {
+    if (element) desktopSelectRefs.current.set(fieldKey, element);
+    else desktopSelectRefs.current.delete(fieldKey);
+  };
+
   const openFieldEditor = async (field: PaneSettingField | undefined) => {
     if (!field || !descriptor) return;
     const currentValue = descriptor.context.settings[field.key];
 
     if (field.type === "toggle") {
-      await applyFieldValue(paneId, field, currentValue !== true);
+      await applyAndRefresh(field, currentValue !== true);
       return;
     }
 
     if (field.type === "select") {
+      if (isDesktop) {
+        openNativeSelect(desktopSelectRefs.current.get(field.key));
+        return;
+      }
       await dialog.alert({
-        content: (ctx) => (
-          <SelectFieldDialog
+        content: (ctx: AlertContext) => (
+          <TuiSelectFieldDialog
             {...ctx}
             field={field}
             currentValue={currentValue}
-            onApply={(value) => applyFieldValue(paneId, field, value)}
+            onApply={(value) => applyAndRefresh(field, value)}
           />
         ),
       });
@@ -240,12 +682,12 @@ export function PaneSettingsDialogContent({
 
     if (field.type === "text") {
       await dialog.alert({
-        content: (ctx) => (
+        content: (ctx: AlertContext) => (
           <TextFieldDialog
             {...ctx}
             field={field}
             currentValue={currentValue}
-            onApply={(value) => applyFieldValue(paneId, field, value)}
+            onApply={(value) => applyAndRefresh(field, value)}
           />
         ),
       });
@@ -253,12 +695,12 @@ export function PaneSettingsDialogContent({
     }
 
     await dialog.alert({
-      content: (ctx) => (
+      content: (ctx: AlertContext) => (
         <MultiSelectFieldDialog
           {...ctx}
           field={field}
           currentValue={currentValue}
-          onApply={(value) => applyFieldValue(paneId, field, value)}
+          onApply={(value) => applyAndRefresh(field, value)}
         />
       ),
     });
@@ -272,58 +714,48 @@ export function PaneSettingsDialogContent({
     else if (event.name === "enter" || event.name === "return" || isSpaceKey(event)) {
       void openFieldEditor(fields[selectedIndex]).catch(() => {});
     }
-  }, dialogId);
+  });
 
   if (!descriptor) {
-    return (
-      <DialogFrame title="Pane Settings" footer="Press esc to cancel">
-        <text fg={colors.textDim}>This pane is no longer configurable.</text>
-      </DialogFrame>
-    );
+    return isDesktop
+      ? <DesktopUnavailablePaneSettingsDialog dismiss={dismiss} />
+      : <TuiUnavailablePaneSettingsDialog />;
   }
 
   const title = descriptor.settingsDef.title ?? `${descriptor.paneDef.name} Settings`;
 
-  return (
-    <DialogFrame title={title} footer="Use ↑↓ to choose · enter to edit · esc cancel">
-      <ListView
-        items={fields.map((field) => ({
-          id: field.key,
-          label: field.label,
-          description: field.description,
-          detail: summarizeValue(field, descriptor.context.settings[field.key]),
-        }))}
-        selectedIndex={selectedIndex}
-        bgColor={colors.commandBg}
-        showSelectedDescription
-        onSelect={setSelectedIndex}
-        onActivate={(_, index) => {
-          void openFieldEditor(fields[index]).catch(() => {});
-        }}
-        renderRow={(item, rowState) => (
-          <box flexDirection="row" justifyContent="space-between" width="100%">
-            <box flexDirection="row">
-              <text fg={rowState.selected ? colors.selectedText : colors.textDim}>
-                {rowState.selected ? "\u25b8 " : "  "}
-              </text>
-              <text
-                fg={rowState.selected ? colors.text : colors.textDim}
-                attributes={rowState.selected ? TextAttributes.BOLD : 0}
-              >
-                {item.label}
-              </text>
-            </box>
-            <text fg={rowState.selected ? colors.textMuted : colors.textMuted}>
-              {item.detail}
-            </text>
-          </box>
-        )}
-      />
-      {fields.length === 0 && state.focusedPaneId === paneId && (
-        <box height={1}>
-          <text fg={colors.textDim}>No settings available.</text>
-        </box>
-      )}
-    </DialogFrame>
+  return isDesktop ? (
+    <DesktopPaneSettingsDialogBody
+      title={title}
+      dismiss={dismiss}
+      fields={fields}
+      selectedIndex={selectedIndex}
+      hoveredFieldKey={hoveredFieldKey}
+      settings={descriptor.context.settings}
+      onHover={(field, index) => {
+        setSelectedIndex(index);
+        setHoveredFieldKey(field.key);
+      }}
+      onSelectRef={setDesktopSelectRef}
+      onEdit={(field, index) => {
+        setSelectedIndex(index);
+        void openFieldEditor(field).catch(() => {});
+      }}
+      onApply={(field, value, index) => {
+        setSelectedIndex(index);
+        void applyAndRefresh(field, value).catch(() => {});
+      }}
+    />
+  ) : (
+    <TuiPaneSettingsDialogBody
+      title={title}
+      fields={fields}
+      selectedIndex={selectedIndex}
+      settings={descriptor.context.settings}
+      onSelect={setSelectedIndex}
+      onActivate={(field) => {
+        void openFieldEditor(field).catch(() => {});
+      }}
+    />
   );
 }