vue-pointing-bubble 0.1.0 → 0.2.0

package/package.json

@@ -1,65 +1,62 @@
 {
   "name": "vue-pointing-bubble",
-  "version": "0.1.0",
-  "description": "Vue 3 callout / speech bubble component whose tail points exactly at absolute (x, y) coordinates or at a DOM element.",
-  "keywords": [
-    "vue",
-    "vue3",
-    "callout",
-    "speech-bubble",
-    "tooltip",
-    "popover",
-    "pointer",
-    "svg"
-  ],
-  "author": "Alexey Murz Korepov",
-  "license": "MIT",
-  "homepage": "https://murznn.github.io/vue-pointing-bubble/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MurzNN/vue-pointing-bubble.git"
-  },
-  "bugs": {
-    "url": "https://github.com/MurzNN/vue-pointing-bubble/issues"
-  },
+  "version": "0.2.0",
+  "description": "Vue 3 callout / speech bubble whose SVG tail points exactly at coordinates or a DOM element.",
   "type": "module",
-  "main": "./dist/vue-pointing-bubble.umd.cjs",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue-pointing-bubble.cjs",
   "module": "./dist/vue-pointing-bubble.js",
-  "unpkg": "./dist/vue-pointing-bubble.umd.cjs",
-  "jsdelivr": "./dist/vue-pointing-bubble.umd.cjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/vue-pointing-bubble.js",
-      "require": "./dist/vue-pointing-bubble.umd.cjs"
-    },
-    "./PointingBubble.vue": "./registry/ui/pointing-bubble/PointingBubble.vue"
-  },
-  "files": [
-    "dist",
-    "src",
-    "registry"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "dev": "npm run dev:demo",
-    "dev:demo": "vite --config vite.demo.config.js",
-    "build": "vite build && cp src/index.d.ts dist/index.d.ts",
-    "build:demo": "npm run registry:build && vite build --config vite.demo.config.js",
-    "registry:build": "shadcn-vue build --output demo/public/r",
-    "preview:demo": "vite preview --config vite.demo.config.js",
-    "test": "playwright test",
-    "prepare": "npm run build"
+      "require": "./dist/vue-pointing-bubble.cjs"
+    }
   },
   "peerDependencies": {
-    "vue": "^3.3.0"
+    "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.63.0",
-    "@vitejs/plugin-vue": "^6.0.9",
-    "shadcn-vue": "^2.8.2",
-    "vite": "^8.3.2",
-    "vue": "^3.5.43"
+    "@microsoft/api-extractor": "^7.59.4",
+    "@types/node": "^22.18.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.7.0",
+    "jsdom": "^26.1.0",
+    "typescript": "~5.9.2",
+    "unplugin-dts": "^1.0.0-beta.6",
+    "vite": "^7.1.7",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.21",
+    "vue-tsc": "^3.0.7"
+  },
+  "license": "MIT",
+  "homepage": "https://murznn.github.io/js-pointing-bubble/",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MurzNN/js-pointing-bubble.git",
+    "directory": "packages/vue"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "callout",
+    "speech-bubble",
+    "tooltip",
+    "popover",
+    "shadcn-vue"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run"
   }
-}
+}

package/dist/vue-pointing-bubble.umd.cjs

