Update CMS starter to use @framer/plugin

starters/cms/package.json

@@ -15,7 +15,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-plugin": "^3.10.0",
+        "@framer/plugin": "^4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

starters/cms/src/App.tsx

@@ -1,6 +1,6 @@
 import "./App.css"
 
-import { framer, type ManagedCollection } from "framer-plugin"
+import { framer, type ManagedCollection } from "@framer/plugin"
 import { useEffect, useLayoutEffect, useState } from "react"
 import { type DataSource, getDataSource } from "./data"
 import { FieldMapping } from "./FieldMapping"

starters/cms/src/FieldMapping.tsx

@@ -1,4 +1,4 @@
-import { framer, type ManagedCollection, type ManagedCollectionFieldInput, useIsAllowedTo } from "framer-plugin"
+import { framer, type ManagedCollection, type ManagedCollectionFieldInput, useIsAllowedTo } from "@framer/plugin"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { type DataSource, dataSourceOptions, mergeFieldsWithExistingFields, syncCollection, syncMethods } from "./data"
 

starters/cms/src/SelectDataSource.tsx

@@ -1,4 +1,4 @@
-import { framer } from "framer-plugin"
+import { framer } from "@framer/plugin"
 import { useState } from "react"
 import { type DataSource, dataSourceOptions, getDataSource } from "./data"
 

starters/cms/src/data.ts

@@ -5,7 +5,7 @@ import {
     type ManagedCollectionFieldInput,
     type ManagedCollectionItemInput,
     type ProtectedMethod,
-} from "framer-plugin"
+} from "@framer/plugin"
 
 export const PLUGIN_KEYS = {
     DATA_SOURCE_ID: "dataSourceId",

starters/cms/src/main.tsx

@@ -1,6 +1,6 @@
-import "framer-plugin/framer.css"
+import "@framer/plugin/framer.css"
 
-import { framer } from "framer-plugin"
+import { framer } from "@framer/plugin"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { App } from "./App.tsx"

yarn.lock

@@ -753,6 +753,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@framer/plugin@npm:^4":
+  version: 4.0.0
+  resolution: "@framer/plugin@npm:4.0.0"
+  peerDependencies:
+    csstype: ^3.1.1
+    react: ^18.2.0
+    react-dom: ^18.2.0
+  checksum: 10/5c1ad07452d71732d469e6badaf4b925b5c6ef1872e58768a1debffefbc925dabd2cff94b07def43548fcd8a4a598195c6c5fcd36a121c711be46c6e7f68167b
+  languageName: node
+  linkType: hard
+
 "@framer/vite-config@workspace:*, @framer/vite-config@workspace:packages/vite-config":
   version: 0.0.0-use.local
   resolution: "@framer/vite-config@workspace:packages/vite-config"
@@ -3822,13 +3833,13 @@ __metadata:
   resolution: "cms-starter@workspace:starters/cms"
   dependencies:
     "@eslint/js": "npm:^9.35.0"
+    "@framer/plugin": "npm:^4"
     "@types/react": "npm:^18.3.24"
     "@types/react-dom": "npm:^18.3.7"
     "@vitejs/plugin-react": "npm:^6.0.1"
     eslint: "npm:^9.35.0"
     eslint-plugin-react-hooks: "npm:^5.2.0"
     eslint-plugin-react-refresh: "npm:^0.4.20"
-    framer-plugin: "npm:^3.10.0"
     globals: "npm:^16.4.0"
     jiti: "npm:^2.5.1"
     prettier: "npm:^3.6.2"
@@ -5081,16 +5092,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-plugin@npm:^3.10.0":
-  version: 3.10.3
-  resolution: "framer-plugin@npm:3.10.3"
-  peerDependencies:
-    react: ^18.2.0
-    react-dom: ^18.2.0
-  checksum: 10/c677a261461cc3a79605cd74fc9de746de7c32e531a0c6a7aba0d5794af1c6c194cdea3576a6e74034c0228e7cc5a8ca8b0e40c213fe85e0dacece7cc01ce6c2
-  languageName: node
-  linkType: hard
-
 "fs-minipass@npm:^3.0.0":
   version: 3.0.3
   resolution: "fs-minipass@npm:3.0.3"