@myoc/excalidraw 0.19.523 → 0.19.524

package/dist/dev/index.css

@@ -3959,798 +3959,898 @@ body.excalidraw-color-dnd-active * {
   justify-content: center;
 }
 
-/* components/Card.scss */
-.excalidraw .Card {
+/* components/SearchMenu.scss */
+.excalidraw .layer-ui__search {
+  flex: 1 0 auto;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  max-width: 290px;
-  margin: 1em;
-  text-align: center;
+  padding: 8px 0 0 0;
 }
-.excalidraw .Card .Card-icon {
-  font-size: 2.6em;
+.excalidraw .layer-ui__search-header {
   display: flex;
-  flex: 0 0 auto;
-  padding: 1.4rem;
-  border-radius: 50%;
-  background: var(--card-color);
-  color: #fff;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 0.75rem;
 }
-.excalidraw .Card .Card-icon svg {
-  width: 2.8rem;
-  height: 2.8rem;
+.excalidraw .layer-ui__search-header .ExcTextField {
+  flex: 1 0 auto;
+  --ExcTextField--background: var(--sidebar-bg-color);
+  --ExcTextField--border: var(--sidebar-border-color);
+  --ExcTextField--placeholder: var(--text-primary-color);
 }
-.excalidraw .Card .Card-details {
-  font-size: 0.96em;
-  min-height: 90px;
-  padding: 0 1em;
-  margin-bottom: auto;
+.excalidraw.theme--dark .layer-ui__search-header .ExcTextField {
+  --ExcTextField--background: var(--sidebar-bg-color);
+  --ExcTextField--placeholder: var(--text-primary-color);
 }
-.excalidraw .Card .Card-button.ToolIcon_type_button {
-  height: 2.5rem;
-  margin-top: 1em;
-  margin-bottom: 0.3em;
-  background-color: var(--card-color);
+.excalidraw .layer-ui__search-header .ExcTextField__input {
+  border-radius: var(--border-radius-md);
+  border: 0;
 }
-.excalidraw .Card .Card-button.ToolIcon_type_button:hover {
-  background-color: var(--card-color-darker);
+.excalidraw .layer-ui__search-header .ExcTextField__input input::placeholder {
+  color: var(--ExcTextField--placeholder);
+  font-size: 0.9rem;
+  opacity: 1;
 }
-.excalidraw .Card .Card-button.ToolIcon_type_button:active {
-  background-color: var(--card-color-darkest);
+.excalidraw .default-sidebar--search-only .layer-ui__search {
+  position: relative;
+  z-index: 0;
+  flex: none;
+  min-height: 0;
+  padding: 0;
+  overflow: visible;
+  background: var(--sidebar-bg-color);
+  box-shadow: none;
 }
-.excalidraw .Card .Card-button.ToolIcon_type_button .ToolIcon__label {
-  color: #fff;
+.excalidraw .default-sidebar--search-only .layer-ui__search-header {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  padding: 0.75rem;
+  background: var(--sidebar-bg-color);
+  box-shadow: none;
 }
-.excalidraw .Card .Card-button.ToolIcon_type_button .Spinner {
-  --spinner-color: #fff;
+.excalidraw .default-sidebar--search-only .layer-ui__search-header .ExcTextField {
+  min-width: 0;
+  --ExcTextField--background: var(--sidebar-bg-color);
+  --ExcTextField--border: var(--sidebar-border-color);
+  --ExcTextField--placeholder: var(--text-primary-color);
 }
-
-/* components/ExportDialog.scss */
-.excalidraw .ExportDialog__preview {
-  --preview-padding: calc(var(--space-factor) * 4);
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
-  text-align: center;
-  padding: var(--preview-padding);
-  margin-bottom: calc(var(--space-factor) * 3);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.excalidraw .default-sidebar--search-only .layer-ui__search-header .ExcTextField__input {
+  border: 1px solid var(--sidebar-border-color);
+  background: var(--sidebar-bg-color);
 }
-.excalidraw .ExportDialog__preview canvas {
-  max-width: calc(100% - var(--preview-padding) * 2);
-  max-height: 25rem;
+.excalidraw .default-sidebar--search-only .layer-ui__search-count {
+  flex: 0 0 auto;
+  margin-top: 0;
 }
-.excalidraw.theme--dark .ExportDialog__preview canvas {
-  filter: none;
+.excalidraw .default-sidebar--search-only .layer-ui__search-results {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  min-height: 0;
+  overflow-y: auto;
+  max-height: 22rem;
+  padding-bottom: 0.75rem;
+  border-bottom-left-radius: var(--border-radius-lg);
+  border-bottom-right-radius: var(--border-radius-lg);
+  background: var(--sidebar-bg-color);
+  box-shadow: none;
 }
-.excalidraw .ExportDialog__actions {
-  width: 100%;
+.excalidraw .default-sidebar--search-only .layer-ui__search-result-container {
+  overflow: visible;
+}
+.excalidraw .default-sidebar--search-only .layer-ui__search-close {
+  flex: 0 0 auto;
+  width: var(--lg-button-size);
+  height: var(--lg-button-size);
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+.excalidraw .default-sidebar--search-only .layer-ui__search-close svg {
+  width: var(--lg-icon-size);
+  height: var(--lg-icon-size);
+}
+.excalidraw .layer-ui__search-count {
   display: flex;
-  grid-gap: calc(var(--space-factor) * 2);
-  align-items: top;
   justify-content: space-between;
+  align-items: center;
+  padding: 8px 8px 0 8px;
+  margin: 0 0.75rem 0.25rem 0.75rem;
+  font-size: 0.8em;
 }
-.excalidraw--mobile.excalidraw .ExportDialog {
+.excalidraw .layer-ui__search-count .result-nav {
   display: flex;
-  flex-direction: column;
-}
-.excalidraw--mobile.excalidraw .ExportDialog__actions {
-  flex-direction: column;
-  align-items: center;
 }
-.excalidraw--mobile.excalidraw .ExportDialog__actions > * {
-  margin-bottom: calc(var(--space-factor) * 3);
+.excalidraw .layer-ui__search-count .result-nav .result-nav-btn {
+  width: 36px;
+  height: 36px;
+  --button-border: transparent;
 }
-.excalidraw--mobile.excalidraw .ExportDialog__preview canvas {
-  max-height: 30vh;
+.excalidraw .layer-ui__search-count .result-nav .result-nav-btn:active {
+  background-color: var(--color-surface-high);
 }
-.excalidraw--mobile.excalidraw .ExportDialog__dialog,
-.excalidraw--mobile.excalidraw .ExportDialog__dialog .Island {
-  height: 100%;
-  box-sizing: border-box;
+.excalidraw .layer-ui__search-count .result-nav .result-nav-btn:first-child {
+  margin-right: 4px;
 }
-.excalidraw--mobile.excalidraw .ExportDialog__dialog .Island {
+.excalidraw .layer-ui__search-result-container {
   overflow-y: auto;
-}
-.excalidraw .ExportDialog--json .ExportDialog-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  justify-items: center;
-  row-gap: 2em;
-}
-@media (max-width: 460px) {
-  .excalidraw .ExportDialog--json .ExportDialog-cards {
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  }
-  .excalidraw .ExportDialog--json .ExportDialog-cards .Card-details {
-    min-height: 40px;
-  }
-}
-.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName {
-  width: fit-content;
-  margin: 1em auto;
-  align-items: flex-start;
+  flex: 1 1 0;
+  display: flex;
   flex-direction: column;
+  padding: 0 0.75rem;
+  gap: 0.125rem;
 }
-.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName .TextInput {
-  width: auto;
-}
-.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName-label {
-  margin: 0.625em 0;
-  font-weight: bold;
+.excalidraw .layer-ui__search .collapsible-items {
+  gap: 2px;
 }
-.excalidraw button.ExportDialog-imageExportButton {
-  border: 0;
-  width: 5rem;
-  height: 5rem;
-  margin: 0 0.2em;
-  padding: 0;
+.excalidraw .layer-ui__search-result-title {
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
   display: flex;
   align-items: center;
-  justify-content: center;
-  border-radius: 1rem;
-  background-color: var(--button-color);
-  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: #fff;
+  gap: 0.25rem;
+  font-weight: 700;
 }
-.excalidraw button.ExportDialog-imageExportButton:hover {
-  background-color: var(--button-color-darker);
+.excalidraw .layer-ui__search-result-title .title-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  margin-right: 0.25rem;
 }
-.excalidraw button.ExportDialog-imageExportButton:active {
-  background-color: var(--button-color-darkest);
-  box-shadow: none;
+.excalidraw .layer-ui__search-result-title .title-icon svg g {
+  stroke-width: 1.25;
 }
-.excalidraw button.ExportDialog-imageExportButton svg {
-  width: 0.9em;
+.excalidraw .layer-ui__divider {
+  width: 100%;
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+  position: relative;
 }
-
-/* components/HintViewer.scss */
-.excalidraw .HintViewer {
-  pointer-events: none;
-  box-sizing: border-box;
-  position: absolute;
+.excalidraw .layer-ui__result-item {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  left: 0;
-  top: 100%;
-  max-width: 100%;
-  width: 100%;
-  margin-top: 0.5rem;
-  text-align: center;
-  color: var(--color-gray-40);
-  font-size: 0.75rem;
+  align-items: center;
+  min-height: 1.875rem;
+  flex: 0 0 auto;
+  padding: 0.25rem 0.75rem;
+  cursor: pointer;
+  border: 1px solid transparent;
+  outline: none;
+  font-size: 16px;
+  border-radius: var(--border-radius-md);
 }
-.excalidraw--mobile.excalidraw .HintViewer {
-  position: static;
-  padding-right: 2rem;
+.excalidraw .layer-ui__result-item .text-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.75rem;
 }
-.excalidraw .HintViewer > span {
-  padding: 0.25rem;
+.excalidraw .layer-ui__result-item .preview-text {
+  flex: 1;
+  max-height: 48px;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
 }
-.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 .layer-ui__result-item:hover {
+  background-color: var(--color-surface-high);
 }
-.excalidraw.theme--dark .HintViewer {
-  color: var(--color-gray-60);
+.excalidraw .layer-ui__result-item:active {
+  border-color: var(--color-primary);
 }
-.excalidraw.theme--dark .HintViewer kbd {
-  border-color: var(--color-gray-60);
+.excalidraw .layer-ui__result-item.active {
+  background-color: var(--color-surface-high);
 }
 
-/* components/LayerUI.scss */
-.excalidraw .layer-ui__wrapper.animate {
-  transition: width 0.1s ease-in-out;
-}
-.excalidraw .layer-ui__wrapper {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: var(--zIndex-layerUI);
-}
-.excalidraw .layer-ui__wrapper__top-right {
+/* components/Sidebar/SidebarTrigger.scss */
+.excalidraw .sidebar-trigger {
   display: flex;
-  width: 100%;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  pointer-events: none !important;
-}
-.excalidraw .layer-ui__wrapper__top-right--compact {
+  justify-content: center;
+  align-items: center;
+  padding: 0.625rem;
+  width: var(--button-width, var(--default-button-size));
+  height: var(--button-height, var(--default-button-size));
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--button-border, var(--default-border-color));
+  border-radius: var(--border-radius-lg);
+  cursor: pointer;
+  background-color: var(--button-bg, var(--island-bg-color));
+  color: var(--button-color, var(--color-on-surface));
+  font-family: var(--ui-font);
+  border: none;
+  box-shadow: 0 0 0 1px var(--color-surface-lowest);
+  background-color: var(--color-surface-low);
+  width: auto;
+  height: var(--lg-button-size);
+  display: flex;
+  align-items: center;
   gap: 0.5rem;
+  line-height: 0;
+  font-size: 0.75rem;
+  letter-spacing: 0.4px;
 }
-.excalidraw .layer-ui__wrapper__top-right > * {
-  pointer-events: var(--ui-pointerEvents);
-}
-.excalidraw .layer-ui__wrapper__footer {
-  width: 100%;
+.excalidraw .sidebar-trigger svg {
+  width: var(--button-width, var(--lg-icon-size));
+  height: var(--button-height, var(--lg-icon-size));
 }
-.excalidraw .layer-ui__wrapper__footer-right {
-  z-index: 100;
-  display: flex;
+.excalidraw .sidebar-trigger:hover {
+  background-color: var(--button-hover-bg, var(--island-bg-color));
+  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
+  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
 }
-.excalidraw .layer-ui__wrapper .zen-mode-transition {
-  transition: transform 0.5s ease-in-out;
+.excalidraw .sidebar-trigger:active {
+  background-color: var(--button-active-bg, var(--island-bg-color));
+  border-color: var(--button-active-border, var(--color-primary-darkest));
 }
-:root[dir=ltr] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-left {
-  transform: translate(-999px, 0);
+.excalidraw .sidebar-trigger.active,
+.excalidraw .sidebar-trigger.ToolIcon--checked {
+  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
+  border-color: var(--button-selected-border, var(--color-surface-primary-container));
 }
-:root[dir=ltr] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-right {
-  transform: translate(999px, 0);
+.excalidraw .sidebar-trigger.active:hover,
+.excalidraw .sidebar-trigger.ToolIcon--checked:hover {
+  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
 }
-:root[dir=rtl] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-left {
-  transform: translate(999px, 0);
+.excalidraw .sidebar-trigger.active svg,
+.excalidraw .sidebar-trigger.ToolIcon--checked svg {
+  color: var(--button-color, var(--color-on-primary-container));
 }
-:root[dir=rtl] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-right {
-  transform: translate(-999px, 0);
+.excalidraw--mobile.excalidraw .sidebar-trigger {
+  width: var(--mobile-action-button-size, var(--default-button-size));
+  height: var(--mobile-action-button-size, var(--default-button-size));
 }
-.excalidraw .layer-ui__wrapper .zen-mode-transition.layer-ui__wrapper__footer-left--transition-bottom {
-  transform: translate(0, 92px);
+.excalidraw .sidebar-trigger:active {
+  box-shadow: 0 0 0 1px var(--color-brand-active);
 }
-.excalidraw .layer-ui__wrapper .disable-zen-mode {
-  padding: 10px;
-  position: absolute;
-  bottom: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition: visibility 0s linear 0s, opacity 0.5s;
-  font-family: var(--ui-font);
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: var(--border-radius-lg);
-  border: 1px solid var(--default-border-color);
-  background-color: var(--island-bg-color);
-  color: var(--text-primary-color);
+.excalidraw--mobile.excalidraw .sidebar-trigger {
+  width: var(--mobile-action-button-size, 2rem);
+  height: var(--mobile-action-button-size, 2rem);
 }
-[dir=ltr] .excalidraw .layer-ui__wrapper .disable-zen-mode {
-  right: 1rem;
+.excalidraw .sidebar-trigger svg {
+  width: var(--lg-icon-size);
+  height: var(--lg-icon-size);
 }
-[dir=rtl] .excalidraw .layer-ui__wrapper .disable-zen-mode {
-  left: 1rem;
+.excalidraw .sidebar-trigger__label-element {
+  align-self: flex-start;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
 }
-.excalidraw .layer-ui__wrapper .disable-zen-mode:hover {
-  background-color: var(--button-hover-bg);
+.excalidraw .default-sidebar-trigger .sidebar-trigger__label {
+  display: block;
+  white-space: nowrap;
 }
-.excalidraw .layer-ui__wrapper .disable-zen-mode:active {
-  border-color: var(--color-primary);
+.excalidraw.excalidraw--mobile .default-sidebar-trigger .sidebar-trigger__label {
+  display: none;
 }
-.excalidraw .layer-ui__wrapper .disable-zen-mode--visible {
-  opacity: 1;
-  visibility: visible;
-  transition: visibility 0s linear 300ms, opacity 0.5s;
-  transition-delay: 0.8s;
+
+/* components/Sidebar/Sidebar.scss */
+.excalidraw .sidebar {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: var(--zIndex-ui-sidebar);
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: var(--sidebar-bg-color);
+  box-shadow: var(--sidebar-shadow);
   pointer-events: var(--ui-pointerEvents);
+  overflow: hidden;
+  border-radius: 0;
+  width: calc(var(--right-sidebar-width) - var(--space-factor) * 2);
+  border-left: 1px solid var(--sidebar-border-color);
 }
-.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-left > *,
-.excalidraw .layer-ui__wrapper .footer-center > *,
-.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-right > * {
-  pointer-events: var(--ui-pointerEvents);
+:root[dir=rtl] .excalidraw .sidebar {
+  left: 0;
+  right: auto;
 }
-.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-right {
-  margin-top: auto;
-  margin-bottom: auto;
+.excalidraw .sidebar--docked {
+  box-shadow: none;
 }
-.excalidraw .App-menu_top__left > .ToolIcon__penMode {
-  justify-self: start;
-  margin-left: calc((48px - var(--lg-button-size)) / 2);
+:root[dir=rtl] .excalidraw .sidebar {
+  border-right: 1px solid var(--sidebar-border-color);
+  border-left: 0;
 }
-.excalidraw .App-menu_top__left > .ToolIcon__penMode .ToolIcon__icon {
-  width: var(--lg-button-size);
-  height: var(--lg-button-size);
-  background-color: var(--island-bg-color);
-  box-shadow: var(--shadow-island);
+.excalidraw .sidebar__header {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 1rem 0.75rem;
+  position: relative;
 }
-.excalidraw .App-menu_top__left > .ToolIcon__penMode.ToolIcon--checked .ToolIcon__icon {
-  box-shadow: none;
+.excalidraw .sidebar__header::after {
+  content: "";
+  width: calc(100% - 1.5rem);
+  height: 1px;
+  background: var(--sidebar-border-color);
+  position: absolute;
+  bottom: -1px;
 }
-.excalidraw .disable-view-mode {
+.excalidraw .sidebar__header__buttons {
+  gap: 0;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+.excalidraw .sidebar__header__buttons button {
   display: flex;
   justify-content: center;
-  cursor: pointer;
   align-items: center;
-  border: 1px solid var(--color-primary);
-  padding: 0.5rem;
+  padding: 0.625rem;
+  width: var(--button-width, var(--default-button-size));
+  height: var(--button-height, var(--default-button-size));
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--button-border, var(--default-border-color));
   border-radius: var(--border-radius-lg);
-  background-color: var(--island-bg-color);
-  text-decoration: none !important;
+  cursor: pointer;
+  background-color: var(--button-bg, var(--island-bg-color));
+  color: var(--button-color, var(--color-on-surface));
   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;
+  --button-bg: transparent;
+  border: 0 !important;
+  width: var(--lg-button-size);
+  height: var(--lg-button-size);
+  padding: 0;
 }
-.excalidraw .disable-view-mode:active {
-  box-shadow: 0 0 0 1px var(--color-brand-active);
+.excalidraw .sidebar__header__buttons button svg {
+  width: var(--button-width, var(--lg-icon-size));
+  height: var(--button-height, var(--lg-icon-size));
 }
-.excalidraw .disable-view-mode:hover {
-  background-color: var(--color-primary);
-  color: white !important;
+.excalidraw .sidebar__header__buttons button:hover {
+  background-color: var(--button-hover-bg, var(--island-bg-color));
+  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
+  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
 }
-.excalidraw .disable-view-mode:active {
-  background-color: var(--color-primary-darker);
+.excalidraw .sidebar__header__buttons button:active {
+  background-color: var(--button-active-bg, var(--island-bg-color));
+  border-color: var(--button-active-border, var(--color-primary-darkest));
 }
-.excalidraw .disable-view-mode svg {
-  width: 20px;
-  height: 20px;
-}
-.excalidraw .theme--dark .plus-banner:hover {
-  color: black !important;
+.excalidraw .sidebar__header__buttons button.active,
+.excalidraw .sidebar__header__buttons button.ToolIcon--checked {
+  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
+  border-color: var(--button-selected-border, var(--color-surface-primary-container));
 }
-
-/* components/Toolbar.scss */
-.excalidraw .App-toolbar.zen-mode .ToolIcon__keybinding,
-.excalidraw .App-toolbar.zen-mode .HintViewer {
-  display: none;
+.excalidraw .sidebar__header__buttons button.active:hover,
+.excalidraw .sidebar__header__buttons button.ToolIcon--checked:hover {
+  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
 }
-.excalidraw .App-toolbar--compact .ToolIcon__keybinding {
-  display: none;
+.excalidraw .sidebar__header__buttons button.active svg,
+.excalidraw .sidebar__header__buttons button.ToolIcon--checked svg {
+  color: var(--button-color, var(--color-on-primary-container));
 }
-.excalidraw .App-toolbar__divider {
-  width: 1px;
-  height: 1.5rem;
-  align-self: center;
-  background-color: var(--default-border-color);
+.excalidraw--mobile.excalidraw .sidebar__header__buttons button {
+  width: var(--mobile-action-button-size, var(--default-button-size));
+  height: var(--mobile-action-button-size, var(--default-button-size));
 }
-.excalidraw .App-toolbar__snap-mode-button.active {
-  background-color: transparent;
+.excalidraw .sidebar__header__buttons button svg {
+  width: var(--lg-icon-size);
+  height: var(--lg-icon-size);
 }
-.excalidraw .App-toolbar__snap-mode-button.active .ToolIcon__icon {
-  background: var(--color-surface-primary-container);
-  --keybinding-color: var(--color-on-primary-container);
+.excalidraw .sidebar__header__buttons button:hover {
+  background: var(--button-hover-bg, var(--island-bg-color));
 }
-.excalidraw .App-toolbar__snap-mode-button.active .ToolIcon__icon svg {
-  color: var(--color-on-primary-container);
+.excalidraw .sidebar__header__buttons .sidebar__dock.selected svg {
+  stroke: var(--color-primary);
+  fill: var(--color-primary);
 }
-.excalidraw .App-toolbar__extra-tools-trigger {
-  box-shadow: none;
-  border: 0;
-  background-color: transparent;
+.excalidraw .sidebar-tabs-root {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  padding: 1rem 0;
 }
-.excalidraw .App-toolbar__extra-tools-trigger:active {
-  background-color: var(--button-hover-bg);
-  box-shadow: 0 0 0 1px var(--button-active-border, var(--color-primary-darkest)) inset;
+.excalidraw .sidebar-tabs-root [role=tabpanel] {
+  flex: 1;
+  outline: none;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  outline: none;
 }
-.excalidraw .App-toolbar__extra-tools-trigger:hover {
-  background-color: transparent;
+.excalidraw .sidebar-tabs-root [role=tabpanel][data-state=inactive] {
+  display: none !important;
 }
-.excalidraw .App-toolbar__extra-tools-trigger--selected,
-.excalidraw .App-toolbar__extra-tools-trigger--selected:hover {
-  background: var(--color-surface-primary-container);
-  color: var(--color-on-primary-container);
+.excalidraw .sidebar-tabs-root [role=tablist] {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 }
-.excalidraw .App-toolbar__dropdown-divider {
-  height: 0.75px;
-  background-color: var(--color-gray-30);
+.excalidraw .sidebar-tabs-root > .sidebar__header {
+  padding-top: 0;
+  padding-bottom: 1rem;
 }
-
-/* components/SVGLayer.scss */
-.excalidraw .SVGLayer {
-  pointer-events: none;
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--zIndex-svgLayer);
+.excalidraw .sidebar-tab-trigger {
+  --button-width: auto;
+  --button-bg: transparent;
+  --button-hover-bg: transparent;
+  --button-active-bg: var(--color-primary);
+  --button-hover-color: var(--color-primary);
+  --button-hover-border: var(--color-primary);
 }
-.excalidraw .SVGLayer svg {
-  image-rendering: auto;
-  overflow: visible;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
+.excalidraw .sidebar-tab-trigger[data-state=active] {
+  --button-bg: var(--color-primary);
+  --button-hover-bg: var(--color-primary-darker);
+  --button-hover-color: var(--color-icon-white);
+  --button-border: var(--color-primary);
+  color: var(--color-icon-white);
 }
-
-/* components/SearchMenu.scss */
-.excalidraw .layer-ui__search {
-  flex: 1 0 auto;
+.excalidraw .default-sidebar {
   display: flex;
   flex-direction: column;
-  padding: 8px 0 0 0;
 }
-.excalidraw .layer-ui__search-header {
+.excalidraw .default-sidebar .sidebar-triggers {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 0.75rem;
+  gap: 0;
+  padding: 2px;
+  margin-top: -3px;
+  margin-bottom: -3px;
+  border: 1px solid var(--sidebar-border-color);
+  background: var(--default-bg-color);
+  border-radius: 0.625rem;
 }
-.excalidraw .layer-ui__search-header .ExcTextField {
-  flex: 1 0 auto;
-  --ExcTextField--background: #f5f5f9;
-  --ExcTextField--border: transparent;
-  --ExcTextField--placeholder: var(--color-gray-50);
+.excalidraw .default-sidebar .sidebar-triggers .sidebar-tab-trigger {
+  height: var(--lg-button-size);
+  width: var(--lg-button-size);
+  border: none;
 }
-.excalidraw.theme--dark .layer-ui__search-header .ExcTextField {
-  --ExcTextField--background: #31303b;
-  --ExcTextField--placeholder: var(--color-gray-40);
+.excalidraw .default-sidebar .sidebar-triggers .sidebar-tab-trigger[data-state=active] {
+  --button-bg: var(--color-primary-light);
+  --button-hover-bg: var(--color-primary-light-darker);
+  --button-hover-color: var(--color-primary);
+  --button-border: var(--color-primary-light);
+  color: var(--color-primary);
 }
-.excalidraw .layer-ui__search-header .ExcTextField__input {
-  border-radius: var(--border-radius-md);
-  border: 0;
+.excalidraw .default-sidebar.default-sidebar--search-only {
+  top: var(--editor-container-padding);
+  right: var(--editor-container-padding);
+  bottom: auto;
+  width: min(var(--right-sidebar-width) - var(--space-factor) * 2, 100% - var(--editor-container-padding) * 2);
+  max-height: calc(100% - var(--editor-container-padding) * 2);
+  min-height: 0;
+  border: 1px solid var(--sidebar-border-color);
+  border-radius: var(--border-radius-lg);
+  background: var(--sidebar-bg-color);
+  box-shadow: none;
+  isolation: isolate;
+  overflow: visible;
 }
-.excalidraw .layer-ui__search-header .ExcTextField__input input::placeholder {
-  color: var(--ExcTextField--placeholder);
-  font-size: 0.9rem;
-  opacity: 1;
+.excalidraw .default-sidebar.default-sidebar--search-only::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  box-shadow: var(--sidebar-shadow);
+  pointer-events: none;
 }
-.excalidraw .layer-ui__search-count {
+:root[dir=rtl] .excalidraw .default-sidebar.default-sidebar--search-only {
+  right: auto;
+  left: var(--editor-container-padding);
+  border: 1px solid var(--sidebar-border-color);
+}
+.excalidraw .default-sidebar.default-sidebar--search-only .sidebar-tabs-root {
+  display: block;
+  padding: 0;
+  overflow: visible;
+  border-radius: inherit;
+  background: var(--sidebar-bg-color);
+}
+.excalidraw .default-sidebar.default-sidebar--search-only [role=tabpanel] {
+  display: block;
+  overflow: visible;
+}
+
+/* components/Card.scss */
+.excalidraw .Card {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
-  padding: 8px 8px 0 8px;
-  margin: 0 0.75rem 0.25rem 0.75rem;
-  font-size: 0.8em;
+  max-width: 290px;
+  margin: 1em;
+  text-align: center;
 }
-.excalidraw .layer-ui__search-count .result-nav {
+.excalidraw .Card .Card-icon {
+  font-size: 2.6em;
   display: flex;
+  flex: 0 0 auto;
+  padding: 1.4rem;
+  border-radius: 50%;
+  background: var(--card-color);
+  color: #fff;
 }
-.excalidraw .layer-ui__search-count .result-nav .result-nav-btn {
-  width: 36px;
-  height: 36px;
-  --button-border: transparent;
+.excalidraw .Card .Card-icon svg {
+  width: 2.8rem;
+  height: 2.8rem;
 }
-.excalidraw .layer-ui__search-count .result-nav .result-nav-btn:active {
-  background-color: var(--color-surface-high);
+.excalidraw .Card .Card-details {
+  font-size: 0.96em;
+  min-height: 90px;
+  padding: 0 1em;
+  margin-bottom: auto;
 }
-.excalidraw .layer-ui__search-count .result-nav .result-nav-btn:first-child {
-  margin-right: 4px;
+.excalidraw .Card .Card-button.ToolIcon_type_button {
+  height: 2.5rem;
+  margin-top: 1em;
+  margin-bottom: 0.3em;
+  background-color: var(--card-color);
 }
-.excalidraw .layer-ui__search-result-container {
-  overflow-y: auto;
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  padding: 0 0.75rem;
-  gap: 0.125rem;
+.excalidraw .Card .Card-button.ToolIcon_type_button:hover {
+  background-color: var(--card-color-darker);
 }
-.excalidraw .layer-ui__search .collapsible-items {
-  gap: 2px;
+.excalidraw .Card .Card-button.ToolIcon_type_button:active {
+  background-color: var(--card-color-darkest);
 }
-.excalidraw .layer-ui__search-result-title {
-  font-size: 0.875rem;
-  margin-bottom: 0.25rem;
+.excalidraw .Card .Card-button.ToolIcon_type_button .ToolIcon__label {
+  color: #fff;
+}
+.excalidraw .Card .Card-button.ToolIcon_type_button .Spinner {
+  --spinner-color: #fff;
+}
+
+/* components/ExportDialog.scss */
+.excalidraw .ExportDialog__preview {
+  --preview-padding: calc(var(--space-factor) * 4);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
+  text-align: center;
+  padding: var(--preview-padding);
+  margin-bottom: calc(var(--space-factor) * 3);
   display: flex;
+  justify-content: center;
   align-items: center;
-  gap: 0.25rem;
-  font-weight: 700;
-}
-.excalidraw .layer-ui__search-result-title .title-icon {
-  width: 0.875rem;
-  height: 0.875rem;
-  margin-right: 0.25rem;
 }
-.excalidraw .layer-ui__search-result-title .title-icon svg g {
-  stroke-width: 1.25;
+.excalidraw .ExportDialog__preview canvas {
+  max-width: calc(100% - var(--preview-padding) * 2);
+  max-height: 25rem;
 }
-.excalidraw .layer-ui__divider {
+.excalidraw.theme--dark .ExportDialog__preview canvas {
+  filter: none;
+}
+.excalidraw .ExportDialog__actions {
   width: 100%;
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-  position: relative;
+  display: flex;
+  grid-gap: calc(var(--space-factor) * 2);
+  align-items: top;
+  justify-content: space-between;
 }
-.excalidraw .layer-ui__result-item {
+.excalidraw--mobile.excalidraw .ExportDialog {
   display: flex;
+  flex-direction: column;
+}
+.excalidraw--mobile.excalidraw .ExportDialog__actions {
+  flex-direction: column;
   align-items: center;
-  min-height: 1.875rem;
-  flex: 0 0 auto;
-  padding: 0.25rem 0.75rem;
-  cursor: pointer;
-  border: 1px solid transparent;
-  outline: none;
-  font-size: 16px;
-  border-radius: var(--border-radius-md);
 }
-.excalidraw .layer-ui__result-item .text-icon {
-  width: 1rem;
-  height: 1rem;
-  margin-right: 0.75rem;
+.excalidraw--mobile.excalidraw .ExportDialog__actions > * {
+  margin-bottom: calc(var(--space-factor) * 3);
 }
-.excalidraw .layer-ui__result-item .preview-text {
-  flex: 1;
-  max-height: 48px;
-  line-height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
+.excalidraw--mobile.excalidraw .ExportDialog__preview canvas {
+  max-height: 30vh;
 }
-.excalidraw .layer-ui__result-item:hover {
-  background-color: var(--color-surface-high);
+.excalidraw--mobile.excalidraw .ExportDialog__dialog,
+.excalidraw--mobile.excalidraw .ExportDialog__dialog .Island {
+  height: 100%;
+  box-sizing: border-box;
 }
-.excalidraw .layer-ui__result-item:active {
-  border-color: var(--color-primary);
+.excalidraw--mobile.excalidraw .ExportDialog__dialog .Island {
+  overflow-y: auto;
 }
-.excalidraw .layer-ui__result-item.active {
-  background-color: var(--color-surface-high);
+.excalidraw .ExportDialog--json .ExportDialog-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  justify-items: center;
+  row-gap: 2em;
 }
-
-/* components/Sidebar/SidebarTrigger.scss */
-.excalidraw .sidebar-trigger {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.625rem;
-  width: var(--button-width, var(--default-button-size));
-  height: var(--button-height, var(--default-button-size));
-  box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--button-border, var(--default-border-color));
-  border-radius: var(--border-radius-lg);
-  cursor: pointer;
-  background-color: var(--button-bg, var(--island-bg-color));
-  color: var(--button-color, var(--color-on-surface));
-  font-family: var(--ui-font);
-  border: none;
-  box-shadow: 0 0 0 1px var(--color-surface-lowest);
-  background-color: var(--color-surface-low);
+@media (max-width: 460px) {
+  .excalidraw .ExportDialog--json .ExportDialog-cards {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+  .excalidraw .ExportDialog--json .ExportDialog-cards .Card-details {
+    min-height: 40px;
+  }
+}
+.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName {
+  width: fit-content;
+  margin: 1em auto;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName .TextInput {
   width: auto;
-  height: var(--lg-button-size);
+}
+.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName-label {
+  margin: 0.625em 0;
+  font-weight: bold;
+}
+.excalidraw button.ExportDialog-imageExportButton {
+  border: 0;
+  width: 5rem;
+  height: 5rem;
+  margin: 0 0.2em;
+  padding: 0;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  line-height: 0;
-  font-size: 0.75rem;
-  letter-spacing: 0.4px;
+  justify-content: center;
+  border-radius: 1rem;
+  background-color: var(--button-color);
+  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: #fff;
 }
-.excalidraw .sidebar-trigger svg {
-  width: var(--button-width, var(--lg-icon-size));
-  height: var(--button-height, var(--lg-icon-size));
+.excalidraw button.ExportDialog-imageExportButton:hover {
+  background-color: var(--button-color-darker);
 }
-.excalidraw .sidebar-trigger:hover {
-  background-color: var(--button-hover-bg, var(--island-bg-color));
-  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
-  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
+.excalidraw button.ExportDialog-imageExportButton:active {
+  background-color: var(--button-color-darkest);
+  box-shadow: none;
 }
-.excalidraw .sidebar-trigger:active {
-  background-color: var(--button-active-bg, var(--island-bg-color));
-  border-color: var(--button-active-border, var(--color-primary-darkest));
+.excalidraw button.ExportDialog-imageExportButton svg {
+  width: 0.9em;
 }
-.excalidraw .sidebar-trigger.active,
-.excalidraw .sidebar-trigger.ToolIcon--checked {
-  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
-  border-color: var(--button-selected-border, var(--color-surface-primary-container));
+
+/* components/HintViewer.scss */
+.excalidraw .HintViewer {
+  pointer-events: none;
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: 0;
+  top: 100%;
+  max-width: 100%;
+  width: 100%;
+  margin-top: 0.5rem;
+  text-align: center;
+  color: var(--color-gray-40);
+  font-size: 0.75rem;
 }
-.excalidraw .sidebar-trigger.active:hover,
-.excalidraw .sidebar-trigger.ToolIcon--checked:hover {
-  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
+.excalidraw--mobile.excalidraw .HintViewer {
+  position: static;
+  padding-right: 2rem;
 }
-.excalidraw .sidebar-trigger.active svg,
-.excalidraw .sidebar-trigger.ToolIcon--checked svg {
-  color: var(--button-color, var(--color-on-primary-container));
+.excalidraw .HintViewer > span {
+  padding: 0.25rem;
 }
-.excalidraw--mobile.excalidraw .sidebar-trigger {
-  width: var(--mobile-action-button-size, var(--default-button-size));
-  height: var(--mobile-action-button-size, var(--default-button-size));
+.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 .sidebar-trigger:active {
-  box-shadow: 0 0 0 1px var(--color-brand-active);
+.excalidraw.theme--dark .HintViewer {
+  color: var(--color-gray-60);
 }
-.excalidraw--mobile.excalidraw .sidebar-trigger {
-  width: var(--mobile-action-button-size, 2rem);
-  height: var(--mobile-action-button-size, 2rem);
+.excalidraw.theme--dark .HintViewer kbd {
+  border-color: var(--color-gray-60);
 }
-.excalidraw .sidebar-trigger svg {
-  width: var(--lg-icon-size);
-  height: var(--lg-icon-size);
+
+/* components/LayerUI.scss */
+.excalidraw .layer-ui__wrapper.animate {
+  transition: width 0.1s ease-in-out;
 }
-.excalidraw .sidebar-trigger__label-element {
-  align-self: flex-start;
-  appearance: none;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  font: inherit;
-  color: inherit;
-  text-align: inherit;
+.excalidraw .layer-ui__wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: var(--zIndex-layerUI);
 }
-.excalidraw .default-sidebar-trigger .sidebar-trigger__label {
-  display: block;
-  white-space: nowrap;
+.excalidraw .layer-ui__wrapper__top-right {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  pointer-events: none !important;
 }
-.excalidraw.excalidraw--mobile .default-sidebar-trigger .sidebar-trigger__label {
-  display: none;
+.excalidraw .layer-ui__wrapper__top-right--compact {
+  gap: 0.5rem;
 }
-
-/* components/Sidebar/Sidebar.scss */
-.excalidraw .sidebar {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  z-index: var(--zIndex-ui-sidebar);
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  background-color: var(--sidebar-bg-color);
-  box-shadow: var(--sidebar-shadow);
+.excalidraw .layer-ui__wrapper__top-right > * {
   pointer-events: var(--ui-pointerEvents);
-  overflow: hidden;
-  border-radius: 0;
-  width: calc(var(--right-sidebar-width) - var(--space-factor) * 2);
-  border-left: 1px solid var(--sidebar-border-color);
 }
-:root[dir=rtl] .excalidraw .sidebar {
-  left: 0;
-  right: auto;
+.excalidraw .layer-ui__wrapper__footer {
+  width: 100%;
 }
-.excalidraw .sidebar--docked {
-  box-shadow: none;
+.excalidraw .layer-ui__wrapper__footer-right {
+  z-index: 100;
+  display: flex;
 }
-:root[dir=rtl] .excalidraw .sidebar {
-  border-right: 1px solid var(--sidebar-border-color);
-  border-left: 0;
+.excalidraw .layer-ui__wrapper .zen-mode-transition {
+  transition: transform 0.5s ease-in-out;
 }
-.excalidraw .sidebar__header {
-  box-sizing: border-box;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: 1rem 0.75rem;
-  position: relative;
+:root[dir=ltr] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-left {
+  transform: translate(-999px, 0);
 }
-.excalidraw .sidebar__header::after {
-  content: "";
-  width: calc(100% - 1.5rem);
-  height: 1px;
-  background: var(--sidebar-border-color);
-  position: absolute;
-  bottom: -1px;
+:root[dir=ltr] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-right {
+  transform: translate(999px, 0);
 }
-.excalidraw .sidebar__header__buttons {
-  gap: 0;
-  display: flex;
-  align-items: center;
-  margin-left: auto;
+:root[dir=rtl] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-left {
+  transform: translate(999px, 0);
 }
-.excalidraw .sidebar__header__buttons button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.625rem;
-  width: var(--button-width, var(--default-button-size));
-  height: var(--button-height, var(--default-button-size));
-  box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--button-border, var(--default-border-color));
-  border-radius: var(--border-radius-lg);
-  cursor: pointer;
-  background-color: var(--button-bg, var(--island-bg-color));
-  color: var(--button-color, var(--color-on-surface));
+:root[dir=rtl] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-right {
+  transform: translate(-999px, 0);
+}
+.excalidraw .layer-ui__wrapper .zen-mode-transition.layer-ui__wrapper__footer-left--transition-bottom {
+  transform: translate(0, 92px);
+}
+.excalidraw .layer-ui__wrapper .disable-zen-mode {
+  padding: 10px;
+  position: absolute;
+  bottom: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0s linear 0s, opacity 0.5s;
   font-family: var(--ui-font);
-  --button-bg: transparent;
-  border: 0 !important;
-  width: var(--lg-button-size);
-  height: var(--lg-button-size);
-  padding: 0;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--default-border-color);
+  background-color: var(--island-bg-color);
+  color: var(--text-primary-color);
 }
-.excalidraw .sidebar__header__buttons button svg {
-  width: var(--button-width, var(--lg-icon-size));
-  height: var(--button-height, var(--lg-icon-size));
+[dir=ltr] .excalidraw .layer-ui__wrapper .disable-zen-mode {
+  right: 1rem;
 }
-.excalidraw .sidebar__header__buttons button:hover {
-  background-color: var(--button-hover-bg, var(--island-bg-color));
-  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
-  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
+[dir=rtl] .excalidraw .layer-ui__wrapper .disable-zen-mode {
+  left: 1rem;
 }
-.excalidraw .sidebar__header__buttons button:active {
-  background-color: var(--button-active-bg, var(--island-bg-color));
-  border-color: var(--button-active-border, var(--color-primary-darkest));
+.excalidraw .layer-ui__wrapper .disable-zen-mode:hover {
+  background-color: var(--button-hover-bg);
 }
-.excalidraw .sidebar__header__buttons button.active,
-.excalidraw .sidebar__header__buttons button.ToolIcon--checked {
-  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
-  border-color: var(--button-selected-border, var(--color-surface-primary-container));
+.excalidraw .layer-ui__wrapper .disable-zen-mode:active {
+  border-color: var(--color-primary);
 }
-.excalidraw .sidebar__header__buttons button.active:hover,
-.excalidraw .sidebar__header__buttons button.ToolIcon--checked:hover {
-  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
+.excalidraw .layer-ui__wrapper .disable-zen-mode--visible {
+  opacity: 1;
+  visibility: visible;
+  transition: visibility 0s linear 300ms, opacity 0.5s;
+  transition-delay: 0.8s;
+  pointer-events: var(--ui-pointerEvents);
 }
-.excalidraw .sidebar__header__buttons button.active svg,
-.excalidraw .sidebar__header__buttons button.ToolIcon--checked svg {
-  color: var(--button-color, var(--color-on-primary-container));
+.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-left > *,
+.excalidraw .layer-ui__wrapper .footer-center > *,
+.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-right > * {
+  pointer-events: var(--ui-pointerEvents);
 }
-.excalidraw--mobile.excalidraw .sidebar__header__buttons button {
+.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-right {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.excalidraw .App-menu_top__left > .ToolIcon__penMode {
+  justify-self: start;
+  margin-left: calc((48px - var(--lg-button-size)) / 2);
+}
+.excalidraw .App-menu_top__left > .ToolIcon__penMode .ToolIcon__icon {
+  width: var(--lg-button-size);
+  height: var(--lg-button-size);
+  background-color: var(--island-bg-color);
+  box-shadow: var(--shadow-island);
+}
+.excalidraw .App-menu_top__left > .ToolIcon__penMode.ToolIcon--checked .ToolIcon__icon {
+  box-shadow: none;
+}
+.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 .sidebar__header__buttons button svg {
-  width: var(--lg-icon-size);
-  height: var(--lg-icon-size);
+.excalidraw .disable-view-mode:active {
+  box-shadow: 0 0 0 1px var(--color-brand-active);
 }
-.excalidraw .sidebar__header__buttons button:hover {
-  background: var(--button-hover-bg, var(--island-bg-color));
+.excalidraw .disable-view-mode:hover {
+  background-color: var(--color-primary);
+  color: white !important;
 }
-.excalidraw .sidebar__header__buttons .sidebar__dock.selected svg {
-  stroke: var(--color-primary);
-  fill: var(--color-primary);
+.excalidraw .disable-view-mode:active {
+  background-color: var(--color-primary-darker);
 }
-.excalidraw .sidebar-tabs-root {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  padding: 1rem 0;
+.excalidraw .disable-view-mode svg {
+  width: 20px;
+  height: 20px;
 }
-.excalidraw .sidebar-tabs-root [role=tabpanel] {
-  flex: 1;
-  outline: none;
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  outline: none;
+.excalidraw .theme--dark .plus-banner:hover {
+  color: black !important;
 }
-.excalidraw .sidebar-tabs-root [role=tabpanel][data-state=inactive] {
-  display: none !important;
+
+/* components/Toolbar.scss */
+.excalidraw .App-toolbar.zen-mode .ToolIcon__keybinding,
+.excalidraw .App-toolbar.zen-mode .HintViewer {
+  display: none;
 }
-.excalidraw .sidebar-tabs-root [role=tablist] {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+.excalidraw .App-toolbar--compact .ToolIcon__keybinding {
+  display: none;
 }
-.excalidraw .sidebar-tabs-root > .sidebar__header {
-  padding-top: 0;
-  padding-bottom: 1rem;
+.excalidraw .App-toolbar__divider {
+  width: 1px;
+  height: 1.5rem;
+  align-self: center;
+  background-color: var(--default-border-color);
 }
-.excalidraw .sidebar-tab-trigger {
-  --button-width: auto;
-  --button-bg: transparent;
-  --button-hover-bg: transparent;
-  --button-active-bg: var(--color-primary);
-  --button-hover-color: var(--color-primary);
-  --button-hover-border: var(--color-primary);
+.excalidraw .App-toolbar__snap-mode-button.active {
+  background-color: transparent;
 }
-.excalidraw .sidebar-tab-trigger[data-state=active] {
-  --button-bg: var(--color-primary);
-  --button-hover-bg: var(--color-primary-darker);
-  --button-hover-color: var(--color-icon-white);
-  --button-border: var(--color-primary);
-  color: var(--color-icon-white);
+.excalidraw .App-toolbar__snap-mode-button.active .ToolIcon__icon {
+  background: var(--color-surface-primary-container);
+  --keybinding-color: var(--color-on-primary-container);
 }
-.excalidraw .default-sidebar {
-  display: flex;
-  flex-direction: column;
+.excalidraw .App-toolbar__snap-mode-button.active .ToolIcon__icon svg {
+  color: var(--color-on-primary-container);
 }
-.excalidraw .default-sidebar .sidebar-triggers {
-  display: flex;
-  gap: 0;
-  padding: 2px;
-  margin-top: -3px;
-  margin-bottom: -3px;
-  border: 1px solid var(--sidebar-border-color);
-  background: var(--default-bg-color);
-  border-radius: 0.625rem;
+.excalidraw .App-toolbar__extra-tools-trigger {
+  box-shadow: none;
+  border: 0;
+  background-color: transparent;
 }
-.excalidraw .default-sidebar .sidebar-triggers .sidebar-tab-trigger {
-  height: var(--lg-button-size);
-  width: var(--lg-button-size);
-  border: none;
+.excalidraw .App-toolbar__extra-tools-trigger:active {
+  background-color: var(--button-hover-bg);
+  box-shadow: 0 0 0 1px var(--button-active-border, var(--color-primary-darkest)) inset;
 }
-.excalidraw .default-sidebar .sidebar-triggers .sidebar-tab-trigger[data-state=active] {
-  --button-bg: var(--color-primary-light);
-  --button-hover-bg: var(--color-primary-light-darker);
-  --button-hover-color: var(--color-primary);
-  --button-border: var(--color-primary-light);
-  color: var(--color-primary);
+.excalidraw .App-toolbar__extra-tools-trigger:hover {
+  background-color: transparent;
+}
+.excalidraw .App-toolbar__extra-tools-trigger--selected,
+.excalidraw .App-toolbar__extra-tools-trigger--selected:hover {
+  background: var(--color-surface-primary-container);
+  color: var(--color-on-primary-container);
+}
+.excalidraw .App-toolbar__dropdown-divider {
+  height: 0.75px;
+  background-color: var(--color-gray-30);
+}
+
+/* components/SVGLayer.scss */
+.excalidraw .SVGLayer {
+  pointer-events: none;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--zIndex-svgLayer);
+}
+.excalidraw .SVGLayer svg {
+  image-rendering: auto;
+  overflow: visible;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
 }
 
 /* components/CursorHint.scss */