@frankenstyle/uikit 0.0.1

package/src/images/icons/tumblr.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.885,8.598c0,0,0,3.393,0,4.996c0,0.282,0,0.66,0.094,0.942c0.377,1.509,1.131,2.545,2.545,3.11 c1.319,0.472,2.356,0.472,3.676,0c0.565-0.188,1.132-0.659,1.132-0.659l-0.849-2.263c0,0-1.036,0.378-1.603,0.283 c-0.565-0.094-1.226-0.66-1.226-1.508c0-1.603,0-4.902,0-4.902h2.828V5.771h-2.828V2H8.205c0,0-0.094,0.66-0.188,0.942 C7.828,3.791,7.262,4.733,6.603,5.394C5.848,6.147,5,6.43,5,6.43v2.168H6.885z" />
+</svg>

package/src/images/icons/tv.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <rect x="7" y="16" width="6" height="1" />
+    <rect fill="none" stroke="#000" x="0.5" y="3.5" width="19" height="11" />
+</svg>

package/src/images/icons/twitch.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.23,1,2,4.23V15.85H5.88v3.23L9.1,15.85h2.59L17.5,10V1Zm11,8.4L13.62,12H11L8.78,14.24V12H5.88V2.29H16.21Z" />
+    <rect x="12.98" y="4.55" width="1.29" height="3.88" />
+    <rect x="9.43" y="4.55" width="1.29" height="3.88" />
+</svg>

package/src/images/icons/twitter.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19,4.74 C18.339,5.029 17.626,5.229 16.881,5.32 C17.644,4.86 18.227,4.139 18.503,3.28 C17.79,3.7 17.001,4.009 16.159,4.17 C15.485,3.45 14.526,3 13.464,3 C11.423,3 9.771,4.66 9.771,6.7 C9.771,6.99 9.804,7.269 9.868,7.539 C6.795,7.38 4.076,5.919 2.254,3.679 C1.936,4.219 1.754,4.86 1.754,5.539 C1.754,6.82 2.405,7.95 3.397,8.61 C2.79,8.589 2.22,8.429 1.723,8.149 L1.723,8.189 C1.723,9.978 2.997,11.478 4.686,11.82 C4.376,11.899 4.049,11.939 3.713,11.939 C3.475,11.939 3.245,11.919 3.018,11.88 C3.49,13.349 4.852,14.419 6.469,14.449 C5.205,15.429 3.612,16.019 1.882,16.019 C1.583,16.019 1.29,16.009 1,15.969 C2.635,17.019 4.576,17.629 6.662,17.629 C13.454,17.629 17.17,12 17.17,7.129 C17.17,6.969 17.166,6.809 17.157,6.649 C17.879,6.129 18.504,5.478 19,4.74" />
+</svg>

package/src/images/icons/uikit.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="14.4,3.1 11.3,5.1 15,7.3 15,12.9 10,15.7 5,12.9 5,8.5 2,6.8 2,14.8 9.9,19.5 18,14.8 18,5.3" />
+    <polygon points="9.8,4.2 6.7,2.4 9.8,0.4 12.9,2.3" />
+</svg>

package/src/images/icons/unlock.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="none" stroke="#000" x="3.5" y="8.5" width="13" height="10" />
+    <path fill="none" stroke="#000" d="M6.5,8.5 L6.5,4.9 C6.5,3 8.1,1.5 10,1.5 C11.9,1.5 13.5,3 13.5,4.9" />
+</svg>

package/src/images/icons/upload.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <line fill="none" stroke="#000" x1="10" y1="15.17" x2="10" y2="3.17" />
+    <polyline fill="none" stroke="#000" points="13.84 6.63 10 2.8 6.16 6.64" />
+    <line fill="#fff" stroke="#000" x1="3.5" y1="17.5" x2="16.5" y2="17.5" />
+</svg>

package/src/images/icons/user.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4" />
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" />
+</svg>

package/src/images/icons/users.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5" />
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3" />
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1" />
+</svg>

package/src/images/icons/video-camera.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <polygon fill="none" stroke="#000" points="19.5 5.9 19.5 14.1 14.5 10.4 14.5 15.5 .5 15.5 .5 4.5 14.5 4.5 14.5 9.6 19.5 5.9" />
+</svg>

