satyamark-react 0.0.1

package/README.md

@@ -0,0 +1,220 @@
+<p align="center">
+  <img src="./assets/CoverImage_1.png" alt="SatyaMark React" width="100%" />
+</p>
+
+# satyamark-react
+
+**satyamark-react** is the official React client library for **SatyaMark** — a real-time, AI-powered content verification infrastructure that surfaces clear, evidence-backed trust signals directly inside your UI.
+
+It extracts text and images from rendered DOM elements, submits them for verification, and renders standardized credibility icons that update live as results arrive.
+
+SatyaMark is built as **trust infrastructure**, not a fact-checking oracle.
+
+<p align="center">
+  <a href="https://github.com/DhirajKarangale/SatyaMark/tree/main/Frontend/satyamark-react">GitHub Repository</a>
+  ·
+  <a href="https://www.npmjs.com/package/satyamark-react">npm Package</a>
+</p>
+
+---
+
+## What This Library Does
+
+- Connects your React app to the SatyaMark verification network
+- Extracts visible text and images from DOM elements
+- Submits content for real-time verification
+- Displays standardized trust icons inside your UI
+- Updates verification status live
+- Allows users to open detailed verification explanations
+
+This library prioritizes **transparency over certainty**.
+
+---
+
+## Installation
+
+```bash
+npm install satyamark-react
+```
+
+---
+
+## Quick Start
+
+### 1. Initialize the SatyaMark connection (once)
+
+```tsx
+import { useEffect } from "react";
+import { init, onConnected } from "satyamark-react";
+
+useEffect(() => {
+  init({
+    app_id: "YOUR_APP_ID",
+    user_id: "USER_ID",
+  });
+}, []);
+
+onConnected((data) => {
+  console.log("Connected to SatyaMark:", data);
+});
+```
+
+---
+
+### 2. Process content from a DOM element
+
+`satyamark-react` works directly on **rendered UI**, not raw strings.
+
+```tsx
+import { useRef, useEffect, useState } from "react";
+import { process, registerStatus } from "satyamark-react";
+
+const cardRef = useRef<HTMLDivElement>(null);
+const [jobId, setJobId] = useState<string | null>(null);
+
+useEffect(() => {
+  if (!cardRef.current) return;
+
+  process(cardRef.current, "POST_ID")
+    .then(setJobId)
+    .catch(console.error);
+}, []);
+```
+
+---
+
+### 3. Display verification status
+
+Add a container where the status icon should appear:
+
+```tsx
+<div data-satyamark-status-container />
+```
+
+Register the status handler:
+
+```tsx
+useEffect(() => {
+  if (!jobId || !cardRef.current) return;
+
+  registerStatus(jobId, cardRef.current);
+}, [jobId]);
+```
+
+---
+
+## How It Works
+
+<p align="center">
+  <img src="./assets/CoverImage_2.png" alt="SatyaMark Architecture" width="90%" />
+</p>
+
+1. Extracts visible text + first valid image  
+2. Sends content via WebSocket  
+3. Receives live verification updates  
+4. Updates icons automatically  
+5. Click icon → open detailed verification page  
+
+---
+
+## Verification Marks
+
+- `correct`
+- `incorrect`
+- `verifyable`
+- `unverifyable`
+- `insufficient`
+- `pending`
+- `ai`
+- `nonai`
+
+---
+
+## API Reference
+
+### `init()`
+
+```ts
+init({
+  app_id: string;
+  user_id: string;
+});
+```
+
+---
+
+### `process()`
+
+```ts
+process(
+  rootElement: HTMLDivElement,
+  dataId: string
+): Promise<string>
+```
+
+---
+
+### `registerStatus()`
+
+```ts
+registerStatus(
+  jobId: string,
+  rootElement: HTMLElement,
+  options?: {
+    iconSize?: number;
+  }
+);
+```
+
+---
+
+### `onReceive()`
+
+```ts
+onReceive((data) => {
+  console.log(data);
+});
+```
+
+---
+
+### `onConnected()`
+
+```ts
+onConnected((connection) => {
+  console.log("Connected:", connection);
+});
+```
+
+---
+
+## Design Principles
+
+- Transparency over certainty  
+- Trust signals, not guarantees  
+- Privacy-first  
+- Incremental accuracy  
+
+---
+
+## Current Limitations
+
+- Text verification is most reliable  
+- Image verification is experimental  
+- Video & audio not yet supported  
+- Results are not absolute truth  
+
+---
+
+## Privacy Notes
+
+- Original text is not stored  
+- Short AI-generated summaries may be retained  
+- Images may be temporarily cached  
+- No advertising or profiling  
+
+---
+
+## One-Line Summary
+
+**satyamark-react lets React apps surface real-time, evidence-backed credibility signals directly inside the UI.**

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+type SatyaMarkConnectionData = {
+    app_id: string;
+    user_id: string;
+};
+type ConnectedCallback = (data: SatyaMarkConnectionData) => void;
+type ReceiveCallback = (data: any) => void;
+declare function onReceive(cb: ReceiveCallback): () => void;
+declare function onConnected(cb: ConnectedCallback): void;
+declare function init(connectionData: SatyaMarkConnectionData, options?: {
+    onConnected?: ConnectedCallback;
+}): void;
+declare function sendData(text: string, image_url: string, dataId: string): string | undefined;
+declare function receiveData(data: any): void;
+
+declare function process(divRef: HTMLDivElement, dataId: string): Promise<string | undefined>;
+
+type StatusOptions = {
+    iconSize?: number;
+};
+declare function registerStatus(jobId: string, rootElement: HTMLElement, options?: StatusOptions): void;
+
+export { SatyaMarkConnectionData, init, onConnected, onReceive, process, receiveData, registerStatus, sendData };

