@liveblocks/react-ui 2.25.0-aiprivatebeta7 → 2.25.0-aiprivatebeta9

package/dist/primitives/index.js

@@ -1,9 +1,7 @@
-import * as index from './AiChatComposer/index.js';
-export { index as AiChatComposer };
-import * as index$1 from './Comment/index.js';
-export { index$1 as Comment };
-import * as index$2 from './Composer/index.js';
-export { index$2 as Composer };
+import * as index from './Comment/index.js';
+export { index as Comment };
+import * as index$1 from './Composer/index.js';
+export { index$1 as Composer };
 export { useComposer } from './Composer/contexts.js';
 export { AttachmentTooLargeError } from './Composer/utils.js';
 export { FileSize } from './FileSize.js';

package/dist/primitives/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/utils/ErrorBoundary.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const ErrorBoundaryContext = react.createContext(null);
+class ErrorBoundary extends react.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(error, errorInfo);
+  }
+  reset() {
+    this.setState({ error: null });
+  }
+  render() {
+    if (this.state.error === null)
+      return this.props.children;
+    const error = this.state.error;
+    const reset = this.reset.bind(this);
+    const fallback = this.props.fallback;
+    const Fallback = typeof fallback === "function" ? fallback : () => fallback ?? null;
+    return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundaryContext.Provider, {
+      value: { error, reset },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Fallback, {
+        error: this.state.error
+      })
+    });
+  }
+}
+function useErrorBoundary() {
+  const context = react.useContext(ErrorBoundaryContext);
+  if (context === null) {
+    throw new Error(
+      "useErrorBoundary must be used within an ErrorBoundary component"
+    );
+  }
+  return context;
+}
+
+exports.ErrorBoundary = ErrorBoundary;
+exports.useErrorBoundary = useErrorBoundary;
+//# sourceMappingURL=ErrorBoundary.cjs.map

package/dist/utils/ErrorBoundary.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.cjs","sources":["../../src/utils/ErrorBoundary.tsx"],"sourcesContent":["import type { ComponentType, ErrorInfo, ReactNode } from \"react\";\nimport { Component, createContext, useContext } from \"react\";\n\nconst ErrorBoundaryContext = createContext<{\n  error: Error;\n  reset: () => void;\n} | null>(null);\n\nexport interface ErrorBoundaryProps {\n  children?: ReactNode;\n  fallback?: ReactNode | ComponentType<{ error: Error }>;\n}\n\ninterface ErrorBoundaryState {\n  error: Error | null;\n}\n\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { error: null };\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    console.error(error, errorInfo);\n  }\n\n  reset() {\n    this.setState({ error: null });\n  }\n\n  render(): React.ReactNode {\n    if (this.state.error === null) return this.props.children;\n\n    const error = this.state.error;\n    const reset = this.reset.bind(this);\n    const fallback = this.props.fallback;\n    const Fallback =\n      typeof fallback === \"function\" ? fallback : () => fallback ?? null;\n    return (\n      <ErrorBoundaryContext.Provider value={{ error, reset }}>\n        <Fallback error={this.state.error} />\n      </ErrorBoundaryContext.Provider>\n    );\n  }\n}\n\nexport function useErrorBoundary(): {\n  error: Error;\n  reset: () => void;\n} {\n  const context = useContext(ErrorBoundaryContext);\n\n  if (context === null) {\n    throw new Error(\n      \"useErrorBoundary must be used within an ErrorBoundary component\"\n    );\n  }\n\n  return context;\n}\n"],"names":["createContext","Component","jsx","useContext"],"mappings":";;;;;AAGA,MAAM,oBAAA,GAAuBA,oBAGnB,IAAI,CAAA,CAAA;AAWP,MAAM,sBAAsBC,eAGjC,CAAA;AAAA,EACA,YAAY,KAA2B,EAAA;AACrC,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,KAAA,EAAO,IAAK,EAAA,CAAA;AAAA,GAC7B;AAAA,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAC5C,IAAA,OAAO,EAAE,KAAM,EAAA,CAAA;AAAA,GACjB;AAAA,EAEA,iBAAA,CAAkB,OAAc,SAA4B,EAAA;AAC1D,IAAQ,OAAA,CAAA,KAAA,CAAM,OAAO,SAAS,CAAA,CAAA;AAAA,GAChC;AAAA,EAEA,KAAQ,GAAA;AACN,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,KAAO,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,GAC/B;AAAA,EAEA,MAA0B,GAAA;AACxB,IAAI,IAAA,IAAA,CAAK,MAAM,KAAU,KAAA,IAAA;AAAM,MAAA,OAAO,KAAK,KAAM,CAAA,QAAA,CAAA;AAEjD,IAAM,MAAA,KAAA,GAAQ,KAAK,KAAM,CAAA,KAAA,CAAA;AACzB,IAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,KAAM,CAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AAClC,IAAM,MAAA,QAAA,GAAW,KAAK,KAAM,CAAA,QAAA,CAAA;AAC5B,IAAA,MAAM,WACJ,OAAO,QAAA,KAAa,UAAa,GAAA,QAAA,GAAW,MAAM,QAAY,IAAA,IAAA,CAAA;AAChE,IACE,uBAAAC,cAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,MAA8B,KAAA,EAAO,EAAE,KAAA,EAAO,KAAM,EAAA;AAAA,MACnD,QAAC,kBAAAA,cAAA,CAAA,QAAA,EAAA;AAAA,QAAS,KAAA,EAAO,KAAK,KAAM,CAAA,KAAA;AAAA,OAAO,CAAA;AAAA,KACrC,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;AAEO,SAAS,gBAGd,GAAA;AACA,EAAM,MAAA,OAAA,GAAUC,iBAAW,oBAAoB,CAAA,CAAA;AAE/C,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,iEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}

