fix: omg I can't believe everything works

Signed-off-by: Saulo Vallory <me@saulo.engineer>

Author: svallory

packages/plugma/.cursor/rules/code-style.mdc

@@ -3,7 +3,7 @@ description: Preferences regarding code style
 globs: *.ts,*.js,*.svelte,*.tsx
 ---
 - Your notes folder is `.claude-notes` (at the root of the workspace or projects in monorepos) is yours to use. Only you will ever read the contents in there. Use it to store plans, task lists, notes, learnings, and important reminders for you.
-- Always use "~~~" for code blocks inside markdown files
+- When your response contains the code of a markdown file, code blocks inside said markdown file MUST use "~~~"
 - when importing node native modules, like fs or url, always prepend them with 'node:', like in 'node:fs' and 'node:url'
 - Always document exported functions, classes, types, etc with a robust TSDoc comment. Also document complex functions, even if not exported.
 - Use "for ... of" loops instead `.forEach`.

packages/plugma/.cursorrules

@@ -1,5 +1,5 @@
 - Your notes folder is `.claude-notes` (at the root of the workspace or projects in monorepos) is yours to use. Only you will ever read the contents in there. Use it to store plans, task lists, notes, learnings, and important reminders for you.
-- Always use "~~~" for NESTED code blocks
+- When your response contains the code of a markdown file, code blocks inside said markdown file MUST use "~~~"
 - when importing node native modules, like fs or url, always prepend them with 'node:', like in 'node:fs' and 'node:url'
 - Always document exported functions, classes, types, etc with a robust TSDoc comment. Also document complex functions, even if not exported.
 - Use "for ... of" loops instead `.forEach`.

packages/plugma/apps/dev-server/App.svelte

@@ -16,8 +16,8 @@
 	let message = null;
 	let isWebsocketServerActive = false;
 	let isWebsocketsEnabled = window.runtimeData.websockets || false;
+	let isServerActive = false;
 
-	// let ws = new WebSocket('ws://localhost:9001/ws')
 	let ws = setupWebSocket(null, window.runtimeData.websockets, true);
 	let url = `http://localhost:${window.runtimeData.port}`;
 
@@ -215,8 +215,6 @@
 		isWebsocketServerActive = false;
 	});
 
-	let isServerActive = true;
-
 	$: monitorUrl(url, null, (isActive) => {
 		isServerActive = isActive;
 	});
