liqvued 0.2.0 → 0.2.1

package/README.md

@@ -60,12 +60,13 @@ import { Liqvued } from 'liqvued'
 | bezel           | number              | 22         | Width of the displacement bezel in pixels                                              |
 | thickness       | number              | 42         | Maximum displacement magnitude in pixels                                               |
 | refraction      | number              | 1          | Refraction index multiplier                                                            |
+| refractionMode  | string              | `'edge'`   | Refraction direction mode: `edge`, `center`, or `split`                                |
 | magnification   | number              | 0          | Center magnification amount. Positive values enlarge, negative values shrink           |
 | magnificationFocus | number           | 0.82       | Focus radius of the magnification area. Lower values concentrate the effect near center |
 | blur            | number              | 0.4        | CSS backdrop-filter blur amount                                                        |
 | surface         | string              | `'convex'` | Glass surface profile shape                                                            |
 | specularOpacity | number              | 0.45       | Opacity of the specular highlight                                                      |
-| glareAngle      | number              | -60        | Light source angle in degrees for specular highlight                                   |
+| glareAngle      | number \| false     | -60        | Light source angle in degrees for specular highlight. Set `false` to disable           |
 | glassBackground | string              | —          | Glass panel background color (auto-derived from `asProps.color` when available)        |
 | fallbackOnly    | boolean             | `false`    | When `true`, disables the SVG displacement effect and uses only CSS blur               |
 | as              | string \| Component | `'div'`    | HTML tag or Vue component to render as (rendered as a child of the glass root)         |
@@ -83,6 +84,12 @@ import { Liqvued } from 'liqvued'
 - `noise` — irregular organic edge distortion
 - `asymmetric` — biased profile with more weight toward one side of the edge band
 
+### Refraction Modes
+
+- `edge` — original behavior; displacement follows the rounded edge normal
+- `center` — displacement points inward from each edge toward the shape centerline
+- `split` — outer and inner bezel halves bend in opposite directions with a neutral midpoint
+
 ## Dynamic Element Rendering
 
 Use the `as` prop to render the glass effect on any element or component:
@@ -106,7 +113,7 @@ The fallback applies `backdrop-filter: blur(12px)` with a subtle border and shad
 
 ## How It Works
 
-The component generates a per-pixel displacement map as an RGBA PNG (red/green channels encode X/Y displacement vectors), injects it into an SVG `<feDisplacementMap>` filter, and applies it via `backdrop-filter` combined with CSS blur. The surface profile functions define the edge refraction slope along the bezel, while `magnification` and `magnificationFocus` control an optional center lens effect. A separate specular highlight map is generated and composited via `feBlend` to simulate surface lighting.
+The component generates a per-pixel displacement map as an RGBA PNG (red/green channels encode X/Y displacement vectors), injects it into an SVG `<feDisplacementMap>` filter, and applies it via `backdrop-filter` combined with CSS blur. The surface profile functions define the edge refraction strength along the bezel, while `refractionMode` controls the displacement direction. `magnification` and `magnificationFocus` control an optional center lens effect. A separate specular highlight map is generated and composited via `feBlend` to simulate surface lighting.
 
 ## License
 

package/dist/liqvued.css