package/dist/index.js

@@ -0,0 +1,313 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  init: () => init,
+  onConnected: () => onConnected,
+  onReceive: () => onReceive,
+  process: () => process,
+  receiveData: () => receiveData,
+  registerStatus: () => registerStatus,
+  sendData: () => sendData
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/satyamark_connect.ts
+var wsUrl = "wss://satyamark.onrender.com";
+var socket = null;
+var storedConnectionData = null;
+var listeners = [];
+var onConnectedCb = null;
+function onReceive(cb) {
+  listeners.push(cb);
+  return () => {
+    const idx = listeners.indexOf(cb);
+    if (idx !== -1)
+      listeners.splice(idx, 1);
+  };
+}
+function onConnected(cb) {
+  onConnectedCb = cb;
+}
+function init(connectionData, options) {
+  var _a;
+  if (socket && socket.readyState == WebSocket.OPEN && storedConnectionData == connectionData) {
+    console.log("Already Connected: ", connectionData);
+    return;
+  }
+  socket = new WebSocket(wsUrl);
+  onConnectedCb = (_a = options == null ? void 0 : options.onConnected) != null ? _a : onConnectedCb;
+  socket.onopen = () => {
+    console.log("Connected to server: ", connectionData.user_id);
+    safeSend({
+      type: "handshake",
+      clientId: connectionData.user_id,
+      appId: connectionData.app_id
+    });
+    onConnectedCb == null ? void 0 : onConnectedCb(connectionData);
+  };
+  socket.onmessage = (event) => {
+    receiveData(JSON.parse(event.data));
+  };
+  socket.onclose = () => {
+    console.log("Server connection closed");
+  };
+  storedConnectionData = connectionData;
+}
+function isSocketOpen() {
+  return socket && socket.readyState === WebSocket.OPEN;
+}
+function assert(condition, message) {
+  if (!condition)
+    throw new Error(message);
+}
+function safeSend(msg) {
+  if (!storedConnectionData) {
+    console.warn("No connectionData found. Call connect() first.");
+    return;
+  }
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    console.warn("Socket not ready");
+    return;
+  }
+  socket.send(JSON.stringify(msg));
+}
+function uniqueTimestamp() {
+  const now = /* @__PURE__ */ new Date();
+  const yyyy = now.getFullYear();
+  const MM = String(now.getMonth() + 1).padStart(2, "0");
+  const dd = String(now.getDate()).padStart(2, "0");
+  const hh = String(now.getHours()).padStart(2, "0");
+  const mm = String(now.getMinutes()).padStart(2, "0");
+  const ss = String(now.getSeconds()).padStart(2, "0");
+  const ms = String(now.getMilliseconds()).padStart(3, "0");
+  const micro = String(Math.floor(Math.random() * 1e3)).padStart(3, "0");
+  return `${yyyy}${MM}${dd}${hh}${mm}${ss}${ms}${micro}`;
+}
+function sendData(text, image_url, dataId) {
+  if (!storedConnectionData) {
+    console.log("No connectionData found. Call connect() first.");
+    return;
+  }
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    console.log("Socket not ready");
+    return;
+  }
+  assert(storedConnectionData, "Call init() before sendData()");
+  assert(isSocketOpen(), "WebSocket is not ready");
+  assert(dataId, "dataId is required");
+  assert(text || image_url, "Provide text or image_url");
+  if (text)
+    assert(text.trim().length >= 3, "Text must be at least 3 characters");
+  const { app_id, user_id } = storedConnectionData;
+  const timestamp = uniqueTimestamp();
+  const jobId = `${app_id}_${user_id}_${dataId}_${timestamp}`;
+  const data = {
+    clientId: user_id,
+    jobId,
+    text,
+    image_url
+  };
+  socket.send(JSON.stringify(data));
+  return jobId;
+}
+function receiveData(data) {
+  if (!storedConnectionData || data.clientId != storedConnectionData.user_id)
+    return;
+  for (const cb of Array.from(listeners)) {
+    try {
+      cb(data);
+    } catch (err) {
+      console.error("listener error", err);
+    }
+  }
+}
+
+// src/satyamark_process.ts
+var mergeText = (texts) => texts.join(", ");
+var isValidImageUrl = (url) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(true);
+    img.onerror = () => resolve(false);
+    img.src = url;
+  });
+};
+var getFirstValidImage = async (urls) => {
+  for (const url of urls) {
+    if (await isValidImageUrl(url))
+      return url;
+  }
+  return null;
+};
+var extractFromDiv = (root) => {
+  var _a;
+  const images = Array.from(root.querySelectorAll("img")).map((img) => img.src);
+  const text = [];
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let node;
+  while (node = walker.nextNode()) {
+    const trimmed = (_a = node.textContent) == null ? void 0 : _a.trim();
+    if (trimmed)
+      text.push(trimmed);
+  }
+  return { text, images };
+};
+async function process(divRef, dataId) {
+  if (!divRef) {
+    throw new Error("Invalid root element");
+  }
+  if (!dataId) {
+    throw new Error("dataId is required");
+  }
+  const { text, images } = extractFromDiv(divRef);
+  const mergedText = mergeText(text);
+  const validImage = await getFirstValidImage(images);
+  if (!mergedText && !validImage) {
+    throw new Error("No valid text or image found in the element");
+  }
+  if (mergedText && mergedText.length < 3) {
+    throw new Error("Extracted text is too short");
+  }
+  const jobId = sendData(mergedText, validImage != null ? validImage : "", dataId);
+  return jobId;
+}
+
+// src/satyamark_status_controller.ts
+var import_verifyable = __toESM(require("./verifyable-AYGD2AEO.png"));
+var import_unverifyable = __toESM(require("./unverifyable-2LSQEVJT.png"));
+var import_insufficient = __toESM(require("./insufficient-FBXL3GLE.png"));
+var import_correct = __toESM(require("./correct-AW5V6TXB.png"));
+var import_incorrect = __toESM(require("./incorrect-KHIGXY2C.png"));
+var import_pending = __toESM(require("./pending-SWS5I5G5.png"));
+var import_ai = __toESM(require("./ai-J46U5IDK.png"));
+var import_nonai = __toESM(require("./nonai-LPEFMQBT.png"));
+var jobMap = {};
+var DEFAULT_ICON_SIZE = 20;
+var satyamark_url = "https://satyamark.vercel.app/";
+var iconMap = {
+  verifyable: import_verifyable.default,
+  unverifyable: import_unverifyable.default,
+  insufficient: import_insufficient.default,
+  correct: import_correct.default,
+  incorrect: import_incorrect.default,
+  pending: import_pending.default,
+  ai: import_ai.default,
+  nonai: import_nonai.default
+};
+function registerStatus(jobId, rootElement, options = {}) {
+  var _a;
+  jobMap[jobId] = {
+    root: rootElement,
+    iconSize: (_a = options.iconSize) != null ? _a : DEFAULT_ICON_SIZE
+  };
+  updateIcon(jobId, "pending", null);
+}
+function updateIcon(jobId, mark, data) {
+  const entry = jobMap[jobId];
+  if (!entry)
+    return;
+  const { root, iconSize } = entry;
+  const container = root.querySelector("[data-satyamark-status-container]");
+  if (!container)
+    return;
+  container.style.position = "relative";
+  let icon = container.querySelector("img");
+  if (!icon) {
+    icon = document.createElement("img");
+    icon.alt = "status";
+    icon.style.objectFit = "contain";
+    icon.style.display = "block";
+    container.appendChild(icon);
+  }
+  icon.style.width = iconSize + "px";
+  icon.style.height = iconSize + "px";
+  icon.src = iconMap[mark] || iconMap["pending"];
+  const type = data == null ? void 0 : data.type;
+  const isValidType = type === "text" || type === "image";
+  const isClickable = !!(data == null ? void 0 : data.dataId) && isValidType && mark !== "pending";
+  let tooltip = container.querySelector(".satyamark-tooltip");
+  if (!tooltip) {
+    tooltip = document.createElement("div");
+    tooltip.style.position = "absolute";
+    tooltip.style.top = `${icon.offsetTop - 6}px`;
+    tooltip.style.left = `${icon.offsetLeft + icon.offsetWidth / 2}px`;
+    tooltip.style.transform = "translate(-50%, -100%)";
+    tooltip.style.background = "rgba(0,0,0,0.85)";
+    tooltip.style.color = "#fff";
+    tooltip.style.padding = "4px 8px";
+    tooltip.style.borderRadius = "6px";
+    tooltip.style.fontSize = "11px";
+    tooltip.style.whiteSpace = "nowrap";
+    tooltip.style.pointerEvents = "none";
+    tooltip.style.opacity = "0";
+    tooltip.style.transition = "opacity 0.15s ease";
+    container.appendChild(tooltip);
+  }
+  tooltip.textContent = mark.toUpperCase();
+  if (isClickable) {
+    icon.style.cursor = "pointer";
+    icon.onmouseenter = () => {
+      tooltip.style.opacity = "1";
+    };
+    icon.onmouseleave = () => {
+      tooltip.style.opacity = "0";
+    };
+    icon.onclick = () => {
+      window.open(
+        `${satyamark_url}/${type}/${data.dataId}`,
+        "_blank"
+      );
+    };
+  } else {
+    icon.style.cursor = "default";
+    icon.onclick = null;
+    icon.onmouseenter = null;
+    icon.onmouseleave = null;
+    tooltip.style.opacity = "0";
+  }
+}
+onReceive((data) => {
+  var _a, _b;
+  if (!(data == null ? void 0 : data.jobId))
+    return;
+  updateIcon(data.jobId, (_b = (_a = data.mark) == null ? void 0 : _a.toLowerCase()) != null ? _b : "pending", data);
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  init,
+  onConnected,
+  onReceive,
+  process,
+  receiveData,
+  registerStatus,
+  sendData
+});

