featL new asset images for mcp, fix image paths

Author: Justineo

README.md

@@ -1,8 +1,8 @@
 <p align="center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="assets/hero-dark.svg">
-    <source media="(prefers-color-scheme: light)" srcset="assets/hero-light.svg">
-    <img alt="Shows a screenshot of the extension panel." src="assets/hero-light.svg" width="540" height="200">
+    <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/hero-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/hero-light.svg">
+    <img alt="Shows a screenshot of the extension panel." src="packages/extension/assets/hero-light.svg" width="540" height="200">
   </picture>
 </p>
 
@@ -20,9 +20,9 @@
 
 <p align="center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="assets/code-dark.png">
-    <source media="(prefers-color-scheme: light)" srcset="assets/code-light.png">
-    <img alt="Shows a screenshot of the extension panel." src="assets/code-light.png" width="720">
+    <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/code-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/code-light.png">
+    <img alt="Shows a screenshot of the extension panel." src="packages/extension/assets/code-light.png" width="720">
   </picture>
 </p>
 
@@ -33,17 +33,17 @@
 ### Inspect CSS code
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="assets/code-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset="assets/code-light.png">
-  <img alt="Shows the CSS and JavaScript code for a selected element." src="assets/code-light.png" width="720">
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/code-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/code-light.png">
+  <img alt="Shows the CSS and JavaScript code for a selected element." src="packages/extension/assets/code-light.png" width="720">
 </picture>
 
 Select any element, and you can obtain the CSS code through the plugin's Code panel. In addition to standard CSS code, TemPad Dev also provides styles in the form of JavaScript objects, making it convenient for use in JSX and similar scenarios.
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="assets/unit-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset="assets/unit-light.png">
-  <img alt="Shows units and root font size settings in preferences." src="assets/unit-light.png" width="720">
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/unit-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/unit-light.png">
+  <img alt="Shows units and root font size settings in preferences." src="packages/extension/assets/unit-light.png" width="720">
 </picture>
 
 You can configure CSS units and root font size to convert `px` dimensions in CSS to `rem` units. You can also apply a `scale` factor to scale `px` values according to your handoff requirements.
@@ -54,29 +54,29 @@ You can configure CSS units and root font size to convert `px` dimensions in CSS
 ### Deep select mode
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="assets/deep-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset="assets/deep-light.png">
-  <img alt="Shows the deep select mode in preferences." src="assets/deep-light.png" width="720">
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/deep-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/deep-light.png">
+  <img alt="Shows the deep select mode in preferences." src="packages/extension/assets/deep-light.png" width="720">
 </picture>
 
 In Figma's read-only view, selecting nodes requires double-clicking to drill down, and it often takes repeated double-clicks to select the lowest-level node. Although Figma offers a <kbd>⌘</kbd> + click shortcut, many users are unaware of this feature and need to perform extra key operations each time. Therefore, TemPad Dev provides a deep select mode in preferences.
 
 ### Measure to selection mode
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="assets/measure-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset="assets/measure-light.png">
-  <img alt="Shows the measure to selection mode in preferences." src="assets/measure-light.png" width="720">
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/measure-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/measure-light.png">
+  <img alt="Shows the measure to selection mode in preferences." src="packages/extension/assets/measure-light.png" width="720">
 </picture>
 
 In Figma's read-only view, you need to hold <kbd>⌥</kbd> and move the cursor to display the spacing between other nodes and the selected node. For similar reasons to the deep select mode, TemPad Dev provides a measure to selection mode in preferences.
 
 ### Scroll selection into view
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="assets/scroll-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset="assets/scroll-light.png">
-  <img alt="Shows the scroll selection into view feature." src="assets/scroll-light.png" width="720">
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/scroll-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/scroll-light.png">
+  <img alt="Shows the scroll selection into view feature." src="packages/extension/assets/scroll-light.png" width="720">
 </picture>
 
 When you hover over a node name section in TemPad Dev's inspect panel, a corresponding button appears. Clicking it will scroll the current selection to the center of the Figma viewport. Figma has a similar <kbd>⇧2</kbd> shortcut, but it zooms in to fill the viewport, which often doesn't meet the needs. Figma actually exposes an interface in the plugin API to move and zoom to 100%, so we also provide this capability as a supplement.
@@ -86,9 +86,9 @@ When you hover over a node name section in TemPad Dev's inspect panel, a corresp
 ### Plugins
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="assets/plugins-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset="assets/plugins-light.png">
-  <img alt="Shows the plugins section in preferences." src="assets/plugins-light.png" width="720">
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/plugins-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/plugins-light.png">
+  <img alt="Shows the plugins section in preferences." src="packages/extension/assets/plugins-light.png" width="720">
 </picture>
 
 Plugins allow you to customize the built-in code output or add custom code blocks.
