feat: Add Document for Run frame JLCPCB Import (#292)

* feat: Doc for Runframe JLCPCB Import

* Rename Runframe import to editor import

* update layout

Author: Ayushjhawar8

docs/guides/importing-modules-and-chips/importing-from-jlcpcb.mdx

@@ -8,9 +8,54 @@ import YouTubeEmbed from '../../../src/components/YouTubeEmbed';
 
 ## Overview
 
-JLCPCB has a massive component catalog of 3d models and footprints.
+JLCPCB maintains a massive component catalog with 3D models and footprints for thousands of parts. You can import these components directly into your tscircuit projects using several methods.
 
-## Web Import
+## Import Using Editor Locally
+
+The easiest way to import JLCPCB components is using the editor's built-in import dialog when running `tsci dev`. This provides a modern search interface with real-time stock information.
+
+
+<figure>
+  <img src="/img/runframe-cli-setup.png" />
+  <figcaption>Run `tsci dev` to start the development server</figcaption>
+</figure>
+
+<figure>
+  <img src="/img/runframe-import-dialog.png" />
+  <figcaption>In the tsci dev environment, navigate to "File -> Import"</figcaption>
+</figure>
+
+<figure>
+  <img src="/img/runframe-jlcpcb-search.png" />
+  <figcaption>Go to the JLCPCB Parts tab and search by part number (e.g., 'C5100227') or keyword (e.g., 'ESP32')</figcaption>
+</figure>
+
+<figure>
+  <img src="/img/runframe-jlcpcb-results.png" />
+  <figcaption>Select component and click Import</figcaption>
+</figure>
+
+<YouTubeEmbed youtubeId="tFCGAa81KUs" />
+
+After importing, you can use the component in your circuit like this:
+
+### Example Usage
+
+```tsx
+import { ComponentName } from "@tsci/imported-component"
+
+export default () => (
+  <board width="10mm" height="10mm">
+    <ComponentName />
+  </board>
+)
+```
+
+:::tip Tip
+Using File > Import from the editor locally is recommended
+:::
+
+## Import Using Web UI
 
 You can import JLCPCB components on [tscircuit.com](https://tscircuit.com). After
 importing the snippet, it'll be given a package name like `@tsci/YOUR_NAME.CHIP_NAME`
@@ -53,25 +98,3 @@ export default () => (
   </board>
 )
 ```
-
-
-## CLI Import
-
-To import JLCPCB components using the tsci dev environment, follow these steps:
-
-1. Run `tsci dev` to start the development server
-2. In the tsci dev environment, navigate to "File -> Import"
-
-<YouTubeEmbed youtubeId="tFCGAa81KUs" />
-
-After importing, you can use the component in your circuit like this:
-
-```tsx
-import { ComponentName } from "@tsci/imported-component"
-
-export default () => (
-  <board width="10mm" height="10mm">
-    <ComponentName />
-  </board>
-)
-```