react-state-basis 0.6.0 → 0.6.2

package/dist/index.mjs

@@ -1,6 +1,21 @@
 import {
   basis
 } from "./chunk-I5ZFRXQP.mjs";
+import {
+  INSTANCE_SEP,
+  WINDOW_SIZE,
+  beginEffectTracking,
+  configureBasis,
+  endEffectTracking,
+  getBasisMetrics,
+  history,
+  parseLabel,
+  printBasisHealthReport,
+  recordUpdate,
+  redundantLabels,
+  registerVariable,
+  unregisterVariable
+} from "./chunk-E3D6YEKB.mjs";
 
 // src/hooks.ts
 import * as React from "react";
@@ -18,889 +33,54 @@ import {
   useTransition as reactUseTransition,
   useDeferredValue as reactUseDeferredValue
 } from "react";
-
-// src/core/math.ts
-var calculateSimilarityCircular = (bufferA, headA, bufferB, headB, offset) => {
-  const L = bufferA.length;
-  let dot = 0, magA = 0, magB = 0;
-  const baseOffset = ((headB - headA + offset) % L + L) % L;
-  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;
-  }
-  if (magA === 0 || magB === 0) return 0;
-  return dot / (Math.sqrt(magA) * Math.sqrt(magB));
-};
-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));
-};
-
-// src/core/graph.ts
-var calculateSpectralInfluence = (graph, maxIterations = 20, tolerance = 1e-3) => {
-  const nodes = Array.from(/* @__PURE__ */ new Set([...graph.keys(), ...Array.from(graph.values()).flatMap((m) => [...m.keys()])]));
-  if (nodes.length === 0) return /* @__PURE__ */ new Map();
-  let scores = /* @__PURE__ */ new Map();
-  nodes.forEach((n) => scores.set(n, 1 / nodes.length));
-  for (let i = 0; i < maxIterations; i++) {
-    const nextScores = /* @__PURE__ */ new Map();
-    let totalWeight = 0;
-    nodes.forEach((source) => {
-      let influence = 0;
-      const outgoing = graph.get(source);
-      if (outgoing) {
-        outgoing.forEach((weight, target) => {
-          if (source !== target) {
-            influence += (scores.get(target) || 0) * weight;
-          }
-        });
-      }
-      nextScores.set(source, influence + 0.01);
-      totalWeight += influence + 0.01;
-    });
-    let delta = 0;
-    nextScores.forEach((val, key) => {
-      const normalized = val / totalWeight;
-      const diff = normalized - (scores.get(key) || 0);
-      delta += diff * diff;
-      nextScores.set(key, normalized);
-    });
-    scores = nextScores;
-    if (Math.sqrt(delta) < tolerance) break;
-  }
-  return scores;
-};
-
-// src/core/ranker.ts
-var parseLabel = (label) => {
-  const parts = label.split(" -> ");
-  return { file: parts[0] || "Unknown", name: parts[1] || label };
-};
-var identifyTopIssues = (graph, history2, redundantLabels2, violationMap) => {
-  const results = [];
-  const influence = calculateSpectralInfluence(graph);
-  const isEffect = (label) => label.includes("effect_L") || label.includes("useLayoutEffect") || label.includes("useInsertionEffect");
-  const isEvent = (label) => label.startsWith("Event_Tick_");
-  const eventSignatures = /* @__PURE__ */ new Map();
-  const drivers = Array.from(graph.entries()).filter(([label, targets]) => {
-    if (targets.size === 0) return false;
-    if (isEvent(label)) {
-      const validTargets = Array.from(targets.keys()).filter((t) => {
-        const meta2 = history2.get(t);
-        return meta2 && meta2.role !== "context" /* CONTEXT */;
-      });
-      if (validTargets.length > 1) {
-        const signature = validTargets.sort().join("|");
-        const existing = eventSignatures.get(signature);
-        if (existing) {
-          existing.count++;
-          existing.score = Math.max(existing.score, influence.get(label) || 0);
-        } else {
-          eventSignatures.set(signature, {
-            count: 1,
-            score: influence.get(label) || 0,
-            targets: validTargets
-          });
-        }
-      }
-      return false;
-    }
-    const meta = history2.get(label);
-    if (meta?.role === "context" /* CONTEXT */) return false;
-    if (meta?.role === "proj" /* PROJECTION */) return false;
-    const score = influence.get(label) || 0;
-    if (isEffect(label) && targets.size > 0) return true;
-    if (targets.size < 2 && score < 0.05) return false;
-    return true;
-  }).sort((a, b) => {
-    const scoreA = influence.get(a[0]) || 0;
-    const scoreB = influence.get(b[0]) || 0;
-    return scoreB - scoreA;
-  });
-  const sortedEvents = Array.from(eventSignatures.entries()).sort((a, b) => b[1].targets.length - a[1].targets.length);
-  sortedEvents.slice(0, 2).forEach(([sig, data]) => {
-    const primaryVictim = parseLabel(data.targets[0]);
-    const smartLabel = `${primaryVictim.file} -> Global Event (${primaryVictim.name})`;
-    results.push({
-      label: smartLabel,
-      metric: "influence",
-      score: 1,
-      reason: `Global Sync Event: An external trigger is updating ${data.targets.length} roots simultaneously. Occurred ${data.count} times.`,
-      violations: data.targets.map((t) => ({
-        type: "causal_leak",
-        target: t
-      }))
-    });
-  });
-  drivers.slice(0, 3 - results.length).forEach(([label, targets]) => {
-    const targetNames = Array.from(targets.keys());
-    if (isEffect(label)) {
-      results.push({
-        label,
-        metric: "influence",
-        score: influence.get(label) || 0,
-        reason: `Side-Effect Driver: Hook writes to state during render.`,
-        violations: targetNames.map((t) => ({ type: "causal_leak", target: t }))
-      });
-      return;
-    }
-    results.push({
-      label,
-      metric: "influence",
-      score: influence.get(label) || targets.size,
-      reason: `Sync Driver: Acts as a "Prime Mover" for ${targets.size} downstream signals.`,
-      violations: targetNames.map((t) => ({ type: "causal_leak", target: t }))
-    });
-  });
-  if (results.length === 0) {
-    const sortedDensity = Array.from(history2.entries()).filter(
-      ([label, meta]) => meta.role === "local" /* LOCAL */ && !redundantLabels2.has(label) && meta.density > 25
-    ).sort((a, b) => b[1].density - a[1].density);
-    sortedDensity.slice(0, 3).forEach(([label, meta]) => {
-      results.push({
-        label,
-        metric: "density",
-        score: meta.density,
-        reason: `High Frequency: potential main-thread saturation.`,
-        violations: []
-      });
-    });
-  }
-  return results;
-};
-
-// src/core/logger.ts
-var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined";
-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;"
-};
-var parseLabel2 = (label) => {
-  const parts = label.split(" -> ");
-  return { file: parts[0] || "Unknown", name: parts[1] || label };
-};
-var shouldLog = (key) => {
-  const now = Date.now();
-  const last = LAST_LOG_TIMES.get(key) || 0;
-  if (now - last > LOG_COOLDOWN) {
-    LAST_LOG_TIMES.set(key, now);
-    return true;
-  }
-  return false;
-};
-var isBooleanLike = (name) => /^(is|has|can|should|did|will|show|hide)(?=[A-Z_])/.test(name);
-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.`;
-  }
-  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.`;
-  }
-  if (leaks.length > 0) {
-    const targetName = parseLabel2(leaks[0].target).name;
-    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 `State cascading detected. ${info.name} triggers ${targetName} in a separate frame. Merge them into one object to update simultaneously.`;
-  }
-  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 `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.`;
-  }
-  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 `Check the dependency chain of ${info.name}.`;
-};
-var displayHealthReport = (history2, threshold, 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);
-  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;`
-    );
-    topIssues.forEach((issue, idx) => {
-      const info = parseLabel2(issue.label);
-      const icon = issue.metric === "influence" ? "\u26A1" : "\u{1F4C8}";
-      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})`,
-        `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;`
-      );
-      console.log(`%c${issue.reason}`, `color: ${THEME.muted}; font-style: italic;`);
-      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 } = parseLabel2(v.target);
-          if (!byFile.has(file)) byFile.set(file, []);
-          byFile.get(file).push(name);
-        });
-        const impactParts = [];
-        byFile.forEach((vars, file) => {
-          const varList = vars.join(", ");
-          impactParts.push(`${file} (${varList})`);
-        });
-        if (impactParts.length > 0) {
-          console.log(`%cImpacts: %c${impactParts.join(" + ")}`, 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]}`,
-          STYLES.actionLabel,
-          "",
-          STYLES.actionPill,
-          ""
-        );
-      } else {
-        console.log(
-          `%cSolution: %c${fix}`,
-          STYLES.actionLabel,
-          ""
-        );
-      }
-      console.groupEnd();
-    });
-    console.log("\n");
-  }
-  const clusters = [];
-  const processed = /* @__PURE__ */ new Set();
-  let independentCount = 0;
-  entries.forEach(([labelA, metaA]) => {
-    if (processed.has(labelA)) return;
-    const currentCluster = [labelA];
-    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 (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;`
-  );
-  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;`);
-    clusters.forEach((cluster, idx) => {
-      const clusterMetas = cluster.map((l) => ({
-        label: l,
-        meta: history2.get(l),
-        name: parseLabel2(l).name
-      }));
-      const hasCtx = clusterMetas.some((c) => c.meta.role === "context" /* CONTEXT */);
-      const names = clusterMetas.map((c) => `${c.meta.role === "context" /* CONTEXT */ ? "\u03A9 " : ""}${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;");
-      if (hasCtx) {
-        console.log(`%cDiagnosis: Context Mirroring. Local state is shadowing global context.`, `color: ${THEME.problem};`);
-        console.log(`%cSolution: Use context directly to avoid state drift.`, STYLES.actionLabel);
-      } else {
-        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, "");
-        } 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, "");
-        } 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.groupEnd();
-    });
-  } else {
-    console.log("%c\u2728 Your architecture is clean. No redundant state detected.", `color: ${THEME.success}; font-weight: bold;`);
-  }
-  console.groupEnd();
-};
-var displayRedundancyAlert = (labelA, metaA, labelB, metaB, sim) => {
-  if (!isWeb || !shouldLog(`redundant-${labelA}-${labelB}`)) return;
-  const infoA = parseLabel2(labelA);
-  const infoB = parseLabel2(labelB);
-  const isContextMirror = metaA.role === "local" /* LOCAL */ && metaB.role === "context" /* CONTEXT */ || metaB.role === "local" /* LOCAL */ && metaA.role === "context" /* CONTEXT */;
-  console.group(`%c \u264A BASIS | ${isContextMirror ? "CONTEXT MIRRORING" : "DUPLICATE STATE"} `, 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, "");
-  if (isContextMirror) {
-    console.log(
-      `%cFix:%c Local state is 'shadowing' Global Context. Delete the local state and consume the %cContext%c value directly.`,
-      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.groupEnd();
-};
-var displayCausalHint = (targetLabel, targetMeta, sourceLabel, sourceMeta) => {
-  if (!isWeb || !shouldLog(`causal-${sourceLabel}-${targetLabel}`)) return;
-  const target = parseLabel2(targetLabel);
-  const source = parseLabel2(sourceLabel);
-  const isCtx = sourceMeta.role === "context" /* CONTEXT */;
-  const isEffect = sourceLabel.includes("effect") || sourceLabel.includes("useLayoutEffect");
-  console.groupCollapsed(`%c \u26A1 BASIS | ${isCtx ? "CONTEXT SYNC LEAK" : "DOUBLE RENDER"} `, 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, "");
-  if (isEffect) {
-    console.log(
-      `%cFix:%c Derive %c${target.name}%c during the render phase (remove effect) or wrap in %cuseMemo%c.`,
-      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.`,
-      STYLES.bold,
-      "",
-      STYLES.label,
-      "",
-      STYLES.label,
-      ""
-    );
-  }
-  console.groupEnd();
-};
-var displayViolentBreaker = (label, count, threshold) => {
-  if (!isWeb) return;
-  const parts = label.split(" -> ");
-  console.group(`%c \u{1F6D1} BASIS CRITICAL | CIRCUIT BREAKER `, STYLES.headerProblem);
-  console.error(`INFINITE LOOP DETECTED
-Variable: ${parts[1] || label}
-Frequency: ${count} updates/sec`);
-  console.log(`%cACTION: Update BLOCKED to prevent browser freeze.`, `color: ${THEME.problem}; font-weight: bold;`);
-  console.groupEnd();
-};
-var displayBootLog = (windowSize) => {
-  if (!isWeb) return;
-  console.log(`%cBasis%cAuditor%c "Graph Era" (Window: ${windowSize})`, STYLES.basis, STYLES.version, `color: ${THEME.muted}; font-style: italic; margin-left: 8px;`);
-};
-
-// src/core/constants.ts
-var WINDOW_SIZE = 50;
-var SIMILARITY_THRESHOLD = 0.88;
-var LOOP_THRESHOLD = 150;
-var VOLATILITY_THRESHOLD = 25;
-
-// 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)) {
-      return true;
-    }
-  }
-  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(
-    entryA.meta.buffer,
-    entryA.meta.head,
-    entryB.meta.buffer,
-    entryB.meta.head,
-    -1
-  );
-  return { sync, bA, aB, max: Math.max(sync, bA, aB) };
-};
-var shouldSkipComparison = (entryA, entryB, dirtyLabels2) => {
-  if (entryA.label === entryB.label) return true;
-  if (dirtyLabels2.has(entryB.label) && entryA.label > entryB.label) return true;
-  return false;
-};
-var pushViolation = (map, source, detail) => {
-  if (!map.has(source)) {
-    map.set(source, []);
-  }
-  const list = map.get(source);
-  const exists = list.some(
-    (v) => v.type === detail.type && v.target === detail.target
-  );
-  if (!exists) {
-    list.push(detail);
-  }
-};
-var detectRedundancy = (entryA, entryB, similarities, redundantSet, violationMap) => {
-  const roleA = entryA.meta.role;
-  const roleB = entryB.meta.role;
-  if (roleA === "context" /* CONTEXT */ && roleB === "context" /* CONTEXT */) return;
-  if (entryA.meta.density < 2 || entryB.meta.density < 2) return;
-  if (roleA === "local" /* LOCAL */ && roleB === "context" /* CONTEXT */) {
-    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);
-  } else if (roleA === "context" /* CONTEXT */ && 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);
-  } 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);
-  }
-};
-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 });
-    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) {
-    addLeak(entryA.label, entryB.label);
-  } else if (similarities.aB === similarities.max) {
-    addLeak(entryB.label, entryA.label);
-  }
-};
-var detectSubspaceOverlap = (dirtyEntries, allEntries, redundantSet, dirtyLabels2, graph) => {
-  let compCount = 0;
-  const violationMap = /* @__PURE__ */ new Map();
-  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) {
-        detectRedundancy(entryA, entryB, similarities, redundantSet, violationMap);
-        detectCausalLeak(entryA, entryB, similarities, violationMap, graph);
-      }
-    }
-  }
-  return { compCount, violationMap };
-};
-
-// src/engine.ts
-var BASIS_INSTANCE_KEY = /* @__PURE__ */ Symbol.for("__basis_engine_instance__");
-var EVENT_TTL = 1e4;
-var NULL_SIGNAL = {
-  role: "proj" /* PROJECTION */,
-  buffer: new Uint8Array(0),
-  head: 0,
-  density: 0,
-  options: {}
-};
-var activeEventId = null;
-var activeEventTimer = null;
-var pruneGraph = () => {
-  const now = Date.now();
-  for (const source of instance.graph.keys()) {
-    if (source.startsWith("Event_Tick_")) {
-      const parts = source.split("_");
-      const timestamp = parseInt(parts[2], 10);
-      if (now - timestamp > EVENT_TTL) {
-        instance.graph.delete(source);
-      }
-    }
-  }
-};
-var getEventId = () => {
-  if (!activeEventId) {
-    activeEventId = `Event_Tick_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`;
-    if (activeEventTimer) clearTimeout(activeEventTimer);
-    activeEventTimer = setTimeout(() => {
-      activeEventId = null;
-    }, 0);
-  }
-  return activeEventId;
-};
-var getGlobalInstance = () => {
-  const root = globalThis;
-  if (!root[BASIS_INSTANCE_KEY]) {
-    root[BASIS_INSTANCE_KEY] = {
-      config: { debug: false },
-      history: /* @__PURE__ */ new Map(),
-      currentTickBatch: /* @__PURE__ */ new Set(),
-      redundantLabels: /* @__PURE__ */ new Set(),
-      booted: false,
-      tick: 0,
-      isBatching: false,
-      currentEffectSource: null,
-      lastStateUpdate: null,
-      pausedVariables: /* @__PURE__ */ new Set(),
-      graph: /* @__PURE__ */ new Map(),
-      violationMap: /* @__PURE__ */ new Map(),
-      metrics: {
-        lastAnalysisTimeMs: 0,
-        comparisonCount: 0,
-        lastAnalysisTimestamp: 0,
-        systemEntropy: 0
-      },
-      alertCount: 0,
-      loopCounters: /* @__PURE__ */ new Map(),
-      lastCleanup: Date.now()
-    };
-  }
-  return root[BASIS_INSTANCE_KEY];
-};
-var instance = getGlobalInstance();
-var config = instance.config;
-var history = instance.history;
-var redundantLabels = instance.redundantLabels;
-var currentTickBatch = instance.currentTickBatch;
-var currentTickRegistry = {};
-var dirtyLabels = /* @__PURE__ */ new Set();
-var calculateTickEntropy = (tickIdx) => {
-  let activeCount = 0;
-  const total = instance.history.size;
-  if (total === 0) return 1;
-  instance.history.forEach((meta) => {
-    if (meta.buffer[tickIdx] === 1) activeCount++;
-  });
-  return 1 - activeCount / total;
-};
-var recordEdge = (source, target) => {
-  if (!source || !target || source === target) return;
-  if (!instance.graph.has(source)) {
-    instance.graph.set(source, /* @__PURE__ */ new Map());
-  }
-  const targets = instance.graph.get(source);
-  targets.set(target, (targets.get(target) || 0) + 1);
-};
-var analyzeBasis = () => {
-  if (!instance.config.debug || dirtyLabels.size === 0) {
-    return;
-  }
-  const scheduler = globalThis.requestIdleCallback || ((cb) => setTimeout(cb, 1));
-  const snapshot = new Set(dirtyLabels);
-  dirtyLabels.clear();
-  scheduler(() => {
-    const analysisStart = performance.now();
-    const allEntries = [];
-    const dirtyEntries = [];
-    instance.history.forEach((meta, label) => {
-      if (meta.options.suppressAll || meta.density === 0) return;
-      const entry = {
-        label,
-        meta,
-        isVolatile: meta.density > VOLATILITY_THRESHOLD
-      };
-      allEntries.push(entry);
-      if (snapshot.has(label)) {
-        dirtyEntries.push(entry);
-      }
-    });
-    if (dirtyEntries.length === 0 || allEntries.length < 2) return;
-    const nextRedundant = /* @__PURE__ */ new Set();
-    instance.redundantLabels.forEach((l) => {
-      if (!snapshot.has(l)) {
-        nextRedundant.add(l);
-      }
-    });
-    const { compCount, violationMap } = detectSubspaceOverlap(
-      dirtyEntries,
-      allEntries,
-      nextRedundant,
-      snapshot,
-      instance.graph
-    );
-    instance.redundantLabels.clear();
-    nextRedundant.forEach((l) => {
-      instance.redundantLabels.add(l);
-    });
-    violationMap.forEach((newList, label) => {
-      const existing = instance.violationMap.get(label) || [];
-      newList.forEach((detail) => {
-        const alreadyExists = existing.some(
-          (v) => v.type === detail.type && v.target === detail.target
-        );
-        if (!alreadyExists) {
-          existing.push(detail);
-        }
-      });
-      instance.violationMap.set(label, existing);
-    });
-    if (instance.violationMap.size > 500) {
-      const keys = Array.from(instance.violationMap.keys()).slice(0, 200);
-      keys.forEach((k) => instance.violationMap.delete(k));
-    }
-    instance.metrics.lastAnalysisTimeMs = performance.now() - analysisStart;
-    instance.metrics.comparisonCount = compCount;
-    instance.metrics.lastAnalysisTimestamp = Date.now();
-  });
-};
-var processHeartbeat = () => {
-  instance.tick++;
-  instance.history.forEach((meta, label) => {
-    const oldValue = meta.buffer[meta.head];
-    const newValue = instance.currentTickBatch.has(label) ? 1 : 0;
-    meta.buffer[meta.head] = newValue;
-    if (oldValue !== newValue) {
-      meta.density += newValue - oldValue;
-    }
-    meta.head = (meta.head + 1) % WINDOW_SIZE;
-  });
-  const lastHead = instance.history.size > 0 ? instance.tick % WINDOW_SIZE : 0;
-  instance.metrics.systemEntropy = calculateTickEntropy(lastHead);
-  instance.currentTickBatch.clear();
-  currentTickRegistry = {};
-  instance.isBatching = false;
-  instance.lastStateUpdate = null;
-  if (dirtyLabels.size > 0) {
-    analyzeBasis();
-  }
-};
-var recordUpdate = (label) => {
-  if (!instance.config.debug) return true;
-  if (instance.pausedVariables.has(label)) return false;
-  const now = Date.now();
-  if (now - instance.lastCleanup > 1e3) {
-    instance.loopCounters.clear();
-    instance.lastCleanup = now;
-    pruneGraph();
-  }
-  const count = (instance.loopCounters.get(label) || 0) + 1;
-  instance.loopCounters.set(label, count);
-  if (count > LOOP_THRESHOLD) {
-    displayViolentBreaker(label, count, LOOP_THRESHOLD);
-    instance.pausedVariables.add(label);
-    return false;
-  }
-  const meta = instance.history.get(label);
-  let edgeSource = null;
-  if (instance.currentEffectSource) {
-    edgeSource = instance.currentEffectSource;
-  } else {
-    edgeSource = getEventId();
-  }
-  if (edgeSource && edgeSource !== label) {
-    recordEdge(edgeSource, label);
-    if (instance.currentEffectSource && instance.currentEffectSource !== label) {
-      const sourceMeta = instance.history.get(instance.currentEffectSource) || NULL_SIGNAL;
-      if (meta && sourceMeta && meta.density < VOLATILITY_THRESHOLD && sourceMeta.density < VOLATILITY_THRESHOLD) {
-        displayCausalHint(label, meta, instance.currentEffectSource, sourceMeta);
-      }
-    }
-  }
-  if (meta && meta.role === "local" /* LOCAL */ && !instance.currentEffectSource) {
-    instance.lastStateUpdate = label;
-  }
-  if (currentTickRegistry[label]) return true;
-  currentTickRegistry[label] = true;
-  instance.currentTickBatch.add(label);
-  dirtyLabels.add(label);
-  if (!instance.isBatching) {
-    instance.isBatching = true;
-    requestAnimationFrame(processHeartbeat);
-  }
-  return true;
-};
-var configureBasis = (c) => {
-  Object.assign(instance.config, c);
-  if (instance.config.debug && !instance.booted) {
-    displayBootLog(WINDOW_SIZE);
-    instance.booted = true;
-  }
-};
-var registerVariable = (l, o = {}) => {
-  if (!instance.config.debug || o.suppressAll) return;
-  if (!instance.history.has(l)) {
-    instance.history.set(l, {
-      buffer: new Uint8Array(WINDOW_SIZE),
-      head: 0,
-      density: 0,
-      options: o,
-      role: o.role || "local" /* LOCAL */
-    });
-  }
-};
-var unregisterVariable = (l) => {
-  instance.history.delete(l);
-  instance.loopCounters.delete(l);
-  instance.pausedVariables.delete(l);
-  instance.redundantLabels.delete(l);
-};
-var beginEffectTracking = (l) => {
-  if (instance.config.debug) instance.currentEffectSource = l;
-};
-var endEffectTracking = () => {
-  instance.currentEffectSource = null;
-};
-var printBasisHealthReport = (threshold = 0.5) => {
-  if (!instance.config.debug) return;
-  displayHealthReport(instance.history, threshold, instance.violationMap);
-};
-var getBasisMetrics = () => ({
-  engine: "v0.6.x",
-  hooks: instance.history.size,
-  analysis_ms: instance.metrics.lastAnalysisTimeMs.toFixed(3),
-  entropy: instance.metrics.systemEntropy.toFixed(3)
-});
-if (typeof window !== "undefined") {
-  window.printBasisReport = printBasisHealthReport;
-  window.getBasisMetrics = getBasisMetrics;
-}
-
-// src/hooks.ts
 var anonCount = 0;
 var getFallbackLabel = (type) => `anon_${type}_${anonCount++}`;
+var reactUseId = React.useId;
+var legacyInstanceCounter = 0;
+var useInstanceId = () => {
+  const [legacyId] = reactUseState(
+    () => typeof reactUseId === "function" ? "" : `legacy_${legacyInstanceCounter++}`
+  );
+  return typeof reactUseId === "function" ? reactUseId() : legacyId;
+};
+var withInstance = (label, instanceId) => `${label}${INSTANCE_SEP}${instanceId}`;
 var React19 = React;
 function useState(initialState, label) {
   const [val, setVal] = reactUseState(initialState);
   const effectiveLabel = reactUseRef(label || getFallbackLabel("state")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   reactUseEffect(() => {
-    registerVariable(effectiveLabel, { role: "local" /* LOCAL */ });
+    registerVariable(storageKey, { role: "local" /* LOCAL */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   const setter = reactUseCallback((value) => {
-    if (recordUpdate(effectiveLabel)) {
+    if (recordUpdate(storageKey)) {
       setVal(value);
     }
-  }, [effectiveLabel]);
+  }, [storageKey]);
   return [val, setter];
 }
 function useReducer(reducer, initialArg, init, label) {
   const isLazy = typeof init === "function";
   const providedLabel = label || (typeof init === "string" ? init : void 0);
   const effectiveLabel = reactUseRef(providedLabel || getFallbackLabel("reducer")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   const [state, dispatch] = isLazy ? reactUseReducer(reducer, initialArg, init) : reactUseReducer(reducer, initialArg);
   reactUseEffect(() => {
-    registerVariable(effectiveLabel, { role: "local" /* LOCAL */ });
+    registerVariable(storageKey, { role: "local" /* LOCAL */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   const basisDispatch = reactUseCallback((action) => {
-    if (recordUpdate(effectiveLabel)) {
+    if (recordUpdate(storageKey)) {
       dispatch(action);
     }
-  }, [effectiveLabel, dispatch]);
+  }, [storageKey, dispatch]);
   return [state, basisDispatch];
 }
 function createContext(defaultValue, label) {
@@ -926,28 +106,34 @@ function useContext(context) {
 }
 function useMemo(factory, deps, label) {
   const effectiveLabel = reactUseRef(label || getFallbackLabel("proj")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   reactUseEffect(() => {
-    registerVariable(effectiveLabel, { role: "proj" /* PROJECTION */ });
+    registerVariable(storageKey, { role: "proj" /* PROJECTION */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   return reactUseMemo(factory, deps || []);
 }
 function useCallback(callback, deps, label) {
   const effectiveLabel = reactUseRef(label || getFallbackLabel("cb")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   reactUseEffect(() => {
-    registerVariable(effectiveLabel, { role: "proj" /* PROJECTION */ });
+    registerVariable(storageKey, { role: "proj" /* PROJECTION */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   return reactUseCallback(callback, deps);
 }
 function useEffect(effect, deps, label) {
   const effectiveLabel = label || "anonymous_effect";
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   reactUseEffect(() => {
-    beginEffectTracking(effectiveLabel);
+    beginEffectTracking(storageKey);
     const destructor = effect();
     endEffectTracking();
     return typeof destructor === "function" ? destructor : void 0;
@@ -955,8 +141,10 @@ function useEffect(effect, deps, label) {
 }
 function useLayoutEffect(effect, deps, label) {
   const effectiveLabel = label || "anonymous_layout_effect";
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   reactUseLayoutEffect(() => {
-    beginEffectTracking(effectiveLabel);
+    beginEffectTracking(storageKey);
     const destructor = effect();
     endEffectTracking();
     return typeof destructor === "function" ? destructor : void 0;
@@ -964,36 +152,40 @@ function useLayoutEffect(effect, deps, label) {
 }
 function useOptimistic(passthrough, reducer, label) {
   const effectiveLabel = reactUseRef(label || getFallbackLabel("optimistic")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   reactUseEffect(() => {
-    registerVariable(effectiveLabel, { role: "local" /* LOCAL */ });
+    registerVariable(storageKey, { role: "local" /* LOCAL */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   const [state, reactAddOptimistic] = React19.useOptimistic(passthrough, reducer);
   const addOptimistic = reactUseCallback((payload) => {
-    if (recordUpdate(effectiveLabel)) {
+    if (recordUpdate(storageKey)) {
       reactAddOptimistic(payload);
     }
-  }, [effectiveLabel, reactAddOptimistic]);
+  }, [storageKey, reactAddOptimistic]);
   return [state, addOptimistic];
 }
 function useActionState(action, initialState, permalink, label) {
   const isLabelArg = typeof permalink === "string" && label === void 0;
   const effectiveLabel = reactUseRef(isLabelArg ? permalink : label || getFallbackLabel("action_state")).current;
   const actualPermalink = isLabelArg ? void 0 : permalink;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   const [state, reactDispatch, isPending] = React19.useActionState(action, initialState, actualPermalink);
   reactUseEffect(() => {
-    registerVariable(effectiveLabel, { role: "local" /* LOCAL */ });
+    registerVariable(storageKey, { role: "local" /* LOCAL */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   const basisDispatch = reactUseCallback((payload) => {
-    if (recordUpdate(effectiveLabel)) {
+    if (recordUpdate(storageKey)) {
       reactDispatch(payload);
     }
-  }, [effectiveLabel, reactDispatch]);
+  }, [storageKey, reactDispatch]);
   return [state, basisDispatch, isPending];
 }
 var useRef = reactUseRef;
@@ -1069,7 +261,14 @@ var BasisHUD = () => {
       if (!canvas) return;
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
-      const entries = Array.from(history.entries());
+      const entries = Array.from(history.entries()).sort((a, b) => {
+        const roleOrder = (role) => {
+          if (role === "context") return 0;
+          if (role === "store") return 1;
+          return 2;
+        };
+        return roleOrder(a[1].role) - roleOrder(b[1].role);
+      });
       const dpr = window.devicePixelRatio || 1;
       const rawWidth = HUD_DIMENSIONS.WINDOW_SIZE * HUD_DIMENSIONS.COL_WIDTH + HUD_DIMENSIONS.LABEL_WIDTH + HUD_DIMENSIONS.PADDING * 2;
       const rawHeight = Math.max(entries.length * HUD_DIMENSIONS.ROW_HEIGHT + HUD_DIMENSIONS.PADDING * 2, 80);
@@ -1125,7 +324,7 @@ function renderMatrix(ctx, entries) {
   let rowIndex = 0;
   for (const [label, meta] of entries) {
     const y = rowIndex * rowH + pad;
-    const isContext = meta.role === "context";
+    const isContext = meta.role === "context" || meta.role === "store";
     const isRedundant = !isContext && redundantLabels.has(label);
     const { buffer, head } = meta;
     let uiPos = 0;
@@ -1141,10 +340,11 @@ function renderMatrix(ctx, entries) {
     };
     for (let i = head; i < L; i++) addToPath(buffer[i], uiPos++);
     for (let i = 0; i < head; i++) addToPath(buffer[i], uiPos++);
-    const stateName = label.split(" -> ")[1] || label;
+    const stateName = parseLabel(label).name;
     const textX = L * colW + pad + 10;
     ctx.fillStyle = isContext ? HUD_THEME.header : isRedundant ? HUD_THEME.error : HUD_THEME.text;
-    ctx.fillText((isContext ? "\u03A9 " : isRedundant ? "! " : "") + stateName, textX, y + 9);
+    const prefix = meta.role === "store" ? "\u03A3 " : isContext ? "\u03A9 " : isRedundant ? "! " : "";
+    ctx.fillText(prefix + stateName, textX, y + 9);
     rowIndex++;
   }
   ctx.fillStyle = HUD_THEME.grid;
@@ -1173,7 +373,7 @@ var HUDHeader = ({ isExpanded }) => /* @__PURE__ */ jsxs(
     },
     children: [
       /* @__PURE__ */ jsx("span", { children: isExpanded ? "STATE BASIS MATRIX" : "\u{1F4D0} BASIS ACTIVE" }),
-      isExpanded && /* @__PURE__ */ jsx("span", { style: { opacity: 0.8, fontSize: "9px" }, children: "v0.5.x" })
+      isExpanded && /* @__PURE__ */ jsx("span", { style: { opacity: 0.8, fontSize: "9px" }, children: "v0.6.x" })
     ]
   }
 );
@@ -1181,7 +381,7 @@ var HUDHeader = ({ isExpanded }) => /* @__PURE__ */ jsxs(
 // src/context.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var BasisContext = createContext2({ debug: false });
-var isWeb2 = typeof window !== "undefined" && typeof window.document !== "undefined";
+var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined";
 var BasisProvider = ({
   children,
   debug = true,
@@ -1189,13 +389,13 @@ var BasisProvider = ({
 }) => {
   useLayoutEffect2(() => {
     configureBasis({ debug });
-    if (isWeb2) {
+    if (isWeb) {
       window._basis_debug = debug;
     }
   }, [debug]);
   return /* @__PURE__ */ jsxs2(BasisContext.Provider, { value: { debug }, children: [
     children,
-    debug && showHUD && isWeb2 && /* @__PURE__ */ jsx2(BasisHUD, {})
+    debug && showHUD && isWeb && /* @__PURE__ */ jsx2(BasisHUD, {})
   ] });
 };
 var useBasisConfig = () => useContext2(BasisContext);