liqvued 0.1.2 → 0.2.1

package/README.md

@@ -15,8 +15,8 @@ Inspired by [Liquid Glass CSS/SVG](https://kube.io/blog/liquid-glass-css-svg/)
 ## Features
 
 - **Real-time SVG filter generation** — displacement maps computed via Canvas API
-- **Multiple surface types** — convex, concave, lip
-- **Configurable optics** — bezel width, corner radius, displacement thickness, refraction index, glare angle
+- **Multiple surface types** — convex, concave, lip, bowl, bevel, saddle, ripple, noise, asymmetric
+- **Configurable optics** — bezel width, corner radius, displacement thickness, refraction, magnification, focus, glare angle
 - **Built-in glassmorphism styling** — gradient backgrounds, inset shadows, highlight overlays
 - **TypeScript** — full type definitions
 - **Lightweight** — minimal runtime dependencies beyond Vue
@@ -60,10 +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)         |
@@ -74,6 +77,18 @@ import { Liqvued } from 'liqvued'
 - `convex` — squircle convex profile — soft pill-like edges
 - `concave` — inverted convex — inward-curving dish-like refraction
 - `lip` — smooth transition from convex at center to concave at edge
+- `bowl` — deeper concave profile with a more even inward pull
+- `bevel` — linear edge ramp for harder, cleaner refraction
+- `saddle` — mirrored S-curve that shifts direction through the middle
+- `ripple` — small wave modulation across the edge band
+- `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
 
@@ -98,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 (`convex`, `concave`, `lip`) define the slope at each point along the bezel, which determines the displacement magnitude. 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-01d40041]{isolation:isolate;position:relative;overflow:hidden}.liquid-glass__svg[data-v-01d40041]{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-01d40041]{-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,40 +1,78 @@
-import { computed as R, createBlock as ie, createCommentVNode as ce, createElementBlock as Q, createElementVNode as v, defineComponent as de, guardReactiveProps as he, inject as fe, nextTick as X, normalizeProps as pe, normalizeStyle as ve, onBeforeUnmount as ge, onMounted as me, openBlock as L, provide as Me, ref as g, renderSlot as be, resolveDynamicComponent as ye, unref as _e, watch as xe, withCtx as ke } from "vue";
-var we = {
+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 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: g / o,
+    y: h / o
+  };
+}
+var qe = {
   key: 0,
   class: "liquid-glass__svg",
   "aria-hidden": "true"
-}, Re = [
+}, Pe = [
   "href",
   "width",
   "height"
-], Be = ["scale"], Ie = [
+], Fe = ["scale"], Oe = [
   "href",
   "width",
   "height"
-], Se = /* @__PURE__ */ de({
+], 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(d) {
-    const a = d, x = g(null), m = g(1), M = g(1), E = g(""), F = g(""), U = g(1), b = CSS.supports?.("backdrop-filter", "url(#x)") && /Chrome/.test(navigator.userAgent), T = `${`lg-${Math.random().toString(36).slice(2)}`}-filter`, A = fe("_liqvued", !1);
-    Me("_liqvued", !0);
-    const y = g(!1), G = {
+  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,
@@ -44,92 +82,110 @@ var we = {
       circle: 9999,
       shaped: 16
     };
-    function W() {
-      return x.value;
+    function j() {
+      return i.value;
     }
-    function k(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 Y(e) {
-      return e = k(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 B(e) {
-      return Math.pow(1 - Math.pow(1 - k(e), 4), 1 / 4);
+    function P(e) {
+      return Math.pow(1 - Math.pow(1 - u(e), 4), 1 / 4);
     }
-    function N(e) {
-      if (a.surface === "concave") return 1 - B(e);
-      if (a.surface === "lip") {
-        const t = Y(e);
-        return B(e) * (1 - t) + (1 - B(e)) * t;
-      }
-      return B(e);
+    function ae(e, a, s) {
+      return u(e + Math.sin(u(e) * Math.PI * a) * s);
     }
-    function Z(e) {
-      return (N(e + 1e-3) - N(e - 1e-3)) / (2 * 1e-3);
+    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 ee(e) {
-      const r = Math.atan(e), c = 1 / 1.5 * Math.sin(r), l = Math.asin(k(c, -1, 1));
-      return Math.tan(r - l);
+    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 - m) / f - (e - m),
+        y: (a - M) / f - (a - M)
+      };
     }
-    function te(e, t, n, r, c) {
-      const l = Math.min(c, Math.min(n, r) / 2), s = n / 2 - l, u = r / 2 - l, i = Math.abs(e - n / 2) - s, o = Math.abs(t - r / 2) - u;
-      return -(Math.min(Math.max(i, o), 0) + Math.hypot(Math.max(i, 0), Math.max(o, 0)) - l);
+    function H(e) {
+      const a = u(e);
+      switch (t.surface) {
+        case "concave":
+        case "bowl":
+          return 1 - P(a);
+        case "lip":
+          return P(a) * (1 - R(a)) + (1 - P(a)) * R(a);
+        case "bevel":
+          return a;
+        case "saddle":
+          return 0.5 + Math.sin((a - 0.5) * Math.PI) * 0.5;
+        case "ripple":
+          return ae(a, 3, 0.12);
+        case "noise":
+          return ne(a);
+        case "asymmetric":
+          return u(Math.pow(a, 0.65) * 0.65 + R(a) * 0.35);
+        case "convex":
+          return P(a);
+      }
     }
-    function ae(e, t, n, r) {
-      const c = Math.min(e, n - 1 - e), l = Math.min(t, r - 1 - t), s = 4, u = Math.pow(c, s) + Math.pow(l, s);
-      let i, o;
-      u > 1e-10 ? (i = (e > n / 2 ? 1 : -1) * (Math.pow(l, s) / u), o = (t > r / 2 ? 1 : -1) * (Math.pow(c, s) / u)) : (i = e > n / 2 ? 1 : -1, o = t > r / 2 ? 1 : -1);
-      const _ = Math.hypot(i, o);
-      return _ < 1e-10 ? {
-        x: 0,
-        y: -1
-      } : {
-        x: i / _,
-        y: o / _
-      };
+    function oe(e) {
+      return (H(e + 1e-3) - H(e - 1e-3)) / (2 * 1e-3);
+    }
+    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 V(e) {
+    function J(e) {
       return e.toDataURL("image/png");
     }
-    function C() {
-      if (a.fallbackOnly) return;
-      const e = Math.max(1, Math.round(m.value)), t = Math.max(1, Math.round(M.value)), n = document.createElement("canvas");
-      n.width = e, n.height = t;
-      const r = document.createElement("canvas");
-      r.width = e, r.height = t;
-      const c = n.getContext("2d"), l = r.getContext("2d"), s = c.createImageData(e, t), u = l.createImageData(e, t), i = [];
-      let o = 1;
-      const _ = {
-        x: Math.cos(a.glareAngle * Math.PI / 180),
-        y: Math.sin(a.glareAngle * Math.PI / 180)
-      };
-      for (let h = 0; h < t; h++) for (let f = 0; f < e; f++) {
-        const w = te(f, h, e, t, q.value), p = k(w / a.bezel);
-        let z = 0, D = 0, J = 0;
-        if (w >= 0 && w < a.bezel) {
-          const $ = ae(f, h, e, t), K = ee(Z(p)) * a.thickness * (1 - p) * a.refraction;
-          z = -$.x * K, D = -$.y * K, o = Math.max(o, Math.abs(z), Math.abs(D));
-          const ue = k($.x * _.x + $.y * _.y, 0, 1);
-          J = Math.pow(ue, 18) * a.specularOpacity;
+    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 (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 (t.magnification !== 0 && p >= 0) {
+          const B = re(d, l, e, a, t.magnification, t.magnificationFocus);
+          L += B.x, E += B.y;
         }
-        i.push([z, D]);
-        const S = (h * e + f) * 4, le = Math.round(J * 255);
-        u.data[S] = 255, u.data[S + 1] = 255, u.data[S + 2] = 255, u.data[S + 3] = le;
+        $.push([L, E]);
+        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;
       }
-      i.forEach(([h, f], w) => {
-        const p = w * 4;
-        s.data[p] = Math.round(128 + h / o * 127), s.data[p + 1] = Math.round(128 + f / o * 127), s.data[p + 2] = 128, s.data[p + 3] = 255;
-      }), c.putImageData(s, 0, 0), l.putImageData(u, 0, 0), E.value = V(n), F.value = V(r), U.value = o;
+      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 j() {
-      const e = W();
-      e && (m.value = Math.max(1, e.offsetWidth), M.value = Math.max(1, e.offsetHeight));
+    function K() {
+      const e = j();
+      e && (r.value = Math.max(1, e.offsetWidth), c.value = Math.max(1, e.offsetHeight));
     }
-    const H = b ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.22)", q = R(() => {
-      if (a.radius !== 32) return a.radius;
-      const e = a.asProps;
-      return typeof e.rounded == "string" && e.rounded in G ? G[e.rounded] : a.radius;
-    }), ne = R(() => a.borderRadius || `${q.value}px`), re = /* @__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",
@@ -140,60 +196,63 @@ var we = {
       "surface",
       "background"
     ]);
-    function oe(e, t) {
-      if (re.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})`) : H;
+      return e.startsWith("rgb") ? e.replace("rgb(", "rgba(").replace(")", `, ${a})`) : Q;
     }
