@expofp/debug 3.4.4 → 3.4.5

package/dist/lib/ui/boolean-editor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Flex, Switch } from '@radix-ui/themes';
+import { Switch } from '@radix-ui/themes';
 import { SettingsItem } from './settings-item.js';
 export const BooleanEditor = (props) => {
-    return (_jsx(SettingsItem, { label: props.label, children: _jsx(Flex, { children: _jsx(Switch, { checked: props.value, onCheckedChange: (checked) => props.onChange(checked) }) }) }));
+    return (_jsx(SettingsItem, { label: props.label, children: _jsx(Switch, { checked: props.value, onCheckedChange: (checked) => props.onChange(checked) }) }));
 };

package/dist/lib/ui/enum-editor.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select } from '@radix-ui/themes';
 import { SettingsItem } from './settings-item.js';
+// Radix Select reserves "" for "no selection", so map empty values to a sentinel.
+const EMPTY_SENTINEL = '__EMPTY__';
+const encode = (s) => (s === '' ? EMPTY_SENTINEL : s);
+const decode = (s) => (s === EMPTY_SENTINEL ? '' : s);
 export function EnumEditor(props) {
     const stringMode = props.context.values.every((v) => typeof v === 'string');
     const stringify = stringMode ? (v) => v : (v) => JSON.stringify(v);
     const parse = stringMode ? (v) => v : (v) => JSON.parse(v);
-    const value = stringify(props.value);
+    const value = encode(stringify(props.value));
     const values = props.context.values.map((v) => ({
-        value: stringify(v),
+        value: encode(stringify(v)),
         label: stringify(v),
     }));
-    return (_jsx(SettingsItem, { label: props.label, children: _jsxs(Select.Root, { value: value, onValueChange: (value) => {
-                props.onChange(parse(value));
+    return (_jsx(SettingsItem, { label: props.label, children: _jsxs(Select.Root, { value: value, onValueChange: (encoded) => {
+                props.onChange(parse(decode(encoded)));
             }, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: values.map((v) => (_jsx(Select.Item, { value: v.value, children: v.label }, v.value))) })] }) }));
 }

package/dist/lib/ui/settings-item.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Heading, Separator } from '@radix-ui/themes';
+import { Flex, Heading, Separator } from '@radix-ui/themes';
 export const SettingsItem = ({ label, children }) => {
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Heading, { size: "4", children: label }), _jsx(Box, { mt: "10px", children: children })] }), _jsx(Separator, { size: "4", my: "20px" })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", justify: "between", gap: "4", wrap: "wrap", children: [_jsx(Heading, { size: "4", children: label }), _jsx(Flex, { align: "center", justify: "end", gap: "2", flexGrow: "1", children: children })] }), _jsx(Separator, { size: "4", my: "20px" })] }));
 };

package/dist/lib/ui/settings-tab.js

@@ -4,7 +4,7 @@ import { AlertDialog, Box, Button, Callout, Flex } from '@radix-ui/themes';
 import { resetAllSettings } from '../settings/reset-all-settings.js';
 import { SettingsList } from './settings-list.js';
 export const SettingsTab = () => {
-    return (_jsxs(Box, { pt: "20px", children: [_jsx(Box, { mb: "20px", children: _jsxs(Callout.Root, { children: [_jsx(Callout.Icon, { children: _jsx(InfoCircledIcon, {}) }), _jsx(Callout.Text, { children: "These settings will persist across page reloads in your browser." })] }) }), _jsx(SettingsList, {}), _jsxs(Flex, { gap: "3", mt: "40px", justify: "center", children: [_jsx(Button, { onClick: () => {
+    return (_jsxs(Box, { pt: "20px", children: [_jsx(Box, { mb: "20px", children: _jsxs(Callout.Root, { children: [_jsx(Callout.Icon, { children: _jsx(InfoCircledIcon, {}) }), _jsx(Callout.Text, { children: "These settings will persist across page reloads in your browser." })] }) }), _jsx(SettingsList, {}), _jsxs(Flex, { gap: "3", mt: "40px", justify: "center", wrap: "wrap", children: [_jsx(Button, { onClick: () => {
                             window.location.reload();
                         }, children: "Reload with the applied changes" }), _jsxs(AlertDialog.Root, { children: [_jsx(AlertDialog.Trigger, { children: _jsx(Button, { color: "red", children: "Reset all and reload" }) }), _jsxs(AlertDialog.Content, { maxWidth: "450px", children: [_jsx(AlertDialog.Title, { children: "Reset all and reload" }), _jsx(AlertDialog.Description, { size: "2", children: "This will reset all settings, disable debug mode, and reload the page." }), _jsxs(Flex, { gap: "3", mt: "4", justify: "end", children: [_jsx(AlertDialog.Cancel, { children: _jsx(Button, { variant: "soft", color: "gray", children: "Cancel" }) }), _jsx(AlertDialog.Action, { children: _jsx(Button, { variant: "solid", color: "red", onClick: () => {
                                                         resetAllSettings();

package/dist/lib/ui/string-editor.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TextField } from '@radix-ui/themes';
 import { SettingsItem } from './settings-item.js';
 export const StringEditor = (props) => {
-    return (_jsx(SettingsItem, { label: props.label, children: _jsx(TextField.Root, { placeholder: props.context?.placeholder, value: props.value, onChange: (e) => props.onChange(e.target.value), style: { minWidth: 220 } }) }));
+    return (_jsx(SettingsItem, { label: props.label, children: _jsx(TextField.Root, { placeholder: props.context?.placeholder, value: props.value, onChange: (e) => props.onChange(e.target.value), style: { flexGrow: 1, minWidth: 220 } }) }));
 };
 StringEditor.displayName = 'StringEditor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/debug",
-  "version": "3.4.4",
+  "version": "3.4.5",
   "type": "module",
   "description": "ExpoFP SDK internal: debug utilities",
   "homepage": "https://developer.expofp.com/",