@@ -1,9 +0,0 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VuePointingBubble={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=[`data-placement`],r=[`d`,`fill`],i=[`d`,`stroke`,`stroke-width`],a=`:where(.vue-pointing-bubble__inner) {
-  box-sizing: border-box;
-  width: var(--vpb-width, max-content);
-  max-width: var(--vpb-max-width, none);
-  padding: var(--vpb-padding);
-  background: white;
-  border: 2px solid gray;
-  border-radius: 8px;
-}`,o=`drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))`,s=30,c=280,l=[`tx`,`ty`,`bx`,`by`],u=[`tx`,`ty`],d=()=>{if(typeof document>`u`||document.getElementById(`vue-pointing-bubble-styles`))return;let e=document.createElement(`style`);e.id=`vue-pointing-bubble-styles`,e.textContent=a,document.head.prepend(e)},f=Object.assign({inheritAttrs:!1},{__name:`PointingBubble`,props:{target:{type:[Object,String,typeof Element<`u`?Element:Object],default:null},placement:{type:String,default:`auto`,validator:e=>[`auto`,`top-left`,`top-right`,`bottom-left`,`bottom-right`,`manual`].includes(e)},targetAnchor:{type:String,default:`center`,validator:e=>[`center`,`edge`].includes(e)},maxWidth:{type:Number,default:void 0},tailLength:{type:Number,default:45},tailBaseWidth:{type:Number,default:24},padding:{type:[Number,String],default:8},shadow:{type:Boolean,default:!0},transitionDuration:{type:Number,default:200}},setup(e,{expose:a}){let f=e;d();let p=(0,t.ref)(null),m=(0,t.ref)(null),h=(0,t.ref)(null),g=(0,t.ref)(null),_=(0,t.ref)(null),v=(0,t.ref)({left:0,top:0,width:0,height:0,scaleX:1,scaleY:1,viewportWidth:0,viewportHeight:0}),y=(0,t.computed)(()=>f.placement===`manual`),b=(e,t)=>!!e&&!!t&&Object.keys(e).every(n=>e[n]===t[n]),x=e=>typeof Element>`u`||!e?null:typeof e==`string`?document.querySelector(e):e instanceof Element?e:e.$el instanceof Element?e.$el:null,S=()=>{let e=p.value;if(!f.target||!e){h.value=null;return}let t=e.getBoundingClientRect(),n=e.offsetWidth?t.width/e.offsetWidth:1,r=e.offsetHeight?t.height/e.offsetHeight:1;v.value={left:t.left,top:t.top,width:e.offsetWidth,height:e.offsetHeight,scaleX:n,scaleY:r,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight};let i=x(f.target);if(i){let e=i.getBoundingClientRect(),a={left:(e.left-t.left)/n,top:(e.top-t.top)/r,right:(e.right-t.left)/n,bottom:(e.bottom-t.top)/r};b(a,g.value)||(g.value=a),h.value={x:(a.left+a.right)/2,y:(a.top+a.bottom)/2}}else typeof f.target.x==`number`&&typeof f.target.y==`number`?(g.value=null,h.value={x:f.target.x,y:f.target.y}):(g.value=null,h.value=null);C()};(0,t.watch)(()=>[f.target,f.target?.x,f.target?.y],S,{flush:`post`});let C=()=>{let e=m.value;if(!e||!f.target)return;let t=getComputedStyle(e),n={x:y.value?e.offsetLeft:0,y:y.value?e.offsetTop:0,width:e.offsetWidth,height:e.offsetHeight,fill:t.backgroundColor,stroke:t.borderTopColor,strokeWidth:parseFloat(t.borderTopWidth)||0,radius:t.borderTopLeftRadius,zIndex:t.zIndex};b(n,_.value)||(_.value=n)};(0,t.onUpdated)(C);let w=(0,t.computed)(()=>{let e=_.value;if(!h.value||!e?.width||!e?.height)return null;let{width:t,height:n}=e,{x:r,y:i}=h.value,a=f.tailLength,o=v.value,s=f.targetAnchor===`edge`?g.value:null;if(y.value){if(s){let r=e.x+t/2,i=e.y+n/2;if(!(r>=s.left&&r<=s.right&&i>=s.top&&i<=s.bottom))return{placement:`manual`,tx:Math.min(s.right,Math.max(s.left,r)),ty:Math.min(s.bottom,Math.max(s.top,i)),bx:e.x,by:e.y,w:t,h:n}}return{placement:`manual`,tx:r,ty:i,bx:e.x,by:e.y,w:t,h:n}}let c=e=>s?e===`top`?s.top:s.bottom:i,l=f.placement;if(l===`auto`){let e=i>(o.height||600)/2?`top`:`bottom`,s=r>(o.width||800)/2?`left`:`right`,{scaleX:u,scaleY:d}=o;if(o.viewportHeight){let t=o.top+(c(`top`)-n-a)*d>=0,r=o.top+(c(`bottom`)+n+a)*d<=o.viewportHeight;e===`top`&&!t&&r?e=`bottom`:e===`bottom`&&!r&&t&&(e=`top`)}if(o.viewportWidth){let e=o.left+(r-t-a)*u>=0,n=o.left+(r+t+a)*u<=o.viewportWidth;s===`left`&&!e&&n?s=`right`:s===`right`&&!n&&e&&(s=`left`)}l=`${e}-${s}`}let[u,d]=l.split(`-`),p=c(u);return{placement:l,tx:r,ty:p,bx:d===`left`?r-t-a:r+a,by:u===`top`?p-n-a:p+a,w:t,h:n}}),T=(0,t.ref)(null),E=0,D=()=>typeof matchMedia<`u`&&matchMedia(`(prefers-reduced-motion: reduce)`).matches;(0,t.watch)(w,e=>{typeof cancelAnimationFrame<`u`&&cancelAnimationFrame(E);let t=T.value,n=f.transitionDuration;if(!e||!t||n<=0||typeof requestAnimationFrame>`u`||D()){T.value=e;return}let r=performance.now(),i=a=>{let o=Math.min(1,(a-r)/n),s=1-(1-o)**3,c={...e},d=e.placement===`manual`?u:l;for(let n of d)c[n]=t[n]+(e[n]-t[n])*s;T.value=c,o<1&&(E=requestAnimationFrame(i))};E=requestAnimationFrame(i)},{immediate:!0});let O=null;(0,t.onMounted)(()=>{window.addEventListener(`resize`,S),window.addEventListener(`scroll`,S,!0),typeof ResizeObserver<`u`&&(O=new ResizeObserver(S),O.observe(p.value),O.observe(m.value)),S()}),(0,t.onBeforeUnmount)(()=>{window.removeEventListener(`resize`,S),window.removeEventListener(`scroll`,S,!0),O?.disconnect(),typeof cancelAnimationFrame<`u`&&cancelAnimationFrame(E)});let k=(0,t.computed)(()=>{let e=T.value;if(!e)return null;let{placement:t,tx:n,ty:r,bx:i,by:a,w:o,h:s}=e,c=_.value.strokeWidth,l=_.value.radius,u=parseFloat(l)*(l.endsWith(`%`)?Math.min(o,s)/100:1)||0,d=f.tailBaseWidth/2,p=(e,t,n)=>t>n?(t+n)/2:Math.min(n,Math.max(t,e)),m=null,h=0;if(t===`manual`){let e=Math.max(i-n,n-(i+o),0),t=Math.max(a-r,r-(a+s),0);if(e>0&&e>=t)m=n<i?`left`:`right`,h=r;else if(t>0)m=r<a?`top`:`bottom`,h=n;else return null}else{let[e,n]=t.split(`-`);m=n===`left`?`right`:`left`,h=a+s*(e===`top`?.65:.35)}let g=(e,t)=>`${e} ${t}`,v=(e,t)=>`M ${g(...e)} L ${n} ${r} L ${g(...t)}`,y=c/2;if(m===`left`||m===`right`){let e=p(h,a+u+d,a+s-u-d),t=e-d,n=e+d,r=m===`left`?i+c+1:i+o-c-1,l=m===`left`?i+y:i+o-y;return{fill:v([r,t],[r,n]),stroke:c?v([l,t],[l,n]):null}}let b=p(h,i+u+d,i+o-u-d),x=b-d,S=b+d,C=m===`top`?a+c+1:a+s-c-1,w=m===`top`?a+y:a+s-y;return{fill:v([x,C],[S,C]),stroke:c?v([x,w],[S,w]):null}}),A=(0,t.computed)(()=>f.target?T.value?.placement:`none`),j=(0,t.computed)(()=>{if(!f.target)return{};let e=_.value?.zIndex;return{position:`absolute`,inset:0,pointerEvents:`none`,zIndex:e&&e!==`auto`?e:s,filter:f.shadow?o:void 0}}),M=(0,t.computed)(()=>{let e={"--vpb-padding":typeof f.padding==`number`?`${f.padding}px`:f.padding},t=f.maxWidth??(f.target?c:null);if(t!=null&&(e[`--vpb-max-width`]=t+`px`),!f.target)return e[`--vpb-width`]=`fit-content`,f.shadow&&(e.filter=o),e;let n=T.value;return Object.assign(e,{position:`absolute`,pointerEvents:`auto`,visibility:n?`visible`:`hidden`}),y.value||Object.assign(e,{left:(n?.bx??0)+`px`,top:(n?.by??0)+`px`,margin:0}),e});return a({update:S}),(a,o)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:p,class:`vue-pointing-bubble`,"data-placement":A.value,style:(0,t.normalizeStyle)(j.value)},[(0,t.createElementVNode)(`div`,(0,t.mergeProps)({ref_key:`boxRef`,ref:m,class:`vue-pointing-bubble__inner`},a.$attrs,{style:M.value}),[(0,t.renderSlot)(a.$slots,`default`,{placement:A.value,tip:w.value?{x:w.value.tx,y:w.value.ty}:h.value},()=>[o[0]||=(0,t.createElementVNode)(`p`,{style:{margin:0,fontSize:`14px`,fontWeight:600,color:`#1e293b`}},`Callout content`,-1)])],16),e.target&&k.value?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{key:0,class:`vue-pointing-bubble__svg`,style:(0,t.normalizeStyle)({position:`absolute`,inset:0,width:`100%`,height:`100%`,overflow:`visible`,zIndex:_.value?.zIndex})},[(0,t.createElementVNode)(`path`,{class:`vue-pointing-bubble__path`,d:k.value.fill,fill:_.value.fill},null,8,r),k.value.stroke?((0,t.openBlock)(),(0,t.createElementBlock)(`path`,{key:0,class:`vue-pointing-bubble__path`,d:k.value.stroke,fill:`none`,stroke:_.value.stroke,"stroke-width":_.value.strokeWidth,"stroke-linejoin":`round`,"stroke-linecap":`butt`},null,8,i)):(0,t.createCommentVNode)(``,!0)],4)):(0,t.createCommentVNode)(``,!0)],12,n))}});e.Callout=f,e.PointingBubble=f,e.default={install(e,t={}){e.component(t.name||`PointingBubble`,f)}}});

