@aayambansal/squint 0.4.3 → 0.4.4

package/README.md

@@ -169,7 +169,11 @@ squint doctor --probe             # run every engine end to end, verify auth act
   design token, and the mechanical anti-slop sweep flags generic-AI tells as
   distinctiveness debt in `/review`. The phantom-class check diffs every DOM class
   against the compiled CSS — hallucinated utilities surface as named problems instead
-  of silently unstyled elements.
+  of silently unstyled elements — and version-aware rule-packs catch Tailwind v3
+  muscle memory in v4 projects at gate time, rename in hand. view-transition breakage (duplicate names, missing reduced-motion handling) is
+  flagged from the live page, and on Next 16+ the framework's own `/_next/mcp`
+  channel feeds structured errors straight into the fix loop. `/context` itemizes
+  the injected-context bill per source, with staleness warnings.
 - **The design ledger**: `/decide` (plus chosen variants, rollbacks, accepted
   sandboxes) appends to a committed `.squint/design-log.jsonl`; recent decisions ride
   into every ask so they stop getting silently undone between sessions.

package/dist/{cdp-TPP2RGSR.js → cdp-C6MOKVEN.js}

@@ -4,7 +4,7 @@ import {
   hasWebSocket,
   pixelDiffPct,
   runFlow
-} from "./chunk-Y47X4ENN.js";
+} from "./chunk-JFFNQIBU.js";
 export {
   cdpCapture,
   hasWebSocket,

package/dist/{chunk-Y47X4ENN.js → chunk-JFFNQIBU.js}

@@ -360,6 +360,46 @@ var PHANTOM_AUDIT = `(() => {
   }
   return out;
 })()`;
+var VT_AUDIT = `(() => {
+  const findings = [];
+  const names = new Map();
+  for (const el of document.querySelectorAll('*')) {
+    const name = getComputedStyle(el).viewTransitionName;
+    if (name && name !== 'none' && name !== 'auto') {
+      const label = el.tagName.toLowerCase() + (el.id ? '#' + el.id : '');
+      const list = names.get(name) || [];
+      list.push(label);
+      names.set(name, list);
+    }
+  }
+  for (const [name, els] of names) {
+    if (els.length > 1) {
+      findings.push('duplicate view-transition-name "' + name + '" on ' + els.length + ' elements (' + els.slice(0, 3).join(', ') + ') \u2014 the browser skips the entire transition');
+    }
+  }
+  let vtCss = false;
+  let reducedGuard = false;
+  const walk = (list, inReduced) => {
+    for (const rule of list) {
+      const media = rule.media && rule.media.mediaText || '';
+      const nowReduced = inReduced || /prefers-reduced-motion/.test(media);
+      if (rule.cssText && rule.cssText.includes('::view-transition')) {
+        vtCss = true;
+        if (nowReduced) reducedGuard = true;
+      }
+      if (nowReduced && rule.cssText && /animation|transition/.test(rule.cssText)) reducedGuard = true;
+      if (rule.cssRules) walk(rule.cssRules, nowReduced);
+    }
+  };
+  for (const sheet of document.styleSheets) {
+    let rules; try { rules = sheet.cssRules; } catch { continue; }
+    try { walk(rules, false); } catch {}
+  }
+  if ((names.size > 0 || vtCss) && !reducedGuard) {
+    findings.push('view transitions declared with no prefers-reduced-motion handling anywhere in the CSS \u2014 motion-sensitive users get the full animation');
+  }
+  return findings;
+})()`;
 async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, audit = false) {
   const { child, wsUrl, profileDir } = await launchChrome(chromePath);
   const report = { consoleErrors: [], pageErrors: [], failedRequests: [] };
@@ -369,6 +409,7 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
   let perf = {};
   let narration = [];
   let phantoms = [];
+  let viewTransitions = [];
   const requests = /* @__PURE__ */ new Map();
   let connection = null;
   try {
@@ -450,6 +491,15 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
         if (Array.isArray(result?.value)) phantoms = result.value.map(String);
       } catch {
       }
+      try {
+        const { result } = await connection.send(
+          "Runtime.evaluate",
+          { expression: VT_AUDIT, returnByValue: true },
+          sessionId
+        );
+        if (Array.isArray(result?.value)) viewTransitions = result.value.map(String);
+      } catch {
+      }
       try {
         await connection.send("Accessibility.enable", {}, sessionId);
         const { nodes } = await connection.send("Accessibility.getFullAXTree", {}, sessionId);
@@ -514,7 +564,7 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
     child.kill("SIGKILL");
     setTimeout(() => fs.rmSync(profileDir, { recursive: true, force: true }), 500).unref?.();
   }
-  return { report, shots, a11y, slop, perf, narration, phantoms };
+  return { report, shots, a11y, slop, perf, narration, phantoms, viewTransitions };
 }
 
 export {

package/dist/{chunk-WCLQZFOR.js → chunk-ZUEGDTAM.js}

@@ -9,7 +9,7 @@ import {
 import {
   cdpCapture,
   hasWebSocket
-} from "./chunk-Y47X4ENN.js";
+} from "./chunk-JFFNQIBU.js";
 
 // src/preview/preview.ts
 import fs from "fs";
@@ -47,7 +47,7 @@ async function captureViewports(cwd, url) {
   const base = url.replace(/\/+$/, "");
   if (hasWebSocket()) {
     try {
-      const { report, shots: shots2, a11y, slop, narration, phantoms } = await cdpCapture(chrome, url, dir, VIEWPORTS, 2500, true);
+      const { report, shots: shots2, a11y, slop, narration, phantoms, viewTransitions } = await cdpCapture(chrome, url, dir, VIEWPORTS, 2500, true);
       const errors2 = [];
       for (const route of routes.slice(1)) {
         try {
@@ -62,7 +62,7 @@ async function captureViewports(cwd, url) {
           errors2.push(`${route}: capture failed`);
         }
       }
-      return { shots: shots2, errors: errors2, runtime: report, a11y, slop, narration, phantoms };
+      return { shots: shots2, errors: errors2, runtime: report, a11y, slop, narration, phantoms, viewTransitions };
     } catch {
     }
   }
@@ -133,7 +133,7 @@ async function probeRuntime(url, cwd) {
 async function comparePulse(previous, current) {
   const chrome = findChrome();
   if (!chrome || !hasWebSocket()) return null;
-  const { pixelDiffPct } = await import("./cdp-TPP2RGSR.js");
+  const { pixelDiffPct } = await import("./cdp-C6MOKVEN.js");
   return pixelDiffPct(chrome, previous, current);
 }
 function buildRuntimeFixPrompt(report) {
@@ -161,6 +161,16 @@ ${narration.join("\n")}
 
 Judge this narration as an experience: does the reading order make sense? do names actually describe their targets? is anything announced as "(no accessible name)"? Fix real incoherence \u2014 this is how non-visual users meet the page.`;
 }
+function vtSection(viewTransitions) {
+  if (!viewTransitions || viewTransitions.length === 0) return "";
+  return `
+
+## View-transition findings
+
+${viewTransitions.join("\n")}
+
+Duplicate names abort the whole transition at runtime; missing reduced-motion handling animates for users who opted out. Fix the names / add the media query rather than removing the transitions.`;
+}
 function phantomSection(phantoms) {
   if (!phantoms || phantoms.length === 0) return "";
   return `
@@ -181,13 +191,13 @@ ${findings.join("\n")}
 
 These patterns make the page read as template output. Rework them within the committed design direction \u2014 this is style debt, not a defect list.`;
 }
-function buildReviewPrompt(shots, extra, runtime, a11y, slop, narration, phantoms) {
+function buildReviewPrompt(shots, extra, runtime, a11y, slop, narration, phantoms, viewTransitions) {
   const list = shots.map((s) => `- ${s.name}: ${s.path}`).join("\n");
   return `Screenshots of the running app were just captured:
 
 ${list}
 
-Read each screenshot and review the rendered UI against the design standards you were given. Check: visual hierarchy and spacing rhythm, typography, color and contrast, alignment, empty-looking or broken regions, and whether the mobile capture shows horizontal overflow or cramped layout. List the concrete issues you can SEE (not hypothetical ones), ranked by visual impact${extra ? `, with special attention to: ${extra}` : ""}. Then fix them and verify the app still builds.${runtimeSection(runtime)}${a11ySection(a11y)}${slopSection(slop)}${narrationSection(narration)}${phantomSection(phantoms)}`;
+Read each screenshot and review the rendered UI against the design standards you were given. Check: visual hierarchy and spacing rhythm, typography, color and contrast, alignment, empty-looking or broken regions, and whether the mobile capture shows horizontal overflow or cramped layout. List the concrete issues you can SEE (not hypothetical ones), ranked by visual impact${extra ? `, with special attention to: ${extra}` : ""}. Then fix them and verify the app still builds.${runtimeSection(runtime)}${a11ySection(a11y)}${slopSection(slop)}${narrationSection(narration)}${phantomSection(phantoms)}${vtSection(viewTransitions)}`;
 }
 
 export {

package/dist/cli.js

@@ -42,7 +42,7 @@ import {
   comparePulse,
   probeRuntime,
   runtimeSummary
-} from "./chunk-WCLQZFOR.js";
+} from "./chunk-ZUEGDTAM.js";
 import {
   clearState,
   loadState,
@@ -58,7 +58,7 @@ import {
   detectEngines,
   getEngine
 } from "./chunk-KVYGPLWW.js";
-import "./chunk-Y47X4ENN.js";
+import "./chunk-JFFNQIBU.js";
 import {
   appendDecision,
   enrich
@@ -240,7 +240,7 @@ function registerEnv(program2) {
       }
     }
     const { findChrome: findChrome2 } = await import("./chrome-SBV3H77F.js");
-    const { hasWebSocket } = await import("./cdp-TPP2RGSR.js");
+    const { hasWebSocket } = await import("./cdp-C6MOKVEN.js");
     const chrome = findChrome2();
     console.log(
       chrome ? `${pc2.green("\u2713")} Chrome ${pc2.dim(chrome)}` : `${pc2.yellow("\u25CB")} Chrome ${pc2.dim("\u2014 screenshots and runtime probing disabled")}`
@@ -463,7 +463,7 @@ function registerQuality(program2) {
     if (results.some((r) => !r.ok)) process.exitCode = 1;
   });
   program2.command("shot").description("Screenshot a running app at mobile/tablet/desktop viewports (+ .squint/routes)").argument("<url>", "URL of the running app (e.g. http://localhost:5173)").action(async (url) => {
-    const { captureViewports: captureViewports2 } = await import("./preview-SKHIXVCE.js");
+    const { captureViewports: captureViewports2 } = await import("./preview-Q43LOK6P.js");
     const result = await captureViewports2(process.cwd(), url);
     if (!result) {
       console.error(pc4.red("\u2717 no Chrome/Chromium found"));
@@ -825,7 +825,7 @@ ${question}`,
         return;
       }
       await this.runTurn(
-        buildReviewPrompt(result.shots, void 0, result.runtime, result.a11y, result.slop, result.narration, result.phantoms),
+        buildReviewPrompt(result.shots, void 0, result.runtime, result.a11y, result.slop, result.narration, result.phantoms, result.viewTransitions),
         `\u{1F441} polish round ${round}/${rounds}`
       );
     }
@@ -1132,6 +1132,18 @@ ${rulePackSummary(soft)}`);
     if (result.error !== "interrupted" && dev && (dev.state === "running" || dev.state === "starting")) {
       await delay(1500);
       const errors = dev.errorsSince(runStart);
+      if (this.state.devUrl) {
+        try {
+          const { hasNextMcp, probeNextMcp } = await import("./nextMcp-42Y63M7W.js");
+          if (hasNextMcp(this.execCwd())) {
+            const mcp = await probeNextMcp(this.state.devUrl);
+            if (mcp.available && mcp.errors.length > 0) {
+              for (const err of mcp.errors) errors.push(`[next mcp] ${err}`);
+            }
+          }
+        } catch {
+        }
+      }
       if (errors.length > 0) {
         this.addProblem(
           "dev",
@@ -1163,7 +1175,7 @@ ${errors.slice(-5).join("\n")}`);
               const captureResult = await this.capture();
               if (captureResult) {
                 await this.runTurn(
-                  buildReviewPrompt(captureResult.shots, void 0, captureResult.runtime, captureResult.a11y, captureResult.slop, captureResult.narration, captureResult.phantoms),
+                  buildReviewPrompt(captureResult.shots, void 0, captureResult.runtime, captureResult.a11y, captureResult.slop, captureResult.narration, captureResult.phantoms, captureResult.viewTransitions),
                   "\u{1F441} auto-review rendered UI"
                 );
               }
@@ -1303,6 +1315,24 @@ ${errors.slice(-5).join("\n")}`);
         this.push("status", "runtime clean \u2014 no console errors, exceptions, or failed requests");
       }
     }
+    const vtHard = (result.viewTransitions ?? []).filter((f) => f.startsWith("duplicate"));
+    if (vtHard.length > 0) {
+      this.push("error", `view transitions: ${vtHard.length} broken
+${vtHard.join("\n")}`);
+      this.addProblem(
+        "runtime",
+        `${vtHard.length} view transition(s) the browser will skip`,
+        `Duplicate view-transition-name values make the browser abort the entire transition at runtime:
+
+${vtHard.join("\n")}
+
+Give each simultaneously rendered element a unique name (or scope names per item, e.g. per list key). Do not remove the transitions.`
+      );
+    }
+    const vtSoft = (result.viewTransitions ?? []).filter((f) => !f.startsWith("duplicate"));
+    if (vtSoft.length > 0) {
+      this.push("status", `view transitions: ${vtSoft.join("; ")}`);
+    }
     if (result.phantoms && result.phantoms.length > 0) {
       this.push("error", `phantom classes: ${result.phantoms.length} (in the DOM, absent from CSS)
 ${result.phantoms.slice(0, 5).join("\n")}`);
@@ -1549,8 +1579,8 @@ They are objective defects, not style preferences.`
             this.push("error", "no Chrome/Chromium found for flows");
             return;
           }
-          const { runFlow } = await import("./cdp-TPP2RGSR.js");
-          const { previewDir } = await import("./preview-SKHIXVCE.js");
+          const { runFlow } = await import("./cdp-C6MOKVEN.js");
+          const { previewDir } = await import("./preview-Q43LOK6P.js");
           this.push("status", `replaying ${flows.length} flow(s)\u2026`);
           this.notify({ running: true, runStartedAt: Date.now() });
           const failures = [];
@@ -1688,7 +1718,7 @@ They are objective defects, not style preferences.`
           const result = await this.capture();
           if (result) {
             await this.runTurn(
-              buildReviewPrompt(result.shots, arg || void 0, result.runtime, result.a11y, result.slop, result.narration, result.phantoms),
+              buildReviewPrompt(result.shots, arg || void 0, result.runtime, result.a11y, result.slop, result.narration, result.phantoms, result.viewTransitions),
               `\u{1F441} review rendered UI${arg ? ` \xB7 ${arg}` : ""}`
             );
           }
@@ -2493,7 +2523,7 @@ function registerTui(program2) {
 }
 
 // src/cli.tsx
-var VERSION = true ? "0.4.3" : "0.0.0-dev";
+var VERSION = true ? "0.4.4" : "0.0.0-dev";
 var program = new Command();
 program.name("squint").description("Lovable for your terminal \u2014 a frontend harness on top of Claude Code, Codex, and friends.").version(VERSION);
 registerRun(program);

package/dist/nextMcp-42Y63M7W.js

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+
+// src/preview/nextMcp.ts
+import fs from "fs";
+import path from "path";
+function parseBody(contentType, text) {
+  try {
+    if (contentType.includes("text/event-stream")) {
+      const events = text.split("\n").filter((l) => l.startsWith("data:"));
+      const last = events.at(-1);
+      return last ? JSON.parse(last.slice(5).trim()) : null;
+    }
+    return text.trim().length > 0 ? JSON.parse(text) : null;
+  } catch {
+    return null;
+  }
+}
+async function rpc(url, sessionId, body, timeoutMs) {
+  const headers = {
+    "content-type": "application/json",
+    accept: "application/json, text/event-stream"
+  };
+  if (sessionId) headers["mcp-session-id"] = sessionId;
+  const res = await fetch(url, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(body),
+    signal: AbortSignal.timeout(timeoutMs)
+  });
+  const newSession = res.headers.get("mcp-session-id") ?? sessionId;
+  if (res.status === 202) return { response: {}, sessionId: newSession };
+  if (!res.ok) return { response: null, sessionId: newSession };
+  const text = await res.text();
+  return { response: parseBody(res.headers.get("content-type") ?? "", text), sessionId: newSession };
+}
+function extractText(result) {
+  const content = result?.content;
+  if (!Array.isArray(content)) return [];
+  return content.map((c) => c && typeof c === "object" && "text" in c ? String(c.text) : "").filter((t) => t.trim().length > 0);
+}
+async function probeNextMcp(baseUrl, timeoutMs = 4e3) {
+  const url = new URL("/_next/mcp", baseUrl).toString();
+  const none = { available: false, tools: [], errors: [] };
+  let id = 0;
+  try {
+    const init = await rpc(url, null, {
+      jsonrpc: "2.0",
+      id: ++id,
+      method: "initialize",
+      params: {
+        protocolVersion: "2025-06-18",
+        capabilities: {},
+        clientInfo: { name: "squint", version: "0" }
+      }
+    }, timeoutMs);
+    if (!init.response?.result) return none;
+    const session = init.sessionId;
+    await rpc(url, session, { jsonrpc: "2.0", method: "notifications/initialized" }, timeoutMs).catch(() => null);
+    const list = await rpc(url, session, { jsonrpc: "2.0", id: ++id, method: "tools/list" }, timeoutMs);
+    const toolDefs = list.response?.result?.tools ?? [];
+    const tools = toolDefs.map((t) => String(t.name ?? "")).filter((n) => n.length > 0);
+    const errors = [];
+    for (const name of tools.filter((n) => /error|issue|diagnostic/i.test(n)).slice(0, 3)) {
+      const call = await rpc(url, session, {
+        jsonrpc: "2.0",
+        id: ++id,
+        method: "tools/call",
+        params: { name, arguments: {} }
+      }, timeoutMs);
+      for (const text of extractText(call.response?.result)) {
+        if (!/no (build |runtime )?errors|^\s*\[\]\s*$|no issues/i.test(text)) {
+          errors.push(`[${name}] ${text.slice(0, 600)}`);
+        }
+      }
+      if (errors.length >= 5) break;
+    }
+    return { available: true, tools, errors };
+  } catch {
+    return none;
+  }
+}
+function hasNextMcp(cwd) {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(cwd, "package.json"), "utf8"));
+    for (const key of ["dependencies", "devDependencies"]) {
+      const range = pkg?.[key]?.next;
+      const major = range?.match(/(\d+)/)?.[1];
+      if (major) return Number.parseInt(major, 10) >= 16;
+    }
+  } catch {
+  }
+  return false;
+}
+export {
+  hasNextMcp,
+  probeNextMcp
+};

package/dist/{preview-SKHIXVCE.js → preview-Q43LOK6P.js}

@@ -10,11 +10,11 @@ import {
   probeRuntime,
   routeShotName,
   runtimeSummary
-} from "./chunk-WCLQZFOR.js";
+} from "./chunk-ZUEGDTAM.js";
 import "./chunk-O2S6PAJE.js";
 import "./chunk-IMDRXXFU.js";
 import "./chunk-KVYGPLWW.js";
-import "./chunk-Y47X4ENN.js";
+import "./chunk-JFFNQIBU.js";
 export {
   VIEWPORTS,
   buildReviewPrompt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aayambansal/squint",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Lovable for your terminal — a frontend harness on top of Claude Code, Codex, and other coding agents.",
   "type": "module",
   "license": "MIT",