@buoy-gg/floating-tools-core 7.0.40 → 7.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/icons/ask-buoy-icon.native.js +1 -0
- package/lib/commonjs/icons/bif-raster-icon.native.js +1 -0
- package/lib/commonjs/icons/console-icon.native.js +1 -0
- package/lib/commonjs/icons/generated/icon-data.g.js +69 -2
- package/lib/commonjs/icons/impersonate-icon.native.js +1 -0
- package/lib/commonjs/icons/jotai-icon.native.js +1 -0
- package/lib/commonjs/icons/notifications-icon.js +15 -0
- package/lib/commonjs/icons/query-icon.native.js +1 -0
- package/lib/commonjs/icons/redux-icon.native.js +1 -0
- package/lib/commonjs/icons/scenarios-icon.native.js +1 -0
- package/lib/commonjs/icons/sentry-icon.native.js +1 -0
- package/lib/commonjs/icons/time-machine-icon.native.js +1 -0
- package/lib/commonjs/icons/zustand-icon.native.js +1 -0
- package/lib/commonjs/index.js +17 -2
- package/lib/module/icons/ask-buoy-icon.native.js +1 -0
- package/lib/module/icons/bif-raster-icon.native.js +1 -0
- package/lib/module/icons/console-icon.native.js +1 -0
- package/lib/module/icons/generated/icon-data.g.js +67 -0
- package/lib/module/icons/impersonate-icon.native.js +1 -0
- package/lib/module/icons/jotai-icon.native.js +1 -0
- package/lib/module/icons/notifications-icon.js +6 -0
- package/lib/module/icons/query-icon.native.js +1 -0
- package/lib/module/icons/redux-icon.native.js +1 -0
- package/lib/module/icons/scenarios-icon.native.js +1 -0
- package/lib/module/icons/sentry-icon.native.js +1 -0
- package/lib/module/icons/time-machine-icon.native.js +1 -0
- package/lib/module/icons/zustand-icon.native.js +1 -0
- package/lib/module/index.js +2 -1
- package/lib/typescript/commonjs/icons/generated/icon-data.g.d.ts +2 -0
- package/lib/typescript/commonjs/icons/generated/icon-data.g.d.ts.map +1 -1
- package/lib/typescript/commonjs/icons/notifications-icon.d.ts +3 -0
- package/lib/typescript/commonjs/icons/notifications-icon.d.ts.map +1 -0
- package/lib/typescript/commonjs/index.d.ts +1 -0
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/module/icons/generated/icon-data.g.d.ts +2 -0
- package/lib/typescript/module/icons/generated/icon-data.g.d.ts.map +1 -1
- package/lib/typescript/module/icons/notifications-icon.d.ts +3 -0
- package/lib/typescript/module/icons/notifications-icon.d.ts.map +1 -0
- package/lib/typescript/module/index.d.ts +1 -0
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/lib/web/chunks/chunk-2K2AYORW.mjs +493 -0
- package/lib/web/chunks/chunk-G4F6TBFE.mjs +488 -0
- package/lib/web/chunks/chunk-PUCCT3HF.mjs +2 -0
- package/lib/web/floating.mjs +2 -0
- package/lib/web/index.mjs +20 -0
- package/package.json +33 -8
|
@@ -0,0 +1,488 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/constants.ts
|
|
4
|
+
var VISIBLE_HANDLE_WIDTH = 32;
|
|
5
|
+
var DRAG_THRESHOLD = 5;
|
|
6
|
+
var ANIMATION_DURATION = 200;
|
|
7
|
+
var EDGE_PADDING = 10;
|
|
8
|
+
var SAVE_DEBOUNCE_MS = 500;
|
|
9
|
+
var STORAGE_KEYS = {
|
|
10
|
+
POSITION_X: "@react_buoy_bubble_position_x",
|
|
11
|
+
POSITION_Y: "@react_buoy_bubble_position_y"
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
// src/FloatingToolsStore.ts
|
|
15
|
+
var FloatingToolsStore = class {
|
|
16
|
+
constructor(options) {
|
|
17
|
+
this.isDragging = false;
|
|
18
|
+
this.isHidden = false;
|
|
19
|
+
// Drag tracking
|
|
20
|
+
this.dragStartPos = { x: 0, y: 0 };
|
|
21
|
+
this.dragStartMouse = { x: 0, y: 0 };
|
|
22
|
+
this.hasMoved = false;
|
|
23
|
+
this.savedPosition = null;
|
|
24
|
+
// Persistence
|
|
25
|
+
this.saveTimeout = null;
|
|
26
|
+
this.isInitialized = false;
|
|
27
|
+
// Subscribers (for useSyncExternalStore)
|
|
28
|
+
this.listeners = /* @__PURE__ */ new Set();
|
|
29
|
+
// =============================
|
|
30
|
+
// Subscription (for React hooks)
|
|
31
|
+
// =============================
|
|
32
|
+
this.subscribe = (listener) => {
|
|
33
|
+
this.listeners.add(listener);
|
|
34
|
+
return () => this.listeners.delete(listener);
|
|
35
|
+
};
|
|
36
|
+
this.getSnapshot = () => {
|
|
37
|
+
return this.stateSnapshot;
|
|
38
|
+
};
|
|
39
|
+
this.screenWidth = options.screenWidth;
|
|
40
|
+
this.screenHeight = options.screenHeight;
|
|
41
|
+
this.bubbleSize = options.initialBubbleSize ?? { width: 100, height: 32 };
|
|
42
|
+
this.minPosition = options.minPosition ?? { x: EDGE_PADDING, y: EDGE_PADDING };
|
|
43
|
+
this.visibleHandleWidth = options.visibleHandleWidth ?? VISIBLE_HANDLE_WIDTH;
|
|
44
|
+
this.dragThreshold = options.dragThreshold ?? DRAG_THRESHOLD;
|
|
45
|
+
this.edgePadding = options.edgePadding ?? EDGE_PADDING;
|
|
46
|
+
this.enablePositionPersistence = options.enablePositionPersistence ?? true;
|
|
47
|
+
this.storage = options.storage;
|
|
48
|
+
this.onPositionChange = options.onPositionChange;
|
|
49
|
+
this.onHiddenChange = options.onHiddenChange;
|
|
50
|
+
this.onDraggingChange = options.onDraggingChange;
|
|
51
|
+
this.position = options.initialPosition ?? {
|
|
52
|
+
x: this.screenWidth - this.bubbleSize.width - 20,
|
|
53
|
+
y: Math.max(this.minPosition.y, Math.min(100, this.screenHeight - this.bubbleSize.height - this.edgePadding))
|
|
54
|
+
};
|
|
55
|
+
this.stateSnapshot = this.createSnapshot();
|
|
56
|
+
}
|
|
57
|
+
createSnapshot() {
|
|
58
|
+
return {
|
|
59
|
+
position: { ...this.position },
|
|
60
|
+
isDragging: this.isDragging,
|
|
61
|
+
isHidden: this.isHidden,
|
|
62
|
+
bubbleSize: { ...this.bubbleSize }
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
notify() {
|
|
66
|
+
this.stateSnapshot = this.createSnapshot();
|
|
67
|
+
this.listeners.forEach((listener) => listener());
|
|
68
|
+
}
|
|
69
|
+
// =============================
|
|
70
|
+
// Initialization
|
|
71
|
+
// =============================
|
|
72
|
+
/**
|
|
73
|
+
* Initialize the store by loading persisted position.
|
|
74
|
+
* Call this after setting up storage adapter.
|
|
75
|
+
*/
|
|
76
|
+
async initialize() {
|
|
77
|
+
if (this.isInitialized || !this.enablePositionPersistence || !this.storage) {
|
|
78
|
+
this.isInitialized = true;
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
try {
|
|
82
|
+
const [xStr, yStr] = await Promise.all([
|
|
83
|
+
this.storage.getItem(STORAGE_KEYS.POSITION_X),
|
|
84
|
+
this.storage.getItem(STORAGE_KEYS.POSITION_Y)
|
|
85
|
+
]);
|
|
86
|
+
if (xStr !== null && yStr !== null) {
|
|
87
|
+
const x = parseFloat(xStr);
|
|
88
|
+
const y = parseFloat(yStr);
|
|
89
|
+
if (!Number.isNaN(x) && !Number.isNaN(y)) {
|
|
90
|
+
const saved = { x, y };
|
|
91
|
+
const validated = this.validatePosition(saved);
|
|
92
|
+
if (Math.abs(saved.x - validated.x) > 5 || Math.abs(saved.y - validated.y) > 5) {
|
|
93
|
+
this.savePosition(validated.x, validated.y);
|
|
94
|
+
}
|
|
95
|
+
this.position = validated;
|
|
96
|
+
if (validated.x >= this.screenWidth - this.visibleHandleWidth - 5) {
|
|
97
|
+
this.isHidden = true;
|
|
98
|
+
}
|
|
99
|
+
this.notify();
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
} catch {
|
|
103
|
+
}
|
|
104
|
+
this.isInitialized = true;
|
|
105
|
+
}
|
|
106
|
+
// =============================
|
|
107
|
+
// Position Management
|
|
108
|
+
// =============================
|
|
109
|
+
/**
|
|
110
|
+
* Get current bounds for position validation.
|
|
111
|
+
*/
|
|
112
|
+
getBounds() {
|
|
113
|
+
return {
|
|
114
|
+
minX: this.minPosition.x,
|
|
115
|
+
maxX: this.screenWidth - this.visibleHandleWidth,
|
|
116
|
+
minY: this.minPosition.y,
|
|
117
|
+
maxY: this.screenHeight - this.bubbleSize.height - this.edgePadding
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Validate and clamp a position to screen boundaries.
|
|
122
|
+
*/
|
|
123
|
+
validatePosition(pos) {
|
|
124
|
+
const bounds = this.getBounds();
|
|
125
|
+
return {
|
|
126
|
+
x: Math.max(bounds.minX, Math.min(pos.x, bounds.maxX)),
|
|
127
|
+
y: Math.max(bounds.minY, Math.min(pos.y, bounds.maxY))
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Set position directly (for animation callbacks).
|
|
132
|
+
*/
|
|
133
|
+
setPosition(pos) {
|
|
134
|
+
this.position = pos;
|
|
135
|
+
this.onPositionChange?.(pos);
|
|
136
|
+
this.notify();
|
|
137
|
+
}
|
|
138
|
+
/**
|
|
139
|
+
* Update bubble size (call on layout).
|
|
140
|
+
* Only notifies if size actually changed.
|
|
141
|
+
*/
|
|
142
|
+
setBubbleSize(size) {
|
|
143
|
+
if (this.bubbleSize.width === size.width && this.bubbleSize.height === size.height) {
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
this.bubbleSize = size;
|
|
147
|
+
if (!this.isDragging) this.reconcileBounds();
|
|
148
|
+
this.notify();
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* Update screen dimensions (call on resize).
|
|
152
|
+
*/
|
|
153
|
+
setScreenSize(width, height) {
|
|
154
|
+
this.screenWidth = width;
|
|
155
|
+
this.screenHeight = height;
|
|
156
|
+
this.reconcileBounds();
|
|
157
|
+
this.notify();
|
|
158
|
+
}
|
|
159
|
+
/** Keep the whole visible tool reachable after its content or viewport changes. */
|
|
160
|
+
reconcileBounds() {
|
|
161
|
+
const clampVisible = (position) => ({
|
|
162
|
+
x: Math.max(this.minPosition.x, Math.min(position.x, this.screenWidth - this.bubbleSize.width - this.edgePadding)),
|
|
163
|
+
y: Math.max(this.minPosition.y, Math.min(position.y, this.screenHeight - this.bubbleSize.height - this.edgePadding))
|
|
164
|
+
});
|
|
165
|
+
const visible = clampVisible(this.position);
|
|
166
|
+
this.position = this.isHidden ? { ...visible, x: this.screenWidth - this.visibleHandleWidth } : visible;
|
|
167
|
+
if (this.savedPosition) this.savedPosition = clampVisible(this.savedPosition);
|
|
168
|
+
}
|
|
169
|
+
/**
|
|
170
|
+
* Update min position (e.g., for safe area insets).
|
|
171
|
+
*/
|
|
172
|
+
setMinPosition(minPos) {
|
|
173
|
+
this.minPosition = minPos;
|
|
174
|
+
}
|
|
175
|
+
// =============================
|
|
176
|
+
// Persistence
|
|
177
|
+
// =============================
|
|
178
|
+
async savePosition(x, y) {
|
|
179
|
+
if (!this.enablePositionPersistence || !this.storage) return;
|
|
180
|
+
try {
|
|
181
|
+
await Promise.all([
|
|
182
|
+
this.storage.setItem(STORAGE_KEYS.POSITION_X, x.toString()),
|
|
183
|
+
this.storage.setItem(STORAGE_KEYS.POSITION_Y, y.toString())
|
|
184
|
+
]);
|
|
185
|
+
} catch {
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
debouncedSavePosition(x, y) {
|
|
189
|
+
if (this.saveTimeout) clearTimeout(this.saveTimeout);
|
|
190
|
+
this.saveTimeout = setTimeout(() => this.savePosition(x, y), SAVE_DEBOUNCE_MS);
|
|
191
|
+
}
|
|
192
|
+
// =============================
|
|
193
|
+
// Hide/Show Toggle
|
|
194
|
+
// =============================
|
|
195
|
+
/**
|
|
196
|
+
* Toggle between hidden and visible states.
|
|
197
|
+
* Returns the target position for animation.
|
|
198
|
+
*/
|
|
199
|
+
toggleHideShow() {
|
|
200
|
+
const isVisuallyOffScreen = this.position.x > this.screenWidth - this.bubbleSize.width / 2;
|
|
201
|
+
if (this.isHidden || isVisuallyOffScreen) {
|
|
202
|
+
let targetX;
|
|
203
|
+
let targetY;
|
|
204
|
+
if (this.savedPosition && this.savedPosition.x < this.screenWidth - this.bubbleSize.width / 2) {
|
|
205
|
+
targetX = this.savedPosition.x;
|
|
206
|
+
targetY = this.savedPosition.y;
|
|
207
|
+
} else {
|
|
208
|
+
targetX = this.screenWidth - this.bubbleSize.width - 20;
|
|
209
|
+
targetY = this.position.y;
|
|
210
|
+
}
|
|
211
|
+
this.isHidden = false;
|
|
212
|
+
this.onHiddenChange?.(false);
|
|
213
|
+
this.notify();
|
|
214
|
+
return { targetPosition: { x: targetX, y: targetY }, isHiding: false };
|
|
215
|
+
} else {
|
|
216
|
+
this.savedPosition = { ...this.position };
|
|
217
|
+
const hiddenX = this.screenWidth - this.visibleHandleWidth;
|
|
218
|
+
this.isHidden = true;
|
|
219
|
+
this.onHiddenChange?.(true);
|
|
220
|
+
this.notify();
|
|
221
|
+
return { targetPosition: { x: hiddenX, y: this.position.y }, isHiding: true };
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
/**
|
|
225
|
+
* Force hide (for pushToSide behavior).
|
|
226
|
+
*/
|
|
227
|
+
forceHide() {
|
|
228
|
+
if (this.isHidden) {
|
|
229
|
+
return { targetPosition: this.position };
|
|
230
|
+
}
|
|
231
|
+
this.savedPosition = { ...this.position };
|
|
232
|
+
const hiddenX = this.screenWidth - this.visibleHandleWidth;
|
|
233
|
+
this.isHidden = true;
|
|
234
|
+
this.onHiddenChange?.(true);
|
|
235
|
+
this.notify();
|
|
236
|
+
return { targetPosition: { x: hiddenX, y: this.position.y } };
|
|
237
|
+
}
|
|
238
|
+
/**
|
|
239
|
+
* Force show (restore from pushToSide).
|
|
240
|
+
*/
|
|
241
|
+
forceShow() {
|
|
242
|
+
if (!this.isHidden) {
|
|
243
|
+
return { targetPosition: this.position };
|
|
244
|
+
}
|
|
245
|
+
let targetX;
|
|
246
|
+
let targetY;
|
|
247
|
+
if (this.savedPosition) {
|
|
248
|
+
targetX = this.savedPosition.x;
|
|
249
|
+
targetY = this.savedPosition.y;
|
|
250
|
+
} else {
|
|
251
|
+
targetX = this.screenWidth - this.bubbleSize.width - 20;
|
|
252
|
+
targetY = this.position.y;
|
|
253
|
+
}
|
|
254
|
+
this.isHidden = false;
|
|
255
|
+
this.onHiddenChange?.(false);
|
|
256
|
+
this.notify();
|
|
257
|
+
return { targetPosition: { x: targetX, y: targetY } };
|
|
258
|
+
}
|
|
259
|
+
// =============================
|
|
260
|
+
// Drag Handling
|
|
261
|
+
// =============================
|
|
262
|
+
/**
|
|
263
|
+
* Start a drag operation.
|
|
264
|
+
*/
|
|
265
|
+
handleDragStart(event) {
|
|
266
|
+
this.hasMoved = false;
|
|
267
|
+
this.dragStartPos = { ...this.position };
|
|
268
|
+
this.dragStartMouse = { x: event.clientX, y: event.clientY };
|
|
269
|
+
}
|
|
270
|
+
/**
|
|
271
|
+
* Process drag movement.
|
|
272
|
+
* Returns the new position (for animation) and whether drag threshold was exceeded.
|
|
273
|
+
*/
|
|
274
|
+
handleDragMove(event) {
|
|
275
|
+
const dx = event.clientX - this.dragStartMouse.x;
|
|
276
|
+
const dy = event.clientY - this.dragStartMouse.y;
|
|
277
|
+
const totalDistance = Math.abs(dx) + Math.abs(dy);
|
|
278
|
+
if (!this.hasMoved && totalDistance > this.dragThreshold) {
|
|
279
|
+
this.hasMoved = true;
|
|
280
|
+
this.isDragging = true;
|
|
281
|
+
this.onDraggingChange?.(true);
|
|
282
|
+
this.notify();
|
|
283
|
+
}
|
|
284
|
+
if (this.hasMoved) {
|
|
285
|
+
const newX = this.dragStartPos.x + dx;
|
|
286
|
+
const newY = this.dragStartPos.y + dy;
|
|
287
|
+
const bounds = this.getBounds();
|
|
288
|
+
const clampedX = Math.max(bounds.minX, Math.min(newX, this.screenWidth - this.visibleHandleWidth + this.bubbleSize.width));
|
|
289
|
+
const clampedY = Math.max(bounds.minY, Math.min(newY, bounds.maxY));
|
|
290
|
+
this.position = { x: clampedX, y: clampedY };
|
|
291
|
+
this.onPositionChange?.(this.position);
|
|
292
|
+
this.notify();
|
|
293
|
+
return { position: this.position, isDragging: true };
|
|
294
|
+
}
|
|
295
|
+
return { position: this.position, isDragging: false };
|
|
296
|
+
}
|
|
297
|
+
/**
|
|
298
|
+
* End a drag operation.
|
|
299
|
+
* Returns the result including whether to animate to hidden state.
|
|
300
|
+
*/
|
|
301
|
+
handleDragEnd(event) {
|
|
302
|
+
const wasTap = !this.hasMoved;
|
|
303
|
+
if (wasTap) {
|
|
304
|
+
this.isDragging = false;
|
|
305
|
+
this.onDraggingChange?.(false);
|
|
306
|
+
this.notify();
|
|
307
|
+
return { position: this.position, shouldHide: false, wasTap: true };
|
|
308
|
+
}
|
|
309
|
+
const dx = event.clientX - this.dragStartMouse.x;
|
|
310
|
+
const dy = event.clientY - this.dragStartMouse.y;
|
|
311
|
+
const currentX = this.dragStartPos.x + dx;
|
|
312
|
+
const currentY = this.dragStartPos.y + dy;
|
|
313
|
+
const bubbleMidpoint = currentX + this.bubbleSize.width / 2;
|
|
314
|
+
const shouldHide = bubbleMidpoint > this.screenWidth;
|
|
315
|
+
const bounds = this.getBounds();
|
|
316
|
+
if (shouldHide) {
|
|
317
|
+
const hiddenX = this.screenWidth - this.visibleHandleWidth;
|
|
318
|
+
const clampedY = Math.max(bounds.minY, Math.min(currentY, bounds.maxY));
|
|
319
|
+
this.isHidden = true;
|
|
320
|
+
this.onHiddenChange?.(true);
|
|
321
|
+
this.isDragging = false;
|
|
322
|
+
this.onDraggingChange?.(false);
|
|
323
|
+
this.notify();
|
|
324
|
+
return { position: { x: hiddenX, y: clampedY }, shouldHide: true, wasTap: false };
|
|
325
|
+
} else {
|
|
326
|
+
if (this.isHidden && currentX < this.screenWidth - this.visibleHandleWidth - 10) {
|
|
327
|
+
this.isHidden = false;
|
|
328
|
+
this.onHiddenChange?.(false);
|
|
329
|
+
}
|
|
330
|
+
const clampedX = Math.max(bounds.minX, Math.min(currentX, this.screenWidth - this.bubbleSize.width - this.edgePadding));
|
|
331
|
+
const clampedY = Math.max(bounds.minY, Math.min(currentY, bounds.maxY));
|
|
332
|
+
if (clampedX < this.screenWidth - this.bubbleSize.width / 2) {
|
|
333
|
+
this.savedPosition = { x: clampedX, y: clampedY };
|
|
334
|
+
}
|
|
335
|
+
this.position = { x: clampedX, y: clampedY };
|
|
336
|
+
this.isDragging = false;
|
|
337
|
+
this.onDraggingChange?.(false);
|
|
338
|
+
this.debouncedSavePosition(clampedX, clampedY);
|
|
339
|
+
this.notify();
|
|
340
|
+
return { position: { x: clampedX, y: clampedY }, shouldHide: false, wasTap: false };
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
/**
|
|
344
|
+
* Commit position after animation completes.
|
|
345
|
+
*/
|
|
346
|
+
commitPosition(pos) {
|
|
347
|
+
this.position = pos;
|
|
348
|
+
this.savePosition(pos.x, pos.y);
|
|
349
|
+
this.notify();
|
|
350
|
+
}
|
|
351
|
+
// =============================
|
|
352
|
+
// Cleanup
|
|
353
|
+
// =============================
|
|
354
|
+
destroy() {
|
|
355
|
+
if (this.saveTimeout) {
|
|
356
|
+
clearTimeout(this.saveTimeout);
|
|
357
|
+
this.saveTimeout = null;
|
|
358
|
+
}
|
|
359
|
+
this.listeners.clear();
|
|
360
|
+
}
|
|
361
|
+
};
|
|
362
|
+
|
|
363
|
+
// src/utils.ts
|
|
364
|
+
function getUserStatusConfig(userRole, colors) {
|
|
365
|
+
switch (userRole) {
|
|
366
|
+
case "admin":
|
|
367
|
+
return {
|
|
368
|
+
label: "Admin",
|
|
369
|
+
dotColor: colors.success,
|
|
370
|
+
textColor: colors.success
|
|
371
|
+
};
|
|
372
|
+
case "internal":
|
|
373
|
+
return {
|
|
374
|
+
label: "Internal",
|
|
375
|
+
dotColor: colors.optional,
|
|
376
|
+
textColor: colors.optional
|
|
377
|
+
};
|
|
378
|
+
case "user":
|
|
379
|
+
default:
|
|
380
|
+
return {
|
|
381
|
+
label: "User",
|
|
382
|
+
dotColor: colors.muted,
|
|
383
|
+
textColor: colors.secondary
|
|
384
|
+
};
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
function getGripIconLayout(size) {
|
|
388
|
+
return {
|
|
389
|
+
dotSize: Math.max(2, Math.round(size / 6)),
|
|
390
|
+
columnGap: Math.max(2, Math.round(size / 12)),
|
|
391
|
+
rowGap: Math.max(2, Math.round(size / 12))
|
|
392
|
+
};
|
|
393
|
+
}
|
|
394
|
+
function filterValidChildren(children) {
|
|
395
|
+
return children.filter(
|
|
396
|
+
(child) => child != null && child !== false
|
|
397
|
+
);
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
// src/easing.ts
|
|
401
|
+
var easing = {
|
|
402
|
+
/**
|
|
403
|
+
* Linear - no easing.
|
|
404
|
+
*/
|
|
405
|
+
linear: (t) => t,
|
|
406
|
+
/**
|
|
407
|
+
* Ease out cubic - decelerates towards end.
|
|
408
|
+
* Used for hide/show animations.
|
|
409
|
+
*/
|
|
410
|
+
easeOutCubic: (t) => 1 - Math.pow(1 - t, 3),
|
|
411
|
+
/**
|
|
412
|
+
* Ease in cubic - accelerates from start.
|
|
413
|
+
*/
|
|
414
|
+
easeInCubic: (t) => t * t * t,
|
|
415
|
+
/**
|
|
416
|
+
* Ease in-out cubic - smooth acceleration and deceleration.
|
|
417
|
+
*/
|
|
418
|
+
easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
|
|
419
|
+
/**
|
|
420
|
+
* Ease out quad - lighter deceleration than cubic.
|
|
421
|
+
*/
|
|
422
|
+
easeOutQuad: (t) => 1 - (1 - t) * (1 - t),
|
|
423
|
+
/**
|
|
424
|
+
* Ease out expo - strong deceleration (snappy feel).
|
|
425
|
+
*/
|
|
426
|
+
easeOutExpo: (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
|
|
427
|
+
};
|
|
428
|
+
function getEasing(name) {
|
|
429
|
+
return easing[name];
|
|
430
|
+
}
|
|
431
|
+
function interpolate(from, to, progress, easingFn = easing.easeOutCubic) {
|
|
432
|
+
const eased = easingFn(Math.max(0, Math.min(1, progress)));
|
|
433
|
+
return from + (to - from) * eased;
|
|
434
|
+
}
|
|
435
|
+
function interpolatePosition(from, to, progress, easingFn = easing.easeOutCubic) {
|
|
436
|
+
return {
|
|
437
|
+
x: interpolate(from.x, to.x, progress, easingFn),
|
|
438
|
+
y: interpolate(from.y, to.y, progress, easingFn)
|
|
439
|
+
};
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
// src/colors.ts
|
|
443
|
+
var floatingToolsColors = {
|
|
444
|
+
/** Dark panel background */
|
|
445
|
+
panel: "#1A1A1A",
|
|
446
|
+
/** Muted gray for secondary elements */
|
|
447
|
+
muted: "#888888",
|
|
448
|
+
/** Primary text color */
|
|
449
|
+
secondary: "#E0E0E0",
|
|
450
|
+
/** Info/active state color (Buoy teal) */
|
|
451
|
+
info: "#20C997",
|
|
452
|
+
/** Success/admin color (Buoy teal) */
|
|
453
|
+
success: "#20C997",
|
|
454
|
+
/** Warning/optional color (Buoy orange) */
|
|
455
|
+
optional: "#FFA94D",
|
|
456
|
+
/** Error color (Buoy red) */
|
|
457
|
+
error: "#EF4444",
|
|
458
|
+
/** Primary accent color (Buoy teal) */
|
|
459
|
+
primary: "#20C997",
|
|
460
|
+
/** Color used when dragging the floating tools (Buoy teal) */
|
|
461
|
+
dragActive: "#20C997"
|
|
462
|
+
};
|
|
463
|
+
function withAlpha(color, alpha) {
|
|
464
|
+
if (typeof alpha === "number") {
|
|
465
|
+
const hex = Math.round(alpha * 255).toString(16).padStart(2, "0");
|
|
466
|
+
return `${color}${hex}`;
|
|
467
|
+
}
|
|
468
|
+
return `${color}${alpha}`;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
export {
|
|
472
|
+
VISIBLE_HANDLE_WIDTH,
|
|
473
|
+
DRAG_THRESHOLD,
|
|
474
|
+
ANIMATION_DURATION,
|
|
475
|
+
EDGE_PADDING,
|
|
476
|
+
SAVE_DEBOUNCE_MS,
|
|
477
|
+
STORAGE_KEYS,
|
|
478
|
+
FloatingToolsStore,
|
|
479
|
+
getUserStatusConfig,
|
|
480
|
+
getGripIconLayout,
|
|
481
|
+
filterValidChildren,
|
|
482
|
+
easing,
|
|
483
|
+
getEasing,
|
|
484
|
+
interpolate,
|
|
485
|
+
interpolatePosition,
|
|
486
|
+
floatingToolsColors,
|
|
487
|
+
withAlpha
|
|
488
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
typeof window<"u"&&typeof globalThis.global>"u"&&(globalThis.global=globalThis);var p=32,P=5,S=200,b=10,v=500,l={POSITION_X:"@react_buoy_bubble_position_x",POSITION_Y:"@react_buoy_bubble_position_y"};var f=class{constructor(i){this.isDragging=!1;this.isHidden=!1;this.dragStartPos={x:0,y:0};this.dragStartMouse={x:0,y:0};this.hasMoved=!1;this.savedPosition=null;this.saveTimeout=null;this.isInitialized=!1;this.listeners=new Set;this.subscribe=i=>(this.listeners.add(i),()=>this.listeners.delete(i));this.getSnapshot=()=>this.stateSnapshot;this.screenWidth=i.screenWidth,this.screenHeight=i.screenHeight,this.bubbleSize=i.initialBubbleSize??{width:100,height:32},this.minPosition=i.minPosition??{x:10,y:10},this.visibleHandleWidth=i.visibleHandleWidth??32,this.dragThreshold=i.dragThreshold??5,this.edgePadding=i.edgePadding??10,this.enablePositionPersistence=i.enablePositionPersistence??!0,this.storage=i.storage,this.onPositionChange=i.onPositionChange,this.onHiddenChange=i.onHiddenChange,this.onDraggingChange=i.onDraggingChange,this.position=i.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(i=>i())}async initialize(){if(this.isInitialized||!this.enablePositionPersistence||!this.storage){this.isInitialized=!0;return}try{let[i,e]=await Promise.all([this.storage.getItem(l.POSITION_X),this.storage.getItem(l.POSITION_Y)]);if(i!==null&&e!==null){let s=parseFloat(i),a=parseFloat(e);if(!Number.isNaN(s)&&!Number.isNaN(a)){let o={x:s,y:a},n=this.validatePosition(o);(Math.abs(o.x-n.x)>5||Math.abs(o.y-n.y)>5)&&this.savePosition(n.x,n.y),this.position=n,n.x>=this.screenWidth-this.visibleHandleWidth-5&&(this.isHidden=!0),this.notify()}}}catch{}this.isInitialized=!0}getBounds(){return{minX:this.minPosition.x,maxX:this.screenWidth-this.visibleHandleWidth,minY:this.minPosition.y,maxY:this.screenHeight-this.bubbleSize.height-this.edgePadding}}validatePosition(i){let e=this.getBounds();return{x:Math.max(e.minX,Math.min(i.x,e.maxX)),y:Math.max(e.minY,Math.min(i.y,e.maxY))}}setPosition(i){this.position=i,this.onPositionChange?.(i),this.notify()}setBubbleSize(i){this.bubbleSize.width===i.width&&this.bubbleSize.height===i.height||(this.bubbleSize=i,this.isDragging||this.reconcileBounds(),this.notify())}setScreenSize(i,e){this.screenWidth=i,this.screenHeight=e,this.reconcileBounds(),this.notify()}reconcileBounds(){let i=s=>({x:Math.max(this.minPosition.x,Math.min(s.x,this.screenWidth-this.bubbleSize.width-this.edgePadding)),y:Math.max(this.minPosition.y,Math.min(s.y,this.screenHeight-this.bubbleSize.height-this.edgePadding))}),e=i(this.position);this.position=this.isHidden?{...e,x:this.screenWidth-this.visibleHandleWidth}:e,this.savedPosition&&(this.savedPosition=i(this.savedPosition))}setMinPosition(i){this.minPosition=i}async savePosition(i,e){if(!(!this.enablePositionPersistence||!this.storage))try{await Promise.all([this.storage.setItem(l.POSITION_X,i.toString()),this.storage.setItem(l.POSITION_Y,e.toString())])}catch{}}debouncedSavePosition(i,e){this.saveTimeout&&clearTimeout(this.saveTimeout),this.saveTimeout=setTimeout(()=>this.savePosition(i,e),500)}toggleHideShow(){let i=this.position.x>this.screenWidth-this.bubbleSize.width/2;if(this.isHidden||i){let e,s;return this.savedPosition&&this.savedPosition.x<this.screenWidth-this.bubbleSize.width/2?(e=this.savedPosition.x,s=this.savedPosition.y):(e=this.screenWidth-this.bubbleSize.width-20,s=this.position.y),this.isHidden=!1,this.onHiddenChange?.(!1),this.notify(),{targetPosition:{x:e,y:s},isHiding:!1}}else{this.savedPosition={...this.position};let e=this.screenWidth-this.visibleHandleWidth;return this.isHidden=!0,this.onHiddenChange?.(!0),this.notify(),{targetPosition:{x:e,y:this.position.y},isHiding:!0}}}forceHide(){if(this.isHidden)return{targetPosition:this.position};this.savedPosition={...this.position};let i=this.screenWidth-this.visibleHandleWidth;return this.isHidden=!0,this.onHiddenChange?.(!0),this.notify(),{targetPosition:{x:i,y:this.position.y}}}forceShow(){if(!this.isHidden)return{targetPosition:this.position};let i,e;return this.savedPosition?(i=this.savedPosition.x,e=this.savedPosition.y):(i=this.screenWidth-this.bubbleSize.width-20,e=this.position.y),this.isHidden=!1,this.onHiddenChange?.(!1),this.notify(),{targetPosition:{x:i,y:e}}}handleDragStart(i){this.hasMoved=!1,this.dragStartPos={...this.position},this.dragStartMouse={x:i.clientX,y:i.clientY}}handleDragMove(i){let e=i.clientX-this.dragStartMouse.x,s=i.clientY-this.dragStartMouse.y,a=Math.abs(e)+Math.abs(s);if(!this.hasMoved&&a>this.dragThreshold&&(this.hasMoved=!0,this.isDragging=!0,this.onDraggingChange?.(!0),this.notify()),this.hasMoved){let o=this.dragStartPos.x+e,n=this.dragStartPos.y+s,u=this.getBounds(),c=Math.max(u.minX,Math.min(o,this.screenWidth-this.visibleHandleWidth+this.bubbleSize.width)),r=Math.max(u.minY,Math.min(n,u.maxY));return this.position={x:c,y:r},this.onPositionChange?.(this.position),this.notify(),{position:this.position,isDragging:!0}}return{position:this.position,isDragging:!1}}handleDragEnd(i){if(!this.hasMoved)return this.isDragging=!1,this.onDraggingChange?.(!1),this.notify(),{position:this.position,shouldHide:!1,wasTap:!0};let s=i.clientX-this.dragStartMouse.x,a=i.clientY-this.dragStartMouse.y,o=this.dragStartPos.x+s,n=this.dragStartPos.y+a,c=o+this.bubbleSize.width/2>this.screenWidth,r=this.getBounds();if(c){let h=this.screenWidth-this.visibleHandleWidth,d=Math.max(r.minY,Math.min(n,r.maxY));return this.isHidden=!0,this.onHiddenChange?.(!0),this.isDragging=!1,this.onDraggingChange?.(!1),this.notify(),{position:{x:h,y:d},shouldHide:!0,wasTap:!1}}else{this.isHidden&&o<this.screenWidth-this.visibleHandleWidth-10&&(this.isHidden=!1,this.onHiddenChange?.(!1));let h=Math.max(r.minX,Math.min(o,this.screenWidth-this.bubbleSize.width-this.edgePadding)),d=Math.max(r.minY,Math.min(n,r.maxY));return h<this.screenWidth-this.bubbleSize.width/2&&(this.savedPosition={x:h,y:d}),this.position={x:h,y:d},this.isDragging=!1,this.onDraggingChange?.(!1),this.debouncedSavePosition(h,d),this.notify(),{position:{x:h,y:d},shouldHide:!1,wasTap:!1}}}commitPosition(i){this.position=i,this.savePosition(i.x,i.y),this.notify()}destroy(){this.saveTimeout&&(clearTimeout(this.saveTimeout),this.saveTimeout=null),this.listeners.clear()}};function E(t,i){switch(t){case"admin":return{label:"Admin",dotColor:i.success,textColor:i.success};case"internal":return{label:"Internal",dotColor:i.optional,textColor:i.optional};case"user":default:return{label:"User",dotColor:i.muted,textColor:i.secondary}}}function I(t){return{dotSize:Math.max(2,Math.round(t/6)),columnGap:Math.max(2,Math.round(t/12)),rowGap:Math.max(2,Math.round(t/12))}}function w(t){return t.filter(i=>i!=null&&i!==!1)}var m={linear:t=>t,easeOutCubic:t=>1-Math.pow(1-t,3),easeInCubic:t=>t*t*t,easeInOutCubic:t=>t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2,easeOutQuad:t=>1-(1-t)*(1-t),easeOutExpo:t=>t===1?1:1-Math.pow(2,-10*t)};function O(t){return m[t]}function x(t,i,e,s=m.easeOutCubic){let a=s(Math.max(0,Math.min(1,e)));return t+(i-t)*a}function z(t,i,e,s=m.easeOutCubic){return{x:x(t.x,i.x,e,s),y:x(t.y,i.y,e,s)}}var A={panel:"#1A1A1A",muted:"#888888",secondary:"#E0E0E0",info:"#20C997",success:"#20C997",optional:"#FFA94D",error:"#EF4444",primary:"#20C997",dragActive:"#20C997"};function X(t,i){if(typeof i=="number"){let e=Math.round(i*255).toString(16).padStart(2,"0");return`${t}${e}`}return`${t}${i}`}export{p as a,P as b,S as c,b as d,v as e,l as f,f as g,E as h,I as i,w as j,m as k,O as l,x as m,z as n,A as o,X as p};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import{a as r,b as t,c as e,d as f,e as m,f as p,g as o,h as x,i as l,j as a,k as g,l as i,m as n,n as s,o as F,p as S}from"./chunks/chunk-PUCCT3HF.mjs";export{e as ANIMATION_DURATION,t as DRAG_THRESHOLD,f as EDGE_PADDING,o as FloatingToolsStore,m as SAVE_DEBOUNCE_MS,p as STORAGE_KEYS,r as VISIBLE_HANDLE_WIDTH,g as easing,a as filterValidChildren,F as floatingToolsColors,i as getEasing,l as getGripIconLayout,x as getUserStatusConfig,n as interpolate,s as interpolatePosition,S as withAlpha};
|