@excalidraw/excalidraw 0.18.0-5fffc47 → 0.18.0-6135548

package/dist/dev/index.css

@@ -266,19 +266,22 @@
   --focus-highlight-color: #a5d8ff;
   --icon-fill-color: var(--color-on-surface);
   --icon-green-fill-color: #2b8a3e;
-  --default-bg-color: #ffffff;
-  --input-bg-color: #ffffff;
+  --default-bg-color: #fff;
+  --input-bg-color: #fff;
   --input-border-color: #ced4da;
   --input-hover-bg-color: #f1f3f5;
   --input-label-color: #495057;
   --island-bg-color: #ffffff;
+  --island-bg-color-alt: #fff;
   --keybinding-color: var(--color-gray-40);
   --link-color: #1c7ed6;
+  --link-color-hover: #1971c2;
+  --link-color-active: #a5d8ff;
   --overlay-bg-color: rgba(255, 255, 255, 0.88);
   --popup-bg-color: var(--island-bg-color);
   --popup-secondary-bg-color: #f1f3f5;
-  --popup-text-color: #000000;
-  --popup-text-inverted-color: #ffffff;
+  --popup-text-color: #000;
+  --popup-text-inverted-color: #fff;
   --select-highlight-color: #339af0;
   --shadow-island:
     0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
@@ -321,10 +324,11 @@
     0px 4px 4px rgba(0, 0, 0, 0.09),
     0px 1px 2px rgba(0, 0, 0, 0.1),
     0px 0px 0px rgba(0, 0, 0, 0.1);
+  --chat-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   --space-factor: 0.25rem;
   --text-primary-color: var(--color-on-surface);
   --color-selection: #6965db;
-  --color-icon-white: #ffffff;
+  --color-icon-white: #fff;
   --color-primary: #6965db;
   --color-primary-darker: #5b57d1;
   --color-primary-darkest: #4a47b1;
@@ -427,6 +431,7 @@
   --input-hover-bg-color: #181818;
   --input-label-color: #e9ecef;
   --island-bg-color: #232329;
+  --island-bg-color-alt: hsl(240, 12%, 12%);
   --keybinding-color: var(--color-gray-60);
   --link-color: #4dabf7;
   --overlay-bg-color: rgba(52, 58, 64, 0.12);
@@ -507,7 +512,6 @@
   background-color: var(--button-bg, var(--island-bg-color));
   color: var(--button-color, var(--color-on-surface));
   font-family: var(--ui-font);
-  padding: 0;
 }
 .excalidraw button.standalone svg {
   width: var(--button-width, var(--lg-icon-size));
@@ -536,6 +540,9 @@
   width: var(--mobile-action-button-size, var(--default-button-size));
   height: var(--mobile-action-button-size, var(--default-button-size));
 }
+.excalidraw button.standalone {
+  padding: 0;
+}
 .excalidraw button.standalone svg {
   width: var(--default-icon-size);
   height: var(--default-icon-size);
@@ -1033,7 +1040,7 @@
   color: #aaa;
 }
 .excalidraw .color-picker-type-elementBackground .color-picker-keybinding {
-  color: #ffffff;
+  color: #fff;
 }
 .excalidraw .color-picker-swatch[aria-label=transparent] .color-picker-keybinding {
   color: #aaa;
@@ -1042,10 +1049,10 @@
   color: #d4d4d4;
 }
 .excalidraw.theme--dark .color-picker-type-elementBackground .color-picker-keybinding {
-  color: #000000;
+  color: #000;
 }
 .excalidraw.theme--dark .color-picker-swatch[aria-label=transparent] .color-picker-keybinding {
-  color: #000000;
+  color: #000;
 }
 
 /* components/QuickSearch.scss */
@@ -1204,7 +1211,7 @@
   color: #aaa;
 }
 .excalidraw .picker-type-elementBackground .picker-keybinding {
-  color: #ffffff;
+  color: #fff;
 }
 .excalidraw .picker-swatch[aria-label=transparent] .picker-keybinding {
   color: #aaa;
@@ -1213,10 +1220,10 @@
   color: #d4d4d4;
 }
 .excalidraw.theme--dark .picker-type-elementBackground .picker-keybinding {
-  color: #000000;
+  color: #000;
 }
 .excalidraw.theme--dark .picker-swatch[aria-label=transparent] .picker-keybinding {
-  color: #000000;
+  color: #000;
 }
 
 /* components/Range.scss */
@@ -1289,12 +1296,12 @@
   box-sizing: border-box;
   pointer-events: none;
   word-wrap: break-word;
-  background: #000000;
+  background: #000;
   line-height: 1.5;
   text-align: center;
   font-size: 13px;
   font-weight: 500;