package/dist/utils/ErrorBoundary.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, Component, useContext } from 'react';
+
+const ErrorBoundaryContext = createContext(null);
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(error, errorInfo);
+  }
+  reset() {
+    this.setState({ error: null });
+  }
+  render() {
+    if (this.state.error === null)
+      return this.props.children;
+    const error = this.state.error;
+    const reset = this.reset.bind(this);
+    const fallback = this.props.fallback;
+    const Fallback = typeof fallback === "function" ? fallback : () => fallback ?? null;
+    return /* @__PURE__ */ jsx(ErrorBoundaryContext.Provider, {
+      value: { error, reset },
+      children: /* @__PURE__ */ jsx(Fallback, {
+        error: this.state.error
+      })
+    });
+  }
+}
+function useErrorBoundary() {
+  const context = useContext(ErrorBoundaryContext);
+  if (context === null) {
+    throw new Error(
+      "useErrorBoundary must be used within an ErrorBoundary component"
+    );
+  }
+  return context;
+}
+
+export { ErrorBoundary, useErrorBoundary };
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/utils/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../../src/utils/ErrorBoundary.tsx"],"sourcesContent":["import type { ComponentType, ErrorInfo, ReactNode } from \"react\";\nimport { Component, createContext, useContext } from \"react\";\n\nconst ErrorBoundaryContext = createContext<{\n  error: Error;\n  reset: () => void;\n} | null>(null);\n\nexport interface ErrorBoundaryProps {\n  children?: ReactNode;\n  fallback?: ReactNode | ComponentType<{ error: Error }>;\n}\n\ninterface ErrorBoundaryState {\n  error: Error | null;\n}\n\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { error: null };\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    console.error(error, errorInfo);\n  }\n\n  reset() {\n    this.setState({ error: null });\n  }\n\n  render(): React.ReactNode {\n    if (this.state.error === null) return this.props.children;\n\n    const error = this.state.error;\n    const reset = this.reset.bind(this);\n    const fallback = this.props.fallback;\n    const Fallback =\n      typeof fallback === \"function\" ? fallback : () => fallback ?? null;\n    return (\n      <ErrorBoundaryContext.Provider value={{ error, reset }}>\n        <Fallback error={this.state.error} />\n      </ErrorBoundaryContext.Provider>\n    );\n  }\n}\n\nexport function useErrorBoundary(): {\n  error: Error;\n  reset: () => void;\n} {\n  const context = useContext(ErrorBoundaryContext);\n\n  if (context === null) {\n    throw new Error(\n      \"useErrorBoundary must be used within an ErrorBoundary component\"\n    );\n  }\n\n  return context;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,oBAAA,GAAuB,cAGnB,IAAI,CAAA,CAAA;AAWP,MAAM,sBAAsB,SAGjC,CAAA;AAAA,EACA,YAAY,KAA2B,EAAA;AACrC,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,KAAA,EAAO,IAAK,EAAA,CAAA;AAAA,GAC7B;AAAA,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAC5C,IAAA,OAAO,EAAE,KAAM,EAAA,CAAA;AAAA,GACjB;AAAA,EAEA,iBAAA,CAAkB,OAAc,SAA4B,EAAA;AAC1D,IAAQ,OAAA,CAAA,KAAA,CAAM,OAAO,SAAS,CAAA,CAAA;AAAA,GAChC;AAAA,EAEA,KAAQ,GAAA;AACN,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,KAAO,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,GAC/B;AAAA,EAEA,MAA0B,GAAA;AACxB,IAAI,IAAA,IAAA,CAAK,MAAM,KAAU,KAAA,IAAA;AAAM,MAAA,OAAO,KAAK,KAAM,CAAA,QAAA,CAAA;AAEjD,IAAM,MAAA,KAAA,GAAQ,KAAK,KAAM,CAAA,KAAA,CAAA;AACzB,IAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,KAAM,CAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AAClC,IAAM,MAAA,QAAA,GAAW,KAAK,KAAM,CAAA,QAAA,CAAA;AAC5B,IAAA,MAAM,WACJ,OAAO,QAAA,KAAa,UAAa,GAAA,QAAA,GAAW,MAAM,QAAY,IAAA,IAAA,CAAA;AAChE,IACE,uBAAA,GAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,MAA8B,KAAA,EAAO,EAAE,KAAA,EAAO,KAAM,EAAA;AAAA,MACnD,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAS,KAAA,EAAO,KAAK,KAAM,CAAA,KAAA;AAAA,OAAO,CAAA;AAAA,KACrC,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;AAEO,SAAS,gBAGd,GAAA;AACA,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAE/C,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,iEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}

