first implementation of new layout

fet2020/static/js/toolkit-screen@1.0.0.js

@@ -0,0 +1,34 @@
+(() => {
+  // packages/$screen/src/index.js
+  function src_default(Alpine) {
+    let data = Alpine.reactive({screensize: window.innerWidth});
+    const defaultBreakpoints = {
+      xs: 0,
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      "2xl": 1536
+    };
+    const breakpoints = window.AlpineMagicHelpersConfig && window.AlpineMagicHelpersConfig.breakpoints ? window.AlpineMagicHelpersConfig.breakpoints : defaultBreakpoints;
+    let update;
+    window.addEventListener("resize", () => {
+      clearTimeout(update);
+      update = setTimeout(() => data.screensize = window.innerWidth, 150);
+    });
+    Alpine.magic("screen", (el) => (breakpoint) => {
+      let width = data.screensize;
+      if (Number.isInteger(breakpoint))
+        return breakpoint <= width;
+      if (breakpoints[breakpoint] === void 0) {
+        throw Error("Undefined $screen property: " + breakpoint + ". Supported properties: " + Object.keys(breakpoints).join(", "));
+      }
+      return breakpoints[breakpoint] <= width;
+    });
+  }
+
+  // packages/$screen/builds/cdn.js
+  document.addEventListener("alpine:init", () => {
+    window.Alpine.plugin(src_default);
+  });
+})();