-  color: #ffffff;
+  color: #fff;
   display: none;
 }
 .excalidraw-tooltip.excalidraw-tooltip--visible {
@@ -1626,7 +1633,7 @@
   background-color: #868e96;
 }
 .excalidraw .publish-library__buttons .ToolIcon__icon {
-  color: #ffffff;
+  color: #fff;
 }
 .excalidraw .publish-library__buttons .ToolIcon__icon .Spinner {
   --spinner-color: #fff;
@@ -1664,7 +1671,7 @@
   border-radius: 0.2rem;
 }
 .excalidraw .single-library-item__svg {
-  background-color: #ffffff;
+  background-color: #fff;
   padding: 0.3rem;
   width: 7.5rem;
   height: 7.5rem;
@@ -1675,7 +1682,7 @@
   height: 100%;
 }
 .excalidraw .single-library-item .ToolIcon__icon {
-  background-color: #ffffff;
+  background-color: #fff;
   width: auto;
   height: auto;
   margin: 0 0.5rem;
@@ -1714,7 +1721,7 @@
   background-color: #e03131;
 }
 .excalidraw .single-library-item--remove svg {
-  color: #ffffff;
+  color: #fff;
   padding: 0.26rem;
   border-radius: 0.3em;
   width: 1rem;
@@ -1964,6 +1971,19 @@
 .excalidraw .dropdown-menu-button:active {
   border-color: var(--color-primary);
 }
+.excalidraw .dropdown-menu-button[disabled] {
+  cursor: not-allowed;
+}
+.excalidraw .dropdown-menu-button[disabled]:hover {
+  --background: var(--color-surface-mid);
+  background-color: var(--background);
+}
+.excalidraw .dropdown-menu-button[disabled]:active {
+  border-color: transparent;
+}
+.excalidraw.theme--dark.excalidraw .dropdown-menu-button[disabled]:hover {
+  --background: var(--color-surface-high);
+}
 .excalidraw .dropdown-menu-button svg {
   width: var(--lg-icon-size);
   height: var(--lg-icon-size);
@@ -2270,19 +2290,22 @@
   --focus-highlight-color: #a5d8ff;
   --icon-fill-color: var(--color-on-surface);
   --icon-green-fill-color: #2b8a3e;
-  --default-bg-color: #ffffff;
-  --input-bg-color: #ffffff;
+  --default-bg-color: #fff;
+  --input-bg-color: #fff;
   --input-border-color: #ced4da;
   --input-hover-bg-color: #f1f3f5;
   --input-label-color: #495057;
   --island-bg-color: #ffffff;
+  --island-bg-color-alt: #fff;
   --keybinding-color: var(--color-gray-40);
   --link-color: #1c7ed6;
+  --link-color-hover: #1971c2;
+  --link-color-active: #a5d8ff;
   --overlay-bg-color: rgba(255, 255, 255, 0.88);
   --popup-bg-color: var(--island-bg-color);
   --popup-secondary-bg-color: #f1f3f5;
-  --popup-text-color: #000000;
-  --popup-text-inverted-color: #ffffff;
+  --popup-text-color: #000;
+  --popup-text-inverted-color: #fff;
   --select-highlight-color: #339af0;
   --shadow-island:
     0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
@@ -2325,10 +2348,11 @@
     0px 4px 4px rgba(0, 0, 0, 0.09),
     0px 1px 2px rgba(0, 0, 0, 0.1),
     0px 0px 0px rgba(0, 0, 0, 0.1);
+  --chat-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   --space-factor: 0.25rem;
   --text-primary-color: var(--color-on-surface);
   --color-selection: #6965db;
-  --color-icon-white: #ffffff;
+  --color-icon-white: #fff;
   --color-primary: #6965db;
   --color-primary-darker: #5b57d1;
   --color-primary-darkest: #4a47b1;
@@ -2431,6 +2455,7 @@
   --input-hover-bg-color: #181818;
   --input-label-color: #e9ecef;
   --island-bg-color: #232329;
+  --island-bg-color-alt: hsl(240, 12%, 12%);
   --keybinding-color: var(--color-gray-60);
   --link-color: #4dabf7;
   --overlay-bg-color: rgba(52, 58, 64, 0.12);
@@ -2685,7 +2710,7 @@
 .excalidraw .publish-library-success-close.ToolIcon_type_button .ToolIcon__icon {
   width: auto;
   font-size: 1rem;
-  color: #ffffff;
+  color: #fff;
   padding: 0 0.5rem;
 }
 .excalidraw .library-menu-control-buttons {
@@ -2713,7 +2738,7 @@
   position: relative;
   border-radius: var(--border-radius-lg);
   background-color: var(--color-primary);
-  color: #ffffff;
+  color: #fff;
   text-align: center;
   white-space: nowrap;
   text-decoration: none !important;
@@ -3249,6 +3274,9 @@
 }
 
 /* components/ContextMenu.scss */
+.excalidraw .context-menu-popover {
+  z-index: var(--zIndex-ui-context-menu);
+}
 .excalidraw .context-menu {
   position: relative;
   border-radius: 4px;
@@ -3509,6 +3537,12 @@
   --userlist-hint-text-color: var(--color-gray-60);
   --userlist-collaborators-border-color: var(--color-gray-20);
 }
+.excalidraw.theme--dark {
+  --userlist-hint-bg-color: var(--color-gray-90);
+  --userlist-hint-heading-color: var(--color-gray-30);
+  --userlist-hint-text-color: var(--color-gray-40);
+  --userlist-collaborators-border-color: var(--color-gray-80);
+}
 .excalidraw .UserList__wrapper {
   display: flex;
   width: 100%;
@@ -3554,13 +3588,6 @@
   line-height: 1;
   color: var(--color-gray-90);
   flex: 0 0 auto;
-  background-color: var(--color-gray-20);
-  border: 0 !important;
-  font-size: 0.625rem;
-  font-weight: 400;
-  flex-shrink: 0;
-  color: var(--color-gray-100);
-  font-weight: bold;
 }
 .excalidraw .UserList__more:active {
   transform: scale(0.94);
@@ -3586,6 +3613,15 @@
 .excalidraw .UserList__more.is-current-user {
   cursor: auto;
 }
+.excalidraw .UserList__more {
+  background-color: var(--color-gray-20);
+  border: 0 !important;
+  font-size: 0.625rem;
+  font-weight: 400;
+  flex-shrink: 0;
+  color: var(--color-gray-100);
+  font-weight: bold;
+}
 .excalidraw .UserList__collaborator-name {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -3654,12 +3690,6 @@
     transform: scaleY(2);
   }
 }
-.excalidraw.theme--dark {
-  --userlist-hint-bg-color: var(--color-gray-90);
-  --userlist-hint-heading-color: var(--color-gray-30);
-  --userlist-hint-text-color: var(--color-gray-40);
-  --userlist-collaborators-border-color: var(--color-gray-80);
-}
 .excalidraw .UserList__collaborators {
   top: auto;
   max-height: 50vh;
@@ -4054,7 +4084,17 @@
   visibility: hidden;
 }
 .excalidraw .ExcButton[disabled] {
-  pointer-events: none;
+  cursor: not-allowed;
+}
+.excalidraw .ExcButton[disabled].ExcButton--variant-filled,
+.excalidraw .ExcButton[disabled]:hover {
+  --back-color: var(--color-surface-low) !important;
+  --text-color: var(--color-on-surface-variant) !important;
+}
+.excalidraw .ExcButton[disabled].ExcButton--variant-outlined,
+.excalidraw .ExcButton[disabled].ExcButton--variant-icon {
+  --text-color: var(--color-on-surface-variant);
+  --border-color: var(--color-surface-high);
 }
 .excalidraw .ExcButton,
 .excalidraw .ExcButton__contents {
@@ -4488,178 +4528,723 @@
 }
 
 /* components/TTDDialog/TTDDialog.scss */
-.excalidraw .Modal.Dialog.ttd-dialog {
-  padding: 1.25rem;
+.excalidraw.theme--dark .chat-message--assistant .chat-message__content {
+  background: var(--color-surface-lowest);
 }
-.excalidraw .Modal.Dialog.ttd-dialog.Dialog--fullscreen {
-  margin-top: 0;
+.excalidraw.theme--dark .chat-message--system .chat-message__content {
+  color: var(--color-surface-low);
 }
-.excalidraw .Modal.Dialog.ttd-dialog .Island {
-  padding-inline: 0 !important;
-  height: 100%;
+.excalidraw .chat-interface {
   display: flex;
   flex-direction: column;
-  flex: 1 1 auto;
-  box-shadow: none;
-}
-.excalidraw .Modal.Dialog.ttd-dialog .Modal__content {
-  height: auto;
-  max-height: 100%;
+  height: 100%;
+  min-height: 0;
+  position: relative;
 }
-@media screen and (min-width: 861px) {
-  .excalidraw .Modal.Dialog.ttd-dialog .Modal__content {
-    max-height: 750px;
-    height: 100%;
+@media screen and (max-width: 861px) {
+  .excalidraw .chat-interface {
+    min-height: 200px;
   }
 }
-.excalidraw .Modal.Dialog.ttd-dialog .Dialog__content {
-  flex: 1 1 auto;
+.excalidraw .chat-interface__messages {
+  flex: 1 1 0;
+  overflow-y: auto;
+  margin-bottom: 0.5rem;
+  padding: 1rem 0.5rem 0 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  min-height: 0;
+  border-top-left-radius: var(--border-radius-lg);
+  border-top-right-radius: var(--border-radius-lg);
 }
-.excalidraw .ttd-dialog-desc {
-  font-size: 15px;
-  font-style: italic;
-  font-weight: 500;
-  margin-bottom: 1.5rem;
+@media screen and (max-width: 861px) {
+  .excalidraw .chat-interface__messages {
+    min-height: 100px;
+    padding: 0.75rem;
+  }
 }
-.excalidraw .ttd-dialog-tabs-root {
-  width: 100%;
-  height: 100%;
+.excalidraw .chat-interface__empty-state {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
 }
-.excalidraw .ttd-dialog-tab-trigger {
-  color: var(--color-on-surface);
-  font-size: 0.875rem;
-  margin: 0;
-  padding: 0 1rem;
-  background-color: transparent;
-  border: 0;
-  height: 2.875rem;
+.excalidraw .chat-interface__empty-state-content {
+  text-align: center;
+}
+.excalidraw .chat-interface__empty-state-content h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
   font-weight: 600;
-  font-family: inherit;
-  letter-spacing: 0.4px;
 }
-.excalidraw .ttd-dialog-tab-trigger[data-state=active] {
-  border-bottom: 2px solid var(--color-primary);
+.excalidraw .chat-interface__empty-state-content p {
+  margin: 0 0 0.2rem 0;
+  font-size: 0.875rem;
+  color: var(--color-on-surface);
 }
-.excalidraw .ttd-dialog-triggers {
-  border-bottom: 1px solid var(--color-surface-high);
-  margin-bottom: 1.5rem;
-  padding-inline: 2.5rem;
+@media screen and (max-width: 861px) {
+  .excalidraw .chat-interface__empty-state {
+    min-height: 100px;
+  }
 }
-.excalidraw .ttd-dialog-content {
-  padding-inline: 2.5rem;
-  height: 100%;
+.excalidraw .chat-interface__input-outer {
+  position: relative;
+  min-height: 71px;
+}
+.excalidraw .chat-interface__input-container {
   display: flex;
   flex-direction: column;
+  justify-content: flex-end;
 }
-.excalidraw .ttd-dialog-content[hidden] {
-  display: none;
-}
-.excalidraw .ttd-dialog-input {
-  width: auto;
-  height: 10rem;
-  resize: none;
-  border-radius: var(--border-radius-lg);
+.excalidraw .chat-interface__input-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
   border: 1px solid var(--dialog-border-color);
-  white-space: pre-wrap;
-  padding: 0.85rem;
-  box-sizing: border-box;
-  font-family: monospace;
+  border-radius: var(--border-radius-lg);
+  padding: 0.75rem;
+  background: var(--color-surface-lowest);
+  transition: border-color 0.2s ease;
 }
-@media screen and (min-width: 861px) {
-  .excalidraw .ttd-dialog-input {
-    width: 100%;
-    height: 100%;
+.excalidraw .chat-interface__input-wrapper:focus-within {
+  border-color: var(--color-primary);
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .chat-interface__input-wrapper {
+    padding: 0.5rem 0.75rem;
   }
 }
-.excalidraw .ttd-dialog-output-wrapper {
+.excalidraw .chat-interface__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  min-height: 24px;
+  max-height: 120px;
+  overflow-x: hidden;
+  border: none !important;
+  background: transparent !important;
+  color: var(--color-on-surface);
+}
+.excalidraw .chat-interface__input::placeholder {
+  color: var(--color-gray-40);
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .chat-interface__input {
+    line-height: 1.4;
+    min-height: 20px;
+    max-height: 100px;
+    resize: none;
+    padding: 0;
+  }
+  .excalidraw .chat-interface__input::placeholder {
+    opacity: 0.6;
+  }
+}
+.excalidraw .chat-interface__send-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.85rem;
-  box-sizing: border-box;
-  flex-grow: 1;
-  position: relative;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
-  border-radius: var(--border-radius-lg);
-  border: 1px solid var(--dialog-border-color);
-  height: 400px;
-  width: auto;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-primary);
+  color: var(--color-surface-lowest);
+  cursor: pointer;
+  margin-bottom: 8px;
 }
-@media screen and (min-width: 861px) {
-  .excalidraw .ttd-dialog-output-wrapper {
-    width: 100%;
-    height: 200px;
-  }
+.excalidraw .chat-interface__send-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
 }
-.excalidraw .ttd-dialog-output-wrapper canvas {
-  max-width: 100%;
-  max-height: 100%;
+.excalidraw .chat-interface__send-button:hover {
+  background-color: var(--color-primary-darker);
 }
-.excalidraw .ttd-dialog-output-canvas-container {
+.excalidraw .chat-interface__send-button svg {
+  transform: rotate(-90deg);
+}
+.excalidraw .chat-message {
   display: flex;
-  width: 100%;
-  height: 100%;
   align-items: center;
-  justify-content: center;
-  flex-grow: 1;
+  gap: 0.5rem;
 }
-.excalidraw .ttd-dialog-output-error {
-  color: red;
-  font-weight: 700;
-  font-size: 30px;
-  word-break: break-word;
-  overflow: auto;
-  max-height: 100%;
-  height: 100%;
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  z-index: 10;
+.excalidraw .chat-message--user {
+  justify-content: flex-end;
 }
-.excalidraw .ttd-dialog-output-error p {
-  font-weight: 500;
-  font-family: Cascadia;
-  text-align: left;
-  white-space: pre-wrap;
-  font-size: 0.875rem;
-  padding: 0 10px;
+.excalidraw .chat-message--user .chat-message__content {
+  background: var(--color-primary-light);
+  color: var(--text-primary-color);
+  border-radius: var(--border-radius-md);
+  min-width: 6rem;
 }
-.excalidraw .ttd-dialog-panels {
-  height: 100%;
+.excalidraw .chat-message--assistant {
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
 }
-@media screen and (min-width: 861px) {
-  .excalidraw .ttd-dialog-panels {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-  }
+.excalidraw .chat-message--assistant .chat-message__content {
+  background: var(--color-surface-low);
+  color: var(--color-on-surface);
+  border-radius: var(--border-radius-md);
+  min-width: 6rem;
 }
-.excalidraw .ttd-dialog-panel {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+.excalidraw .chat-message--assistant .chat-message__content .chat-message__body {
+  font-family: monospace;
 }
-.excalidraw .ttd-dialog-panel__header {
+.excalidraw .chat-message--system {
+  justify-content: flex-start;
+  margin-bottom: 0;
+}
+.excalidraw .chat-message--system .chat-message__content {
+  background: var(--color-warning);
+  color: var(--color-on-surface);
+  border-radius: var(--border-radius-md);
+  min-width: 6rem;
+}
+.excalidraw .chat-message--system .chat-message__content .chat-message__body {
+  font-family: monospace;
+}
+.excalidraw .chat-message__content {
+  max-width: 80%;
+  padding: 0.75rem 1rem;
+  box-shadow: var(--chat-msg-shadow);
+}
+.excalidraw .chat-message__header {
   display: flex;
-  margin: 0px 4px 4px 4px;
+  justify-content: space-between;
   align-items: center;
   gap: 1rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
 }
-.excalidraw .ttd-dialog-panel__header label {
-  font-size: 14px;
-  font-style: normal;
+.excalidraw .chat-message__role {
   font-weight: 600;
 }
-.excalidraw .ttd-dialog-panel:first-child .ttd-dialog-panel-button-container:not(.invisible) {
-  margin-bottom: 4rem;
+.excalidraw .chat-message__timestamp {
+  font-size: 0.625rem;
 }
-@media screen and (min-width: 861px) {
-  .excalidraw .ttd-dialog-panel .ttd-dialog-panel-button-container:not(.invisible) {
-    margin-bottom: 0.5rem !important;
+.excalidraw .chat-message__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.excalidraw .chat-message__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0;
+  color: var(--color-gray-60);
+  transition: color 0.2s ease;
+  flex-shrink: 0;
+}
+.excalidraw .chat-message__action.invisible {
+  visibility: hidden;
+  pointer-events: none;
+}
+.excalidraw .chat-message__action:hover {
+  color: var(--color-primary);
+}
+.excalidraw .chat-message__action svg {
+  width: 14px;
+  height: 14px;
+}
+.excalidraw .chat-message__action--danger:hover {
+  color: var(--color-danger);
+}
+.excalidraw .chat-message__body {
+  line-height: 1.5;
+}
+.excalidraw .chat-message__text {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.excalidraw .chat-message__cursor {
+  display: inline-block;
+  margin-left: 2px;
+  color: currentColor;
+  animation: blink 1s infinite;
+}
+.excalidraw .chat-message__loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.excalidraw .chat-message__typing-indicator {
+  display: flex;
+  gap: 0.25rem;
+}
+.excalidraw .chat-message__typing-indicator span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.4;
+  animation: typing 1.4s infinite ease-in-out;
+}
+.excalidraw .chat-message__typing-indicator span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.excalidraw .chat-message__typing-indicator span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+.excalidraw .chat-message__typing-indicator span:nth-child(3) {
+  animation-delay: 0s;
+}
+.excalidraw .chat-message__error {
+  color: var(--color-danger);
+  font-weight: 500;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.excalidraw .chat-message__error_message {
+  background: var(--color-warning-background);
+  color: var(--color-warning-color);
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--border-radius-md);
+  margin-top: 1rem;
+  font-size: 0.875rem;
+}
+.excalidraw .chat-message__error-link {
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0;
+  margin-top: 1rem;
+  text-decoration: underline;
+  font-family: inherit;
+  color: var(--link-color);
+}
+.excalidraw .chat-message__error-link:hover {
+  color: var(--link-color-hover);
+}
+.excalidraw .chat-message__error-link:active {
+  color: var(--link-color-active);
+}
+.excalidraw .chat-message__error-link:disabled {
+  cursor: not-allowed;
+  text-decoration: none;
+}
+@keyframes typing {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+.excalidraw .Modal.Dialog.ttd-dialog {
+  padding: 1.25rem;
+}
+.excalidraw .Modal.Dialog.ttd-dialog.Dialog--fullscreen {
+  margin-top: 0;
+}
+.excalidraw .Modal.Dialog.ttd-dialog .Island {
+  padding-inline: 0 !important;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+.excalidraw .Modal.Dialog.ttd-dialog .Modal__content {
+  max-height: 100%;
+  min-height: 95vh;
+  height: 100%;
+}
+@media screen and (min-width: 861px) {
+  .excalidraw .Modal.Dialog.ttd-dialog .Modal__content {
+    max-height: min(950px, 100vh - 4rem);
+    height: 100%;
+    min-height: unset;
+  }
+}
+.excalidraw .Modal.Dialog.ttd-dialog .Dialog__content {
+  flex: 1 1 auto;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .Modal.Dialog.ttd-dialog .Dialog__content {
+    margin-top: 0 !important;
+  }
+}
+.excalidraw .ttd-dialog-desc {
+  font-size: 15px;
+  font-style: italic;
+  font-weight: 500;
+  margin: 0.5rem 0 1.5rem 0;
+}
+.excalidraw .ttd-dialog-tabs-root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.excalidraw .ttd-dialog-tab-trigger {
+  color: var(--color-on-surface);
+  font-size: 0.875rem;
+  margin: 0;
+  padding: 0 1rem;
+  background-color: transparent;
+  border: 0;
+  height: 2.875rem;
+  font-weight: 600;
+  font-family: inherit;
+  letter-spacing: 0.4px;
+}
+.excalidraw .ttd-dialog-tab-trigger[data-state=active] {
+  border-bottom: 2px solid var(--color-primary);
+}
+.excalidraw .ttd-dialog-tab-trigger__content {
+  display: flex;
+  align-items: center;
+}
+.excalidraw .ttd-dialog-tab-trigger__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 6px;
+  margin-left: 10px;
+  font-size: 10px;
+  border-radius: 12px;
+  background: var(--color-promo);
+  color: var(--color-surface-lowest);
+}
+.excalidraw .ttd-dialog-triggers {
+  border-bottom: 1px solid var(--color-surface-high);
+  margin-bottom: 1rem;
+  padding-inline: 2.5rem;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-triggers {
+    margin-bottom: 1rem;
+  }
+}
+.excalidraw .ttd-dialog-content {
+  padding-inline: 2.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  outline: none;
+}
+.excalidraw .ttd-dialog-content[hidden] {
+  display: none;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-content {
+    padding-inline: 1rem;
+    flex-grow: 1;
+  }
+}
+.excalidraw .ttd-dialog-panel__header .dropdown-menu {
+  z-index: 2;
+  margin: 0;
+  right: 0;
+  left: auto;
+  min-width: 280px;
+}
+.excalidraw .ttd-dialog-panel__header .dropdown-menu .dropdown-menu-container.dropdown-menu-container {
+  padding-inline: 0.5rem !important;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  max-height: min(400px, 70vh);
+  height: fit-content;
+  overflow-y: auto;
+  box-shadow: var(--shadow-island);
+  border-radius: var(--border-radius-lg);
+  background-color: var(--island-bg-color-alt);
+}
+.excalidraw .ttd-dialog-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: 100%;
+}
+.excalidraw .ttd-dialog-layout--split {
+  gap: 2rem;
+  min-width: 0;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-layout--split {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto;
+    grid-row-gap: 0;
+  }
+}
+.excalidraw .ttd-dialog-layout--split .ttd-dialog-chat-panel {
+  min-width: 0;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-layout--split .ttd-dialog-chat-panel {
+    width: 100%;
+    flex: 0 0 auto;
+    height: auto;
+    min-height: 250px;
+  }
+}
+.excalidraw .ttd-dialog-layout--split .ttd-dialog-preview-panel {
+  min-width: 0;
+  overflow: hidden;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-layout--split .ttd-dialog-preview-panel {
+    width: 100%;
+    flex: 0 0 auto;
+    max-width: 100%;
+    min-height: 280px;
+    height: unset;
+  }
+}
+.excalidraw .ttd-dialog-layout--chat-only {
+  grid-template-columns: 1fr;
+}
+.excalidraw .ttd-dialog-layout--chat-only .invisible {
+  display: none;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-layout--chat-only .ttd-dialog-chat-panel {
+    height: unset;
+  }
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-layout--chat-only .chat-interface {
+    max-height: 100%;
+  }
+  .excalidraw .ttd-dialog-layout--chat-only .chat-interface__messages {
+    max-height: unset;
+  }
+}
+.excalidraw .ttd-dialog-input {
+  width: auto;
+  height: 10rem;
+  resize: none;
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--dialog-border-color);
+  white-space: pre-wrap;
+  padding: 0.85rem;
+  box-sizing: border-box;
+  font-family: monospace;
+}
+@media screen and (min-width: 861px) {
+  .excalidraw .ttd-dialog-input {
+    width: 100%;
+    height: 100%;
+  }
+}
+.excalidraw .ttd-dialog-output-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  max-height: 100%;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--dialog-border-color);
+  height: 400px;
+  width: auto;
+  max-width: 100%;
+}
+@media screen and (max-width: 600px) {
+  .excalidraw .ttd-dialog-output-wrapper {
+    height: 200px;
+  }
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-output-wrapper {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+.excalidraw .ttd-dialog-output-wrapper--error {
+  background: none;
+  border: 1px solid var(--dialog-border-color);
+  border-radius: var(--border-radius-lg);
+}
+.excalidraw .ttd-dialog-output-wrapper canvas {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+.excalidraw .ttd-dialog-output-canvas-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  position: relative;
+  user-select: none;
+}
+.excalidraw .ttd-dialog-output-canvas-container.invisible {
+  visibility: hidden;
+  pointer-events: none;
+}
+.excalidraw .ttd-dialog-output-canvas-content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+}
+.excalidraw .ttd-dialog-output-canvas-content canvas {
+  image-rendering: auto;
+}
+.excalidraw .ttd-dialog-output-error {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+.excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2.5rem 2rem;
+  background: var(--color-surface-primary);
+}
+.excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-icon {
+  color: var(--color-danger);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-icon svg {
+  width: 52px;
+  height: 52px;
+  stroke-width: 1.5;
+}
+.excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-danger);
+  text-align: center;
+  margin-top: 0.25rem;
+}
+.excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-message {
+  text-align: left;
+  font-weight: 400;
+  color: var(--color-gray-50);
+  word-break: break-word;
+  white-space: pre-wrap;
+  max-width: 100%;
+  font-family: monospace;
+}
+.excalidraw .ttd-dialog-panels {
+  height: 100%;
+}
+@media screen and (min-width: 861px) {
+  .excalidraw .ttd-dialog-panels {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+}
+.excalidraw .ttd-dialog-chat-panel,
+.excalidraw .ttd-dialog-preview-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  align-items: stretch;
+}
+.excalidraw .ttd-dialog-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-panel {
+    height: 50%;
   }
 }
+.excalidraw .ttd-dialog-panel__header {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  height: 36px;
+  margin-top: 0.2rem;
+  margin-bottom: 0.5rem;
+  flex-shrink: 0;
+}
+.excalidraw .ttd-dialog-panel__header label {
+  font-size: 14px;
+  line-height: 22px;
+  font-style: normal;
+  font-weight: 600;
+}
+.excalidraw .ttd-dialog-panel__label-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+.excalidraw .ttd-dialog-panel__label-group {
+  display: flex;
+  gap: 5px;
+}
+.excalidraw .ttd-dialog-panel__header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.excalidraw .ttd-dialog-panel__rate-limit {
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.excalidraw .ttd-dialog-panel__rate-limit--danger {
+  color: var(--color-danger);
+}
+.excalidraw .ttd-dialog-panel__menu-wrapper {
+  position: relative;
+}
+.excalidraw .ttd-dialog-panel__menu-wrapper .ttd-dialog-menu-trigger {
+  height: 40px;
+  width: 40px;
+}
+.excalidraw .ttd-dialog-panel__menu-wrapper .dropdown-menu {
+  margin-top: 0.375rem;
+  right: 0;
+}
 .excalidraw .ttd-dialog-panel textarea {
   height: 100%;
   resize: none;
@@ -4674,31 +5259,36 @@
 @media screen and (max-width: 861px) {
   .excalidraw .ttd-dialog-panel textarea {
     width: auto;
-    height: 10rem;
   }
 }
 .excalidraw .ttd-dialog-panel-button-container {
+  display: flex;
+  align-items: center;
+  flex-grow: 0;
+  height: 40px;
+  flex-shrink: 0;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
 }
-.excalidraw .ttd-dialog-panel-button-container.invisible .ttd-dialog-panel-button {
-  display: none;
-}
-@media screen and (min-width: 861px) {
-  .excalidraw .ttd-dialog-panel-button-container.invisible .ttd-dialog-panel-button {
-    display: block;
-    visibility: hidden;
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-panel-button-container {
+    margin-top: 0.5rem;
   }
 }
-.excalidraw .ttd-dialog-panel-button {
-  position: relative;
+.excalidraw .ttd-dialog-panel-button-container.invisible {
+  visibility: hidden;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-panel-button-container.invisible {
+    display: none;
+  }
 }
 .excalidraw .ttd-dialog-panel-button.excalidraw-button {
   font-family: inherit;
   font-weight: 600;
   height: 2.5rem;
   font-size: 12px;
-  color: #ffffff;
+  color: #fff;
   background-color: var(--color-primary);
   width: 100%;
 }
@@ -4724,6 +5314,9 @@
 .excalidraw.theme--dark.excalidraw .ttd-dialog-panel-button.excalidraw-button {
   color: var(--color-gray-100);
 }
+.excalidraw .ttd-dialog-panel-button {
+  position: relative;
+}
 .excalidraw .ttd-dialog-panel-button div {
   display: contents;
 }
@@ -4755,6 +5348,93 @@
   padding: 2px 3px;
   border-radius: 4px;
 }
+.excalidraw .ttd-dialog-panel-action-link {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  font-weight: 500;
+  font-family: inherit;
+  height: 40px;
+}
+.excalidraw .ttd-dialog-panel-action-link__icon {
+  display: inline-flex;
+  align-items: center;
+}
+.excalidraw .ttd-dialog-panel-action-link__icon svg {
+  width: 12px;
+  height: 12px;
+}
+@media screen and (max-width: 861px) {
+  .excalidraw .ttd-dialog-panel-action-link {
+    height: unset;
+  }
+}
+.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item {
+  display: flex;
+  width: unset;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-md);
+  margin-top: 1px;
+}
+.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item:hover {
+  background-color: var(--button-hover-bg);
+}
+.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item:active {
+  border: 1px solid var(--button-active-border);
+}
+.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item--active {
+  background-color: var(--color-surface-primary-container);
+}
+.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item .ttd-chat-menu-item__title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item:hover .ttd-chat-menu-item__delete {
+  visibility: visible;
+}
+.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item .ttd-chat-menu-item__delete {
+  border: none;
+  padding: 0.25rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  visibility: hidden;
+}
+.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item .ttd-chat-menu-item__delete:hover {
+  color: var(--color-danger);
+}
+.excalidraw.theme--dark.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item .ttd-chat-menu-item__delete svg {
+  color: var(--color-on-surface);
+}
+.excalidraw.theme--dark.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item .ttd-chat-menu-item__delete:hover svg {
+  color: var(--color-danger);
+}
+.excalidraw .dropdown-menu-item-custom.ttd-chat-menu-item .ttd-chat-menu-item__delete svg {
+  width: 16px;
+  height: 16px;
+}
+.excalidraw .ttd-dialog-preview-panel--hidden {
+  display: none;
+}
+.excalidraw .ttd-chat-history-menu {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
 
 /* components/Stats/DragInput.scss */
 .excalidraw .drag-input-container {
@@ -5074,9 +5754,21 @@
 .excalidraw .HintViewer > span {
   padding: 0.25rem;
 }
+.excalidraw .HintViewer kbd {
+  display: inline-block;
+  margin: 0 1px;
+  font-family: monospace;
+  border: 1px solid var(--color-gray-40);
+  border-radius: 4px;
+  padding: 1px 3px;
+  font-size: 10px;
+}
 .excalidraw.theme--dark .HintViewer {
   color: var(--color-gray-60);
 }
+.excalidraw.theme--dark .HintViewer kbd {
+  border-color: var(--color-gray-60);
+}
 
 /* components/Switch.scss */
 .excalidraw {
@@ -5326,7 +6018,7 @@
   padding: 1.4rem;
   border-radius: 50%;
   background: var(--card-color);
-  color: #ffffff;
+  color: #fff;
 }
 .excalidraw .Card .Card-icon svg {
   width: 2.8rem;
@@ -5351,7 +6043,7 @@
   background-color: var(--card-color-darkest);
 }
 .excalidraw .Card .Card-button.ToolIcon_type_button .ToolIcon__label {
-  color: #ffffff;
+  color: #fff;
 }
 .excalidraw .Card .Card-button.ToolIcon_type_button .Spinner {
   --spinner-color: #fff;
@@ -5445,7 +6137,7 @@
   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.28), 0 6px 10px 0 rgba(0, 0, 0, 0.14);
   font-family: Cascadia;
   font-size: 1.8em;
-  color: #ffffff;
+  color: #fff;
 }
 .excalidraw button.ExportDialog-imageExportButton:hover {
   background-color: var(--button-color-darker);
@@ -5551,6 +6243,43 @@
   margin-top: auto;
   margin-bottom: auto;
 }
+.excalidraw .disable-view-mode {
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  align-items: center;
+  border: 1px solid var(--color-primary);
+  padding: 0.5rem;
+  border-radius: var(--border-radius-lg);
+  background-color: var(--island-bg-color);
+  text-decoration: none !important;
+  font-family: var(--ui-font);
+  font-size: 0.8333rem;
+  box-sizing: border-box;
+  width: var(--mobile-action-button-size, var(--default-button-size));
+  height: var(--mobile-action-button-size, var(--default-button-size));
+  border: none;
+  box-shadow: 0 0 0 1px var(--color-surface-lowest);
+  background-color: var(--color-surface-low);
+  color: var(--button-color, var(--color-on-surface)) !important;
+}
+.excalidraw .disable-view-mode:active {
+  box-shadow: 0 0 0 1px var(--color-brand-active);
+}
+.excalidraw .disable-view-mode:hover {
+  background-color: var(--color-primary);
+  color: white !important;
+}
+.excalidraw .disable-view-mode:active {
+  background-color: var(--color-primary-darker);
+}
+.excalidraw .disable-view-mode svg {
+  width: 20px;
+  height: 20px;
+}
+.excalidraw .theme--dark .plus-banner:hover {
+  color: black !important;
+}
 
 /* components/Toolbar.scss */
 .excalidraw .App-toolbar.zen-mode .ToolIcon__keybinding,
@@ -6062,19 +6791,22 @@
   --focus-highlight-color: #a5d8ff;
   --icon-fill-color: var(--color-on-surface);
   --icon-green-fill-color: #2b8a3e;
-  --default-bg-color: #ffffff;
-  --input-bg-color: #ffffff;
+  --default-bg-color: #fff;
+  --input-bg-color: #fff;
   --input-border-color: #ced4da;
   --input-hover-bg-color: #f1f3f5;
   --input-label-color: #495057;
   --island-bg-color: #ffffff;
+  --island-bg-color-alt: #fff;
   --keybinding-color: var(--color-gray-40);
   --link-color: #1c7ed6;
+  --link-color-hover: #1971c2;
+  --link-color-active: #a5d8ff;
   --overlay-bg-color: rgba(255, 255, 255, 0.88);
   --popup-bg-color: var(--island-bg-color);
   --popup-secondary-bg-color: #f1f3f5;
-  --popup-text-color: #000000;
-  --popup-text-inverted-color: #ffffff;
+  --popup-text-color: #000;
+  --popup-text-inverted-color: #fff;
   --select-highlight-color: #339af0;
   --shadow-island:
     0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
@@ -6117,10 +6849,11 @@
     0px 4px 4px rgba(0, 0, 0, 0.09),
     0px 1px 2px rgba(0, 0, 0, 0.1),
     0px 0px 0px rgba(0, 0, 0, 0.1);
+  --chat-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   --space-factor: 0.25rem;
   --text-primary-color: var(--color-on-surface);
   --color-selection: #6965db;
-  --color-icon-white: #ffffff;
+  --color-icon-white: #fff;
   --color-primary: #6965db;
   --color-primary-darker: #5b57d1;
   --color-primary-darkest: #4a47b1;
@@ -6223,6 +6956,7 @@
   --input-hover-bg-color: #181818;
   --input-label-color: #e9ecef;
   --island-bg-color: #232329;
+  --island-bg-color-alt: hsl(240, 12%, 12%);
   --keybinding-color: var(--color-gray-60);
   --link-color: #4dabf7;
   --overlay-bg-color: rgba(52, 58, 64, 0.12);
@@ -6297,10 +7031,11 @@
   --zIndex-eyeDropperBackdrop: 5;
   --zIndex-eyeDropperPreview: 6;
   --zIndex-hyperlinkContainer: 7;
-  --zIndex-ui-styles-popup: 40;
   --zIndex-ui-bottom: 60;
-  --zIndex-ui-library: 80;
+  --zIndex-ui-context-menu: 90;
+  --zIndex-ui-styles-popup: 100;
   --zIndex-ui-top: 100;
+  --zIndex-ui-library: 120;
   --zIndex-modal: 1000;
   --zIndex-popup: 1001;
   --zIndex-toast: 999999;
@@ -6338,6 +7073,9 @@ body.excalidraw-cursor-resize * {
   width: 100%;
   user-select: none;
 }
+.excalidraw button {
+  font-size: 0.8333rem;
+}
 .excalidraw button,
 .excalidraw label {
   -webkit-tap-highlight-color: transparent;
@@ -6375,6 +7113,7 @@ body.excalidraw-cursor-resize * {
 }
 .excalidraw canvas.interactive {
   z-index: var(--zIndex-interactiveCanvas);
+  filter: var(--theme-filter);
 }
 .excalidraw__canvas-wrapper,
 .excalidraw__canvas.static {
@@ -6394,9 +7133,6 @@ body.excalidraw-cursor-resize * {
   transform-origin: top left;
   pointer-events: none;
 }
-.excalidraw.theme--dark canvas {
-  filter: var(--theme-filter);
-}
 .excalidraw .FixedSideContainer {
   padding-top: var(--sat, 0);
   padding-right: var(--sar, 0);
@@ -6494,7 +7230,6 @@ body.excalidraw-cursor-resize * {
   background-color: var(--button-bg, var(--island-bg-color));
   color: var(--button-color, var(--color-on-surface));
   font-family: var(--ui-font);
-  padding: 0;
 }
 .excalidraw .buttonList label svg,
 .excalidraw .buttonList button svg,
@@ -6537,6 +7272,11 @@ body.excalidraw-cursor-resize * {
   width: var(--mobile-action-button-size, var(--default-button-size));
   height: var(--mobile-action-button-size, var(--default-button-size));
 }
+.excalidraw .buttonList label,
+.excalidraw .buttonList button,
+.excalidraw .buttonList .zIndexButton {
+  padding: 0;
+}
 .excalidraw .buttonList label svg,
 .excalidraw .buttonList button svg,
 .excalidraw .buttonList .zIndexButton svg {
@@ -6584,7 +7324,8 @@ body.excalidraw-cursor-resize * {
 .excalidraw .App-toolbar .eraser.active {
   background-color: var(--color-primary);
 }
-.excalidraw .excalidraw-ui-top-left {
+.excalidraw .excalidraw-ui-top-left,
+.excalidraw .excalidraw-ui-top-right {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -6973,6 +7714,10 @@ body.excalidraw-cursor-resize * {
 .excalidraw .Modal__content .excalidraw__paragraph + .excalidraw__paragraph {
   margin-top: 0rem;
 }
+.excalidraw .link-button {
+  display: flex;
+  text-decoration: none !important;
+}
 .ErrorSplash.excalidraw {
   min-height: 100vh;
   padding: 20px 0;