@metadev/daga-angular 2.0.2

package/assets/icon/buttons/redo-hover.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#F5F5F5"/>
+<path transform-origin="24 24" transform="scale(-1 1)" d="M 16 20 L 15.3 20.7 L 14.6 20 L 15.3 19.3 L 16 20 Z M 21 32 C 20.4 32 20 31.5523 20 31 C 20 30.4 20.4 30 21 30 L 21 32 Z M 20.3 25.7 L 15.3 20.7 L 16.7 19.3 L 21.7 24.3 L 20.3 25.7 Z M 15.3 19.3 L 20.3 14.3 L 21.7 15.7 L 16.7 20.7 L 15.3 19.3 Z M 16 19 L 26.5 19 L 26.5 21 L 16 21 L 16 19 Z M26.5 32 L 21 32 L 21 30 L 26.5 30 L 26.5 32 Z M 33 25.5 C 33 29.1 30.1 32 26.5 32 L 26.5 30 C 29 30 31 28 31 25.5 L 33 25.5 Z M 26.5 19 C 30 19 33 22 33 25.5 L 31 25.5 C 31 23 29 21 26.5 21 L 26.5 19 Z" fill="#33363F"/>
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#E5E5E5"/>
+</svg>

package/assets/icon/buttons/redo.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="white"/>
+<path transform-origin="24 24" transform="scale(-1 1)" d="M 16 20 L 15.3 20.7 L 14.6 20 L 15.3 19.3 L 16 20 Z M 21 32 C 20.4 32 20 31.5523 20 31 C 20 30.4 20.4 30 21 30 L 21 32 Z M 20.3 25.7 L 15.3 20.7 L 16.7 19.3 L 21.7 24.3 L 20.3 25.7 Z M 15.3 19.3 L 20.3 14.3 L 21.7 15.7 L 16.7 20.7 L 15.3 19.3 Z M 16 19 L 26.5 19 L 26.5 21 L 16 21 L 16 19 Z M26.5 32 L 21 32 L 21 30 L 26.5 30 L 26.5 32 Z M 33 25.5 C 33 29.1 30.1 32 26.5 32 L 26.5 30 C 29 30 31 28 31 25.5 L 33 25.5 Z M 26.5 19 C 30 19 33 22 33 25.5 L 31 25.5 C 31 23 29 21 26.5 21 L 26.5 19 Z" fill="#33363F"/>
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#E5E5E5"/>
+</svg>

package/assets/icon/buttons/undo-hover.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#F5F5F5"/>
+<path d="M 16 20 L 15.3 20.7 L 14.6 20 L 15.3 19.3 L 16 20 Z M 21 32 C 20.4 32 20 31.5523 20 31 C 20 30.4 20.4 30 21 30 L 21 32 Z M 20.3 25.7 L 15.3 20.7 L 16.7 19.3 L 21.7 24.3 L 20.3 25.7 Z M 15.3 19.3 L 20.3 14.3 L 21.7 15.7 L 16.7 20.7 L 15.3 19.3 Z M 16 19 L 26.5 19 L 26.5 21 L 16 21 L 16 19 Z M26.5 32 L 21 32 L 21 30 L 26.5 30 L 26.5 32 Z M 33 25.5 C 33 29.1 30.1 32 26.5 32 L 26.5 30 C 29 30 31 28 31 25.5 L 33 25.5 Z M 26.5 19 C 30 19 33 22 33 25.5 L 31 25.5 C 31 23 29 21 26.5 21 L 26.5 19 Z" fill="#33363F"/>
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#E5E5E5"/>
+</svg>

