From 95de8a82e02e523c2d612540d6e5fb082c8ccec0 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Fri, 2 Feb 2024 17:52:56 +0900
Subject: [PATCH 1/4] feat: Extend getRaw to return customType

---
 .../component/state/__tests__/format.spec.ts  | 19 +++++++------
 .../src/core/component/state/format.ts        | 28 ++++++++++++++-----
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/devtools-kit/src/core/component/state/__tests__/format.spec.ts b/packages/devtools-kit/src/core/component/state/__tests__/format.spec.ts
index a63eb35f..af7d820b 100644
--- a/packages/devtools-kit/src/core/component/state/__tests__/format.spec.ts
+++ b/packages/devtools-kit/src/core/component/state/__tests__/format.spec.ts
@@ -1,7 +1,8 @@
 import * as format from '../format'
+import { customTypeEnums } from '../../types'
 import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED } from '../constants'
 
-describe('format: displayText and rawValue can be calculated by formatInspectorStateValue, getRawValue', () => {
+describe('format: displayText and rawValue can be calculated by formatInspectorStateValue, getRaw', () => {
   describe('type: literals', () => {
     // eslint-disable-next-line test/consistent-test-it
     test.each([
@@ -16,7 +17,7 @@ describe('format: displayText and rawValue can be calculated by formatInspectorS
       { literal: UNDEFINED, displayText: 'undefined' },
     ])('type: %s', (value) => {
       const displayText = format.formatInspectorStateValue(value.literal)
-      const rawValue = format.getRawValue(value.literal).value
+      const rawValue = format.getRaw(value.literal).value
 
       expect(displayText).toBe(value.displayText)
       expect(rawValue).toBe(value.literal)
@@ -26,7 +27,7 @@ describe('format: displayText and rawValue can be calculated by formatInspectorS
   it('type: plain object', () => {
     const value = { foo: 'bar' }
     const displayText = format.formatInspectorStateValue(value)
-    const rawValue = format.getRawValue(value).value
+    const rawValue = format.getRaw(value).value
 
     expect(displayText).toBe('Object')
     expect(rawValue).toEqual(value)
@@ -35,7 +36,7 @@ describe('format: displayText and rawValue can be calculated by formatInspectorS
   it('type: array', () => {
     const value = ['foo', { bar: 'baz' }]
     const displayText = format.formatInspectorStateValue(value)
-    const rawValue = format.getRawValue(value).value
+    const rawValue = format.getRaw(value).value
 
     expect(displayText).toBe('Array[2]')
     expect(rawValue).toEqual(value)
@@ -45,7 +46,7 @@ describe('format: displayText and rawValue can be calculated by formatInspectorS
     it('type: common custom', () => {
       const value = { _custom: { displayText: 'custom-display', value: Symbol(123) } }
       const displayText = format.formatInspectorStateValue(value)
-      const rawValue = format.getRawValue(value).value
+      const rawValue = format.getRaw(value).value
 
       expect(displayText).toBe(value._custom.displayText)
       expect(rawValue).toEqual(value._custom.value)
@@ -62,7 +63,7 @@ describe('format: displayText and rawValue can be calculated by formatInspectorS
       }
 
       const displayText = format.formatInspectorStateValue(value)
-      const rawValue = format.getRawValue(value).value
+      const rawValue = format.getRaw(value).value
 
       expect(displayText).toBe(value._custom.value._custom.displayText)
       expect(rawValue).toEqual(value._custom.value._custom.value)
@@ -87,8 +88,9 @@ describe('format: toEdit', () => {
     { value: { foo: NAN }, target: '{"foo":NaN}' },
     { value: { foo: NEGATIVE_INFINITY }, target: '{"foo":-Infinity}' },
     { value: { foo: UNDEFINED }, target: '{"foo":undefined}' },
+    { value: '123', customType: 'bigint' as customTypeEnums, target: '123' },
   ])('value: $value will be deserialized to target', (value) => {
-    const deserialized = format.toEdit(value.value)
+    const deserialized = format.toEdit(value.value, value.customType)
     expect(deserialized).toBe(value.target)
   })
 })
@@ -113,8 +115,9 @@ describe('format: toSubmit', () => {
     { value: '{"foo":undefined}', target: {} },
     // Regex test: The token in key field kept untouched.
     { value: '{"undefined": NaN }', target: { undefined: Number.NaN } },
+    { value: '123', customType: 'bigint' as customTypeEnums, target: BigInt(123) },
   ])('value: $value will be serialized to target', (value) => {
-    const serialized = format.toSubmit(value.value)
+    const serialized = format.toSubmit(value.value, value.customType)
     expect(serialized).toStrictEqual(value.target)
   })
 })
diff --git a/packages/devtools-kit/src/core/component/state/format.ts b/packages/devtools-kit/src/core/component/state/format.ts
index df4cf0c1..7a686176 100644
--- a/packages/devtools-kit/src/core/component/state/format.ts
+++ b/packages/devtools-kit/src/core/component/state/format.ts
@@ -1,4 +1,4 @@
-import { InspectorCustomState, InspectorState } from '../types'
+import { InspectorCustomState, InspectorState, customTypeEnums } from '../types'
 import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED, rawTypeRE, specialTypeRE } from './constants'
 import { isPlainObject } from './is'
 import { escape, internalStateTokenToString, replaceStringToToken, replaceTokenToString } from './util'
@@ -87,30 +87,44 @@ export function formatInspectorStateValue(value, quotes = false) {
   return value
 }
 
-export function getRawValue(value: InspectorState['value']) {
+export function getRaw(value: InspectorState['value']): {
+  value: object | string | number | boolean | null
+  inherit: {} | { abstract: true }
+  customType?: customTypeEnums
+} {
+  let customType: customTypeEnums
   const isCustom = getInspectorStateValueType(value) === 'custom'
   let inherit = {}
   if (isCustom) {
     const data = value as InspectorCustomState
     const customValue = data._custom?.value
+    const currentCustomType = data._custom?.type
     const nestedCustom = typeof customValue === 'object' && customValue !== null && '_custom' in customValue
-      ? getRawValue(customValue)
-      : { inherit: undefined, value: undefined }
+      ? getRaw(customValue)
+      : { inherit: undefined, value: undefined, customType: undefined }
     inherit = nestedCustom.inherit || data._custom?.fields || {}
     value = nestedCustom.value || customValue as string
+    customType = nestedCustom.customType || currentCustomType as customTypeEnums
   }
   // @ts-expect-error @TODO: type
   if (value && value._isArray)
     // @ts-expect-error @TODO: type
     value = value.items
 
-  return { value, inherit }
+  // @ts-expect-error customType map be assigned as undefined.
+  return { value, inherit, customType }
 }
 
-export function toEdit(value: unknown) {
+export function toEdit(value: unknown, customType?: customTypeEnums) {
+  if (customType === 'bigint')
+    return value as string
+
   return replaceTokenToString(JSON.stringify(value))
 }
 
-export function toSubmit(value: string) {
+export function toSubmit(value: string, customType?: customTypeEnums) {
+  if (customType === 'bigint')
+    return BigInt(value)
+
   return JSON.parse(replaceStringToToken(value), reviver)
 }

From 24762a73cb2a5f9bb67b1a087e856ddacb4c267e Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Fri, 2 Feb 2024 17:54:55 +0900
Subject: [PATCH 2/4] feat: Add type customTypeEnums

---
 .../src/core/component/state/custom.ts           | 16 ++++++++--------
 .../src/core/component/types/custom.ts           |  1 +
 .../src/core/component/types/index.ts            |  1 +
 3 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 packages/devtools-kit/src/core/component/types/custom.ts

diff --git a/packages/devtools-kit/src/core/component/state/custom.ts b/packages/devtools-kit/src/core/component/state/custom.ts
index 21cb1603..b7b7cb8c 100644
--- a/packages/devtools-kit/src/core/component/state/custom.ts
+++ b/packages/devtools-kit/src/core/component/state/custom.ts
@@ -1,4 +1,4 @@
-import type { InspectorState } from '../types'
+import type { InspectorState, customTypeEnums } from '../types'
 import { getComponentName, getInstanceName } from '../general/util'
 import { processInstanceState } from './process'
 import { escape, getSetupStateType, toRaw } from './util'
@@ -21,7 +21,7 @@ export function getFunctionDetails(func: Function) {
   const name = typeof func.name === 'string' ? func.name : ''
   return {
     _custom: {
-      type: 'function',
+      type: 'function' satisfies customTypeEnums,
       displayText: `<span style="opacity:.5;">function</span> ${escape(name)}${args}`,
       tooltipText: string.trim() ? `<pre>${string}</pre>` : null,
     },
@@ -64,7 +64,7 @@ export function getSetDetails(val: Set<unknown>) {
   const list = Array.from(val)
   return {
     _custom: {
-      type: 'set',
+      type: 'set' satisfies customTypeEnums,
       displayText: `Set[${list.length}]`,
       value: list,
       readOnly: true,
@@ -120,7 +120,7 @@ function namedNodeMapToObject(map: NamedNodeMap) {
 export function getStoreDetails(store) {
   return {
     _custom: {
-      type: 'store',
+      type: 'store' satisfies customTypeEnums,
       displayText: 'Store',
       value: {
         state: store.state,
@@ -179,7 +179,7 @@ export function getComponentDefinitionDetails(definition) {
   }
   return {
     _custom: {
-      type: 'component-definition',
+      type: 'component-definition' satisfies customTypeEnums,
       displayText: display,
       tooltipText: 'Component definition',
       ...definition.__file
@@ -195,7 +195,7 @@ export function getHTMLElementDetails(value: HTMLElement) {
   try {
     return {
       _custom: {
-        type: 'HTMLElement',
+        type: 'HTMLElement' satisfies customTypeEnums,
         displayText: `<span class="opacity-30">&lt;</span><span class="text-blue-500">${value.tagName.toLowerCase()}</span><span class="opacity-30">&gt;</span>`,
         value: namedNodeMapToObject(value.attributes),
       },
@@ -204,7 +204,7 @@ export function getHTMLElementDetails(value: HTMLElement) {
   catch (e) {
     return {
       _custom: {
-        type: 'HTMLElement',
+        type: 'HTMLElement' satisfies customTypeEnums,
         displayText: `<span class="text-blue-500">${String(value)}</span>`,
       },
     }
@@ -232,7 +232,7 @@ export function getObjectDetails(object: Record<string, any>) {
   if (typeof object.__asyncLoader === 'function') {
     return {
       _custom: {
-        type: 'component-definition',
+        type: 'component-definition' satisfies customTypeEnums,
         display: 'Async component definition',
       },
     }
diff --git a/packages/devtools-kit/src/core/component/types/custom.ts b/packages/devtools-kit/src/core/component/types/custom.ts
new file mode 100644
index 00000000..f4269f14
--- /dev/null
+++ b/packages/devtools-kit/src/core/component/types/custom.ts
@@ -0,0 +1 @@
+export type customTypeEnums = 'function' | 'bigint' | 'map' | 'set' | 'store' | 'router' | 'component' | 'component-definition' | 'HTMLElement' | 'component-definition'
diff --git a/packages/devtools-kit/src/core/component/types/index.ts b/packages/devtools-kit/src/core/component/types/index.ts
index a0dcea7a..3c7d5038 100644
--- a/packages/devtools-kit/src/core/component/types/index.ts
+++ b/packages/devtools-kit/src/core/component/types/index.ts
@@ -2,3 +2,4 @@ export * from './state'
 export * from './tree'
 export * from './editor'
 export * from './bounding-rect'
+export * from './custom'

From 37c0dcb342b5ca3e6f1a6e008fa39306dc03dba3 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Fri, 2 Feb 2024 17:57:19 +0900
Subject: [PATCH 3/4] feat: Enable edit on bigint

---
 .../inspector/InspectorDataField/Actions.vue  | 23 +++++++++++++------
 .../InspectorDataField/EditInput.vue          | 12 +++++-----
 .../inspector/InspectorStateField.vue         | 20 ++++++++--------
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/components/inspector/InspectorDataField/Actions.vue b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
index e57e465f..f6f3e73c 100644
--- a/packages/client/src/components/inspector/InspectorDataField/Actions.vue
+++ b/packages/client/src/components/inspector/InspectorDataField/Actions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { toRaw } from 'vue'
 import { VueButton, VueDropdown, VueDropdownButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
-import { getRawValue } from '@vue/devtools-kit'
+import { getRaw } from '@vue/devtools-kit'
 import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
 import type { ButtonProps } from '@vue/devtools-ui/dist/types/src/components/Button'
 import { useDevToolsBridgeRpc } from '@vue/devtools-core'
@@ -30,7 +30,9 @@ const { copy, isSupported } = useClipboard()
 
 const popupVisible = ref(false)
 
-const rawValue = computed(() => getRawValue(props.data.value).value)
+const raw = computed(() => getRaw(props.data.value))
+const rawValue = computed(() => raw.value.value)
+const customType = computed(() => raw.value.customType)
 const dataType = computed(() => typeof rawValue.value)
 
 const iconButtonProps = {
@@ -56,6 +58,13 @@ function quickEdit(v: unknown, remove: boolean = false) {
     },
   } satisfies InspectorStateEditorPayload)
 }
+
+function quickEditNum(v: number | string, offset: 1 | -1) {
+  const target = typeof v === 'number'
+    ? v + offset
+    : BigInt(v) + BigInt(offset)
+  quickEdit(target)
+}
 </script>
 
 <template>
@@ -94,14 +103,14 @@ function quickEdit(v: unknown, remove: boolean = false) {
           <VueIcon :icon="rawValue ? 'i-material-symbols-check-box-sharp' : 'i-material-symbols-check-box-outline-blank-sharp'" />
         </template>
       </VueButton>
-      <!-- increment/decrement button, numeric value only -->
-      <template v-else-if="dataType === 'number'">
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit((rawValue as number) + 1)">
+      <!-- increment/decrement button, numeric/bigint -->
+      <template v-else-if="dataType === 'number' || customType === 'bigint'">
+        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEditNum(rawValue as number | string, 1)">
           <template #icon>
             <VueIcon icon="i-carbon-add" />
           </template>
         </VueButton>
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit((rawValue as number) - 1)">
+        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEditNum(rawValue as number | string, -1)">
           <template #icon>
             <VueIcon icon="i-carbon-subtract" />
           </template>
@@ -129,7 +138,7 @@ function quickEdit(v: unknown, remove: boolean = false) {
       <template #popper>
         <div class="w160px py5px">
           <VueDropdownButton
-            @click="copy(dataType === 'object' ? JSON.stringify(rawValue) : rawValue.toString())"
+            @click="copy(typeof rawValue === 'object' ? JSON.stringify(rawValue) : rawValue.toString())"
           >
             <template #icon>
               <VueIcon icon="i-material-symbols-copy-all-rounded" class="mt4px" />
diff --git a/packages/client/src/components/inspector/InspectorDataField/EditInput.vue b/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
index c05049aa..a9168b95 100644
--- a/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
+++ b/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { VueButton, VueIcon, VueInput, VTooltip as vTooltip } from '@vue/devtools-ui'
 import { debounce } from 'perfect-debounce'
-import { toSubmit } from '@vue/devtools-kit'
+import { customTypeEnums, toSubmit } from '@vue/devtools-kit'
 
 const props = withDefaults(defineProps<{
   modelValue: string
-  type: string // typeof value
+  rawType?: customTypeEnums
   showActions?: boolean
   autoFocus?: boolean
 }>(), {
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   'cancel': []
-  'submit': [dataType: string]
+  'submit': []
   'update:modelValue': [value: string]
 }>()
 
@@ -28,14 +28,14 @@ watchEffect(() => {
   if (escape.value)
     emit('cancel')
   else if (enter.value)
-    emit('submit', props.type)
+    emit('submit')
 })
 
 const value = useVModel(props, 'modelValue', emit)
 
 function tryToParseJSONString(v: unknown) {
   try {
-    toSubmit(v as string)
+    toSubmit(v as string, props.rawType)
     return true
   }
   catch {
@@ -67,7 +67,7 @@ watch(value, checkWarning())
         <VueButton
           v-tooltip="{
             content: 'Enter to submit change',
-          }" size="mini" flat class="p2px!" @click.stop="$emit('submit', type)"
+          }" size="mini" flat class="p2px!" @click.stop="$emit('submit')"
         >
           <template #icon>
             <VueIcon icon="i-material-symbols-save" />
diff --git a/packages/client/src/components/inspector/InspectorStateField.vue b/packages/client/src/components/inspector/InspectorStateField.vue
index 5e044ccc..d9ff0c97 100644
--- a/packages/client/src/components/inspector/InspectorStateField.vue
+++ b/packages/client/src/components/inspector/InspectorStateField.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { InspectorCustomState, InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
 import { isArray, isObject, sortByKey } from '@vue/devtools-shared'
-import { formatInspectorStateValue, getInspectorStateValueType, getRawValue, toEdit, toSubmit } from '@vue/devtools-kit'
+import { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
 import { useDevToolsBridgeRpc } from '@vue/devtools-core'
 import { VueButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
 import Actions from './InspectorDataField/Actions.vue'
@@ -50,7 +50,7 @@ const normalizedValue = computed(() => {
   }
 })
 
-const rawValue = computed(() => getRawValue(props.data.value))
+const rawValue = computed(() => getRaw(props.data.value))
 
 const limit = ref(STATE_FIELDS_LIMIT_SIZE)
 
@@ -113,14 +113,14 @@ const { editingType, editing, editingText, toggleEditing, nodeId } = useStateEdi
 watch(() => editing.value, (v) => {
   if (v) {
     const { value } = rawValue.value
-    editingText.value = toEdit(value)
+    editingText.value = toEdit(value, rawValue.value.customType)
   }
   else {
     editingText.value = ''
   }
 })
 
-function submit(dataType: string) {
+function submit() {
   const data = props.data
   bridgeRpc.editInspectorState({
     path: data.key.split('.'),
@@ -129,8 +129,8 @@ function submit(dataType: string) {
     nodeId,
     state: {
       newKey: null!,
-      type: dataType,
-      value: toSubmit(editingText.value),
+      type: editingType.value,
+      value: toSubmit(editingText.value, rawValue.value.customType),
     },
   } satisfies InspectorStateEditorPayload)
   toggleEditing()
@@ -173,7 +173,7 @@ const { isHovering } = useHover(() => containerRef.value)
       <div>
         <span overflow-hidden text-ellipsis whitespace-nowrap state-key>{{ normalizedDisplayedKey }}</span>
         <span mx-1>:</span>
-        <EditInput v-if="editing" v-model="editingText" :type="editingType" @cancel="toggleEditing" @submit="submit" />
+        <EditInput v-if="editing" v-model="editingText" :raw-type="rawValue.customType" @cancel="toggleEditing" @submit="submit" />
         <template v-else>
           <span :class="stateFormatClass">
             <span v-html="normalizedValue" />
@@ -191,7 +191,7 @@ const { isHovering } = useHover(() => containerRef.value)
           <ExpandIcon :value="isExpanded" absolute left--6 group-hover:text-white />
           <span overflow-hidden text-ellipsis whitespace-nowrap state-key>{{ normalizedDisplayedKey }}</span>
           <span mx-1>:</span>
-          <EditInput v-if="editing" v-model="editingText" :type="editingType" @cancel="toggleEditing" @submit="submit" />
+          <EditInput v-if="editing" v-model="editingText" :raw-type="rawValue.customType" @cancel="toggleEditing" @submit="submit" />
           <template v-else>
             <span :class="stateFormatClass">
               <span v-html="normalizedValue" />
@@ -214,10 +214,10 @@ const { isHovering } = useHover(() => containerRef.value)
           </VueButton>
           <div v-if="draftingNewProp.enable" :style="{ paddingLeft: `${(depth + 1) * 15 + 4}px` }">
             <span overflow-hidden text-ellipsis whitespace-nowrap state-key>
-              <EditInput v-model="draftingNewProp.key" type="string" :show-actions="false" />
+              <EditInput v-model="draftingNewProp.key" :show-actions="false" />
             </span>
             <span mx-1>:</span>
-            <EditInput v-model="draftingNewProp.value" type="string" :auto-focus="false" @cancel="resetDrafting" @submit="submitDrafting" />
+            <EditInput v-model="draftingNewProp.value" :auto-focus="false" @cancel="resetDrafting" @submit="submitDrafting" />
           </div>
         </div>
       </div>

From 8e010db5fb488894ada638d246a0a10dd01a3a1c Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Fri, 2 Feb 2024 18:09:17 +0900
Subject: [PATCH 4/4] fix: Rename variables

---
 .../inspector/InspectorDataField/EditInput.vue |  4 ++--
 .../inspector/InspectorStateField.vue          | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/inspector/InspectorDataField/EditInput.vue b/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
index a9168b95..68a1c3d3 100644
--- a/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
+++ b/packages/client/src/components/inspector/InspectorDataField/EditInput.vue
@@ -5,7 +5,7 @@ import { customTypeEnums, toSubmit } from '@vue/devtools-kit'
 
 const props = withDefaults(defineProps<{
   modelValue: string
-  rawType?: customTypeEnums
+  customType?: customTypeEnums
   showActions?: boolean
   autoFocus?: boolean
 }>(), {
@@ -35,7 +35,7 @@ const value = useVModel(props, 'modelValue', emit)
 
 function tryToParseJSONString(v: unknown) {
   try {
-    toSubmit(v as string, props.rawType)
+    toSubmit(v as string, props.customType)
     return true
   }
   catch {
diff --git a/packages/client/src/components/inspector/InspectorStateField.vue b/packages/client/src/components/inspector/InspectorStateField.vue
index d9ff0c97..ea19776e 100644
--- a/packages/client/src/components/inspector/InspectorStateField.vue
+++ b/packages/client/src/components/inspector/InspectorStateField.vue
@@ -50,12 +50,12 @@ const normalizedValue = computed(() => {
   }
 })
 
-const rawValue = computed(() => getRaw(props.data.value))
+const raw = computed(() => getRaw(props.data.value))
 
 const limit = ref(STATE_FIELDS_LIMIT_SIZE)
 
 const normalizedChildField = computed(() => {
-  const { value, inherit } = rawValue.value
+  const { value, inherit } = raw.value
   let displayedValue: any[]
   if (isArray(value)) {
     const sliced = value.slice(0, limit.value)
@@ -86,7 +86,7 @@ const normalizedChildField = computed(() => {
 })
 
 const fieldsCount = computed(() => {
-  const { value } = rawValue.value
+  const { value } = raw.value
   if (isArray(value))
     return value.length
   else if (isObject(value))
@@ -112,8 +112,8 @@ const { editingType, editing, editingText, toggleEditing, nodeId } = useStateEdi
 
 watch(() => editing.value, (v) => {
   if (v) {
-    const { value } = rawValue.value
-    editingText.value = toEdit(value, rawValue.value.customType)
+    const { value } = raw.value
+    editingText.value = toEdit(value, raw.value.customType)
   }
   else {
     editingText.value = ''
@@ -130,7 +130,7 @@ function submit() {
     state: {
       newKey: null!,
       type: editingType.value,
-      value: toSubmit(editingText.value, rawValue.value.customType),
+      value: toSubmit(editingText.value, raw.value.customType),
     },
   } satisfies InspectorStateEditorPayload)
   toggleEditing()
@@ -142,7 +142,7 @@ const { addNewProp: addNewPropApi, draftingNewProp, resetDrafting } = useStateEd
 function addNewProp(type: EditorAddNewPropType) {
   if (!isExpanded.value)
     toggleCollapse()
-  addNewPropApi(type, rawValue.value.value)
+  addNewPropApi(type, raw.value.value)
 }
 
 function submitDrafting() {
@@ -173,7 +173,7 @@ const { isHovering } = useHover(() => containerRef.value)
       <div>
         <span overflow-hidden text-ellipsis whitespace-nowrap state-key>{{ normalizedDisplayedKey }}</span>
         <span mx-1>:</span>
-        <EditInput v-if="editing" v-model="editingText" :raw-type="rawValue.customType" @cancel="toggleEditing" @submit="submit" />
+        <EditInput v-if="editing" v-model="editingText" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
         <template v-else>
           <span :class="stateFormatClass">
             <span v-html="normalizedValue" />
@@ -191,7 +191,7 @@ const { isHovering } = useHover(() => containerRef.value)
           <ExpandIcon :value="isExpanded" absolute left--6 group-hover:text-white />
           <span overflow-hidden text-ellipsis whitespace-nowrap state-key>{{ normalizedDisplayedKey }}</span>
           <span mx-1>:</span>
-          <EditInput v-if="editing" v-model="editingText" :raw-type="rawValue.customType" @cancel="toggleEditing" @submit="submit" />
+          <EditInput v-if="editing" v-model="editingText" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
           <template v-else>
             <span :class="stateFormatClass">
               <span v-html="normalizedValue" />