From 48d0d18e10da469887dece97d2366cbe2379e60c Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Mon, 18 Apr 2022 12:19:39 -0400
Subject: [PATCH 1/6] Fix playground html dom tags

---
 packages/playground/src/index.html | 2 ++
 1 file changed, 2 insertions(+)
diff --git a/packages/playground/src/index.html b/packages/playground/src/index.html
index 7ceafd1..aa0685a 100644
--- a/packages/playground/src/index.html
+++ b/packages/playground/src/index.html
@@ -1,6 +1,8 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Playground – Theatre.js</title>
     <style>
       body {

From 8554c7b78c99ea180e8494b1d2a80449226cc611 Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Mon, 18 Apr 2022 12:20:08 -0400
Subject: [PATCH 2/6] docs: Add some questions surrounding playhead snapping

 * See https://www.notion.so/theatrejs/dragging-from-playhead-does-not-snap-dadac4fa755149cebbcb70a655c3a0d5
---
 .../Right/HorizontallyScrollableArea.tsx          | 15 +++++++++++----
 .../SequenceEditorPanel/RightOverlay/Playhead.tsx |  2 ++
 .../SequenceEditorPanel/positionSnapping.ts       |  2 --
 .../src/uiComponents/PointerEventsHandler.tsx     |  4 ++++
 4 files changed, 17 insertions(+), 6 deletions(-)
 delete mode 100644 theatre/studio/src/panels/SequenceEditorPanel/positionSnapping.ts

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
index 916a010..402ad2b 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
@@ -80,7 +80,7 @@ function useDragHandlers(
     const setIsSeeking = val(layoutP.seeker.setIsSeeking)
 
     return {
-      onDrag(dx: number, _, event) {
+      onDrag(dx, _, event) {
         const deltaPos = scaledSpaceToUnitSpace(dx)
         const unsnappedPos = clamp(posBeforeSeek + deltaPos, 0, sequence.length)
 
@@ -104,8 +104,12 @@ function useDragHandlers(
         sequence.position = newPosition
       },
       onDragStart(event) {
-        if (event.target instanceof HTMLInputElement) return false
+        if (event.target instanceof HTMLInputElement) {
+          // editing some value
+          return false
+        }
         if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+          // e.g. marquee selection has shiftKey
           return false
         }
         if (
@@ -113,6 +117,9 @@ function useDragHandlers(
             .composedPath()
             .some((el) => el instanceof HTMLElement && el.draggable === true)
         ) {
+          // Question: I think to check if we want another descendent element
+          // to be able to take control of this drag event.
+          // Question: e.g. for `useDragKeyframe`?
           return false
         }
 
@@ -139,9 +146,9 @@ function useDragHandlers(
     }
   }, [layoutP, containerEl])
 
-  const [isDragigng] = useDrag(containerEl, handlers)
+  const [isDragging] = useDrag(containerEl, handlers)
 
-  useCursorLock(isDragigng, 'draggingPositionInSequenceEditor', 'ew-resize')
+  useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
 }
 
 function useHandlePanAndZoom(
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
index fc70d07..848ae20 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
@@ -133,6 +133,8 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
 
   const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace)
 
+  // This may not currently snap correctly like it does when grabbing the "Rod".
+  // See https://www.notion.so/theatrejs/dragging-from-playhead-does-not-snap-dadac4fa755149cebbcb70a655c3a0d5
   const gestureHandlers = useMemo((): Parameters<typeof useDrag>[1] => {
     const setIsSeeking = val(layoutP.seeker.setIsSeeking)
 
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/positionSnapping.ts b/theatre/studio/src/panels/SequenceEditorPanel/positionSnapping.ts
deleted file mode 100644
index 00988ef..0000000
--- a/theatre/studio/src/panels/SequenceEditorPanel/positionSnapping.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// export const
-export {}
diff --git a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx
index dbd97e4..011c25c 100644
--- a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx
+++ b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx
@@ -68,6 +68,10 @@ const PointerEventsHandler: React.FC<{
   )
 }
 
+/**
+ * Question: Is this referring to the user's pointer input device?
+ * Or is this locking related to the playhead "cursor"?
+ */
 export const useCursorLock = (
   enabled: boolean,
   className: string,

From 9c3179b4b766fabf832152f7037410fbba6ffb6a Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Tue, 19 Apr 2022 15:27:03 -0400
Subject: [PATCH 3/6] questions, cleaning, fix _sanitizeRgba undefined

---
 theatre/core/src/propTypes/index.ts     | 16 +++++-----------
 theatre/core/src/propTypes/internals.ts |  2 ++
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/theatre/core/src/propTypes/index.ts b/theatre/core/src/propTypes/index.ts
index 3f07be4..80b5a8b 100644
--- a/theatre/core/src/propTypes/index.ts
+++ b/theatre/core/src/propTypes/index.ts
@@ -14,8 +14,7 @@ import type {
   IValidCompoundProps,
   ShorthandCompoundPropsToLonghandCompoundProps,
 } from './internals'
-import {sanitizeCompoundProps} from './internals'
-import {propTypeSymbol} from './internals'
+import {propTypeSymbol, sanitizeCompoundProps} from './internals'
 // eslint-disable-next-line unused-imports/no-unused-imports
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 
@@ -91,9 +90,7 @@ const validateCommonOpts = (fnCallSignature: string, opts?: CommonOpts) => {
  */
 export const compound = <Props extends IShorthandCompoundProps>(
   props: Props,
-  opts: {
-    label?: string
-  } = {},
+  opts: CommonOpts = {},
 ): PropTypeConfig_Compound<
   ShorthandCompoundPropsToLonghandCompoundProps<Props>
 > => {
@@ -287,9 +284,7 @@ const _interpolateNumber = (
 
 export const rgba = (
   defaultValue: Rgba = {r: 0, g: 0, b: 0, a: 1},
-  opts: {
-    label?: string
-  } = {},
+  opts: CommonOpts = {},
 ): PropTypeConfig_Rgba => {
   if (process.env.NODE_ENV !== 'production') {
     validateCommonOpts('t.rgba(defaultValue, opts)', opts)
@@ -337,6 +332,7 @@ export const rgba = (
 }
 
 const _sanitizeRgba = (val: unknown): Rgba | undefined => {
+  if (!val) return undefined
   let valid = true
   for (const c of ['r', 'g', 'b', 'a']) {
     if (
@@ -555,8 +551,6 @@ export function stringLiteral<
   }
 }
 
-export type Sanitizer<T> = (value: unknown) => T | undefined
-
 /**
  * A linear interpolator for a certain value type.
  *
@@ -669,7 +663,7 @@ const defaultNumberNudgeFn: NumberNudgeFn = ({
 export interface PropTypeConfig_Boolean
   extends ISimplePropType<'boolean', boolean> {}
 
-interface CommonOpts {
+type CommonOpts = {
   /**
    * Each prop type may be given a custom label instead of the name of the sub-prop
    * it is in.
diff --git a/theatre/core/src/propTypes/internals.ts b/theatre/core/src/propTypes/internals.ts
index 125cc45..61f062f 100644
--- a/theatre/core/src/propTypes/internals.ts
+++ b/theatre/core/src/propTypes/internals.ts
@@ -17,6 +17,8 @@ export type IValidCompoundProps = {
   [K in string]: PropTypeConfig
 }
 
+// Question: Why doesn't this include Rgba? Should it include Marker?
+//  - Is this just for compound props?
 type IShorthandProp =
   | string
   | number

From ec287b9069d343225b81c309dadbd9caf761d8ef Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Wed, 20 Apr 2022 11:20:56 -0400
Subject: [PATCH 4/6] Rename useCursorLock useCssCursorLock + add docs

---
 .../BasicKeyframedTrack/KeyframeEditor/Dot.tsx   |  4 ++--
 .../Right/HorizontallyScrollableArea.tsx         |  4 ++--
 .../KeyframeEditor/GraphEditorDotNonScalar.tsx   |  4 ++--
 .../KeyframeEditor/GraphEditorDotScalar.tsx      |  4 ++--
 .../FocusRangeZone/FocusRangeThumb.tsx           |  4 ++--
 .../src/uiComponents/PointerEventsHandler.tsx    | 16 +++++++++++++---
 theatre/studio/src/uiComponents/useDrag.ts       |  4 ++--
 7 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/Dot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/Dot.tsx
index ae25d22..3353d1f 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/Dot.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/Dot.tsx
@@ -14,7 +14,7 @@ import styled from 'styled-components'
 import type KeyframeEditor from './KeyframeEditor'
 import {useLockFrameStampPosition} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
 import {attributeNameThatLocksFramestamp} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
-import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
+import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
 import SnapCursor from './SnapCursor.svg'
 import selectedKeyframeIdsIfInSingleTrack from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/selectedKeyframeIdsIfInSingleTrack'
 
@@ -237,7 +237,7 @@ function useDragKeyframe(
 
   useDrag(node, gestureHandlers)
 
-  useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
+  useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
 
   return [isDragging]
 }
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
index 402ad2b..e434196 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx
@@ -10,7 +10,7 @@ import React, {useLayoutEffect, useMemo} from 'react'
 import styled from 'styled-components'
 import {useReceiveVerticalWheelEvent} from '@theatre/studio/panels/SequenceEditorPanel/VerticalScrollContainer'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
-import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
+import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
 import type {IRange} from '@theatre/shared/utils/types'
 
 const Container = styled.div`
@@ -148,7 +148,7 @@ function useDragHandlers(
 
   const [isDragging] = useDrag(containerEl, handlers)
 
-  useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
+  useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
 }
 
 function useHandlePanAndZoom(
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx
index 8d1459e..79ea741 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx
@@ -13,7 +13,7 @@ import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Histo
 import {useLockFrameStampPosition} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
 import {attributeNameThatLocksFramestamp} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
-import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
+import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
 
 export const dotSize = 6
 
@@ -170,7 +170,7 @@ function useDragKeyframe(
   }, [])
 
   useDrag(node, gestureHandlers)
-  useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
+  useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
   return isDragging
 }
 
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx
index 5c629e1..5cfc209 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx
@@ -13,7 +13,7 @@ import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Histo
 import {useLockFrameStampPosition} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
 import {attributeNameThatLocksFramestamp} from '@theatre/studio/panels/SequenceEditorPanel/FrameStampPositionProvider'
 import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
-import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
+import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
 
 export const dotSize = 6
 
@@ -224,7 +224,7 @@ function useDragKeyframe(
   }, [])
 
   useDrag(node, gestureHandlers)
-  useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'move')
+  useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'move')
   return isDragging
 }
 
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
index 0855357..2baeb9a 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
@@ -7,7 +7,7 @@ import getStudio from '@theatre/studio/getStudio'
 import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
 import {topStripHeight} from '@theatre/studio/panels/SequenceEditorPanel/RightOverlay/TopStrip'
 import type {CommitOrDiscard} from '@theatre/studio/StudioStore/StudioStore'
-import {useCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
+import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
 import useDrag from '@theatre/studio/uiComponents/useDrag'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import React, {useMemo, useRef, useState} from 'react'
@@ -211,7 +211,7 @@ const FocusRangeThumb: React.FC<{
 
   useDrag(hitZoneNode, gestureHandlers)
 
-  useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
+  useCssCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
 
   return usePrism(() => {
     const existingRange = existingRangeD.getValue()
diff --git a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx
index 011c25c..e17b4f8 100644
--- a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx
+++ b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx
@@ -69,12 +69,22 @@ const PointerEventsHandler: React.FC<{
 }
 
 /**
- * Question: Is this referring to the user's pointer input device?
- * Or is this locking related to the playhead "cursor"?
+ * A "locking" mechanism for managing style.cursor values.
+ *
+ * Putting this behind a lock is important so we can properly manage
+ * multiple features all coordinating to style the cursor.
+ *
+ * This will also track a stack of different cursor styles so that
+ * adding a style to be the "foremost" cursor can override a previous style,
+ * but then "unlocking" that style will again reveal the existing styles.
+ *
+ * It behaves a bit like a stack.
  */
-export const useCursorLock = (
+export const useCssCursorLock = (
+  /** Whether to enable the provided cursor style */
   enabled: boolean,
   className: string,
+  /** e.g. `"ew"`, `"help"`, `"pointer"`, `"text"`, etc */
   cursor: string,
 ) => {
   const ctx = useContext(context)
diff --git a/theatre/studio/src/uiComponents/useDrag.ts b/theatre/studio/src/uiComponents/useDrag.ts
index dc66e90..6d0ccd4 100644
--- a/theatre/studio/src/uiComponents/useDrag.ts
+++ b/theatre/studio/src/uiComponents/useDrag.ts
@@ -1,7 +1,7 @@
 import type {$FixMe} from '@theatre/shared/utils/types'
 import {useLayoutEffect, useRef} from 'react'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
-import {useCursorLock} from './PointerEventsHandler'
+import {useCssCursorLock} from './PointerEventsHandler'
 
 export type UseDragOpts = {
   /**
@@ -52,7 +52,7 @@ export default function useDrag(
     'dragStartCalled' | 'dragging' | 'notDragging'
   >('notDragging')
 
-  useCursorLock(
+  useCssCursorLock(
     mode === 'dragging' && typeof opts.lockCursorTo === 'string',
     'dragging',
     opts.lockCursorTo!,

From 0ccb9b23867a5e91f05ee42585b1b8335a74f8de Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Wed, 20 Apr 2022 11:21:27 -0400
Subject: [PATCH 5/6] doc: Internals IShorthandProp

---
 theatre/core/src/propTypes/internals.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/theatre/core/src/propTypes/internals.ts b/theatre/core/src/propTypes/internals.ts
index 61f062f..1c5c674 100644
--- a/theatre/core/src/propTypes/internals.ts
+++ b/theatre/core/src/propTypes/internals.ts
@@ -17,8 +17,16 @@ export type IValidCompoundProps = {
   [K in string]: PropTypeConfig
 }
 
-// Question: Why doesn't this include Rgba? Should it include Marker?
-//  - Is this just for compound props?
+/**
+ *
+ * This does not include Rgba since Rgba does not have a predictable
+ * object shape. We prefer to infer that compound props are described as
+ * `Record<string, IShorthandProp>` for now.
+ *
+ * In the future, it might be reasonable to wrap these types up into something
+ * which would allow us to differentiate between values at runtime
+ * (e.g. `val.type = "Rgba"` vs `val.type = "Compound"` etc)
+ */
 type IShorthandProp =
   | string
   | number

From 7c098c46550b5de00e262004c1d56afaa9811463 Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Wed, 20 Apr 2022 11:32:22 -0400
Subject: [PATCH 6/6] Fix typo to `permanentlySetValue`

---
 .../panels/DetailPanel/propEditors/BooleanPropEditor.tsx  | 2 +-
 .../panels/DetailPanel/propEditors/NumberPropEditor.tsx   | 2 +-
 .../src/panels/DetailPanel/propEditors/RgbaPropEditor.tsx | 6 +++---
 .../DetailPanel/propEditors/StringLiteralPropEditor.tsx   | 2 +-
 .../panels/DetailPanel/propEditors/StringPropEditor.tsx   | 2 +-
 .../propEditors/utils/useEditingToolsForPrimitiveProp.tsx | 4 ++--
 .../CurveEditorPopover/CurveEditorPopover.tsx             | 8 ++++----
 .../Right/LengthIndicator/LengthEditorPopover.tsx         | 2 +-
 .../RightOverlay/PlayheadPositionPopover.tsx              | 2 +-
 theatre/studio/src/uiComponents/form/BasicNumberInput.tsx | 6 +++---
 theatre/studio/src/uiComponents/form/BasicStringInput.tsx | 4 ++--
 11 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/BooleanPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/BooleanPropEditor.tsx
index 53cf76a..cc109d3 100644
--- a/theatre/studio/src/panels/DetailPanel/propEditors/BooleanPropEditor.tsx
+++ b/theatre/studio/src/panels/DetailPanel/propEditors/BooleanPropEditor.tsx
@@ -23,7 +23,7 @@ const BooleanPropEditor: React.FC<{
 
   const onChange = useCallback(
     (el: React.ChangeEvent<HTMLInputElement>) => {
-      stuff.permenantlySetValue(Boolean(el.target.checked))
+      stuff.permanentlySetValue(Boolean(el.target.checked))
     },
     [propConfig, pointerToProp, obj],
   )
diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/NumberPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/NumberPropEditor.tsx
index 07f4c24..5152085 100644
--- a/theatre/studio/src/panels/DetailPanel/propEditors/NumberPropEditor.tsx
+++ b/theatre/studio/src/panels/DetailPanel/propEditors/NumberPropEditor.tsx
@@ -29,7 +29,7 @@ const NumberPropEditor: React.FC<{
         value={stuff.value}
         temporarilySetValue={stuff.temporarilySetValue}
         discardTemporaryValue={stuff.discardTemporaryValue}
-        permenantlySetValue={stuff.permenantlySetValue}
+        permanentlySetValue={stuff.permanentlySetValue}
         range={propConfig.range}
         nudge={nudge}
       />
diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/RgbaPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/RgbaPropEditor.tsx
index 558ed50..3c7e00b 100644
--- a/theatre/studio/src/panels/DetailPanel/propEditors/RgbaPropEditor.tsx
+++ b/theatre/studio/src/panels/DetailPanel/propEditors/RgbaPropEditor.tsx
@@ -76,7 +76,7 @@ const RgbaPropEditor: React.FC<{
   const onChange = useCallback(
     (color: string) => {
       const rgba = decorateRgba(parseRgbaFromHex(color))
-      stuff.permenantlySetValue(rgba)
+      stuff.permanentlySetValue(rgba)
     },
     [stuff],
   )
@@ -98,7 +98,7 @@ const RgbaPropEditor: React.FC<{
           permanentlySetValue={(color) => {
             // console.log('perm')
             const rgba = decorateRgba(color)
-            stuff.permenantlySetValue(rgba)
+            stuff.permanentlySetValue(rgba)
           }}
           discardTemporaryValue={stuff.discardTemporaryValue}
         />
@@ -120,7 +120,7 @@ const RgbaPropEditor: React.FC<{
           value={rgba2hex(stuff.value)}
           temporarilySetValue={noop}
           discardTemporaryValue={noop}
-          permenantlySetValue={onChange}
+          permanentlySetValue={onChange}
           isValid={(v) => !!v.match(/^#?([0-9a-f]{8})$/i)}
         />
       </RowContainer>
diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/StringLiteralPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/StringLiteralPropEditor.tsx
index d504bd0..d9c50a2 100644
--- a/theatre/studio/src/panels/DetailPanel/propEditors/StringLiteralPropEditor.tsx
+++ b/theatre/studio/src/panels/DetailPanel/propEditors/StringLiteralPropEditor.tsx
@@ -20,7 +20,7 @@ const StringLiteralPropEditor: React.FC<{
 
   const onChange = useCallback(
     (val: string) => {
-      stuff.permenantlySetValue(val)
+      stuff.permanentlySetValue(val)
     },
     [propConfig, pointerToProp, obj],
   )
diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx
index 5ee8020..a406dd2 100644
--- a/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx
+++ b/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx
@@ -22,7 +22,7 @@ const StringPropEditor: React.FC<{
         value={stuff.value}
         temporarilySetValue={stuff.temporarilySetValue}
         discardTemporaryValue={stuff.discardTemporaryValue}
-        permenantlySetValue={stuff.permenantlySetValue}
+        permanentlySetValue={stuff.permanentlySetValue}
       />
     </SingleRowPropEditor>
   )
diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx
index 30352ea..38c04ef 100644
--- a/theatre/studio/src/panels/DetailPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx
+++ b/theatre/studio/src/panels/DetailPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx
@@ -23,7 +23,7 @@ interface CommonStuff<T> {
 
   temporarilySetValue(v: T): void
   discardTemporaryValue(): void
-  permenantlySetValue(v: T): void
+  permanentlySetValue(v: T): void
 }
 
 interface Default<T> extends CommonStuff<T> {
@@ -76,7 +76,7 @@ export function useEditingToolsForPrimitiveProp<
               currentScrub = null
             }
           },
-          permenantlySetValue(v: T): void {
+          permanentlySetValue(v: T): void {
             if (currentScrub) {
               currentScrub.capture((api) => {
                 api.set(pointerToProp, v)
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx
index 820ac54..051bb5c 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx
@@ -192,7 +192,7 @@ const CurveEditorPopover: React.FC<
           tempTransaction = undefined
         }
       },
-      permenantlySetValue(newCurve: string): void {
+      permanentlySetValue(newCurve: string): void {
         if (tempTransaction) {
           tempTransaction.discard()
           tempTransaction = undefined
@@ -282,7 +282,7 @@ const CurveEditorPopover: React.FC<
               props.onRequestClose()
             }
             if (e.key === 'Enter') {
-              fns.permenantlySetValue(filter)
+              fns.permanentlySetValue(filter)
               props.onRequestClose()
             }
           }}
@@ -302,7 +302,7 @@ const CurveEditorPopover: React.FC<
                     if (e.key === 'Escape') {
                       props.onRequestClose()
                     } else if (e.key === 'Enter') {
-                      fns.permenantlySetValue(preset.value)
+                      fns.permanentlySetValue(preset.value)
                       props.onRequestClose()
                     }
                     if (e.key === 'ArrowRight') {
@@ -358,7 +358,7 @@ const CurveEditorPopover: React.FC<
                   ref={optionsRef.current[preset.label]}
                   key={preset.label}
                   onClick={() => {
-                    fns.permenantlySetValue(preset.value)
+                    fns.permanentlySetValue(preset.value)
                     props.onRequestClose()
                   }}
                   // Temporarily apply on hover
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx
index 8ff691e..4586834 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx
@@ -57,7 +57,7 @@ const LengthEditorPopover: React.FC<{
           tempTransaction = undefined
         }
       },
-      permenantlySetValue(newLength: number): void {
+      permanentlySetValue(newLength: number): void {
         if (tempTransaction) {
           tempTransaction.discard()
           tempTransaction = undefined
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx
index 15ffa15..ba6dd9d 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx
@@ -55,7 +55,7 @@ const PlayheadPositionPopover: React.FC<{
           sequence.position = originalPosition
         }
       },
-      permenantlySetValue(newPosition: number): void {
+      permanentlySetValue(newPosition: number): void {
         if (tempPosition) {
           tempPosition = undefined
         }
diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
index 7f1099c..d7ab8e6 100644
--- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
@@ -105,7 +105,7 @@ const BasicNumberInput: React.FC<{
   value: number
   temporarilySetValue: (v: number) => void
   discardTemporaryValue: () => void
-  permenantlySetValue: (v: number) => void
+  permanentlySetValue: (v: number) => void
   className?: string
   range?: [min: number, max: number]
   isValid?: (v: number) => boolean
@@ -167,7 +167,7 @@ const BasicNumberInput: React.FC<{
         if (curState.valueBeforeEditing === value) {
           propsRef.current.discardTemporaryValue()
         } else {
-          propsRef.current.permenantlySetValue(value)
+          propsRef.current.permanentlySetValue(value)
         }
       }
     }
@@ -243,7 +243,7 @@ const BasicNumberInput: React.FC<{
         if (curState.valueBeforeDragging === value) {
           propsRef.current.discardTemporaryValue()
         } else {
-          propsRef.current.permenantlySetValue(value)
+          propsRef.current.permanentlySetValue(value)
         }
         stateRef.current = {mode: 'noFocus'}
       }
diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
index d17fade..f343444 100644
--- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
@@ -55,7 +55,7 @@ const BasicStringInput: React.FC<{
   value: string
   temporarilySetValue: (v: string) => void
   discardTemporaryValue: () => void
-  permenantlySetValue: (v: string) => void
+  permanentlySetValue: (v: string) => void
   className?: string
   isValid?: (v: string) => boolean
   inputRef?: MutableRefObject<HTMLInputElement | null>
@@ -112,7 +112,7 @@ const BasicStringInput: React.FC<{
         if (curState.valueBeforeEditing === value) {
           propsRef.current.discardTemporaryValue()
         } else {
-          propsRef.current.permenantlySetValue(value)
+          propsRef.current.permanentlySetValue(value)
         }
       }
     }