package/src/images/icons/vimeo.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.065,7.59C1.84,7.367,1.654,7.082,1.468,6.838c-0.332-0.42-0.137-0.411,0.274-0.772c1.026-0.91,2.004-1.896,3.127-2.688 c1.017-0.713,2.365-1.173,3.286-0.039c0.849,1.045,0.869,2.629,1.084,3.891c0.215,1.309,0.421,2.648,0.88,3.901 c0.127,0.352,0.37,1.018,0.81,1.074c0.567,0.078,1.145-0.917,1.408-1.289c0.684-0.987,1.611-2.317,1.494-3.587 c-0.115-1.349-1.572-1.095-2.482-0.773c0.146-1.514,1.555-3.216,2.912-3.792c1.439-0.597,3.579-0.587,4.302,1.036 c0.772,1.759,0.078,3.802-0.763,5.396c-0.918,1.731-2.1,3.333-3.363,4.829c-1.114,1.329-2.432,2.787-4.093,3.422 c-1.897,0.723-3.021-0.686-3.667-2.318c-0.705-1.777-1.056-3.771-1.565-5.621C4.898,8.726,4.644,7.836,4.136,7.191 C3.473,6.358,2.72,7.141,2.065,7.59C1.977,7.502,2.115,7.551,2.065,7.59L2.065,7.59z" />
+</svg>

package/src/images/icons/warning.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="10" cy="14" r="1" />
+    <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9" />
+    <path d="M10.97,7.72 C10.85,9.54 10.56,11.29 10.56,11.29 C10.51,11.87 10.27,12 9.99,12 C9.69,12 9.49,11.87 9.43,11.29 C9.43,11.29 9.16,9.54 9.03,7.72 C8.96,6.54 9.03,6 9.03,6 C9.03,5.45 9.46,5.02 9.99,5 C10.53,5.01 10.97,5.44 10.97,6 C10.97,6 11.04,6.54 10.97,7.72 L10.97,7.72 Z" />
+</svg>

package/src/images/icons/whatsapp.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.7,3.3c-1.8-1.8-4.1-2.8-6.7-2.8c-5.2,0-9.4,4.2-9.4,9.4c0,1.7,0.4,3.3,1.3,4.7l-1.3,4.9l5-1.3c1.4,0.8,2.9,1.2,4.5,1.2 l0,0l0,0c5.2,0,9.4-4.2,9.4-9.4C19.5,7.4,18.5,5,16.7,3.3 M10.1,17.7L10.1,17.7c-1.4,0-2.8-0.4-4-1.1l-0.3-0.2l-3,0.8l0.8-2.9 l-0.2-0.3c-0.8-1.2-1.2-2.7-1.2-4.2c0-4.3,3.5-7.8,7.8-7.8c2.1,0,4.1,0.8,5.5,2.3c1.5,1.5,2.3,3.4,2.3,5.5 C17.9,14.2,14.4,17.7,10.1,17.7 M14.4,11.9c-0.2-0.1-1.4-0.7-1.6-0.8c-0.2-0.1-0.4-0.1-0.5,0.1c-0.2,0.2-0.6,0.8-0.8,0.9 c-0.1,0.2-0.3,0.2-0.5,0.1c-0.2-0.1-1-0.4-1.9-1.2c-0.7-0.6-1.2-1.4-1.3-1.6c-0.1-0.2,0-0.4,0.1-0.5C8,8.8,8.1,8.7,8.2,8.5 c0.1-0.1,0.2-0.2,0.2-0.4c0.1-0.2,0-0.3,0-0.4C8.4,7.6,7.9,6.5,7.7,6C7.5,5.5,7.3,5.6,7.2,5.6c-0.1,0-0.3,0-0.4,0 c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.8,0.8-0.8,2c0,1.2,0.8,2.3,1,2.4c0.1,0.2,1.7,2.5,4,3.5c0.6,0.2,1,0.4,1.3,0.5 c0.6,0.2,1.1,0.2,1.5,0.1c0.5-0.1,1.4-0.6,1.6-1.1c0.2-0.5,0.2-1,0.1-1.1C14.8,12.1,14.6,12,14.4,11.9" />
+</svg>

