@liveblocks/react-ui 3.15.0-feeds2 → 3.15.0-rc1

package/dist/components/Cursors.js

@@ -0,0 +1,254 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { isPlainObject, makeEventSource } from '@liveblocks/core';
+import { useRoom, useOther, useUser, useUpdateMyPresence, useOthersConnectionIds } from '@liveblocks/react';
+import { useLayoutEffect } from '@liveblocks/react/_private';
+import { useRef, forwardRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import { makeAnimationLoop } from '../utils/animation-loop.js';
+import { cn } from '../utils/cn.js';
+import { useWindowFocus } from '../utils/use-window-focus.js';
+import { Cursor } from './Cursor.js';
+
+const STIFFNESS = 320;
+const DAMPING = 32;
+const EPSILON = 0.01;
+const DEFAULT_PRESENCE_KEY = "cursor";
+function $string(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function $coordinates(value) {
+  if (isPlainObject(value) && typeof value.x === "number" && typeof value.y === "number") {
+    return value;
+  }
+  return void 0;
+}
+const loop = makeAnimationLoop();
+function makeCoordinatesSpring() {
+  const updates = makeEventSource();
+  let value = null;
+  let target = null;
+  const velocity = { x: 0, y: 0 };
+  const spring = {
+    active: false,
+    step(dt) {
+      if (value === null || target === null) {
+        spring.active = false;
+        return;
+      }
+      const k = STIFFNESS;
+      const d = DAMPING;
+      const dx = value.x - target.x;
+      const dy = value.y - target.y;
+      velocity.x += (-k * dx - d * velocity.x) * dt;
+      velocity.y += (-k * dy - d * velocity.y) * dt;
+      const nx = value.x + velocity.x * dt;
+      const ny = value.y + velocity.y * dt;
+      if (nx !== value.x || ny !== value.y) {
+        value.x = nx;
+        value.y = ny;
+        updates.notify(value);
+      }
+      if (Math.abs(velocity.x) < EPSILON && Math.abs(velocity.y) < EPSILON && Math.abs(target.x - value.x) < EPSILON && Math.abs(target.y - value.y) < EPSILON) {
+        if (value.x !== target.x || value.y !== target.y) {
+          value.x = target.x;
+          value.y = target.y;
+          updates.notify(value);
+        }
+        velocity.x = 0;
+        velocity.y = 0;
+        spring.active = false;
+      }
+    }
+  };
+  return {
+    get() {
+      return value;
+    },
+    set(point) {
+      if (point === null) {
+        value = null;
+        target = null;
+        velocity.x = 0;
+        velocity.y = 0;
+        spring.active = false;
+        loop.remove(spring);
+        updates.notify(null);
+        return;
+      }
+      if (value === null) {
+        value = { x: point.x, y: point.y };
+        target = point;
+        velocity.x = 0;
+        velocity.y = 0;
+        updates.notify(value);
+        return;
+      }
+      target = point;
+      if (!spring.active && (value.x !== target.x || value.y !== target.y)) {
+        spring.active = true;
+        loop.add(spring);
+      }
+    },
+    subscribe: updates.subscribe,
+    dispose() {
+      spring.active = false;
+      loop.remove(spring);
+      updates.dispose();
+    }
+  };
+}
+function PresenceCursor({
+  connectionId,
+  presenceKey,
+  sizeRef,
+  sizeEvents
+}) {
+  const room = useRoom();
+  const cursorRef = useRef(null);
+  const userId = useOther(connectionId, (other) => $string(other.id));
+  const { user, isLoading } = useUser(userId ?? "");
+  const hasUserInfo = userId !== void 0 && !isLoading;
+  const color = $string(user?.color);
+  const name = $string(user?.name);
+  useLayoutEffect(() => {
+    const spring = makeCoordinatesSpring();
+    function update() {
+      const element = cursorRef.current;
+      const coordinates = spring.get();
+      if (!element) {
+        return;
+      }
+      if (!hasUserInfo || coordinates === null) {
+        element.style.transform = "translate3d(0, 0, 0)";
+        element.style.display = "none";
+        return;
+      }
+      if (sizeRef.current) {
+        element.style.transform = `translate3d(${coordinates.x * sizeRef.current.width}px, ${coordinates.y * sizeRef.current.height}px, 0)`;
+      }
+      element.style.display = "";
+    }
+    const unsubscribeSpring = spring.subscribe(update);
+    const unsubscribeSize = sizeEvents.subscribe(update);
+    update();
+    const unsubscribeOther = room.events.others.subscribe(({ others }) => {
+      const other = others.find((other2) => other2.connectionId === connectionId);
+      const cursor = $coordinates(other?.presence[presenceKey]);
+      spring.set(cursor ?? null);
+    });
+    return () => {
+      spring.dispose();
+      unsubscribeSpring();
+      unsubscribeSize();
+      unsubscribeOther();
+    };
+  }, [room, connectionId, presenceKey, sizeRef, sizeEvents, hasUserInfo]);
+  return /* @__PURE__ */ jsx(
+    Cursor,
+    {
+      color,
+      label: name,
+      ref: cursorRef,
+      style: { display: "none" }
+    }
+  );
+}
+const Cursors = forwardRef(
+  ({ className, children, presenceKey = DEFAULT_PRESENCE_KEY, ...props }, forwardedRef) => {
+    const ref = useRef(null);
+    const updateMyPresence = useUpdateMyPresence();
+    const othersConnectionIds = useOthersConnectionIds();
+    const sizeRef = useRef(null);
+    const [sizeEvents] = useState(() => makeEventSource());
+    const isWindowFocused = useWindowFocus();
+    useEffect(() => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
+      function setSize(size) {
+        sizeRef.current = size;
+        sizeEvents.notify();
+      }
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.target === element) {
+            setSize({
+              width: entry.contentRect.width,
+              height: entry.contentRect.height
+            });
+          }
+        }
+      });
+      setSize({
+        width: element.clientWidth,
+        height: element.clientHeight
+      });
+      observer.observe(element);
+      return () => {
+        observer.disconnect();
+      };
+    }, [sizeEvents]);
+    const handlePointerMove = useCallback(
+      (event) => {
+        const element = ref.current;
+        if (!element) {
+          return;
+        }
+        const bounds = element.getBoundingClientRect();
+        if (bounds.width === 0 || bounds.height === 0) {
+          return;
+        }
+        updateMyPresence({
+          [presenceKey]: {
+            x: (event.clientX - bounds.left) / bounds.width,
+            y: (event.clientY - bounds.top) / bounds.height
+          }
+        });
+      },
+      [updateMyPresence, presenceKey]
+    );
+    const handlePointerLeave = useCallback(() => {
+      updateMyPresence({
+        [presenceKey]: null
+      });
+    }, [updateMyPresence, presenceKey]);
+    useEffect(() => {
+      if (!isWindowFocused) {
+        updateMyPresence({
+          [presenceKey]: null
+        });
+      }
+    }, [isWindowFocused, updateMyPresence, presenceKey]);
+    useImperativeHandle(
+      forwardedRef,
+      () => ref.current,
+      []
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("lb-root lb-cursors", className),
+        ...props,
+        onPointerMove: handlePointerMove,
+        onPointerLeave: handlePointerLeave,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "lb-cursors-container", children: othersConnectionIds.map((connectionId) => /* @__PURE__ */ jsx(
+            PresenceCursor,
+            {
+              connectionId,
+              presenceKey,
+              sizeRef,
+              sizeEvents
+            },
+            connectionId
+          )) }),
+          children
+        ]
+      }
+    );
+  }
+);
+
+export { Cursors };
+//# sourceMappingURL=Cursors.js.map