@@ -196,9 +196,15 @@ TemPad Dev ships an [MCP](https://modelcontextprotocol.io/) server so agents/IDE
 
 ### Setup guide
 
-1. Requirements: Node.js 18+ and TemPad Dev running in a Figma tab.
-2. In TemPad Dev, open **Preferences → MCP server** and toggle **Enable MCP server**.
-3. Use the quick actions in Preferences to install/connect, or add the server manually to your MCP client as a stdio command:
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/mcp-config-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/mcp-config-light.png">
+  <img alt="TemPad Dev MCP preferences panel." src="packages/extension/assets/mcp-config-light.png" width="480">
+</picture>
+
+1. **Requirements**: Node.js 18+ and TemPad Dev running in a Figma tab.
+2. In TemPad Dev, open **Preferences → MCP server**, then enable **Enable MCP server**.
+3. Install and connect using the quick actions in Preferences, or add the server manually to your MCP client as a stdio command:
 
    ```json
    {
@@ -211,9 +217,39 @@ TemPad Dev ships an [MCP](https://modelcontextprotocol.io/) server so agents/IDE
    }
    ```
 
-   For CLI-style installers, the equivalent commands are `claude mcp add --transport stdio "TemPad Dev" -- npx -y @tempad-dev/mcp@latest` or `codex mcp add "TemPad Dev" -- npx -y @tempad-dev/mcp@latest`.
+   If your client uses a CLI installer, these are equivalent:
+   - `claude mcp add --transport stdio "TemPad Dev" -- npx -y @tempad-dev/mcp@latest`
+   - `codex mcp add "TemPad Dev" -- npx -y @tempad-dev/mcp@latest`
+
+4. Keep the TemPad Dev tab active while using MCP. If you have multiple Figma files open (and therefore multiple TemPad Dev instances), click the MCP badge in the TemPad Dev panel to activate the correct file for your agent.
+
+### MCP connection status
+
+When MCP is enabled, a badge appears in the TemPad Dev panel title bar showing the current connection status:
+
+- **Unavailable**: The local MCP server is not configured or not running.
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/mcp-unavailable-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/mcp-unavailable-light.png">
+  <img alt="MCP status badge showing Unavailable." src="packages/extension/assets/mcp-unavailable-light.png" width="720">
+</picture>
+
+- **Inactive**: TemPad Dev is connected to a local MCP server, but this tab is not currently active because multiple Figma tabs are open. Click the badge to activate MCP for this tab (this deactivates MCP in other tabs).
 
-4. Keep the TemPad Dev tab active while using MCP. If you have multiple Figma files (and thus multiple TemPad Dev extensions) open, click the MCP badge in the TemPad Dev panel to activate the correct file for your agent.
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/mcp-inactive-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/mcp-inactive-light.png">
+  <img alt="MCP status badge showing Inactive." src="packages/extension/assets/mcp-inactive-light.png" width="720">
+</picture>
+
+- **Active**: The MCP server is running, and this tab is active and ready to respond to MCP tool calls.
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="packages/extension/assets/mcp-active-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="packages/extension/assets/mcp-active-light.png">
+  <img alt="MCP status badge showing Active." src="packages/extension/assets/mcp-active-light.png" width="720">
+</picture>
 
 ### Configuration
 
@@ -262,24 +298,14 @@ Except for the above-mentioned features, others are mostly consistent with the s
 <details>
 <summary><h3>Compatibility Updates</h3></summary>
 
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="assets/duplicate-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset="assets/duplicate-light.png">
-  <img align="right" alt="Choose “Duplicate to your drafts” to ensure standard mode instead of quirks mode." src="assets/duplicate-light.png" width="360">
-</picture>
-
 **2025.04.01**: Figma removed the `window.DebuggingHelpers.logSelected` API, which was used to extract style data. As a result, Quirks mode is no longer usable.
 
 **2024.11.04**: TemPad Dev now managed to bring back the `window.figma` API under view-only mode. But we still cannot guarantee the long-term validity of this feature. If Figma removes the related interface again, this mode will also become unavailable.
 
 **2024.04.08**: TemPad Dev successfully retrieved most style information using currently unblocked debug interfaces, providing a new [Quirks Mode](#quirks-mode). This mode does not rely on `window.figma` but instead parses debug logs to generate style code, with slight differences from the standard mode.
 
-**2024.04.03**: The Figma team adjusted the expected time from "in the coming weeks" to "in the coming months", effectively shelving the issue.
-
 **2024.03.20**: After we posted complaints on the Figma Community Forum, the Figma team stated that they would reinstate the `window.figma` interface in view-only mode in the coming weeks. You can track the progress of this issue on this [thread](https://forum.figma.com/t/figma-removed-window-figma-on-view-only-pages-today/67292).
 
-**2024.03.19**: Figma removed the `window.figma` interface in view-only mode. As a result, we can no longer seamlessly view information and code for Figma elements in view-only mode.
-
 </details>
 
 </details>