@cstar.help/react 0.10.1 → 0.10.3

package/dist/index.d.cts

@@ -32,7 +32,9 @@ interface CStarChatProviderProps extends ChatConfig {
 }
 /**
  * Provides a ChatClient instance to all child components.
- * Creates the client on mount and disconnects on unmount.
+ * Creates the client once and disconnects it on a real unmount. The client
+ * survives StrictMode's simulated unmount, so an identified customer stays
+ * identified.
  *
  * ```tsx
  * <CStarChatProvider teamSlug="acme">
@@ -88,7 +90,7 @@ interface UseChatReturn {
  * const { identify, loginWithCredentials, isAuthenticated, authMode } = useChat();
  *
  * await identify(
- *   { externalId: 'usr_123', email: 'jane@co.com', timestamp: Date.now() / 1000 },
+ *   { externalId: 'user_123', email: 'jane@co.com', timestamp: Date.now() / 1000 },
  *   hmacSignature
  * );
  * // OR
@@ -359,7 +361,11 @@ interface CStarDashboardProviderProps {
      * provider builds the `CStarClient` internally so this prop can be passed
      * across the React Server Components boundary without tripping the
      * "Classes or null prototypes are not supported" runtime error.
-     * Config is visible to the browser: use only a publishable key here.
+     * Every dashboard hook calls team endpoints, which need a secret key
+     * (a publishable key gets 403 publishable_key_forbidden). Config reaches
+     * the browser, so use the provider only where everyone who loads the page
+     * may hold that key (an internal tool behind your own login, a desktop
+     * app). On a public site, call your own backend instead.
      *
      * Either `config` or `client` is required.
      */