package/dist/utils/use-visible.cjs

@@ -3,68 +3,86 @@
 var react = require('react');
 var useLatest = require('./use-latest.cjs');
 
-let intersectionObserver;
-const intersectionCallbacks = /* @__PURE__ */ new WeakMap();
-function observe(element, callback) {
-  if (!intersectionObserver) {
-    intersectionObserver = new IntersectionObserver((entries) => {
-      for (const entry of entries) {
-        const callback2 = intersectionCallbacks.get(entry.target);
-        callback2?.(entry);
+let optionlessIntersectionObserver;
+const optionlessIntersectionCallbacks = /* @__PURE__ */ new WeakMap();
+const individualIntersectionObservers = /* @__PURE__ */ new WeakMap();
+function observe(element, callback, options) {
+  if (!options) {
+    if (!optionlessIntersectionObserver) {
+      optionlessIntersectionObserver = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          const callback2 = optionlessIntersectionCallbacks.get(entry.target);
+          callback2?.(entry);
+        }
+      });
+    }
+    optionlessIntersectionCallbacks.set(element, callback);
+    optionlessIntersectionObserver.observe(element);
+  } else {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          callback?.(entry);
+        }
+      },
+      {
+        root: options.root?.current,
+        rootMargin: typeof options.rootMargin === "number" ? `${options.rootMargin}px` : options.rootMargin
       }
-    });
+    );
+    individualIntersectionObservers.set(element, observer);
+    observer.observe(element);
   }
-  intersectionCallbacks.set(element, callback);
-  intersectionObserver.observe(element);
 }
