@aayambansal/squint 0.4.2 → 0.4.4

package/README.md

@@ -167,7 +167,16 @@ squint doctor --probe             # run every engine end to end, verify auth act
   pixel-compared with the last (drift as a number), load performance is tracked with
   deltas (`perf: LCP 812ms (+420ms)`), hardcoded colors get pointed at the nearest
   design token, and the mechanical anti-slop sweep flags generic-AI tells as
-  distinctiveness debt in `/review`.
+  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 — 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.
 - **`/btw <question>`** asks about the codebase read-only without touching the main
   thread's context. `.squint/locks` lists paths the engine must never touch; `/save`
   exports the transcript as markdown.

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-P3H4N2EN.js → chunk-K5QJMSJH.js}

@@ -1,60 +1,7 @@
 #!/usr/bin/env node
-
-// src/prompt/brief.ts
-import fs from "fs";
-import path from "path";
-var DEFAULT_BRIEF = `You are acting as a senior product designer and frontend engineer. Treat every change as production work, not a demo.
-
-Direction before code:
-- Commit to one specific visual direction derived from what this product is for, and state it in one sentence before implementing. If the direction could be guessed from the product category alone, sharpen it until it couldn't.
-- Choose a color strategy deliberately: restrained (neutrals + one accent), committed (one dominant color owning 30\u201360% of the surface), or a small palette of 3\u20135 named roles. Never purple/violet gradients unless asked. Body text contrast stays at least 4.5:1 \u2014 no light gray body copy "for elegance".
-- Typography: at most two families, paired on contrast (display serif + geometric sans, or sans + mono). Never Inter/Roboto/Open Sans/system defaults for display type. Pair weight extremes (300 against 700\u2013900); display sizes jump 3x over body, not 1.5x.
-
-Tokens are the system:
-- Define or extend design tokens (CSS variables / theme config) first, then compose the UI from them. Never scatter literal colors or one-off spacing values through components.
-- One spacing rhythm on a 4/8px grid; one type scale with a ratio of at least 1.25 between steps.
-
-Banned tells \u2014 these read instantly as machine-generated:
-- Purple gradient on white; glassmorphism cards; cream/beige page background as a reflex "warmth" move
-- Emoji as icons; identical icon-topped card grids; stat banner rows; numbered 01/02/03 section markers
-- Tiny all-caps tracked eyebrow labels over every section; gradient text; colored left-border strips on cards
-- Centered hero + badge + three feature cards; unmodified component-library defaults
-If someone could look at the result and say "AI made that" without doubt, it has failed.
-
-Craft details:
-- Every interactive element gets hover, focus-visible, and active treatment; keyboard focus stays visible.
-- Anything that loads data gets loading, empty, and error states.
-- Motion: 150\u2013250ms ease-out; one orchestrated entrance with staggered reveals beats scattered micro-interactions; honor prefers-reduced-motion; never leave content invisible until a scroll observer fires.
-- Body line length 65\u201375ch; text-wrap: balance on headings.
-
-Engineering:
-- Follow the repo's existing conventions and extend its patterns; new components in new files, small and focused; semantic HTML.
-- Responsive from 360px up with no horizontal overflow \u2014 check intermediate widths, not just phone and desktop.
-- Let errors surface instead of swallowing them in try/catch; log clearly so failures can be traced.
-- Not done until the app builds cleanly, typechecks, and renders without console errors.`;
-var FIRST_TURN_ADDENDUM = `This is the opening move on this task: establish the design foundation before building. State the visual direction, set up the tokens/theme first, then build components from them. The first render should feel like a designed product, not a scaffold \u2014 impressive on sight.`;
-function loadBrief(cwd) {
-  const custom = path.join(cwd, ".squint", "brief.md");
-  try {
-    const text = fs.readFileSync(custom, "utf8").trim();
-    if (text.length > 0) return text;
-  } catch {
-  }
-  return DEFAULT_BRIEF;
-}
-function composePrompt(ask, opts) {
-  if (opts.noBrief) return ask;
-  const brief = loadBrief(opts.cwd);
-  const firstTurn = opts.firstTurn ?? true;
-  const addendum = firstTurn ? `
-
-${FIRST_TURN_ADDENDUM}` : "";
-  return `${brief}${addendum}
-
-## Task
-
-${ask}`;
-}
+import {
+  DEFAULT_BRIEF
+} from "./chunk-WAJXATCO.js";
 
 // src/prompt/families.ts
 var FAMILIES = [
@@ -174,8 +121,6 @@ ${coreStandards()}`;
 }
 
 export {
-  FIRST_TURN_ADDENDUM,
-  composePrompt,
   FAMILIES,
   getFamily,
   renderFamilyBrief

package/dist/{chunk-S3WV5C3X.js → chunk-O7NWGLS3.js}

@@ -27,6 +27,7 @@ var COMMANDS = [
   { name: "save", group: "session", description: "export the transcript to .squint/transcripts/" },
   { name: "find", args: "<term>", group: "session", description: "search this session and saved transcripts" },
   { name: "decide", args: "<text>", group: "session", description: "record a design decision; injected into every future ask" },
+  { name: "context", group: "session", description: "what squint injects per ask, token-costed, with staleness warnings" },
   { name: "resume", group: "session", description: "pick up the previous session for this repo" },
   { name: "clear", group: "session", description: "new session (transcript, totals, persisted state)" },
   { name: "help", group: "session", description: "list commands" },

package/dist/{chunk-F6JZSXEO.js → chunk-QCHBDP46.js}

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   variantsRoot
-} from "./chunk-A64VVTPU.js";
+} from "./chunk-YGSF2TSO.js";
 import {
   findChrome,
   screenshot

package/dist/chunk-WAJXATCO.js

@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+// src/prompt/brief.ts
+import fs from "fs";
+import path from "path";
+var DEFAULT_BRIEF = `You are acting as a senior product designer and frontend engineer. Treat every change as production work, not a demo.
+
+Direction before code:
+- Commit to one specific visual direction derived from what this product is for, and state it in one sentence before implementing. If the direction could be guessed from the product category alone, sharpen it until it couldn't.
+- Choose a color strategy deliberately: restrained (neutrals + one accent), committed (one dominant color owning 30\u201360% of the surface), or a small palette of 3\u20135 named roles. Never purple/violet gradients unless asked. Body text contrast stays at least 4.5:1 \u2014 no light gray body copy "for elegance".
+- Typography: at most two families, paired on contrast (display serif + geometric sans, or sans + mono). Never Inter/Roboto/Open Sans/system defaults for display type. Pair weight extremes (300 against 700\u2013900); display sizes jump 3x over body, not 1.5x.
+
+Tokens are the system:
+- Define or extend design tokens (CSS variables / theme config) first, then compose the UI from them. Never scatter literal colors or one-off spacing values through components.
+- One spacing rhythm on a 4/8px grid; one type scale with a ratio of at least 1.25 between steps.
+
+Banned tells \u2014 these read instantly as machine-generated:
+- Purple gradient on white; glassmorphism cards; cream/beige page background as a reflex "warmth" move
+- Emoji as icons; identical icon-topped card grids; stat banner rows; numbered 01/02/03 section markers
+- Tiny all-caps tracked eyebrow labels over every section; gradient text; colored left-border strips on cards
+- Centered hero + badge + three feature cards; unmodified component-library defaults
+If someone could look at the result and say "AI made that" without doubt, it has failed.
+
+Craft details:
+- Every interactive element gets hover, focus-visible, and active treatment; keyboard focus stays visible.
+- Anything that loads data gets loading, empty, and error states.
+- Motion: 150\u2013250ms ease-out; one orchestrated entrance with staggered reveals beats scattered micro-interactions; honor prefers-reduced-motion; never leave content invisible until a scroll observer fires.
+- Body line length 65\u201375ch; text-wrap: balance on headings.
+
+Engineering:
+- Follow the repo's existing conventions and extend its patterns; new components in new files, small and focused; semantic HTML.
+- Responsive from 360px up with no horizontal overflow \u2014 check intermediate widths, not just phone and desktop.
+- Let errors surface instead of swallowing them in try/catch; log clearly so failures can be traced.
+- Not done until the app builds cleanly, typechecks, and renders without console errors.`;
+var FIRST_TURN_ADDENDUM = `This is the opening move on this task: establish the design foundation before building. State the visual direction, set up the tokens/theme first, then build components from them. The first render should feel like a designed product, not a scaffold \u2014 impressive on sight.`;
+function loadBrief(cwd) {
+  const custom = path.join(cwd, ".squint", "brief.md");
+  try {
+    const text = fs.readFileSync(custom, "utf8").trim();
+    if (text.length > 0) return text;
+  } catch {
+  }
+  return DEFAULT_BRIEF;
+}
+function composePrompt(ask, opts) {
+  if (opts.noBrief) return ask;
+  const brief = loadBrief(opts.cwd);
+  const firstTurn = opts.firstTurn ?? true;
+  const addendum = firstTurn ? `
+
+${FIRST_TURN_ADDENDUM}` : "";
+  return `${brief}${addendum}
+
+## Task
+
+${ask}`;
+}
+
+export {
+  DEFAULT_BRIEF,
+  FIRST_TURN_ADDENDUM,
+  loadBrief,
+  composePrompt
+};

package/dist/{chunk-A64VVTPU.js → chunk-YGSF2TSO.js}

@@ -4,9 +4,11 @@ import {
 } from "./chunk-VH7OOFQP.js";
 import {
   FAMILIES,
-  FIRST_TURN_ADDENDUM,
   renderFamilyBrief
-} from "./chunk-P3H4N2EN.js";
+} from "./chunk-K5QJMSJH.js";
+import {
+  FIRST_TURN_ADDENDUM
+} from "./chunk-WAJXATCO.js";
 
 // src/variants/variants.ts
 import { execFileSync } from "child_process";

package/dist/{chunk-KGZILC3S.js → chunk-YT6K2YIS.js}

@@ -172,6 +172,10 @@ ${parts.join("\n\n")}` : "",
 
 export {
   appendDecision,
+  loadDecisions,
+  decisionsSection,
+  loadComponentInventory,
+  inventorySection,
   parseSkill,
   loadSkills,
   loadRules,

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

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   completeCommand
-} from "./chunk-S3WV5C3X.js";
+} from "./chunk-O7NWGLS3.js";
 import {
   applySandbox,
   discardSandbox,
@@ -22,13 +22,13 @@ import {
   buildFixPrompt,
   detectDevCommand,
   screenshotVariants
-} from "./chunk-F6JZSXEO.js";
+} from "./chunk-QCHBDP46.js";
 import {
   applyVariant,
   cleanVariants,
   listVariants,
   runVariants
-} from "./chunk-A64VVTPU.js";
+} from "./chunk-YGSF2TSO.js";
 import {
   buildGatePrompt,
   detectFastGates,
@@ -42,7 +42,7 @@ import {
   comparePulse,
   probeRuntime,
   runtimeSummary
-} from "./chunk-WCLQZFOR.js";
+} from "./chunk-ZUEGDTAM.js";
 import {
   clearState,
   loadState,
@@ -58,14 +58,15 @@ import {
   detectEngines,
   getEngine
 } from "./chunk-KVYGPLWW.js";
-import "./chunk-Y47X4ENN.js";
+import "./chunk-JFFNQIBU.js";
 import {
   appendDecision,
   enrich
-} from "./chunk-KGZILC3S.js";
+} from "./chunk-YT6K2YIS.js";
+import "./chunk-K5QJMSJH.js";
 import {
   composePrompt
-} from "./chunk-P3H4N2EN.js";
+} from "./chunk-WAJXATCO.js";
 
 // src/cli.tsx
 import { Command } from "commander";
