vue-pointing-bubble 0.4.0 → 0.5.1

package/README.md

@@ -48,20 +48,20 @@ const btn = ref<HTMLElement | null>(null)
 | Prop | Default | Notes |
 | --- | --- | --- |
 | `target` | `null` | `{x,y}`, `Element`, CSS selector, or `null` (in-flow box only) |
-| `placement` | `'auto'` | `'auto'` \| quadrant \| `'manual'` (CSS positions the box) |
+| `placement` | `'auto'` | `'auto'` \| quadrant \| `'manual'` (CSS / host positions the **root** box) |
 | `targetAnchor` | `'center'` | `'center'` \| `'edge'` for element targets |
 | `maxWidth` | — | Wrap width (px) unless CSS sets width/max-width |
 | `tailLength` | `45` | Tip → box offset (px) |
 | `tailBaseWidth` | `24` | Tail width at the box (px) |
 | `padding` | `8` | Via `--pb-padding` unless CSS sets padding |
-| `shadow` | `true` | Shared drop-shadow on overlay/box |
+| `shadow` | `true` | Drop-shadow on the root (includes the SVG tail) |
 | `transitionDuration` | `200` | Glide ms (`0` off; respects reduced motion) |
 
 Expose / ref: `update()` after non-reactive layout changes.
 
-CSS hooks: `.pointing-bubble`, `.pointing-bubble__inner`, `.pointing-bubble__svg`, `.pointing-bubble__path`. Vars: `--pb-padding`, `--pb-max-width`, `--pb-width`.
+The component root is always the bubble chrome (`.pointing-bubble` + `.pointing-bubble__inner`). With a `target`, tip/tail use the nearest positioned ancestor as the coordinate frame; keep the bubble under that stage (avoid `overflow: hidden` between them). Free dragging / absolute CSS ⇒ `placement="manual"`; `auto` owns `left`/`top`.
 
-**Breaking (v0.2):** class prefix renamed from `.vue-pointing-bubble*` / `--vpb-*` to `.pointing-bubble*` / `--pb-*`.
+CSS hooks: `.pointing-bubble`, `.pointing-bubble__inner`, `.pointing-bubble__svg`, `.pointing-bubble__path`. Vars: `--pb-padding`, `--pb-max-width`, `--pb-width`.
 
 ## License
 

package/dist/pointing-bubble/PointingBubble.vue.d.ts

