liqvued 0.1.1 → 0.1.2

package/README.md

@@ -53,19 +53,21 @@ import { Liqvued } from 'liqvued'
 
 ## Props
 
-| Prop            | Type                | Default    | Description                                                                     |
-|-----------------|---------------------|------------|---------------------------------------------------------------------------------|
-| radius          | number              | 32         | Corner radius in pixels                                                         |
-| bezel           | number              | 22         | Width of the displacement bezel in pixels                                       |
-| thickness       | number              | 42         | Maximum displacement magnitude in pixels                                        |
-| refraction      | number              | 1          | Refraction index multiplier                                                     |
-| 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                            |
-| glassBackground | string              | —          | Glass panel background color (auto-derived from `asProps.color` when available) |
-| as              | string \| Component | `'div'`    | HTML tag or Vue component to render as                                          |
-| asProps         | object              | `{}`       | Props passed to the rendered element/component                                  |
+| Prop            | Type                | Default    | Description                                                                            |
+|-----------------|---------------------|------------|----------------------------------------------------------------------------------------|
+| radius          | number              | 32         | Corner radius in pixels                                                                |
+| borderRadius    | string              | —          | Per-corner border-radius CSS value (e.g. `"10px 20px 10px 20px"`); overrides `radius`  |
+| bezel           | number              | 22         | Width of the displacement bezel in pixels                                              |
+| thickness       | number              | 42         | Maximum displacement magnitude in pixels                                               |
+| refraction      | number              | 1          | Refraction index multiplier                                                            |
+| 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                                   |
+| 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)         |
+| asProps         | object              | `{}`       | Props passed to the rendered element/component                                         |
 
 ### Surface Types
 

package/dist/liqvued.css

@@ -1,2 +1,2 @@
-.liquid-glass[data-v-2c1a4b58]{isolation:isolate;position:relative;overflow:hidden}.liquid-glass__svg[data-v-2c1a4b58]{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-2c1a4b58]{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
+.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)}}
 /*$vite$:1*/

package/dist/liqvued.mjs