@@ -378,17 +384,18 @@ interface CStarDashboardProviderProps {
 /**
  * Provides a `CStarClient` to dashboard hooks.
  *
- * Provider props and bundled clients are visible to the browser. Pass only
- * a publishable key; supported operations are limited by that key's permissions.
- * Run privileged dashboard reads and mutations through your authenticated
- * backend, where a secret-key `CStarClient` stays on the server.
+ * Every hook calls team endpoints, which need a secret key: publishable keys
+ * get 403 publishable_key_forbidden on reads and publishable_key_write on
+ * writes. Provider props and bundled clients are visible to the browser, so
+ * use the provider only in a trusted environment (an internal tool behind
+ * your own login, a desktop app), with a secret key scoped to what the
+ * dashboard needs. For anything public, have the app call your own backend,
+ * where a secret-key `CStarClient` stays on the server.
  *
  * ```tsx
- * // app/providers.tsx
+ * // app/providers.tsx (an internal tool behind your own login)
  * 'use client';
- * <CStarDashboardProvider
- *   config={{ apiKey: process.env.NEXT_PUBLIC_CSTAR_PUBLISHABLE_KEY!, teamId }}
- * >
+ * <CStarDashboardProvider config={{ apiKey: secretKeyFromYourServer, teamId }}>
  *   <TicketList />
  * </CStarDashboardProvider>
  * ```
@@ -493,7 +500,7 @@ interface UsePlayerStatsReturn {
  * Subscribe to player stats (XP, level, streaks).
  *
  * ```tsx
- * const { player, loading, error } = usePlayerStats('user_123');
+ * const { player, loading, error } = usePlayerStats('550e8400-e29b-41d4-a716-446655440001');
  * ```
  */
 declare function usePlayerStats(memberId?: string): UsePlayerStatsReturn;

package/dist/index.d.ts

@@ -32,7 +32,9 @@ interface CStarChatProviderProps extends ChatConfig {
 }
 /**
  * Provides a ChatClient instance to all child components.
- * Creates the client on mount and disconnects on unmount.
+ * Creates the client once and disconnects it on a real unmount. The client
+ * survives StrictMode's simulated unmount, so an identified customer stays
+ * identified.
  *
  * ```tsx
  * <CStarChatProvider teamSlug="acme">
@@ -88,7 +90,7 @@ interface UseChatReturn {
  * const { identify, loginWithCredentials, isAuthenticated, authMode } = useChat();
  *
  * await identify(
- *   { externalId: 'usr_123', email: 'jane@co.com', timestamp: Date.now() / 1000 },
+ *   { externalId: 'user_123', email: 'jane@co.com', timestamp: Date.now() / 1000 },
  *   hmacSignature
  * );
  * // OR
@@ -359,7 +361,11 @@ interface CStarDashboardProviderProps {
      * provider builds the `CStarClient` internally so this prop can be passed
      * across the React Server Components boundary without tripping the
      * "Classes or null prototypes are not supported" runtime error.
-     * Config is visible to the browser: use only a publishable key here.
+     * Every dashboard hook calls team endpoints, which need a secret key
+     * (a publishable key gets 403 publishable_key_forbidden). Config reaches
+     * the browser, so use the provider only where everyone who loads the page
+     * may hold that key (an internal tool behind your own login, a desktop
+     * app). On a public site, call your own backend instead.
      *
      * Either `config` or `client` is required.
      */
@@ -378,17 +384,18 @@ interface CStarDashboardProviderProps {
 /**
  * Provides a `CStarClient` to dashboard hooks.
  *
- * Provider props and bundled clients are visible to the browser. Pass only
- * a publishable key; supported operations are limited by that key's permissions.
- * Run privileged dashboard reads and mutations through your authenticated
- * backend, where a secret-key `CStarClient` stays on the server.
+ * Every hook calls team endpoints, which need a secret key: publishable keys
+ * get 403 publishable_key_forbidden on reads and publishable_key_write on
+ * writes. Provider props and bundled clients are visible to the browser, so
+ * use the provider only in a trusted environment (an internal tool behind
+ * your own login, a desktop app), with a secret key scoped to what the
+ * dashboard needs. For anything public, have the app call your own backend,
+ * where a secret-key `CStarClient` stays on the server.
  *
  * ```tsx
- * // app/providers.tsx
+ * // app/providers.tsx (an internal tool behind your own login)
  * 'use client';
- * <CStarDashboardProvider
- *   config={{ apiKey: process.env.NEXT_PUBLIC_CSTAR_PUBLISHABLE_KEY!, teamId }}
- * >
+ * <CStarDashboardProvider config={{ apiKey: secretKeyFromYourServer, teamId }}>
  *   <TicketList />
  * </CStarDashboardProvider>
  * ```
@@ -493,7 +500,7 @@ interface UsePlayerStatsReturn {
  * Subscribe to player stats (XP, level, streaks).
  *
  * ```tsx
- * const { player, loading, error } = usePlayerStats('user_123');
+ * const { player, loading, error } = usePlayerStats('550e8400-e29b-41d4-a716-446655440001');
  * ```
  */
 declare function usePlayerStats(memberId?: string): UsePlayerStatsReturn;

package/dist/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 // src/context.tsx
 import { createContext, useContext } from "react";
 var CStarChatContext = createContext(null);
@@ -26,20 +28,39 @@ function useCommunityClient() {
 }
 
 // src/chat/CStarChatProvider.tsx
-import { useEffect, useRef } from "react";
+import { useRef as useRef2 } from "react";
 import { ChatClient } from "@cstar.help/js/chat";
+
+// src/useDisconnectOnUnmount.ts
+import { useEffect, useRef } from "react";
+function useDisconnectOnUnmount(target, disconnect) {
+  const pending = useRef(null);
+  const disconnectRef = useRef(disconnect);
+  disconnectRef.current = disconnect;
+  useEffect(() => {
+    if (target === null) return;
+    if (pending.current?.target === target) {
+      clearTimeout(pending.current.timer);
+      pending.current = null;
+    }
+    return () => {
+      const timer = setTimeout(() => {
+        if (pending.current?.target === target) pending.current = null;
+        disconnectRef.current(target);
+      }, 0);
+      pending.current = { target, timer };
+    };
+  }, [target]);
+}
+
+// src/chat/CStarChatProvider.tsx
 import { jsx } from "react/jsx-runtime";
 function CStarChatProvider({ children, ...config }) {
-  const clientRef = useRef(null);
+  const clientRef = useRef2(null);
   if (!clientRef.current) {
     clientRef.current = new ChatClient(config);
   }
-  useEffect(() => {
-    return () => {
-      clientRef.current?.disconnect();
-      clientRef.current = null;
-    };
-  }, []);
+  useDisconnectOnUnmount(clientRef.current, (client) => client.disconnect());
   return /* @__PURE__ */ jsx(CStarChatContext.Provider, { value: clientRef.current, children });
 }
 
@@ -135,14 +156,14 @@ function useChat() {
 }
 
 // src/chat/useTickets.ts
-import { useState as useState2, useEffect as useEffect3, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { useState as useState2, useEffect as useEffect3, useCallback as useCallback2, useRef as useRef3 } from "react";
 function useTickets() {
   const client = useChatClient();
   const [tickets, setTickets] = useState2([]);
   const [isLoading, setIsLoading] = useState2(true);
   const [error, setError] = useState2(null);
   const [hasMore, setHasMore] = useState2(false);
-  const mountedRef = useRef2(true);
+  const mountedRef = useRef3(true);
   const refresh = useCallback2(async () => {
     setIsLoading(true);
     setError(null);
@@ -183,17 +204,17 @@ function useTickets() {
 }
 
 // src/chat/useMessages.ts
-import { useState as useState3, useEffect as useEffect4, useCallback as useCallback3, useRef as useRef3 } from "react";
+import { useState as useState3, useEffect as useEffect4, useCallback as useCallback3, useRef as useRef4 } from "react";
 function useMessages(ticketId) {
   const client = useChatClient();
   const [messages, setMessages] = useState3([]);
   const [isLoading, setIsLoading] = useState3(true);
   const [error, setError] = useState3(null);
-  const mountedRef = useRef3(true);
-  const seenIdsRef = useRef3(/* @__PURE__ */ new Set());
-  const requestRef = useRef3(0);
-  const scopeRef = useRef3(0);
-  const optimisticRef = useRef3(0);
+  const mountedRef = useRef4(true);
+  const seenIdsRef = useRef4(/* @__PURE__ */ new Set());
+  const requestRef = useRef4(0);
+  const scopeRef = useRef4(0);
+  const optimisticRef = useRef4(0);
   const refresh = useCallback3(async () => {
     if (!ticketId) return;
     const request = ++requestRef.current;
@@ -287,13 +308,13 @@ function useMessages(ticketId) {
 }
 
 // src/chat/useTyping.ts
-import { useState as useState4, useEffect as useEffect5, useCallback as useCallback4, useRef as useRef4 } from "react";
+import { useState as useState4, useEffect as useEffect5, useCallback as useCallback4, useRef as useRef5 } from "react";
 var TYPING_TIMEOUT = 4e3;
 function useTyping(ticketId) {
   const client = useChatClient();
   const [typingAgents, setTypingAgents] = useState4([]);
-  const timersRef = useRef4(/* @__PURE__ */ new Map());
-  const mountedRef = useRef4(true);
+  const timersRef = useRef5(/* @__PURE__ */ new Map());
+  const mountedRef = useRef5(true);
   useEffect5(() => {
     mountedRef.current = true;
     if (!ticketId) {
@@ -342,11 +363,11 @@ function useTyping(ticketId) {
 }
 
 // src/library/CStarLibraryProvider.tsx
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 import { LibraryClient } from "@cstar.help/js/library";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function CStarLibraryProvider({ children, ...config }) {
-  const clientRef = useRef5(null);
+  const clientRef = useRef6(null);
   if (!clientRef.current) {
     clientRef.current = new LibraryClient(config);
   }
@@ -354,13 +375,13 @@ function CStarLibraryProvider({ children, ...config }) {
 }
 
 // src/library/useCategories.ts
-import { useState as useState5, useEffect as useEffect6, useCallback as useCallback5, useRef as useRef6 } from "react";
+import { useState as useState5, useEffect as useEffect6, useCallback as useCallback5, useRef as useRef7 } from "react";
 function useCategories() {
   const client = useLibraryClient();
   const [categories, setCategories] = useState5([]);
   const [isLoading, setIsLoading] = useState5(true);
   const [error, setError] = useState5(null);
-  const mountedRef = useRef6(true);
+  const mountedRef = useRef7(true);
   const refresh = useCallback5(async () => {
     setIsLoading(true);
     setError(null);
@@ -390,13 +411,13 @@ function useCategories() {
 }
 
 // src/library/useArticles.ts
-import { useState as useState6, useEffect as useEffect7, useCallback as useCallback6, useRef as useRef7 } from "react";
+import { useState as useState6, useEffect as useEffect7, useCallback as useCallback6, useRef as useRef8 } from "react";
 function useArticles(params) {
   const client = useLibraryClient();
   const [articles, setArticles] = useState6([]);
   const [isLoading, setIsLoading] = useState6(true);
   const [error, setError] = useState6(null);
-  const mountedRef = useRef7(true);
+  const mountedRef = useRef8(true);
   const categorySlug = params?.categorySlug;
   const limit = params?.limit;
   const offset = params?.offset;
@@ -429,13 +450,13 @@ function useArticles(params) {
 }
 
 // src/library/useArticle.ts
-import { useState as useState7, useEffect as useEffect8, useCallback as useCallback7, useRef as useRef8 } from "react";
+import { useState as useState7, useEffect as useEffect8, useCallback as useCallback7, useRef as useRef9 } from "react";
 function useArticle(slug) {
   const client = useLibraryClient();
   const [article, setArticle] = useState7(null);
   const [isLoading, setIsLoading] = useState7(true);
   const [error, setError] = useState7(null);
-  const mountedRef = useRef8(true);
+  const mountedRef = useRef9(true);
   const refresh = useCallback7(async () => {
     if (!slug) return;
     setIsLoading(true);
@@ -478,7 +499,7 @@ function useArticle(slug) {
 }
 
 // src/library/useArticleSearch.ts
-import { useState as useState8, useEffect as useEffect9, useRef as useRef9 } from "react";
+import { useState as useState8, useEffect as useEffect9, useRef as useRef10 } from "react";
 var DEBOUNCE_MS = 300;
 function useArticleSearch(query) {
   const client = useLibraryClient();
@@ -486,7 +507,7 @@ function useArticleSearch(query) {
   const [totalCount, setTotalCount] = useState8(0);
   const [isLoading, setIsLoading] = useState8(false);
   const [error, setError] = useState8(null);
-  const mountedRef = useRef9(true);
+  const mountedRef = useRef10(true);
   useEffect9(() => {
     mountedRef.current = true;
     const trimmed = query.trim();
@@ -525,11 +546,11 @@ function useArticleSearch(query) {
 }
 
 // src/community/CStarCommunityProvider.tsx
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 import { CommunityClient } from "@cstar.help/js/community";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function CStarCommunityProvider({ children, ...config }) {
-  const clientRef = useRef10(null);
+  const clientRef = useRef11(null);
   if (!clientRef.current) {
     clientRef.current = new CommunityClient(config);
   }
@@ -537,13 +558,13 @@ function CStarCommunityProvider({ children, ...config }) {
 }
 
 // src/community/useTopics.ts
-import { useState as useState9, useEffect as useEffect10, useCallback as useCallback8, useRef as useRef11 } from "react";
+import { useState as useState9, useEffect as useEffect10, useCallback as useCallback8, useRef as useRef12 } from "react";
 function useTopics() {
   const client = useCommunityClient();
   const [topics, setTopics] = useState9([]);
   const [isLoading, setIsLoading] = useState9(true);
   const [error, setError] = useState9(null);
-  const mountedRef = useRef11(true);
+  const mountedRef = useRef12(true);
   const refresh = useCallback8(async () => {
     setIsLoading(true);
     setError(null);
@@ -573,14 +594,14 @@ function useTopics() {
 }
 
 // src/community/usePosts.ts
-import { useState as useState10, useEffect as useEffect11, useCallback as useCallback9, useRef as useRef12 } from "react";
+import { useState as useState10, useEffect as useEffect11, useCallback as useCallback9, useRef as useRef13 } from "react";
 function usePosts(params) {
   const client = useCommunityClient();
   const [posts, setPosts] = useState10([]);
   const [count, setCount] = useState10(0);
   const [isLoading, setIsLoading] = useState10(true);
   const [error, setError] = useState10(null);
-  const mountedRef = useRef12(true);
+  const mountedRef = useRef13(true);
   const topicSlug = params?.topicSlug;
   const status = params?.status;
   const sort = params?.sort;
@@ -616,13 +637,13 @@ function usePosts(params) {
 }
 
 // src/community/usePost.ts
-import { useState as useState11, useEffect as useEffect12, useCallback as useCallback10, useRef as useRef13 } from "react";
+import { useState as useState11, useEffect as useEffect12, useCallback as useCallback10, useRef as useRef14 } from "react";
 function usePost(slug) {
   const client = useCommunityClient();
   const [data, setData] = useState11(null);
   const [isLoading, setIsLoading] = useState11(true);
   const [error, setError] = useState11(null);
-  const mountedRef = useRef13(true);
+  const mountedRef = useRef14(true);
   const refresh = useCallback10(async () => {
     setIsLoading(true);
     setError(null);
@@ -652,13 +673,13 @@ function usePost(slug) {
 }
 
 // src/community/useCommunitySearch.ts
-import { useState as useState12, useEffect as useEffect13, useCallback as useCallback11, useRef as useRef14 } from "react";
+import { useState as useState12, useEffect as useEffect13, useCallback as useCallback11, useRef as useRef15 } from "react";
 function useCommunitySearch() {
   const client = useCommunityClient();
   const [results, setResults] = useState12(null);
   const [isLoading, setIsLoading] = useState12(false);
   const [error, setError] = useState12(null);
-  const mountedRef = useRef14(true);
+  const mountedRef = useRef15(true);
   useEffect13(() => {
     mountedRef.current = true;
     return () => {
@@ -694,7 +715,7 @@ function useCommunitySearch() {
 }
 
 // src/dashboard/CStarDashboardProvider.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect14, useMemo } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
 import { CStarClient } from "@cstar.help/js";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var CStarDashboardContext = createContext2(null);
@@ -705,7 +726,7 @@ function CStarDashboardProvider({
 }) {
   if (!config && !providedClient) {
     throw new Error(
-      "CStarDashboardProvider requires either a `config` prop (`{ apiKey, teamId }` \u2014 recommended) or a `client` prop (a pre-built CStarClient instance, deprecated). See https://cstar.help/developers/sdk/react#dashboard"
+      "CStarDashboardProvider requires either a `config` prop (`{ apiKey, teamId }`, recommended) or a `client` prop (a pre-built CStarClient instance, deprecated). See https://www.cstar.help/developers/sdk/react#dashboard"
     );
   }
   const client = useMemo(() => {
@@ -721,12 +742,7 @@ function CStarDashboardProvider({
     config?.timeout
   ]);
   const contextValue = useMemo(() => ({ client }), [client]);
-  useEffect14(() => {
-    if (providedClient) return;
-    return () => {
-      client?.realtime?.disconnect?.();
-    };
-  }, [client, providedClient]);
+  useDisconnectOnUnmount(providedClient ? null : client, (owned) => owned.realtime?.disconnect?.());
   return /* @__PURE__ */ jsx4(CStarDashboardContext.Provider, { value: contextValue, children });
 }
 function useDashboardClient() {
@@ -738,7 +754,7 @@ function useDashboardClient() {
 }
 
 // src/dashboard/useCStarQuery.ts
-import { useState as useState13, useEffect as useEffect15, useRef as useRef15, useCallback as useCallback12 } from "react";
+import { useState as useState13, useEffect as useEffect14, useRef as useRef16, useCallback as useCallback12 } from "react";
 import { CStarValidationError } from "@cstar.help/js";
 function resolveResource(client, path) {
   const parts = path.split(".");
@@ -760,9 +776,9 @@ function useCStarQuery(resource, params) {
   const [data, setData] = useState13(null);
   const [loading, setLoading] = useState13(true);
   const [error, setError] = useState13(null);
-  const subscriptionRef = useRef15(null);
+  const subscriptionRef = useRef16(null);
   const paramsKey = params ? JSON.stringify(params) : "";
-  useEffect15(() => {
+  useEffect14(() => {
     const resolved = resolveResource(client, resource);
     if (!resolved) {
       setError(new Error(`Invalid resource path: ${resource}. Expected format: 'tickets.list'`));
@@ -849,14 +865,14 @@ function useCStarMutation(resource) {
 }
 
 // src/dashboard/useCStarEvents.ts
-import { useState as useState15, useEffect as useEffect16 } from "react";
+import { useState as useState15, useEffect as useEffect15 } from "react";
 var MAX_EVENTS = 100;
 function useCStarEvents(types) {
   const client = useDashboardClient();
   const [events, setEvents] = useState15([]);
   const [connected, setConnected] = useState15(false);
   const typesKey = types ? types.join(",") : "";
-  useEffect16(() => {
+  useEffect15(() => {
     const realtime = client.realtime;
     const handler = (event) => {
       if (types && types.length > 0) {
@@ -888,14 +904,14 @@ function useCStarEvents(types) {
 }
 
 // src/dashboard/useBossBattle.ts
-import { useState as useState16, useEffect as useEffect17, useRef as useRef16, useCallback as useCallback14 } from "react";
+import { useState as useState16, useEffect as useEffect16, useRef as useRef17, useCallback as useCallback14 } from "react";
 function useBossBattle() {
   const client = useDashboardClient();
   const [boss, setBoss] = useState16(null);
   const [loading, setLoading] = useState16(true);
   const [error, setError] = useState16(null);
-  const subRef = useRef16(null);
-  useEffect17(() => {
+  const subRef = useRef17(null);
+  useEffect16(() => {
     const sub = client.game.subscribeBoss(client.realtime);
     subRef.current = sub;
     sub.on("change", (data) => {
@@ -919,14 +935,14 @@ function useBossBattle() {
 }
 
 // src/dashboard/usePlayerStats.ts
-import { useState as useState17, useEffect as useEffect18, useRef as useRef17, useCallback as useCallback15 } from "react";
+import { useState as useState17, useEffect as useEffect17, useRef as useRef18, useCallback as useCallback15 } from "react";
 function usePlayerStats(memberId) {
   const client = useDashboardClient();
   const [player, setPlayer] = useState17(null);
   const [loading, setLoading] = useState17(true);
   const [error, setError] = useState17(null);
-  const subRef = useRef17(null);
-  useEffect18(() => {
+  const subRef = useRef18(null);
+  useEffect17(() => {
     const sub = client.game.subscribePlayer(client.realtime, memberId);
     subRef.current = sub;
     sub.on("change", (data) => {
@@ -950,14 +966,14 @@ function usePlayerStats(memberId) {
 }
 
 // src/dashboard/useLeaderboard.ts
-import { useState as useState18, useEffect as useEffect19, useRef as useRef18, useCallback as useCallback16 } from "react";
+import { useState as useState18, useEffect as useEffect18, useRef as useRef19, useCallback as useCallback16 } from "react";
 function useLeaderboard(period) {
   const client = useDashboardClient();
   const [entries, setEntries] = useState18([]);
   const [loading, setLoading] = useState18(true);
   const [error, setError] = useState18(null);
-  const subRef = useRef18(null);
-  useEffect19(() => {
+  const subRef = useRef19(null);
+  useEffect18(() => {
     const sub = client.game.subscribeLeaderboard(client.realtime, period ? { period } : void 0);
     subRef.current = sub;
     sub.on("change", (data) => {
@@ -981,14 +997,14 @@ function useLeaderboard(period) {
 }
 
 // src/dashboard/useGameActivity.ts
-import { useState as useState19, useEffect as useEffect20, useRef as useRef19, useCallback as useCallback17 } from "react";
+import { useState as useState19, useEffect as useEffect19, useRef as useRef20, useCallback as useCallback17 } from "react";
 function useGameActivity() {
   const client = useDashboardClient();
   const [events, setEvents] = useState19([]);
   const [loading, setLoading] = useState19(true);
   const [error, setError] = useState19(null);
-  const subRef = useRef19(null);
-  useEffect20(() => {
+  const subRef = useRef20(null);
+  useEffect19(() => {
     const sub = client.game.subscribeActivity(client.realtime);
     subRef.current = sub;
     sub.on("change", (data) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cstar.help/react",
-	"version": "0.10.1",
+	"version": "0.10.3",
 	"description": "React hooks for the cStar customer support platform",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -30,12 +30,12 @@
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",
-		"@cstar.help/js": ">=0.15.0"
+		"@cstar.help/js": "^0.18.2"
 	},
 	"devDependencies": {
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"@cstar.help/js": "^0.17.0",
+		"@cstar.help/js": "^0.18.2",
 		"@testing-library/react": "^16.1.0",
 		"@types/react": "^18.3.0",
 		"@types/react-dom": "^18.3.0",