package/registry/ui/pointing-bubble/PointingBubble.vue

@@ -1,408 +0,0 @@
-<script>
-// Default look of the box. `:where()` has zero specificity, so any class or style set on the component wins.
-const CSS = `:where(.vue-pointing-bubble__inner) {
-  box-sizing: border-box;
-  width: var(--vpb-width, max-content);
-  max-width: var(--vpb-max-width, none);
-  padding: var(--vpb-padding);
-  background: white;
-  border: 2px solid gray;
-  border-radius: 8px;
-}`
-const SHADOW = 'drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))'
-const DEFAULT_Z_INDEX = 30
-const DEFAULT_MAX_WIDTH = 280
-// In manual mode CSS owns the box, so only the tail glides.
-const ANIMATED_KEYS = ['tx', 'ty', 'bx', 'by']
-const MANUAL_ANIMATED_KEYS = ['tx', 'ty']
-
-const injectStyles = () => {
-  if (typeof document === 'undefined' || document.getElementById('vue-pointing-bubble-styles')) return
-  const style = document.createElement('style')
-  style.id = 'vue-pointing-bubble-styles'
-  style.textContent = CSS
-  document.head.prepend(style)
-}
-</script>
-
-<script setup>
-/**
- * Precision Vue 3 callout ("pointing bubble") component.
- * The box is a regular element styled with CSS; an SVG tail is drawn from its wall,
- * so the tip lands exactly on the target coordinate (x, y) or on a target element.
- * Without a target, only the box is rendered, in the normal document flow.
- */
-import { ref, computed, watch, onMounted, onUpdated, onBeforeUnmount } from 'vue'
-
-// `class`, `style`, and listeners go to the box, not to the full-size overlay.
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps({
-  // DOM element, component instance, CSS selector, or { x, y } relative to the positioned parent.
-  target: {
-    type: [Object, String, typeof Element !== 'undefined' ? Element : Object],
-    default: null
-  },
-  // 'auto' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'manual'
-  // In 'manual' mode the box is positioned by CSS (left/top) on the component.
-  placement: {
-    type: String,
-    default: 'auto',
-    validator: (v) => ['auto', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'manual'].includes(v)
-  },
-  // For element targets: 'center' points at the element's center, 'edge' at its border facing the box.
-  targetAnchor: {
-    type: String,
-    default: 'center',
-    validator: (v) => ['center', 'edge'].includes(v)
-  },
-  // Content wraps at this width (px) unless CSS on the component sets a width or max-width.
-  // Defaults to 280 with a target; without one, the box is only limited by its parent.
-  maxWidth: { type: Number, default: undefined },
-  // Distance from the box edge to the tip.
-  tailLength: { type: Number, default: 45 },
-  // Width of the tail where it attaches to the box.
-  tailBaseWidth: { type: Number, default: 24 },
-  // Used unless CSS on the component sets a padding.
-  padding: { type: [Number, String], default: 8 },
-  shadow: { type: Boolean, default: true },
-  // Duration in ms of the move animation when the target changes; 0 disables it.
-  transitionDuration: { type: Number, default: 200 }
-})
-
-injectStyles()
-
-const rootRef = ref(null)
-const boxRef = ref(null)
-const tip = ref(null)
-// Target element rect relative to the root; null for coordinate targets.
-const targetRect = ref(null)
-// Size and look of the box, read from the rendered element.
-const box = ref(null)
-// Viewport origin, local size, cumulative scale, and the viewport size.
-const frameRect = ref({ left: 0, top: 0, width: 0, height: 0, scaleX: 1, scaleY: 1, viewportWidth: 0, viewportHeight: 0 })
-const manual = computed(() => props.placement === 'manual')
-
-const sameKeys = (a, b) => !!a && !!b && Object.keys(a).every((k) => a[k] === b[k])
-
-const resolveElement = (t) => {
-  if (typeof Element === 'undefined' || !t) return null
-  // Looked up on every update, so an element that appears later is found too.
-  if (typeof t === 'string') return document.querySelector(t)
-  if (t instanceof Element) return t
-  if (t.$el instanceof Element) return t.$el
-  return null
-}
-
-const update = () => {
-  const root = rootRef.value
-  if (!props.target || !root) {
-    tip.value = null
-    return
-  }
-
-  const rootRect = root.getBoundingClientRect()
-  // getBoundingClientRect is in viewport pixels, after ancestor transforms such as
-  // Slidev's scale(). left/top and the SVG path are in the root's local CSS pixels.
-  const scaleX = root.offsetWidth ? rootRect.width / root.offsetWidth : 1
-  const scaleY = root.offsetHeight ? rootRect.height / root.offsetHeight : 1
-  frameRect.value = {
-    left: rootRect.left,
-    top: rootRect.top,
-    width: root.offsetWidth,
-    height: root.offsetHeight,
-    scaleX,
-    scaleY,
-    viewportWidth: window.innerWidth,
-    viewportHeight: window.innerHeight
-  }
-
-  const el = resolveElement(props.target)
-  if (el) {
-    const r = el.getBoundingClientRect()
-    const rect = {
-      left: (r.left - rootRect.left) / scaleX,
-      top: (r.top - rootRect.top) / scaleY,
-      right: (r.right - rootRect.left) / scaleX,
-      bottom: (r.bottom - rootRect.top) / scaleY
-    }
-    if (!sameKeys(rect, targetRect.value)) targetRect.value = rect
-    tip.value = { x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2 }
-  } else if (typeof props.target.x === 'number' && typeof props.target.y === 'number') {
-    targetRect.value = null
-    tip.value = { x: props.target.x, y: props.target.y }
-  } else {
-    // A selector that matches nothing (yet): the bubble stays hidden.
-    targetRect.value = null
-    tip.value = null
-  }
-  measure()
-}
-
-watch(() => [props.target, props.target?.x, props.target?.y], update, { flush: 'post' })
-
-const measure = () => {
-  const el = boxRef.value
-  if (!el || !props.target) return
-  const s = getComputedStyle(el)
-  const next = {
-    // The position only matters in manual mode, where CSS places the box.
-    x: manual.value ? el.offsetLeft : 0,
-    y: manual.value ? el.offsetTop : 0,
-    width: el.offsetWidth,
-    height: el.offsetHeight,
-    fill: s.backgroundColor,
-    stroke: s.borderTopColor,
-    strokeWidth: parseFloat(s.borderTopWidth) || 0,
-    radius: s.borderTopLeftRadius,
-    zIndex: s.zIndex
-  }
-  if (!sameKeys(next, box.value)) box.value = next
-}
-
-// Catches changes of the component's class/style, which are not reactive in the script.
-onUpdated(measure)
-
-// Where the bubble should end up for the current tip, box size, and props.
-const geometry = computed(() => {
-  const m = box.value
-  if (!tip.value || !m?.width || !m?.height) return null
-  const { width: w, height: h } = m
-  const { x: tx, y: ty } = tip.value
-  const tLen = props.tailLength
-  const f = frameRect.value
-  const rect = props.targetAnchor === 'edge' ? targetRect.value : null
-
-  if (manual.value) {
-    if (rect) {
-      // The point of the element's border nearest to the box center, unless that center is over the element.
-      const cx = m.x + w / 2
-      const cy = m.y + h / 2
-      const inside = cx >= rect.left && cx <= rect.right && cy >= rect.top && cy <= rect.bottom
-      if (!inside) {
-        const ex = Math.min(rect.right, Math.max(rect.left, cx))
-        const ey = Math.min(rect.bottom, Math.max(rect.top, cy))
-        return { placement: 'manual', tx: ex, ty: ey, bx: m.x, by: m.y, w, h }
-      }
-    }
-    return { placement: 'manual', tx, ty, bx: m.x, by: m.y, w, h }
-  }
-
-  // With the edge anchor the tip moves to the middle of the element's top or bottom edge, facing the box.
-  const tipYFor = (vertical) => (rect ? (vertical === 'top' ? rect.top : rect.bottom) : ty)
-
-  let placement = props.placement
-  if (placement === 'auto') {
-    let vertical = ty > (f.height || 600) / 2 ? 'top' : 'bottom'
-    let horizontal = tx > (f.width || 800) / 2 ? 'left' : 'right'
-
-    // Flip to the other side if the bubble would leave the viewport and fits there.
-    // Tip, box, and tail are local pixels; multiply by the scale to reach the viewport.
-    const { scaleX: sx, scaleY: sy } = f
-    if (f.viewportHeight) {
-      const fitsAbove = f.top + (tipYFor('top') - h - tLen) * sy >= 0
-      const fitsBelow = f.top + (tipYFor('bottom') + h + tLen) * sy <= f.viewportHeight
-      if (vertical === 'top' && !fitsAbove && fitsBelow) vertical = 'bottom'
-      else if (vertical === 'bottom' && !fitsBelow && fitsAbove) vertical = 'top'
-    }
-    if (f.viewportWidth) {
-      const fitsLeft = f.left + (tx - w - tLen) * sx >= 0
-      const fitsRight = f.left + (tx + w + tLen) * sx <= f.viewportWidth
-      if (horizontal === 'left' && !fitsLeft && fitsRight) horizontal = 'right'
-      else if (horizontal === 'right' && !fitsRight && fitsLeft) horizontal = 'left'
-    }
-
-    placement = `${vertical}-${horizontal}`
-  }
-
-  const [vertical, horizontal] = placement.split('-')
-  const tipY = tipYFor(vertical)
-  return {
-    placement,
-    tx,
-    ty: tipY,
-    bx: horizontal === 'left' ? tx - w - tLen : tx + tLen,
-    by: vertical === 'top' ? tipY - h - tLen : tipY + tLen,
-    w,
-    h
-  }
-})
-
-// What is rendered right now; eases towards `geometry` so the tail and the box move together.
-const current = ref(null)
-let frame = 0
-
-const prefersReducedMotion = () =>
-  typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches
-
-watch(geometry, (to) => {
-  if (typeof cancelAnimationFrame !== 'undefined') cancelAnimationFrame(frame)
-  const from = current.value
-  const duration = props.transitionDuration
-  if (!to || !from || duration <= 0 || typeof requestAnimationFrame === 'undefined' || prefersReducedMotion()) {
-    current.value = to
-    return
-  }
-
-  const start = performance.now()
-  const step = (now) => {
-    const t = Math.min(1, (now - start) / duration)
-    const eased = 1 - Math.pow(1 - t, 3)
-    const next = { ...to }
-    const keys = to.placement === 'manual' ? MANUAL_ANIMATED_KEYS : ANIMATED_KEYS
-    for (const key of keys) next[key] = from[key] + (to[key] - from[key]) * eased
-    current.value = next
-    if (t < 1) frame = requestAnimationFrame(step)
-  }
-  frame = requestAnimationFrame(step)
-}, { immediate: true })
-
-let resizeObserver = null
-
-onMounted(() => {
-  window.addEventListener('resize', update)
-  window.addEventListener('scroll', update, true)
-  if (typeof ResizeObserver !== 'undefined') {
-    resizeObserver = new ResizeObserver(update)
-    resizeObserver.observe(rootRef.value)
-    resizeObserver.observe(boxRef.value)
-  }
-  update()
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', update)
-  window.removeEventListener('scroll', update, true)
-  resizeObserver?.disconnect()
-  if (typeof cancelAnimationFrame !== 'undefined') cancelAnimationFrame(frame)
-})
-
-// The tail: a triangle from the box wall facing the tip.
-// The fill runs a pixel past the inner edge of the border, so it covers the border where the
-// tail attaches even when page zoom snaps that edge to a different pixel.
-// An SVG stroke is centered on its path, so the outline is drawn along the middle of the border;
-// if it followed the fill, half of the border width would land inside the bubble.
-const tail = computed(() => {
-  const c = current.value
-  if (!c) return null
-  const { placement, tx, ty, bx, by, w, h } = c
-  const bw = box.value.strokeWidth
-  const radius = box.value.radius
-  const r = parseFloat(radius) * (radius.endsWith('%') ? Math.min(w, h) / 100 : 1) || 0
-  const half = props.tailBaseWidth / 2
-  const clamp = (v, lo, hi) => (lo > hi ? (lo + hi) / 2 : Math.min(hi, Math.max(lo, v)))
-
-  let side = null
-  let along = 0
-  if (placement === 'manual') {
-    const dx = Math.max(bx - tx, tx - (bx + w), 0)
-    const dy = Math.max(by - ty, ty - (by + h), 0)
-    if (dx > 0 && dx >= dy) {
-      side = tx < bx ? 'left' : 'right'
-      along = ty
-    } else if (dy > 0) {
-      side = ty < by ? 'top' : 'bottom'
-      along = tx
-    } else {
-      return null
-    }
-  } else {
-    const [vertical, horizontal] = placement.split('-')
-    side = horizontal === 'left' ? 'right' : 'left'
-    along = by + h * (vertical === 'top' ? 0.65 : 0.35)
-  }
-
-  const point = (x, y) => `${x} ${y}`
-  const triangle = (base1, base2) => `M ${point(...base1)} L ${tx} ${ty} L ${point(...base2)}`
-  // Center of the border. A stroke of width bw centered here stays within the border.
-  const mid = bw / 2
-  // One pixel past the inner edge. The fill matches the background, so this overlap is
-  // invisible, but it covers the border when page zoom snaps that edge off the path.
-  const cover = 1
-
-  if (side === 'left' || side === 'right') {
-    const a = clamp(along, by + r + half, by + h - r - half)
-    const y1 = a - half
-    const y2 = a + half
-    const fillX = side === 'left' ? bx + bw + cover : bx + w - bw - cover
-    const strokeX = side === 'left' ? bx + mid : bx + w - mid
-    return {
-      fill: triangle([fillX, y1], [fillX, y2]),
-      stroke: bw ? triangle([strokeX, y1], [strokeX, y2]) : null
-    }
-  }
-  const a = clamp(along, bx + r + half, bx + w - r - half)
-  const x1 = a - half
-  const x2 = a + half
-  const fillY = side === 'top' ? by + bw + cover : by + h - bw - cover
-  const strokeY = side === 'top' ? by + mid : by + h - mid
-  return {
-    fill: triangle([x1, fillY], [x2, fillY]),
-    stroke: bw ? triangle([x1, strokeY], [x2, strokeY]) : null
-  }
-})
-
-const placement = computed(() => (props.target ? current.value?.placement : 'none'))
-
-// Without a target the root is a plain block around the box, so opacity or transforms set on it apply to the box too.
-const rootStyle = computed(() => {
-  if (!props.target) return {}
-  const z = box.value?.zIndex
-  return {
-    position: 'absolute',
-    inset: 0,
-    pointerEvents: 'none',
-    zIndex: z && z !== 'auto' ? z : DEFAULT_Z_INDEX,
-    filter: props.shadow ? SHADOW : undefined
-  }
-})
-
-// Keys are only added when set: merged with the user's `style`, even an undefined key would win.
-const boxStyle = computed(() => {
-  const style = {
-    '--vpb-padding': typeof props.padding === 'number' ? `${props.padding}px` : props.padding
-  }
-  const maxWidth = props.maxWidth ?? (props.target ? DEFAULT_MAX_WIDTH : null)
-  if (maxWidth != null) style['--vpb-max-width'] = maxWidth + 'px'
-  if (!props.target) {
-    // In the flow the box shrinks to its content but never overflows its parent.
-    style['--vpb-width'] = 'fit-content'
-    if (props.shadow) style.filter = SHADOW
-    return style
-  }
-  const c = current.value
-  Object.assign(style, { position: 'absolute', pointerEvents: 'auto', visibility: c ? 'visible' : 'hidden' })
-  // In manual mode the box is positioned by its own CSS; otherwise next to the tip, ignoring margins.
-  if (!manual.value) Object.assign(style, { left: (c?.bx ?? 0) + 'px', top: (c?.by ?? 0) + 'px', margin: 0 })
-  return style
-})
-
-defineExpose({ update })
-</script>
-
-<template>
-  <div ref="rootRef" class="vue-pointing-bubble" :data-placement="placement" :style="rootStyle">
-    <div ref="boxRef" class="vue-pointing-bubble__inner" v-bind="$attrs" :style="boxStyle">
-      <slot :placement="placement" :tip="geometry ? { x: geometry.tx, y: geometry.ty } : tip">
-        <p :style="{ margin: 0, fontSize: '14px', fontWeight: 600, color: '#1e293b' }">Callout content</p>
-      </slot>
-    </div>
-    <svg
-      v-if="target && tail"
-      class="vue-pointing-bubble__svg"
-      :style="{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible', zIndex: box?.zIndex }"
-    >
-      <path class="vue-pointing-bubble__path" :d="tail.fill" :fill="box.fill" />
-      <path
-        v-if="tail.stroke"
-        class="vue-pointing-bubble__path"
-        :d="tail.stroke"
-        fill="none"
-        :stroke="box.stroke"
-        :stroke-width="box.strokeWidth"
-        stroke-linejoin="round"
-        stroke-linecap="butt"
-      />
-    </svg>
-  </div>
-</template>

