@coderegtech/jsonify-ws 1.5.3

package/dist/index.mjs

@@ -0,0 +1,411 @@
+// src/useJsonifyWs.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { io } from "socket.io-client";
+function resolveUrl(optionsUrl) {
+  if (optionsUrl) return optionsUrl;
+  if (typeof import.meta !== "undefined" && import.meta.env?.WSL_URL) {
+    return import.meta.env.WSL_URL;
+  }
+  if (typeof process !== "undefined" && process.env?.WSL_URL) {
+    return process.env.WSL_URL;
+  }
+  return "http://localhost:4000";
+}
+function useJsonifyWs(options = {}) {
+  const {
+    url: optionsUrl,
+    autoConnect = false,
+    initialData = {},
+    reconnectionDelay = 3e3,
+    onSync,
+    onStatusChange,
+    onError
+  } = options;
+  const resolvedUrl = resolveUrl(optionsUrl);
+  const [data, setDataState] = useState(initialData);
+  const [status, setStatus] = useState("disconnected");
+  const socketRef = useRef(null);
+  const isRemoteUpdate = useRef(false);
+  const dataRef = useRef(data);
+  dataRef.current = data;
+  const updateStatus = useCallback(
+    (s) => {
+      setStatus(s);
+      onStatusChange?.(s);
+    },
+    [onStatusChange]
+  );
+  const cleanup = useCallback(() => {
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+    }
+    updateStatus("disconnected");
+  }, [updateStatus]);
+  const connect = useCallback(
+    (overrideUrl) => {
+      cleanup();
+      const targetUrl = overrideUrl || resolvedUrl;
+      updateStatus("connecting");
+      const socket = io(targetUrl, {
+        reconnection: true,
+        reconnectionDelay,
+        reconnectionAttempts: Infinity
+      });
+      socketRef.current = socket;
+      socket.on("connect", () => {
+        updateStatus("connected");
+        socket.emit("update", dataRef.current);
+      });
+      socket.on("sync", (syncData) => {
+        isRemoteUpdate.current = true;
+        setDataState(syncData);
+        onSync?.(syncData);
+      });
+      socket.on("disconnect", () => {
+        updateStatus("disconnected");
+      });
+      socket.on("connect_error", (err) => {
+        onError?.(err);
+      });
+    },
+    [cleanup, resolvedUrl, reconnectionDelay, onSync, onStatusChange, onError]
+  );
+  const disconnect = useCallback(() => {
+    cleanup();
+  }, [cleanup]);
+  const setData = useCallback((newData) => {
+    setDataState(newData);
+  }, []);
+  useEffect(() => {
+    if (isRemoteUpdate.current) {
+      isRemoteUpdate.current = false;
+      return;
+    }
+    if (socketRef.current?.connected) {
+      socketRef.current.emit("update", data);
+    }
+  }, [data]);
+  useEffect(() => {
+    if (autoConnect) {
+      connect();
+    }
+    return () => {
+      cleanup();
+    };
+  }, []);
+  return {
+    data,
+    setData,
+    status,
+    connect,
+    disconnect,
+    url: resolvedUrl
+  };
+}
+
+// src/useJsonify.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { io as io2 } from "socket.io-client";
+
+// src/data-copy.ts
+function getByPath(obj, path) {
+  const keys = path.split(".");
+  let current = obj;
+  for (const key of keys) {
+    if (current === null || current === void 0 || typeof current !== "object" || Array.isArray(current)) {
+      return void 0;
+    }
+    current = current[key];
+  }
+  return current;
+}
+function setByPath(obj, path, value) {
+  const keys = path.split(".");
+  const result = { ...obj };
+  if (keys.length === 1) {
+    result[keys[0]] = value;
+    return result;
+  }
+  let current = result;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    const next = current[key];
+    if (next && typeof next === "object" && !Array.isArray(next)) {
+      current[key] = { ...next };
+      current = current[key];
+    } else {
+      current[key] = {};
+      current = current[key];
+    }
+  }
+  current[keys[keys.length - 1]] = value;
+  return result;
+}
+function scanDataCopyElements(doc) {
+  const elements = doc.querySelectorAll("[data-copy]");
+  return Array.from(elements).map((el) => ({
+    element: el,
+    path: el.getAttribute("data-copy") || "",
+    originalValue: el.textContent || ""
+  }));
+}
+function enableEditMode(elements) {
+  for (const { element } of elements) {
+    element.contentEditable = "true";
+    element.style.outline = "2px dashed hsl(var(--primary, 210 100% 50%))";
+    element.style.outlineOffset = "2px";
+    element.style.cursor = "text";
+    element.style.borderRadius = "2px";
+    element.style.transition = "outline-color 0.2s";
+    element.setAttribute("data-copy-active", "true");
+  }
+}
+function disableEditMode(elements) {
+  for (const { element } of elements) {
+    element.contentEditable = "false";
+    element.style.outline = "";
+    element.style.outlineOffset = "";
+    element.style.cursor = "";
+    element.style.borderRadius = "";
+    element.style.transition = "";
+    element.removeAttribute("data-copy-active");
+  }
+}
+function syncElementsFromData(elements, data) {
+  for (const item of elements) {
+    const val = getByPath(data, item.path);
+    if (val !== void 0 && typeof val === "string") {
+      if (item.element.textContent !== val) {
+        item.element.textContent = val;
+      }
+    }
+  }
+}
+function injectEditToggle(doc, onToggle) {
+  const btn = doc.createElement("button");
+  btn.id = "jsonify-edit-toggle";
+  btn.textContent = "\u270F\uFE0F Edit Mode";
+  btn.style.cssText = `
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 99999;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 8px;
+    background: hsl(210, 100%, 50%);
+    color: white;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    transition: all 0.2s;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  `;
+  let active = false;
+  btn.addEventListener("click", () => {
+    active = !active;
+    btn.textContent = active ? "\u2705 Editing" : "\u270F\uFE0F Edit Mode";
+    btn.style.background = active ? "hsl(140, 60%, 45%)" : "hsl(210, 100%, 50%)";
+    onToggle(active);
+  });
+  doc.body.appendChild(btn);
+  return () => {
+    btn.remove();
+  };
+}
+
+// src/useJsonify.ts
+function resolveUrl2(optionsUrl) {
+  if (optionsUrl) return optionsUrl;
+  if (typeof import.meta !== "undefined" && import.meta.env?.VITE_WSL_URL) {
+    return import.meta.env.VITE_WSL_URL;
+  }
+  if (typeof import.meta !== "undefined" && import.meta.env?.WSL_URL) {
+    return import.meta.env.WSL_URL;
+  }
+  if (typeof process !== "undefined" && process.env?.REACT_APP_WSL_URL) {
+    return process.env.REACT_APP_WSL_URL;
+  }
+  if (typeof process !== "undefined" && process.env?.WSL_URL) {
+    return process.env.WSL_URL;
+  }
+  return "http://localhost:4000";
+}
+function useJsonify(options = {}) {
+  const {
+    url: optionsUrl,
+    autoConnect = false,
+    initialData = {},
+    reconnectionDelay = 3e3,
+    onSync,
+    onStatusChange,
+    onError,
+    targetDocument,
+    injectToggle = true
+  } = options;
+  const resolvedUrl = resolveUrl2(optionsUrl);
+  const [data, setDataState] = useState2(initialData);
+  const [status, setStatus] = useState2("disconnected");
+  const [editMode, setEditModeState] = useState2(false);
+  const [elements, setElements] = useState2([]);
+  const socketRef = useRef2(null);
+  const isRemoteUpdate = useRef2(false);
+  const dataRef = useRef2(data);
+  const editModeRef = useRef2(editMode);
+  const elementsRef = useRef2(elements);
+  const cleanupToggleRef = useRef2(null);
+  dataRef.current = data;
+  editModeRef.current = editMode;
+  elementsRef.current = elements;
+  const updateStatus = useCallback2(
+    (s) => {
+      setStatus(s);
+      onStatusChange?.(s);
+    },
+    [onStatusChange]
+  );
+  const cleanup = useCallback2(() => {
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+    }
+    updateStatus("disconnected");
+  }, [updateStatus]);
+  const connect = useCallback2(
+    (overrideUrl) => {
+      cleanup();
+      const targetUrl = overrideUrl || resolvedUrl;
+      updateStatus("connecting");
+      const socket = io2(targetUrl, {
+        reconnection: true,
+        reconnectionDelay,
+        reconnectionAttempts: Infinity
+      });
+      socketRef.current = socket;
+      socket.on("connect", () => {
+        updateStatus("connected");
+        socket.emit("update", dataRef.current);
+      });
+      socket.on("sync", (syncData) => {
+        isRemoteUpdate.current = true;
+        setDataState(syncData);
+        onSync?.(syncData);
+        if (editModeRef.current) {
+          syncElementsFromData(elementsRef.current, syncData);
+        }
+      });
+      socket.on("disconnect", () => {
+        updateStatus("disconnected");
+      });
+      socket.on("connect_error", (err) => {
+        onError?.(err);
+      });
+    },
+    [cleanup, resolvedUrl, reconnectionDelay, onSync, onStatusChange, onError]
+  );
+  const disconnect = useCallback2(() => {
+    cleanup();
+  }, [cleanup]);
+  const setData = useCallback2((newData) => {
+    setDataState(newData);
+  }, []);
+  const setPath = useCallback2((path, value) => {
+    setDataState((prev) => setByPath(prev, path, value));
+  }, []);
+  useEffect2(() => {
+    if (isRemoteUpdate.current) {
+      isRemoteUpdate.current = false;
+      return;
+    }
+    if (socketRef.current?.connected) {
+      socketRef.current.emit("update", data);
+    }
+  }, [data]);
+  useEffect2(() => {
+    if (autoConnect) {
+      connect();
+    }
+    return () => {
+      cleanup();
+    };
+  }, []);
+  const rescan = useCallback2(() => {
+    const doc = targetDocument || (typeof document !== "undefined" ? document : null);
+    if (!doc) return;
+    const found = scanDataCopyElements(doc);
+    setElements(found);
+    return found;
+  }, [targetDocument]);
+  const setEditMode = useCallback2(
+    (active) => {
+      setEditModeState(active);
+      const currentElements = elementsRef.current.length > 0 ? elementsRef.current : rescan() || [];
+      if (active) {
+        enableEditMode(currentElements);
+        syncElementsFromData(currentElements, dataRef.current);
+        for (const item of currentElements) {
+          const handler = () => {
+            const newVal = item.element.textContent || "";
+            setDataState((prev) => setByPath(prev, item.path, newVal));
+          };
+          item.element.addEventListener("input", handler);
+          item.element.__jsonifyHandler = handler;
+        }
+      } else {
+        for (const item of currentElements) {
+          if (item.element.__jsonifyHandler) {
+            item.element.removeEventListener("input", item.element.__jsonifyHandler);
+            delete item.element.__jsonifyHandler;
+          }
+        }
+        disableEditMode(currentElements);
+      }
+    },
+    [rescan]
+  );
+  const toggleEditMode = useCallback2(() => {
+    setEditMode(!editModeRef.current);
+  }, [setEditMode]);
+  useEffect2(() => {
+    if (!injectToggle) return;
+    const doc = targetDocument || (typeof document !== "undefined" ? document : null);
+    if (!doc) return;
+    cleanupToggleRef.current = injectEditToggle(doc, (active) => {
+      setEditMode(active);
+    });
+    return () => {
+      cleanupToggleRef.current?.();
+    };
+  }, [injectToggle, targetDocument, setEditMode]);
+  useEffect2(() => {
+    rescan();
+  }, [rescan]);
+  return {
+    data,
+    setData,
+    setPath,
+    status,
+    connect,
+    disconnect,
+    url: resolvedUrl,
+    editMode,
+    toggleEditMode,
+    setEditMode,
+    elements,
+    rescan
+  };
+}
+export {
+  disableEditMode,
+  enableEditMode,
+  getByPath,
+  injectEditToggle,
+  scanDataCopyElements,
+  setByPath,
+  syncElementsFromData,
+  useJsonify,
+  useJsonifyWs
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useJsonifyWs.ts","../src/useJsonify.ts","../src/data-copy.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport { io, Socket } from \"socket.io-client\";\r\nimport type { JsonifyWsOptions, JsonifyWsReturn, JsonValue, WsStatus } from \"./types\";\r\n\r\n/**\r\n * Get the WebSocket URL from options or environment.\r\n * Priority: options.url > WSL_URL env > fallback\r\n */\r\nfunction resolveUrl(optionsUrl?: string): string {\r\n  if (optionsUrl) return optionsUrl;\r\n\r\n  // Support Vite env\r\n  if (typeof import.meta !== \"undefined\" && (import.meta as any).env?.WSL_URL) {\r\n    return (import.meta as any).env.WSL_URL;\r\n  }\r\n\r\n  // Support process.env (Node / CRA / Next.js)\r\n  if (typeof process !== \"undefined\" && process.env?.WSL_URL) {\r\n    return process.env.WSL_URL;\r\n  }\r\n\r\n  return \"http://localhost:4000\";\r\n}\r\n\r\n/**\r\n * React hook for real-time JSON synchronization over WebSocket.\r\n *\r\n * @example\r\n * ```tsx\r\n * import { useJsonifyWs } from \"jsonify-ws\";\r\n *\r\n * function App() {\r\n *   const { data, setData, status, connect, disconnect } = useJsonifyWs({\r\n *     autoConnect: true,\r\n *     initialData: { hello: \"world\" },\r\n *   });\r\n *\r\n *   return <pre>{JSON.stringify(data, null, 2)}</pre>;\r\n * }\r\n * ```\r\n */\r\nexport function useJsonifyWs(options: JsonifyWsOptions = {}): JsonifyWsReturn {\r\n  const {\r\n    url: optionsUrl,\r\n    autoConnect = false,\r\n    initialData = {},\r\n    reconnectionDelay = 3000,\r\n    onSync,\r\n    onStatusChange,\r\n    onError,\r\n  } = options;\r\n\r\n  const resolvedUrl = resolveUrl(optionsUrl);\r\n  const [data, setDataState] = useState<JsonValue>(initialData);\r\n  const [status, setStatus] = useState<WsStatus>(\"disconnected\");\r\n  const socketRef = useRef<Socket | null>(null);\r\n  const isRemoteUpdate = useRef(false);\r\n  const dataRef = useRef(data);\r\n\r\n  // Keep dataRef in sync\r\n  dataRef.current = data;\r\n\r\n  // Notify status changes\r\n  const updateStatus = useCallback(\r\n    (s: WsStatus) => {\r\n      setStatus(s);\r\n      onStatusChange?.(s);\r\n    },\r\n    [onStatusChange],\r\n  );\r\n\r\n  const cleanup = useCallback(() => {\r\n    if (socketRef.current) {\r\n      socketRef.current.disconnect();\r\n      socketRef.current = null;\r\n    }\r\n    updateStatus(\"disconnected\");\r\n  }, [updateStatus]);\r\n\r\n  const connect = useCallback(\r\n    (overrideUrl?: string) => {\r\n      cleanup();\r\n      const targetUrl = overrideUrl || resolvedUrl;\r\n      updateStatus(\"connecting\");\r\n\r\n      const socket = io(targetUrl, {\r\n        reconnection: true,\r\n        reconnectionDelay,\r\n        reconnectionAttempts: Infinity,\r\n      });\r\n      socketRef.current = socket;\r\n\r\n      socket.on(\"connect\", () => {\r\n        updateStatus(\"connected\");\r\n        socket.emit(\"update\", dataRef.current);\r\n      });\r\n\r\n      socket.on(\"sync\", (syncData: JsonValue) => {\r\n        isRemoteUpdate.current = true;\r\n        setDataState(syncData);\r\n        onSync?.(syncData);\r\n      });\r\n\r\n      socket.on(\"disconnect\", () => {\r\n        updateStatus(\"disconnected\");\r\n      });\r\n\r\n      socket.on(\"connect_error\", (err) => {\r\n        onError?.(err);\r\n      });\r\n    },\r\n    [cleanup, resolvedUrl, reconnectionDelay, onSync, onStatusChange, onError],\r\n  );\r\n\r\n  const disconnect = useCallback(() => {\r\n    cleanup();\r\n  }, [cleanup]);\r\n\r\n  // Public setData — updates local + broadcasts\r\n  const setData = useCallback((newData: JsonValue) => {\r\n    setDataState(newData);\r\n  }, []);\r\n\r\n  // Broadcast local changes\r\n  useEffect(() => {\r\n    if (isRemoteUpdate.current) {\r\n      isRemoteUpdate.current = false;\r\n      return;\r\n    }\r\n    if (socketRef.current?.connected) {\r\n      socketRef.current.emit(\"update\", data);\r\n    }\r\n  }, [data]);\r\n\r\n  // Auto-connect\r\n  useEffect(() => {\r\n    if (autoConnect) {\r\n      connect();\r\n    }\r\n    return () => {\r\n      cleanup();\r\n    };\r\n  }, []);\r\n\r\n  return {\r\n    data,\r\n    setData,\r\n    status,\r\n    connect,\r\n    disconnect,\r\n    url: resolvedUrl,\r\n  };\r\n}\r\n","import { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport { io, Socket } from \"socket.io-client\";\r\nimport type { JsonValue, WsStatus } from \"./types\";\r\nimport {\r\n  scanDataCopyElements,\r\n  enableEditMode,\r\n  disableEditMode,\r\n  syncElementsFromData,\r\n  setByPath,\r\n  injectEditToggle,\r\n  type DataCopyElement,\r\n} from \"./data-copy\";\r\n\r\nexport interface UseJsonifyOptions {\r\n  /**\r\n   * WebSocket server URL. Defaults to WSL_URL env variable.\r\n   * Falls back to \"http://localhost:4000\" if not set.\r\n   */\r\n  url?: string;\r\n\r\n  /**\r\n   * Auto-connect on mount. Default: false\r\n   */\r\n  autoConnect?: boolean;\r\n\r\n  /**\r\n   * Initial JSON data. Default: {}\r\n   */\r\n  initialData?: Record<string, JsonValue>;\r\n\r\n  /**\r\n   * Reconnection delay in ms. Default: 3000\r\n   */\r\n  reconnectionDelay?: number;\r\n\r\n  /**\r\n   * Callback fired when remote data is received.\r\n   */\r\n  onSync?: (data: Record<string, JsonValue>) => void;\r\n\r\n  /**\r\n   * Callback fired when connection status changes.\r\n   */\r\n  onStatusChange?: (status: WsStatus) => void;\r\n\r\n  /**\r\n   * Callback fired on connection error.\r\n   */\r\n  onError?: (error: Error) => void;\r\n\r\n  /**\r\n   * Target document for data-copy scanning.\r\n   * Defaults to window.document.\r\n   * Pass an iframe's contentDocument to scan an iframe.\r\n   */\r\n  targetDocument?: Document;\r\n\r\n  /**\r\n   * Auto-inject the floating edit toggle button. Default: true\r\n   */\r\n  injectToggle?: boolean;\r\n}\r\n\r\nexport interface UseJsonifyReturn {\r\n  /** Current JSON data state */\r\n  data: Record<string, JsonValue>;\r\n  /** Update the JSON data (will broadcast to peers) */\r\n  setData: (data: Record<string, JsonValue>) => void;\r\n  /** Update a single path in the data */\r\n  setPath: (path: string, value: JsonValue) => void;\r\n  /** Current connection status */\r\n  status: WsStatus;\r\n  /** Connect to the WebSocket server */\r\n  connect: (url?: string) => void;\r\n  /** Disconnect from the WebSocket server */\r\n  disconnect: () => void;\r\n  /** The resolved WebSocket URL */\r\n  url: string;\r\n  /** Whether edit mode is active */\r\n  editMode: boolean;\r\n  /** Toggle edit mode on/off */\r\n  toggleEditMode: () => void;\r\n  /** Set edit mode explicitly */\r\n  setEditMode: (active: boolean) => void;\r\n  /** Scanned data-copy elements */\r\n  elements: DataCopyElement[];\r\n  /** Re-scan the document for data-copy elements */\r\n  rescan: () => void;\r\n}\r\n\r\nfunction resolveUrl(optionsUrl?: string): string {\r\n  if (optionsUrl) return optionsUrl;\r\n\r\n  // Support Vite env\r\n  if (typeof import.meta !== \"undefined\" && (import.meta as any).env?.VITE_WSL_URL) {\r\n    return (import.meta as any).env.VITE_WSL_URL;\r\n  }\r\n  if (typeof import.meta !== \"undefined\" && (import.meta as any).env?.WSL_URL) {\r\n    return (import.meta as any).env.WSL_URL;\r\n  }\r\n\r\n  // Support process.env (Node / CRA / Next.js)\r\n  if (typeof process !== \"undefined\" && process.env?.REACT_APP_WSL_URL) {\r\n    return process.env.REACT_APP_WSL_URL;\r\n  }\r\n  if (typeof process !== \"undefined\" && process.env?.WSL_URL) {\r\n    return process.env.WSL_URL;\r\n  }\r\n\r\n  return \"http://localhost:4000\";\r\n}\r\n\r\n/**\r\n * React hook for real-time JSON synchronization with data-copy attribute support.\r\n *\r\n * @example\r\n * ```tsx\r\n * import { useJsonify } from \"jsonify-ws\";\r\n *\r\n * function App() {\r\n *   const j = useJsonify({\r\n *     autoConnect: true,\r\n *     initialData: { home: { title: \"Hello\" } },\r\n *   });\r\n *\r\n *   return (\r\n *     <div>\r\n *       <p>Status: {j.status}</p>\r\n *       <button onClick={j.toggleEditMode}>\r\n *         {j.editMode ? \"Stop Editing\" : \"Edit Mode\"}\r\n *       </button>\r\n *       <h1 data-copy=\"home.title\">{j.data.home?.title}</h1>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useJsonify(options: UseJsonifyOptions = {}): UseJsonifyReturn {\r\n  const {\r\n    url: optionsUrl,\r\n    autoConnect = false,\r\n    initialData = {},\r\n    reconnectionDelay = 3000,\r\n    onSync,\r\n    onStatusChange,\r\n    onError,\r\n    targetDocument,\r\n    injectToggle = true,\r\n  } = options;\r\n\r\n  const resolvedUrl = resolveUrl(optionsUrl);\r\n  const [data, setDataState] = useState<Record<string, JsonValue>>(initialData);\r\n  const [status, setStatus] = useState<WsStatus>(\"disconnected\");\r\n  const [editMode, setEditModeState] = useState(false);\r\n  const [elements, setElements] = useState<DataCopyElement[]>([]);\r\n\r\n  const socketRef = useRef<Socket | null>(null);\r\n  const isRemoteUpdate = useRef(false);\r\n  const dataRef = useRef(data);\r\n  const editModeRef = useRef(editMode);\r\n  const elementsRef = useRef(elements);\r\n  const cleanupToggleRef = useRef<(() => void) | null>(null);\r\n\r\n  dataRef.current = data;\r\n  editModeRef.current = editMode;\r\n  elementsRef.current = elements;\r\n\r\n  const updateStatus = useCallback(\r\n    (s: WsStatus) => {\r\n      setStatus(s);\r\n      onStatusChange?.(s);\r\n    },\r\n    [onStatusChange],\r\n  );\r\n\r\n  const cleanup = useCallback(() => {\r\n    if (socketRef.current) {\r\n      socketRef.current.disconnect();\r\n      socketRef.current = null;\r\n    }\r\n    updateStatus(\"disconnected\");\r\n  }, [updateStatus]);\r\n\r\n  const connect = useCallback(\r\n    (overrideUrl?: string) => {\r\n      cleanup();\r\n      const targetUrl = overrideUrl || resolvedUrl;\r\n      updateStatus(\"connecting\");\r\n\r\n      const socket = io(targetUrl, {\r\n        reconnection: true,\r\n        reconnectionDelay,\r\n        reconnectionAttempts: Infinity,\r\n      });\r\n      socketRef.current = socket;\r\n\r\n      socket.on(\"connect\", () => {\r\n        updateStatus(\"connected\");\r\n        socket.emit(\"update\", dataRef.current);\r\n      });\r\n\r\n      socket.on(\"sync\", (syncData: Record<string, JsonValue>) => {\r\n        isRemoteUpdate.current = true;\r\n        setDataState(syncData);\r\n        onSync?.(syncData);\r\n        // Sync data-copy elements with new data\r\n        if (editModeRef.current) {\r\n          syncElementsFromData(elementsRef.current, syncData);\r\n        }\r\n      });\r\n\r\n      socket.on(\"disconnect\", () => {\r\n        updateStatus(\"disconnected\");\r\n      });\r\n\r\n      socket.on(\"connect_error\", (err) => {\r\n        onError?.(err);\r\n      });\r\n    },\r\n    [cleanup, resolvedUrl, reconnectionDelay, onSync, onStatusChange, onError],\r\n  );\r\n\r\n  const disconnect = useCallback(() => {\r\n    cleanup();\r\n  }, [cleanup]);\r\n\r\n  const setData = useCallback((newData: Record<string, JsonValue>) => {\r\n    setDataState(newData);\r\n  }, []);\r\n\r\n  const setPath = useCallback((path: string, value: JsonValue) => {\r\n    setDataState((prev) => setByPath(prev, path, value));\r\n  }, []);\r\n\r\n  // Broadcast local changes\r\n  useEffect(() => {\r\n    if (isRemoteUpdate.current) {\r\n      isRemoteUpdate.current = false;\r\n      return;\r\n    }\r\n    if (socketRef.current?.connected) {\r\n      socketRef.current.emit(\"update\", data);\r\n    }\r\n  }, [data]);\r\n\r\n  // Auto-connect\r\n  useEffect(() => {\r\n    if (autoConnect) {\r\n      connect();\r\n    }\r\n    return () => {\r\n      cleanup();\r\n    };\r\n  }, []);\r\n\r\n  // Scan for data-copy elements\r\n  const rescan = useCallback(() => {\r\n    const doc = targetDocument || (typeof document !== \"undefined\" ? document : null);\r\n    if (!doc) return;\r\n    const found = scanDataCopyElements(doc);\r\n    setElements(found);\r\n    return found;\r\n  }, [targetDocument]);\r\n\r\n  // Handle edit mode toggle\r\n  const setEditMode = useCallback(\r\n    (active: boolean) => {\r\n      setEditModeState(active);\r\n      const currentElements = elementsRef.current.length > 0 ? elementsRef.current : (rescan() || []);\r\n\r\n      if (active) {\r\n        enableEditMode(currentElements);\r\n        syncElementsFromData(currentElements, dataRef.current);\r\n\r\n        // Attach input listeners\r\n        for (const item of currentElements) {\r\n          const handler = () => {\r\n            const newVal = item.element.textContent || \"\";\r\n            setDataState((prev) => setByPath(prev, item.path, newVal));\r\n          };\r\n          item.element.addEventListener(\"input\", handler);\r\n          (item.element as any).__jsonifyHandler = handler;\r\n        }\r\n      } else {\r\n        // Remove input listeners\r\n        for (const item of currentElements) {\r\n          if ((item.element as any).__jsonifyHandler) {\r\n            item.element.removeEventListener(\"input\", (item.element as any).__jsonifyHandler);\r\n            delete (item.element as any).__jsonifyHandler;\r\n          }\r\n        }\r\n        disableEditMode(currentElements);\r\n      }\r\n    },\r\n    [rescan],\r\n  );\r\n\r\n  const toggleEditMode = useCallback(() => {\r\n    setEditMode(!editModeRef.current);\r\n  }, [setEditMode]);\r\n\r\n  // Inject floating toggle button\r\n  useEffect(() => {\r\n    if (!injectToggle) return;\r\n    const doc = targetDocument || (typeof document !== \"undefined\" ? document : null);\r\n    if (!doc) return;\r\n\r\n    cleanupToggleRef.current = injectEditToggle(doc, (active) => {\r\n      setEditMode(active);\r\n    });\r\n\r\n    return () => {\r\n      cleanupToggleRef.current?.();\r\n    };\r\n  }, [injectToggle, targetDocument, setEditMode]);\r\n\r\n  // Initial scan\r\n  useEffect(() => {\r\n    rescan();\r\n  }, [rescan]);\r\n\r\n  return {\r\n    data,\r\n    setData,\r\n    setPath,\r\n    status,\r\n    connect,\r\n    disconnect,\r\n    url: resolvedUrl,\r\n    editMode,\r\n    toggleEditMode,\r\n    setEditMode,\r\n    elements,\r\n    rescan,\r\n  };\r\n}\r\n","/**\r\n * data-copy attribute utilities.\r\n *\r\n * Scans a document (or iframe) for elements with `data-copy=\"path.to.key\"`\r\n * and enables contentEditable on them, syncing edits back to the JSON state.\r\n */\r\n\r\nimport type { JsonValue } from \"./types\";\r\n\r\nexport interface DataCopyElement {\r\n  element: HTMLElement;\r\n  path: string;\r\n  originalValue: string;\r\n}\r\n\r\n/**\r\n * Get a value from a nested object by dot-path.\r\n * e.g. getByPath({ home: { title: \"Hi\" } }, \"home.title\") => \"Hi\"\r\n */\r\nexport function getByPath(obj: Record<string, JsonValue>, path: string): JsonValue | undefined {\r\n  const keys = path.split(\".\");\r\n  let current: JsonValue = obj;\r\n  for (const key of keys) {\r\n    if (current === null || current === undefined || typeof current !== \"object\" || Array.isArray(current)) {\r\n      return undefined;\r\n    }\r\n    current = (current as Record<string, JsonValue>)[key];\r\n  }\r\n  return current;\r\n}\r\n\r\n/**\r\n * Set a value in a nested object by dot-path (immutable — returns new object).\r\n */\r\nexport function setByPath(obj: Record<string, JsonValue>, path: string, value: JsonValue): Record<string, JsonValue> {\r\n  const keys = path.split(\".\");\r\n  const result = { ...obj };\r\n\r\n  if (keys.length === 1) {\r\n    result[keys[0]] = value;\r\n    return result;\r\n  }\r\n\r\n  let current: Record<string, JsonValue> = result;\r\n  for (let i = 0; i < keys.length - 1; i++) {\r\n    const key = keys[i];\r\n    const next = current[key];\r\n    if (next && typeof next === \"object\" && !Array.isArray(next)) {\r\n      current[key] = { ...(next as Record<string, JsonValue>) };\r\n      current = current[key] as Record<string, JsonValue>;\r\n    } else {\r\n      current[key] = {};\r\n      current = current[key] as Record<string, JsonValue>;\r\n    }\r\n  }\r\n  current[keys[keys.length - 1]] = value;\r\n  return result;\r\n}\r\n\r\n/**\r\n * Scan a document for elements with `data-copy` attribute.\r\n */\r\nexport function scanDataCopyElements(doc: Document): DataCopyElement[] {\r\n  const elements = doc.querySelectorAll<HTMLElement>(\"[data-copy]\");\r\n  return Array.from(elements).map((el) => ({\r\n    element: el,\r\n    path: el.getAttribute(\"data-copy\") || \"\",\r\n    originalValue: el.textContent || \"\",\r\n  }));\r\n}\r\n\r\n/**\r\n * Apply contentEditable styling to data-copy elements.\r\n */\r\nexport function enableEditMode(elements: DataCopyElement[]): void {\r\n  for (const { element } of elements) {\r\n    element.contentEditable = \"true\";\r\n    element.style.outline = \"2px dashed hsl(var(--primary, 210 100% 50%))\";\r\n    element.style.outlineOffset = \"2px\";\r\n    element.style.cursor = \"text\";\r\n    element.style.borderRadius = \"2px\";\r\n    element.style.transition = \"outline-color 0.2s\";\r\n    element.setAttribute(\"data-copy-active\", \"true\");\r\n  }\r\n}\r\n\r\n/**\r\n * Remove contentEditable styling from data-copy elements.\r\n */\r\nexport function disableEditMode(elements: DataCopyElement[]): void {\r\n  for (const { element } of elements) {\r\n    element.contentEditable = \"false\";\r\n    element.style.outline = \"\";\r\n    element.style.outlineOffset = \"\";\r\n    element.style.cursor = \"\";\r\n    element.style.borderRadius = \"\";\r\n    element.style.transition = \"\";\r\n    element.removeAttribute(\"data-copy-active\");\r\n  }\r\n}\r\n\r\n/**\r\n * Update element text content from JSON data.\r\n */\r\nexport function syncElementsFromData(\r\n  elements: DataCopyElement[],\r\n  data: Record<string, JsonValue>,\r\n): void {\r\n  for (const item of elements) {\r\n    const val = getByPath(data, item.path);\r\n    if (val !== undefined && typeof val === \"string\") {\r\n      if (item.element.textContent !== val) {\r\n        item.element.textContent = val;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * Inject a floating \"Edit Mode\" toggle button into the page.\r\n * Returns a cleanup function.\r\n */\r\nexport function injectEditToggle(\r\n  doc: Document,\r\n  onToggle: (active: boolean) => void,\r\n): () => void {\r\n  const btn = doc.createElement(\"button\");\r\n  btn.id = \"jsonify-edit-toggle\";\r\n  btn.textContent = \"✏️ Edit Mode\";\r\n  btn.style.cssText = `\r\n    position: fixed;\r\n    bottom: 20px;\r\n    right: 20px;\r\n    z-index: 99999;\r\n    padding: 8px 16px;\r\n    border: none;\r\n    border-radius: 8px;\r\n    background: hsl(210, 100%, 50%);\r\n    color: white;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n    transition: all 0.2s;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n  `;\r\n\r\n  let active = false;\r\n  btn.addEventListener(\"click\", () => {\r\n    active = !active;\r\n    btn.textContent = active ? \"✅ Editing\" : \"✏️ Edit Mode\";\r\n    btn.style.background = active ? \"hsl(140, 60%, 45%)\" : \"hsl(210, 100%, 50%)\";\r\n    onToggle(active);\r\n  });\r\n\r\n  doc.body.appendChild(btn);\r\n\r\n  return () => {\r\n    btn.remove();\r\n  };\r\n}\r\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AACzD,SAAS,UAAkB;AAO3B,SAAS,WAAW,YAA6B;AAC/C,MAAI,WAAY,QAAO;AAGvB,MAAI,OAAO,gBAAgB,eAAgB,YAAoB,KAAK,SAAS;AAC3E,WAAQ,YAAoB,IAAI;AAAA,EAClC;AAGA,MAAI,OAAO,YAAY,eAAe,QAAQ,KAAK,SAAS;AAC1D,WAAO,QAAQ,IAAI;AAAA,EACrB;AAEA,SAAO;AACT;AAmBO,SAAS,aAAa,UAA4B,CAAC,GAAoB;AAC5E,QAAM;AAAA,IACJ,KAAK;AAAA,IACL,cAAc;AAAA,IACd,cAAc,CAAC;AAAA,IACf,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,WAAW,UAAU;AACzC,QAAM,CAAC,MAAM,YAAY,IAAI,SAAoB,WAAW;AAC5D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmB,cAAc;AAC7D,QAAM,YAAY,OAAsB,IAAI;AAC5C,QAAM,iBAAiB,OAAO,KAAK;AACnC,QAAM,UAAU,OAAO,IAAI;AAG3B,UAAQ,UAAU;AAGlB,QAAM,eAAe;AAAA,IACnB,CAAC,MAAgB;AACf,gBAAU,CAAC;AACX,uBAAiB,CAAC;AAAA,IACpB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,UAAU,SAAS;AACrB,gBAAU,QAAQ,WAAW;AAC7B,gBAAU,UAAU;AAAA,IACtB;AACA,iBAAa,cAAc;AAAA,EAC7B,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,UAAU;AAAA,IACd,CAAC,gBAAyB;AACxB,cAAQ;AACR,YAAM,YAAY,eAAe;AACjC,mBAAa,YAAY;AAEzB,YAAM,SAAS,GAAG,WAAW;AAAA,QAC3B,cAAc;AAAA,QACd;AAAA,QACA,sBAAsB;AAAA,MACxB,CAAC;AACD,gBAAU,UAAU;AAEpB,aAAO,GAAG,WAAW,MAAM;AACzB,qBAAa,WAAW;AACxB,eAAO,KAAK,UAAU,QAAQ,OAAO;AAAA,MACvC,CAAC;AAED,aAAO,GAAG,QAAQ,CAAC,aAAwB;AACzC,uBAAe,UAAU;AACzB,qBAAa,QAAQ;AACrB,iBAAS,QAAQ;AAAA,MACnB,CAAC;AAED,aAAO,GAAG,cAAc,MAAM;AAC5B,qBAAa,cAAc;AAAA,MAC7B,CAAC;AAED,aAAO,GAAG,iBAAiB,CAAC,QAAQ;AAClC,kBAAU,GAAG;AAAA,MACf,CAAC;AAAA,IACH;AAAA,IACA,CAAC,SAAS,aAAa,mBAAmB,QAAQ,gBAAgB,OAAO;AAAA,EAC3E;AAEA,QAAM,aAAa,YAAY,MAAM;AACnC,YAAQ;AAAA,EACV,GAAG,CAAC,OAAO,CAAC;AAGZ,QAAM,UAAU,YAAY,CAAC,YAAuB;AAClD,iBAAa,OAAO;AAAA,EACtB,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,qBAAe,UAAU;AACzB;AAAA,IACF;AACA,QAAI,UAAU,SAAS,WAAW;AAChC,gBAAU,QAAQ,KAAK,UAAU,IAAI;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,YAAU,MAAM;AACd,QAAI,aAAa;AACf,cAAQ;AAAA,IACV;AACA,WAAO,MAAM;AACX,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,EACP;AACF;;;ACxJA,SAAS,eAAAA,cAAa,aAAAC,YAAW,UAAAC,SAAQ,YAAAC,iBAAgB;AACzD,SAAS,MAAAC,WAAkB;;;ACkBpB,SAAS,UAAU,KAAgC,MAAqC;AAC7F,QAAM,OAAO,KAAK,MAAM,GAAG;AAC3B,MAAI,UAAqB;AACzB,aAAW,OAAO,MAAM;AACtB,QAAI,YAAY,QAAQ,YAAY,UAAa,OAAO,YAAY,YAAY,MAAM,QAAQ,OAAO,GAAG;AACtG,aAAO;AAAA,IACT;AACA,cAAW,QAAsC,GAAG;AAAA,EACtD;AACA,SAAO;AACT;AAKO,SAAS,UAAU,KAAgC,MAAc,OAA6C;AACnH,QAAM,OAAO,KAAK,MAAM,GAAG;AAC3B,QAAM,SAAS,EAAE,GAAG,IAAI;AAExB,MAAI,KAAK,WAAW,GAAG;AACrB,WAAO,KAAK,CAAC,CAAC,IAAI;AAClB,WAAO;AAAA,EACT;AAEA,MAAI,UAAqC;AACzC,WAAS,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,KAAK;AACxC,UAAM,MAAM,KAAK,CAAC;AAClB,UAAM,OAAO,QAAQ,GAAG;AACxB,QAAI,QAAQ,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,GAAG;AAC5D,cAAQ,GAAG,IAAI,EAAE,GAAI,KAAmC;AACxD,gBAAU,QAAQ,GAAG;AAAA,IACvB,OAAO;AACL,cAAQ,GAAG,IAAI,CAAC;AAChB,gBAAU,QAAQ,GAAG;AAAA,IACvB;AAAA,EACF;AACA,UAAQ,KAAK,KAAK,SAAS,CAAC,CAAC,IAAI;AACjC,SAAO;AACT;AAKO,SAAS,qBAAqB,KAAkC;AACrE,QAAM,WAAW,IAAI,iBAA8B,aAAa;AAChE,SAAO,MAAM,KAAK,QAAQ,EAAE,IAAI,CAAC,QAAQ;AAAA,IACvC,SAAS;AAAA,IACT,MAAM,GAAG,aAAa,WAAW,KAAK;AAAA,IACtC,eAAe,GAAG,eAAe;AAAA,EACnC,EAAE;AACJ;AAKO,SAAS,eAAe,UAAmC;AAChE,aAAW,EAAE,QAAQ,KAAK,UAAU;AAClC,YAAQ,kBAAkB;AAC1B,YAAQ,MAAM,UAAU;AACxB,YAAQ,MAAM,gBAAgB;AAC9B,YAAQ,MAAM,SAAS;AACvB,YAAQ,MAAM,eAAe;AAC7B,YAAQ,MAAM,aAAa;AAC3B,YAAQ,aAAa,oBAAoB,MAAM;AAAA,EACjD;AACF;AAKO,SAAS,gBAAgB,UAAmC;AACjE,aAAW,EAAE,QAAQ,KAAK,UAAU;AAClC,YAAQ,kBAAkB;AAC1B,YAAQ,MAAM,UAAU;AACxB,YAAQ,MAAM,gBAAgB;AAC9B,YAAQ,MAAM,SAAS;AACvB,YAAQ,MAAM,eAAe;AAC7B,YAAQ,MAAM,aAAa;AAC3B,YAAQ,gBAAgB,kBAAkB;AAAA,EAC5C;AACF;AAKO,SAAS,qBACd,UACA,MACM;AACN,aAAW,QAAQ,UAAU;AAC3B,UAAM,MAAM,UAAU,MAAM,KAAK,IAAI;AACrC,QAAI,QAAQ,UAAa,OAAO,QAAQ,UAAU;AAChD,UAAI,KAAK,QAAQ,gBAAgB,KAAK;AACpC,aAAK,QAAQ,cAAc;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AACF;AAMO,SAAS,iBACd,KACA,UACY;AACZ,QAAM,MAAM,IAAI,cAAc,QAAQ;AACtC,MAAI,KAAK;AACT,MAAI,cAAc;AAClB,MAAI,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBpB,MAAI,SAAS;AACb,MAAI,iBAAiB,SAAS,MAAM;AAClC,aAAS,CAAC;AACV,QAAI,cAAc,SAAS,mBAAc;AACzC,QAAI,MAAM,aAAa,SAAS,uBAAuB;AACvD,aAAS,MAAM;AAAA,EACjB,CAAC;AAED,MAAI,KAAK,YAAY,GAAG;AAExB,SAAO,MAAM;AACX,QAAI,OAAO;AAAA,EACb;AACF;;;ADtEA,SAASC,YAAW,YAA6B;AAC/C,MAAI,WAAY,QAAO;AAGvB,MAAI,OAAO,gBAAgB,eAAgB,YAAoB,KAAK,cAAc;AAChF,WAAQ,YAAoB,IAAI;AAAA,EAClC;AACA,MAAI,OAAO,gBAAgB,eAAgB,YAAoB,KAAK,SAAS;AAC3E,WAAQ,YAAoB,IAAI;AAAA,EAClC;AAGA,MAAI,OAAO,YAAY,eAAe,QAAQ,KAAK,mBAAmB;AACpE,WAAO,QAAQ,IAAI;AAAA,EACrB;AACA,MAAI,OAAO,YAAY,eAAe,QAAQ,KAAK,SAAS;AAC1D,WAAO,QAAQ,IAAI;AAAA,EACrB;AAEA,SAAO;AACT;AA2BO,SAAS,WAAW,UAA6B,CAAC,GAAqB;AAC5E,QAAM;AAAA,IACJ,KAAK;AAAA,IACL,cAAc;AAAA,IACd,cAAc,CAAC;AAAA,IACf,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AAEJ,QAAM,cAAcA,YAAW,UAAU;AACzC,QAAM,CAAC,MAAM,YAAY,IAAIC,UAAoC,WAAW;AAC5E,QAAM,CAAC,QAAQ,SAAS,IAAIA,UAAmB,cAAc;AAC7D,QAAM,CAAC,UAAU,gBAAgB,IAAIA,UAAS,KAAK;AACnD,QAAM,CAAC,UAAU,WAAW,IAAIA,UAA4B,CAAC,CAAC;AAE9D,QAAM,YAAYC,QAAsB,IAAI;AAC5C,QAAM,iBAAiBA,QAAO,KAAK;AACnC,QAAM,UAAUA,QAAO,IAAI;AAC3B,QAAM,cAAcA,QAAO,QAAQ;AACnC,QAAM,cAAcA,QAAO,QAAQ;AACnC,QAAM,mBAAmBA,QAA4B,IAAI;AAEzD,UAAQ,UAAU;AAClB,cAAY,UAAU;AACtB,cAAY,UAAU;AAEtB,QAAM,eAAeC;AAAA,IACnB,CAAC,MAAgB;AACf,gBAAU,CAAC;AACX,uBAAiB,CAAC;AAAA,IACpB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,UAAUA,aAAY,MAAM;AAChC,QAAI,UAAU,SAAS;AACrB,gBAAU,QAAQ,WAAW;AAC7B,gBAAU,UAAU;AAAA,IACtB;AACA,iBAAa,cAAc;AAAA,EAC7B,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,UAAUA;AAAA,IACd,CAAC,gBAAyB;AACxB,cAAQ;AACR,YAAM,YAAY,eAAe;AACjC,mBAAa,YAAY;AAEzB,YAAM,SAASC,IAAG,WAAW;AAAA,QAC3B,cAAc;AAAA,QACd;AAAA,QACA,sBAAsB;AAAA,MACxB,CAAC;AACD,gBAAU,UAAU;AAEpB,aAAO,GAAG,WAAW,MAAM;AACzB,qBAAa,WAAW;AACxB,eAAO,KAAK,UAAU,QAAQ,OAAO;AAAA,MACvC,CAAC;AAED,aAAO,GAAG,QAAQ,CAAC,aAAwC;AACzD,uBAAe,UAAU;AACzB,qBAAa,QAAQ;AACrB,iBAAS,QAAQ;AAEjB,YAAI,YAAY,SAAS;AACvB,+BAAqB,YAAY,SAAS,QAAQ;AAAA,QACpD;AAAA,MACF,CAAC;AAED,aAAO,GAAG,cAAc,MAAM;AAC5B,qBAAa,cAAc;AAAA,MAC7B,CAAC;AAED,aAAO,GAAG,iBAAiB,CAAC,QAAQ;AAClC,kBAAU,GAAG;AAAA,MACf,CAAC;AAAA,IACH;AAAA,IACA,CAAC,SAAS,aAAa,mBAAmB,QAAQ,gBAAgB,OAAO;AAAA,EAC3E;AAEA,QAAM,aAAaD,aAAY,MAAM;AACnC,YAAQ;AAAA,EACV,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,UAAUA,aAAY,CAAC,YAAuC;AAClE,iBAAa,OAAO;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,QAAM,UAAUA,aAAY,CAAC,MAAc,UAAqB;AAC9D,iBAAa,CAAC,SAAS,UAAU,MAAM,MAAM,KAAK,CAAC;AAAA,EACrD,GAAG,CAAC,CAAC;AAGL,EAAAE,WAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,qBAAe,UAAU;AACzB;AAAA,IACF;AACA,QAAI,UAAU,SAAS,WAAW;AAChC,gBAAU,QAAQ,KAAK,UAAU,IAAI;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,EAAAA,WAAU,MAAM;AACd,QAAI,aAAa;AACf,cAAQ;AAAA,IACV;AACA,WAAO,MAAM;AACX,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,SAASF,aAAY,MAAM;AAC/B,UAAM,MAAM,mBAAmB,OAAO,aAAa,cAAc,WAAW;AAC5E,QAAI,CAAC,IAAK;AACV,UAAM,QAAQ,qBAAqB,GAAG;AACtC,gBAAY,KAAK;AACjB,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAGnB,QAAM,cAAcA;AAAA,IAClB,CAAC,WAAoB;AACnB,uBAAiB,MAAM;AACvB,YAAM,kBAAkB,YAAY,QAAQ,SAAS,IAAI,YAAY,UAAW,OAAO,KAAK,CAAC;AAE7F,UAAI,QAAQ;AACV,uBAAe,eAAe;AAC9B,6BAAqB,iBAAiB,QAAQ,OAAO;AAGrD,mBAAW,QAAQ,iBAAiB;AAClC,gBAAM,UAAU,MAAM;AACpB,kBAAM,SAAS,KAAK,QAAQ,eAAe;AAC3C,yBAAa,CAAC,SAAS,UAAU,MAAM,KAAK,MAAM,MAAM,CAAC;AAAA,UAC3D;AACA,eAAK,QAAQ,iBAAiB,SAAS,OAAO;AAC9C,UAAC,KAAK,QAAgB,mBAAmB;AAAA,QAC3C;AAAA,MACF,OAAO;AAEL,mBAAW,QAAQ,iBAAiB;AAClC,cAAK,KAAK,QAAgB,kBAAkB;AAC1C,iBAAK,QAAQ,oBAAoB,SAAU,KAAK,QAAgB,gBAAgB;AAChF,mBAAQ,KAAK,QAAgB;AAAA,UAC/B;AAAA,QACF;AACA,wBAAgB,eAAe;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,iBAAiBA,aAAY,MAAM;AACvC,gBAAY,CAAC,YAAY,OAAO;AAAA,EAClC,GAAG,CAAC,WAAW,CAAC;AAGhB,EAAAE,WAAU,MAAM;AACd,QAAI,CAAC,aAAc;AACnB,UAAM,MAAM,mBAAmB,OAAO,aAAa,cAAc,WAAW;AAC5E,QAAI,CAAC,IAAK;AAEV,qBAAiB,UAAU,iBAAiB,KAAK,CAAC,WAAW;AAC3D,kBAAY,MAAM;AAAA,IACpB,CAAC;AAED,WAAO,MAAM;AACX,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,cAAc,gBAAgB,WAAW,CAAC;AAG9C,EAAAA,WAAU,MAAM;AACd,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["useCallback","useEffect","useRef","useState","io","resolveUrl","useState","useRef","useCallback","io","useEffect"]}

package/dist/server.d.mts

@@ -0,0 +1,12 @@
+import * as socket_io from 'socket.io';
+import { Server } from 'socket.io';
+
+/**
+ * Create and start a jsonify-ws sync server.
+ *
+ * @param port - Port number (default: WSL_URL port or 4000)
+ * @param corsOrigin - CORS origin (default: "*")
+ */
+declare function createJsonifyServer(port?: number, corsOrigin?: string | string[]): Server<socket_io.DefaultEventsMap, socket_io.DefaultEventsMap, socket_io.DefaultEventsMap, any>;
+
+export { createJsonifyServer };

package/dist/server.d.ts

@@ -0,0 +1,12 @@
+import * as socket_io from 'socket.io';
+import { Server } from 'socket.io';
+
+/**
+ * Create and start a jsonify-ws sync server.
+ *
+ * @param port - Port number (default: WSL_URL port or 4000)
+ * @param corsOrigin - CORS origin (default: "*")
+ */
+declare function createJsonifyServer(port?: number, corsOrigin?: string | string[]): Server<socket_io.DefaultEventsMap, socket_io.DefaultEventsMap, socket_io.DefaultEventsMap, any>;
+
+export { createJsonifyServer };

package/dist/server.js

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/server.ts
+var server_exports = {};
+__export(server_exports, {
+  createJsonifyServer: () => createJsonifyServer
+});
+module.exports = __toCommonJS(server_exports);
+var import_socket = require("socket.io");
+function createJsonifyServer(port = Number(process.env.WS_PORT) || 4e3, corsOrigin = "*") {
+  const io = new import_socket.Server(port, {
+    cors: {
+      origin: corsOrigin,
+      methods: ["GET", "POST"]
+    }
+  });
+  let latestData = null;
+  io.on("connection", (socket) => {
+    console.log(`[jsonify-ws] Client connected (${io.engine.clientsCount} total)`);
+    if (latestData !== null) {
+      socket.emit("sync", latestData);
+    }
+    socket.on("update", (data) => {
+      latestData = data;
+      socket.broadcast.emit("sync", latestData);
+    });
+    socket.on("disconnect", () => {
+      console.log(`[jsonify-ws] Client disconnected (${io.engine.clientsCount} total)`);
+    });
+    socket.on("error", (err) => {
+      console.error("[jsonify-ws] Socket error:", err);
+    });
+  });
+  console.log(`[jsonify-ws] Server running on http://localhost:${port}`);
+  return io;
+}
+if (typeof require !== "undefined" && require.main === module) {
+  createJsonifyServer();
+}
+var isMainModule = typeof process !== "undefined" && process.argv[1] && (process.argv[1].endsWith("/server.ts") || process.argv[1].endsWith("/server.js") || process.argv[1].endsWith("/server.mjs"));
+if (isMainModule) {
+  createJsonifyServer();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createJsonifyServer
+});
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/server.ts"],"sourcesContent":["import { Server } from \"socket.io\";\r\n\r\ntype JsonValue =\r\n  | string\r\n  | number\r\n  | boolean\r\n  | null\r\n  | JsonValue[]\r\n  | { [key: string]: JsonValue };\r\n\r\n/**\r\n * Create and start a jsonify-ws sync server.\r\n *\r\n * @param port - Port number (default: WSL_URL port or 4000)\r\n * @param corsOrigin - CORS origin (default: \"*\")\r\n */\r\nexport function createJsonifyServer(\r\n  port: number = Number(process.env.WS_PORT) || 4000,\r\n  corsOrigin: string | string[] = \"*\",\r\n) {\r\n  const io = new Server(port, {\r\n    cors: {\r\n      origin: corsOrigin,\r\n      methods: [\"GET\", \"POST\"],\r\n    },\r\n  });\r\n\r\n  let latestData: JsonValue | null = null;\r\n\r\n  io.on(\"connection\", (socket) => {\r\n    console.log(`[jsonify-ws] Client connected (${io.engine.clientsCount} total)`);\r\n\r\n    if (latestData !== null) {\r\n      socket.emit(\"sync\", latestData);\r\n    }\r\n\r\n    socket.on(\"update\", (data: JsonValue) => {\r\n      latestData = data;\r\n      socket.broadcast.emit(\"sync\", latestData);\r\n    });\r\n\r\n    socket.on(\"disconnect\", () => {\r\n      console.log(`[jsonify-ws] Client disconnected (${io.engine.clientsCount} total)`);\r\n    });\r\n\r\n    socket.on(\"error\", (err) => {\r\n      console.error(\"[jsonify-ws] Socket error:\", err);\r\n    });\r\n  });\r\n\r\n  console.log(`[jsonify-ws] Server running on http://localhost:${port}`);\r\n  return io;\r\n}\r\n\r\n// Auto-start when run directly\r\nif (typeof require !== \"undefined\" && require.main === module) {\r\n  createJsonifyServer();\r\n}\r\n\r\n// Also auto-start for ESM direct execution\r\nconst isMainModule =\r\n  typeof process !== \"undefined\" &&\r\n  process.argv[1] &&\r\n  (process.argv[1].endsWith(\"/server.ts\") ||\r\n    process.argv[1].endsWith(\"/server.js\") ||\r\n    process.argv[1].endsWith(\"/server.mjs\"));\r\n\r\nif (isMainModule) {\r\n  createJsonifyServer();\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AAgBhB,SAAS,oBACd,OAAe,OAAO,QAAQ,IAAI,OAAO,KAAK,KAC9C,aAAgC,KAChC;AACA,QAAM,KAAK,IAAI,qBAAO,MAAM;AAAA,IAC1B,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,EACF,CAAC;AAED,MAAI,aAA+B;AAEnC,KAAG,GAAG,cAAc,CAAC,WAAW;AAC9B,YAAQ,IAAI,kCAAkC,GAAG,OAAO,YAAY,SAAS;AAE7E,QAAI,eAAe,MAAM;AACvB,aAAO,KAAK,QAAQ,UAAU;AAAA,IAChC;AAEA,WAAO,GAAG,UAAU,CAAC,SAAoB;AACvC,mBAAa;AACb,aAAO,UAAU,KAAK,QAAQ,UAAU;AAAA,IAC1C,CAAC;AAED,WAAO,GAAG,cAAc,MAAM;AAC5B,cAAQ,IAAI,qCAAqC,GAAG,OAAO,YAAY,SAAS;AAAA,IAClF,CAAC;AAED,WAAO,GAAG,SAAS,CAAC,QAAQ;AAC1B,cAAQ,MAAM,8BAA8B,GAAG;AAAA,IACjD,CAAC;AAAA,EACH,CAAC;AAED,UAAQ,IAAI,mDAAmD,IAAI,EAAE;AACrE,SAAO;AACT;AAGA,IAAI,OAAO,YAAY,eAAe,QAAQ,SAAS,QAAQ;AAC7D,sBAAoB;AACtB;AAGA,IAAM,eACJ,OAAO,YAAY,eACnB,QAAQ,KAAK,CAAC,MACb,QAAQ,KAAK,CAAC,EAAE,SAAS,YAAY,KACpC,QAAQ,KAAK,CAAC,EAAE,SAAS,YAAY,KACrC,QAAQ,KAAK,CAAC,EAAE,SAAS,aAAa;AAE1C,IAAI,cAAc;AAChB,sBAAoB;AACtB;","names":[]}

