@lodev09/react-native-true-sheet 4.0.0-beta.0 → 4.0.0-beta.1

package/src/navigation/screen/TrueSheetScreen.tsx

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+import { TrueSheet } from '../../TrueSheet';
+import type { PositionChangeEvent } from '../../TrueSheet.types';
+import type { TrueSheetScreenProps } from './types';
+import { useSheetScreenState } from './useSheetScreenState';
+
+export const TrueSheetScreen = ({
+  detentIndex,
+  resizeKey,
+  navigation,
+  emit,
+  routeKey,
+  closing,
+  detents,
+  children,
+  positionChangeHandler,
+  ...sheetProps
+}: TrueSheetScreenProps) => {
+  const {
+    ref,
+    initialDetentIndex,
+    eventHandlers: { onPositionChange, ...eventHandlers },
+  } = useSheetScreenState({
+    detentIndex,
+    resizeKey,
+    closing,
+    navigation,
+    routeKey,
+    emit,
+  });
+
+  const handlePositionChange = useCallback(
+    (e: PositionChangeEvent) => {
+      onPositionChange(e);
+      positionChangeHandler?.(e.nativeEvent);
+    },
+    [onPositionChange, positionChangeHandler]
+  );
+
+  return (
+    <TrueSheet
+      ref={ref}
+      name={`navigation-sheet-${routeKey}`}
+      initialDetentIndex={initialDetentIndex}
+      detents={detents}
+      onPositionChange={handlePositionChange}
+      {...sheetProps}
+      {...eventHandlers}
+    >
+      {children}
+    </TrueSheet>
+  );
+};

package/src/navigation/screen/index.ts

@@ -0,0 +1,3 @@
+export { TrueSheetScreen } from './TrueSheetScreen';
+export { useSheetScreenState } from './useSheetScreenState';
+export type { TrueSheetScreenProps } from './types';

package/src/navigation/screen/types.ts

@@ -0,0 +1,21 @@
+import type { ParamListBase } from '@react-navigation/core';
+
+import type { TrueSheetProps } from '../../TrueSheet.types';
+import type {
+  PositionChangeHandler,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationProp,
+  TrueSheetNavigationSheetProps,
+} from '../types';
+
+export interface TrueSheetScreenProps extends TrueSheetNavigationSheetProps {
+  detentIndex: number;
+  resizeKey?: number;
+  navigation: TrueSheetNavigationProp<ParamListBase>;
+  emit: TrueSheetNavigationHelpers['emit'];
+  routeKey: string;
+  closing?: boolean;
+  detents: TrueSheetProps['detents'];
+  children: React.ReactNode;
+  positionChangeHandler?: PositionChangeHandler;
+}

