diff --git a/e2e-tests/fixtures/engine/basic.md b/e2e-tests/fixtures/engine/basic.md new file mode 100644 index 0000000..668dfa6 --- /dev/null +++ b/e2e-tests/fixtures/engine/basic.md @@ -0,0 +1 @@ +This is a simple basic response diff --git a/e2e-tests/snapshots/visual_editing.spec.ts_visual-editing-single-component-margin.txt b/e2e-tests/snapshots/visual_editing.spec.ts_visual-editing-single-component-margin.txt new file mode 100644 index 0000000..412ed32 --- /dev/null +++ b/e2e-tests/snapshots/visual_editing.spec.ts_visual-editing-single-component-margin.txt @@ -0,0 +1,18 @@ +=== src/pages/Index.tsx === +// Update this page (the content is just a fallback if you fail to update the page) +import { MadeWithDyad } from "@/components/made-with-dyad"; + +const Index = () => { + return ( +
+
+

Welcome to Your Blank App

+

Start building your amazing project here! +

+
+ +
+ ); +}; + +export default Index; \ No newline at end of file diff --git a/e2e-tests/snapshots/visual_editing.spec.ts_visual-editing-text-content.txt b/e2e-tests/snapshots/visual_editing.spec.ts_visual-editing-text-content.txt new file mode 100644 index 0000000..691a2fd --- /dev/null +++ b/e2e-tests/snapshots/visual_editing.spec.ts_visual-editing-text-content.txt @@ -0,0 +1,18 @@ +=== src/pages/Index.tsx === +// Update this page (the content is just a fallback if you fail to update the page) +import { MadeWithDyad } from "@/components/made-with-dyad"; + +const Index = () => { + return ( +
+
+

Hello from E2E Test

+

Start building your amazing project here! +

