vue-pointing-bubble 0.4.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"),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 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(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;
+}`,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 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 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
-}, j = "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;
-}`, O = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
-function J(e = document) {
-  if (e.getElementById(j)) return;
-  const t = e.createElement("style");
-  t.id = j, t.textContent = V, e.head.prepend(t);
+}`, 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(e) {
-  return typeof e == "object" && e !== null && typeof e.x == "number" && typeof e.y == "number" && e.nodeType !== 1;
+function ft(n) {
+  return typeof n == "object" && n !== null && typeof n.x == "number" && typeof n.y == "number" && n.nodeType !== 1;
 }
-function et(e) {
-  return typeof Element > "u" || e == null ? null : typeof e == "string" ? document.querySelector(e) : e instanceof Element ? e : null;
+function X(n) {
+  return typeof Element > "u" || n == null ? null : typeof n == "string" ? document.querySelector(n) : n instanceof Element ? n : null;
 }
-function A(e, t) {
-  return !e || !t ? !1 : Object.keys(e).every((n) => e[n] === t[n]);
+function z(n, t) {
+  return !n || !t ? !1 : Object.keys(n).every((e) => n[e] === t[e]);
 }
-function nt(e) {
-  const t = e.getBoundingClientRect(), n = getComputedStyle(e), a = parseFloat(n.width) || 0, l = parseFloat(n.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: t.left,
     top: t.top,
-    width: a,
-    height: l,
-    scaleX: a ? t.width / a : 1,
-    scaleY: l ? t.height / l : 1,
+    width: l,
+    height: o,
+    scaleX: l ? t.width / l : 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 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 ? (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: (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(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 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 X(e) {
-  return e.left > e.right ? "left" : "right";
+function Z(n) {
+  return n.left > n.right ? "left" : "right";
 }
-function lt(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: g, y: x } = t, k = l === "manual", o = e.targetAnchor === "edge" ? i : null;
+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 (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 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: n.x, by: n.y, w: f, h: p };
+    return { placement: "manual", tx: f, ty: h, bx: e.x, by: e.y, w: s, h: p };
   }
-  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 $ = (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 - 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 (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 [B, $] = S.split("-"), I = W(B);
+  const [a, L] = W.split("-"), y = $(a);
   return {
-    placement: S,
-    tx: g,
-    ty: I,
-    bx: $ === "left" ? g - f - r : g + r,
-    by: B === "top" ? I - p - r : I + r,
-    w: 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(e, t, n, a) {
-  let l = 0;
-  const i = () => {
-    typeof cancelAnimationFrame < "u" && cancelAnimationFrame(l);
+function vt(n, t, e, l) {
+  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 || !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(r), { cancel: i };
+  return o = requestAnimationFrame(r), { 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 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 (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 [v, x] = u.split("-");
+    W = x === "left" ? "right" : "left", a = p + h * (v === "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 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(-n - $)} Z`,
-    stroke: n ? E(-n) : 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 ct(e) {
+function kt(n) {
   return {
-    hasTarget: e,
+    hasTarget: n,
     placement: "none",
     tip: null,
     slotTip: null,
-    overlayStyle: {},
     boxStyle: {},
-    rootIsBox: !e,
+    svgStyle: {},
     tail: null,
     boxFill: "",
     boxStroke: "",
@@ -190,15 +191,15 @@ function ct(e) {
     boxZIndex: "auto"
   };
 }
-function Y(e, t) {
-  return e === t ? !0 : !e || !t ? !1 : e.x === t.x && e.y === t.y;
+function H(n, t) {
+  return n === t ? !0 : !n || !t ? !1 : n.x === t.x && n.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 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 ft(e) {
-  J();
-  let t = { ...Q }, n = null, a = null, l = null, i = {
+function Et(n) {
+  pt();
+  let t = { ...ct }, e = null, l = null, o = null, u = {
     left: 0,
     top: 0,
     width: 0,
@@ -207,154 +208,159 @@ 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));
+  }, 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 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 $() {
+    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 (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 && (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: d ? "visible" : "hidden"
-    }), b)
-      s["--pb-width"] = "fit-content";
-    else if (Object.assign(s, {
+      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"
-    }), 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`;
+    }), 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 = u && d && l ? ut({
+    const B = o?.zIndex;
+    B && B !== "auto" && (w.zIndex = B);
+    const M = i && d && o ? St({
       geometry: d,
-      strokeWidth: l.strokeWidth,
-      radius: l.radius,
+      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: u,
-      placement: m,
-      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"
+      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 (!n || !l) {
-      r = null, W(null);
+  function W() {
+    if (!e || !o) {
+      r = null, a(null);
       return;
     }
-    const u = P(n, i, t.tailLength);
-    r = lt({
-      tip: n,
-      box: l,
-      frame: i,
+    const i = q(e, u, t.tailLength);
+    r = gt({
+      tip: e,
+      box: o,
+      frame: u,
       placement: t.placement,
       targetAnchor: t.targetAnchor,
-      targetRect: a,
-      room: u,
+      targetRect: l,
+      room: i,
       tailLength: t.tailLength
-    }), W(r);
+    }), a(r);
   }
-  function W(u) {
-    f?.cancel(), f = st(
+  function a(i) {
+    s?.cancel(), s = vt(
       d,
-      u,
+      i,
       t.transitionDuration,
-      (b) => {
-        d = b, x();
+      (g) => {
+        d = g, c();
       }
     );
   }
-  function S() {
-    const u = e.getRootEl(), b = e.getBoxEl();
-    if (!b || t.target == null || !u) return;
-    const m = ot(
-      b,
-      u,
-      i,
-      t.placement === "manual"
-    );
-    A(
-      m,
-      l
-    ) || (l = m);
+  function L(i) {
+    const g = bt(i, u);
+    z(
+      g,
+      o
+    ) || (o = g);
   }
-  function B() {
-    const u = e.getRootEl();
-    if (t.target == null || !u) {
-      n = null, a = null, l = null, r = null, d = 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;
     }
-    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
+    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
       };
-      A(h, a) || (a = h), n = {
-        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(t.target))
-      a = null, n = { x: t.target.x, y: t.target.y };
+    } else if (ft(t.target))
+      l = null, e = { x: t.target.x, y: t.target.y };
     else {
-      a = null, n = null, l = null, r = null, d = null, x();
+      l = null, e = null, o = null, r = null, d = null, c();
       return;
     }
-    S(), o();
+    L(i), W();
   }
-  function $() {
-    B();
+  function m() {
+    y();
   }
-  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);
+  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 = B;
-  function v() {
-    I(), y();
+  function b() {
+    A(), S();
   }
   return {
-    update: v,
-    setConfig(u) {
-      t = { ...t, ...u }, v();
+    update: b,
+    setConfig(i) {
+      t = { ...t, ...i }, b();
     },
     getConfig: () => t,
-    getState: () => g,
+    getState: () => k,
     destroy() {
-      f?.cancel(), p?.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 pt = ["data-placement"], ht = ["d", "fill"], mt = ["d", "stroke", "stroke-width"], H = /* @__PURE__ */ Z({
+const Bt = ["data-placement"], Lt = ["d", "fill"], $t = ["d", "stroke", "stroke-width"], N = /* @__PURE__ */ J({
   name: "PointingBubble",
   inheritAttrs: !1,
   __name: "PointingBubble",
@@ -369,142 +375,131 @@ const pt = ["data-placement"], ht = ["d", "fill"], mt = ["d", "stroke", "stroke-
     shadow: { type: Boolean, default: !0 },
     transitionDuration: { default: 200 }
   },
-  setup(e, { expose: t }) {
-    const n = e, a = L(null), l = L(null), i = 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 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 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 r = ft({
-      getRootEl: () => a.value,
-      getBoxEl: () => l.value,
-      onChange: (o) => {
-        i.value = o;
+    const f = nt(), h = Et({
+      getBoxEl: () => r.value,
+      onChange: (a) => {
+        Object.assign(s, a), f?.update();
       }
     });
-    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
+    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
       });
     }
-    q(
+    ot(
       () => [
-        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.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
       ],
-      f,
+      k,
       { flush: "post" }
-    ), N(() => {
-      f();
-    }), U(() => {
-      r.destroy();
+    ), it(() => {
+      k();
+    }), lt(() => {
+      h.destroy();
     });
-    function p() {
-      r.update();
+    function c() {
+      h.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 $ = T(
       () => ({
-        position: "absolute",
-        inset: "0",
-        width: "100%",
-        height: "100%",
-        overflow: "visible",
-        zIndex: i.value.boxZIndex
+        ...u.value,
+        ...s.boxStyle
       })
-    );
-    return (o, W) => (z(), T("div", _({
+    ), W = T(() => s.svgStyle);
+    return (a, L) => (O(), j("div", rt({
       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: 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(k.value)
+        style: at(W.value)
       }, [
-        F("path", {
+        D("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: s.tail.fill,
+          fill: s.boxFill
+        }, null, 8, Lt),
+        s.tail.stroke ? (O(), j("path", {
           key: 0,
           class: "pointing-bubble__path",
-          d: i.value.tail.stroke,
+          d: s.tail.stroke,
           fill: "none",
-          stroke: i.value.boxStroke,
-          "stroke-width": i.value.boxStrokeWidth,
+          stroke: s.boxStroke,
+          "stroke-width": s.boxStrokeWidth,
           "stroke-linejoin": "round",
           "stroke-linecap": "butt"
-        }, null, 8, mt)) : D("", !0)
-      ], 4)) : D("", !0)
-    ], 16, pt));
+        }, null, 8, $t)) : Y("", !0)
+      ], 4)) : Y("", !0)
+    ], 16, Bt));
   }
-}), bt = {
-  install(e, t = {}) {
-    const n = t.name ?? "PointingBubble";
-    e.component(n, H), e.component("Callout", H);
+}), At = {
+  install(n, t = {}) {
+    const e = t.name ?? "PointingBubble";
+    n.component(e, N), n.component("Callout", N);
   }
 };
 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
+  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.4.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,