package/src/images/icons/wordpress.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10,0.5c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5c5.2,0,9.5-4.3,9.5-9.5S15.2,0.5,10,0.5L10,0.5L10,0.5z M15.6,3.9h-0.1 c-0.8,0-1.4,0.7-1.4,1.5c0,0.7,0.4,1.3,0.8,1.9c0.3,0.6,0.7,1.3,0.7,2.3c0,0.7-0.3,1.5-0.6,2.7L14.1,15l-3-8.9 c0.5,0,0.9-0.1,0.9-0.1C12.5,6,12.5,5.3,12,5.4c0,0-1.3,0.1-2.2,0.1C9,5.5,7.7,5.4,7.7,5.4C7.2,5.3,7.2,6,7.6,6c0,0,0.4,0.1,0.9,0.1 l1.3,3.5L8,15L5,6.1C5.5,6.1,5.9,6,5.9,6C6.4,6,6.3,5.3,5.9,5.4c0,0-1.3,0.1-2.2,0.1c-0.2,0-0.3,0-0.5,0c1.5-2.2,4-3.7,6.9-3.7 C12.2,1.7,14.1,2.6,15.6,3.9L15.6,3.9L15.6,3.9z M2.5,6.6l3.9,10.8c-2.7-1.3-4.6-4.2-4.6-7.4C1.8,8.8,2,7.6,2.5,6.6L2.5,6.6L2.5,6.6 z M10.2,10.7l2.5,6.9c0,0,0,0.1,0.1,0.1C11.9,18,11,18.2,10,18.2c-0.8,0-1.6-0.1-2.3-0.3L10.2,10.7L10.2,10.7L10.2,10.7z M14.2,17.1 l2.5-7.3c0.5-1.2,0.6-2.1,0.6-2.9c0-0.3,0-0.6-0.1-0.8c0.6,1.2,1,2.5,1,4C18.3,13,16.6,15.7,14.2,17.1L14.2,17.1L14.2,17.1z" />
+</svg>

package/src/images/icons/world.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path fill="none" stroke="#000" d="M1,10.5 L19,10.5" />
+    <path fill="none" stroke="#000" d="M2.35,15.5 L17.65,15.5" />
+    <path fill="none" stroke="#000" d="M2.35,5.5 L17.523,5.5" />
+    <path fill="none" stroke="#000" d="M10,19.46 L9.98,19.46 C7.31,17.33 5.61,14.141 5.61,10.58 C5.61,7.02 7.33,3.83 10,1.7 C10.01,1.7 9.99,1.7 10,1.7 L10,1.7 C12.67,3.83 14.4,7.02 14.4,10.58 C14.4,14.141 12.67,17.33 10,19.46 L10,19.46 L10,19.46 L10,19.46 Z" />
+    <circle fill="none" stroke="#000" cx="10" cy="10.5" r="9" />
+</svg>

package/src/images/icons/x.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m15.08,2.1h2.68l-5.89,6.71,6.88,9.1h-5.4l-4.23-5.53-4.84,5.53H1.59l6.24-7.18L1.24,2.1h5.54l3.82,5.05,4.48-5.05Zm-.94,14.23h1.48L6,3.61h-1.6l9.73,12.71h0Z" />
+</svg>

package/src/images/icons/xing.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.4,4.56 C4.24,4.56 4.11,4.61 4.05,4.72 C3.98,4.83 3.99,4.97 4.07,5.12 L5.82,8.16 L5.82,8.17 L3.06,13.04 C2.99,13.18 2.99,13.33 3.06,13.44 C3.12,13.55 3.24,13.62 3.4,13.62 L6,13.62 C6.39,13.62 6.57,13.36 6.71,13.12 C6.71,13.12 9.41,8.35 9.51,8.16 C9.49,8.14 7.72,5.04 7.72,5.04 C7.58,4.81 7.39,4.56 6.99,4.56 L4.4,4.56 L4.4,4.56 Z" />
+    <path d="M15.3,1 C14.91,1 14.74,1.25 14.6,1.5 C14.6,1.5 9.01,11.42 8.82,11.74 C8.83,11.76 12.51,18.51 12.51,18.51 C12.64,18.74 12.84,19 13.23,19 L15.82,19 C15.98,19 16.1,18.94 16.16,18.83 C16.23,18.72 16.23,18.57 16.16,18.43 L12.5,11.74 L12.5,11.72 L18.25,1.56 C18.32,1.42 18.32,1.27 18.25,1.16 C18.21,1.06 18.08,1 17.93,1 L15.3,1 L15.3,1 Z" />
+</svg>

package/src/images/icons/yelp.svg

