@spur.us/monocle-react 1.1.1-canary.v20250521185758 → 1.1.1-canary.v20250707133917

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @spur.us/monocle-react@1.1.1-canary.v20250521185758 build /home/runner/work/javascript/javascript/packages/monocle-react
+> @spur.us/monocle-react@1.1.1-canary.v20250707133917 build /home/runner/work/javascript/javascript/packages/monocle-react
 > tsup
 
 CLI Building entry: {"index":"src/index.ts"}
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     5.15 KB
-CJS dist/index.js.map 7.72 KB
-CJS ⚡️ Build success in 40ms
-ESM dist/index.mjs     3.35 KB
-ESM dist/index.mjs.map 7.54 KB
-ESM ⚡️ Build success in 41ms
+CJS dist/index.js     6.08 KB
+CJS dist/index.js.map 10.07 KB
+CJS ⚡️ Build success in 43ms
+ESM dist/index.mjs     4.27 KB
+ESM dist/index.mjs.map 9.92 KB
+ESM ⚡️ Build success in 46ms
 DTS Build start
-DTS ⚡️ Build success in 2163ms
-DTS dist/index.d.ts  806.00 B
-DTS dist/index.d.mts 806.00 B
+DTS ⚡️ Build success in 2242ms
+DTS dist/index.d.ts  1.29 KB
+DTS dist/index.d.mts 1.29 KB

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import React$1 from 'react';
+import React from 'react';
 
 /**
  * Props for the MonocleProvider component.
@@ -19,7 +19,25 @@ interface MonocleContextType {
     isLoading: boolean;
     error: Error | null;
 }
-declare const MonocleProvider: React$1.ComponentType<MonocleProviderProps>;
+declare const MonocleProvider: React.ComponentType<MonocleProviderProps>;
+/**
+ * Hook to access the Monocle context.
+ *
+ * @returns {MonocleContextType} The Monocle context containing assessment data, loading state, and error information
+ * @throws {Error} When used outside of a MonocleProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { assessment, isLoading, error, refresh } = useMonocle();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *
+ *   return <div>Assessment: {assessment}</div>;
+ * }
+ * ```
+ */
 declare const useMonocle: () => MonocleContextType;
 
 export { MonocleProvider, type MonocleProviderProps, useMonocle };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React$1 from 'react';
+import React from 'react';
 
 /**
  * Props for the MonocleProvider component.
@@ -19,7 +19,25 @@ interface MonocleContextType {
     isLoading: boolean;
     error: Error | null;
 }
-declare const MonocleProvider: React$1.ComponentType<MonocleProviderProps>;
+declare const MonocleProvider: React.ComponentType<MonocleProviderProps>;
+/**
+ * Hook to access the Monocle context.
+ *
+ * @returns {MonocleContextType} The Monocle context containing assessment data, loading state, and error information
+ * @throws {Error} When used outside of a MonocleProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { assessment, isLoading, error, refresh } = useMonocle();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *
+ *   return <div>Assessment: {assessment}</div>;
+ * }
+ * ```
+ */
 declare const useMonocle: () => MonocleContextType;
 
 export { MonocleProvider, type MonocleProviderProps, useMonocle };

package/dist/index.js

@@ -50,7 +50,8 @@ function useMaxAllowedInstancesGuard(name, error, maxCount = 1) {
     }
     instanceCounter.set(name, count + 1);
     return () => {
-      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);
+      const currentCount = instanceCounter.get(name) || 0;
+      instanceCounter.set(name, Math.max(0, currentCount - 1));
     };
   }, []);
 }
@@ -104,14 +105,32 @@ var MonocleProviderComponent = ({
       document.head.appendChild(script);
     });
   };