package/assets/icon/buttons/undo.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="white"/>
+<path d="M 16 20 L 15.3 20.7 L 14.6 20 L 15.3 19.3 L 16 20 Z M 21 32 C 20.4 32 20 31.5523 20 31 C 20 30.4 20.4 30 21 30 L 21 32 Z M 20.3 25.7 L 15.3 20.7 L 16.7 19.3 L 21.7 24.3 L 20.3 25.7 Z M 15.3 19.3 L 20.3 14.3 L 21.7 15.7 L 16.7 20.7 L 15.3 19.3 Z M 16 19 L 26.5 19 L 26.5 21 L 16 21 L 16 19 Z M26.5 32 L 21 32 L 21 30 L 26.5 30 L 26.5 32 Z M 33 25.5 C 33 29.1 30.1 32 26.5 32 L 26.5 30 C 29 30 31 28 31 25.5 L 33 25.5 Z M 26.5 19 C 30 19 33 22 33 25.5 L 31 25.5 C 31 23 29 21 26.5 21 L 26.5 19 Z" fill="#33363F"/>
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#E5E5E5"/>
+</svg>

package/assets/icon/buttons/zoom-in-hover.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#F5F5F5"/>
+<path d="M23 30C26.866 30 30 26.866 30 23C30 19.134 26.866 16 23 16C19.134 16 16 19.134 16 23C16 26.866 19.134 30 23 30Z" stroke="#233154" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.5 32.5L28.875 28.875" stroke="#233154" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 23C19 22.4477 19.4477 22 20 22H26C26.5523 22 27 22.4477 27 23C27 23.5523 26.5523 24 26 24H20C19.4477 24 19 23.5523 19 23Z" fill="#233154"/>
+<path d="M22 20C22 19.4477 22.4477 19 23 19C23.5523 19 24 19.4477 24 20V26C24 26.5523 23.5523 27 23 27C22.4477 27 22 26.5523 22 26V20Z" fill="#233154"/>
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#E5E5E5"/>
+</svg>

package/assets/icon/buttons/zoom-in.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="white"/>
+<path d="M23 30C26.866 30 30 26.866 30 23C30 19.134 26.866 16 23 16C19.134 16 16 19.134 16 23C16 26.866 19.134 30 23 30Z" stroke="#233154" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.5 32.5L28.875 28.875" stroke="#233154" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 23C19 22.4477 19.4477 22 20 22H26C26.5523 22 27 22.4477 27 23C27 23.5523 26.5523 24 26 24H20C19.4477 24 19 23.5523 19 23Z" fill="#233154"/>
+<path d="M22 20C22 19.4477 22.4477 19 23 19C23.5523 19 24 19.4477 24 20V26C24 26.5523 23.5523 27 23 27C22.4477 27 22 26.5523 22 26V20Z" fill="#233154"/>
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#E5E5E5"/>
+</svg>

package/assets/icon/buttons/zoom-out-hover.svg

@@ -0,0 +1,7 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#F5F5F5"/>
+<path d="M23 30C26.866 30 30 26.866 30 23C30 19.134 26.866 16 23 16C19.134 16 16 19.134 16 23C16 26.866 19.134 30 23 30Z" stroke="#233154" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.5 32.5L28.875 28.875" stroke="#233154" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 23C19 22.4477 19.4477 22 20 22H26C26.5523 22 27 22.4477 27 23C27 23.5523 26.5523 24 26 24H20C19.4477 24 19 23.5523 19 23Z" fill="#233154"/>
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#E5E5E5"/>
+</svg>

package/assets/icon/buttons/zoom-out.svg

@@ -0,0 +1,7 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="white"/>
+<path d="M23 30C26.866 30 30 26.866 30 23C30 19.134 26.866 16 23 16C19.134 16 16 19.134 16 23C16 26.866 19.134 30 23 30Z" stroke="#233154" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.5 32.5L28.875 28.875" stroke="#233154" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 23C19 22.4477 19.4477 22 20 22H26C26.5523 22 27 22.4477 27 23C27 23.5523 26.5523 24 26 24H20C19.4477 24 19 23.5523 19 23Z" fill="#233154"/>
+<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#E5E5E5"/>
+</svg>

package/assets/icon/context/context-copy.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M 0 0 H 7.5 V 3 H 3 V 7.5 H 0 V 0 Z" fill="#233154"/>
+<path d="M 12 4.5 H 4.5 V 12 H 12 V 4.5 Z" fill="#233154"/>
+</svg>