-function unobserve(element) {
-  intersectionCallbacks.delete(element);
-  intersectionObserver?.unobserve(element);
-}
-function useVisible(ref, options) {
-  const [isVisible, setVisible] = react.useState(false);
-  const enabled = options?.enabled ?? true;
-  react.useEffect(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (enabled) {
-      observe(element, (entry) => {
-        setVisible(entry.isIntersecting);
-      });
-    } else {
-      unobserve(element);
-    }
-    return () => {
-      unobserve(element);
-    };
-  }, [enabled]);
-  return isVisible;
+function unobserve(element, options) {
+  if (!options) {
+    optionlessIntersectionCallbacks.delete(element);
+    optionlessIntersectionObserver?.unobserve(element);
+  } else {
+    const observer = individualIntersectionObservers.get(element);
+    observer?.unobserve(element);
+    individualIntersectionObservers.delete(element);
+  }
 }
-function useVisibleCallback(ref, callback, options) {
+function useIntersectionCallback(ref, callback, options) {
   const enabled = options?.enabled ?? true;
   const latestCallback = useLatest.useLatest(callback);
+  const { root, rootMargin } = options ?? {};
   react.useEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
     }
+    const observeOptions = {
+      root,
+      rootMargin
+    };
     if (enabled) {
-      observe(element, (entry) => {
-        if (entry.isIntersecting) {
-          latestCallback.current();
-        }
-      });
+      observe(
+        element,
+        (entry) => {
+          latestCallback.current(entry.isIntersecting, entry);
+        },
+        observeOptions
+      );
     } else {
-      unobserve(element);
+      unobserve(element, observeOptions);
     }
     return () => {
-      unobserve(element);
+      unobserve(element, observeOptions);
     };
-  }, [enabled]);
+  }, [ref, enabled, latestCallback, root, rootMargin]);
+}
+function useVisible(ref, options) {
+  const [isVisible, setVisible] = react.useState(false);
+  useIntersectionCallback(
+    ref,
+    (isIntersecting) => setVisible(isIntersecting),
+    options
+  );
+  return isVisible;
 }
 
+exports.useIntersectionCallback = useIntersectionCallback;
 exports.useVisible = useVisible;
-exports.useVisibleCallback = useVisibleCallback;
 //# sourceMappingURL=use-visible.cjs.map