-    const O = R(() => {
-      if (a.glassBackground !== void 0) return a.glassBackground;
-      const e = a.asProps;
-      return typeof e.color == "string" ? oe(e.color, 0.6) : H;
-    }), I = R(() => a.fallbackOnly || !b ? "blur(12px)" : `url(#${T}) blur(${a.blur}px)`), se = R(() => ({
-      borderRadius: `${ne.value}`,
-      ...O.value !== void 0 ? { backgroundColor: O.value } : {},
-      ...O.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(", ") } : {},
-      ...y.value && !A ? {
-        backdropFilter: I.value,
-        WebkitBackdropFilter: I.value
+    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
       } : {},
-      ...y.value && A && !b ? {
-        backdropFilter: I.value,
-        WebkitBackdropFilter: I.value
+      ...w.value && W && !o ? {
+        backdropFilter: O.value,
+        WebkitBackdropFilter: O.value
       } : {}
     }));
-    let P = null;
-    return me(async () => {
-      if (await X(), b) {
-        j(), C(), await X(), y.value = !0, P = new ResizeObserver(() => {
-          j(), C(), y.value = !0;
+    let G = null;
+    return xe(async () => {
+      if (await te(), o) {
+        K(), A(), await te(), w.value = !0, G = new ResizeObserver(() => {
+          K(), A(), w.value = !0;
         });
-        const e = W();
-        e && P.observe(e);
-      } else y.value = !0;
-    }), xe(() => [
-      q.value,
-      a.bezel,
-      a.thickness,
-      a.refraction,
-      a.surface,
-      a.specularOpacity,
-      a.glareAngle,
-      a.fallbackOnly
+        const e = j();
+        e && G.observe(e);
+      } else w.value = !0;
+    }), Be(() => [
+      F.value,
+      t.bezel,
+      t.thickness,
+      t.refraction,
+      t.refractionMode,
+      t.magnification,
+      t.magnificationFocus,
+      t.surface,
+      t.specularOpacity,
+      t.glareAngle,
+      t.fallbackOnly
     ], () => {
-      b && C(), y.value = !0;
-    }), ge(() => {
-      P?.disconnect();
-    }), (e, t) => (L(), Q("div", {
+      o && A(), w.value = !0;
+    }), be(() => {
+      G?.disconnect();
+    }), (e, a) => (N(), ee("div", {
       ref_key: "root",
-      ref: x,
+      ref: i,
       class: "liquid-glass",
-      style: ve(se.value)
-    }, [_e(b) ? (L(), Q("svg", we, [v("defs", null, [v("filter", {
-      id: T,
+      style: ye(le.value)
+    }, [Se(o) ? (N(), ee("svg", qe, [_("defs", null, [_("filter", {
+      id: I,
       "color-interpolation-filters": "sRGB",
       filterUnits: "userSpaceOnUse",
       x: "0",
@@ -201,53 +260,53 @@ var we = {
       width: "10000",
       height: "10000"
     }, [
-      v("feImage", {
-        href: E.value,
+      _("feImage", {
+        href: y.value,
         x: "0",
         y: "0",
-        width: m.value,
-        height: M.value,
+        width: r.value,
+        height: c.value,
         result: "displacement_map"
-      }, null, 8, Re),
-      t[0] || (t[0] = v("feGaussianBlur", {
+      }, null, 8, Pe),
+      a[0] || (a[0] = _("feGaussianBlur", {
         in: "displacement_map",
         stdDeviation: "2",
         result: "smooth_disp"
       }, null, -1)),
-      v("feDisplacementMap", {
+      _("feDisplacementMap", {
         in: "SourceGraphic",
         in2: "smooth_disp",
-        scale: U.value,
+        scale: h.value,
         xChannelSelector: "R",
         yChannelSelector: "G",
         result: "refracted"
-      }, null, 8, Be),
-      v("feImage", {
-        href: F.value,
+      }, null, 8, Fe),
+      _("feImage", {
+        href: g.value,
         x: "0",
         y: "0",
-        width: m.value,
-        height: M.value,
+        width: r.value,
+        height: c.value,
         result: "specular"
-      }, null, 8, Ie),
-      t[1] || (t[1] = v("feBlend", {
+      }, null, 8, Oe),
+      a[1] || (a[1] = _("feBlend", {
         in: "refracted",
         in2: "specular",
         mode: "screen"
       }, null, -1))
-    ])])])) : ce("", !0), (L(), ie(ye(d.as), pe(he(d.asProps)), {
-      default: ke(() => [be(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));
   }
-}), $e = (d, a) => {
-  const x = d.__vccOpts || d;
-  for (const [m, M] of a) x[m] = M;
-  return x;
-}, Ce = /* @__PURE__ */ $e(Se, [["__scopeId", "data-v-01d40041"]]), Oe = { install(d) {
-  d.component("Liqvued", Ce);
+}), 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 {
-  Ce as Liqvued,
-  Oe as default
+  Le as Liqvued,
+  Ue as default
 };

package/dist/liqvued.umd.js

@@ -1 +1 @@
-(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f.Liqvued={},f.Vue))})(this,function(f,t){Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var K={key:0,class:"liquid-glass__svg","aria-hidden":"true"},Q=["href","width","height"],X=["scale"],Y=["href","width","height"],Z=(0,t.defineComponent)({__name:"Liqvued",props:{as:{default:"div"},asProps:{default:()=>({})},radius:{default:32},borderRadius:{},bezel:{default:22},thickness:{default:42},refraction:{default:1},blur:{default:.4},surface:{default:"convex"},specularOpacity:{default:.45},glareAngle:{default:-60},glassBackground:{default:void 0},fallbackOnly:{type:Boolean,default:!1}},setup(h){const n=h,k=(0,t.ref)(null),v=(0,t.ref)(1),M=(0,t.ref)(1),V=(0,t.ref)(""),L=(0,t.ref)(""),N=(0,t.ref)(1),b=CSS.supports?.("backdrop-filter","url(#x)")&&/Chrome/.test(navigator.userAgent),z=`${`lg-${Math.random().toString(36).slice(2)}`}-filter`,D=(0,t.inject)("_liqvued",!1);(0,t.provide)("_liqvued",!0);const y=(0,t.ref)(!1),F={0:0,sm:4,md:8,lg:12,xl:16,pill:9999,circle:9999,shaped:16};function U(){return k.value}function x(e,a=0,r=1){return Math.max(a,Math.min(r,e))}function ae(e){return e=x(e),e*e*e*(e*(e*6-15)+10)}function B(e){return Math.pow(1-Math.pow(1-x(e),4),1/4)}function A(e){if(n.surface==="concave")return 1-B(e);if(n.surface==="lip"){const a=ae(e);return B(e)*(1-a)+(1-B(e))*a}return B(e)}function ne(e){return(A(e+.001)-A(e-.001))/(2*.001)}function re(e){const o=Math.atan(e),d=1/1.5*Math.sin(o),i=Math.asin(x(d,-1,1));return Math.tan(o-i)}function oe(e,a,r,o,d){const i=Math.min(d,Math.min(r,o)/2),s=r/2-i,c=o/2-i,u=Math.abs(e-r/2)-s,l=Math.abs(a-o/2)-c;return-(Math.min(Math.max(u,l),0)+Math.hypot(Math.max(u,0),Math.max(l,0))-i)}function le(e,a,r,o){const d=Math.min(e,r-1-e),i=Math.min(a,o-1-a),s=4,c=Math.pow(d,s)+Math.pow(i,s);let u,l;c>1e-10?(u=(e>r/2?1:-1)*(Math.pow(i,s)/c),l=(a>o/2?1:-1)*(Math.pow(d,s)/c)):(u=e>r/2?1:-1,l=a>o/2?1:-1);const _=Math.hypot(u,l);return _<1e-10?{x:0,y:-1}:{x:u/_,y:l/_}}function G(e){return e.toDataURL("image/png")}function E(){if(n.fallbackOnly)return;const e=Math.max(1,Math.round(v.value)),a=Math.max(1,Math.round(M.value)),r=document.createElement("canvas");r.width=e,r.height=a;const o=document.createElement("canvas");o.width=e,o.height=a;const d=r.getContext("2d"),i=o.getContext("2d"),s=d.createImageData(e,a),c=i.createImageData(e,a),u=[];let l=1;const _={x:Math.cos(n.glareAngle*Math.PI/180),y:Math.sin(n.glareAngle*Math.PI/180)};for(let p=0;p<a;p++)for(let m=0;m<e;m++){const w=oe(m,p,e,a,$.value),g=x(w/n.bezel);let O=0,P=0,H=0;if(w>=0&&w<n.bezel){const I=le(m,p,e,a),J=re(ne(g))*n.thickness*(1-g)*n.refraction;O=-I.x*J,P=-I.y*J,l=Math.max(l,Math.abs(O),Math.abs(P));const fe=x(I.x*_.x+I.y*_.y,0,1);H=Math.pow(fe,18)*n.specularOpacity}u.push([O,P]);const R=(p*e+m)*4,de=Math.round(H*255);c.data[R]=255,c.data[R+1]=255,c.data[R+2]=255,c.data[R+3]=de}u.forEach(([p,m],w)=>{const g=w*4;s.data[g]=Math.round(128+p/l*127),s.data[g+1]=Math.round(128+m/l*127),s.data[g+2]=128,s.data[g+3]=255}),d.putImageData(s,0,0),i.putImageData(c,0,0),V.value=G(r),L.value=G(o),N.value=l}function W(){const e=U();e&&(v.value=Math.max(1,e.offsetWidth),M.value=Math.max(1,e.offsetHeight))}const j=b?"rgba(255, 255, 255, 0.08)":"rgba(255, 255, 255, 0.22)",$=(0,t.computed)(()=>{if(n.radius!==32)return n.radius;const e=n.asProps;return typeof e.rounded=="string"&&e.rounded in F?F[e.rounded]:n.radius}),se=(0,t.computed)(()=>n.borderRadius||`${$.value}px`),ie=new Set(["primary","secondary","accent","info","warning","error","success","surface","background"]);function ce(e,a){if(ie.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})`):j}const q=(0,t.computed)(()=>{if(n.glassBackground!==void 0)return n.glassBackground;const e=n.asProps;return typeof e.color=="string"?ce(e.color,.6):j}),S=(0,t.computed)(()=>n.fallbackOnly||!b?"blur(12px)":`url(#${z}) blur(${n.blur}px)`),ue=(0,t.computed)(()=>({borderRadius:`${se.value}`,...q.value!==void 0?{backgroundColor:q.value}:{},...q.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(", ")}:{},...y.value&&!D?{backdropFilter:S.value,WebkitBackdropFilter:S.value}:{},...y.value&&D&&!b?{backdropFilter:S.value,WebkitBackdropFilter:S.value}:{}}));let C=null;return(0,t.onMounted)(async()=>{if(await(0,t.nextTick)(),b){W(),E(),await(0,t.nextTick)(),y.value=!0,C=new ResizeObserver(()=>{W(),E(),y.value=!0});const e=U();e&&C.observe(e)}else y.value=!0}),(0,t.watch)(()=>[$.value,n.bezel,n.thickness,n.refraction,n.surface,n.specularOpacity,n.glareAngle,n.fallbackOnly],()=>{b&&E(),y.value=!0}),(0,t.onBeforeUnmount)(()=>{C?.disconnect()}),(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{ref_key:"root",ref:k,class:"liquid-glass",style:(0,t.normalizeStyle)(ue.value)},[(0,t.unref)(b)?((0,t.openBlock)(),(0,t.createElementBlock)("svg",K,[(0,t.createElementVNode)("defs",null,[(0,t.createElementVNode)("filter",{id:z,"color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse",x:"0",y:"0",width:"10000",height:"10000"},[(0,t.createElementVNode)("feImage",{href:V.value,x:"0",y:"0",width:v.value,height:M.value,result:"displacement_map"},null,8,Q),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:N.value,xChannelSelector:"R",yChannelSelector:"G",result:"refracted"},null,8,X),(0,t.createElementVNode)("feImage",{href:L.value,x:"0",y:"0",width:v.value,height:M.value,result:"specular"},null,8,Y),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)(h.as),(0,t.normalizeProps)((0,t.guardReactiveProps)(h.asProps)),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,"default",{},void 0,!0)]),_:3},16))],4))}}),ee=(h,n)=>{const k=h.__vccOpts||h;for(const[v,M]of n)k[v]=M;return k},T=ee(Z,[["__scopeId","data-v-01d40041"]]),te={install(h){h.component("Liqvued",T)}};f.Liqvued=T,f.default=te});
+(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.1.2",
+  "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,7 +10,9 @@ import {
   ref,
   watch,
 } from 'vue'
-import type { Surface } from './types'
+import { refractionDirection, refractionModeStrength } from './refraction'
+import { distanceToRoundedRectEdge, normalFromRoundedRect } from './shape'
+import type { RefractionMode, Surface } from './types'
 
 const props = withDefaults(defineProps<{
   as?: string | Component
@@ -20,10 +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
 }>(), {
@@ -31,9 +36,13 @@ 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,
   surface: 'convex',
   specularOpacity: 0.45,
@@ -49,6 +58,8 @@ const mapUrl = ref('')
 const specularUrl = ref('')
 const scale = ref(1)
 const supportsLiquidGlass =
+  typeof CSS !== 'undefined' &&
+  typeof navigator !== 'undefined' &&
   CSS.supports?.('backdrop-filter', 'url(#x)') &&
   /Chrome/.test(navigator.userAgent)
 
@@ -91,13 +102,67 @@ function convex(x: number) {
   return Math.pow(1 - Math.pow(1 - clamp(x), 4), 1 / 4)
 }
 
+function wave(x: number, frequency: number, amplitude: number) {
+  return clamp(x + Math.sin(clamp(x) * Math.PI * frequency) * amplitude)
+}
+
+function deterministicNoise(x: number) {
+  const t = clamp(x)
+  return clamp(t + Math.sin(t * 39.1) * 0.06 + Math.sin(t * 91.7) * 0.035)
+}
+
+function magnificationVector(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  magnification: number,
+  magnificationFocus: number,
+) {
+  const cx = w / 2
+  const cy = h / 2
+  const rx = Math.max(1, w / 2)
+  const ry = Math.max(1, h / 2)
+  const dx = (x - cx) / rx
+  const dy = (y - cy) / ry
+  const radius = Math.hypot(dx, dy)
+  const focusRadius = clamp(magnificationFocus, 0.2, 1.4)
+  const focus = Math.pow(
+    smootherStep(1 - clamp(radius / focusRadius)),
+    1.6,
+  )
+  const zoom = magnification >= 0
+    ? 1 + magnification * focus
+    : 1 / (1 + Math.abs(magnification) * focus)
+
+  return {
+    x: (x - cx) / zoom - (x - cx),
+    y: (y - cy) / zoom - (y - cy),
+  }
+}
+
 function surfaceFn(x: number) {
-  if (props.surface === 'concave') return 1 - convex(x)
-  if (props.surface === 'lip') {
-    const t = smootherStep(x)
-    return convex(x) * (1 - t) + (1 - convex(x)) * t
+  const t = clamp(x)
+
+  switch (props.surface) {
+    case 'concave':
+    case 'bowl':
+      return 1 - convex(t)
+    case 'lip':
+      return convex(t) * (1 - smootherStep(t)) + (1 - convex(t)) * smootherStep(t)
+    case 'bevel':
+      return t
+    case 'saddle':
+      return 0.5 + Math.sin((t - 0.5) * Math.PI) * 0.5
+    case 'ripple':
+      return wave(t, 3, 0.12)
+    case 'noise':
+      return deterministicNoise(t)
+    case 'asymmetric':
+      return clamp(Math.pow(t, 0.65) * 0.65 + smootherStep(t) * 0.35)
+    case 'convex':
+      return convex(t)
   }
-  return convex(x)
 }
 
 function derivative(x: number) {
@@ -118,54 +183,6 @@ function refractSlope(slope: number) {
   return Math.tan(theta1 - theta2)
 }
 
-function distanceToRoundedRectEdge(
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  r: number,
-) {
-  const hr = Math.min(r, Math.min(w, h) / 2)
-  const hw = w / 2 - hr
-  const hh = h / 2 - hr
-  const ax = Math.abs(x - w / 2) - hw
-  const ay = Math.abs(y - h / 2) - hh
-
-  const outsidePart = Math.hypot(Math.max(ax, 0), Math.max(ay, 0))
-  const insidePart = Math.min(Math.max(ax, ay), 0)
-
-  return -(insidePart + outsidePart - hr)
-}
-
-function normalFromRoundedRect(
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-) {
-  const dx = Math.min(x, w - 1 - x)
-  const dy = Math.min(y, h - 1 - y)
-
-  const p = 4
-  const wsum = Math.pow(dx, p) + Math.pow(dy, p)
-
-  let nx: number
-  let ny: number
-
-  if (wsum > 1e-10) {
-    nx = (x > w / 2 ? 1 : -1) * (Math.pow(dy, p) / wsum)
-    ny = (y > h / 2 ? 1 : -1) * (Math.pow(dx, p) / wsum)
-  } else {
-    nx = x > w / 2 ? 1 : -1
-    ny = y > h / 2 ? 1 : -1
-  }
-
-  const len = Math.hypot(nx, ny)
-  if (len < 1e-10) return { x: 0, y: -1 }
-
-  return { x: nx / len, y: ny / len }
-}
-
 function canvasToUrl(canvas: HTMLCanvasElement) {
   return canvas.toDataURL('image/png')
 }
@@ -195,30 +212,42 @@ 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),
+  )
 
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
       const dist = distanceToRoundedRectEdge(x, y, w, h, resolvedRadius.value)
-      const t = clamp(dist / props.bezel)
+      const t = clamp(dist / edgeBand)
 
       let vx = 0
       let vy = 0
       let spec = 0
 
-      if (dist >= 0 && dist < props.bezel) {
-        const n = normalFromRoundedRect(x, y, w, h)
+      if (dist >= 0 && dist < edgeBand) {
+        const n = normalFromRoundedRect(x, y, w, h, resolvedRadius.value)
         const slope = derivative(t)
         const bend = refractSlope(slope)
 
         const amount =
-          bend * props.thickness * (1 - t) * props.refraction
+          bend *
+          props.thickness *
+          smootherStep(1 - t) *
+          refractionModeStrength(props.refractionMode, t) *
+          props.refraction
+
+        const direction = refractionDirection(props.refractionMode, n, x, y, w, h, t)
 
-        vx = -n.x * amount
-        vy = -n.y * amount
+        vx = direction.x * amount
+        vy = direction.y * amount
 
         max = Math.max(max, Math.abs(vx), Math.abs(vy))
 
@@ -226,6 +255,19 @@ function buildMaps() {
         spec = Math.pow(facing, 18) * props.specularOpacity
       }
 
+      if (props.magnification !== 0 && dist >= 0) {
+        const lens = magnificationVector(
+          x,
+          y,
+          w,
+          h,
+          props.magnification,
+          props.magnificationFocus,
+        )
+        vx += lens.x
+        vy += lens.y
+      }
+
       vectors.push([vx, vy])
 
       const hi = (y * w + x) * 4
@@ -238,6 +280,10 @@ function buildMaps() {
     }
   }
 
+  max = vectors.reduce((currentMax, [vx, vy]) => {
+    return Math.max(currentMax, Math.abs(vx), Math.abs(vy))
+  }, 1)
+
   vectors.forEach(([vx, vy], index) => {
     const i = index * 4
 
@@ -375,6 +421,9 @@ watch(
     props.bezel,
     props.thickness,
     props.refraction,
+    props.refractionMode,
+    props.magnification,
+    props.magnificationFocus,
     props.surface,
     props.specularOpacity,
     props.glareAngle,

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/shape.test.ts

@@ -0,0 +1,54 @@
+import { strict as assert } from 'node:assert'
+import { normalFromRoundedRect } from './shape'
+
+function closeTo(actual: number, expected: number, tolerance = 0.001) {
+  assert.ok(
+    Math.abs(actual - expected) <= tolerance,
+    `Expected ${actual} to be within ${tolerance} of ${expected}`,
+  )
+}
+
+function assertUnitNormal(point: [number, number]) {
+  const normal = normalFromRoundedRect(point[0], point[1], 200, 120, 40)
+  const length = Math.hypot(normal.x, normal.y)
+
+  closeTo(length, 1)
+}
+
+function dot(a: [number, number], b: [number, number]) {
+  return a[0] * b[0] + a[1] * b[1]
+}
+
+function normalAt(point: [number, number]): [number, number] {
+  const normal = normalFromRoundedRect(point[0], point[1], 200, 120, 40)
+  return [normal.x, normal.y]
+}
+
+assertUnitNormal([20, 30])
+assertUnitNormal([180, 30])
+assertUnitNormal([20, 90])
+assertUnitNormal([180, 90])
+
+const topLeft = normalAt([20, 30])
+const topRight = normalAt([180, 30])
+const bottomLeft = normalAt([20, 90])
+const bottomRight = normalAt([180, 90])
+
+closeTo(topLeft[0], -topRight[0])
+closeTo(topLeft[1], topRight[1])
+closeTo(topLeft[0], bottomLeft[0])
+closeTo(topLeft[1], -bottomLeft[1])
+closeTo(topLeft[0], -bottomRight[0])
+closeTo(topLeft[1], -bottomRight[1])
+
+assert.ok(
+  dot(normalAt([39, 10]), normalAt([40, 10])) > 0.99,
+  'Expected top edge to top-right corner transition to be smooth',
+)
+
+assert.ok(
+  dot(normalAt([39, 10]), normalAt([41, 10])) > 0.98,
+  'Expected rounded corner seam to remain visually continuous',
+)
+
+console.log('shape geometry tests passed')

package/src/shape.ts

@@ -0,0 +1,42 @@
+export interface Point {
+  x: number
+  y: number
+}
+
+export function distanceToRoundedRectEdge(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+) {
+  const hr = Math.min(r, Math.min(w, h) / 2)
+  const hw = w / 2 - hr
+  const hh = h / 2 - hr
+  const ax = Math.abs(x - w / 2) - hw
+  const ay = Math.abs(y - h / 2) - hh
+
+  const outsidePart = Math.hypot(Math.max(ax, 0), Math.max(ay, 0))
+  const insidePart = Math.min(Math.max(ax, ay), 0)
+
+  return -(insidePart + outsidePart - hr)
+}
+
+export function normalFromRoundedRect(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+): Point {
+  const delta = 1.5
+  const nx = distanceToRoundedRectEdge(x - delta, y, w, h, r)
+    - distanceToRoundedRectEdge(x + delta, y, w, h, r)
+  const ny = distanceToRoundedRectEdge(x, y - delta, w, h, r)
+    - distanceToRoundedRectEdge(x, y + delta, w, h, r)
+
+  const len = Math.hypot(nx, ny)
+  if (len < 1e-10) return { x: 0, y: -1 }
+
+  return { x: nx / len, y: ny / len }
+}

package/src/surfaces.ts

@@ -0,0 +1,13 @@
+import type { Surface } from './types'
+
+export const surfaceOptions = [
+  'convex',
+  'concave',
+  'lip',
+  'bowl',
+  'bevel',
+  'saddle',
+  'ripple',
+  'noise',
+  'asymmetric',
+] as const satisfies readonly Surface[]

package/src/types.ts

@@ -1 +1,12 @@
-export type Surface = 'convex' | 'concave' | 'lip'
+export type Surface =
+  | 'convex'
+  | 'concave'
+  | 'lip'
+  | 'bowl'
+  | 'bevel'
+  | 'saddle'
+  | 'ripple'
+  | 'noise'
+  | 'asymmetric'
+
+export type RefractionMode = 'edge' | 'center' | 'split'