package/assets/icon/context/context-cross.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M 0 1 L 1 0 L 6 5 L 11 0 L 12 1 L 7 6 L 12 11 L 11 12 L 6 7 L 1 12 L 0 11 L 5 6 Z" fill="#979ba3"/>
+</svg>

package/assets/icon/context/context-cut.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M 4.091 0.65901 C 4.84051 1.40852 4.95069 2.55525 4.42155 3.42155 L 11.5 10.5 L 10.75 11.25 H 8.5 L 5.125 7.875 L 4.42155 8.57845 C 4.95069 9.44475 4.84051 10.5915 4.091 11.341 C 3.65166 11.7803 3.07583 12 2.5 12 H 2.37132 C 1.19975 12 0.25 11.0503 0.25 9.87868 C 0.25 9.31607 0.473495 8.7765 0.87132 8.37868 L 3.25 6 L 0.87132 3.62132 C 0.473495 3.2235 0.25 2.68393 0.25 2.12132 C 0.25 0.949748 1.19975 0 2.37132 0 H 2.5 C 3.07583 0 3.65166 0.219667 4.091 0.65901Z M 1.75 2.25 C 1.75 2.66421 2.08579 3 2.5 3C2.91421 3 3.25 2.66421 3.25 2.25C3.25 1.83579 2.91421 1.5 2.5 1.5C2.08579 1.5 1.75 1.83579 1.75 2.25 Z M 2.5 9 C 2.08579 9 1.75 9.33579 1.75 9.75 C 1.75 10.1642 2.08579 10.5 2.5 10.5 C 2.91421 10.5 3.25 10.1642 3.25 9.75 C 3.25 9.33579 2.91421 9 2.5 9 Z" fill="#233154"/>
+<path d="M 8.5 0.75 L 6.25 3 L 8.125 4.875 L 11.5 1.5 L 10.75 0.75 L 8.5 0.75 Z" fill="#233154"/>
+</svg>

package/assets/icon/context/context-delete.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M 3 1.5 H 0.75 V 3 H 11.25 V 1.5 H 9 V 0 H 3 V 1.5 Z" fill="#233154"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M 2.25 4.5 H 9.75 V 12 H 2.25 V 4.5 Z M 5.25 6.75 H 6.75 V 9.75 H 5.25 V 6.75 Z" fill="#233154"/>
+</svg>

package/assets/icon/context/context-paste.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M 4 0 H 8 V 2 H 4 Z" fill="#233154"/>
+<path d="M 1 1 H 3 V 3 H 9 V 1 H 11 V 12 H 1 Z" fill="#233154"/>
+</svg>

package/assets/icon/property/add.svg

@@ -0,0 +1,23 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="#233154"
+    d="
+      M 13 11
+      L 21 11
+      V 13
+      L 13 13
+      L 13 21
+      L 11 21
+      V 13
+      L 3 13
+      L 3 11
+      L 11 11
+      L 11 3
+      L 13 3
+      V 11
+      Z
+    "
+  />
+</svg>

package/assets/icon/property/close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4 12L19 17.6L17.6 19L12 13.4L6.40004 19L5.00004 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12Z" fill="#233154"/>
+</svg>

package/assets/icon/property/ellipsis.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.5" cy="6.5" r="1.5" fill="#233154"/>
+<circle cx="11.5" cy="12.5" r="1.5" fill="#233154"/>
+<circle cx="11.5" cy="18.5" r="1.5" fill="#233154"/>
+</svg>