package/src/navigation/screen/useSheetScreenState.ts

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { TrueSheet } from '../../TrueSheet';
+import type {
+  DetentChangeEvent,
+  DetentInfoEventPayload,
+  DidBlurEvent,
+  DidFocusEvent,
+  DidPresentEvent,
+  DragBeginEvent,
+  DragChangeEvent,
+  DragEndEvent,
+  PositionChangeEvent,
+  PositionChangeEventPayload,
+  WillBlurEvent,
+  WillDismissEvent,
+  WillFocusEvent,
+  WillPresentEvent,
+} from '../../TrueSheet.types';
+import type {
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationHelpers,
+  TrueSheetNavigationProp,
+} from '../types';
+import { TrueSheetActions } from '../TrueSheetRouter';
+import type { ParamListBase } from '@react-navigation/core';
+
+type EmitFn = TrueSheetNavigationHelpers['emit'];
+
+interface UseSheetScreenStateProps {
+  detentIndex: number;
+  resizeKey?: number;
+  closing?: boolean;
+  navigation: TrueSheetNavigationProp<ParamListBase>;
+  routeKey: string;
+  emit: EmitFn;
+}
+
+export const useSheetScreenState = (props: UseSheetScreenStateProps) => {
+  const { detentIndex, resizeKey, closing, navigation, routeKey, emit } = props;
+
+  const ref = useRef<TrueSheet>(null);
+  const isDismissedRef = useRef(false);
+  const isFirstRenderRef = useRef(true);
+  const initialDetentIndexRef = useRef(detentIndex);
+
+  useEffect(() => {
+    if (closing && !isDismissedRef.current) {
+      isDismissedRef.current = true;
+      ref.current?.dismiss();
+    }
+  }, [closing]);
+
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    ref.current?.resize(detentIndex);
+  }, [detentIndex, resizeKey]);
+
+  const emitEvent = useCallback(
+    (
+      type: keyof TrueSheetNavigationEventMap,
+      data: DetentInfoEventPayload | PositionChangeEventPayload | undefined
+    ) => {
+      emit({
+        type,
+        target: routeKey,
+        data,
+      } as Parameters<EmitFn>[0]);
+    },
+    [emit, routeKey]
+  );
+
+  const onDidDismiss = useCallback(() => {
+    emitEvent('sheetDidDismiss', undefined);
+    isDismissedRef.current = true;
+    navigation.dispatch({ ...TrueSheetActions.remove(), source: routeKey });
+  }, [emitEvent, navigation, routeKey]);
+
+  const eventHandlers = useMemo(
+    () => ({
+      onWillPresent: (e: WillPresentEvent) => emitEvent('sheetWillPresent', e.nativeEvent),
+      onDidPresent: (e: DidPresentEvent) => emitEvent('sheetDidPresent', e.nativeEvent),
+      onWillDismiss: (_e: WillDismissEvent) => emitEvent('sheetWillDismiss', undefined),
+      onDidDismiss,
+      onDetentChange: (e: DetentChangeEvent) => emitEvent('sheetDetentChange', e.nativeEvent),
+      onDragBegin: (e: DragBeginEvent) => emitEvent('sheetDragBegin', e.nativeEvent),
+      onDragChange: (e: DragChangeEvent) => emitEvent('sheetDragChange', e.nativeEvent),
+      onDragEnd: (e: DragEndEvent) => emitEvent('sheetDragEnd', e.nativeEvent),
+      onPositionChange: (e: PositionChangeEvent) => emitEvent('sheetPositionChange', e.nativeEvent),
+      onWillFocus: (_e: WillFocusEvent) => emitEvent('sheetWillFocus', undefined),
+      onDidFocus: (_e: DidFocusEvent) => emitEvent('sheetDidFocus', undefined),
+      onWillBlur: (_e: WillBlurEvent) => emitEvent('sheetWillBlur', undefined),
+      onDidBlur: (_e: DidBlurEvent) => emitEvent('sheetDidBlur', undefined),
+    }),
+    [emitEvent, onDidDismiss]
+  );
+
+  return {
+    ref,
+    initialDetentIndex: initialDetentIndexRef.current,
+    emitEvent,
+    eventHandlers,
+  };
+};

package/src/navigation/types.ts

