@myoc/excalidraw 0.19.548 → 0.20.0

package/dist/dev/data/{image-52GR34EH.js → image-MIDG6L22.js}

@@ -2,12 +2,12 @@ import {
   decodePngMetadata,
   encodePngMetadata,
   getTEXtChunk
-} from "../chunk-JAAO2HX3.js";
-import "../chunk-TX6RZP3Q.js";
+} from "../chunk-SYLLRP5N.js";
+import "../chunk-JAMVC3FK.js";
 import "../chunk-XDFCUUT6.js";
 export {
   decodePngMetadata,
   encodePngMetadata,
   getTEXtChunk
 };
-//# sourceMappingURL=image-52GR34EH.js.map
+//# sourceMappingURL=image-MIDG6L22.js.map

package/dist/dev/index.css

@@ -1092,7 +1092,7 @@ body.excalidraw-color-dnd-active * {
   background: var(--island-bg-color);
   box-shadow: var(--shadow-island);
   padding: 0.5rem;
-  z-index: var(--zIndex-layerUI);
+  z-index: var(--zIndex-ui-top);
 }
 .excalidraw:focus {
   outline: none;
@@ -1633,7 +1633,6 @@ body.excalidraw-color-dnd-active * {
   background-color: var(--island-bg-color);
   border-radius: var(--border-radius-lg);
   box-shadow: 0 0 0 1px var(--color-surface-lowest);
-  margin-inline-start: 0.6em;
 }
 .zoom-button,
 .undo-redo-buttons button {
@@ -1779,7 +1778,8 @@ body.excalidraw-color-dnd-active * {
   z-index: 999;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 6px;
   width: 100%;
   background: transparent;
   border-radius: var(--border-radius-lg);
@@ -1788,6 +1788,15 @@ body.excalidraw-color-dnd-active * {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
+.mobile-shape-actions__primary {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  gap: 6px;
+}
+.mobile-shape-actions__primary:empty {
+  display: none;
+}
 .shape-actions-theme-scope {
   --button-border: transparent;
   --button-bg: var(--color-surface-mid);
@@ -1839,7 +1848,7 @@ body.excalidraw-color-dnd-active * {
 /* components/dropdownMenu/DropdownMenu.scss */
 .excalidraw .dropdown-menu {
   max-width: 20rem;
-  z-index: 1;
+  z-index: var(--zIndex-ui-top);
 }
 .excalidraw .dropdown-menu--placement-top {
   margin-bottom: 0.5rem;
@@ -2114,31 +2123,32 @@ body.excalidraw-color-dnd-active * {
 /* components/MobileToolbar.scss */
 .excalidraw .mobile-toolbar {
   display: flex;
-  flex: 1;
+  flex: 0 1 auto;
+  width: fit-content;
+  max-width: 100%;
   align-items: center;
   padding: 0px;
-  gap: 4px;
+  gap: 6px;
   border-radius: var(--space-factor);
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  justify-content: space-between;
-}
-.excalidraw .mobile-toolbar::-webkit-scrollbar {
-  display: none;
+  flex-wrap: wrap;
+  overflow: visible;
+  justify-content: flex-start;
 }
 .excalidraw .mobile-toolbar .ToolIcon {
+  width: 2rem;
+  height: 2rem;
   min-width: 2rem;
   min-height: 2rem;
-  border-radius: 4px;
+  border-radius: var(--border-radius-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 .excalidraw .mobile-toolbar .ToolIcon .ToolIcon__icon {
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--border-radius-lg);
 }
 .excalidraw .mobile-toolbar .ToolIcon .ToolIcon__icon:hover {
   background-color: transparent;
@@ -2161,7 +2171,6 @@ body.excalidraw-color-dnd-active * {
   width: 1px;
   height: 24px;
   background: var(--default-border-color);
-  margin: 0 2px;
   flex-shrink: 0;
 }
 .excalidraw .mobile-toolbar-undo {
@@ -2175,22 +2184,251 @@ body.excalidraw-color-dnd-active * {
   height: 32px;
 }
 
-/* components/FixedSideContainer.scss */
-.excalidraw .FixedSideContainer {
+/* components/UIRegionLayout.scss */
+.excalidraw .ui-layout {
+  --ui-layout-region-gutter-x: 8px;
+  --ui-layout-region-gutter-y: 8px;
   position: absolute;
+  box-sizing: border-box;
+  inset: max(var(--editor-container-padding, 0px), env(safe-area-inset-top)) max(var(--editor-container-padding, 0px), env(safe-area-inset-right)) max(var(--editor-container-padding, 0px), env(safe-area-inset-bottom)) max(var(--editor-container-padding, 0px), env(safe-area-inset-left));
+  display: grid;
+  grid-template-rows: max-content minmax(min-content, 1fr) max-content;
+  gap: 0.5rem;
+  pointer-events: none;
+  z-index: var(--zIndex-layerUI);
+}
+.excalidraw .ui-layout__row {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+.excalidraw .ui-layout__row--top,
+.excalidraw .ui-layout__row--bottom {
+  column-gap: 0.5rem;
+}
+.excalidraw .ui-layout__row--top:has(.ui-layout__region--topCenter > .ui-layout__item:not(:empty)),
+.excalidraw .ui-layout__row--bottom:has(.ui-layout__region--bottomCenter > .ui-layout__item:not(:empty)) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+.excalidraw .ui-layout__row--top:not(:has(.ui-layout__region--topCenter > .ui-layout__item:not(:empty))),
+.excalidraw .ui-layout__row--bottom:not(:has(.ui-layout__region--bottomCenter > .ui-layout__item:not(:empty))) {
+  justify-content: space-between;
+}
+.excalidraw .ui-layout__row--middle {
+  justify-content: space-between;
+}
+.excalidraw .ui-layout__region {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex: 0 1 auto;
+  gap: 0.5rem;
+  margin: calc(-1 * var(--ui-layout-region-gutter-y)) calc(-1 * var(--ui-layout-region-gutter-x));
+  padding: var(--ui-layout-region-gutter-y) var(--ui-layout-region-gutter-x);
+  min-width: 0;
+  min-height: 0;
   pointer-events: none;
+  overflow: visible;
+}
+.excalidraw .ui-layout__region--topLeft,
+.excalidraw .ui-layout__region--topCenter,
+.excalidraw .ui-layout__region--topRight {
+  align-items: flex-start;
+}
+.excalidraw .ui-layout__region--bottomLeft,
+.excalidraw .ui-layout__region--bottomCenter,
+.excalidraw .ui-layout__region--bottomRight {
+  align-items: flex-end;
+}
+.excalidraw .ui-layout__region--topLeft,
+.excalidraw .ui-layout__region--bottomLeft {
+  justify-content: flex-start;
+}
+.excalidraw .ui-layout__region--topRight,
+.excalidraw .ui-layout__region--bottomRight {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+.excalidraw .ui-layout__row--top:has(.ui-layout__region--topCenter > .ui-layout__item:not(:empty)) .ui-layout__region--topLeft,
+.excalidraw .ui-layout__row--bottom:has(.ui-layout__region--bottomCenter > .ui-layout__item:not(:empty)) .ui-layout__region--bottomLeft {
+  grid-column: 1;
+  margin-left: calc(-1 * var(--ui-layout-region-gutter-x));
+}
+.excalidraw .ui-layout__row--top:has(.ui-layout__region--topCenter > .ui-layout__item:not(:empty)) .ui-layout__region--topCenter,
+.excalidraw .ui-layout__row--bottom:has(.ui-layout__region--bottomCenter > .ui-layout__item:not(:empty)) .ui-layout__region--bottomCenter {
+  grid-column: 2;
+  justify-content: center;
+  justify-self: center;
+  max-width: 100%;
+}
+.excalidraw .ui-layout__region--topCenter:has(> .ui-layout__item[data-ui-layout-item=toolbar][data-ui-orientation=horizontal]) {
+  overflow: visible;
+}
+.excalidraw .ui-layout__region--topCenter > .ui-layout__item[data-ui-layout-item=toolbar][data-ui-orientation=horizontal] {
+  max-height: none;
+  overflow: visible;
 }
-.excalidraw .FixedSideContainer > * {
+.excalidraw .ui-layout__row--top:has(.ui-layout__region--topCenter > .ui-layout__item:not(:empty)) .ui-layout__region--topRight,
+.excalidraw .ui-layout__row--bottom:has(.ui-layout__region--bottomCenter > .ui-layout__item:not(:empty)) .ui-layout__region--bottomRight {
+  grid-column: 3;
+  margin-left: calc(-1 * var(--ui-layout-region-gutter-x));
+  justify-self: end;
+}
+.excalidraw .ui-layout__region--middleLeft {
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-right: auto;
+}
+.excalidraw .ui-layout__item[data-ui-layout-item=stylesPanel] .App-menu__left {
+  position: relative;
+}
+.excalidraw .ui-layout__region--middleRight {
+  align-items: flex-end;
+  justify-content: center;
+  margin-left: auto;
+}
+.excalidraw .ui-layout__region--middleLeft,
+.excalidraw .ui-layout__region--middleRight {
+  flex-direction: column;
+  max-height: none;
+}
+.excalidraw .ui-layout__item {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: flex-start;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
   pointer-events: var(--ui-pointerEvents);
 }
-.excalidraw .FixedSideContainer_side_top {
-  left: var(--editor-container-padding);
-  top: var(--editor-container-padding);
-  right: var(--editor-container-padding);
-  bottom: var(--editor-container-padding);
+.excalidraw .ui-layout__island-group.desktop-canvas-controls .reset-zoom-button {
+  width: 3rem !important;
+  padding-inline: 0.25rem !important;
+}
+.excalidraw .ui-layout__island-group.desktop-canvas-controls .view-mode-button button,
+.excalidraw .ui-layout__island-group.desktop-canvas-controls .smart-zoom-button button,
+.excalidraw .ui-layout__island-group.desktop-canvas-controls .zoom-button,
+.excalidraw .ui-layout__island-group.desktop-canvas-controls .undo-redo-buttons button,
+.excalidraw .ui-layout__island-group.desktop-canvas-controls .undo-button-container button,
+.excalidraw .ui-layout__island-group.desktop-canvas-controls .redo-button-container button {
+  background-color: transparent !important;
+}
+.excalidraw .ui-layout__island-group.desktop-canvas-controls .zoom-actions,
+.excalidraw .ui-layout__island-group.desktop-canvas-controls .undo-redo-buttons {
+  background-color: transparent;
+  box-shadow: none;
+}
+.excalidraw .ui-layout__item[data-ui-orientation=vertical] {
+  flex-direction: column;
+}
+.excalidraw .ui-layout__item[data-ui-orientation=vertical] > .layer-ui__wrapper__top-right {
+  flex-direction: column;
 }
-.excalidraw .FixedSideContainer_side_top.zen-mode {
-  right: 42px;
+.excalidraw .ui-layout__item[data-ui-orientation=vertical] .App-toolbar {
+  flex-direction: column;
+  max-height: none;
+  overflow: visible;
+}
+.excalidraw .ui-layout__item[data-ui-orientation=vertical] .App-toolbar .Stack_horizontal {
+  flex-direction: column;
+}
+.excalidraw .ui-layout__item[data-ui-orientation=vertical] .App-toolbar__divider {
+  width: 1.5rem;
+  height: 1px;
+}
+.excalidraw .ui-layout--mobile {
+  --ui-layout-region-gutter-x: 3px;
+  --ui-layout-region-gutter-y: 4px;
+  z-index: var(--zIndex-ui-bottom);
+  gap: 0;
+  inset: 0 max(14px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 0.5rem) max(14px, env(safe-area-inset-left));
+  align-items: stretch;
+}
+.excalidraw .ui-layout--mobile .ui-layout__row--top,
+.excalidraw .ui-layout--mobile .ui-layout__row--bottom {
+  column-gap: 6px;
+}
+.excalidraw .ui-layout--mobile .ui-layout__row--middle {
+  column-gap: 6px;
+}
+.excalidraw .ui-layout--mobile .ui-layout__region--bottomLeft {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  max-width: 100%;
+}
+.excalidraw .ui-layout--mobile [data-ui-layout-item=stylesPanel] {
+  max-width: 100%;
+}
+.excalidraw .ui-layout--mobile [data-ui-layout-item=toolbar] {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+.excalidraw .ui-layout--mobile [data-ui-layout-item=toolbar] > .App-toolbar {
+  max-width: 100%;
+}
+.excalidraw .ui-layout--mobile .mobile-canvas-actions {
+  margin: 0;
+}
+.excalidraw .ui-layout--mobile .mobile-canvas-actions,
+.excalidraw .ui-layout--mobile .mobile-canvas-actions .ToolIcon,
+.excalidraw .ui-layout--mobile .mobile-canvas-actions .ToolIcon__icon {
+  border-radius: 5px;
+}
+.excalidraw .ui-layout--mobile .ui-layout__region--topLeft,
+.excalidraw .ui-layout--mobile .ui-layout__region--topRight {
+  align-self: start;
+  margin-top: 0;
+  padding-top: calc(env(safe-area-inset-top) + var(--editor-container-padding));
+}
+.excalidraw .ui-layout--mobile .ui-layout__region--topRight {
+  align-items: flex-end;
+}
+.excalidraw .ui-layout--mobile .ui-layout__region--bottomLeft {
+  justify-self: start;
+}
+.excalidraw .ui-layout--mobile .ui-layout__region:not(.ui-layout__region--bottomLeft) {
+  pointer-events: none;
+}
+.excalidraw .ui-layout--mobile .ui-layout__item[data-ui-layout-item=toolbar] .App-toolbar {
+  width: 100%;
+  overflow: visible;
+}
+.excalidraw .ui-layout--mobile .ui-layout__item[data-ui-layout-item=toolbar] .mobile-toolbar {
+  overflow: visible;
+}
+.excalidraw .ui-layout--mobile .ui-layout__item[data-ui-layout-item=toolbar][data-ui-orientation=vertical] .mobile-toolbar {
+  flex-direction: column;
+  flex: 0 0 auto;
+  align-items: stretch;
+  overflow: visible;
+}
+.excalidraw .ui-layout--mobile .ui-layout__legacy-bottom-left .floating-status-stack {
+  position: static;
+  left: auto;
+  right: auto;
+  bottom: auto;
+}
+.excalidraw .ui-layout--mobile .ui-layout__legacy-bottom-left {
+  flex: 0 0 100%;
+  pointer-events: var(--ui-pointerEvents);
+}
+.excalidraw .ui-layout--mobile .ui-layout__region--topLeft,
+.excalidraw .ui-layout--mobile .ui-layout__region--topRight {
+  z-index: var(--zIndex-ui-top);
+}
+.excalidraw .ui-layout--mobile .ui-layout__region--bottomLeft,
+.excalidraw .ui-layout--mobile .ui-layout__region--bottomRight {
+  z-index: var(--zIndex-ui-bottom);
 }
 
 /* components/Modal.scss */
@@ -5183,7 +5421,6 @@ body.excalidraw-color-dnd-active * {
   display: flex;
   width: 100%;
   justify-content: flex-start;
-  margin-inline-end: 0.6rem;
 }
 .footer-center > * {
   pointer-events: var(--ui-pointerEvents);
@@ -6171,8 +6408,7 @@ body.excalidraw-cursor-resize * {
   flex-direction: row;
   gap: 6px;
   flex: 0 0 auto;
-  padding: 4px;
-  margin-bottom: 4px;
+  padding: 0;
   pointer-events: var(--ui-pointerEvents);
 }
 .excalidraw .mobile-canvas-actions .view-mode-button button,
@@ -6445,6 +6681,9 @@ body.excalidraw-cursor-resize * {
   background-color: var(--color-surface-low);
   width: var(--lg-button-size);
   height: var(--lg-button-size);
+  border-radius: var(--border-radius-lg);
+  background-color: var(--island-bg-color);
+  box-shadow: var(--shadow-island);
 }
 .excalidraw .help-icon svg {
   width: var(--button-width, var(--lg-icon-size));
@@ -6517,7 +6756,6 @@ body.excalidraw-cursor-resize * {
   font-size: 0.875rem;
   height: var(--lg-button-size);
   width: var(--lg-button-size);
-  margin-inline-start: 0.6em;
 }
 .excalidraw .smart-zoom-button button svg {
   width: var(--lg-icon-size);
@@ -6562,9 +6800,7 @@ body.excalidraw-cursor-resize * {
 .excalidraw .eraser-buttons {
   display: grid;
   grid-auto-flow: column;
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-inline-start: 0.6em;
+  margin-block: auto;
 }
 .excalidraw--mobile.excalidraw aside {
   display: none;