liqvued 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Igor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+# Liqvued (Liquid Vue)
+
+[![npm](https://img.shields.io/npm/v/liqvued.svg)](https://www.npmjs.com/package/liqvued)
+[![npm](https://img.shields.io/npm/dw/liqvued.svg)](https://www.npmjs.com/package/liqvued)
+[![GitHub](https://img.shields.io/github/license/ivoyt/liqvued)](./LICENSE)
+
+A Vue 3 component for creating liquid glass effects using SVG filter primitives. Generates realistic SVG displacement maps on the fly.
+
+Inspired by [Liquid Glass CSS/SVG](https://kube.io/blog/liquid-glass-css-svg/)
+
+## Documentation
+
+[View Documentation & Demo](https://ivoyt.github.io/liqvued)
+
+## 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
+- **Built-in glassmorphism styling** — gradient backgrounds, inset shadows, highlight overlays
+- **TypeScript** — full type definitions
+- **Lightweight** — minimal runtime dependencies beyond Vue
+- **Flexible composition** — `as` prop allows rendering as any HTML element or component
+
+## Installation
+
+```bash
+pnpm add liqvued
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Liqvued } from 'liqvued'
+</script>
+
+<template>
+  <div style="background: url('bg.jpg') center/cover;">
+    <Liqvued
+      :radius="32"
+      :bezel="22"
+      :thickness="42"
+      :refraction="1"
+      :blur="0.4"
+      surface="convex"
+    >
+      <p>Content behind the glass</p>
+    </Liqvued>
+  </div>
+</template>
+```
+
+## 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                                  |
+
+### Surface Types
+
+- `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
+
+## Dynamic Element Rendering
+
+Use the `as` prop to render the glass effect on any element or component:
+
+```vue
+<template>
+  <Liqvued as="section" :as-props="{ class: 'my-panel' }">
+    <p>Section with glass effect</p>
+  </Liqvued>
+</template>
+```
+
+## Browser Compatibility
+
+| Browser                 | Effect                                                                            |
+|-------------------------|-----------------------------------------------------------------------------------|
+| Chrome / Edge / Opera   | ✅ Full liquid glass (SVG backdrop-filter)                                         |
+| Safari / Firefox        | ❌ Glassmorphism blur fallback (auto-detected via `CSS.supports()` + UA check)     |
+
+The fallback applies `backdrop-filter: blur(12px)` with a subtle border and shadow, so the component still looks like frosted glass in unsupported browsers. SVG filter generation is skipped entirely in fallback mode — no unnecessary CPU/GPU work.
+
+## 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.
+
+## License
+
+MIT — see [LICENSE](LICENSE)

package/dist/liqvued.css

@@ -0,0 +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)}}
+/*$vite$:1*/

package/dist/liqvued.mjs

@@ -0,0 +1,240 @@
+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 = {
+  key: 0,
+  class: "liquid-glass__svg",
+  "aria-hidden": "true"
+}, xe = [
+  "href",
+  "width",
+  "height"
+], ke = ["scale"], we = [
+  "href",
+  "width",
+  "height"
+], Ie = /* @__PURE__ */ ie({
+  __name: "Liqvued",
+  props: {
+    as: { default: "div" },
+    asProps: { default: () => ({}) },
+    radius: { default: 32 },
+    bezel: { default: 22 },
+    thickness: { default: 42 },
+    refraction: { default: 1 },
+    blur: { default: 0.4 },
+    surface: { default: "convex" },
+    specularOpacity: { default: 0.45 },
+    glareAngle: { default: -60 },
+    glassBackground: { default: void 0 }
+  },
+  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 = {
+      0: 0,
+      sm: 4,
+      md: 8,
+      lg: 12,
+      xl: 16,
+      pill: 9999,
+      circle: 9999,
+      shaped: 16
+    };
+    function W() {
+      return v.value ? v.value instanceof Element ? v.value : v.value.$el ?? null : null;
+    }
+    function f(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 I(e) {
+      return Math.pow(1 - Math.pow(1 - f(e), 4), 1 / 4);
+    }
+    function G(e) {
+      if (a.surface === "concave") return 1 - I(e);
+      if (a.surface === "lip") {
+        const t = X(e);
+        return I(e) * (1 - t) + (1 - I(e)) * t;
+      }
+      return I(e);
+    }
+    function Y(e) {
+      return (G(e + 1e-3) - G(e - 1e-3)) / (2 * 1e-3);
+    }
+    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);
+    }
+    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 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 N(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");
+      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 = {
+        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;
+        }
+        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;
+      }
+      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;
+    }
+    function V() {
+      const e = W();
+      e && (_.value = Math.max(1, e.offsetWidth), y.value = Math.max(1, e.offsetHeight));
+    }
+    const j = x ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.22)", S = 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([
+      "primary",
+      "secondary",
+      "accent",
+      "info",
+      "warning",
+      "error",
+      "success",
+      "surface",
+      "background"
+    ]);
+    function ne(e, t) {
+      if (ae.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;
+    }
+    const D = 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
+      } : {},
+      ...k.value && T && !x ? {
+        backdropFilter: $.value,
+        WebkitBackdropFilter: $.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;
+        });
+        const e = W();
+        e && E.observe(e);
+      } else k.value = !0;
+    }), Me(() => [
+      S.value,
+      a.bezel,
+      a.thickness,
+      a.refraction,
+      a.surface,
+      a.specularOpacity,
+      a.glareAngle
+    ], () => {
+      x && q(), k.value = !0;
+    }), he(() => {
+      E?.disconnect();
+    }), (e, t) => (Q(), le(me(p.as), fe({
+      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",
+        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)]),
+      _: 3
+    }, 16, ["style"]));
+  }
+}), 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);
+} };
+export {
+  $e as Liqvued,
+  Ce as default
+};

package/dist/liqvued.umd.js

@@ -0,0 +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});

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "liqvued",
+  "types": "./index.d.ts",
+  "version": "0.1.0",
+  "description": "Liquid-glass for Vue",
+  "exports": {
+    ".": {
+      "import": {
+        "development": "./src/index.ts",
+        "default": "./dist/liqvued.mjs"
+      },
+      "require": {
+        "development": "./src/index.ts",
+        "default": "./dist/liqvued.umd.js"
+      }
+    },
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./style.css": "./dist/liqvued.css"
+  },
+  "main": "./dist/liqvued.umd.cjs",
+  "module": "./dist/liqvued.mjs",
+  "source": "./src/index.ts",
+  "files": [
+    "dist",
+    "src",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint src --fix --ext .ts,.js,.cjs,.vue,.tsx,.jsx",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs:dev": "pnpm --filter liqvued-docs docs:dev",
+    "docs:build": "pnpm --filter liqvued-docs docs:build",
+    "docs:preview": "pnpm --filter liqvued-docs docs:preview"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "vue.js",
+    "typescript",
+    "liquid",
+    "glass",
+    "liquid-glass",
+    "liquid glass",
+    "liqvued"
+  ],
+  "author": "Igor Voytovich",
+  "license": "MIT",
+  "repository": "https://github.com/IVoyt/liqvued",
+  "packageManager": "pnpm@10.33.4",
+  "peerDependencies": {
+    "vue": "^3.5.14"
+  },
+  "devDependencies": {
+    "@intlify/unplugin-vue-i18n": "^11.1.1",
+    "@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",
+    "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-vue": "^10.9.0",
+    "sass-embedded": "^1.98.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.59.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^8.0.10",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-tsc": "^3.2.6"
+  }
+}

package/src/Liqvued.vue

@@ -0,0 +1,471 @@
+<script setup lang="ts">
+import {
+  type Component,
+  type ComponentPublicInstance,
+  computed,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  watch,
+} from 'vue'
+import type { Surface } from './types'
+
+const props = withDefaults(defineProps<{
+  as?: string | Component
+  asProps?: object
+  radius?: number
+  bezel?: number
+  thickness?: number
+  refraction?: number
+  blur?: number
+  surface?: Surface
+  specularOpacity?: number
+  glareAngle?: number
+  glassBackground?: string
+}>(), {
+  as: 'div',
+  asProps: () => ({}),
+  radius: 32,
+  bezel: 22,
+  thickness: 42,
+  refraction: 1,
+  blur: 0.4,
+  surface: 'convex',
+  specularOpacity: 0.45,
+  glareAngle: -60,
+  glassBackground: undefined,
+})
+
+const root = ref<HTMLElement | ComponentPublicInstance | null>(null)
+
+const width = ref(1)
+const height = ref(1)
+const mapUrl = ref('')
+const specularUrl = ref('')
+const scale = ref(1)
+const supportsLiquidGlass =
+  CSS.supports?.('backdrop-filter', 'url(#x)') &&
+  /Chrome/.test(navigator.userAgent)
+
+const id = `lg-${Math.random().toString(36).slice(2)}`
+const filterId = `${id}-filter`
+const isNested = inject('_liqvued', false)
+provide('_liqvued', true)
+const glassReady = ref(false)
+
+const roundedMap: Record<string, number> = {
+  '0': 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  pill: 9999,
+  circle: 9999,
+  shaped: 16,
+}
+
+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
+}
+
+function clamp(v: number, min = 0, max = 1) {
+  return Math.max(min, Math.min(max, v))
+}
+
+function smootherStep(x: number) {
+  x = clamp(x)
+  return x * x * x * (x * (x * 6 - 15) + 10)
+}
+
+function convex(x: number) {
+  return Math.pow(1 - Math.pow(1 - clamp(x), 4), 1 / 4)
+}
+
+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
+  }
+  return convex(x)
+}
+
+function derivative(x: number) {
+  const d = 0.001
+  return (surfaceFn(x + d) - surfaceFn(x - d)) / (2 * d)
+}
+
+function refractSlope(slope: number) {
+  const n1 = 1
+  const n2 = 1.5
+
+  const normalAngle = Math.atan(slope)
+  const theta1 = normalAngle
+
+  const sinTheta2 = (n1 / n2) * Math.sin(theta1)
+  const theta2 = Math.asin(clamp(sinTheta2, -1, 1))
+
+  return Math.tan(theta1 - theta2)
+}
+
+function distanceToRoundedRectEdge(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+) {
+  const cx = clamp(x, r, w - r)
+  const cy = clamp(y, r, h - r)
+
+  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
+  }
+
+  return edgeDistance
+}
+
+function normalFromRoundedRect(
+  x: number,
+  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 len = Math.hypot(nx, ny) || 1
+
+  return {
+    x: nx / len,
+    y: ny / len,
+  }
+}
+
+function canvasToUrl(canvas: HTMLCanvasElement) {
+  return canvas.toDataURL('image/png')
+}
+
+function buildMaps() {
+  const w = Math.max(1, Math.round(width.value))
+  const h = Math.max(1, Math.round(height.value))
+
+  const displacement = document.createElement('canvas')
+  displacement.width = w
+  displacement.height = h
+
+  const highlight = document.createElement('canvas')
+  highlight.width = w
+  highlight.height = h
+
+  const dctx = displacement.getContext('2d')!
+  const hctx = highlight.getContext('2d')!
+
+  const dImage = dctx.createImageData(w, h)
+  const hImage = hctx.createImageData(w, h)
+
+  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),
+  }
+
+  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)
+
+      let vx = 0
+      let vy = 0
+      let spec = 0
+
+      if (dist >= 0 && dist < props.bezel) {
+        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
+
+        vx = -n.x * amount
+        vy = -n.y * amount
+
+        max = Math.max(max, Math.abs(vx), Math.abs(vy))
+
+        const facing = clamp(n.x * light.x + n.y * light.y, 0, 1)
+        spec = Math.pow(facing, 18) * props.specularOpacity
+      }
+
+      vectors.push([vx, vy])
+
+      const hi = (y * w + x) * 4
+      const alpha = Math.round(spec * 255)
+
+      hImage.data[hi] = 255
+      hImage.data[hi + 1] = 255
+      hImage.data[hi + 2] = 255
+      hImage.data[hi + 3] = alpha
+    }
+  }
+
+  vectors.forEach(([vx, vy], index) => {
+    const i = index * 4
+
+    dImage.data[i] = Math.round(128 + (vx / max) * 127)
+    dImage.data[i + 1] = Math.round(128 + (vy / max) * 127)
+    dImage.data[i + 2] = 128
+    dImage.data[i + 3] = 255
+  })
+
+  dctx.putImageData(dImage, 0, 0)
+  hctx.putImageData(hImage, 0, 0)
+
+  mapUrl.value = canvasToUrl(displacement)
+  specularUrl.value = canvasToUrl(highlight)
+  scale.value = max
+}
+
+function updateSize() {
+  const el = getRootEl()
+  if (!el) return
+
+  width.value = Math.max(1, el.offsetWidth)
+  height.value = Math.max(1, el.offsetHeight)
+}
+
+const defaultBg = supportsLiquidGlass
+  ? 'rgba(255, 255, 255, 0.08)'
+  : 'rgba(255, 255, 255, 0.22)'
+
+const resolvedRadius = computed(() => {
+  if (props.radius !== 32) return props.radius
+  const a = props.asProps as Record<string, unknown>
+  if (typeof a.rounded === 'string' && a.rounded in roundedMap) {
+    return roundedMap[a.rounded]
+  }
+  return props.radius
+})
+
+const vuetifyThemeColors = new Set([
+  'primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success',
+  'surface', 'background',
+])
+
+function toTransparent(str: string, alpha: number): string {
+  if (vuetifyThemeColors.has(str)) {
+    return `rgba(var(--v-theme-${str}), ${alpha})`
+  }
+  if (str.startsWith('#')) {
+    const h = str.replace('#', '')
+    const r = parseInt(h.slice(0, 2), 16)
+    const g = parseInt(h.slice(2, 4), 16)
+    const b = parseInt(h.slice(4, 6), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+  if (str.startsWith('rgb')) {
+    return str.replace('rgb(', 'rgba(').replace(')', `, ${alpha})`)
+  }
+  return defaultBg
+}
+
+const glassBgValue = computed(() => {
+  if (props.glassBackground !== undefined) return props.glassBackground
+  const a = props.asProps as Record<string, unknown>
+  if (typeof a.color === 'string') {
+    return toTransparent(a.color, 0.6)
+  }
+  return defaultBg
+})
+
+const backdropFilter = computed(() => {
+  if (supportsLiquidGlass) {
+    return `url(#${filterId}) blur(${props.blur}px)`
+  }
+  return 'blur(12px)'
+})
+
+const rootStyle = computed(() => ({
+  borderRadius: `${resolvedRadius.value}px`,
+  ...(glassBgValue.value !== undefined
+    ? { backgroundColor: glassBgValue.value }
+    : {}),
+  ...(glassBgValue.value !== undefined
+    ? {
+        boxShadow: [
+          'inset 0 0 0 1px rgba(255, 255, 255, 0.28)',
+          '0 18px 48px rgba(0, 0, 0, 0.18)',
+        ].join(', '),
+      }
+    : {}),
+  ...(glassReady.value && !isNested
+    ? {
+        backdropFilter: backdropFilter.value,
+        WebkitBackdropFilter: backdropFilter.value,
+      }
+    : {}),
+  ...(glassReady.value && isNested && !supportsLiquidGlass
+    ? {
+        backdropFilter: backdropFilter.value,
+        WebkitBackdropFilter: backdropFilter.value,
+      }
+    : {}),
+}))
+
+let ro: ResizeObserver | null = null
+
+onMounted(async () => {
+  await nextTick()
+
+  if (supportsLiquidGlass) {
+    updateSize()
+    buildMaps()
+    await nextTick()
+    glassReady.value = true
+
+    ro = new ResizeObserver(() => {
+      updateSize()
+      buildMaps()
+      glassReady.value = true
+    })
+
+    const el = getRootEl()
+    if (el) ro.observe(el)
+  } else {
+    glassReady.value = true
+  }
+})
+
+watch(
+  () => [
+    resolvedRadius.value,
+    props.bezel,
+    props.thickness,
+    props.refraction,
+    props.surface,
+    props.specularOpacity,
+    props.glareAngle,
+  ],
+  () => {
+    if (supportsLiquidGlass) {
+      buildMaps()
+    }
+    glassReady.value = true
+  },
+)
+
+onBeforeUnmount(() => {
+  ro?.disconnect()
+})
+
+</script>
+
+<template>
+  <component
+    :is="as"
+    ref="root"
+    class="liquid-glass"
+    v-bind="asProps"
+    :style="rootStyle"
+  >
+    <svg
+      v-if="supportsLiquidGlass"
+      class="liquid-glass__svg"
+      aria-hidden="true"
+    >
+      <defs>
+        <filter
+          :id="filterId"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="10000"
+          height="10000"
+        >
+          <feImage
+            :href="mapUrl"
+            x="0"
+            y="0"
+            :width="width"
+            :height="height"
+            result="displacement_map"
+          />
+
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="displacement_map"
+            :scale="scale"
+            xChannelSelector="R"
+            yChannelSelector="G"
+            result="refracted"
+          />
+
+          <feImage
+            :href="specularUrl"
+            x="0"
+            y="0"
+            :width="width"
+            :height="height"
+            result="specular"
+          />
+
+          <feBlend in="refracted" in2="specular" mode="screen" />
+        </filter>
+      </defs>
+    </svg>
+
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.liquid-glass {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+
+.liquid-glass__svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+@supports not ((backdrop-filter: url("#x"))) {
+  .liquid-glass {
+    backdrop-filter: blur(12px);
+  }
+}
+</style>

package/src/index.ts

@@ -0,0 +1,13 @@
+import { Plugin } from 'vue'
+import Liqvued from '@liqvued/Liqvued.vue'
+import type { Surface } from './types'
+
+const LiqvuedPlugin: Plugin = {
+  install(app) {
+    app.component('Liqvued', Liqvued)
+  }
+}
+
+export { Liqvued }
+export type { Surface }
+export default LiqvuedPlugin

package/src/types.ts

@@ -0,0 +1 @@
+export type Surface = 'convex' | 'concave' | 'lip'