@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.175,14.971c-0.112,0.77-1.686,2.767-2.406,3.054c-0.246,0.1-0.487,0.076-0.675-0.069
+	c-0.122-0.096-2.446-3.859-2.446-3.859c-0.194-0.293-0.157-0.682,0.083-0.978c0.234-0.284,0.581-0.393,0.881-0.276
+	c0.016,0.01,4.21,1.394,4.332,1.482c0.178,0.148,0.263,0.379,0.225,0.646L17.175,14.971L17.175,14.971z M11.464,10.789
+	c-0.203-0.307-0.199-0.666,0.009-0.916c0,0,2.625-3.574,2.745-3.657c0.203-0.135,0.452-0.141,0.69-0.025
+	c0.691,0.335,2.085,2.405,2.167,3.199v0.027c0.024,0.271-0.082,0.491-0.273,0.623c-0.132,0.083-4.43,1.155-4.43,1.155
+	c-0.322,0.096-0.68-0.06-0.882-0.381L11.464,10.789z M9.475,9.563C9.32,9.609,8.848,9.757,8.269,8.817c0,0-3.916-6.16-4.007-6.351
+	c-0.057-0.212,0.011-0.455,0.202-0.65C5.047,1.211,8.21,0.327,9.037,0.529c0.27,0.069,0.457,0.238,0.522,0.479
+	c0.047,0.266,0.433,5.982,0.488,7.264C10.098,9.368,9.629,9.517,9.475,9.563z M9.927,19.066c-0.083,0.225-0.273,0.373-0.54,0.421
+	c-0.762,0.13-3.15-0.751-3.647-1.342c-0.096-0.131-0.155-0.262-0.167-0.394c-0.011-0.095,0-0.189,0.036-0.272
+	c0.061-0.155,2.917-3.538,2.917-3.538c0.214-0.272,0.595-0.355,0.952-0.213c0.345,0.13,0.56,0.428,0.536,0.749
+	C10.014,14.479,9.977,18.923,9.927,19.066z M3.495,13.912c-0.235-0.009-0.444-0.148-0.568-0.382c-0.089-0.17-0.151-0.453-0.19-0.794
+	C2.63,11.701,2.761,10.144,3.07,9.648c0.145-0.226,0.357-0.345,0.592-0.336c0.154,0,4.255,1.667,4.255,1.667
+	c0.321,0.118,0.521,0.453,0.5,0.833c-0.023,0.37-0.236,0.655-0.551,0.738L3.495,13.912z" />
+</svg>

package/src/images/icons/yootheme.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m16.15,5.48c-1.37,0-2.45.61-3.11,1.54-.66-.93-1.74-1.54-3.11-1.54-1.75,0-3.03,1-3.57,2.41v-2.22h-2.01v4.45c0,.85-.31,1.35-1.18,1.35s-1.18-.5-1.18-1.35v-4.45H0v4.86c0,.7.17,1.33.53,1.82.34.49.88.85,1.6,1v3.16h2.1v-3.16c1.28-.28,1.96-1.17,2.1-2.35.52,1.44,1.81,2.48,3.59,2.48,1.37,0,2.45-.61,3.11-1.54.66.93,1.74,1.54,3.11,1.54,2.37,0,3.85-1.82,3.85-4s-1.49-4-3.85-4Zm-6.22,5.99c-1.11,0-1.85-.72-1.85-1.99s.74-1.99,1.85-1.99,1.85.72,1.85,1.99-.74,1.99-1.85,1.99Zm6.22,0c-1.11,0-1.85-.72-1.85-1.99s.74-1.99,1.85-1.99,1.85.72,1.85,1.99-.74,1.99-1.85,1.99Z" />
+</svg>

package/src/images/icons/youtube.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15,4.1c1,0.1,2.3,0,3,0.8c0.8,0.8,0.9,2.1,0.9,3.1C19,9.2,19,10.9,19,12c-0.1,1.1,0,2.4-0.5,3.4c-0.5,1.1-1.4,1.5-2.5,1.6 c-1.2,0.1-8.6,0.1-11,0c-1.1-0.1-2.4-0.1-3.2-1c-0.7-0.8-0.7-2-0.8-3C1,11.8,1,10.1,1,8.9c0-1.1,0-2.4,0.5-3.4C2,4.5,3,4.3,4.1,4.2 C5.3,4.1,12.6,4,15,4.1z M8,7.5v6l5.5-3L8,7.5z" />
+</svg>

