react-state-basis 0.2.2 → 0.2.4

package/dist/index.mjs

@@ -1,3 +1,7 @@
+// src/index.ts
+import * as ReactNamespace from "react";
+import * as ReactDOMNamespace from "react-dom";
+
 // src/core/logger.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined";
 var STYLES = {
@@ -39,7 +43,7 @@ var logBasis = (message, ...styles) => {
 };
 var displayBootLog = (windowSize) => {
   logBasis(
-    `%cBasis%cAuditor v0.1.4%c Monitoring State Space | Window: ${windowSize} ticks`,
+    `%cBasis%cAuditor%c Monitoring State Space | Window: ${windowSize} ticks`,
     STYLES.basis,
     STYLES.version,
     "color: #636e72; font-style: italic; margin-left: 8px;"
@@ -218,6 +222,7 @@ var LOOP_WINDOW_MS = 500;
 var ANALYSIS_INTERVAL = 5;
 
 // src/engine.ts
+var redundantLabels = /* @__PURE__ */ new Set();
 var config = {
   debug: false
 };
@@ -239,14 +244,18 @@ var analyzeBasis = () => {
   if (!config.debug) return;
   const entries = Array.from(history.entries());
   if (entries.length < 2) return;
+  const newRedundant = /* @__PURE__ */ new Set();
   entries.forEach(([labelA, vecA], i) => {
     entries.slice(i + 1).forEach(([labelB, vecB]) => {
       const sim = calculateCosineSimilarity(vecA, vecB);
       if (sim > SIMILARITY_THRESHOLD) {
+        newRedundant.add(labelA);
+        newRedundant.add(labelB);
         displayRedundancyAlert(labelA, labelB, sim, history.size);
       }
     });
   });
+  redundantLabels = newRedundant;
 };
 var printBasisHealthReport = (threshold = 0.5) => {
   if (!config.debug) {
@@ -315,39 +324,208 @@ var __testEngine__ = {
   endEffectTracking
 };
 
+// src/context.tsx
+import { createContext, useContext, useLayoutEffect } from "react";
+
+// src/ui/BasisHUD.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/ui/config.ts
+var HUD_DIMENSIONS = {
+  WINDOW_SIZE,
+  ROW_HEIGHT: 16,
+  COL_WIDTH: 5,
+  LABEL_WIDTH: 100,
+  PADDING: 10,
+  RADIUS: 1.5
+};
+var HUD_THEME = {
+  bg: "rgba(15, 23, 42, 0.95)",
+  border: "#334155",
+  header: "#8b5cf6",
+  text: "#f1f5f9",
+  textDim: "#94a3b8",
+  success: "#10b981",
+  error: "#ef4444",
+  grid: "#1e293b"
+};
+var getHUDContainerStyle = (isExpanded) => ({
+  position: "fixed",
+  bottom: "20px",
+  right: "20px",
+  backgroundColor: HUD_THEME.bg,
+  border: `1px solid ${HUD_THEME.border}`,
+  borderRadius: "12px",
+  backdropFilter: "blur(8px)",
+  boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
+  zIndex: 999999,
+  overflow: "hidden",
+  width: isExpanded ? "380px" : "130px",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  cursor: "pointer",
+  userSelect: "none",
+  WebkitUserSelect: "none"
+});
+
+// src/ui/BasisHUD.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var BasisHUD = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    if (!isExpanded) return;
+    let animationFrame;
+    const draw = () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const entries = Array.from(history.entries());
+      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, 60);
+      updateCanvasSize(canvas, rawWidth, rawHeight, dpr);
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, rawWidth, rawHeight);
+      if (entries.length === 0) {
+        renderEmptyState(ctx);
+      } else {
+        renderMatrix(ctx, entries);
+      }
+      ctx.restore();
+      animationFrame = requestAnimationFrame(draw);
+    };
+    draw();
+    return () => cancelAnimationFrame(animationFrame);
+  }, [isExpanded]);
+  return /* @__PURE__ */ jsxs("div", { style: getHUDContainerStyle(isExpanded), onClick: () => setIsExpanded(!isExpanded), children: [
+    /* @__PURE__ */ jsx(HUDHeader, { isExpanded }),
+    isExpanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 14px 15px 14px" }, children: [
+      /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { display: "block" } }),
+      /* @__PURE__ */ jsx(HUDFooter, {})
+    ] })
+  ] });
+};
+function updateCanvasSize(canvas, w, h, dpr) {
+  const targetW = Math.floor(w * dpr);
+  const targetH = Math.floor(h * dpr);
+  if (canvas.width !== targetW || canvas.height !== targetH) {
+    canvas.width = targetW;
+    canvas.height = targetH;
+    canvas.style.width = `${w}px`;
+    canvas.style.height = `${h}px`;
+  }
+}
+function renderEmptyState(ctx) {
+  ctx.fillStyle = HUD_THEME.textDim;
+  ctx.font = "11px Inter, sans-serif";
+  ctx.fillText("Waiting for state transitions...", HUD_DIMENSIONS.PADDING, 30);
+}
+function renderMatrix(ctx, entries) {
+  entries.forEach(([label, vector], rowIndex) => {
+    const y = rowIndex * HUD_DIMENSIONS.ROW_HEIGHT + HUD_DIMENSIONS.PADDING;
+    const stateName = label.split(" -> ")[1] || label;
+    const isRedundant = redundantLabels.has(label);
+    vector.forEach((bit, colIndex) => {
+      const x = colIndex * HUD_DIMENSIONS.COL_WIDTH + HUD_DIMENSIONS.PADDING;
+      ctx.fillStyle = bit === 1 ? isRedundant ? HUD_THEME.error : HUD_THEME.success : HUD_THEME.grid;
+      const w = HUD_DIMENSIONS.COL_WIDTH - 1.5;
+      const h = HUD_DIMENSIONS.ROW_HEIGHT - 4;
+      if (ctx.roundRect) {
+        ctx.beginPath();
+        ctx.roundRect(x, y, w, h, HUD_DIMENSIONS.RADIUS);
+        ctx.fill();
+      } else {
+        ctx.fillRect(x, y, w, h);
+      }
+    });
+    const textX = HUD_DIMENSIONS.WINDOW_SIZE * HUD_DIMENSIONS.COL_WIDTH + HUD_DIMENSIONS.PADDING + 10;
+    ctx.fillStyle = isRedundant ? HUD_THEME.error : HUD_THEME.text;
+    ctx.font = `${isRedundant ? "600" : "400"} 11px Inter, Menlo, monospace`;
+    const cleanName = isRedundant ? `! ${stateName}` : stateName;
+    const truncatedName = cleanName.length > 18 ? cleanName.substring(0, 16) + ".." : cleanName;
+    ctx.fillText(truncatedName, textX, y + 9);
+  });
+}
+var HUDHeader = ({ isExpanded }) => /* @__PURE__ */ jsxs("div", { style: {
+  padding: "10px 14px",
+  backgroundColor: isExpanded ? HUD_THEME.header : "transparent",
+  color: isExpanded ? "white" : HUD_THEME.header,
+  fontWeight: 600,
+  fontSize: "11px",
+  letterSpacing: "0.05em",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  transition: "background 0.3s"
+}, children: [
+  /* @__PURE__ */ jsx("span", { children: isExpanded ? "STATE BASIS MATRIX" : "\u{1F4D0} BASIS ACTIVE" }),
+  isExpanded && /* @__PURE__ */ jsx("span", { style: { opacity: 0.8, fontSize: "9px" }, children: "R50" })
+] });
+var HUDFooter = () => /* @__PURE__ */ jsxs("div", { style: {
+  marginTop: "12px",
+  paddingTop: "8px",
+  borderTop: `1px solid ${HUD_THEME.grid}`,
+  color: HUD_THEME.textDim,
+  fontSize: "9px",
+  display: "flex",
+  justifyContent: "space-between"
+}, children: [
+  /* @__PURE__ */ jsx("span", { children: "LINEAR DEPENDENCY AUDIT" }),
+  /* @__PURE__ */ jsx("span", { children: "THRESHOLD 0.88" })
+] });
+
+// src/context.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var BasisContext = createContext({ debug: false });
+var isWeb2 = typeof window !== "undefined" && typeof window.document !== "undefined";
+var BasisProvider = ({ children, debug = true }) => {
+  useLayoutEffect(() => {
+    configureBasis({ debug });
+    if (isWeb2) {
+      window._basis_debug = debug;
+    }
+  }, [debug]);
+  return /* @__PURE__ */ jsxs2(BasisContext.Provider, { value: { debug }, children: [
+    children,
+    debug && isWeb2 && /* @__PURE__ */ jsx2(BasisHUD, {})
+  ] });
+};
+var useBasisConfig = () => useContext(BasisContext);
+
 // src/hooks.ts