package/dist/utils/use-visible.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-visible.cjs","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ntype Options = { enabled?: boolean };\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet intersectionObserver: IntersectionObserver | undefined;\nconst intersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback\n) {\n  if (!intersectionObserver) {\n    intersectionObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        const callback = intersectionCallbacks.get(entry.target);\n\n        callback?.(entry);\n      }\n    });\n  }\n\n  intersectionCallbacks.set(element, callback);\n  intersectionObserver.observe(element);\n}\n\nfunction unobserve(element: Element) {\n  intersectionCallbacks.delete(element);\n  intersectionObserver?.unobserve(element);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible(ref: RefObject<Element>, options?: Options) {\n  const [isVisible, setVisible] = useState(false);\n  const enabled = options?.enabled ?? true;\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        setVisible(entry.isIntersecting);\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return isVisible;\n}\n\nexport function useVisibleCallback<T extends (...args: any[]) => void>(\n  ref: RefObject<Element>,\n  callback: T,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        if (entry.isIntersecting) {\n          latestCallback.current();\n        }\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"names":["callback","useState","useEffect","useLatest"],"mappings":";;;;;AAUA,IAAI,oBAAA,CAAA;AACJ,MAAM,qBAAA,uBAA4B,OAGhC,EAAA,CAAA;AAEF,SAAS,OAAA,CACP,SACA,QACA,EAAA;AACA,EAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,IAAuB,oBAAA,GAAA,IAAI,oBAAqB,CAAA,CAAC,OAAY,KAAA;AAC3D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAMA,SAAW,GAAA,qBAAA,CAAsB,GAAI,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AAEvD,QAAAA,YAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAsB,qBAAA,CAAA,GAAA,CAAI,SAAS,QAAQ,CAAA,CAAA;AAC3C,EAAA,oBAAA,CAAqB,QAAQ,OAAO,CAAA,CAAA;AACtC,CAAA;AAEA,SAAS,UAAU,OAAkB,EAAA;AACnC,EAAA,qBAAA,CAAsB,OAAO,OAAO,CAAA,CAAA;AACpC,EAAA,oBAAA,EAAsB,UAAU,OAAO,CAAA,CAAA;AACzC,CAAA;AAKgB,SAAA,UAAA,CAAW,KAAyB,OAAmB,EAAA;AACrE,EAAA,MAAM,CAAC,SAAA,EAAW,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAC9C,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AAEpC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,UAAA,CAAW,MAAM,cAAc,CAAA,CAAA;AAAA,OAChC,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EAAO,OAAA,SAAA,CAAA;AACT,CAAA;AAEgB,SAAA,kBAAA,CACd,GACA,EAAA,QAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AACpC,EAAM,MAAA,cAAA,GAAiBC,oBAAU,QAAQ,CAAA,CAAA;AAEzC,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,IAAI,MAAM,cAAgB,EAAA;AACxB,UAAA,cAAA,CAAe,OAAQ,EAAA,CAAA;AAAA,SACzB;AAAA,OACD,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AACd;;;;;"}
+{"version":3,"file":"use-visible.cjs","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ninterface ObserveOptions {\n  rootMargin?: string | number;\n  root?: RefObject<Element>;\n}\n\ninterface Options extends ObserveOptions {\n  enabled?: boolean;\n}\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet optionlessIntersectionObserver: IntersectionObserver | undefined;\nconst optionlessIntersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nconst individualIntersectionObservers = new WeakMap<\n  Element,\n  IntersectionObserver\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback,\n  options?: ObserveOptions\n) {\n  // Observers without options share a common IntersectionObserver instance, ones with options have their own\n  if (!options) {\n    if (!optionlessIntersectionObserver) {\n      optionlessIntersectionObserver = new IntersectionObserver((entries) => {\n        for (const entry of entries) {\n          const callback = optionlessIntersectionCallbacks.get(entry.target);\n\n          callback?.(entry);\n        }\n      });\n    }\n\n    optionlessIntersectionCallbacks.set(element, callback);\n    optionlessIntersectionObserver.observe(element);\n  } else {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          callback?.(entry);\n        }\n      },\n      {\n        root: options.root?.current,\n        rootMargin:\n          typeof options.rootMargin === \"number\"\n            ? `${options.rootMargin}px`\n            : options.rootMargin,\n      }\n    );\n\n    individualIntersectionObservers.set(element, observer);\n    observer.observe(element);\n  }\n}\n\nfunction unobserve(element: Element, options?: ObserveOptions) {\n  if (!options) {\n    optionlessIntersectionCallbacks.delete(element);\n    optionlessIntersectionObserver?.unobserve(element);\n  } else {\n    const observer = individualIntersectionObservers.get(element);\n\n    observer?.unobserve(element);\n    individualIntersectionObservers.delete(element);\n  }\n}\n\n/**\n * Observe when an element enters or exits the viewport.\n *\n * If you only need to get a stateful visibility value, use the higher level hook `useVisible` instead.\n */\nexport function useIntersectionCallback(\n  ref: RefObject<Element>,\n  callback: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n  const { root, rootMargin } = options ?? {};\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    const observeOptions: ObserveOptions = {\n      root,\n      rootMargin,\n    };\n\n    if (enabled) {\n      observe(\n        element,\n        (entry) => {\n          // The intersection observer entry might be useful in some cases but the main information\n          // is whether the element is intersecting or not so we pass that as the first argument.\n          latestCallback.current(entry.isIntersecting, entry);\n        },\n        observeOptions\n      );\n    } else {\n      unobserve(element, observeOptions);\n    }\n\n    return () => {\n      unobserve(element, observeOptions);\n    };\n  }, [ref, enabled, latestCallback, root, rootMargin]);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible(ref: RefObject<Element>, options?: Options) {\n  const [isVisible, setVisible] = useState(false);\n\n  useIntersectionCallback(\n    ref,\n    (isIntersecting) => setVisible(isIntersecting),\n    options\n  );\n\n  return isVisible;\n}\n"],"names":["callback","useLatest","useEffect","useState"],"mappings":"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"}

