vue-pointing-bubble 0.2.0 → 0.5.0

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,7 +2,7 @@ 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';

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;
 }

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

package/dist/vue-pointing-bubble.js

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

package/package.json

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