@liveblocks/react-ui 3.15.0-thread1 → 3.15.0

package/dist/utils/use-pre-resolve-user.js

@@ -0,0 +1,16 @@
+import { kInternal } from '@liveblocks/core';
+import { useClient } from '@liveblocks/react';
+import { useCallback } from 'react';
+
+function usePreResolveUser() {
+  const client = useClient();
+  return useCallback(
+    (userId) => {
+      void client[kInternal].usersStore.enqueue(userId);
+    },
+    [client]
+  );
+}
+
+export { usePreResolveUser };
+//# sourceMappingURL=use-pre-resolve-user.js.map

package/dist/utils/use-pre-resolve-user.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pre-resolve-user.js","sources":["../../src/utils/use-pre-resolve-user.ts"],"sourcesContent":["import { kInternal } from \"@liveblocks/core\";\nimport { useClient } from \"@liveblocks/react\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a function that resolves a user ID ahead of time to\n * make subsequent calls to `useUser` cached. This is useful for\n * known scenarios like resolving the current user's info\n * before they post a comment.\n *\n * This function is a no-op if the user ID is already resolved.\n */\nexport function usePreResolveUser() {\n  const client = useClient();\n\n  return useCallback(\n    (userId: string) => {\n      void client[kInternal].usersStore.enqueue(userId);\n    },\n    [client]\n  );\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,iBAAoB,GAAA;AAClC,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AAEzB,EAAO,OAAA,WAAA;AAAA,IACL,CAAC,MAAmB,KAAA;AAClB,MAAA,KAAK,MAAO,CAAA,SAAS,CAAE,CAAA,UAAA,CAAW,QAAQ,MAAM,CAAA,CAAA;AAAA,KAClD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AACF;;;;"}

package/dist/utils/use-stable-component.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+function isClassComponent(Component) {
+  return Boolean(
+    Component.prototype && "isReactComponent" in Component.prototype
+  );
+}
+function useStableComponent(Component, DefaultComponent) {
+  const Default = DefaultComponent;
+  const ref = react.useRef(Component);
+  ref.current = Component;
+  const Stable = react.useMemo(
+    () => (props) => {
+      const Component2 = ref.current;
+      if (!Component2) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Default, { ...props });
+      }
+      if (isClassComponent(Component2)) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props });
+      }
+      return Component2(props);
+    },
+    [Default]
+  );
+  return Stable;
+}
+
+exports.useStableComponent = useStableComponent;
+//# sourceMappingURL=use-stable-component.cjs.map

package/dist/utils/use-stable-component.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-stable-component.cjs","sources":["../../src/utils/use-stable-component.tsx"],"sourcesContent":["import {\n  type ComponentClass,\n  type ComponentType,\n  type FunctionComponent,\n  useMemo,\n  useRef,\n} from \"react\";\n\nfunction isClassComponent<P>(\n  Component: ComponentType<P>\n): Component is ComponentClass<P> {\n  return Boolean(\n    Component.prototype && \"isReactComponent\" in Component.prototype\n  );\n}\n\n/**\n * Stabilizes a component by creating a stable wrapper that will not be remounted\n * when the component changes.\n */\nexport function useStableComponent<\n  P extends object,\n  D extends ComponentType<P>,\n>(Component: ComponentType<P> | undefined, DefaultComponent: D): D {\n  const Default: ComponentType<P> = DefaultComponent;\n  const ref = useRef(Component);\n  ref.current = Component;\n\n  const Stable = useMemo<FunctionComponent<P>>(\n    () => (props) => {\n      const Component = ref.current;\n\n      if (!Component) {\n        return <Default {...props} />;\n      }\n\n      if (isClassComponent(Component)) {\n        return <Component {...props} />;\n      }\n\n      return Component(props);\n    },\n    [Default]\n  );\n\n  return Stable as D;\n}\n"],"names":["useRef","useMemo","Component","jsx"],"mappings":";;;;;AAQA,SAAS,iBACP,SACgC,EAAA;AAChC,EAAO,OAAA,OAAA;AAAA,IACL,SAAA,CAAU,SAAa,IAAA,kBAAA,IAAsB,SAAU,CAAA,SAAA;AAAA,GACzD,CAAA;AACF,CAAA;AAMgB,SAAA,kBAAA,CAGd,WAAyC,gBAAwB,EAAA;AACjE,EAAA,MAAM,OAA4B,GAAA,gBAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAMA,aAAO,SAAS,CAAA,CAAA;AAC5B,EAAA,GAAA,CAAI,OAAU,GAAA,SAAA,CAAA;AAEd,EAAA,MAAM,MAAS,GAAAC,aAAA;AAAA,IACb,MAAM,CAAC,KAAU,KAAA;AACf,MAAA,MAAMC,aAAY,GAAI,CAAA,OAAA,CAAA;AAEtB,MAAA,IAAI,CAACA,UAAW,EAAA;AACd,QAAO,uBAAAC,cAAA,CAAC,OAAS,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,OAC7B;AAEA,MAAI,IAAA,gBAAA,CAAiBD,UAAS,CAAG,EAAA;AAC/B,QAAA,uBAAQA,cAAAA,CAAAA,UAAAA,EAAA,EAAW,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,OAC/B;AAEA,MAAA,OAAOA,WAAU,KAAK,CAAA,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

