@liveblocks/react-lexical 2.15.2 → 2.16.0-toolbars2

package/dist/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\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,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,QAAA,KAAgB,QAAY,IAAA,SAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}
+{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\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,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,kBAAA,KAAgB,QAAY,IAAA,mBAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-lexical",
-  "version": "2.15.2",
+  "version": "2.16.0-toolbars2",
   "description": "A lexical react plugin to enable collaboration, comments, live cursors, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -42,15 +42,19 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.1",
-    "@liveblocks/client": "2.15.2",
-    "@liveblocks/core": "2.15.2",
-    "@liveblocks/react": "2.15.2",
-    "@liveblocks/react-ui": "2.15.2",
-    "@liveblocks/yjs": "2.15.2",
+    "@liveblocks/client": "2.16.0-toolbars2",
+    "@liveblocks/core": "2.16.0-toolbars2",
+    "@liveblocks/react": "2.16.0-toolbars2",
+    "@liveblocks/react-ui": "2.16.0-toolbars2",
+    "@liveblocks/yjs": "2.16.0-toolbars2",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-toggle": "^1.1.0",
     "yjs": "^13.6.18"
   },
   "peerDependencies": {
     "@lexical/react": "0.16.1",
+    "@lexical/rich-text": "0.16.1",
+    "@lexical/selection": "0.16.1",
     "@lexical/utils": "0.16.1",
     "@lexical/yjs": "0.16.1",
     "lexical": "0.16.1",
@@ -64,7 +68,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "msw": "^0.27.1",
+    "msw": "^1.3.5",
     "rollup": "3.28.0",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^34.0.0",
@@ -77,7 +81,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/liveblocks/liveblocks.git",
+    "url": "git+https://github.com/liveblocks/liveblocks.git",
     "directory": "packages/liveblocks-react-lexical"
   },
   "homepage": "https://liveblocks.io",

package/src/styles/constants.css

@@ -1,4 +1,4 @@
-$lb-elevation-list-padding: 4px;
+$lb-elevation-padding: 4px;
 $lb-lexical-anchored-threads-shadow:
   0 0 0 1px rgb(0 0 0 / 4%),
   0 2px 6px rgb(0 0 0 / 4%),

package/src/styles/index.css

@@ -37,7 +37,7 @@
  *************************************/
 
 .lb-lexical-suggestions {
-  padding: $lb-elevation-list-padding;
+  padding: $lb-elevation-padding;
   animation-duration: var(--lb-transition-duration);
   animation-timing-function: var(--lb-transition-easing);
   will-change: transform, opacity;
@@ -47,23 +47,26 @@
   display: flex;
   align-items: center;
   padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));
-  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-list-padding);
+  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-padding);
   color: var(--lb-foreground-secondary);
   outline: none;
   font-size: 0.875rem;
   cursor: pointer;
   user-select: none;
   transition-property: background, color, opacity;
