@magmamath/students-features 1.3.3 → 1.3.4-rc.1

package/src/features/keyboard/constants/keys/geometry.constants.tsx

@@ -5,15 +5,6 @@ import { DegreeIcon } from '../../../../shared/icons/keyboard/DegreeIcon'
 import { AngleIcon } from '../../../../shared/icons/keyboard/AngleIcon'
 import { ParallelIcon } from '../../../../shared/icons/keyboard/ParallelIcon'
 import { PerpendicularIcon } from '../../../../shared/icons/keyboard/PerpendicularIcon'
-import { TriangleIcon } from '../../../../shared/icons/keyboard/TriangleIcon'
-import { ThereforeIcon } from '../../../../shared/icons/keyboard/ThereforeIcon'
-import { ImpliesIcon } from '../../../../shared/icons/keyboard/ImpliesIcon'
-import { LineSegmentIcon } from '../../../../shared/icons/keyboard/LineSegmentIcon'
-import { RightDirectedSegmentIcon } from '../../../../shared/icons/keyboard/RightDirectedSegmentIcon'
-import { BidirectionalSegmentIcon } from '../../../../shared/icons/keyboard/BidirectionalSegmentIcon'
-import { LetterAIcon } from '../../../../shared/icons/keyboard/LetterAIcon'
-import { LetterBIcon } from '../../../../shared/icons/keyboard/LetterBIcon'
-import { LetterCIcon } from '../../../../shared/icons/keyboard/LetterCIcon'
 import { DEFAULT_KEY_ICON_PROPS } from '../keyboard.constants'
 
 export const MATH_GEOMETRY_SYMBOLS: MathOperatorsGroup = {
@@ -23,7 +14,7 @@ export const MATH_GEOMETRY_SYMBOLS: MathOperatorsGroup = {
     katexValue: '°',
   },
   ANGLE: {
-    icon: <AngleIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
+    icon: <AngleIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\angle',
     katexValue: '∠',
   },
@@ -54,55 +45,4 @@ export const MATH_GEOMETRY_SYMBOLS: MathOperatorsGroup = {
       },
     },
   },
-  TRIANGLE: {
-    icon: <TriangleIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
-    mathliveValue: '\\triangle',
-    katexValue: '△',
-  },
-  THEREFORE: {
-    icon: <ThereforeIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
-    mathliveValue: '\\therefore',
-    katexValue: '∴',
-  },
-  IMPLIES: {
-    icon: <ImpliesIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
-    mathliveValue: '\\Rightarrow',
-    katexValue: '⇒',
-  },
-  LINE_SEGMENT: {
-    icon: <LineSegmentIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
-    mathliveValue: '\\overline{\\placeholder{}}',
-    katexValue: 'LINE_SEGMENT',
-    spreadsheetValue: 'LINE_SEGMENT',
-    isSpecialSymbol: true,
-  },
-  RIGHT_DIRECTED_SEGMENT: {
-    icon: <RightDirectedSegmentIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
-    mathliveValue: '\\overrightarrow{\\placeholder{}}',
-    katexValue: 'RIGHT_DIRECTED_SEGMENT',
-    spreadsheetValue: 'RIGHT_DIRECTED_SEGMENT',
-    isSpecialSymbol: true,
-  },
-  BIDIRECTIONAL_SEGMENT: {
-    icon: <BidirectionalSegmentIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
-    mathliveValue: '\\overleftrightarrow{\\placeholder{}}',
-    katexValue: 'BIDIRECTIONAL_SEGMENT',
-    spreadsheetValue: 'BIDIRECTIONAL_SEGMENT',
-    isSpecialSymbol: true,
-  },
-  A: {
-    icon: <LetterAIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '𝐴',
-    katexValue: 'A',
-  },
-  B: {
-    icon: <LetterBIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '𝐵',
-    katexValue: 'B',
-  },
-  C: {
-    icon: <LetterCIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '𝐶',
-    katexValue: 'C',
-  },
 } as const

package/src/features/keyboard/constants/keys/text.constants.tsx