package/dist/server.mjs

@@ -0,0 +1,47 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/server.ts
+import { Server } from "socket.io";
+function createJsonifyServer(port = Number(process.env.WS_PORT) || 4e3, corsOrigin = "*") {
+  const io = new Server(port, {
+    cors: {
+      origin: corsOrigin,
+      methods: ["GET", "POST"]
+    }
+  });
+  let latestData = null;
+  io.on("connection", (socket) => {
+    console.log(`[jsonify-ws] Client connected (${io.engine.clientsCount} total)`);
+    if (latestData !== null) {
+      socket.emit("sync", latestData);
+    }
+    socket.on("update", (data) => {
+      latestData = data;
+      socket.broadcast.emit("sync", latestData);
+    });
+    socket.on("disconnect", () => {
+      console.log(`[jsonify-ws] Client disconnected (${io.engine.clientsCount} total)`);
+    });
+    socket.on("error", (err) => {
+      console.error("[jsonify-ws] Socket error:", err);
+    });
+  });
+  console.log(`[jsonify-ws] Server running on http://localhost:${port}`);
+  return io;
+}
+if (typeof __require !== "undefined" && __require.main === module) {
+  createJsonifyServer();
+}
+var isMainModule = typeof process !== "undefined" && process.argv[1] && (process.argv[1].endsWith("/server.ts") || process.argv[1].endsWith("/server.js") || process.argv[1].endsWith("/server.mjs"));
+if (isMainModule) {
+  createJsonifyServer();
+}
+export {
+  createJsonifyServer
+};
+//# sourceMappingURL=server.mjs.map