+import * as React3 from "react";
 import {
   useState as reactUseState,
   useEffect as reactUseEffect,
   useMemo as reactUseMemo,
   useReducer as reactUseReducer,
   useContext as reactUseContext,
+  useSyncExternalStore as reactUseSyncExternalStore,
   createContext as reactCreateContext,
   useRef as reactUseRef,
   useLayoutEffect as reactUseLayoutEffect,
   useCallback as reactUseCallback,
-  useId as reactUseId,
-  useDebugValue as reactUseDebugValue,
-  useImperativeHandle as reactUseImperativeHandle,
-  useInsertionEffect as reactUseInsertionEffect,
-  useSyncExternalStore as reactUseSyncExternalStore,
   useTransition as reactUseTransition,
-  useDeferredValue as reactUseDeferredValue
+  useDeferredValue as reactUseDeferredValue,
+  use as reactUse
 } from "react";
-function useState(initialValue, label) {
-  const [val, setVal] = reactUseState(initialValue);
+function useState2(initialState, label) {
+  const [val, setVal] = reactUseState(initialState);
   const effectiveLabel = label || "anonymous_state";
   reactUseEffect(() => {
     registerVariable(effectiveLabel);
     return () => unregisterVariable(effectiveLabel);
   }, [effectiveLabel]);
   const setter = reactUseCallback((newValue) => {
-    if (recordUpdate(effectiveLabel)) {
-      setVal(newValue);
-    }
-  }, [effectiveLabel]);
+    if (recordUpdate(effectiveLabel)) setVal(newValue);
+  }, [effectiveLabel, setVal]);
   return [val, setter];
 }