package/dist/components/Cursors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cursors.js","sources":["../../src/components/Cursors.tsx"],"sourcesContent":["import type { EventSource } from \"@liveblocks/core\";\nimport { isPlainObject, makeEventSource } from \"@liveblocks/core\";\nimport {\n  useOther,\n  useOthersConnectionIds,\n  useRoom,\n  useUpdateMyPresence,\n  useUser,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  MutableRefObject,\n  PointerEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type Animatable, makeAnimationLoop } from \"../utils/animation-loop\";\nimport { cn } from \"../utils/cn\";\nimport { useWindowFocus } from \"../utils/use-window-focus\";\nimport { Cursor } from \"./Cursor\";\n\nconst STIFFNESS = 320;\nconst DAMPING = 32;\nconst EPSILON = 0.01;\n\nconst DEFAULT_PRESENCE_KEY = \"cursor\";\n\nexport interface CursorsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The key used to store the cursors in users' Presence.\n   * This can be used to have multiple `Cursors` in a single room.\n   */\n  presenceKey?: string;\n}\n\ntype Coordinates = {\n  x: number;\n  y: number;\n};\n\ntype Size = {\n  width: number;\n  height: number;\n};\n\nfunction $string(value: unknown): string | undefined {\n  return typeof value === \"string\" ? value : undefined;\n}\n\nfunction $coordinates(value: unknown): Coordinates | undefined {\n  if (\n    isPlainObject(value) &&\n    typeof value.x === \"number\" &&\n    typeof value.y === \"number\"\n  ) {\n    return value as Coordinates;\n  }\n\n  return undefined;\n}\n\n// Use a shared animation loop for all (active) springs.\nconst loop = makeAnimationLoop();\n\nfunction makeCoordinatesSpring() {\n  const updates = makeEventSource<Coordinates | null>();\n  let value: Coordinates | null = null;\n  let target: Coordinates | null = null;\n  const velocity = { x: 0, y: 0 };\n\n  const spring: Animatable = {\n    active: false,\n    step(dt: number) {\n      if (value === null || target === null) {\n        spring.active = false;\n        return;\n      }\n\n      const k = STIFFNESS;\n      const d = DAMPING;\n      const dx = value.x - target.x;\n      const dy = value.y - target.y;\n\n      velocity.x += (-k * dx - d * velocity.x) * dt;\n      velocity.y += (-k * dy - d * velocity.y) * dt;\n\n      const nx = value.x + velocity.x * dt;\n      const ny = value.y + velocity.y * dt;\n\n      if (nx !== value.x || ny !== value.y) {\n        value.x = nx;\n        value.y = ny;\n        updates.notify(value);\n      }\n\n      if (\n        Math.abs(velocity.x) < EPSILON &&\n        Math.abs(velocity.y) < EPSILON &&\n        Math.abs(target.x - value.x) < EPSILON &&\n        Math.abs(target.y - value.y) < EPSILON\n      ) {\n        if (value.x !== target.x || value.y !== target.y) {\n          value.x = target.x;\n          value.y = target.y;\n          updates.notify(value);\n        }\n\n        velocity.x = 0;\n        velocity.y = 0;\n        spring.active = false;\n      }\n    },\n  };\n\n  return {\n    get() {\n      return value;\n    },\n    set(point: Coordinates | null) {\n      if (point === null) {\n        value = null;\n        target = null;\n        velocity.x = 0;\n        velocity.y = 0;\n        spring.active = false;\n        loop.remove(spring);\n        updates.notify(null);\n        return;\n      }\n\n      if (value === null) {\n        value = { x: point.x, y: point.y };\n        target = point;\n        velocity.x = 0;\n        velocity.y = 0;\n        updates.notify(value);\n        return;\n      }\n\n      target = point;\n\n      if (!spring.active && (value.x !== target.x || value.y !== target.y)) {\n        spring.active = true;\n        loop.add(spring);\n      }\n    },\n    subscribe: updates.subscribe,\n    dispose() {\n      spring.active = false;\n      loop.remove(spring);\n      updates.dispose();\n    },\n  };\n}\n\nfunction PresenceCursor({\n  connectionId,\n  presenceKey,\n  sizeRef,\n  sizeEvents,\n}: {\n  connectionId: number;\n  presenceKey: string;\n  sizeRef: MutableRefObject<Size | null>;\n  sizeEvents: EventSource<void>;\n}) {\n  const room = useRoom();\n  const cursorRef = useRef<HTMLDivElement>(null);\n  const userId = useOther(connectionId, (other) => $string(other.id));\n  const { user, isLoading } = useUser(userId ?? \"\");\n  const hasUserInfo = userId !== undefined && !isLoading;\n  const color = $string(user?.color);\n  const name = $string(user?.name);\n\n  useLayoutEffect(() => {\n    const spring = makeCoordinatesSpring();\n\n    function update() {\n      const element = cursorRef.current;\n      const coordinates = spring.get();\n\n      if (!element) {\n        return;\n      }\n\n      if (!hasUserInfo || coordinates === null) {\n        element.style.transform = \"translate3d(0, 0, 0)\";\n        element.style.display = \"none\";\n        return;\n      }\n\n      if (sizeRef.current) {\n        element.style.transform = `translate3d(${coordinates.x * sizeRef.current.width}px, ${coordinates.y * sizeRef.current.height}px, 0)`;\n      }\n\n      element.style.display = \"\";\n    }\n\n    const unsubscribeSpring = spring.subscribe(update);\n    const unsubscribeSize = sizeEvents.subscribe(update);\n    update();\n\n    const unsubscribeOther = room.events.others.subscribe(({ others }) => {\n      const other = others.find((other) => other.connectionId === connectionId);\n      const cursor = $coordinates(other?.presence[presenceKey]);\n\n      spring.set(cursor ?? null);\n    });\n\n    return () => {\n      spring.dispose();\n      unsubscribeSpring();\n      unsubscribeSize();\n      unsubscribeOther();\n    };\n  }, [room, connectionId, presenceKey, sizeRef, sizeEvents, hasUserInfo]);\n\n  return (\n    <Cursor\n      color={color}\n      label={name}\n      ref={cursorRef}\n      style={{ display: \"none\" }}\n    />\n  );\n}\n\n/**\n * Displays multiplayer cursors.\n */\nexport const Cursors = forwardRef<HTMLDivElement, CursorsProps>(\n  (\n    { className, children, presenceKey = DEFAULT_PRESENCE_KEY, ...props },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const updateMyPresence = useUpdateMyPresence();\n    const othersConnectionIds = useOthersConnectionIds();\n    const sizeRef = useRef<Size | null>(null);\n    const [sizeEvents] = useState(() => makeEventSource<void>());\n    const isWindowFocused = useWindowFocus();\n\n    useEffect(() => {\n      const element = ref.current;\n\n      if (!element) {\n        return;\n      }\n\n      function setSize(size: Size) {\n        sizeRef.current = size;\n        sizeEvents.notify();\n      }\n\n      const observer = new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          if (entry.target === element) {\n            setSize({\n              width: entry.contentRect.width,\n              height: entry.contentRect.height,\n            });\n          }\n        }\n      });\n\n      setSize({\n        width: element.clientWidth,\n        height: element.clientHeight,\n      });\n\n      observer.observe(element);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [sizeEvents]);\n\n    const handlePointerMove = useCallback(\n      (event: PointerEvent) => {\n        const element = ref.current;\n\n        if (!element) {\n          return;\n        }\n\n        const bounds = element.getBoundingClientRect();\n\n        if (bounds.width === 0 || bounds.height === 0) {\n          return;\n        }\n\n        updateMyPresence({\n          [presenceKey]: {\n            x: (event.clientX - bounds.left) / bounds.width,\n            y: (event.clientY - bounds.top) / bounds.height,\n          },\n        });\n      },\n      [updateMyPresence, presenceKey]\n    );\n\n    const handlePointerLeave = useCallback(() => {\n      updateMyPresence({\n        [presenceKey]: null,\n      });\n    }, [updateMyPresence, presenceKey]);\n\n    useEffect(() => {\n      if (!isWindowFocused) {\n        updateMyPresence({\n          [presenceKey]: null,\n        });\n      }\n    }, [isWindowFocused, updateMyPresence, presenceKey]);\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => ref.current,\n      []\n    );\n\n    return (\n      <div\n        className={cn(\"lb-root lb-cursors\", className)}\n        {...props}\n        onPointerMove={handlePointerMove}\n        onPointerLeave={handlePointerLeave}\n        ref={ref}\n      >\n        <div className=\"lb-cursors-container\">\n          {othersConnectionIds.map((connectionId) => (\n            <PresenceCursor\n              key={connectionId}\n              connectionId={connectionId}\n              presenceKey={presenceKey}\n              sizeRef={sizeRef}\n              sizeEvents={sizeEvents}\n            />\n          ))}\n        </div>\n\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["other"],"mappings":"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"}

