vue-pointing-bubble 0.0.0-stage → 0.2.0

package/LICENSE

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

package/README.md

@@ -1,3 +1,69 @@
-# Temporary Holding Version
+# vue-pointing-bubble
+
+Vue 3 callout / speech bubble whose SVG tail points exactly at coordinates or a DOM element.
+
+Repository: [github.com/MurzNN/js-pointing-bubble](https://github.com/MurzNN/js-pointing-bubble) · Demo: [https://murznn.github.io/js-pointing-bubble/vue/](https://murznn.github.io/js-pointing-bubble/vue/)
+
+- Point at `{ x, y }` or a DOM element / CSS selector
+- Auto / fixed / manual placement with a seamless SVG tail
+- Edge or center target anchors, resize + scroll tracking, optional glide
+- Style with `class` / `style` (Tailwind / UnoCSS welcome); no CSS import required
+
+## Install
+
+```bash
+pnpm add vue-pointing-bubble
+```
+
+## Install via shadcn-vue
+
+```bash
+pnpm dlx shadcn-vue@latest add MurzNN/js-pointing-bubble/vue-pointing-bubble
+```
+
+```ts
+import { PointingBubble } from '@/components/ui/pointing-bubble'
+```
+
+## Quick start
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PointingBubble } from 'vue-pointing-bubble'
+
+const btn = ref<HTMLElement | null>(null)
+</script>
+
+<template>
+  <button ref="btn">Hint</button>
+  <PointingBubble :target="btn" :max-width="240">
+    Precise callout content
+  </PointingBubble>
+</template>
+```
+
+### Props
+
+| 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) |
+| `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 |
+| `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`.
+
+**Breaking (v0.2):** class prefix renamed from `.vue-pointing-bubble*` / `--vpb-*` to `.pointing-bubble*` / `--pb-*`.
+
+## License
+
+MIT
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { PointingBubble, PointingBubble as Callout, PointingBubble as default, PointingBubblePlugin, type PointingBubblePluginOptions, } from './pointing-bubble';
+export type { Placement, ResolvedPlacement, TargetAnchor, Point, BubbleTarget, BubbleConfig, BubbleController, BubbleRenderState, } from './pointing-bubble';
+export { DEFAULT_BUBBLE_CONFIG, createBubbleController, resolveElement, isPoint, computeGeometry, buildTailPaths, } from './pointing-bubble';

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

