@cloudparse/up-miniapps-sdk 0.2.1 → 0.2.2
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/dist/index.browser.min.js +135 -77
- package/dist/index.browser.min.js.map +1 -1
- package/dist/index.cjs +761 -427
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +769 -435
- package/dist/index.js.map +1 -1
- package/dist/style.css +385 -35
- package/package.json +10 -2
package/dist/index.js
CHANGED
|
@@ -5,6 +5,58 @@ import {
|
|
|
5
5
|
handleRouteRequest
|
|
6
6
|
} from "./chunk-S4UHRBSM.js";
|
|
7
7
|
|
|
8
|
+
// src/lib/utils.ts
|
|
9
|
+
import { clsx } from "clsx";
|
|
10
|
+
import { twMerge } from "tailwind-merge";
|
|
11
|
+
function cn(...inputs) {
|
|
12
|
+
return twMerge(clsx(inputs));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// src/components/ui/button.tsx
|
|
16
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
17
|
+
import { cva } from "class-variance-authority";
|
|
18
|
+
import * as React from "react";
|
|
19
|
+
import { jsx } from "react/jsx-runtime";
|
|
20
|
+
var buttonVariants = cva(
|
|
21
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
22
|
+
{
|
|
23
|
+
defaultVariants: {
|
|
24
|
+
size: "default",
|
|
25
|
+
variant: "default"
|
|
26
|
+
},
|
|
27
|
+
variants: {
|
|
28
|
+
size: {
|
|
29
|
+
default: "h-10 px-4 py-2",
|
|
30
|
+
icon: "h-10 w-10",
|
|
31
|
+
lg: "h-11 rounded-md px-8",
|
|
32
|
+
sm: "h-9 rounded-md px-3"
|
|
33
|
+
},
|
|
34
|
+
variant: {
|
|
35
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
36
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
37
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
38
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
39
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
40
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
var Button = React.forwardRef(
|
|
46
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
47
|
+
const Comp = asChild ? Slot : "button";
|
|
48
|
+
return /* @__PURE__ */ jsx(
|
|
49
|
+
Comp,
|
|
50
|
+
{
|
|
51
|
+
className: cn(buttonVariants({ className, size, variant })),
|
|
52
|
+
ref,
|
|
53
|
+
...props
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
Button.displayName = "Button";
|
|
59
|
+
|
|
8
60
|
// src/bridge.ts
|
|
9
61
|
var Bridge = class {
|
|
10
62
|
callbacks = /* @__PURE__ */ new Map();
|
|
@@ -166,15 +218,127 @@ var Bridge = class {
|
|
|
166
218
|
}
|
|
167
219
|
};
|
|
168
220
|
|
|
221
|
+
// src/components/ui/sheet.tsx
|
|
222
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
223
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
224
|
+
import { X } from "lucide-react";
|
|
225
|
+
import * as React2 from "react";
|
|
226
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
227
|
+
var Sheet = SheetPrimitive.Root;
|
|
228
|
+
var SheetPortal = SheetPrimitive.Portal;
|
|
229
|
+
var SheetOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
|
|
230
|
+
SheetPrimitive.Overlay,
|
|
231
|
+
{
|
|
232
|
+
className: cn(
|
|
233
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
234
|
+
className
|
|
235
|
+
),
|
|
236
|
+
...props,
|
|
237
|
+
ref
|
|
238
|
+
}
|
|
239
|
+
));
|
|
240
|
+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
|
241
|
+
var sheetVariants = cva2(
|
|
242
|
+
"z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
243
|
+
{
|
|
244
|
+
defaultVariants: {
|
|
245
|
+
side: "right"
|
|
246
|
+
},
|
|
247
|
+
variants: {
|
|
248
|
+
side: {
|
|
249
|
+
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
250
|
+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
251
|
+
right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
|
252
|
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
);
|
|
257
|
+
var SheetContent = React2.forwardRef(({ side = "right", className, children, portal = true, ...props }, ref) => {
|
|
258
|
+
const Content2 = /* @__PURE__ */ jsxs(
|
|
259
|
+
SheetPrimitive.Content,
|
|
260
|
+
{
|
|
261
|
+
className: cn(
|
|
262
|
+
sheetVariants({ side }),
|
|
263
|
+
portal ? "fixed" : "absolute",
|
|
264
|
+
className
|
|
265
|
+
),
|
|
266
|
+
ref,
|
|
267
|
+
...props,
|
|
268
|
+
children: [
|
|
269
|
+
children,
|
|
270
|
+
/* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-105 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
|
|
271
|
+
/* @__PURE__ */ jsx2(X, { className: "h-4 w-4" }),
|
|
272
|
+
/* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Close" })
|
|
273
|
+
] })
|
|
274
|
+
]
|
|
275
|
+
}
|
|
276
|
+
);
|
|
277
|
+
if (!portal) {
|
|
278
|
+
return Content2;
|
|
279
|
+
}
|
|
280
|
+
return /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
281
|
+
/* @__PURE__ */ jsx2(SheetOverlay, {}),
|
|
282
|
+
Content2
|
|
283
|
+
] });
|
|
284
|
+
});
|
|
285
|
+
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
286
|
+
var SheetHeader = ({
|
|
287
|
+
className,
|
|
288
|
+
...props
|
|
289
|
+
}) => /* @__PURE__ */ jsx2(
|
|
290
|
+
"div",
|
|
291
|
+
{
|
|
292
|
+
className: cn(
|
|
293
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
|
294
|
+
className
|
|
295
|
+
),
|
|
296
|
+
...props
|
|
297
|
+
}
|
|
298
|
+
);
|
|
299
|
+
SheetHeader.displayName = "SheetHeader";
|
|
300
|
+
var SheetFooter = ({
|
|
301
|
+
className,
|
|
302
|
+
...props
|
|
303
|
+
}) => /* @__PURE__ */ jsx2(
|
|
304
|
+
"div",
|
|
305
|
+
{
|
|
306
|
+
className: cn(
|
|
307
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
308
|
+
className
|
|
309
|
+
),
|
|
310
|
+
...props
|
|
311
|
+
}
|
|
312
|
+
);
|
|
313
|
+
SheetFooter.displayName = "SheetFooter";
|
|
314
|
+
var SheetTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
|
|
315
|
+
SheetPrimitive.Title,
|
|
316
|
+
{
|
|
317
|
+
className: cn("text-lg font-semibold text-foreground", className),
|
|
318
|
+
ref,
|
|
319
|
+
...props
|
|
320
|
+
}
|
|
321
|
+
));
|
|
322
|
+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
323
|
+
var SheetDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
|
|
324
|
+
SheetPrimitive.Description,
|
|
325
|
+
{
|
|
326
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
327
|
+
ref,
|
|
328
|
+
...props
|
|
329
|
+
}
|
|
330
|
+
));
|
|
331
|
+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
332
|
+
|
|
169
333
|
// src/components/Map/components/MapDrawer.tsx
|
|
170
334
|
import {
|
|
171
|
-
forwardRef,
|
|
335
|
+
forwardRef as forwardRef3,
|
|
172
336
|
useEffect,
|
|
173
337
|
useImperativeHandle,
|
|
174
338
|
useRef,
|
|
175
339
|
useState
|
|
176
340
|
} from "react";
|
|
177
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
341
|
+
import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
178
342
|
var resolveHeightToPixels = (height, containerHeight) => {
|
|
179
343
|
if (typeof height === "number") {
|
|
180
344
|
return height;
|
|
@@ -184,7 +348,7 @@ var resolveHeightToPixels = (height, containerHeight) => {
|
|
|
184
348
|
}
|
|
185
349
|
return parseFloat(height);
|
|
186
350
|
};
|
|
187
|
-
var MapDrawer =
|
|
351
|
+
var MapDrawer = forwardRef3(
|
|
188
352
|
({
|
|
189
353
|
menuItems,
|
|
190
354
|
state,
|
|
@@ -458,8 +622,8 @@ var MapDrawer = forwardRef(
|
|
|
458
622
|
const closedShiftPx = fullPx - closedVisibleHeight;
|
|
459
623
|
return `translateY(calc(${closedShiftPx}px + var(--drag-offset, 0px)))`;
|
|
460
624
|
};
|
|
461
|
-
return /* @__PURE__ */
|
|
462
|
-
/* @__PURE__ */
|
|
625
|
+
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
626
|
+
/* @__PURE__ */ jsx3("style", { children: `
|
|
463
627
|
.no-scrollbar {
|
|
464
628
|
-ms-overflow-style: none;
|
|
465
629
|
scrollbar-width: none;
|
|
@@ -468,97 +632,120 @@ var MapDrawer = forwardRef(
|
|
|
468
632
|
display: none;
|
|
469
633
|
}
|
|
470
634
|
` }),
|
|
471
|
-
/* @__PURE__ */
|
|
635
|
+
/* @__PURE__ */ jsx3(
|
|
472
636
|
"div",
|
|
473
637
|
{
|
|
474
638
|
className: `absolute inset-0 bg-black/45 backdrop-blur-[1px] transition-opacity duration-300 z-30 ${backdropStyles}`,
|
|
475
639
|
onClick: () => onChangeState("closed")
|
|
476
640
|
}
|
|
477
641
|
),
|
|
478
|
-
side === "left" ? (
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
"div",
|
|
642
|
+
side === "left" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
643
|
+
state === "closed" && /* @__PURE__ */ jsx3(
|
|
644
|
+
Button,
|
|
482
645
|
{
|
|
483
|
-
className:
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
646
|
+
className: "absolute top-4 left-4 z-40 w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer hover:bg-zinc-900 hover:text-white p-0!",
|
|
647
|
+
onClick: () => onChangeState("full"),
|
|
648
|
+
variant: "ghost",
|
|
649
|
+
children: /* @__PURE__ */ jsxs2(
|
|
650
|
+
"svg",
|
|
651
|
+
{
|
|
652
|
+
fill: "none",
|
|
653
|
+
height: "24",
|
|
654
|
+
stroke: "currentColor",
|
|
655
|
+
strokeLinecap: "round",
|
|
656
|
+
strokeLinejoin: "round",
|
|
657
|
+
strokeWidth: "2",
|
|
658
|
+
viewBox: "0 0 24 24",
|
|
659
|
+
width: "24",
|
|
660
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
661
|
+
children: [
|
|
662
|
+
/* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
|
|
663
|
+
/* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
|
|
664
|
+
/* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
|
|
665
|
+
]
|
|
666
|
+
}
|
|
667
|
+
)
|
|
668
|
+
}
|
|
669
|
+
),
|
|
670
|
+
/* @__PURE__ */ jsx3(
|
|
671
|
+
Sheet,
|
|
672
|
+
{
|
|
673
|
+
onOpenChange: (open) => onChangeState(open ? "full" : "closed"),
|
|
674
|
+
open: state !== "closed",
|
|
675
|
+
children: /* @__PURE__ */ jsxs2(
|
|
676
|
+
SheetContent,
|
|
677
|
+
{
|
|
678
|
+
className: "w-80 bg-zinc-950/85 backdrop-blur-md border-r border-y border-white/10 rounded-r-2xl shadow-2xl p-4 text-white flex flex-col h-full overflow-hidden",
|
|
679
|
+
portal: false,
|
|
680
|
+
side: "left",
|
|
681
|
+
children: [
|
|
682
|
+
/* @__PURE__ */ jsx3(SheetHeader, { className: "pb-3 border-b border-white/10 mb-2 text-left", children: /* @__PURE__ */ jsx3(SheetTitle, { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
|
|
683
|
+
/* @__PURE__ */ jsx3(
|
|
684
|
+
"div",
|
|
685
|
+
{
|
|
686
|
+
className: "flex-1 overflow-y-auto no-scrollbar pr-2",
|
|
687
|
+
onScroll: handleScroll,
|
|
688
|
+
ref: scrollContainerRef,
|
|
689
|
+
children: menuContent ? menuContent : /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ jsxs2(
|
|
690
|
+
Button,
|
|
691
|
+
{
|
|
692
|
+
className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 justify-start hover:bg-white/5 hover:text-white active:bg-white/10 text-white ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : ""}`,
|
|
693
|
+
disabled: item.disabled,
|
|
694
|
+
onClick: () => {
|
|
695
|
+
if (!item.disabled) {
|
|
696
|
+
item.onPress();
|
|
697
|
+
onChangeState("closed");
|
|
698
|
+
}
|
|
699
|
+
},
|
|
700
|
+
variant: "ghost",
|
|
701
|
+
children: [
|
|
702
|
+
/* @__PURE__ */ jsxs2("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
|
|
703
|
+
item.icon,
|
|
704
|
+
item.badge !== void 0 && /* @__PURE__ */ jsx3("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
|
|
705
|
+
] }),
|
|
706
|
+
/* @__PURE__ */ jsx3("span", { className: "text-sm font-medium tracking-wide flex-1", children: item.label })
|
|
707
|
+
]
|
|
507
708
|
},
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
709
|
+
item.id
|
|
710
|
+
)) })
|
|
711
|
+
}
|
|
712
|
+
),
|
|
713
|
+
showScrollToTopButton && showScrollTop && /* @__PURE__ */ jsx3(
|
|
714
|
+
Button,
|
|
715
|
+
{
|
|
716
|
+
className: "absolute bottom-6 right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black hover:text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer p-0!",
|
|
717
|
+
onClick: () => {
|
|
718
|
+
scrollContainerRef.current?.scrollTo({
|
|
719
|
+
behavior: "smooth",
|
|
720
|
+
top: 0
|
|
721
|
+
});
|
|
515
722
|
},
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
strokeLinejoin: "round",
|
|
538
|
-
strokeWidth: "2.5",
|
|
539
|
-
viewBox: "0 0 24 24",
|
|
540
|
-
width: "20",
|
|
541
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
542
|
-
children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
|
|
543
|
-
}
|
|
544
|
-
)
|
|
545
|
-
}
|
|
546
|
-
)
|
|
547
|
-
] }),
|
|
548
|
-
/* @__PURE__ */ jsx(
|
|
549
|
-
"div",
|
|
550
|
-
{
|
|
551
|
-
className: "w-6 flex items-center justify-center cursor-pointer hover:bg-white/5 active:bg-white/10 transition-colors border-l border-white/5 rounded-r-2xl",
|
|
552
|
-
onClick: handleHandleClick,
|
|
553
|
-
children: /* @__PURE__ */ jsx("div", { className: "w-1.5 h-12 bg-white/20 rounded-full transition-colors group-hover:bg-white/40" })
|
|
554
|
-
}
|
|
555
|
-
)
|
|
556
|
-
]
|
|
723
|
+
variant: "ghost",
|
|
724
|
+
children: /* @__PURE__ */ jsx3(
|
|
725
|
+
"svg",
|
|
726
|
+
{
|
|
727
|
+
fill: "none",
|
|
728
|
+
height: "20",
|
|
729
|
+
stroke: "currentColor",
|
|
730
|
+
strokeLinecap: "round",
|
|
731
|
+
strokeLinejoin: "round",
|
|
732
|
+
strokeWidth: "2.5",
|
|
733
|
+
viewBox: "0 0 24 24",
|
|
734
|
+
width: "20",
|
|
735
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
736
|
+
children: /* @__PURE__ */ jsx3("polyline", { points: "18 15 12 9 6 15" })
|
|
737
|
+
}
|
|
738
|
+
)
|
|
739
|
+
}
|
|
740
|
+
)
|
|
741
|
+
]
|
|
742
|
+
}
|
|
743
|
+
)
|
|
557
744
|
}
|
|
558
745
|
)
|
|
559
|
-
) : (
|
|
746
|
+
] }) : (
|
|
560
747
|
/* Bottom Sheet Panel - Hardware accelerated translateY transitions */
|
|
561
|
-
/* @__PURE__ */
|
|
748
|
+
/* @__PURE__ */ jsxs2(
|
|
562
749
|
"div",
|
|
563
750
|
{
|
|
564
751
|
className: `absolute w-full bg-zinc-950/85 backdrop-blur-md border border-white/10 rounded-t-2xl shadow-2xl flex flex-col z-40 select-none ${isDragging ? "transition-none" : "transition-transform duration-300 ease-out"}`,
|
|
@@ -571,15 +758,15 @@ var MapDrawer = forwardRef(
|
|
|
571
758
|
transition: isDragging ? "none" : "transform 300ms ease-out, margin-bottom 250ms ease-in-out"
|
|
572
759
|
},
|
|
573
760
|
children: [
|
|
574
|
-
/* @__PURE__ */
|
|
761
|
+
/* @__PURE__ */ jsx3(
|
|
575
762
|
"div",
|
|
576
763
|
{
|
|
577
764
|
className: "w-full h-8 flex flex-col items-center justify-center cursor-pointer hover:bg-white/5 rounded-t-2xl transition-colors border-b border-white/5",
|
|
578
765
|
onClick: handleHandleClick,
|
|
579
|
-
children: /* @__PURE__ */
|
|
766
|
+
children: /* @__PURE__ */ jsx3("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
|
|
580
767
|
}
|
|
581
768
|
),
|
|
582
|
-
/* @__PURE__ */
|
|
769
|
+
/* @__PURE__ */ jsxs2(
|
|
583
770
|
"div",
|
|
584
771
|
{
|
|
585
772
|
className: "flex-1 flex flex-col overflow-hidden px-4 pb-4 pt-2 transition-[margin-top] duration-250 ease-in-out relative",
|
|
@@ -587,7 +774,7 @@ var MapDrawer = forwardRef(
|
|
|
587
774
|
marginTop: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px"
|
|
588
775
|
},
|
|
589
776
|
children: [
|
|
590
|
-
/* @__PURE__ */
|
|
777
|
+
/* @__PURE__ */ jsx3(
|
|
591
778
|
"div",
|
|
592
779
|
{
|
|
593
780
|
className: "flex-1 overflow-y-auto no-scrollbar",
|
|
@@ -596,10 +783,10 @@ var MapDrawer = forwardRef(
|
|
|
596
783
|
style: {
|
|
597
784
|
paddingBottom: state === "peek" ? `${shiftPx}px` : "0px"
|
|
598
785
|
},
|
|
599
|
-
children: menuContent ? menuContent : /* @__PURE__ */
|
|
600
|
-
|
|
786
|
+
children: menuContent ? menuContent : /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ jsxs2(
|
|
787
|
+
Button,
|
|
601
788
|
{
|
|
602
|
-
className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : "
|
|
789
|
+
className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 justify-start hover:bg-white/5 hover:text-white active:bg-white/10 text-white ${item.disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : ""}`,
|
|
603
790
|
disabled: item.disabled,
|
|
604
791
|
onClick: () => {
|
|
605
792
|
if (!item.disabled) {
|
|
@@ -607,22 +794,23 @@ var MapDrawer = forwardRef(
|
|
|
607
794
|
onChangeState("closed");
|
|
608
795
|
}
|
|
609
796
|
},
|
|
797
|
+
variant: "ghost",
|
|
610
798
|
children: [
|
|
611
|
-
/* @__PURE__ */
|
|
799
|
+
/* @__PURE__ */ jsxs2("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
|
|
612
800
|
item.icon,
|
|
613
|
-
item.badge !== void 0 && /* @__PURE__ */
|
|
801
|
+
item.badge !== void 0 && /* @__PURE__ */ jsx3("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: item.badge })
|
|
614
802
|
] }),
|
|
615
|
-
/* @__PURE__ */
|
|
803
|
+
/* @__PURE__ */ jsx3("span", { className: "text-sm font-medium tracking-wide", children: item.label })
|
|
616
804
|
]
|
|
617
805
|
},
|
|
618
806
|
item.id
|
|
619
807
|
)) })
|
|
620
808
|
}
|
|
621
809
|
),
|
|
622
|
-
showScrollToTopButton && showScrollTop && /* @__PURE__ */
|
|
623
|
-
|
|
810
|
+
showScrollToTopButton && showScrollTop && /* @__PURE__ */ jsx3(
|
|
811
|
+
Button,
|
|
624
812
|
{
|
|
625
|
-
className: "absolute right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer",
|
|
813
|
+
className: "absolute right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-cyan-500 hover:bg-cyan-400 active:scale-95 text-black hover:text-black shadow-lg shadow-cyan-500/25 transition-all duration-200 cursor-pointer p-0!",
|
|
626
814
|
onClick: () => {
|
|
627
815
|
scrollContainerRef.current?.scrollTo({
|
|
628
816
|
behavior: "smooth",
|
|
@@ -632,7 +820,8 @@ var MapDrawer = forwardRef(
|
|
|
632
820
|
style: {
|
|
633
821
|
bottom: state === "peek" ? `calc(${24 + shiftPx}px + var(--drag-offset, 0px))` : `calc(24px + var(--drag-offset, 0px))`
|
|
634
822
|
},
|
|
635
|
-
|
|
823
|
+
variant: "ghost",
|
|
824
|
+
children: /* @__PURE__ */ jsx3(
|
|
636
825
|
"svg",
|
|
637
826
|
{
|
|
638
827
|
fill: "none",
|
|
@@ -644,7 +833,7 @@ var MapDrawer = forwardRef(
|
|
|
644
833
|
viewBox: "0 0 24 24",
|
|
645
834
|
width: "20",
|
|
646
835
|
xmlns: "http://www.w3.org/2000/svg",
|
|
647
|
-
children: /* @__PURE__ */
|
|
836
|
+
children: /* @__PURE__ */ jsx3("polyline", { points: "18 15 12 9 6 15" })
|
|
648
837
|
}
|
|
649
838
|
)
|
|
650
839
|
}
|
|
@@ -660,8 +849,65 @@ var MapDrawer = forwardRef(
|
|
|
660
849
|
}
|
|
661
850
|
);
|
|
662
851
|
|
|
852
|
+
// src/components/ui/card.tsx
|
|
853
|
+
import * as React3 from "react";
|
|
854
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
855
|
+
var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
|
|
856
|
+
"div",
|
|
857
|
+
{
|
|
858
|
+
className: cn(
|
|
859
|
+
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
|
860
|
+
className
|
|
861
|
+
),
|
|
862
|
+
ref,
|
|
863
|
+
...props
|
|
864
|
+
}
|
|
865
|
+
));
|
|
866
|
+
Card.displayName = "Card";
|
|
867
|
+
var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
|
|
868
|
+
"div",
|
|
869
|
+
{
|
|
870
|
+
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
871
|
+
ref,
|
|
872
|
+
...props
|
|
873
|
+
}
|
|
874
|
+
));
|
|
875
|
+
CardHeader.displayName = "CardHeader";
|
|
876
|
+
var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
|
|
877
|
+
"div",
|
|
878
|
+
{
|
|
879
|
+
className: cn(
|
|
880
|
+
"text-2xl font-semibold leading-none tracking-tight",
|
|
881
|
+
className
|
|
882
|
+
),
|
|
883
|
+
ref,
|
|
884
|
+
...props
|
|
885
|
+
}
|
|
886
|
+
));
|
|
887
|
+
CardTitle.displayName = "CardTitle";
|
|
888
|
+
var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
|
|
889
|
+
"div",
|
|
890
|
+
{
|
|
891
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
892
|
+
ref,
|
|
893
|
+
...props
|
|
894
|
+
}
|
|
895
|
+
));
|
|
896
|
+
CardDescription.displayName = "CardDescription";
|
|
897
|
+
var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", { className: cn("p-6 pt-0", className), ref, ...props }));
|
|
898
|
+
CardContent.displayName = "CardContent";
|
|
899
|
+
var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
|
|
900
|
+
"div",
|
|
901
|
+
{
|
|
902
|
+
className: cn("flex items-center p-6 pt-0", className),
|
|
903
|
+
ref,
|
|
904
|
+
...props
|
|
905
|
+
}
|
|
906
|
+
));
|
|
907
|
+
CardFooter.displayName = "CardFooter";
|
|
908
|
+
|
|
663
909
|
// src/components/Map/components/MapEtaPanel.tsx
|
|
664
|
-
import { jsx as
|
|
910
|
+
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
665
911
|
var MapEtaPanel = ({
|
|
666
912
|
etaData,
|
|
667
913
|
layoutMode,
|
|
@@ -670,15 +916,15 @@ var MapEtaPanel = ({
|
|
|
670
916
|
isDragging = false
|
|
671
917
|
}) => {
|
|
672
918
|
if (layoutMode === "closed-banner") {
|
|
673
|
-
return /* @__PURE__ */
|
|
674
|
-
/* @__PURE__ */
|
|
919
|
+
return /* @__PURE__ */ jsxs3("div", { className: "w-full h-10 flex items-center justify-between px-4 pb-2 pt-1 border-b border-white/5 bg-zinc-950/15 relative overflow-hidden", children: [
|
|
920
|
+
/* @__PURE__ */ jsxs3(
|
|
675
921
|
"div",
|
|
676
922
|
{
|
|
677
923
|
className: "flex items-center gap-2 cursor-pointer flex-1",
|
|
678
924
|
onClick: onHeaderClick,
|
|
679
925
|
children: [
|
|
680
|
-
/* @__PURE__ */
|
|
681
|
-
/* @__PURE__ */
|
|
926
|
+
/* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
|
|
927
|
+
/* @__PURE__ */ jsxs3("span", { className: "text-xs font-bold text-emerald-400", children: [
|
|
682
928
|
etaData.etaMins,
|
|
683
929
|
" min (",
|
|
684
930
|
etaData.distanceRemainingKm.toFixed(1),
|
|
@@ -687,36 +933,37 @@ var MapEtaPanel = ({
|
|
|
687
933
|
]
|
|
688
934
|
}
|
|
689
935
|
),
|
|
690
|
-
etaData.onAbort && /* @__PURE__ */
|
|
691
|
-
|
|
936
|
+
etaData.onAbort && /* @__PURE__ */ jsx5(
|
|
937
|
+
Button,
|
|
692
938
|
{
|
|
693
|
-
className: "px-1 py-1 text-[10px] font-black bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/25 active:scale-95 rounded-md transition-all cursor-pointer pointer-events-auto",
|
|
939
|
+
className: "px-1 py-1 text-[10px] font-black bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/25 active:scale-95 rounded-md transition-all cursor-pointer pointer-events-auto h-auto p-0!",
|
|
694
940
|
onClick: (e) => {
|
|
695
941
|
e.stopPropagation();
|
|
696
942
|
etaData.onAbort?.();
|
|
697
943
|
},
|
|
698
|
-
|
|
944
|
+
variant: "ghost",
|
|
945
|
+
children: /* @__PURE__ */ jsxs3(
|
|
699
946
|
"svg",
|
|
700
947
|
{
|
|
701
948
|
className: "lucide lucide-x",
|
|
702
949
|
fill: "none",
|
|
703
950
|
height: "18",
|
|
704
951
|
stroke: "currentColor",
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
952
|
+
strokeLinecap: "round",
|
|
953
|
+
strokeLinejoin: "round",
|
|
954
|
+
strokeWidth: "2.5",
|
|
708
955
|
viewBox: "0 0 24 24",
|
|
709
956
|
width: "18",
|
|
710
957
|
xmlns: "http://www.w3.org/2000/svg",
|
|
711
958
|
children: [
|
|
712
|
-
/* @__PURE__ */
|
|
713
|
-
/* @__PURE__ */
|
|
959
|
+
/* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
|
|
960
|
+
/* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
|
|
714
961
|
]
|
|
715
962
|
}
|
|
716
963
|
)
|
|
717
964
|
}
|
|
718
965
|
),
|
|
719
|
-
etaData.progress !== void 0 && /* @__PURE__ */
|
|
966
|
+
etaData.progress !== void 0 && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] bg-white/5", children: /* @__PURE__ */ jsx5(
|
|
720
967
|
"div",
|
|
721
968
|
{
|
|
722
969
|
className: "h-full bg-cyan-400",
|
|
@@ -726,166 +973,174 @@ var MapEtaPanel = ({
|
|
|
726
973
|
] });
|
|
727
974
|
}
|
|
728
975
|
if (layoutMode === "open-card") {
|
|
729
|
-
return /* @__PURE__ */
|
|
730
|
-
/* @__PURE__ */
|
|
731
|
-
/* @__PURE__ */
|
|
732
|
-
/* @__PURE__ */
|
|
733
|
-
/* @__PURE__ */
|
|
976
|
+
return /* @__PURE__ */ jsxs3(Card, { className: "mx-4 mt-2 p-4 bg-white/5 border border-white/10 rounded-xl flex flex-col text-card-foreground", children: [
|
|
977
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-2", children: [
|
|
978
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
|
|
979
|
+
/* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
|
|
980
|
+
/* @__PURE__ */ jsx5("span", { className: "text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Journey Active" })
|
|
734
981
|
] }),
|
|
735
|
-
etaData.onAbort && /* @__PURE__ */
|
|
736
|
-
|
|
982
|
+
etaData.onAbort && /* @__PURE__ */ jsx5(
|
|
983
|
+
Button,
|
|
737
984
|
{
|
|
738
|
-
className: "px-1
|
|
985
|
+
className: "px-1 py-1 text-xs font-bold bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30 active:scale-95 rounded-lg transition-all cursor-pointer pointer-events-auto h-auto p-0!",
|
|
739
986
|
onClick: etaData.onAbort,
|
|
740
|
-
|
|
987
|
+
variant: "ghost",
|
|
988
|
+
children: /* @__PURE__ */ jsxs3(
|
|
741
989
|
"svg",
|
|
742
990
|
{
|
|
743
991
|
className: "lucide lucide-x",
|
|
744
992
|
fill: "none",
|
|
745
993
|
height: "18",
|
|
746
994
|
stroke: "currentColor",
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
995
|
+
strokeLinecap: "round",
|
|
996
|
+
strokeLinejoin: "round",
|
|
997
|
+
strokeWidth: "2.5",
|
|
750
998
|
viewBox: "0 0 24 24",
|
|
751
999
|
width: "18",
|
|
752
1000
|
xmlns: "http://www.w3.org/2000/svg",
|
|
753
1001
|
children: [
|
|
754
|
-
/* @__PURE__ */
|
|
755
|
-
/* @__PURE__ */
|
|
1002
|
+
/* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
|
|
1003
|
+
/* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
|
|
756
1004
|
]
|
|
757
1005
|
}
|
|
758
1006
|
)
|
|
759
1007
|
}
|
|
760
1008
|
)
|
|
761
1009
|
] }),
|
|
762
|
-
/* @__PURE__ */
|
|
763
|
-
/* @__PURE__ */
|
|
764
|
-
/* @__PURE__ */
|
|
765
|
-
|
|
766
|
-
|
|
1010
|
+
/* @__PURE__ */ jsxs3(CardContent, { className: "p-0 flex flex-col", children: [
|
|
1011
|
+
/* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-1.5 mb-2.5", children: [
|
|
1012
|
+
/* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
|
|
1013
|
+
/* @__PURE__ */ jsxs3("div", { className: "text-xl font-black text-white leading-none", children: [
|
|
1014
|
+
etaData.etaMins,
|
|
1015
|
+
/* @__PURE__ */ jsx5("span", { className: "text-xs text-zinc-400 font-normal", children: " min" })
|
|
1016
|
+
] }),
|
|
1017
|
+
/* @__PURE__ */ jsx5("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Time Remaining" })
|
|
767
1018
|
] }),
|
|
768
|
-
/* @__PURE__ */
|
|
1019
|
+
/* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
|
|
1020
|
+
/* @__PURE__ */ jsxs3("div", { className: "text-xl font-black text-white leading-none", children: [
|
|
1021
|
+
etaData.distanceRemainingKm.toFixed(1),
|
|
1022
|
+
/* @__PURE__ */ jsx5("span", { className: "text-xs text-zinc-400 font-normal", children: " km" })
|
|
1023
|
+
] }),
|
|
1024
|
+
/* @__PURE__ */ jsx5("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Distance Remaining" })
|
|
1025
|
+
] })
|
|
769
1026
|
] }),
|
|
770
|
-
/* @__PURE__ */
|
|
771
|
-
/* @__PURE__ */
|
|
772
|
-
|
|
773
|
-
/* @__PURE__ */
|
|
1027
|
+
etaData.progress !== void 0 && /* @__PURE__ */ jsxs3("div", { className: "mb-3", children: [
|
|
1028
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex justify-between text-[9px] font-bold text-zinc-400 mb-1", children: [
|
|
1029
|
+
/* @__PURE__ */ jsx5("span", { children: "Progress" }),
|
|
1030
|
+
/* @__PURE__ */ jsxs3("span", { children: [
|
|
1031
|
+
Math.round(etaData.progress),
|
|
1032
|
+
"%"
|
|
1033
|
+
] })
|
|
774
1034
|
] }),
|
|
775
|
-
/* @__PURE__ */
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
Math.round(etaData.progress),
|
|
783
|
-
"%"
|
|
784
|
-
] })
|
|
1035
|
+
/* @__PURE__ */ jsx5("div", { className: "h-1 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx5(
|
|
1036
|
+
"div",
|
|
1037
|
+
{
|
|
1038
|
+
className: "h-full bg-cyan-400 rounded-full",
|
|
1039
|
+
style: { width: `${etaData.progress}%` }
|
|
1040
|
+
}
|
|
1041
|
+
) })
|
|
785
1042
|
] }),
|
|
786
|
-
|
|
787
|
-
|
|
1043
|
+
etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ jsx5(
|
|
1044
|
+
Button,
|
|
788
1045
|
{
|
|
789
|
-
className: "
|
|
790
|
-
|
|
1046
|
+
className: "w-full py-2.5 text-xs font-bold bg-cyan-500 text-black hover:bg-cyan-400 hover:text-black active:scale-95 rounded-lg transition-all cursor-pointer h-auto",
|
|
1047
|
+
onClick: etaData.onStart,
|
|
1048
|
+
variant: "ghost",
|
|
1049
|
+
children: "Start Guidance"
|
|
791
1050
|
}
|
|
792
|
-
)
|
|
793
|
-
] })
|
|
794
|
-
etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ jsx2(
|
|
795
|
-
"button",
|
|
796
|
-
{
|
|
797
|
-
className: "w-full py-2.5 text-xs font-bold bg-cyan-500 text-black hover:bg-cyan-400 active:scale-95 rounded-lg transition-all cursor-pointer",
|
|
798
|
-
onClick: etaData.onStart,
|
|
799
|
-
children: "Start Guidance"
|
|
800
|
-
}
|
|
801
|
-
)
|
|
1051
|
+
)
|
|
1052
|
+
] })
|
|
802
1053
|
] });
|
|
803
1054
|
}
|
|
804
|
-
return /* @__PURE__ */
|
|
805
|
-
|
|
1055
|
+
return /* @__PURE__ */ jsxs3(
|
|
1056
|
+
Card,
|
|
806
1057
|
{
|
|
807
|
-
className: `absolute left-1/2 -translate-x-1/2 z-40 w-[calc(100%-2rem)] max-w-[320px] sm:max-w-[380px] bg-zinc-950/85 backdrop-blur-md border border-white/10 rounded-2xl shadow-2xl p-3 sm:p-4 flex flex-col pointer-events-auto select-none ${isDragging ? "transition-none" : "transition-all duration-300 ease-out"}`,
|
|
1058
|
+
className: `absolute left-1/2 -translate-x-1/2 z-40 w-[calc(100%-2rem)] max-w-[320px] sm:max-w-[380px] bg-zinc-950/85 backdrop-blur-md border border-white/10 rounded-2xl shadow-2xl p-3 sm:p-4 flex flex-col pointer-events-auto select-none text-card-foreground ${isDragging ? "transition-none" : "transition-all duration-300 ease-out"}`,
|
|
808
1059
|
style,
|
|
809
1060
|
children: [
|
|
810
|
-
/* @__PURE__ */
|
|
811
|
-
/* @__PURE__ */
|
|
812
|
-
/* @__PURE__ */
|
|
813
|
-
/* @__PURE__ */
|
|
1061
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-2 sm:mb-3", children: [
|
|
1062
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
|
|
1063
|
+
/* @__PURE__ */ jsx5("span", { className: "w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-emerald-500 animate-pulse" }),
|
|
1064
|
+
/* @__PURE__ */ jsx5("span", { className: "text-[9px] sm:text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Guidance Active" })
|
|
814
1065
|
] }),
|
|
815
|
-
etaData.onAbort && /* @__PURE__ */
|
|
816
|
-
|
|
1066
|
+
etaData.onAbort && /* @__PURE__ */ jsx5(
|
|
1067
|
+
Button,
|
|
817
1068
|
{
|
|
818
|
-
className: "px-1 py-1 text-[10px] sm:text-xs font-bold bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30 active:scale-95 rounded-lg transition-all cursor-pointer",
|
|
1069
|
+
className: "px-1 py-1 text-[10px] sm:text-xs font-bold bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30 active:scale-95 rounded-lg transition-all cursor-pointer h-auto p-0!",
|
|
819
1070
|
onClick: etaData.onAbort,
|
|
820
|
-
|
|
1071
|
+
variant: "ghost",
|
|
1072
|
+
children: /* @__PURE__ */ jsxs3(
|
|
821
1073
|
"svg",
|
|
822
1074
|
{
|
|
823
1075
|
className: "lucide lucide-x",
|
|
824
1076
|
fill: "none",
|
|
825
1077
|
height: "18",
|
|
826
1078
|
stroke: "currentColor",
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
1079
|
+
strokeLinecap: "round",
|
|
1080
|
+
strokeLinejoin: "round",
|
|
1081
|
+
strokeWidth: "2.5",
|
|
830
1082
|
viewBox: "0 0 24 24",
|
|
831
1083
|
width: "18",
|
|
832
1084
|
xmlns: "http://www.w3.org/2000/svg",
|
|
833
1085
|
children: [
|
|
834
|
-
/* @__PURE__ */
|
|
835
|
-
/* @__PURE__ */
|
|
1086
|
+
/* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
|
|
1087
|
+
/* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
|
|
836
1088
|
]
|
|
837
1089
|
}
|
|
838
1090
|
)
|
|
839
1091
|
}
|
|
840
1092
|
)
|
|
841
1093
|
] }),
|
|
842
|
-
/* @__PURE__ */
|
|
843
|
-
/* @__PURE__ */
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
" ",
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
" ",
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
etaData.progress !== void 0 && /* @__PURE__ */ jsxs2("div", { children: [
|
|
859
|
-
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[8px] sm:text-[9px] font-bold text-zinc-400 mb-1", children: [
|
|
860
|
-
/* @__PURE__ */ jsx2("span", { children: "Progress" }),
|
|
861
|
-
/* @__PURE__ */ jsxs2("span", { children: [
|
|
862
|
-
Math.round(etaData.progress),
|
|
863
|
-
"%"
|
|
864
|
-
] })
|
|
1094
|
+
/* @__PURE__ */ jsxs3(CardContent, { className: "p-0 flex flex-col", children: [
|
|
1095
|
+
/* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-0.5 sm:py-1 mb-2 sm:mb-3", children: [
|
|
1096
|
+
/* @__PURE__ */ jsx5("div", { className: "text-center", children: /* @__PURE__ */ jsxs3("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
|
|
1097
|
+
etaData.etaMins,
|
|
1098
|
+
/* @__PURE__ */ jsxs3("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
|
|
1099
|
+
" ",
|
|
1100
|
+
"min"
|
|
1101
|
+
] })
|
|
1102
|
+
] }) }),
|
|
1103
|
+
/* @__PURE__ */ jsx5("div", { className: "text-center", children: /* @__PURE__ */ jsxs3("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
|
|
1104
|
+
etaData.distanceRemainingKm.toFixed(1),
|
|
1105
|
+
/* @__PURE__ */ jsxs3("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
|
|
1106
|
+
" ",
|
|
1107
|
+
"km"
|
|
1108
|
+
] })
|
|
1109
|
+
] }) })
|
|
865
1110
|
] }),
|
|
866
|
-
/* @__PURE__ */
|
|
867
|
-
"div",
|
|
1111
|
+
etaData.progress !== void 0 && /* @__PURE__ */ jsxs3("div", { children: [
|
|
1112
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex justify-between text-[8px] sm:text-[9px] font-bold text-zinc-400 mb-1", children: [
|
|
1113
|
+
/* @__PURE__ */ jsx5("span", { children: "Progress" }),
|
|
1114
|
+
/* @__PURE__ */ jsxs3("span", { children: [
|
|
1115
|
+
Math.round(etaData.progress),
|
|
1116
|
+
"%"
|
|
1117
|
+
] })
|
|
1118
|
+
] }),
|
|
1119
|
+
/* @__PURE__ */ jsx5("div", { className: "h-1 sm:h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx5(
|
|
1120
|
+
"div",
|
|
1121
|
+
{
|
|
1122
|
+
className: "h-full bg-cyan-400 rounded-full",
|
|
1123
|
+
style: { width: `${etaData.progress}%` }
|
|
1124
|
+
}
|
|
1125
|
+
) })
|
|
1126
|
+
] }),
|
|
1127
|
+
etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ jsx5(
|
|
1128
|
+
Button,
|
|
868
1129
|
{
|
|
869
|
-
className: "
|
|
870
|
-
|
|
1130
|
+
className: "mt-2.5 sm:mt-3 py-1.5 sm:py-2 text-[11px] sm:text-xs font-bold bg-cyan-500 text-black hover:bg-cyan-400 hover:text-black active:scale-95 rounded-lg transition-all cursor-pointer h-auto",
|
|
1131
|
+
onClick: etaData.onStart,
|
|
1132
|
+
variant: "ghost",
|
|
1133
|
+
children: "Start Guidance"
|
|
871
1134
|
}
|
|
872
|
-
)
|
|
873
|
-
] })
|
|
874
|
-
etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ jsx2(
|
|
875
|
-
"button",
|
|
876
|
-
{
|
|
877
|
-
className: "mt-2.5 sm:mt-3 py-1.5 sm:py-2 text-[11px] sm:text-xs font-bold bg-cyan-500 text-black hover:bg-cyan-400 active:scale-95 rounded-lg transition-all cursor-pointer",
|
|
878
|
-
onClick: etaData.onStart,
|
|
879
|
-
children: "Start Guidance"
|
|
880
|
-
}
|
|
881
|
-
)
|
|
1135
|
+
)
|
|
1136
|
+
] })
|
|
882
1137
|
]
|
|
883
1138
|
}
|
|
884
1139
|
);
|
|
885
1140
|
};
|
|
886
1141
|
|
|
887
1142
|
// src/components/Map/components/MapRightControls.tsx
|
|
888
|
-
import { jsx as
|
|
1143
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
889
1144
|
var MapRightControls = ({
|
|
890
1145
|
customControls = [],
|
|
891
1146
|
etaBarHeight,
|
|
@@ -917,7 +1172,7 @@ var MapRightControls = ({
|
|
|
917
1172
|
const peekStyle = typeof drawerPeekHeight === "number" ? `${drawerPeekHeight}px` : drawerPeekHeight || "15%";
|
|
918
1173
|
const controlsBottom = side === "bottom" ? drawerState === "closed" ? `calc(${closedHeightOffset} + 1rem + ${activeEtaHeight}px - var(--drag-offset, 0px))` : `calc(${peekStyle} + 1rem + ${etaData ? etaBarHeight : 0}px - var(--drag-offset, 0px))` : `calc(1rem + ${insets.bottom}px)`;
|
|
919
1174
|
const isControlsVisible = side !== "bottom" || drawerState !== "full";
|
|
920
|
-
return /* @__PURE__ */
|
|
1175
|
+
return /* @__PURE__ */ jsxs4(
|
|
921
1176
|
"div",
|
|
922
1177
|
{
|
|
923
1178
|
className: `absolute right-4 z-30 flex flex-col items-center gap-3 select-none pointer-events-none ${isDragging ? "transition-none" : "transition-all duration-300 ease-out"} ${isControlsVisible ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-75 pointer-events-none"}`,
|
|
@@ -925,27 +1180,29 @@ var MapRightControls = ({
|
|
|
925
1180
|
bottom: controlsBottom
|
|
926
1181
|
},
|
|
927
1182
|
children: [
|
|
928
|
-
aboveControls.length > 0 && /* @__PURE__ */
|
|
929
|
-
control.tooltip && /* @__PURE__ */
|
|
930
|
-
/* @__PURE__ */
|
|
931
|
-
|
|
1183
|
+
aboveControls.length > 0 && /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-2 pointer-events-auto", children: aboveControls.map((control) => /* @__PURE__ */ jsxs4("div", { className: "relative group flex items-center", children: [
|
|
1184
|
+
control.tooltip && /* @__PURE__ */ jsx6("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
|
|
1185
|
+
/* @__PURE__ */ jsx6(
|
|
1186
|
+
Button,
|
|
932
1187
|
{
|
|
933
|
-
className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : "
|
|
1188
|
+
className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer p-0! hover:bg-zinc-900 hover:text-white ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : ""}`,
|
|
934
1189
|
onClick: control.onPress,
|
|
1190
|
+
variant: "ghost",
|
|
935
1191
|
children: control.icon
|
|
936
1192
|
}
|
|
937
1193
|
)
|
|
938
1194
|
] }, control.id)) }),
|
|
939
|
-
isCompassVisible && (customCompassButton ? /* @__PURE__ */
|
|
940
|
-
|
|
1195
|
+
isCompassVisible && (customCompassButton ? /* @__PURE__ */ jsx6("div", { className: "pointer-events-auto", children: customCompassButton }) : /* @__PURE__ */ jsx6("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx6(
|
|
1196
|
+
Button,
|
|
941
1197
|
{
|
|
942
|
-
className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all duration-300 ${isCompassVisible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none h-0 w-0 border-none m-0 p-0 overflow-hidden"}`,
|
|
1198
|
+
className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all duration-300 p-0! hover:bg-zinc-900 hover:text-white ${isCompassVisible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none h-0 w-0 border-none m-0 p-0 overflow-hidden"}`,
|
|
943
1199
|
onClick: () => onResetBearing({ pitch: initialViewState?.pitch ?? 0 }),
|
|
944
1200
|
style: {
|
|
945
1201
|
transform: isCompassVisible ? "scale(1) rotate(0deg)" : "scale(0.7) rotate(0deg)"
|
|
946
1202
|
},
|
|
947
1203
|
title: "Reset bearing to North",
|
|
948
|
-
|
|
1204
|
+
variant: "ghost",
|
|
1205
|
+
children: /* @__PURE__ */ jsxs4(
|
|
949
1206
|
"svg",
|
|
950
1207
|
{
|
|
951
1208
|
className: "w-7 h-7 transition-transform duration-75 ease-out",
|
|
@@ -955,7 +1212,7 @@ var MapRightControls = ({
|
|
|
955
1212
|
},
|
|
956
1213
|
viewBox: "0 0 24 24",
|
|
957
1214
|
children: [
|
|
958
|
-
/* @__PURE__ */
|
|
1215
|
+
/* @__PURE__ */ jsx6(
|
|
959
1216
|
"circle",
|
|
960
1217
|
{
|
|
961
1218
|
cx: "12",
|
|
@@ -966,23 +1223,24 @@ var MapRightControls = ({
|
|
|
966
1223
|
strokeWidth: "1"
|
|
967
1224
|
}
|
|
968
1225
|
),
|
|
969
|
-
/* @__PURE__ */
|
|
970
|
-
/* @__PURE__ */
|
|
971
|
-
/* @__PURE__ */
|
|
1226
|
+
/* @__PURE__ */ jsx6("path", { d: "M12 4.5L15 12H9L12 4.5Z", fill: "#ef4444" }),
|
|
1227
|
+
/* @__PURE__ */ jsx6("path", { d: "M12 19.5L9 12H15L12 19.5Z", fill: "#f4f4f5" }),
|
|
1228
|
+
/* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", fill: "#18181b", r: "1.5" })
|
|
972
1229
|
]
|
|
973
1230
|
}
|
|
974
1231
|
)
|
|
975
1232
|
}
|
|
976
1233
|
) })),
|
|
977
|
-
customRecenterButton ? /* @__PURE__ */
|
|
978
|
-
|
|
1234
|
+
customRecenterButton ? /* @__PURE__ */ jsx6("div", { className: "pointer-events-auto", children: customRecenterButton }) : /* @__PURE__ */ jsx6("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx6(
|
|
1235
|
+
Button,
|
|
979
1236
|
{
|
|
980
|
-
className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer ${isMapCentered ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : "
|
|
1237
|
+
className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer p-0! hover:bg-zinc-900 hover:text-white ${isMapCentered ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : ""}`,
|
|
981
1238
|
onClick: () => onRecenter(),
|
|
982
1239
|
title: "Recenter Map",
|
|
1240
|
+
variant: "ghost",
|
|
983
1241
|
children: isMapCentered ? (
|
|
984
1242
|
/* Filled active lock state */
|
|
985
|
-
/* @__PURE__ */
|
|
1243
|
+
/* @__PURE__ */ jsxs4(
|
|
986
1244
|
"svg",
|
|
987
1245
|
{
|
|
988
1246
|
className: "w-6 h-6 text-cyan-400",
|
|
@@ -991,18 +1249,18 @@ var MapRightControls = ({
|
|
|
991
1249
|
strokeWidth: "2.2",
|
|
992
1250
|
viewBox: "0 0 24 24",
|
|
993
1251
|
children: [
|
|
994
|
-
/* @__PURE__ */
|
|
995
|
-
/* @__PURE__ */
|
|
996
|
-
/* @__PURE__ */
|
|
997
|
-
/* @__PURE__ */
|
|
998
|
-
/* @__PURE__ */
|
|
999
|
-
/* @__PURE__ */
|
|
1252
|
+
/* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "8" }),
|
|
1253
|
+
/* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", fill: "currentColor", r: "3" }),
|
|
1254
|
+
/* @__PURE__ */ jsx6("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
|
|
1255
|
+
/* @__PURE__ */ jsx6("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
|
|
1256
|
+
/* @__PURE__ */ jsx6("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
|
|
1257
|
+
/* @__PURE__ */ jsx6("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
|
|
1000
1258
|
]
|
|
1001
1259
|
}
|
|
1002
1260
|
)
|
|
1003
1261
|
) : (
|
|
1004
1262
|
/* Outlined drifted state */
|
|
1005
|
-
/* @__PURE__ */
|
|
1263
|
+
/* @__PURE__ */ jsxs4(
|
|
1006
1264
|
"svg",
|
|
1007
1265
|
{
|
|
1008
1266
|
className: "w-6 h-6 text-zinc-300",
|
|
@@ -1011,24 +1269,25 @@ var MapRightControls = ({
|
|
|
1011
1269
|
strokeWidth: "2",
|
|
1012
1270
|
viewBox: "0 0 24 24",
|
|
1013
1271
|
children: [
|
|
1014
|
-
/* @__PURE__ */
|
|
1015
|
-
/* @__PURE__ */
|
|
1016
|
-
/* @__PURE__ */
|
|
1017
|
-
/* @__PURE__ */
|
|
1018
|
-
/* @__PURE__ */
|
|
1272
|
+
/* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "8" }),
|
|
1273
|
+
/* @__PURE__ */ jsx6("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
|
|
1274
|
+
/* @__PURE__ */ jsx6("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
|
|
1275
|
+
/* @__PURE__ */ jsx6("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
|
|
1276
|
+
/* @__PURE__ */ jsx6("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
|
|
1019
1277
|
]
|
|
1020
1278
|
}
|
|
1021
1279
|
)
|
|
1022
1280
|
)
|
|
1023
1281
|
}
|
|
1024
1282
|
) }),
|
|
1025
|
-
belowControls.length > 0 && /* @__PURE__ */
|
|
1026
|
-
control.tooltip && /* @__PURE__ */
|
|
1027
|
-
/* @__PURE__ */
|
|
1028
|
-
|
|
1283
|
+
belowControls.length > 0 && /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-2 pointer-events-auto", children: belowControls.map((control) => /* @__PURE__ */ jsxs4("div", { className: "relative group flex items-center", children: [
|
|
1284
|
+
control.tooltip && /* @__PURE__ */ jsx6("div", { className: "absolute right-14 pointer-events-none opacity-0 scale-95 origin-right group-hover:opacity-100 group-hover:scale-100 transition-all duration-150 bg-zinc-900/95 border border-white/10 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap", children: control.tooltip }),
|
|
1285
|
+
/* @__PURE__ */ jsx6(
|
|
1286
|
+
Button,
|
|
1029
1287
|
{
|
|
1030
|
-
className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : "
|
|
1288
|
+
className: `w-12 h-12 rounded-full bg-zinc-950/80 backdrop-blur-md border border-white/10 shadow-lg flex items-center justify-center text-white active:scale-95 transition-all cursor-pointer p-0! hover:bg-zinc-900 hover:text-white ${control.activeState ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : ""}`,
|
|
1031
1289
|
onClick: control.onPress,
|
|
1290
|
+
variant: "ghost",
|
|
1032
1291
|
children: control.icon
|
|
1033
1292
|
}
|
|
1034
1293
|
)
|
|
@@ -1047,7 +1306,7 @@ import {
|
|
|
1047
1306
|
useRef as useRef2,
|
|
1048
1307
|
useState as useState2
|
|
1049
1308
|
} from "react";
|
|
1050
|
-
import { jsx as
|
|
1309
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
1051
1310
|
var MapControlsContext = createContext(
|
|
1052
1311
|
null
|
|
1053
1312
|
);
|
|
@@ -1158,7 +1417,7 @@ var SDKMapProvider = ({
|
|
|
1158
1417
|
setInsets
|
|
1159
1418
|
]
|
|
1160
1419
|
);
|
|
1161
|
-
return /* @__PURE__ */
|
|
1420
|
+
return /* @__PURE__ */ jsx7(MapControlsContext.Provider, { value: contextValue, children });
|
|
1162
1421
|
};
|
|
1163
1422
|
var useMapControls = () => {
|
|
1164
1423
|
const context = useContext(MapControlsContext);
|
|
@@ -1170,7 +1429,7 @@ var useMapControls = () => {
|
|
|
1170
1429
|
|
|
1171
1430
|
// src/components/Map/components/MapControls.tsx
|
|
1172
1431
|
import { useCallback as useCallback2, useContext as useContext2, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
|
|
1173
|
-
import { Fragment as Fragment2, jsx as
|
|
1432
|
+
import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1174
1433
|
var resolveHeightToPixels2 = (height, containerHeight) => {
|
|
1175
1434
|
if (typeof height === "number") {
|
|
1176
1435
|
return height;
|
|
@@ -1345,9 +1604,9 @@ var MapControls = ({
|
|
|
1345
1604
|
etaOpacity = drawerState === "full" ? 0 : 1;
|
|
1346
1605
|
etaBottomStyle = `calc(1rem + ${bottomInset}px)`;
|
|
1347
1606
|
}
|
|
1348
|
-
return /* @__PURE__ */
|
|
1349
|
-
/* @__PURE__ */
|
|
1350
|
-
/* @__PURE__ */
|
|
1607
|
+
return /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
1608
|
+
/* @__PURE__ */ jsx8("div", { ref: containerRef, style: { display: "none" } }),
|
|
1609
|
+
/* @__PURE__ */ jsx8(
|
|
1351
1610
|
MapDrawer,
|
|
1352
1611
|
{
|
|
1353
1612
|
clampedDragOffset,
|
|
@@ -1373,7 +1632,7 @@ var MapControls = ({
|
|
|
1373
1632
|
touchStartY
|
|
1374
1633
|
}
|
|
1375
1634
|
),
|
|
1376
|
-
/* @__PURE__ */
|
|
1635
|
+
/* @__PURE__ */ jsx8(
|
|
1377
1636
|
MapRightControls,
|
|
1378
1637
|
{
|
|
1379
1638
|
clampedDragOffset,
|
|
@@ -1395,7 +1654,7 @@ var MapControls = ({
|
|
|
1395
1654
|
side
|
|
1396
1655
|
}
|
|
1397
1656
|
),
|
|
1398
|
-
resolvedEtaData && /* @__PURE__ */
|
|
1657
|
+
resolvedEtaData && /* @__PURE__ */ jsx8(
|
|
1399
1658
|
MapEtaPanel,
|
|
1400
1659
|
{
|
|
1401
1660
|
etaData: resolvedEtaData,
|
|
@@ -1414,9 +1673,9 @@ var MapControls = ({
|
|
|
1414
1673
|
|
|
1415
1674
|
// src/components/Map/components/MapMenu.tsx
|
|
1416
1675
|
import { useContext as useContext3 } from "react";
|
|
1417
|
-
import { jsx as
|
|
1676
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1418
1677
|
var MapMenu = ({ children }) => {
|
|
1419
|
-
return /* @__PURE__ */
|
|
1678
|
+
return /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1.5", children });
|
|
1420
1679
|
};
|
|
1421
1680
|
var MapMenuItem = ({
|
|
1422
1681
|
id,
|
|
@@ -1435,7 +1694,7 @@ var MapMenuItem = ({
|
|
|
1435
1694
|
context.setDrawerState("closed");
|
|
1436
1695
|
}
|
|
1437
1696
|
};
|
|
1438
|
-
return /* @__PURE__ */
|
|
1697
|
+
return /* @__PURE__ */ jsxs6(
|
|
1439
1698
|
"button",
|
|
1440
1699
|
{
|
|
1441
1700
|
className: `flex items-center gap-3 w-full py-3 px-3.5 rounded-xl text-left cursor-pointer transition-all duration-150 ${disabled ? "opacity-45 cursor-not-allowed pointer-events-none" : "hover:bg-white/5 active:bg-white/10 text-white"}`,
|
|
@@ -1443,12 +1702,12 @@ var MapMenuItem = ({
|
|
|
1443
1702
|
onClick: handleClick,
|
|
1444
1703
|
type: "button",
|
|
1445
1704
|
children: [
|
|
1446
|
-
icon && /* @__PURE__ */
|
|
1705
|
+
icon && /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
|
|
1447
1706
|
icon,
|
|
1448
|
-
badge !== void 0 && /* @__PURE__ */
|
|
1707
|
+
badge !== void 0 && /* @__PURE__ */ jsx9("span", { className: "absolute -top-1 -right-1 bg-cyan-500 text-black text-[9px] font-extrabold min-w-[15px] h-3.5 rounded-full flex items-center justify-center px-1 border border-zinc-950 shadow", children: badge })
|
|
1449
1708
|
] }),
|
|
1450
|
-
/* @__PURE__ */
|
|
1451
|
-
/* @__PURE__ */
|
|
1709
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex-1 flex flex-col justify-center", children: [
|
|
1710
|
+
/* @__PURE__ */ jsx9("span", { className: "text-sm font-medium tracking-wide flex-1", children: label }),
|
|
1452
1711
|
children
|
|
1453
1712
|
] })
|
|
1454
1713
|
]
|
|
@@ -1462,7 +1721,7 @@ var MapMenuTitle = ({
|
|
|
1462
1721
|
showDivider = true,
|
|
1463
1722
|
className = ""
|
|
1464
1723
|
}) => {
|
|
1465
|
-
return /* @__PURE__ */
|
|
1724
|
+
return /* @__PURE__ */ jsx9(
|
|
1466
1725
|
"div",
|
|
1467
1726
|
{
|
|
1468
1727
|
className: `flex items-center justify-between pb-3 first:mt-0 px-3.5 ${className} ${showDivider ? "border-b border-white/10 mb-2 mt-4" : ""}`,
|
|
@@ -1474,14 +1733,14 @@ MapMenuTitle.displayName = "MapMenuTitle";
|
|
|
1474
1733
|
var MapMenuDivider = ({
|
|
1475
1734
|
className = ""
|
|
1476
1735
|
}) => {
|
|
1477
|
-
return /* @__PURE__ */
|
|
1736
|
+
return /* @__PURE__ */ jsx9("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
|
|
1478
1737
|
};
|
|
1479
1738
|
MapMenuDivider.displayName = "MapMenuDivider";
|
|
1480
1739
|
var MapMenuFooter = ({
|
|
1481
1740
|
children,
|
|
1482
1741
|
className = ""
|
|
1483
1742
|
}) => {
|
|
1484
|
-
return /* @__PURE__ */
|
|
1743
|
+
return /* @__PURE__ */ jsx9(
|
|
1485
1744
|
"div",
|
|
1486
1745
|
{
|
|
1487
1746
|
className: `mt-auto pt-4 border-t border-white/10 px-3.5 text-xs text-zinc-500 font-medium ${className}`,
|
|
@@ -1639,7 +1898,8 @@ var useLiveRouting = ({
|
|
|
1639
1898
|
const [error, setError] = useState5(null);
|
|
1640
1899
|
const [mode, setMode] = useState5(initialMode);
|
|
1641
1900
|
const userLocationState = useUserLocation();
|
|
1642
|
-
const
|
|
1901
|
+
const calculationOrigin = manualOrigin || userLocationState.coords;
|
|
1902
|
+
const trackingLocation = userLocationState.coords || manualOrigin;
|
|
1643
1903
|
const lastCalcOrigin = useRef5(null);
|
|
1644
1904
|
const lastCalcDest = useRef5(null);
|
|
1645
1905
|
const isRequestInProgress = useRef5(false);
|
|
@@ -1657,9 +1917,32 @@ var useLiveRouting = ({
|
|
|
1657
1917
|
[]
|
|
1658
1918
|
);
|
|
1659
1919
|
const currentDistanceMeters = useMemo2(() => {
|
|
1660
|
-
if (!
|
|
1661
|
-
|
|
1662
|
-
|
|
1920
|
+
if (!trackingLocation || !route || route.geometry.coordinates.length < 2) {
|
|
1921
|
+
if (trackingLocation && destination) {
|
|
1922
|
+
return getDistance(trackingLocation, destination);
|
|
1923
|
+
}
|
|
1924
|
+
return null;
|
|
1925
|
+
}
|
|
1926
|
+
const coords = route.geometry.coordinates;
|
|
1927
|
+
let minDistSq = Infinity;
|
|
1928
|
+
let closestIndex = 0;
|
|
1929
|
+
const getDistSq = (p1, p2) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2;
|
|
1930
|
+
for (let i = 0; i < coords.length; i++) {
|
|
1931
|
+
const d = getDistSq(trackingLocation, coords[i]);
|
|
1932
|
+
if (d < minDistSq) {
|
|
1933
|
+
minDistSq = d;
|
|
1934
|
+
closestIndex = i;
|
|
1935
|
+
}
|
|
1936
|
+
}
|
|
1937
|
+
const remainingCoords = coords.slice(closestIndex + 1);
|
|
1938
|
+
let dist = 0;
|
|
1939
|
+
let prev = trackingLocation;
|
|
1940
|
+
for (const coord of remainingCoords) {
|
|
1941
|
+
dist += getDistance(prev, coord);
|
|
1942
|
+
prev = coord;
|
|
1943
|
+
}
|
|
1944
|
+
return dist;
|
|
1945
|
+
}, [trackingLocation, route, destination, getDistance]);
|
|
1663
1946
|
const calculate = useCallback4(
|
|
1664
1947
|
async (origin, dest, isNewDest) => {
|
|
1665
1948
|
if (isRequestInProgress.current) return;
|
|
@@ -1674,7 +1957,15 @@ var useLiveRouting = ({
|
|
|
1674
1957
|
setRoute(data);
|
|
1675
1958
|
setError(null);
|
|
1676
1959
|
if (isNewDest) {
|
|
1677
|
-
|
|
1960
|
+
const coords = data.geometry.coordinates;
|
|
1961
|
+
let sum = 0;
|
|
1962
|
+
for (let i = 0; i < coords.length - 1; i++) {
|
|
1963
|
+
sum += getDistance(
|
|
1964
|
+
coords[i],
|
|
1965
|
+
coords[i + 1]
|
|
1966
|
+
);
|
|
1967
|
+
}
|
|
1968
|
+
setTotalDistance(sum);
|
|
1678
1969
|
}
|
|
1679
1970
|
lastCalcOrigin.current = origin;
|
|
1680
1971
|
lastCalcDest.current = dest;
|
|
@@ -1685,10 +1976,10 @@ var useLiveRouting = ({
|
|
|
1685
1976
|
isRequestInProgress.current = false;
|
|
1686
1977
|
}
|
|
1687
1978
|
},
|
|
1688
|
-
[profile]
|
|
1979
|
+
[profile, getDistance]
|
|
1689
1980
|
);
|
|
1690
1981
|
useEffect4(() => {
|
|
1691
|
-
if (!enabled || !destination || !
|
|
1982
|
+
if (!enabled || !destination || !calculationOrigin) {
|
|
1692
1983
|
if (!enabled || !destination) {
|
|
1693
1984
|
setRoute(null);
|
|
1694
1985
|
setTotalDistance(null);
|
|
@@ -1699,17 +1990,19 @@ var useLiveRouting = ({
|
|
|
1699
1990
|
}
|
|
1700
1991
|
const destChanged = !lastCalcDest.current || lastCalcDest.current[0] !== destination[0] || lastCalcDest.current[1] !== destination[1];
|
|
1701
1992
|
if (destChanged) {
|
|
1702
|
-
calculate(
|
|
1993
|
+
calculate(calculationOrigin, destination, true);
|
|
1703
1994
|
} else if (lastCalcOrigin.current) {
|
|
1704
|
-
const
|
|
1995
|
+
const livePos = trackingLocation || calculationOrigin;
|
|
1996
|
+
const dist = getDistance(livePos, lastCalcOrigin.current);
|
|
1705
1997
|
if (dist > recalculateThreshold) {
|
|
1706
|
-
calculate(
|
|
1998
|
+
calculate(livePos, destination, false);
|
|
1707
1999
|
}
|
|
1708
2000
|
} else {
|
|
1709
|
-
calculate(
|
|
2001
|
+
calculate(calculationOrigin, destination, true);
|
|
1710
2002
|
}
|
|
1711
2003
|
}, [
|
|
1712
|
-
|
|
2004
|
+
calculationOrigin,
|
|
2005
|
+
trackingLocation,
|
|
1713
2006
|
destination,
|
|
1714
2007
|
enabled,
|
|
1715
2008
|
recalculateThreshold,
|
|
@@ -1721,7 +2014,7 @@ var useLiveRouting = ({
|
|
|
1721
2014
|
error,
|
|
1722
2015
|
isCalculating,
|
|
1723
2016
|
mode,
|
|
1724
|
-
recalculate: () =>
|
|
2017
|
+
recalculate: () => calculationOrigin && destination && calculate(calculationOrigin, destination, false),
|
|
1725
2018
|
route,
|
|
1726
2019
|
start: () => setMode("navigation"),
|
|
1727
2020
|
totalDistance
|
|
@@ -1785,7 +2078,7 @@ var useTrimmedRoute = (route, userLocation) => {
|
|
|
1785
2078
|
|
|
1786
2079
|
// src/components/Map/layers/RouteLayer.tsx
|
|
1787
2080
|
import { Layer, Source } from "@vis.gl/react-maplibre";
|
|
1788
|
-
import { jsx as
|
|
2081
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1789
2082
|
var RouteLayer = ({
|
|
1790
2083
|
geometry,
|
|
1791
2084
|
color = "#3b82f6",
|
|
@@ -1798,8 +2091,8 @@ var RouteLayer = ({
|
|
|
1798
2091
|
properties: {},
|
|
1799
2092
|
type: "Feature"
|
|
1800
2093
|
};
|
|
1801
|
-
return /* @__PURE__ */
|
|
1802
|
-
/* @__PURE__ */
|
|
2094
|
+
return /* @__PURE__ */ jsxs7(Source, { data, id: "sdk-route-source", type: "geojson", children: [
|
|
2095
|
+
/* @__PURE__ */ jsx10(
|
|
1803
2096
|
Layer,
|
|
1804
2097
|
{
|
|
1805
2098
|
id: "sdk-route-layer-casing",
|
|
@@ -1812,7 +2105,7 @@ var RouteLayer = ({
|
|
|
1812
2105
|
type: "line"
|
|
1813
2106
|
}
|
|
1814
2107
|
),
|
|
1815
|
-
/* @__PURE__ */
|
|
2108
|
+
/* @__PURE__ */ jsx10(
|
|
1816
2109
|
Layer,
|
|
1817
2110
|
{
|
|
1818
2111
|
id: "sdk-route-layer",
|
|
@@ -1833,7 +2126,7 @@ var RouteLayer = ({
|
|
|
1833
2126
|
|
|
1834
2127
|
// src/components/Map/Map.tsx
|
|
1835
2128
|
import { Map as MapLibre, MapProvider } from "@vis.gl/react-maplibre";
|
|
1836
|
-
import
|
|
2129
|
+
import React4, {
|
|
1837
2130
|
useCallback as useCallback5,
|
|
1838
2131
|
useContext as useContext4,
|
|
1839
2132
|
useEffect as useEffect6,
|
|
@@ -1846,7 +2139,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
|
|
|
1846
2139
|
// src/components/Map/layers/POILayers.tsx
|
|
1847
2140
|
import { Layer as Layer2, Source as Source2, useMap } from "@vis.gl/react-maplibre";
|
|
1848
2141
|
import { useEffect as useEffect5, useMemo as useMemo4, useState as useState6 } from "react";
|
|
1849
|
-
import { jsx as
|
|
2142
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
1850
2143
|
function createEmojiIcon(emoji, size = 64) {
|
|
1851
2144
|
const canvas = document.createElement("canvas");
|
|
1852
2145
|
canvas.width = size;
|
|
@@ -1923,7 +2216,7 @@ var POILayers = ({ pois }) => {
|
|
|
1923
2216
|
}),
|
|
1924
2217
|
[glPois]
|
|
1925
2218
|
);
|
|
1926
|
-
return /* @__PURE__ */
|
|
2219
|
+
return /* @__PURE__ */ jsx11(Source2, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ jsx11(
|
|
1927
2220
|
Layer2,
|
|
1928
2221
|
{
|
|
1929
2222
|
id: "sdk-poi-layer",
|
|
@@ -1960,11 +2253,11 @@ var POILayers = ({ pois }) => {
|
|
|
1960
2253
|
|
|
1961
2254
|
// src/components/Map/layers/POIMarkers.tsx
|
|
1962
2255
|
import { Marker } from "@vis.gl/react-maplibre";
|
|
1963
|
-
import { Fragment as Fragment3, jsx as
|
|
2256
|
+
import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1964
2257
|
var POIMarkers = ({ pois, onClick }) => {
|
|
1965
2258
|
const markerPois = pois.filter((p) => p.displayMode === "marker");
|
|
1966
2259
|
if (markerPois.length === 0) return null;
|
|
1967
|
-
return /* @__PURE__ */
|
|
2260
|
+
return /* @__PURE__ */ jsx12(Fragment3, { children: markerPois.map((poi) => /* @__PURE__ */ jsx12(
|
|
1968
2261
|
Marker,
|
|
1969
2262
|
{
|
|
1970
2263
|
anchor: "bottom",
|
|
@@ -1974,7 +2267,7 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
1974
2267
|
e.originalEvent.stopPropagation();
|
|
1975
2268
|
if (onClick) onClick(poi);
|
|
1976
2269
|
},
|
|
1977
|
-
children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */
|
|
2270
|
+
children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ jsxs8(
|
|
1978
2271
|
"div",
|
|
1979
2272
|
{
|
|
1980
2273
|
style: {
|
|
@@ -1983,7 +2276,7 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
1983
2276
|
transform: "transition-transform duration-200 hover:scale-110"
|
|
1984
2277
|
},
|
|
1985
2278
|
children: [
|
|
1986
|
-
/* @__PURE__ */
|
|
2279
|
+
/* @__PURE__ */ jsx12(
|
|
1987
2280
|
"div",
|
|
1988
2281
|
{
|
|
1989
2282
|
style: {
|
|
@@ -1996,7 +2289,7 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
1996
2289
|
justifyContent: "center",
|
|
1997
2290
|
width: "32px"
|
|
1998
2291
|
},
|
|
1999
|
-
children: poi.emoji ? /* @__PURE__ */
|
|
2292
|
+
children: poi.emoji ? /* @__PURE__ */ jsx12("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ jsx12(
|
|
2000
2293
|
"div",
|
|
2001
2294
|
{
|
|
2002
2295
|
style: {
|
|
@@ -2009,7 +2302,7 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
2009
2302
|
)
|
|
2010
2303
|
}
|
|
2011
2304
|
),
|
|
2012
|
-
/* @__PURE__ */
|
|
2305
|
+
/* @__PURE__ */ jsx12(
|
|
2013
2306
|
"div",
|
|
2014
2307
|
{
|
|
2015
2308
|
style: {
|
|
@@ -2032,19 +2325,19 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
2032
2325
|
|
|
2033
2326
|
// src/components/Map/layers/UserLocationLayer.tsx
|
|
2034
2327
|
import { Marker as Marker2 } from "@vis.gl/react-maplibre";
|
|
2035
|
-
import { jsx as
|
|
2328
|
+
import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
2036
2329
|
var UserLocationLayer = ({
|
|
2037
2330
|
forcedLocation,
|
|
2038
2331
|
heading
|
|
2039
2332
|
}) => {
|
|
2040
2333
|
if (!forcedLocation) return null;
|
|
2041
|
-
return /* @__PURE__ */
|
|
2334
|
+
return /* @__PURE__ */ jsx13(
|
|
2042
2335
|
Marker2,
|
|
2043
2336
|
{
|
|
2044
2337
|
anchor: "center",
|
|
2045
2338
|
latitude: forcedLocation[1],
|
|
2046
2339
|
longitude: forcedLocation[0],
|
|
2047
|
-
children: /* @__PURE__ */
|
|
2340
|
+
children: /* @__PURE__ */ jsxs9(
|
|
2048
2341
|
"div",
|
|
2049
2342
|
{
|
|
2050
2343
|
style: {
|
|
@@ -2054,7 +2347,7 @@ var UserLocationLayer = ({
|
|
|
2054
2347
|
position: "relative"
|
|
2055
2348
|
},
|
|
2056
2349
|
children: [
|
|
2057
|
-
/* @__PURE__ */
|
|
2350
|
+
/* @__PURE__ */ jsx13(
|
|
2058
2351
|
"div",
|
|
2059
2352
|
{
|
|
2060
2353
|
style: {
|
|
@@ -2067,7 +2360,7 @@ var UserLocationLayer = ({
|
|
|
2067
2360
|
}
|
|
2068
2361
|
}
|
|
2069
2362
|
),
|
|
2070
|
-
heading !== void 0 && heading !== null && /* @__PURE__ */
|
|
2363
|
+
heading !== void 0 && heading !== null && /* @__PURE__ */ jsx13(
|
|
2071
2364
|
"div",
|
|
2072
2365
|
{
|
|
2073
2366
|
style: {
|
|
@@ -2077,13 +2370,13 @@ var UserLocationLayer = ({
|
|
|
2077
2370
|
width: "60px",
|
|
2078
2371
|
zIndex: 0
|
|
2079
2372
|
},
|
|
2080
|
-
children: /* @__PURE__ */
|
|
2373
|
+
children: /* @__PURE__ */ jsxs9(
|
|
2081
2374
|
"svg",
|
|
2082
2375
|
{
|
|
2083
2376
|
style: { height: "100%", width: "100%" },
|
|
2084
2377
|
viewBox: "0 0 100 100",
|
|
2085
2378
|
children: [
|
|
2086
|
-
/* @__PURE__ */
|
|
2379
|
+
/* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs9(
|
|
2087
2380
|
"radialGradient",
|
|
2088
2381
|
{
|
|
2089
2382
|
cx: "50%",
|
|
@@ -2093,7 +2386,7 @@ var UserLocationLayer = ({
|
|
|
2093
2386
|
id: "grad1",
|
|
2094
2387
|
r: "50%",
|
|
2095
2388
|
children: [
|
|
2096
|
-
/* @__PURE__ */
|
|
2389
|
+
/* @__PURE__ */ jsx13(
|
|
2097
2390
|
"stop",
|
|
2098
2391
|
{
|
|
2099
2392
|
offset: "0%",
|
|
@@ -2103,7 +2396,7 @@ var UserLocationLayer = ({
|
|
|
2103
2396
|
}
|
|
2104
2397
|
}
|
|
2105
2398
|
),
|
|
2106
|
-
/* @__PURE__ */
|
|
2399
|
+
/* @__PURE__ */ jsx13(
|
|
2107
2400
|
"stop",
|
|
2108
2401
|
{
|
|
2109
2402
|
offset: "100%",
|
|
@@ -2116,7 +2409,7 @@ var UserLocationLayer = ({
|
|
|
2116
2409
|
]
|
|
2117
2410
|
}
|
|
2118
2411
|
) }),
|
|
2119
|
-
/* @__PURE__ */
|
|
2412
|
+
/* @__PURE__ */ jsx13(
|
|
2120
2413
|
"path",
|
|
2121
2414
|
{
|
|
2122
2415
|
d: "M 50 50 L 35 0 A 50 50 0 0 1 65 0 Z",
|
|
@@ -2128,7 +2421,7 @@ var UserLocationLayer = ({
|
|
|
2128
2421
|
)
|
|
2129
2422
|
}
|
|
2130
2423
|
),
|
|
2131
|
-
/* @__PURE__ */
|
|
2424
|
+
/* @__PURE__ */ jsx13(
|
|
2132
2425
|
"div",
|
|
2133
2426
|
{
|
|
2134
2427
|
style: {
|
|
@@ -2142,7 +2435,7 @@ var UserLocationLayer = ({
|
|
|
2142
2435
|
width: "20px",
|
|
2143
2436
|
zIndex: 1
|
|
2144
2437
|
},
|
|
2145
|
-
children: /* @__PURE__ */
|
|
2438
|
+
children: /* @__PURE__ */ jsx13(
|
|
2146
2439
|
"div",
|
|
2147
2440
|
{
|
|
2148
2441
|
style: {
|
|
@@ -2156,7 +2449,7 @@ var UserLocationLayer = ({
|
|
|
2156
2449
|
)
|
|
2157
2450
|
}
|
|
2158
2451
|
),
|
|
2159
|
-
/* @__PURE__ */
|
|
2452
|
+
/* @__PURE__ */ jsx13("style", { children: `@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } }` })
|
|
2160
2453
|
]
|
|
2161
2454
|
}
|
|
2162
2455
|
)
|
|
@@ -2165,7 +2458,7 @@ var UserLocationLayer = ({
|
|
|
2165
2458
|
};
|
|
2166
2459
|
|
|
2167
2460
|
// src/components/Map/Map.tsx
|
|
2168
|
-
import { Fragment as Fragment4, jsx as
|
|
2461
|
+
import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
2169
2462
|
var MapInternal = ({
|
|
2170
2463
|
initialViewState = {
|
|
2171
2464
|
latitude: 45.90583599233422,
|
|
@@ -2206,14 +2499,18 @@ var MapInternal = ({
|
|
|
2206
2499
|
const mapRef = useRef6(null);
|
|
2207
2500
|
const userLocationState = useUserLocation();
|
|
2208
2501
|
const [progNav, setProgNav] = useState7(null);
|
|
2502
|
+
const [isAborted, setIsAborted] = useState7(false);
|
|
2209
2503
|
useEffect6(() => {
|
|
2210
2504
|
const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
|
|
2505
|
+
setIsAborted(false);
|
|
2211
2506
|
setProgNav(payload);
|
|
2212
2507
|
});
|
|
2213
2508
|
const unsubStart = sdk.on("SDK_NAVIGATION_START", () => {
|
|
2509
|
+
setIsAborted(false);
|
|
2214
2510
|
setProgNav((prev) => prev ? { ...prev, mode: "navigation" } : null);
|
|
2215
2511
|
});
|
|
2216
2512
|
const unsubAbort = sdk.on("SDK_NAVIGATION_ABORT", () => {
|
|
2513
|
+
setIsAborted(true);
|
|
2217
2514
|
setProgNav(null);
|
|
2218
2515
|
});
|
|
2219
2516
|
return () => {
|
|
@@ -2236,9 +2533,19 @@ var MapInternal = ({
|
|
|
2236
2533
|
onNavigationModeChange(internalNav.mode);
|
|
2237
2534
|
}
|
|
2238
2535
|
}, [internalNav.mode, onNavigationModeChange, navigation]);
|
|
2239
|
-
const
|
|
2240
|
-
const
|
|
2241
|
-
|
|
2536
|
+
const prevDest = useRef6(null);
|
|
2537
|
+
const currentDest = effectiveNavOptions?.destination;
|
|
2538
|
+
useEffect6(() => {
|
|
2539
|
+
if (currentDest) {
|
|
2540
|
+
if (!prevDest.current || prevDest.current[0] !== currentDest[0] || prevDest.current[1] !== currentDest[1]) {
|
|
2541
|
+
setIsAborted(false);
|
|
2542
|
+
}
|
|
2543
|
+
}
|
|
2544
|
+
prevDest.current = currentDest;
|
|
2545
|
+
}, [currentDest]);
|
|
2546
|
+
const navigationData = !isAborted ? effectiveNavOptions ? internalNav : externalNavigationData : void 0;
|
|
2547
|
+
const route = !isAborted ? effectiveNavOptions ? internalNav.route?.geometry : externalRoute : void 0;
|
|
2548
|
+
const showNavigationUI = !isAborted && effectiveNavOptions?.showUI !== false && (effectiveNavOptions ? !!effectiveNavOptions.destination : externalShowNavigationUI);
|
|
2242
2549
|
const mode = navigationData?.mode || "preview";
|
|
2243
2550
|
const resolvedInitialFollow = mapControls ? mapControls.isFollowing : initialFollowUser;
|
|
2244
2551
|
const isFollowingRef = useRef6(resolvedInitialFollow);
|
|
@@ -2287,15 +2594,29 @@ var MapInternal = ({
|
|
|
2287
2594
|
}
|
|
2288
2595
|
}, [initialFollowUser, setFollowMode, userLocationState.coords]);
|
|
2289
2596
|
const lastAutoLockedRouteRef = useRef6(null);
|
|
2597
|
+
const lastModeRef = useRef6(null);
|
|
2290
2598
|
useEffect6(() => {
|
|
2291
2599
|
if (!route || !mapRef.current) {
|
|
2292
2600
|
if (!route) lastAutoLockedRouteRef.current = null;
|
|
2293
2601
|
return;
|
|
2294
2602
|
}
|
|
2295
2603
|
const isNewRoute = route !== lastAutoLockedRouteRef.current;
|
|
2296
|
-
|
|
2604
|
+
const modeChanged = lastModeRef.current !== mode;
|
|
2297
2605
|
if (mode === "navigation") {
|
|
2298
2606
|
setFollowMode(true);
|
|
2607
|
+
if ((modeChanged || isNewRoute) && userLocationState.coords && mapRef.current) {
|
|
2608
|
+
isFlyingRef.current = true;
|
|
2609
|
+
mapRef.current.flyTo({
|
|
2610
|
+
center: userLocationState.coords,
|
|
2611
|
+
duration: 1e3,
|
|
2612
|
+
essential: true,
|
|
2613
|
+
zoom: 17
|
|
2614
|
+
// Zoomed in on user for active guidance
|
|
2615
|
+
});
|
|
2616
|
+
setTimeout(() => {
|
|
2617
|
+
isFlyingRef.current = false;
|
|
2618
|
+
}, 1050);
|
|
2619
|
+
}
|
|
2299
2620
|
} else if (mode === "preview" && isNewRoute) {
|
|
2300
2621
|
setFollowMode(false);
|
|
2301
2622
|
const coords = route.coordinates;
|
|
@@ -2319,7 +2640,8 @@ var MapInternal = ({
|
|
|
2319
2640
|
}
|
|
2320
2641
|
}
|
|
2321
2642
|
lastAutoLockedRouteRef.current = route;
|
|
2322
|
-
|
|
2643
|
+
lastModeRef.current = mode;
|
|
2644
|
+
}, [route, mode, setFollowMode, userLocationState.coords]);
|
|
2323
2645
|
useEffect6(() => {
|
|
2324
2646
|
if (isFollowingRef.current && !isFlyingRef.current && userLocationState.coords && mapRef.current) {
|
|
2325
2647
|
mapRef.current.easeTo({
|
|
@@ -2335,33 +2657,33 @@ var MapInternal = ({
|
|
|
2335
2657
|
route,
|
|
2336
2658
|
showUserLocation ? userLocationState.coords : null
|
|
2337
2659
|
);
|
|
2338
|
-
const
|
|
2339
|
-
const
|
|
2660
|
+
const currentDistMeters = navigationData?.currentDistanceMeters ?? null;
|
|
2661
|
+
const totalDist = navigationData?.totalDistance ?? null;
|
|
2662
|
+
const routeDurationSeconds = navigationData?.route?.durationSeconds ?? null;
|
|
2663
|
+
const remainingMeters = currentDistMeters ?? 0;
|
|
2664
|
+
const etaMins = (() => {
|
|
2665
|
+
if (!routeDurationSeconds || !totalDist || !currentDistMeters) return 0;
|
|
2666
|
+
const ratio = currentDistMeters / totalDist;
|
|
2667
|
+
return Math.ceil(routeDurationSeconds * ratio / 60);
|
|
2668
|
+
})();
|
|
2340
2669
|
const kmRemaining = remainingMeters / 1e3;
|
|
2341
|
-
const
|
|
2342
|
-
const
|
|
2343
|
-
|
|
2344
|
-
if (!navigationData || !route) return void 0;
|
|
2345
|
-
return {
|
|
2346
|
-
distanceRemainingKm: kmRemaining,
|
|
2347
|
-
etaMins,
|
|
2348
|
-
label: mode === "navigation" ? "Walking Guidance Active" : "Route Preview",
|
|
2349
|
-
mode,
|
|
2350
|
-
onAbort: onNavigationAbort || (() => {
|
|
2351
|
-
setProgNav(null);
|
|
2352
|
-
}),
|
|
2353
|
-
onStart: navigationData.start,
|
|
2354
|
-
progress: progressValue
|
|
2355
|
-
};
|
|
2356
|
-
}, [
|
|
2357
|
-
navigationData,
|
|
2358
|
-
route,
|
|
2670
|
+
const progressValue = totalDist && totalDist > 0 ? Math.min(100, Math.max(0, (totalDist - remainingMeters) / totalDist * 100)) : 0;
|
|
2671
|
+
const showEtaData = navigationData && route ? {
|
|
2672
|
+
distanceRemainingKm: kmRemaining,
|
|
2359
2673
|
etaMins,
|
|
2360
|
-
|
|
2674
|
+
label: mode === "navigation" ? "Walking Guidance Active" : "Route Preview",
|
|
2361
2675
|
mode,
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2676
|
+
onAbort: () => {
|
|
2677
|
+
setIsAborted(true);
|
|
2678
|
+
setProgNav(null);
|
|
2679
|
+
sdk.navigation.abort();
|
|
2680
|
+
if (onNavigationAbort) {
|
|
2681
|
+
onNavigationAbort();
|
|
2682
|
+
}
|
|
2683
|
+
},
|
|
2684
|
+
onStart: navigationData.start,
|
|
2685
|
+
progress: progressValue
|
|
2686
|
+
} : void 0;
|
|
2365
2687
|
const setEtaDataCtx = mapControls?.setEtaData;
|
|
2366
2688
|
useEffect6(() => {
|
|
2367
2689
|
if (setEtaDataCtx) {
|
|
@@ -2377,7 +2699,7 @@ var MapInternal = ({
|
|
|
2377
2699
|
const defaultMenuItems = useMemo5(
|
|
2378
2700
|
() => [
|
|
2379
2701
|
{
|
|
2380
|
-
icon: /* @__PURE__ */
|
|
2702
|
+
icon: /* @__PURE__ */ jsx14(
|
|
2381
2703
|
"svg",
|
|
2382
2704
|
{
|
|
2383
2705
|
className: "w-5 h-5",
|
|
@@ -2385,7 +2707,7 @@ var MapInternal = ({
|
|
|
2385
2707
|
stroke: "currentColor",
|
|
2386
2708
|
strokeWidth: "2",
|
|
2387
2709
|
viewBox: "0 0 24 24",
|
|
2388
|
-
children: /* @__PURE__ */
|
|
2710
|
+
children: /* @__PURE__ */ jsx14(
|
|
2389
2711
|
"path",
|
|
2390
2712
|
{
|
|
2391
2713
|
d: "M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4",
|
|
@@ -2407,8 +2729,8 @@ var MapInternal = ({
|
|
|
2407
2729
|
const { mapLibreChildren, menuContentFromChildren } = useMemo5(() => {
|
|
2408
2730
|
const mapLibreChildren2 = [];
|
|
2409
2731
|
const extractedMenuItems = [];
|
|
2410
|
-
|
|
2411
|
-
if (
|
|
2732
|
+
React4.Children.forEach(children, (child) => {
|
|
2733
|
+
if (React4.isValidElement(child)) {
|
|
2412
2734
|
const type = child.type;
|
|
2413
2735
|
const displayName = type?.displayName || type?.name;
|
|
2414
2736
|
const isMenu = type === MapMenu || displayName === "MapMenu";
|
|
@@ -2419,7 +2741,7 @@ var MapInternal = ({
|
|
|
2419
2741
|
"MapMenuFooter"
|
|
2420
2742
|
].includes(displayName);
|
|
2421
2743
|
if (isMenu) {
|
|
2422
|
-
|
|
2744
|
+
React4.Children.forEach(
|
|
2423
2745
|
child.props.children,
|
|
2424
2746
|
(nestedChild) => {
|
|
2425
2747
|
if (nestedChild) {
|
|
@@ -2436,7 +2758,7 @@ var MapInternal = ({
|
|
|
2436
2758
|
mapLibreChildren2.push(child);
|
|
2437
2759
|
}
|
|
2438
2760
|
});
|
|
2439
|
-
const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */
|
|
2761
|
+
const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ jsx14(MapMenu, { children: extractedMenuItems }) : null;
|
|
2440
2762
|
return { mapLibreChildren: mapLibreChildren2, menuContentFromChildren: menuContentFromChildren2 };
|
|
2441
2763
|
}, [children]);
|
|
2442
2764
|
const handleMapClick = (e) => {
|
|
@@ -2510,13 +2832,13 @@ var MapInternal = ({
|
|
|
2510
2832
|
}
|
|
2511
2833
|
}
|
|
2512
2834
|
};
|
|
2513
|
-
return /* @__PURE__ */
|
|
2835
|
+
return /* @__PURE__ */ jsxs10(
|
|
2514
2836
|
"div",
|
|
2515
2837
|
{
|
|
2516
2838
|
className: `w-full h-full overflow-hidden relative ${className}`,
|
|
2517
2839
|
style,
|
|
2518
2840
|
children: [
|
|
2519
|
-
/* @__PURE__ */
|
|
2841
|
+
/* @__PURE__ */ jsxs10(
|
|
2520
2842
|
MapLibre,
|
|
2521
2843
|
{
|
|
2522
2844
|
attributionControl: false,
|
|
@@ -2545,23 +2867,23 @@ var MapInternal = ({
|
|
|
2545
2867
|
showUserLocation && userLocationState.coords && (renderUserLocation ? renderUserLocation({
|
|
2546
2868
|
coords: userLocationState.coords,
|
|
2547
2869
|
heading: userLocationState.heading
|
|
2548
|
-
}) : /* @__PURE__ */
|
|
2870
|
+
}) : /* @__PURE__ */ jsx14(
|
|
2549
2871
|
UserLocationLayer,
|
|
2550
2872
|
{
|
|
2551
2873
|
forcedLocation: userLocationState.coords,
|
|
2552
2874
|
heading: userLocationState.heading
|
|
2553
2875
|
}
|
|
2554
2876
|
)),
|
|
2555
|
-
displayRoute && /* @__PURE__ */
|
|
2556
|
-
pois.length > 0 && /* @__PURE__ */
|
|
2557
|
-
/* @__PURE__ */
|
|
2558
|
-
/* @__PURE__ */
|
|
2877
|
+
displayRoute && /* @__PURE__ */ jsx14(RouteLayer, { geometry: displayRoute }),
|
|
2878
|
+
pois.length > 0 && /* @__PURE__ */ jsxs10(Fragment4, { children: [
|
|
2879
|
+
/* @__PURE__ */ jsx14(POILayers, { pois }),
|
|
2880
|
+
/* @__PURE__ */ jsx14(POIMarkers, { onClick: onPoiClick, pois })
|
|
2559
2881
|
] }),
|
|
2560
2882
|
mapLibreChildren
|
|
2561
2883
|
]
|
|
2562
2884
|
}
|
|
2563
2885
|
),
|
|
2564
|
-
showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */
|
|
2886
|
+
showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ jsx14(
|
|
2565
2887
|
MapControls,
|
|
2566
2888
|
{
|
|
2567
2889
|
drawerContentRef,
|
|
@@ -2583,16 +2905,16 @@ var SDKMapProviderWrapper = ({
|
|
|
2583
2905
|
}) => {
|
|
2584
2906
|
const context = useContext4(MapControlsContext);
|
|
2585
2907
|
if (context) {
|
|
2586
|
-
return /* @__PURE__ */
|
|
2908
|
+
return /* @__PURE__ */ jsx14(Fragment4, { children });
|
|
2587
2909
|
}
|
|
2588
|
-
return /* @__PURE__ */
|
|
2910
|
+
return /* @__PURE__ */ jsx14(SDKMapProvider, { children });
|
|
2589
2911
|
};
|
|
2590
2912
|
var Map2 = (props) => {
|
|
2591
|
-
return /* @__PURE__ */
|
|
2913
|
+
return /* @__PURE__ */ jsx14(SDKMapProviderWrapper, { children: /* @__PURE__ */ jsx14(MapProvider, { children: /* @__PURE__ */ jsx14(MapInternal, { ...props }) }) });
|
|
2592
2914
|
};
|
|
2593
2915
|
|
|
2594
2916
|
// src/components/MapWrapper.tsx
|
|
2595
|
-
import
|
|
2917
|
+
import React5 from "react";
|
|
2596
2918
|
import { createRoot } from "react-dom/client";
|
|
2597
2919
|
function renderMap(containerId, props = {}) {
|
|
2598
2920
|
const container = document.getElementById(containerId);
|
|
@@ -2600,12 +2922,12 @@ function renderMap(containerId, props = {}) {
|
|
|
2600
2922
|
throw new Error(`Container with id "${containerId}" not found.`);
|
|
2601
2923
|
}
|
|
2602
2924
|
const root = createRoot(container);
|
|
2603
|
-
root.render(
|
|
2925
|
+
root.render(React5.createElement(Map2, props));
|
|
2604
2926
|
return root;
|
|
2605
2927
|
}
|
|
2606
2928
|
|
|
2607
2929
|
// package.json
|
|
2608
|
-
var version = "0.2.
|
|
2930
|
+
var version = "0.2.2";
|
|
2609
2931
|
|
|
2610
2932
|
// src/sdk.ts
|
|
2611
2933
|
function deepFreeze(obj) {
|
|
@@ -2938,7 +3260,7 @@ var sdk = deepFreeze(new MiniAppSDK());
|
|
|
2938
3260
|
|
|
2939
3261
|
// src/components/BridgeMocker.tsx
|
|
2940
3262
|
import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7, useState as useState8 } from "react";
|
|
2941
|
-
import { jsx as
|
|
3263
|
+
import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
2942
3264
|
var getBearing = (p1, p2) => {
|
|
2943
3265
|
const lat1 = p1[1] * Math.PI / 180;
|
|
2944
3266
|
const lat2 = p2[1] * Math.PI / 180;
|
|
@@ -3230,16 +3552,17 @@ var BridgeMocker = ({
|
|
|
3230
3552
|
};
|
|
3231
3553
|
}, [appId]);
|
|
3232
3554
|
if (!isReady) return null;
|
|
3233
|
-
return /* @__PURE__ */
|
|
3234
|
-
/* @__PURE__ */
|
|
3235
|
-
isMinimized ? /* @__PURE__ */
|
|
3236
|
-
|
|
3555
|
+
return /* @__PURE__ */ jsxs11("div", { className: "relative w-full h-full", children: [
|
|
3556
|
+
/* @__PURE__ */ jsx15("div", { className: "w-full h-full", children }),
|
|
3557
|
+
isMinimized ? /* @__PURE__ */ jsx15(
|
|
3558
|
+
Button,
|
|
3237
3559
|
{
|
|
3238
|
-
className: "fixed bottom-4 right-4 w-8 h-8 rounded-full bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 flex items-center justify-center text-slate-400 hover:text-blue-400 z-[9999] transition-all shadow-lg group",
|
|
3560
|
+
className: "fixed bottom-4 right-4 w-8 h-8 rounded-full bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 flex items-center justify-center text-slate-400 hover:text-blue-400 hover:bg-slate-900/80 z-[9999] transition-all shadow-lg group p-0!",
|
|
3239
3561
|
onClick: () => setIsMinimized(false),
|
|
3240
3562
|
title: "Open Simulation Controls",
|
|
3241
3563
|
type: "button",
|
|
3242
|
-
|
|
3564
|
+
variant: "ghost",
|
|
3565
|
+
children: /* @__PURE__ */ jsxs11(
|
|
3243
3566
|
"svg",
|
|
3244
3567
|
{
|
|
3245
3568
|
className: "group-hover:scale-110 transition-transform",
|
|
@@ -3253,41 +3576,49 @@ var BridgeMocker = ({
|
|
|
3253
3576
|
width: "14",
|
|
3254
3577
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3255
3578
|
children: [
|
|
3256
|
-
/* @__PURE__ */
|
|
3257
|
-
/* @__PURE__ */
|
|
3258
|
-
/* @__PURE__ */
|
|
3259
|
-
/* @__PURE__ */
|
|
3260
|
-
/* @__PURE__ */
|
|
3261
|
-
/* @__PURE__ */
|
|
3262
|
-
/* @__PURE__ */
|
|
3579
|
+
/* @__PURE__ */ jsx15("path", { d: "M21 4H3" }),
|
|
3580
|
+
/* @__PURE__ */ jsx15("path", { d: "M10 8H3" }),
|
|
3581
|
+
/* @__PURE__ */ jsx15("path", { d: "M21 12H3" }),
|
|
3582
|
+
/* @__PURE__ */ jsx15("path", { d: "M10 16H3" }),
|
|
3583
|
+
/* @__PURE__ */ jsx15("path", { d: "M21 20H3" }),
|
|
3584
|
+
/* @__PURE__ */ jsx15("circle", { cx: "14", cy: "8", r: "2" }),
|
|
3585
|
+
/* @__PURE__ */ jsx15("circle", { cx: "14", cy: "16", r: "2" })
|
|
3263
3586
|
]
|
|
3264
3587
|
}
|
|
3265
3588
|
)
|
|
3266
3589
|
}
|
|
3267
|
-
) : /* @__PURE__ */
|
|
3590
|
+
) : /* @__PURE__ */ jsxs11(
|
|
3268
3591
|
"div",
|
|
3269
3592
|
{
|
|
3270
3593
|
className: "fixed bottom-4 right-4 bg-slate-900 text-slate-300 font-mono text-xs rounded-xl shadow-2xl border border-slate-700 pointer-events-auto flex flex-col w-80 overflow-hidden animate-in slide-in-from-right duration-300",
|
|
3271
3594
|
style: { zIndex: 9998 },
|
|
3272
3595
|
children: [
|
|
3273
|
-
/* @__PURE__ */
|
|
3596
|
+
/* @__PURE__ */ jsxs11(
|
|
3274
3597
|
"div",
|
|
3275
3598
|
{
|
|
3276
3599
|
className: "flex justify-between items-center p-3 border-b border-slate-800 cursor-pointer bg-slate-800/50 hover:bg-slate-800 transition-colors",
|
|
3277
3600
|
onClick: () => setIsMinimized(true),
|
|
3278
3601
|
children: [
|
|
3279
|
-
/* @__PURE__ */
|
|
3280
|
-
/* @__PURE__ */
|
|
3602
|
+
/* @__PURE__ */ jsxs11("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
|
|
3603
|
+
/* @__PURE__ */ jsx15("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
|
|
3281
3604
|
" Simulation Controls"
|
|
3282
3605
|
] }),
|
|
3283
|
-
/* @__PURE__ */
|
|
3606
|
+
/* @__PURE__ */ jsx15(
|
|
3607
|
+
Button,
|
|
3608
|
+
{
|
|
3609
|
+
className: "text-slate-500 hover:text-white p-0 h-auto hover:bg-transparent cursor-pointer",
|
|
3610
|
+
type: "button",
|
|
3611
|
+
variant: "ghost",
|
|
3612
|
+
children: "\u25BC"
|
|
3613
|
+
}
|
|
3614
|
+
)
|
|
3284
3615
|
]
|
|
3285
3616
|
}
|
|
3286
3617
|
),
|
|
3287
|
-
/* @__PURE__ */
|
|
3288
|
-
/* @__PURE__ */
|
|
3289
|
-
/* @__PURE__ */
|
|
3290
|
-
/* @__PURE__ */
|
|
3618
|
+
/* @__PURE__ */ jsxs11("div", { className: "p-4 flex flex-col gap-3", children: [
|
|
3619
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex justify-between items-center", children: [
|
|
3620
|
+
/* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 cursor-pointer", children: [
|
|
3621
|
+
/* @__PURE__ */ jsx15(
|
|
3291
3622
|
"input",
|
|
3292
3623
|
{
|
|
3293
3624
|
checked: autoMove,
|
|
@@ -3296,20 +3627,20 @@ var BridgeMocker = ({
|
|
|
3296
3627
|
type: "checkbox"
|
|
3297
3628
|
}
|
|
3298
3629
|
),
|
|
3299
|
-
/* @__PURE__ */
|
|
3630
|
+
/* @__PURE__ */ jsxs11("span", { className: "text-slate-200 font-bold", children: [
|
|
3300
3631
|
"Auto-Move ",
|
|
3301
3632
|
simulationPath ? "(Path)" : "(Random)"
|
|
3302
3633
|
] })
|
|
3303
3634
|
] }),
|
|
3304
|
-
/* @__PURE__ */
|
|
3305
|
-
/* @__PURE__ */
|
|
3306
|
-
/* @__PURE__ */
|
|
3635
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
|
|
3636
|
+
/* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
|
|
3637
|
+
/* @__PURE__ */ jsx15(
|
|
3307
3638
|
"select",
|
|
3308
3639
|
{
|
|
3309
3640
|
className: "bg-slate-800 border border-slate-700 rounded px-1 py-0.5 text-white focus:outline-none focus:border-blue-500 text-[10px]",
|
|
3310
3641
|
onChange: (e) => setSpeedMultiplier(Number(e.target.value)),
|
|
3311
3642
|
value: speedMultiplier,
|
|
3312
|
-
children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */
|
|
3643
|
+
children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ jsxs11("option", { value: s, children: [
|
|
3313
3644
|
s,
|
|
3314
3645
|
"x"
|
|
3315
3646
|
] }, s))
|
|
@@ -3317,10 +3648,10 @@ var BridgeMocker = ({
|
|
|
3317
3648
|
)
|
|
3318
3649
|
] })
|
|
3319
3650
|
] }),
|
|
3320
|
-
/* @__PURE__ */
|
|
3321
|
-
/* @__PURE__ */
|
|
3322
|
-
/* @__PURE__ */
|
|
3323
|
-
/* @__PURE__ */
|
|
3651
|
+
/* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-2", children: [
|
|
3652
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
|
|
3653
|
+
/* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
|
|
3654
|
+
/* @__PURE__ */ jsx15(
|
|
3324
3655
|
"input",
|
|
3325
3656
|
{
|
|
3326
3657
|
className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
|
|
@@ -3335,9 +3666,9 @@ var BridgeMocker = ({
|
|
|
3335
3666
|
}
|
|
3336
3667
|
)
|
|
3337
3668
|
] }),
|
|
3338
|
-
/* @__PURE__ */
|
|
3339
|
-
/* @__PURE__ */
|
|
3340
|
-
/* @__PURE__ */
|
|
3669
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
|
|
3670
|
+
/* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
|
|
3671
|
+
/* @__PURE__ */ jsx15(
|
|
3341
3672
|
"input",
|
|
3342
3673
|
{
|
|
3343
3674
|
className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
|
|
@@ -3352,9 +3683,9 @@ var BridgeMocker = ({
|
|
|
3352
3683
|
}
|
|
3353
3684
|
)
|
|
3354
3685
|
] }),
|
|
3355
|
-
/* @__PURE__ */
|
|
3356
|
-
/* @__PURE__ */
|
|
3357
|
-
/* @__PURE__ */
|
|
3686
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1 col-span-2", children: [
|
|
3687
|
+
/* @__PURE__ */ jsx15("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
|
|
3688
|
+
/* @__PURE__ */ jsx15(
|
|
3358
3689
|
"input",
|
|
3359
3690
|
{
|
|
3360
3691
|
className: "w-full accent-blue-500",
|
|
@@ -3368,7 +3699,7 @@ var BridgeMocker = ({
|
|
|
3368
3699
|
value: heading
|
|
3369
3700
|
}
|
|
3370
3701
|
),
|
|
3371
|
-
/* @__PURE__ */
|
|
3702
|
+
/* @__PURE__ */ jsxs11("div", { className: "text-right text-slate-400", children: [
|
|
3372
3703
|
heading,
|
|
3373
3704
|
"\xB0"
|
|
3374
3705
|
] })
|
|
@@ -3383,7 +3714,7 @@ var BridgeMocker = ({
|
|
|
3383
3714
|
|
|
3384
3715
|
// src/components/DebugConsole.tsx
|
|
3385
3716
|
import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
|
|
3386
|
-
import { jsx as
|
|
3717
|
+
import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3387
3718
|
var DebugConsole = ({
|
|
3388
3719
|
isOpen: initialOpen = false,
|
|
3389
3720
|
onClose
|
|
@@ -3427,14 +3758,15 @@ var DebugConsole = ({
|
|
|
3427
3758
|
};
|
|
3428
3759
|
}, [addLog]);
|
|
3429
3760
|
if (!showConsole) {
|
|
3430
|
-
return /* @__PURE__ */
|
|
3431
|
-
|
|
3761
|
+
return /* @__PURE__ */ jsx16(
|
|
3762
|
+
Button,
|
|
3432
3763
|
{
|
|
3433
|
-
className: "fixed bottom-4 left-4 w-8 h-8 rounded-full bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 flex items-center justify-center text-slate-400 hover:text-emerald-400 transition-all z-[9998] shadow-lg group",
|
|
3764
|
+
className: "fixed bottom-4 left-4 w-8 h-8 rounded-full bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 flex items-center justify-center text-slate-400 hover:text-emerald-400 hover:bg-slate-900/80 transition-all z-[9998] shadow-lg group p-0!",
|
|
3434
3765
|
onClick: () => setShowConsole(true),
|
|
3435
3766
|
title: "Open Debug Console",
|
|
3436
3767
|
type: "button",
|
|
3437
|
-
|
|
3768
|
+
variant: "ghost",
|
|
3769
|
+
children: /* @__PURE__ */ jsxs12(
|
|
3438
3770
|
"svg",
|
|
3439
3771
|
{
|
|
3440
3772
|
className: "group-hover:scale-110 transition-transform",
|
|
@@ -3448,68 +3780,70 @@ var DebugConsole = ({
|
|
|
3448
3780
|
width: "14",
|
|
3449
3781
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3450
3782
|
children: [
|
|
3451
|
-
/* @__PURE__ */
|
|
3452
|
-
/* @__PURE__ */
|
|
3453
|
-
/* @__PURE__ */
|
|
3454
|
-
/* @__PURE__ */
|
|
3455
|
-
/* @__PURE__ */
|
|
3456
|
-
/* @__PURE__ */
|
|
3457
|
-
/* @__PURE__ */
|
|
3458
|
-
/* @__PURE__ */
|
|
3459
|
-
/* @__PURE__ */
|
|
3460
|
-
/* @__PURE__ */
|
|
3461
|
-
/* @__PURE__ */
|
|
3783
|
+
/* @__PURE__ */ jsx16("path", { d: "m8 2 1.88 1.88" }),
|
|
3784
|
+
/* @__PURE__ */ jsx16("path", { d: "M14.12 3.88 16 2" }),
|
|
3785
|
+
/* @__PURE__ */ jsx16("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
|
|
3786
|
+
/* @__PURE__ */ jsx16("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
|
|
3787
|
+
/* @__PURE__ */ jsx16("path", { d: "M12 20v-9" }),
|
|
3788
|
+
/* @__PURE__ */ jsx16("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
|
|
3789
|
+
/* @__PURE__ */ jsx16("path", { d: "M6 13H2" }),
|
|
3790
|
+
/* @__PURE__ */ jsx16("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
|
|
3791
|
+
/* @__PURE__ */ jsx16("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
|
|
3792
|
+
/* @__PURE__ */ jsx16("path", { d: "M22 13h-4" }),
|
|
3793
|
+
/* @__PURE__ */ jsx16("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
|
|
3462
3794
|
]
|
|
3463
3795
|
}
|
|
3464
3796
|
)
|
|
3465
3797
|
}
|
|
3466
3798
|
);
|
|
3467
3799
|
}
|
|
3468
|
-
return /* @__PURE__ */
|
|
3469
|
-
/* @__PURE__ */
|
|
3470
|
-
/* @__PURE__ */
|
|
3471
|
-
/* @__PURE__ */
|
|
3800
|
+
return /* @__PURE__ */ jsxs12("div", { className: "fixed inset-x-0 bottom-0 w-full bg-[#0a080f] border-t border-slate-800 z-[9998] p-4 shadow-2xl flex flex-col animate-in slide-in-from-bottom duration-300", children: [
|
|
3801
|
+
/* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between mb-2", children: [
|
|
3802
|
+
/* @__PURE__ */ jsxs12("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
|
|
3803
|
+
/* @__PURE__ */ jsx16("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
|
|
3472
3804
|
"UP SDK Debug Console"
|
|
3473
3805
|
] }),
|
|
3474
|
-
/* @__PURE__ */
|
|
3475
|
-
/* @__PURE__ */
|
|
3476
|
-
|
|
3806
|
+
/* @__PURE__ */ jsxs12("div", { className: "flex gap-4", children: [
|
|
3807
|
+
/* @__PURE__ */ jsx16(
|
|
3808
|
+
Button,
|
|
3477
3809
|
{
|
|
3478
|
-
className: "text-[10px] text-slate-500 font-bold uppercase hover:text-slate-300 transition-colors",
|
|
3810
|
+
className: "text-[10px] text-slate-500 font-bold uppercase hover:text-slate-300 hover:bg-transparent transition-colors p-0 h-auto cursor-pointer",
|
|
3479
3811
|
onClick: clearLogs,
|
|
3480
3812
|
type: "button",
|
|
3813
|
+
variant: "ghost",
|
|
3481
3814
|
children: "Clear"
|
|
3482
3815
|
}
|
|
3483
3816
|
),
|
|
3484
|
-
/* @__PURE__ */
|
|
3485
|
-
|
|
3817
|
+
/* @__PURE__ */ jsx16(
|
|
3818
|
+
Button,
|
|
3486
3819
|
{
|
|
3487
|
-
className: "text-[10px] text-pink-500 font-bold uppercase hover:
|
|
3820
|
+
className: "text-[10px] text-pink-500 font-bold uppercase hover:text-pink-400 hover:bg-transparent transition-colors p-0 h-auto cursor-pointer",
|
|
3488
3821
|
onClick: () => {
|
|
3489
3822
|
setShowConsole(false);
|
|
3490
3823
|
if (onClose) onClose();
|
|
3491
3824
|
},
|
|
3492
3825
|
type: "button",
|
|
3826
|
+
variant: "ghost",
|
|
3493
3827
|
children: "Close"
|
|
3494
3828
|
}
|
|
3495
3829
|
)
|
|
3496
3830
|
] })
|
|
3497
3831
|
] }),
|
|
3498
|
-
/* @__PURE__ */
|
|
3832
|
+
/* @__PURE__ */ jsx16(
|
|
3499
3833
|
"div",
|
|
3500
3834
|
{
|
|
3501
3835
|
className: "bg-black/80 rounded-xl p-3 font-mono text-[10px] text-emerald-400 min-h-[120px] max-h-[240px] overflow-y-auto border border-slate-900 custom-scrollbar",
|
|
3502
3836
|
ref: scrollRef,
|
|
3503
|
-
children: logs.length === 0 ? /* @__PURE__ */
|
|
3837
|
+
children: logs.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "text-slate-600 italic text-center py-8", children: "No logs yet. Interacting with the SDK will show events here." }) : logs.map((log) => /* @__PURE__ */ jsxs12(
|
|
3504
3838
|
"div",
|
|
3505
3839
|
{
|
|
3506
3840
|
className: "mb-3 pb-3 border-b border-slate-900/50 last:border-0 last:mb-0 last:pb-0",
|
|
3507
3841
|
children: [
|
|
3508
|
-
/* @__PURE__ */
|
|
3509
|
-
/* @__PURE__ */
|
|
3510
|
-
/* @__PURE__ */
|
|
3842
|
+
/* @__PURE__ */ jsxs12("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
|
|
3843
|
+
/* @__PURE__ */ jsx16("span", { className: "text-[8px]", children: log.time }),
|
|
3844
|
+
/* @__PURE__ */ jsx16("span", { className: "font-bold text-white uppercase text-[8px] bg-slate-800 px-1.5 py-0.5 rounded leading-none", children: log.label })
|
|
3511
3845
|
] }),
|
|
3512
|
-
/* @__PURE__ */
|
|
3846
|
+
/* @__PURE__ */ jsx16("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
|
|
3513
3847
|
]
|
|
3514
3848
|
},
|
|
3515
3849
|
log.id
|
|
@@ -3521,7 +3855,7 @@ var DebugConsole = ({
|
|
|
3521
3855
|
|
|
3522
3856
|
// src/components/SDKProvider.tsx
|
|
3523
3857
|
import { createContext as createContext2, useContext as useContext5, useMemo as useMemo6 } from "react";
|
|
3524
|
-
import { Fragment as Fragment5, jsx as
|
|
3858
|
+
import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3525
3859
|
var SDKContext = createContext2({ isMocked: false });
|
|
3526
3860
|
var useIsMocked = () => useContext5(SDKContext).isMocked;
|
|
3527
3861
|
var SDKProvider = ({
|
|
@@ -3531,14 +3865,14 @@ var SDKProvider = ({
|
|
|
3531
3865
|
}) => {
|
|
3532
3866
|
const isMocked = typeof window !== "undefined" && !(window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView);
|
|
3533
3867
|
const value = useMemo6(() => ({ isMocked }), [isMocked]);
|
|
3534
|
-
const content = /* @__PURE__ */
|
|
3868
|
+
const content = /* @__PURE__ */ jsxs13(Fragment5, { children: [
|
|
3535
3869
|
children,
|
|
3536
|
-
debug && /* @__PURE__ */
|
|
3870
|
+
debug && /* @__PURE__ */ jsx17(DebugConsole, {})
|
|
3537
3871
|
] });
|
|
3538
3872
|
if (isMocked) {
|
|
3539
|
-
return /* @__PURE__ */
|
|
3873
|
+
return /* @__PURE__ */ jsx17(SDKContext.Provider, { value, children: /* @__PURE__ */ jsx17(BridgeMocker, { ...mockerProps, children: content }) });
|
|
3540
3874
|
}
|
|
3541
|
-
return /* @__PURE__ */
|
|
3875
|
+
return /* @__PURE__ */ jsx17(SDKContext.Provider, { value, children: content });
|
|
3542
3876
|
};
|
|
3543
3877
|
|
|
3544
3878
|
// src/index.ts
|