@bitovi/vybit 0.11.1 → 0.11.2

package/overlay/dist/overlay.js

@@ -2132,21 +2132,37 @@ ${pad}</${tag}>`;
     }
     if (newClass) {
       try {
+        console.log("[vybit-patcher] Fetching CSS for class:", newClass, "from", `${serverOrigin}/css`);
         const res = await fetch(`${serverOrigin}/css`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ classes: [newClass] })
         });
         if (gen !== previewGeneration) return;
-        const { css } = await res.json();
-        if (gen !== previewGeneration) return;
-        if (!previewStyleEl) {
-          previewStyleEl = document.createElement("style");
-          previewStyleEl.setAttribute("data-tw-preview", "");
-          document.head.appendChild(previewStyleEl);
+        if (!res.ok) {
+          const errBody = await res.text();
+          console.error("[vybit-patcher] CSS fetch FAILED:", res.status, errBody);
+        } else {
+          const { css } = await res.json();
+          console.log("[vybit-patcher] CSS received for", newClass, ":", css ? `${css.length} chars` : "(empty)");
+          console.log("[vybit-patcher] CSS content:", css || "(none)");
+          if (gen !== previewGeneration) return;
+          if (!previewStyleEl) {
+            previewStyleEl = document.createElement("style");
+            previewStyleEl.setAttribute("data-tw-preview", "");
+            document.head.appendChild(previewStyleEl);
+            console.log("[vybit-patcher] Created <style data-tw-preview> in document.head");
+          }
+          previewStyleEl.textContent = css;
+          console.log(
+            "[vybit-patcher] Style element in DOM:",
+            document.head.contains(previewStyleEl),
+            "textContent length:",
+            previewStyleEl.textContent?.length
+          );
         }
-        previewStyleEl.textContent = css;
-      } catch {
+      } catch (err) {
+        console.error("[vybit-patcher] CSS fetch error:", err);
       }
     }
     if (gen !== previewGeneration) return;
@@ -2159,6 +2175,13 @@ ${pad}</${tag}>`;
       if (oldClass) node.classList.remove(oldClass);
       if (newClass) node.classList.add(newClass);
     }