package/src/js/api/app.js

@@ -0,0 +1,12 @@
+import * as util from 'uikit-util';
+import { init } from './state';
+
+const App = function (options) {
+    init(this, options);
+};
+
+App.util = util;
+App.options = {};
+App.version = VERSION;
+
+export default App;

package/src/js/api/boot.js

@@ -0,0 +1,84 @@
+import { apply, hasAttr, inBrowser, startsWith, trigger } from 'uikit-util';
+import { components, createComponent, getComponent, getComponents } from './component';
+import { callConnected, callDisconnected } from './hooks';
+
+export default function (App) {
+    if (inBrowser && window.MutationObserver) {
+        if (document.body) {
+            requestAnimationFrame(() => init(App));
+        } else {
+            new MutationObserver((records, observer) => {
+                if (document.body) {
+                    init(App);
+                    observer.disconnect();
+                }
+            }).observe(document.documentElement, { childList: true });
+        }
+    }
+}
+
+function init(App) {
+    trigger(document, 'uikit:init', App);
+
+    if (document.body) {
+        apply(document.body, connect);
+    }
+
+    new MutationObserver(handleMutation).observe(document, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+    });
+
+    App._initialized = true;
+}
+
+function handleMutation(records) {
+    for (const { addedNodes, removedNodes, target, attributeName } of records) {
+        for (const node of addedNodes) {
+            apply(node, connect);
+        }
+
+        for (const node of removedNodes) {
+            apply(node, disconnect);
+        }
+
+        const name = attributeName && getComponentName(attributeName);
+
+        if (name) {
+            if (hasAttr(target, attributeName)) {
+                createComponent(name, target);
+            } else {
+                getComponent(target, name)?.$destroy();
+            }
+        }
+    }
+}
+
+function connect(node) {
+    const components = getComponents(node);
+    for (const name in components) {
+        callConnected(components[name]);
+    }
+
+    for (const attributeName of node.getAttributeNames()) {
+        const name = getComponentName(attributeName);
+        name && createComponent(name, node);
+    }
+}
+
+function disconnect(node) {
+    const components = getComponents(node);
+    for (const name in components) {
+        callDisconnected(components[name]);
+    }
+}
+
+function getComponentName(attribute) {
+    if (startsWith(attribute, 'data-')) {
+        attribute = attribute.slice(5);
+    }
+
+    const cmp = components[attribute];
+    return cmp && (cmp.options || cmp).name;
+}

package/src/js/api/component.js