@@ -1,2 +1,2 @@
-.liquid-glass[data-v-56a7fa97]{isolation:isolate;position:relative;overflow:hidden}.liquid-glass__svg[data-v-56a7fa97]{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}@supports not ((-webkit-backdrop-filter:url("#x")) or (backdrop-filter:url("#x"))){.liquid-glass[data-v-56a7fa97]{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
+.liquid-glass[data-v-5607a45c]{isolation:isolate;position:relative;overflow:hidden}.liquid-glass__svg[data-v-5607a45c]{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}@supports not ((-webkit-backdrop-filter:url("#x")) or (backdrop-filter:url("#x"))){.liquid-glass[data-v-5607a45c]{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
 /*$vite$:1*/

package/dist/liqvued.mjs

@@ -1,56 +1,78 @@
-import { computed as C, createBlock as he, createCommentVNode as fe, createElementBlock as Z, createElementVNode as k, defineComponent as pe, guardReactiveProps as ve, inject as ge, nextTick as ee, normalizeProps as me, normalizeStyle as Me, onBeforeUnmount as be, onMounted as ye, openBlock as W, provide as xe, ref as w, renderSlot as _e, resolveDynamicComponent as ke, unref as we, watch as Ie, withCtx as Re } from "vue";
-function q(r, a, s, o, l) {
-  const b = Math.min(l, Math.min(s, o) / 2), y = s / 2 - b, x = o / 2 - b, c = Math.abs(r - s / 2) - y, S = Math.abs(a - o / 2) - x;
-  return -(Math.min(Math.max(c, S), 0) + Math.hypot(Math.max(c, 0), Math.max(S, 0)) - b);
+import { computed as C, createBlock as he, createCommentVNode as pe, createElementBlock as ee, createElementVNode as _, defineComponent as ve, guardReactiveProps as ge, inject as me, nextTick as te, normalizeProps as Me, normalizeStyle as ye, onBeforeUnmount as be, onMounted as xe, openBlock as N, provide as _e, ref as k, renderSlot as ke, resolveDynamicComponent as we, unref as Se, watch as Be, withCtx as Ie } from "vue";
+function Re(n, t, i, r, c, y, g) {
+  if (n === "center") return t;
+  const h = {
+    x: -t.x,
+    y: -t.y
+  };
+  if (n === "split") {
+    const o = g < 0.5 ? -1 : 1;
+    return {
+      x: h.x * o,
+      y: h.y * o
+    };
+  }
+  return h;
+}
+function $e(n, t) {
+  return n !== "split" ? 1 : Math.min(1, Math.abs(t - 0.5) * 2);
+}
+function q(n, t, i, r, c) {
+  const y = Math.min(c, Math.min(i, r) / 2), g = i / 2 - y, h = r / 2 - y, o = Math.abs(n - i / 2) - g, I = Math.abs(t - r / 2) - h;
+  return -(Math.min(Math.max(o, I), 0) + Math.hypot(Math.max(o, 0), Math.max(I, 0)) - y);
 }
-function Se(r, a, s, o, l) {
-  const y = q(r - 1.5, a, s, o, l) - q(r + 1.5, a, s, o, l), x = q(r, a - 1.5, s, o, l) - q(r, a + 1.5, s, o, l), c = Math.hypot(y, x);
-  return c < 1e-10 ? {
+function Ce(n, t, i, r, c) {
+  const g = q(n - 1.5, t, i, r, c) - q(n + 1.5, t, i, r, c), h = q(n, t - 1.5, i, r, c) - q(n, t + 1.5, i, r, c), o = Math.hypot(g, h);
+  return o < 1e-10 ? {
     x: 0,
     y: -1
   } : {
-    x: y / c,
-    y: x / c
+    x: g / o,
+    y: h / o
   };
 }
-var Be = {
+var qe = {
   key: 0,
   class: "liquid-glass__svg",
   "aria-hidden": "true"
-}, $e = [
+}, Pe = [
   "href",
   "width",
   "height"
-], Ce = ["scale"], qe = [
+], Fe = ["scale"], Oe = [
   "href",
   "width",
   "height"
-], Pe = /* @__PURE__ */ pe({
+], De = /* @__PURE__ */ ve({
   __name: "Liqvued",
   props: {
     as: { default: "div" },
     asProps: { default: () => ({}) },
     radius: { default: 32 },
-    borderRadius: {},
+    borderRadius: { default: void 0 },
     bezel: { default: 22 },
     thickness: { default: 42 },
     refraction: { default: 1 },
+    refractionMode: { default: "edge" },
     magnification: { default: 0 },
     magnificationFocus: { default: 0.82 },
     blur: { default: 0.4 },
     surface: { default: "convex" },
     specularOpacity: { default: 0.45 },
-    glareAngle: { default: -60 },
+    glareAngle: {
+      type: [Number, Boolean],
+      default: -60
+    },
     glassBackground: { default: void 0 },
     fallbackOnly: {
       type: Boolean,
       default: !1
     }
   },
-  setup(r) {
-    const a = r, s = w(null), o = w(1), l = w(1), b = w(""), y = w(""), x = w(1), c = typeof CSS < "u" && typeof navigator < "u" && CSS.supports?.("backdrop-filter", "url(#x)") && /Chrome/.test(navigator.userAgent), S = `${`lg-${Math.random().toString(36).slice(2)}`}-filter`, N = ge("_liqvued", !1);
-    xe("_liqvued", !0);
-    const I = w(!1), V = {
+  setup(n) {
+    const t = n, i = k(null), r = k(1), c = k(1), y = k(""), g = k(""), h = k(1), o = typeof CSS < "u" && typeof navigator < "u" && CSS.supports?.("backdrop-filter", "url(#x)") && /Chrome/.test(navigator.userAgent), I = `${`lg-${Math.random().toString(36).slice(2)}`}-filter`, W = me("_liqvued", !1);
+    _e("_liqvued", !0);
+    const w = k(!1), V = {
       0: 0,
       sm: 4,
       md: 8,
@@ -61,106 +83,109 @@ var Be = {
       shaped: 16
     };
     function j() {
-      return s.value;
+      return i.value;
     }
-    function i(e, t = 0, n = 1) {
-      return Math.max(t, Math.min(n, e));
+    function u(e, a = 0, s = 1) {
+      return Math.max(a, Math.min(s, e));
     }
-    function B(e) {
-      return e = i(e), e * e * e * (e * (e * 6 - 15) + 10);
+    function R(e) {
+      return e = u(e), e * e * e * (e * (e * 6 - 15) + 10);
     }
     function P(e) {
-      return Math.pow(1 - Math.pow(1 - i(e), 4), 1 / 4);
+      return Math.pow(1 - Math.pow(1 - u(e), 4), 1 / 4);
     }
-    function te(e, t, n) {
-      return i(e + Math.sin(i(e) * Math.PI * t) * n);
+    function ae(e, a, s) {
+      return u(e + Math.sin(u(e) * Math.PI * a) * s);
     }
-    function ae(e) {
-      const t = i(e);
-      return i(t + Math.sin(t * 39.1) * 0.06 + Math.sin(t * 91.7) * 0.035);
+    function ne(e) {
+      const a = u(e);
+      return u(a + Math.sin(a * 39.1) * 0.06 + Math.sin(a * 91.7) * 0.035);
     }
-    function ne(e, t, n, f, m, R) {
-      const v = n / 2, g = f / 2, $ = Math.max(1, n / 2), M = Math.max(1, f / 2), z = (e - v) / $, D = (t - g) / M, u = Math.hypot(z, D), d = i(R, 0.2, 1.4), h = Math.pow(B(1 - i(u / d)), 1.6), p = m >= 0 ? 1 + m * h : 1 / (1 + Math.abs(m) * h);
+    function re(e, a, s, v, b, S) {
+      const m = s / 2, M = v / 2, $ = Math.max(1, s / 2), x = Math.max(1, v / 2), D = (e - m) / $, z = (a - M) / x, l = Math.hypot(D, z), d = u(S, 0.2, 1.4), p = Math.pow(R(1 - u(l / d)), 1.6), f = b >= 0 ? 1 + b * p : 1 / (1 + Math.abs(b) * p);
       return {
-        x: (e - v) / p - (e - v),
-        y: (t - g) / p - (t - g)
+        x: (e - m) / f - (e - m),
+        y: (a - M) / f - (a - M)
       };
     }
     function H(e) {
-      const t = i(e);
-      switch (a.surface) {
+      const a = u(e);
+      switch (t.surface) {
         case "concave":
         case "bowl":
-          return 1 - P(t);
+          return 1 - P(a);
         case "lip":
-          return P(t) * (1 - B(t)) + (1 - P(t)) * B(t);
+          return P(a) * (1 - R(a)) + (1 - P(a)) * R(a);
         case "bevel":
-          return t;
+          return a;
         case "saddle":
-          return 0.5 + Math.sin((t - 0.5) * Math.PI) * 0.5;
+          return 0.5 + Math.sin((a - 0.5) * Math.PI) * 0.5;
         case "ripple":
-          return te(t, 3, 0.12);
+          return ae(a, 3, 0.12);
         case "noise":
-          return ae(t);
+          return ne(a);
         case "asymmetric":
-          return i(Math.pow(t, 0.65) * 0.65 + B(t) * 0.35);
+          return u(Math.pow(a, 0.65) * 0.65 + R(a) * 0.35);
         case "convex":
-          return P(t);
+          return P(a);
       }
     }
-    function re(e) {
+    function oe(e) {
       return (H(e + 1e-3) - H(e - 1e-3)) / (2 * 1e-3);
     }
-    function oe(e) {
-      const f = Math.atan(e), m = 1 / 1.5 * Math.sin(f), R = Math.asin(i(m, -1, 1));
-      return Math.tan(f - R);
+    function se(e) {
+      const v = Math.atan(e), b = 1 / 1.5 * Math.sin(v), S = Math.asin(u(b, -1, 1));
+      return Math.tan(v - S);
     }
     function J(e) {
       return e.toDataURL("image/png");
     }
-    function T() {
-      if (a.fallbackOnly) return;
-      const e = Math.max(1, Math.round(o.value)), t = Math.max(1, Math.round(l.value)), n = document.createElement("canvas");
-      n.width = e, n.height = t;
-      const f = document.createElement("canvas");
-      f.width = e, f.height = t;
-      const m = n.getContext("2d"), R = f.getContext("2d"), v = m.createImageData(e, t), g = R.createImageData(e, t), $ = [];
-      let M = 1;
-      const z = {
-        x: Math.cos(a.glareAngle * Math.PI / 180),
-        y: Math.sin(a.glareAngle * Math.PI / 180)
-      }, D = Math.max(1, Math.min(a.bezel, Math.min(e, t) * 0.28));
-      for (let u = 0; u < t; u++) for (let d = 0; d < e; d++) {
-        const h = q(d, u, e, t, F.value), p = i(h / D);
+    function A() {
+      if (t.fallbackOnly) return;
+      const e = Math.max(1, Math.round(r.value)), a = Math.max(1, Math.round(c.value)), s = document.createElement("canvas");
+      s.width = e, s.height = a;
+      const v = document.createElement("canvas");
+      v.width = e, v.height = a;
+      const b = s.getContext("2d"), S = v.getContext("2d"), m = b.createImageData(e, a), M = S.createImageData(e, a), $ = [];
+      let x = 1;
+      const D = t.glareAngle !== !1 ? {
+        x: Math.cos(t.glareAngle * Math.PI / 180),
+        y: Math.sin(t.glareAngle * Math.PI / 180)
+      } : {
+        x: 0,
+        y: 0
+      }, z = Math.max(1, Math.min(t.bezel, Math.min(e, a) * 0.28));
+      for (let l = 0; l < a; l++) for (let d = 0; d < e; d++) {
+        const p = q(d, l, e, a, F.value), f = u(p / z);
         let L = 0, E = 0, X = 0;
-        if (h >= 0 && h < D) {
-          const _ = Se(d, u, e, t, F.value), Y = oe(re(p)) * a.thickness * B(1 - p) * a.refraction;
-          L = -_.x * Y, E = -_.y * Y, M = Math.max(M, Math.abs(L), Math.abs(E));
-          const de = i(_.x * z.x + _.y * z.y, 0, 1);
-          X = Math.pow(de, 18) * a.specularOpacity;
+        if (p >= 0 && p < z) {
+          const B = Ce(d, l, e, a, F.value), Y = se(oe(f)) * t.thickness * R(1 - f) * $e(t.refractionMode, f) * t.refraction, Z = Re(t.refractionMode, B, d, l, e, a, f);
+          L = Z.x * Y, E = Z.y * Y, x = Math.max(x, Math.abs(L), Math.abs(E));
+          const fe = u(B.x * D.x + B.y * D.y, 0, 1);
+          X = Math.pow(fe, 18) * t.specularOpacity;
         }
-        if (a.magnification !== 0 && h >= 0) {
-          const _ = ne(d, u, e, t, a.magnification, a.magnificationFocus);
-          L += _.x, E += _.y;
+        if (t.magnification !== 0 && p >= 0) {
+          const B = re(d, l, e, a, t.magnification, t.magnificationFocus);
+          L += B.x, E += B.y;
         }
         $.push([L, E]);
-        const U = (u * e + d) * 4, ue = Math.round(X * 255);
-        g.data[U] = 255, g.data[U + 1] = 255, g.data[U + 2] = 255, g.data[U + 3] = ue;
+        const U = (l * e + d) * 4, de = Math.round(X * 255);
+        M.data[U] = 255, M.data[U + 1] = 255, M.data[U + 2] = 255, M.data[U + 3] = de;
       }
-      M = $.reduce((u, [d, h]) => Math.max(u, Math.abs(d), Math.abs(h)), 1), $.forEach(([u, d], h) => {
-        const p = h * 4;
-        v.data[p] = Math.round(128 + u / M * 127), v.data[p + 1] = Math.round(128 + d / M * 127), v.data[p + 2] = 128, v.data[p + 3] = 255;
-      }), m.putImageData(v, 0, 0), R.putImageData(g, 0, 0), b.value = J(n), y.value = J(f), x.value = M;
+      x = $.reduce((l, [d, p]) => Math.max(l, Math.abs(d), Math.abs(p)), 1), $.forEach(([l, d], p) => {
+        const f = p * 4;
+        m.data[f] = Math.round(128 + l / x * 127), m.data[f + 1] = Math.round(128 + d / x * 127), m.data[f + 2] = 128, m.data[f + 3] = 255;
+      }), b.putImageData(m, 0, 0), S.putImageData(M, 0, 0), y.value = J(s), g.value = J(v), h.value = x;
     }
     function K() {
       const e = j();
-      e && (o.value = Math.max(1, e.offsetWidth), l.value = Math.max(1, e.offsetHeight));
+      e && (r.value = Math.max(1, e.offsetWidth), c.value = Math.max(1, e.offsetHeight));
     }
-    const Q = c ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.22)", F = C(() => {
-      if (a.radius !== 32) return a.radius;
-      const e = a.asProps;
-      return typeof e.rounded == "string" && e.rounded in V ? V[e.rounded] : a.radius;
-    }), se = C(() => a.borderRadius || `${F.value}px`), le = /* @__PURE__ */ new Set([
+    const Q = o ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.22)", F = C(() => {
+      if (t.radius !== 32) return t.radius;
+      const e = t.asProps;
+      return typeof e.rounded == "string" && e.rounded in V ? V[e.rounded] : t.radius;
+    }), ie = C(() => t.borderRadius || `${F.value}px`), ce = /* @__PURE__ */ new Set([
       "primary",
       "secondary",
       "accent",
@@ -171,62 +196,63 @@ var Be = {
       "surface",
       "background"
     ]);
-    function ce(e, t) {
-      if (le.has(e)) return `rgba(var(--v-theme-${e}), ${t})`;
+    function ue(e, a) {
+      if (ce.has(e)) return `rgba(var(--v-theme-${e}), ${a})`;
       if (e.startsWith("#")) {
-        const n = e.replace("#", "");
-        return `rgba(${parseInt(n.slice(0, 2), 16)}, ${parseInt(n.slice(2, 4), 16)}, ${parseInt(n.slice(4, 6), 16)}, ${t})`;
+        const s = e.replace("#", "");
+        return `rgba(${parseInt(s.slice(0, 2), 16)}, ${parseInt(s.slice(2, 4), 16)}, ${parseInt(s.slice(4, 6), 16)}, ${a})`;
       }
-      return e.startsWith("rgb") ? e.replace("rgb(", "rgba(").replace(")", `, ${t})`) : Q;
+      return e.startsWith("rgb") ? e.replace("rgb(", "rgba(").replace(")", `, ${a})`) : Q;
     }
-    const A = C(() => {
-      if (a.glassBackground !== void 0) return a.glassBackground;
-      const e = a.asProps;
-      return typeof e.color == "string" ? ce(e.color, 0.6) : Q;
-    }), O = C(() => a.fallbackOnly || !c ? "blur(12px)" : `url(#${S}) blur(${a.blur}px)`), ie = C(() => ({
-      borderRadius: `${se.value}`,
-      ...A.value !== void 0 ? { backgroundColor: A.value } : {},
-      ...A.value !== void 0 ? { boxShadow: ["inset 0 0 0 1px rgba(255, 255, 255, 0.28)", "0 18px 48px rgba(0, 0, 0, 0.18)"].join(", ") } : {},
-      ...I.value && !N ? {
+    const T = C(() => {
+      if (t.glassBackground !== void 0) return t.glassBackground;
+      const e = t.asProps;
+      return typeof e.color == "string" ? ue(e.color, 0.6) : Q;
+    }), O = C(() => t.fallbackOnly || !o ? "blur(12px)" : `url(#${I}) blur(${t.blur}px)`), le = C(() => ({
+      borderRadius: `${ie.value}`,
+      ...T.value !== void 0 ? { backgroundColor: T.value } : {},
+      ...T.value !== void 0 ? { boxShadow: ["inset 0 0 0 1px rgba(255, 255, 255, 0.28)", "0 18px 48px rgba(0, 0, 0, 0.18)"].join(", ") } : {},
+      ...w.value && !W ? {
         backdropFilter: O.value,
         WebkitBackdropFilter: O.value
       } : {},
-      ...I.value && N && !c ? {
+      ...w.value && W && !o ? {
         backdropFilter: O.value,
         WebkitBackdropFilter: O.value
       } : {}
     }));
     let G = null;
-    return ye(async () => {
-      if (await ee(), c) {
-        K(), T(), await ee(), I.value = !0, G = new ResizeObserver(() => {
-          K(), T(), I.value = !0;
+    return xe(async () => {
+      if (await te(), o) {
+        K(), A(), await te(), w.value = !0, G = new ResizeObserver(() => {
+          K(), A(), w.value = !0;
         });
         const e = j();
         e && G.observe(e);
-      } else I.value = !0;
-    }), Ie(() => [
+      } else w.value = !0;
+    }), Be(() => [
       F.value,
-      a.bezel,
-      a.thickness,
-      a.refraction,
-      a.magnification,
-      a.magnificationFocus,
-      a.surface,
-      a.specularOpacity,
-      a.glareAngle,
-      a.fallbackOnly
+      t.bezel,
+      t.thickness,
+      t.refraction,
+      t.refractionMode,
+      t.magnification,
+      t.magnificationFocus,
+      t.surface,
+      t.specularOpacity,
+      t.glareAngle,
+      t.fallbackOnly
     ], () => {
-      c && T(), I.value = !0;
+      o && A(), w.value = !0;
     }), be(() => {
       G?.disconnect();
-    }), (e, t) => (W(), Z("div", {
+    }), (e, a) => (N(), ee("div", {
       ref_key: "root",
-      ref: s,
+      ref: i,
       class: "liquid-glass",
-      style: Me(ie.value)
-    }, [we(c) ? (W(), Z("svg", Be, [k("defs", null, [k("filter", {
-      id: S,
+      style: ye(le.value)
+    }, [Se(o) ? (N(), ee("svg", qe, [_("defs", null, [_("filter", {
+      id: I,
       "color-interpolation-filters": "sRGB",
       filterUnits: "userSpaceOnUse",
       x: "0",
@@ -234,53 +260,53 @@ var Be = {
       width: "10000",
       height: "10000"
     }, [
-      k("feImage", {
-        href: b.value,
+      _("feImage", {
+        href: y.value,
         x: "0",
         y: "0",
-        width: o.value,
-        height: l.value,
+        width: r.value,
+        height: c.value,
         result: "displacement_map"
-      }, null, 8, $e),
-      t[0] || (t[0] = k("feGaussianBlur", {
+      }, null, 8, Pe),
+      a[0] || (a[0] = _("feGaussianBlur", {
         in: "displacement_map",
         stdDeviation: "2",
         result: "smooth_disp"
       }, null, -1)),
-      k("feDisplacementMap", {
+      _("feDisplacementMap", {
         in: "SourceGraphic",
         in2: "smooth_disp",
-        scale: x.value,
+        scale: h.value,
         xChannelSelector: "R",
         yChannelSelector: "G",
         result: "refracted"
-      }, null, 8, Ce),
-      k("feImage", {
-        href: y.value,
+      }, null, 8, Fe),
+      _("feImage", {
+        href: g.value,
         x: "0",
         y: "0",
-        width: o.value,
-        height: l.value,
+        width: r.value,
+        height: c.value,
         result: "specular"
-      }, null, 8, qe),
-      t[1] || (t[1] = k("feBlend", {
+      }, null, 8, Oe),
+      a[1] || (a[1] = _("feBlend", {
         in: "refracted",
         in2: "specular",
         mode: "screen"
       }, null, -1))
-    ])])])) : fe("", !0), (W(), he(ke(r.as), me(ve(r.asProps)), {
-      default: Re(() => [_e(e.$slots, "default", {}, void 0, !0)]),
+    ])])])) : pe("", !0), (N(), he(we(n.as), Me(ge(n.asProps)), {
+      default: Ie(() => [ke(e.$slots, "default", {}, void 0, !0)]),
       _: 3
     }, 16))], 4));
   }
-}), Fe = (r, a) => {
-  const s = r.__vccOpts || r;
-  for (const [o, l] of a) s[o] = l;
-  return s;
-}, Oe = /* @__PURE__ */ Fe(Pe, [["__scopeId", "data-v-56a7fa97"]]), De = { install(r) {
-  r.component("Liqvued", Oe);
+}), ze = (n, t) => {
+  const i = n.__vccOpts || n;
+  for (const [r, c] of t) i[r] = c;
+  return i;
+}, Le = /* @__PURE__ */ ze(De, [["__scopeId", "data-v-5607a45c"]]), Ue = { install(n) {
+  n.component("Liqvued", Le);
 } };
 export {
-  Oe as Liqvued,
-  De as default
+  Le as Liqvued,
+  Ue as default
 };

package/dist/liqvued.umd.js

@@ -1 +1 @@
-(function(v,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(v=typeof globalThis<"u"?globalThis:v||self,t(v.Liqvued={},v.Vue))})(this,function(v,t){Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function I(o,n,c,s,l){const x=Math.min(l,Math.min(c,s)/2),_=c/2-x,k=s/2-x,i=Math.abs(o-c/2)-_,R=Math.abs(n-s/2)-k;return-(Math.min(Math.max(i,R),0)+Math.hypot(Math.max(i,0),Math.max(R,0))-x)}function Y(o,n,c,s,l){const _=I(o-1.5,n,c,s,l)-I(o+1.5,n,c,s,l),k=I(o,n-1.5,c,s,l)-I(o,n+1.5,c,s,l),i=Math.hypot(_,k);return i<1e-10?{x:0,y:-1}:{x:_/i,y:k/i}}var Z={key:0,class:"liquid-glass__svg","aria-hidden":"true"},ee=["href","width","height"],te=["scale"],ae=["href","width","height"],ne=(0,t.defineComponent)({__name:"Liqvued",props:{as:{default:"div"},asProps:{default:()=>({})},radius:{default:32},borderRadius:{},bezel:{default:22},thickness:{default:42},refraction:{default:1},magnification:{default:0},magnificationFocus:{default:.82},blur:{default:.4},surface:{default:"convex"},specularOpacity:{default:.45},glareAngle:{default:-60},glassBackground:{default:void 0},fallbackOnly:{type:Boolean,default:!1}},setup(o){const n=o,c=(0,t.ref)(null),s=(0,t.ref)(1),l=(0,t.ref)(1),x=(0,t.ref)(""),_=(0,t.ref)(""),k=(0,t.ref)(1),i=typeof CSS<"u"&&typeof navigator<"u"&&CSS.supports?.("backdrop-filter","url(#x)")&&/Chrome/.test(navigator.userAgent),R=`${`lg-${Math.random().toString(36).slice(2)}`}-filter`,A=(0,t.inject)("_liqvued",!1);(0,t.provide)("_liqvued",!0);const B=(0,t.ref)(!1),G={0:0,sm:4,md:8,lg:12,xl:16,pill:9999,circle:9999,shaped:16};function W(){return c.value}function u(e,a=0,r=1){return Math.max(a,Math.min(r,e))}function E(e){return e=u(e),e*e*e*(e*(e*6-15)+10)}function q(e){return Math.pow(1-Math.pow(1-u(e),4),1/4)}function se(e,a,r){return u(e+Math.sin(u(e)*Math.PI*a)*r)}function ce(e){const a=u(e);return u(a+Math.sin(a*39.1)*.06+Math.sin(a*91.7)*.035)}function le(e,a,r,p,b,S){const g=r/2,M=p/2,$=Math.max(1,r/2),y=Math.max(1,p/2),O=(e-g)/$,V=(a-M)/y,d=Math.hypot(O,V),f=u(S,.2,1.4),h=Math.pow(E(1-u(d/f)),1.6),m=b>=0?1+b*h:1/(1+Math.abs(b)*h);return{x:(e-g)/m-(e-g),y:(a-M)/m-(a-M)}}function j(e){const a=u(e);switch(n.surface){case"concave":case"bowl":return 1-q(a);case"lip":return q(a)*(1-E(a))+(1-q(a))*E(a);case"bevel":return a;case"saddle":return .5+Math.sin((a-.5)*Math.PI)*.5;case"ripple":return se(a,3,.12);case"noise":return ce(a);case"asymmetric":return u(Math.pow(a,.65)*.65+E(a)*.35);case"convex":return q(a)}}function ie(e){return(j(e+.001)-j(e-.001))/(2*.001)}function ue(e){const p=Math.atan(e),b=1/1.5*Math.sin(p),S=Math.asin(u(b,-1,1));return Math.tan(p-S)}function H(e){return e.toDataURL("image/png")}function L(){if(n.fallbackOnly)return;const e=Math.max(1,Math.round(s.value)),a=Math.max(1,Math.round(l.value)),r=document.createElement("canvas");r.width=e,r.height=a;const p=document.createElement("canvas");p.width=e,p.height=a;const b=r.getContext("2d"),S=p.getContext("2d"),g=b.createImageData(e,a),M=S.createImageData(e,a),$=[];let y=1;const O={x:Math.cos(n.glareAngle*Math.PI/180),y:Math.sin(n.glareAngle*Math.PI/180)},V=Math.max(1,Math.min(n.bezel,Math.min(e,a)*.28));for(let d=0;d<a;d++)for(let f=0;f<e;f++){const h=I(f,d,e,a,C.value),m=u(h/V);let F=0,N=0,Q=0;if(h>=0&&h<V){const w=Y(f,d,e,a,C.value),X=ue(ie(m))*n.thickness*E(1-m)*n.refraction;F=-w.x*X,N=-w.y*X,y=Math.max(y,Math.abs(F),Math.abs(N));const ge=u(w.x*O.x+w.y*O.y,0,1);Q=Math.pow(ge,18)*n.specularOpacity}if(n.magnification!==0&&h>=0){const w=le(f,d,e,a,n.magnification,n.magnificationFocus);F+=w.x,N+=w.y}$.push([F,N]);const T=(d*e+f)*4,me=Math.round(Q*255);M.data[T]=255,M.data[T+1]=255,M.data[T+2]=255,M.data[T+3]=me}y=$.reduce((d,[f,h])=>Math.max(d,Math.abs(f),Math.abs(h)),1),$.forEach(([d,f],h)=>{const m=h*4;g.data[m]=Math.round(128+d/y*127),g.data[m+1]=Math.round(128+f/y*127),g.data[m+2]=128,g.data[m+3]=255}),b.putImageData(g,0,0),S.putImageData(M,0,0),x.value=H(r),_.value=H(p),k.value=y}function J(){const e=W();e&&(s.value=Math.max(1,e.offsetWidth),l.value=Math.max(1,e.offsetHeight))}const K=i?"rgba(255, 255, 255, 0.08)":"rgba(255, 255, 255, 0.22)",C=(0,t.computed)(()=>{if(n.radius!==32)return n.radius;const e=n.asProps;return typeof e.rounded=="string"&&e.rounded in G?G[e.rounded]:n.radius}),de=(0,t.computed)(()=>n.borderRadius||`${C.value}px`),fe=new Set(["primary","secondary","accent","info","warning","error","success","surface","background"]);function he(e,a){if(fe.has(e))return`rgba(var(--v-theme-${e}), ${a})`;if(e.startsWith("#")){const r=e.replace("#","");return`rgba(${parseInt(r.slice(0,2),16)}, ${parseInt(r.slice(2,4),16)}, ${parseInt(r.slice(4,6),16)}, ${a})`}return e.startsWith("rgb")?e.replace("rgb(","rgba(").replace(")",`, ${a})`):K}const z=(0,t.computed)(()=>{if(n.glassBackground!==void 0)return n.glassBackground;const e=n.asProps;return typeof e.color=="string"?he(e.color,.6):K}),P=(0,t.computed)(()=>n.fallbackOnly||!i?"blur(12px)":`url(#${R}) blur(${n.blur}px)`),pe=(0,t.computed)(()=>({borderRadius:`${de.value}`,...z.value!==void 0?{backgroundColor:z.value}:{},...z.value!==void 0?{boxShadow:["inset 0 0 0 1px rgba(255, 255, 255, 0.28)","0 18px 48px rgba(0, 0, 0, 0.18)"].join(", ")}:{},...B.value&&!A?{backdropFilter:P.value,WebkitBackdropFilter:P.value}:{},...B.value&&A&&!i?{backdropFilter:P.value,WebkitBackdropFilter:P.value}:{}}));let D=null;return(0,t.onMounted)(async()=>{if(await(0,t.nextTick)(),i){J(),L(),await(0,t.nextTick)(),B.value=!0,D=new ResizeObserver(()=>{J(),L(),B.value=!0});const e=W();e&&D.observe(e)}else B.value=!0}),(0,t.watch)(()=>[C.value,n.bezel,n.thickness,n.refraction,n.magnification,n.magnificationFocus,n.surface,n.specularOpacity,n.glareAngle,n.fallbackOnly],()=>{i&&L(),B.value=!0}),(0,t.onBeforeUnmount)(()=>{D?.disconnect()}),(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{ref_key:"root",ref:c,class:"liquid-glass",style:(0,t.normalizeStyle)(pe.value)},[(0,t.unref)(i)?((0,t.openBlock)(),(0,t.createElementBlock)("svg",Z,[(0,t.createElementVNode)("defs",null,[(0,t.createElementVNode)("filter",{id:R,"color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse",x:"0",y:"0",width:"10000",height:"10000"},[(0,t.createElementVNode)("feImage",{href:x.value,x:"0",y:"0",width:s.value,height:l.value,result:"displacement_map"},null,8,ee),a[0]||(a[0]=(0,t.createElementVNode)("feGaussianBlur",{in:"displacement_map",stdDeviation:"2",result:"smooth_disp"},null,-1)),(0,t.createElementVNode)("feDisplacementMap",{in:"SourceGraphic",in2:"smooth_disp",scale:k.value,xChannelSelector:"R",yChannelSelector:"G",result:"refracted"},null,8,te),(0,t.createElementVNode)("feImage",{href:_.value,x:"0",y:"0",width:s.value,height:l.value,result:"specular"},null,8,ae),a[1]||(a[1]=(0,t.createElementVNode)("feBlend",{in:"refracted",in2:"specular",mode:"screen"},null,-1))])])])):(0,t.createCommentVNode)("",!0),((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(o.as),(0,t.normalizeProps)((0,t.guardReactiveProps)(o.asProps)),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,"default",{},void 0,!0)]),_:3},16))],4))}}),re=(o,n)=>{const c=o.__vccOpts||o;for(const[s,l]of n)c[s]=l;return c},U=re(ne,[["__scopeId","data-v-56a7fa97"]]),oe={install(o){o.component("Liqvued",U)}};v.Liqvued=U,v.default=oe});
+(function(b,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(b=typeof globalThis<"u"?globalThis:b||self,n(b.Liqvued={},b.Vue))})(this,function(b,n){Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function Z(r,t,c,o,l,x,M){if(r==="center")return t;const p={x:-t.x,y:-t.y};if(r==="split"){const s=M<.5?-1:1;return{x:p.x*s,y:p.y*s}}return p}function ee(r,t){return r!=="split"?1:Math.min(1,Math.abs(t-.5)*2)}function I(r,t,c,o,l){const x=Math.min(l,Math.min(c,o)/2),M=c/2-x,p=o/2-x,s=Math.abs(r-c/2)-M,R=Math.abs(t-o/2)-p;return-(Math.min(Math.max(s,R),0)+Math.hypot(Math.max(s,0),Math.max(R,0))-x)}function te(r,t,c,o,l){const M=I(r-1.5,t,c,o,l)-I(r+1.5,t,c,o,l),p=I(r,t-1.5,c,o,l)-I(r,t+1.5,c,o,l),s=Math.hypot(M,p);return s<1e-10?{x:0,y:-1}:{x:M/s,y:p/s}}var ae={key:0,class:"liquid-glass__svg","aria-hidden":"true"},ne=["href","width","height"],re=["scale"],oe=["href","width","height"],se=(0,n.defineComponent)({__name:"Liqvued",props:{as:{default:"div"},asProps:{default:()=>({})},radius:{default:32},borderRadius:{default:void 0},bezel:{default:22},thickness:{default:42},refraction:{default:1},refractionMode:{default:"edge"},magnification:{default:0},magnificationFocus:{default:.82},blur:{default:.4},surface:{default:"convex"},specularOpacity:{default:.45},glareAngle:{type:[Number,Boolean],default:-60},glassBackground:{default:void 0},fallbackOnly:{type:Boolean,default:!1}},setup(r){const t=r,c=(0,n.ref)(null),o=(0,n.ref)(1),l=(0,n.ref)(1),x=(0,n.ref)(""),M=(0,n.ref)(""),p=(0,n.ref)(1),s=typeof CSS<"u"&&typeof navigator<"u"&&CSS.supports?.("backdrop-filter","url(#x)")&&/Chrome/.test(navigator.userAgent),R=`${`lg-${Math.random().toString(36).slice(2)}`}-filter`,A=(0,n.inject)("_liqvued",!1);(0,n.provide)("_liqvued",!0);const w=(0,n.ref)(!1),G={0:0,sm:4,md:8,lg:12,xl:16,pill:9999,circle:9999,shaped:16};function W(){return c.value}function u(e,a=0,i=1){return Math.max(a,Math.min(i,e))}function E(e){return e=u(e),e*e*e*(e*(e*6-15)+10)}function q(e){return Math.pow(1-Math.pow(1-u(e),4),1/4)}function le(e,a,i){return u(e+Math.sin(u(e)*Math.PI*a)*i)}function ue(e){const a=u(e);return u(a+Math.sin(a*39.1)*.06+Math.sin(a*91.7)*.035)}function de(e,a,i,g,_,B){const v=i/2,y=g/2,$=Math.max(1,i/2),k=Math.max(1,g/2),N=(e-v)/$,O=(a-y)/k,d=Math.hypot(N,O),f=u(B,.2,1.4),m=Math.pow(E(1-u(d/f)),1.6),h=_>=0?1+_*m:1/(1+Math.abs(_)*m);return{x:(e-v)/h-(e-v),y:(a-y)/h-(a-y)}}function j(e){const a=u(e);switch(t.surface){case"concave":case"bowl":return 1-q(a);case"lip":return q(a)*(1-E(a))+(1-q(a))*E(a);case"bevel":return a;case"saddle":return .5+Math.sin((a-.5)*Math.PI)*.5;case"ripple":return le(a,3,.12);case"noise":return ue(a);case"asymmetric":return u(Math.pow(a,.65)*.65+E(a)*.35);case"convex":return q(a)}}function fe(e){return(j(e+.001)-j(e-.001))/(2*.001)}function he(e){const g=Math.atan(e),_=1/1.5*Math.sin(g),B=Math.asin(u(_,-1,1));return Math.tan(g-B)}function H(e){return e.toDataURL("image/png")}function D(){if(t.fallbackOnly)return;const e=Math.max(1,Math.round(o.value)),a=Math.max(1,Math.round(l.value)),i=document.createElement("canvas");i.width=e,i.height=a;const g=document.createElement("canvas");g.width=e,g.height=a;const _=i.getContext("2d"),B=g.getContext("2d"),v=_.createImageData(e,a),y=B.createImageData(e,a),$=[];let k=1;const N=t.glareAngle!==!1?{x:Math.cos(t.glareAngle*Math.PI/180),y:Math.sin(t.glareAngle*Math.PI/180)}:{x:0,y:0},O=Math.max(1,Math.min(t.bezel,Math.min(e,a)*.28));for(let d=0;d<a;d++)for(let f=0;f<e;f++){const m=I(f,d,e,a,C.value),h=u(m/O);let V=0,F=0,Q=0;if(m>=0&&m<O){const S=te(f,d,e,a,C.value),X=he(fe(h))*t.thickness*E(1-h)*ee(t.refractionMode,h)*t.refraction,Y=Z(t.refractionMode,S,f,d,e,a,h);V=Y.x*X,F=Y.y*X,k=Math.max(k,Math.abs(V),Math.abs(F));const ye=u(S.x*N.x+S.y*N.y,0,1);Q=Math.pow(ye,18)*t.specularOpacity}if(t.magnification!==0&&m>=0){const S=de(f,d,e,a,t.magnification,t.magnificationFocus);V+=S.x,F+=S.y}$.push([V,F]);const T=(d*e+f)*4,ve=Math.round(Q*255);y.data[T]=255,y.data[T+1]=255,y.data[T+2]=255,y.data[T+3]=ve}k=$.reduce((d,[f,m])=>Math.max(d,Math.abs(f),Math.abs(m)),1),$.forEach(([d,f],m)=>{const h=m*4;v.data[h]=Math.round(128+d/k*127),v.data[h+1]=Math.round(128+f/k*127),v.data[h+2]=128,v.data[h+3]=255}),_.putImageData(v,0,0),B.putImageData(y,0,0),x.value=H(i),M.value=H(g),p.value=k}function J(){const e=W();e&&(o.value=Math.max(1,e.offsetWidth),l.value=Math.max(1,e.offsetHeight))}const K=s?"rgba(255, 255, 255, 0.08)":"rgba(255, 255, 255, 0.22)",C=(0,n.computed)(()=>{if(t.radius!==32)return t.radius;const e=t.asProps;return typeof e.rounded=="string"&&e.rounded in G?G[e.rounded]:t.radius}),pe=(0,n.computed)(()=>t.borderRadius||`${C.value}px`),me=new Set(["primary","secondary","accent","info","warning","error","success","surface","background"]);function ge(e,a){if(me.has(e))return`rgba(var(--v-theme-${e}), ${a})`;if(e.startsWith("#")){const i=e.replace("#","");return`rgba(${parseInt(i.slice(0,2),16)}, ${parseInt(i.slice(2,4),16)}, ${parseInt(i.slice(4,6),16)}, ${a})`}return e.startsWith("rgb")?e.replace("rgb(","rgba(").replace(")",`, ${a})`):K}const L=(0,n.computed)(()=>{if(t.glassBackground!==void 0)return t.glassBackground;const e=t.asProps;return typeof e.color=="string"?ge(e.color,.6):K}),P=(0,n.computed)(()=>t.fallbackOnly||!s?"blur(12px)":`url(#${R}) blur(${t.blur}px)`),Me=(0,n.computed)(()=>({borderRadius:`${pe.value}`,...L.value!==void 0?{backgroundColor:L.value}:{},...L.value!==void 0?{boxShadow:["inset 0 0 0 1px rgba(255, 255, 255, 0.28)","0 18px 48px rgba(0, 0, 0, 0.18)"].join(", ")}:{},...w.value&&!A?{backdropFilter:P.value,WebkitBackdropFilter:P.value}:{},...w.value&&A&&!s?{backdropFilter:P.value,WebkitBackdropFilter:P.value}:{}}));let z=null;return(0,n.onMounted)(async()=>{if(await(0,n.nextTick)(),s){J(),D(),await(0,n.nextTick)(),w.value=!0,z=new ResizeObserver(()=>{J(),D(),w.value=!0});const e=W();e&&z.observe(e)}else w.value=!0}),(0,n.watch)(()=>[C.value,t.bezel,t.thickness,t.refraction,t.refractionMode,t.magnification,t.magnificationFocus,t.surface,t.specularOpacity,t.glareAngle,t.fallbackOnly],()=>{s&&D(),w.value=!0}),(0,n.onBeforeUnmount)(()=>{z?.disconnect()}),(e,a)=>((0,n.openBlock)(),(0,n.createElementBlock)("div",{ref_key:"root",ref:c,class:"liquid-glass",style:(0,n.normalizeStyle)(Me.value)},[(0,n.unref)(s)?((0,n.openBlock)(),(0,n.createElementBlock)("svg",ae,[(0,n.createElementVNode)("defs",null,[(0,n.createElementVNode)("filter",{id:R,"color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse",x:"0",y:"0",width:"10000",height:"10000"},[(0,n.createElementVNode)("feImage",{href:x.value,x:"0",y:"0",width:o.value,height:l.value,result:"displacement_map"},null,8,ne),a[0]||(a[0]=(0,n.createElementVNode)("feGaussianBlur",{in:"displacement_map",stdDeviation:"2",result:"smooth_disp"},null,-1)),(0,n.createElementVNode)("feDisplacementMap",{in:"SourceGraphic",in2:"smooth_disp",scale:p.value,xChannelSelector:"R",yChannelSelector:"G",result:"refracted"},null,8,re),(0,n.createElementVNode)("feImage",{href:M.value,x:"0",y:"0",width:o.value,height:l.value,result:"specular"},null,8,oe),a[1]||(a[1]=(0,n.createElementVNode)("feBlend",{in:"refracted",in2:"specular",mode:"screen"},null,-1))])])])):(0,n.createCommentVNode)("",!0),((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(r.as),(0,n.normalizeProps)((0,n.guardReactiveProps)(r.asProps)),{default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,"default",{},void 0,!0)]),_:3},16))],4))}}),ie=(r,t)=>{const c=r.__vccOpts||r;for(const[o,l]of t)c[o]=l;return c},U=ie(se,[["__scopeId","data-v-5607a45c"]]),ce={install(r){r.component("Liqvued",U)}};b.Liqvued=U,b.default=ce});

package/index.d.ts

@@ -0,0 +1,43 @@
+import type { Component } from 'vue'
+
+export type Surface =
+  | 'convex'
+  | 'concave'
+  | 'lip'
+  | 'bowl'
+  | 'bevel'
+  | 'saddle'
+  | 'ripple'
+  | 'noise'
+  | 'asymmetric'
+
+export type RefractionMode = 'edge' | 'center' | 'split'
+
+export interface LiqvuedProps {
+  as?: string | Component
+  asProps?: Record<string, unknown>
+  radius?: number
+  borderRadius?: string
+  bezel?: number
+  thickness?: number
+  refraction?: number
+  refractionMode?: RefractionMode
+  magnification?: number
+  magnificationFocus?: number
+  blur?: number
+  surface?: Surface
+  specularOpacity?: number
+  glareAngle?: number | false
+  glassBackground?: string
+  fallbackOnly?: boolean
+}
+
+export declare const Liqvued: new() => {
+  $props: LiqvuedProps
+}
+
+declare const _default: {
+  install(app: unknown): void
+}
+
+export default _default

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "liqvued",
   "types": "./index.d.ts",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Liquid-glass for Vue",
   "exports": {
     ".": {
@@ -49,32 +49,32 @@
   "author": "Igor Voytovich",
   "license": "MIT",
   "repository": "https://github.com/IVoyt/liqvued",
-  "packageManager": "pnpm@10.33.4",
+  "packageManager": "pnpm@11.17.0",
   "peerDependencies": {
     "vue": "^3.5.14"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "^11.1.1",
+    "@intlify/unplugin-vue-i18n": "^11.2.4",
     "@rollup/plugin-alias": "^5.1.1",
     "@stylistic/eslint-plugin": "^5.10.0",
-    "@types/node": "^22.19.15",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vitejs/plugin-vue-jsx": "^5.1.5",
-    "eslint": "^10.3.0",
+    "@types/node": "^26.1.1",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitejs/plugin-vue-jsx": "^5.1.6",
+    "eslint": "^10.8.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-case-police": "^2.2.1",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-sonarjs": "^4.0.3",
-    "eslint-plugin-unicorn": "^64.0.0",
+    "eslint-plugin-promise": "^7.3.0",
+    "eslint-plugin-sonarjs": "^4.2.0",
+    "eslint-plugin-unicorn": "^72.0.0",
     "eslint-plugin-vue": "^10.9.0",
-    "sass-embedded": "^1.98.0",
-    "tsx": "^4.21.0",
+    "sass-embedded": "^1.100.0",
+    "tsx": "^4.23.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.59.0",
-    "unplugin-vue-components": "^28.8.0",
-    "vite": "^8.0.10",
+    "typescript-eslint": "^8.65.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.1.5",
     "vue-eslint-parser": "^10.4.0",
-    "vue-tsc": "^3.2.6"
+    "vue-tsc": "^3.3.8"
   }
-}
+}

package/src/Liqvued.vue

@@ -10,8 +10,9 @@ import {
   ref,
   watch,
 } from 'vue'
+import { refractionDirection, refractionModeStrength } from './refraction'
 import { distanceToRoundedRectEdge, normalFromRoundedRect } from './shape'
-import type { Surface } from './types'
+import type { RefractionMode, Surface } from './types'
 
 const props = withDefaults(defineProps<{
   as?: string | Component
@@ -21,12 +22,13 @@ const props = withDefaults(defineProps<{
   bezel?: number
   thickness?: number
   refraction?: number
+  refractionMode?: RefractionMode
   magnification?: number
   magnificationFocus?: number
   blur?: number
   surface?: Surface
   specularOpacity?: number
-  glareAngle?: number
+  glareAngle?: number | false
   glassBackground?: string
   fallbackOnly?: boolean
 }>(), {
@@ -34,9 +36,11 @@ const props = withDefaults(defineProps<{
   asProps: () => ({}),
   fallbackOnly: false,
   radius: 32,
+  borderRadius: undefined,
   bezel: 22,
   thickness: 42,
   refraction: 1,
+  refractionMode: 'edge',
   magnification: 0,
   magnificationFocus: 0.82,
   blur: 0.4,
@@ -208,10 +212,12 @@ function buildMaps() {
   const vectors: Array<[number, number]> = []
   let max = 1
 
-  const light = {
-    x: Math.cos((props.glareAngle * Math.PI) / 180),
-    y: Math.sin((props.glareAngle * Math.PI) / 180),
-  }
+  const light = props.glareAngle !== false
+    ? {
+        x: Math.cos((props.glareAngle * Math.PI) / 180),
+        y: Math.sin((props.glareAngle * Math.PI) / 180),
+      }
+    : { x: 0, y: 0 }
   const edgeBand = Math.max(
     1,
     Math.min(props.bezel, Math.min(w, h) * 0.28),
@@ -235,10 +241,13 @@ function buildMaps() {
           bend *
           props.thickness *
           smootherStep(1 - t) *
+          refractionModeStrength(props.refractionMode, t) *
           props.refraction
 
-        vx = -n.x * amount
-        vy = -n.y * amount
+        const direction = refractionDirection(props.refractionMode, n, x, y, w, h, t)
+
+        vx = direction.x * amount
+        vy = direction.y * amount
 
         max = Math.max(max, Math.abs(vx), Math.abs(vy))
 
@@ -412,6 +421,7 @@ watch(
     props.bezel,
     props.thickness,
     props.refraction,
+    props.refractionMode,
     props.magnification,
     props.magnificationFocus,
     props.surface,

package/src/refraction.test.ts

@@ -0,0 +1,36 @@
+import { deepStrictEqual, ok } from 'node:assert'
+import { refractionDirection, refractionModeStrength } from './refraction'
+
+const normal = { x: 1, y: 0 }
+
+deepStrictEqual(
+  refractionDirection('edge', normal, 20, 50, 100, 100, 0.25),
+  { x: -1, y: -0 },
+)
+
+deepStrictEqual(
+  refractionDirection('center', normal, 20, 50, 100, 100, 0.25),
+  { x: 1, y: 0 },
+)
+
+deepStrictEqual(
+  refractionDirection('center', { x: 0, y: 1 }, 50, 20, 100, 100, 0.25),
+  { x: 0, y: 1 },
+)
+
+deepStrictEqual(
+  refractionDirection('center', { x: 0, y: 1 }, 20, 20, 100, 100, 0.25),
+  { x: 0, y: 1 },
+)
+
+const outerSplit = refractionDirection('split', normal, 20, 50, 100, 100, 0.25)
+const innerSplit = refractionDirection('split', normal, 20, 50, 100, 100, 0.75)
+
+ok(outerSplit.x * innerSplit.x < 0)
+deepStrictEqual(outerSplit, { x: 1, y: 0 })
+deepStrictEqual(innerSplit, { x: -1, y: -0 })
+
+deepStrictEqual(refractionModeStrength('center', 0.5), 1)
+deepStrictEqual(refractionModeStrength('split', 0.5), 0)
+ok(refractionModeStrength('split', 0.1) > refractionModeStrength('split', 0.4))
+ok(refractionModeStrength('split', 0.9) > refractionModeStrength('split', 0.6))

package/src/refraction.ts

@@ -0,0 +1,50 @@
+import type { RefractionMode } from './types'
+
+export const refractionModeOptions = [
+  'edge',
+  'center',
+  'split',
+] as const satisfies readonly RefractionMode[]
+
+interface Vector {
+  x: number
+  y: number
+}
+
+export function refractionDirection(
+  mode: RefractionMode,
+  normal: Vector,
+  _x: number,
+  _y: number,
+  _width: number,
+  _height: number,
+  t: number,
+): Vector {
+  if (mode === 'center') {
+    return normal
+  }
+
+  const edge = {
+    x: -normal.x,
+    y: -normal.y,
+  }
+
+  if (mode === 'split') {
+    const side = t < 0.5 ? -1 : 1
+
+    return {
+      x: edge.x * side,
+      y: edge.y * side,
+    }
+  }
+
+  return edge
+}
+
+export function refractionModeStrength(mode: RefractionMode, t: number): number {
+  if (mode !== 'split') {
+    return 1
+  }
+
+  return Math.min(1, Math.abs(t - 0.5) * 2)
+}

package/src/types.ts

@@ -8,3 +8,5 @@ export type Surface =
   | 'ripple'
   | 'noise'
   | 'asymmetric'
+
+export type RefractionMode = 'edge' | 'center' | 'split'