package/dist/utils/use-visible.js

@@ -1,67 +1,85 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useLatest } from './use-latest.js';
 
-let intersectionObserver;
-const intersectionCallbacks = /* @__PURE__ */ new WeakMap();
-function observe(element, callback) {
-  if (!intersectionObserver) {
-    intersectionObserver = new IntersectionObserver((entries) => {
-      for (const entry of entries) {
-        const callback2 = intersectionCallbacks.get(entry.target);
-        callback2?.(entry);
+let optionlessIntersectionObserver;
+const optionlessIntersectionCallbacks = /* @__PURE__ */ new WeakMap();
+const individualIntersectionObservers = /* @__PURE__ */ new WeakMap();
+function observe(element, callback, options) {
+  if (!options) {
+    if (!optionlessIntersectionObserver) {
+      optionlessIntersectionObserver = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          const callback2 = optionlessIntersectionCallbacks.get(entry.target);
+          callback2?.(entry);
+        }
+      });
+    }
+    optionlessIntersectionCallbacks.set(element, callback);
+    optionlessIntersectionObserver.observe(element);
+  } else {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          callback?.(entry);
+        }
+      },
+      {
+        root: options.root?.current,
+        rootMargin: typeof options.rootMargin === "number" ? `${options.rootMargin}px` : options.rootMargin
       }
-    });
+    );
+    individualIntersectionObservers.set(element, observer);
+    observer.observe(element);
   }
-  intersectionCallbacks.set(element, callback);
-  intersectionObserver.observe(element);
 }
-function unobserve(element) {
-  intersectionCallbacks.delete(element);
-  intersectionObserver?.unobserve(element);
-}
-function useVisible(ref, options) {
-  const [isVisible, setVisible] = useState(false);
-  const enabled = options?.enabled ?? true;
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (enabled) {
-      observe(element, (entry) => {
-        setVisible(entry.isIntersecting);
-      });
-    } else {
-      unobserve(element);
-    }
-    return () => {
-      unobserve(element);
-    };
-  }, [enabled]);
-  return isVisible;
+function unobserve(element, options) {
+  if (!options) {
+    optionlessIntersectionCallbacks.delete(element);
+    optionlessIntersectionObserver?.unobserve(element);
+  } else {
+    const observer = individualIntersectionObservers.get(element);
+    observer?.unobserve(element);
+    individualIntersectionObservers.delete(element);
+  }
 }
-function useVisibleCallback(ref, callback, options) {
+function useIntersectionCallback(ref, callback, options) {
   const enabled = options?.enabled ?? true;
   const latestCallback = useLatest(callback);
+  const { root, rootMargin } = options ?? {};
   useEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
     }
+    const observeOptions = {
+      root,
+      rootMargin
+    };
     if (enabled) {
-      observe(element, (entry) => {
-        if (entry.isIntersecting) {
-          latestCallback.current();
-        }
-      });
+      observe(
+        element,
+        (entry) => {
+          latestCallback.current(entry.isIntersecting, entry);
+        },
+        observeOptions
+      );
     } else {
-      unobserve(element);
+      unobserve(element, observeOptions);
     }
     return () => {
-      unobserve(element);
+      unobserve(element, observeOptions);
     };
-  }, [enabled]);
+  }, [ref, enabled, latestCallback, root, rootMargin]);
+}
+function useVisible(ref, options) {
+  const [isVisible, setVisible] = useState(false);
+  useIntersectionCallback(
+    ref,
+    (isIntersecting) => setVisible(isIntersecting),
+    options
+  );
+  return isVisible;
 }
 
-export { useVisible, useVisibleCallback };
+export { useIntersectionCallback, useVisible };
 //# sourceMappingURL=use-visible.js.map

