@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/custom/combobox.tsx

@@ -14,7 +14,6 @@ import {
   CommandSeparator,
 } from '../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
-import { Separator } from '../separator';
 
 export type ComboboxOption = {
   value: string;
@@ -36,6 +35,8 @@ export type ComboboxAction = {
   disabled?: boolean;
 };
 
+export type ComboboxCreateResult = string | ComboboxOption | undefined;
+
 /** @deprecated Use ComboboxOption instead */
 export type ComboboxOptions = ComboboxOption;
 
@@ -62,6 +63,8 @@ interface ComboboxProps {
   emptyText?: string;
   /** Text to display when creating a new item (used with onCreate) */
   createText?: string;
+  /** Text to display while a new item is being created */
+  creatingText?: string;
   /** Override label shown on the trigger button */
   label?: React.ReactNode;
   /** Additional class name for the container */
@@ -71,7 +74,7 @@ interface ComboboxProps {
   /** Whether to select the first option by default */
   useFirstValueAsDefault?: boolean;
   /** Callback to create a new option from the search query */
-  onCreate?: (value: string) => void;
+  onCreate?: (value: string) => unknown | Promise<unknown>;
   /** Callback when search input changes */
   onSearchChange?: (value: string) => void;
   /** Whether there are more options to load */
@@ -102,6 +105,7 @@ export function Combobox({
   searchPlaceholder,
   emptyText,
   createText,
+  creatingText,
   label,
   className,
   disabled,
@@ -117,14 +121,31 @@ export function Combobox({
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState<string>('');
+  const [creating, setCreating] = React.useState(false);
+  const createInFlightRef = React.useRef(false);
   const actionValuePrefix = '__combobox_action__';
+  const createValuePrefix = '__combobox_create__';
 
   // Resolve text with fallbacks: explicit prop > t function > default
   const resolvedEmptyText =
     emptyText ?? t?.('common.empty') ?? 'No results found.';
   const resolvedCreateText = createText ?? t?.('common.add') ?? 'Create';
+  const resolvedCreatingText =
+    creatingText ?? t?.('common.creating') ?? 'Creating...';
   const resolvedSearchPlaceholder =
     searchPlaceholder ?? placeholder ?? 'Search...';
+  const normalizedQuery = normalizeComboboxText(query);
+  const trimmedQuery = query.trim();
+  const hasExactQueryMatch = React.useMemo(() => {
+    if (!normalizedQuery) return false;
+
+    return options.some((option) =>
+      [option.label, option.value, option.searchValue]
+        .filter((value): value is string => typeof value === 'string')
+        .some((value) => normalizeComboboxText(value) === normalizedQuery)
+    );
+  }, [normalizedQuery, options]);
+  const canCreate = Boolean(onCreate && normalizedQuery && !hasExactQueryMatch);
 
   React.useEffect(() => {
     if (!open) {
@@ -206,8 +227,55 @@ export function Combobox({
     );
   };
 
+  const commitCreatedValue = React.useCallback(
+    (result: unknown) => {
+      if (!onChange) return;
+
+      const createdValue =
+        typeof result === 'string'
+          ? result
+          : result &&
+              typeof result === 'object' &&
+              'value' in result &&
+              typeof result.value === 'string'
+            ? result.value
+            : undefined;
+
+      if (!createdValue) return;
+
+      if (mode === 'multiple' && Array.isArray(selected)) {
+        if (!selected.includes(createdValue)) {
+          onChange([...selected, createdValue]);
+        }
+        return;
+      }
+
+      onChange(createdValue);
+    },
+    [mode, onChange, selected]
+  );
+
+  const handleCreate = React.useCallback(async () => {
+    if (!onCreate || !trimmedQuery || createInFlightRef.current) return;
+
+    createInFlightRef.current = true;
+    setCreating(true);
+
+    try {
+      const result = await onCreate(trimmedQuery);
+      commitCreatedValue(result);
+      setOpen(false);
+      setQuery('');
+    } catch {
+      // Keep the popover open so callers can surface their own error UI.
+    } finally {
+      createInFlightRef.current = false;
+      setCreating(false);
+    }
+  }, [commitCreatedValue, onCreate, trimmedQuery]);
+
   return (
-    <div className={cn('block', className)}>
+    <div className={cn('block min-w-0', className)}>
       <Popover open={open} onOpenChange={setOpen} modal={true}>
         <PopoverTrigger asChild>
           <Button
@@ -216,7 +284,7 @@ export function Combobox({
             role="combobox"
             aria-expanded={open}
             className={cn(
-              'w-full justify-between',
+              'w-full min-w-0 justify-between overflow-hidden',
               !selectedLabel && 'text-muted-foreground'
             )}
             disabled={disabled}
@@ -254,7 +322,7 @@ export function Combobox({
                     : selectedOption.icon}
                 </span>
               )}
-              <span className="min-w-0 flex-1">
+              <span className="min-w-0 flex-1 truncate text-left">
                 {label ? (
                   label
                 ) : (
@@ -281,13 +349,14 @@ export function Combobox({
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          className="z-9999 w-(--radix-popover-trigger-width) p-0"
+          className="z-9999 w-(--radix-popover-trigger-width) max-w-[calc(100vw-2rem)] p-0"
           align="start"
           sideOffset={4}
         >
           <Command
             filter={(value, search) => {
               if (value.startsWith(actionValuePrefix)) return 1;
+              if (value.startsWith(createValuePrefix)) return 1;
               if (value.toLowerCase().includes(search.toLowerCase())) return 1;
               return 0;
             }}
@@ -300,38 +369,11 @@ export function Combobox({
                 onSearchChange?.(value);
               }}
             />
-            <CommandEmpty className="flex flex-col items-center justify-center p-1">
-              <div className="p-8 text-muted-foreground text-sm">
-                {resolvedEmptyText}
-              </div>
-              {onCreate && (
-                <>
-                  <Separator />
-                  <Button
-                    variant="ghost"
-                    className="mt-1 w-full"
-                    onClick={() => {
-                      if (onCreate) {
-                        onCreate(query);
-                        setOpen(false);
-                        setQuery('');
-                      }
-                    }}
-                    disabled={!query || !onCreate}
-                  >
-                    <Plus className="mr-2 h-4 w-4 shrink-0" />
-                    <div className="w-full truncate">
-                      <span className="font-normal">{resolvedCreateText}</span>{' '}
-                      <span className="underline decoration-dashed underline-offset-2">
-                        {query}
-                      </span>
-                    </div>
-                  </Button>
-                </>
-              )}
+            <CommandEmpty className="p-8 text-center text-muted-foreground text-sm">
+              {resolvedEmptyText}
             </CommandEmpty>
             <CommandList
-              className="max-h-50 overflow-y-auto overscroll-contain"
+              className="max-h-[min(20rem,calc(100dvh-8rem))] overflow-y-auto overscroll-contain"
               onScroll={handleListScroll}
               style={
                 {
@@ -346,6 +388,29 @@ export function Combobox({
                   <CommandSeparator />
                 </>
               ) : null}
+              {canCreate ? (
+                <>
+                  <CommandGroup>
+                    <CommandItem
+                      value={`${createValuePrefix}:${trimmedQuery}`}
+                      disabled={creating}
+                      onSelect={handleCreate}
+                      className="font-medium text-primary [&_svg]:text-primary"
+                    >
+                      <Plus className="h-4 w-4 shrink-0" />
+                      <span className="min-w-0 flex-1 truncate">
+                        <span className="font-normal">
+                          {creating ? resolvedCreatingText : resolvedCreateText}
+                        </span>{' '}
+                        <span className="underline decoration-dashed underline-offset-2">
+                          {trimmedQuery}
+                        </span>
+                      </span>
+                    </CommandItem>
+                  </CommandGroup>
+                  <CommandSeparator />
+                </>
+              ) : null}
               <CommandGroup>
                 {options.map((option) => (
                   <CommandItem
@@ -463,3 +528,7 @@ export function Combobox({
     </div>
   );
 }
+
+function normalizeComboboxText(value: string) {
+  return value.trim().toLocaleLowerCase();
+}

package/src/components/ui/custom/settings/task-settings.tsx

@@ -20,7 +20,18 @@ import { toast } from '@tuturuuu/ui/sonner';
 import { Switch } from '@tuturuuu/ui/switch';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
+import {
+  normalizeTaskDialogPresentation,
+  TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID,
+  type TaskDialogPresentation,
+} from '../../tu-do/shared/task-dialog-presentation';
 import { TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID } from '../../tu-do/shared/task-due-date-visibility';
+import {
+  clampTaskSoundEffectsVolume,
+  DEFAULT_TASK_SOUND_EFFECTS_VOLUME,
+  TASK_SOUND_EFFECTS_ENABLED_CONFIG_ID,
+  TASK_SOUND_EFFECTS_VOLUME_CONFIG_ID,
+} from '../../tu-do/shared/task-sound-effects';
 
 interface TaskSettingsData {
   task_auto_assign_to_self: boolean;
@@ -74,10 +85,25 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     isLoading: showReviewDueDatesLoading,
     isPending: showReviewDueDatesPending,
   } = useUserBooleanConfig(TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID, false);
+  const {
+    value: soundEffectsEnabled,
+    setValue: setSoundEffectsEnabled,
+    isLoading: soundEffectsEnabledLoading,
+    isPending: soundEffectsEnabledPending,
+  } = useUserBooleanConfig(TASK_SOUND_EFFECTS_ENABLED_CONFIG_ID, true);
+  const { data: soundEffectsVolume, isLoading: soundEffectsVolumeLoading } =
+    useUserConfig(
+      TASK_SOUND_EFFECTS_VOLUME_CONFIG_ID,
+      String(DEFAULT_TASK_SOUND_EFFECTS_VOLUME)
+    );
+  const updateSoundEffectsVolume = useUpdateUserConfig();
 
   const { data: submitShortcut, isLoading: submitShortcutLoading } =
     useUserConfig('TASK_SUBMIT_SHORTCUT', 'enter');
   const updateSubmitShortcut = useUpdateUserConfig();
+  const { data: dialogPresentationRaw, isLoading: dialogPresentationLoading } =
+    useUserConfig(TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID, 'compact');
+  const updateDialogPresentation = useUpdateUserConfig();
 
   const { data: settings, isLoading } = useQuery({
     queryKey: ['user-task-settings'],
@@ -128,9 +154,33 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     updateSettings.mutate({ fade_completed_tasks: checked });
   };
 
+  const handleSoundEffectsVolumeChange = (value: string) => {
+    updateSoundEffectsVolume.mutate({
+      configId: TASK_SOUND_EFFECTS_VOLUME_CONFIG_ID,
+      value: String(clampTaskSoundEffectsVolume(value)),
+    });
+  };
+
   const effectiveAutoAssignValue = isPersonalWorkspace
     ? true
     : (settings?.task_auto_assign_to_self ?? false);
+  const normalizedSoundEffectsVolume = String(
+    clampTaskSoundEffectsVolume(soundEffectsVolume)
+  );
+  const dialogPresentation = normalizeTaskDialogPresentation(
+    dialogPresentationRaw
+  );
+
+  const handleDialogPresentationChange = (value: string) => {
+    const nextValue: TaskDialogPresentation = normalizeTaskDialogPresentation(
+      value,
+      'compact'
+    );
+    updateDialogPresentation.mutate({
+      configId: TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID,
+      value: nextValue,
+    });
+  };
 
   return (
     <div className="space-y-8">
@@ -163,6 +213,82 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           />
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('sound_effects')}
+          description={t('sound_effects_description')}
+        >
+          <Switch
+            aria-label={t('sound_effects')}
+            checked={soundEffectsEnabled}
+            onCheckedChange={setSoundEffectsEnabled}
+            disabled={soundEffectsEnabledLoading || soundEffectsEnabledPending}
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('sound_effects_volume')}
+          description={t('sound_effects_volume_description')}
+        >
+          <Select
+            value={normalizedSoundEffectsVolume}
+            onValueChange={handleSoundEffectsVolumeChange}
+            disabled={
+              soundEffectsVolumeLoading ||
+              updateSoundEffectsVolume.isPending ||
+              !soundEffectsEnabled
+            }
+          >
+            <SelectTrigger
+              aria-label={t('sound_effects_volume')}
+              className="w-36"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="15">
+                {t('sound_effects_volume_soft')}
+              </SelectItem>
+              <SelectItem value="35">
+                {t('sound_effects_volume_balanced')}
+              </SelectItem>
+              <SelectItem value="60">
+                {t('sound_effects_volume_lively')}
+              </SelectItem>
+              <SelectItem value="85">
+                {t('sound_effects_volume_bold')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('dialog_presentation')}
+          description={t('dialog_presentation_description')}
+        >
+          <Select
+            value={dialogPresentation}
+            onValueChange={handleDialogPresentationChange}
+            disabled={
+              dialogPresentationLoading || updateDialogPresentation.isPending
+            }
+          >
+            <SelectTrigger
+              aria-label={t('dialog_presentation')}
+              className="w-36"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="compact">
+                {t('dialog_presentation_compact')}
+              </SelectItem>
+              <SelectItem value="fullscreen">
+                {t('dialog_presentation_immersive')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('draft_mode')}
           description={t('draft_mode_description')}

package/src/components/ui/custom/settings/task-sound-settings.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { QuickSettingsPopover } from '../../tu-do/shared/task-edit-dialog/components/quick-settings-popover';
+import { TaskSettings } from './task-settings';
+
+const {
+  mockSetSoundEffectsEnabled,
+  mockUpdateUserConfigMutate,
+  mockConfigState,
+} = vi.hoisted(() => ({
+  mockSetSoundEffectsEnabled: vi.fn(),
+  mockUpdateUserConfigMutate: vi.fn(),
+  mockConfigState: {
+    dialogPresentation: 'compact',
+    soundEffectsEnabled: true,
+    soundEffectsVolume: '35',
+  },
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('@tuturuuu/ui/hooks/use-user-config', () => ({
+  useUserBooleanConfig: (configId: string, defaultValue = false) => {
+    if (configId === 'TASK_SOUND_EFFECTS_ENABLED') {
+      return {
+        isLoading: false,
+        isPending: false,
+        setValue: mockSetSoundEffectsEnabled,
+        toggle: vi.fn(),
+        value: mockConfigState.soundEffectsEnabled,
+      };
+    }
+
+    return {
+      isLoading: false,
+      isPending: false,
+      setValue: vi.fn(),
+      toggle: vi.fn(),
+      value: defaultValue,
+    };
+  },
+  useUserConfig: (configId: string, defaultValue = '') => ({
+    data:
+      configId === 'TASK_SOUND_EFFECTS_VOLUME'
+        ? mockConfigState.soundEffectsVolume
+        : configId === 'TASK_DIALOG_DEFAULT_PRESENTATION'
+          ? mockConfigState.dialogPresentation
+          : defaultValue,
+    isLoading: false,
+  }),
+  useUpdateUserConfig: () => ({
+    isPending: false,
+    mutate: mockUpdateUserConfigMutate,
+  }),
+}));
+
+function renderWithQueryClient(children: ReactNode) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      mutations: { retry: false },
+      queries: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+describe('task sound settings controls', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfigState.dialogPresentation = 'compact';
+    mockConfigState.soundEffectsEnabled = true;
+    mockConfigState.soundEffectsVolume = '35';
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(() =>
+        Promise.resolve({
+          json: () =>
+            Promise.resolve({
+              fade_completed_tasks: false,
+              task_auto_assign_to_self: false,
+            }),
+          ok: true,
+        })
+      )
+    );
+  });
+
+  it('renders task settings sound controls and persists the switch value', async () => {
+    renderWithQueryClient(<TaskSettings />);
+
+    expect(await screen.findByText('sound_effects')).toBeInTheDocument();
+    expect(screen.getByText('sound_effects_volume')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('switch', { name: 'sound_effects' }));
+
+    expect(mockSetSoundEffectsEnabled).toHaveBeenCalledWith(false);
+  });
+
+  it('renders task dialog presentation setting and persists immersive mode', async () => {
+    renderWithQueryClient(<TaskSettings />);
+
+    expect(await screen.findByText('dialog_presentation')).toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole('combobox', { name: 'dialog_presentation' })
+    );
+    fireEvent.click(screen.getByText('dialog_presentation_immersive'));
+
+    expect(mockUpdateUserConfigMutate).toHaveBeenCalledWith({
+      configId: 'TASK_DIALOG_DEFAULT_PRESENTATION',
+      value: 'fullscreen',
+    });
+  });
+
+  it('renders the quick settings sound switch and persists changes', async () => {
+    renderWithQueryClient(<QuickSettingsPopover />);
+
+    const trigger = screen.getByRole('button', { name: 'Quick Settings' });
+
+    await waitFor(() => {
+      expect(trigger).not.toBeDisabled();
+    });
+
+    fireEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByText('sound_effects')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole('switch', { name: 'sound_effects' }));
+
+    expect(mockSetSoundEffectsEnabled).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/ui/custom/sidebar-context.tsx

@@ -15,6 +15,8 @@ import {
 } from 'react';
 
 export const SIDEBAR_BEHAVIOR_COOKIE_NAME = 'sidebar-behavior';
+export const SIDEBAR_BEHAVIOR_UPDATED_AT_COOKIE_NAME =
+  'sidebar-behavior-updated-at';
 export const SIDEBAR_BEHAVIOR_CONFIG_KEY = 'SIDEBAR_BEHAVIOR';
 
 export type SidebarBehavior = 'expanded' | 'collapsed' | 'hover';
@@ -33,7 +35,33 @@ export const SidebarContext = createContext<SidebarContextProps | undefined>(
 );
 
 // Persistent cookie options — ensures setting survives browser restarts
-const COOKIE_OPTIONS = { maxAge: 365 * 24 * 60 * 60, path: '/' } as const;
+export const SIDEBAR_COOKIE_OPTIONS = {
+  maxAge: 365 * 24 * 60 * 60,
+  path: '/',
+} as const;
+
+function parseSidebarBehaviorUpdatedAt(value: string | undefined | null) {
+  if (!value) return null;
+
+  const updatedAt = Number(value);
+  return Number.isSafeInteger(updatedAt) && updatedAt > 0 ? updatedAt : null;
+}
+
+function getSidebarBehaviorUpdatedAtFromDocument() {
+  if (typeof document === 'undefined') return null;
+
+  const cookie = document.cookie
+    .split('; ')
+    .find((part) =>
+      part.startsWith(`${SIDEBAR_BEHAVIOR_UPDATED_AT_COOKIE_NAME}=`)
+    );
+
+  if (!cookie) return null;
+
+  return parseSidebarBehaviorUpdatedAt(
+    decodeURIComponent(cookie.split('=').slice(1).join('='))
+  );
+}
 
 type SidebarRemoteBehaviorBridgeComponent = ComponentType<{
   behavior: SidebarBehavior;
@@ -41,6 +69,7 @@ type SidebarRemoteBehaviorBridgeComponent = ComponentType<{
   localOverrideVersion: number;
   onApplyRemoteBehavior: (newBehavior: SidebarBehavior) => void;
   onRemoteBehaviorAvailable: (remoteBehavior: SidebarBehavior) => void;
+  behaviorUpdatedAt: number | null;
   userChangeVersion: number;
 }>;
 
@@ -70,11 +99,16 @@ function useSidebarRemoteBehaviorBridge() {
 export const SidebarProvider = ({
   children,
   initialBehavior,
+  initialBehaviorUpdatedAt,
 }: {
   children: ReactNode;
   initialBehavior: SidebarBehavior;
+  initialBehaviorUpdatedAt?: number | null;
 }) => {
   const [behavior, setBehavior] = useState<SidebarBehavior>(initialBehavior);
+  const [behaviorUpdatedAt, setBehaviorUpdatedAt] = useState<number | null>(
+    () => initialBehaviorUpdatedAt ?? getSidebarBehaviorUpdatedAtFromDocument()
+  );
   const [localOverride, setLocalOverrideRaw] = useLocalStorage(
     'sidebar-local-override',
     false
@@ -86,14 +120,41 @@ export const SidebarProvider = ({
   const [localOverrideVersion, setLocalOverrideVersion] = useState(0);
   const RemoteBehaviorBridge = useSidebarRemoteBehaviorBridge();
 
-  const applyBehavior = useCallback((newBehavior: SidebarBehavior) => {
-    setBehavior(newBehavior);
-    setCookie(SIDEBAR_BEHAVIOR_COOKIE_NAME, newBehavior, COOKIE_OPTIONS);
-  }, []);
+  useEffect(() => {
+    if (initialBehaviorUpdatedAt !== undefined) return;
+
+    const updatedAt = getSidebarBehaviorUpdatedAtFromDocument();
+    if (updatedAt !== null) setBehaviorUpdatedAt(updatedAt);
+  }, [initialBehaviorUpdatedAt]);
+
+  const applyBehavior = useCallback(
+    (
+      newBehavior: SidebarBehavior,
+      options: { markLocalChange?: boolean } = {}
+    ) => {
+      setBehavior(newBehavior);
+      setCookie(
+        SIDEBAR_BEHAVIOR_COOKIE_NAME,
+        newBehavior,
+        SIDEBAR_COOKIE_OPTIONS
+      );
+
+      if (!options.markLocalChange) return;
+
+      const updatedAt = Date.now();
+      setBehaviorUpdatedAt(updatedAt);
+      setCookie(
+        SIDEBAR_BEHAVIOR_UPDATED_AT_COOKIE_NAME,
+        String(updatedAt),
+        SIDEBAR_COOKIE_OPTIONS
+      );
+    },
+    []
+  );
 
   const handleBehaviorChange = useCallback(
     (newBehavior: SidebarBehavior) => {
-      applyBehavior(newBehavior);
+      applyBehavior(newBehavior, { markLocalChange: true });
 
       if (!localOverride) {
         setUserChangeVersion((version) => version + 1);
@@ -127,6 +188,7 @@ export const SidebarProvider = ({
       {RemoteBehaviorBridge && (
         <RemoteBehaviorBridge
           behavior={behavior}
+          behaviorUpdatedAt={behaviorUpdatedAt}
           localOverride={localOverride}
           localOverrideVersion={localOverrideVersion}
           onApplyRemoteBehavior={applyBehavior}