package/dist/utils/use-stable-component.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+
+function isClassComponent(Component) {
+  return Boolean(
+    Component.prototype && "isReactComponent" in Component.prototype
+  );
+}
+function useStableComponent(Component, DefaultComponent) {
+  const Default = DefaultComponent;
+  const ref = useRef(Component);
+  ref.current = Component;
+  const Stable = useMemo(
+    () => (props) => {
+      const Component2 = ref.current;
+      if (!Component2) {
+        return /* @__PURE__ */ jsx(Default, { ...props });
+      }
+      if (isClassComponent(Component2)) {
+        return /* @__PURE__ */ jsx(Component2, { ...props });
+      }
+      return Component2(props);
+    },
+    [Default]
+  );
+  return Stable;
+}
+
+export { useStableComponent };
+//# sourceMappingURL=use-stable-component.js.map

package/dist/utils/use-stable-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-stable-component.js","sources":["../../src/utils/use-stable-component.tsx"],"sourcesContent":["import {\n  type ComponentClass,\n  type ComponentType,\n  type FunctionComponent,\n  useMemo,\n  useRef,\n} from \"react\";\n\nfunction isClassComponent<P>(\n  Component: ComponentType<P>\n): Component is ComponentClass<P> {\n  return Boolean(\n    Component.prototype && \"isReactComponent\" in Component.prototype\n  );\n}\n\n/**\n * Stabilizes a component by creating a stable wrapper that will not be remounted\n * when the component changes.\n */\nexport function useStableComponent<\n  P extends object,\n  D extends ComponentType<P>,\n>(Component: ComponentType<P> | undefined, DefaultComponent: D): D {\n  const Default: ComponentType<P> = DefaultComponent;\n  const ref = useRef(Component);\n  ref.current = Component;\n\n  const Stable = useMemo<FunctionComponent<P>>(\n    () => (props) => {\n      const Component = ref.current;\n\n      if (!Component) {\n        return <Default {...props} />;\n      }\n\n      if (isClassComponent(Component)) {\n        return <Component {...props} />;\n      }\n\n      return Component(props);\n    },\n    [Default]\n  );\n\n  return Stable as D;\n}\n"],"names":["Component"],"mappings":";;;AAQA,SAAS,iBACP,SACgC,EAAA;AAChC,EAAO,OAAA,OAAA;AAAA,IACL,SAAA,CAAU,SAAa,IAAA,kBAAA,IAAsB,SAAU,CAAA,SAAA;AAAA,GACzD,CAAA;AACF,CAAA;AAMgB,SAAA,kBAAA,CAGd,WAAyC,gBAAwB,EAAA;AACjE,EAAA,MAAM,OAA4B,GAAA,gBAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,OAAO,SAAS,CAAA,CAAA;AAC5B,EAAA,GAAA,CAAI,OAAU,GAAA,SAAA,CAAA;AAEd,EAAA,MAAM,MAAS,GAAA,OAAA;AAAA,IACb,MAAM,CAAC,KAAU,KAAA;AACf,MAAA,MAAMA,aAAY,GAAI,CAAA,OAAA,CAAA;AAEtB,MAAA,IAAI,CAACA,UAAW,EAAA;AACd,QAAO,uBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,OAC7B;AAEA,MAAI,IAAA,gBAAA,CAAiBA,UAAS,CAAG,EAAA;AAC/B,QAAA,uBAAQA,GAAAA,CAAAA,UAAAA,EAAA,EAAW,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,OAC/B;AAEA,MAAA,OAAOA,WAAU,KAAK,CAAA,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