@@ -0,0 +1,84 @@
+import { $$, camelize, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
+import App from './app';
+
+const PREFIX = 'uk-';
+const DATA = '__uikit__';
+
+export const components = {};
+
+export function component(name, options) {
+    const id = PREFIX + hyphenate(name);
+
+    if (!options) {
+        if (!components[id].options) {
+            components[id] = App.extend(components[id]);
+        }
+
+        return components[id];
+    }
+
+    name = camelize(name);
+
+    App[name] = (element, data) => createComponent(name, element, data);
+
+    const opt = options.options ?? { ...options };
+
+    opt.id = id;
+    opt.name = name;
+
+    opt.install?.(App, opt, name);
+
+    if (App._initialized && !opt.functional) {
+        requestAnimationFrame(() => createComponent(name, `[${id}],[data-${id}]`));
+    }
+
+    return (components[id] = opt);
+}
+
+export function createComponent(name, element, data, ...args) {
+    const Component = component(name);
+
+    return Component.options.functional
+        ? new Component({ data: isPlainObject(element) ? element : [element, data, ...args] })
+        : element
+          ? $$(element).map(init)[0]
+          : init();
+
+    function init(element) {
+        const instance = getComponent(element, name);
+
+        if (instance) {
+            if (data) {
+                instance.$destroy();
+            } else {
+                return instance;
+            }
+        }
+
+        return new Component({ el: element, data });
+    }
+}
+
+export function getComponents(element) {
+    return element?.[DATA] || {};
+}
+
+export function getComponent(element, name) {
+    return getComponents(element)[name];
+}
+
+export function attachToElement(element, instance) {
+    if (!element[DATA]) {
+        element[DATA] = {};
+    }
+
+    element[DATA][instance.$options.name] = instance;
+}
+
+export function detachFromElement(element, instance) {
+    delete element[DATA]?.[instance.$options.name];
+
+    if (isEmpty(element[DATA])) {
+        delete element[DATA];
+    }
+}

package/src/js/api/computed.js

@@ -0,0 +1,80 @@
+import { hasOwn, isUndefined, observeMutation } from 'uikit-util';
+import { callUpdate, prependUpdate } from './update.js';
+import { runWatches } from './watch.js';
+
+export function initComputed(instance) {
+    const { computed } = instance.$options;
+
+    instance._computed = {};
+
+    if (computed) {
+        for (const key in computed) {
+            registerComputed(instance, key, computed[key]);
+        }
+    }
+}
+const mutationOptions = { subtree: true, childList: true };
+export function registerComputed(instance, key, cb) {
+    instance._hasComputed = true;
+    Object.defineProperty(instance, key, {
+        enumerable: true,
+
+        get() {
+            const { _computed, $props, $el } = instance;
+
+            if (!hasOwn(_computed, key)) {
+                _computed[key] = (cb.get || cb).call(instance, $props, $el);
+                if (cb.observe && instance._computedObserver) {
+                    const selector = cb.observe.call(instance, $props);
+                    instance._computedObserver.observe(
+                        ['~', '+', '-'].includes(selector[0])
+                            ? $el.parentElement
+                            : $el.getRootNode(),
+                        mutationOptions,
+                    );
+                }
+            }
+
+            return _computed[key];
+        },
+
+        set(value) {
+            const { _computed } = instance;
+
+            _computed[key] = cb.set ? cb.set.call(instance, value) : value;
+
+            if (isUndefined(_computed[key])) {
+                delete _computed[key];
+            }
+        },
+    });
+}
+
+export function initComputedUpdates(instance) {
+    if (!instance._hasComputed) {
+        return;
+    }
+
+    prependUpdate(instance, {
+        read: () => runWatches(instance, resetComputed(instance)),
+        events: ['resize', 'computed'],
+    });
+
+    instance._computedObserver = observeMutation(
+        instance.$el,
+        () => callUpdate(instance, 'computed'),
+        mutationOptions,
+    );
+
+    instance._disconnect.push(() => {
+        instance._computedObserver.disconnect();
+        instance._computedObserver = null;
+        resetComputed(instance);
+    });
+}
+
+function resetComputed(instance) {
+    const values = { ...instance._computed };
+    instance._computed = {};
+    return values;
+}

package/src/js/api/events.js

@@ -0,0 +1,33 @@
+import { hasOwn, on } from 'uikit-util';
+
+export function initEvents(instance) {
+    for (const event of instance.$options.events || []) {
+        if (hasOwn(event, 'handler')) {
+            registerEvent(instance, event);
+        } else {
+            for (const key in event) {
+                registerEvent(instance, { name: key, handler: event[key] });
+            }
+        }
+    }
+}
+
+function registerEvent(instance, { name, el, handler, capture, passive, delegate, filter, self }) {
+    if (filter && !filter.call(instance, instance)) {
+        return;
+    }
+
+    instance._disconnect.push(
+        on(
+            el ? el.call(instance, instance) : instance.$el,
+            name,
+            delegate?.call(instance, instance),
+            handler.bind(instance),
+            {
+                passive,
+                capture,
+                self,
+            },
+        ),
+    );
+}

package/src/js/api/global.js

@@ -0,0 +1,74 @@
+import { $, apply, isString, parents, toNode } from 'uikit-util';
+import { component, getComponent, getComponents } from './component';
+import { mergeOptions } from './options';
+import { init } from './state';
+import { callUpdate } from './update';
+
+export default function (App) {
+    App.component = component;
+    App.getComponents = getComponents;
+    App.getComponent = getComponent;
+    App.update = update;
+
+    App.use = function (plugin) {
+        if (plugin.installed) {
+            return;
+        }
+
+        plugin.call(null, this);
+        plugin.installed = true;
+
+        return this;
+    };
+
+    App.mixin = function (mixin, component) {
+        component = (isString(component) ? this.component(component) : component) || this;
+        component.options = mergeOptions(component.options, mixin);
+    };
+
+    App.extend = function (options) {
+        options ||= {};
+
+        const Super = this;
+        const Sub = function UIkitComponent(options) {
+            init(this, options);
+        };
+
+        Sub.prototype = Object.create(Super.prototype);
+        Sub.prototype.constructor = Sub;
+        Sub.options = mergeOptions(Super.options, options);
+
+        Sub.super = Super;
+        Sub.extend = Super.extend;
+
+        return Sub;
+    };
+
+    let container;
+    Object.defineProperty(App, 'container', {
+        get() {
+            return container || document.body;
+        },
+
+        set(element) {
+            container = $(element);
+        },
+    });
+}
+
+export function update(element, e) {
+    element = element ? toNode(element) : document.body;
+
+    for (const parentEl of parents(element).reverse()) {
+        updateElement(parentEl, e);
+    }
+
+    apply(element, (element) => updateElement(element, e));
+}
+
+function updateElement(element, e) {
+    const components = getComponents(element);
+    for (const name in components) {
+        callUpdate(components[name], e);
+    }
+}

package/src/js/api/hooks.js

@@ -0,0 +1,51 @@
+import { initComputedUpdates } from './computed';
+import { initEvents } from './events';
+import { log } from './log';
+import { initObservers } from './observer';
+import { initProps, initPropsObserver } from './props';
+import { callUpdate, initUpdates } from './update';
+import { initWatches } from './watch';
+
+export function callHook(instance, hook) {
+    LOG && log(instance, hook);
+    instance.$options[hook]?.forEach((handler) => handler.call(instance));
+}
+
+export function callConnected(instance) {
+    if (instance._connected) {
+        return;
+    }
+
+    initProps(instance);
+
+    callHook(instance, 'beforeConnect');
+    instance._connected = true;
+
+    instance._disconnect = [];
+
+    initEvents(instance);
+    initUpdates(instance);
+    initWatches(instance);
+    initObservers(instance);
+
+    initPropsObserver(instance);
+    initComputedUpdates(instance);
+
+    callHook(instance, 'connected');
+    callUpdate(instance);
+}
+
+export function callDisconnected(instance) {
+    if (!instance._connected) {
+        return;
+    }
+
+    callHook(instance, 'beforeDisconnect');
+
+    instance._disconnect.forEach((off) => off());
+    instance._disconnect = null;
+
+    callHook(instance, 'disconnected');
+
+    instance._connected = false;
+}

package/src/js/api/index.js

@@ -0,0 +1,8 @@
+import App from './app';
+import globalApi from './global';
+import instanceApi from './instance';
+
+globalApi(App);
+instanceApi(App);
+
+export default App;

package/src/js/api/instance.js

@@ -0,0 +1,66 @@
+import { remove } from 'uikit-util';
+import { attachToElement, createComponent, detachFromElement, getComponent } from './component';
+import { update } from './global';
+import { callConnected, callDisconnected, callHook } from './hooks';
+import { callUpdate } from './update';
+
+export default function (App) {
+    App.prototype.$mount = function (el) {
+        const instance = this;
+        attachToElement(el, instance);
+
+        instance.$options.el = el;
+
+        if (el.isConnected) {
+            callConnected(instance);
+        }
+    };
+
+    App.prototype.$destroy = function (removeEl = false) {
+        const instance = this;
+        const { el } = instance.$options;
+
+        if (el) {
+            callDisconnected(instance);
+        }
+
+        callHook(instance, 'destroy');
+
+        detachFromElement(el, instance);
+
+        if (removeEl) {
+            remove(instance.$el);
+        }
+    };
+
+    App.prototype.$create = createComponent;
+    App.prototype.$emit = function (e) {
+        callUpdate(this, e);
+    };
+
+    App.prototype.$update = function (element = this.$el, e) {
+        update(element, e);
+    };
+
+    App.prototype.$reset = function () {
+        callDisconnected(this);
+        callConnected(this);
+    };
+
+    App.prototype.$getComponent = getComponent;
+
+    Object.defineProperties(App.prototype, {
+        $el: {
+            get() {
+                return this.$options.el;
+            },
+        },
+
+        $container: Object.getOwnPropertyDescriptor(App, 'container'),
+    });
+}
+
+let id = 1;
+export function generateId(instance, el = null) {
+    return el?.id || `${instance.$options.id}-${id++}`;
+}

package/src/js/api/log.js

@@ -0,0 +1,10 @@
+export function log(instance, eventName, eventData) {
+    console.log(
+        `🔔 %s:%d %c%s`,
+        instance.$options.name,
+        instance._uid,
+        'font-weight:bold;',
+        eventName,
+        [...(eventData ?? []), instance, instance.$el],
+    );
+}