react-state-basis 0.6.5 → 0.6.7

package/dist/integrations/zustand.js

@@ -24,33 +24,92 @@ __export(zustand_exports, {
 });
 module.exports = __toCommonJS(zustand_exports);
 
+// src/core/constants.ts
+var WINDOW_SIZE = 50;
+var PAIR_RARITY_TARGET = 0.01;
+var RELATIVE_OVERLAP_FLOOR = 0.65;
+var LOOP_THRESHOLD = 150;
+var VOLATILITY_THRESHOLD = 25;
+var INSTANCE_SEP = "##";
+
 // src/core/math.ts
-var calculateSimilarityCircular = (bufferA, headA, bufferB, headB, offset) => {
+var choose = (n, k) => {
+  if (k < 0 || k > n) return 0;
+  k = Math.min(k, n - k);
+  let result = 1;
+  for (let i = 0; i < k; i++) {
+    result = result * (n - i) / (i + 1);
+  }
+  return result;
+};
+var hypergeomPMF = (k, n1, m1, N) => {
+  const total = choose(N, n1);
+  if (total === 0) return 0;
+  return choose(m1, k) * choose(N - m1, n1 - k) / total;
+};
+var hypergeomUpperTailP = (kStart, n1, m1, N) => {
+  const kMax = Math.min(n1, m1);
+  let p = 0;
+  for (let k = Math.max(0, kStart); k <= kMax; k++) {
+    p += hypergeomPMF(k, n1, m1, N);
+  }
+  return p;
+};
+var minOverlapForRarity = (n1, m1, N, targetP) => {
+  const kMax = Math.min(n1, m1);
+  for (let k = 0; k <= kMax; k++) {
+    if (hypergeomUpperTailP(k, n1, m1, N) <= targetP) return k;
+  }
+  return kMax + 1;
+};
+var overlapThresholdCache = /* @__PURE__ */ new Map();
+var getMinOverlap = (densityA, densityB, windowSize) => {
+  const lo = Math.min(densityA, densityB) | 0;
+  const hi = Math.max(densityA, densityB) | 0;
+  const key = `${lo}_${hi}_${windowSize}`;
+  let cached = overlapThresholdCache.get(key);
+  if (cached === void 0) {
+    const rare = minOverlapForRarity(lo, hi, windowSize, PAIR_RARITY_TARGET);
+    const floor = Math.ceil(RELATIVE_OVERLAP_FLOOR * lo);
+    cached = Math.max(rare, floor);
+    overlapThresholdCache.set(key, cached);
+  }
+  return cached;
+};
+var isSignificantOverlap = (overlap, densityA, densityB, windowSize) => {
+  if (densityA < 2 || densityB < 2) return false;
+  return overlap >= getMinOverlap(densityA, densityB, windowSize);
+};
+var countOverlapsCircular = (bufferA, headA, bufferB, headB) => {
   const L = bufferA.length;
-  let dot = 0, magA = 0, magB = 0;
-  const baseOffset = ((headB - headA + offset) % L + L) % L;
+  const offSync = ((headB - headA) % L + L) % L;
+  const offALeadsB = ((headB - headA + 1) % L + L) % L;
+  const offBLeadsA = ((headB - headA - 1) % L + L) % L;
+  let kSync = 0;
+  let kALeadsB = 0;
+  let kBLeadsA = 0;
+  let densityA = 0;
+  let densityB = 0;
   for (let i = 0; i < L; i++) {
-    const valA = bufferA[i];
-    let iB = i + baseOffset;
-    if (iB >= L) {
-      iB -= L;
-    }
-    const valB = bufferB[iB];
-    dot += valA * valB;
-    magA += valA * valA;
-    magB += valB * valB;
+    const a = bufferA[i] ? 1 : 0;
+    const b = bufferB[i] ? 1 : 0;
+    densityA += a;
+    densityB += b;
+    let iSync = i + offSync;
+    if (iSync >= L) iSync -= L;
+    let iALeadsB = i + offALeadsB;
+    if (iALeadsB >= L) iALeadsB -= L;
+    let iBLeadsA = i + offBLeadsA;
+    if (iBLeadsA >= L) iBLeadsA -= L;
+    if (a && bufferB[iSync]) kSync++;
+    if (a && bufferB[iALeadsB]) kALeadsB++;
+    if (a && bufferB[iBLeadsA]) kBLeadsA++;
   }
-  if (magA === 0 || magB === 0) return 0;
-  return dot / (Math.sqrt(magA) * Math.sqrt(magB));
+  return { kSync, kALeadsB, kBLeadsA, densityA, densityB };
 };
-var calculateCosineSimilarity = (A, B) => {
-  let dot = 0, magA = 0, magB = 0;
-  for (let i = 0; i < A.length; i++) {
-    dot += A[i] * B[i];
-    magA += A[i] * A[i];
-    magB += B[i] * B[i];
-  }
-  return magA === 0 || magB === 0 ? 0 : dot / (Math.sqrt(magA) * Math.sqrt(magB));
+var cosineFromOverlap = (overlap, densityA, densityB) => {
+  if (densityA <= 0 || densityB <= 0) return 0;
+  return overlap / Math.sqrt(densityA * densityB);
 };
 
 // src/core/graph.ts
@@ -109,13 +168,6 @@ var groupEventSources = (nodes, edges) => {
   return groups.sort((a, b) => b.edges.length - a.edges.length || b.occurrences - a.occurrences);
 };
 
-// src/core/constants.ts
-var WINDOW_SIZE = 50;
-var SIMILARITY_THRESHOLD = 0.88;
-var LOOP_THRESHOLD = 150;
-var VOLATILITY_THRESHOLD = 25;
-var INSTANCE_SEP = "##";
-
 // src/core/label.ts
 var stripInstance = (label) => {
   const idx = label.indexOf(INSTANCE_SEP);
@@ -229,32 +281,22 @@ var LAST_LOG_TIMES = /* @__PURE__ */ new Map();
 var LOG_COOLDOWN = 3e3;
 var THEME = {
   identity: "#6C5CE7",
-  // Purple (Brand)
   problem: "#D63031",
-  // Red (Bugs)
   solution: "#FBC531",
-  // Yellow (Fixes)
   context: "#0984E3",
-  // Blue (Locations)
   muted: "#9AA0A6",
-  // Gray (Metadata)
   border: "#2E2E35",
   success: "#00b894"
-  // Green (Good Score)
 };
 var STYLES = {
-  // Structure
   basis: `background: ${THEME.identity}; color: white; font-weight: bold; padding: 2px 6px; border-radius: 3px;`,
   headerIdentity: `background: ${THEME.identity}; color: white; font-weight: bold; padding: 4px 8px; border-radius: 4px;`,
   headerProblem: `background: ${THEME.problem}; color: white; font-weight: bold; padding: 4px 8px; border-radius: 4px;`,
   version: `background: #a29bfe; color: #2d3436; padding: 2px 6px; border-radius: 3px; margin-left: -4px;`,
-  // Actions
   actionLabel: `color: ${THEME.solution}; font-weight: bold;`,
   actionPill: `color: ${THEME.solution}; font-weight: bold; border: 1px solid ${THEME.solution}; padding: 0 4px; border-radius: 3px;`,
-  // Context
   impactLabel: `color: ${THEME.context}; font-weight: bold;`,
   location: `color: ${THEME.context}; font-family: monospace; font-weight: bold;`,
-  // Text
   subText: `color: ${THEME.muted}; font-size: 11px;`,
   bold: "font-weight: bold;",
   label: "background: #dfe6e9; color: #2d3436; padding: 0 4px; border-radius: 3px; font-family: monospace; font-weight: bold; border: 1px solid #b2bec3;"
@@ -269,97 +311,95 @@ var shouldLog = (key) => {
   return false;
 };
 var isBooleanLike = (name) => /^(is|has|can|should|did|will|show|hide)(?=[A-Z_])/.test(name);
+var displayName = (raw) => {
+  const { name } = parseLabel(raw);
+  return name.replace(/:\d+$/, "");
+};
+var areSyncSignificant = (metaA, metaB) => {
+  const { kSync, densityA, densityB } = countOverlapsCircular(
+    metaA.buffer,
+    metaA.head,
+    metaB.buffer,
+    metaB.head
+  );
+  return isSignificantOverlap(kSync, densityA, densityB, metaA.buffer.length);
+};
 var getSuggestedFix = (issue, info) => {
   if (issue.label.includes("Global Event")) {
-    return `These variables update together but live in different hooks/files. Consolidate them into a single %cuseReducer%c or atomic store update.`;
+    return `One interaction is updating state in several places. If that is really one transition, put it in one %cstore / reducer%c. If it is intentional, ignore this.`;
   }
   const violations = issue.violations || [];
   const leaks = violations.filter((v) => v.type === "causal_leak");
   const mirrors = violations.filter((v) => v.type === "context_mirror");
   const duplicates = violations.filter((v) => v.type === "duplicate_state");
   if (mirrors.length > 0) {
-    return `Local state is 'shadowing' Global Context. This creates two sources of truth. Delete the local state and consume the %cContext%c value directly.`;
+    return `A local hook is only tracking context or a store. If it is not a draft, delete it and read the %ccontext / store%c in render.`;
   }
   if (leaks.length > 0) {
-    const targetName = parseLabel(leaks[0].target).name;
+    const targetName = displayName(leaks[0].target);
     if (issue.label.includes("effect")) {
-      return `This Effect triggers a synchronous re-render of ${targetName}. Calculate ${targetName} during the render phase (Derived State) or wrap in %cuseMemo%c if expensive.`;
+      return `An effect is calling setState on ${targetName}, which paints again. If you can compute ${targetName} while rendering, drop the %ceffect%c.`;
     }
-    return `State cascading detected. ${info.name} triggers ${targetName} in a separate frame. Merge them into one object to update simultaneously.`;
+    return `${info.name} updates, then ${targetName} updates on the next frame. If they are one fact, write them in the same %csetState%c.`;
   }
   if (duplicates.length > 0) {
     if (isBooleanLike(info.name)) {
-      return `Boolean Explosion detected. Multiple flags are toggling in sync. Replace impossible states with a single %cstatus%c string ('idle' | 'loading' | 'success').`;
+      return `Several flags move together. One %cstatus%c value avoids impossible combinations.`;
     }
-    return `Redundant State detected. This variable carries no unique information. Derive it from the source variable during render, or use %cuseMemo%c to cache the result.`;
+    return `These hooks move together. If one is just the other in another shape, compute it while %crendering%c.`;
   }
   if (issue.metric === "density") {
-    return `High-Frequency Update. This variable updates faster than the frame rate. Apply %cdebounce%c or move to a Ref to unblock the main thread.`;
+    return `This hook updates faster than a frame. %cDebounce%c it or keep it in a ref if the UI does not need every pulse.`;
   }
-  return `Check the dependency chain of ${info.name}.`;
+  return `Inspect ${info.name} and what updates with it.`;
 };
-var displayHealthReport = (history2, threshold, violationMap) => {
+var displayHealthReport = (history2, violationMap) => {
   if (!isWeb) return;
   const entries = Array.from(history2.entries());
   if (entries.length === 0) return;
   const topIssues = identifyTopIssues(instance.graph, history2, instance.redundantLabels, violationMap);
-  console.group(`%c \u{1F4CA} BASIS | ARCHITECTURAL HEALTH REPORT `, STYLES.headerIdentity);
+  console.group(`%c BASIS | report `, STYLES.headerIdentity);
   if (topIssues.length > 0) {
-    console.log(
-      `%c\u{1F3AF} REFACTOR PRIORITIES %c(PRIME MOVERS)`,
-      `font-weight: bold; color: ${THEME.identity}; margin-top: 10px;`,
-      `font-weight: normal; color: ${THEME.muted}; font-style: italic;`
-    );
+    console.log(`%cStart here`, `font-weight: bold; color: ${THEME.identity}; margin-top: 10px;`);
     topIssues.forEach((issue, idx) => {
       const info = parseLabel(issue.label);
-      const icon = issue.metric === "influence" ? "\u26A1" : "\u{1F4C8}";
+      const icon = issue.metric === "influence" ? "\u2192" : "\u2022";
       const pColor = idx === 0 ? THEME.problem : idx === 1 ? THEME.solution : THEME.identity;
-      let displayName = info.name;
-      let displayFile = info.file;
-      if (issue.label.includes("Global Event")) {
-        displayName = info.name;
-        displayFile = info.file;
-      }
       console.group(
-        ` %c${idx + 1}%c ${icon} ${displayName} %c(${displayFile})`,
+        ` %c${idx + 1}%c ${icon} ${displayName(issue.label)} %c(${info.file})`,
         `background: ${pColor}; color: ${idx === 1 ? "black" : "white"}; border-radius: 50%; padding: 0 5px;`,
         "font-family: monospace; font-weight: 700;",
-        `color: ${THEME.muted}; font-size: 10px; font-weight: normal; font-style: italic;`
+        `color: ${THEME.muted}; font-size: 10px; font-weight: normal;`
       );
-      console.log(`%c${issue.reason}`, `color: ${THEME.muted}; font-style: italic;`);
+      console.log(`%c${issue.reason}`, `color: ${THEME.muted};`);
       if (issue.violations.length > 0) {
         const byFile = /* @__PURE__ */ new Map();
         issue.violations.forEach((v) => {
           if (issue.label.includes("Global Event") && v.type === "context_mirror") return;
           const { file, name } = parseLabel(v.target);
           if (!byFile.has(file)) byFile.set(file, []);
-          byFile.get(file).push(name);
+          byFile.get(file).push(name.replace(/:\d+$/, ""));
         });
         const impactParts = [];
         byFile.forEach((vars, file) => {
-          const varList = vars.join(", ");
-          impactParts.push(`${file} (${varList})`);
+          impactParts.push(`${file} (${vars.join(", ")})`);
         });
         if (impactParts.length > 0) {
-          console.log(`%cImpacts: %c${impactParts.join(" + ")}`, STYLES.impactLabel, "");
+          console.log(`%cAlso updates: %c${impactParts.join(" \xB7 ")}`, STYLES.impactLabel, "");
         }
       }
       const fix = getSuggestedFix(issue, info);
       const fixParts = fix.split("%c");
       if (fixParts.length === 3) {
         console.log(
-          `%cSolution: %c${fixParts[0]}%c${fixParts[1]}%c${fixParts[2]}`,
+          `%cTry: %c${fixParts[0]}%c${fixParts[1]}%c${fixParts[2]}`,
           STYLES.actionLabel,
           "",
           STYLES.actionPill,
           ""
         );
       } else {
-        console.log(
-          `%cSolution: %c${fix}`,
-          STYLES.actionLabel,
-          ""
-        );
+        console.log(`%cTry: %c${fix}`, STYLES.actionLabel, "");
       }
       console.groupEnd();
     });
@@ -374,145 +414,179 @@ var displayHealthReport = (history2, threshold, violationMap) => {
     processed.add(labelA);
     entries.forEach(([labelB, metaB]) => {
       if (labelA === labelB || processed.has(labelB)) return;
-      if (calculateCosineSimilarity(metaA.buffer, metaB.buffer) > threshold) {
-        if (metaA.role === "context" /* CONTEXT */ && metaB.role === "context" /* CONTEXT */) return;
-        currentCluster.push(labelB);
-        processed.add(labelB);
-      }
+      if (!areSyncSignificant(metaA, metaB)) return;
+      if (metaA.role === "context" /* CONTEXT */ && metaB.role === "context" /* CONTEXT */) return;
+      currentCluster.push(labelB);
+      processed.add(labelB);
     });
     if (currentCluster.length > 1) clusters.push(currentCluster);
     else independentCount++;
   });
   const totalVars = entries.length;
-  const redundancyScore = (independentCount + clusters.length) / totalVars * 100;
-  let internalEdges = 0;
-  instance.graph.forEach((targets, source) => {
-    if (source.startsWith("Event_Tick_")) return;
-    internalEdges += targets.size;
-  });
-  const causalPenalty = internalEdges / totalVars * 100;
-  let healthScore = redundancyScore - causalPenalty;
-  if (healthScore < 0) healthScore = 0;
-  const scoreColor = healthScore > 85 ? THEME.success : THEME.problem;
   console.log(
-    `%cSystem Efficiency: %c${healthScore.toFixed(1)}%`,
-    STYLES.bold,
-    `color: ${scoreColor}; font-weight: bold;`
+    `%c${independentCount + clusters.length} of ${totalVars} instrumented hooks look independent in this window.`,
+    STYLES.subText
   );
-  console.log(`%cSources of Truth: ${independentCount + clusters.length}/${totalVars} | Causal Leaks: ${internalEdges}`, STYLES.subText);
   if (clusters.length > 0) {
-    console.log(`%cDetected ${clusters.length} Sync Issues:`, `font-weight: bold; color: ${THEME.problem}; margin-top: 10px;`);
+    console.log(
+      `%c${clusters.length} group${clusters.length === 1 ? "" : "s"} that keep updating together:`,
+      `font-weight: bold; color: ${THEME.problem}; margin-top: 10px;`
+    );
     clusters.forEach((cluster, idx) => {
       const clusterMetas = cluster.map((l) => ({
         label: l,
         meta: history2.get(l),
-        name: parseLabel(l).name
+        name: displayName(l)
       }));
       const hasCtx = clusterMetas.some(
         (c) => c.meta.role === "context" /* CONTEXT */ || c.meta.role === "store" /* STORE */
       );
-      const names = clusterMetas.map((c) => {
-        const prefix = c.meta.role === "store" /* STORE */ ? "\u03A3 " : c.meta.role === "context" /* CONTEXT */ ? "\u03A9 " : "";
-        return `${prefix}${c.name}`;
-      }).join(" \u27F7 ");
-      console.group(` %c${idx + 1}%c ${names}`, `background: ${THEME.problem}; color: white; border-radius: 50%; padding: 0 5px;`, "font-family: monospace; font-weight: bold;");
+      const names = clusterMetas.map((c) => c.name).join(", ");
+      console.group(
+        ` %c${idx + 1}%c ${names}`,
+        `background: ${THEME.problem}; color: white; border-radius: 50%; padding: 0 5px;`,
+        "font-family: monospace; font-weight: bold;"
+      );
       if (hasCtx) {
         const hasStore = clusterMetas.some((c) => c.meta.role === "store" /* STORE */);
-        const sourceType = hasStore ? "External Store" : "global context";
-        console.log(`%cDiagnosis: ${hasStore ? "Store" : "Context"} Mirroring. Local state is shadowing ${sourceType}.`, `color: ${THEME.problem};`);
-        console.log(`%cSolution: Use ${sourceType} directly to avoid state drift.`, STYLES.actionLabel);
+        const sourceType = hasStore ? "a store" : "context";
+        console.log(`A local hook is only following ${sourceType}.`);
+        console.log(
+          `%cTry:%c Read ${sourceType} in render if the local value is not a draft.`,
+          STYLES.actionLabel,
+          ""
+        );
       } else {
-        const boolKeywords = ["is", "has", "can", "should", "loading", "success", "error", "active", "enabled", "open", "visible"];
+        const boolKeywords = [
+          "is",
+          "has",
+          "can",
+          "should",
+          "loading",
+          "success",
+          "error",
+          "active",
+          "enabled",
+          "open",
+          "visible"
+        ];
         const boolCount = clusterMetas.filter(
           (c) => boolKeywords.some((kw) => c.name.toLowerCase().startsWith(kw))
         ).length;
-        const isBoolExplosion = cluster.length > 2 && boolCount / cluster.length > 0.5;
-        if (isBoolExplosion) {
-          console.log(`%cDiagnosis:%c Boolean Explosion. Multiple booleans updating in sync.`, STYLES.bold, "");
-          console.log(`%cSolution:%c Combine into a single %cstatus%c string or a %creducer%c.`, STYLES.actionLabel, "", STYLES.actionPill, "", STYLES.actionPill, "");
+        if (cluster.length > 2 && boolCount / cluster.length > 0.5) {
+          console.log(`These flags move together.`);
+          console.log(
+            `%cTry:%c One %cstatus%c instead of several booleans.`,
+            STYLES.actionLabel,
+            "",
+            STYLES.actionPill,
+            ""
+          );
         } else if (cluster.length > 2) {
-          console.log(`%cDiagnosis:%c Sibling Updates. These states respond to the same event.`, STYLES.bold, "");
-          console.log(`%cSolution:%c This may be intentional. If not, consolidate into a %creducer%c.`, STYLES.actionLabel, "", STYLES.actionPill, "");
+          console.log(`These hooks move on the same frames. Often the same click or fetch.`);
+          console.log(
+            `%cTry:%c Leave it if that is intentional. Otherwise one %creducer%c.`,
+            STYLES.actionLabel,
+            "",
+            STYLES.actionPill,
+            ""
+          );
         } else {
-          console.log(`%cDiagnosis:%c Redundant State. Variables always change together.`, STYLES.bold, "");
-          console.log(`%cSolution:%c Derive one from the other via %cuseMemo%c.`, STYLES.actionLabel, "", STYLES.actionPill, "");
+          console.log(`These two hooks keep updating in the same frame.`);
+          console.log(
+            `%cTry:%c If one is derived, compute it while %crendering%c.`,
+            STYLES.actionLabel,
+            "",
+            STYLES.actionPill,
+            ""
+          );
         }
       }
       console.groupEnd();
     });
   } else {
-    console.log("%c\u2728 Your architecture is clean. No redundant state detected.", `color: ${THEME.success}; font-weight: bold;`);
+    console.log(
+      "%cNo hooks were updating in lockstep in this window.",
+      `color: ${THEME.success}; font-weight: bold;`
+    );
   }
   console.groupEnd();
 };
-var displayRedundancyAlert = (labelA, metaA, labelB, metaB, sim) => {
+var displayRedundancyAlert = (labelA, metaA, labelB, metaB, overlap) => {
   if (!isWeb || !shouldLog(`redundant-${labelA}-${labelB}`)) return;
   const infoA = parseLabel(labelA);
-  const infoB = parseLabel(labelB);
+  const nameA = displayName(labelA);
+  const nameB = displayName(labelB);
   const isContextMirror = metaA.role === "local" /* LOCAL */ && metaB.role === "context" /* CONTEXT */ || metaB.role === "local" /* LOCAL */ && metaA.role === "context" /* CONTEXT */;
   const isStoreMirror = metaA.role === "local" /* LOCAL */ && metaB.role === "store" /* STORE */ || metaB.role === "local" /* LOCAL */ && metaA.role === "store" /* STORE */;
-  const alertType = isContextMirror ? "CONTEXT MIRRORING" : isStoreMirror ? "STORE MIRRORING" : "DUPLICATE STATE";
-  console.group(`%c \u264A BASIS | ${alertType} `, STYLES.headerProblem);
-  console.log(`%c\u{1F4CD} Location: %c${infoA.file}`, STYLES.bold, STYLES.location);
-  console.log(`%cIssue:%c ${infoA.name} and ${infoB.name} are synchronized (${(sim * 100).toFixed(0)}%).`, STYLES.bold, "");
+  const alertType = isContextMirror ? "local state follows context" : isStoreMirror ? "local state follows a store" : "hooks moving together";
+  const times = overlap.kSync === 1 ? "time" : "times";
+  console.group(`%c BASIS | ${alertType} `, STYLES.headerProblem);
+  console.log(`%c${infoA.file}`, STYLES.location);
+  console.log(
+    `%c${nameA}%c and %c${nameB}%c updated in the same frame ${overlap.kSync} ${times}.`,
+    STYLES.label,
+    "",
+    STYLES.label,
+    ""
+  );
   if (isContextMirror || isStoreMirror) {
-    const sourceType = isStoreMirror ? "External Store" : "Global Context";
+    const sourceType = isStoreMirror ? "store" : "context";
+    console.log(
+      `%cTry:%c If this is not a draft, delete the local hook and read the %c${sourceType}%c in render.`,
+      STYLES.bold,
+      "",
+      STYLES.actionPill,
+      ""
+    );
+  } else if (isBooleanLike(nameA) || isBooleanLike(nameB)) {
     console.log(
-      `%cFix:%c Local state is 'shadowing' ${sourceType}. Delete the local state and consume the %c${sourceType}%c value directly.`,
+      `%cTry:%c One %cstatus%c instead of several flags.`,
       STYLES.bold,
       "",
       STYLES.actionPill,
       ""
     );
   } else {
-    if (isBooleanLike(infoA.name) || isBooleanLike(infoB.name)) {
-      console.log(
-        `%cFix:%c Boolean Explosion detected. Merge flags into a single %cstatus%c string or %cuseReducer%c.`,
-        STYLES.bold,
-        "",
-        STYLES.actionPill,
-        "",
-        STYLES.actionPill,
-        ""
-      );
-    } else {
-      console.log(
-        `%cFix:%c Redundant State detected. Derive %c${infoB.name}%c from %c${infoA.name}%c during render, or use %cuseMemo%c.`,
-        STYLES.bold,
-        "",
-        STYLES.label,
-        "",
-        STYLES.label,
-        "",
-        STYLES.actionPill,
-        ""
-      );
-    }
+    console.log(
+      `%cTry:%c If %c${nameB}%c is just %c${nameA}%c in another shape, compute it while rendering.`,
+      STYLES.bold,
+      "",
+      STYLES.label,
+      "",
+      STYLES.label,
+      ""
+    );
   }
   console.groupEnd();
 };
-var displayCausalHint = (targetLabel, targetMeta, sourceLabel, sourceMeta) => {
+var displayCausalHint = (targetLabel, _targetMeta, sourceLabel, sourceMeta) => {
   if (!isWeb || !shouldLog(`causal-${sourceLabel}-${targetLabel}`)) return;
   const target = parseLabel(targetLabel);
-  const source = parseLabel(sourceLabel);
-  const headerType = sourceMeta.role === "context" /* CONTEXT */ ? "CONTEXT SYNC LEAK" : sourceMeta.role === "store" /* STORE */ ? "STORE SYNC LEAK" : "DOUBLE RENDER";
+  const sourceName = displayName(sourceLabel);
+  const targetName = displayName(targetLabel);
+  const headerType = sourceMeta.role === "context" /* CONTEXT */ ? "extra render from context" : sourceMeta.role === "store" /* STORE */ ? "extra render from a store" : "extra render";
   const isEffect = sourceLabel.includes("effect") || sourceLabel.includes("useLayoutEffect");
-  console.groupCollapsed(`%c \u26A1 BASIS | ${headerType} `, STYLES.headerProblem);
-  console.log(`%c\u{1F4CD} Location: %c${target.file}`, STYLES.bold, STYLES.location);
-  console.log(`%cIssue:%c ${source.name} triggers ${target.name} in separate frames.`, STYLES.bold, "");
+  console.groupCollapsed(`%c BASIS | ${headerType} `, STYLES.headerProblem);
+  console.log(`%c${target.file}`, STYLES.location);
+  console.log(
+    `%c${sourceName}%c updates %c${targetName}%c on the next frame.`,
+    STYLES.label,
+    "",
+    STYLES.label,
+    ""
+  );
   if (isEffect) {
     console.log(
-      `%cFix:%c Derive %c${target.name}%c during the render phase (remove effect) or wrap in %cuseMemo%c.`,
+      `%cTry:%c If %c${targetName}%c can be computed while rendering, drop the extra setState.`,
       STYLES.bold,
       "",
       STYLES.label,
-      "",
-      STYLES.actionPill,
       ""
     );
   } else {
     console.log(
-      `%cFix:%c Merge %c${target.name}%c with %c${source.name}%c into a single state update.`,
+      `%cTry:%c Write %c${targetName}%c in the same update as %c${sourceName}%c if they are one fact.`,
       STYLES.bold,
       "",
       STYLES.label,
@@ -545,7 +619,7 @@ var displayGraphReport = (graph) => {
   if (!isWeb) return;
   if (graph.nodes.length === 0) {
     console.log(
-      `%c \u{1F4CA} BASIS | CAUSAL GRAPH %c(no data yet)`,
+      `%c BASIS | update graph %c(nothing recorded yet)`,
       STYLES.headerIdentity,
       `color: ${THEME.muted}; font-style: italic;`
     );
@@ -564,17 +638,22 @@ var displayGraphReport = (graph) => {
     occurrences: g.occurrences
   }));
   const groupedSourceIds = new Set(graph.eventGroups.flatMap((g) => g.sourceIds));
-  const nonEventGroups = Array.from(outgoing.keys()).filter((id) => !groupedSourceIds.has(id)).map((id) => ({ sourceIds: [id], sourceNode: nodeById.get(id), edges: outgoing.get(id), occurrences: 1 }));
+  const nonEventGroups = Array.from(outgoing.keys()).filter((id) => !groupedSourceIds.has(id)).map((id) => ({
+    sourceIds: [id],
+    sourceNode: nodeById.get(id),
+    edges: outgoing.get(id),
+    occurrences: 1
+  }));
   const groups = [...eventGroups, ...nonEventGroups].sort(
     (a, b) => b.edges.length - a.edges.length || b.occurrences - a.occurrences
   );
   console.group(
-    `%c \u{1F4CA} BASIS | CAUSAL GRAPH %c${graph.nodes.length} nodes \xB7 ${graph.edges.length} edges \xB7 ${groups.length} sources \xB7 buffer window ${graph.bufferWindowSize}`,
+    `%c BASIS | update graph %c${graph.nodes.length} nodes \xB7 ${graph.edges.length} edges \xB7 ${groups.length} sources \xB7 last ${graph.bufferWindowSize} frames`,
     STYLES.headerIdentity,
-    `color: ${THEME.muted}; font-weight: normal; font-style: italic;`
+    `color: ${THEME.muted}; font-weight: normal;`
   );
   console.log(
-    `%cparent \u2192 child = observed cause \u2192 update. (\xD7N) = times in this window. Event groups with the same fan-out are collapsed.`,
+    `%cparent \u2192 child = what we saw cause an update. (\xD7N) = times in this window. Repeat clicks with the same targets are grouped.`,
     STYLES.subText
   );
   groups.forEach((group) => {
@@ -582,12 +661,12 @@ var displayGraphReport = (graph) => {
     const isCtx = group.sourceNode?.role === "context" /* CONTEXT */;
     const isFx = group.sourceNode?.role === "effect";
     const isUnknown = group.sourceNode?.role === "unknown";
-    const icon = isEvent ? "\u26A1" : isCtx ? "\u03A9" : isFx ? "\u21AF" : isUnknown ? "?" : "\u25CF";
+    const icon = isEvent ? "\u2022" : isCtx ? "ctx" : isFx ? "fx" : isUnknown ? "?" : "\u2022";
     const color = isEvent ? THEME.solution : isCtx ? THEME.context : THEME.identity;
     const fanout = group.edges.length;
     const hits = group.occurrences;
     const hitLabel = hits > 1 ? ` \xB7 \xD7${hits}` : "";
-    const title = isEvent ? `Event \xB7 ${fanout} target${fanout === 1 ? "" : "s"}${hitLabel}` : formatNode(group.sourceNode, group.sourceIds[0]);
+    const title = isEvent ? `click / event \xB7 ${fanout} update${fanout === 1 ? "" : "s"}${hitLabel}` : formatNode(group.sourceNode, group.sourceIds[0]);
     console.groupCollapsed(
       `%c${icon} %c${title}`,
       `color: ${color};`,
@@ -599,16 +678,16 @@ var displayGraphReport = (graph) => {
       const weight = edge.weight > 1 ? ` (\xD7${edge.weight})` : "";
       if (target?.redundant) {
         console.log(
-          `%c  ${label}%c${weight} %credundant`,
+          `%c  ${label}%c${weight} %cmoving with another hook`,
           `color: ${THEME.muted}; font-family: monospace;`,
-          `color: ${THEME.muted}; font-style: italic;`,
+          `color: ${THEME.muted};`,
           `color: ${THEME.problem}; font-weight: bold;`
         );
       } else {
         console.log(
           `%c  ${label}%c${weight}`,
           `color: ${THEME.muted}; font-family: monospace;`,
-          `color: ${THEME.muted}; font-style: italic;`
+          `color: ${THEME.muted};`
         );
       }
     });
@@ -616,19 +695,21 @@ var displayGraphReport = (graph) => {
   });
   console.groupEnd();
 };
-var displayViolentBreaker = (label, count, threshold) => {
+var displayViolentBreaker = (label, count, _threshold) => {
   if (!isWeb) return;
-  const { name } = parseLabel(label);
-  console.group(`%c \u{1F6D1} BASIS CRITICAL | CIRCUIT BREAKER `, STYLES.headerProblem);
-  console.error(`INFINITE LOOP DETECTED
-Variable: ${name}
-Frequency: ${count} updates/sec`);
-  console.log(`%cACTION: Update BLOCKED to prevent browser freeze.`, `color: ${THEME.problem}; font-weight: bold;`);
+  const name = displayName(label);
+  console.group(`%c BASIS | loop guard `, STYLES.headerProblem);
+  console.error(
+    `${name} updated ${count} times in one second. Basis stopped recording this path so the tab stays usable.`
+  );
+  console.log(
+    `%cReact may still error on its own. Fix the effect that writes a value it also lists as a dependency.`,
+    `color: ${THEME.muted};`
+  );
   console.groupEnd();
 };
 
 // src/core/analysis.ts
-var CAUSAL_MARGIN = 0.05;
 var isEventDriven = (label, graph) => {
   for (const [parent, targets] of graph.entries()) {
     if (parent.startsWith("Event_Tick_") && targets.has(label)) {
@@ -638,29 +719,40 @@ var isEventDriven = (label, graph) => {
   return false;
 };
 var calculateAllSimilarities = (entryA, entryB) => {
-  const sync = calculateSimilarityCircular(
-    entryA.meta.buffer,
-    entryA.meta.head,
-    entryB.meta.buffer,
-    entryB.meta.head,
-    0
-  );
-  const bA = calculateSimilarityCircular(
-    entryA.meta.buffer,
-    entryA.meta.head,
-    entryB.meta.buffer,
-    entryB.meta.head,
-    1
-  );
-  const aB = calculateSimilarityCircular(
+  const { kSync, kALeadsB, kBLeadsA, densityA, densityB } = countOverlapsCircular(
     entryA.meta.buffer,
     entryA.meta.head,
     entryB.meta.buffer,
-    entryB.meta.head,
-    -1
+    entryB.meta.head
   );
-  return { sync, bA, aB, max: Math.max(sync, bA, aB) };
+  const sync = cosineFromOverlap(kSync, densityA, densityB);
+  const bA = cosineFromOverlap(kALeadsB, densityA, densityB);
+  const aB = cosineFromOverlap(kBLeadsA, densityA, densityB);
+  const max = Math.max(sync, bA, aB);
+  const windowSize = entryA.meta.buffer.length;
+  const significantSync = isSignificantOverlap(kSync, densityA, densityB, windowSize);
+  const kLead = Math.max(kALeadsB, kBLeadsA);
+  const significantLead = isSignificantOverlap(kLead, densityA, densityB, windowSize) && kLead >= kSync + 1;
+  return {
+    sync,
+    bA,
+    aB,
+    max,
+    kSync,
+    kALeadsB,
+    kBLeadsA,
+    densityA,
+    densityB,
+    significantSync,
+    significantLead
+  };
 };
+var overlapFrom = (s) => ({
+  kSync: s.kSync,
+  densityA: s.densityA,
+  densityB: s.densityB,
+  cosine: s.sync
+});
 var shouldSkipComparison = (entryA, entryB, dirtyLabels2) => {
   if (entryA.label === entryB.label) return true;
   if (isSameField(entryA.label, entryB.label)) return true;
@@ -684,52 +776,51 @@ var detectRedundancy = (entryA, entryB, similarities, redundantSet, violationMap
   const roleA = entryA.meta.role;
   const roleB = entryB.meta.role;
   if (isGlobalSource(roleA) && isGlobalSource(roleB)) return;
-  if (entryA.meta.density < 2 || entryB.meta.density < 2) return;
+  if (similarities.densityA < 2 || similarities.densityB < 2) return;
+  const overlap = overlapFrom(similarities);
   if (roleA === "local" /* LOCAL */ && isGlobalSource(roleB)) {
     redundantSet.add(entryA.label);
-    pushViolation(violationMap, entryB.label, { type: "context_mirror", target: entryA.label, similarity: similarities.max });
-    displayRedundancyAlert(entryA.label, entryA.meta, entryB.label, entryB.meta, similarities.max);
+    pushViolation(violationMap, entryB.label, { type: "context_mirror", target: entryA.label, overlap });
+    displayRedundancyAlert(entryA.label, entryA.meta, entryB.label, entryB.meta, overlap);
   } else if (isGlobalSource(roleA) && roleB === "local" /* LOCAL */) {
     redundantSet.add(entryB.label);
-    pushViolation(violationMap, entryA.label, { type: "context_mirror", target: entryB.label, similarity: similarities.max });
-    displayRedundancyAlert(entryB.label, entryB.meta, entryA.label, entryA.meta, similarities.max);
+    pushViolation(violationMap, entryA.label, { type: "context_mirror", target: entryB.label, overlap });
+    displayRedundancyAlert(entryB.label, entryB.meta, entryA.label, entryA.meta, overlap);
   } else if (roleA === "local" /* LOCAL */ && roleB === "local" /* LOCAL */) {
     redundantSet.add(entryA.label);
     redundantSet.add(entryB.label);
-    pushViolation(violationMap, entryA.label, { type: "duplicate_state", target: entryB.label, similarity: similarities.max });
-    pushViolation(violationMap, entryB.label, { type: "duplicate_state", target: entryA.label, similarity: similarities.max });
-    displayRedundancyAlert(entryA.label, entryA.meta, entryB.label, entryB.meta, similarities.max);
+    pushViolation(violationMap, entryA.label, { type: "duplicate_state", target: entryB.label, overlap });
+    pushViolation(violationMap, entryB.label, { type: "duplicate_state", target: entryA.label, overlap });
+    displayRedundancyAlert(entryA.label, entryA.meta, entryB.label, entryB.meta, overlap);
   }
 };
 var detectCausalLeak = (entryA, entryB, similarities, violationMap, graph) => {
   if (entryA.isVolatile || entryB.isVolatile) return;
-  if (similarities.max - similarities.sync < CAUSAL_MARGIN) return;
   const addLeak = (source, target) => {
     if (isEventDriven(target, graph)) return;
-    if (!violationMap.has(source)) {
-      violationMap.set(source, []);
-    }
-    violationMap.get(source).push({ type: "causal_leak", target });
+    pushViolation(violationMap, source, { type: "causal_leak", target });
     const sourceEntry = source === entryA.label ? entryA : entryB;
     const targetEntry = source === entryA.label ? entryB : entryA;
     displayCausalHint(target, targetEntry.meta, source, sourceEntry.meta);
   };
-  if (similarities.bA === similarities.max) {
+  if (similarities.kALeadsB >= similarities.kBLeadsA) {
     addLeak(entryA.label, entryB.label);
-  } else if (similarities.aB === similarities.max) {
+  } else {
     addLeak(entryB.label, entryA.label);
   }
 };
 var detectSubspaceOverlap = (dirtyEntries, allEntries, redundantSet, dirtyLabels2, graph) => {
-  let compCount = 0;
   const violationMap = /* @__PURE__ */ new Map();
+  let compCount = 0;
   for (const entryA of dirtyEntries) {
     for (const entryB of allEntries) {
       if (shouldSkipComparison(entryA, entryB, dirtyLabels2)) continue;
       compCount++;
       const similarities = calculateAllSimilarities(entryA, entryB);
-      if (similarities.max > SIMILARITY_THRESHOLD) {
+      if (similarities.significantSync) {
         detectRedundancy(entryA, entryB, similarities, redundantSet, violationMap);
+      }
+      if (similarities.significantLead) {
         detectCausalLeak(entryA, entryB, similarities, violationMap, graph);
       }
     }
@@ -962,9 +1053,9 @@ var registerVariable = (l, o = {}) => {
     });
   }
 };
-var printBasisHealthReport = (threshold = 0.5) => {
+var printBasisHealthReport = () => {
   if (!instance.config.debug) return;
-  displayHealthReport(instance.history, threshold, instance.violationMap);
+  displayHealthReport(instance.history, instance.violationMap);
 };
 var getBasisMetrics = () => ({
   engine: "v0.6.x",