@@ -269,13 +267,22 @@
 {#if !(isInsideIframe || isInsideFigma)}
 	{#if isServerActive}
 		{#if !isWebsocketsEnabled}
-			<ServerStatus message="Websockets disababled"></ServerStatus>
+			<ServerStatus
+				message="Websockets disababled"
+				isConnected={isServerActive && isWebsocketServerActive}
+			/>
 		{:else if !isWebsocketServerActive}
-			<ServerStatus message="Connecting to websocket server..."></ServerStatus>
+			<ServerStatus
+				message="Connecting to websocket server..."
+				isConnected={isServerActive && isWebsocketServerActive}
+			/>
 		{:else if $pluginWindowClients.length < 1}
-			<ServerStatus message="Open plugin inside Figma"></ServerStatus>
+			<ServerStatus
+				message="Open plugin inside Figma"
+				isConnected={isServerActive && isWebsocketServerActive}
+			/>
 		{/if}
 	{:else}
-		<ServerStatus></ServerStatus>
+		<ServerStatus isConnected={isServerActive && isWebsocketServerActive} />
 	{/if}
 {/if}

packages/plugma/apps/dev-server/main.ts

@@ -1,8 +1,8 @@
 import App from './App.svelte';
 
-if (!PLUGMA_APP_NAME) {
-  throw new Error('PLUGMA_APP_NAME environment variable is not defined');
-}
+// if (!PLUGMA_APP_NAME) {
+//   throw new Error('PLUGMA_APP_NAME environment variable is not defined');
+// }
 
 const app = new App({
   // biome-ignore lint/style/noNonNullAssertion: <explanation>

packages/plugma/apps/figma-bridge/main.js

@@ -1,9 +1,9 @@
 import App from './App.svelte';
 import "./app.css";
 
-if (!PLUGMA_APP_NAME) {
-  throw new Error('PLUGMA_APP_NAME environment variable is not defined');
-}
+// if (!PLUGMA_APP_NAME) {
+//   throw new Error('PLUGMA_APP_NAME environment variable is not defined');
+// }
 
 const app = new App({
   // biome-ignore lint/style/noNonNullAssertion: <explanation>

packages/plugma/apps/figma-bridge/main.ts

@@ -37,10 +37,8 @@ export function customShowUI(
 
           const zoom = figma.viewport.zoom;
           options.position = {
-            x: figma.viewport.bounds.x + 12 / zoom,
-            y:
-              figma.viewport.bounds.y +
-              (figma.viewport.bounds.height - (80 + 12) / zoom),
+            x: figma.viewport.bounds.x + (12 / zoom),
+            y: figma.viewport.bounds.y + (figma.viewport.bounds.height - ((80 + 12) / zoom))
           };
         }
 

packages/plugma/apps/index.html

@@ -1,8 +1,3 @@
-/**
- * Global runtime data
- * Vite will inject the runtimeData object below
- */
-/*--[ RUNTIME_DATA ]--*/
 /**
  * Handles deletion of all plugin data from the root node
  */

packages/plugma/apps/main.ts

@@ -1,4 +1,4 @@
-//@index('./*', f => `export * from '${f.path}.js';`)
+//@index('./!(*.test).*', f => `export * from '${f.path}.js';`)
 export * from './delete-client-storage.js';
 export * from './delete-file-storage.js';
 export * from './delete-root-pluginData.js';
@@ -8,6 +8,5 @@ export * from './maximize-window.js';
 export * from './minimize-window.js';
 export * from './save-on-run-messages.js';
 export * from './save-window-settings.js';
-export * from './save-window-settings.test.js';
 export * from './setup.js';
 //@endindex

packages/plugma/apps/plugma-runtime/figma-api-interceptors/custom-show-ui.ts

@@ -19,12 +19,22 @@ import {
 	handleMinimizeWindow,
 	handleSaveWindowSettings
 } from './handlers/index.js';
+
 import type { PlugmaRuntimeData } from './types.js';
 
 // NOTE: the comment must come after the declare stmt
 // otherwise tsc will remove it
 export declare const runtimeData: PlugmaRuntimeData;
 
+/**
+ * Global runtime data
+ * Vite will inject the runtimeData object below
+ * DO NOT REMOVE THE COMMENT BELOW! IT IS A VITE INJECTION POINT
+ */
+/*--[ RUNTIME_DATA ]--*/
+
+export * from './figma-api-interceptors';
+
 /**
  * Map of event handlers for window management
  */

packages/plugma/apps/plugma-runtime/figma-api-interceptors/figma-api.d.ts

@@ -1,6 +1,6 @@
-import type { PluginOptions } from '#core/types.js';
+import type { PlugmaCommand, PlugmaRuntimeData } from '#core/types.js';
 
-export type PlugmaRuntimeData = PluginOptions;
+export type { PlugmaRuntimeData };
 
 /**
  * Interface for window settings that can be persisted
@@ -18,7 +18,7 @@ export interface WindowSettings {
 }
 
 export interface CommandHistory {
-  previousCommand: 'dev' | 'preview' | 'test' | null;
+  previousCommand: PlugmaCommand | null;
   previousInstanceId: string | null;
 }
 

packages/plugma/apps/plugma-runtime/handlers/delete-root-pluginData.ts

@@ -24,12 +24,8 @@ export async function getCommandHistory(): Promise<CommandHistory> {
   const previousCommand = commandHistory.previousCommand;
   const previousInstanceId = commandHistory.previousInstanceId;
 
-  // Update command history
-  commandHistory.previousCommand = runtimeData.command
-    ? runtimeData.command === 'build'
-      ? null
-      : runtimeData.command
-    : null;
+  // Set the current command as the new previous command for future retrievals
+  commandHistory.previousCommand = runtimeData.command ?? null;
   commandHistory.previousInstanceId = runtimeData.instanceId;
   await figma.clientStorage.setAsync('PLUGMA_COMMAND_HISTORY', commandHistory);
 

packages/plugma/apps/plugma-runtime/handlers/index.ts

@@ -31,6 +31,8 @@ export const DEFAULT_WINDOW_SETTINGS: {
   test: defaultSettings,
 } as const;
 
+const TOOLBAR_HEIGHT = 41;
+
 /**
  * Retrieves window settings from client storage based on the current command mode.
  * @param options - Optional UI options that may override stored settings
@@ -76,8 +78,8 @@ export async function getWindowSettings(
     pluginWindowSettings.height = 300;
     pluginWindowSettings.width = 400;
 
-    if (pluginWindowSettings?.toolbarEnabled) {
-      pluginWindowSettings.height = 341; // 300 + 41 (toolbar height)
+    if (pluginWindowSettings.toolbarEnabled) {
+      pluginWindowSettings.height += TOOLBAR_HEIGHT;
     }
   }
 

packages/plugma/apps/plugma-runtime/index.ts

@@ -14,19 +14,22 @@ export default defineConfig({
     rollupOptions: {
       output: {
         inlineDynamicImports: true,
+				// Prevents generating export default
+        exports: 'named'
       }
     },
+		target: 'es6',
     outDir: 'dist', // Vite default output directory
     minify: false,
     sourcemap: false,
-    emptyOutDir: true,
+    emptyOutDir: false,
   },
   plugins: [
     gatherBuildOutputs({
-      sourceDir: `dist`,
-      outputDir: '../../dist/apps',
-      // getOutputPath: (file) => path.join('plugma-runtime', file),
-      removeSourceDir: true,
+      from: `dist`,
+      to: '../../dist/apps',
+      transformPath: (file) => file.replace('.cjs', '.js'),
+      removeSource: false,
     })
   ],
 });

packages/plugma/apps/plugma-runtime/plugma-runtime.ts

@@ -1,11 +1,22 @@
 <script lang="ts">
-	export let message: string | null = null
+	export let message: string | null = null;
+	export let isConnected: boolean = false;
+
+	$: displayMessage = isConnected
+		? message || "Dev server active"
+		: "Dev server inactive";
 </script>
 
 <div id="plugma-status" class="container">
 	<div class="panel">
-		<div class="server-not-active">
-			<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<div class="server-status" class:active={isConnected}>
+			<svg
+				width="32"
+				height="32"
+				viewBox="0 0 32 32"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
 				<path
 					fill-rule="evenodd"
 					clip-rule="evenodd"
@@ -14,11 +25,7 @@
 					fill-opacity="0.8"
 				/>
 			</svg>
-			{#if message}
-				{message}
-			{:else}
-				<p>Dev server inactive</p>
-			{/if}
+			<p>{displayMessage}</p>
 		</div>
 	</div>
 </div>
@@ -43,15 +50,19 @@
 		font-display: optional;
 		font-size: 12px;
 		box-sizing: border-box;
-		/* 11/16 */
 		justify-content: center;
 		align-items: center;
 		height: 100%;
 	}
 
-	.server-not-active {
+	.server-status {
 		display: flex;
 		gap: 4px;
 		align-items: center;
+		color: var(--figma-color-text-danger);
+	}
+
+	.server-status.active {
+		color: var(--figma-color-text-success);
 	}
 </style>