@hyperframes/lint 0.8.66 → 0.8.67

package/dist/browser.d.ts

@@ -4,6 +4,9 @@ type HyperframeLintFinding = {
     severity: HyperframeLintSeverity;
     message: string;
     file?: string;
+    /** One-based coordinates in the original source; absent when no unique location exists. */
+    line?: number;
+    column?: number;
     selector?: string;
     elementId?: string;
     fixHint?: string;

package/dist/browser.js

@@ -1,3 +1,6 @@
+// src/sourceLocations.ts
+import { Parser as Parser2 } from "htmlparser2";
+
 // src/utils.ts
 import { Parser } from "htmlparser2";
 var COMPOSITION_ID_IN_CSS_PATTERN = /\[data-composition-id=["']([^"']+)["']\]/g;
@@ -557,10 +560,62 @@ function hasCaptionStyles(styles) {
   return styles.some((s) => /\.caption[-_]?(?:group|word)/i.test(s.content));
 }
 function truncateSnippet(value, maxLength = 220) {
-  const normalized = value.replace(/\s+/g, " ").trim();
-  if (!normalized) return void 0;
-  if (normalized.length <= maxLength) return normalized;
-  return `${normalized.slice(0, maxLength - 3)}...`;
+  const normalized2 = value.replace(/\s+/g, " ").trim();
+  if (!normalized2) return void 0;
+  if (normalized2.length <= maxLength) return normalized2;
+  return `${normalized2.slice(0, maxLength - 3)}...`;
+}
+
+// src/sourceLocations.ts
+function normalized(source) {
+  let text = "";
+  const offsets = [];
+  for (let i = 0; i < source.length; i++) {
+    const char = source[i];
+    if (/\s/.test(char)) {
+      if (text.endsWith(" ")) continue;
+      text += " ";
+    } else text += char;
+    offsets.push(i);
+  }
+  return { text, offsets };
+}
+function createSourceLocator(source) {
+  const tags = parseHtmlStructure(source).tags;
+  const searchable = source.split("");
+  const parser = new Parser2({
+    oncomment() {
+      searchable.fill("\0", parser.startIndex, parser.endIndex + 1);
+    }
+  });
+  parser.write(source);
+  parser.end();
+  const normalizedSource = normalized(searchable.join(""));
+  const at = (offset) => {
+    const before = source.slice(0, offset);
+    return {
+      line: before.split(/\r\n|\r|\n/).length,
+      column: offset - Math.max(before.lastIndexOf("\n"), before.lastIndexOf("\r"))
+    };
+  };
+  return (finding) => {
+    if (finding.line !== void 0) return { line: finding.line, column: finding.column };
+    if (finding.snippet) {
+      const offset = snippetOffset(normalizedSource, finding.snippet);
+      return offset === void 0 ? {} : at(offset);
+    }
+    const id = finding.elementId ?? /^#([\w-]+)$/.exec(finding.selector ?? "")?.[1];
+    if (!id) return {};
+    const matches = tags.filter((tag) => readDecodedAttr(tag.raw, "id") === id);
+    return matches.length === 1 ? at(matches[0].index) : {};
+  };
+}
+function snippetOffset(source, snippet) {
+  const needle = snippet.replace(/\s+/g, " ").trim().replace(/\.\.\.$/, "");
+  if (!needle) return void 0;
+  const index = source.text.indexOf(needle);
+  if (index < 0 || source.text.indexOf(needle, index + 1) >= 0) return void 0;
+  return source.offsets[index];
 }
 
 // src/context.ts
@@ -1363,18 +1418,18 @@ function classNamesFromAttr(classAttr) {
   return classAttr.split(/\s+/).filter(Boolean);
 }
 function selectorTargetsManagedMedia(selector, mediaIndex) {
-  const normalized = selector.trim();
-  if (!normalized) return false;
-  if (mediaIndex.hasVideo && /\bvideo\b/i.test(normalized)) return true;
-  if (mediaIndex.hasAudio && /\baudio\b/i.test(normalized)) return true;
+  const normalized2 = selector.trim();
+  if (!normalized2) return false;
+  if (mediaIndex.hasVideo && /\bvideo\b/i.test(normalized2)) return true;
+  if (mediaIndex.hasAudio && /\baudio\b/i.test(normalized2)) return true;
   for (const mediaId of mediaIndex.ids) {
     const escapedId = escapeRegExp(mediaId);
-    if (new RegExp(`#${escapedId}(?![\\w-])`).test(normalized) || normalized.includes(`[id="${mediaId}"]`) || normalized.includes(`[id='${mediaId}']`)) {
+    if (new RegExp(`#${escapedId}(?![\\w-])`).test(normalized2) || normalized2.includes(`[id="${mediaId}"]`) || normalized2.includes(`[id='${mediaId}']`)) {
       return true;
     }
   }
   for (const className of mediaIndex.classes) {
-    if (new RegExp(`\\.${escapeRegExp(className)}(?![\\w-])`).test(normalized)) {
+    if (new RegExp(`\\.${escapeRegExp(className)}(?![\\w-])`).test(normalized2)) {
       return true;
     }
   }
@@ -2113,8 +2168,8 @@ function readTagTiming(rawTag) {
 }
 function countPhysicalLines(source) {
   if (source.length === 0) return 0;
-  const normalized = source.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-  const withoutFinalNewline = normalized.endsWith("\n") ? normalized.slice(0, -1) : normalized;
+  const normalized2 = source.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  const withoutFinalNewline = normalized2.endsWith("\n") ? normalized2.slice(0, -1) : normalized2;
   return withoutFinalNewline.split("\n").length;
 }
 function countStructuralLines(source) {
@@ -2127,8 +2182,8 @@ function isCaptionCue(tag) {
 }
 function isRegistrySourceFile(filePath) {
   if (!filePath) return false;
-  const normalized = filePath.replace(/\\/g, "/");
-  return /(?:^|\/)registry\/blocks\/([^/]+)\/\1\.html$/i.test(normalized);
+  const normalized2 = filePath.replace(/\\/g, "/");
+  return /(?:^|\/)registry\/blocks\/([^/]+)\/\1\.html$/i.test(normalized2);
 }
 function isRegistryInstalledFile(rawSource) {
   return /^\s*<!--\s*hyperframes-registry-item:[^>]*-->/i.test(rawSource.slice(0, 512));
@@ -3078,8 +3133,8 @@ function zeroValue(value) {
   return Number(value.trim()) === 0;
 }
 function isGsapColorProperty(property) {
-  const normalized = property.toLowerCase();
-  return !normalized.startsWith("--") && (normalized.endsWith("color") || normalized === "fill" || normalized === "stroke");
+  const normalized2 = property.toLowerCase();
+  return !normalized2.startsWith("--") && (normalized2.endsWith("color") || normalized2 === "fill" || normalized2 === "stroke");
 }
 function collectStaticCssVariableDefinitions(tags, styles) {
   const definitions = /* @__PURE__ */ new Set();
@@ -3206,10 +3261,10 @@ function styleHasHiddenInitialState(style) {
 function styleHasOpaqueBackground(style) {
   const background = readStyleProperty(style, "background") || readStyleProperty(style, "background-color");
   if (!background) return false;
-  const normalized = background.toLowerCase().replace(/\s+/g, "");
-  if (normalized === "transparent" || normalized === "none") return false;
-  if (/rgba?\([^)]*,0(?:\.0+)?\)$/.test(normalized)) return false;
-  if (/hsla?\([^)]*,0(?:\.0+)?\)$/.test(normalized)) return false;
+  const normalized2 = background.toLowerCase().replace(/\s+/g, "");
+  if (normalized2 === "transparent" || normalized2 === "none") return false;
+  if (/rgba?\([^)]*,0(?:\.0+)?\)$/.test(normalized2)) return false;
+  if (/hsla?\([^)]*,0(?:\.0+)?\)$/.test(normalized2)) return false;
   return true;
 }
 function styleLooksFullFrameOverlay(style) {
@@ -3591,9 +3646,9 @@ function elementLevelTokens(tokens, tagsByToken) {
   return expanded;
 }
 function isMultiComponentDasharray(value) {
-  const normalized = value.replace(/!important\s*$/i, "").trim();
-  if (!normalized || /^none$/i.test(normalized)) return false;
-  return normalized.split(/[\s,]+/).filter(Boolean).length >= 2;
+  const normalized2 = value.replace(/!important\s*$/i, "").trim();
+  if (!normalized2 || /^none$/i.test(normalized2)) return false;
+  return normalized2.split(/[\s,]+/).filter(Boolean).length >= 2;
 }
 function gsapDasharrayValueLooksMultiComponent(valueSource) {
   const literal = valueSource.trim().match(/^(["'`])([\s\S]*)\1$/)?.[2];
@@ -5585,7 +5640,15 @@ function collectFindings(produced, seen, filePath, into) {
 async function lintHyperframeHtml(html, options = {}) {
   const startedAt = performance.now();
   const ctx = buildLintContext(html, options);
-  const { findings, timings } = await runRules(ctx, options.filePath);
+  const { findings: rawFindings, timings } = await runRules(ctx, options.filePath);
+  const locate = createSourceLocator(html);
+  const findings = rawFindings.map((finding) => {
+    if (finding.snippet && options.externalStyles?.some(
+      (style) => style.content.replace(/\s+/g, " ").includes(finding.snippet.replace(/\.\.\.$/, ""))
+    ))
+      return finding;
+    return { ...finding, ...locate(finding) };
+  });
   const errorCount = findings.filter((f) => f.severity === "error").length;
   const warningCount = findings.filter((f) => f.severity === "warning").length;
   const infoCount = findings.filter((f) => f.severity === "info").length;