From 3ee0ba5664971ebac32c78dc02d7abfa04d1b363 Mon Sep 17 00:00:00 2001
From: Joep31 <joep@kendew-agency.com>
Date: Wed, 21 Jan 2026 21:24:10 +0100
Subject: [PATCH 1/2] refactor: subscription support

---
 src/contexts/comment-context.tsx |  9 +++++++--
 src/types/action.types.ts        |  4 ++++
 src/types/overlay.types.ts       | 10 +++++-----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/contexts/comment-context.tsx b/src/contexts/comment-context.tsx
index 8bdcb44..a439e54 100644
--- a/src/contexts/comment-context.tsx
+++ b/src/contexts/comment-context.tsx
@@ -58,6 +58,11 @@ const commentReducer = (
         comments: action.comments,
       };
     }
+    case "APPEND_COMMENT":
+      return {
+        ...state,
+        comments: [...state.comments, action.comment],
+      };
     case "DELETE":
       return {
         ...state,
@@ -169,8 +174,8 @@ export const CommentContextProvider = ({
   useEffect(() => {
     if (!subscription) return;
 
-    subscription.subscribe((update: CommentType[]) => {
-      dispatch({ type: "UPDATE_COMMENTS", comments: update });
+    subscription.subscribe((data) => {
+      dispatch({ type: "APPEND_COMMENT", comment: data });
     });
 
     return () => {
diff --git a/src/types/action.types.ts b/src/types/action.types.ts
index 371c1d9..7e45817 100644
--- a/src/types/action.types.ts
+++ b/src/types/action.types.ts
@@ -13,6 +13,10 @@ export type CommentAction =
       type: "UPDATE_COMMENTS";
       comments: CommentType[];
     }
+  | {
+      type: "APPEND_COMMENT";
+      comment: CommentType;
+    }
   | {
       type: "EDIT";
       id: string;
diff --git a/src/types/overlay.types.ts b/src/types/overlay.types.ts
index 31c3528..9621c79 100644
--- a/src/types/overlay.types.ts
+++ b/src/types/overlay.types.ts
@@ -85,7 +85,7 @@ export type CommentOverlayProps = {
   /**
    * Realtime subscription if supported by you DB
    */
-  subscription?: Suscription;
+  subscription?: RealtimeSubscription<CommentType>;
   mode?: "onConfirm";
   /**
    * Callback with all newly confirmed comments
@@ -111,10 +111,10 @@ export type CommentOverlayProps = {
   config?: Config;
 };
 
-type Suscription = {
-  subscribe: (update: unknown) => void;
-  unsubscribe: () => void;
-};
+export interface RealtimeSubscription<T> {
+  subscribe(onUpdate: (data: T) => void): void;
+  unsubscribe(): void;
+}
 
 export type Config = {
   /**

From 443b5096298e8c6e4ba13d7df53e52696344d177 Mon Sep 17 00:00:00 2001
From: Joep31 <joep@kendew-agency.com>
Date: Wed, 21 Jan 2026 21:33:54 +0100
Subject: [PATCH 2/2] chore: update docs with changelog

---
 README.md                  | 13 ++++++++++++-
 package.json               |  2 +-
 src/types/overlay.types.ts |  3 ++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 74a34df..79289a8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # @kendew-agency/react-feedback-layer
 
-A drop-in React feedback layer for collecting contextual user feedback through interactive comments and annotations. Perfect for design review tools, bug reporting systems, and collaborative annotation platforms.
+A drop-in React feedback layer for collecting contextual user feedback through interactive comments and annotations. Perfect for design review tools, bug reporting systems, and collaborative annotation platforms. 
+
+Have a look at the [changelog](#changelog) when updating the package.
 
 ## Features
 
@@ -1169,3 +1171,12 @@ MIT © [Kendew Agency](https://github.com/Kendew-Agency)
 - [GitHub Repository](https://github.com/Kendew-Agency/react-feedback-layer)
 - [Issue Tracker](https://github.com/Kendew-Agency/react-feedback-layer/issues)
 - [NPM Package](https://www.npmjs.com/package/@kendew-agency/react-feedback-layer)
+
+## Changelog
+
+A list if breaking changes that could impact the way you configured the package
+
+### 0.2.0
+- Reworked the subscription system. The system remains in beta and may change in the future. Configurations made with version 0.1.2 or older will need adjustment after updating.
+- `mode` was defined twice in props. It has been removed as a root prop and is now only part of the config.
+
diff --git a/package.json b/package.json
index 7323b2b..f572c1d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@kendew-agency/react-feedback-layer",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"description": "Drop-in React feedback layer for collecting contextual user feedback",
 	"license": "MIT",
 	"author": "Kendew Agency",
diff --git a/src/types/overlay.types.ts b/src/types/overlay.types.ts
index 9621c79..2e6b9a0 100644
--- a/src/types/overlay.types.ts
+++ b/src/types/overlay.types.ts
@@ -84,9 +84,10 @@ export type CommentOverlayProps = {
   initialOverlayState?: CommentOverlayState;
   /**
    * Realtime subscription if supported by you DB
+   * @description You can use this feature with a realtime DB or a websocket
+   * @beta this featue is not yet fully tested and is subject to change
    */
   subscription?: RealtimeSubscription<CommentType>;
-  mode?: "onConfirm";
   /**
    * Callback with all newly confirmed comments
    *