package/dist/components/FloatingComposer.cjs

@@ -0,0 +1,82 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var radixUi = require('radix-ui');
+var react = require('react');
+var config = require('../config.cjs');
+var constants = require('../constants.cjs');
+var overrides = require('../overrides.cjs');
+var cn = require('../utils/cn.cjs');
+var useControllableState = require('../utils/use-controllable-state.cjs');
+var Composer = require('./Composer.cjs');
+
+
+const FloatingComposer = react.forwardRef(
+  ({
+    children,
+    defaultOpen,
+    open,
+    onOpenChange,
+    side = "right",
+    sideOffset = constants.FLOATING_ELEMENT_SIDE_OFFSET,
+    align = "start",
+    alignOffset,
+    overrides: overrides$1,
+    className,
+    ...props
+  }, forwardedRef) => {
+    const $ = overrides.useOverrides(overrides$1);
+    const { portalContainer } = config.useLiveblocksUiConfig();
+    const [isOpen, setIsOpen] = useControllableState.useControllableState(
+      defaultOpen ?? false,
+      open,
+      onOpenChange
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.Popover.Content,
+        {
+          className: cn.cn(
+            "lb-root lb-portal lb-elevation lb-floating-composer",
+            className
+          ),
+          dir: $.dir,
+          side,
+          sideOffset,
+          align,
+          alignOffset,
+          collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+          onEscapeKeyDown: (event) => {
+            if (event.defaultPrevented) {
+              return;
+            }
+            setIsOpen(false);
+            event.preventDefault();
+          },
+          onInteractOutside: (event) => {
+            const target = event.target;
+            if (target.closest(".lb-portal")) {
+              event.preventDefault();
+            }
+          },
+          asChild: true,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Composer.Composer,
+            {
+              ref: forwardedRef,
+              overrides: overrides$1,
+              autoFocus: true,
+              collapsed: false,
+              ...props
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+);
+
+exports.FloatingComposer = FloatingComposer;
+//# sourceMappingURL=FloatingComposer.cjs.map

package/dist/components/FloatingComposer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingComposer.cjs","sources":["../../src/components/FloatingComposer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\n\nexport interface FloatingComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends Omit<\n      ComposerProps<TM, CM>,\n      \"collapsed\" | \"onCollapsedChange\" | \"defaultCollapsed\"\n    >,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating composer.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating composer attached to a trigger element.\n */\nexport const FloatingComposer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-composer\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Composer\n              ref={forwardedRef}\n              overrides={overrides}\n              autoFocus\n              collapsed={false}\n              {...(props as ComposerProps<TM, CM>)}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAgDO;AAAyB;AAE5B;AACE;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACA;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACS;AACE;AACN;AAAA;AACP;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/FloatingComposer.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Popover } from 'radix-ui';
+import { forwardRef } from 'react';
+import { useLiveblocksUiConfig } from '../config.js';
+import { FLOATING_ELEMENT_COLLISION_PADDING, FLOATING_ELEMENT_SIDE_OFFSET } from '../constants.js';
+import { useOverrides } from '../overrides.js';
+import { cn } from '../utils/cn.js';
+import { useControllableState } from '../utils/use-controllable-state.js';
+import { Composer } from './Composer.js';
+
+
+const FloatingComposer = forwardRef(
+  ({
+    children,
+    defaultOpen,
+    open,
+    onOpenChange,
+    side = "right",
+    sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,
+    align = "start",
+    alignOffset,
+    overrides,
+    className,
+    ...props
+  }, forwardedRef) => {
+    const $ = useOverrides(overrides);
+    const { portalContainer } = useLiveblocksUiConfig();
+    const [isOpen, setIsOpen] = useControllableState(
+      defaultOpen ?? false,
+      open,
+      onOpenChange
+    );
+    return /* @__PURE__ */ jsxs(Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx(Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+        Popover.Content,
+        {
+          className: cn(
+            "lb-root lb-portal lb-elevation lb-floating-composer",
+            className
+          ),
+          dir: $.dir,
+          side,
+          sideOffset,
+          align,
+          alignOffset,
+          collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+          onEscapeKeyDown: (event) => {
+            if (event.defaultPrevented) {
+              return;
+            }
+            setIsOpen(false);
+            event.preventDefault();
+          },
+          onInteractOutside: (event) => {
+            const target = event.target;
+            if (target.closest(".lb-portal")) {
+              event.preventDefault();
+            }
+          },
+          asChild: true,
+          children: /* @__PURE__ */ jsx(
+            Composer,
+            {
+              ref: forwardedRef,
+              overrides,
+              autoFocus: true,
+              collapsed: false,
+              ...props
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+);
+
+export { FloatingComposer };
+//# sourceMappingURL=FloatingComposer.js.map

package/dist/components/FloatingComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingComposer.js","sources":["../../src/components/FloatingComposer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\n\nexport interface FloatingComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends Omit<\n      ComposerProps<TM, CM>,\n      \"collapsed\" | \"onCollapsedChange\" | \"defaultCollapsed\"\n    >,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating composer.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating composer attached to a trigger element.\n */\nexport const FloatingComposer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-composer\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Composer\n              ref={forwardedRef}\n              overrides={overrides}\n              autoFocus\n              collapsed={false}\n              {...(props as ComposerProps<TM, CM>)}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;AAgDO;AAAyB;AAE5B;AACE;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACA;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACS;AACE;AACN;AAAA;AACP;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/FloatingThread.cjs

@@ -0,0 +1,82 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var radixUi = require('radix-ui');
+var react = require('react');
+var config = require('../config.cjs');
+var constants = require('../constants.cjs');
+var overrides = require('../overrides.cjs');
+var cn = require('../utils/cn.cjs');
+var useControllableState = require('../utils/use-controllable-state.cjs');
+var Thread = require('./Thread.cjs');
+
+
+const FloatingThread = react.forwardRef(
+  ({
+    thread,
+    children,
+    defaultOpen,
+    open,
+    onOpenChange,
+    side = "right",
+    sideOffset = constants.FLOATING_ELEMENT_SIDE_OFFSET,
+    align = "start",
+    alignOffset,
+    overrides: overrides$1,
+    className,
+    ...props
+  }, forwardedRef) => {
+    const $ = overrides.useOverrides(overrides$1);
+    const { portalContainer } = config.useLiveblocksUiConfig();
+    const [isOpen, setIsOpen] = useControllableState.useControllableState(
+      defaultOpen ?? false,
+      open,
+      onOpenChange
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.Popover.Content,
+        {
+          className: cn.cn(
+            "lb-root lb-portal lb-elevation lb-floating-thread",
+            className
+          ),
+          dir: $.dir,
+          side,
+          sideOffset,
+          align,
+          alignOffset,
+          collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+          onEscapeKeyDown: (event) => {
+            if (event.defaultPrevented) {
+              return;
+            }
+            setIsOpen(false);
+            event.preventDefault();
+          },
+          onInteractOutside: (event) => {
+            const target = event.target;
+            if (target.closest(".lb-portal")) {
+              event.preventDefault();
+            }
+          },
+          asChild: true,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Thread.Thread,
+            {
+              ref: forwardedRef,
+              thread,
+              overrides: overrides$1,
+              ...props
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+);
+
+exports.FloatingThread = FloatingThread;
+//# sourceMappingURL=FloatingThread.cjs.map

package/dist/components/FloatingThread.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingThread.cjs","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA6CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACA;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/FloatingThread.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Popover } from 'radix-ui';
+import { forwardRef } from 'react';
+import { useLiveblocksUiConfig } from '../config.js';
+import { FLOATING_ELEMENT_COLLISION_PADDING, FLOATING_ELEMENT_SIDE_OFFSET } from '../constants.js';
+import { useOverrides } from '../overrides.js';
+import { cn } from '../utils/cn.js';
+import { useControllableState } from '../utils/use-controllable-state.js';
+import { Thread } from './Thread.js';
+
+
+const FloatingThread = forwardRef(
+  ({
+    thread,
+    children,
+    defaultOpen,
+    open,
+    onOpenChange,
+    side = "right",
+    sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,
+    align = "start",
+    alignOffset,
+    overrides,
+    className,
+    ...props
+  }, forwardedRef) => {
+    const $ = useOverrides(overrides);
+    const { portalContainer } = useLiveblocksUiConfig();
+    const [isOpen, setIsOpen] = useControllableState(
+      defaultOpen ?? false,
+      open,
+      onOpenChange
+    );
+    return /* @__PURE__ */ jsxs(Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx(Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+        Popover.Content,
+        {
+          className: cn(
+            "lb-root lb-portal lb-elevation lb-floating-thread",
+            className
+          ),
+          dir: $.dir,
+          side,
+          sideOffset,
+          align,
+          alignOffset,
+          collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+          onEscapeKeyDown: (event) => {
+            if (event.defaultPrevented) {
+              return;
+            }
+            setIsOpen(false);
+            event.preventDefault();
+          },
+          onInteractOutside: (event) => {
+            const target = event.target;
+            if (target.closest(".lb-portal")) {
+              event.preventDefault();
+            }
+          },
+          asChild: true,
+          children: /* @__PURE__ */ jsx(
+            Thread,
+            {
+              ref: forwardedRef,
+              thread,
+              overrides,
+              ...props
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+);
+
+export { FloatingThread };
+//# sourceMappingURL=FloatingThread.js.map

package/dist/components/FloatingThread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingThread.js","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACA;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}