package/registry/ui/pointing-bubble/index.ts

@@ -1 +0,0 @@
-export { default as PointingBubble } from "./PointingBubble.vue"

package/src/index.d.ts

@@ -1,44 +0,0 @@
-import type { DefineComponent, Plugin, ComponentPublicInstance } from 'vue'
-
-export type PointingBubblePlacement =
-  | 'auto'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'manual'
-
-export interface PointingBubblePoint {
-  x: number
-  y: number
-}
-
-export type PointingBubbleTarget =
-  | PointingBubblePoint
-  | Element
-  | ComponentPublicInstance
-  /** A CSS selector, looked up with `document.querySelector`. */
-  | string
-  | null
-
-export interface PointingBubbleProps {
-  target?: PointingBubbleTarget
-  placement?: PointingBubblePlacement
-  targetAnchor?: 'center' | 'edge'
-  maxWidth?: number
-  tailLength?: number
-  tailBaseWidth?: number
-  padding?: number | string
-  shadow?: boolean
-  transitionDuration?: number
-}
-
-export declare const PointingBubble: DefineComponent<PointingBubbleProps>
-export declare const Callout: typeof PointingBubble
-
-export interface PointingBubblePluginOptions {
-  name?: string
-}
-
-declare const plugin: Plugin<[PointingBubblePluginOptions?]>
-export default plugin

package/src/index.js

@@ -1,9 +0,0 @@
-import PointingBubble from '../registry/ui/pointing-bubble/PointingBubble.vue'
-
-export { PointingBubble, PointingBubble as Callout }
-
-export default {
-  install(app, options = {}) {
-    app.component(options.name || 'PointingBubble', PointingBubble)
-  }
-}