package/assets/icon/property/gear.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.49998 0H9.49998L10.0939 2.37548C10.7276 2.6115 11.3107 2.95155 11.8223 3.37488L14.1782 2.70096L15.6782 5.29904L13.9173 7.00166C13.9717 7.32634 14 7.65987 14 8C14 8.34013 13.9717 8.67366 13.9173 8.99834L15.6782 10.701L14.1782 13.299L11.8223 12.6251C11.3107 13.0484 10.7276 13.3885 10.0939 13.6245L9.49998 16H6.49998L5.90611 13.6245C5.27238 13.3885 4.68931 13.0484 4.17765 12.6251L1.82178 13.299L0.321777 10.701L2.08266 8.99834C2.02828 8.67366 1.99998 8.34013 1.99998 8C1.99998 7.65987 2.02828 7.32634 2.08266 7.00166L0.321777 5.29904L1.82178 2.70096L4.17764 3.37488C4.68931 2.95155 5.27238 2.6115 5.90611 2.37548L6.49998 0ZM7.99998 10C9.10455 10 9.99998 9.10457 9.99998 8C9.99998 6.89543 9.10455 6 7.99998 6C6.89541 6 5.99998 6.89543 5.99998 8C5.99998 9.10457 6.89541 10 7.99998 10Z" fill="#5F789E"/>
+</svg>

package/assets/icon/property/hide.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_917_2901)">
+<path d="M1.70711 0.292893L23.7071 22.2929C24.0976 22.6834 24.0976 23.3166 23.7071 23.7071C23.3166 24.0976 22.6834 24.0976 22.2929 23.7071L17.8253 19.2408C16.0954 20.3537 14.0825 20.9661 12 21C8.6202 21 5.66131 19.3675 3.14546 16.6839C2.28113 15.762 1.5305 14.7776 0.894336 13.7925C0.509967 13.1974 0.246141 12.7283 0.105573 12.4472C-0.0397387 12.1566 -0.0347894 11.8135 0.118844 11.5272C1.25027 9.41866 2.75947 7.53995 4.56806 5.98304L0.292893 1.70711C-0.097631 1.31658 -0.097631 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893ZM2.37577 11.6109L2.143 12.003L2.17054 12.0513C2.24971 12.187 2.33598 12.3299 2.42925 12.4791L2.57441 12.7075C3.14919 13.5974 3.82825 14.488 4.60454 15.3161C6.77619 17.6325 9.2548 19 11.9837 19.0001C13.5317 18.9748 15.0407 18.5539 16.3706 17.7861L14.049 15.4646C13.1339 16.0379 12.0103 16.225 10.9354 15.9504C9.51816 15.5885 8.41149 14.4818 8.04955 13.0646C7.77504 11.9897 7.96214 10.8661 8.53544 9.95102L5.98658 7.40175C4.56612 8.6035 3.34715 10.0246 2.37577 11.6109ZM12 2.99995C15.3798 2.99995 18.3387 4.63247 20.8545 7.31605C21.7189 8.23801 22.4695 9.22244 23.1057 10.2075C23.49 10.8026 23.7539 11.2717 23.8944 11.5528C24.0395 11.8429 24.0348 12.1854 23.8819 12.4714C23.2421 13.6684 22.479 14.7953 21.6052 15.8338C21.2496 16.2564 20.6187 16.3107 20.1962 15.9552C19.7736 15.5996 19.7193 14.9687 20.0748 14.5462C20.635 13.8804 21.1445 13.1742 21.5991 12.4336L21.857 11.998L21.8295 11.9487C21.7503 11.813 21.664 11.6701 21.5707 11.5209L21.4256 11.2925C20.8508 10.4025 20.1718 9.51197 19.3955 8.68393C17.2238 6.36749 14.7452 4.99998 11.9977 4.99997C11.3682 4.99852 10.7408 5.07023 10.1279 5.21368C9.59016 5.33955 9.05219 5.00566 8.92632 4.46791C8.80045 3.93016 9.13434 3.39219 9.67209 3.26632C10.4359 3.08754 11.2179 2.99816 12 2.99995ZM9.98736 12.5697C10.1683 13.2783 10.7217 13.8317 11.4303 14.0126C11.8091 14.1094 12.1999 14.0915 12.5578 13.9721L10.0279 11.4422C9.90853 11.8001 9.89063 12.1909 9.98736 12.5697Z" fill="#233154"/>
+</g>
+<defs>
+<clipPath id="clip0_917_2901">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/icon/property/move.svg