package/dist/version.cjs

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

package/dist/version.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.cjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,gBAAA,KAAgB,QAAY,IAAA,iBAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}
+{"version":3,"file":"version.cjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,QAAA,KAAgB,QAAY,IAAA,SAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}

package/dist/version.js

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

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,gBAAA,KAAgB,QAAY,IAAA,iBAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,QAAA,KAAgB,QAAY,IAAA,SAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "3.15.0-thread1",
+  "version": "3.15.0",
   "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",
+  "author": "Liveblocks Inc.",
   "type": "module",
   "main": "./dist/index.cjs",
   "types": "./dist/index.d.cts",
@@ -76,17 +77,13 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "3.15.0-thread1",
-    "@liveblocks/core": "3.15.0-thread1",
-    "@liveblocks/react": "3.15.0-thread1",
-    "@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",
+    "@floating-ui/react-dom": "^2.1.0",
+    "@liveblocks/client": "3.15.0",
+    "@liveblocks/core": "3.15.0",
+    "@liveblocks/react": "3.15.0",
     "frimousse": "^0.2.0",
     "marked": "^15.0.11",
+    "radix-ui": "^1.4.0",
     "slate": "^0.110.2",
     "slate-history": "^0.110.3",
     "slate-hyperscript": "^0.100.0",

package/src/styles/dark/index.css

@@ -23,7 +23,7 @@
 
   color-scheme: dark;
 
-  &:where(.lb-elevation, .lb-tooltip) {
+  &:where(.lb-elevation, .lb-tooltip, .lb-comment-pin) {
     --lb-background: #333;
     --lb-foreground-contrast: 10%;
   }

package/src/styles/index.css

@@ -1346,6 +1346,7 @@
   padding: var(--lb-spacing);
   background: var(--lb-dynamic-background);
   color: var(--lb-foreground);
+  outline: none;
   font-weight: 400;
   scroll-margin: var(--lb-spacing);
 
@@ -1371,7 +1372,7 @@
     --lb-dynamic-background: var(--lb-background-accent-faint);
   }
 
-  &:where([data-editing]) {
+  &:where([data-editing], :focus-visible) {
     --lb-dynamic-background: var(--lb-background-foreground-faint);
   }
 }
@@ -1651,6 +1652,239 @@
   }
 }
 