+function useRef2(initialValue, _label) {
+  return reactUseRef(initialValue);
+}
 function useReducer(reducer, initialArg, init, label) {
   const effectiveLabel = typeof init === "string" ? init : label || "anonymous_reducer";
   const reactInit = typeof init === "function" ? init : void 0;
@@ -357,69 +535,48 @@ function useReducer(reducer, initialArg, init, label) {
     return () => unregisterVariable(effectiveLabel);
   }, [effectiveLabel]);
   const basisDispatch = reactUseCallback((action) => {
-    if (recordUpdate(effectiveLabel)) {
-      dispatch(action);
-    }
-  }, [effectiveLabel]);
+    if (recordUpdate(effectiveLabel)) dispatch(action);
+  }, [effectiveLabel, dispatch]);
   return [state, basisDispatch];
 }
-function useMemo(factory, depsOrLabel, label) {
-  const isLabelAsSecondArg = typeof depsOrLabel === "string";
-  const actualDeps = isLabelAsSecondArg ? void 0 : depsOrLabel;
-  const effectiveLabel = isLabelAsSecondArg ? depsOrLabel : label || "anonymous_projection";
+function useMemo(factory, deps, label) {
+  const effectiveLabel = label || "anonymous_projection";
   reactUseEffect(() => {
-    if (config.debug) {
-      console.log(`%c [Basis] Valid Projection: "${effectiveLabel}" `, "color: #2ecc71; font-weight: bold;");
-    }
+    if (config.debug) console.log(`%c [Basis] Valid Projection: "${effectiveLabel}" `, "color: #2ecc71; font-weight: bold;");
   }, [effectiveLabel]);
-  return reactUseMemo(factory, actualDeps || []);
+  return reactUseMemo(factory, deps || []);
 }
-function useCallback(callback, depsOrLabel, label) {
-  const isLabelAsSecondArg = typeof depsOrLabel === "string";
-  const actualDeps = isLabelAsSecondArg ? void 0 : depsOrLabel;
-  const effectiveLabel = isLabelAsSecondArg ? depsOrLabel : label || "anonymous_callback";
+function useCallback(callback, deps, label) {
+  const effectiveLabel = label || "anonymous_callback";
   reactUseEffect(() => {
-    if (config.debug) {
-      console.log(`%c [Basis] Stable Callback: "${effectiveLabel}" `, "color: #2ecc71; font-weight: bold;");
-    }
+    if (config.debug) console.log(`%c [Basis] Stable Callback: "${effectiveLabel}" `, "color: #2ecc71; font-weight: bold;");
   }, [effectiveLabel]);
-  return reactUseCallback(callback, actualDeps || []);
+  return reactUseCallback(callback, deps);
 }
-function useEffect(effect, depsOrLabel, label) {
-  const isLabelAsSecondArg = typeof depsOrLabel === "string";
-  const actualDeps = isLabelAsSecondArg ? void 0 : depsOrLabel;
-  const effectiveLabel = isLabelAsSecondArg ? depsOrLabel : label || "anonymous_effect";
+function useEffect2(effect, deps, label) {
+  const effectiveLabel = label || "anonymous_effect";
   reactUseEffect(() => {
     beginEffectTracking(effectiveLabel);
     const cleanup = effect();
     endEffectTracking();
     return cleanup;
-  }, actualDeps);
+  }, deps);
 }
-function useLayoutEffect(effect, depsOrLabel, label) {
-  const isLabelAsSecondArg = typeof depsOrLabel === "string";
-  const actualDeps = isLabelAsSecondArg ? void 0 : depsOrLabel;
-  const effectiveLabel = isLabelAsSecondArg ? depsOrLabel : label || "anonymous_layout_effect";
+function useLayoutEffect2(effect, deps, label) {
+  const effectiveLabel = label || "anonymous_layout_effect";
   reactUseLayoutEffect(() => {
     beginEffectTracking(effectiveLabel);
     const cleanup = effect();
     endEffectTracking();
     return cleanup;
-  }, actualDeps);
-}
-function useInsertionEffect(effect, deps, _label) {
-  return reactUseInsertionEffect(effect, deps);
+  }, deps);
 }
 function useTransition(_label) {
-  const [isPending, startTransition] = reactUseTransition();
+  const [isPending, startTransition3] = reactUseTransition();
   const effectiveLabel = _label || "anonymous_transition";
   const basisStartTransition = (callback) => {
-    if (config.debug) {
-      console.log(`%c [Basis] Transition Started: "${effectiveLabel}" `, "color: #e67e22; font-weight: bold;");
-    }
-    startTransition(() => {
-      callback();
-    });
+    if (config.debug) console.log(`%c [Basis] Transition Started: "${effectiveLabel}" `, "color: #e67e22; font-weight: bold;");
+    startTransition3(callback);
   };
   return [isPending, basisStartTransition];
 }