+    console.log("[vybit-patcher] Applied class swap:", oldClass, "\u2192", newClass, "on", elements.length, "elements");
+    if (elements[0]) {
+      console.log("[vybit-patcher] Element className after swap:", elements[0].className);
+      const computed = window.getComputedStyle(elements[0]);
+      if (newClass.startsWith("bg-")) console.log("[vybit-patcher] Computed background:", computed.backgroundColor);
+      if (newClass.startsWith("p-") || newClass.startsWith("px-") || newClass.startsWith("py-")) console.log("[vybit-patcher] Computed padding:", computed.padding);
+    }
   }
   async function applyPreviewBatch(elements, pairs, serverOrigin) {
     const gen = ++previewGeneration;
@@ -2171,21 +2194,37 @@ ${pad}</${tag}>`;
     const newClasses = pairs.map((p) => p.newClass).filter(Boolean);
     if (newClasses.length > 0) {
       try {
+        console.log("[vybit-patcher] Fetching CSS for batch:", newClasses, "from", `${serverOrigin}/css`);
         const res = await fetch(`${serverOrigin}/css`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ classes: newClasses })
         });
         if (gen !== previewGeneration) return;
-        const { css } = await res.json();
-        if (gen !== previewGeneration) return;
-        if (!previewStyleEl) {
-          previewStyleEl = document.createElement("style");
-          previewStyleEl.setAttribute("data-tw-preview", "");
-          document.head.appendChild(previewStyleEl);
+        if (!res.ok) {
+          const errBody = await res.text();
+          console.error("[vybit-patcher] CSS batch fetch FAILED:", res.status, errBody);
+        } else {
+          const { css } = await res.json();
+          console.log("[vybit-patcher] CSS batch received:", css ? `${css.length} chars` : "(empty)");
+          console.log("[vybit-patcher] CSS batch content:", css || "(none)");
+          if (gen !== previewGeneration) return;
+          if (!previewStyleEl) {
+            previewStyleEl = document.createElement("style");
+            previewStyleEl.setAttribute("data-tw-preview", "");
+            document.head.appendChild(previewStyleEl);
+            console.log("[vybit-patcher] Created <style data-tw-preview> in document.head");
+          }
+          previewStyleEl.textContent = css;
+          console.log(
+            "[vybit-patcher] Style element in DOM:",
+            document.head.contains(previewStyleEl),
+            "textContent length:",
+            previewStyleEl.textContent?.length
+          );
         }
-        previewStyleEl.textContent = css;
-      } catch {
+      } catch (err) {
+        console.error("[vybit-patcher] CSS batch fetch error:", err);
       }
     }
     if (gen !== previewGeneration) return;
@@ -4338,14 +4377,20 @@ ${pad}</${tag}>`;
           setSelectMode(false);
         }
       } else if (msg.type === "PATCH_PREVIEW" && currentEquivalentNodes.length > 0) {
+        console.log("[vybit-overlay] PATCH_PREVIEW:", msg.oldClass, "\u2192", msg.newClass, "nodes:", currentEquivalentNodes.length);
         applyPreview(
           currentEquivalentNodes,
           msg.oldClass,
           msg.newClass,
           SERVER_ORIGIN
         );
+      } else if (msg.type === "PATCH_PREVIEW" && currentEquivalentNodes.length === 0) {
+        console.warn("[vybit-overlay] PATCH_PREVIEW DROPPED \u2014 no selected elements! oldClass:", msg.oldClass, "newClass:", msg.newClass);
       } else if (msg.type === "PATCH_PREVIEW_BATCH" && currentEquivalentNodes.length > 0) {
+        console.log("[vybit-overlay] PATCH_PREVIEW_BATCH:", msg.pairs, "nodes:", currentEquivalentNodes.length);
         applyPreviewBatch(currentEquivalentNodes, msg.pairs, SERVER_ORIGIN);
+      } else if (msg.type === "PATCH_PREVIEW_BATCH" && currentEquivalentNodes.length === 0) {
+        console.warn("[vybit-overlay] PATCH_PREVIEW_BATCH DROPPED \u2014 no selected elements!", msg.pairs);
       } else if (msg.type === "PATCH_REVERT") {
         revertPreview();
       } else if (msg.type === "PATCH_REVERT_STAGED" && currentEquivalentNodes.length > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitovi/vybit",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "Browser overlay + inspector panel + MCP server for visually editing Tailwind CSS classes on a running React app",
   "keywords": [
     "tailwind",

package/server/app.ts

@@ -53,12 +53,17 @@ export function createApp(packageRoot: string, storybookUrl: string | null = nul
 
   app.post("/css", express.json(), async (req, res) => {
     const { classes } = req.body as { classes?: unknown };
+    console.error("[http] POST /css — requested classes:", classes);
     if (!Array.isArray(classes) || classes.some((c) => typeof c !== "string")) {
+      console.error("[http] POST /css — invalid request body");
       res.status(400).json({ error: "classes must be an array of strings" });
       return;
     }
     try {
       const css = await generateCssForClasses(classes as string[]);
+      console.error(`[http] POST /css — generated ${css.length} chars for [${classes.join(', ')}]`);
+      if (css.length < 500) console.error("[http] POST /css — full CSS:", css);
+      else console.error("[http] POST /css — CSS preview:", css.substring(0, 300), "...");
       res.json({ css });
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);

package/server/tailwind-v3.ts

@@ -462,10 +462,15 @@ export class TailwindV3Adapter implements TailwindAdapter {
 		let userConfig: object = {};
 		if (configPath) {
 			try {
+				console.error(`[tailwind-v3] Loading config from: ${configPath}`);
 				userConfig = (await import(pathToFileURL(configPath).href)).default;
-			} catch {
+				console.error(`[tailwind-v3] Config loaded successfully, keys:`, Object.keys(userConfig));
+			} catch (err) {
+				console.error(`[tailwind-v3] Failed to load config from ${configPath}:`, err);
 				// fall through to empty config
 			}
+		} else {
+			console.error(`[tailwind-v3] No config file found in ${cwd}`);
 		}
 
 		// Load postcss and tailwindcss as a PostCSS plugin from the target project
@@ -475,6 +480,7 @@ export class TailwindV3Adapter implements TailwindAdapter {
 			await import(pathToFileURL(req.resolve("tailwindcss")).href)
 		).default;
 
+		console.error(`[tailwind-v3] Running PostCSS with safelist:`, classes);
 		const result = await postcss([
 			tailwindPlugin({
 				...userConfig,
@@ -483,6 +489,8 @@ export class TailwindV3Adapter implements TailwindAdapter {
 			}),
 		]).process("@tailwind utilities;", { from: undefined });
 
+		console.error(`[tailwind-v3] PostCSS result: ${result.css.length} chars`);
+		if (result.css.length < 500) console.error(`[tailwind-v3] Full CSS:`, result.css);
 		return result.css;
 	}
 }

package/server/tailwind-v4.ts

@@ -267,7 +267,11 @@ export class TailwindV4Adapter implements TailwindAdapter {
 	}
 
 	async generateCssForClasses(classes: string[]): Promise<string> {
+		console.error(`[tailwind-v4] Generating CSS for classes:`, classes);
 		const compiler = await getCompiler();
-		return compiler.build(classes);
+		const css = compiler.build(classes);
+		console.error(`[tailwind-v4] Generated ${css.length} chars`);
+		if (css.length < 500) console.error(`[tailwind-v4] Full CSS:`, css);
+		return css;
 	}
 }