+/*************************************
+ *          Floating Thread          *
+ *************************************/
+
+.lb-floating-thread {
+  --lb-floating-thread-size: 350px;
+
+  inline-size: var(--lb-floating-thread-size);
+}
+
+/*************************************
+ *       Floating Thread Composer    *
+ *************************************/
+
+.lb-floating-thread-composer {
+  --lb-floating-thread-composer-size: 350px;
+
+  inline-size: var(--lb-floating-thread-composer-size);
+
+  :where(.lb-thread, .lb-composer) {
+    inline-size: 100%;
+  }
+}
+
+/*************************************
+ *         Floating Composer         *
+ *************************************/
+
+.lb-floating-composer {
+  --lb-floating-composer-size: 350px;
+
+  inline-size: var(--lb-floating-composer-size);
+}
+
+/*************************************
+ *            Comment Pin            *
+ *************************************/
+
+.lb-comment-pin {
+  --lb-comment-pin-size: 32px;
+  --lb-comment-pin-padding: 4px;
+
+  @include button;
+
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  inline-size: var(--lb-comment-pin-size);
+  block-size: var(--lb-comment-pin-size);
+  padding: var(--lb-comment-pin-padding);
+  border-radius: $lb-radius-full;
+  background: var(--lb-background);
+  box-shadow: var(--lb-elevation-shadow);
+  isolation: isolate;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    box-shadow: var(--lb-inset-shadow);
+    pointer-events: none;
+  }
+
+  &:where([data-corner="top-left"]) {
+    border-start-start-radius: 2px;
+    transform: translate(0, 0);
+  }
+
+  &:where([data-corner="top-right"]) {
+    border-start-end-radius: 2px;
+    transform: translate(-100%, 0);
+  }
+
+  &:where([data-corner="bottom-right"]) {
+    border-end-end-radius: 2px;
+    transform: translate(-100%, -100%);
+  }
+
+  &:where([data-corner="bottom-left"]) {
+    border-end-start-radius: 2px;
+    transform: translate(0, -100%);
+  }
+}
+
+.lb-comment-pin-avatar {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/*************************************
+ *            Avatar Stack           *
+ *************************************/
+
+.lb-avatar-stack {
+  --lb-avatar-stack-size: 24px;
+  --lb-avatar-stack-overlap: calc(0.25 * var(--lb-avatar-stack-size));
+  --lb-avatar-stack-gap: 2px;
+
+  display: flex;
+  flex-direction: row;
+  isolation: isolate;
+}
+
+.lb-avatar-stack-avatar {
+  position: relative;
+  z-index: calc(
+    var(--lb-avatar-stack-count) - var(--lb-avatar-stack-avatar-index)
+  );
+  inline-size: var(--lb-avatar-stack-size);
+  block-size: var(--lb-avatar-stack-size);
+  margin-inline-end: calc(-1 * var(--lb-avatar-stack-overlap));
+  border-radius: $lb-radius-full;
+
+  &:where(:not(:first-child)) {
+    --lb-avatar-stack-mask-size: calc(
+      var(--lb-avatar-stack-size) / 2 + var(--lb-avatar-stack-gap)
+    );
+
+    mask-image: radial-gradient(
+      circle at
+        calc(var(--lb-avatar-stack-overlap) - var(--lb-avatar-stack-size) / 2)
+        50%,
+      transparent var(--lb-avatar-stack-mask-size),
+      black calc(var(--lb-avatar-stack-mask-size) + 0.375px)
+    );
+  }
+}
+
+/*************************************
+ *           Users Tooltip           *
+ *************************************/
+
+.lb-users-tooltip-list {
+  --lb-users-tooltip-avatar-size: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.625 * var(--lb-spacing));
+  margin: 0;
+  padding-inline: 0;
+  padding-block: calc(0.75 * var(--lb-spacing));
+  list-style: none;
+}
+
+.lb-users-tooltip-list-item {
+  display: flex;
+  gap: calc(0.625 * var(--lb-spacing));
+  align-items: center;
+
+  :where(.lb-avatar) {
+    inline-size: var(--lb-users-tooltip-avatar-size);
+    block-size: var(--lb-users-tooltip-avatar-size);
+  }
+}
+
+/*************************************
+ *              Cursor               *
+ *************************************/
+
+.lb-cursor {
+  --lb-cursor-color: var(--lb-accent);
+  --lb-cursor-pointer-size: 1rem;
+
+  position: relative;
+  inline-size: 0;
+  block-size: 0;
+  color: var(--lb-cursor-color);
+  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 5%))
+    drop-shadow(0 8px 26px rgb(0 0 0 / 6%));
+  pointer-events: none;
+  isolation: isolate;
+}
+
+.lb-cursor-pointer {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  inline-size: var(--lb-cursor-pointer-size);
+  block-size: var(--lb-cursor-pointer-size);
+}
+
+.lb-cursor-bubble {
+  position: absolute;
+  inset-inline-start: calc(0.8125 * var(--lb-cursor-pointer-size));
+  inset-block-start: calc(0.8125 * var(--lb-cursor-pointer-size));
+  padding: calc(0.375 * var(--lb-spacing)) calc(0.6875 * var(--lb-spacing));
+  border-radius: $lb-radius-full;
+  background: currentcolor;
+  font-size: 0.8125rem;
+  will-change: transform;
+}
+
+.lb-cursor-bubble-label {
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+
+  /* Use relative color to derive a text color legible against the background. */
+  @supports (color: oklch(from black l c h)) {
+    color: oklch(
+      from var(--lb-cursor-color) clamp(0, (l / 0.623 - 1) * -infinity, 1) 0 h
+    );
+  }
+
+  /* Use a filter trick if relative color is not supported. */
+  @supports not (color: oklch(from black l c h)) {
+    opacity: 0.95;
+    filter: invert(1) grayscale(1) brightness(1.3) contrast(9000);
+    mix-blend-mode: luminosity;
+  }
+}
+
+/*************************************
+ *              Cursors              *
+ *************************************/
+
+.lb-cursors {
+  position: relative;
+  overflow: clip;
+  isolation: isolate;
+}
+
+.lb-cursors-container {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  isolation: isolate;
+}
+
 /*************************************
  *            Attachments            *
  *************************************/
