fix(lint): add fix hints to the variables-entry and CSS parse findings (#5447)

Closes #5392

packages/lint/src/rules/composition.test.ts

@@ -1383,6 +1383,7 @@ describe("composition rules", () => {
       expect(findings.length).toBe(1);
       expect(findings[0]?.message).toMatch(/\[1\]/);
       expect(findings[0]?.message).toMatch(/type|label|default/);
+      expect(findings[0]?.fixHint).toMatch(/entry \[1\]/);
     });
 
     it("warns when a declaration uses an unknown type", async () => {
@@ -1393,6 +1394,17 @@ describe("composition rules", () => {
       );
       expect(finding).toBeDefined();
       expect(finding?.message).toMatch(/type/);
+      expect(finding?.fixHint).toBeTruthy();
+    });
+
+    it("gives a fix hint when an entry is not an object", async () => {
+      const html = `<html data-composition-variables='["title"]'><body><div data-composition-id="x"></div></body></html>`;
+      const result = await lintHyperframeHtml(html);
+      const finding = result.findings.find(
+        (f) => f.code === "invalid_composition_variables_declaration",
+      );
+      expect(finding?.message).toMatch(/must be an object/);
+      expect(finding?.fixHint).toMatch(/"id":"title"/);
     });
 
     it("does not warn for a fully valid declarations array", async () => {

packages/lint/src/rules/composition.ts

@@ -661,6 +661,8 @@ function variablesDeclarationFindings(
         code: "invalid_composition_variables_declaration",
         severity: "error",
         message: `data-composition-variables entry [${i}] must be an object with id, type, label, and default.`,
+        fixHint:
+          'Replace the entry with an object such as {"id":"title","type":"string","label":"Title","default":"Hello"}.',
         snippet: truncateSnippet(tag.raw),
       });
       continue;
@@ -676,6 +678,7 @@ function variablesDeclarationFindings(
         code: "invalid_composition_variables_declaration",
         severity: "error",
         message: `data-composition-variables entry [${i}] is missing or has invalid: ${missing.join(", ")}. Type must be one of string, number, color, boolean, enum, font, image.`,
+        fixHint: `Give entry [${i}] a string id and label, a supported type, and a default, e.g. {"id":"title","type":"string","label":"Title","default":"Hello"}.`,
         snippet: truncateSnippet(tag.raw),
       });
       continue;

packages/lint/src/rules/core.test.ts

@@ -1658,6 +1658,7 @@ describe("core rules", () => {
       expect(finding).toBeDefined();
       expect(finding?.severity).toBe("error");
       expect(finding?.message).toContain("Missed semicolon");
+      expect(finding?.fixHint).toMatch(/reported line/);
     });
   });
 });

packages/lint/src/rules/core.ts

@@ -744,6 +744,8 @@ export const coreRules: Array<(ctx: LintContext) => HyperframeLintFinding[]> = [
           code: "css_parse_error",
           severity: "error",
           message: `CSS parse error: ${error instanceof Error ? error.message : "unknown"}`,
+          fixHint:
+            "Check the CSS at the reported line for an unclosed brace, quote, or comment, or a missing semicolon between declarations.",
         });
         continue;
       }