@@ -239,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")}`
@@ -263,7 +264,7 @@ import pc3 from "picocolors";
 function registerProject(program2) {
   const skillsCommand = program2.command("skills").description("Project knowledge injected into asks (.squint/rules.md + .squint/skills/)");
   skillsCommand.command("list").description("Show always-on rules and trigger-matched skills").action(async () => {
-    const { loadRules, loadSkills } = await import("./skills-U2J7Z3B2.js");
+    const { loadRules, loadSkills } = await import("./skills-GTTF4PNU.js");
     const cwd = process.cwd();
     const rules = loadRules(cwd);
     console.log(
@@ -305,7 +306,7 @@ function registerProject(program2) {
   program2.command("brief").description("Set a committed design direction for this project (.squint/brief.md)").argument("[family]", "aesthetic family id (omit to list)").option("--force", "overwrite an existing project brief").action(async (familyId, options) => {
     const fs3 = await import("fs");
     const nodePath = await import("path");
-    const { FAMILIES, getFamily, renderFamilyBrief } = await import("./families-2G5SLLY7.js");
+    const { FAMILIES, getFamily, renderFamilyBrief } = await import("./families-3ARYRBMH.js");
     if (!familyId) {
       console.log(pc3.bold("Aesthetic families") + pc3.dim(" \u2014 squint brief <id>\n"));
       for (const family2 of FAMILIES) {
@@ -380,7 +381,7 @@ function registerProject(program2) {
         process.exitCode = 1;
         return;
       }
-      const { runVariants: runVariants2, cleanVariants: cleanVariants2 } = await import("./variants-3ZSINJGX.js");
+      const { runVariants: runVariants2, cleanVariants: cleanVariants2 } = await import("./variants-3IEP7DFY.js");
       const config = loadConfig(defaultPaths(cwd));
       const engineId = resolveEngineId(config, options.engine);
       const engine = getEngine(engineId);
@@ -398,7 +399,7 @@ function registerProject(program2) {
       );
       const succeeded = runs.filter((r) => r.result.ok);
       if (options.shots && succeeded.length > 0) {
-        const { screenshotVariants: screenshotVariants2 } = await import("./shots-E2AWBDCN.js");
+        const { screenshotVariants: screenshotVariants2 } = await import("./shots-OKWOYF7F.js");
         console.log(pc3.dim("capturing screenshots\u2026"));
         const shots = await screenshotVariants2(cwd, succeeded.map((r) => r.variant));
         for (const shot of shots) {
@@ -413,7 +414,7 @@ ${succeeded.length}/${runs.length} variants ready in .squint/variants/ \u2014 `
     }
   );
   variantsCommand.command("list").description("List generated variants").action(async () => {
-    const { listVariants: listVariants2 } = await import("./variants-3ZSINJGX.js");
+    const { listVariants: listVariants2 } = await import("./variants-3IEP7DFY.js");
     const ids = listVariants2(process.cwd());
     if (ids.length === 0) {
       console.log(pc3.dim('no variants \u2014 squint variants gen <n> "<ask>"'));
@@ -422,7 +423,7 @@ ${succeeded.length}/${runs.length} variants ready in .squint/variants/ \u2014 `
     for (const id of ids) console.log(id);
   });
   variantsCommand.command("apply").description("Apply one variant\u2019s changes to the main tree and discard the rest").argument("<id>", "family id of the winning variant").action(async (id) => {
-    const { applyVariant: applyVariant2, cleanVariants: cleanVariants2 } = await import("./variants-3ZSINJGX.js");
+    const { applyVariant: applyVariant2, cleanVariants: cleanVariants2 } = await import("./variants-3IEP7DFY.js");
     const cwd = process.cwd();
     const result = applyVariant2(cwd, id);
     if (!result.ok) {
@@ -434,7 +435,7 @@ ${succeeded.length}/${runs.length} variants ready in .squint/variants/ \u2014 `
     console.log(pc3.green(`\u2713 applied ${id} to the working tree`) + pc3.dim(" \u2014 review with git diff"));
   });
   variantsCommand.command("clean").description("Discard all variants").action(async () => {
-    const { cleanVariants: cleanVariants2 } = await import("./variants-3ZSINJGX.js");
+    const { cleanVariants: cleanVariants2 } = await import("./variants-3IEP7DFY.js");
     const count = cleanVariants2(process.cwd());
     console.log(pc3.dim(`removed ${count} variant(s)`));
   });
@@ -462,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"));
@@ -824,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}`
       );
     }
@@ -1051,6 +1052,26 @@ ${driftSummary(drift)}`);
           }
         } catch {
         }
+        try {
+          const { rulePackSummary, scanRulePacks } = await import("./rulepacks-JOA675OJ.js");
+          const findings = scanRulePacks(this.execCwd(), checkpoint.snapshot.stashHash ?? "HEAD");
+          const hard = findings.filter((f) => f.hard);
+          if (hard.length > 0) {
+            this.addProblem(
+              "gates",
+              `${hard.length} class(es)/idiom(s) from an older toolchain major
+${rulePackSummary(hard)}`,
+              `This project's toolchain is newer than the patterns just written. Apply the exact renames below \u2014 do not downgrade dependencies or add compatibility configs:
+${rulePackSummary(hard)}`
+            );
+          }
+          const soft = findings.filter((f) => !f.hard);
+          if (soft.length > 0) {
+            this.push("status", `renamed-scale traps (verify intent):
+${rulePackSummary(soft)}`);
+          }
+        } catch {
+        }
       }
       runHook(this.opts.cwd, "on-turn-end", {
         cost: String(result.costUsd ?? 0),
@@ -1111,6 +1132,18 @@ ${driftSummary(drift)}`);
     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",
@@ -1142,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"
                 );
               }
@@ -1282,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")}`);
@@ -1411,6 +1462,14 @@ They are objective defects, not style preferences.`
         }
         break;
       }
+      case "context": {
+        import("./contextDoctor-M3R3PICP.js").then(({ contextReport, formatContextReport }) => {
+          this.push("status", formatContextReport(contextReport(this.execCwd())));
+        }).catch((error) => {
+          this.push("status", `context report failed: ${error instanceof Error ? error.message : String(error)}`);
+        });
+        break;
+      }
       case "decide": {
         if (!arg) {
           this.push("status", "usage: /decide <the decision> \u2014 recorded in .squint/design-log.jsonl and injected into every future ask");
@@ -1520,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 = [];
@@ -1659,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}` : ""}`
             );
           }
@@ -1845,7 +1904,7 @@ ${sandboxFiles(this.opts.cwd).join("\n")}`);
         this.notify({ items: [], totals: { costUsd: 0, turns: 0 } });
         break;
       case "help": {
-        void import("./commands-B6I6C5LP.js").then(({ commandHelp }) => this.push("status", commandHelp()));
+        void import("./commands-VDICJJT2.js").then(({ commandHelp }) => this.push("status", commandHelp()));
         break;
       }
       case "quit":
@@ -2464,7 +2523,7 @@ function registerTui(program2) {
 }
 
 // src/cli.tsx
-var VERSION = true ? "0.4.2" : "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/{commands-B6I6C5LP.js → commands-VDICJJT2.js}

@@ -3,7 +3,7 @@ import {
   COMMANDS,
   commandHelp,
   completeCommand
-} from "./chunk-S3WV5C3X.js";
+} from "./chunk-O7NWGLS3.js";
 export {
   COMMANDS,
   commandHelp,

package/dist/contextDoctor-M3R3PICP.js

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+import {
+  decisionsSection,
+  inventorySection,
+  loadComponentInventory,
+  loadDecisions,
+  loadLocks,
+  loadRules,
+  loadSkills
+} from "./chunk-YT6K2YIS.js";
+import {
+  loadBrief
+} from "./chunk-WAJXATCO.js";
+
+// src/quality/contextDoctor.ts
+import fs from "fs";
+import path from "path";
+var tokens = (text) => Math.ceil(text.length / 4);
+function contextReport(cwd) {
+  const lines = [];
+  const warnings = [];
+  const brief = loadBrief(cwd);
+  const custom = fs.existsSync(path.join(cwd, ".squint", "brief.md"));
+  lines.push({ source: custom ? "brief (.squint/brief.md)" : "brief (built-in)", tokens: tokens(brief), when: "first turn" });
+  if (tokens(brief) > 1500) warnings.push(`the brief is ${tokens(brief)} tokens \u2014 past ~1500 the engine starts skimming; distill it`);
+  const rules = loadRules(cwd);
+  if (rules) {
+    lines.push({ source: "rules (.squint/rules.md)", tokens: tokens(rules), when: "every ask" });
+    if (tokens(rules) > 800) warnings.push(`rules.md is ${tokens(rules)} tokens of always-on context \u2014 move situational parts into triggered skills`);
+  }
+  const decisions = decisionsSection(cwd);
+  if (decisions) {
+    lines.push({ source: `design ledger (${loadDecisions(cwd).length} recent decisions)`, tokens: tokens(decisions), when: "every ask" });
+  }
+  const inventory = loadComponentInventory(cwd);
+  if (inventory) {
+    lines.push({ source: "component inventory", tokens: tokens(inventorySection(inventory)), when: "every ask" });
+  }
+  const locks = loadLocks(cwd);
+  if (locks.length > 0) {
+    lines.push({ source: `locks (${locks.length} paths)`, tokens: tokens(locks.join("\n")) + 40, when: "every ask" });
+    for (const lock of locks) {
+      if (!fs.existsSync(path.join(cwd, lock))) warnings.push(`stale lock: ${lock} no longer exists \u2014 remove it from .squint/locks`);
+    }
+  }
+  for (const skill of loadSkills(cwd)) {
+    lines.push({
+      source: `skill: ${skill.name}`,
+      tokens: tokens(skill.body),
+      when: `when the ask mentions ${skill.triggers.map((t) => `"${t}"`).join(", ")}`
+    });
+    const generic = skill.triggers.filter((t) => t.length <= 3);
+    if (generic.length > 0) {
+      warnings.push(`skill "${skill.name}" has trigger(s) ${generic.map((t) => `"${t}"`).join(", ")} short enough to match almost any ask \u2014 make them more specific`);
+    }
+  }
+  const totalAlways = lines.filter((l) => l.when === "every ask").reduce((sum, l) => sum + l.tokens, 0);
+  if (totalAlways > 3e3) warnings.push(`~${totalAlways} tokens ride on every single ask \u2014 that is real money and real attention; trim the always-on set`);
+  return { lines, warnings, totalAlways };
+}
+function formatContextReport(report) {
+  const width = Math.max(...report.lines.map((l) => l.source.length), 10);
+  const rows = report.lines.map((l) => `  ${l.source.padEnd(width)}  ~${String(l.tokens).padStart(5)} tok  ${l.when}`);
+  const out = [`what squint injects (estimates):`, ...rows, `  ${"always-on total".padEnd(width)}  ~${String(report.totalAlways).padStart(5)} tok  every ask`];
+  if (report.warnings.length > 0) {
+    out.push("", "warnings:", ...report.warnings.map((w) => `  \u26A0 ${w}`));
+  }
+  return out.join("\n");
+}
+export {
+  contextReport,
+  formatContextReport
+};

package/dist/{families-2G5SLLY7.js → families-3ARYRBMH.js}

@@ -3,7 +3,8 @@ import {
   FAMILIES,
   getFamily,
   renderFamilyBrief
-} from "./chunk-P3H4N2EN.js";
+} from "./chunk-K5QJMSJH.js";
+import "./chunk-WAJXATCO.js";
 export {
   FAMILIES,
   getFamily,

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/dist/rulepacks-JOA675OJ.js

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+
+// src/quality/rulepacks.ts
+import { execFileSync } from "child_process";
+import fs from "fs";
+import path from "path";
+var TAILWIND_V4_RULES = [
+  {
+    re: /\bbg-gradient-to-(t|tr|r|br|b|bl|l|tl)\b/g,
+    hint: (m) => `${m} is v3 \u2014 v4 renamed it bg-linear-to-${m.split("-").pop()}`,
+    hard: true
+  },
+  {
+    re: /\bflex-(shrink|grow)(-\d+)?\b/g,
+    hint: (m) => `${m} is v3 \u2014 v4 uses ${m.replace("flex-", "")}`,
+    hard: true
+  },
+  {
+    re: /\boverflow-ellipsis\b/g,
+    hint: () => "overflow-ellipsis is v3 \u2014 v4 uses text-ellipsis",
+    hard: true
+  },
+  {
+    re: /\bdecoration-(slice|clone)\b/g,
+    hint: (m) => `${m} is v3 \u2014 v4 uses box-${m}`,
+    hard: true
+  },
+  {
+    re: /\b(shadow|rounded|blur|drop-shadow)-sm\b/g,
+    hint: (m) => `${m} means one step larger in v4 (the scale shifted; v3 ${m} is now ${m.replace(/-sm$/, "-xs")}) \u2014 verify the intent`,
+    hard: false
+  },
+  {
+    re: /\boutline-none\b/g,
+    hint: () => "outline-none changed meaning in v4 (now outline-style: none; the old invisible-but-accessible reset is outline-hidden) \u2014 verify the intent",
+    hard: false
+  }
+];
+var VITE_RULES = [
+  {
+    re: /\bsplitVendorChunkPlugin\b/g,
+    hint: () => "splitVendorChunkPlugin was removed \u2014 use build.rollupOptions.output.manualChunks",
+    hard: true
+  },
+  {
+    re: /\boptimizeDeps:\s*\{[^}]*esbuildOptions\b|\besbuildOptions\b/g,
+    hint: () => "optimizeDeps.esbuildOptions is esbuild-era \u2014 Rolldown Vite uses optimizeDeps.rollupOptions",
+    hard: false
+  }
+];
+function readPackageJson(cwd) {
+  try {
+    return JSON.parse(fs.readFileSync(path.join(cwd, "package.json"), "utf8"));
+  } catch {
+    return null;
+  }
+}
+function depMajor(pkg, name) {
+  if (!pkg) return null;
+  for (const key of ["dependencies", "devDependencies"]) {
+    const deps = pkg[key];
+    const range = deps?.[name];
+    const major = range?.match(/(\d+)/)?.[1];
+    if (major) return Number.parseInt(major, 10);
+  }
+  return null;
+}
+function detectTailwindMajor(cwd) {
+  const pkg = readPackageJson(cwd);
+  const major = depMajor(pkg, "tailwindcss");
+  if (major !== null) return major;
+  if (depMajor(pkg, "@tailwindcss/vite") !== null) return 4;
+  return null;
+}
+function detectViteMajor(cwd) {
+  return depMajor(readPackageJson(cwd), "vite");
+}
+function scanRulePacks(cwd, source) {
+  const packs = [];
+  const tailwind = detectTailwindMajor(cwd);
+  if (tailwind !== null && tailwind >= 4) packs.push({ rules: TAILWIND_V4_RULES });
+  const vite = detectViteMajor(cwd);
+  if (vite !== null && vite >= 6) packs.push({ rules: VITE_RULES, files: /vite\.config\.[cm]?[jt]s$/ });
+  if (packs.length === 0) return [];
+  let diff;
+  try {
+    diff = execFileSync("git", ["diff", "-U0", source, "--", "*.tsx", "*.jsx", "*.ts", "*.js", "*.html", "*.css", "*.vue", "*.svelte"], {
+      cwd,
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+  } catch {
+    return [];
+  }
+  const findings = [];
+  const seen = /* @__PURE__ */ new Set();
+  let currentFile = "";
+  for (const line of diff.split("\n")) {
+    if (line.startsWith("+++ b/")) {
+      currentFile = line.slice(6);
+      if (tailwind !== null && tailwind >= 4 && /(^|\/)tailwind\.config\.[cm]?[jt]s$/.test(currentFile)) {
+        findings.push({
+          file: currentFile,
+          match: "tailwind.config",
+          hint: "Tailwind v4 is CSS-first \u2014 configure with @theme in your CSS, not a tailwind.config file",
+          hard: true
+        });
+      }
+      continue;
+    }
+    if (!line.startsWith("+") || line.startsWith("+++")) continue;
+    for (const pack of packs) {
+      if (pack.files && !pack.files.test(currentFile)) continue;
+      for (const rule of pack.rules) {
+        for (const match of line.matchAll(rule.re)) {
+          const key = `${currentFile}:${match[0]}`;
+          if (seen.has(key)) continue;
+          seen.add(key);
+          findings.push({ file: currentFile, match: match[0], hint: rule.hint(match[0]), hard: rule.hard });
+          if (findings.length >= 12) return findings;
+        }
+      }
+    }
+  }
+  return findings;
+}
+function rulePackSummary(findings) {
+  return findings.map((f) => `  ${f.file}: ${f.hint}`).join("\n");
+}
+export {
+  detectTailwindMajor,
+  detectViteMajor,
+  rulePackSummary,
+  scanRulePacks
+};

package/dist/{shots-E2AWBDCN.js → shots-OKWOYF7F.js}

@@ -1,12 +1,13 @@
 #!/usr/bin/env node
 import {
   screenshotVariants
-} from "./chunk-F6JZSXEO.js";
-import "./chunk-A64VVTPU.js";
+} from "./chunk-QCHBDP46.js";
+import "./chunk-YGSF2TSO.js";
 import "./chunk-VH7OOFQP.js";
 import "./chunk-IMDRXXFU.js";
 import "./chunk-KVYGPLWW.js";
-import "./chunk-P3H4N2EN.js";
+import "./chunk-K5QJMSJH.js";
+import "./chunk-WAJXATCO.js";
 export {
   screenshotVariants
 };

package/dist/{skills-U2J7Z3B2.js → skills-GTTF4PNU.js}

@@ -6,7 +6,7 @@ import {
   loadSkills,
   matchSkills,
   parseSkill
-} from "./chunk-KGZILC3S.js";
+} from "./chunk-YT6K2YIS.js";
 export {
   enrich,
   loadLocks,

package/dist/{variants-3ZSINJGX.js → variants-3IEP7DFY.js}

@@ -9,10 +9,11 @@ import {
   runVariants,
   variantPrompt,
   variantsRoot
-} from "./chunk-A64VVTPU.js";
+} from "./chunk-YGSF2TSO.js";
 import "./chunk-VH7OOFQP.js";
 import "./chunk-KVYGPLWW.js";
-import "./chunk-P3H4N2EN.js";
+import "./chunk-K5QJMSJH.js";
+import "./chunk-WAJXATCO.js";
 export {
   MAX_VARIANTS,
   applyVariant,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aayambansal/squint",
-  "version": "0.4.2",
+  "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",