package/dist/server.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/server.ts"],"sourcesContent":["import { Server } from \"socket.io\";\r\n\r\ntype JsonValue =\r\n  | string\r\n  | number\r\n  | boolean\r\n  | null\r\n  | JsonValue[]\r\n  | { [key: string]: JsonValue };\r\n\r\n/**\r\n * Create and start a jsonify-ws sync server.\r\n *\r\n * @param port - Port number (default: WSL_URL port or 4000)\r\n * @param corsOrigin - CORS origin (default: \"*\")\r\n */\r\nexport function createJsonifyServer(\r\n  port: number = Number(process.env.WS_PORT) || 4000,\r\n  corsOrigin: string | string[] = \"*\",\r\n) {\r\n  const io = new Server(port, {\r\n    cors: {\r\n      origin: corsOrigin,\r\n      methods: [\"GET\", \"POST\"],\r\n    },\r\n  });\r\n\r\n  let latestData: JsonValue | null = null;\r\n\r\n  io.on(\"connection\", (socket) => {\r\n    console.log(`[jsonify-ws] Client connected (${io.engine.clientsCount} total)`);\r\n\r\n    if (latestData !== null) {\r\n      socket.emit(\"sync\", latestData);\r\n    }\r\n\r\n    socket.on(\"update\", (data: JsonValue) => {\r\n      latestData = data;\r\n      socket.broadcast.emit(\"sync\", latestData);\r\n    });\r\n\r\n    socket.on(\"disconnect\", () => {\r\n      console.log(`[jsonify-ws] Client disconnected (${io.engine.clientsCount} total)`);\r\n    });\r\n\r\n    socket.on(\"error\", (err) => {\r\n      console.error(\"[jsonify-ws] Socket error:\", err);\r\n    });\r\n  });\r\n\r\n  console.log(`[jsonify-ws] Server running on http://localhost:${port}`);\r\n  return io;\r\n}\r\n\r\n// Auto-start when run directly\r\nif (typeof require !== \"undefined\" && require.main === module) {\r\n  createJsonifyServer();\r\n}\r\n\r\n// Also auto-start for ESM direct execution\r\nconst isMainModule =\r\n  typeof process !== \"undefined\" &&\r\n  process.argv[1] &&\r\n  (process.argv[1].endsWith(\"/server.ts\") ||\r\n    process.argv[1].endsWith(\"/server.js\") ||\r\n    process.argv[1].endsWith(\"/server.mjs\"));\r\n\r\nif (isMainModule) {\r\n  createJsonifyServer();\r\n}\r\n"],"mappings":";;;;;;;;AAAA,SAAS,cAAc;AAgBhB,SAAS,oBACd,OAAe,OAAO,QAAQ,IAAI,OAAO,KAAK,KAC9C,aAAgC,KAChC;AACA,QAAM,KAAK,IAAI,OAAO,MAAM;AAAA,IAC1B,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,EACF,CAAC;AAED,MAAI,aAA+B;AAEnC,KAAG,GAAG,cAAc,CAAC,WAAW;AAC9B,YAAQ,IAAI,kCAAkC,GAAG,OAAO,YAAY,SAAS;AAE7E,QAAI,eAAe,MAAM;AACvB,aAAO,KAAK,QAAQ,UAAU;AAAA,IAChC;AAEA,WAAO,GAAG,UAAU,CAAC,SAAoB;AACvC,mBAAa;AACb,aAAO,UAAU,KAAK,QAAQ,UAAU;AAAA,IAC1C,CAAC;AAED,WAAO,GAAG,cAAc,MAAM;AAC5B,cAAQ,IAAI,qCAAqC,GAAG,OAAO,YAAY,SAAS;AAAA,IAClF,CAAC;AAED,WAAO,GAAG,SAAS,CAAC,QAAQ;AAC1B,cAAQ,MAAM,8BAA8B,GAAG;AAAA,IACjD,CAAC;AAAA,EACH,CAAC;AAED,UAAQ,IAAI,mDAAmD,IAAI,EAAE;AACrE,SAAO;AACT;AAGA,IAAI,OAAO,cAAY,eAAe,UAAQ,SAAS,QAAQ;AAC7D,sBAAoB;AACtB;AAGA,IAAM,eACJ,OAAO,YAAY,eACnB,QAAQ,KAAK,CAAC,MACb,QAAQ,KAAK,CAAC,EAAE,SAAS,YAAY,KACpC,QAAQ,KAAK,CAAC,EAAE,SAAS,YAAY,KACrC,QAAQ,KAAK,CAAC,EAAE,SAAS,aAAa;AAE1C,IAAI,cAAc;AAChB,sBAAoB;AACtB;","names":[]}