@@ -0,0 +1,35 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="#233154"
+    d="
+      M 11 11
+      V 6
+      H 8
+      L 12 2
+      L 16 6
+      H 13
+      V 11
+      H 18
+      V 8
+      L 22 12
+      L 18 16
+      V 13
+      H 13
+      V 18
+      H 16
+      L 12 22
+      L 8 18
+      H 11
+      V 13
+      H 6
+      V 16
+      L 2 12
+      L 6 8
+      V 11
+      L 11
+      Z
+    "
+  />
+</svg>

package/assets/styles/_collapse-button.scss

@@ -0,0 +1,37 @@
+daga-collapse-button {
+  .daga-collapse-button {
+    width: 100%;
+    height: 100%;
+    min-width: 2rem;
+    min-height: 2rem;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    background-color: transparent;
+    cursor: pointer;
+    div {
+      background-size: contain;
+      margin: auto;
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    div.daga-horizontal-none {
+      background-image: url(../icon/action/drop-horizontal-none.svg);
+    }
+    div.daga-horizontal-left {
+      background-image: url(../icon/action/drop-horizontal-left.svg);
+    }
+    div.daga-horizontal-right {
+      background-image: url(../icon/action/drop-horizontal-right.svg);
+    }
+    div.daga-vertical-none {
+      background-image: url(../icon/action/drop-vertical-none.svg);
+    }
+    div.daga-vertical-up {
+      background-image: url(../icon/action/drop-vertical-up.svg);
+    }
+    div.daga-vertical-down {
+      background-image: url(../icon/action/drop-vertical-down.svg);
+    }
+  }
+}

package/assets/styles/_context-menu.scss

@@ -0,0 +1,32 @@
+.daga-context-menu {
+  .daga-context-menu-button {
+    color: #979ba3;
+    background-color: #f7f8fc;
+    border: 2px solid #dadeed;
+  }
+  .daga-context-menu-button.daga-clickable {
+    color: #233154;
+    background-color: #f7f8fc;
+    border: 2px solid #dadeed;
+  }
+  .daga-context-menu-button.daga-clickable:hover {
+    cursor: pointer;
+    background-color: #dadeed;
+    border: 2px solid #f7f8fc;
+  }
+  div.daga-copy {
+    background-image: url(../icon/context/context-copy.svg);
+  }
+  div.daga-cross {
+    background-image: url(../icon/context/context-cross.svg);
+  }
+  div.daga-cut {
+    background-image: url(../icon/context/context-cut.svg);
+  }
+  div.daga-delete {
+    background-image: url(../icon/context/context-delete.svg);
+  }
+  div.daga-paste {
+    background-image: url(../icon/context/context-paste.svg);
+  }
+}

package/assets/styles/_diagram-buttons.scss

@@ -0,0 +1,197 @@
+daga-diagram-buttons {
+  .daga-diagram-buttons {
+    margin: 1rem;
+    display: flex;
+    gap: 1rem;
+    .daga-collapsable-buttons {
+      display: flex;
+      gap: 1rem;
+    }
+    button {
+      position: relative;
+      display: block;
+      min-height: 3rem;
+      height: 3rem;
+      min-width: 3rem;
+      width: 3rem;
+      padding: 0;
+      border: 0;
+      background-color: transparent;
+      .daga-tooltip {
+        visibility: hidden;
+        z-index: 1;
+        position: absolute;
+        height: 2rem;
+        padding: 0.6rem;
+        border-radius: 0.25rem;
+        font-size: 0.8rem;
+        font-weight: 500;
+        box-sizing: border-box;
+        white-space: nowrap;
+        color: #ffffff;
+        background-color: rgba(0, 0, 0, 0.6);
+      }
+    }
+    button:hover .daga-tooltip {
+      visibility: visible;
+    }
+    button:hover .daga-tooltip {
+      visibility: visible;
+    }
+    button.daga-filter.daga-on {
+      background-image: url(../icon/buttons/filter-on.svg);
+    }
+    button.daga-filter.daga-on:hover {
+      background-image: url(../icon/buttons/filter-on-hover.svg);
+    }
+    button.daga-filter.daga-off {
+      background-image: url(../icon/buttons/filter-off.svg);
+    }
+    button.daga-filter.daga-off:hover {
+      background-image: url(../icon/buttons/filter-off-hover.svg);
+    }
+    button.daga-layout {
+      background-image: url(../icon/buttons/layout.svg);
+    }
+    button.daga-layout:hover {
+      background-image: url(../icon/buttons/layout-hover.svg);
+    }
+    button.daga-zoom-in {
+      background-image: url(../icon/buttons/zoom-in.svg);
+    }
+    button.daga-zoom-in:hover {
+      background-image: url(../icon/buttons/zoom-in-hover.svg);
+    }
+    button.daga-zoom-out {
+      background-image: url(../icon/buttons/zoom-out.svg);
+    }
+    button.daga-zoom-out:hover {
+      background-image: url(../icon/buttons/zoom-out-hover.svg);
+    }
+    button.daga-center {
+      background-image: url(../icon/buttons/center.svg);
+    }
+    button.daga-center:hover {
+      background-image: url(../icon/buttons/center-hover.svg);
+    }
+    button.daga-undo {
+      background-image: url(../icon/buttons/undo.svg);
+    }
+    button.daga-undo:hover {
+      background-image: url(../icon/buttons/undo-hover.svg);
+    }
+    button.daga-redo {
+      background-image: url(../icon/buttons/redo.svg);
+    }
+    button.daga-redo:hover {
+      background-image: url(../icon/buttons/redo-hover.svg);
+    }
+    button.daga-copy {
+      background-image: url(../icon/buttons/copy.svg);
+    }
+    button.daga-copy:hover {
+      background-image: url(../icon/buttons/copy-hover.svg);
+    }
+    button.daga-cut {
+      background-image: url(../icon/buttons/cut.svg);
+    }
+    button.daga-cut:hover {
+      background-image: url(../icon/buttons/cut-hover.svg);
+    }
+    button.daga-multiple-selection.daga-off {
+      background-image: url(../icon/buttons/multiple-selection.svg);
+    }
+    button.daga-multiple-selection.daga-on,
+    button.daga-multiple-selection:hover {
+      background-image: url(../icon/buttons/multiple-selection-hover.svg);
+    }
+    button.daga-paste {
+      background-image: url(../icon/buttons/paste.svg);
+    }
+    button.daga-paste:hover {
+      background-image: url(../icon/buttons/paste-hover.svg);
+    }
+    button.daga-delete {
+      background-image: url(../icon/buttons/delete.svg);
+    }
+    button.daga-delete:hover {
+      background-image: url(../icon/buttons/delete-hover.svg);
+    }
+    button.daga-more-options {
+      background-image: url(../icon/buttons/ellipsis.svg);
+    }
+    button.daga-more-options:hover {
+      background-image: url(../icon/buttons/ellipsis-hover.svg);
+    }
+  }
+  .daga-diagram-buttons.daga-bottom-right.daga-bottom,
+  .daga-diagram-buttons.daga-bottom-right.daga-top,
+  .daga-diagram-buttons.daga-top-right.daga-bottom,
+  .daga-diagram-buttons.daga-top-right.daga-top {
+    .daga-tooltip {
+      top: 0.5rem;
+      right: 3.5rem;
+    }
+  }
+  .daga-diagram-buttons.daga-bottom-left.daga-bottom,
+  .daga-diagram-buttons.daga-bottom-left.daga-top,
+  .daga-diagram-buttons.daga-top-left.daga-bottom,
+  .daga-diagram-buttons.daga-top-left.daga-top {
+    .daga-tooltip {
+      top: 0.5rem;
+      left: 3.5rem;
+    }
+  }
+  .daga-diagram-buttons.daga-bottom-left.daga-left,
+  .daga-diagram-buttons.daga-bottom-left.daga-right {
+    .daga-tooltip {
+      bottom: 3.5rem;
+      left: 0rem;
+    }
+  }
+  .daga-diagram-buttons.daga-bottom-right.daga-left,
+  .daga-diagram-buttons.daga-bottom-right.daga-right {
+    .daga-tooltip {
+      bottom: 3.5rem;
+      right: 0rem;
+    }
+  }
+  .daga-diagram-buttons.daga-top-left.daga-left,
+  .daga-diagram-buttons.daga-top-left.daga-right {
+    .daga-tooltip {
+      top: 3.5rem;
+      left: 0rem;
+    }
+  }
+  .daga-diagram-buttons.daga-top-right.daga-left,
+  .daga-diagram-buttons.daga-top-right.daga-right {
+    .daga-tooltip {
+      top: 3.5rem;
+      right: 0rem;
+    }
+  }
+  .daga-diagram-buttons.daga-bottom {
+    .daga-collapsable-buttons {
+      flex-direction: column;
+    }
+    flex-direction: column;
+  }
+  .daga-diagram-buttons.daga-top {
+    .daga-collapsable-buttons {
+      flex-direction: column-reverse;
+    }
+    flex-direction: column-reverse;
+  }
+  .daga-diagram-buttons.daga-right {
+    .daga-collapsable-buttons {
+      flex-direction: row;
+    }
+    flex-direction: row;
+  }
+  .daga-diagram-buttons.daga-left {
+    .daga-collapsable-buttons {
+      flex-direction: row-reverse;
+    }
+    flex-direction: row-reverse;
+  }
+}

package/assets/styles/_diagram.scss

@@ -0,0 +1,15 @@
+daga-diagram {
+  position: relative;
+  display: block;
+  min-width: 40rem;
+  min-height: 20rem;
+  width: 100%;
+  height: 100%;
+}
+
+daga-diagram-editor,
+.daga-append-to {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/assets/styles/_errors.scss

@@ -0,0 +1,83 @@
+daga-errors {
+  left: 2rem;
+  bottom: 0;
+  position: absolute;
+  width: calc(100% - 8rem);
+
+  .daga-errors-summary {
+    position: absolute;
+    right: 2rem;
+    top: -2rem;
+    height: 2rem;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    span {
+      flex: 1 0 auto;
+      padding: 0.5rem;
+    }
+
+    .daga-collapse-button-container {
+      flex: 0 0 auto;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
+      background-color: var(--daga-error-color);
+
+      daga-collapse-button {
+        filter: brightness(10);
+      }
+    }
+  }
+  .daga-errors-summary.daga-no-errors {
+    background-color: var(--daga-panel-secondary-color);
+    color: var(--daga-font-color);
+  }
+  .daga-errors-summary.daga-with-errors {
+    background-color: #e64545;
+    color: #ffffff;
+  }
+  .daga-error-panel {
+    width: 100%;
+    max-height: 12rem;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--daga-font-color);
+    color: white;
+    overflow: auto;
+
+    ol {
+      counter-reset: count;
+      list-style: decimal;
+      padding: 0;
+      padding-left: 5rem;
+      margin: 0;
+      font-size: 0.95rem;
+
+      li {
+        counter-increment: count;
+        cursor: pointer;
+        padding-bottom: 0.25rem;
+
+        b {
+          font-weight: 700;
+        }
+      }
+      li:hover {
+        text-decoration: underline;
+      }
+      li::marker {
+        content: 'ERROR ' counters(count, '.', decimal-leading-zero) ' ';
+        font-family: var(--daga-monospace-font-family);
+        font-size: 0.9rem;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.75);
+      }
+    }
+  }
+}

package/assets/styles/_palette.scss

@@ -0,0 +1,20 @@
+daga-palette {
+  .daga-palette-view {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+  }
+  .daga-panel.daga-bottom .daga-palette-view {
+    flex-direction: column;
+  }
+  .daga-panel.daga-top .daga-palette-view {
+    flex-direction: column-reverse;
+  }
+  .daga-panel.daga-right .daga-palette-view {
+    flex-direction: row;
+  }
+  .daga-panel.daga-left .daga-palette-view {
+    flex-direction: row-reverse;
+  }
+}