package/dist/index.mjs

@@ -0,0 +1,270 @@
+// src/satyamark_connect.ts
+var wsUrl = "wss://satyamark.onrender.com";
+var socket = null;
+var storedConnectionData = null;
+var listeners = [];
+var onConnectedCb = null;
+function onReceive(cb) {
+  listeners.push(cb);
+  return () => {
+    const idx = listeners.indexOf(cb);
+    if (idx !== -1)
+      listeners.splice(idx, 1);
+  };
+}
+function onConnected(cb) {
+  onConnectedCb = cb;
+}
+function init(connectionData, options) {
+  var _a;
+  if (socket && socket.readyState == WebSocket.OPEN && storedConnectionData == connectionData) {
+    console.log("Already Connected: ", connectionData);
+    return;
+  }
+  socket = new WebSocket(wsUrl);
+  onConnectedCb = (_a = options == null ? void 0 : options.onConnected) != null ? _a : onConnectedCb;
+  socket.onopen = () => {
+    console.log("Connected to server: ", connectionData.user_id);
+    safeSend({
+      type: "handshake",
+      clientId: connectionData.user_id,
+      appId: connectionData.app_id
+    });
+    onConnectedCb == null ? void 0 : onConnectedCb(connectionData);
+  };
+  socket.onmessage = (event) => {
+    receiveData(JSON.parse(event.data));
+  };
+  socket.onclose = () => {
+    console.log("Server connection closed");
+  };
+  storedConnectionData = connectionData;
+}
+function isSocketOpen() {
+  return socket && socket.readyState === WebSocket.OPEN;
+}
+function assert(condition, message) {
+  if (!condition)
+    throw new Error(message);
+}
+function safeSend(msg) {
+  if (!storedConnectionData) {
+    console.warn("No connectionData found. Call connect() first.");
+    return;
+  }
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    console.warn("Socket not ready");
+    return;
+  }
+  socket.send(JSON.stringify(msg));
+}
+function uniqueTimestamp() {
+  const now = /* @__PURE__ */ new Date();
+  const yyyy = now.getFullYear();
+  const MM = String(now.getMonth() + 1).padStart(2, "0");
+  const dd = String(now.getDate()).padStart(2, "0");
+  const hh = String(now.getHours()).padStart(2, "0");
+  const mm = String(now.getMinutes()).padStart(2, "0");
+  const ss = String(now.getSeconds()).padStart(2, "0");
+  const ms = String(now.getMilliseconds()).padStart(3, "0");
+  const micro = String(Math.floor(Math.random() * 1e3)).padStart(3, "0");
+  return `${yyyy}${MM}${dd}${hh}${mm}${ss}${ms}${micro}`;
+}
+function sendData(text, image_url, dataId) {
+  if (!storedConnectionData) {
+    console.log("No connectionData found. Call connect() first.");
+    return;
+  }
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    console.log("Socket not ready");
+    return;
+  }
+  assert(storedConnectionData, "Call init() before sendData()");
+  assert(isSocketOpen(), "WebSocket is not ready");
+  assert(dataId, "dataId is required");
+  assert(text || image_url, "Provide text or image_url");
+  if (text)
+    assert(text.trim().length >= 3, "Text must be at least 3 characters");
+  const { app_id, user_id } = storedConnectionData;
+  const timestamp = uniqueTimestamp();
+  const jobId = `${app_id}_${user_id}_${dataId}_${timestamp}`;
+  const data = {
+    clientId: user_id,
+    jobId,
+    text,
+    image_url
+  };
+  socket.send(JSON.stringify(data));
+  return jobId;
+}
+function receiveData(data) {
+  if (!storedConnectionData || data.clientId != storedConnectionData.user_id)
+    return;
+  for (const cb of Array.from(listeners)) {
+    try {
+      cb(data);
+    } catch (err) {
+      console.error("listener error", err);
+    }
+  }
+}
+
+// src/satyamark_process.ts
+var mergeText = (texts) => texts.join(", ");
+var isValidImageUrl = (url) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(true);
+    img.onerror = () => resolve(false);
+    img.src = url;
+  });
+};
+var getFirstValidImage = async (urls) => {
+  for (const url of urls) {
+    if (await isValidImageUrl(url))
+      return url;
+  }
+  return null;
+};
+var extractFromDiv = (root) => {
+  var _a;
+  const images = Array.from(root.querySelectorAll("img")).map((img) => img.src);
+  const text = [];
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let node;
+  while (node = walker.nextNode()) {
+    const trimmed = (_a = node.textContent) == null ? void 0 : _a.trim();
+    if (trimmed)
+      text.push(trimmed);
+  }
+  return { text, images };
+};
+async function process(divRef, dataId) {
+  if (!divRef) {
+    throw new Error("Invalid root element");
+  }
+  if (!dataId) {
+    throw new Error("dataId is required");
+  }
+  const { text, images } = extractFromDiv(divRef);
+  const mergedText = mergeText(text);
+  const validImage = await getFirstValidImage(images);
+  if (!mergedText && !validImage) {
+    throw new Error("No valid text or image found in the element");
+  }
+  if (mergedText && mergedText.length < 3) {
+    throw new Error("Extracted text is too short");
+  }
+  const jobId = sendData(mergedText, validImage != null ? validImage : "", dataId);
+  return jobId;
+}
+
+// src/satyamark_status_controller.ts
+import verifyableIcon from "./verifyable-AYGD2AEO.png";
+import unverifyableIcon from "./unverifyable-2LSQEVJT.png";
+import insufficientIcon from "./insufficient-FBXL3GLE.png";
+import correctIcon from "./correct-AW5V6TXB.png";
+import incorrectIcon from "./incorrect-KHIGXY2C.png";
+import pendingIcon from "./pending-SWS5I5G5.png";
+import aiIcon from "./ai-J46U5IDK.png";
+import nonaiIcon from "./nonai-LPEFMQBT.png";
+var jobMap = {};
+var DEFAULT_ICON_SIZE = 20;
+var satyamark_url = "https://satyamark.vercel.app/";
+var iconMap = {
+  verifyable: verifyableIcon,
+  unverifyable: unverifyableIcon,
+  insufficient: insufficientIcon,
+  correct: correctIcon,
+  incorrect: incorrectIcon,
+  pending: pendingIcon,
+  ai: aiIcon,
+  nonai: nonaiIcon
+};
+function registerStatus(jobId, rootElement, options = {}) {
+  var _a;
+  jobMap[jobId] = {
+    root: rootElement,
+    iconSize: (_a = options.iconSize) != null ? _a : DEFAULT_ICON_SIZE
+  };
+  updateIcon(jobId, "pending", null);
+}
+function updateIcon(jobId, mark, data) {
+  const entry = jobMap[jobId];
+  if (!entry)
+    return;
+  const { root, iconSize } = entry;
+  const container = root.querySelector("[data-satyamark-status-container]");
+  if (!container)
+    return;
+  container.style.position = "relative";
+  let icon = container.querySelector("img");
+  if (!icon) {
+    icon = document.createElement("img");
+    icon.alt = "status";
+    icon.style.objectFit = "contain";
+    icon.style.display = "block";
+    container.appendChild(icon);
+  }
+  icon.style.width = iconSize + "px";
+  icon.style.height = iconSize + "px";
+  icon.src = iconMap[mark] || iconMap["pending"];
+  const type = data == null ? void 0 : data.type;
+  const isValidType = type === "text" || type === "image";
+  const isClickable = !!(data == null ? void 0 : data.dataId) && isValidType && mark !== "pending";
+  let tooltip = container.querySelector(".satyamark-tooltip");
+  if (!tooltip) {
+    tooltip = document.createElement("div");
+    tooltip.style.position = "absolute";
+    tooltip.style.top = `${icon.offsetTop - 6}px`;
+    tooltip.style.left = `${icon.offsetLeft + icon.offsetWidth / 2}px`;
+    tooltip.style.transform = "translate(-50%, -100%)";
+    tooltip.style.background = "rgba(0,0,0,0.85)";
+    tooltip.style.color = "#fff";
+    tooltip.style.padding = "4px 8px";
+    tooltip.style.borderRadius = "6px";
+    tooltip.style.fontSize = "11px";
+    tooltip.style.whiteSpace = "nowrap";
+    tooltip.style.pointerEvents = "none";
+    tooltip.style.opacity = "0";
+    tooltip.style.transition = "opacity 0.15s ease";
+    container.appendChild(tooltip);
+  }
+  tooltip.textContent = mark.toUpperCase();
+  if (isClickable) {
+    icon.style.cursor = "pointer";
+    icon.onmouseenter = () => {
+      tooltip.style.opacity = "1";
+    };
+    icon.onmouseleave = () => {
+      tooltip.style.opacity = "0";
+    };
+    icon.onclick = () => {
+      window.open(
+        `${satyamark_url}/${type}/${data.dataId}`,
+        "_blank"
+      );
+    };
+  } else {
+    icon.style.cursor = "default";
+    icon.onclick = null;
+    icon.onmouseenter = null;
+    icon.onmouseleave = null;
+    tooltip.style.opacity = "0";
+  }
+}
+onReceive((data) => {
+  var _a, _b;
+  if (!(data == null ? void 0 : data.jobId))
+    return;
+  updateIcon(data.jobId, (_b = (_a = data.mark) == null ? void 0 : _a.toLowerCase()) != null ? _b : "pending", data);
+});
+export {
+  init,
+  onConnected,
+  onReceive,
+  process,
+  receiveData,
+  registerStatus,
+  sendData
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "satyamark-react",
+  "version": "0.0.1",
+  "description": "Official React SDK for SatyaMark — a lightweight UI library to embed transparent content verification marks, confidence indicators, and trust signals into React applications.",
+  "license": "MIT",
+  "author": "DK",
+  "homepage": "https://satyamark.vercel.app/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DhirajKarangale/SatyaMark.git"
+  },
+  "bugs": {
+    "url": "https://github.com/DhirajKarangale/SatyaMark/issues"
+  },
+  "keywords": [
+    "react",
+    "verification",
+    "trust",
+    "fact-checking",
+    "ai-detection",
+    "misinformation",
+    "sdk",
+    "ui-library",
+    "open-source",
+    "satyamark"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "public"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "tsup",
+    "build2": "tsup src/index.ts --format esm,cjs --dts",
+    "prepare": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.0",
+    "tsup": "^6.7.0",
+    "typescript": "^5.0.0"
+  }
+}