@@ -0,0 +1,45 @@
+import { ComponentPublicInstance } from 'vue';
+import { BubbleTarget, Placement, TargetAnchor } from './core';
+type __VLS_Props = {
+    target?: BubbleTarget | ComponentPublicInstance | null;
+    placement?: Placement;
+    targetAnchor?: TargetAnchor;
+    maxWidth?: number;
+    tailLength?: number;
+    tailBaseWidth?: number;
+    padding?: number | string;
+    shadow?: boolean;
+    transitionDuration?: number;
+};
+declare function update(): void;
+declare var __VLS_1: {
+    placement: "none";
+    tip: {
+        x: number;
+        y: number;
+    } | null;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    update: typeof update;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    placement: Placement;
+    tailLength: number;
+    tailBaseWidth: number;
+    target: BubbleTarget | ComponentPublicInstance;
+    targetAnchor: TargetAnchor;
+    maxWidth: number;
+    padding: string | number;
+    shadow: boolean;
+    transitionDuration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,13 @@
+export type { Placement, ResolvedPlacement, TargetAnchor, Point, BubbleTarget, FrameRect, LocalRect, BoxMeasure, Geometry, Room, TailPaths, BubbleConfig, StyleMap, } from './types';
+export { DEFAULT_BUBBLE_CONFIG } from './types';
+export { injectBubbleStyles, SHADOW } from './styles';
+export { isPoint, resolveElement } from './resolveTarget';
+export { sameKeys, measureFrame, measureBox } from './measure';
+export { computeRoom, roomierSide, computeGeometry } from './geometry';
+export type { ComputeGeometryOptions } from './geometry';
+export { easeGeometry } from './ease';
+export type { EaseHandle } from './ease';
+export { buildTailPaths } from './tail';
+export type { BuildTailOptions } from './tail';
+export { createBubbleController } from './createBubbleController';
+export type { BubbleRenderState, BubbleControllerOptions, BubbleController, } from './createBubbleController';

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

@@ -0,0 +1,31 @@
+import { BubbleConfig, BubbleTarget, Point, ResolvedPlacement, StyleMap, TailPaths } from './types';
+export interface BubbleRenderState {
+    hasTarget: boolean;
+    placement: ResolvedPlacement;
+    tip: Point | null;
+    /** Tip passed to slot/children (resolved geometry tip when available). */
+    slotTip: Point | null;
+    overlayStyle: StyleMap;
+    boxStyle: StyleMap;
+    /** When no target, root element is the box. */
+    rootIsBox: boolean;
+    tail: TailPaths | null;
+    boxFill: string;
+    boxStroke: string;
+    boxStrokeWidth: number;
+    boxZIndex: string;
+}
+export interface BubbleControllerOptions {
+    getRootEl: () => HTMLElement | null;
+    getBoxEl: () => HTMLElement | null;
+    onChange?: (state: BubbleRenderState) => void;
+}
+export interface BubbleController {
+    update: () => void;
+    setConfig: (partial: Partial<BubbleConfig>) => void;
+    getConfig: () => BubbleConfig;
+    getState: () => BubbleRenderState;
+    destroy: () => void;
+}
+export declare function createBubbleController(options: BubbleControllerOptions): BubbleController;
+export type { BubbleTarget };

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

@@ -0,0 +1,9 @@
+import { Geometry } from './types';
+export interface EaseHandle {
+    cancel: () => void;
+}
+/**
+ * Ease `from` → `to` with ease-out cubic. Calls `onFrame` each tick.
+ * Manual placement only animates tip coords (CSS owns the box).
+ */
+export declare function easeGeometry(from: Geometry | null, to: Geometry | null, durationMs: number, onFrame: (value: Geometry | null) => void): EaseHandle;

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

@@ -0,0 +1,14 @@
+import { BoxMeasure, FrameRect, Geometry, LocalRect, Placement, Point, Room, TargetAnchor } from './types';
+export declare function computeRoom(tip: Point, frame: FrameRect, tailLength: number): Room;
+export declare function roomierSide(room: Room): 'left' | 'right';
+export interface ComputeGeometryOptions {
+    tip: Point;
+    box: BoxMeasure;
+    frame: FrameRect;
+    placement: Placement;
+    targetAnchor: TargetAnchor;
+    targetRect: LocalRect | null;
+    room: Room;
+    tailLength: number;
+}
+export declare function computeGeometry(opts: ComputeGeometryOptions): Geometry | null;

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

@@ -0,0 +1,11 @@
+import { Plugin } from 'vue';
+import { default as PointingBubble } from './PointingBubble.vue';
+export type { Placement, ResolvedPlacement, TargetAnchor, Point, BubbleTarget, BubbleConfig, BubbleController, BubbleRenderState, } from './core';
+export { DEFAULT_BUBBLE_CONFIG, createBubbleController, resolveElement, isPoint, computeGeometry, buildTailPaths, } from './core';
+export { PointingBubble };
+export { PointingBubble as Callout };
+export { PointingBubble as default };
+export interface PointingBubblePluginOptions {
+    name?: string;
+}
+export declare const PointingBubblePlugin: Plugin;

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

@@ -0,0 +1,5 @@
+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;

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

@@ -0,0 +1,7 @@
+import { BubbleTarget, Point } from './types';
+export declare function isPoint(value: unknown): value is Point;
+/**
+ * Resolve a CSS selector or Element. Adapters unwrap framework component
+ * instances / refs before calling this.
+ */
+export declare function resolveElement(target: BubbleTarget): Element | null;

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

@@ -0,0 +1,3 @@
+export declare const SHADOW = "drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25))";
+/** Inject default zero-specificity box styles once per document. */
+export declare function injectBubbleStyles(doc?: Document): void;

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

@@ -0,0 +1,12 @@
+import { Geometry, TailPaths } from './types';
+export interface BuildTailOptions {
+    geometry: Geometry;
+    strokeWidth: number;
+    radius: string;
+    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.
+ */
+export declare function buildTailPaths(opts: BuildTailOptions): TailPaths | null;

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

@@ -0,0 +1,66 @@
+export type Placement = 'auto' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'manual';
+export type ResolvedPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'manual' | 'none';
+export type TargetAnchor = 'center' | 'edge';
+export interface Point {
+    x: number;
+    y: number;
+}
+/** Core target: coords, DOM element, CSS selector, or null (box-only / in-flow). */
+export type BubbleTarget = Point | Element | string | null;
+export interface FrameRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    scaleX: number;
+    scaleY: number;
+    viewportWidth: number;
+    viewportHeight: number;
+}
+export interface LocalRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export interface BoxMeasure {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    radius: string;
+    zIndex: string;
+}
+export interface Geometry {
+    placement: ResolvedPlacement;
+    tx: number;
+    ty: number;
+    bx: number;
+    by: number;
+    w: number;
+    h: number;
+}
+export interface Room {
+    left: number;
+    right: number;
+}
+export interface TailPaths {
+    fill: string;
+    stroke: string | null;
+}
+export interface BubbleConfig {
+    target: BubbleTarget;
+    placement: Placement;
+    targetAnchor: TargetAnchor;
+    maxWidth?: number;
+    tailLength: number;
+    tailBaseWidth: number;
+    padding: number | string;
+    shadow: boolean;
+    transitionDuration: number;
+}
+export declare const DEFAULT_BUBBLE_CONFIG: BubbleConfig;
+export type StyleMap = Record<string, string | number | undefined>;

package/dist/vue-pointing-bubble.cjs

@@ -0,0 +1,9 @@
+"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) {
+  box-sizing: border-box;
+  width: var(--pb-width, max-content);
+  max-width: var(--pb-max-width, none);
+  padding: var(--pb-padding);
+  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;

package/dist/vue-pointing-bubble.js

@@ -0,0 +1,505 @@
+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 = {
+  target: null,
+  placement: "auto",
+  targetAnchor: "center",
+  tailLength: 45,
+  tailBaseWidth: 24,
+  padding: 8,
+  shadow: !0,
+  transitionDuration: 200
+}, D = "pointing-bubble-styles", V = `:where(.pointing-bubble__inner) {
+  box-sizing: border-box;
+  width: var(--pb-width, max-content);
+  max-width: var(--pb-max-width, none);
+  padding: var(--pb-padding);
+  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);
+}
+function tt(n) {
+  return typeof n == "object" && n !== null && typeof n.x == "number" && typeof n.y == "number" && n.nodeType !== 1;
+}
+function et(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 nt(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 ot(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 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 H(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 };
+      }
+    }
+    return { placement: "manual", tx: g, ty: x, bx: t.x, by: t.y, w: d, h: f };
+  }
+  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");
+    }
+    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");
+    }
+    S = `${y}-${v}`;
+  }
+  const [k, $] = S.split("-"), M = B(k);
+  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
+  };
+}
+const it = ["tx", "ty", "bx", "by"], rt = ["tx", "ty"];
+function at() {
+  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);
+  };
+  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));
+  };
+  return l = requestAnimationFrame(i), { cancel: r };
+}
+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;
+    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
+    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}`;
+  };
+  return {
+    fill: `${E(-t - $)} Z`,
+    stroke: t ? E(-t) : null
+  };
+}
+function ut(n) {
+  return {
+    hasTarget: n,
+    placement: "none",
+    tip: null,
+    slotTip: null,
+    overlayStyle: {},
+    boxStyle: {},
+    rootIsBox: !n,
+    tail: null,
+    boxFill: "",
+    boxStroke: "",
+    boxStrokeWidth: 0,
+    boxZIndex: "auto"
+  };
+}
+function dt(n) {
+  J();
+  let e = { ...Q }, 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, g = ut(!1);
+  const x = () => {
+    g = W(), n.onChange?.(g);
+  };
+  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
+    };
+    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, {
+      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`,
+      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`;
+    }
+    const c = p && u && l ? ct({
+      geometry: u,
+      strokeWidth: l.strokeWidth,
+      radius: l.radius,
+      tailBaseWidth: e.tailBaseWidth
+    }) : null;
+    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"
+    };
+  }
+  function o() {
+    if (!t || !l) {
+      i = null, B(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);
+  }
+  function B(p) {
+    d?.cancel(), d = st(
+      u,
+      p,
+      e.transitionDuration,
+      (b) => {
+        u = b, x();
+      }
+    );
+  }
+  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 k() {
+    const p = n.getRootEl();
+    if (e.target == null || !p) {
+      t = null, a = null, l = null, i = null, u = null, x();
+      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
+      };
+      O(h, a) || (a = h), t = {
+        x: (h.left + h.right) / 2,
+        y: (h.top + h.bottom) / 2
+      };
+    } else if (tt(e.target))
+      a = null, t = { x: e.target.x, y: e.target.y };
+    else {
+      a = null, t = null, l = null, i = null, u = null, x();
+      return;
+    }
+    S(), o();
+  }
+  function $() {
+    k();
+  }
+  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);
+  }
+  const y = k;
+  function v() {
+    M(), y();
+  }
+  return {
+    update: v,
+    setConfig(p) {
+      e = { ...e, ...p }, v();
+    },
+    getConfig: () => e,
+    getState: () => g,
+    destroy() {
+      d?.cancel(), f?.disconnect(), typeof window < "u" && (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+    }
+  };
+}
+const ft = ["data-placement"], pt = ["d", "fill"], ht = ["d", "stroke", "stroke-width"], Y = /* @__PURE__ */ U({
+  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 = L(null), l = L(null), r = L({
+      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 = dt({
+      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
+      });
+    }
+    X(
+      () => [
+        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" }
+    ), N(() => {
+      d();
+    }), Z(() => {
+      i.update();
+    }), q(() => {
+      i.destroy();
+    });
+    function f() {
+      i.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(
+      () => ({
+        position: "absolute",
+        inset: "0",
+        width: "100%",
+        height: "100%",
+        overflow: "visible",
+        zIndex: r.value.boxZIndex
+      })
+    );
+    return (o, B) => (I(), z("div", F({
+      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", {
+        key: 0,
+        class: "pointing-bubble__svg",
+        style: K(W.value)
+      }, [
+        _("path", {
+          class: "pointing-bubble__path",
+          d: r.value.tail.fill,
+          fill: r.value.boxFill
+        }, null, 8, pt),
+        r.value.tail.stroke ? (I(), z("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, ht)) : T("", !0)
+      ], 4)) : T("", !0)
+    ], 16, ft));
+  }
+}), bt = {
+  install(n, e = {}) {
+    const t = e.name ?? "PointingBubble";
+    n.component(t, Y), n.component("Callout", Y);
+  }
+};
+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
+};

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "vue-pointing-bubble",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Vue 3 callout / speech bubble whose SVG tail points exactly at coordinates or a DOM element.",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue-pointing-bubble.cjs",
+  "module": "./dist/vue-pointing-bubble.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-pointing-bubble.js",
+      "require": "./dist/vue-pointing-bubble.cjs"
+    }
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@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"
+  }
 }