@@ -2252,6 +2486,7 @@
   border-radius: var(--lb-radius);
   background: var(--lb-dynamic-background);
   box-shadow: var(--lb-elevation-shadow);
+  isolation: isolate;
 
   &::after {
     content: "";
@@ -2332,7 +2567,10 @@
 .lb-composer-suggestions,
 .lb-composer-floating-toolbar,
 .lb-tooltip,
-.lb-emoji-picker {
+.lb-emoji-picker,
+.lb-floating-thread,
+.lb-floating-composer,
+.lb-floating-thread-composer {
   animation-duration: var(--lb-transition-duration);
   animation-timing-function: var(--lb-transition-easing);
   will-change: transform, opacity;
@@ -2354,12 +2592,19 @@
   }
 }
 
+:is(.lb-floating-thread, .lb-floating-composer, .lb-floating-thread-composer) {
+  animation-name: lb-animation-appear;
+}
+
 :is(
   .lb-dropdown,
   .lb-emoji-picker,
   .lb-tooltip,
   .lb-composer-suggestions,
-  .lb-composer-floating-toolbar
+  .lb-composer-floating-toolbar,
+  .lb-floating-thread,
+  .lb-floating-composer,
+  .lb-floating-thread-composer
 ) {
   &:where([data-state="closed"]) {
     animation-name: lb-animation-disappear;
@@ -2370,7 +2615,10 @@
   .lb-dropdown:where(:not([data-state="closed"])),
   .lb-emoji-picker:where(:not([data-state="closed"])),
   .lb-tooltip:where([data-state="delayed-open"]:not([data-state="closed"])),
-  .lb-composer-suggestions:where(:not([data-state="closed"])) {
+  .lb-composer-suggestions:where(:not([data-state="closed"])),
+  .lb-floating-thread:where(:not([data-state="closed"])),
+  .lb-floating-composer:where(:not([data-state="closed"])),
+  .lb-floating-thread-composer:where(:not([data-state="closed"])) {
     animation-name: lb-animation-appear;
   }
 }

package/styles/dark/attributes.css

@@ -1 +1 @@
-@keyframes lb-animation-shimmer-text-invert{0%,to{-webkit-mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);-webkit-mask-size:300% 100%;mask-size:300% 100%}0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root){--lb-accent:#4af;--lb-destructive:#f77;--lb-background:#222;--lb-foreground:#fff;--lb-accent-contrast:16%;--lb-destructive-contrast:16%;--lb-foreground-contrast:10%;--lb-inset-shadow:inset 0 0 0 1px #ffffff0f;--lb-highlight-shadow:inset 0 0 0 1px #ffffff1f;--lb-elevation-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f;--lb-elevation-shadow-moderate:0 0 0 1px #0000000a,0 2px 6px #0000000d,0 8px 26px #0000000f;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])):where(.lb-elevation,.lb-tooltip),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root):where(.lb-elevation,.lb-tooltip){--lb-background:#333;--lb-foreground-contrast:10%}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])):where(.lb-elevation-moderate),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root):where(.lb-elevation-moderate){--lb-background:#2a2a2a;--lb-foreground-contrast:10%}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])) .lb-ai-chat-pending,:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root) .lb-ai-chat-pending{animation-name:lb-animation-shimmer-text-invert}
+@keyframes lb-animation-shimmer-text-invert{0%,to{-webkit-mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);-webkit-mask-size:300% 100%;mask-size:300% 100%}0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root){--lb-accent:#4af;--lb-destructive:#f77;--lb-background:#222;--lb-foreground:#fff;--lb-accent-contrast:16%;--lb-destructive-contrast:16%;--lb-foreground-contrast:10%;--lb-inset-shadow:inset 0 0 0 1px #ffffff0f;--lb-highlight-shadow:inset 0 0 0 1px #ffffff1f;--lb-elevation-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f;--lb-elevation-shadow-moderate:0 0 0 1px #0000000a,0 2px 6px #0000000d,0 8px 26px #0000000f;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])):where(.lb-elevation,.lb-tooltip,.lb-comment-pin),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root):where(.lb-elevation,.lb-tooltip,.lb-comment-pin){--lb-background:#333;--lb-foreground-contrast:10%}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])):where(.lb-elevation-moderate),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root):where(.lb-elevation-moderate){--lb-background:#2a2a2a;--lb-foreground-contrast:10%}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])) .lb-ai-chat-pending,:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root) .lb-ai-chat-pending{animation-name:lb-animation-shimmer-text-invert}

package/styles/dark/attributes.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/dark/src/styles/dark/index.css","../../src/styles/dark/src/styles/dark/attributes.css"],"names":[],"mappings":"AAwCA,4CAAA,MAAA,uFAAA,CAAA,+EAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,GAAA,4BAAA,CAAA,oBAAA,CAAA,GAAA,yBAAA,CAAA,iBAAA,CAAA,CCpCA,mHAAA,gBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,2CAAA,CAAA,+CAAA,CAAA,kFAAA,CAAA,2FAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CDqBE,qLAAA,oBAAA,CAAA,4BAAA,CAKA,+KAAA,uBAAA,CAAA,4BAAA,CAKA,2JAAA,+CAAA","file":"attributes.css","sourcesContent":["@import \"../constants\";\n\n@mixin dark-styles {\n  /**\n   * Colors\n   */\n  --lb-accent: #4af;\n  --lb-destructive: #f77;\n  --lb-background: #222;\n  --lb-foreground: #fff;\n  --lb-accent-contrast: 16%;\n  --lb-destructive-contrast: 16%;\n  --lb-foreground-contrast: 10%;\n\n  /**\n   * Shadows\n   */\n  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);\n  --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);\n  --lb-elevation-shadow: $lb-elevation-shadow;\n  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &:where(.lb-elevation, .lb-tooltip) {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n\n  &:where(.lb-elevation-moderate) {\n    --lb-background: #2a2a2a;\n    --lb-foreground-contrast: 10%;\n  }\n\n  .lb-ai-chat-pending {\n    animation-name: lb-animation-shimmer-text-invert;\n  }\n}\n\n@keyframes lb-animation-shimmer-text-invert {\n  from,\n  to {\n    mask-image: linear-gradient(\n      90deg,\n      rgb(0 0 0 / 50%) 36%,\n      rgb(0 0 0 / 95%) 48%,\n      rgb(0 0 0 / 95%) 52%,\n      rgb(0 0 0 / 50%) 64%\n    );\n    mask-size: 300% 100%;\n  }\n\n  from {\n    mask-position: 100% 0;\n  }\n\n  to {\n    mask-position: 0% 0;\n  }\n}\n","/* stylelint-disable selector-class-pattern */\n\n@import \"./index\";\n\n.lb-root:where(:is(.dark, [data-theme=\"dark\"], [data-dark])),\n:is(.dark, [data-theme=\"dark\"], [data-dark]) :where(.lb-root) {\n  @include dark-styles;\n}\n"]}
+{"version":3,"sources":["../../src/styles/dark/src/styles/dark/index.css","../../src/styles/dark/src/styles/dark/attributes.css"],"names":[],"mappings":"AAwCA,4CAAA,MAAA,uFAAA,CAAA,+EAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,GAAA,4BAAA,CAAA,oBAAA,CAAA,GAAA,yBAAA,CAAA,iBAAA,CAAA,CCpCA,mHAAA,gBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,2CAAA,CAAA,+CAAA,CAAA,kFAAA,CAAA,2FAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CDqBE,qNAAA,oBAAA,CAAA,4BAAA,CAKA,+KAAA,uBAAA,CAAA,4BAAA,CAKA,2JAAA,+CAAA","file":"attributes.css","sourcesContent":["@import \"../constants\";\n\n@mixin dark-styles {\n  /**\n   * Colors\n   */\n  --lb-accent: #4af;\n  --lb-destructive: #f77;\n  --lb-background: #222;\n  --lb-foreground: #fff;\n  --lb-accent-contrast: 16%;\n  --lb-destructive-contrast: 16%;\n  --lb-foreground-contrast: 10%;\n\n  /**\n   * Shadows\n   */\n  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);\n  --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);\n  --lb-elevation-shadow: $lb-elevation-shadow;\n  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &:where(.lb-elevation, .lb-tooltip, .lb-comment-pin) {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n\n  &:where(.lb-elevation-moderate) {\n    --lb-background: #2a2a2a;\n    --lb-foreground-contrast: 10%;\n  }\n\n  .lb-ai-chat-pending {\n    animation-name: lb-animation-shimmer-text-invert;\n  }\n}\n\n@keyframes lb-animation-shimmer-text-invert {\n  from,\n  to {\n    mask-image: linear-gradient(\n      90deg,\n      rgb(0 0 0 / 50%) 36%,\n      rgb(0 0 0 / 95%) 48%,\n      rgb(0 0 0 / 95%) 52%,\n      rgb(0 0 0 / 50%) 64%\n    );\n    mask-size: 300% 100%;\n  }\n\n  from {\n    mask-position: 100% 0;\n  }\n\n  to {\n    mask-position: 0% 0;\n  }\n}\n","/* stylelint-disable selector-class-pattern */\n\n@import \"./index\";\n\n.lb-root:where(:is(.dark, [data-theme=\"dark\"], [data-dark])),\n:is(.dark, [data-theme=\"dark\"], [data-dark]) :where(.lb-root) {\n  @include dark-styles;\n}\n"]}

package/styles/dark/media-query.css

@@ -1 +1 @@
-@keyframes lb-animation-shimmer-text-invert{0%,to{-webkit-mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);-webkit-mask-size:300% 100%;mask-size:300% 100%}0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}@media (prefers-color-scheme:dark){.lb-root{--lb-accent:#4af;--lb-destructive:#f77;--lb-background:#222;--lb-foreground:#fff;--lb-accent-contrast:16%;--lb-destructive-contrast:16%;--lb-foreground-contrast:10%;--lb-inset-shadow:inset 0 0 0 1px #ffffff0f;--lb-highlight-shadow:inset 0 0 0 1px #ffffff1f;--lb-elevation-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f;--lb-elevation-shadow-moderate:0 0 0 1px #0000000a,0 2px 6px #0000000d,0 8px 26px #0000000f;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root:where(.lb-elevation,.lb-tooltip){--lb-background:#333;--lb-foreground-contrast:10%}.lb-root:where(.lb-elevation-moderate){--lb-background:#2a2a2a;--lb-foreground-contrast:10%}.lb-root .lb-ai-chat-pending{animation-name:lb-animation-shimmer-text-invert}}
+@keyframes lb-animation-shimmer-text-invert{0%,to{-webkit-mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);-webkit-mask-size:300% 100%;mask-size:300% 100%}0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}@media (prefers-color-scheme:dark){.lb-root{--lb-accent:#4af;--lb-destructive:#f77;--lb-background:#222;--lb-foreground:#fff;--lb-accent-contrast:16%;--lb-destructive-contrast:16%;--lb-foreground-contrast:10%;--lb-inset-shadow:inset 0 0 0 1px #ffffff0f;--lb-highlight-shadow:inset 0 0 0 1px #ffffff1f;--lb-elevation-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f;--lb-elevation-shadow-moderate:0 0 0 1px #0000000a,0 2px 6px #0000000d,0 8px 26px #0000000f;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root:where(.lb-elevation,.lb-tooltip,.lb-comment-pin){--lb-background:#333;--lb-foreground-contrast:10%}.lb-root:where(.lb-elevation-moderate){--lb-background:#2a2a2a;--lb-foreground-contrast:10%}.lb-root .lb-ai-chat-pending{animation-name:lb-animation-shimmer-text-invert}}

package/styles/dark/media-query.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/dark/src/styles/dark/index.css","../../src/styles/dark/src/styles/dark/media-query.css"],"names":[],"mappings":"AAwCA,4CAAA,MAAA,uFAAA,CAAA,+EAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,GAAA,4BAAA,CAAA,oBAAA,CAAA,GAAA,yBAAA,CAAA,iBAAA,CAAA,CCtCA,mCACE,SAAA,gBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,2CAAA,CAAA,+CAAA,CAAA,kFAAA,CAAA,2FAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CDsBA,0CAAA,oBAAA,CAAA,4BAAA,CAKA,uCAAA,uBAAA,CAAA,4BAAA,CAKA,6BAAA,+CAAA,CAAA","file":"media-query.css","sourcesContent":["@import \"../constants\";\n\n@mixin dark-styles {\n  /**\n   * Colors\n   */\n  --lb-accent: #4af;\n  --lb-destructive: #f77;\n  --lb-background: #222;\n  --lb-foreground: #fff;\n  --lb-accent-contrast: 16%;\n  --lb-destructive-contrast: 16%;\n  --lb-foreground-contrast: 10%;\n\n  /**\n   * Shadows\n   */\n  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);\n  --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);\n  --lb-elevation-shadow: $lb-elevation-shadow;\n  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &:where(.lb-elevation, .lb-tooltip) {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n\n  &:where(.lb-elevation-moderate) {\n    --lb-background: #2a2a2a;\n    --lb-foreground-contrast: 10%;\n  }\n\n  .lb-ai-chat-pending {\n    animation-name: lb-animation-shimmer-text-invert;\n  }\n}\n\n@keyframes lb-animation-shimmer-text-invert {\n  from,\n  to {\n    mask-image: linear-gradient(\n      90deg,\n      rgb(0 0 0 / 50%) 36%,\n      rgb(0 0 0 / 95%) 48%,\n      rgb(0 0 0 / 95%) 52%,\n      rgb(0 0 0 / 50%) 64%\n    );\n    mask-size: 300% 100%;\n  }\n\n  from {\n    mask-position: 100% 0;\n  }\n\n  to {\n    mask-position: 0% 0;\n  }\n}\n","@import \"./index\";\n\n@media (prefers-color-scheme: dark) {\n  .lb-root {\n    @include dark-styles;\n  }\n}\n"]}
+{"version":3,"sources":["../../src/styles/dark/src/styles/dark/index.css","../../src/styles/dark/src/styles/dark/media-query.css"],"names":[],"mappings":"AAwCA,4CAAA,MAAA,uFAAA,CAAA,+EAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,GAAA,4BAAA,CAAA,oBAAA,CAAA,GAAA,yBAAA,CAAA,iBAAA,CAAA,CCtCA,mCACE,SAAA,gBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,2CAAA,CAAA,+CAAA,CAAA,kFAAA,CAAA,2FAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CDsBA,0DAAA,oBAAA,CAAA,4BAAA,CAKA,uCAAA,uBAAA,CAAA,4BAAA,CAKA,6BAAA,+CAAA,CAAA","file":"media-query.css","sourcesContent":["@import \"../constants\";\n\n@mixin dark-styles {\n  /**\n   * Colors\n   */\n  --lb-accent: #4af;\n  --lb-destructive: #f77;\n  --lb-background: #222;\n  --lb-foreground: #fff;\n  --lb-accent-contrast: 16%;\n  --lb-destructive-contrast: 16%;\n  --lb-foreground-contrast: 10%;\n\n  /**\n   * Shadows\n   */\n  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);\n  --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);\n  --lb-elevation-shadow: $lb-elevation-shadow;\n  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &:where(.lb-elevation, .lb-tooltip, .lb-comment-pin) {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n\n  &:where(.lb-elevation-moderate) {\n    --lb-background: #2a2a2a;\n    --lb-foreground-contrast: 10%;\n  }\n\n  .lb-ai-chat-pending {\n    animation-name: lb-animation-shimmer-text-invert;\n  }\n}\n\n@keyframes lb-animation-shimmer-text-invert {\n  from,\n  to {\n    mask-image: linear-gradient(\n      90deg,\n      rgb(0 0 0 / 50%) 36%,\n      rgb(0 0 0 / 95%) 48%,\n      rgb(0 0 0 / 95%) 52%,\n      rgb(0 0 0 / 50%) 64%\n    );\n    mask-size: 300% 100%;\n  }\n\n  from {\n    mask-position: 100% 0;\n  }\n\n  to {\n    mask-position: 0% 0;\n  }\n}\n","@import \"./index\";\n\n@media (prefers-color-scheme: dark) {\n  .lb-root {\n    @include dark-styles;\n  }\n}\n"]}