react-state-basis 0.6.1 → 0.6.2

package/dist/index.js

@@ -126,11 +126,26 @@ var calculateSpectralInfluence = (graph, maxIterations = 20, tolerance = 1e-3) =
   return scores;
 };
 
-// src/core/ranker.ts
+// 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);
+  return idx === -1 ? label : label.slice(0, idx);
+};
 var parseLabel = (label) => {
-  const parts = label.split(" -> ");
-  return { file: parts[0] || "Unknown", name: parts[1] || label };
+  const base = stripInstance(label);
+  const parts = base.split(" -> ");
+  return { file: parts[0] || "Unknown", name: parts[1] || base };
 };
+var isSameField = (labelA, labelB) => stripInstance(labelA) === stripInstance(labelB);
+
+// src/core/ranker.ts
 var identifyTopIssues = (graph, history2, redundantLabels2, violationMap) => {
   const results = [];
   const influence = calculateSpectralInfluence(graph);
@@ -260,10 +275,6 @@ var STYLES = {
   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;
@@ -286,7 +297,7 @@ var getSuggestedFix = (issue, info) => {
     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;
+    const targetName = parseLabel(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.`;
     }
@@ -316,7 +327,7 @@ var displayHealthReport = (history2, threshold, violationMap) => {
       `font-weight: normal; color: ${THEME.muted}; font-style: italic;`
     );
     topIssues.forEach((issue, idx) => {
-      const info = parseLabel2(issue.label);
+      const info = parseLabel(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;
@@ -336,7 +347,7 @@ var displayHealthReport = (history2, threshold, violationMap) => {
         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);
+          const { file, name } = parseLabel(v.target);
           if (!byFile.has(file)) byFile.set(file, []);
           byFile.get(file).push(name);
         });
@@ -411,7 +422,7 @@ var displayHealthReport = (history2, threshold, violationMap) => {
       const clusterMetas = cluster.map((l) => ({
         label: l,
         meta: history2.get(l),
-        name: parseLabel2(l).name
+        name: parseLabel(l).name
       }));
       const hasCtx = clusterMetas.some(
         (c) => c.meta.role === "context" /* CONTEXT */ || c.meta.role === "store" /* STORE */
@@ -452,8 +463,8 @@ var displayHealthReport = (history2, threshold, violationMap) => {
 };
 var displayRedundancyAlert = (labelA, metaA, labelB, metaB, sim) => {
   if (!isWeb || !shouldLog(`redundant-${labelA}-${labelB}`)) return;
-  const infoA = parseLabel2(labelA);
-  const infoB = parseLabel2(labelB);
+  const infoA = parseLabel(labelA);
+  const infoB = parseLabel(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";
@@ -498,8 +509,8 @@ var displayRedundancyAlert = (labelA, metaA, labelB, metaB, sim) => {
 };
 var displayCausalHint = (targetLabel, targetMeta, sourceLabel, sourceMeta) => {
   if (!isWeb || !shouldLog(`causal-${sourceLabel}-${targetLabel}`)) return;
-  const target = parseLabel2(targetLabel);
-  const source = parseLabel2(sourceLabel);
+  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 isEffect = sourceLabel.includes("effect") || sourceLabel.includes("useLayoutEffect");
   console.groupCollapsed(`%c \u26A1 BASIS | ${headerType} `, STYLES.headerProblem);
@@ -530,10 +541,10 @@ var displayCausalHint = (targetLabel, targetMeta, sourceLabel, sourceMeta) => {
 };
 var displayViolentBreaker = (label, count, threshold) => {
   if (!isWeb) return;
-  const parts = label.split(" -> ");
+  const { name } = parseLabel(label);
   console.group(`%c \u{1F6D1} BASIS CRITICAL | CIRCUIT BREAKER `, STYLES.headerProblem);
   console.error(`INFINITE LOOP DETECTED
-Variable: ${parts[1] || label}
+Variable: ${name}
 Frequency: ${count} updates/sec`);
   console.log(`%cACTION: Update BLOCKED to prevent browser freeze.`, `color: ${THEME.problem}; font-weight: bold;`);
   console.groupEnd();
@@ -543,12 +554,6 @@ var displayBootLog = (windowSize) => {
   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) => {
@@ -585,6 +590,7 @@ var calculateAllSimilarities = (entryA, entryB) => {
 };
 var shouldSkipComparison = (entryA, entryB, dirtyLabels2) => {
   if (entryA.label === entryB.label) return true;
+  if (isSameField(entryA.label, entryB.label)) return true;
   if (dirtyLabels2.has(entryB.label) && entryA.label > entryB.label) return true;
   return false;
 };
@@ -920,39 +926,52 @@ if (typeof window !== "undefined") {
 // src/hooks.ts
 var anonCount = 0;
 var getFallbackLabel = (type) => `anon_${type}_${anonCount++}`;
+var reactUseId = React.useId;
+var legacyInstanceCounter = 0;
+var useInstanceId = () => {
+  const [legacyId] = (0, import_react.useState)(
+    () => 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] = (0, import_react.useState)(initialState);
   const effectiveLabel = (0, import_react.useRef)(label || getFallbackLabel("state")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   (0, import_react.useEffect)(() => {
-    registerVariable(effectiveLabel, { role: "local" /* LOCAL */ });
+    registerVariable(storageKey, { role: "local" /* LOCAL */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   const setter = (0, import_react.useCallback)((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 = (0, import_react.useRef)(providedLabel || getFallbackLabel("reducer")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   const [state, dispatch] = isLazy ? (0, import_react.useReducer)(reducer, initialArg, init) : (0, import_react.useReducer)(reducer, initialArg);
   (0, import_react.useEffect)(() => {
-    registerVariable(effectiveLabel, { role: "local" /* LOCAL */ });
+    registerVariable(storageKey, { role: "local" /* LOCAL */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   const basisDispatch = (0, import_react.useCallback)((action) => {
-    if (recordUpdate(effectiveLabel)) {
+    if (recordUpdate(storageKey)) {
       dispatch(action);
     }
-  }, [effectiveLabel, dispatch]);
+  }, [storageKey, dispatch]);
   return [state, basisDispatch];
 }
 function createContext(defaultValue, label) {
@@ -978,28 +997,34 @@ function useContext(context) {
 }
 function useMemo(factory, deps, label) {
   const effectiveLabel = (0, import_react.useRef)(label || getFallbackLabel("proj")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   (0, import_react.useEffect)(() => {
-    registerVariable(effectiveLabel, { role: "proj" /* PROJECTION */ });
+    registerVariable(storageKey, { role: "proj" /* PROJECTION */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   return (0, import_react.useMemo)(factory, deps || []);
 }
 function useCallback(callback, deps, label) {
   const effectiveLabel = (0, import_react.useRef)(label || getFallbackLabel("cb")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   (0, import_react.useEffect)(() => {
-    registerVariable(effectiveLabel, { role: "proj" /* PROJECTION */ });
+    registerVariable(storageKey, { role: "proj" /* PROJECTION */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   return (0, import_react.useCallback)(callback, deps);
 }
 function useEffect(effect, deps, label) {
   const effectiveLabel = label || "anonymous_effect";
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   (0, import_react.useEffect)(() => {
-    beginEffectTracking(effectiveLabel);
+    beginEffectTracking(storageKey);
     const destructor = effect();
     endEffectTracking();
     return typeof destructor === "function" ? destructor : void 0;
@@ -1007,8 +1032,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);
   (0, import_react.useLayoutEffect)(() => {
-    beginEffectTracking(effectiveLabel);
+    beginEffectTracking(storageKey);
     const destructor = effect();
     endEffectTracking();
     return typeof destructor === "function" ? destructor : void 0;
@@ -1016,36 +1043,40 @@ function useLayoutEffect(effect, deps, label) {
 }
 function useOptimistic(passthrough, reducer, label) {
   const effectiveLabel = (0, import_react.useRef)(label || getFallbackLabel("optimistic")).current;
+  const instanceId = useInstanceId();
+  const storageKey = withInstance(effectiveLabel, instanceId);
   (0, import_react.useEffect)(() => {
-    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 = (0, import_react.useCallback)((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 = (0, import_react.useRef)(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);
   (0, import_react.useEffect)(() => {
-    registerVariable(effectiveLabel, { role: "local" /* LOCAL */ });
+    registerVariable(storageKey, { role: "local" /* LOCAL */ });
     return () => {
-      unregisterVariable(effectiveLabel);
+      unregisterVariable(storageKey);
     };
-  }, [effectiveLabel]);
+  }, [storageKey]);
   const basisDispatch = (0, import_react.useCallback)((payload) => {
-    if (recordUpdate(effectiveLabel)) {
+    if (recordUpdate(storageKey)) {
       reactDispatch(payload);
     }
-  }, [effectiveLabel, reactDispatch]);
+  }, [storageKey, reactDispatch]);
   return [state, basisDispatch, isPending];
 }
 var useRef = import_react.useRef;
@@ -1200,7 +1231,7 @@ 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;
     const prefix = meta.role === "store" ? "\u03A3 " : isContext ? "\u03A9 " : isRedundant ? "! " : "";