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

package/lib/web/chunks/chunk-2K2AYORW.mjs

@@ -0,0 +1,493 @@
+"use client";
+
+// ../../scripts/web-environment.js
+if (typeof window !== "undefined" && typeof globalThis.global === "undefined") {
+  globalThis.global = globalThis;
+}
+
+// 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
+};