@@ -429,108 +586,132 @@ function useDeferredValue(value, initialValueOrLabel, label) {
   const effectiveLabel = isLabelAsSecondArg ? initialValueOrLabel : label || "anonymous_deferred";
   const deferredValue = reactUseDeferredValue(value, actualInitialValue);
   reactUseEffect(() => {
-    if (config.debug && value !== deferredValue) {
-      console.log(`%c [Basis] Value Deferred: "${effectiveLabel}" `, "color: #e67e22; font-weight: bold;");
-    }
+    if (config.debug && value !== deferredValue) console.log(`%c [Basis] Value Deferred: "${effectiveLabel}" `, "color: #e67e22; font-weight: bold;");
   }, [value, deferredValue, effectiveLabel]);
   return deferredValue;
 }
-function useRef(initialValue, _label) {
-  return reactUseRef(initialValue);
-}
-function createContext(defaultValue, label) {
+function createContext2(defaultValue, label) {
   const context = reactCreateContext(defaultValue);
-  if (label) {
-    context._basis_label = label;
-  }
+  if (label) context._basis_label = label;
   return context;
 }
-function useContext(context) {
-  return reactUseContext(context);
-}
-function useId(_label) {
-  return reactUseId();
+var useContext2 = reactUseContext;
+var useId2 = (label) => React3.useId();
+var useDebugValue2 = React3.useDebugValue;
+var useImperativeHandle2 = React3.useImperativeHandle;
+var useInsertionEffect2 = React3.useInsertionEffect;
+var useSyncExternalStore = reactUseSyncExternalStore;
+function use(usable) {
+  return reactUse(usable);
 }
-function useDebugValue(value, formatter, _label) {
-  return reactUseDebugValue(value, formatter);
-}
-function useImperativeHandle(ref, init, deps, _label) {
-  return reactUseImperativeHandle(ref, init, deps);
+function useOptimistic2(passthrough, reducer, label) {
+  const effectiveLabel = label || "anonymous_optimistic";
+  reactUseEffect(() => {
+    registerVariable(effectiveLabel);
+    return () => unregisterVariable(effectiveLabel);
+  }, [effectiveLabel]);
+  const [state, reactAddOptimistic] = React3.useOptimistic(passthrough, reducer);
+  const addOptimistic = reactUseCallback((payload) => {
+    if (recordUpdate(effectiveLabel)) {
+      reactAddOptimistic(payload);
+    }
+  }, [effectiveLabel, reactAddOptimistic]);
+  return [state, addOptimistic];
 }
-function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot, _label) {
-  return reactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+function useActionState2(action, initialState, permalink, label) {
+  const isLabelAsThirdArg = typeof permalink === "string" && label === void 0;
+  const actualPermalink = isLabelAsThirdArg ? void 0 : permalink;
+  const effectiveLabel = isLabelAsThirdArg ? permalink : label || "anonymous_action_state";
+  const [state, reactDispatch, isPending] = React3.useActionState(
+    action,
+    initialState,
+    actualPermalink
+  );
+  reactUseEffect(() => {
+    registerVariable(effectiveLabel);
+    return () => unregisterVariable(effectiveLabel);
+  }, [effectiveLabel]);
+  const basisDispatch = reactUseCallback((payload) => {
+    if (recordUpdate(effectiveLabel)) {
+      reactDispatch(payload);
+    }
+  }, [effectiveLabel, reactDispatch]);
+  return [state, basisDispatch, isPending];
 }
-var __test__ = {
-  registerVariable,
-  unregisterVariable,
-  recordUpdate,
-  beginEffectTracking,
-  endEffectTracking,
-  history,
-  currentTickBatch
-};
+var __test__ = { registerVariable, unregisterVariable, recordUpdate, beginEffectTracking, endEffectTracking, history, currentTickBatch };
 
-// src/context.tsx
-import { createContext as createContext2, useContext as useContext2, useLayoutEffect as useLayoutEffect2 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var BasisContext = createContext2({ debug: false });
-var isWeb2 = typeof window !== "undefined" && typeof window.document !== "undefined";
-var BasisProvider = ({ children, debug = true }) => {
-  useLayoutEffect2(() => {
-    configureBasis({ debug });
-    if (isWeb2) {
-      window._basis_debug = debug;
-    }
-  }, [debug]);
-  return /* @__PURE__ */ jsxs(BasisContext.Provider, { value: { debug }, children: [
-    children,
-    debug && isWeb2 && /* @__PURE__ */ jsx("div", { style: {
-      position: "fixed",
-      bottom: 10,
-      right: 10,
-      background: "black",
-      color: "#0f0",
-      padding: "5px 10px",
-      fontSize: "10px",
-      fontFamily: "monospace",
-      border: "1px solid #0f0",
-      zIndex: 99999,
-      borderRadius: "4px",
-      pointerEvents: "none"
-    }, children: "BASIS_ENGINE: ACTIVE" })
-  ] });
-};
-var useBasisConfig = () => useContext2(BasisContext);
+// src/index.ts
+var Children2 = ReactNamespace.Children;
+var Component2 = ReactNamespace.Component;
+var Fragment2 = ReactNamespace.Fragment;
+var Profiler2 = ReactNamespace.Profiler;
+var PureComponent2 = ReactNamespace.PureComponent;
+var StrictMode2 = ReactNamespace.StrictMode;
+var Suspense2 = ReactNamespace.Suspense;
+var cloneElement2 = ReactNamespace.cloneElement;
+var createRef2 = ReactNamespace.createRef;
+var forwardRef2 = ReactNamespace.forwardRef;
+var isValidElement2 = ReactNamespace.isValidElement;
+var lazy2 = ReactNamespace.lazy;
+var memo2 = ReactNamespace.memo;
+var startTransition2 = ReactNamespace.startTransition;
+var version2 = ReactNamespace.version;
+var RD = ReactDOMNamespace;
+var createPortal = RD.createPortal;
+var flushSync = RD.flushSync;
+var index_default = ReactNamespace;
 export {
   BasisProvider,
+  Children2 as Children,
+  Component2 as Component,
+  Fragment2 as Fragment,
+  Profiler2 as Profiler,
+  PureComponent2 as PureComponent,
+  ReactNamespace as React,
+  StrictMode2 as StrictMode,
+  Suspense2 as Suspense,
   __testEngine__,
   __test__,
   beginEffectTracking,
+  cloneElement2 as cloneElement,
   config,
   configureBasis,
-  createContext,
+  createContext2 as createContext,
+  createPortal,
+  createRef2 as createRef,
   currentTickBatch,
+  index_default as default,
   endEffectTracking,
+  flushSync,
+  forwardRef2 as forwardRef,
   history,
+  isValidElement2 as isValidElement,
+  lazy2 as lazy,
+  memo2 as memo,
   printBasisHealthReport,
   recordUpdate,
   registerVariable,
+  startTransition2 as startTransition,
   unregisterVariable,
+  use,
+  useActionState2 as useActionState,
   useBasisConfig,
   useCallback,
-  useContext,
-  useDebugValue,
+  useContext2 as useContext,
+  useDebugValue2 as useDebugValue,
   useDeferredValue,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useInsertionEffect,
-  useLayoutEffect,
+  useEffect2 as useEffect,
+  useId2 as useId,
+  useImperativeHandle2 as useImperativeHandle,
+  useInsertionEffect2 as useInsertionEffect,
+  useLayoutEffect2 as useLayoutEffect,
   useMemo,
+  useOptimistic2 as useOptimistic,
   useReducer,
-  useRef,
-  useState,
+  useRef2 as useRef,
+  useState2 as useState,
   useSyncExternalStore,
-  useTransition
+  useTransition,
+  version2 as version
 };
 //# sourceMappingURL=index.mjs.map