@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/dist/ui/tree-view/index.cjs

@@ -1,25 +1,29 @@
 'use strict';
 
 require('../../chunk-G5NT42YF.cjs');
+var chunk55RSKLJ5_cjs = require('../../chunk-55RSKLJ5.cjs');
 var chunkHAVTMZR3_cjs = require('../../chunk-HAVTMZR3.cjs');
 var chunkEEGQLTSQ_cjs = require('../../chunk-EEGQLTSQ.cjs');
 require('../../chunk-VOTZLQ6J.cjs');
-var chunk55RSKLJ5_cjs = require('../../chunk-55RSKLJ5.cjs');
 require('../../chunk-2CZEFXEW.cjs');
 require('../../chunk-3UEVUYFQ.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LYZJNEOR.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-OHIB3TEN.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-6BOWMGFG.cjs');
+require('../../chunk-OHIB3TEN.cjs');
 
 
 
+Object.defineProperty(exports, "TreeSearchBar", {
+  enumerable: true,
+  get: function () { return chunk55RSKLJ5_cjs.TreeSearchBar; }
+});
 Object.defineProperty(exports, "TreeEntryItem", {
   enumerable: true,
   get: function () { return chunkHAVTMZR3_cjs.TreeEntryItem; }
@@ -36,7 +40,3 @@ Object.defineProperty(exports, "useTreeState", {
   enumerable: true,
   get: function () { return chunkEEGQLTSQ_cjs.useTreeState; }
 });
-Object.defineProperty(exports, "TreeSearchBar", {
-  enumerable: true,
-  get: function () { return chunk55RSKLJ5_cjs.TreeSearchBar; }
-});

package/dist/ui/tree-view/index.mjs

@@ -1,17 +1,17 @@
 import '../../chunk-HVVT3D2T.mjs';
+export { TreeSearchBar } from '../../chunk-73VF2W3D.mjs';
 export { TreeEntryItem, TreeView } from '../../chunk-VQPJ7TLB.mjs';
 export { useTreeSearch, useTreeState } from '../../chunk-PC5DHSC4.mjs';
 import '../../chunk-HTAFERCZ.mjs';
-export { TreeSearchBar } from '../../chunk-73VF2W3D.mjs';
 import '../../chunk-ZNPI2TYG.mjs';
 import '../../chunk-4XUJBMDE.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-OEIF3JCH.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-HMN4IKTG.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-IZARTVYN.mjs';
+import '../../chunk-HMN4IKTG.mjs';

package/dist/ui/tree-view-legacy.cjs

@@ -1,37 +1,37 @@
 'use strict';
 
-var chunkEC4HJUX6_cjs = require('../chunk-EC4HJUX6.cjs');
+var chunk4KWGGESI_cjs = require('../chunk-4KWGGESI.cjs');
 require('../chunk-2CZEFXEW.cjs');
-require('../chunk-3UEVUYFQ.cjs');
 require('../chunk-JMCH2AFN.cjs');
-require('../chunk-G5JZGNKY.cjs');
+require('../chunk-VBBJSIY7.cjs');
+require('../chunk-G4FJGNY5.cjs');
+require('../chunk-3UEVUYFQ.cjs');
 require('../chunk-QN4N4I3Z.cjs');
 require('../chunk-LYZJNEOR.cjs');
 require('../chunk-YZIR6LIY.cjs');
 require('../chunk-RPTRTGC2.cjs');
-require('../chunk-OHIB3TEN.cjs');
 require('../chunk-LBWMTA5T.cjs');
 require('../chunk-Q7E73DVJ.cjs');
 require('../chunk-JR4TVE43.cjs');
 require('../chunk-VXZURKMQ.cjs');
 require('../chunk-6BOWMGFG.cjs');
-require('../chunk-G4FJGNY5.cjs');
+require('../chunk-OHIB3TEN.cjs');
 
 
 
 Object.defineProperty(exports, "TreeEntries", {
   enumerable: true,
-  get: function () { return chunkEC4HJUX6_cjs.TreeEntries; }
+  get: function () { return chunk4KWGGESI_cjs.TreeEntries; }
 });
 Object.defineProperty(exports, "TreeEntryItem", {
   enumerable: true,
-  get: function () { return chunkEC4HJUX6_cjs.TreeEntryItem; }
+  get: function () { return chunk4KWGGESI_cjs.TreeEntryItem; }
 });
 Object.defineProperty(exports, "TreeSearchBar", {
   enumerable: true,
-  get: function () { return chunkEC4HJUX6_cjs.TreeSearchBar; }
+  get: function () { return chunk4KWGGESI_cjs.TreeSearchBar; }
 });
 Object.defineProperty(exports, "TreeView", {
   enumerable: true,
-  get: function () { return chunkEC4HJUX6_cjs.TreeView; }
+  get: function () { return chunk4KWGGESI_cjs.TreeView; }
 });

package/dist/ui/tree-view-legacy.mjs

@@ -1,16 +1,16 @@
-export { TreeEntries, TreeEntryItem, TreeSearchBar, TreeView } from '../chunk-CUOGY4FW.mjs';
+export { TreeEntries, TreeEntryItem, TreeSearchBar, TreeView } from '../chunk-VA3PEYFM.mjs';
 import '../chunk-ZNPI2TYG.mjs';
-import '../chunk-4XUJBMDE.mjs';
 import '../chunk-BNDRHLLZ.mjs';
-import '../chunk-PDOFOJ4P.mjs';
+import '../chunk-BEJIZ56L.mjs';
+import '../chunk-SAGQV2YZ.mjs';
+import '../chunk-4XUJBMDE.mjs';
 import '../chunk-F7ZHPSLA.mjs';
 import '../chunk-OEIF3JCH.mjs';
 import '../chunk-VA4LUFKD.mjs';
 import '../chunk-4F2GSF2T.mjs';
-import '../chunk-HMN4IKTG.mjs';
 import '../chunk-IDUVYPN7.mjs';
 import '../chunk-3QT5VABC.mjs';
 import '../chunk-XHJDRQD7.mjs';
 import '../chunk-LQOPO4KU.mjs';
 import '../chunk-IZARTVYN.mjs';
-import '../chunk-SAGQV2YZ.mjs';
+import '../chunk-HMN4IKTG.mjs';

package/dist/ui/waterfall/CursorOverlay.cjs

@@ -5,12 +5,12 @@ require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LYZJNEOR.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-OHIB3TEN.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-6BOWMGFG.cjs');
+require('../../chunk-OHIB3TEN.cjs');
 
 
 

package/dist/ui/waterfall/CursorOverlay.mjs

@@ -3,9 +3,9 @@ import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-OEIF3JCH.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-HMN4IKTG.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-IZARTVYN.mjs';
+import '../../chunk-HMN4IKTG.mjs';

package/dist/ui/waterfall/TimelineEvent.cjs

@@ -6,12 +6,12 @@ require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LYZJNEOR.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-OHIB3TEN.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-6BOWMGFG.cjs');
+require('../../chunk-OHIB3TEN.cjs');
 
 
 

package/dist/ui/waterfall/TimelineEvent.mjs

@@ -4,9 +4,9 @@ import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-OEIF3JCH.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-HMN4IKTG.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-IZARTVYN.mjs';
+import '../../chunk-HMN4IKTG.mjs';

package/dist/ui/waterfall/TimelineProcessBar.cjs

@@ -6,12 +6,12 @@ require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LYZJNEOR.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-OHIB3TEN.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-6BOWMGFG.cjs');
+require('../../chunk-OHIB3TEN.cjs');
 
 
 

package/dist/ui/waterfall/TimelineProcessBar.mjs

@@ -4,9 +4,9 @@ import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-OEIF3JCH.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-HMN4IKTG.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-IZARTVYN.mjs';
+import '../../chunk-HMN4IKTG.mjs';

package/dist/ui/waterfall/Wedges.cjs

@@ -5,12 +5,12 @@ require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LYZJNEOR.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-OHIB3TEN.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-6BOWMGFG.cjs');
+require('../../chunk-OHIB3TEN.cjs');
 
 
 

package/dist/ui/waterfall/Wedges.mjs

@@ -3,9 +3,9 @@ import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-OEIF3JCH.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-HMN4IKTG.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-IZARTVYN.mjs';
+import '../../chunk-HMN4IKTG.mjs';

package/dist/ui/waterfall/index.cjs

@@ -1,14 +1,16 @@
 'use strict';
 
-var chunkZ35DNFRZ_cjs = require('../../chunk-Z35DNFRZ.cjs');
+var chunkO66RESRR_cjs = require('../../chunk-O66RESRR.cjs');
 require('../../chunk-WJL5HMO6.cjs');
 require('../../chunk-RJ7I6ZQK.cjs');
+require('../../chunk-MVAFOQ67.cjs');
 require('../../chunk-TUYG6BYZ.cjs');
 require('../../chunk-YXFHJKNW.cjs');
 require('../../chunk-5MNZYCN2.cjs');
 require('../../chunk-Z6UDRPC2.cjs');
 require('../../chunk-YJ6X6T5K.cjs');
 require('../../chunk-G5NT42YF.cjs');
+require('../../chunk-55RSKLJ5.cjs');
 require('../../chunk-HAVTMZR3.cjs');
 require('../../chunk-EEGQLTSQ.cjs');
 require('../../chunk-VOTZLQ6J.cjs');
@@ -16,29 +18,27 @@ require('../../chunk-2J75MYQA.cjs');
 require('../../chunk-LP3AGGRK.cjs');
 var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
 require('../../chunk-6TSA7KXX.cjs');
-require('../../chunk-MVAFOQ67.cjs');
-require('../../chunk-55RSKLJ5.cjs');
 require('../../chunk-2CZEFXEW.cjs');
-require('../../chunk-3UEVUYFQ.cjs');
 require('../../chunk-JMCH2AFN.cjs');
-require('../../chunk-G5JZGNKY.cjs');
+require('../../chunk-VBBJSIY7.cjs');
+require('../../chunk-G4FJGNY5.cjs');
+require('../../chunk-3UEVUYFQ.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LYZJNEOR.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-OHIB3TEN.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-6BOWMGFG.cjs');
-require('../../chunk-G4FJGNY5.cjs');
+require('../../chunk-OHIB3TEN.cjs');
 
 
 
 Object.defineProperty(exports, "Waterfall", {
   enumerable: true,
-  get: function () { return chunkZ35DNFRZ_cjs.Waterfall; }
+  get: function () { return chunkO66RESRR_cjs.Waterfall; }
 });
 Object.defineProperty(exports, "TOTAL_DURATION", {
   enumerable: true,

package/dist/ui/waterfall/index.mjs

@@ -1,12 +1,14 @@
-export { Waterfall } from '../../chunk-QLCEHV4Q.mjs';
+export { Waterfall } from '../../chunk-C7VGRU3O.mjs';
 import '../../chunk-JWKOW2OV.mjs';
 import '../../chunk-VPQ5SSY3.mjs';
+import '../../chunk-OC4HRPZU.mjs';
 import '../../chunk-N6DSPSMM.mjs';
 import '../../chunk-CO6EASQO.mjs';
 import '../../chunk-IR334P7F.mjs';
 import '../../chunk-CIPI2V54.mjs';
 import '../../chunk-WPDU2YYR.mjs';
 import '../../chunk-HVVT3D2T.mjs';
+import '../../chunk-73VF2W3D.mjs';
 import '../../chunk-VQPJ7TLB.mjs';
 import '../../chunk-PC5DHSC4.mjs';
 import '../../chunk-HTAFERCZ.mjs';
@@ -14,20 +16,18 @@ import '../../chunk-SA5WKLYB.mjs';
 import '../../chunk-5EXV5EWF.mjs';
 export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
 import '../../chunk-K22BEXUA.mjs';
-import '../../chunk-OC4HRPZU.mjs';
-import '../../chunk-73VF2W3D.mjs';
 import '../../chunk-ZNPI2TYG.mjs';
-import '../../chunk-4XUJBMDE.mjs';
 import '../../chunk-BNDRHLLZ.mjs';
-import '../../chunk-PDOFOJ4P.mjs';
+import '../../chunk-BEJIZ56L.mjs';
+import '../../chunk-SAGQV2YZ.mjs';
+import '../../chunk-4XUJBMDE.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-OEIF3JCH.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-HMN4IKTG.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-IZARTVYN.mjs';
-import '../../chunk-SAGQV2YZ.mjs';
+import '../../chunk-HMN4IKTG.mjs';

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@vuer-ai/vuer-uikit",
   "author": "Ge Yang",
-  "version": "0.0.96",
+  "version": "0.0.98",
   "files": [
     "/dist",
-    "/cli"
+    "/cli",
+    "/src"
   ],
   "bin": {
     "dial-cli": "./cli/dial-cli.js"
@@ -19,6 +20,31 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
+    "./src": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    },
+    "./src/dial": {
+      "types": "./src/dial/index.ts",
+      "import": "./src/dial/index.ts",
+      "require": "./src/dial/index.ts"
+    },
+    "./src/ui/card": {
+      "types": "./src/ui/card.tsx",
+      "import": "./src/ui/card.tsx",
+      "require": "./src/ui/card.tsx"
+    },
+    "./src/ui/button": {
+      "types": "./src/ui/button.tsx",
+      "import": "./src/ui/button.tsx",
+      "require": "./src/ui/button.tsx"
+    },
+    "./src/ui/alert": {
+      "types": "./src/ui/alert.tsx",
+      "import": "./src/ui/alert.tsx",
+      "require": "./src/ui/alert.tsx"
+    },
     "./index.css": "./dist/index.css",
     "./styles/theme.css": "./dist/styles/theme.css",
     "./styles/toast.css": "./dist/styles/toast.css",

package/src/SyncScroll/README.md

@@ -0,0 +1,283 @@
+# Sync Scroll Module
+
+A React module for synchronizing scroll positions between multiple components with master-slave-drag relationships.
+
+## Features
+
+- 🔄 **Master-Slave Architecture** - Masters control slaves, slaves can't control masters
+- 🎯 **Drag Role** - Special role for drag-based scroll controls
+- ⚡ **High performance** - Uses requestAnimationFrame for smooth syncing
+- 🎮 **Full control** - Enable/disable syncing dynamically
+- 📦 **TypeScript support** - Fully typed for excellent DX
+- 🧹 **Auto cleanup** - Proper cleanup on unmount
+
+## Quick Start
+
+### Basic Example
+
+```tsx
+import { SyncScrollProvider, useSyncScroll } from "@/components/waterfall/SyncScroll";
+
+function App() {
+  return (
+    <SyncScrollProvider>
+      <MasterPanel />
+      <SlavePanel />
+    </SyncScrollProvider>
+  );
+}
+
+function MasterPanel() {
+  const scrollRef = useSyncScroll({
+    id: "master",
+    role: "master", // Controls all panels
+  });
+
+  return (
+    <div ref={scrollRef} className="h-96 overflow-y-auto">
+      {/* Content */}
+    </div>
+  );
+}
+
+function SlavePanel() {
+  const scrollRef = useSyncScroll({
+    id: "slave",
+    role: "slave", // Controlled by master
+  });
+
+  return (
+    <div ref={scrollRef} className="h-96 overflow-y-auto">
+      {/* Content */}
+    </div>
+  );
+}
+```
+
+### Complete Example with Drag Control
+
+```tsx
+"use client";
+
+import React from "react";
+import { SyncScrollProvider, useSyncScroll, ScrollRole } from "@/components/waterfall/SyncScroll";
+
+// Scrollable panel component
+function Panel({
+  id,
+  title,
+  color,
+  role = "slave",
+  isDraggable = false,
+}: {
+  id: string;
+  title: string;
+  color: string;
+  role?: ScrollRole;
+  isDraggable?: boolean;
+}) {
+  const scrollRef = useSyncScroll({ id, role });
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragStartY = React.useRef(0);
+  const scrollStartTop = React.useRef(0);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!isDraggable || !scrollRef.current) return;
+
+    setIsDragging(true);
+    dragStartY.current = e.clientY;
+    scrollStartTop.current = scrollRef.current.scrollTop;
+    e.preventDefault();
+  };
+
+  React.useEffect(() => {
+    if (!isDraggable) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging || !scrollRef.current) return;
+
+      const deltaY = e.clientY - dragStartY.current;
+      scrollRef.current.scrollTop = scrollStartTop.current - deltaY * 2;
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, isDraggable, scrollRef]);
+
+  return (
+    <div className="h-96 overflow-hidden rounded-lg border">
+      <div className={`p-3 font-semibold ${color} flex justify-between text-white`}>
+        <span>{title}</span>
+        <span className="rounded bg-black/20 px-2 py-1 text-xs">{role.toUpperCase()}</span>
+      </div>
+      <div
+        ref={scrollRef}
+        className={`h-full overflow-y-auto p-4 ${isDraggable ? "cursor-grab active:cursor-grabbing" : ""}`}
+        onMouseDown={handleMouseDown}
+        style={{ userSelect: isDragging ? "none" : "auto" }}
+      >
+        {isDraggable && (
+          <div className="mb-4 rounded bg-yellow-100 p-2 text-sm dark:bg-yellow-900">
+            🖱️ Click and drag to scroll all panels
+          </div>
+        )}
+        {Array.from({ length: 50 }, (_, i) => (
+          <div key={i} className="border-b py-3">
+            Item {i + 1}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function SyncScrollDemo() {
+  return (
+    <main className="min-h-screen p-8">
+      <div className="mx-auto max-w-6xl space-y-8">
+        <h1 className="mb-2 text-center text-3xl font-bold">Master-Slave Sync Scroll Demo</h1>
+
+        <SyncScrollProvider>
+          <div className="grid grid-cols-3 gap-4">
+            <Panel id="master" title="Master Panel" color="bg-red-500" role="master" />
+            <Panel
+              id="drag"
+              title="Drag Control"
+              color="bg-yellow-500"
+              role="drag"
+              isDraggable={true}
+            />
+            <Panel id="slave" title="Slave Panel" color="bg-blue-500" role="slave" />
+          </div>
+        </SyncScrollProvider>
+      </div>
+    </main>
+  );
+}
+```
+
+## API Reference
+
+### `SyncScrollProvider`
+
+The context provider that manages scroll synchronization.
+
+```tsx
+<SyncScrollProvider>{children}</SyncScrollProvider>
+```
+
+### `useSyncScroll(options)`
+
+Hook that returns a ref to attach to your scrollable element.
+
+#### Options
+
+| Option    | Type                                   | Default      | Description                                  |
+| --------- | -------------------------------------- | ------------ | -------------------------------------------- |
+| `id`      | `string`                               | required     | Unique identifier for the scrollable element |
+| `role`    | `'master' \| 'slave' \| 'drag'`        | `'slave'`    | Scroll control role (see Roles section)      |
+| `enabled` | `boolean`                              | `true`       | Enable/disable scroll syncing                |
+| `axis`    | `'vertical' \| 'horizontal' \| 'both'` | `'vertical'` | Axis to synchronize                          |
+
+#### Returns
+
+- `RefObject<HTMLDivElement>` - Ref to attach to your scrollable element
+
+### Scroll Roles
+
+The sync scroll system supports three types of roles:
+
+#### **Master**
+
+- Controls all other elements (masters and slaves)
+- Can sync with other masters
+- Use case: Main content area that drives the scroll
+
+#### **Slave**
+
+- Controlled by masters
+- Can only sync with other slaves (cannot control masters)
+- Use case: Secondary panels that follow the main content
+
+#### **Drag**
+
+- Acts like master (controls all elements)
+- Designed for drag-based scroll interactions
+- Use case: Custom scrollbars or drag handles
+
+#### Role Relationships
+
+| Source → Target | Master | Slave | Drag |
+| --------------- | ------ | ----- | ---- |
+| **Master →**    | ✅     | ✅    | ✅   |
+| **Slave →**     | ❌     | ✅    | ❌   |
+| **Drag →**      | ✅     | ✅    | ✅   |
+
+### `useSyncScrollWithRef(ref, options)`
+
+Alternative hook when you already have a ref.
+
+```tsx
+const myRef = useRef<HTMLDivElement>(null);
+useSyncScrollWithRef(myRef, { id: "sidebar", role: "master" });
+
+return <div ref={myRef}>...</div>;
+```
+
+## Use Cases
+
+- **Timeline Components** - Keep timeline and event list synchronized with master-slave control
+- **Code Editors** - Line numbers as master, code content as slave
+- **Data Tables** - Header as master, scrollable content as slave
+- **Documentation** - Navigation as master, content preview as slave
+- **Custom Scrollbars** - Drag handle controls multiple panels
+
+## Performance Considerations
+
+- Uses `requestAnimationFrame` for smooth updates
+- Prevents circular updates with intelligent tracking
+- Passive event listeners for better scroll performance
+- Automatic cleanup prevents memory leaks
+
+## Troubleshooting
+
+### Elements not syncing
+
+1. Ensure all elements are wrapped in the same `SyncScrollProvider`
+2. Check that each element has a unique `id`
+3. Verify `enabled` is `true` (or omitted)
+4. Check role relationships - slaves can't control masters
+
+### Jerky scrolling
+
+- This usually happens if elements have different content heights
+- Ensure synced elements have similar scroll ranges
+- Consider using `transform` instead of scroll for smoother animation
+
+### Memory leaks
+
+- The module automatically cleans up on unmount
+- If using `useSyncScrollWithRef`, ensure the ref is stable (not recreated on each render)
+
+## Browser Support
+
+Works in all modern browsers that support:
+
+- React 16.8+ (Hooks)
+- `requestAnimationFrame`
+- Passive event listeners
+
+## License
+
+Part of the Timeline Waterfall component library.