@@ -0,0 +1,219 @@
+import type {
+  DefaultNavigatorOptions,
+  Descriptor,
+  NavigationHelpers,
+  NavigationProp,
+  NavigationState,
+  ParamListBase,
+  RouteProp,
+  StackActionHelpers,
+} from '@react-navigation/core';
+
+import type {
+  DetentInfoEventPayload,
+  PositionChangeEventPayload,
+  TrueSheetProps,
+} from '../TrueSheet.types';
+
+export type PositionChangeHandler = (payload: PositionChangeEventPayload) => void;
+
+export type TrueSheetNavigationEventMap = {
+  /**
+   * Event fired when the sheet is about to be presented.
+   */
+  sheetWillPresent: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the sheet has been presented.
+   */
+  sheetDidPresent: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the sheet is about to be dismissed.
+   */
+  sheetWillDismiss: { data: undefined };
+  /**
+   * Event fired when the sheet has been dismissed.
+   */
+  sheetDidDismiss: { data: undefined };
+  /**
+   * Event fired when the sheet's detent changes.
+   */
+  sheetDetentChange: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the user starts dragging the sheet.
+   */
+  sheetDragBegin: { data: DetentInfoEventPayload };
+  /**
+   * Event fired while the user is dragging the sheet.
+   */
+  sheetDragChange: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the user stops dragging the sheet.
+   */
+  sheetDragEnd: { data: DetentInfoEventPayload };
+  /**
+   * Event fired when the sheet's position changes.
+   */
+  sheetPositionChange: { data: PositionChangeEventPayload };
+  /**
+   * Event fired when the sheet is about to regain focus.
+   */
+  sheetWillFocus: { data: undefined };
+  /**
+   * Event fired when the sheet regains focus.
+   */
+  sheetDidFocus: { data: undefined };
+  /**
+   * Event fired when the sheet is about to lose focus.
+   */
+  sheetWillBlur: { data: undefined };
+  /**
+   * Event fired when the sheet loses focus.
+   */
+  sheetDidBlur: { data: undefined };
+};
+
+export type TrueSheetNavigationState<ParamList extends ParamListBase> = Omit<
+  NavigationState<ParamList>,
+  'routes'
+> & {
+  type: 'true-sheet';
+  routes: (NavigationState<ParamList>['routes'][number] & {
+    resizeIndex?: number;
+    resizeKey?: number;
+    closing?: boolean;
+  })[];
+};
+
+export type TrueSheetActionHelpers<ParamList extends ParamListBase> =
+  StackActionHelpers<ParamList> & {
+    /**
+     * Resize the sheet to a specific detent index.
+     */
+    resize(index?: number): void;
+  };
+
+export type TrueSheetNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string,
+  NavigatorID extends string | undefined = undefined,
+> = NavigationProp<
+  ParamList,
+  RouteName,
+  NavigatorID,
+  TrueSheetNavigationState<ParamList>,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationEventMap
+> &
+  TrueSheetActionHelpers<ParamList>;
+
+export type TrueSheetScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string,
+  NavigatorID extends string | undefined = undefined,
+> = {
+  navigation: TrueSheetNavigationProp<ParamList, RouteName, NavigatorID>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
+export type TrueSheetNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  TrueSheetNavigationEventMap
+>;
+
+export type TrueSheetNavigationSheetProps = Pick<
+  TrueSheetProps,
+  | 'detents'
+  | 'backgroundColor'
+  | 'cornerRadius'
+  | 'dismissible'
+  | 'draggable'
+  | 'grabber'
+  | 'grabberOptions'
+  | 'accessibilityOptions'
+  | 'dimmed'
+  | 'dimmedDetentIndex'
+  | 'backgroundBlur'
+  | 'blurOptions'
+  | 'maxContentHeight'
+  | 'maxContentWidth'
+  | 'presentation'
+  | 'style'
+  | 'header'
+  | 'headerStyle'
+  | 'headerOptions'
+  | 'footer'
+  | 'footerStyle'
+  | 'footerOptions'
+  | 'scrollableOptions'
+  | 'insetAdjustment'
+  | 'anchor'
+  | 'anchorOffset'
+  | 'elevation'
+  | 'detached'
+  | 'detachedOffset'
+>;
+
+/**
+ * Screen options for TrueSheet navigator screens.
+ */
+export type TrueSheetNavigationOptions = TrueSheetNavigationSheetProps & {
+  /**
+   * The detent index to present at.
+   * @default 0
+   */
+  detentIndex?: number;
+
+  /**
+   * Use ReanimatedTrueSheet for this screen.
+   * Enables worklet-based `onPositionChange` events.
+   *
+   * @default false
+   */
+  reanimated?: boolean;
+
+  /**
+   * A callback that receives position change events.
+   * When `reanimated` is enabled, this must be a worklet function.
+   *
+   * @example
+   * ```tsx
+   * <Navigator.Screen
+   *   name="Sheet"
+   *   options={{
+   *     reanimated: true,
+   *     positionChangeHandler: (payload) => {
+   *       'worklet';
+   *       animatedValue.value = payload.position;
+   *     },
+   *   }}
+   * />
+   * ```
+   */
+  positionChangeHandler?: PositionChangeHandler;
+};
+
+export type TrueSheetNavigatorProps = DefaultNavigatorOptions<
+  ParamListBase,
+  string | undefined,
+  TrueSheetNavigationState<ParamListBase>,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationEventMap,
+  unknown
+> & {
+  /**
+   * The name of the route to use as the base screen.
+   * This screen will be rendered as a regular screen, while other screens are presented as sheets.
+   * Defaults to the first screen defined in the navigator.
+   */
+  initialRouteName?: string;
+};
+
+export type TrueSheetDescriptor = Descriptor<
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationProp<ParamListBase>,
+  RouteProp<ParamListBase>
+>;
+
+export type TrueSheetDescriptorMap = {
+  [key: string]: TrueSheetDescriptor;
+};

package/src/navigation/useTrueSheetNavigation.ts

@@ -0,0 +1,26 @@
+import { useNavigation, type ParamListBase } from '@react-navigation/core';
+
+import type { TrueSheetNavigationProp } from './types';
+
+/**
+ * Hook to access TrueSheet navigation with the resize helper.
+ *
+ * @example
+ * ```tsx
+ * function MySheet() {
+ *   const navigation = useTrueSheetNavigation();
+ *
+ *   // Resize to a specific detent
+ *   const handleExpand = () => {
+ *     navigation.resize(1); // Resize to second detent
+ *   };
+ *
+ *   return (
+ *     <Button title="Expand" onPress={handleExpand} />
+ *   );
+ * }
+ * ```
+ */
+export const useTrueSheetNavigation = <
+  T extends ParamListBase = ParamListBase,
+>(): TrueSheetNavigationProp<T> => useNavigation<TrueSheetNavigationProp<T>>();

package/src/reanimated/ReanimatedTrueSheet.tsx

@@ -70,24 +70,29 @@ const AnimatedTrueSheet = Animated.createAnimatedComponent(TrueSheet);
 export const ReanimatedTrueSheet = forwardRef<TrueSheet, ReanimatedTrueSheetProps>((props, ref) => {
   const { onPositionChange, ...rest } = props;
 
-  const { animatedPosition, animatedIndex } = useReanimatedTrueSheet();
+  const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet();
 
   const positionChangeHandler = useReanimatedPositionChangeHandler((payload) => {
     'worklet';
 
-    // When transitioning=true, we animate the position manually for smooth transitions.
-    // This is used when native can't provide real-time position updates during animations.
-    if (payload.transitioning) {
+    if (payload.realtime) {
+      // Update directly when we have real-time values (during drag or animation tracking)
+      animatedPosition.value = payload.position;
+      animatedIndex.value = payload.index;
+      animatedDetent.value = payload.detent;
+    } else {
+      // Animate position, index, and detent when not real-time
       if (Platform.OS === 'android') {
         animatedPosition.value = withTiming(payload.position, TIMING_CONFIG);
+        animatedIndex.value = withTiming(payload.index, TIMING_CONFIG);
+        animatedDetent.value = withTiming(payload.detent, TIMING_CONFIG);
       } else {
         animatedPosition.value = withSpring(payload.position, SPRING_CONFIG);
+        animatedIndex.value = withSpring(payload.index, SPRING_CONFIG);
+        animatedDetent.value = withSpring(payload.detent, SPRING_CONFIG);
       }
-    } else {
-      animatedPosition.value = payload.position;
     }
 
-    animatedIndex.value = payload.index;
     onPositionChange?.({ nativeEvent: payload } as PositionChangeEvent);
   });
 

package/src/reanimated/ReanimatedTrueSheet.web.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, useEffect } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+import { TrueSheet } from '../TrueSheet';
+import type { TrueSheetProps, PositionChangeEvent } from '../TrueSheet.types';
+import { useReanimatedTrueSheet } from './ReanimatedTrueSheetProvider';
+
+interface ReanimatedTrueSheetProps extends TrueSheetProps {
+  /**
+   * Callback for position changes.
+   *
+   * @see {@link TrueSheetProps.onPositionChange}
+   */
+  onPositionChange?: TrueSheetProps['onPositionChange'];
+}
+
+/**
+ * Reanimated-enabled version of TrueSheet for web that automatically syncs
+ * position with the provider's shared value.
+ * Must be used within a ReanimatedTrueSheetProvider.
+ *
+ * @example
+ * ```tsx
+ * import { ReanimatedTrueSheet, ReanimatedTrueSheetProvider } from '@lodev09/react-native-true-sheet/reanimated'
+ *
+ * function MyScreen() {
+ *   const sheetRef = useRef<TrueSheet>(null)
+ *
+ *   return (
+ *     <ReanimatedTrueSheetProvider>
+ *       <View>
+ *         <ReanimatedTrueSheet
+ *           ref={sheetRef}
+ *           detents={[0.25, 0.5, 1]}
+ *           initialDetentIndex={1}
+ *         >
+ *           <Text>Sheet Content</Text>
+ *         </ReanimatedTrueSheet>
+ *       </View>
+ *     </ReanimatedTrueSheetProvider>
+ *   )
+ * }
+ * ```
+ */
+export const ReanimatedTrueSheet = forwardRef<TrueSheet, ReanimatedTrueSheetProps>((props, ref) => {
+  const { onPositionChange, detents = [0.5, 1], ...rest } = props;
+  const { height: windowHeight } = useWindowDimensions();
+
+  const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet();
+
+  // Reset animated values when component unmounts
+  useEffect(() => {
+    return () => {
+      animatedPosition.value = windowHeight;
+      animatedIndex.value = -1;
+      animatedDetent.value = 0;
+    };
+  }, [windowHeight]);
+
+  const handlePositionChange = (event: PositionChangeEvent) => {
+    const { position, index, detent } = event.nativeEvent;
+
+    // Sync with provider's shared values
+    animatedPosition.value = position;
+    animatedIndex.value = index;
+    animatedDetent.value = detent;
+
+    // Call user's callback
+    onPositionChange?.(event);
+  };
+
+  return (
+    <TrueSheet ref={ref} detents={detents} onPositionChange={handlePositionChange} {...rest} />
+  );
+});

package/src/reanimated/ReanimatedTrueSheetProvider.tsx

@@ -4,13 +4,19 @@ import { useSharedValue, type SharedValue } from 'react-native-reanimated';
 
 export interface ReanimatedTrueSheetContextValue {
   /**
-   * Shared value representing the current sheet position (Y offset from bottom)
+   * Shared value representing the current sheet position (Y offset from top of screen)
    */
   animatedPosition: SharedValue<number>;
   /**
-   * Shared value representing the current detent index
+   * Shared value representing the current detent index as a continuous float.
+   * Interpolates smoothly between -1 (off-screen) and the target detent index.
    */
   animatedIndex: SharedValue<number>;
+  /**
+   * Shared value representing the current detent value (0-1 fraction of screen height).
+   * Interpolates smoothly between detent values as the sheet is dragged.
+   */
+  animatedDetent: SharedValue<number>;
 }
 
 const ReanimatedTrueSheetContext = createContext<ReanimatedTrueSheetContextValue | null>(null);
@@ -40,13 +46,11 @@ export const ReanimatedTrueSheetProvider = ({ children }: ReanimatedTrueSheetPro
   const { height } = useWindowDimensions();
   const animatedPosition = useSharedValue(height);
   const animatedIndex = useSharedValue(-1);
+  const animatedDetent = useSharedValue(0);
 
-  const value = useMemo(
-    () => ({
-      animatedPosition,
-      animatedIndex,
-    }),
-    [animatedPosition, animatedIndex]
+  const value = useMemo<ReanimatedTrueSheetContextValue>(
+    () => ({ animatedPosition, animatedIndex, animatedDetent }),
+    [animatedPosition, animatedIndex, animatedDetent]
   );
 
   return (

package/src/reanimated/useReanimatedPositionChangeHandler.web.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import type { PositionChangeEvent, PositionChangeEventPayload } from '../TrueSheet.types';
+
+type PositionChangeHandler = (
+  payload: PositionChangeEventPayload,
+  context: Record<string, unknown>
+) => void;
+
+/**
+ * Web implementation of useReanimatedPositionChangeHandler.
+ *
+ * Returns a simple callback wrapper. The worklet directive is ignored on web
+ * since there's no native UI thread.
+ *
+ * @param handler - The position change handler function
+ * @param _dependencies - Unused on web, kept for API compatibility
+ * @returns An event handler compatible with onPositionChange prop
+ */
+export const useReanimatedPositionChangeHandler = (
+  handler: PositionChangeHandler,
+  _dependencies: unknown[] = []
+) => {
+  const context: Record<string, unknown> = {};
+
+  return useCallback(
+    (event: PositionChangeEvent) => {
+      handler(event.nativeEvent, context);
+    },
+    [handler]
+  );
+};

package/src/specs/NativeTrueSheetModule.ts

@@ -13,18 +13,29 @@ interface Spec extends TurboModule {
    * Present a sheet by reference
    * @param viewTag - Native view tag of the sheet component
    * @param index - Detent index to present at
+   * @param animated - Whether to animate the presentation
    * @returns Promise that resolves when sheet is fully presented
    * @throws PRESENT_FAILED if presentation fails
    */
-  presentByRef(viewTag: number, index: number): Promise<void>;
+  presentByRef(viewTag: number, index: number, animated: boolean): Promise<void>;
 
   /**
-   * Dismiss a sheet by reference
+   * Dismiss a sheet and all sheets presented on top of it
    * @param viewTag - Native view tag of the sheet component
+   * @param animated - Whether to animate the dismissal
    * @returns Promise that resolves when sheet is fully dismissed
    * @throws DISMISS_FAILED if dismissal fails
    */
-  dismissByRef(viewTag: number): Promise<void>;
+  dismissByRef(viewTag: number, animated: boolean): Promise<void>;
+
+  /**
+   * Dismiss only the sheets presented on top of this sheet, keeping this sheet presented
+   * @param viewTag - Native view tag of the sheet component
+   * @param animated - Whether to animate the dismissal
+   * @returns Promise that resolves when all child sheets are fully dismissed
+   * @throws DISMISS_FAILED if dismissal fails
+   */
+  dismissStackByRef(viewTag: number, animated: boolean): Promise<void>;
 
   /**
    * Resize a sheet to a different index by reference
@@ -33,6 +44,20 @@ interface Spec extends TurboModule {
    * @returns Promise that resolves when resize is complete
    */
   resizeByRef(viewTag: number, index: number): Promise<void>;
+
+  /**
+   * Dismiss all presented sheets
+   * @param animated - Whether to animate the dismissals
+   * @returns Promise that resolves when all sheets are dismissed
+   */
+  dismissAll(animated: boolean): Promise<void>;
+
+  /**
+   * Handle back press for a sheet (Android only)
+   * Dismisses or collapses to the lowest detent natively
+   * @param viewTag - Native view tag of the sheet component
+   */
+  handleBackPress(viewTag: number): Promise<void>;
 }
 
 export default TurboModuleRegistry.get<Spec>('TrueSheetModule');

package/src/web/constants.ts

@@ -0,0 +1,13 @@
+export const DEFAULT_CORNER_RADIUS = 16;
+export const DEFAULT_MAX_WIDTH = 640;
+export const DEFAULT_FORM_SHEET_WIDTH = 580;
+export const DEFAULT_FORM_SHEET_HEIGHT_RATIO = 0.5;
+export const COLOR_SURFACE_CONTAINER_LOW_LIGHT = '#F7F2FA';
+export const COLOR_SURFACE_CONTAINER_LOW_DARK = '#1D1B20';
+export const DEFAULT_ANCHOR_OFFSET = 16;
+export const DEFAULT_DETACHED_OFFSET = 16;
+export const DEFAULT_GRABBER_COLOR_LIGHT = 'rgba(0, 0, 0, 0.3)';
+export const DEFAULT_GRABBER_COLOR_DARK = 'rgba(255, 255, 255, 0.3)';
+export const DEFAULT_GRABBER_WIDTH = 32;
+export const DEFAULT_GRABBER_HEIGHT = 4;
+export const DEFAULT_GRABBER_TOP_MARGIN = 8;