polotno 3.0.0-beta.36 → 3.0.0-beta.38

package/blueprint.polotno.css

@@ -3668,7 +3668,7 @@ a > .bp6-dark .bp6-running-text code{
   display:flex;
 }
 .bp6-breadcrumbs > li::after{
-  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71s-.11-.53-.29-.71' fill='%235f6b7c'/%3e%3c/svg%3e");
+  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%235f6b7c' d='m10.71 7.29-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71s-.11-.53-.29-.71'/%3e%3c/svg%3e");
   content:"";
   display:block;
   height:16px;
@@ -3723,7 +3723,7 @@ a > .bp6-dark .bp6-running-text code{
   vertical-align:text-bottom;
 }
 .bp6-breadcrumbs-collapsed::before{
-  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2 6a2 2 0 110 4 2 2 0 010-4m6 0a2 2 0 110 4 2 2 0 010-4m6 0a2 2 0 110 4 2 2 0 010-4' fill='%235f6b7c'/%3e%3c/svg%3e") center no-repeat;
+  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%235f6b7c' d='M2 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4'/%3e%3c/svg%3e") center no-repeat;
   content:"";
   display:block;
   height:16px;
@@ -3740,7 +3740,7 @@ a > .bp6-dark .bp6-running-text code{
   color:#abb3bf;
 }
 .bp6-dark .bp6-breadcrumbs > li::after{
-  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71s-.11-.53-.29-.71' fill='%23abb3bf'/%3e%3c/svg%3e");
+  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23abb3bf' d='m10.71 7.29-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71s-.11-.53-.29-.71'/%3e%3c/svg%3e");
   color:#abb3bf;
 }
 .bp6-dark .bp6-breadcrumb.bp6-disabled{
@@ -3753,7 +3753,7 @@ a > .bp6-dark .bp6-running-text code{
   background:rgba(143, 153, 168, 0.2);
 }
 .bp6-dark .bp6-breadcrumbs-collapsed::before{
-  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2 6a2 2 0 110 4 2 2 0 010-4m6 0a2 2 0 110 4 2 2 0 010-4m6 0a2 2 0 110 4 2 2 0 010-4' fill='%23abb3bf'/%3e%3c/svg%3e") center no-repeat;
+  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23abb3bf' d='M2 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4'/%3e%3c/svg%3e") center no-repeat;
 }
 .bp6-dark .bp6-breadcrumbs-collapsed:hover{
   background:rgba(143, 153, 168, 0.3);
@@ -4081,8 +4081,8 @@ a > .bp6-dark .bp6-running-text code{
 .bp6-button .bp6-icon:not([class*=bp6-intent-]){
   color:var(--bp-typography-color-muted);
 }
-.bp6-button .bp6-icon:first-child:last-child,
-.bp6-button .bp6-spinner + .bp6-icon:last-child{
+.bp6-button > .bp6-icon:first-child:last-child,
+.bp6-button > .bp6-spinner + .bp6-icon:last-child{
   margin:0 calc(-1 * (var(--bp-surface-spacing) * 7.5 - var(--bp-surface-spacing) * 4) * 0.5);
 }
 .bp6-dark .bp6-button:not([class*=bp6-intent-]), [data-bp-color-scheme=dark] .bp6-button:not([class*=bp6-intent-]){
@@ -4863,20 +4863,25 @@ a.bp6-button.bp6-disabled{
   z-index:8;
 }
 .bp6-button-group:not(.bp6-minimal) > .bp6-popover-wrapper:not(:first-child) .bp6-button,
+.bp6-button-group:not(.bp6-minimal) > .bp6-popover-target:not(:first-child) > .bp6-button,
 .bp6-button-group:not(.bp6-minimal) > .bp6-button:not(:first-child),
 .bp6-button-group.bp6-outlined > .bp6-popover-wrapper:not(:first-child) .bp6-button,
+.bp6-button-group.bp6-outlined > .bp6-popover-target:not(:first-child) > .bp6-button,
 .bp6-button-group.bp6-outlined > .bp6-button:not(:first-child){
   border-bottom-left-radius:0;
   border-top-left-radius:0;
 }
 .bp6-button-group:not(.bp6-minimal) > .bp6-popover-wrapper:not(:last-child) .bp6-button,
+.bp6-button-group:not(.bp6-minimal) > .bp6-popover-target:not(:last-child) > .bp6-button,
 .bp6-button-group:not(.bp6-minimal) > .bp6-button:not(:last-child),
 .bp6-button-group.bp6-outlined > .bp6-popover-wrapper:not(:last-child) .bp6-button,
+.bp6-button-group.bp6-outlined > .bp6-popover-target:not(:last-child) > .bp6-button,
 .bp6-button-group.bp6-outlined > .bp6-button:not(:last-child){
   border-bottom-right-radius:0;
   border-top-right-radius:0;
 }
 .bp6-button-group:not(.bp6-minimal):not(.bp6-outlined) > .bp6-popover-wrapper:not(:last-child) .bp6-button,
+.bp6-button-group:not(.bp6-minimal):not(.bp6-outlined) > .bp6-popover-target:not(:last-child) > .bp6-button,
 .bp6-button-group:not(.bp6-minimal):not(.bp6-outlined) > .bp6-button:not(:last-child){
   margin-right:calc(-1 * var(--bp-surface-border-width));
 }
@@ -5159,80 +5164,87 @@ a.bp6-button.bp6-disabled{
     margin-right:calc(-1 * var(--bp-surface-border-width));
   }
 }
-.bp6-button-group.bp6-outlined > .bp6-button{
+.bp6-button-group.bp6-outlined > .bp6-button,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button{
   border:var(--bp-surface-border-width) solid var(--bp-surface-border-color-strong);
   box-sizing:border-box;
 }
-.bp6-button-group.bp6-outlined > .bp6-button:disabled, .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover{
+.bp6-button-group.bp6-outlined > .bp6-button:disabled, .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled:hover, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled:hover{
   border-color:var(--bp-surface-border-color-default);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button{
   border-color:var(--bp-surface-border-color-strong);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled:hover, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled:hover{
   border-color:var(--bp-surface-border-color-default);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary{
   border-color:color-mix(in oklch, var(--bp-intent-primary-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-primary-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-primary-rest) 51%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-primary-rest) 51%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success{
   border-color:color-mix(in oklch, var(--bp-intent-success-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-success-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-success-rest) 54%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-success-rest) 54%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning{
   border-color:color-mix(in oklch, var(--bp-intent-warning-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-warning-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-warning-rest) 53%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-warning-rest) 53%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger{
   border-color:color-mix(in oklch, var(--bp-intent-danger-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-danger-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-danger-rest) 53%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-danger-rest) 53%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default{
   border-color:color-mix(in oklch, var(--bp-intent-default-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-default-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default{
   border-color:color-mix(in oklch, color-mix(in srgb, var(--bp-intent-default-rest) 46%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in srgb, var(--bp-intent-default-rest) 46%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined:not(.bp6-vertical) > .bp6-button:not(:last-child){
+.bp6-button-group.bp6-outlined:not(.bp6-vertical) > .bp6-button:not(:last-child),
+.bp6-button-group.bp6-outlined:not(.bp6-vertical) > .bp6-popover-target:not(:last-child) > .bp6-button{
   border-right:none;
 }
 .bp6-button-group .bp6-popover-wrapper,
@@ -5261,22 +5273,28 @@ a.bp6-button.bp6-disabled{
   width:100%;
 }
 .bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-popover-wrapper:first-child .bp6-button,
+.bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-popover-target:first-child > .bp6-button,
 .bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-button:first-child,
 .bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-wrapper:first-child .bp6-button,
+.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-target:first-child > .bp6-button,
 .bp6-button-group.bp6-vertical.bp6-outlined > .bp6-button:first-child{
   border-radius:var(--bp-surface-border-radius) var(--bp-surface-border-radius) 0 0;
 }
 .bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-popover-wrapper:last-child .bp6-button,
+.bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-popover-target:last-child > .bp6-button,
 .bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-button:last-child,
 .bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-wrapper:last-child .bp6-button,
+.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-target:last-child > .bp6-button,
 .bp6-button-group.bp6-vertical.bp6-outlined > .bp6-button:last-child{
   border-radius:0 0 var(--bp-surface-border-radius) var(--bp-surface-border-radius);
 }
 .bp6-button-group.bp6-vertical:not(.bp6-minimal):not(.bp6-outlined) > .bp6-popover-wrapper:not(:last-child) .bp6-button,
+.bp6-button-group.bp6-vertical:not(.bp6-minimal):not(.bp6-outlined) > .bp6-popover-target:not(:last-child) > .bp6-button,
 .bp6-button-group.bp6-vertical:not(.bp6-minimal):not(.bp6-outlined) > .bp6-button:not(:last-child){
   margin-bottom:calc(-1 * var(--bp-surface-border-width));
 }
-.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-button:not(:last-child){
+.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-button:not(:last-child),
+.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-target:not(:last-child) > .bp6-button{
   border-bottom:none;
 }
 .bp6-button-group.bp6-align-left .bp6-button{
@@ -6793,12 +6811,10 @@ a.bp6-button.bp6-disabled{
   color:rgba(255, 255, 255, 0.6);
 }
 .bp6-control:not(.bp6-align-right){
-  -webkit-padding-start:24px;
-          padding-inline-start:24px;
+  padding-inline-start:24px;
 }
 .bp6-control:not(.bp6-align-right) .bp6-control-indicator{
-  -webkit-margin-start:-24px;
-          margin-inline-start:-24px;
+  margin-inline-start:-24px;
 }
 .bp6-control.bp6-align-right{
   padding-right:24px;
@@ -6807,8 +6823,7 @@ a.bp6-button.bp6-disabled{
   margin-right:-24px;
 }
 [dir=rtl] .bp6-control.bp6-align-left{
-  -webkit-padding-start:0;
-          padding-inline-start:0;
+  padding-inline-start:0;
   padding-left:24px;
 }
 [dir=rtl] .bp6-control.bp6-align-left .bp6-control-indicator{
@@ -6827,8 +6842,7 @@ a.bp6-button.bp6-disabled{
 }
 .bp6-control.bp6-inline{
   display:inline-block;
-  -webkit-margin-end:20px;
-          margin-inline-end:20px;
+  margin-inline-end:20px;
 }
 .bp6-control .bp6-control-input{
   left:0;
@@ -6846,8 +6860,7 @@ a.bp6-button.bp6-disabled{
   display:inline-block;
   font-size:16px;
   height:1em;
-  -webkit-margin-end:8px;
-          margin-inline-end:8px;
+  margin-inline-end:8px;
   margin-top:-3px;
   position:relative;
   -webkit-user-select:none;
@@ -6902,12 +6915,10 @@ a.bp6-button.bp6-disabled{
   margin-top:1px;
 }
 .bp6-control.bp6-large:not(.bp6-align-right){
-  -webkit-padding-start:28px;
-          padding-inline-start:28px;
+  padding-inline-start:28px;
 }
 .bp6-control.bp6-large:not(.bp6-align-right) .bp6-control-indicator{
-  -webkit-margin-start:-28px;
-          margin-inline-start:-28px;
+  margin-inline-start:-28px;
 }
 .bp6-control.bp6-large.bp6-align-right{
   padding-right:28px;
@@ -6916,8 +6927,7 @@ a.bp6-button.bp6-disabled{
   margin-right:-28px;
 }
 [dir=rtl] .bp6-control.bp6-large.bp6-align-left{
-  -webkit-padding-start:0;
-          padding-inline-start:0;
+  padding-inline-start:0;
   padding-left:28px;
 }
 [dir=rtl] .bp6-control.bp6-large.bp6-align-left .bp6-control-indicator{
@@ -6993,20 +7003,20 @@ a.bp6-button.bp6-disabled{
   border-radius:4px;
 }
 .bp6-control.bp6-checkbox input:checked ~ .bp6-control-indicator::before{
-  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5' fill='white'/%3e%3c/svg%3e");
+  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5'/%3e%3c/svg%3e");
 }
 .bp6-control.bp6-checkbox input:indeterminate ~ .bp6-control-indicator::before{
-  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1' fill='white'/%3e%3c/svg%3e");
+  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1'/%3e%3c/svg%3e");
 }
 .bp6-control.bp6-checkbox input:disabled ~ .bp6-control-indicator::before{
   opacity:0.5;
 }
 @media (forced-colors: active) and (prefers-color-scheme: dark){
   .bp6-control.bp6-checkbox input:checked:not(:disabled) ~ .bp6-control-indicator::before{
-    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5' fill='%23111418'/%3e%3c/svg%3e");
+    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23111418' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5'/%3e%3c/svg%3e");
   }
   .bp6-control.bp6-checkbox input:indeterminate:not(:disabled) ~ .bp6-control-indicator::before{
-    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1' fill='%23111418'/%3e%3c/svg%3e");
+    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23111418' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1'/%3e%3c/svg%3e");
   }
   .bp6-control.bp6-checkbox input:disabled ~ .bp6-control-indicator{
     border-color:graytext;
@@ -7082,12 +7092,10 @@ a.bp6-button.bp6-disabled{
   box-shadow:none;
 }
 .bp6-control.bp6-switch:not(.bp6-align-right){
-  -webkit-padding-start:36px;
-          padding-inline-start:36px;
+  padding-inline-start:36px;
 }
 .bp6-control.bp6-switch:not(.bp6-align-right) .bp6-control-indicator{
-  -webkit-margin-start:-36px;
-          margin-inline-start:-36px;
+  margin-inline-start:-36px;
 }
 .bp6-control.bp6-switch.bp6-align-right{
   padding-right:36px;
@@ -7096,8 +7104,7 @@ a.bp6-button.bp6-disabled{
   margin-right:-36px;
 }
 [dir=rtl] .bp6-control.bp6-switch.bp6-align-left{
-  -webkit-padding-start:0;
-          padding-inline-start:0;
+  padding-inline-start:0;
   padding-left:36px;
 }
 [dir=rtl] .bp6-control.bp6-switch.bp6-align-left .bp6-control-indicator{
@@ -7156,12 +7163,10 @@ a.bp6-button.bp6-disabled{
   left:calc(2px + 100% - 1em);
 }
 .bp6-control.bp6-switch.bp6-large:not(.bp6-align-right){
-  -webkit-padding-start:43px;
-          padding-inline-start:43px;
+  padding-inline-start:43px;
 }
 .bp6-control.bp6-switch.bp6-large:not(.bp6-align-right) .bp6-control-indicator{
-  -webkit-margin-start:-43px;
-          margin-inline-start:-43px;
+  margin-inline-start:-43px;
 }
 .bp6-control.bp6-switch.bp6-large.bp6-align-right{
   padding-right:43px;
@@ -7170,8 +7175,7 @@ a.bp6-button.bp6-disabled{
   margin-right:-43px;
 }
 [dir=rtl] .bp6-control.bp6-switch.bp6-large.bp6-align-left{
-  -webkit-padding-start:0;
-          padding-inline-start:0;
+  padding-inline-start:0;
   padding-left:43px;
 }
 [dir=rtl] .bp6-control.bp6-switch.bp6-large.bp6-align-left .bp6-control-indicator{
@@ -11985,24 +11989,19 @@ span.bp6-icon:empty.bp6-icon-large{
   text-underline-position:from-font;
 }
 .bp6-link.bp6-link-underline-always{
-  -webkit-text-decoration-line:underline;
-          text-decoration-line:underline;
+  text-decoration-line:underline;
 }
 .bp6-link.bp6-link-underline-hover{
-  -webkit-text-decoration-line:none;
-          text-decoration-line:none;
+  text-decoration-line:none;
 }
 .bp6-link.bp6-link-underline-hover:hover{
-  -webkit-text-decoration-line:underline;
-          text-decoration-line:underline;
+  text-decoration-line:underline;
 }
 .bp6-link.bp6-link-underline-none{
-  -webkit-text-decoration-line:none;
-          text-decoration-line:none;
+  text-decoration-line:none;
 }
 .bp6-link.bp6-link-underline-none:hover{
-  -webkit-text-decoration-line:none;
-          text-decoration-line:none;
+  text-decoration-line:none;
 }
 .bp6-link.bp6-link-color-inherit{
   color:inherit;

package/canvas/context-menu/context-menu.d.ts

@@ -1,6 +1,5 @@
 import { StoreType } from '../../model/store.js';
 import { ShapeType } from '../../model/shape-model.js';
-import React from 'react';
 type ContextMenuProps = {
     store: StoreType;
     element: ShapeType;
@@ -11,7 +10,7 @@ type ContextMenuProps = {
     isOpen: boolean;
     setIsOpen: (b: boolean) => void;
 };
-export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => React.JSX.Element | null) & {
+export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/context-menu/context-menu.js

@@ -1 +1 @@
-import{observer as e}from"mobx-react-lite";import{ContextMenuPopover as t,Menu as o,MenuDivider as l,MenuItem as n}from"@blueprintjs/core";import r from"react";import{t as a}from"../../utils/l10n.js";import{useDuplicateElement as i}from"../../toolbar/use-duplicate-element.js";import{ChevronDown as s,ChevronUp as c,DoubleChevronDown as m,DoubleChevronUp as d,Duplicate as u,Layers as v,Lock as E,Trash as b,Unlock as p}from"@blueprintjs/icons";import{useRemoveElement as C}from"../../toolbar/use-remove-element.js";import{useCopyStyle as x}from"../../toolbar/use-copy-style.js";import{useLock as k}from"../../toolbar/use-lock.js";export const ContextMenu=e(({store:e,isOpen:y,offset:f,setIsOpen:h})=>{var w,g,P,M,R;const{disabled:j,duplicate:D}=i({store:e}),{disabled:B,remove:O}=C({store:e}),{setElementToCopy:F}=x(e),{disabled:T,lock:I,locked:U}=k({store:e}),A=U?r.createElement(E,null):r.createElement(p,null),L=e.selectedElementsIds;return 0===e.selectedElements.length?null:r.createElement(t,{isOpen:y,onClose:()=>{h(!1)},content:r.createElement(o,null,r.createElement(n,{shouldDismissPopover:!1,icon:A,text:a(U?"contextMenu.unlock":"contextMenu.lock"),onClick:I,disabled:T}),r.createElement(n,{icon:r.createElement(u,null),text:a("contextMenu.duplicate"),onClick:D,disabled:j}),r.createElement(n,{icon:r.createElement(b,null),text:a("contextMenu.remove"),onClick:O,disabled:B}),r.createElement(l,null),r.createElement(n,{icon:r.createElement(v,null),text:a("toolbar.layering")},r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(d,null),text:a("toolbar.toForward"),disabled:!(null===(w=e.activePage)||void 0===w?void 0:w.canMoveElementsTop(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsTop(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(c,null),text:a("toolbar.up"),disabled:!(null===(g=e.activePage)||void 0===g?void 0:g.canMoveElementsUp(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsUp(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(s,null),text:a("toolbar.down"),disabled:!(null===(P=e.activePage)||void 0===P?void 0:P.canMoveElementsDown(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsDown(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(m,null),text:a("toolbar.toBottom"),disabled:!(null===(M=e.activePage)||void 0===M?void 0:M.canMoveElementsBottom(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsBottom(L)}})),"table"===(null===(R=e.selectedElements[0])||void 0===R?void 0:R.type)&&(()=>{const t=e.selectedElements[0],o=t.focusedCells[0],i=null==o?void 0:o.row,s=null==o?void 0:o.col,c=null!=o;return r.createElement(r.Fragment,null,c&&r.createElement(r.Fragment,null,r.createElement(l,null),r.createElement(n,{text:a("toolbar.insertRowAbove"),onClick:()=>{e.history.transaction(()=>{t.addRow(i)})}}),r.createElement(n,{text:a("toolbar.insertRowBelow"),onClick:()=>{e.history.transaction(()=>{t.addRow(i+1)})}}),r.createElement(n,{text:a("toolbar.deleteRow"),disabled:t.rows<=1,onClick:()=>{e.history.transaction(()=>{t.removeRow(i)})}}),r.createElement(l,null),r.createElement(n,{text:a("toolbar.insertColumnLeft"),onClick:()=>{e.history.transaction(()=>{t.addColumn(s)})}}),r.createElement(n,{text:a("toolbar.insertColumnRight"),onClick:()=>{e.history.transaction(()=>{t.addColumn(s+1)})}}),r.createElement(n,{text:a("toolbar.deleteColumn"),disabled:t.cols<=1,onClick:()=>{e.history.transaction(()=>{t.removeColumn(s)})}})),r.createElement(l,null),r.createElement(n,{text:a("toolbar.distributeRowsEvenly"),onClick:()=>{e.history.transaction(()=>{t.distributeRowsEvenly()})}}),r.createElement(n,{text:a("toolbar.distributeColumnsEvenly"),onClick:()=>{e.history.transaction(()=>{t.distributeColumnsEvenly()})}}))})()),targetOffset:{top:f.y,left:f.x}})});
+import{jsx as o,jsxs as e,Fragment as t}from"react/jsx-runtime";import{observer as l}from"mobx-react-lite";import{ContextMenuPopover as n,Menu as s,MenuDivider as i,MenuItem as r}from"@blueprintjs/core";import{t as a}from"../../utils/l10n.js";import{useDuplicateElement as d}from"../../toolbar/use-duplicate-element.js";import{ChevronDown as m,ChevronUp as c,DoubleChevronDown as u,DoubleChevronUp as b,Duplicate as v,Layers as p,Lock as C,Trash as x,Unlock as E}from"@blueprintjs/icons";import{useRemoveElement as h}from"../../toolbar/use-remove-element.js";import{useCopyStyle as w}from"../../toolbar/use-copy-style.js";import{useLock as f}from"../../toolbar/use-lock.js";export const ContextMenu=l(({store:l,isOpen:k,offset:R,setIsOpen:y})=>{var j;const{disabled:g,duplicate:M}=d({store:l}),{disabled:D,remove:P}=h({store:l}),{setElementToCopy:B}=w(l),{disabled:O,lock:F,locked:T}=f({store:l}),U=o(T?C:E,{});return 0===l.selectedElements.length?null:o(n,{isOpen:k,onClose:()=>{y(!1)},content:e(s,{children:[o(r,{shouldDismissPopover:!1,icon:U,text:a(T?"contextMenu.unlock":"contextMenu.lock"),onClick:F,disabled:O}),o(r,{icon:o(v,{}),text:a("contextMenu.duplicate"),onClick:M,disabled:g}),o(r,{icon:o(x,{}),text:a("contextMenu.remove"),onClick:P,disabled:D}),o(i,{}),e(r,{icon:o(p,{}),text:a("toolbar.layering"),children:[o(r,{shouldDismissPopover:!1,icon:o(b,{}),text:a("toolbar.toForward"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsTop([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveTop())}),o(r,{shouldDismissPopover:!1,icon:o(c,{}),text:a("toolbar.up"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsUp([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveUp())}),o(r,{shouldDismissPopover:!1,icon:o(m,{}),text:a("toolbar.down"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsDown([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveDown())}),o(r,{shouldDismissPopover:!1,icon:o(u,{}),text:a("toolbar.toBottom"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsBottom([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveBottom())})]}),"table"===(null===(j=l.selectedElements[0])||void 0===j?void 0:j.type)&&(()=>{var n;const s=l.selectedElements[0],d=s.focusedCells[0],m=null!=d,c=null!==(n=s.getFocusedCellRange())&&void 0!==n?n:d?{minRow:d.row,maxRow:d.row,minCol:d.col,maxCol:d.col}:{minRow:0,maxRow:0,minCol:0,maxCol:0},{minRow:u,maxRow:b,minCol:v,maxCol:p}=c,C=b>u,x=p>v;return e(t,{children:[m&&e(t,{children:[o(i,{}),o(r,{text:a("toolbar.insertRowAbove"),onClick:()=>{l.history.transaction(()=>{s.addRow(u)})}}),o(r,{text:a("toolbar.insertRowBelow"),onClick:()=>{l.history.transaction(()=>{s.addRow(b+1)})}}),o(r,{text:a(C?"toolbar.deleteRows":"toolbar.deleteRow"),disabled:s.rows<=b-u+1,onClick:()=>{l.history.transaction(()=>{s.removeRowRange(u,b)})}}),o(i,{}),o(r,{text:a("toolbar.insertColumnLeft"),onClick:()=>{l.history.transaction(()=>{s.addColumn(v)})}}),o(r,{text:a("toolbar.insertColumnRight"),onClick:()=>{l.history.transaction(()=>{s.addColumn(p+1)})}}),o(r,{text:a(x?"toolbar.deleteColumns":"toolbar.deleteColumn"),disabled:s.cols<=p-v+1,onClick:()=>{l.history.transaction(()=>{s.removeColumnRange(v,p)})}})]}),o(i,{}),o(r,{text:a("toolbar.distributeRowsEvenly"),onClick:()=>{l.history.transaction(()=>{s.distributeRowsEvenly()})}}),o(r,{text:a("toolbar.distributeColumnsEvenly"),onClick:()=>{l.history.transaction(()=>{s.distributeColumnsEvenly()})}})]})})()]}),targetOffset:{top:R.y,left:R.x}})});

package/canvas/drawing-layer.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { PageType } from '../model/page-model.js';
 type DrawingLayerProps = {
@@ -11,7 +10,7 @@ type DrawingLayerProps = {
     yPadding: number;
     bleed: number;
 };
-export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => React.JSX.Element | null) & {
+export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/drawing-layer.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{Group as r,Line as o,Rect as n}from"react-konva";import{pathToSVG as s}from"../utils/path-to-svg.js";export const DrawingLayer=t(({store:t,page:i,width:c,height:a,scale:l,xPadding:u,yPadding:h,bleed:d})=>{const[g,y]=e.useState(!1),[p,f]=e.useState([]),m=e.useRef(null),w="draw"===t.tool,{strokeWidth:v,stroke:x,opacity:k,brushType:$}=t.toolOptions,E=e.useCallback(e=>{if(!w){return}if(y(!0),e.cancelBubble=!0,!e.target.getStage()){return}const t=m.current.getRelativePointerPosition();t&&f([{x:t.x,y:t.y}])},[w,l,u,h,d]),b=e.useCallback(e=>{if(!w||!g){return}if(e.cancelBubble=!0,!e.target.getStage()){return}const t=m.current.getRelativePointerPosition();t&&f(e=>[...e,{x:t.x,y:t.y}])},[w,g,l,u,h,d]),S=e.useCallback(()=>{if(w&&g){if(y(!1),p.length>=1){try{const e=s(p,{stroke:x,strokeWidth:v,smooth:!0}),r=t.selectedElementsIds.slice();t.history.transaction(()=>{i.addElement({type:"svg",x:e.x,y:e.y,width:e.width,height:e.height,src:e.src,opacity:k},{skipSelect:!0})}),t.selectElements(r)}catch(e){console.error("Error creating path SVG:",e)}}f([])}},[w,g,p,x,v,k,i,t.history,t]);e.useEffect(()=>{if(!g){return}const e=()=>S();return window.addEventListener("mouseup",e),window.addEventListener("touchend",e),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("touchend",e)}},[g,S]);const M=e.useMemo(()=>p.flatMap(e=>[e.x,e.y]),[p]);return e.useEffect(()=>{if(w&&m.current){const e=m.current.getStage();if(!e){return}const t=v*l;if(t>100||t<4){e.container().style.cursor="crosshair"}else{const r=t/2,o=t/2,n=`data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 ${t} ${t}">\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="${x}" opacity="${k}" stroke="white" stroke-width="1"/>\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="none" stroke="black" stroke-width="1" opacity="0.3"/>\n        </svg>`)}`;e.container().style.cursor=`url("${n}") ${o} ${o}, crosshair`}return()=>{e.container()&&(e.container().style.cursor="")}}},[w,x,v,k,l]),w?e.createElement(r,{ref:m,listening:w,x:u+d*l,y:h+d*l,scaleX:l,scaleY:l},e.createElement(n,{x:-(u+d*l)/l,y:-(h+d*l)/l,width:c/l,height:a/l,fill:"transparent",onMouseDown:E,onMouseMove:b,onMouseUp:S,onTouchStart:E,onTouchMove:b,onTouchEnd:S}),p.length>0&&e.createElement(o,{points:M,stroke:x,strokeWidth:v,lineCap:"round",lineJoin:"round",opacity:k,tension:.5,listening:!1})):null});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"react";import{observer as o}from"mobx-react-lite";import{Group as n,Line as s,Rect as i}from"react-konva";import{pathToSVG as c}from"../utils/path-to-svg.js";export const DrawingLayer=o(({store:o,page:a,width:l,height:u,scale:h,xPadding:d,yPadding:g,bleed:p})=>{const[y,f]=r.useState(!1),[m,w]=r.useState([]),x=r.useRef(null),v="draw"===o.tool,{strokeWidth:k,stroke:$,opacity:b,brushType:E}=o.toolOptions,S=r.useCallback(e=>{if(!v){return}if(f(!0),e.cancelBubble=!0,!e.target.getStage()){return}const t=x.current.getRelativePointerPosition();t&&w([{x:t.x,y:t.y}])},[v,h,d,g,p]),M=r.useCallback(e=>{if(!v||!y){return}if(e.cancelBubble=!0,!e.target.getStage()){return}const t=x.current.getRelativePointerPosition();t&&w(e=>[...e,{x:t.x,y:t.y}])},[v,y,h,d,g,p]),P=r.useCallback(()=>{if(v&&y){if(f(!1),m.length>=1){try{const e=c(m,{stroke:$,strokeWidth:k,smooth:!0}),t=o.selectedElementsIds.slice();o.history.transaction(()=>{a.addElement({type:"svg",x:e.x,y:e.y,width:e.width,height:e.height,src:e.src,opacity:b},{skipSelect:!0})}),o.selectElements(t)}catch(e){console.error("Error creating path SVG:",e)}}w([])}},[v,y,m,$,k,b,a,o.history,o]);r.useEffect(()=>{if(!y){return}const e=()=>P();return window.addEventListener("mouseup",e),window.addEventListener("touchend",e),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("touchend",e)}},[y,P]);const L=r.useMemo(()=>m.flatMap(e=>[e.x,e.y]),[m]);return r.useEffect(()=>{if(v&&x.current){const e=x.current.getStage();if(!e){return}const t=k*h;if(t>100||t<4){e.container().style.cursor="crosshair"}else{const r=t/2,o=t/2,n=`data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 ${t} ${t}">\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="${$}" opacity="${b}" stroke="white" stroke-width="1"/>\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="none" stroke="black" stroke-width="1" opacity="0.3"/>\n        </svg>`)}`;e.container().style.cursor=`url("${n}") ${o} ${o}, crosshair`}return()=>{e.container()&&(e.container().style.cursor="")}}},[v,$,k,b,h]),v?t(n,{ref:x,listening:v,x:d+p*h,y:g+p*h,scaleX:h,scaleY:h,children:[e(i,{x:-(d+p*h)/h,y:-(g+p*h)/h,width:l/h,height:u/h,fill:"transparent",onMouseDown:S,onMouseMove:M,onMouseUp:P,onTouchStart:S,onTouchMove:M,onTouchEnd:P}),m.length>0&&e(s,{points:L,stroke:$,strokeWidth:k,lineCap:"round",lineJoin:"round",opacity:b,tension:.5,listening:!1})]}):null});

package/canvas/element.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { ShapeType } from '../model/shape-model.js';
 type ShapeProps = {
@@ -7,7 +6,7 @@ type ShapeProps = {
     onClick: Function;
 };
 export declare function registerShapeComponent(type: string, component: JSX.Element): void;
-declare const Element: ((props: ShapeProps) => React.JSX.Element | null) & {
+declare const Element: ((props: ShapeProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export default Element;

package/canvas/element.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import o from"konva";import{TextElement as n}from"./text-element.js";import{ImageElement as r}from"./image-element.js";import{HTMLElement as i}from"./html-element.js";import{LineElement as m}from"./line-element.js";import{VideoElement as l}from"./video-element.js";import{FigureElement as s}from"./figure-element.js";import{GifElement as a}from"./gif-element.js";import{TableElement as c}from"./table-element.js";import{Group as f}from"react-konva";import{Highlighter as p}from"./highlighter.js";import{forEveryChild as d}from"../model/group-model.js";import{flags as u}from"../utils/flags.js";const g={text:n,image:r,svg:r,line:m,video:l,figure:s,group:t(t=>{const{element:o,store:n}=t,{children:r}=o,i=o.selectable||"admin"===n.role;return e.createElement(f,{opacity:o.opacity,listening:i,hideInExport:!o.showInExport,id:o.id},r.map(o=>e.createElement(y,Object.assign({},t,{key:o.id,store:n,element:o}))))}),gif:a,table:c};export function registerShapeComponent(e,t){g[e]=t}const h=(e,t)=>{const n=[];d(e,e=>{"group"!==e.type&&n.push(e.a)});const r=[];n.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],n=new o.Transform;n.translate(e.x,e.y),n.rotate(o.Util.degToRad(e.rotation)),t.forEach(e=>{const t=n.point(e);r.push(t)})});const i=new o.Transform;i.rotate(-o.Util.degToRad(t));let m=1/0,l=1/0,s=-1/0,a=-1/0;r.forEach(e=>{const t=i.point(e);m=Math.min(m,t.x),l=Math.min(l,t.y),s=Math.max(s,t.x),a=Math.max(a,t.y)}),i.invert();const c=i.point({x:m,y:l});return{x:c.x,y:c.y,width:s-m,height:a-l,rotation:t}},y=t(t=>{var n,r;const{element:m,store:l}=t,[s,a]=e.useState(!1),c=m.isSelectedDirectly,d="group"===(null===(n=m.parent)||void 0===n?void 0:n.type),y=(t=>{const[n,r]=e.useState();return e.useEffect(()=>{const e=setTimeout(()=>{const e=t.page.id,n=o.stages.find(t=>t.getAttr("pageId")===e);n||console.error("No stage is found for element",t.id),r(n)});return()=>clearTimeout(e)},[t.id]),n})(m),v=e.useRef();e.useEffect(()=>{if(y){const e=e=>{const t=e.target.findAncestor(".element",!0),o=l.getElementById(null==t?void 0:t.id()),n=null==o?void 0:o.top,r=null==n?void 0:n.id;a(r===m.id)};y.on("mouseover",e);const t=()=>{a(!1)};return y.on("mouseleave",t),()=>{y.off("mouseover",e),y.off("mouseleave",t)}}},[y]);let x=g[t.element.type];return"text"===t.element.type&&u.htmlRenderEnabled&&(x=i),t.element.visible?x?e.createElement(f,{name:"element-container"},e.createElement(x,Object.assign({},t)),s&&!c&&!d&&e.createElement(p,{element:"group"===m.type?{a:h(m,(null===(v.current||(v.current=null==y?void 0:y.findOne("Transformer")),r=v.current)||void 0===r?void 0:r.rotation())||0)}:m})):(console.error("Can not find component for "+t.element.type),null):null});export default y;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{createElement as o}from"react";import r from"react";import{observer as n}from"mobx-react-lite";import{ROLES as i}from"../model/store.js";import s from"konva";import{TextElement as m}from"./text-element.js";import{ImageElement as a}from"./image-element.js";import{HTMLElement as l}from"./html-element.js";import{LineElement as f}from"./line-element.js";import{VideoElement as d}from"./video-element.js";import{FigureElement as c}from"./figure-element.js";import{GifElement as p}from"./gif-element.js";import{TableElement as u}from"./table-element.js";import{Group as g}from"react-konva";import{Highlighter as h}from"./highlighter.js";import{forEveryChild as x}from"../model/group-model.js";import{flags as y}from"../utils/flags.js";const v={text:m,image:a,svg:a,line:f,video:d,figure:c,group:n(t=>{const{element:r,store:n}=t,{children:s}=r,m=r.selectable||n.role===i.ADMIN;return e(g,{opacity:r.opacity,listening:m,hideInExport:!r.showInExport,id:r.id,children:s.map(e=>o(E,Object.assign({},t,{key:e.id,store:n,element:e})))})}),gif:p,table:u};export function registerShapeComponent(e,t){v[e]=t}const j=(e,t)=>{const o=[];x(e,e=>{"group"!==e.type&&o.push(e.a)});const r=[];o.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],o=new s.Transform;o.translate(e.x,e.y),o.rotate(s.Util.degToRad(e.rotation)),t.forEach(e=>{const t=o.point(e);r.push(t)})});const n=new s.Transform;n.rotate(-s.Util.degToRad(t));let i=1/0,m=1/0,a=-1/0,l=-1/0;r.forEach(e=>{const t=n.point(e);i=Math.min(i,t.x),m=Math.min(m,t.y),a=Math.max(a,t.x),l=Math.max(l,t.y)}),n.invert();const f=n.point({x:i,y:m});return{x:f.x,y:f.y,width:a-i,height:l-m,rotation:t}},E=n(o=>{var n,i;const{element:m,store:a}=o,[f,d]=r.useState(!1),c=m.isSelectedDirectly,p="group"===(null===(n=m.parent)||void 0===n?void 0:n.type),u="group"!==m.type||p?null:a.selectedElements,x=!!u&&1===u.length&&u[0]!==m&&u[0].top===m,[E,b]=r.useState(!1),T=(e=>{const[t,o]=r.useState();return r.useEffect(()=>{const t=setTimeout(()=>{const t=e.page.id,r=s.stages.find(e=>e.getAttr("pageId")===t);r||console.error("No stage is found for element",e.id),o(r)});return()=>clearTimeout(t)},[e.id]),t})(m),w=r.useRef(),I=()=>(w.current||(w.current=null==T?void 0:T.findOne("Transformer")),w.current);r.useEffect(()=>{if(T){const e=e=>{const t=e.target.findAncestor(".element",!0),o=a.getElementById(null==t?void 0:t.id()),r=null==o?void 0:o.top,n=null==r?void 0:r.id;d(n===m.id)};T.on("mouseover",e);const t=()=>{d(!1)};return T.on("mouseleave",t),()=>{T.off("mouseover",e),T.off("mouseleave",t)}}},[T]),r.useEffect(()=>{if(!x){return}const e=I();if(!T||!e){return}b(!1);const t=()=>b(!0),o=()=>b(!1);return T.on("dragstart",t),T.on("dragend",o),e.on("transformstart",t),e.on("transformend",o),()=>{T.off("dragstart",t),T.off("dragend",o),e.off("transformstart",t),e.off("transformend",o)}},[T,x]);let M=v[o.element.type];return"text"===o.element.type&&y.htmlRenderEnabled&&(M=l),o.element.visible?M?t(g,{name:"element-container",children:[e(M,Object.assign({},o)),(f||x)&&!c&&!p&&!E&&e(h,{element:"group"===m.type?{a:j(m,x?"rotation"in u[0]?u[0].rotation:0:(null===(i=I())||void 0===i?void 0:i.rotation())||0)}:m})]}):(console.error("Can not find component for "+o.element.type),null):null});export default E;

package/canvas/figure-element.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { FigureElementType } from '../model/figure-model.js';
 type FigureProps = {
     store: StoreType;
     element: FigureElementType;
 };
-export declare const FigureElement: (({ element, store }: FigureProps) => React.JSX.Element) & {
+export declare const FigureElement: (({ element, store }: FigureProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export {};

package/canvas/figure-element.js

@@ -1 +1 @@
-import t from"react";import{observer as e}from"mobx-react-lite";import{Group as a,Rect as r,Path as s}from"react-konva";import{subTypeToPathDataFunc as i}from"../utils/figure-to-svg.js";import{isTouchDevice as o}from"../utils/screen.js";import{useColor as h}from"./use-color.js";const n={};export const FigureElement=e(({element:l,store:c})=>{const d=t.useRef(null),g=l.selectable||"admin"===c.role,m=o(),p=l.isSelected,f=Math.min(l.strokeWidth,l.width/2,l.height/2),w=Math.max(0,Math.min(l.width/2,l.height/2,l.cornerRadius)),u=h(l,l.a.fill,"fill"),b=Object.assign(Object.assign({width:l.a.width,height:l.a.height},u),{cornerRadius:w,opacity:l.animated("opacity"),shadowEnabled:l.shadowEnabled,shadowBlur:l.shadowBlur,shadowOffsetX:l.shadowOffsetX,shadowOffsetY:l.shadowOffsetY,shadowColor:l.shadowColor,shadowOpacity:l.shadowOpacity,preventDefault:!m||p,hideInExport:!l.showInExport}),y=h(l,l.stroke,"stroke"),x=Object.assign(Object.assign({visible:f>0,x:f/2,y:f/2,width:l.a.width-f,height:l.a.height-f},y),{strokeWidth:f,cornerRadius:Math.max(0,w-f),dash:l.dash.map(t=>t*f),opacity:l.animated("opacity"),hideInExport:!l.showInExport,listening:!1}),k=Math.max(0,10-Math.min(l.a.width,l.a.height)),E=(v=l.subType,n[v]||(n[v]=(O=i(v),e(({element:e,fillProps:i,strokeProps:o,hitStrokeWidth:h})=>{let n=O({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),l=1,c=1;"string"!=typeof n&&(l=n.scaleX,c=n.scaleY,n=n.path);const d=t.useRef(null);return t.createElement(t.Fragment,null,t.createElement(r,{width:e.a.width,height:e.a.height,fill:"transparent",hitStrokeWidth:h}),t.createElement(s,Object.assign({},i,{ref:d,data:n,scaleX:l,scaleY:c})),t.createElement(a,{clipFunc:t=>{const e=d.current;if(e){var a=e.dataArray;t.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,i=a[r].points;switch(s){case"L":t.lineTo(i[0],i[1]);break;case"M":t.moveTo(i[0],i[1]);break;case"C":t.bezierCurveTo(i[0],i[1],i[2],i[3],i[4],i[5]);break;case"Q":t.quadraticCurveTo(i[0],i[1],i[2],i[3]);break;case"A":var o=i[0],h=i[1],n=i[2],l=i[3],c=i[4],g=i[5],m=i[6],p=i[7],f=n>l?n:l,w=n>l?1:n/l,u=n>l?l/n:1;t.translate(o,h),t.rotate(m),t.scale(w,u),t.arc(0,0,f,c,c+g,!p),t.scale(1/w,1/u),t.rotate(-m),t.translate(-o,-h);break;case"z":t.closePath()}}}},scaleX:l,scaleY:c},t.createElement(s,Object.assign({},o,{x:0,y:0,data:n,strokeWidth:2*o.strokeWidth,dash:o.dash.map(t=>t)}))))}))),n[v]||a);var v,O;return t.createElement(t.Fragment,null,t.createElement(a,{ref:d,id:l.id,x:l.a.x,y:l.a.y,rotation:l.a.rotation,opacity:l.a.opacity,listening:g,draggable:m?l.draggable&&p:l.draggable,name:"element",onDragMove:t=>{l.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{l.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const e=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),l.set({width:l.width*e.x,height:l.height*e.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},t.createElement(E,{element:l,fillProps:b,strokeProps:x,hitStrokeWidth:k})))});
+import{jsx as t,Fragment as e,jsxs as a}from"react/jsx-runtime";import r from"react";import{observer as s}from"mobx-react-lite";import{Group as i,Rect as o,Path as h}from"react-konva";import{ROLES as n}from"../model/store.js";import{subTypeToPathDataFunc as l}from"../utils/figure-to-svg.js";import{isTouchDevice as d}from"../utils/screen.js";import{useColor as c}from"./use-color.js";const g={};export const FigureElement=s(({element:m,store:f})=>{const p=r.useRef(null),w=m.selectable||f.role===n.ADMIN,u=d(),x=m.isSelected,b=Math.min(m.strokeWidth,m.width/2,m.height/2),y=Math.max(0,Math.min(m.width/2,m.height/2,m.cornerRadius)),k=c(m,m.a.fill,"fill"),j=Object.assign(Object.assign({width:m.a.width,height:m.a.height},k),{cornerRadius:y,shadowEnabled:m.shadowEnabled,shadowBlur:m.shadowBlur,shadowOffsetX:m.shadowOffsetX,shadowOffsetY:m.shadowOffsetY,shadowColor:m.shadowColor,shadowOpacity:m.shadowOpacity,preventDefault:!u||x,hideInExport:!m.showInExport}),v=c(m,m.stroke,"stroke"),O=Object.assign(Object.assign({visible:b>0,x:b/2,y:b/2,width:m.a.width-b,height:m.a.height-b},v),{strokeWidth:b,cornerRadius:Math.max(0,y-b),dash:m.dash.map(t=>t*b),hideInExport:!m.showInExport,listening:!1}),M=Math.max(0,10-Math.min(m.a.width,m.a.height)),E=(R=m.subType,g[R]||(g[R]=(W=l(R),s(({element:s,fillProps:n,strokeProps:l,hitStrokeWidth:d})=>{let c=W({width:s.a.width,height:s.a.height,cornerRadius:s.cornerRadius}),g=1,m=1;"string"!=typeof c&&(g=c.scaleX,m=c.scaleY,c=c.path);const f=r.useRef(null);return a(e,{children:[t(o,{width:s.a.width,height:s.a.height,fill:"transparent",hitStrokeWidth:d}),t(h,Object.assign({},n,{ref:f,data:c,scaleX:g,scaleY:m})),t(i,{clipFunc:t=>{const e=f.current;if(e){var a=e.dataArray;t.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,i=a[r].points;switch(s){case"L":t.lineTo(i[0],i[1]);break;case"M":t.moveTo(i[0],i[1]);break;case"C":t.bezierCurveTo(i[0],i[1],i[2],i[3],i[4],i[5]);break;case"Q":t.quadraticCurveTo(i[0],i[1],i[2],i[3]);break;case"A":var o=i[0],h=i[1],n=i[2],l=i[3],d=i[4],c=i[5],g=i[6],m=i[7],p=n>l?n:l,w=n>l?1:n/l,u=n>l?l/n:1;t.translate(o,h),t.rotate(g),t.scale(w,u),t.arc(0,0,p,d,d+c,!m),t.scale(1/w,1/u),t.rotate(-g),t.translate(-o,-h);break;case"z":t.closePath()}}}},scaleX:g,scaleY:m,children:t(h,Object.assign({},l,{x:0,y:0,data:c,strokeWidth:2*l.strokeWidth,dash:l.dash.map(t=>t)}))})]})}))),g[R]||i);var R,W;return t(e,{children:t(i,{ref:p,id:m.id,x:m.a.x,y:m.a.y,rotation:m.a.rotation,opacity:m.a.opacity,listening:w,draggable:u?m.draggable&&x:m.draggable,name:"element",onDragMove:t=>{m.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{m.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const e=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),m.set({width:m.width*e.x,height:m.height*e.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})},children:t(E,{element:m,fillProps:j,strokeProps:O,hitStrokeWidth:M})})})});

package/canvas/gif-element.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import { StoreType } from '../model/store.js';
 import { VideoElementType } from '../model/video-model.js';
 type Props = {
     store: StoreType;
     element: VideoElementType;
 };
-export declare const GifElement: (({ element, store }: Props) => React.JSX.Element) & {
+export declare const GifElement: (({ element, store }: Props) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export {};