deploy new demo

dist/index.css

@@ -1 +1,132 @@
-:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}html,body,#app{height:100%}.container{display:flex;justify-content:center;box-sizing:border-box;padding:3rem;height:100%}.content{display:grid;gap:1rem 3rem;grid-template-columns:1fr 1fr;max-width:1000px;align-items:center}.nested-container{height:20rem}.horizontal-container{height:20rem;width:100%}a{display:block;margin:1rem 0}img{width:100%;object-fit:cover}
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  /* color: #646cff; */
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+/* IMPORTANT */
+html,
+body,
+#app {
+  /* pass down scroll handling to content wrap by setting concrete height */
+  height: 100%;
+}
+.container {
+  /* firefox breaks if container is flex... */
+  /* display: flex;
+  justify-content: center; */
+
+  /* margin: auto; */
+
+  /* important when using borders, padding */
+  /* box-sizing: border-box;
+  padding: 3rem; */
+
+  /* ! better not style container at all, only set dimensions */
+
+  /* and setting height of container itself */
+  height: 100%;
+}
+.content-wrap {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+
+  box-sizing: border-box;
+  padding: 3rem;
+}
+.content {
+  display: grid;
+  gap: 1rem 3rem;
+  grid-template-columns: 1fr 1fr;
+
+  max-width: 1000px;
+
+  align-items: center;
+}
+.nested-container {
+  height: 20rem;
+}
+.horizontal-container {
+  width: 100%;
+
+  grid-row: 2;
+  grid-column: 1 / 3;
+}
+.bidirectional-container {
+  height: 10rem;
+  width: 100%;
+
+  grid-row: 3;
+  grid-column: 1 / 3;
+}
+a {
+  display: block;
+  margin: 1rem 0;
+}
+img {
+  width: 100%;
+  object-fit: cover;
+}

notes.md

@@ -19,7 +19,7 @@ use bezier curves for transition and replace weight by duration
 
 but there's an extra empty space for some reason
 
-# so the reason behind infinite scroll seem to be lying in incorrect overflow behavior on firefox, when an element translated up it should not accomodate to its scroll height, but on ff it does
+# so the reason behind infinite scroll seem to be lying in incorrect overflow behavior on firefox, when an element translated up it should not accommodate to its scroll height, but on ff it does
 
 the fix seems to be setting sticky wrapper to overflow: hidden to prevent this behavior
 
@@ -44,6 +44,6 @@ key direction for fixing the infinite scroll bug is to make sticky's child take
 `height: 0` - is not an option because we need a working resize observer
 @todo wait can we just use another wrapper??????????????????????????
 `max-height: 0` - is also not an option, even though with this resize observer works, scroll height is always wrong at the initial rendering. i have no idea why and there's no option to set it to a proper height
-@todo try to set it on scrol?????????????????????????????????????
+@todo try to set it on scroll?????????????????????????????????????
 `position: absolute` - promising option and regular flavor works great for vertical scroll but omni becomes broken for this one due to `width: 0` for sticky to prevent filling additional horizontal space
 it is possible to just add a prop prolly to set horizontal scroll

vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "vite";
+import { defineConfig, LibraryOptions } from "vite";
 import vue from "@vitejs/plugin-vue";
 
 import { resolve } from "path";
@@ -31,14 +31,20 @@ export default defineConfig(({ mode }) => ({
 
   publicDir: mode === "lib" ? false : "public",
 
+  esbuild: {
+    drop: ["console"],
+  },
+
   build: {
-    // minify: false,
-    minify: "terser",
-    terserOptions: {
-      compress: {
-        drop_console: true,
-      },
-    },
+    minify: false,
+    // minify: "terser",
+    // terserOptions: {
+    //   mangle: true,
+    //   compress: {
+    //     drop_console: true,
+    //   },
+    // },
+
     outDir: mode === "lib" ? "dist_lib" : "dist",
 
     emptyOutDir: !process.env.__OMNI,
@@ -58,11 +64,11 @@ export default defineConfig(({ mode }) => ({
 
     lib:
       mode === "lib"
-        ? {
+        ? ({
             entry: resolve(__dirname, "index.js"),
             name: "Smoothie Components Library",
             formats: ["es"],
-          }
+          } as LibraryOptions)
         : undefined,
   },