@@ -1,22 +1,23 @@
-import { computed as R, createBlock as le, createCommentVNode as ue, createElementBlock as ce, createElementVNode as w, defineComponent as ie, inject as de, mergeProps as fe, nextTick as K, onBeforeUnmount as he, onMounted as pe, openBlock as Q, provide as ve, ref as M, renderSlot as ge, resolveDynamicComponent as me, unref as be, watch as Me, withCtx as _e } from "vue";
-var ye = {
+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 = {
   key: 0,
   class: "liquid-glass__svg",
   "aria-hidden": "true"
-}, xe = [
+}, Re = [
   "href",
   "width",
   "height"
-], ke = ["scale"], we = [
+], Be = ["scale"], Ie = [
   "href",
   "width",
   "height"
-], Ie = /* @__PURE__ */ ie({
+], Se = /* @__PURE__ */ de({
   __name: "Liqvued",
   props: {
     as: { default: "div" },
     asProps: { default: () => ({}) },
     radius: { default: 32 },
+    borderRadius: {},
     bezel: { default: 22 },
     thickness: { default: 42 },
     refraction: { default: 1 },
@@ -24,12 +25,16 @@ var ye = {
     surface: { default: "convex" },
     specularOpacity: { default: 0.45 },
     glareAngle: { default: -60 },
-    glassBackground: { default: void 0 }
+    glassBackground: { default: void 0 },
+    fallbackOnly: {
+      type: Boolean,
+      default: !1
+    }
   },
-  setup(p) {
-    const a = p, v = M(null), _ = M(1), y = M(1), F = M(""), U = M(""), z = M(1), x = CSS.supports?.("backdrop-filter", "url(#x)") && /Chrome/.test(navigator.userAgent), O = `${`lg-${Math.random().toString(36).slice(2)}`}-filter`, T = de("_liqvued", !1);
-    ve("_liqvued", !0);
-    const k = M(!1), A = {
+  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 = {
       0: 0,
       sm: 4,
       md: 8,
@@ -40,90 +45,91 @@ var ye = {
       shaped: 16
     };
     function W() {
-      return v.value ? v.value instanceof Element ? v.value : v.value.$el ?? null : null;
+      return x.value;
     }
-    function f(e, t = 0, n = 1) {
+    function k(e, t = 0, n = 1) {
       return Math.max(t, Math.min(n, e));
     }
-    function X(e) {
-      return e = f(e), e * e * e * (e * (e * 6 - 15) + 10);
+    function Y(e) {
+      return e = k(e), e * e * e * (e * (e * 6 - 15) + 10);
     }
-    function I(e) {
-      return Math.pow(1 - Math.pow(1 - f(e), 4), 1 / 4);
+    function B(e) {
+      return Math.pow(1 - Math.pow(1 - k(e), 4), 1 / 4);
     }
-    function G(e) {
-      if (a.surface === "concave") return 1 - I(e);
+    function N(e) {
+      if (a.surface === "concave") return 1 - B(e);
       if (a.surface === "lip") {
-        const t = X(e);
-        return I(e) * (1 - t) + (1 - I(e)) * t;
+        const t = Y(e);
+        return B(e) * (1 - t) + (1 - B(e)) * t;
       }
-      return I(e);
-    }
-    function Y(e) {
-      return (G(e + 1e-3) - G(e - 1e-3)) / (2 * 1e-3);
+      return B(e);
     }
     function Z(e) {
-      const s = Math.atan(e), r = 1 / 1.5 * Math.sin(s), g = Math.asin(f(r, -1, 1));
-      return Math.tan(s - g);
+      return (N(e + 1e-3) - N(e - 1e-3)) / (2 * 1e-3);
     }
-    function ee(e, t, n, s, r) {
-      const g = f(e, r, n - r), h = f(t, r, s - r), o = e - g, l = t - h, c = Math.hypot(o, l), m = Math.min(e, t, n - e, s - t);
-      return o !== 0 && l !== 0 ? r - c : m;
+    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 te(e, t, n, s, r) {
-      const g = f(e, r, n - r), h = f(t, r, s - r);
-      let o = e - g, l = t - h;
-      if (o === 0 && l === 0) {
-        const m = e, i = n - e, d = t, b = s - t, u = Math.min(m, i, d, b);
-        u === m ? o = -1 : u === i ? o = 1 : u === d ? l = -1 : l = 1;
-      }
-      const c = Math.hypot(o, l) || 1;
-      return {
-        x: o / c,
-        y: l / c
+    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 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 N(e) {
+    function V(e) {
       return e.toDataURL("image/png");
     }
-    function q() {
-      const e = Math.max(1, Math.round(_.value)), t = Math.max(1, Math.round(y.value)), n = document.createElement("canvas");
+    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 s = document.createElement("canvas");
-      s.width = e, s.height = t;
-      const r = n.getContext("2d"), g = s.getContext("2d"), h = r.createImageData(e, t), o = g.createImageData(e, t), l = [];
-      let c = 1;
-      const m = {
+      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 i = 0; i < t; i++) for (let d = 0; d < e; d++) {
-        const b = ee(d, i, e, t, S.value), u = f(b / a.bezel);
-        let L = 0, P = 0, H = 0;
-        if (b >= 0 && b < a.bezel) {
-          const C = te(d, i, e, t, S.value), J = Z(Y(u)) * a.thickness * (1 - u) * a.refraction;
-          L = -C.x * J, P = -C.y * J, c = Math.max(c, Math.abs(L), Math.abs(P));
-          const se = f(C.x * m.x + C.y * m.y, 0, 1);
-          H = Math.pow(se, 18) * a.specularOpacity;
+      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;
         }
-        l.push([L, P]);
-        const B = (i * e + d) * 4, oe = Math.round(H * 255);
-        o.data[B] = 255, o.data[B + 1] = 255, o.data[B + 2] = 255, o.data[B + 3] = oe;
+        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;
       }
-      l.forEach(([i, d], b) => {
-        const u = b * 4;
-        h.data[u] = Math.round(128 + i / c * 127), h.data[u + 1] = Math.round(128 + d / c * 127), h.data[u + 2] = 128, h.data[u + 3] = 255;
-      }), r.putImageData(h, 0, 0), g.putImageData(o, 0, 0), F.value = N(n), U.value = N(s), z.value = c;
+      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;
     }
-    function V() {
+    function j() {
       const e = W();
-      e && (_.value = Math.max(1, e.offsetWidth), y.value = Math.max(1, e.offsetHeight));
+      e && (m.value = Math.max(1, e.offsetWidth), M.value = Math.max(1, e.offsetHeight));
     }
-    const j = x ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.22)", S = R(() => {
+    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 A ? A[e.rounded] : a.radius;
-    }), ae = /* @__PURE__ */ new Set([
+      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([
       "primary",
       "secondary",
       "accent",
@@ -134,107 +140,114 @@ var ye = {
       "surface",
       "background"
     ]);
-    function ne(e, t) {
-      if (ae.has(e)) return `rgba(var(--v-theme-${e}), ${t})`;
+    function oe(e, t) {
+      if (re.has(e)) return `rgba(var(--v-theme-${e}), ${t})`;
       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})`;
       }
-      return e.startsWith("rgb") ? e.replace("rgb(", "rgba(").replace(")", `, ${t})`) : j;
+      return e.startsWith("rgb") ? e.replace("rgb(", "rgba(").replace(")", `, ${t})`) : H;
     }
-    const D = R(() => {
+    const O = R(() => {
       if (a.glassBackground !== void 0) return a.glassBackground;
       const e = a.asProps;
-      return typeof e.color == "string" ? ne(e.color, 0.6) : j;
-    }), $ = R(() => x ? `url(#${O}) blur(${a.blur}px)` : "blur(12px)"), re = R(() => ({
-      borderRadius: `${S.value}px`,
-      ...D.value !== void 0 ? { backgroundColor: D.value } : {},
-      ...D.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(", ") } : {},
-      ...k.value && !T ? {
-        backdropFilter: $.value,
-        WebkitBackdropFilter: $.value
+      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
       } : {},
-      ...k.value && T && !x ? {
-        backdropFilter: $.value,
-        WebkitBackdropFilter: $.value
+      ...y.value && A && !b ? {
+        backdropFilter: I.value,
+        WebkitBackdropFilter: I.value
       } : {}
     }));
-    let E = null;
-    return pe(async () => {
-      if (await K(), x) {
-        V(), q(), await K(), k.value = !0, E = new ResizeObserver(() => {
-          V(), q(), k.value = !0;
+    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;
         });
         const e = W();
-        e && E.observe(e);
-      } else k.value = !0;
-    }), Me(() => [
-      S.value,
+        e && P.observe(e);
+      } else y.value = !0;
+    }), xe(() => [
+      q.value,
       a.bezel,
       a.thickness,
       a.refraction,
       a.surface,
       a.specularOpacity,
-      a.glareAngle
+      a.glareAngle,
+      a.fallbackOnly
     ], () => {
-      x && q(), k.value = !0;
-    }), he(() => {
-      E?.disconnect();
-    }), (e, t) => (Q(), le(me(p.as), fe({
+      b && C(), y.value = !0;
+    }), ge(() => {
+      P?.disconnect();
+    }), (e, t) => (L(), Q("div", {
       ref_key: "root",
-      ref: v,
-      class: "liquid-glass"
-    }, p.asProps, { style: re.value }), {
-      default: _e(() => [be(x) ? (Q(), ce("svg", ye, [w("defs", null, [w("filter", {
-        id: O,
-        "color-interpolation-filters": "sRGB",
-        filterUnits: "userSpaceOnUse",
+      ref: x,
+      class: "liquid-glass",
+      style: ve(se.value)
+    }, [_e(b) ? (L(), Q("svg", we, [v("defs", null, [v("filter", {
+      id: T,
+      "color-interpolation-filters": "sRGB",
+      filterUnits: "userSpaceOnUse",
+      x: "0",
+      y: "0",
+      width: "10000",
+      height: "10000"
+    }, [
+      v("feImage", {
+        href: E.value,
+        x: "0",
+        y: "0",
+        width: m.value,
+        height: M.value,
+        result: "displacement_map"
+      }, null, 8, Re),
+      t[0] || (t[0] = v("feGaussianBlur", {
+        in: "displacement_map",
+        stdDeviation: "2",
+        result: "smooth_disp"
+      }, null, -1)),
+      v("feDisplacementMap", {
+        in: "SourceGraphic",
+        in2: "smooth_disp",
+        scale: U.value,
+        xChannelSelector: "R",
+        yChannelSelector: "G",
+        result: "refracted"
+      }, null, 8, Be),
+      v("feImage", {
+        href: F.value,
         x: "0",
         y: "0",
-        width: "10000",
-        height: "10000"
-      }, [
-        w("feImage", {
-          href: F.value,
-          x: "0",
-          y: "0",
-          width: _.value,
-          height: y.value,
-          result: "displacement_map"
-        }, null, 8, xe),
-        w("feDisplacementMap", {
-          in: "SourceGraphic",
-          in2: "displacement_map",
-          scale: z.value,
-          xChannelSelector: "R",
-          yChannelSelector: "G",
-          result: "refracted"
-        }, null, 8, ke),
-        w("feImage", {
-          href: U.value,
-          x: "0",
-          y: "0",
-          width: _.value,
-          height: y.value,
-          result: "specular"
-        }, null, 8, we),
-        t[0] || (t[0] = w("feBlend", {
-          in: "refracted",
-          in2: "specular",
-          mode: "screen"
-        }, null, -1))
-      ])])])) : ue("", !0), ge(e.$slots, "default", {}, void 0, !0)]),
+        width: m.value,
+        height: M.value,
+        result: "specular"
+      }, null, 8, Ie),
+      t[1] || (t[1] = v("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)]),
       _: 3
-    }, 16, ["style"]));
+    }, 16))], 4));
   }
-}), Se = (p, a) => {
-  const v = p.__vccOpts || p;
-  for (const [_, y] of a) v[_] = y;
-  return v;
-}, $e = /* @__PURE__ */ Se(Ie, [["__scopeId", "data-v-2c1a4b58"]]), Ce = { install(p) {
-  p.component("Liqvued", $e);
+}), $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);
 } };
 export {
-  $e as Liqvued,
-  Ce as default
+  Ce as Liqvued,
+  Oe as default
 };

package/dist/liqvued.umd.js

@@ -1 +1 @@
-(function(g,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(g=typeof globalThis<"u"?globalThis:g||self,t(g.Liqvued={},g.Vue))})(this,function(g,t){Object.defineProperties(g,{__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},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}},setup(m){const n=m,v=(0,t.ref)(null),y=(0,t.ref)(1),k=(0,t.ref)(1),P=(0,t.ref)(""),V=(0,t.ref)(""),N=(0,t.ref)(1),x=CSS.supports?.("backdrop-filter","url(#x)")&&/Chrome/.test(navigator.userAgent),F=`${`lg-${Math.random().toString(36).slice(2)}`}-filter`,O=(0,t.inject)("_liqvued",!1);(0,t.provide)("_liqvued",!0);const w=(0,t.ref)(!1),U={0:0,sm:4,md:8,lg:12,xl:16,pill:9999,circle:9999,shaped:16};function z(){return v.value?v.value instanceof Element?v.value:v.value.$el??null:null}function h(e,a=0,r=1){return Math.max(a,Math.min(r,e))}function ae(e){return e=h(e),e*e*e*(e*(e*6-15)+10)}function S(e){return Math.pow(1-Math.pow(1-h(e),4),1/4)}function A(e){if(n.surface==="concave")return 1-S(e);if(n.surface==="lip"){const a=ae(e);return S(e)*(1-a)+(1-S(e))*a}return S(e)}function ne(e){return(A(e+.001)-A(e-.001))/(2*.001)}function re(e){const s=Math.atan(e),o=1/1.5*Math.sin(s),b=Math.asin(h(o,-1,1));return Math.tan(s-b)}function oe(e,a,r,s,o){const b=h(e,o,r-o),p=h(a,o,s-o),l=e-b,c=a-p,u=Math.hypot(l,c),M=Math.min(e,a,r-e,s-a);return l!==0&&c!==0?o-u:M}function le(e,a,r,s,o){const b=h(e,o,r-o),p=h(a,o,s-o);let l=e-b,c=a-p;if(l===0&&c===0){const M=e,d=r-e,f=a,_=s-a,i=Math.min(M,d,f,_);i===M?l=-1:i===d?l=1:i===f?c=-1:c=1}const u=Math.hypot(l,c)||1;return{x:l/u,y:c/u}}function W(e){return e.toDataURL("image/png")}function E(){const e=Math.max(1,Math.round(y.value)),a=Math.max(1,Math.round(k.value)),r=document.createElement("canvas");r.width=e,r.height=a;const s=document.createElement("canvas");s.width=e,s.height=a;const o=r.getContext("2d"),b=s.getContext("2d"),p=o.createImageData(e,a),l=b.createImageData(e,a),c=[];let u=1;const M={x:Math.cos(n.glareAngle*Math.PI/180),y:Math.sin(n.glareAngle*Math.PI/180)};for(let d=0;d<a;d++)for(let f=0;f<e;f++){const _=oe(f,d,e,a,I.value),i=h(_/n.bezel);let T=0,D=0,H=0;if(_>=0&&_<n.bezel){const q=le(f,d,e,a,I.value),J=re(ne(i))*n.thickness*(1-i)*n.refraction;T=-q.x*J,D=-q.y*J,u=Math.max(u,Math.abs(T),Math.abs(D));const de=h(q.x*M.x+q.y*M.y,0,1);H=Math.pow(de,18)*n.specularOpacity}c.push([T,D]);const $=(d*e+f)*4,ue=Math.round(H*255);l.data[$]=255,l.data[$+1]=255,l.data[$+2]=255,l.data[$+3]=ue}c.forEach(([d,f],_)=>{const i=_*4;p.data[i]=Math.round(128+d/u*127),p.data[i+1]=Math.round(128+f/u*127),p.data[i+2]=128,p.data[i+3]=255}),o.putImageData(p,0,0),b.putImageData(l,0,0),P.value=W(r),V.value=W(s),N.value=u}function j(){const e=z();e&&(y.value=Math.max(1,e.offsetWidth),k.value=Math.max(1,e.offsetHeight))}const G=x?"rgba(255, 255, 255, 0.08)":"rgba(255, 255, 255, 0.22)",I=(0,t.computed)(()=>{if(n.radius!==32)return n.radius;const e=n.asProps;return typeof e.rounded=="string"&&e.rounded in U?U[e.rounded]:n.radius}),se=new Set(["primary","secondary","accent","info","warning","error","success","surface","background"]);function ce(e,a){if(se.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})`):G}const C=(0,t.computed)(()=>{if(n.glassBackground!==void 0)return n.glassBackground;const e=n.asProps;return typeof e.color=="string"?ce(e.color,.6):G}),B=(0,t.computed)(()=>x?`url(#${F}) blur(${n.blur}px)`:"blur(12px)"),ie=(0,t.computed)(()=>({borderRadius:`${I.value}px`,...C.value!==void 0?{backgroundColor:C.value}:{},...C.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&&!O?{backdropFilter:B.value,WebkitBackdropFilter:B.value}:{},...w.value&&O&&!x?{backdropFilter:B.value,WebkitBackdropFilter:B.value}:{}}));let R=null;return(0,t.onMounted)(async()=>{if(await(0,t.nextTick)(),x){j(),E(),await(0,t.nextTick)(),w.value=!0,R=new ResizeObserver(()=>{j(),E(),w.value=!0});const e=z();e&&R.observe(e)}else w.value=!0}),(0,t.watch)(()=>[I.value,n.bezel,n.thickness,n.refraction,n.surface,n.specularOpacity,n.glareAngle],()=>{x&&E(),w.value=!0}),(0,t.onBeforeUnmount)(()=>{R?.disconnect()}),(e,a)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(m.as),(0,t.mergeProps)({ref_key:"root",ref:v,class:"liquid-glass"},m.asProps,{style:ie.value}),{default:(0,t.withCtx)(()=>[(0,t.unref)(x)?((0,t.openBlock)(),(0,t.createElementBlock)("svg",K,[(0,t.createElementVNode)("defs",null,[(0,t.createElementVNode)("filter",{id:F,"color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse",x:"0",y:"0",width:"10000",height:"10000"},[(0,t.createElementVNode)("feImage",{href:P.value,x:"0",y:"0",width:y.value,height:k.value,result:"displacement_map"},null,8,Q),(0,t.createElementVNode)("feDisplacementMap",{in:"SourceGraphic",in2:"displacement_map",scale:N.value,xChannelSelector:"R",yChannelSelector:"G",result:"refracted"},null,8,X),(0,t.createElementVNode)("feImage",{href:V.value,x:"0",y:"0",width:y.value,height:k.value,result:"specular"},null,8,Y),a[0]||(a[0]=(0,t.createElementVNode)("feBlend",{in:"refracted",in2:"specular",mode:"screen"},null,-1))])])])):(0,t.createCommentVNode)("",!0),(0,t.renderSlot)(e.$slots,"default",{},void 0,!0)]),_:3},16,["style"]))}}),ee=(m,n)=>{const v=m.__vccOpts||m;for(const[y,k]of n)v[y]=k;return v},L=ee(Z,[["__scopeId","data-v-2c1a4b58"]]),te={install(m){m.component("Liqvued",L)}};g.Liqvued=L,g.default=te});
+(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});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "liqvued",
   "types": "./index.d.ts",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Liquid-glass for Vue",
   "exports": {
     ".": {

package/src/Liqvued.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   type Component,
-  type ComponentPublicInstance,
   computed,
   inject,
   nextTick,
@@ -17,6 +16,7 @@ const props = withDefaults(defineProps<{
   as?: string | Component
   asProps?: object
   radius?: number
+  borderRadius?: string
   bezel?: number
   thickness?: number
   refraction?: number
@@ -25,9 +25,11 @@ const props = withDefaults(defineProps<{
   specularOpacity?: number
   glareAngle?: number
   glassBackground?: string
+  fallbackOnly?: boolean
 }>(), {
   as: 'div',
   asProps: () => ({}),
+  fallbackOnly: false,
   radius: 32,
   bezel: 22,
   thickness: 42,
@@ -39,7 +41,7 @@ const props = withDefaults(defineProps<{
   glassBackground: undefined,
 })
 
-const root = ref<HTMLElement | ComponentPublicInstance | null>(null)
+const root = ref<HTMLElement | null>(null)
 
 const width = ref(1)
 const height = ref(1)
@@ -54,6 +56,11 @@ const id = `lg-${Math.random().toString(36).slice(2)}`
 const filterId = `${id}-filter`
 const isNested = inject('_liqvued', false)
 provide('_liqvued', true)
+
+if (import.meta.env.DEV && typeof props.as !== 'string') {
+  console.warn('[Liqvued] `as` prop should be a string (HTML tag name). For Vue components, use Liqvued as a wrapper instead of `as`.')
+}
+
 const glassReady = ref(false)
 
 const roundedMap: Record<string, number> = {
@@ -68,9 +75,7 @@ const roundedMap: Record<string, number> = {
 }
 
 function getRootEl(): HTMLElement | null {
-  if (!root.value) return null
-  if (root.value instanceof Element) return root.value as HTMLElement
-  return (root.value as ComponentPublicInstance).$el ?? null
+  return root.value
 }
 
 function clamp(v: number, min = 0, max = 1) {
@@ -120,20 +125,16 @@ function distanceToRoundedRectEdge(
   h: number,
   r: number,
 ) {
-  const cx = clamp(x, r, w - r)
-  const cy = clamp(y, r, h - r)
+  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 dx = x - cx
-  const dy = y - cy
-
-  const cornerDistance = Math.hypot(dx, dy)
-  const edgeDistance = Math.min(x, y, w - x, h - y)
-
-  if (dx !== 0 && dy !== 0) {
-    return r - cornerDistance
-  }
+  const outsidePart = Math.hypot(Math.max(ax, 0), Math.max(ay, 0))
+  const insidePart = Math.min(Math.max(ax, ay), 0)
 
-  return edgeDistance
+  return -(insidePart + outsidePart - hr)
 }
 
 function normalFromRoundedRect(
@@ -141,33 +142,28 @@ function normalFromRoundedRect(
   y: number,
   w: number,
   h: number,
-  r: number,
 ) {
-  const cx = clamp(x, r, w - r)
-  const cy = clamp(y, r, h - r)
-
-  let nx = x - cx
-  let ny = y - cy
-
-  if (nx === 0 && ny === 0) {
-    const left = x
-    const right = w - x
-    const top = y
-    const bottom = h - y
-    const m = Math.min(left, right, top, bottom)
-
-    if (m === left) nx = -1
-    else if (m === right) nx = 1
-    else if (m === top) ny = -1
-    else ny = 1
-  }
+  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)
 
-  const len = Math.hypot(nx, ny) || 1
+  let nx: number
+  let ny: number
 
-  return {
-    x: nx / len,
-    y: ny / len,
+  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) {
@@ -175,6 +171,10 @@ function canvasToUrl(canvas: HTMLCanvasElement) {
 }
 
 function buildMaps() {
+  if (props.fallbackOnly) {
+    return
+  }
+
   const w = Math.max(1, Math.round(width.value))
   const h = Math.max(1, Math.round(height.value))
 
@@ -210,7 +210,7 @@ function buildMaps() {
       let spec = 0
 
       if (dist >= 0 && dist < props.bezel) {
-        const n = normalFromRoundedRect(x, y, w, h, resolvedRadius.value)
+        const n = normalFromRoundedRect(x, y, w, h)
         const slope = derivative(t)
         const bend = refractSlope(slope)
 
@@ -276,6 +276,10 @@ const resolvedRadius = computed(() => {
   return props.radius
 })
 
+const borderRadios = computed(() => {
+  return props.borderRadius || `${resolvedRadius.value}px`
+})
+
 const vuetifyThemeColors = new Set([
   'primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success',
   'surface', 'background',
@@ -308,14 +312,14 @@ const glassBgValue = computed(() => {
 })
 
 const backdropFilter = computed(() => {
-  if (supportsLiquidGlass) {
-    return `url(#${filterId}) blur(${props.blur}px)`
+  if (props.fallbackOnly || !supportsLiquidGlass) {
+    return 'blur(12px)'
   }
-  return 'blur(12px)'
+  return `url(#${filterId}) blur(${props.blur}px)`
 })
 
 const rootStyle = computed(() => ({
-  borderRadius: `${resolvedRadius.value}px`,
+  borderRadius: `${borderRadios.value}`,
   ...(glassBgValue.value !== undefined
     ? { backgroundColor: glassBgValue.value }
     : {}),
@@ -374,6 +378,7 @@ watch(
     props.surface,
     props.specularOpacity,
     props.glareAngle,
+    props.fallbackOnly,
   ],
   () => {
     if (supportsLiquidGlass) {
@@ -386,15 +391,12 @@ watch(
 onBeforeUnmount(() => {
   ro?.disconnect()
 })
-
 </script>
 
 <template>
-  <component
-    :is="as"
+  <div
     ref="root"
     class="liquid-glass"
-    v-bind="asProps"
     :style="rootStyle"
   >
     <svg
@@ -421,9 +423,15 @@ onBeforeUnmount(() => {
             result="displacement_map"
           />
 
+          <feGaussianBlur
+            in="displacement_map"
+            stdDeviation="2"
+            result="smooth_disp"
+          />
+
           <feDisplacementMap
             in="SourceGraphic"
-            in2="displacement_map"
+            in2="smooth_disp"
             :scale="scale"
             xChannelSelector="R"
             yChannelSelector="G"
@@ -444,8 +452,13 @@ onBeforeUnmount(() => {
       </defs>
     </svg>
 
-    <slot />
-  </component>
+    <component
+      :is="as"
+      v-bind="asProps"
+    >
+      <slot />
+    </component>
+  </div>
 </template>
 
 <style scoped>