openmagic 0.18.0 → 0.20.0

package/dist/cli.js

@@ -904,17 +904,18 @@ You MUST respond with valid JSON in this exact format:
 ## Rules
 1. The \`search\` field must contain the EXACT text from the source file \u2014 copy it precisely, including whitespace and indentation
 2. Keep modifications minimal \u2014 change only what's needed
-3. If you need to read a file first, say so in the explanation and the developer can provide it
-4. For style changes, prefer modifying existing CSS/Tailwind classes over adding inline styles
+3. If the grounded files don't contain the element you need to modify, return: {"modifications":[],"explanation":"NEED_FILE: path/to/file.tsx"} \u2014 the system will automatically read it and retry
+4. For style changes, prefer modifying existing CSS/Tailwind classes over adding inline styles. Check the dependencies to know if the project uses Tailwind, MUI, etc.
 5. Always preserve the existing code style and conventions
 6. If the change involves multiple files, include all modifications in the array
 7. ALWAYS respond with the JSON format above, even for explanations (put them in the "explanation" field)
-8. If you cannot make the requested change, set modifications to an empty array and explain why`;
+8. Use the selected element's cssSelector, className, parentContainerStyles, and siblings to understand the layout context before making changes
+9. Use the page URL and componentHint to identify the correct source file`;
 function buildContextParts(context) {
   const parts = {};
   if (context.selectedElement) {
     const el = context.selectedElement;
-    parts.selectedElement = JSON.stringify({
+    const elementData = {
       cssSelector: el.cssSelector,
       tagName: el.tagName,
       id: el.id,
@@ -923,7 +924,29 @@ function buildContextParts(context) {
       computedStyles: el.computedStyles,
       ancestry: el.ancestry,
       componentHint: el.componentHint
-    }, null, 2);
+    };
+    if (el.parentStyles && Object.keys(el.parentStyles).length) {
+      elementData.parentContainerStyles = el.parentStyles;
+    }
+    if (el.siblings?.length) {
+      elementData.siblings = el.siblings;
+    }
+    if (el.matchedCssRules?.length) {
+      elementData.matchedCssRules = el.matchedCssRules;
+    }
+    if (el.viewport) {
+      elementData.viewport = el.viewport;
+    }
+    if (el.ariaAttributes && Object.keys(el.ariaAttributes).length) {
+      elementData.ariaAttributes = el.ariaAttributes;
+    }
+    if (el.eventHandlers?.length) {
+      elementData.eventHandlers = el.eventHandlers;
+    }
+    if (el.reactProps) {
+      elementData.reactProps = el.reactProps;
+    }
+    parts.selectedElement = JSON.stringify(elementData, null, 2);
   }
   if (context.files?.length) {
     parts.files = context.files;
@@ -1378,7 +1401,7 @@ async function handleLlmChat(params, onChunk, onDone, onError) {
 }
 
 // src/server.ts
-var VERSION = "0.18.0";
+var VERSION = "0.20.0";
 var __dirname = dirname2(fileURLToPath(import.meta.url));
 function attachOpenMagic(httpServer, roots) {
   function handleRequest(req, res) {
@@ -1911,7 +1934,7 @@ process.on("uncaughtException", (err) => {
   process.exit(1);
 });
 var childProcesses = [];
-var VERSION2 = "0.18.0";
+var VERSION2 = "0.20.0";
 function ask(question) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   return new Promise((resolve3) => {