@bikdotai/bik-component-library 0.0.862 → 0.0.863-beta.1

package/dist/esm/components/bik-copilot/useDraggableFloater.js

@@ -0,0 +1,118 @@
+import { useState as P, useRef as Y, useEffect as H, useCallback as m, useMemo as _ } from "react";
+const b = 4, c = 8, l = () => typeof window > "u" ? { width: 0, height: 0 } : { width: window.innerWidth, height: window.innerHeight }, p = (e, i, n) => {
+  if (!n.width || !n.height)
+    return e;
+  const a = Math.max(
+    c,
+    n.width - i - c
+  ), s = Math.max(
+    c,
+    n.height - i - c
+  );
+  return {
+    x: Math.min(Math.max(e.x, c), a),
+    y: Math.min(Math.max(e.y, c), s)
+  };
+}, k = (e, i, n, a) => {
+  const s = a.width - i - n, h = a.height - i - n;
+  switch (e) {
+    case "top-left":
+      return { x: n, y: n };
+    case "top-right":
+      return { x: s, y: n };
+    case "bottom-left":
+      return { x: n, y: h };
+    default:
+      return { x: s, y: h };
+  }
+}, L = ({
+  size: e,
+  corner: i,
+  offset: n,
+  enabled: a,
+  snapToEdge: s,
+  initialPosition: h,
+  onPositionChange: M
+}) => {
+  const [C, D] = P(l), [u, x] = P(() => {
+    const t = l();
+    return p(
+      h ?? k(i, e, n, t),
+      e,
+      t
+    );
+  }), [V, y] = P(!1), g = Y(null), w = Y(!1);
+  H(() => {
+    const t = () => {
+      const r = l();
+      D(r), x((o) => p(o, e, r));
+    };
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, [e]);
+  const X = m(
+    (t) => {
+      w.current = !1, !(!a || t.button !== 0) && (t.currentTarget.setPointerCapture(t.pointerId), g.current = {
+        pointerId: t.pointerId,
+        startX: t.clientX,
+        startY: t.clientY,
+        originX: u.x,
+        originY: u.y,
+        moved: !1,
+        latest: u
+      });
+    },
+    [a, u]
+  ), f = m(
+    (t) => {
+      const r = g.current;
+      if (!r || r.pointerId !== t.pointerId)
+        return;
+      const o = t.clientX - r.startX, d = t.clientY - r.startY;
+      if (!r.moved) {
+        if (Math.abs(o) < b && Math.abs(d) < b)
+          return;
+        r.moved = !0, y(!0);
+      }
+      const R = p(
+        { x: r.originX + o, y: r.originY + d },
+        e,
+        l()
+      );
+      r.latest = R, x(R);
+    },
+    [e]
+  ), I = m(
+    (t) => {
+      const r = g.current;
+      if (!r || r.pointerId !== t.pointerId || (g.current = null, t.currentTarget.hasPointerCapture(t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId), !r.moved))
+        return;
+      w.current = !0, y(!1);
+      const o = l(), d = s ? p(
+        {
+          x: r.latest.x + e / 2 < o.width / 2 ? n : o.width - e - n,
+          y: r.latest.y
+        },
+        e,
+        o
+      ) : r.latest;
+      x(d), M?.(d);
+    },
+    [n, M, e, s]
+  ), E = m(() => {
+    const t = w.current;
+    return w.current = !1, t;
+  }, []), T = _(
+    () => ({
+      onPointerDown: X,
+      onPointerMove: f,
+      onPointerUp: I,
+      onPointerCancel: I
+    }),
+    [I, X, f]
+  );
+  return { position: u, isDragging: V, viewport: C, dragHandlers: T, shouldIgnoreClick: E };
+};
+export {
+  L as useDraggableFloater
+};
+//# sourceMappingURL=useDraggableFloater.js.map

package/dist/esm/components/bik-copilot/useDraggableFloater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDraggableFloater.js","sources":["../../../../src/components/bik-copilot/useDraggableFloater.ts"],"sourcesContent":["import {\n\tPointerEvent as ReactPointerEvent,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport {\n\tCopilotBallPosition,\n\tCopilotCorner,\n\tCopilotViewport,\n\tUseDraggableFloaterOptions,\n\tUseDraggableFloaterResult,\n} from './model';\n\n/** Movement (px) a gesture must cover before it counts as a drag, not a tap. */\nconst DRAG_THRESHOLD_PX = 4;\n\n/** Smallest gap kept between the dragged element and the viewport edges. */\nconst VIEWPORT_MARGIN_PX = 8;\n\nconst getViewport = (): CopilotViewport =>\n\ttypeof window === 'undefined'\n\t\t? { width: 0, height: 0 }\n\t\t: { width: window.innerWidth, height: window.innerHeight };\n\nconst clampToViewport = (\n\tposition: CopilotBallPosition,\n\tsize: number,\n\tviewport: CopilotViewport,\n): CopilotBallPosition => {\n\tif (!viewport.width || !viewport.height) {\n\t\treturn position;\n\t}\n\tconst maxX = Math.max(\n\t\tVIEWPORT_MARGIN_PX,\n\t\tviewport.width - size - VIEWPORT_MARGIN_PX,\n\t);\n\tconst maxY = Math.max(\n\t\tVIEWPORT_MARGIN_PX,\n\t\tviewport.height - size - VIEWPORT_MARGIN_PX,\n\t);\n\treturn {\n\t\tx: Math.min(Math.max(position.x, VIEWPORT_MARGIN_PX), maxX),\n\t\ty: Math.min(Math.max(position.y, VIEWPORT_MARGIN_PX), maxY),\n\t};\n};\n\nconst getCornerPosition = (\n\tcorner: CopilotCorner,\n\tsize: number,\n\toffset: number,\n\tviewport: CopilotViewport,\n): CopilotBallPosition => {\n\tconst rightEdge = viewport.width - size - offset;\n\tconst bottomEdge = viewport.height - size - offset;\n\tswitch (corner) {\n\t\tcase 'top-left':\n\t\t\treturn { x: offset, y: offset };\n\t\tcase 'top-right':\n\t\t\treturn { x: rightEdge, y: offset };\n\t\tcase 'bottom-left':\n\t\t\treturn { x: offset, y: bottomEdge };\n\t\tcase 'bottom-right':\n\t\tdefault:\n\t\t\treturn { x: rightEdge, y: bottomEdge };\n\t}\n};\n\ninterface DragGesture {\n\tpointerId: number;\n\tstartX: number;\n\tstartY: number;\n\toriginX: number;\n\toriginY: number;\n\tmoved: boolean;\n\tlatest: CopilotBallPosition;\n}\n\n/**\n * Drives a fixed-position element the user can drag anywhere in the viewport.\n *\n * The hook owns the element's coordinates, keeps them inside the viewport as the\n * window resizes, and separates a tap from a drag so the same element can both\n * be dragged and clicked.\n */\nexport const useDraggableFloater = ({\n\tsize,\n\tcorner,\n\toffset,\n\tenabled,\n\tsnapToEdge,\n\tinitialPosition,\n\tonPositionChange,\n}: UseDraggableFloaterOptions): UseDraggableFloaterResult => {\n\tconst [viewport, setViewport] = useState<CopilotViewport>(getViewport);\n\tconst [position, setPosition] = useState<CopilotBallPosition>(() => {\n\t\tconst initialViewport = getViewport();\n\t\treturn clampToViewport(\n\t\t\tinitialPosition ??\n\t\t\t\tgetCornerPosition(corner, size, offset, initialViewport),\n\t\t\tsize,\n\t\t\tinitialViewport,\n\t\t);\n\t});\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tconst gestureRef = useRef<DragGesture | null>(null);\n\tconst ignoreNextClickRef = useRef(false);\n\n\t// Keep the element reachable when the window is resized around it.\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tconst nextViewport = getViewport();\n\t\t\tsetViewport(nextViewport);\n\t\t\tsetPosition((previous) => clampToViewport(previous, size, nextViewport));\n\t\t};\n\t\twindow.addEventListener('resize', handleResize);\n\t\treturn () => window.removeEventListener('resize', handleResize);\n\t}, [size]);\n\n\tconst handlePointerDown = useCallback(\n\t\t(event: ReactPointerEvent<HTMLElement>) => {\n\t\t\t// A stale flag would otherwise swallow the next legitimate click.\n\t\t\tignoreNextClickRef.current = false;\n\t\t\tif (!enabled || event.button !== 0) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.currentTarget.setPointerCapture(event.pointerId);\n\t\t\tgestureRef.current = {\n\t\t\t\tpointerId: event.pointerId,\n\t\t\t\tstartX: event.clientX,\n\t\t\t\tstartY: event.clientY,\n\t\t\t\toriginX: position.x,\n\t\t\t\toriginY: position.y,\n\t\t\t\tmoved: false,\n\t\t\t\tlatest: position,\n\t\t\t};\n\t\t},\n\t\t[enabled, position],\n\t);\n\n\tconst handlePointerMove = useCallback(\n\t\t(event: ReactPointerEvent<HTMLElement>) => {\n\t\t\tconst gesture = gestureRef.current;\n\t\t\tif (!gesture || gesture.pointerId !== event.pointerId) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst deltaX = event.clientX - gesture.startX;\n\t\t\tconst deltaY = event.clientY - gesture.startY;\n\n\t\t\tif (!gesture.moved) {\n\t\t\t\tif (\n\t\t\t\t\tMath.abs(deltaX) < DRAG_THRESHOLD_PX &&\n\t\t\t\t\tMath.abs(deltaY) < DRAG_THRESHOLD_PX\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tgesture.moved = true;\n\t\t\t\tsetIsDragging(true);\n\t\t\t}\n\n\t\t\tconst next = clampToViewport(\n\t\t\t\t{ x: gesture.originX + deltaX, y: gesture.originY + deltaY },\n\t\t\t\tsize,\n\t\t\t\tgetViewport(),\n\t\t\t);\n\t\t\tgesture.latest = next;\n\t\t\tsetPosition(next);\n\t\t},\n\t\t[size],\n\t);\n\n\tconst endGesture = useCallback(\n\t\t(event: ReactPointerEvent<HTMLElement>) => {\n\t\t\tconst gesture = gestureRef.current;\n\t\t\tif (!gesture || gesture.pointerId !== event.pointerId) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tgestureRef.current = null;\n\t\t\tif (event.currentTarget.hasPointerCapture(event.pointerId)) {\n\t\t\t\tevent.currentTarget.releasePointerCapture(event.pointerId);\n\t\t\t}\n\t\t\tif (!gesture.moved) {\n\t\t\t\t// A tap: let the click handler run untouched.\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tignoreNextClickRef.current = true;\n\t\t\tsetIsDragging(false);\n\n\t\t\tconst currentViewport = getViewport();\n\t\t\tconst settled = snapToEdge\n\t\t\t\t? clampToViewport(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tx:\n\t\t\t\t\t\t\t\tgesture.latest.x + size / 2 < currentViewport.width / 2\n\t\t\t\t\t\t\t\t\t? offset\n\t\t\t\t\t\t\t\t\t: currentViewport.width - size - offset,\n\t\t\t\t\t\t\ty: gesture.latest.y,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsize,\n\t\t\t\t\t\tcurrentViewport,\n\t\t\t\t  )\n\t\t\t\t: gesture.latest;\n\n\t\t\tsetPosition(settled);\n\t\t\tonPositionChange?.(settled);\n\t\t},\n\t\t[offset, onPositionChange, size, snapToEdge],\n\t);\n\n\tconst shouldIgnoreClick = useCallback(() => {\n\t\tconst ignore = ignoreNextClickRef.current;\n\t\tignoreNextClickRef.current = false;\n\t\treturn ignore;\n\t}, []);\n\n\tconst dragHandlers = useMemo(\n\t\t() => ({\n\t\t\tonPointerDown: handlePointerDown,\n\t\t\tonPointerMove: handlePointerMove,\n\t\t\tonPointerUp: endGesture,\n\t\t\tonPointerCancel: endGesture,\n\t\t}),\n\t\t[endGesture, handlePointerDown, handlePointerMove],\n\t);\n\n\treturn { position, isDragging, viewport, dragHandlers, shouldIgnoreClick };\n};\n"],"names":["DRAG_THRESHOLD_PX","VIEWPORT_MARGIN_PX","getViewport","clampToViewport","position","size","viewport","maxX","maxY","getCornerPosition","corner","offset","rightEdge","bottomEdge","useDraggableFloater","enabled","snapToEdge","initialPosition","onPositionChange","setViewport","useState","setPosition","initialViewport","isDragging","setIsDragging","gestureRef","useRef","ignoreNextClickRef","useEffect","handleResize","nextViewport","previous","handlePointerDown","useCallback","event","handlePointerMove","gesture","deltaX","deltaY","next","endGesture","currentViewport","settled","shouldIgnoreClick","ignore","dragHandlers","useMemo"],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -102,6 +102,7 @@ export * from './components/data-source-panel/model';
 export * from './components/text-picker';
 export * from './components/dot-pulse';
 export * from './components/bik-chatbot';
+export * from './components/bik-copilot';
 export * from './components/adbanner';
 export * from './components/feature-announcements';
 export * from './components/post-live-checklist-item';