-  const refresh = async () => {
+  const refresh = (0, import_react2.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
       await loadScript();
       if (window.MCL) {
-        const newAssessment = window.MCL.getAssessment();
-        setAssessment(newAssessment);
+        let timeoutId = null;
+        await window.MCL.configure({
+          onAssessment: (assessment2) => {
+            if (timeoutId) {
+              clearTimeout(timeoutId);
+            }
+            setAssessment(assessment2);
+            setIsLoading(false);
+          }
+        });
+        const existingAssessment = window.MCL.getAssessment();
+        if (existingAssessment) {
+          setAssessment(existingAssessment);
+          setIsLoading(false);
+        } else {
+          timeoutId = setTimeout(() => {
+            setError(new Error("Assessment timeout - MCL did not respond within 30 seconds"));
+            setIsLoading(false);
+          }, 3e4);
+        }
       } else {
         throw new Error("MCL object not found on window");
       }
@@ -119,16 +138,24 @@ var MonocleProviderComponent = ({
       setError(
         err instanceof Error ? err : new Error("Unknown error occurred")
       );
-    } finally {
       setIsLoading(false);
     }
-  };
+  }, [publishableKey, domain]);
   (0, import_react2.useEffect)(() => {
     if (!assessment) {
       refresh();
     }
-  }, [publishableKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MonocleContext.Provider, { value: { assessment, refresh, isLoading, error }, children });
+    return () => {
+      if (window.MCL) {
+        window.MCL.configure({ onAssessment: void 0 });
+      }
+    };
+  }, [publishableKey, domain, assessment, refresh]);
+  const contextValue = (0, import_react2.useMemo)(
+    () => ({ assessment, refresh, isLoading, error }),
+    [assessment, refresh, isLoading, error]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MonocleContext.Provider, { value: contextValue, children });
 };
 var MonocleProvider = withMaxAllowedInstancesGuard(
   MonocleProviderComponent,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/contexts/MonocleProvider.tsx","../src/utils/useMaxAllowedInstancesGuard.tsx","../src/constants.ts"],"sourcesContent":["export * from './contexts';\n\nexport type { MonocleProviderProps } from './types';\n","import React, { createContext, useContext, useEffect, useState } from 'react';\nimport { withMaxAllowedInstancesGuard } from '../utils';\nimport { MonocleProviderProps } from '../types';\nimport { DOMAIN } from '../constants';\ninterface MonocleContextType {\n  assessment: string | undefined;\n  refresh: () => void;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nconst MonocleContext = createContext<MonocleContextType | null>(null);\n\nconst MonocleProviderComponent: React.FC<MonocleProviderProps> = ({\n  children,\n  publishableKey,\n  domain = DOMAIN,\n}) => {\n  const [assessment, setAssessment] = useState<string | undefined>(undefined);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const loadScript = () => {\n    return new Promise<void>((resolve, reject) => {\n      const existingScript = document.getElementById('_mcl');\n      if (existingScript) {\n        // If script exists but hasn't loaded yet, wait for it\n        if (!window.MCL) {\n          existingScript.onload = () => resolve();\n          existingScript.onerror = () =>\n            reject(new Error('Failed to load Monocle script'));\n        } else {\n          resolve();\n        }\n        return;\n      }\n\n      const script = document.createElement('script');\n      script.id = '_mcl';\n      script.async = true;\n      script.src = `https://${domain}/d/mcl.js?tk=${publishableKey}`;\n      script.onload = () => {\n        resolve();\n      };\n      script.onerror = (_e) => {\n        console.error('MonocleProvider: Script failed to load');\n        reject(new Error('Failed to load Monocle script'));\n      };\n      document.head.appendChild(script);\n    });\n  };\n\n  const refresh = async () => {\n    try {\n      setIsLoading(true);\n      setError(null);\n      await loadScript();\n      if (window.MCL) {\n        const newAssessment = window.MCL.getAssessment();\n        setAssessment(newAssessment);\n      } else {\n        throw new Error('MCL object not found on window');\n      }\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Unknown error occurred')\n      );\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    // Only refresh if the publishableKey changes and we don't already have an assessment\n    if (!assessment) {\n      refresh();\n    }\n  }, [publishableKey]);\n\n  return (\n    <MonocleContext.Provider value={{ assessment, refresh, isLoading, error }}>\n      {children}\n    </MonocleContext.Provider>\n  );\n};\n\nexport const MonocleProvider = withMaxAllowedInstancesGuard(\n  MonocleProviderComponent,\n  'MonocleProvider',\n  'Only one instance of MonocleProvider is allowed'\n);\n\nexport const useMonocle = () => {\n  const context = useContext(MonocleContext);\n  if (!context) {\n    throw new Error('useMonocle must be used within a MonocleProvider');\n  }\n  return context;\n};\n","import React from 'react';\n\nconst instanceCounter = new Map<string, number>();\n\n/**\n * A React hook that ensures a component is not instantiated more than a specified number of times.\n * Throws an error if the maximum number of instances is exceeded.\n *\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @param maxCount - The maximum number of allowed instances (defaults to 1)\n * @throws Error when the maximum number of instances is exceeded\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   useMaxAllowedInstancesGuard('MyComponent', 'Only one instance of MyComponent is allowed');\n *   return <div>My Component</div>;\n * };\n * ```\n */\nexport function useMaxAllowedInstancesGuard(\n  name: string,\n  error: string,\n  maxCount = 1\n): void {\n  React.useEffect(() => {\n    const count = instanceCounter.get(name) || 0;\n    if (count === maxCount) {\n      throw new Error(error);\n    }\n    instanceCounter.set(name, count + 1);\n\n    return () => {\n      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);\n    };\n  }, []);\n}\n\n/**\n * A higher-order component that wraps a component with instance count protection.\n * This HOC ensures that the wrapped component cannot be instantiated more than once\n * (or a specified number of times) in the application.\n *\n * @param WrappedComponent - The component to wrap with instance count protection\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @returns A new component with instance count protection\n *\n * @example\n * ```tsx\n * const ProtectedComponent = withMaxAllowedInstancesGuard(\n *   MyComponent,\n *   'MyComponent',\n *   'Only one instance of MyComponent is allowed'\n * );\n * ```\n */\nexport function withMaxAllowedInstancesGuard<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  name: string,\n  error: string\n): React.ComponentType<P> {\n  const displayName =\n    WrappedComponent.displayName ||\n    WrappedComponent.name ||\n    name ||\n    'Component';\n\n  const Hoc: React.FC<P> = (props) => {\n    useMaxAllowedInstancesGuard(name, error);\n    return <WrappedComponent {...props} />;\n  };\n\n  Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;\n  return Hoc;\n}\n","export const DOMAIN = 'mcl.spur.us';\n"],"mappings":"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","names":["import_react","React","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/contexts/MonocleProvider.tsx","../src/utils/useMaxAllowedInstancesGuard.tsx","../src/constants.ts"],"sourcesContent":["export * from './contexts';\n\nexport type { MonocleProviderProps } from './types';\n","import React, {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  useMemo,\n  useCallback,\n} from 'react';\nimport { withMaxAllowedInstancesGuard } from '../utils';\nimport { MonocleProviderProps } from '../types';\nimport { DOMAIN } from '../constants';\ninterface MonocleContextType {\n  assessment: string | undefined;\n  refresh: () => void;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nconst MonocleContext = createContext<MonocleContextType | null>(null);\n\nconst MonocleProviderComponent: React.FC<MonocleProviderProps> = ({\n  children,\n  publishableKey,\n  domain = DOMAIN,\n}) => {\n  const [assessment, setAssessment] = useState<string | undefined>(undefined);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const loadScript = () => {\n    return new Promise<void>((resolve, reject) => {\n      const existingScript = document.getElementById('_mcl');\n      if (existingScript) {\n        // If script exists but hasn't loaded yet, wait for it\n        if (!window.MCL) {\n          existingScript.onload = () => resolve();\n          existingScript.onerror = () =>\n            reject(new Error('Failed to load Monocle script'));\n        } else {\n          resolve();\n        }\n        return;\n      }\n\n      const script = document.createElement('script');\n      script.id = '_mcl';\n      script.async = true;\n      script.src = `https://${domain}/d/mcl.js?tk=${publishableKey}`;\n      script.onload = () => {\n        resolve();\n      };\n      script.onerror = (_e) => {\n        console.error('MonocleProvider: Script failed to load');\n        reject(new Error('Failed to load Monocle script'));\n      };\n      document.head.appendChild(script);\n    });\n  };\n\n  const refresh = useCallback(async () => {\n    try {\n      setIsLoading(true);\n      setError(null);\n      await loadScript();\n      if (window.MCL) {\n        let timeoutId: NodeJS.Timeout | null = null;\n        \n        // Configure MCL with our callback to receive assessment updates\n        await window.MCL.configure({\n          onAssessment: (assessment: string) => {\n            if (timeoutId) {\n              clearTimeout(timeoutId);\n            }\n            setAssessment(assessment);\n            setIsLoading(false);\n          },\n        });\n\n        // Check if assessment is already available\n        const existingAssessment = window.MCL.getAssessment();\n        if (existingAssessment) {\n          setAssessment(existingAssessment);\n          setIsLoading(false);\n        } else {\n          // Set a timeout in case the assessment never comes\n          timeoutId = setTimeout(() => {\n            setError(new Error('Assessment timeout - MCL did not respond within 30 seconds'));\n            setIsLoading(false);\n          }, 30000);\n        }\n      } else {\n        throw new Error('MCL object not found on window');\n      }\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Unknown error occurred')\n      );\n      setIsLoading(false);\n    }\n  }, [publishableKey, domain]);\n\n  useEffect(() => {\n    // Only refresh if the publishableKey changes and we don't already have an assessment\n    if (!assessment) {\n      refresh();\n    }\n    \n    // Cleanup function to reset callback on unmount\n    return () => {\n      if (window.MCL) {\n        window.MCL.configure({ onAssessment: undefined });\n      }\n    };\n  }, [publishableKey, domain, assessment, refresh]);\n\n  const contextValue = useMemo(\n    () => ({ assessment, refresh, isLoading, error }),\n    [assessment, refresh, isLoading, error]\n  );\n\n  return (\n    <MonocleContext.Provider value={contextValue}>\n      {children}\n    </MonocleContext.Provider>\n  );\n};\n\nexport const MonocleProvider = withMaxAllowedInstancesGuard(\n  MonocleProviderComponent,\n  'MonocleProvider',\n  'Only one instance of MonocleProvider is allowed'\n);\n\n/**\n * Hook to access the Monocle context.\n *\n * @returns {MonocleContextType} The Monocle context containing assessment data, loading state, and error information\n * @throws {Error} When used outside of a MonocleProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { assessment, isLoading, error, refresh } = useMonocle();\n *\n *   if (isLoading) return <div>Loading...</div>;\n *   if (error) return <div>Error: {error.message}</div>;\n *\n *   return <div>Assessment: {assessment}</div>;\n * }\n * ```\n */\nexport const useMonocle = () => {\n  const context = useContext(MonocleContext);\n  if (!context) {\n    throw new Error('useMonocle must be used within a MonocleProvider');\n  }\n  return context;\n};\n","import React from 'react';\n\nconst instanceCounter = new Map<string, number>();\n\n/**\n * A React hook that ensures a component is not instantiated more than a specified number of times.\n * Throws an error if the maximum number of instances is exceeded.\n *\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @param maxCount - The maximum number of allowed instances (defaults to 1)\n * @throws Error when the maximum number of instances is exceeded\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   useMaxAllowedInstancesGuard('MyComponent', 'Only one instance of MyComponent is allowed');\n *   return <div>My Component</div>;\n * };\n * ```\n */\nexport function useMaxAllowedInstancesGuard(\n  name: string,\n  error: string,\n  maxCount = 1\n): void {\n  React.useEffect(() => {\n    const count = instanceCounter.get(name) || 0;\n    if (count === maxCount) {\n      throw new Error(error);\n    }\n    instanceCounter.set(name, count + 1);\n\n    return () => {\n      const currentCount = instanceCounter.get(name) || 0;\n      instanceCounter.set(name, Math.max(0, currentCount - 1));\n    };\n  }, []);\n}\n\n/**\n * A higher-order component that wraps a component with instance count protection.\n * This HOC ensures that the wrapped component cannot be instantiated more than once\n * (or a specified number of times) in the application.\n *\n * @param WrappedComponent - The component to wrap with instance count protection\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @returns A new component with instance count protection\n *\n * @example\n * ```tsx\n * const ProtectedComponent = withMaxAllowedInstancesGuard(\n *   MyComponent,\n *   'MyComponent',\n *   'Only one instance of MyComponent is allowed'\n * );\n * ```\n */\nexport function withMaxAllowedInstancesGuard<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  name: string,\n  error: string\n): React.ComponentType<P> {\n  const displayName =\n    WrappedComponent.displayName ||\n    WrappedComponent.name ||\n    name ||\n    'Component';\n\n  const Hoc: React.FC<P> = (props) => {\n    useMaxAllowedInstancesGuard(name, error);\n    return <WrappedComponent {...props} />;\n  };\n\n  Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;\n  return Hoc;\n}\n","export const DOMAIN = 'mcl.spur.us';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAOO;;;ACPP,mBAAkB;AAwEP;AAtEX,IAAM,kBAAkB,oBAAI,IAAoB;AAmBzC,SAAS,4BACd,MACA,OACA,WAAW,GACL;AACN,eAAAC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,gBAAgB,IAAI,IAAI,KAAK;AAC3C,QAAI,UAAU,UAAU;AACtB,YAAM,IAAI,MAAM,KAAK;AAAA,IACvB;AACA,oBAAgB,IAAI,MAAM,QAAQ,CAAC;AAEnC,WAAO,MAAM;AACX,YAAM,eAAe,gBAAgB,IAAI,IAAI,KAAK;AAClD,sBAAgB,IAAI,MAAM,KAAK,IAAI,GAAG,eAAe,CAAC,CAAC;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,CAAC;AACP;AAqBO,SAAS,6BACd,kBACA,MACA,OACwB;AACxB,QAAM,cACJ,iBAAiB,eACjB,iBAAiB,QACjB,QACA;AAEF,QAAM,MAAmB,CAAC,UAAU;AAClC,gCAA4B,MAAM,KAAK;AACvC,WAAO,4CAAC,oBAAkB,GAAG,OAAO;AAAA,EACtC;AAEA,MAAI,cAAc,gCAAgC,WAAW;AAC7D,SAAO;AACT;;;AC7EO,IAAM,SAAS;;;AFyHlB,IAAAC,sBAAA;AAvGJ,IAAM,qBAAiB,6BAAyC,IAAI;AAEpE,IAAM,2BAA2D,CAAC;AAAA,EAChE;AAAA,EACA;AAAA,EACA,SAAS;AACX,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,QAAI,wBAA6B,MAAS;AAC1E,QAAM,CAAC,WAAW,YAAY,QAAI,wBAAS,IAAI;AAC/C,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAuB,IAAI;AAErD,QAAM,aAAa,MAAM;AACvB,WAAO,IAAI,QAAc,CAAC,SAAS,WAAW;AAC5C,YAAM,iBAAiB,SAAS,eAAe,MAAM;AACrD,UAAI,gBAAgB;AAElB,YAAI,CAAC,OAAO,KAAK;AACf,yBAAe,SAAS,MAAM,QAAQ;AACtC,yBAAe,UAAU,MACvB,OAAO,IAAI,MAAM,+BAA+B,CAAC;AAAA,QACrD,OAAO;AACL,kBAAQ;AAAA,QACV;AACA;AAAA,MACF;AAEA,YAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,aAAO,KAAK;AACZ,aAAO,QAAQ;AACf,aAAO,MAAM,WAAW,MAAM,gBAAgB,cAAc;AAC5D,aAAO,SAAS,MAAM;AACpB,gBAAQ;AAAA,MACV;AACA,aAAO,UAAU,CAAC,OAAO;AACvB,gBAAQ,MAAM,wCAAwC;AACtD,eAAO,IAAI,MAAM,+BAA+B,CAAC;AAAA,MACnD;AACA,eAAS,KAAK,YAAY,MAAM;AAAA,IAClC,CAAC;AAAA,EACH;AAEA,QAAM,cAAU,2BAAY,YAAY;AACtC,QAAI;AACF,mBAAa,IAAI;AACjB,eAAS,IAAI;AACb,YAAM,WAAW;AACjB,UAAI,OAAO,KAAK;AACd,YAAI,YAAmC;AAGvC,cAAM,OAAO,IAAI,UAAU;AAAA,UACzB,cAAc,CAACC,gBAAuB;AACpC,gBAAI,WAAW;AACb,2BAAa,SAAS;AAAA,YACxB;AACA,0BAAcA,WAAU;AACxB,yBAAa,KAAK;AAAA,UACpB;AAAA,QACF,CAAC;AAGD,cAAM,qBAAqB,OAAO,IAAI,cAAc;AACpD,YAAI,oBAAoB;AACtB,wBAAc,kBAAkB;AAChC,uBAAa,KAAK;AAAA,QACpB,OAAO;AAEL,sBAAY,WAAW,MAAM;AAC3B,qBAAS,IAAI,MAAM,4DAA4D,CAAC;AAChF,yBAAa,KAAK;AAAA,UACpB,GAAG,GAAK;AAAA,QACV;AAAA,MACF,OAAO;AACL,cAAM,IAAI,MAAM,gCAAgC;AAAA,MAClD;AAAA,IACF,SAAS,KAAK;AACZ;AAAA,QACE,eAAe,QAAQ,MAAM,IAAI,MAAM,wBAAwB;AAAA,MACjE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,gBAAgB,MAAM,CAAC;AAE3B,+BAAU,MAAM;AAEd,QAAI,CAAC,YAAY;AACf,cAAQ;AAAA,IACV;AAGA,WAAO,MAAM;AACX,UAAI,OAAO,KAAK;AACd,eAAO,IAAI,UAAU,EAAE,cAAc,OAAU,CAAC;AAAA,MAClD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,YAAY,OAAO,CAAC;AAEhD,QAAM,mBAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS,WAAW,MAAM;AAAA,IAC/C,CAAC,YAAY,SAAS,WAAW,KAAK;AAAA,EACxC;AAEA,SACE,6CAAC,eAAe,UAAf,EAAwB,OAAO,cAC7B,UACH;AAEJ;AAEO,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF;AAoBO,IAAM,aAAa,MAAM;AAC9B,QAAM,cAAU,0BAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":["import_react","React","import_jsx_runtime","assessment"]}

package/dist/index.mjs

@@ -1,5 +1,12 @@
 // src/contexts/MonocleProvider.tsx
-import { createContext, useContext, useEffect, useState } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useMemo,
+  useCallback
+} from "react";
 
 // src/utils/useMaxAllowedInstancesGuard.tsx
 import React from "react";
@@ -13,7 +20,8 @@ function useMaxAllowedInstancesGuard(name, error, maxCount = 1) {
     }
     instanceCounter.set(name, count + 1);
     return () => {
-      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);
+      const currentCount = instanceCounter.get(name) || 0;
+      instanceCounter.set(name, Math.max(0, currentCount - 1));
     };
   }, []);
 }
@@ -67,14 +75,32 @@ var MonocleProviderComponent = ({
       document.head.appendChild(script);
     });
   };
-  const refresh = async () => {
+  const refresh = useCallback(async () => {
     try {
       setIsLoading(true);
       setError(null);
       await loadScript();
       if (window.MCL) {
-        const newAssessment = window.MCL.getAssessment();
-        setAssessment(newAssessment);
+        let timeoutId = null;
+        await window.MCL.configure({
+          onAssessment: (assessment2) => {
+            if (timeoutId) {
+              clearTimeout(timeoutId);
+            }
+            setAssessment(assessment2);
+            setIsLoading(false);
+          }
+        });
+        const existingAssessment = window.MCL.getAssessment();
+        if (existingAssessment) {
+          setAssessment(existingAssessment);
+          setIsLoading(false);
+        } else {
+          timeoutId = setTimeout(() => {
+            setError(new Error("Assessment timeout - MCL did not respond within 30 seconds"));
+            setIsLoading(false);
+          }, 3e4);
+        }
       } else {
         throw new Error("MCL object not found on window");
       }
@@ -82,16 +108,24 @@ var MonocleProviderComponent = ({
       setError(
         err instanceof Error ? err : new Error("Unknown error occurred")
       );
-    } finally {
       setIsLoading(false);
     }
-  };
+  }, [publishableKey, domain]);
   useEffect(() => {
     if (!assessment) {
       refresh();
     }
-  }, [publishableKey]);
-  return /* @__PURE__ */ jsx2(MonocleContext.Provider, { value: { assessment, refresh, isLoading, error }, children });
+    return () => {
+      if (window.MCL) {
+        window.MCL.configure({ onAssessment: void 0 });
+      }
+    };
+  }, [publishableKey, domain, assessment, refresh]);
+  const contextValue = useMemo(
+    () => ({ assessment, refresh, isLoading, error }),
+    [assessment, refresh, isLoading, error]
+  );
+  return /* @__PURE__ */ jsx2(MonocleContext.Provider, { value: contextValue, children });
 };
 var MonocleProvider = withMaxAllowedInstancesGuard(
   MonocleProviderComponent,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/MonocleProvider.tsx","../src/utils/useMaxAllowedInstancesGuard.tsx","../src/constants.ts"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\nimport { withMaxAllowedInstancesGuard } from '../utils';\nimport { MonocleProviderProps } from '../types';\nimport { DOMAIN } from '../constants';\ninterface MonocleContextType {\n  assessment: string | undefined;\n  refresh: () => void;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nconst MonocleContext = createContext<MonocleContextType | null>(null);\n\nconst MonocleProviderComponent: React.FC<MonocleProviderProps> = ({\n  children,\n  publishableKey,\n  domain = DOMAIN,\n}) => {\n  const [assessment, setAssessment] = useState<string | undefined>(undefined);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const loadScript = () => {\n    return new Promise<void>((resolve, reject) => {\n      const existingScript = document.getElementById('_mcl');\n      if (existingScript) {\n        // If script exists but hasn't loaded yet, wait for it\n        if (!window.MCL) {\n          existingScript.onload = () => resolve();\n          existingScript.onerror = () =>\n            reject(new Error('Failed to load Monocle script'));\n        } else {\n          resolve();\n        }\n        return;\n      }\n\n      const script = document.createElement('script');\n      script.id = '_mcl';\n      script.async = true;\n      script.src = `https://${domain}/d/mcl.js?tk=${publishableKey}`;\n      script.onload = () => {\n        resolve();\n      };\n      script.onerror = (_e) => {\n        console.error('MonocleProvider: Script failed to load');\n        reject(new Error('Failed to load Monocle script'));\n      };\n      document.head.appendChild(script);\n    });\n  };\n\n  const refresh = async () => {\n    try {\n      setIsLoading(true);\n      setError(null);\n      await loadScript();\n      if (window.MCL) {\n        const newAssessment = window.MCL.getAssessment();\n        setAssessment(newAssessment);\n      } else {\n        throw new Error('MCL object not found on window');\n      }\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Unknown error occurred')\n      );\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    // Only refresh if the publishableKey changes and we don't already have an assessment\n    if (!assessment) {\n      refresh();\n    }\n  }, [publishableKey]);\n\n  return (\n    <MonocleContext.Provider value={{ assessment, refresh, isLoading, error }}>\n      {children}\n    </MonocleContext.Provider>\n  );\n};\n\nexport const MonocleProvider = withMaxAllowedInstancesGuard(\n  MonocleProviderComponent,\n  'MonocleProvider',\n  'Only one instance of MonocleProvider is allowed'\n);\n\nexport const useMonocle = () => {\n  const context = useContext(MonocleContext);\n  if (!context) {\n    throw new Error('useMonocle must be used within a MonocleProvider');\n  }\n  return context;\n};\n","import React from 'react';\n\nconst instanceCounter = new Map<string, number>();\n\n/**\n * A React hook that ensures a component is not instantiated more than a specified number of times.\n * Throws an error if the maximum number of instances is exceeded.\n *\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @param maxCount - The maximum number of allowed instances (defaults to 1)\n * @throws Error when the maximum number of instances is exceeded\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   useMaxAllowedInstancesGuard('MyComponent', 'Only one instance of MyComponent is allowed');\n *   return <div>My Component</div>;\n * };\n * ```\n */\nexport function useMaxAllowedInstancesGuard(\n  name: string,\n  error: string,\n  maxCount = 1\n): void {\n  React.useEffect(() => {\n    const count = instanceCounter.get(name) || 0;\n    if (count === maxCount) {\n      throw new Error(error);\n    }\n    instanceCounter.set(name, count + 1);\n\n    return () => {\n      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);\n    };\n  }, []);\n}\n\n/**\n * A higher-order component that wraps a component with instance count protection.\n * This HOC ensures that the wrapped component cannot be instantiated more than once\n * (or a specified number of times) in the application.\n *\n * @param WrappedComponent - The component to wrap with instance count protection\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @returns A new component with instance count protection\n *\n * @example\n * ```tsx\n * const ProtectedComponent = withMaxAllowedInstancesGuard(\n *   MyComponent,\n *   'MyComponent',\n *   'Only one instance of MyComponent is allowed'\n * );\n * ```\n */\nexport function withMaxAllowedInstancesGuard<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  name: string,\n  error: string\n): React.ComponentType<P> {\n  const displayName =\n    WrappedComponent.displayName ||\n    WrappedComponent.name ||\n    name ||\n    'Component';\n\n  const Hoc: React.FC<P> = (props) => {\n    useMaxAllowedInstancesGuard(name, error);\n    return <WrappedComponent {...props} />;\n  };\n\n  Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;\n  return Hoc;\n}\n","export const DOMAIN = 'mcl.spur.us';\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../src/contexts/MonocleProvider.tsx","../src/utils/useMaxAllowedInstancesGuard.tsx","../src/constants.ts"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  useMemo,\n  useCallback,\n} from 'react';\nimport { withMaxAllowedInstancesGuard } from '../utils';\nimport { MonocleProviderProps } from '../types';\nimport { DOMAIN } from '../constants';\ninterface MonocleContextType {\n  assessment: string | undefined;\n  refresh: () => void;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nconst MonocleContext = createContext<MonocleContextType | null>(null);\n\nconst MonocleProviderComponent: React.FC<MonocleProviderProps> = ({\n  children,\n  publishableKey,\n  domain = DOMAIN,\n}) => {\n  const [assessment, setAssessment] = useState<string | undefined>(undefined);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const loadScript = () => {\n    return new Promise<void>((resolve, reject) => {\n      const existingScript = document.getElementById('_mcl');\n      if (existingScript) {\n        // If script exists but hasn't loaded yet, wait for it\n        if (!window.MCL) {\n          existingScript.onload = () => resolve();\n          existingScript.onerror = () =>\n            reject(new Error('Failed to load Monocle script'));\n        } else {\n          resolve();\n        }\n        return;\n      }\n\n      const script = document.createElement('script');\n      script.id = '_mcl';\n      script.async = true;\n      script.src = `https://${domain}/d/mcl.js?tk=${publishableKey}`;\n      script.onload = () => {\n        resolve();\n      };\n      script.onerror = (_e) => {\n        console.error('MonocleProvider: Script failed to load');\n        reject(new Error('Failed to load Monocle script'));\n      };\n      document.head.appendChild(script);\n    });\n  };\n\n  const refresh = useCallback(async () => {\n    try {\n      setIsLoading(true);\n      setError(null);\n      await loadScript();\n      if (window.MCL) {\n        let timeoutId: NodeJS.Timeout | null = null;\n        \n        // Configure MCL with our callback to receive assessment updates\n        await window.MCL.configure({\n          onAssessment: (assessment: string) => {\n            if (timeoutId) {\n              clearTimeout(timeoutId);\n            }\n            setAssessment(assessment);\n            setIsLoading(false);\n          },\n        });\n\n        // Check if assessment is already available\n        const existingAssessment = window.MCL.getAssessment();\n        if (existingAssessment) {\n          setAssessment(existingAssessment);\n          setIsLoading(false);\n        } else {\n          // Set a timeout in case the assessment never comes\n          timeoutId = setTimeout(() => {\n            setError(new Error('Assessment timeout - MCL did not respond within 30 seconds'));\n            setIsLoading(false);\n          }, 30000);\n        }\n      } else {\n        throw new Error('MCL object not found on window');\n      }\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Unknown error occurred')\n      );\n      setIsLoading(false);\n    }\n  }, [publishableKey, domain]);\n\n  useEffect(() => {\n    // Only refresh if the publishableKey changes and we don't already have an assessment\n    if (!assessment) {\n      refresh();\n    }\n    \n    // Cleanup function to reset callback on unmount\n    return () => {\n      if (window.MCL) {\n        window.MCL.configure({ onAssessment: undefined });\n      }\n    };\n  }, [publishableKey, domain, assessment, refresh]);\n\n  const contextValue = useMemo(\n    () => ({ assessment, refresh, isLoading, error }),\n    [assessment, refresh, isLoading, error]\n  );\n\n  return (\n    <MonocleContext.Provider value={contextValue}>\n      {children}\n    </MonocleContext.Provider>\n  );\n};\n\nexport const MonocleProvider = withMaxAllowedInstancesGuard(\n  MonocleProviderComponent,\n  'MonocleProvider',\n  'Only one instance of MonocleProvider is allowed'\n);\n\n/**\n * Hook to access the Monocle context.\n *\n * @returns {MonocleContextType} The Monocle context containing assessment data, loading state, and error information\n * @throws {Error} When used outside of a MonocleProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { assessment, isLoading, error, refresh } = useMonocle();\n *\n *   if (isLoading) return <div>Loading...</div>;\n *   if (error) return <div>Error: {error.message}</div>;\n *\n *   return <div>Assessment: {assessment}</div>;\n * }\n * ```\n */\nexport const useMonocle = () => {\n  const context = useContext(MonocleContext);\n  if (!context) {\n    throw new Error('useMonocle must be used within a MonocleProvider');\n  }\n  return context;\n};\n","import React from 'react';\n\nconst instanceCounter = new Map<string, number>();\n\n/**\n * A React hook that ensures a component is not instantiated more than a specified number of times.\n * Throws an error if the maximum number of instances is exceeded.\n *\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @param maxCount - The maximum number of allowed instances (defaults to 1)\n * @throws Error when the maximum number of instances is exceeded\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   useMaxAllowedInstancesGuard('MyComponent', 'Only one instance of MyComponent is allowed');\n *   return <div>My Component</div>;\n * };\n * ```\n */\nexport function useMaxAllowedInstancesGuard(\n  name: string,\n  error: string,\n  maxCount = 1\n): void {\n  React.useEffect(() => {\n    const count = instanceCounter.get(name) || 0;\n    if (count === maxCount) {\n      throw new Error(error);\n    }\n    instanceCounter.set(name, count + 1);\n\n    return () => {\n      const currentCount = instanceCounter.get(name) || 0;\n      instanceCounter.set(name, Math.max(0, currentCount - 1));\n    };\n  }, []);\n}\n\n/**\n * A higher-order component that wraps a component with instance count protection.\n * This HOC ensures that the wrapped component cannot be instantiated more than once\n * (or a specified number of times) in the application.\n *\n * @param WrappedComponent - The component to wrap with instance count protection\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @returns A new component with instance count protection\n *\n * @example\n * ```tsx\n * const ProtectedComponent = withMaxAllowedInstancesGuard(\n *   MyComponent,\n *   'MyComponent',\n *   'Only one instance of MyComponent is allowed'\n * );\n * ```\n */\nexport function withMaxAllowedInstancesGuard<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  name: string,\n  error: string\n): React.ComponentType<P> {\n  const displayName =\n    WrappedComponent.displayName ||\n    WrappedComponent.name ||\n    name ||\n    'Component';\n\n  const Hoc: React.FC<P> = (props) => {\n    useMaxAllowedInstancesGuard(name, error);\n    return <WrappedComponent {...props} />;\n  };\n\n  Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;\n  return Hoc;\n}\n","export const DOMAIN = 'mcl.spur.us';\n"],"mappings":"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","names":["jsx","assessment"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spur.us/monocle-react",
-  "version": "1.1.1-canary.v20250521185758",
+  "version": "1.1.1-canary.v20250707133917",
   "description": "Monocle React library",
   "keywords": [
     "spur",
@@ -20,7 +20,7 @@
   "author": "Spur",
   "license": "MIT",
   "dependencies": {
-    "@spur.us/types": "^0.3.0-canary.v20250521185758"
+    "@spur.us/types": "^0.3.0-canary.v20250707133917"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0",

package/src/contexts/MonocleProvider.tsx

@@ -1,4 +1,11 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useMemo,
+  useCallback,
+} from 'react';
 import { withMaxAllowedInstancesGuard } from '../utils';
 import { MonocleProviderProps } from '../types';
 import { DOMAIN } from '../constants';
@@ -50,14 +57,37 @@ const MonocleProviderComponent: React.FC<MonocleProviderProps> = ({
     });
   };
 
-  const refresh = async () => {
+  const refresh = useCallback(async () => {
     try {
       setIsLoading(true);
       setError(null);
       await loadScript();
       if (window.MCL) {
-        const newAssessment = window.MCL.getAssessment();
-        setAssessment(newAssessment);
+        let timeoutId: NodeJS.Timeout | null = null;
+        
+        // Configure MCL with our callback to receive assessment updates
+        await window.MCL.configure({
+          onAssessment: (assessment: string) => {
+            if (timeoutId) {
+              clearTimeout(timeoutId);
+            }
+            setAssessment(assessment);
+            setIsLoading(false);
+          },
+        });
+
+        // Check if assessment is already available
+        const existingAssessment = window.MCL.getAssessment();
+        if (existingAssessment) {
+          setAssessment(existingAssessment);
+          setIsLoading(false);
+        } else {
+          // Set a timeout in case the assessment never comes
+          timeoutId = setTimeout(() => {
+            setError(new Error('Assessment timeout - MCL did not respond within 30 seconds'));
+            setIsLoading(false);
+          }, 30000);
+        }
       } else {
         throw new Error('MCL object not found on window');
       }
@@ -65,20 +95,31 @@ const MonocleProviderComponent: React.FC<MonocleProviderProps> = ({
       setError(
         err instanceof Error ? err : new Error('Unknown error occurred')
       );
-    } finally {
       setIsLoading(false);
     }
-  };
+  }, [publishableKey, domain]);
 
   useEffect(() => {
     // Only refresh if the publishableKey changes and we don't already have an assessment
     if (!assessment) {
       refresh();
     }
-  }, [publishableKey]);
+    
+    // Cleanup function to reset callback on unmount
+    return () => {
+      if (window.MCL) {
+        window.MCL.configure({ onAssessment: undefined });
+      }
+    };
+  }, [publishableKey, domain, assessment, refresh]);
+
+  const contextValue = useMemo(
+    () => ({ assessment, refresh, isLoading, error }),
+    [assessment, refresh, isLoading, error]
+  );
 
   return (
-    <MonocleContext.Provider value={{ assessment, refresh, isLoading, error }}>
+    <MonocleContext.Provider value={contextValue}>
       {children}
     </MonocleContext.Provider>
   );
@@ -90,6 +131,24 @@ export const MonocleProvider = withMaxAllowedInstancesGuard(
   'Only one instance of MonocleProvider is allowed'
 );
 
+/**
+ * Hook to access the Monocle context.
+ *
+ * @returns {MonocleContextType} The Monocle context containing assessment data, loading state, and error information
+ * @throws {Error} When used outside of a MonocleProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { assessment, isLoading, error, refresh } = useMonocle();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *
+ *   return <div>Assessment: {assessment}</div>;
+ * }
+ * ```
+ */
 export const useMonocle = () => {
   const context = useContext(MonocleContext);
   if (!context) {

package/src/types.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * Props for the MonocleProvider component.
  * @interface MonocleProviderProps

package/src/utils/useMaxAllowedInstancesGuard.tsx

@@ -32,7 +32,8 @@ export function useMaxAllowedInstancesGuard(
     instanceCounter.set(name, count + 1);
 
     return () => {
-      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);
+      const currentCount = instanceCounter.get(name) || 0;
+      instanceCounter.set(name, Math.max(0, currentCount - 1));
     };
   }, []);
 }