-  scroll-margin-block: $lb-elevation-list-padding;
+  scroll-margin-block: $lb-elevation-padding;
 }
 
 :is(.lb-lexical-suggestions-list-item) {
-  &:where([data-highlighted], [data-selected]) {
+  &:where(
+      [data-highlighted]:not([data-highlighted="false"]),
+      [data-selected]:not([data-selected="false"])
+    ) {
     background: var(--lb-foreground-subtle);
     transition-duration: calc(var(--lb-transition-duration) / 2);
   }
 
-  &:where(:disabled, [data-disabled]) {
+  &:where(:disabled, [data-disabled]:not([data-disabled="false"])) {
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -107,7 +110,7 @@
 
   @include invisible-selection;
 
-  &:where([data-selected]) {
+  &:where([data-selected]:not([data-selected="false"])) {
     background: var(--lb-accent);
     color: var(--lb-accent-foreground);
   }
@@ -203,3 +206,38 @@
 .lb-lexical-floating-composer {
   inline-size: var(--lb-lexical-floating-size);
 }
+
+/*************************************
+ *              Toolbar              *
+ *************************************/
+
+.lb-lexical-toolbar {
+  --lb-lexical-toolbar-spacing: calc(0.25 * var(--lb-spacing));
+
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: var(--lb-lexical-toolbar-spacing);
+  align-items: center;
+  padding: var(--lb-lexical-toolbar-spacing);
+  background: var(--lb-background);
+}
+
+.lb-lexical-floating-toolbar {
+  --lb-lexical-toolbar-spacing: $lb-elevation-padding;
+}
+
+.lb-lexical-toolbar-separator {
+  position: relative;
+  align-self: stretch;
+  inline-size: 1px;
+  margin-inline: 1px;
+  pointer-events: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 10% 0;
+    background: var(--lb-foreground-subtle);
+  }
+}

package/styles.css

@@ -1 +1 @@
-.lb-lexical-suggestions-list{margin:0;padding:0;list-style:none}.lb-lexical-mention-suggestions{--lb-lexical-mention-suggestion-avatar-size:1.25rem}.lb-lexical-mention-suggestion{padding:calc(.375*var(--lb-spacing))calc(.625*var(--lb-spacing))}.lb-lexical-mention-suggestion-avatar{inline-size:var(--lb-lexical-mention-suggestion-avatar-size);margin-inline-start:calc(-.125*var(--lb-spacing));margin-inline-end:calc(.5*var(--lb-spacing));margin-block:calc(.125*var(--lb-spacing));background:var(--lb-foreground-subtle);color:var(--lb-foreground-moderate)}.lb-lexical-suggestions{animation-duration:var(--lb-transition-duration);animation-timing-function:var(--lb-transition-easing);will-change:transform,opacity;padding:4px}.lb-lexical-suggestions-list-item{padding:calc(.25*var(--lb-spacing))calc(.5*var(--lb-spacing));border-radius:calc(var(--lb-radius) - .75*4px);color:var(--lb-foreground-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;scroll-margin-block:4px;font-size:.875rem;transition-property:background,color,opacity;display:flex}.lb-lexical-suggestions-list-item:where([data-highlighted],[data-selected]){background:var(--lb-foreground-subtle);transition-duration:calc(var(--lb-transition-duration)/2)}.lb-lexical-suggestions-list-item:where(:disabled,[data-disabled]){opacity:.5;cursor:not-allowed}.lb-lexical-suggestions:where([data-side=top]){animation-name:lb-animation-slide-up}.lb-lexical-suggestions:where([data-side=bottom]){animation-name:lb-animation-slide-down}.lb-lexical-suggestions:where([data-state=closed]){animation-name:lb-animation-disappear}.lb-lexical-mention{border-radius:calc(.675*var(--lb-radius));background:var(--lb-accent-subtle);color:var(--lb-accent);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.1em .3em;font-weight:500}.lb-lexical-mention::selection{background:0 0}.lb-lexical-mention ::selection{background:0 0}.lb-lexical-mention:where([data-selected]){background:var(--lb-accent);color:var(--lb-accent-foreground)}.lb-lexical-thread-mark{background:var(--lb-accent-subtle);color:var(--lb-foreground);text-decoration-line:underline;-webkit-text-decoration-color:var(--lb-foreground-moderate);text-decoration-color:var(--lb-foreground-moderate);text-underline-offset:2px;outline:none;font-weight:500;transition-property:color,text-decoration-color}.lb-lexical-thread-mark:where([data-state=active]){color:var(--lb-accent);-webkit-text-decoration-color:var(--lb-accent-moderate);text-decoration-color:var(--lb-accent-moderate)}.lb-lexical-anchored-threads{--lb-lexical-anchored-threads-gap:1.25rem;--lb-lexical-anchored-threads-active-thread-offset:-.75rem}.lb-lexical-anchored-threads-thread-container{transition-duration:calc(var(--lb-transition-duration)*2);transition-property:transform}.lb-lexical-anchored-threads-thread{border-radius:var(--lb-radius);background:var(--lb-dynamic-background);transition-property:background,box-shadow;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000000a,0 2px 6px #0000000a,0 6px 20px #0000000f}.lb-lexical-anchored-threads-thread:after{content:"";z-index:1;border-radius:inherit;box-shadow:var(--lb-inset-shadow);pointer-events:none;position:absolute;inset:0}.lb-lexical-anchored-threads-thread:where([data-state=active]){box-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f}.lb-lexical-floating{--lb-lexical-floating-size:350px}.lb-lexical-floating-threads-thread{inline-size:var(--lb-lexical-floating-size)}.lb-lexical-floating-threads-thread:where(:not(:last-of-type)){border-block-end:1px solid var(--lb-foreground-subtle)}.lb-lexical-floating-composer{inline-size:var(--lb-lexical-floating-size)}@media (prefers-reduced-motion){.lb-lexical-suggestions:where(:not([data-state=closed])){animation-name:lb-animation-appear}.lb-lexical-anchored-threads-thread-container{transition-duration:0s}}
+.lb-lexical-suggestions-list{margin:0;padding:0;list-style:none}.lb-lexical-mention-suggestions{--lb-lexical-mention-suggestion-avatar-size:1.25rem}.lb-lexical-mention-suggestion{padding:calc(.375*var(--lb-spacing))calc(.625*var(--lb-spacing))}.lb-lexical-mention-suggestion-avatar{inline-size:var(--lb-lexical-mention-suggestion-avatar-size);margin-inline-start:calc(-.125*var(--lb-spacing));margin-inline-end:calc(.5*var(--lb-spacing));margin-block:calc(.125*var(--lb-spacing));background:var(--lb-foreground-subtle);color:var(--lb-foreground-moderate)}.lb-lexical-suggestions{animation-duration:var(--lb-transition-duration);animation-timing-function:var(--lb-transition-easing);will-change:transform,opacity;padding:4px}.lb-lexical-suggestions-list-item{padding:calc(.25*var(--lb-spacing))calc(.5*var(--lb-spacing));border-radius:calc(var(--lb-radius) - .75*4px);color:var(--lb-foreground-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;scroll-margin-block:4px;font-size:.875rem;transition-property:background,color,opacity;display:flex}.lb-lexical-suggestions-list-item:where([data-highlighted]:not([data-highlighted=false]),[data-selected]:not([data-selected=false])){background:var(--lb-foreground-subtle);transition-duration:calc(var(--lb-transition-duration)/2)}.lb-lexical-suggestions-list-item:where(:disabled,[data-disabled]:not([data-disabled=false])){opacity:.5;cursor:not-allowed}.lb-lexical-suggestions:where([data-side=top]){animation-name:lb-animation-slide-up}.lb-lexical-suggestions:where([data-side=bottom]){animation-name:lb-animation-slide-down}.lb-lexical-suggestions:where([data-state=closed]){animation-name:lb-animation-disappear}.lb-lexical-mention{border-radius:calc(.675*var(--lb-radius));background:var(--lb-accent-subtle);color:var(--lb-accent);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.1em .3em;font-weight:500}.lb-lexical-mention::selection{background:0 0}.lb-lexical-mention ::selection{background:0 0}.lb-lexical-mention:where([data-selected]:not([data-selected=false])){background:var(--lb-accent);color:var(--lb-accent-foreground)}.lb-lexical-thread-mark{background:var(--lb-accent-subtle);color:var(--lb-foreground);text-decoration-line:underline;-webkit-text-decoration-color:var(--lb-foreground-moderate);text-decoration-color:var(--lb-foreground-moderate);text-underline-offset:2px;outline:none;font-weight:500;transition-property:color,text-decoration-color}.lb-lexical-thread-mark:where([data-state=active]){color:var(--lb-accent);-webkit-text-decoration-color:var(--lb-accent-moderate);text-decoration-color:var(--lb-accent-moderate)}.lb-lexical-anchored-threads{--lb-lexical-anchored-threads-gap:1.25rem;--lb-lexical-anchored-threads-active-thread-offset:-.75rem}.lb-lexical-anchored-threads-thread-container{transition-duration:calc(var(--lb-transition-duration)*2);transition-property:transform}.lb-lexical-anchored-threads-thread{border-radius:var(--lb-radius);background:var(--lb-dynamic-background);transition-property:background,box-shadow;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000000a,0 2px 6px #0000000a,0 6px 20px #0000000f}.lb-lexical-anchored-threads-thread:after{content:"";z-index:1;border-radius:inherit;box-shadow:var(--lb-inset-shadow);pointer-events:none;position:absolute;inset:0}.lb-lexical-anchored-threads-thread:where([data-state=active]){box-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f}.lb-lexical-floating{--lb-lexical-floating-size:350px}.lb-lexical-floating-threads-thread{inline-size:var(--lb-lexical-floating-size)}.lb-lexical-floating-threads-thread:where(:not(:last-of-type)){border-block-end:1px solid var(--lb-foreground-subtle)}.lb-lexical-floating-composer{inline-size:var(--lb-lexical-floating-size)}.lb-lexical-toolbar{--lb-lexical-toolbar-spacing:calc(.25*var(--lb-spacing));gap:var(--lb-lexical-toolbar-spacing);padding:var(--lb-lexical-toolbar-spacing);background:var(--lb-background);flex-direction:row;align-items:center;display:flex;position:relative}.lb-lexical-floating-toolbar{--lb-lexical-toolbar-spacing:4px}.lb-lexical-toolbar-separator{pointer-events:none;align-self:stretch;inline-size:1px;margin-inline:1px;position:relative}.lb-lexical-toolbar-separator:before{content:"";background:var(--lb-foreground-subtle);position:absolute;inset:10% 0}@media (prefers-reduced-motion){.lb-lexical-suggestions:where(:not([data-state=closed])){animation-name:lb-animation-appear}.lb-lexical-anchored-threads-thread-container{transition-duration:0s}}

package/styles.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/styles/src/styles/index.css","src/styles/src/styles/utils.css"],"names":[],"mappings":"AAOA,6BAAA,QAAA,CAAA,SAAA,CAAA,eAAA,CAUA,gCAAA,mDAAA,CAIA,+BAAA,gEAAA,CAIA,sCAAA,4DAAA,CAAA,iDAAA,CAAA,4CAAA,CAAA,yCAAA,CAAA,sCAAA,CAAA,mCAAA,CAaA,wBAAA,gDAAA,CAAA,qDAAA,CAAA,6BAAA,CAAA,WAAA,CAOA,kCAAA,6DAAA,CAAA,8CAAA,CAAA,oCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iBAAA,CAAA,4CAAA,CAAA,YAAA,CAeE,4EAAA,sCAAA,CAAA,yDAAA,CAKA,mEAAA,UAAA,CAAA,kBAAA,CAWA,+CAAA,oCAAA,CAIA,kDAAA,sCAAA,CAIA,mDAAA,qCAAA,CAeF,oBAAA,yCAAA,CAAA,kCAAA,CAAA,sBAAA,CAAA,kCAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,eAAA,CClGE,+BAAA,cAAA,CAAA,gCAAA,cAAA,CD4GA,2CAAA,2BAAA,CAAA,iCAAA,CAUF,wBAAA,kCAAA,CAAA,0BAAA,CAAA,8BAAA,CAAA,2DAAA,CAAA,mDAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,eAAA,CAAA,+CAAA,CAUE,mDAAA,sBAAA,CAAA,uDAAA,CAAA,+CAAA,CAUF,6BAAA,yCAAA,CAAA,0DAAA,CAKA,8CAAA,yDAAA,CAAA,6BAAA,CAWA,oCAAA,8BAAA,CAAA,uCAAA,CAAA,yCAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,uEAAA,CAQE,0CAAA,UAAA,CAAA,SAAA,CAAA,qBAAA,CAAA,iCAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,OAAA,CAUA,+DAAA,uEAAA,CASF,qBAAA,gCAAA,CAQA,oCAAA,2CAAA,CAGE,+DAAA,sDAAA,CASF,8BAAA,2CAAA,CAjHA,gCACE,yDAAA,kCAAA,CA4DA,8CAAA,sBAAA,CAAA","file":"styles.css","sourcesContent":["@import \"./utils\";\n@import \"./constants\";\n\n/*************************************\n *            Suggestions            *\n *************************************/\n\n.lb-lexical-suggestions-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/*************************************\n *        Mention suggestions        *\n *************************************/\n\n.lb-lexical-mention-suggestions {\n  --lb-lexical-mention-suggestion-avatar-size: 1.25rem;\n}\n\n.lb-lexical-mention-suggestion {\n  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));\n}\n\n.lb-lexical-mention-suggestion-avatar {\n  inline-size: var(--lb-lexical-mention-suggestion-avatar-size);\n  margin-inline-start: calc(-0.125 * var(--lb-spacing));\n  margin-inline-end: calc(0.5 * var(--lb-spacing));\n  margin-block: calc(0.125 * var(--lb-spacing));\n  background: var(--lb-foreground-subtle);\n  color: var(--lb-foreground-moderate);\n}\n\n/*************************************\n *          Elevation lists          *\n *************************************/\n\n.lb-lexical-suggestions {\n  padding: $lb-elevation-list-padding;\n  animation-duration: var(--lb-transition-duration);\n  animation-timing-function: var(--lb-transition-easing);\n  will-change: transform, opacity;\n}\n\n.lb-lexical-suggestions-list-item {\n  display: flex;\n  align-items: center;\n  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));\n  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-list-padding);\n  color: var(--lb-foreground-secondary);\n  outline: none;\n  font-size: 0.875rem;\n  cursor: pointer;\n  user-select: none;\n  transition-property: background, color, opacity;\n  scroll-margin-block: $lb-elevation-list-padding;\n}\n\n:is(.lb-lexical-suggestions-list-item) {\n  &:where([data-highlighted], [data-selected]) {\n    background: var(--lb-foreground-subtle);\n    transition-duration: calc(var(--lb-transition-duration) / 2);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}\n\n/*************************************\n *        Floating animations        *\n *************************************/\n\n:is(.lb-lexical-suggestions) {\n  &:where([data-side=\"top\"]) {\n    animation-name: lb-animation-slide-up;\n  }\n\n  &:where([data-side=\"bottom\"]) {\n    animation-name: lb-animation-slide-down;\n  }\n\n  &:where([data-state=\"closed\"]) {\n    animation-name: lb-animation-disappear;\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .lb-lexical-suggestions:where(:not([data-state=\"closed\"])) {\n    animation-name: lb-animation-appear;\n  }\n}\n\n/*************************************\n *              Mention              *\n *************************************/\n\n.lb-lexical-mention {\n  padding: 0.1em 0.3em;\n  border-radius: calc(0.675 * var(--lb-radius));\n  background: var(--lb-accent-subtle);\n  color: var(--lb-accent);\n  box-decoration-break: clone;\n  font-weight: 500;\n\n  @include invisible-selection;\n\n  &:where([data-selected]) {\n    background: var(--lb-accent);\n    color: var(--lb-accent-foreground);\n  }\n}\n\n/*************************************\n *            Thread mark            *\n *************************************/\n\n.lb-lexical-thread-mark {\n  background: var(--lb-accent-subtle);\n  color: var(--lb-foreground);\n  outline: none;\n  font-weight: 500;\n  transition-property: color, text-decoration-color;\n  text-decoration-line: underline;\n  text-decoration-color: var(--lb-foreground-moderate);\n  text-underline-offset: 2px;\n\n  &:where([data-state=\"active\"]) {\n    color: var(--lb-accent);\n    text-decoration-color: var(--lb-accent-moderate);\n  }\n}\n\n/*************************************\n *          Anchored threads         *\n *************************************/\n\n.lb-lexical-anchored-threads {\n  --lb-lexical-anchored-threads-gap: 1.25rem;\n  --lb-lexical-anchored-threads-active-thread-offset: -0.75rem;\n}\n\n.lb-lexical-anchored-threads-thread-container {\n  transition-duration: calc(var(--lb-transition-duration) * 2);\n  transition-property: transform;\n}\n\n@media (prefers-reduced-motion) {\n  .lb-lexical-anchored-threads-thread-container {\n    transition-duration: 0s;\n  }\n}\n\n.lb-lexical-anchored-threads-thread {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--lb-radius);\n  background: var(--lb-dynamic-background);\n  box-shadow: $lb-lexical-anchored-threads-shadow;\n  transition-property: background, box-shadow;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    border-radius: inherit;\n    box-shadow: var(--lb-inset-shadow);\n    pointer-events: none;\n  }\n\n  &:where([data-state=\"active\"]) {\n    box-shadow: $lb-lexical-anchored-threads-active-shadow;\n  }\n}\n\n/*************************************\n *        Floating components        *\n *************************************/\n\n.lb-lexical-floating {\n  --lb-lexical-floating-size: 350px;\n}\n\n/*************************************\n *         Floating threads          *\n *************************************/\n\n.lb-lexical-floating-threads-thread {\n  inline-size: var(--lb-lexical-floating-size);\n\n  &:where(:not(:last-of-type)) {\n    border-block-end: 1px solid var(--lb-foreground-subtle);\n  }\n}\n\n/*************************************\n *         Floating composer         *\n *************************************/\n\n.lb-lexical-floating-composer {\n  inline-size: var(--lb-lexical-floating-size);\n}\n","@mixin invisible-selection {\n  &::selection,\n  *::selection {\n    background: transparent;\n  }\n}\n"]}
+{"version":3,"sources":["src/styles/src/styles/index.css","src/styles/src/styles/utils.css"],"names":[],"mappings":"AAOA,6BAAA,QAAA,CAAA,SAAA,CAAA,eAAA,CAUA,gCAAA,mDAAA,CAIA,+BAAA,gEAAA,CAIA,sCAAA,4DAAA,CAAA,iDAAA,CAAA,4CAAA,CAAA,yCAAA,CAAA,sCAAA,CAAA,mCAAA,CAaA,wBAAA,gDAAA,CAAA,qDAAA,CAAA,6BAAA,CAAA,WAAA,CAOA,kCAAA,6DAAA,CAAA,8CAAA,CAAA,oCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iBAAA,CAAA,4CAAA,CAAA,YAAA,CAeE,qIAAA,sCAAA,CAAA,yDAAA,CAQA,8FAAA,UAAA,CAAA,kBAAA,CAWA,+CAAA,oCAAA,CAIA,kDAAA,sCAAA,CAIA,mDAAA,qCAAA,CAeF,oBAAA,yCAAA,CAAA,kCAAA,CAAA,sBAAA,CAAA,kCAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,eAAA,CCrGE,+BAAA,cAAA,CAAA,gCAAA,cAAA,CD+GA,sEAAA,2BAAA,CAAA,iCAAA,CAUF,wBAAA,kCAAA,CAAA,0BAAA,CAAA,8BAAA,CAAA,2DAAA,CAAA,mDAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,eAAA,CAAA,+CAAA,CAUE,mDAAA,sBAAA,CAAA,uDAAA,CAAA,+CAAA,CAUF,6BAAA,yCAAA,CAAA,0DAAA,CAKA,8CAAA,yDAAA,CAAA,6BAAA,CAWA,oCAAA,8BAAA,CAAA,uCAAA,CAAA,yCAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,uEAAA,CAQE,0CAAA,UAAA,CAAA,SAAA,CAAA,qBAAA,CAAA,iCAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,OAAA,CAUA,+DAAA,uEAAA,CASF,qBAAA,gCAAA,CAQA,oCAAA,2CAAA,CAGE,+DAAA,sDAAA,CASF,8BAAA,2CAAA,CAQA,oBAAA,wDAAA,CAAA,qCAAA,CAAA,yCAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,YAAA,CAAA,iBAAA,CAYA,6BAAA,gCAAA,CAIA,8BAAA,mBAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,iBAAA,CAAA,iBAAA,CAOE,qCAAA,UAAA,CAAA,sCAAA,CAAA,iBAAA,CAAA,WAAA,CAhJF,gCACE,yDAAA,kCAAA,CA4DA,8CAAA,sBAAA,CAAA","file":"styles.css","sourcesContent":["@import \"./utils\";\n@import \"./constants\";\n\n/*************************************\n *            Suggestions            *\n *************************************/\n\n.lb-lexical-suggestions-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/*************************************\n *        Mention suggestions        *\n *************************************/\n\n.lb-lexical-mention-suggestions {\n  --lb-lexical-mention-suggestion-avatar-size: 1.25rem;\n}\n\n.lb-lexical-mention-suggestion {\n  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));\n}\n\n.lb-lexical-mention-suggestion-avatar {\n  inline-size: var(--lb-lexical-mention-suggestion-avatar-size);\n  margin-inline-start: calc(-0.125 * var(--lb-spacing));\n  margin-inline-end: calc(0.5 * var(--lb-spacing));\n  margin-block: calc(0.125 * var(--lb-spacing));\n  background: var(--lb-foreground-subtle);\n  color: var(--lb-foreground-moderate);\n}\n\n/*************************************\n *          Elevation lists          *\n *************************************/\n\n.lb-lexical-suggestions {\n  padding: $lb-elevation-padding;\n  animation-duration: var(--lb-transition-duration);\n  animation-timing-function: var(--lb-transition-easing);\n  will-change: transform, opacity;\n}\n\n.lb-lexical-suggestions-list-item {\n  display: flex;\n  align-items: center;\n  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));\n  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-padding);\n  color: var(--lb-foreground-secondary);\n  outline: none;\n  font-size: 0.875rem;\n  cursor: pointer;\n  user-select: none;\n  transition-property: background, color, opacity;\n  scroll-margin-block: $lb-elevation-padding;\n}\n\n:is(.lb-lexical-suggestions-list-item) {\n  &:where(\n      [data-highlighted]:not([data-highlighted=\"false\"]),\n      [data-selected]:not([data-selected=\"false\"])\n    ) {\n    background: var(--lb-foreground-subtle);\n    transition-duration: calc(var(--lb-transition-duration) / 2);\n  }\n\n  &:where(:disabled, [data-disabled]:not([data-disabled=\"false\"])) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}\n\n/*************************************\n *        Floating animations        *\n *************************************/\n\n:is(.lb-lexical-suggestions) {\n  &:where([data-side=\"top\"]) {\n    animation-name: lb-animation-slide-up;\n  }\n\n  &:where([data-side=\"bottom\"]) {\n    animation-name: lb-animation-slide-down;\n  }\n\n  &:where([data-state=\"closed\"]) {\n    animation-name: lb-animation-disappear;\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .lb-lexical-suggestions:where(:not([data-state=\"closed\"])) {\n    animation-name: lb-animation-appear;\n  }\n}\n\n/*************************************\n *              Mention              *\n *************************************/\n\n.lb-lexical-mention {\n  padding: 0.1em 0.3em;\n  border-radius: calc(0.675 * var(--lb-radius));\n  background: var(--lb-accent-subtle);\n  color: var(--lb-accent);\n  box-decoration-break: clone;\n  font-weight: 500;\n\n  @include invisible-selection;\n\n  &:where([data-selected]:not([data-selected=\"false\"])) {\n    background: var(--lb-accent);\n    color: var(--lb-accent-foreground);\n  }\n}\n\n/*************************************\n *            Thread mark            *\n *************************************/\n\n.lb-lexical-thread-mark {\n  background: var(--lb-accent-subtle);\n  color: var(--lb-foreground);\n  outline: none;\n  font-weight: 500;\n  transition-property: color, text-decoration-color;\n  text-decoration-line: underline;\n  text-decoration-color: var(--lb-foreground-moderate);\n  text-underline-offset: 2px;\n\n  &:where([data-state=\"active\"]) {\n    color: var(--lb-accent);\n    text-decoration-color: var(--lb-accent-moderate);\n  }\n}\n\n/*************************************\n *          Anchored threads         *\n *************************************/\n\n.lb-lexical-anchored-threads {\n  --lb-lexical-anchored-threads-gap: 1.25rem;\n  --lb-lexical-anchored-threads-active-thread-offset: -0.75rem;\n}\n\n.lb-lexical-anchored-threads-thread-container {\n  transition-duration: calc(var(--lb-transition-duration) * 2);\n  transition-property: transform;\n}\n\n@media (prefers-reduced-motion) {\n  .lb-lexical-anchored-threads-thread-container {\n    transition-duration: 0s;\n  }\n}\n\n.lb-lexical-anchored-threads-thread {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--lb-radius);\n  background: var(--lb-dynamic-background);\n  box-shadow: $lb-lexical-anchored-threads-shadow;\n  transition-property: background, box-shadow;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    border-radius: inherit;\n    box-shadow: var(--lb-inset-shadow);\n    pointer-events: none;\n  }\n\n  &:where([data-state=\"active\"]) {\n    box-shadow: $lb-lexical-anchored-threads-active-shadow;\n  }\n}\n\n/*************************************\n *        Floating components        *\n *************************************/\n\n.lb-lexical-floating {\n  --lb-lexical-floating-size: 350px;\n}\n\n/*************************************\n *         Floating threads          *\n *************************************/\n\n.lb-lexical-floating-threads-thread {\n  inline-size: var(--lb-lexical-floating-size);\n\n  &:where(:not(:last-of-type)) {\n    border-block-end: 1px solid var(--lb-foreground-subtle);\n  }\n}\n\n/*************************************\n *         Floating composer         *\n *************************************/\n\n.lb-lexical-floating-composer {\n  inline-size: var(--lb-lexical-floating-size);\n}\n\n/*************************************\n *              Toolbar              *\n *************************************/\n\n.lb-lexical-toolbar {\n  --lb-lexical-toolbar-spacing: calc(0.25 * var(--lb-spacing));\n\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: var(--lb-lexical-toolbar-spacing);\n  align-items: center;\n  padding: var(--lb-lexical-toolbar-spacing);\n  background: var(--lb-background);\n}\n\n.lb-lexical-floating-toolbar {\n  --lb-lexical-toolbar-spacing: $lb-elevation-padding;\n}\n\n.lb-lexical-toolbar-separator {\n  position: relative;\n  align-self: stretch;\n  inline-size: 1px;\n  margin-inline: 1px;\n  pointer-events: none;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 10% 0;\n    background: var(--lb-foreground-subtle);\n  }\n}\n","@mixin invisible-selection {\n  &::selection,\n  *::selection {\n    background: transparent;\n  }\n}\n"]}