@buoy-gg/floating-tools-core 7.0.41 → 7.0.43

package/lib/web/chunks/chunk-G4F6TBFE.mjs

@@ -1,488 +0,0 @@
-"use client";
-
-// src/constants.ts
-var VISIBLE_HANDLE_WIDTH = 32;
-var DRAG_THRESHOLD = 5;
-var ANIMATION_DURATION = 200;
-var EDGE_PADDING = 10;
-var SAVE_DEBOUNCE_MS = 500;
-var STORAGE_KEYS = {
-  POSITION_X: "@react_buoy_bubble_position_x",
-  POSITION_Y: "@react_buoy_bubble_position_y"
-};
-
-// src/FloatingToolsStore.ts
-var FloatingToolsStore = class {
-  constructor(options) {
-    this.isDragging = false;
-    this.isHidden = false;
-    // Drag tracking
-    this.dragStartPos = { x: 0, y: 0 };
-    this.dragStartMouse = { x: 0, y: 0 };
-    this.hasMoved = false;
-    this.savedPosition = null;
-    // Persistence
-    this.saveTimeout = null;
-    this.isInitialized = false;
-    // Subscribers (for useSyncExternalStore)
-    this.listeners = /* @__PURE__ */ new Set();
-    // =============================
-    // Subscription (for React hooks)
-    // =============================
-    this.subscribe = (listener) => {
-      this.listeners.add(listener);
-      return () => this.listeners.delete(listener);
-    };
-    this.getSnapshot = () => {
-      return this.stateSnapshot;
-    };
-    this.screenWidth = options.screenWidth;
-    this.screenHeight = options.screenHeight;
-    this.bubbleSize = options.initialBubbleSize ?? { width: 100, height: 32 };
-    this.minPosition = options.minPosition ?? { x: EDGE_PADDING, y: EDGE_PADDING };
-    this.visibleHandleWidth = options.visibleHandleWidth ?? VISIBLE_HANDLE_WIDTH;
-    this.dragThreshold = options.dragThreshold ?? DRAG_THRESHOLD;
-    this.edgePadding = options.edgePadding ?? EDGE_PADDING;
-    this.enablePositionPersistence = options.enablePositionPersistence ?? true;
-    this.storage = options.storage;
-    this.onPositionChange = options.onPositionChange;
-    this.onHiddenChange = options.onHiddenChange;
-    this.onDraggingChange = options.onDraggingChange;
-    this.position = options.initialPosition ?? {
-      x: this.screenWidth - this.bubbleSize.width - 20,
-      y: Math.max(this.minPosition.y, Math.min(100, this.screenHeight - this.bubbleSize.height - this.edgePadding))
-    };
-    this.stateSnapshot = this.createSnapshot();
-  }
-  createSnapshot() {
-    return {
-      position: { ...this.position },
-      isDragging: this.isDragging,
-      isHidden: this.isHidden,
-      bubbleSize: { ...this.bubbleSize }
-    };
-  }
-  notify() {
-    this.stateSnapshot = this.createSnapshot();
-    this.listeners.forEach((listener) => listener());
-  }
-  // =============================
-  // Initialization
-  // =============================
-  /**
-   * Initialize the store by loading persisted position.
-   * Call this after setting up storage adapter.
-   */
-  async initialize() {
-    if (this.isInitialized || !this.enablePositionPersistence || !this.storage) {
-      this.isInitialized = true;
-      return;
-    }
-    try {
-      const [xStr, yStr] = await Promise.all([
-        this.storage.getItem(STORAGE_KEYS.POSITION_X),
-        this.storage.getItem(STORAGE_KEYS.POSITION_Y)
-      ]);
-      if (xStr !== null && yStr !== null) {
-        const x = parseFloat(xStr);
-        const y = parseFloat(yStr);
-        if (!Number.isNaN(x) && !Number.isNaN(y)) {
-          const saved = { x, y };
-          const validated = this.validatePosition(saved);
-          if (Math.abs(saved.x - validated.x) > 5 || Math.abs(saved.y - validated.y) > 5) {
-            this.savePosition(validated.x, validated.y);
-          }
-          this.position = validated;
-          if (validated.x >= this.screenWidth - this.visibleHandleWidth - 5) {
-            this.isHidden = true;
-          }
-          this.notify();
-        }
-      }
-    } catch {
-    }
-    this.isInitialized = true;
-  }
-  // =============================
-  // Position Management
-  // =============================
-  /**
-   * Get current bounds for position validation.
-   */
-  getBounds() {
-    return {
-      minX: this.minPosition.x,
-      maxX: this.screenWidth - this.visibleHandleWidth,
-      minY: this.minPosition.y,
-      maxY: this.screenHeight - this.bubbleSize.height - this.edgePadding
-    };
-  }
-  /**
-   * Validate and clamp a position to screen boundaries.
-   */
-  validatePosition(pos) {
-    const bounds = this.getBounds();
-    return {
-      x: Math.max(bounds.minX, Math.min(pos.x, bounds.maxX)),
-      y: Math.max(bounds.minY, Math.min(pos.y, bounds.maxY))
-    };
-  }
-  /**
-   * Set position directly (for animation callbacks).
-   */
-  setPosition(pos) {
-    this.position = pos;
-    this.onPositionChange?.(pos);
-    this.notify();
-  }
-  /**
-   * Update bubble size (call on layout).
-   * Only notifies if size actually changed.
-   */
-  setBubbleSize(size) {
-    if (this.bubbleSize.width === size.width && this.bubbleSize.height === size.height) {
-      return;
-    }
-    this.bubbleSize = size;
-    if (!this.isDragging) this.reconcileBounds();
-    this.notify();
-  }
-  /**
-   * Update screen dimensions (call on resize).
-   */
-  setScreenSize(width, height) {
-    this.screenWidth = width;
-    this.screenHeight = height;
-    this.reconcileBounds();
-    this.notify();
-  }
-  /** Keep the whole visible tool reachable after its content or viewport changes. */
-  reconcileBounds() {
-    const clampVisible = (position) => ({
-      x: Math.max(this.minPosition.x, Math.min(position.x, this.screenWidth - this.bubbleSize.width - this.edgePadding)),
-      y: Math.max(this.minPosition.y, Math.min(position.y, this.screenHeight - this.bubbleSize.height - this.edgePadding))
-    });
-    const visible = clampVisible(this.position);
-    this.position = this.isHidden ? { ...visible, x: this.screenWidth - this.visibleHandleWidth } : visible;
-    if (this.savedPosition) this.savedPosition = clampVisible(this.savedPosition);
-  }
-  /**
-   * Update min position (e.g., for safe area insets).
-   */
-  setMinPosition(minPos) {
-    this.minPosition = minPos;
-  }
-  // =============================
-  // Persistence
-  // =============================
-  async savePosition(x, y) {
-    if (!this.enablePositionPersistence || !this.storage) return;
-    try {
-      await Promise.all([
-        this.storage.setItem(STORAGE_KEYS.POSITION_X, x.toString()),
-        this.storage.setItem(STORAGE_KEYS.POSITION_Y, y.toString())
-      ]);
-    } catch {
-    }
-  }
-  debouncedSavePosition(x, y) {
-    if (this.saveTimeout) clearTimeout(this.saveTimeout);
-    this.saveTimeout = setTimeout(() => this.savePosition(x, y), SAVE_DEBOUNCE_MS);
-  }
-  // =============================
-  // Hide/Show Toggle
-  // =============================
-  /**
-   * Toggle between hidden and visible states.
-   * Returns the target position for animation.
-   */
-  toggleHideShow() {
-    const isVisuallyOffScreen = this.position.x > this.screenWidth - this.bubbleSize.width / 2;
-    if (this.isHidden || isVisuallyOffScreen) {
-      let targetX;
-      let targetY;
-      if (this.savedPosition && this.savedPosition.x < this.screenWidth - this.bubbleSize.width / 2) {
-        targetX = this.savedPosition.x;
-        targetY = this.savedPosition.y;
-      } else {
-        targetX = this.screenWidth - this.bubbleSize.width - 20;
-        targetY = this.position.y;
-      }
-      this.isHidden = false;
-      this.onHiddenChange?.(false);
-      this.notify();
-      return { targetPosition: { x: targetX, y: targetY }, isHiding: false };
-    } else {
-      this.savedPosition = { ...this.position };
-      const hiddenX = this.screenWidth - this.visibleHandleWidth;
-      this.isHidden = true;
-      this.onHiddenChange?.(true);
-      this.notify();
-      return { targetPosition: { x: hiddenX, y: this.position.y }, isHiding: true };
-    }
-  }
-  /**
-   * Force hide (for pushToSide behavior).
-   */
-  forceHide() {
-    if (this.isHidden) {
-      return { targetPosition: this.position };
-    }
-    this.savedPosition = { ...this.position };
-    const hiddenX = this.screenWidth - this.visibleHandleWidth;
-    this.isHidden = true;
-    this.onHiddenChange?.(true);
-    this.notify();
-    return { targetPosition: { x: hiddenX, y: this.position.y } };
-  }
-  /**
-   * Force show (restore from pushToSide).
-   */
-  forceShow() {
-    if (!this.isHidden) {
-      return { targetPosition: this.position };
-    }
-    let targetX;
-    let targetY;
-    if (this.savedPosition) {
-      targetX = this.savedPosition.x;
-      targetY = this.savedPosition.y;
-    } else {
-      targetX = this.screenWidth - this.bubbleSize.width - 20;
-      targetY = this.position.y;
-    }
-    this.isHidden = false;
-    this.onHiddenChange?.(false);
-    this.notify();
-    return { targetPosition: { x: targetX, y: targetY } };
-  }
-  // =============================
-  // Drag Handling
-  // =============================
-  /**
-   * Start a drag operation.
-   */
-  handleDragStart(event) {
-    this.hasMoved = false;
-    this.dragStartPos = { ...this.position };
-    this.dragStartMouse = { x: event.clientX, y: event.clientY };
-  }
-  /**
-   * Process drag movement.
-   * Returns the new position (for animation) and whether drag threshold was exceeded.
-   */
-  handleDragMove(event) {
-    const dx = event.clientX - this.dragStartMouse.x;
-    const dy = event.clientY - this.dragStartMouse.y;
-    const totalDistance = Math.abs(dx) + Math.abs(dy);
-    if (!this.hasMoved && totalDistance > this.dragThreshold) {
-      this.hasMoved = true;
-      this.isDragging = true;
-      this.onDraggingChange?.(true);
-      this.notify();
-    }
-    if (this.hasMoved) {
-      const newX = this.dragStartPos.x + dx;
-      const newY = this.dragStartPos.y + dy;
-      const bounds = this.getBounds();
-      const clampedX = Math.max(bounds.minX, Math.min(newX, this.screenWidth - this.visibleHandleWidth + this.bubbleSize.width));
-      const clampedY = Math.max(bounds.minY, Math.min(newY, bounds.maxY));
-      this.position = { x: clampedX, y: clampedY };
-      this.onPositionChange?.(this.position);
-      this.notify();
-      return { position: this.position, isDragging: true };
-    }
-    return { position: this.position, isDragging: false };
-  }
-  /**
-   * End a drag operation.
-   * Returns the result including whether to animate to hidden state.
-   */
-  handleDragEnd(event) {
-    const wasTap = !this.hasMoved;
-    if (wasTap) {
-      this.isDragging = false;
-      this.onDraggingChange?.(false);
-      this.notify();
-      return { position: this.position, shouldHide: false, wasTap: true };
-    }
-    const dx = event.clientX - this.dragStartMouse.x;
-    const dy = event.clientY - this.dragStartMouse.y;
-    const currentX = this.dragStartPos.x + dx;
-    const currentY = this.dragStartPos.y + dy;
-    const bubbleMidpoint = currentX + this.bubbleSize.width / 2;
-    const shouldHide = bubbleMidpoint > this.screenWidth;
-    const bounds = this.getBounds();
-    if (shouldHide) {
-      const hiddenX = this.screenWidth - this.visibleHandleWidth;
-      const clampedY = Math.max(bounds.minY, Math.min(currentY, bounds.maxY));
-      this.isHidden = true;
-      this.onHiddenChange?.(true);
-      this.isDragging = false;
-      this.onDraggingChange?.(false);
-      this.notify();
-      return { position: { x: hiddenX, y: clampedY }, shouldHide: true, wasTap: false };
-    } else {
-      if (this.isHidden && currentX < this.screenWidth - this.visibleHandleWidth - 10) {
-        this.isHidden = false;
-        this.onHiddenChange?.(false);
-      }
-      const clampedX = Math.max(bounds.minX, Math.min(currentX, this.screenWidth - this.bubbleSize.width - this.edgePadding));
-      const clampedY = Math.max(bounds.minY, Math.min(currentY, bounds.maxY));
-      if (clampedX < this.screenWidth - this.bubbleSize.width / 2) {
-        this.savedPosition = { x: clampedX, y: clampedY };
-      }
-      this.position = { x: clampedX, y: clampedY };
-      this.isDragging = false;
-      this.onDraggingChange?.(false);
-      this.debouncedSavePosition(clampedX, clampedY);
-      this.notify();
-      return { position: { x: clampedX, y: clampedY }, shouldHide: false, wasTap: false };
-    }
-  }
-  /**
-   * Commit position after animation completes.
-   */
-  commitPosition(pos) {
-    this.position = pos;
-    this.savePosition(pos.x, pos.y);
-    this.notify();
-  }
-  // =============================
-  // Cleanup
-  // =============================
-  destroy() {
-    if (this.saveTimeout) {
-      clearTimeout(this.saveTimeout);
-      this.saveTimeout = null;
-    }
-    this.listeners.clear();
-  }
-};
-
-// src/utils.ts
-function getUserStatusConfig(userRole, colors) {
-  switch (userRole) {
-    case "admin":
-      return {
-        label: "Admin",
-        dotColor: colors.success,
-        textColor: colors.success
-      };
-    case "internal":
-      return {
-        label: "Internal",
-        dotColor: colors.optional,
-        textColor: colors.optional
-      };
-    case "user":
-    default:
-      return {
-        label: "User",
-        dotColor: colors.muted,
-        textColor: colors.secondary
-      };
-  }
-}
-function getGripIconLayout(size) {
-  return {
-    dotSize: Math.max(2, Math.round(size / 6)),
-    columnGap: Math.max(2, Math.round(size / 12)),
-    rowGap: Math.max(2, Math.round(size / 12))
-  };
-}
-function filterValidChildren(children) {
-  return children.filter(
-    (child) => child != null && child !== false
-  );
-}
-
-// src/easing.ts
-var easing = {
-  /**
-   * Linear - no easing.
-   */
-  linear: (t) => t,
-  /**
-   * Ease out cubic - decelerates towards end.
-   * Used for hide/show animations.
-   */
-  easeOutCubic: (t) => 1 - Math.pow(1 - t, 3),
-  /**
-   * Ease in cubic - accelerates from start.
-   */
-  easeInCubic: (t) => t * t * t,
-  /**
-   * Ease in-out cubic - smooth acceleration and deceleration.
-   */
-  easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
-  /**
-   * Ease out quad - lighter deceleration than cubic.
-   */
-  easeOutQuad: (t) => 1 - (1 - t) * (1 - t),
-  /**
-   * Ease out expo - strong deceleration (snappy feel).
-   */
-  easeOutExpo: (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
-};
-function getEasing(name) {
-  return easing[name];
-}
-function interpolate(from, to, progress, easingFn = easing.easeOutCubic) {
-  const eased = easingFn(Math.max(0, Math.min(1, progress)));
-  return from + (to - from) * eased;
-}
-function interpolatePosition(from, to, progress, easingFn = easing.easeOutCubic) {
-  return {
-    x: interpolate(from.x, to.x, progress, easingFn),
-    y: interpolate(from.y, to.y, progress, easingFn)
-  };
-}
-
-// src/colors.ts
-var floatingToolsColors = {
-  /** Dark panel background */
-  panel: "#1A1A1A",
-  /** Muted gray for secondary elements */
-  muted: "#888888",
-  /** Primary text color */
-  secondary: "#E0E0E0",
-  /** Info/active state color (Buoy teal) */
-  info: "#20C997",
-  /** Success/admin color (Buoy teal) */
-  success: "#20C997",
-  /** Warning/optional color (Buoy orange) */
-  optional: "#FFA94D",
-  /** Error color (Buoy red) */
-  error: "#EF4444",
-  /** Primary accent color (Buoy teal) */
-  primary: "#20C997",
-  /** Color used when dragging the floating tools (Buoy teal) */
-  dragActive: "#20C997"
-};
-function withAlpha(color, alpha) {
-  if (typeof alpha === "number") {
-    const hex = Math.round(alpha * 255).toString(16).padStart(2, "0");
-    return `${color}${hex}`;
-  }
-  return `${color}${alpha}`;
-}
-
-export {
-  VISIBLE_HANDLE_WIDTH,
-  DRAG_THRESHOLD,
-  ANIMATION_DURATION,
-  EDGE_PADDING,
-  SAVE_DEBOUNCE_MS,
-  STORAGE_KEYS,
-  FloatingToolsStore,
-  getUserStatusConfig,
-  getGripIconLayout,
-  filterValidChildren,
-  easing,
-  getEasing,
-  interpolate,
-  interpolatePosition,
-  floatingToolsColors,
-  withAlpha
-};