package/dist/utils/use-visible.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-visible.js","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ntype Options = { enabled?: boolean };\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet intersectionObserver: IntersectionObserver | undefined;\nconst intersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback\n) {\n  if (!intersectionObserver) {\n    intersectionObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        const callback = intersectionCallbacks.get(entry.target);\n\n        callback?.(entry);\n      }\n    });\n  }\n\n  intersectionCallbacks.set(element, callback);\n  intersectionObserver.observe(element);\n}\n\nfunction unobserve(element: Element) {\n  intersectionCallbacks.delete(element);\n  intersectionObserver?.unobserve(element);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible(ref: RefObject<Element>, options?: Options) {\n  const [isVisible, setVisible] = useState(false);\n  const enabled = options?.enabled ?? true;\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        setVisible(entry.isIntersecting);\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return isVisible;\n}\n\nexport function useVisibleCallback<T extends (...args: any[]) => void>(\n  ref: RefObject<Element>,\n  callback: T,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        if (entry.isIntersecting) {\n          latestCallback.current();\n        }\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"names":["callback"],"mappings":";;;AAUA,IAAI,oBAAA,CAAA;AACJ,MAAM,qBAAA,uBAA4B,OAGhC,EAAA,CAAA;AAEF,SAAS,OAAA,CACP,SACA,QACA,EAAA;AACA,EAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,IAAuB,oBAAA,GAAA,IAAI,oBAAqB,CAAA,CAAC,OAAY,KAAA;AAC3D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAMA,SAAW,GAAA,qBAAA,CAAsB,GAAI,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AAEvD,QAAAA,YAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAsB,qBAAA,CAAA,GAAA,CAAI,SAAS,QAAQ,CAAA,CAAA;AAC3C,EAAA,oBAAA,CAAqB,QAAQ,OAAO,CAAA,CAAA;AACtC,CAAA;AAEA,SAAS,UAAU,OAAkB,EAAA;AACnC,EAAA,qBAAA,CAAsB,OAAO,OAAO,CAAA,CAAA;AACpC,EAAA,oBAAA,EAAsB,UAAU,OAAO,CAAA,CAAA;AACzC,CAAA;AAKgB,SAAA,UAAA,CAAW,KAAyB,OAAmB,EAAA;AACrE,EAAA,MAAM,CAAC,SAAA,EAAW,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC9C,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AAEpC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,UAAA,CAAW,MAAM,cAAc,CAAA,CAAA;AAAA,OAChC,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EAAO,OAAA,SAAA,CAAA;AACT,CAAA;AAEgB,SAAA,kBAAA,CACd,GACA,EAAA,QAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AACpC,EAAM,MAAA,cAAA,GAAiB,UAAU,QAAQ,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,IAAI,MAAM,cAAgB,EAAA;AACxB,UAAA,cAAA,CAAe,OAAQ,EAAA,CAAA;AAAA,SACzB;AAAA,OACD,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AACd;;;;"}
+{"version":3,"file":"use-visible.js","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ninterface ObserveOptions {\n  rootMargin?: string | number;\n  root?: RefObject<Element>;\n}\n\ninterface Options extends ObserveOptions {\n  enabled?: boolean;\n}\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet optionlessIntersectionObserver: IntersectionObserver | undefined;\nconst optionlessIntersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nconst individualIntersectionObservers = new WeakMap<\n  Element,\n  IntersectionObserver\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback,\n  options?: ObserveOptions\n) {\n  // Observers without options share a common IntersectionObserver instance, ones with options have their own\n  if (!options) {\n    if (!optionlessIntersectionObserver) {\n      optionlessIntersectionObserver = new IntersectionObserver((entries) => {\n        for (const entry of entries) {\n          const callback = optionlessIntersectionCallbacks.get(entry.target);\n\n          callback?.(entry);\n        }\n      });\n    }\n\n    optionlessIntersectionCallbacks.set(element, callback);\n    optionlessIntersectionObserver.observe(element);\n  } else {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          callback?.(entry);\n        }\n      },\n      {\n        root: options.root?.current,\n        rootMargin:\n          typeof options.rootMargin === \"number\"\n            ? `${options.rootMargin}px`\n            : options.rootMargin,\n      }\n    );\n\n    individualIntersectionObservers.set(element, observer);\n    observer.observe(element);\n  }\n}\n\nfunction unobserve(element: Element, options?: ObserveOptions) {\n  if (!options) {\n    optionlessIntersectionCallbacks.delete(element);\n    optionlessIntersectionObserver?.unobserve(element);\n  } else {\n    const observer = individualIntersectionObservers.get(element);\n\n    observer?.unobserve(element);\n    individualIntersectionObservers.delete(element);\n  }\n}\n\n/**\n * Observe when an element enters or exits the viewport.\n *\n * If you only need to get a stateful visibility value, use the higher level hook `useVisible` instead.\n */\nexport function useIntersectionCallback(\n  ref: RefObject<Element>,\n  callback: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n  const { root, rootMargin } = options ?? {};\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    const observeOptions: ObserveOptions = {\n      root,\n      rootMargin,\n    };\n\n    if (enabled) {\n      observe(\n        element,\n        (entry) => {\n          // The intersection observer entry might be useful in some cases but the main information\n          // is whether the element is intersecting or not so we pass that as the first argument.\n          latestCallback.current(entry.isIntersecting, entry);\n        },\n        observeOptions\n      );\n    } else {\n      unobserve(element, observeOptions);\n    }\n\n    return () => {\n      unobserve(element, observeOptions);\n    };\n  }, [ref, enabled, latestCallback, root, rootMargin]);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible(ref: RefObject<Element>, options?: Options) {\n  const [isVisible, setVisible] = useState(false);\n\n  useIntersectionCallback(\n    ref,\n    (isIntersecting) => setVisible(isIntersecting),\n    options\n  );\n\n  return isVisible;\n}\n"],"names":["callback"],"mappings":"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"}