@@ -13,7 +13,7 @@ type __VLS_Props = {
 };
 declare function update(): void;
 declare var __VLS_1: {
-    placement: "none";
+    placement: string;
     tip: {
         x: number;
         y: number;

package/dist/pointing-bubble/core.d.ts

@@ -2,12 +2,12 @@ export type { Placement, ResolvedPlacement, TargetAnchor, Point, BubbleTarget, F
 export { DEFAULT_BUBBLE_CONFIG } from './types';
 export { injectBubbleStyles, SHADOW } from './styles';
 export { isPoint, resolveElement } from './resolveTarget';
-export { sameKeys, measureFrame, measureBox } from './measure';
+export { sameKeys, positioningFrameEl, measureFrame, measureFrameFrom, measureBox, } from './measure';
 export { computeRoom, roomierSide, computeGeometry } from './geometry';
 export type { ComputeGeometryOptions } from './geometry';
 export { easeGeometry } from './ease';
 export type { EaseHandle } from './ease';
 export { buildTailPaths } from './tail';
 export type { BuildTailOptions } from './tail';
-export { createBubbleController } from './createBubbleController';
+export { createBubbleController, isBubbleVisible, } from './createBubbleController';
 export type { BubbleRenderState, BubbleControllerOptions, BubbleController, } from './createBubbleController';

package/dist/pointing-bubble/createBubbleController.d.ts

@@ -5,10 +5,13 @@ export interface BubbleRenderState {
     tip: Point | null;
     /** Tip passed to slot/children (resolved geometry tip when available). */
     slotTip: Point | null;
-    overlayStyle: StyleMap;
+    /** Applied to the component root (always the bubble chrome). */
     boxStyle: StyleMap;
-    /** When no target, root element is the box. */
-    rootIsBox: boolean;
+    /**
+     * SVG layer covering the positioning frame, offset so path coords stay
+     * frame-local. Empty when there is no tail.
+     */
+    svgStyle: StyleMap;
     tail: TailPaths | null;
     boxFill: string;
     boxStroke: string;
@@ -16,7 +19,7 @@ export interface BubbleRenderState {
     boxZIndex: string;
 }
 export interface BubbleControllerOptions {
-    getRootEl: () => HTMLElement | null;
+    /** The bubble chrome element (component root). */
     getBoxEl: () => HTMLElement | null;
     onChange?: (state: BubbleRenderState) => void;
 }
@@ -27,5 +30,7 @@ export interface BubbleController {
     getState: () => BubbleRenderState;
     destroy: () => void;
 }
+/** True when the bubble chrome is painted (not display/visibility/opacity hidden). */
+export declare function isBubbleVisible(el: HTMLElement): boolean;
 export declare function createBubbleController(options: BubbleControllerOptions): BubbleController;
 export type { BubbleTarget };

package/dist/pointing-bubble/measure.d.ts

@@ -1,5 +1,13 @@
 import { BoxMeasure, FrameRect } from './types';
 export declare function sameKeys(a: Record<string, unknown> | null | undefined, b: Record<string, unknown> | null | undefined): boolean;
-/** Measure root frame including ancestor CSS scale (e.g. Slidev). */
-export declare function measureFrame(root: HTMLElement): FrameRect;
-export declare function measureBox(boxEl: HTMLElement, rootEl: HTMLElement, frame: FrameRect, manual: boolean): BoxMeasure;
+/**
+ * Nearest positioned ancestor of `boxEl`, used as the tip/tail coordinate
+ * frame. Falls back to `document.documentElement`.
+ */
+export declare function positioningFrameEl(boxEl: HTMLElement): HTMLElement;
+/** Measure a frame element including ancestor CSS scale (e.g. Slidev). */
+export declare function measureFrame(frameEl: HTMLElement): FrameRect;
+/** Frame for tip/tail math: the bubble's positioning containing block. */
+export declare function measureFrameFrom(boxEl: HTMLElement): FrameRect;
+/** Box size and top-left in frame-local coordinates. */
+export declare function measureBox(boxEl: HTMLElement, frame: FrameRect): BoxMeasure;

package/dist/pointing-bubble/tail.d.ts

@@ -6,7 +6,14 @@ export interface BuildTailOptions {
     tailBaseWidth: number;
 }
 /**
- * Build fill + stroke SVG path `d` for the tail from the box wall facing the tip.
- * Fill extends 1px past the border inner edge to cover zoom snapping seams.
+ * Open wedge tail in frame space.
+ *
+ * The CSS box border stays as-is. SVG only draws the tip: short hooks that sit
+ * on the border band, then straight edges to the tip. SVG stroke is centred on
+ * the path, so the path runs down the middle of the border (depth −bw/2) and
+ * the stroke paints over the CSS border rather than into the content. Fill
+ * follows the same mouth→tip rays as the stroke (covering the border band via
+ * a short outer stub) so fill does not sit inside the stroke. No box outline
+ * is redrawn.
  */
 export declare function buildTailPaths(opts: BuildTailOptions): TailPaths | null;

package/dist/pointing-bubble/types.d.ts

@@ -31,6 +31,9 @@ export interface BoxMeasure {
     fill: string;
     stroke: string;
     strokeWidth: number;
+    /** CSS border widths — abspos children are offset from the padding edge. */
+    borderLeft: number;
+    borderTop: number;
     radius: string;
     zIndex: string;
 }

package/dist/vue-pointing-bubble.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("vue"),P={target:null,placement:"auto",targetAnchor:"center",tailLength:45,tailBaseWidth:24,padding:8,shadow:!0,transitionDuration:200},T="pointing-bubble-styles",q=`:where(.pointing-bubble__inner) {
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("vue"),Z={target:null,placement:"auto",targetAnchor:"center",tailLength:45,tailBaseWidth:24,padding:8,shadow:!0,transitionDuration:200},U="pointing-bubble-styles",ot=`:where(.pointing-bubble__inner) {
   box-sizing: border-box;
   width: var(--pb-width, max-content);
   max-width: var(--pb-max-width, none);
@@ -6,4 +6,4 @@
   background: white;
   border: 2px solid gray;
   border-radius: 8px;
-}`,_="drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";function H(e=document){if(e.getElementById(T))return;const t=e.createElement("style");t.id=T,t.textContent=q,e.head.prepend(t)}function D(e){return typeof e=="object"&&e!==null&&typeof e.x=="number"&&typeof e.y=="number"&&e.nodeType!==1}function O(e){return typeof Element>"u"||e==null?null:typeof e=="string"?document.querySelector(e):e instanceof Element?e:null}function A(e,t){return!e||!t?!1:Object.keys(e).every(n=>e[n]===t[n])}function X(e){const t=e.getBoundingClientRect(),n=getComputedStyle(e),a=parseFloat(n.width)||0,l=parseFloat(n.height)||0;return{left:t.left,top:t.top,width:a,height:l,scaleX:a?t.width/a:1,scaleY:l?t.height/l:1,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}function Z(e,t,n,a){const l=getComputedStyle(e),{scaleX:i,scaleY:d}=n,r=e.getBoundingClientRect(),f=t.getBoundingClientRect();return{x:a?(r.left-f.left)/i:0,y:a?(r.top-f.top)/d:0,width:r.width/i,height:r.height/d,fill:l.backgroundColor,stroke:l.borderTopColor,strokeWidth:parseFloat(l.borderTopWidth)||0,radius:l.borderTopLeftRadius,zIndex:l.zIndex}}function F(e,t,n){const a=e.x-n;let l=a,i=t.width?t.width-e.x-n:1/0;return t.viewportWidth&&(l=Math.min(l,t.left/t.scaleX+a),i=Math.min(i,(t.viewportWidth-t.left)/t.scaleX-e.x-n)),{left:Math.max(0,l),right:Math.max(0,i)}}function j(e){return e.left>e.right?"left":"right"}function N(e){const{tip:t,box:n,frame:a,placement:l,targetRect:i,room:d,tailLength:r}=e;if(!n.width||!n.height)return null;const{width:f,height:p}=n,{x:b,y}=t,k=l==="manual",o=e.targetAnchor==="edge"?i:null;if(k){if(o){const v=n.x+f/2,w=n.y+p/2;if(!(v>=o.left&&v<=o.right&&w>=o.top&&w<=o.bottom)){const x=Math.min(o.right,Math.max(o.left,v)),g=Math.min(o.bottom,Math.max(o.top,w));return{placement:"manual",tx:x,ty:g,bx:n.x,by:n.y,w:f,h:p}}}return{placement:"manual",tx:b,ty:y,bx:n.x,by:n.y,w:f,h:p}}const E=v=>o?v==="top"?o.top:o.bottom:y;let B=l;if(l==="auto"){let v=y>(a.height||600)/2?"top":"bottom",w=j(d);const{scaleX:u,scaleY:x}=a;if(a.viewportHeight){const g=a.top+(E("top")-p-r)*x>=0,S=a.top+(E("bottom")+p+r)*x<=a.viewportHeight;v==="top"&&!g&&S?v="bottom":v==="bottom"&&!S&&g&&(v="top")}if(a.viewportWidth){const g=a.left+(b-f-r)*u>=0,S=a.left+(b+f+r)*u<=a.viewportWidth;w==="left"&&!g&&S?w="right":w==="right"&&!S&&g&&(w="left")}B=`${v}-${w}`}const[W,C]=B.split("-"),I=E(W);return{placement:B,tx:b,ty:I,bx:C==="left"?b-f-r:b+r,by:W==="top"?I-p-r:I+r,w:f,h:p}}const G=["tx","ty","bx","by"],V=["tx","ty"];function K(){return typeof matchMedia<"u"&&matchMedia("(prefers-reduced-motion: reduce)").matches}function Q(e,t,n,a){let l=0;const i=()=>{typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l)};if(!t||!e||n<=0||typeof requestAnimationFrame>"u"||K())return a(t),{cancel:i};const d=performance.now(),r=f=>{const p=Math.min(1,(f-d)/n),b=1-Math.pow(1-p,3),y={...t},k=t.placement==="manual"?V:G;for(const o of k)y[o]=e[o]+(t[o]-e[o])*b;a(y),p<1&&(l=requestAnimationFrame(r))};return l=requestAnimationFrame(r),{cancel:i}}function Y(e){const{geometry:t,strokeWidth:n,radius:a,tailBaseWidth:l}=e,{placement:i,tx:d,ty:r,bx:f,by:p,w:b,h:y}=t,k=parseFloat(a)*(a.endsWith("%")?Math.min(b,y)/100:1)||0,o=l/2,E=(s,c,h)=>c>h?(c+h)/2:Math.min(h,Math.max(c,s));let B=null,W=0;if(i==="manual"){const s=Math.max(f-d,d-(f+b),0),c=Math.max(p-r,r-(p+y),0);if(s>0&&s>=c)B=d<f?"left":"right",W=r;else if(c>0)B=r<p?"top":"bottom",W=d;else return null}else if(i!=="none"){const[s,c]=i.split("-");B=c==="left"?"right":"left",W=p+y*(s==="top"?.65:.35)}else return null;const C=1,I=B==="top"||B==="bottom",v={left:(s,c)=>[f-c,s],right:(s,c)=>[f+b+c,s],top:(s,c)=>[s,p-c],bottom:(s,c)=>[s,p+y+c]}[B],w={left:f-d,right:d-f-b,top:p-r,bottom:r-p-y}[B],u=I?E(W,f+k+o+n/2,f+b-k-o-n/2):E(W,p+k+o+n/2,p+y-k-o-n/2),x=Math.max(0,Math.min(n,w/2)),g=([s,c])=>`${s} ${c}`,S=(s,c)=>{const h=v(s,x),$=Math.hypot(d-h[0],r-h[1])||1,R=[h[0]+(d-h[0])*x/$,h[1]+(r-h[1])*x/$];return{inner:g(v(s,c)),outer:g(v(s,0)),ctrl:g(h),end:g(R)}},M=s=>{const c=S(u-o,s),h=S(u+o,s);return`M ${c.inner} L ${c.outer} Q ${c.ctrl} ${c.end} L ${d} ${r} L ${h.end} Q ${h.ctrl} ${h.outer} L ${h.inner}`};return{fill:`${M(-n-C)} Z`,stroke:n?M(-n):null}}function J(e){return{hasTarget:e,placement:"none",tip:null,slotTip:null,overlayStyle:{},boxStyle:{},rootIsBox:!e,tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"}}function z(e,t){return e===t?!0:!e||!t?!1:e.x===t.x&&e.y===t.y}function tt(e,t){return e.hasTarget===t.hasTarget&&e.placement===t.placement&&e.rootIsBox===t.rootIsBox&&e.boxFill===t.boxFill&&e.boxStroke===t.boxStroke&&e.boxStrokeWidth===t.boxStrokeWidth&&e.boxZIndex===t.boxZIndex&&z(e.tip,t.tip)&&z(e.slotTip,t.slotTip)&&A(e.overlayStyle,t.overlayStyle)&&A(e.boxStyle,t.boxStyle)&&e.tail?.fill===t.tail?.fill&&e.tail?.stroke===t.tail?.stroke}function U(e){H();let t={...P},n=null,a=null,l=null,i={left:0,top:0,width:0,height:0,scaleX:1,scaleY:1,viewportWidth:0,viewportHeight:0},d=null,r=null,f=null,p=null,b=J(!1);const y=()=>{const u=k();tt(b,u)||(b=u,e.onChange?.(b))};function k(){const u=t.target!=null,x=t.placement==="manual",g=u?d?.placement??"none":"none",S={position:"absolute",inset:"0",pointerEvents:"none",filter:t.shadow?_:void 0},M=l?.zIndex;M&&M!=="auto"&&(S.zIndex=M);const s={"--pb-padding":typeof t.padding=="number"?`${t.padding}px`:t.padding};if(t.maxWidth!=null&&(s["--pb-max-width"]=`${t.maxWidth}px`),!u)s["--pb-width"]="fit-content",t.shadow&&(s.filter=_);else if(Object.assign(s,{position:"absolute",pointerEvents:"auto",visibility:d?"visible":"hidden"}),x)s["--pb-width"]="fit-content";else if(Object.assign(s,{left:`${d?.bx??0}px`,top:`${d?.by??0}px`,margin:"0"}),t.maxWidth==null&&n){const h=F(n,i,t.tailLength),$=r?.placement??t.placement,R=$==="auto"?j(h):$.split("-")[1];s["--pb-max-width"]=`${h[R]}px`}const c=u&&d&&l?Y({geometry:d,strokeWidth:l.strokeWidth,radius:l.radius,tailBaseWidth:t.tailBaseWidth}):null;return{hasTarget:u,placement:g,tip:n,slotTip:r?{x:r.tx,y:r.ty}:n,overlayStyle:S,boxStyle:s,rootIsBox:!u,tail:c,boxFill:l?.fill??"",boxStroke:l?.stroke??"",boxStrokeWidth:l?.strokeWidth??0,boxZIndex:l?.zIndex??"auto"}}function o(){if(!n||!l){r=null,E(null);return}const u=F(n,i,t.tailLength);r=N({tip:n,box:l,frame:i,placement:t.placement,targetAnchor:t.targetAnchor,targetRect:a,room:u,tailLength:t.tailLength}),E(r)}function E(u){f?.cancel(),f=Q(d,u,t.transitionDuration,x=>{d=x,y()})}function B(){const u=e.getRootEl(),x=e.getBoxEl();if(!x||t.target==null||!u)return;const g=Z(x,u,i,t.placement==="manual");A(g,l)||(l=g)}function W(){const u=e.getRootEl();if(t.target==null||!u){n=null,a=null,l=null,r=null,d=null,y();return}i=X(u);const x=O(t.target);if(x){const g=x.getBoundingClientRect(),{scaleX:S,scaleY:M,left:s,top:c}=i,h={left:(g.left-s)/S,top:(g.top-c)/M,right:(g.right-s)/S,bottom:(g.bottom-c)/M};A(h,a)||(a=h),n={x:(h.left+h.right)/2,y:(h.top+h.bottom)/2}}else if(D(t.target))a=null,n={x:t.target.x,y:t.target.y};else{a=null,n=null,l=null,r=null,d=null,y();return}B(),o()}function C(){W()}typeof window<"u"&&(window.addEventListener("resize",C),window.addEventListener("scroll",C,!0));function I(){if(typeof ResizeObserver>"u")return;p?.disconnect(),p=new ResizeObserver(()=>W());const u=e.getRootEl(),x=e.getBoxEl();u&&p.observe(u),x&&p.observe(x)}const v=W;function w(){I(),v()}return{update:w,setConfig(u){t={...t,...u},w()},getConfig:()=>t,getState:()=>b,destroy(){f?.cancel(),p?.disconnect(),typeof window<"u"&&(window.removeEventListener("resize",C),window.removeEventListener("scroll",C,!0))}}}const et=["data-placement"],nt=["d","fill"],ot=["d","stroke","stroke-width"],L=m.defineComponent({name:"PointingBubble",inheritAttrs:!1,__name:"PointingBubble",props:{target:{default:null},placement:{default:"auto"},targetAnchor:{default:"center"},maxWidth:{default:void 0},tailLength:{default:45},tailBaseWidth:{default:24},padding:{default:8},shadow:{type:Boolean,default:!0},transitionDuration:{default:200}},setup(e,{expose:t}){const n=e,a=m.ref(null),l=m.ref(null),i=m.ref({hasTarget:!1,placement:"none",tip:null,slotTip:null,overlayStyle:{},boxStyle:{},rootIsBox:!0,tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"});function d(o){return o==null?null:typeof o=="string"||typeof Element<"u"&&o instanceof Element?o:typeof o=="object"&&"$el"in o&&o.$el instanceof Element?o.$el:typeof o=="object"&&typeof o.x=="number"&&typeof o.y=="number"?o:null}const r=U({getRootEl:()=>a.value,getBoxEl:()=>l.value,onChange:o=>{i.value=o}});function f(){r.setConfig({target:d(n.target),placement:n.placement,targetAnchor:n.targetAnchor,maxWidth:n.maxWidth,tailLength:n.tailLength,tailBaseWidth:n.tailBaseWidth,padding:n.padding,shadow:n.shadow,transitionDuration:n.transitionDuration})}m.watch(()=>[n.target,typeof n.target=="object"&&n.target&&"x"in n.target?n.target.x:null,typeof n.target=="object"&&n.target&&"y"in n.target?n.target.y:null,n.placement,n.targetAnchor,n.maxWidth,n.tailLength,n.tailBaseWidth,n.padding,n.shadow,n.transitionDuration],f,{flush:"post"}),m.onMounted(()=>{f()}),m.onBeforeUnmount(()=>{r.destroy()});function p(){r.update()}t({update:p});const b=m.computed(()=>i.value.rootIsBox?i.value.boxStyle:i.value.overlayStyle),y=m.computed(()=>i.value.rootIsBox?{display:"contents"}:i.value.boxStyle),k=m.computed(()=>({position:"absolute",inset:"0",width:"100%",height:"100%",overflow:"visible",zIndex:i.value.boxZIndex}));return(o,E)=>(m.openBlock(),m.createElementBlock("div",m.mergeProps({ref_key:"rootRef",ref:a,class:["pointing-bubble",{"pointing-bubble__inner":!e.target}],"data-placement":i.value.placement},e.target?{}:o.$attrs,{style:b.value}),[m.createElementVNode("div",m.mergeProps({ref_key:"boxRef",ref:l,class:{"pointing-bubble__inner":!!e.target}},e.target?o.$attrs:{},{style:y.value}),[m.renderSlot(o.$slots,"default",{placement:i.value.placement,tip:i.value.slotTip},()=>[E[0]||(E[0]=m.createElementVNode("p",{style:{margin:0,fontSize:"14px",fontWeight:600,color:"#1e293b"}}," Callout content ",-1))])],16),e.target&&i.value.tail?(m.openBlock(),m.createElementBlock("svg",{key:0,class:"pointing-bubble__svg",style:m.normalizeStyle(k.value)},[m.createElementVNode("path",{class:"pointing-bubble__path",d:i.value.tail.fill,fill:i.value.boxFill},null,8,nt),i.value.tail.stroke?(m.openBlock(),m.createElementBlock("path",{key:0,class:"pointing-bubble__path",d:i.value.tail.stroke,fill:"none",stroke:i.value.boxStroke,"stroke-width":i.value.boxStrokeWidth,"stroke-linejoin":"round","stroke-linecap":"butt"},null,8,ot)):m.createCommentVNode("",!0)],4)):m.createCommentVNode("",!0)],16,et))}}),lt={install(e,t={}){const n=t.name??"PointingBubble";e.component(n,L),e.component("Callout",L)}};exports.Callout=L;exports.DEFAULT_BUBBLE_CONFIG=P;exports.PointingBubble=L;exports.PointingBubblePlugin=lt;exports.buildTailPaths=Y;exports.computeGeometry=N;exports.createBubbleController=U;exports.default=L;exports.isPoint=D;exports.resolveElement=O;
+}`,lt="drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";function it(e=document){if(e.getElementById(U))return;const t=e.createElement("style");t.id=U,t.textContent=ot,e.head.prepend(t)}function K(e){return typeof e=="object"&&e!==null&&typeof e.x=="number"&&typeof e.y=="number"&&e.nodeType!==1}function q(e){return typeof Element>"u"||e==null?null:typeof e=="string"?document.querySelector(e):e instanceof Element?e:null}function Y(e,t){return!e||!t?!1:Object.keys(e).every(n=>e[n]===t[n])}function J(e){let t=e.parentElement;for(;t;){const n=getComputedStyle(t).position;if(n&&n!=="static")return t;if(t===document.documentElement)break;t=t.parentElement}return document.documentElement}function rt(e){const t=e.getBoundingClientRect(),n=getComputedStyle(e),l=parseFloat(n.width)||0,o=parseFloat(n.height)||0;return{left:t.left,top:t.top,width:l,height:o,scaleX:l?t.width/l:1,scaleY:o?t.height/o:1,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}function st(e){return rt(J(e))}function at(e,t){const n=getComputedStyle(e),{scaleX:l,scaleY:o,left:u,top:a}=t,i=e.getBoundingClientRect();return{x:(i.left-u)/l,y:(i.top-a)/o,width:i.width/l,height:i.height/o,fill:n.backgroundColor,stroke:n.borderTopColor,strokeWidth:parseFloat(n.borderTopWidth)||0,borderLeft:(parseFloat(n.borderLeftWidth)||0)/l,borderTop:(parseFloat(n.borderTopWidth)||0)/o,radius:n.borderTopLeftRadius,zIndex:n.zIndex}}function V(e,t,n){const l=e.x-n;let o=l,u=t.width?t.width-e.x-n:1/0;return t.viewportWidth&&(o=Math.min(o,t.left/t.scaleX+l),u=Math.min(u,(t.viewportWidth-t.left)/t.scaleX-e.x-n)),{left:Math.max(0,o),right:Math.max(0,u)}}function Q(e){return e.left>e.right?"left":"right"}function tt(e){const{tip:t,box:n,frame:l,placement:o,targetRect:u,room:a,tailLength:i}=e;if(!n.width||!n.height)return null;const{width:r,height:f}=n,{x:h,y:g}=t,E=o==="manual",c=e.targetAnchor==="edge"?u:null;if(E){if(c){const k=n.x+r/2,B=n.y+f/2;if(!(k>=c.left&&k<=c.right&&B>=c.top&&B<=c.bottom)){const b=Math.min(c.right,Math.max(c.left,k)),W=Math.min(c.bottom,Math.max(c.top,B));return{placement:"manual",tx:b,ty:W,bx:n.x,by:n.y,w:r,h:f}}}return{placement:"manual",tx:h,ty:g,bx:n.x,by:n.y,w:r,h:f}}const _=k=>c?k==="top"?c.top:c.bottom:g;let w=o;if(o==="auto"){let k=g>(l.height||600)/2?"top":"bottom",B=Q(a);const{scaleX:$,scaleY:b}=l;if(l.viewportHeight){const W=l.top+(_("top")-f-i)*b>=0,A=l.top+(_("bottom")+f+i)*b<=l.viewportHeight;k==="top"&&!W&&A?k="bottom":k==="bottom"&&!A&&W&&(k="top")}if(l.viewportWidth){const W=l.left+(h-r-i)*$>=0,A=l.left+(h+r+i)*$<=l.viewportWidth;B==="left"&&!W&&A?B="right":B==="right"&&!A&&W&&(B="left")}w=`${k}-${B}`}const[d,T]=w.split("-"),v=_(d);return{placement:w,tx:h,ty:v,bx:T==="left"?h-r-i:h+i,by:d==="top"?v-f-i:v+i,w:r,h:f}}const ct=["tx","ty","bx","by"],ut=["tx","ty"];function dt(){return typeof matchMedia<"u"&&matchMedia("(prefers-reduced-motion: reduce)").matches}function ft(e,t,n,l){let o=0;const u=()=>{typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(o)};if(!t||!e||n<=0||typeof requestAnimationFrame>"u"||dt())return l(t),{cancel:u};const a=performance.now(),i=r=>{const f=Math.min(1,(r-a)/n),h=1-Math.pow(1-f,3),g={...t},E=t.placement==="manual"?ut:ct;for(const c of E)g[c]=e[c]+(t[c]-e[c])*h;l(g),f<1&&(o=requestAnimationFrame(i))};return o=requestAnimationFrame(i),{cancel:u}}function et(e){const{geometry:t,strokeWidth:n,radius:l,tailBaseWidth:o}=e,{placement:u,tx:a,ty:i,bx:r,by:f,w:h,h:g}=t,E=parseFloat(l)*(l.endsWith("%")?Math.min(h,g)/100:1)||0,c=o/2,_=(y,m,P)=>m>P?(m+P)/2:Math.min(P,Math.max(m,y));let w=null,d=0;if(u==="manual"){const y=Math.max(r-a,a-(r+h),0),m=Math.max(f-i,i-(f+g),0);if(y>0&&y>=m)w=a<r?"left":"right",d=i;else if(m>0)w=i<f?"top":"bottom",d=a;else return null}else if(u!=="none"){const[y,m]=u.split("-");w=m==="left"?"right":"left",d=f+g*(y==="top"?.65:.35)}else return null;const T=w==="top"||w==="bottom",v={left:(y,m)=>[r-m,y],right:(y,m)=>[r+h+m,y],top:(y,m)=>[y,f-m],bottom:(y,m)=>[y,f+g+m]}[w],k=T?r:f,B=T?r+h:f+g,$=_(d,k+c+n/2+E,B-c-n/2-E),b=([y,m])=>`${y} ${m}`,W=n>0?-n/2:0,A=2,j=2,s=$-c,x=$+c,z=v(s-A,W),S=v(s,W),C=v(x,W),M=v(x+A,W),F=v(s,-(n+j)),O=v(x,-(n+j)),L=v(s,1),I=v(x,1);return{fill:`M ${b(F)} L ${b(L)} L ${b(S)} L ${a} ${i} L ${b(C)} L ${b(I)} L ${b(O)} Z`,stroke:n?`M ${b(z)} L ${b(S)} L ${a} ${i} L ${b(C)} L ${b(M)}`:null}}const pt=["left","top","right","bottom","width","height","transform","translate","inset","inset-inline","inset-block"];function ht(e){return{hasTarget:e,placement:"none",tip:null,slotTip:null,boxStyle:{},svgStyle:{},tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"}}function N(e,t){return e===t?!0:!e||!t?!1:e.x===t.x&&e.y===t.y}function mt(e,t){return e===t?!0:!e||!t?!1:e.placement===t.placement&&e.tx===t.tx&&e.ty===t.ty&&e.bx===t.bx&&e.by===t.by&&e.w===t.w&&e.h===t.h}function gt(e,t){return e.hasTarget===t.hasTarget&&e.placement===t.placement&&e.boxFill===t.boxFill&&e.boxStroke===t.boxStroke&&e.boxStrokeWidth===t.boxStrokeWidth&&e.boxZIndex===t.boxZIndex&&N(e.tip,t.tip)&&N(e.slotTip,t.slotTip)&&Y(e.boxStyle,t.boxStyle)&&Y(e.svgStyle,t.svgStyle)&&e.tail?.fill===t.tail?.fill&&e.tail?.stroke===t.tail?.stroke}function X(e){if(typeof e.checkVisibility=="function")return e.checkVisibility({checkOpacity:!0,checkVisibilityCSS:!0});const t=getComputedStyle(e);return!(t.display==="none"||t.visibility==="hidden"||parseFloat(t.opacity)===0)}function G(e){const t=e.style;return pt.map(n=>t.getPropertyValue(n)).join("|")}function nt(e){it();let t={...Z},n=null,l=null,o=null,u={left:0,top:0,width:0,height:0,scaleX:1,scaleY:1,viewportWidth:0,viewportHeight:0},a=null,i=null,r=null,f=null,h=null,g=null,E=ht(!1),c=!1,_="";const w=()=>{const s=d();gt(E,s)||(E=s,e.onChange?.(E))};function d(){const s=t.target!=null,x=t.placement==="manual",z=s?a?.placement??"none":"none",S={"--pb-padding":typeof t.padding=="number"?`${t.padding}px`:t.padding};if(t.maxWidth!=null&&(S["--pb-max-width"]=`${t.maxWidth}px`),t.shadow&&(S.filter=lt),!s)S["--pb-width"]="fit-content";else if(Object.assign(S,{position:"absolute",pointerEvents:"auto",overflow:"visible"}),x)S["--pb-width"]="fit-content";else if(Object.assign(S,{left:`${a?.bx??0}px`,top:`${a?.by??0}px`,margin:"0"}),t.maxWidth==null&&n){const O=V(n,u,t.tailLength),L=i?.placement??t.placement,I=L==="auto"?Q(O):L.split("-")[1];S["--pb-max-width"]=`${O[I]}px`}const C=o?.zIndex;C&&C!=="auto"&&(S.zIndex=C);const M=s&&a&&o?et({geometry:a,strokeWidth:o.strokeWidth,radius:o.radius,tailBaseWidth:t.tailBaseWidth}):null;let F={};if(M&&a&&u.width&&u.height){const O=o?.borderLeft??0,L=o?.borderTop??0;F={position:"absolute",left:`${-a.bx-O}px`,top:`${-a.by-L}px`,width:`${u.width}px`,height:`${u.height}px`,overflow:"visible",pointerEvents:"none",zIndex:o?.zIndex??"auto"}}return{hasTarget:s,placement:z,tip:n,slotTip:i?{x:i.tx,y:i.ty}:n,boxStyle:S,svgStyle:F,tail:M,boxFill:o?.fill??"",boxStroke:o?.stroke??"",boxStrokeWidth:o?.strokeWidth??0,boxZIndex:o?.zIndex??"auto"}}function T(){if(!n||!o){(i!==null||a!==null)&&(i=null,v(null));return}const s=V(n,u,t.tailLength),x=tt({tip:n,box:o,frame:u,placement:t.placement,targetAnchor:t.targetAnchor,targetRect:l,room:s,tailLength:t.tailLength});mt(i,x)||(i=x,v(i))}function v(s){r?.cancel(),r=ft(a,s,t.transitionDuration,x=>{a=x,w()})}function k(s){const x=at(s,u);return Y(x,o)?!1:(o=x,!0)}function B(){const s=e.getBoxEl();if(!s){n=null,l=null,o=null,i=null,a=null,c=!1,w();return}if(!X(s)){r?.cancel(),c=!0;return}const x=c;if(c=!1,t.target==null){n=null,l=null,o=null,i=null,a=null,w();return}const z=u;u=st(s);const S=!Y(u,z),C=typeof t.target=="string"?J(s).querySelector(t.target)??q(t.target):q(t.target);let M=!1,F=!1;if(C){const L=C.getBoundingClientRect(),{scaleX:I,scaleY:y,left:m,top:P}=u,R={left:(L.left-m)/I,top:(L.top-P)/y,right:(L.right-m)/I,bottom:(L.bottom-P)/y};F=!Y(R,l),F&&(l=R);const H={x:(R.left+R.right)/2,y:(R.top+R.bottom)/2};M=!N(n,H),n=H}else if(K(t.target)){F=l!=null,l=null;const L={x:t.target.x,y:t.target.y};M=!N(n,L),n=L}else{n=null,l=null,o=null,i=null,a=null,w();return}const O=k(s);_=G(s),!(!x&&!S&&!M&&!F&&!O&&a)&&T()}function $(){B()}typeof window<"u"&&(window.addEventListener("resize",$),window.addEventListener("scroll",$,!0));const b=B;function W(s){const x=e.getBoxEl();if(!x)return;if(s.some(C=>C.attributeName==="class"||C.attributeName==="hidden")){if(!X(x)){r?.cancel(),c=!0;return}b();return}const S=G(x);S!==_&&(_=S,b())}function A(){const s=e.getBoxEl();s!==g&&(g=s,f?.disconnect(),h?.disconnect(),f=null,h=null,s&&(typeof ResizeObserver<"u"&&(f=new ResizeObserver(()=>b()),f.observe(s)),typeof MutationObserver<"u"&&(h=new MutationObserver(W),h.observe(s,{attributes:!0,attributeFilter:["style","class","hidden"]}))))}function j(){A(),b()}return{update:j,setConfig(s){t={...t,...s},j()},getConfig:()=>t,getState:()=>E,destroy(){r?.cancel(),f?.disconnect(),h?.disconnect(),g=null,typeof window<"u"&&(window.removeEventListener("resize",$),window.removeEventListener("scroll",$,!0))}}}const bt=["data-placement"],xt=["d","fill"],yt=["d","stroke","stroke-width"],D=p.defineComponent({name:"PointingBubble",inheritAttrs:!1,__name:"PointingBubble",props:{target:{default:null},placement:{default:"auto"},targetAnchor:{default:"center"},maxWidth:{default:void 0},tailLength:{default:45},tailBaseWidth:{default:24},padding:{default:8},shadow:{type:Boolean,default:!0},transitionDuration:{default:200}},setup(e,{expose:t}){const n=e,l=p.useAttrs(),o=p.computed(()=>l.class),u=p.computed(()=>l.style),a=p.computed(()=>{const{class:d,style:T,...v}=l;return v}),i=p.ref(null),r=p.reactive({hasTarget:!1,placement:"none",tip:null,slotTip:null,boxStyle:{},svgStyle:{},tail:null,boxFill:"",boxStroke:"",boxStrokeWidth:0,boxZIndex:"auto"});function f(d){return d==null?null:typeof d=="string"||typeof Element<"u"&&d instanceof Element?d:typeof d=="object"&&"$el"in d&&d.$el instanceof Element?d.$el:typeof d=="object"&&typeof d.x=="number"&&typeof d.y=="number"?d:null}const h=p.getCurrentInstance(),g=nt({getBoxEl:()=>i.value,onChange:d=>{Object.assign(r,d),h?.update()}});function E(){g.setConfig({target:f(n.target),placement:n.placement,targetAnchor:n.targetAnchor,maxWidth:n.maxWidth,tailLength:n.tailLength,tailBaseWidth:n.tailBaseWidth,padding:n.padding,shadow:n.shadow,transitionDuration:n.transitionDuration})}p.watch(()=>[n.target,typeof n.target=="object"&&n.target&&"x"in n.target?n.target.x:null,typeof n.target=="object"&&n.target&&"y"in n.target?n.target.y:null,n.placement,n.targetAnchor,n.maxWidth,n.tailLength,n.tailBaseWidth,n.padding,n.shadow,n.transitionDuration],E,{flush:"post"}),p.onMounted(()=>{E()}),p.onBeforeUnmount(()=>{g.destroy()});function c(){g.update()}t({update:c});const _=p.computed(()=>({...u.value,...r.boxStyle})),w=p.computed(()=>r.svgStyle);return(d,T)=>(p.openBlock(),p.createElementBlock("div",p.mergeProps({ref_key:"rootRef",ref:i,class:["pointing-bubble","pointing-bubble__inner",o.value],"data-placement":r.placement},a.value,{style:_.value}),[p.renderSlot(d.$slots,"default",{placement:r.placement,tip:r.slotTip},()=>[T[0]||(T[0]=p.createElementVNode("p",{style:{margin:0,fontSize:"14px",fontWeight:600,color:"#1e293b"}}," Callout content ",-1))]),e.target&&r.tail?(p.openBlock(),p.createElementBlock("svg",{key:0,class:"pointing-bubble__svg",style:p.normalizeStyle(w.value)},[p.createElementVNode("path",{class:"pointing-bubble__path",d:r.tail.fill,fill:r.boxFill},null,8,xt),r.tail.stroke?(p.openBlock(),p.createElementBlock("path",{key:0,class:"pointing-bubble__path",d:r.tail.stroke,fill:"none",stroke:r.boxStroke,"stroke-width":r.boxStrokeWidth,"stroke-linejoin":"round","stroke-linecap":"butt"},null,8,yt)):p.createCommentVNode("",!0)],4)):p.createCommentVNode("",!0)],16,bt))}}),wt={install(e,t={}){const n=t.name??"PointingBubble";e.component(n,D),e.component("Callout",D)}};exports.Callout=D;exports.DEFAULT_BUBBLE_CONFIG=Z;exports.PointingBubble=D;exports.PointingBubblePlugin=wt;exports.buildTailPaths=et;exports.computeGeometry=tt;exports.createBubbleController=nt;exports.default=D;exports.isPoint=K;exports.resolveElement=q;

package/dist/vue-pointing-bubble.js

@@ -1,5 +1,5 @@
-import { defineComponent as Z, ref as L, watch as q, onMounted as N, onBeforeUnmount as U, computed as R, openBlock as z, createElementBlock as T, mergeProps as _, createElementVNode as F, renderSlot as G, normalizeStyle as K, createCommentVNode as D } from "vue";
-const Q = {
+import { defineComponent as nt, useAttrs as ot, computed as Y, ref as it, reactive as lt, getCurrentInstance as rt, watch as st, onMounted as at, onBeforeUnmount as ct, openBlock as H, createElementBlock as q, mergeProps as ut, renderSlot as dt, createElementVNode as X, normalizeStyle as ft, createCommentVNode as U } from "vue";
+const pt = {
   target: null,
   placement: "auto",
   targetAnchor: "center",
@@ -8,7 +8,7 @@ const Q = {
   padding: 8,
   shadow: !0,
   transitionDuration: 200
-}, j = "pointing-bubble-styles", V = `:where(.pointing-bubble__inner) {
+}, V = "pointing-bubble-styles", ht = `:where(.pointing-bubble__inner) {
   box-sizing: border-box;
   width: var(--pb-width, max-content);
   max-width: var(--pb-max-width, none);
@@ -16,173 +16,187 @@ const Q = {
   background: white;
   border: 2px solid gray;
   border-radius: 8px;
-}`, O = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
-function J(e = document) {
-  if (e.getElementById(j)) return;
+}`, mt = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
+function gt(e = document) {
+  if (e.getElementById(V)) return;
   const t = e.createElement("style");
-  t.id = j, t.textContent = V, e.head.prepend(t);
+  t.id = V, t.textContent = ht, e.head.prepend(t);
 }
-function tt(e) {
+function bt(e) {
   return typeof e == "object" && e !== null && typeof e.x == "number" && typeof e.y == "number" && e.nodeType !== 1;
 }
-function et(e) {
+function Z(e) {
   return typeof Element > "u" || e == null ? null : typeof e == "string" ? document.querySelector(e) : e instanceof Element ? e : null;
 }
-function A(e, t) {
+function j(e, t) {
   return !e || !t ? !1 : Object.keys(e).every((n) => e[n] === t[n]);
 }
-function nt(e) {
-  const t = e.getBoundingClientRect(), n = getComputedStyle(e), a = parseFloat(n.width) || 0, l = parseFloat(n.height) || 0;
+function tt(e) {
+  let t = e.parentElement;
+  for (; t; ) {
+    const n = getComputedStyle(t).position;
+    if (n && n !== "static") return t;
+    if (t === document.documentElement) break;
+    t = t.parentElement;
+  }
+  return document.documentElement;
+}
+function xt(e) {
+  const t = e.getBoundingClientRect(), n = getComputedStyle(e), i = parseFloat(n.width) || 0, o = parseFloat(n.height) || 0;
   return {
     left: t.left,
     top: t.top,
-    width: a,
-    height: l,
-    scaleX: a ? t.width / a : 1,
-    scaleY: l ? t.height / l : 1,
+    width: i,
+    height: o,
+    scaleX: i ? t.width / i : 1,
+    scaleY: o ? t.height / o : 1,
     viewportWidth: window.innerWidth,
     viewportHeight: window.innerHeight
   };
 }
-function ot(e, t, n, a) {
-  const l = getComputedStyle(e), { scaleX: i, scaleY: d } = n, r = e.getBoundingClientRect(), f = t.getBoundingClientRect();
+function yt(e) {
+  return xt(tt(e));
+}
+function wt(e, t) {
+  const n = getComputedStyle(e), { scaleX: i, scaleY: o, left: u, top: a } = t, l = e.getBoundingClientRect();
   return {
-    x: a ? (r.left - f.left) / i : 0,
-    y: a ? (r.top - f.top) / d : 0,
-    width: r.width / i,
-    height: r.height / d,
-    fill: l.backgroundColor,
-    stroke: l.borderTopColor,
-    strokeWidth: parseFloat(l.borderTopWidth) || 0,
-    radius: l.borderTopLeftRadius,
-    zIndex: l.zIndex
+    x: (l.left - u) / i,
+    y: (l.top - a) / o,
+    width: l.width / i,
+    height: l.height / o,
+    fill: n.backgroundColor,
+    stroke: n.borderTopColor,
+    strokeWidth: parseFloat(n.borderTopWidth) || 0,
+    // Abspos SVG is positioned against the padding edge; path math uses the
+    // border box from getBoundingClientRect — subtract these when offsetting.
+    borderLeft: (parseFloat(n.borderLeftWidth) || 0) / i,
+    borderTop: (parseFloat(n.borderTopWidth) || 0) / o,
+    radius: n.borderTopLeftRadius,
+    zIndex: n.zIndex
   };
 }
-function P(e, t, n) {
-  const a = e.x - n;
-  let l = a, i = t.width ? t.width - e.x - n : 1 / 0;
-  return t.viewportWidth && (l = Math.min(l, t.left / t.scaleX + a), i = Math.min(
-    i,
+function G(e, t, n) {
+  const i = e.x - n;
+  let o = i, u = t.width ? t.width - e.x - n : 1 / 0;
+  return t.viewportWidth && (o = Math.min(o, t.left / t.scaleX + i), u = Math.min(
+    u,
     (t.viewportWidth - t.left) / t.scaleX - e.x - n
-  )), { left: Math.max(0, l), right: Math.max(0, i) };
+  )), { left: Math.max(0, o), right: Math.max(0, u) };
 }
-function X(e) {
+function et(e) {
   return e.left > e.right ? "left" : "right";
 }
-function lt(e) {
-  const { tip: t, box: n, frame: a, placement: l, targetRect: i, room: d, tailLength: r } = e;
+function vt(e) {
+  const { tip: t, box: n, frame: i, placement: o, targetRect: u, room: a, tailLength: l } = e;
   if (!n.width || !n.height) return null;
-  const { width: f, height: p } = n, { x: g, y: x } = t, k = l === "manual", o = e.targetAnchor === "edge" ? i : null;
+  const { width: r, height: f } = n, { x: p, y: m } = t, k = o === "manual", c = e.targetAnchor === "edge" ? u : null;
   if (k) {
-    if (o) {
-      const y = n.x + f / 2, v = n.y + p / 2;
-      if (!(y >= o.left && y <= o.right && v >= o.top && v <= o.bottom)) {
-        const b = Math.min(o.right, Math.max(o.left, y)), m = Math.min(o.bottom, Math.max(o.top, v));
-        return { placement: "manual", tx: b, ty: m, bx: n.x, by: n.y, w: f, h: p };
+    if (c) {
+      const S = n.x + r / 2, W = n.y + f / 2;
+      if (!(S >= c.left && S <= c.right && W >= c.top && W <= c.bottom)) {
+        const g = Math.min(c.right, Math.max(c.left, S)), E = Math.min(c.bottom, Math.max(c.top, W));
+        return { placement: "manual", tx: g, ty: E, bx: n.x, by: n.y, w: r, h: f };
       }
     }
-    return { placement: "manual", tx: g, ty: x, bx: n.x, by: n.y, w: f, h: p };
+    return { placement: "manual", tx: p, ty: m, bx: n.x, by: n.y, w: r, h: f };
   }
-  const W = (y) => o ? y === "top" ? o.top : o.bottom : x;
-  let S = l;
-  if (l === "auto") {
-    let y = x > (a.height || 600) / 2 ? "top" : "bottom", v = X(d);
-    const { scaleX: u, scaleY: b } = a;
-    if (a.viewportHeight) {
-      const m = a.top + (W("top") - p - r) * b >= 0, w = a.top + (W("bottom") + p + r) * b <= a.viewportHeight;
-      y === "top" && !m && w ? y = "bottom" : y === "bottom" && !w && m && (y = "top");
+  const C = (S) => c ? S === "top" ? c.top : c.bottom : m;
+  let y = o;
+  if (o === "auto") {
+    let S = m > (i.height || 600) / 2 ? "top" : "bottom", W = et(a);
+    const { scaleX: $, scaleY: g } = i;
+    if (i.viewportHeight) {
+      const E = i.top + (C("top") - f - l) * g >= 0, A = i.top + (C("bottom") + f + l) * g <= i.viewportHeight;
+      S === "top" && !E && A ? S = "bottom" : S === "bottom" && !A && E && (S = "top");
     }
-    if (a.viewportWidth) {
-      const m = a.left + (g - f - r) * u >= 0, w = a.left + (g + f + r) * u <= a.viewportWidth;
-      v === "left" && !m && w ? v = "right" : v === "right" && !w && m && (v = "left");
+    if (i.viewportWidth) {
+      const E = i.left + (p - r - l) * $ >= 0, A = i.left + (p + r + l) * $ <= i.viewportWidth;
+      W === "left" && !E && A ? W = "right" : W === "right" && !A && E && (W = "left");
     }
-    S = `${y}-${v}`;
+    y = `${S}-${W}`;
   }
-  const [B, $] = S.split("-"), I = W(B);
+  const [d, _] = y.split("-"), w = C(d);
   return {
-    placement: S,
-    tx: g,
-    ty: I,
-    bx: $ === "left" ? g - f - r : g + r,
-    by: B === "top" ? I - p - r : I + r,
-    w: f,
-    h: p
+    placement: y,
+    tx: p,
+    ty: w,
+    bx: _ === "left" ? p - r - l : p + l,
+    by: d === "top" ? w - f - l : w + l,
+    w: r,
+    h: f
   };
 }
-const it = ["tx", "ty", "bx", "by"], rt = ["tx", "ty"];
-function at() {
+const St = ["tx", "ty", "bx", "by"], kt = ["tx", "ty"];
+function Wt() {
   return typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function st(e, t, n, a) {
-  let l = 0;
-  const i = () => {
-    typeof cancelAnimationFrame < "u" && cancelAnimationFrame(l);
+function Et(e, t, n, i) {
+  let o = 0;
+  const u = () => {
+    typeof cancelAnimationFrame < "u" && cancelAnimationFrame(o);
   };
-  if (!t || !e || n <= 0 || typeof requestAnimationFrame > "u" || at())
-    return a(t), { cancel: i };
-  const d = performance.now(), r = (f) => {
-    const p = Math.min(1, (f - d) / n), g = 1 - Math.pow(1 - p, 3), x = { ...t }, k = t.placement === "manual" ? rt : it;
-    for (const o of k)
-      x[o] = e[o] + (t[o] - e[o]) * g;
-    a(x), p < 1 && (l = requestAnimationFrame(r));
+  if (!t || !e || n <= 0 || typeof requestAnimationFrame > "u" || Wt())
+    return i(t), { cancel: u };
+  const a = performance.now(), l = (r) => {
+    const f = Math.min(1, (r - a) / n), p = 1 - Math.pow(1 - f, 3), m = { ...t }, k = t.placement === "manual" ? kt : St;
+    for (const c of k)
+      m[c] = e[c] + (t[c] - e[c]) * p;
+    i(m), f < 1 && (o = requestAnimationFrame(l));
   };
-  return l = requestAnimationFrame(r), { cancel: i };
+  return o = requestAnimationFrame(l), { cancel: u };
 }
-function ut(e) {
-  const { geometry: t, strokeWidth: n, radius: a, tailBaseWidth: l } = e, { placement: i, tx: d, ty: r, bx: f, by: p, w: g, h: x } = t, k = parseFloat(a) * (a.endsWith("%") ? Math.min(g, x) / 100 : 1) || 0, o = l / 2, W = (s, c, h) => c > h ? (c + h) / 2 : Math.min(h, Math.max(c, s));
-  let S = null, B = 0;
-  if (i === "manual") {
-    const s = Math.max(f - d, d - (f + g), 0), c = Math.max(p - r, r - (p + x), 0);
-    if (s > 0 && s >= c)
-      S = d < f ? "left" : "right", B = r;
-    else if (c > 0)
-      S = r < p ? "top" : "bottom", B = d;
+function Bt(e) {
+  const { geometry: t, strokeWidth: n, radius: i, tailBaseWidth: o } = e, { placement: u, tx: a, ty: l, bx: r, by: f, w: p, h: m } = t, k = parseFloat(i) * (i.endsWith("%") ? Math.min(p, m) / 100 : 1) || 0, c = o / 2, C = (x, h, O) => h > O ? (h + O) / 2 : Math.min(O, Math.max(h, x));
+  let y = null, d = 0;
+  if (u === "manual") {
+    const x = Math.max(r - a, a - (r + p), 0), h = Math.max(f - l, l - (f + m), 0);
+    if (x > 0 && x >= h)
+      y = a < r ? "left" : "right", d = l;
+    else if (h > 0)
+      y = l < f ? "top" : "bottom", d = a;
     else
       return null;
-  } else if (i !== "none") {
-    const [s, c] = i.split("-");
-    S = c === "left" ? "right" : "left", B = p + x * (s === "top" ? 0.65 : 0.35);
+  } else if (u !== "none") {
+    const [x, h] = u.split("-");
+    y = h === "left" ? "right" : "left", d = f + m * (x === "top" ? 0.65 : 0.35);
   } else
     return null;
-  const $ = 1, I = S === "top" || S === "bottom", y = {
-    left: (s, c) => [f - c, s],
-    right: (s, c) => [f + g + c, s],
-    top: (s, c) => [s, p - c],
-    bottom: (s, c) => [s, p + x + c]
-  }[S], v = {
-    left: f - d,
-    right: d - f - g,
-    top: p - r,
-    bottom: r - p - x
-  }[S], u = I ? W(B, f + k + o + n / 2, f + g - k - o - n / 2) : W(B, p + k + o + n / 2, p + x - k - o - n / 2), b = Math.max(0, Math.min(n, v / 2)), m = ([s, c]) => `${s} ${c}`, w = (s, c) => {
-    const h = y(s, b), M = Math.hypot(d - h[0], r - h[1]) || 1, C = [
-      h[0] + (d - h[0]) * b / M,
-      h[1] + (r - h[1]) * b / M
-    ];
-    return {
-      inner: m(y(s, c)),
-      outer: m(y(s, 0)),
-      ctrl: m(h),
-      end: m(C)
-    };
-  }, E = (s) => {
-    const c = w(u - o, s), h = w(u + o, s);
-    return `M ${c.inner} L ${c.outer} Q ${c.ctrl} ${c.end} L ${d} ${r} L ${h.end} Q ${h.ctrl} ${h.outer} L ${h.inner}`;
-  };
+  const _ = y === "top" || y === "bottom", w = {
+    left: (x, h) => [r - h, x],
+    right: (x, h) => [r + p + h, x],
+    top: (x, h) => [x, f - h],
+    bottom: (x, h) => [x, f + m + h]
+  }[y], S = _ ? r : f, W = _ ? r + p : f + m, $ = C(
+    d,
+    S + c + n / 2 + k,
+    W - c - n / 2 - k
+  ), g = ([x, h]) => `${x} ${h}`, E = n > 0 ? -n / 2 : 0, A = 2, P = 2, s = $ - c, b = $ + c, z = w(s - A, E), v = w(s, E), L = w(b, E), F = w(b + A, E), T = w(s, -(n + P)), M = w(b, -(n + P)), B = w(s, 1), I = w(b, 1);
   return {
-    fill: `${E(-n - $)} Z`,
-    stroke: n ? E(-n) : null
+    fill: `M ${g(T)} L ${g(B)} L ${g(v)} L ${a} ${l} L ${g(L)} L ${g(I)} L ${g(M)} Z`,
+    stroke: n ? `M ${g(z)} L ${g(v)} L ${a} ${l} L ${g(L)} L ${g(F)}` : null
   };
 }
-function ct(e) {
+const Lt = [
+  "left",
+  "top",
+  "right",
+  "bottom",
+  "width",
+  "height",
+  "transform",
+  "translate",
+  "inset",
+  "inset-inline",
+  "inset-block"
+];
+function Ct(e) {
   return {
     hasTarget: e,
     placement: "none",
     tip: null,
     slotTip: null,
-    overlayStyle: {},
     boxStyle: {},
-    rootIsBox: !e,
+    svgStyle: {},
     tail: null,
     boxFill: "",
     boxStroke: "",
@@ -190,15 +204,31 @@ function ct(e) {
     boxZIndex: "auto"
   };
 }
-function Y(e, t) {
+function D(e, t) {
   return e === t ? !0 : !e || !t ? !1 : e.x === t.x && e.y === t.y;
 }
-function dt(e, t) {
-  return e.hasTarget === t.hasTarget && e.placement === t.placement && e.rootIsBox === t.rootIsBox && e.boxFill === t.boxFill && e.boxStroke === t.boxStroke && e.boxStrokeWidth === t.boxStrokeWidth && e.boxZIndex === t.boxZIndex && Y(e.tip, t.tip) && Y(e.slotTip, t.slotTip) && A(e.overlayStyle, t.overlayStyle) && A(e.boxStyle, t.boxStyle) && e.tail?.fill === t.tail?.fill && e.tail?.stroke === t.tail?.stroke;
+function $t(e, t) {
+  return e === t ? !0 : !e || !t ? !1 : e.placement === t.placement && e.tx === t.tx && e.ty === t.ty && e.bx === t.bx && e.by === t.by && e.w === t.w && e.h === t.h;
+}
+function _t(e, t) {
+  return e.hasTarget === t.hasTarget && e.placement === t.placement && e.boxFill === t.boxFill && e.boxStroke === t.boxStroke && e.boxStrokeWidth === t.boxStrokeWidth && e.boxZIndex === t.boxZIndex && D(e.tip, t.tip) && D(e.slotTip, t.slotTip) && j(e.boxStyle, t.boxStyle) && j(e.svgStyle, t.svgStyle) && e.tail?.fill === t.tail?.fill && e.tail?.stroke === t.tail?.stroke;
+}
+function K(e) {
+  if (typeof e.checkVisibility == "function")
+    return e.checkVisibility({
+      checkOpacity: !0,
+      checkVisibilityCSS: !0
+    });
+  const t = getComputedStyle(e);
+  return !(t.display === "none" || t.visibility === "hidden" || parseFloat(t.opacity) === 0);
+}
+function J(e) {
+  const t = e.style;
+  return Lt.map((n) => t.getPropertyValue(n)).join("|");
 }
-function ft(e) {
-  J();
-  let t = { ...Q }, n = null, a = null, l = null, i = {
+function At(e) {
+  gt();
+  let t = { ...pt }, n = null, i = null, o = null, u = {
     left: 0,
     top: 0,
     width: 0,
@@ -207,154 +237,194 @@ function ft(e) {
     scaleY: 1,
     viewportWidth: 0,
     viewportHeight: 0
-  }, d = null, r = null, f = null, p = null, g = ct(!1);
-  const x = () => {
-    const u = k();
-    dt(g, u) || (g = u, e.onChange?.(g));
+  }, a = null, l = null, r = null, f = null, p = null, m = null, k = Ct(!1), c = !1, C = "";
+  const y = () => {
+    const s = d();
+    _t(k, s) || (k = s, e.onChange?.(k));
   };
-  function k() {
-    const u = t.target != null, b = t.placement === "manual", m = u ? d?.placement ?? "none" : "none", w = {
-      position: "absolute",
-      inset: "0",
-      pointerEvents: "none",
-      filter: t.shadow ? O : void 0
-    }, E = l?.zIndex;
-    E && E !== "auto" && (w.zIndex = E);
-    const s = {
+  function d() {
+    const s = t.target != null, b = t.placement === "manual", z = s ? a?.placement ?? "none" : "none", v = {
       "--pb-padding": typeof t.padding == "number" ? `${t.padding}px` : t.padding
     };
-    if (t.maxWidth != null && (s["--pb-max-width"] = `${t.maxWidth}px`), !u)
-      s["--pb-width"] = "fit-content", t.shadow && (s.filter = O);
-    else if (Object.assign(s, {
+    if (t.maxWidth != null && (v["--pb-max-width"] = `${t.maxWidth}px`), t.shadow && (v.filter = mt), !s)
+      v["--pb-width"] = "fit-content";
+    else if (Object.assign(v, {
       position: "absolute",
       pointerEvents: "auto",
-      visibility: d ? "visible" : "hidden"
+      overflow: "visible"
     }), b)
-      s["--pb-width"] = "fit-content";
-    else if (Object.assign(s, {
-      left: `${d?.bx ?? 0}px`,
-      top: `${d?.by ?? 0}px`,
+      v["--pb-width"] = "fit-content";
+    else if (Object.assign(v, {
+      left: `${a?.bx ?? 0}px`,
+      top: `${a?.by ?? 0}px`,
       margin: "0"
     }), t.maxWidth == null && n) {
-      const h = P(n, i, t.tailLength), M = r?.placement ?? t.placement, C = M === "auto" ? X(h) : M.split("-")[1];
-      s["--pb-max-width"] = `${h[C]}px`;
+      const M = G(n, u, t.tailLength), B = l?.placement ?? t.placement, I = B === "auto" ? et(M) : B.split("-")[1];
+      v["--pb-max-width"] = `${M[I]}px`;
     }
-    const c = u && d && l ? ut({
-      geometry: d,
-      strokeWidth: l.strokeWidth,
-      radius: l.radius,
+    const L = o?.zIndex;
+    L && L !== "auto" && (v.zIndex = L);
+    const F = s && a && o ? Bt({
+      geometry: a,
+      strokeWidth: o.strokeWidth,
+      radius: o.radius,
       tailBaseWidth: t.tailBaseWidth
     }) : null;
+    let T = {};
+    if (F && a && u.width && u.height) {
+      const M = o?.borderLeft ?? 0, B = o?.borderTop ?? 0;
+      T = {
+        position: "absolute",
+        left: `${-a.bx - M}px`,
+        top: `${-a.by - B}px`,
+        width: `${u.width}px`,
+        height: `${u.height}px`,
+        overflow: "visible",
+        pointerEvents: "none",
+        zIndex: o?.zIndex ?? "auto"
+      };
+    }
     return {
-      hasTarget: u,
-      placement: m,
+      hasTarget: s,
+      placement: z,
       tip: n,
-      slotTip: r ? { x: r.tx, y: r.ty } : n,
-      overlayStyle: w,
-      boxStyle: s,
-      rootIsBox: !u,
-      tail: c,
-      boxFill: l?.fill ?? "",
-      boxStroke: l?.stroke ?? "",
-      boxStrokeWidth: l?.strokeWidth ?? 0,
-      boxZIndex: l?.zIndex ?? "auto"
+      slotTip: l ? { x: l.tx, y: l.ty } : n,
+      boxStyle: v,
+      svgStyle: T,
+      tail: F,
+      boxFill: o?.fill ?? "",
+      boxStroke: o?.stroke ?? "",
+      boxStrokeWidth: o?.strokeWidth ?? 0,
+      boxZIndex: o?.zIndex ?? "auto"
     };
   }
-  function o() {
-    if (!n || !l) {
-      r = null, W(null);
+  function _() {
+    if (!n || !o) {
+      (l !== null || a !== null) && (l = null, w(null));
       return;
     }
-    const u = P(n, i, t.tailLength);
-    r = lt({
+    const s = G(n, u, t.tailLength), b = vt({
       tip: n,
-      box: l,
-      frame: i,
+      box: o,
+      frame: u,
       placement: t.placement,
       targetAnchor: t.targetAnchor,
-      targetRect: a,
-      room: u,
+      targetRect: i,
+      room: s,
       tailLength: t.tailLength
-    }), W(r);
+    });
+    $t(l, b) || (l = b, w(l));
   }
-  function W(u) {
-    f?.cancel(), f = st(
-      d,
-      u,
+  function w(s) {
+    r?.cancel(), r = Et(
+      a,
+      s,
       t.transitionDuration,
       (b) => {
-        d = b, x();
+        a = b, y();
       }
     );
   }
-  function S() {
-    const u = e.getRootEl(), b = e.getBoxEl();
-    if (!b || t.target == null || !u) return;
-    const m = ot(
+  function S(s) {
+    const b = wt(s, u);
+    return j(
       b,
-      u,
-      i,
-      t.placement === "manual"
-    );
-    A(
-      m,
-      l
-    ) || (l = m);
+      o
+    ) ? !1 : (o = b, !0);
   }
-  function B() {
-    const u = e.getRootEl();
-    if (t.target == null || !u) {
-      n = null, a = null, l = null, r = null, d = null, x();
+  function W() {
+    const s = e.getBoxEl();
+    if (!s) {
+      n = null, i = null, o = null, l = null, a = null, c = !1, y();
+      return;
+    }
+    if (!K(s)) {
+      r?.cancel(), c = !0;
+      return;
+    }
+    const b = c;
+    if (c = !1, t.target == null) {
+      n = null, i = null, o = null, l = null, a = null, y();
       return;
     }
-    i = nt(u);
-    const b = et(t.target);
-    if (b) {
-      const m = b.getBoundingClientRect(), { scaleX: w, scaleY: E, left: s, top: c } = i, h = {
-        left: (m.left - s) / w,
-        top: (m.top - c) / E,
-        right: (m.right - s) / w,
-        bottom: (m.bottom - c) / E
+    const z = u;
+    u = yt(s);
+    const v = !j(
+      u,
+      z
+    ), L = typeof t.target == "string" ? tt(s).querySelector(t.target) ?? Z(t.target) : Z(t.target);
+    let F = !1, T = !1;
+    if (L) {
+      const B = L.getBoundingClientRect(), { scaleX: I, scaleY: x, left: h, top: O } = u, R = {
+        left: (B.left - h) / I,
+        top: (B.top - O) / x,
+        right: (B.right - h) / I,
+        bottom: (B.bottom - O) / x
       };
-      A(h, a) || (a = h), n = {
-        x: (h.left + h.right) / 2,
-        y: (h.top + h.bottom) / 2
+      T = !j(
+        R,
+        i
+      ), T && (i = R);
+      const N = {
+        x: (R.left + R.right) / 2,
+        y: (R.top + R.bottom) / 2
       };
-    } else if (tt(t.target))
-      a = null, n = { x: t.target.x, y: t.target.y };
-    else {
-      a = null, n = null, l = null, r = null, d = null, x();
+      F = !D(n, N), n = N;
+    } else if (bt(t.target)) {
+      T = i != null, i = null;
+      const B = { x: t.target.x, y: t.target.y };
+      F = !D(n, B), n = B;
+    } else {
+      n = null, i = null, o = null, l = null, a = null, y();
       return;
     }
-    S(), o();
+    const M = S(s);
+    C = J(s), !(!b && !v && !F && !T && !M && a) && _();
   }
   function $() {
-    B();
+    W();
   }
   typeof window < "u" && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0));
-  function I() {
-    if (typeof ResizeObserver > "u") return;
-    p?.disconnect(), p = new ResizeObserver(() => B());
-    const u = e.getRootEl(), b = e.getBoxEl();
-    u && p.observe(u), b && p.observe(b);
+  const g = W;
+  function E(s) {
+    const b = e.getBoxEl();
+    if (!b) return;
+    if (s.some(
+      (L) => L.attributeName === "class" || L.attributeName === "hidden"
+    )) {
+      if (!K(b)) {
+        r?.cancel(), c = !0;
+        return;
+      }
+      g();
+      return;
+    }
+    const v = J(b);
+    v !== C && (C = v, g());
   }
-  const y = B;
-  function v() {
-    I(), y();
+  function A() {
+    const s = e.getBoxEl();
+    s !== m && (m = s, f?.disconnect(), p?.disconnect(), f = null, p = null, s && (typeof ResizeObserver < "u" && (f = new ResizeObserver(() => g()), f.observe(s)), typeof MutationObserver < "u" && (p = new MutationObserver(E), p.observe(s, {
+      attributes: !0,
+      attributeFilter: ["style", "class", "hidden"]
+    }))));
+  }
+  function P() {
+    A(), g();
   }
   return {
-    update: v,
-    setConfig(u) {
-      t = { ...t, ...u }, v();
+    update: P,
+    setConfig(s) {
+      t = { ...t, ...s }, P();
     },
     getConfig: () => t,
-    getState: () => g,
+    getState: () => k,
     destroy() {
-      f?.cancel(), p?.disconnect(), typeof window < "u" && (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+      r?.cancel(), f?.disconnect(), p?.disconnect(), m = null, typeof window < "u" && (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
     }
   };
 }
-const pt = ["data-placement"], ht = ["d", "fill"], mt = ["d", "stroke", "stroke-width"], H = /* @__PURE__ */ Z({
+const Tt = ["data-placement"], Ft = ["d", "fill"], Mt = ["d", "stroke", "stroke-width"], Q = /* @__PURE__ */ nt({
   name: "PointingBubble",
   inheritAttrs: !1,
   __name: "PointingBubble",
@@ -370,33 +440,34 @@ const pt = ["data-placement"], ht = ["d", "fill"], mt = ["d", "stroke", "stroke-
     transitionDuration: { default: 200 }
   },
   setup(e, { expose: t }) {
-    const n = e, a = L(null), l = L(null), i = L({
+    const n = e, i = ot(), o = Y(() => i.class), u = Y(() => i.style), a = Y(() => {
+      const { class: d, style: _, ...w } = i;
+      return w;
+    }), l = it(null), r = lt({
       hasTarget: !1,
       placement: "none",
       tip: null,
       slotTip: null,
-      overlayStyle: {},
       boxStyle: {},
-      rootIsBox: !0,
+      svgStyle: {},
       tail: null,
       boxFill: "",
       boxStroke: "",
       boxStrokeWidth: 0,
       boxZIndex: "auto"
     });
-    function d(o) {
-      return o == null ? null : typeof o == "string" || typeof Element < "u" && o instanceof Element ? o : typeof o == "object" && "$el" in o && o.$el instanceof Element ? o.$el : typeof o == "object" && typeof o.x == "number" && typeof o.y == "number" ? o : null;
+    function f(d) {
+      return d == null ? null : typeof d == "string" || typeof Element < "u" && d instanceof Element ? d : typeof d == "object" && "$el" in d && d.$el instanceof Element ? d.$el : typeof d == "object" && typeof d.x == "number" && typeof d.y == "number" ? d : null;
     }
-    const r = ft({
-      getRootEl: () => a.value,
+    const p = rt(), m = At({
       getBoxEl: () => l.value,
-      onChange: (o) => {
-        i.value = o;
+      onChange: (d) => {
+        Object.assign(r, d), p?.update();
       }
     });
-    function f() {
-      r.setConfig({
-        target: d(n.target),
+    function k() {
+      m.setConfig({
+        target: f(n.target),
         placement: n.placement,
         targetAnchor: n.targetAnchor,
         maxWidth: n.maxWidth,
@@ -407,7 +478,7 @@ const pt = ["data-placement"], ht = ["d", "fill"], mt = ["d", "stroke", "stroke-
         transitionDuration: n.transitionDuration
       });
     }
-    q(
+    st(
       () => [
         n.target,
         typeof n.target == "object" && n.target && "x" in n.target ? n.target.x : null,
@@ -421,90 +492,78 @@ const pt = ["data-placement"], ht = ["d", "fill"], mt = ["d", "stroke", "stroke-
         n.shadow,
         n.transitionDuration
       ],
-      f,
+      k,
       { flush: "post" }
-    ), N(() => {
-      f();
-    }), U(() => {
-      r.destroy();
+    ), at(() => {
+      k();
+    }), ct(() => {
+      m.destroy();
     });
-    function p() {
-      r.update();
+    function c() {
+      m.update();
     }
-    t({ update: p });
-    const g = R(
-      () => i.value.rootIsBox ? i.value.boxStyle : i.value.overlayStyle
-    ), x = R(() => i.value.rootIsBox ? { display: "contents" } : i.value.boxStyle), k = R(
+    t({ update: c });
+    const C = Y(
       () => ({
-        position: "absolute",
-        inset: "0",
-        width: "100%",
-        height: "100%",
-        overflow: "visible",
-        zIndex: i.value.boxZIndex
+        ...u.value,
+        ...r.boxStyle
       })
-    );
-    return (o, W) => (z(), T("div", _({
+    ), y = Y(() => r.svgStyle);
+    return (d, _) => (H(), q("div", ut({
       ref_key: "rootRef",
-      ref: a,
-      class: ["pointing-bubble", { "pointing-bubble__inner": !e.target }],
-      "data-placement": i.value.placement
-    }, e.target ? {} : o.$attrs, { style: g.value }), [
-      F("div", _({
-        ref_key: "boxRef",
-        ref: l,
-        class: { "pointing-bubble__inner": !!e.target }
-      }, e.target ? o.$attrs : {}, { style: x.value }), [
-        G(o.$slots, "default", {
-          placement: i.value.placement,
-          tip: i.value.slotTip
-        }, () => [
-          W[0] || (W[0] = F("p", { style: {
-            margin: 0,
-            fontSize: "14px",
-            fontWeight: 600,
-            color: "#1e293b"
-          } }, " Callout content ", -1))
-        ])
-      ], 16),
-      e.target && i.value.tail ? (z(), T("svg", {
+      ref: l,
+      class: ["pointing-bubble", "pointing-bubble__inner", o.value],
+      "data-placement": r.placement
+    }, a.value, { style: C.value }), [
+      dt(d.$slots, "default", {
+        placement: r.placement,
+        tip: r.slotTip
+      }, () => [
+        _[0] || (_[0] = X("p", { style: {
+          margin: 0,
+          fontSize: "14px",
+          fontWeight: 600,
+          color: "#1e293b"
+        } }, " Callout content ", -1))
+      ]),
+      e.target && r.tail ? (H(), q("svg", {
         key: 0,
         class: "pointing-bubble__svg",
-        style: K(k.value)
+        style: ft(y.value)
       }, [
-        F("path", {
+        X("path", {
           class: "pointing-bubble__path",
-          d: i.value.tail.fill,
-          fill: i.value.boxFill
-        }, null, 8, ht),
-        i.value.tail.stroke ? (z(), T("path", {
+          d: r.tail.fill,
+          fill: r.boxFill
+        }, null, 8, Ft),
+        r.tail.stroke ? (H(), q("path", {
           key: 0,
           class: "pointing-bubble__path",
-          d: i.value.tail.stroke,
+          d: r.tail.stroke,
           fill: "none",
-          stroke: i.value.boxStroke,
-          "stroke-width": i.value.boxStrokeWidth,
+          stroke: r.boxStroke,
+          "stroke-width": r.boxStrokeWidth,
           "stroke-linejoin": "round",
           "stroke-linecap": "butt"
-        }, null, 8, mt)) : D("", !0)
-      ], 4)) : D("", !0)
-    ], 16, pt));
+        }, null, 8, Mt)) : U("", !0)
+      ], 4)) : U("", !0)
+    ], 16, Tt));
   }
-}), bt = {
+}), It = {
   install(e, t = {}) {
     const n = t.name ?? "PointingBubble";
-    e.component(n, H), e.component("Callout", H);
+    e.component(n, Q), e.component("Callout", Q);
   }
 };
 export {
-  H as Callout,
-  Q as DEFAULT_BUBBLE_CONFIG,
-  H as PointingBubble,
-  bt as PointingBubblePlugin,
-  ut as buildTailPaths,
-  lt as computeGeometry,
-  ft as createBubbleController,
-  H as default,
-  tt as isPoint,
-  et as resolveElement
+  Q as Callout,
+  pt as DEFAULT_BUBBLE_CONFIG,
+  Q as PointingBubble,
+  It as PointingBubblePlugin,
+  Bt as buildTailPaths,
+  vt as computeGeometry,
+  At as createBubbleController,
+  Q as default,
+  bt as isPoint,
+  Z as resolveElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pointing-bubble",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Vue 3 callout / speech bubble whose SVG tail points exactly at coordinates or a DOM element.",
   "type": "module",
   "sideEffects": false,