+
+ +
+ ); +}; + +export default Index; \ No newline at end of file diff --git a/e2e-tests/visual_editing.spec.ts b/e2e-tests/visual_editing.spec.ts new file mode 100644 index 0000000..cbf25a5 --- /dev/null +++ b/e2e-tests/visual_editing.spec.ts @@ -0,0 +1,219 @@ +import { expect } from "@playwright/test"; +import { testSkipIfWindows, Timeout } from "./helpers/test_helper"; +const fs = require("fs"); +const path = require("path"); + +testSkipIfWindows("edit style of one selected component", async ({ po }) => { + await po.setUpDyadPro(); + await po.sendPrompt("tc=basic"); + await po.clickTogglePreviewPanel(); + await po.clickPreviewPickElement(); + + // Select a component + await po + .getPreviewIframeElement() + .contentFrame() + .getByRole("heading", { name: "Welcome to Your Blank App" }) + .click(); + + // Wait for the toolbar to appear (check for the Margin button which is always visible) + const marginButton = po.page.getByRole("button", { name: "Margin" }); + await expect(marginButton).toBeVisible({ + timeout: Timeout.MEDIUM, + }); + + // Ensure the toolbar has proper coordinates before clicking + await expect(async () => { + const box = await marginButton.boundingBox(); + expect(box).not.toBeNull(); + expect(box!.y).toBeGreaterThan(0); + }).toPass({ timeout: Timeout.MEDIUM }); + + // Click on margin button to open the margin popover + await marginButton.click(); + + // Wait for the popover to fully open by checking for the popover content container + const marginDialog = po.page + .locator('[role="dialog"]') + .filter({ hasText: "Margin" }); + await expect(marginDialog).toBeVisible({ + timeout: Timeout.LONG, + }); + + // Edit margin - set horizontal margin + const marginXInput = po.page.getByLabel("Horizontal"); + await marginXInput.fill("20"); + + // Edit margin - set vertical margin + const marginYInput = po.page.getByLabel("Vertical"); + await marginYInput.fill("10"); + + // Close the popover by clicking outside or pressing escape + await po.page.keyboard.press("Escape"); + + // Check if the changes are applied to UI by verifying the visual changes dialog appears + await expect(po.page.getByText(/\d+ component[s]? modified/)).toBeVisible({ + timeout: Timeout.MEDIUM, + }); + + // Save the changes + await po.page.getByRole("button", { name: "Save Changes" }).click(); + + // Wait for the success toast + await po.waitForToastWithText("Visual changes saved to source files"); + + // Verify that the changes are applied to codebase + await po.snapshotAppFiles({ + name: "visual-editing-single-component-margin", + files: ["src/pages/Index.tsx"], + }); +}); + +testSkipIfWindows("edit text of the selected component", async ({ po }) => { + await po.setUpDyadPro(); + await po.sendPrompt("tc=basic"); + await po.clickTogglePreviewPanel(); + await po.clickPreviewPickElement(); + + // Click on component that contains static text + await po + .getPreviewIframeElement() + .contentFrame() + .getByRole("heading", { name: "Welcome to Your Blank App" }) + .click(); + + // Wait for the toolbar to appear (check for the Margin button which is always visible) + await expect(po.page.getByRole("button", { name: "Margin" })).toBeVisible({ + timeout: Timeout.MEDIUM, + }); + + // Get the iframe and access the content + const iframe = po.getPreviewIframeElement(); + const frame = iframe.contentFrame(); + + // Find the heading element in the iframe + const heading = frame.getByRole("heading", { + name: "Welcome to Your Blank App", + }); + + await heading.dblclick(); + + // Wait for contentEditable to be enabled + await expect(async () => { + const isEditable = await heading.evaluate( + (el) => (el as HTMLElement).isContentEditable, + ); + expect(isEditable).toBe(true); + }).toPass({ timeout: Timeout.MEDIUM }); + + // Clear the existing text and type new text + await heading.press("Meta+A"); + await heading.type("Hello from E2E Test"); + + // Click outside to finish editing + await frame.locator("body").click({ position: { x: 10, y: 10 } }); + + // Verify the changes are applied in the UI + await expect(frame.getByText("Hello from E2E Test")).toBeVisible({ + timeout: Timeout.MEDIUM, + }); + + // Verify the visual changes dialog appears + await expect(po.page.getByText(/\d+ component[s]? modified/)).toBeVisible({ + timeout: Timeout.MEDIUM, + }); + + // Save the changes + await po.page.getByRole("button", { name: "Save Changes" }).click(); + + // Wait for the success toast + await po.waitForToastWithText("Visual changes saved to source files"); + + // Verify that the changes are applied to the codebase + await po.snapshotAppFiles({ + name: "visual-editing-text-content", + files: ["src/pages/Index.tsx"], + }); +}); + +testSkipIfWindows("discard changes", async ({ po }) => { + await po.setUpDyadPro(); + await po.sendPrompt("tc=basic"); + await po.clickTogglePreviewPanel(); + await po.clickPreviewPickElement(); + + // Select a component + await po + .getPreviewIframeElement() + .contentFrame() + .getByRole("heading", { name: "Welcome to Your Blank App" }) + .click(); + + // Wait for the toolbar to appear (check for the Margin button which is always visible) + const marginButton = po.page.getByRole("button", { name: "Margin" }); + await expect(marginButton).toBeVisible({ + timeout: Timeout.MEDIUM, + }); + + // Ensure the toolbar has proper coordinates before clicking + await expect(async () => { + const box = await marginButton.boundingBox(); + expect(box).not.toBeNull(); + expect(box!.y).toBeGreaterThan(0); + }).toPass({ timeout: Timeout.MEDIUM }); + + // Click on margin button to open the margin popover + await marginButton.click(); + + // Wait for the popover to fully open by checking for the popover content container + const marginDialog = po.page + .locator('[role="dialog"]') + .filter({ hasText: "Margin" }); + await expect(marginDialog).toBeVisible({ + timeout: Timeout.LONG, + }); + + // Edit margin + const marginXInput = po.page.getByLabel("Horizontal"); + await marginXInput.fill("30"); + + const marginYInput = po.page.getByLabel("Vertical"); + await marginYInput.fill("30"); + + // Close the popover + await po.page.keyboard.press("Escape"); + + // Wait for the popover to close + await expect(marginDialog).not.toBeVisible({ + timeout: Timeout.MEDIUM, + }); + + // Check if the changes are applied to UI + await expect(po.page.getByText(/\d+ component[s]? modified/)).toBeVisible({ + timeout: Timeout.MEDIUM, + }); + + // Take a snapshot of the app files before discarding + const appPathBefore = await po.getCurrentAppPath(); + const appFileBefore = fs.readFileSync( + path.join(appPathBefore, "src", "pages", "Index.tsx"), + "utf-8", + ); + + // Discard the changes + await po.page.getByRole("button", { name: "Discard" }).click(); + + // Verify the visual changes dialog is gone + await expect(po.page.getByText(/\d+ component[s]? modified/)).not.toBeVisible( + { timeout: Timeout.MEDIUM }, + ); + + // Verify that the changes are NOT applied to codebase + const appFileAfter = fs.readFileSync( + path.join(appPathBefore, "src", "pages", "Index.tsx"), + "utf-8", + ); + + // The file content should be the same as before + expect(appFileAfter).toBe(appFileBefore); +}); diff --git a/package-lock.json b/package-lock.json index 9c4a8b6..1621c85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@ai-sdk/openai-compatible": "^1.0.8", "@ai-sdk/provider-utils": "^3.0.3", "@ai-sdk/xai": "^2.0.16", + "@babel/parser": "^7.28.5", "@biomejs/biome": "^1.9.4", "@dyad-sh/supabase-management-js": "v1.0.1", "@lexical/react": "^0.33.1", @@ -81,6 +82,7 @@ "react-markdown": "^10.1.0", "react-resizable-panels": "^2.1.7", "react-shiki": "^0.5.2", + "recast": "^0.23.11", "remark-gfm": "^4.0.1", "shell-env": "^4.0.1", "shiki": "^3.2.1", @@ -638,9 +640,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", - "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", + "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", "license": "MIT", "engines": { "node": ">=6.9.0" @@ -669,12 +671,12 @@ } }, "node_modules/@babel/parser": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz", - "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==", + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz", + "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==", "license": "MIT", "dependencies": { - "@babel/types": "^7.28.4" + "@babel/types": "^7.28.5" }, "bin": { "parser": "bin/babel-parser.js" @@ -755,13 +757,13 @@ } }, "node_modules/@babel/types": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz", - "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==", + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz", + "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==", "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.27.1" + "@babel/helper-validator-identifier": "^7.28.5" }, "engines": { "node": ">=6.9.0" @@ -8002,6 +8004,18 @@ "node": ">=12" } }, + "node_modules/ast-types": { + "version": "0.16.1", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz", + "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.1" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/async-function": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz", @@ -11450,6 +11464,19 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "license": "BSD-2-Clause", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/esquery": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz", @@ -18462,6 +18489,22 @@ "node": ">= 6" } }, + "node_modules/recast": { + "version": "0.23.11", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz", + "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==", + "license": "MIT", + "dependencies": { + "ast-types": "^0.16.1", + "esprima": "~4.0.0", + "source-map": "~0.6.1", + "tiny-invariant": "^1.3.3", + "tslib": "^2.0.1" + }, + "engines": { + "node": ">= 4" + } + }, "node_modules/rechoir": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz", @@ -19721,7 +19764,6 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" diff --git a/package.json b/package.json index f2bca28..298dc48 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ "@ai-sdk/openai-compatible": "^1.0.8", "@ai-sdk/provider-utils": "^3.0.3", "@ai-sdk/xai": "^2.0.16", + "@babel/parser": "^7.28.5", "@biomejs/biome": "^1.9.4", "@dyad-sh/supabase-management-js": "v1.0.1", "@lexical/react": "^0.33.1", @@ -157,6 +158,7 @@ "react-markdown": "^10.1.0", "react-resizable-panels": "^2.1.7", "react-shiki": "^0.5.2", + "recast": "^0.23.11", "remark-gfm": "^4.0.1", "shell-env": "^4.0.1", "shiki": "^3.2.1", diff --git a/src/__tests__/style-utils.test.ts b/src/__tests__/style-utils.test.ts new file mode 100644 index 0000000..4b417b5 --- /dev/null +++ b/src/__tests__/style-utils.test.ts @@ -0,0 +1,118 @@ +import { describe, it, expect } from "vitest"; +import { stylesToTailwind } from "../utils/style-utils"; + +describe("convertSpacingToTailwind", () => { + describe("margin conversion", () => { + it("should convert equal margins on all sides", () => { + const result = stylesToTailwind({ + margin: { left: "16px", right: "16px", top: "16px", bottom: "16px" }, + }); + expect(result).toEqual(["m-[16px]"]); + }); + + it("should convert equal horizontal margins", () => { + const result = stylesToTailwind({ + margin: { left: "16px", right: "16px" }, + }); + expect(result).toEqual(["mx-[16px]"]); + }); + + it("should convert equal vertical margins", () => { + const result = stylesToTailwind({ + margin: { top: "16px", bottom: "16px" }, + }); + expect(result).toEqual(["my-[16px]"]); + }); + }); + + describe("padding conversion", () => { + it("should convert equal padding on all sides", () => { + const result = stylesToTailwind({ + padding: { left: "20px", right: "20px", top: "20px", bottom: "20px" }, + }); + expect(result).toEqual(["p-[20px]"]); + }); + + it("should convert equal horizontal padding", () => { + const result = stylesToTailwind({ + padding: { left: "12px", right: "12px" }, + }); + expect(result).toEqual(["px-[12px]"]); + }); + + it("should convert equal vertical padding", () => { + const result = stylesToTailwind({ + padding: { top: "8px", bottom: "8px" }, + }); + expect(result).toEqual(["py-[8px]"]); + }); + }); + + describe("combined margin and padding", () => { + it("should handle both margin and padding", () => { + const result = stylesToTailwind({ + margin: { left: "16px", right: "16px" }, + padding: { top: "8px", bottom: "8px" }, + }); + expect(result).toContain("mx-[16px]"); + expect(result).toContain("py-[8px]"); + expect(result).toHaveLength(2); + }); + }); + + describe("edge cases: equal horizontal and vertical spacing", () => { + it("should consolidate px = py to p when values match", () => { + const result = stylesToTailwind({ + padding: { left: "16px", right: "16px", top: "16px", bottom: "16px" }, + }); + // When all four sides are equal, should use p-[] + expect(result).toEqual(["p-[16px]"]); + }); + + it("should consolidate mx = my to m when values match (but not all four sides)", () => { + const result = stylesToTailwind({ + margin: { left: "20px", right: "20px", top: "20px", bottom: "20px" }, + }); + // When all four sides are equal, should use m-[] + expect(result).toEqual(["m-[20px]"]); + }); + + it("should not consolidate when px != py", () => { + const result = stylesToTailwind({ + padding: { left: "16px", right: "16px", top: "8px", bottom: "8px" }, + }); + expect(result).toContain("px-[16px]"); + expect(result).toContain("py-[8px]"); + expect(result).toHaveLength(2); + }); + + it("should not consolidate when mx != my", () => { + const result = stylesToTailwind({ + margin: { left: "20px", right: "20px", top: "10px", bottom: "10px" }, + }); + expect(result).toContain("mx-[20px]"); + expect(result).toContain("my-[10px]"); + expect(result).toHaveLength(2); + }); + + it("should handle case where left != right", () => { + const result = stylesToTailwind({ + padding: { left: "16px", right: "12px", top: "8px", bottom: "8px" }, + }); + expect(result).toContain("pl-[16px]"); + expect(result).toContain("pr-[12px]"); + expect(result).toContain("py-[8px]"); + expect(result).toHaveLength(3); + }); + + it("should handle case where top != bottom", () => { + const result = stylesToTailwind({ + margin: { left: "20px", right: "20px", top: "10px", bottom: "15px" }, + }); + expect(result).toContain("mx-[20px]"); + expect(result).toContain("mt-[10px]"); + expect(result).toContain("mb-[15px]"); + expect(result).toHaveLength(3); + }); + }); +}); diff --git a/src/atoms/previewAtoms.ts b/src/atoms/previewAtoms.ts index acaa60c..92ff10e 100644 --- a/src/atoms/previewAtoms.ts +++ b/src/atoms/previewAtoms.ts @@ -1,6 +1,20 @@ -import { ComponentSelection } from "@/ipc/ipc_types"; +import { ComponentSelection, VisualEditingChange } from "@/ipc/ipc_types"; import { atom } from "jotai"; export const selectedComponentsPreviewAtom = atom([]); +export const visualEditingSelectedComponentAtom = + atom(null); + +export const currentComponentCoordinatesAtom = atom<{ + top: number; + left: number; + width: number; + height: number; +} | null>(null); + export const previewIframeRefAtom = atom(null); + +export const pendingVisualChangesAtom = atom>( + new Map(), +); diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx index e7f30c5..63a146d 100644 --- a/src/components/chat/ChatInput.tsx +++ b/src/components/chat/ChatInput.tsx @@ -16,6 +16,7 @@ import { ChevronsDownUp, ChartColumnIncreasing, SendHorizontalIcon, + Lock, } from "lucide-react"; import type React from "react"; import { useCallback, useEffect, useState } from "react"; @@ -65,11 +66,16 @@ import { ChatErrorBox } from "./ChatErrorBox"; import { selectedComponentsPreviewAtom, previewIframeRefAtom, + visualEditingSelectedComponentAtom, + currentComponentCoordinatesAtom, + pendingVisualChangesAtom, } from "@/atoms/previewAtoms"; import { SelectedComponentsDisplay } from "./SelectedComponentDisplay"; import { useCheckProblems } from "@/hooks/useCheckProblems"; import { LexicalChatInput } from "./LexicalChatInput"; import { useChatModeToggle } from "@/hooks/useChatModeToggle"; +import { VisualEditingChangesDialog } from "@/components/preview_panel/VisualEditingChangesDialog"; +import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo"; const showTokenBarAtom = atom(false); @@ -92,7 +98,15 @@ export function ChatInput({ chatId }: { chatId?: number }) { selectedComponentsPreviewAtom, ); const previewIframeRef = useAtomValue(previewIframeRefAtom); + const setVisualEditingSelectedComponent = useSetAtom( + visualEditingSelectedComponentAtom, + ); + const setCurrentComponentCoordinates = useSetAtom( + currentComponentCoordinatesAtom, + ); + const setPendingVisualChanges = useSetAtom(pendingVisualChangesAtom); const { checkProblems } = useCheckProblems(appId); + const { refreshAppIframe } = useRunApp(); // Use the attachments hook const { attachments, @@ -124,6 +138,8 @@ export function ChatInput({ chatId }: { chatId?: number }) { proposal.type === "code-proposal" && messageId === lastMessage.id; + const { userBudget } = useUserBudgetInfo(); + useEffect(() => { if (error) { setShowError(true); @@ -160,7 +176,7 @@ export function ChatInput({ chatId }: { chatId?: number }) { ? selectedComponents : []; setSelectedComponents([]); - + setVisualEditingSelectedComponent(null); // Clear overlays in the preview iframe if (previewIframeRef?.contentWindow) { previewIframeRef.contentWindow.postMessage( @@ -307,6 +323,58 @@ export function ChatInput({ chatId }: { chatId?: number }) { /> )} + {userBudget ? ( + { + // Exit component selection mode and visual editing + setSelectedComponents([]); + setVisualEditingSelectedComponent(null); + setCurrentComponentCoordinates(null); + setPendingVisualChanges(new Map()); + refreshAppIframe(); + + // Deactivate component selector in iframe + if (previewIframeRef?.contentWindow) { + previewIframeRef.contentWindow.postMessage( + { type: "deactivate-dyad-component-selector" }, + "*", + ); + } + }} + /> + ) : ( + selectedComponents.length > 0 && ( +
+ + + + + + + Visual editing lets you make UI changes without AI and is + a Pro-only feature + + + +
+ ) + )} + {/* Use the AttachmentsList component */} diff --git a/src/components/chat/SelectedComponentDisplay.tsx b/src/components/chat/SelectedComponentDisplay.tsx index 0b64135..0b4bfea 100644 --- a/src/components/chat/SelectedComponentDisplay.tsx +++ b/src/components/chat/SelectedComponentDisplay.tsx @@ -1,8 +1,9 @@ import { selectedComponentsPreviewAtom, previewIframeRefAtom, + visualEditingSelectedComponentAtom, } from "@/atoms/previewAtoms"; -import { useAtom, useAtomValue } from "jotai"; +import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { Code2, X } from "lucide-react"; export function SelectedComponentsDisplay() { @@ -10,11 +11,15 @@ export function SelectedComponentsDisplay() { selectedComponentsPreviewAtom, ); const previewIframeRef = useAtomValue(previewIframeRefAtom); + const setVisualEditingSelectedComponent = useSetAtom( + visualEditingSelectedComponentAtom, + ); const handleRemoveComponent = (index: number) => { const componentToRemove = selectedComponents[index]; const newComponents = selectedComponents.filter((_, i) => i !== index); setSelectedComponents(newComponents); + setVisualEditingSelectedComponent(null); // Remove the specific overlay from the iframe if (previewIframeRef?.contentWindow) { @@ -30,7 +35,7 @@ export function SelectedComponentsDisplay() { const handleClearAll = () => { setSelectedComponents([]); - + setVisualEditingSelectedComponent(null); if (previewIframeRef?.contentWindow) { previewIframeRef.contentWindow.postMessage( { type: "clear-dyad-component-overlays" }, diff --git a/src/components/preview_panel/PreviewIframe.tsx b/src/components/preview_panel/PreviewIframe.tsx index f428783..a43d3e8 100644 --- a/src/components/preview_panel/PreviewIframe.tsx +++ b/src/components/preview_panel/PreviewIframe.tsx @@ -36,9 +36,13 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { useStreamChat } from "@/hooks/useStreamChat"; +import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo"; import { selectedComponentsPreviewAtom, + visualEditingSelectedComponentAtom, + currentComponentCoordinatesAtom, previewIframeRefAtom, + pendingVisualChangesAtom, } from "@/atoms/previewAtoms"; import { ComponentSelection } from "@/ipc/ipc_types"; import { @@ -57,6 +61,7 @@ import { useRunApp } from "@/hooks/useRunApp"; import { useShortcut } from "@/hooks/useShortcut"; import { cn } from "@/lib/utils"; import { normalizePath } from "../../../shared/normalizePath"; +import { VisualEditingToolbar } from "./VisualEditingToolbar"; interface ErrorBannerProps { error: { message: string; source: "preview-app" | "dyad-app" } | undefined; @@ -167,6 +172,8 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { const { streamMessage } = useStreamChat(); const { routes: availableRoutes } = useParseRouter(selectedAppId); const { restartApp } = useRunApp(); + const { userBudget } = useUserBudgetInfo(); + const isProMode = !!userBudget; // Navigation state const [isComponentSelectorInitialized, setIsComponentSelectorInitialized] = @@ -175,12 +182,107 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { const [canGoForward, setCanGoForward] = useState(false); const [navigationHistory, setNavigationHistory] = useState([]); const [currentHistoryPosition, setCurrentHistoryPosition] = useState(0); - const [selectedComponentsPreview, setSelectedComponentsPreview] = useAtom( + const setSelectedComponentsPreview = useSetAtom( selectedComponentsPreviewAtom, ); + const [visualEditingSelectedComponent, setVisualEditingSelectedComponent] = + useAtom(visualEditingSelectedComponentAtom); + const setCurrentComponentCoordinates = useSetAtom( + currentComponentCoordinatesAtom, + ); const setPreviewIframeRef = useSetAtom(previewIframeRefAtom); const iframeRef = useRef(null); const [isPicking, setIsPicking] = useState(false); + const setPendingChanges = useSetAtom(pendingVisualChangesAtom); + + // AST Analysis State + const [isDynamicComponent, setIsDynamicComponent] = useState(false); + const [hasStaticText, setHasStaticText] = useState(false); + + const analyzeComponent = async (componentId: string) => { + if (!componentId || !selectedAppId) return; + + try { + const result = await IpcClient.getInstance().analyzeComponent({ + appId: selectedAppId, + componentId, + }); + setIsDynamicComponent(result.isDynamic); + setHasStaticText(result.hasStaticText); + + // Automatically enable text editing if component has static text + if (result.hasStaticText && iframeRef.current?.contentWindow) { + iframeRef.current.contentWindow.postMessage( + { + type: "enable-dyad-text-editing", + data: { + componentId: componentId, + runtimeId: visualEditingSelectedComponent?.runtimeId, + }, + }, + "*", + ); + } + } catch (err) { + console.error("Failed to analyze component", err); + setIsDynamicComponent(false); + setHasStaticText(false); + } + }; + + const handleTextUpdated = async (data: any) => { + const { componentId, text } = data; + if (!componentId || !selectedAppId) return; + + // Parse componentId to extract file path and line number + const [filePath, lineStr] = componentId.split(":"); + const lineNumber = parseInt(lineStr, 10); + + if (!filePath || isNaN(lineNumber)) { + console.error("Invalid componentId format:", componentId); + return; + } + + // Store text change in pending changes + setPendingChanges((prev) => { + const updated = new Map(prev); + const existing = updated.get(componentId); + + updated.set(componentId, { + componentId: componentId, + componentName: + existing?.componentName || visualEditingSelectedComponent?.name || "", + relativePath: filePath, + lineNumber: lineNumber, + styles: existing?.styles || {}, + textContent: text, + }); + + return updated; + }); + }; + + // Function to get current styles from selected element + const getCurrentElementStyles = () => { + if (!iframeRef.current?.contentWindow || !visualEditingSelectedComponent) + return; + + try { + // Send message to iframe to get current styles + iframeRef.current.contentWindow.postMessage( + { + type: "get-dyad-component-styles", + data: { + elementId: visualEditingSelectedComponent.id, + runtimeId: visualEditingSelectedComponent.runtimeId, + }, + }, + "*", + ); + } catch (error) { + console.error("Failed to get element styles:", error); + } + }; // Device mode state type DeviceMode = "desktop" | "tablet" | "mobile"; @@ -196,23 +298,30 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { //detect if the user is using Mac const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0; + // Reset visual editing state when app changes or component unmounts + useEffect(() => { + return () => { + // Cleanup on unmount or when app changes + setVisualEditingSelectedComponent(null); + setPendingChanges(new Map()); + setCurrentComponentCoordinates(null); + }; + }, [selectedAppId]); + // Update iframe ref atom useEffect(() => { setPreviewIframeRef(iframeRef.current); }, [iframeRef.current, setPreviewIframeRef]); - // Deactivate component selector when selection is cleared + // Send pro mode status to iframe useEffect(() => { - if (!selectedComponentsPreview || selectedComponentsPreview.length === 0) { - if (iframeRef.current?.contentWindow) { - iframeRef.current.contentWindow.postMessage( - { type: "deactivate-dyad-component-selector" }, - "*", - ); - } - setIsPicking(false); + if (iframeRef.current?.contentWindow && isComponentSelectorInitialized) { + iframeRef.current.contentWindow.postMessage( + { type: "dyad-pro-mode", enabled: isProMode }, + "*", + ); } - }, [selectedComponentsPreview]); + }, [isProMode, isComponentSelectorInitialized]); // Add message listener for iframe errors and navigation events useEffect(() => { @@ -224,41 +333,92 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { if (event.data?.type === "dyad-component-selector-initialized") { setIsComponentSelectorInitialized(true); + iframeRef.current?.contentWindow?.postMessage( + { type: "dyad-pro-mode", enabled: isProMode }, + "*", + ); + return; + } + + if (event.data?.type === "dyad-text-updated") { + handleTextUpdated(event.data); + return; + } + + if (event.data?.type === "dyad-text-finalized") { + handleTextUpdated(event.data); return; } if (event.data?.type === "dyad-component-selected") { console.log("Component picked:", event.data); - // Parse the single selected component - const component = event.data.component - ? parseComponentSelection({ - type: "dyad-component-selected", - id: event.data.component.id, - name: event.data.component.name, - }) - : null; + const component = parseComponentSelection(event.data); if (!component) return; - // Add to existing components, avoiding duplicates by id + // Store the coordinates + if (event.data.coordinates && isProMode) { + setCurrentComponentCoordinates(event.data.coordinates); + } + + // Add to selected components if not already there setSelectedComponentsPreview((prev) => { - // Check if this component is already selected - if (prev.some((c) => c.id === component.id)) { + const exists = prev.some((c) => { + // Check by runtimeId if available otherwise by id + // Stored components may have lost their runtimeId after re-renders or reloading the page + if (component.runtimeId && c.runtimeId) { + return c.runtimeId === component.runtimeId; + } + return c.id === component.id; + }); + if (exists) { return prev; } return [...prev, component]; }); + if (isProMode) { + // Set as the highlighted component for visual editing + setVisualEditingSelectedComponent(component); + // Trigger AST analysis + analyzeComponent(component.id); + } + return; } if (event.data?.type === "dyad-component-deselected") { const componentId = event.data.componentId; if (componentId) { + // Disable text editing for the deselected component + if (iframeRef.current?.contentWindow) { + iframeRef.current.contentWindow.postMessage( + { + type: "disable-dyad-text-editing", + data: { componentId }, + }, + "*", + ); + } + setSelectedComponentsPreview((prev) => prev.filter((c) => c.id !== componentId), ); + setVisualEditingSelectedComponent((prev) => { + const shouldClear = prev?.id === componentId; + if (shouldClear) { + setCurrentComponentCoordinates(null); + } + return shouldClear ? null : prev; + }); + } + return; + } + + if (event.data?.type === "dyad-component-coordinates-updated") { + if (event.data.coordinates) { + setCurrentComponentCoordinates(event.data.coordinates); } return; } @@ -348,6 +508,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { setErrorMessage, setIsComponentSelectorInitialized, setSelectedComponentsPreview, + setVisualEditingSelectedComponent, ]); useEffect(() => { @@ -366,11 +527,26 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { } }, [appUrl]); + // Get current styles when component is selected for visual editing + useEffect(() => { + if (visualEditingSelectedComponent) { + getCurrentElementStyles(); + } + }, [visualEditingSelectedComponent]); + // Function to activate component selector in the iframe const handleActivateComponentSelector = () => { if (iframeRef.current?.contentWindow) { const newIsPicking = !isPicking; + if (!newIsPicking) { + // Clean up any text editing states when deactivating + iframeRef.current.contentWindow.postMessage( + { type: "cleanup-all-text-editing" }, + "*", + ); + } setIsPicking(newIsPicking); + setVisualEditingSelectedComponent(null); iframeRef.current.contentWindow.postMessage( { type: newIsPicking @@ -433,6 +609,10 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { const handleReload = () => { setReloadKey((prevKey) => prevKey + 1); setErrorMessage(undefined); + // Reset visual editing state + setVisualEditingSelectedComponent(null); + setPendingChanges(new Map()); + setCurrentComponentCoordinates(null); // Optionally, add logic here if you need to explicitly stop/start the app again // For now, just changing the key should remount the iframe console.debug("Reloading iframe preview for app", selectedAppId); @@ -737,6 +917,15 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { src={appUrl} allow="clipboard-read; clipboard-write; fullscreen; microphone; camera; display-capture; geolocation; autoplay; picture-in-picture" /> + {/* Visual Editing Toolbar */} + {isProMode && visualEditingSelectedComponent && selectedAppId && ( + + )} )} @@ -745,16 +934,20 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { }; function parseComponentSelection(data: any): ComponentSelection | null { + if (!data || data.type !== "dyad-component-selected") { + return null; + } + + const component = data.component; if ( - !data || - data.type !== "dyad-component-selected" || - typeof data.id !== "string" || - typeof data.name !== "string" + !component || + typeof component.id !== "string" || + typeof component.name !== "string" ) { return null; } - const { id, name } = data; + const { id, name, runtimeId } = component; // The id is expected to be in the format "filepath:line:column" const parts = id.split(":"); @@ -783,6 +976,7 @@ function parseComponentSelection(data: any): ComponentSelection | null { return { id, name, + runtimeId, relativePath: normalizePath(relativePath), lineNumber, columnNumber, diff --git a/src/components/preview_panel/StylePopover.tsx b/src/components/preview_panel/StylePopover.tsx new file mode 100644 index 0000000..ab5f7bc --- /dev/null +++ b/src/components/preview_panel/StylePopover.tsx @@ -0,0 +1,56 @@ +import { ReactNode } from "react"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; + +interface StylePopoverProps { + icon: ReactNode; + title: string; + tooltip: string; + children: ReactNode; + side?: "top" | "right" | "bottom" | "left"; +} + +export function StylePopover({ + icon, + title, + tooltip, + children, + side = "bottom", +}: StylePopoverProps) { + return ( + + + + + +
+

+ {title} +

+ {children} +
+ + + ); +} diff --git a/src/components/preview_panel/VisualEditingChangesDialog.tsx b/src/components/preview_panel/VisualEditingChangesDialog.tsx new file mode 100644 index 0000000..787d963 --- /dev/null +++ b/src/components/preview_panel/VisualEditingChangesDialog.tsx @@ -0,0 +1,179 @@ +import { useAtom, useAtomValue } from "jotai"; +import { pendingVisualChangesAtom } from "@/atoms/previewAtoms"; +import { Button } from "@/components/ui/button"; +import { IpcClient } from "@/ipc/ipc_client"; +import { Check, X } from "lucide-react"; +import { useState, useEffect, useRef } from "react"; +import { showError, showSuccess } from "@/lib/toast"; +import { selectedAppIdAtom } from "@/atoms/appAtoms"; + +interface VisualEditingChangesDialogProps { + onReset?: () => void; + iframeRef?: React.RefObject; +} + +export function VisualEditingChangesDialog({ + onReset, + iframeRef, +}: VisualEditingChangesDialogProps) { + const [pendingChanges, setPendingChanges] = useAtom(pendingVisualChangesAtom); + const selectedAppId = useAtomValue(selectedAppIdAtom); + const [isSaving, setIsSaving] = useState(false); + const textContentCache = useRef>(new Map()); + const [allResponsesReceived, setAllResponsesReceived] = useState(false); + const expectedResponsesRef = useRef>(new Set()); + const isWaitingForResponses = useRef(false); + + // Listen for text content responses + useEffect(() => { + const handleMessage = (event: MessageEvent) => { + if (event.data?.type === "dyad-text-content-response") { + const { componentId, text } = event.data; + if (text !== null) { + textContentCache.current.set(componentId, text); + } + + // Mark this response as received + expectedResponsesRef.current.delete(componentId); + + // Check if all responses received (only if we're actually waiting) + if ( + isWaitingForResponses.current && + expectedResponsesRef.current.size === 0 + ) { + setAllResponsesReceived(true); + } + } + }; + + window.addEventListener("message", handleMessage); + return () => window.removeEventListener("message", handleMessage); + }, []); + + // Execute when all responses are received + useEffect(() => { + if (allResponsesReceived && isSaving) { + const applyChanges = async () => { + try { + const changesToSave = Array.from(pendingChanges.values()); + + // Update changes with cached text content + const updatedChanges = changesToSave.map((change) => { + const cachedText = textContentCache.current.get(change.componentId); + if (cachedText !== undefined) { + return { ...change, textContent: cachedText }; + } + return change; + }); + + await IpcClient.getInstance().applyVisualEditingChanges({ + appId: selectedAppId!, + changes: updatedChanges, + }); + + setPendingChanges(new Map()); + textContentCache.current.clear(); + showSuccess("Visual changes saved to source files"); + onReset?.(); + } catch (error) { + console.error("Failed to save visual editing changes:", error); + showError(`Failed to save changes: ${error}`); + } finally { + setIsSaving(false); + setAllResponsesReceived(false); + isWaitingForResponses.current = false; + } + }; + + applyChanges(); + } + }, [ + allResponsesReceived, + isSaving, + pendingChanges, + selectedAppId, + onReset, + setPendingChanges, + ]); + + if (pendingChanges.size === 0) return null; + + const handleSave = async () => { + setIsSaving(true); + try { + const changesToSave = Array.from(pendingChanges.values()); + + if (iframeRef?.current?.contentWindow) { + // Reset state for new request + setAllResponsesReceived(false); + expectedResponsesRef.current.clear(); + isWaitingForResponses.current = true; + + // Track which components we're expecting responses from + for (const change of changesToSave) { + expectedResponsesRef.current.add(change.componentId); + } + + // Request text content for each component + for (const change of changesToSave) { + iframeRef.current.contentWindow.postMessage( + { + type: "get-dyad-text-content", + data: { componentId: change.componentId }, + }, + "*", + ); + } + + // If no responses are expected, trigger immediately + if (expectedResponsesRef.current.size === 0) { + setAllResponsesReceived(true); + } + } else { + await IpcClient.getInstance().applyVisualEditingChanges({ + appId: selectedAppId!, + changes: changesToSave, + }); + + setPendingChanges(new Map()); + textContentCache.current.clear(); + showSuccess("Visual changes saved to source files"); + onReset?.(); + } + } catch (error) { + console.error("Failed to save visual editing changes:", error); + showError(`Failed to save changes: ${error}`); + setIsSaving(false); + isWaitingForResponses.current = false; + } + }; + + const handleDiscard = () => { + setPendingChanges(new Map()); + onReset?.(); + }; + + return ( +
+

+ {pendingChanges.size} component + {pendingChanges.size > 1 ? "s" : ""} modified +

+
+ + +
+
+ ); +} diff --git a/src/components/preview_panel/VisualEditingToolbar.tsx b/src/components/preview_panel/VisualEditingToolbar.tsx new file mode 100644 index 0000000..a10ebf1 --- /dev/null +++ b/src/components/preview_panel/VisualEditingToolbar.tsx @@ -0,0 +1,531 @@ +import { useState, useEffect } from "react"; +import { X, Move, Square, Palette, Type } from "lucide-react"; +import { Label } from "@/components/ui/label"; +import { ComponentSelection } from "@/ipc/ipc_types"; +import { useSetAtom, useAtomValue } from "jotai"; +import { + pendingVisualChangesAtom, + selectedComponentsPreviewAtom, + currentComponentCoordinatesAtom, + visualEditingSelectedComponentAtom, +} from "@/atoms/previewAtoms"; +import { StylePopover } from "./StylePopover"; +import { ColorPicker } from "@/components/ui/ColorPicker"; +import { NumberInput } from "@/components/ui/NumberInput"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { rgbToHex, processNumericValue } from "@/utils/style-utils"; + +const FONT_WEIGHT_OPTIONS = [ + { value: "", label: "Default" }, + { value: "100", label: "Thin (100)" }, + { value: "200", label: "Extra Light (200)" }, + { value: "300", label: "Light (300)" }, + { value: "400", label: "Normal (400)" }, + { value: "500", label: "Medium (500)" }, + { value: "600", label: "Semi Bold (600)" }, + { value: "700", label: "Bold (700)" }, + { value: "800", label: "Extra Bold (800)" }, + { value: "900", label: "Black (900)" }, +] as const; + +const FONT_FAMILY_OPTIONS = [ + { value: "", label: "Default" }, + // Sans-serif (clean, modern) + { value: "Arial, sans-serif", label: "Arial" }, + { value: "Inter, sans-serif", label: "Inter" }, + { value: "Roboto, sans-serif", label: "Roboto" }, + // Serif (traditional, elegant) + { value: "Georgia, serif", label: "Georgia" }, + { value: "'Times New Roman', Times, serif", label: "Times New Roman" }, + { value: "Merriweather, serif", label: "Merriweather" }, + // Monospace (code, technical) + { value: "'Courier New', Courier, monospace", label: "Courier New" }, + { value: "'Fira Code', monospace", label: "Fira Code" }, + { value: "Consolas, monospace", label: "Consolas" }, + // Display/Decorative (bold, distinctive) + { value: "Impact, fantasy", label: "Impact" }, + { value: "'Bebas Neue', cursive", label: "Bebas Neue" }, + // Cursive/Handwriting (casual, friendly) + { value: "'Comic Sans MS', cursive", label: "Comic Sans MS" }, + { value: "'Brush Script MT', cursive", label: "Brush Script" }, +] as const; + +interface VisualEditingToolbarProps { + selectedComponent: ComponentSelection | null; + iframeRef: React.RefObject; + isDynamic: boolean; + hasStaticText: boolean; +} + +export function VisualEditingToolbar({ + selectedComponent, + iframeRef, + isDynamic, + hasStaticText, +}: VisualEditingToolbarProps) { + const coordinates = useAtomValue(currentComponentCoordinatesAtom); + const [currentMargin, setCurrentMargin] = useState({ x: "", y: "" }); + const [currentPadding, setCurrentPadding] = useState({ x: "", y: "" }); + const [currentBorder, setCurrentBorder] = useState({ + width: "", + radius: "", + color: "#000000", + }); + const [currentBackgroundColor, setCurrentBackgroundColor] = + useState("#ffffff"); + const [currentTextStyles, setCurrentTextStyles] = useState({ + fontSize: "", + fontWeight: "", + fontFamily: "", + color: "#000000", + }); + const setPendingChanges = useSetAtom(pendingVisualChangesAtom); + const setSelectedComponentsPreview = useSetAtom( + selectedComponentsPreviewAtom, + ); + const setVisualEditingSelectedComponent = useSetAtom( + visualEditingSelectedComponentAtom, + ); + + const handleDeselectComponent = () => { + if (!selectedComponent) return; + + setSelectedComponentsPreview((prev) => + prev.filter((c) => c.id !== selectedComponent.id), + ); + setVisualEditingSelectedComponent(null); + + if (iframeRef.current?.contentWindow) { + iframeRef.current.contentWindow.postMessage( + { + type: "remove-dyad-component-overlay", + componentId: selectedComponent.id, + }, + "*", + ); + } + }; + + const sendStyleModification = (styles: { + margin?: { left?: string; right?: string; top?: string; bottom?: string }; + padding?: { left?: string; right?: string; top?: string; bottom?: string }; + + border?: { width?: string; radius?: string; color?: string }; + backgroundColor?: string; + text?: { fontSize?: string; fontWeight?: string; color?: string }; + }) => { + if (!iframeRef.current?.contentWindow || !selectedComponent) return; + + iframeRef.current.contentWindow.postMessage( + { + type: "modify-dyad-component-styles", + data: { + elementId: selectedComponent.id, + runtimeId: selectedComponent.runtimeId, + styles, + }, + }, + "*", + ); + + iframeRef.current.contentWindow.postMessage( + { + type: "update-dyad-overlay-positions", + }, + "*", + ); + + setPendingChanges((prev) => { + const updated = new Map(prev); + const existing = updated.get(selectedComponent.id); + const newStyles: any = { ...existing?.styles }; + + if (styles.margin) { + newStyles.margin = { ...existing?.styles?.margin, ...styles.margin }; + } + if (styles.padding) { + newStyles.padding = { ...existing?.styles?.padding, ...styles.padding }; + } + + if (styles.border) { + newStyles.border = { ...existing?.styles?.border, ...styles.border }; + } + if (styles.backgroundColor) { + newStyles.backgroundColor = styles.backgroundColor; + } + if (styles.text) { + newStyles.text = { ...existing?.styles?.text, ...styles.text }; + } + + updated.set(selectedComponent.id, { + componentId: selectedComponent.id, + componentName: selectedComponent.name, + relativePath: selectedComponent.relativePath, + lineNumber: selectedComponent.lineNumber, + styles: newStyles, + textContent: existing?.textContent || "", + }); + return updated; + }); + }; + + const getCurrentElementStyles = () => { + if (!iframeRef.current?.contentWindow || !selectedComponent) return; + + try { + iframeRef.current.contentWindow.postMessage( + { + type: "get-dyad-component-styles", + data: { + elementId: selectedComponent.id, + runtimeId: selectedComponent.runtimeId, + }, + }, + "*", + ); + } catch (error) { + console.error("Failed to get element styles:", error); + } + }; + + useEffect(() => { + if (selectedComponent) { + getCurrentElementStyles(); + } + }, [selectedComponent]); + + useEffect(() => { + if (coordinates && iframeRef.current?.contentWindow) { + iframeRef.current.contentWindow.postMessage( + { + type: "update-component-coordinates", + coordinates, + }, + "*", + ); + } + }, [coordinates, iframeRef]); + + useEffect(() => { + const handleMessage = (event: MessageEvent) => { + if (event.data?.type === "dyad-component-styles") { + const { margin, padding, border, backgroundColor, text } = + event.data.data; + + const marginX = margin?.left === margin?.right ? margin.left : ""; + const marginY = margin?.top === margin?.bottom ? margin.top : ""; + const paddingX = padding?.left === padding?.right ? padding.left : ""; + const paddingY = padding?.top === padding?.bottom ? padding.top : ""; + + setCurrentMargin({ x: marginX, y: marginY }); + setCurrentPadding({ x: paddingX, y: paddingY }); + setCurrentBorder({ + width: border?.width || "", + radius: border?.radius || "", + color: rgbToHex(border?.color), + }); + setCurrentBackgroundColor(rgbToHex(backgroundColor) || "#ffffff"); + setCurrentTextStyles({ + fontSize: text?.fontSize || "", + fontWeight: text?.fontWeight || "", + fontFamily: text?.fontFamily || "", + color: rgbToHex(text?.color) || "#000000", + }); + } + }; + + window.addEventListener("message", handleMessage); + return () => window.removeEventListener("message", handleMessage); + }, []); + + const handleSpacingChange = ( + type: "margin" | "padding", + axis: "x" | "y", + value: string, + ) => { + const setter = type === "margin" ? setCurrentMargin : setCurrentPadding; + setter((prev) => ({ ...prev, [axis]: value })); + + if (value) { + const processedValue = processNumericValue(value); + const data = + axis === "x" + ? { left: processedValue, right: processedValue } + : { top: processedValue, bottom: processedValue }; + + sendStyleModification({ [type]: data }); + } + }; + + const handleBorderChange = ( + property: "width" | "radius" | "color", + value: string, + ) => { + const newBorder = { ...currentBorder, [property]: value }; + setCurrentBorder(newBorder); + + if (value) { + let processedValue = value; + if (property !== "color" && /^\d+$/.test(value)) { + processedValue = `${value}px`; + } + + if (property === "width" || property === "color") { + sendStyleModification({ + border: { + width: + property === "width" + ? processedValue + : currentBorder.width || "0px", + color: property === "color" ? processedValue : currentBorder.color, + }, + }); + } else { + sendStyleModification({ border: { [property]: processedValue } }); + } + } + }; + + const handleTextStyleChange = ( + property: "fontSize" | "fontWeight" | "fontFamily" | "color", + value: string, + ) => { + setCurrentTextStyles((prev) => ({ ...prev, [property]: value })); + + if (value) { + let processedValue = value; + if (property === "fontSize" && /^\d+$/.test(value)) { + processedValue = `${value}px`; + } + + sendStyleModification({ text: { [property]: processedValue } }); + } + }; + + if (!selectedComponent || !coordinates) return null; + + const toolbarTop = coordinates.top + coordinates.height + 4; + const toolbarLeft = coordinates.left; + + return ( +
+ + + + + + +

Deselect Component

+ + + + + {isDynamic ? ( +
+ This component is styled dynamically +
+ ) : ( + <> + } + title="Margin" + tooltip="Margin" + > +
+ handleSpacingChange("margin", "x", v)} + placeholder="10" + /> + handleSpacingChange("margin", "y", v)} + placeholder="10" + /> +
+ + + + + + + } + title="Padding" + tooltip="Padding" + > +
+ handleSpacingChange("padding", "x", v)} + placeholder="10" + /> + handleSpacingChange("padding", "y", v)} + placeholder="10" + /> +
+ + + } + title="Border" + tooltip="Border" + > +
+ handleBorderChange("width", v)} + placeholder="1" + /> + handleBorderChange("radius", v)} + placeholder="4" + /> +
+ + handleBorderChange("color", v)} + className="mt-1" + /> +
+
+ + + } + title="Background Color" + tooltip="Background" + > +
+ + { + setCurrentBackgroundColor(v); + if (v) sendStyleModification({ backgroundColor: v }); + }} + className="mt-1" + /> +
+ + + {hasStaticText && ( + } + title="Text Style" + tooltip="Text Style" + > +
+ handleTextStyleChange("fontSize", v)} + placeholder="16" + /> +
+ + +
+
+ + +
+
+ + handleTextStyleChange("color", v)} + className="mt-1" + /> +
+
+ + )} + + )} +
+ ); +} diff --git a/src/components/ui/ColorPicker.tsx b/src/components/ui/ColorPicker.tsx new file mode 100644 index 0000000..a152bec --- /dev/null +++ b/src/components/ui/ColorPicker.tsx @@ -0,0 +1,35 @@ +import { Input } from "@/components/ui/input"; + +interface ColorPickerProps { + id: string; + label?: string; + value: string; + onChange: (value: string) => void; + className?: string; +} + +export function ColorPicker({ + id, + value, + onChange, + className = "", +}: ColorPickerProps) { + return ( +
+ onChange(e.target.value)} + /> + onChange(e.target.value)} + /> +
+ ); +} diff --git a/src/components/ui/NumberInput.tsx b/src/components/ui/NumberInput.tsx new file mode 100644 index 0000000..d670e8a --- /dev/null +++ b/src/components/ui/NumberInput.tsx @@ -0,0 +1,42 @@ +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; + +interface NumberInputProps { + id: string; + label: string; + value: string; + onChange: (value: string) => void; + placeholder?: string; + step?: string; + min?: string; + className?: string; +} + +export function NumberInput({ + id, + label, + value, + onChange, + placeholder = "0", + step = "1", + min = "0", + className = "", +}: NumberInputProps) { + return ( +
+ + onChange(e.target.value)} + step={step} + min={min} + /> +
+ ); +} diff --git a/src/ipc/handlers/pro_handlers.ts b/src/ipc/handlers/pro_handlers.ts index 957fead..d67f696 100644 --- a/src/ipc/handlers/pro_handlers.ts +++ b/src/ipc/handlers/pro_handlers.ts @@ -15,8 +15,14 @@ export function registerProHandlers() { // information and isn't critical to using the app handle("get-user-budget", async (): Promise => { if (IS_TEST_BUILD) { - // Avoid spamming the API in E2E tests. - return null; + // Return mock budget data for E2E tests instead of spamming the API + const resetDate = new Date(); + resetDate.setDate(resetDate.getDate() + 30); // Reset in 30 days + return { + usedCredits: 100, + totalCredits: 1000, + budgetResetDate: resetDate, + }; } logger.info("Attempting to fetch user budget information."); diff --git a/src/ipc/ipc_client.ts b/src/ipc/ipc_client.ts index 9dc53ff..bd67614 100644 --- a/src/ipc/ipc_client.ts +++ b/src/ipc/ipc_client.ts @@ -70,6 +70,8 @@ import type { SupabaseBranch, SetSupabaseAppProjectParams, SelectNodeFolderResult, + ApplyVisualEditingChangesParams, + AnalyseComponentParams, } from "./ipc_types"; import type { Template } from "../shared/templates"; import type { @@ -1327,4 +1329,17 @@ export class IpcClient { public cancelHelpChat(sessionId: string): void { this.ipcRenderer.invoke("help:chat:cancel", sessionId).catch(() => {}); } + + // --- Visual Editing --- + public async applyVisualEditingChanges( + changes: ApplyVisualEditingChangesParams, + ): Promise { + await this.ipcRenderer.invoke("apply-visual-editing-changes", changes); + } + + public async analyzeComponent( + params: AnalyseComponentParams, + ): Promise<{ isDynamic: boolean; hasStaticText: boolean }> { + return this.ipcRenderer.invoke("analyze-component", params); + } } diff --git a/src/ipc/ipc_host.ts b/src/ipc/ipc_host.ts index c4c689f..7af9a9e 100644 --- a/src/ipc/ipc_host.ts +++ b/src/ipc/ipc_host.ts @@ -32,6 +32,7 @@ import { registerPromptHandlers } from "./handlers/prompt_handlers"; import { registerHelpBotHandlers } from "./handlers/help_bot_handlers"; import { registerMcpHandlers } from "./handlers/mcp_handlers"; import { registerSecurityHandlers } from "./handlers/security_handlers"; +import { registerVisualEditingHandlers } from "../pro/main/ipc/handlers/visual_editing_handlers"; export function registerIpcHandlers() { // Register all IPC handlers by category @@ -69,4 +70,5 @@ export function registerIpcHandlers() { registerHelpBotHandlers(); registerMcpHandlers(); registerSecurityHandlers(); + registerVisualEditingHandlers(); } diff --git a/src/ipc/ipc_types.ts b/src/ipc/ipc_types.ts index 917e226..894852d 100644 --- a/src/ipc/ipc_types.ts +++ b/src/ipc/ipc_types.ts @@ -284,6 +284,7 @@ export type UserBudgetInfo = z.infer; export interface ComponentSelection { id: string; name: string; + runtimeId?: string; // Unique runtime ID for duplicate components relativePath: string; lineNumber: number; columnNumber: number; @@ -548,3 +549,34 @@ export interface SelectNodeFolderResult { canceled?: boolean; selectedPath: string | null; } + +export interface VisualEditingChange { + componentId: string; + componentName: string; + relativePath: string; + lineNumber: number; + styles: { + margin?: { left?: string; right?: string; top?: string; bottom?: string }; + padding?: { left?: string; right?: string; top?: string; bottom?: string }; + dimensions?: { width?: string; height?: string }; + border?: { width?: string; radius?: string; color?: string }; + backgroundColor?: string; + text?: { + fontSize?: string; + fontWeight?: string; + color?: string; + fontFamily?: string; + }; + }; + textContent?: string; +} + +export interface ApplyVisualEditingChangesParams { + appId: number; + changes: VisualEditingChange[]; +} + +export interface AnalyseComponentParams { + appId: number; + componentId: string; +} diff --git a/src/preload.ts b/src/preload.ts index 7cee4d2..d894ba1 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -5,6 +5,8 @@ import { contextBridge, ipcRenderer, webFrame } from "electron"; // Whitelist of valid channels const validInvokeChannels = [ + "analyze-component", + "apply-visual-editing-changes", "get-language-models", "get-language-models-by-providers", "create-custom-language-model", diff --git a/src/pro/main/ipc/handlers/visual_editing_handlers.ts b/src/pro/main/ipc/handlers/visual_editing_handlers.ts new file mode 100644 index 0000000..b40e757 --- /dev/null +++ b/src/pro/main/ipc/handlers/visual_editing_handlers.ts @@ -0,0 +1,125 @@ +import { ipcMain } from "electron"; +import fs from "node:fs"; +import { promises as fsPromises } from "node:fs"; +import path from "path"; +import { db } from "../../../../db"; +import { apps } from "../../../../db/schema"; +import { eq } from "drizzle-orm"; +import { getDyadAppPath } from "../../../../paths/paths"; +import { + stylesToTailwind, + extractClassPrefixes, +} from "../../../../utils/style-utils"; +import git from "isomorphic-git"; +import { gitCommit } from "../../../../ipc/utils/git_utils"; +import { safeJoin } from "@/ipc/utils/path_utils"; +import { + AnalyseComponentParams, + ApplyVisualEditingChangesParams, +} from "@/ipc/ipc_types"; +import { + transformContent, + analyzeComponent, +} from "../../utils/visual_editing_utils"; + +export function registerVisualEditingHandlers() { + ipcMain.handle( + "apply-visual-editing-changes", + async (_event, params: ApplyVisualEditingChangesParams) => { + const { appId, changes } = params; + try { + if (changes.length === 0) return; + + // Get the app to find its path + const app = await db.query.apps.findFirst({ + where: eq(apps.id, appId), + }); + + if (!app) { + throw new Error(`App not found: ${appId}`); + } + + const appPath = getDyadAppPath(app.path); + const fileChanges = new Map< + string, + Map< + number, + { classes: string[]; prefixes: string[]; textContent?: string } + > + >(); + + // Group changes by file and line + for (const change of changes) { + if (!fileChanges.has(change.relativePath)) { + fileChanges.set(change.relativePath, new Map()); + } + const tailwindClasses = stylesToTailwind(change.styles); + const changePrefixes = extractClassPrefixes(tailwindClasses); + + fileChanges.get(change.relativePath)!.set(change.lineNumber, { + classes: tailwindClasses, + prefixes: changePrefixes, + ...(change.textContent !== undefined && { + textContent: change.textContent, + }), + }); + } + + // Apply changes to each file + for (const [relativePath, lineChanges] of fileChanges) { + const filePath = safeJoin(appPath, relativePath); + const content = await fsPromises.readFile(filePath, "utf-8"); + const transformedContent = transformContent(content, lineChanges); + await fsPromises.writeFile(filePath, transformedContent, "utf-8"); + // Check if git repository exists and commit the change + if (fs.existsSync(path.join(appPath, ".git"))) { + await git.add({ + fs, + dir: appPath, + filepath: relativePath, + }); + + await gitCommit({ + path: appPath, + message: `Updated ${relativePath}`, + }); + } + } + } catch (error) { + throw new Error(`Failed to apply visual editing changes: ${error}`); + } + }, + ); + + ipcMain.handle( + "analyze-component", + async (_event, analyseComponentParams: AnalyseComponentParams) => { + const { appId, componentId } = analyseComponentParams; + try { + const [filePath, lineStr] = componentId.split(":"); + const line = parseInt(lineStr, 10); + + if (!filePath || isNaN(line)) { + return { isDynamic: false, hasStaticText: false }; + } + + // Get the app to find its path + const app = await db.query.apps.findFirst({ + where: eq(apps.id, appId), + }); + + if (!app) { + throw new Error(`App not found: ${appId}`); + } + + const appPath = getDyadAppPath(app.path); + const fullPath = safeJoin(appPath, filePath); + const content = await fsPromises.readFile(fullPath, "utf-8"); + return analyzeComponent(content, line); + } catch (error) { + console.error("Failed to analyze component:", error); + return { isDynamic: false, hasStaticText: false }; + } + }, + ); +} diff --git a/src/pro/main/utils/visual_editing_utils.test.ts b/src/pro/main/utils/visual_editing_utils.test.ts new file mode 100644 index 0000000..2101956 --- /dev/null +++ b/src/pro/main/utils/visual_editing_utils.test.ts @@ -0,0 +1,617 @@ +import { describe, it, expect } from "vitest"; +import { transformContent, analyzeComponent } from "./visual_editing_utils"; + +describe("transformContent", () => { + describe("className manipulation", () => { + it("should add className attribute when none exists", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["bg-[#ff0000]", "p-[16px]"], prefixes: ["bg-", "p-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).toContain('className="bg-[#ff0000] p-[16px]"'); + }); + + it("should append classes to existing className", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["bg-[#0000ff]"], prefixes: ["bg-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).toContain("existing-class"); + expect(result).toContain("bg-[#0000ff]"); + }); + + it("should remove classes with matching prefixes", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["bg-[#0000ff]"], prefixes: ["bg-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("bg-[#ff0000]"); + expect(result).toContain("bg-[#0000ff]"); + expect(result).toContain("p-[16px]"); + expect(result).toContain("text-[18px]"); + }); + + it("should handle font-weight classes correctly", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["font-[700]"], prefixes: ["font-weight-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("font-[600]"); + expect(result).toContain("font-[700]"); + expect(result).toContain("text-lg"); + }); + + it("should handle font-family classes without removing font-weight", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["font-[Roboto]"], prefixes: ["font-family-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).toContain("font-[600]"); + expect(result).not.toContain("font-[Inter]"); + expect(result).toContain("font-[Roboto]"); + }); + + it("should handle text-size classes without removing text-color or text-align", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["text-[24px]"], prefixes: ["text-size-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("text-[18px]"); + expect(result).toContain("text-[24px]"); + expect(result).toContain("text-[center]"); + expect(result).toContain("text-[#ff0000]"); + }); + + it("should handle arbitrary text-size values", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["text-[32px]"], prefixes: ["text-size-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("text-[44px]"); + expect(result).toContain("text-[32px]"); + expect(result).toContain("text-center"); + }); + + it("should remove mt-, mb-, my- when applying my- prefix", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["my-[20px]"], prefixes: ["my-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("mt-[16px]"); + expect(result).not.toContain("mb-[8px]"); + expect(result).toContain("my-[20px]"); + expect(result).toContain("mx-[24px]"); + }); + + it("should remove ml-, mr-, mx- when applying mx- prefix", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["mx-[20px]"], prefixes: ["mx-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("ml-[16px]"); + expect(result).not.toContain("mr-[8px]"); + expect(result).toContain("mx-[20px]"); + expect(result).toContain("my-[24px]"); + }); + + it("should handle padding classes similarly to margin", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map([ + [3, { classes: ["py-[20px]"], prefixes: ["py-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("pt-[16px]"); + expect(result).not.toContain("pb-[8px]"); + expect(result).toContain("py-[20px]"); + expect(result).toContain("px-[24px]"); + }); + }); + + describe("text content manipulation", () => { + it("should update text content for elements with only text", () => { + const content = ` +function Component() { + return
Old text
; +}`; + + const changes = new Map([ + [ + 3, + { + classes: [], + prefixes: [], + textContent: "New text", + }, + ], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("Old text"); + expect(result).toContain("New text"); + }); + + it("should not update text content when element has nested JSX", () => { + const content = ` +function Component() { + return
Old text nested
; +}`; + + const changes = new Map([ + [ + 3, + { + classes: [], + prefixes: [], + textContent: "New text", + }, + ], + ]); + + const result = transformContent(content, changes); + expect(result).toContain("Old text"); + expect(result).toContain("nested"); + }); + + it("should update text content and classes together", () => { + const content = ` +function Component() { + return
Old text
; +}`; + + const changes = new Map([ + [ + 3, + { + classes: ["text-[24px]"], + prefixes: ["text-size-"], + textContent: "New text", + }, + ], + ]); + + const result = transformContent(content, changes); + expect(result).toContain("text-[24px]"); + expect(result).not.toContain("text-[18px]"); + expect(result).toContain("New text"); + expect(result).not.toContain("Old text"); + }); + }); + + describe("spacing edge cases", () => { + it("should split m-[] into my-[] when adding mx-[]", () => { + const content = ` +function Component() { + return
Content
; +}`; + + const changes = new Map([ + [ + 3, + { + classes: ["mx-[10px]"], + prefixes: ["mx-"], + }, + ], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("m-[20px]"); + expect(result).toContain("my-[20px]"); + expect(result).toContain("mx-[10px]"); + }); + + it("should split m-[] into mx-[] when adding my-[]", () => { + const content = ` +function Component() { + return
Content
; +}`; + + const changes = new Map([ + [ + 3, + { + classes: ["my-[10px]"], + prefixes: ["my-"], + }, + ], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("m-[20px]"); + expect(result).toContain("mx-[20px]"); + expect(result).toContain("my-[10px]"); + }); + + it("should split p-[] into py-[] when adding px-[]", () => { + const content = ` +function Component() { + return
Content
; +}`; + + const changes = new Map([ + [ + 3, + { + classes: ["px-[8px]"], + prefixes: ["px-"], + }, + ], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("p-[16px]"); + expect(result).toContain("py-[16px]"); + expect(result).toContain("px-[8px]"); + }); + + it("should split p-[] into px-[] when adding py-[]", () => { + const content = ` +function Component() { + return
Content
; +}`; + + const changes = new Map([ + [ + 3, + { + classes: ["py-[8px]"], + prefixes: ["py-"], + }, + ], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("p-[16px]"); + expect(result).toContain("px-[16px]"); + expect(result).toContain("py-[8px]"); + }); + + it("should not add complementary class when both directional classes are added", () => { + const content = ` +function Component() { + return
Content
; +}`; + + const changes = new Map([ + [ + 3, + { + classes: ["mx-[10px]", "my-[15px]"], + prefixes: ["mx-", "my-"], + }, + ], + ]); + + const result = transformContent(content, changes); + expect(result).not.toContain("m-[20px]"); + expect(result).toContain("mx-[10px]"); + expect(result).toContain("my-[15px]"); + // Should not have added an extra mx- or my- with the original value + expect(result.match(/mx-/g)?.length).toBe(1); + expect(result.match(/my-/g)?.length).toBe(1); + }); + }); + + describe("multiple changes", () => { + it("should apply changes to multiple lines", () => { + const content = ` +function Component() { + return ( +
+

Title

+

Paragraph

+
+ ); +}`; + + const changes = new Map([ + [5, { classes: ["text-[32px]"], prefixes: ["text-size-"] }], + [6, { classes: ["text-[16px]"], prefixes: ["text-size-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).toContain("text-[32px]"); + expect(result).not.toContain("text-[18px]"); + expect(result).toContain("text-[16px]"); + expect(result).not.toContain("text-[14px]"); + }); + }); + + describe("edge cases", () => { + it("should handle empty changes map", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const changes = new Map(); + const result = transformContent(content, changes); + expect(result).toContain("text-[18px]"); + expect(result).toContain("Hello"); + }); + + it("should preserve code formatting", () => { + const content = ` +function Component() { + return ( +
+ Hello +
+ ); +}`; + + const changes = new Map([ + [4, { classes: ["text-[24px]"], prefixes: ["text-size-"] }], + ]); + + const result = transformContent(content, changes); + expect(result).toContain("text-[24px]"); + // Recast should preserve overall structure + expect(result).toMatch(/return\s*\(/); + }); + }); +}); + +describe("analyzeComponent", () => { + describe("dynamic styling detection", () => { + it("should detect conditional className", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.isDynamic).toBe(true); + }); + + it("should detect logical expression className", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.isDynamic).toBe(true); + }); + + it("should detect template literal className", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.isDynamic).toBe(true); + }); + + it("should detect identifier className", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.isDynamic).toBe(true); + }); + + it("should detect function call className", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.isDynamic).toBe(true); + }); + + it("should detect dynamic style attribute", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.isDynamic).toBe(true); + }); + + it("should not detect static className", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.isDynamic).toBe(false); + }); + + it("should not detect when no className or style", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.isDynamic).toBe(false); + }); + }); + + describe("static text detection", () => { + it("should detect static text content", () => { + const content = ` +function Component() { + return
Static text content
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.hasStaticText).toBe(true); + }); + + it("should detect string literal in expression container", () => { + const content = ` +function Component() { + return
{"Static text"}
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.hasStaticText).toBe(true); + }); + + it("should not detect static text when element has nested JSX", () => { + const content = ` +function Component() { + return
Text nested
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.hasStaticText).toBe(false); + }); + + it("should not detect static text when empty", () => { + const content = ` +function Component() { + return
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.hasStaticText).toBe(false); + }); + + it("should ignore whitespace-only text", () => { + const content = ` +function Component() { + return
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.hasStaticText).toBe(false); + }); + + it("should not detect static text with dynamic expression", () => { + const content = ` +function Component() { + return
{dynamicText}
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.hasStaticText).toBe(false); + }); + }); + + describe("combined analysis", () => { + it("should detect both dynamic styling and static text", () => { + const content = ` +function Component() { + return
Static text
; +}`; + + const result = analyzeComponent(content, 3); + expect(result.isDynamic).toBe(true); + expect(result.hasStaticText).toBe(true); + }); + + it("should return false for both when element not found", () => { + const content = ` +function Component() { + return
Hello
; +}`; + + const result = analyzeComponent(content, 999); + expect(result.isDynamic).toBe(false); + expect(result.hasStaticText).toBe(false); + }); + }); + + describe("nested elements", () => { + it("should analyze correct element on specified line", () => { + const content = ` +function Component() { + return ( +
+ Inner +
+ ); +}`; + + const outerResult = analyzeComponent(content, 4); + expect(outerResult.isDynamic).toBe(false); + expect(outerResult.hasStaticText).toBe(false); + + const innerResult = analyzeComponent(content, 5); + expect(innerResult.isDynamic).toBe(true); + expect(innerResult.hasStaticText).toBe(true); + }); + }); + + describe("TypeScript support", () => { + it("should handle TypeScript syntax", () => { + const content = ` +function Component(): JSX.Element { + const props: Props = { active: true }; + return
Hello
; +}`; + + const result = analyzeComponent(content, 4); + expect(result.isDynamic).toBe(true); + expect(result.hasStaticText).toBe(true); + }); + }); +}); diff --git a/src/pro/main/utils/visual_editing_utils.ts b/src/pro/main/utils/visual_editing_utils.ts new file mode 100644 index 0000000..4a0de9c --- /dev/null +++ b/src/pro/main/utils/visual_editing_utils.ts @@ -0,0 +1,361 @@ +import { parse } from "@babel/parser"; +import * as recast from "recast"; +import traverse from "@babel/traverse"; + +interface ContentChange { + classes: string[]; + prefixes: string[]; + textContent?: string; +} + +interface ComponentAnalysis { + isDynamic: boolean; + hasStaticText: boolean; +} + +/** + * Pure function that transforms JSX/TSX content by applying style and text changes + * @param content - The source code content to transform + * @param changes - Map of line numbers to their changes + * @returns The transformed source code + */ +export function transformContent( + content: string, + changes: Map, +): string { + // Parse with babel for compatibility with JSX/TypeScript + const ast = parse(content, { + sourceType: "module", + plugins: ["jsx", "typescript"], + }); + + // Track which lines have been processed to avoid modifying nested elements + const processedLines = new Set(); + + traverse(ast, { + JSXElement(path) { + const line = path.node.openingElement.loc?.start.line; + + // Only process if we have changes for this line and haven't processed it yet + if (line && changes.has(line) && !processedLines.has(line)) { + processedLines.add(line); + const change = changes.get(line)!; + + // Check if this element has any nested JSX elements as direct children + const hasNestedJSX = path.node.children.some( + (child: any) => child.type === "JSXElement", + ); + + // Skip text content modification if there are nested elements + const shouldModifyText = + "textContent" in change && + change.textContent !== undefined && + !hasNestedJSX; + + // Update className if there are style changes + if (change.classes.length > 0) { + const attributes = path.node.openingElement.attributes; + let classNameAttr = attributes.find( + (attr: any) => + attr.type === "JSXAttribute" && attr.name.name === "className", + ) as any; + + if (classNameAttr) { + // Get existing classes + let existingClasses: string[] = []; + if ( + classNameAttr.value && + classNameAttr.value.type === "StringLiteral" + ) { + existingClasses = classNameAttr.value.value + .split(/\s+/) + .filter(Boolean); + } + + // Filter out classes with matching prefixes + const shouldRemoveClass = (cls: string, prefixes: string[]) => { + return prefixes.some((prefix) => { + // Handle font-weight vs font-family distinction + if (prefix === "font-weight-") { + // Remove font-[numeric] classes + const match = cls.match(/^font-\[(\d+)\]$/); + return match !== null; + } else if (prefix === "font-family-") { + // Remove font-[non-numeric] classes + const match = cls.match(/^font-\[([^\]]+)\]$/); + if (match) { + // Check if it's NOT purely numeric (i.e., it's a font-family) + return !/^\d+$/.test(match[1]); + } + return false; + } else if (prefix === "text-size-") { + // Remove only text-size classes (text-xs, text-3xl, text-[44px], etc.) + // but NOT text-center, text-left, text-red-500, etc. + const sizeMatch = cls.match( + /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/, + ); + if (sizeMatch) return true; + // Also match arbitrary text sizes like text-[44px] + if (cls.match(/^text-\[[\d.]+[a-z]+\]$/)) return true; + return false; + } else if (prefix === "my-" || prefix === "py-") { + // When applying vertical spacing (my/py), remove mt-, mb-, my-/py-, and m-/p- (all sides) + const type = prefix[0]; // 'm' or 'p' + return ( + cls.startsWith(`${type}t-`) || + cls.startsWith(`${type}b-`) || + cls.startsWith(`${type}y-`) || + cls.match(new RegExp(`^${type}-\\[`)) // Match m-[...] or p-[...] + ); + } else if (prefix === "mx-" || prefix === "px-") { + // When applying horizontal spacing (mx/px), remove ml-, mr-, mx-/px-, and m-/p- (all sides) + const type = prefix[0]; // 'm' or 'p' + return ( + cls.startsWith(`${type}l-`) || + cls.startsWith(`${type}r-`) || + cls.startsWith(`${type}x-`) || + cls.match(new RegExp(`^${type}-\\[`)) // Match m-[...] or p-[...] + ); + } else { + // For other prefixes, use simple startsWith + return cls.startsWith(prefix); + } + }); + }; + + let filteredClasses = existingClasses.filter( + (cls) => !shouldRemoveClass(cls, change.prefixes), + ); + + // Special case: When adding mx-/px- or my-/py-, check if we need to preserve complementary spacing + // If we're removing m-[value]/p-[value], we should add the complementary directional class + // BUT only if we're not already adding both directional classes + const addedClasses: string[] = []; + + // Check for each spacing type (margin and padding) + ["m", "p"].forEach((type) => { + const hasDirectionalX = change.prefixes.some( + (p) => p === `${type}x-`, + ); + const hasDirectionalY = change.prefixes.some( + (p) => p === `${type}y-`, + ); + + // Only process if we're adding at least one directional class for this type + if (!hasDirectionalX && !hasDirectionalY) { + return; // Skip this type + } + + // Find if there was an all-sides class (m-[...] or p-[...]) + const allSidesClass = existingClasses.find((cls) => + cls.match(new RegExp(`^${type}-\\[([^\\]]+)\\]$`)), + ); + + if (allSidesClass) { + // Remove the omni-directional class from filtered classes + filteredClasses = filteredClasses.filter( + (cls) => cls !== allSidesClass, + ); + + // Extract the value + const valueMatch = allSidesClass.match(/\[([^\]]+)\]/); + if (valueMatch) { + const omnidirectionalValue = valueMatch[1]; + + // Only add complementary class if we're not adding both directions + if (hasDirectionalX && !hasDirectionalY) { + // Adding mx-[], so preserve the value as my-[] + addedClasses.push(`${type}y-[${omnidirectionalValue}]`); + } else if (hasDirectionalY && !hasDirectionalX) { + // Adding my-[], so preserve the value as mx-[] + addedClasses.push(`${type}x-[${omnidirectionalValue}]`); + } + // If both are being added, we don't need to preserve anything + } + } + }); + + // Combine filtered, preserved, and new classes + const updatedClasses = [ + ...filteredClasses, + ...addedClasses, + ...change.classes, + ].join(" "); + + // Update the className value + classNameAttr.value = { + type: "StringLiteral", + value: updatedClasses, + }; + } else { + // Add className attribute + attributes.push({ + type: "JSXAttribute", + name: { type: "JSXIdentifier", name: "className" }, + value: { + type: "StringLiteral", + value: change.classes.join(" "), + }, + }); + } + } + + if (shouldModifyText) { + // Check if all children are text nodes (no nested JSX elements) + const hasOnlyTextChildren = path.node.children.every((child: any) => { + // JSXElement means there's a nested component/element + if (child.type === "JSXElement") return false; + return ( + child.type === "JSXText" || + (child.type === "JSXExpressionContainer" && + child.expression.type === "StringLiteral") + ); + }); + + // Only replace children if there are no nested JSX elements + if (hasOnlyTextChildren) { + path.node.children = [ + { + type: "JSXText", + value: change.textContent, + } as any, + ]; + } + } + } + }, + }); + + // Use recast to generate code with preserved formatting + const output = recast.print(ast); + return output.code; +} + +/** + * Analyzes a JSX/TSX component at a specific line to determine: + * - Whether it has dynamic styling (className/style with expressions) + * - Whether it contains static text content + */ +export function analyzeComponent( + content: string, + line: number, +): ComponentAnalysis { + const ast = parse(content, { + sourceType: "module", + plugins: ["jsx", "typescript"], + }); + + let foundElement: any = null; + + // Simple recursive walker to find JSXElement + const walk = (node: any): void => { + if (!node) return; + + if ( + node.type === "JSXElement" && + node.openingElement?.loc?.start.line === line + ) { + foundElement = node; + return; + } + + // Handle arrays (like body of a program or block) + if (Array.isArray(node)) { + for (const child of node) { + walk(child); + if (foundElement) return; + } + return; + } + + // Handle objects + for (const key in node) { + if ( + key !== "loc" && + key !== "start" && + key !== "end" && + node[key] && + typeof node[key] === "object" + ) { + walk(node[key]); + if (foundElement) return; + } + } + }; + + walk(ast); + + if (!foundElement) { + return { isDynamic: false, hasStaticText: false }; + } + + let dynamic = false; + let staticText = false; + + // Check attributes for dynamic styling + if (foundElement.openingElement.attributes) { + foundElement.openingElement.attributes.forEach((attr: any) => { + if (attr.type === "JSXAttribute" && attr.name && attr.name.name) { + const attrName = attr.name.name; + if (attrName === "style" || attrName === "className") { + if (attr.value && attr.value.type === "JSXExpressionContainer") { + const expr = attr.value.expression; + // Check for conditional/logical/template + if ( + expr.type === "ConditionalExpression" || + expr.type === "LogicalExpression" || + expr.type === "TemplateLiteral" + ) { + dynamic = true; + } + // Check for identifiers (variables) + if ( + expr.type === "Identifier" || + expr.type === "MemberExpression" + ) { + dynamic = true; + } + // Check for CallExpression (function calls) + if (expr.type === "CallExpression") { + dynamic = true; + } + // Check for ObjectExpression (inline objects like style={{...}}) + if (expr.type === "ObjectExpression") { + dynamic = true; + } + } + } + } + }); + } + + // Check children for static text + let allChildrenAreText = true; + let hasText = false; + + if (foundElement.children && foundElement.children.length > 0) { + foundElement.children.forEach((child: any) => { + if (child.type === "JSXText") { + // It's text (could be whitespace) + if (child.value.trim().length > 0) hasText = true; + } else if ( + child.type === "JSXExpressionContainer" && + child.expression.type === "StringLiteral" + ) { + hasText = true; + } else { + // If it's not text (e.g. another Element), mark as not text-only + allChildrenAreText = false; + } + }); + } else { + // No children + allChildrenAreText = true; + } + + if (hasText && allChildrenAreText) { + staticText = true; + } + + return { isDynamic: dynamic, hasStaticText: staticText }; +} diff --git a/src/utils/style-utils.ts b/src/utils/style-utils.ts new file mode 100644 index 0000000..e2e5316 --- /dev/null +++ b/src/utils/style-utils.ts @@ -0,0 +1,199 @@ +// Style conversion and manipulation utilities + +interface SpacingValues { + left?: string; + right?: string; + top?: string; + bottom?: string; +} + +interface StyleObject { + margin?: { left?: string; right?: string; top?: string; bottom?: string }; + padding?: { left?: string; right?: string; top?: string; bottom?: string }; + dimensions?: { width?: string; height?: string }; + border?: { width?: string; radius?: string; color?: string }; + backgroundColor?: string; + text?: { + fontSize?: string; + fontWeight?: string; + color?: string; + fontFamily?: string; + }; +} + +/** + * Convert spacing values (margin/padding) to Tailwind classes + */ +function convertSpacingToTailwind( + values: SpacingValues, + prefix: "m" | "p", +): string[] { + const classes: string[] = []; + const { left, right, top, bottom } = values; + + const hasHorizontal = left !== undefined && right !== undefined; + const hasVertical = top !== undefined && bottom !== undefined; + + // All sides equal + if ( + hasHorizontal && + hasVertical && + left === right && + top === bottom && + left === top + ) { + classes.push(`${prefix}-[${left}]`); + } else { + const horizontalValue = hasHorizontal && left === right ? left : null; + const verticalValue = hasVertical && top === bottom ? top : null; + + if ( + horizontalValue !== null && + verticalValue !== null && + horizontalValue === verticalValue + ) { + // px = py or mx = my, so use the shorthand for all sides + classes.push(`${prefix}-[${horizontalValue}]`); + } else { + // Horizontal + if (hasHorizontal && left === right) { + classes.push(`${prefix}x-[${left}]`); + } else { + if (left !== undefined) classes.push(`${prefix}l-[${left}]`); + if (right !== undefined) classes.push(`${prefix}r-[${right}]`); + } + + // Vertical + if (hasVertical && top === bottom) { + classes.push(`${prefix}y-[${top}]`); + } else { + if (top !== undefined) classes.push(`${prefix}t-[${top}]`); + if (bottom !== undefined) classes.push(`${prefix}b-[${bottom}]`); + } + } + } + + return classes; +} + +/** + * Convert style object to Tailwind classes + */ +export function stylesToTailwind(styles: StyleObject): string[] { + const classes: string[] = []; + + if (styles.margin) { + classes.push(...convertSpacingToTailwind(styles.margin, "m")); + } + + if (styles.padding) { + classes.push(...convertSpacingToTailwind(styles.padding, "p")); + } + + if (styles.border) { + if (styles.border.width !== undefined) + classes.push(`border-[${styles.border.width}]`); + if (styles.border.radius !== undefined) + classes.push(`rounded-[${styles.border.radius}]`); + if (styles.border.color !== undefined) + classes.push(`border-[${styles.border.color}]`); + } + + if (styles.backgroundColor !== undefined) { + classes.push(`bg-[${styles.backgroundColor}]`); + } + + if (styles.dimensions) { + if (styles.dimensions.width !== undefined) + classes.push(`w-[${styles.dimensions.width}]`); + if (styles.dimensions.height !== undefined) + classes.push(`h-[${styles.dimensions.height}]`); + } + + if (styles.text) { + if (styles.text.fontSize !== undefined) + classes.push(`text-[${styles.text.fontSize}]`); + if (styles.text.fontWeight !== undefined) + classes.push(`font-[${styles.text.fontWeight}]`); + if (styles.text.color !== undefined) + classes.push(`[color:${styles.text.color}]`); + if (styles.text.fontFamily !== undefined) { + // Replace spaces with underscores for Tailwind arbitrary values + const fontFamilyValue = styles.text.fontFamily.replace(/\s/g, "_"); + classes.push(`font-[${fontFamilyValue}]`); + } + } + + return classes; +} + +/** + * Convert RGB color to hex format + */ +export function rgbToHex(rgb: string): string { + if (!rgb || rgb.startsWith("#")) return rgb || "#000000"; + const rgbMatch = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/); + if (rgbMatch) { + const r = parseInt(rgbMatch[1]).toString(16).padStart(2, "0"); + const g = parseInt(rgbMatch[2]).toString(16).padStart(2, "0"); + const b = parseInt(rgbMatch[3]).toString(16).padStart(2, "0"); + return `#${r}${g}${b}`; + } + return rgb || "#000000"; +} + +/** + * Process value by adding px suffix if it's a plain number + */ +export function processNumericValue(value: string): string { + return /^\d+$/.test(value) ? `${value}px` : value; +} + +/** + * Extract prefixes from Tailwind classes + */ +export function extractClassPrefixes(classes: string[]): string[] { + return Array.from( + new Set( + classes.map((cls) => { + // Handle arbitrary properties like [color:...] + const arbitraryMatch = cls.match(/^\[([a-z-]+):/); + if (arbitraryMatch) { + return `[${arbitraryMatch[1]}:`; + } + + // Special handling for font-[...] classes + // We need to distinguish between font-weight and font-family + if (cls.startsWith("font-[")) { + const value = cls.match(/^font-\[([^\]]+)\]/); + if (value) { + // If it's numeric (like 400, 700), it's font-weight + // If it contains letters/underscores, it's font-family + const isNumeric = /^\d+$/.test(value[1]); + return isNumeric ? "font-weight-" : "font-family-"; + } + } + + // Special handling for text-size classes (text-xs, text-sm, text-3xl, etc.) + // to avoid removing text-center, text-left, text-color classes + if (cls.startsWith("text-")) { + // Check if it's a font-size class (ends with size suffix like xs, sm, lg, xl, 2xl, etc.) + const sizeMatch = cls.match( + /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/, + ); + if (sizeMatch) { + return "text-size-"; // Use a specific prefix for font-size + } + // For arbitrary text sizes like text-[44px] + if (cls.match(/^text-\[[\d.]+[a-z]+\]$/)) { + return "text-size-"; + } + } + + // Handle regular Tailwind classes + const match = cls.match(/^([a-z]+[-])/); + return match ? match[1] : cls.split("-")[0] + "-"; + }), + ), + ); +} diff --git a/worker/dyad-component-selector-client.js b/worker/dyad-component-selector-client.js index c6fb56d..1003dbc 100644 --- a/worker/dyad-component-selector-client.js +++ b/worker/dyad-component-selector-client.js @@ -4,6 +4,9 @@ let hoverOverlay = null; let hoverLabel = null; let currentHoveredElement = null; + let highlightedElement = null; + let componentCoordinates = null; // Store the last selected component's coordinates + let isProMode = false; // Track if pro mode is enabled //detect if the user is using Mac const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0; @@ -51,7 +54,7 @@ return { overlay, label }; } - function updateOverlay(el, isSelected = false) { + function updateOverlay(el, isSelected = false, isHighlighted = false) { // If no element, hide hover overlay if (!el) { if (hoverOverlay) hoverOverlay.style.display = "none"; @@ -67,14 +70,19 @@ overlays.push({ overlay, label, el }); const rect = el.getBoundingClientRect(); + const borderColor = isHighlighted ? "#00ff00" : "#7f22fe"; + const backgroundColor = isHighlighted + ? "rgba(0, 255, 0, 0.05)" + : "rgba(127, 34, 254, 0.05)"; + css(overlay, { top: `${rect.top + window.scrollY}px`, left: `${rect.left + window.scrollX}px`, width: `${rect.width}px`, height: `${rect.height}px`, display: "block", - border: "3px solid #7f22fe", - background: "rgba(127, 34, 254, 0.05)", + border: `3px solid ${borderColor}`, + background: backgroundColor, }); css(label, { display: "none" }); @@ -143,6 +151,30 @@ height: `${rect.height}px`, }); } + + // Send updated coordinates for highlighted or selected component to parent + if (highlightedElement) { + // Multi-selector mode: send coordinates for the highlighted component + const highlightedItem = overlays.find( + ({ el }) => el === highlightedElement, + ); + + if (highlightedItem) { + const rect = highlightedItem.el.getBoundingClientRect(); + window.parent.postMessage( + { + type: "dyad-component-coordinates-updated", + coordinates: { + top: rect.top, + left: rect.left, + width: rect.width, + height: rect.height, + }, + }, + "*", + ); + } + } } function clearOverlays() { @@ -156,17 +188,70 @@ } currentHoveredElement = null; + highlightedElement = null; } function removeOverlayById(componentId) { - const index = overlays.findIndex( - ({ el }) => el.dataset.dyadId === componentId, - ); - if (index !== -1) { - const { overlay } = overlays[index]; + // Remove all overlays with the same componentId + const indicesToRemove = []; + overlays.forEach((item, index) => { + if (item.el.dataset.dyadId === componentId) { + indicesToRemove.push(index); + } + }); + + // Remove in reverse order to maintain correct indices + for (let i = indicesToRemove.length - 1; i >= 0; i--) { + const { overlay } = overlays[indicesToRemove[i]]; overlay.remove(); - overlays.splice(index, 1); + overlays.splice(indicesToRemove[i], 1); } + + if ( + highlightedElement && + highlightedElement.dataset.dyadId === componentId + ) { + highlightedElement = null; + } + } + + // Helper function to check if mouse is over the toolbar + function isMouseOverToolbar(mouseX, mouseY) { + if (!componentCoordinates) return false; + + // Toolbar is positioned at bottom of component: top = coordinates.top + coordinates.height + 4px + const toolbarTop = + componentCoordinates.top + componentCoordinates.height + 4; + const toolbarLeft = componentCoordinates.left; + const toolbarHeight = 60; + // Add some padding to the width since we don't know exact width + const toolbarWidth = componentCoordinates.width || 400; + + return ( + mouseY >= toolbarTop && + mouseY <= toolbarTop + toolbarHeight && + mouseX >= toolbarLeft && + mouseX <= toolbarLeft + toolbarWidth + ); + } + + // Helper function to check if the highlighted component is inside another selected component + function isHighlightedComponentChildOfSelected() { + if (!highlightedElement) return null; + + const highlightedItem = overlays.find( + ({ el }) => el === highlightedElement, + ); + if (!highlightedItem) return null; + + // Check if any other selected component contains the highlighted element + for (const item of overlays) { + if (item.el === highlightedItem.el) continue; // Skip the highlighted component itself + if (item.el.contains(highlightedItem.el)) { + return item; // Return the parent component + } + } + return null; } // Helper function to show/hide and populate label for a selected overlay @@ -227,11 +312,43 @@ /* ---------- event handlers -------------------------------------------- */ function onMouseMove(e) { + // Check if mouse is over toolbar - if so, hide the label and treat as if mouse left component + if (isMouseOverToolbar(e.clientX, e.clientY)) { + if (currentHoveredElement) { + const previousItem = overlays.find( + (item) => item.el === currentHoveredElement, + ); + if (previousItem) { + updateSelectedOverlayLabel(previousItem, false); + } + currentHoveredElement = null; + } + return; + } + let el = e.target; while (el && !el.dataset.dyadId) el = el.parentElement; const hoveredItem = overlays.find((item) => item.el === el); + // Check if the highlighted component is a child of another selected component + const parentOfHighlighted = isHighlightedComponentChildOfSelected(); + + // If hovering over the highlighted component and it has a parent, hide the parent's label + if ( + hoveredItem && + hoveredItem.el === highlightedElement && + parentOfHighlighted + ) { + // Hide the parent component's label + updateSelectedOverlayLabel(parentOfHighlighted, false); + // Also clear currentHoveredElement if it's the parent + if (currentHoveredElement === parentOfHighlighted.el) { + currentHoveredElement = null; + } + return; + } + if (currentHoveredElement && currentHoveredElement !== el) { const previousItem = overlays.find( (item) => item.el === currentHoveredElement, @@ -243,8 +360,8 @@ currentHoveredElement = el; - // If hovering over a selected component, show its label - if (hoveredItem) { + // If hovering over a selected component, show its label only if it's not highlighted + if (hoveredItem && hoveredItem.el !== highlightedElement) { updateSelectedOverlayLabel(hoveredItem, true); if (hoverOverlay) hoverOverlay.style.display = "none"; } @@ -280,29 +397,76 @@ e.preventDefault(); e.stopPropagation(); - const selectedItem = overlays.find((item) => item.el === e.target); - if (selectedItem) { - removeOverlayById(state.element.dataset.dyadId); + const clickedComponentId = state.element.dataset.dyadId; + const selectedItem = overlays.find((item) => item.el === state.element); + + // If clicking on the currently highlighted component, deselect it + if (selectedItem && (highlightedElement === state.element || !isProMode)) { + if (state.element.contentEditable === "true") { + return; + } + + removeOverlayById(clickedComponentId); + requestAnimationFrame(updateAllOverlayPositions); + highlightedElement = null; + + // Only post message once for all elements with the same ID window.parent.postMessage( { type: "dyad-component-deselected", - componentId: state.element.dataset.dyadId, + componentId: clickedComponentId, }, "*", ); return; } - updateOverlay(state.element, true); + // Update only the previously highlighted component + if (highlightedElement && highlightedElement !== state.element) { + const previousItem = overlays.find( + (item) => item.el === highlightedElement, + ); + if (previousItem) { + css(previousItem.overlay, { + border: `3px solid #7f22fe`, + background: "rgba(127, 34, 254, 0.05)", + }); + } + } - requestAnimationFrame(updateAllOverlayPositions); + highlightedElement = state.element; + if (selectedItem && isProMode) { + css(selectedItem.overlay, { + border: `3px solid #00ff00`, + background: "rgba(0, 255, 0, 0.05)", + }); + } + + if (!selectedItem) { + updateOverlay(state.element, true, isProMode); + requestAnimationFrame(updateAllOverlayPositions); + } + + // Assign a unique runtime ID to this element if it doesn't have one + if (!state.element.dataset.dyadRuntimeId) { + state.element.dataset.dyadRuntimeId = `dyad-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; + } + + const rect = state.element.getBoundingClientRect(); window.parent.postMessage( { type: "dyad-component-selected", component: { - id: state.element.dataset.dyadId, + id: clickedComponentId, name: state.element.dataset.dyadName, + runtimeId: state.element.dataset.dyadRuntimeId, + }, + coordinates: { + top: rect.top, + left: rect.left, + width: rect.width, + height: rect.height, }, }, "*", @@ -362,10 +526,30 @@ /* ---------- message bridge -------------------------------------------- */ window.addEventListener("message", (e) => { if (e.source !== window.parent) return; + if (e.data.type === "dyad-pro-mode") { + isProMode = e.data.enabled; + } if (e.data.type === "activate-dyad-component-selector") activate(); if (e.data.type === "deactivate-dyad-component-selector") deactivate(); + if (e.data.type === "activate-dyad-visual-editing") { + activate(); + } + if (e.data.type === "deactivate-dyad-visual-editing") { + deactivate(); + clearOverlays(); + } if (e.data.type === "clear-dyad-component-overlays") clearOverlays(); - if (e.data.type === "remove-dyad-component-overlay") { + if (e.data.type === "update-dyad-overlay-positions") { + updateAllOverlayPositions(); + } + if (e.data.type === "update-component-coordinates") { + // Store component coordinates for toolbar hover detection + componentCoordinates = e.data.coordinates; + } + if ( + e.data.type === "remove-dyad-component-overlay" || + e.data.type === "deselect-dyad-component" + ) { if (e.data.componentId) { removeOverlayById(e.data.componentId); } @@ -380,8 +564,9 @@ document.addEventListener("mouseleave", onMouseLeave, true); - // Update overlay positions on window resize + // Update overlay positions on window resize and scroll window.addEventListener("resize", updateAllOverlayPositions); + window.addEventListener("scroll", updateAllOverlayPositions, true); function initializeComponentSelector() { if (!document.body) { diff --git a/worker/dyad-visual-editor-client.js b/worker/dyad-visual-editor-client.js new file mode 100644 index 0000000..0d113eb --- /dev/null +++ b/worker/dyad-visual-editor-client.js @@ -0,0 +1,278 @@ +(() => { + /* ---------- helpers --------------------------------------------------- */ + + // Track text editing state globally + let textEditingState = new Map(); // componentId -> { originalText, currentText, cleanup } + + function findElementByDyadId(dyadId, runtimeId) { + // If runtimeId is provided, try to find element by runtime ID first + if (runtimeId) { + const elementByRuntimeId = document.querySelector( + `[data-dyad-runtime-id="${runtimeId}"]`, + ); + if (elementByRuntimeId) { + return elementByRuntimeId; + } + } + + // Fall back to finding by dyad-id (will get first match) + const escaped = CSS.escape(dyadId); + return document.querySelector(`[data-dyad-id="${escaped}"]`); + } + + function applyStyles(element, styles) { + if (!element || !styles) return; + + console.debug( + `[Dyad Visual Editor] Applying styles:`, + styles, + "to element:", + element, + ); + + const applySpacing = (type, values) => { + if (!values) return; + Object.entries(values).forEach(([side, value]) => { + const cssProperty = `${type}${side.charAt(0).toUpperCase() + side.slice(1)}`; + element.style[cssProperty] = value; + }); + }; + + applySpacing("margin", styles.margin); + applySpacing("padding", styles.padding); + + if (styles.border) { + if (styles.border.width !== undefined) { + element.style.borderWidth = styles.border.width; + element.style.borderStyle = "solid"; + } + if (styles.border.radius !== undefined) { + element.style.borderRadius = styles.border.radius; + } + if (styles.border.color !== undefined) { + element.style.borderColor = styles.border.color; + } + } + + if (styles.backgroundColor !== undefined) { + element.style.backgroundColor = styles.backgroundColor; + } + + if (styles.text) { + const textProps = { + fontSize: "fontSize", + fontWeight: "fontWeight", + fontFamily: "fontFamily", + color: "color", + }; + Object.entries(textProps).forEach(([key, cssProp]) => { + if (styles.text[key] !== undefined) { + element.style[cssProp] = styles.text[key]; + } + }); + } + } + + /* ---------- message handlers ------------------------------------------ */ + + function handleGetStyles(data) { + const { elementId, runtimeId } = data; + const element = findElementByDyadId(elementId, runtimeId); + if (element) { + const computedStyle = window.getComputedStyle(element); + const styles = { + margin: { + top: computedStyle.marginTop, + right: computedStyle.marginRight, + bottom: computedStyle.marginBottom, + left: computedStyle.marginLeft, + }, + padding: { + top: computedStyle.paddingTop, + right: computedStyle.paddingRight, + bottom: computedStyle.paddingBottom, + left: computedStyle.paddingLeft, + }, + border: { + width: computedStyle.borderWidth, + radius: computedStyle.borderRadius, + color: computedStyle.borderColor, + }, + backgroundColor: computedStyle.backgroundColor, + text: { + fontSize: computedStyle.fontSize, + fontWeight: computedStyle.fontWeight, + fontFamily: computedStyle.fontFamily, + color: computedStyle.color, + }, + }; + + window.parent.postMessage( + { + type: "dyad-component-styles", + data: styles, + }, + "*", + ); + } + } + + function handleModifyStyles(data) { + const { elementId, runtimeId, styles } = data; + const element = findElementByDyadId(elementId, runtimeId); + if (element) { + applyStyles(element, styles); + + // Send updated coordinates after style change + + const rect = element.getBoundingClientRect(); + window.parent.postMessage( + { + type: "dyad-component-coordinates-updated", + coordinates: { + top: rect.top, + left: rect.left, + width: rect.width, + height: rect.height, + }, + }, + "*", + ); + } + } + + function handleEnableTextEditing(data) { + const { componentId, runtimeId } = data; + + // Clean up any existing text editing states first + textEditingState.forEach((state, existingId) => { + if (existingId !== componentId) { + state.cleanup(); + } + }); + + const element = findElementByDyadId(componentId, runtimeId); + if (element) { + const originalText = element.innerText; + + element.contentEditable = "true"; + element.focus(); + + // Select all text + const range = document.createRange(); + range.selectNodeContents(element); + const sel = window.getSelection(); + sel.removeAllRanges(); + sel.addRange(range); + + // Send updates as user types + const onInput = () => { + const currentText = element.innerText; + + // Update tracked state + const state = textEditingState.get(componentId); + if (state) { + state.currentText = currentText; + } + + window.parent.postMessage( + { + type: "dyad-text-updated", + componentId, + text: currentText, + }, + "*", + ); + }; + + element.addEventListener("input", onInput); + + // Prevent click from propagating to selector while editing + const stopProp = (e) => e.stopPropagation(); + element.addEventListener("click", stopProp); + + // Cleanup function + const cleanup = () => { + element.contentEditable = "false"; + element.removeEventListener("input", onInput); + element.removeEventListener("click", stopProp); + + // Send final text update + const finalText = element.innerText; + window.parent.postMessage( + { + type: "dyad-text-finalized", + componentId, + text: finalText, + }, + "*", + ); + + textEditingState.delete(componentId); + }; + + // Store state + textEditingState.set(componentId, { + originalText, + currentText: originalText, + cleanup, + }); + } + } + + function handleDisableTextEditing(data) { + const { componentId } = data; + const state = textEditingState.get(componentId); + if (state) { + state.cleanup(); + } + } + + function handleGetTextContent(data) { + const { componentId, runtimeId } = data; + const element = findElementByDyadId(componentId, runtimeId); + const state = textEditingState.get(componentId); + + window.parent.postMessage( + { + type: "dyad-text-content-response", + componentId, + text: state ? state.currentText : element ? element.innerText : null, + isEditing: !!state, + }, + "*", + ); + } + + /* ---------- message bridge -------------------------------------------- */ + + window.addEventListener("message", (e) => { + if (e.source !== window.parent) return; + + const { type, data } = e.data; + + switch (type) { + case "get-dyad-component-styles": + handleGetStyles(data); + break; + case "modify-dyad-component-styles": + handleModifyStyles(data); + break; + case "enable-dyad-text-editing": + handleEnableTextEditing(data); + break; + case "disable-dyad-text-editing": + handleDisableTextEditing(data); + break; + case "get-dyad-text-content": + handleGetTextContent(data); + break; + case "cleanup-all-text-editing": + // Clean up all text editing states + textEditingState.forEach((state) => { + state.cleanup(); + }); + break; + } + }); +})(); diff --git a/worker/proxy_server.js b/worker/proxy_server.js index e414429..ecaee07 100644 --- a/worker/proxy_server.js +++ b/worker/proxy_server.js @@ -38,6 +38,7 @@ let rememberedOrigin = null; // e.g. "http://localhost:5173" let stacktraceJsContent = null; let dyadShimContent = null; let dyadComponentSelectorClientContent = null; +let dyadVisualEditorClientContent = null; try { const stackTraceLibPath = path.join( __dirname, @@ -83,6 +84,24 @@ try { ); } +try { + const dyadVisualEditorClientPath = path.join( + __dirname, + "dyad-visual-editor-client.js", + ); + dyadVisualEditorClientContent = fs.readFileSync( + dyadVisualEditorClientPath, + "utf-8", + ); + parentPort?.postMessage( + "[proxy-worker] dyad-visual-editor-client.js loaded.", + ); +} catch (error) { + parentPort?.postMessage( + `[proxy-worker] Failed to read dyad-visual-editor-client.js: ${error.message}`, + ); +} + /* ---------------------- helper: need to inject? ------------------------ */ function needsInjection(pathname) { // Inject for routes without a file extension (e.g., "/foo", "/foo/bar", "/") @@ -124,6 +143,13 @@ function injectHTML(buf) { '', ); } + if (dyadVisualEditorClientContent) { + scripts.push(``); + } else { + scripts.push( + '', + ); + } const allScripts = scripts.join("\n"); const headRegex = /]*>/i;