@@ -7,19 +7,19 @@ import { DEFAULT_KEY_ICON_PROPS } from '../keyboard.constants'
 
 export const MATH_TEXT_SYMBOLS: MathOperatorsGroup = {
   A: {
-    label: 'A',
-    mathliveValue: 'A',
-    katexValue: 'A',
+    label: 'a',
+    mathliveValue: 'a',
+    katexValue: 'a',
   },
   B: {
-    label: 'B',
-    mathliveValue: 'B',
-    katexValue: 'B',
+    label: 'b',
+    mathliveValue: 'b',
+    katexValue: 'b',
   },
   C: {
-    label: 'C',
-    mathliveValue: 'C',
-    katexValue: 'C',
+    label: 'c',
+    mathliveValue: 'c',
+    katexValue: 'c',
   },
   F: {
     label: 'f',

package/src/features/keyboard/constants/keys/units.constants.tsx

@@ -460,6 +460,5 @@ export const MATH_TIME_UNITS: MathOperatorsGroup = {
     label: 'pm',
     mathliveValue: '\\mathrm{pm}',
     katexValue: 'pm',
-    mathQuillValue: 'pm',
   },
 } as const

package/src/features/keyboard/types/types.ts

@@ -23,7 +23,6 @@ export enum KeyboardType {
   BasicUnits = 'BasicUnits',
   BasicPlusPlus = 'BasicPlusPlus',
   BasicPlusPlusMobile = 'BasicPlusPlusMobile',
-  Geometry = 'Geometry',
   Numpad = 'Numpad',
   Underlined = 'Underlined',
 }

package/src/features/voice/constants.ts

@@ -1,6 +1,12 @@
 export const VOICE_RECORDER_CONTAINER_SIZES = {
-  COLLAPSED: 61,
-  EXPANDED: 152,
+  COLLAPSED: {
+    default: 61,
+    advanced: 52,
+  },
+  EXPANDED: {
+    default: 152,
+    advanced: 136,
+  },
 }
 export const VOICE_RECORDER_MAX_DURATION_MS = 60000 // 1 minute
 export const VOICE_RECORDER_MIN_DURATION_MS = 300
@@ -13,3 +19,8 @@ export const DROPDOWN_MAX_CONTENT_HEIGHT = 330
 export const TRANSCRIPT_RETRY_INTERVAL_MS = 4000
 export const TRANSCRIPT_MAX_RETRIES = 15
 export const NO_AUDIO_BE_MESSAGE = 'No audio'
+
+export const VOICE_RECORD_SHAWODS = {
+  default: '0 1px 3px 0 rgba(51, 51, 51, 0.10), 0 0 1px 0 rgba(51, 51, 51, 0.40)',
+  advanced: '0 0 1px 0 rgba(51, 51, 51, 0.20), 0 3px 10px 0 rgba(51, 51, 51, 0.16)',
+}

package/src/features/voice/recording/components/VoiceRecord.tsx

@@ -1,7 +1,7 @@
 import { StyleProp, ViewStyle, StyleSheet } from 'react-native'
 import { VoiceRecordButton } from './VoiceRecordButton'
 import React, { useEffect } from 'react'
-import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
 import { VoiceRecordDeleteButton } from './VoiceRecordDeleteButton'
 import { VoiceRecordDivider } from './VoiceRecordDivider'
 import { VoiceRecordTimer } from './VoiceRecordTimer'
@@ -10,6 +10,8 @@ import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useVoiceRecorder } from '../hooks/useVoiceRecorder'
 import { useVoiceRecorderAnimation } from '../hooks/useVoiceRecorderAnimation'
 import { useUnit } from 'effector-react'