package/dist/version.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "2.25.0-aiprivatebeta7" === "string" && "2.25.0-aiprivatebeta7";
+const PKG_VERSION = typeof "2.25.0-aiprivatebeta9" === "string" && "2.25.0-aiprivatebeta9";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.js

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "2.25.0-aiprivatebeta7" === "string" && "2.25.0-aiprivatebeta7";
+const PKG_VERSION = typeof "2.25.0-aiprivatebeta9" === "string" && "2.25.0-aiprivatebeta9";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "2.25.0-aiprivatebeta7",
+  "version": "2.25.0-aiprivatebeta9",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "type": "module",
@@ -76,15 +76,15 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.25.0-aiprivatebeta7",
-    "@liveblocks/core": "2.25.0-aiprivatebeta7",
-    "@liveblocks/react": "2.25.0-aiprivatebeta7",
+    "@liveblocks/client": "2.25.0-aiprivatebeta9",
+    "@liveblocks/core": "2.25.0-aiprivatebeta9",
+    "@liveblocks/react": "2.25.0-aiprivatebeta9",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
-    "frimousse": "^0.1.0",
+    "frimousse": "^0.2.0",
     "marked": "^15.0.11",
     "slate": "^0.110.2",
     "slate-history": "^0.110.3",

package/src/styles/constants.css

@@ -10,7 +10,7 @@ $lb-elevation-shadow:
   0 0 0 1px rgb(0 0 0 / 4%),
   0 2px 6px rgb(0 0 0 / 8%),
   0 8px 26px rgb(0 0 0 / 12%);
-$lb-elevation-shadow-small:
+$lb-elevation-shadow-moderate:
   0 0 0 1px rgb(0 0 0 / 4%),
   0 2px 6px rgb(0 0 0 / 6%),
   0 8px 26px rgb(0 0 0 / 8%);

package/src/styles/dark/index.css

@@ -18,14 +18,18 @@
   --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
   --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
   --lb-elevation-shadow: $lb-elevation-shadow;
-  --lb-elevation-shadow-small: $lb-elevation-shadow-small;
+  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;
   --lb-tooltip-shadow: $lb-tooltip-shadow;
 
   color-scheme: dark;
 
-  &.lb-elevation,
-  &.lb-tooltip {
+  &:where(.lb-elevation, .lb-tooltip) {
     --lb-background: #333;
     --lb-foreground-contrast: 10%;
   }
+
+  &:where(.lb-elevation-moderate) {
+    --lb-background: #2a2a2a;
+    --lb-foreground-contrast: 10%;
+  }
 }