+import { RecordButtonVariant } from '../../types'
+import { VOICE_RECORD_SHAWODS } from '../../constants'
 
 type VoiceRecordProps = {
   style?: StyleProp<ViewStyle>
@@ -20,7 +22,8 @@ export const VoiceRecord = ({ style, model }: VoiceRecordProps) => {
   const { recorderState } = useVoiceRecorder(model)
   const [isExpanded, isDisabled] = useUnit([model.$isExpanded, model.$isButtonDisabled])
 
-  const { containerAnimatedStyle } = useVoiceRecorderAnimation(isExpanded)
+  const recordButtonVariant = model.recordButtonVariant
+  const { containerAnimatedStyle } = useVoiceRecorderAnimation(isExpanded, recordButtonVariant)
 
   useEffect(() => {
     return () => {
@@ -29,12 +32,23 @@ export const VoiceRecord = ({ style, model }: VoiceRecordProps) => {
   }, [model])
 
   return (
-    <Animated.View style={[styles.container, style, containerAnimatedStyle]}>
+    <Animated.View
+      style={[
+        styles.container,
+        recordButtonVariant === RecordButtonVariant.ADVANCED && styles.advancedVariantContainer,
+        { boxShadow: VOICE_RECORD_SHAWODS[recordButtonVariant] },
+        style,
+        containerAnimatedStyle,
+      ]}
+    >
       <VoiceRecordButton model={model} />
       {isExpanded && (
         <Animated.View entering={FadeIn} exiting={FadeOut} style={styles.expendedContainer}>
           <VoiceRecordTimer
-            style={styles.timer}
+            style={[
+              styles.timer,
+              recordButtonVariant === RecordButtonVariant.ADVANCED && styles.advancedVariantTimer,
+            ]}
             model={model}
             recordingFileDurationMs={recorderState.durationMillis}
           />
@@ -53,12 +67,21 @@ const styles = StyleSheet.create({
     paddingBottom: 6,
     backgroundColor: COLORS.NEUTRAL_3,
     borderRadius: 32,
-    boxShadow: '0 1px 3px 0 rgba(51, 51, 51, 0.10), 0 0 1px 0 rgba(51, 51, 51, 0.40)',
+  },
+  advancedVariantContainer: {
+    borderRadius: BORDER_RADIUS[300],
+    padding: 0,
     overflow: 'hidden',
   },
   timer: {
     marginTop: SPACING[400],
   },
+  defaultTimer: {
+    marginTop: SPACING[300],
+  },
+  advancedVariantTimer: {
+    marginTop: SPACING[150],
+  },
   expendedContainer: {
     alignItems: 'center',
   },

package/src/features/voice/recording/components/VoiceRecordButton.tsx

@@ -1,25 +1,35 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import {
+  BORDER_RADIUS,
   Button,
   ButtonColor,
   ButtonSize,
   ButtonStyle,
   ButtonVariant,
+  CheckIcon,
+  COLORS,
   IS_WEB,
+  MicrophoneIcon,
 } from '@magmamath/react-native-ui'
-import { Pressable } from 'react-native'
-import { MicrophoneIcon, CheckIcon } from '@magmamath/react-native-ui'
+import { Pressable, StyleSheet, View } from 'react-native'
 import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useUnit } from 'effector-react'
-import { VoiceRecorderState } from '../../constants'
+import { VOICE_RECORD_SHAWODS, VoiceRecorderState } from '../../constants'
 import { useText } from '../../../../shared/translation'
+import { RecordButtonVariant } from '../../types'
 
 type VoiceRecordButtonProps = {
-  style?: ButtonStyle
   model: VoiceRecordModel
 }
 
-export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
+const defaultButtonStyles: ButtonStyle = {
+  button: {
+    width: 50,
+    height: 50,
+  },
+}
+
+export const VoiceRecordButton = ({ model }: VoiceRecordButtonProps) => {
   const t = useText()
 
   const availableInputs = useUnit(model.recorderModel.$availableInputs)
@@ -27,38 +37,97 @@ export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
   const isButtonDisabled = useUnit(model.$isButtonDisabled)
   const isInitializing = useUnit(model.initializeRecording.pending)
 
-  const combinedStyles = useMemo((): ButtonStyle => {
-    return {
-      button: [{ width: 50, height: 50 }, style?.button],
-      container: [style?.container],
-      text: [style?.text],
-    }
-  }, [style])
+  const isRecording = voiceRecordState === VoiceRecorderState.RECORDING
+  const isIdle = voiceRecordState === VoiceRecorderState.IDLE
+  const hasInputs = availableInputs.length > 0
 
   return (
     <Pressable
       onPressIn={(e) => {
-        if (availableInputs.length) return
+        if (hasInputs) return
         e.preventDefault()
         model.notification.warning(t('voice.noMicrophoneFound'))
       }}
-      pointerEvents={!availableInputs.length || isInitializing ? 'box-only' : 'auto'}
+      pointerEvents={!hasInputs || isInitializing ? 'box-only' : 'auto'}
+      style={[isButtonDisabled ? styles.disabledCursor : undefined]}
     >
-      <Button
-        disabled={isButtonDisabled || !availableInputs.length}
-        onPressIn={() => model.recorderButtonHandler()}
-        style={combinedStyles}
-        size={ButtonSize.LARGE}
-        variant={ButtonVariant.SECONDARY}
-        colorScheme={ButtonColor.WHITE}
-        icon={
-          voiceRecordState === VoiceRecorderState.RECORDING ? (
-            <CheckIcon size={25} />
-          ) : (
-            <MicrophoneIcon style={IS_WEB ? { width: 19 } : { minWidth: 23, minHeight: 23 }} />
-          )
-        }
-      />
+      {model.recordButtonVariant === RecordButtonVariant.ADVANCED ? (
+        <AdvancedButton
+          isRecording={isRecording}
+          isIdle={isIdle}
+          disabled={isButtonDisabled}
+          onPressIn={() => model.recorderButtonHandler()}
+        />
+      ) : (
+        <Button
+          disabled={isButtonDisabled}
+          onPressIn={() => model.recorderButtonHandler()}
+          style={defaultButtonStyles}
+          size={ButtonSize.LARGE}
+          variant={ButtonVariant.SECONDARY}
+          colorScheme={ButtonColor.WHITE}
+          icon={
+            isRecording ? (
+              <CheckIcon size={25} />
+            ) : (
+              <MicrophoneIcon style={IS_WEB ? { width: 19 } : { minWidth: 23, minHeight: 23 }} />
+            )
+          }
+        />
+      )}
     </Pressable>
   )
 }
+
+type AdvancedButtonProps = {
+  isRecording: boolean
+  isIdle: boolean
+  disabled: boolean
+  onPressIn: () => void
+}
+
+const AdvancedButton = ({ isRecording, isIdle, disabled, onPressIn }: AdvancedButtonProps) => (
+  <Pressable
+    style={[styles.advancedButtonContainer, disabled && styles.disabledCursor]}
+    onPressIn={onPressIn}
+    disabled={disabled}
+  >
+    <View
+      style={[
+        styles.advancedIconContainer,
+        !isIdle && { borderRadius: 32, backgroundColor: COLORS.PRIMARY_BLUE },
+      ]}
+    >
+      {isRecording ? (
+        <CheckIcon size={18} color={COLORS.NEUTRAL_1} />
+      ) : (
+        <MicrophoneIcon
+          style={{ width: 14, height: 19 }}
+          color={disabled ? COLORS.NEUTRAL_5 : isIdle ? COLORS.NEUTRAL_9 : COLORS.NEUTRAL_1}
+        />
+      )}
+    </View>
+  </Pressable>
+)
+
+const styles = StyleSheet.create({
+  advancedButtonContainer: {
+    width: 52,
+    height: 52,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BORDER_RADIUS[300],
+    boxShadow: VOICE_RECORD_SHAWODS[RecordButtonVariant.ADVANCED],
+  },
+  advancedIconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: BORDER_RADIUS[300],
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disabledCursor: {
+    cursor: 'not-allowed' as 'auto',
+  },
+})

package/src/features/voice/recording/components/VoiceRecordDeleteButton.tsx

@@ -17,8 +17,8 @@ export const VoiceRecordDeleteButton = ({ onPress, isDisabled }: VoiceRecordDele
 
 const styles = StyleSheet.create({
   container: {
-    width: 36,
-    height: 36,
+    width: 32,
+    height: 32,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/src/features/voice/recording/hooks/useVoiceRecorderAnimation.ts

@@ -1,19 +1,23 @@
 import { useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import { VOICE_RECORDER_CONTAINER_SIZES } from '../../constants'
+import { RecordButtonVariant } from '../../types'
 
-export const useVoiceRecorderAnimation = (isExpanded: boolean) => {
+export const useVoiceRecorderAnimation = (
+  isExpanded: boolean,
+  recordButtonVariant: RecordButtonVariant,
+) => {
   const containerAnimatedStyle = useAnimatedStyle(() => {
     return {
       height: withTiming(
         isExpanded
-          ? VOICE_RECORDER_CONTAINER_SIZES.EXPANDED
-          : VOICE_RECORDER_CONTAINER_SIZES.COLLAPSED,
+          ? VOICE_RECORDER_CONTAINER_SIZES.EXPANDED[recordButtonVariant]
+          : VOICE_RECORDER_CONTAINER_SIZES.COLLAPSED[recordButtonVariant],
         {
           duration: 280,
         },
       ),
     }
-  }, [isExpanded])
+  }, [isExpanded, recordButtonVariant])
 
   return { containerAnimatedStyle }
 }

package/src/features/voice/recording/model/VoiceRecord.model.ts

@@ -4,6 +4,7 @@ import { VoiceRecordsCollection } from './VoiceRecordCollection'
 import { UploaderModel } from './Uploader.model'
 import { VoiceRecorderState } from '../../constants'
 import {
+  RecordButtonVariant,
   VoiceRecordCollectionItem,
   VoiceRecorderApi,
   VoiceRecordNotificationTypes,
@@ -58,6 +59,8 @@ export class VoiceRecordModel {
   public readonly events: VoiceRecordEvents
   private shouldDiscardRecording = false
 
+  public recordButtonVariant = RecordButtonVariant.DEFAULT
+
   public readonly setCurrentKey = createEvent<string>()
   public readonly setCurrentRecord = createEvent<any>()
   public readonly reset = createEvent()
@@ -82,6 +85,10 @@ export class VoiceRecordModel {
     await this.api.deleteAudioFile(audioFileId)
   })
 
+  public readonly setRecordButtonVariant = createEffect((variant: RecordButtonVariant) => {
+    this.recordButtonVariant = variant
+  })
+
   public readonly deleteCurrentRecording = attach({
     source: this.$currentKey,
     mapParams: (props: DeleteCurrentRecordingProps | void, currentKey) => ({

package/src/features/voice/types.ts

@@ -82,3 +82,8 @@ export type VoiceTranscriptionItem = {
   controller?: AbortController
   hasDrawing?: boolean
 }
+
+export enum RecordButtonVariant {
+  DEFAULT = 'default',
+  ADVANCED = 'advanced',
+}

package/src/shared/icons/keyboard/AngleIcon.tsx

@@ -2,13 +2,11 @@ import React from 'react'
 import { IconProps } from './icon.types'
 import Svg, { Path } from 'react-native-svg'
 
-const ASPECT_RATIO = 20 / 18
-
 export const AngleIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 20 18" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
       <Path
-        d="M11.841 3.87043C12.1077 3.5183 12.6099 3.44943 12.962 3.71614C13.3142 3.98288 13.384 4.48502 13.1173 4.83723L7.17238 12.6866C7.12249 12.7525 7.16947 12.847 7.25209 12.847H14.5587C15.0004 12.8471 15.3584 13.2051 15.3585 13.6468C15.3585 14.0885 15.0004 14.4465 14.5587 14.4466H5.44154C5.13785 14.4466 4.85992 14.2752 4.72474 14.0032C4.58961 13.7314 4.62065 13.4065 4.80384 13.1644L11.841 3.87043Z"
+        d="M8.94912 6.74144C9.20676 6.46187 9.63941 6.41761 9.9501 6.65062C10.2606 6.88377 10.3389 7.31141 10.1425 7.63695L10.0995 7.70043L6.49991 12.5002H10.9999C11.4141 12.5002 11.7499 12.836 11.7499 13.2502C11.7499 13.6644 11.4141 14.0002 10.9999 14.0002H4.99991C4.71583 14.0002 4.45605 13.8393 4.32901 13.5852C4.20219 13.3312 4.22994 13.0272 4.4003 12.8L8.9003 6.80004L8.94912 6.74144Z"
         fill={color}
       />
     </Svg>

package/src/shared/icons/keyboard/BidirectionalSegmentIcon.tsx

@@ -1,17 +1,20 @@
 import React from 'react'
 import { IconProps } from './icon.types'
-import Svg, { Path, Rect } from 'react-native-svg'
+import Svg, { Path } from 'react-native-svg'
 
-const ASPECT_RATIO = 19 / 20
+const ASPECT_RATIO = 20 / 21
 
 export const BidirectionalSegmentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 19 20" fill="none">
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 20 21" fill="none">
       <Path
-        d="M16.1464 1.52657C16.3173 1.35571 16.5813 1.33396 16.7754 1.46212L16.8535 1.52657L18.8535 3.52657L18.9179 3.6047C19.0461 3.79878 19.0243 4.06274 18.8535 4.23361L16.8535 6.23361C16.6582 6.42887 16.3417 6.42887 16.1464 6.23361C15.9512 6.03834 15.9512 5.72184 16.1464 5.52657L17.2929 4.38009H1.70699L2.85348 5.52657L2.91793 5.6047C3.0461 5.79878 3.02434 6.06274 2.85348 6.23361C2.68261 6.40447 2.41865 6.42622 2.22457 6.29806L2.14645 6.23361L0.146447 4.23361C-0.0488155 4.03834 -0.0488155 3.72184 0.146447 3.52657L2.14645 1.52657L2.22457 1.46212C2.41865 1.33396 2.68261 1.35571 2.85348 1.52657C3.02434 1.69744 3.0461 1.9614 2.91793 2.15548L2.85348 2.23361L1.70699 3.38009H17.2929L16.1464 2.23361L16.082 2.15548C15.9538 1.9614 15.9756 1.69744 16.1464 1.52657Z"
+        d="M16.6464 0.146692C16.8173 -0.0241721 17.0813 -0.0459256 17.2754 0.0822385L17.3535 0.146692L19.3535 2.14669L19.4179 2.22482C19.5461 2.4189 19.5243 2.68286 19.3535 2.85372L17.3535 4.85372C17.1582 5.04899 16.8417 5.04899 16.6464 4.85372C16.4512 4.65846 16.4512 4.34195 16.6464 4.14669L17.7929 3.00021H2.20699L3.35348 4.14669L3.41793 4.22482C3.5461 4.4189 3.52434 4.68286 3.35348 4.85372C3.18261 5.02459 2.91865 5.04634 2.72457 4.91818L2.64645 4.85372L0.646447 2.85372C0.451184 2.65846 0.451184 2.34195 0.646447 2.14669L2.64645 0.146692L2.72457 0.0822385C2.91865 -0.0459256 3.18261 -0.0241721 3.35348 0.146692C3.52434 0.317555 3.5461 0.581519 3.41793 0.775598L3.35348 0.853723L2.20699 2.00021H17.7929L16.6464 0.853723L16.582 0.775598C16.4538 0.581519 16.4756 0.317555 16.6464 0.146692Z"
+        fill={color}
+      />
+      <Path
+        d="M8.07948 17L7.70148 14.55H3.52948L2.01748 17H0.407484L6.55348 7.2H7.91149L9.52148 17H8.07948ZM4.32748 13.22H7.51948L6.87548 9.09L4.32748 13.22ZM16.4822 7.2C18.0922 7.2 18.8762 8.236 18.8762 9.342C18.8762 10.434 18.1762 11.54 16.8322 11.82C17.9662 12.128 18.4842 12.996 18.4842 13.906C18.4842 15.432 17.1402 17 14.8162 17H11.0502L13.3182 7.2H16.4822ZM12.7582 15.698H14.9842C16.3842 15.698 17.0562 14.788 17.0562 13.906C17.0562 13.164 16.4822 12.506 15.4042 12.506H13.5002L12.7582 15.698ZM13.7522 11.358H15.5722C16.7762 11.358 17.4482 10.49 17.4482 9.692C17.4482 8.95 16.9862 8.502 16.0202 8.502H14.4102L13.7522 11.358Z"
         fill={color}
       />
-      <Rect x="4.8801" y="8.87988" width="9.24" height="9.24" rx="1.548" stroke="#B3B3BC" />
     </Svg>
   )
 }

package/src/shared/icons/keyboard/LineSegmentIcon.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 import { IconProps } from './icon.types'
-import Svg, { Path, Rect } from 'react-native-svg'
-
-const ASPECT_RATIO = 19 / 20
+import Svg, { Path } from 'react-native-svg'
 
 export const LineSegmentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 19 20" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d="M19 1C19.2761 1 19.5 1.22386 19.5 1.5C19.5 1.77614 19.2761 2 19 2H1C0.723858 2 0.5 1.77614 0.5 1.5C0.5 1.22386 0.723858 1 1 1H19Z"
+        fill={color}
+      />
       <Path
-        d="M18.5 3.37988C18.7761 3.37988 19 3.60374 19 3.87988C19 4.15603 18.7761 4.37988 18.5 4.37988H0.5C0.223858 4.37988 0 4.15603 0 3.87988C0 3.60374 0.223858 3.37988 0.5 3.37988H18.5Z"
+        d="M8.07948 16L7.70148 13.55H3.52948L2.01748 16H0.407484L6.55348 6.2H7.91149L9.52148 16H8.07948ZM4.32748 12.22H7.51948L6.87548 8.09L4.32748 12.22ZM16.4822 6.2C18.0922 6.2 18.8762 7.236 18.8762 8.342C18.8762 9.434 18.1762 10.54 16.8322 10.82C17.9662 11.128 18.4842 11.996 18.4842 12.906C18.4842 14.432 17.1402 16 14.8162 16H11.0502L13.3182 6.2H16.4822ZM12.7582 14.698H14.9842C16.3842 14.698 17.0562 13.788 17.0562 12.906C17.0562 12.164 16.4822 11.506 15.4042 11.506H13.5002L12.7582 14.698ZM13.7522 10.358H15.5722C16.7762 10.358 17.4482 9.49 17.4482 8.692C17.4482 7.95 16.9862 7.502 16.0202 7.502H14.4102L13.7522 10.358Z"
         fill={color}
       />
-      <Rect x="4.88" y="8.87988" width="9.24" height="9.24" rx="1.548" stroke="#B3B3BC" />
     </Svg>
   )
 }

package/src/shared/icons/keyboard/RightDirectedSegmentIcon.tsx

@@ -1,17 +1,20 @@
 import React from 'react'
 import { IconProps } from './icon.types'
-import Svg, { Path, Rect } from 'react-native-svg'
+import Svg, { Path } from 'react-native-svg'
 
-const ASPECT_RATIO = 19 / 20
+const ASPECT_RATIO = 20 / 21
 
 export const RightDirectedSegmentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 19 20" fill="none">
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 20 21" fill="none">
       <Path
-        d="M16.1465 1.52657C16.3173 1.35571 16.5813 1.33396 16.7754 1.46212L16.8535 1.52657L18.8535 3.52657L18.918 3.6047C19.0461 3.79878 19.0244 4.06274 18.8535 4.23361L16.8535 6.23361C16.6583 6.42887 16.3417 6.42887 16.1465 6.23361C15.9512 6.03834 15.9512 5.72184 16.1465 5.52657L17.293 4.38009H0.5C0.223858 4.38009 0 4.15623 0 3.88009C0 3.60395 0.223858 3.38009 0.5 3.38009H17.293L16.1465 2.23361L16.082 2.15548C15.9539 1.9614 15.9756 1.69744 16.1465 1.52657Z"
+        d="M16.6465 0.146692C16.8173 -0.0241721 17.0813 -0.0459256 17.2754 0.0822385L17.3535 0.146692L19.3535 2.14669L19.418 2.22482C19.5461 2.4189 19.5244 2.68286 19.3535 2.85372L17.3535 4.85372C17.1583 5.04899 16.8417 5.04899 16.6465 4.85372C16.4512 4.65846 16.4512 4.34195 16.6465 4.14669L17.793 3.00021H1C0.723858 3.00021 0.5 2.77635 0.5 2.50021C0.5 2.22406 0.723858 2.00021 1 2.00021H17.793L16.6465 0.853723L16.582 0.775598C16.4539 0.581519 16.4756 0.317555 16.6465 0.146692Z"
+        fill={color}
+      />
+      <Path
+        d="M8.07948 17L7.70148 14.55H3.52948L2.01748 17H0.407484L6.55348 7.2H7.91149L9.52148 17H8.07948ZM4.32748 13.22H7.51948L6.87548 9.09L4.32748 13.22ZM16.4822 7.2C18.0922 7.2 18.8762 8.236 18.8762 9.342C18.8762 10.434 18.1762 11.54 16.8322 11.82C17.9662 12.128 18.4842 12.996 18.4842 13.906C18.4842 15.432 17.1402 17 14.8162 17H11.0502L13.3182 7.2H16.4822ZM12.7582 15.698H14.9842C16.3842 15.698 17.0562 14.788 17.0562 13.906C17.0562 13.164 16.4822 12.506 15.4042 12.506H13.5002L12.7582 15.698ZM13.7522 11.358H15.5722C16.7762 11.358 17.4482 10.49 17.4482 9.692C17.4482 8.95 16.9862 8.502 16.0202 8.502H14.4102L13.7522 11.358Z"
         fill={color}
       />
-      <Rect x="4.8801" y="8.87988" width="9.24" height="9.24" rx="1.548" stroke="#B3B3BC" />
     </Svg>
   )
 }

package/.claude/settings.local.json

@@ -1,25 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npx tsc:*)",
-      "Bash(find /Users/alesiaskarakhod/Work/students-features -name rn-draw-area -o -name *draw*area*)",
-      "Bash(grep:*)",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools -type f -name \"*.ts*\" ! -path \"*/node_modules/*\" ! -path \"*/.next/*\" ! -path \"*/dist/*\" -exec grep -l \"convertLatexToBrackets\\\\|convertBracketsToLatex\" {})",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools -type f \\\\\\(-name *.test.ts* -o -name *.spec.ts* \\\\\\))",
-      "Bash(ls jest.config* vitest.config* tsconfig*)",
-      "Bash(npm ls:*)",
-      "Read(//Users/alesiaskarakhod/node_modules/.bin/**)",
-      "Bash(yarn add:*)",
-      "Bash(npx jest:*)",
-      "Bash(node:*)",
-      "Bash(npx ts-node:*)",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools/packages -name jest.config.* -o -name *.test.ts -o -name *.test.js -o -name *.spec.ts)",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools/packages -maxdepth 3 -type f \\\\\\(-name *.test.ts -o -name *.spec.ts -o -name *.test.tsx -o -name *.spec.tsx \\\\\\))",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools -type f \\\\\\(-name *.test.ts -o -name *.test.tsx -o -name *.spec.ts -o -name *.spec.tsx \\\\\\))",
-      "Bash(yarn test:*)",
-      "Bash(npx vitest:*)",
-      "Bash(npx tsup:*)",
-      "Bash(find /Users/alesiaskarakhod/Work/react-native/node_modules/@magmamath/frontend-config -name *.d.ts -o -name *.js)"
-    ]
-  }
-}

package/.editorconfig

@@ -1,15 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-
-indent_style = space
-indent_size = 2
-
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules/
-./lib/

package/.eslintrc

@@ -1,22 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2020": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:storybook/recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react-refresh"],
-  "rules": {
-    "react-refresh/only-export-components": "warn"
-  }
-}