@cloudparse/up-miniapps-sdk 0.2.1 → 0.2.3
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.cjs
CHANGED
|
@@ -62,6 +62,58 @@ __export(src_exports, {
|
|
|
62
62
|
});
|
|
63
63
|
module.exports = __toCommonJS(src_exports);
|
|
64
64
|
|
|
65
|
+
// src/lib/utils.ts
|
|
66
|
+
var import_clsx = require("clsx");
|
|
67
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
68
|
+
function cn(...inputs) {
|
|
69
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// src/components/ui/button.tsx
|
|
73
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
74
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
75
|
+
var React = __toESM(require("react"), 1);
|
|
76
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
77
|
+
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
78
|
+
"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",
|
|
79
|
+
{
|
|
80
|
+
defaultVariants: {
|
|
81
|
+
size: "default",
|
|
82
|
+
variant: "default"
|
|
83
|
+
},
|
|
84
|
+
variants: {
|
|
85
|
+
size: {
|
|
86
|
+
default: "h-10 px-4 py-2",
|
|
87
|
+
icon: "h-10 w-10",
|
|
88
|
+
lg: "h-11 rounded-md px-8",
|
|
89
|
+
sm: "h-9 rounded-md px-3"
|
|
90
|
+
},
|
|
91
|
+
variant: {
|
|
92
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
93
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
94
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
95
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
96
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
97
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
var Button = React.forwardRef(
|
|
103
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
104
|
+
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
|
+
Comp,
|
|
107
|
+
{
|
|
108
|
+
className: cn(buttonVariants({ className, size, variant })),
|
|
109
|
+
ref,
|
|
110
|
+
...props
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
);
|
|
115
|
+
Button.displayName = "Button";
|
|
116
|
+
|
|
65
117
|
// src/bridge.ts
|
|
66
118
|
var Bridge = class {
|
|
67
119
|
callbacks = /* @__PURE__ */ new Map();
|
|
@@ -223,9 +275,121 @@ var Bridge = class {
|
|
|
223
275
|
}
|
|
224
276
|
};
|
|
225
277
|
|
|
278
|
+
// src/components/ui/sheet.tsx
|
|
279
|
+
var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
280
|
+
var import_class_variance_authority2 = require("class-variance-authority");
|
|
281
|
+
var import_lucide_react = require("lucide-react");
|
|
282
|
+
var React2 = __toESM(require("react"), 1);
|
|
283
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
284
|
+
var Sheet = SheetPrimitive.Root;
|
|
285
|
+
var SheetPortal = SheetPrimitive.Portal;
|
|
286
|
+
var SheetOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
287
|
+
SheetPrimitive.Overlay,
|
|
288
|
+
{
|
|
289
|
+
className: cn(
|
|
290
|
+
"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",
|
|
291
|
+
className
|
|
292
|
+
),
|
|
293
|
+
...props,
|
|
294
|
+
ref
|
|
295
|
+
}
|
|
296
|
+
));
|
|
297
|
+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
|
298
|
+
var sheetVariants = (0, import_class_variance_authority2.cva)(
|
|
299
|
+
"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",
|
|
300
|
+
{
|
|
301
|
+
defaultVariants: {
|
|
302
|
+
side: "right"
|
|
303
|
+
},
|
|
304
|
+
variants: {
|
|
305
|
+
side: {
|
|
306
|
+
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
307
|
+
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",
|
|
308
|
+
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",
|
|
309
|
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
);
|
|
314
|
+
var SheetContent = React2.forwardRef(({ side = "right", className, children, portal = true, ...props }, ref) => {
|
|
315
|
+
const Content2 = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
316
|
+
SheetPrimitive.Content,
|
|
317
|
+
{
|
|
318
|
+
className: cn(
|
|
319
|
+
sheetVariants({ side }),
|
|
320
|
+
portal ? "fixed" : "absolute",
|
|
321
|
+
className
|
|
322
|
+
),
|
|
323
|
+
ref,
|
|
324
|
+
...props,
|
|
325
|
+
children: [
|
|
326
|
+
children,
|
|
327
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.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: [
|
|
328
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.X, { className: "h-4 w-4" }),
|
|
329
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: "Close" })
|
|
330
|
+
] })
|
|
331
|
+
]
|
|
332
|
+
}
|
|
333
|
+
);
|
|
334
|
+
if (!portal) {
|
|
335
|
+
return Content2;
|
|
336
|
+
}
|
|
337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SheetPortal, { children: [
|
|
338
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SheetOverlay, {}),
|
|
339
|
+
Content2
|
|
340
|
+
] });
|
|
341
|
+
});
|
|
342
|
+
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
343
|
+
var SheetHeader = ({
|
|
344
|
+
className,
|
|
345
|
+
...props
|
|
346
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
347
|
+
"div",
|
|
348
|
+
{
|
|
349
|
+
className: cn(
|
|
350
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
|
351
|
+
className
|
|
352
|
+
),
|
|
353
|
+
...props
|
|
354
|
+
}
|
|
355
|
+
);
|
|
356
|
+
SheetHeader.displayName = "SheetHeader";
|
|
357
|
+
var SheetFooter = ({
|
|
358
|
+
className,
|
|
359
|
+
...props
|
|
360
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
361
|
+
"div",
|
|
362
|
+
{
|
|
363
|
+
className: cn(
|
|
364
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
365
|
+
className
|
|
366
|
+
),
|
|
367
|
+
...props
|
|
368
|
+
}
|
|
369
|
+
);
|
|
370
|
+
SheetFooter.displayName = "SheetFooter";
|
|
371
|
+
var SheetTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
372
|
+
SheetPrimitive.Title,
|
|
373
|
+
{
|
|
374
|
+
className: cn("text-lg font-semibold text-foreground", className),
|
|
375
|
+
ref,
|
|
376
|
+
...props
|
|
377
|
+
}
|
|
378
|
+
));
|
|
379
|
+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
380
|
+
var SheetDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
381
|
+
SheetPrimitive.Description,
|
|
382
|
+
{
|
|
383
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
384
|
+
ref,
|
|
385
|
+
...props
|
|
386
|
+
}
|
|
387
|
+
));
|
|
388
|
+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
389
|
+
|
|
226
390
|
// src/components/Map/components/MapDrawer.tsx
|
|
227
391
|
var import_react = require("react");
|
|
228
|
-
var
|
|
392
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
229
393
|
var resolveHeightToPixels = (height, containerHeight) => {
|
|
230
394
|
if (typeof height === "number") {
|
|
231
395
|
return height;
|
|
@@ -509,8 +673,8 @@ var MapDrawer = (0, import_react.forwardRef)(
|
|
|
509
673
|
const closedShiftPx = fullPx - closedVisibleHeight;
|
|
510
674
|
return `translateY(calc(${closedShiftPx}px + var(--drag-offset, 0px)))`;
|
|
511
675
|
};
|
|
512
|
-
return /* @__PURE__ */ (0,
|
|
513
|
-
/* @__PURE__ */ (0,
|
|
676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
677
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
|
|
514
678
|
.no-scrollbar {
|
|
515
679
|
-ms-overflow-style: none;
|
|
516
680
|
scrollbar-width: none;
|
|
@@ -519,97 +683,120 @@ var MapDrawer = (0, import_react.forwardRef)(
|
|
|
519
683
|
display: none;
|
|
520
684
|
}
|
|
521
685
|
` }),
|
|
522
|
-
/* @__PURE__ */ (0,
|
|
686
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
523
687
|
"div",
|
|
524
688
|
{
|
|
525
689
|
className: `absolute inset-0 bg-black/45 backdrop-blur-[1px] transition-opacity duration-300 z-30 ${backdropStyles}`,
|
|
526
690
|
onClick: () => onChangeState("closed")
|
|
527
691
|
}
|
|
528
692
|
),
|
|
529
|
-
side === "left" ? (
|
|
530
|
-
/*
|
|
531
|
-
|
|
532
|
-
"div",
|
|
693
|
+
side === "left" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
694
|
+
state === "closed" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
695
|
+
Button,
|
|
533
696
|
{
|
|
534
|
-
className:
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
697
|
+
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!",
|
|
698
|
+
onClick: () => onChangeState("full"),
|
|
699
|
+
variant: "ghost",
|
|
700
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
701
|
+
"svg",
|
|
702
|
+
{
|
|
703
|
+
fill: "none",
|
|
704
|
+
height: "24",
|
|
705
|
+
stroke: "currentColor",
|
|
706
|
+
strokeLinecap: "round",
|
|
707
|
+
strokeLinejoin: "round",
|
|
708
|
+
strokeWidth: "2",
|
|
709
|
+
viewBox: "0 0 24 24",
|
|
710
|
+
width: "24",
|
|
711
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
712
|
+
children: [
|
|
713
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
|
|
714
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
|
|
715
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
|
|
716
|
+
]
|
|
717
|
+
}
|
|
718
|
+
)
|
|
719
|
+
}
|
|
720
|
+
),
|
|
721
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
722
|
+
Sheet,
|
|
723
|
+
{
|
|
724
|
+
onOpenChange: (open) => onChangeState(open ? "full" : "closed"),
|
|
725
|
+
open: state !== "closed",
|
|
726
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
727
|
+
SheetContent,
|
|
728
|
+
{
|
|
729
|
+
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",
|
|
730
|
+
portal: false,
|
|
731
|
+
side: "left",
|
|
732
|
+
children: [
|
|
733
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SheetHeader, { className: "pb-3 border-b border-white/10 mb-2 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SheetTitle, { className: "text-sm font-bold tracking-wider text-zinc-400 uppercase", children: "Menu" }) }),
|
|
734
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
735
|
+
"div",
|
|
736
|
+
{
|
|
737
|
+
className: "flex-1 overflow-y-auto no-scrollbar pr-2",
|
|
738
|
+
onScroll: handleScroll,
|
|
739
|
+
ref: scrollContainerRef,
|
|
740
|
+
children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-1.5", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
741
|
+
Button,
|
|
742
|
+
{
|
|
743
|
+
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" : ""}`,
|
|
744
|
+
disabled: item.disabled,
|
|
745
|
+
onClick: () => {
|
|
746
|
+
if (!item.disabled) {
|
|
747
|
+
item.onPress();
|
|
748
|
+
onChangeState("closed");
|
|
749
|
+
}
|
|
750
|
+
},
|
|
751
|
+
variant: "ghost",
|
|
752
|
+
children: [
|
|
753
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
|
|
754
|
+
item.icon,
|
|
755
|
+
item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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 })
|
|
756
|
+
] }),
|
|
757
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: item.label })
|
|
758
|
+
]
|
|
558
759
|
},
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
760
|
+
item.id
|
|
761
|
+
)) })
|
|
762
|
+
}
|
|
763
|
+
),
|
|
764
|
+
showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
765
|
+
Button,
|
|
766
|
+
{
|
|
767
|
+
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!",
|
|
768
|
+
onClick: () => {
|
|
769
|
+
scrollContainerRef.current?.scrollTo({
|
|
770
|
+
behavior: "smooth",
|
|
771
|
+
top: 0
|
|
772
|
+
});
|
|
566
773
|
},
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
strokeLinejoin: "round",
|
|
589
|
-
strokeWidth: "2.5",
|
|
590
|
-
viewBox: "0 0 24 24",
|
|
591
|
-
width: "20",
|
|
592
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
593
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
|
|
594
|
-
}
|
|
595
|
-
)
|
|
596
|
-
}
|
|
597
|
-
)
|
|
598
|
-
] }),
|
|
599
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
600
|
-
"div",
|
|
601
|
-
{
|
|
602
|
-
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",
|
|
603
|
-
onClick: handleHandleClick,
|
|
604
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-1.5 h-12 bg-white/20 rounded-full transition-colors group-hover:bg-white/40" })
|
|
605
|
-
}
|
|
606
|
-
)
|
|
607
|
-
]
|
|
774
|
+
variant: "ghost",
|
|
775
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
776
|
+
"svg",
|
|
777
|
+
{
|
|
778
|
+
fill: "none",
|
|
779
|
+
height: "20",
|
|
780
|
+
stroke: "currentColor",
|
|
781
|
+
strokeLinecap: "round",
|
|
782
|
+
strokeLinejoin: "round",
|
|
783
|
+
strokeWidth: "2.5",
|
|
784
|
+
viewBox: "0 0 24 24",
|
|
785
|
+
width: "20",
|
|
786
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
787
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "18 15 12 9 6 15" })
|
|
788
|
+
}
|
|
789
|
+
)
|
|
790
|
+
}
|
|
791
|
+
)
|
|
792
|
+
]
|
|
793
|
+
}
|
|
794
|
+
)
|
|
608
795
|
}
|
|
609
796
|
)
|
|
610
|
-
) : (
|
|
797
|
+
] }) : (
|
|
611
798
|
/* Bottom Sheet Panel - Hardware accelerated translateY transitions */
|
|
612
|
-
/* @__PURE__ */ (0,
|
|
799
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
613
800
|
"div",
|
|
614
801
|
{
|
|
615
802
|
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"}`,
|
|
@@ -622,15 +809,15 @@ var MapDrawer = (0, import_react.forwardRef)(
|
|
|
622
809
|
transition: isDragging ? "none" : "transform 300ms ease-out, margin-bottom 250ms ease-in-out"
|
|
623
810
|
},
|
|
624
811
|
children: [
|
|
625
|
-
/* @__PURE__ */ (0,
|
|
812
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
626
813
|
"div",
|
|
627
814
|
{
|
|
628
815
|
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",
|
|
629
816
|
onClick: handleHandleClick,
|
|
630
|
-
children: /* @__PURE__ */ (0,
|
|
817
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-12 h-1 bg-white/25 rounded-full" })
|
|
631
818
|
}
|
|
632
819
|
),
|
|
633
|
-
/* @__PURE__ */ (0,
|
|
820
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
634
821
|
"div",
|
|
635
822
|
{
|
|
636
823
|
className: "flex-1 flex flex-col overflow-hidden px-4 pb-4 pt-2 transition-[margin-top] duration-250 ease-in-out relative",
|
|
@@ -638,7 +825,7 @@ var MapDrawer = (0, import_react.forwardRef)(
|
|
|
638
825
|
marginTop: state === "closed" ? `${safeAreaInsets.bottom}px` : "0px"
|
|
639
826
|
},
|
|
640
827
|
children: [
|
|
641
|
-
/* @__PURE__ */ (0,
|
|
828
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
642
829
|
"div",
|
|
643
830
|
{
|
|
644
831
|
className: "flex-1 overflow-y-auto no-scrollbar",
|
|
@@ -647,10 +834,10 @@ var MapDrawer = (0, import_react.forwardRef)(
|
|
|
647
834
|
style: {
|
|
648
835
|
paddingBottom: state === "peek" ? `${shiftPx}px` : "0px"
|
|
649
836
|
},
|
|
650
|
-
children: menuContent ? menuContent : /* @__PURE__ */ (0,
|
|
651
|
-
|
|
837
|
+
children: menuContent ? menuContent : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-1", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
838
|
+
Button,
|
|
652
839
|
{
|
|
653
|
-
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" : "
|
|
840
|
+
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" : ""}`,
|
|
654
841
|
disabled: item.disabled,
|
|
655
842
|
onClick: () => {
|
|
656
843
|
if (!item.disabled) {
|
|
@@ -658,22 +845,23 @@ var MapDrawer = (0, import_react.forwardRef)(
|
|
|
658
845
|
onChangeState("closed");
|
|
659
846
|
}
|
|
660
847
|
},
|
|
848
|
+
variant: "ghost",
|
|
661
849
|
children: [
|
|
662
|
-
/* @__PURE__ */ (0,
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
|
|
663
851
|
item.icon,
|
|
664
|
-
item.badge !== void 0 && /* @__PURE__ */ (0,
|
|
852
|
+
item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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 })
|
|
665
853
|
] }),
|
|
666
|
-
/* @__PURE__ */ (0,
|
|
854
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium tracking-wide", children: item.label })
|
|
667
855
|
]
|
|
668
856
|
},
|
|
669
857
|
item.id
|
|
670
858
|
)) })
|
|
671
859
|
}
|
|
672
860
|
),
|
|
673
|
-
showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0,
|
|
674
|
-
|
|
861
|
+
showScrollToTopButton && showScrollTop && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
862
|
+
Button,
|
|
675
863
|
{
|
|
676
|
-
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",
|
|
864
|
+
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!",
|
|
677
865
|
onClick: () => {
|
|
678
866
|
scrollContainerRef.current?.scrollTo({
|
|
679
867
|
behavior: "smooth",
|
|
@@ -683,7 +871,8 @@ var MapDrawer = (0, import_react.forwardRef)(
|
|
|
683
871
|
style: {
|
|
684
872
|
bottom: state === "peek" ? `calc(${24 + shiftPx}px + var(--drag-offset, 0px))` : `calc(24px + var(--drag-offset, 0px))`
|
|
685
873
|
},
|
|
686
|
-
|
|
874
|
+
variant: "ghost",
|
|
875
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
687
876
|
"svg",
|
|
688
877
|
{
|
|
689
878
|
fill: "none",
|
|
@@ -695,7 +884,7 @@ var MapDrawer = (0, import_react.forwardRef)(
|
|
|
695
884
|
viewBox: "0 0 24 24",
|
|
696
885
|
width: "20",
|
|
697
886
|
xmlns: "http://www.w3.org/2000/svg",
|
|
698
|
-
children: /* @__PURE__ */ (0,
|
|
887
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "18 15 12 9 6 15" })
|
|
699
888
|
}
|
|
700
889
|
)
|
|
701
890
|
}
|
|
@@ -711,8 +900,65 @@ var MapDrawer = (0, import_react.forwardRef)(
|
|
|
711
900
|
}
|
|
712
901
|
);
|
|
713
902
|
|
|
903
|
+
// src/components/ui/card.tsx
|
|
904
|
+
var React3 = __toESM(require("react"), 1);
|
|
905
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
906
|
+
var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
907
|
+
"div",
|
|
908
|
+
{
|
|
909
|
+
className: cn(
|
|
910
|
+
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
|
911
|
+
className
|
|
912
|
+
),
|
|
913
|
+
ref,
|
|
914
|
+
...props
|
|
915
|
+
}
|
|
916
|
+
));
|
|
917
|
+
Card.displayName = "Card";
|
|
918
|
+
var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
919
|
+
"div",
|
|
920
|
+
{
|
|
921
|
+
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
922
|
+
ref,
|
|
923
|
+
...props
|
|
924
|
+
}
|
|
925
|
+
));
|
|
926
|
+
CardHeader.displayName = "CardHeader";
|
|
927
|
+
var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
928
|
+
"div",
|
|
929
|
+
{
|
|
930
|
+
className: cn(
|
|
931
|
+
"text-2xl font-semibold leading-none tracking-tight",
|
|
932
|
+
className
|
|
933
|
+
),
|
|
934
|
+
ref,
|
|
935
|
+
...props
|
|
936
|
+
}
|
|
937
|
+
));
|
|
938
|
+
CardTitle.displayName = "CardTitle";
|
|
939
|
+
var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
940
|
+
"div",
|
|
941
|
+
{
|
|
942
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
943
|
+
ref,
|
|
944
|
+
...props
|
|
945
|
+
}
|
|
946
|
+
));
|
|
947
|
+
CardDescription.displayName = "CardDescription";
|
|
948
|
+
var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("p-6 pt-0", className), ref, ...props }));
|
|
949
|
+
CardContent.displayName = "CardContent";
|
|
950
|
+
var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
951
|
+
"div",
|
|
952
|
+
{
|
|
953
|
+
className: cn("flex items-center p-6 pt-0", className),
|
|
954
|
+
ref,
|
|
955
|
+
...props
|
|
956
|
+
}
|
|
957
|
+
));
|
|
958
|
+
CardFooter.displayName = "CardFooter";
|
|
959
|
+
|
|
714
960
|
// src/components/Map/components/MapEtaPanel.tsx
|
|
715
|
-
var
|
|
961
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
716
962
|
var MapEtaPanel = ({
|
|
717
963
|
etaData,
|
|
718
964
|
layoutMode,
|
|
@@ -721,15 +967,15 @@ var MapEtaPanel = ({
|
|
|
721
967
|
isDragging = false
|
|
722
968
|
}) => {
|
|
723
969
|
if (layoutMode === "closed-banner") {
|
|
724
|
-
return /* @__PURE__ */ (0,
|
|
725
|
-
/* @__PURE__ */ (0,
|
|
970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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: [
|
|
971
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
726
972
|
"div",
|
|
727
973
|
{
|
|
728
974
|
className: "flex items-center gap-2 cursor-pointer flex-1",
|
|
729
975
|
onClick: onHeaderClick,
|
|
730
976
|
children: [
|
|
731
|
-
/* @__PURE__ */ (0,
|
|
732
|
-
/* @__PURE__ */ (0,
|
|
977
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
|
|
978
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs font-bold text-emerald-400", children: [
|
|
733
979
|
etaData.etaMins,
|
|
734
980
|
" min (",
|
|
735
981
|
etaData.distanceRemainingKm.toFixed(1),
|
|
@@ -738,36 +984,37 @@ var MapEtaPanel = ({
|
|
|
738
984
|
]
|
|
739
985
|
}
|
|
740
986
|
),
|
|
741
|
-
etaData.onAbort && /* @__PURE__ */ (0,
|
|
742
|
-
|
|
987
|
+
etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
988
|
+
Button,
|
|
743
989
|
{
|
|
744
|
-
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",
|
|
990
|
+
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!",
|
|
745
991
|
onClick: (e) => {
|
|
746
992
|
e.stopPropagation();
|
|
747
993
|
etaData.onAbort?.();
|
|
748
994
|
},
|
|
749
|
-
|
|
995
|
+
variant: "ghost",
|
|
996
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
750
997
|
"svg",
|
|
751
998
|
{
|
|
752
999
|
className: "lucide lucide-x",
|
|
753
1000
|
fill: "none",
|
|
754
1001
|
height: "18",
|
|
755
1002
|
stroke: "currentColor",
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
1003
|
+
strokeLinecap: "round",
|
|
1004
|
+
strokeLinejoin: "round",
|
|
1005
|
+
strokeWidth: "2.5",
|
|
759
1006
|
viewBox: "0 0 24 24",
|
|
760
1007
|
width: "18",
|
|
761
1008
|
xmlns: "http://www.w3.org/2000/svg",
|
|
762
1009
|
children: [
|
|
763
|
-
/* @__PURE__ */ (0,
|
|
764
|
-
/* @__PURE__ */ (0,
|
|
1010
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6 6 18" }),
|
|
1011
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 6 12 12" })
|
|
765
1012
|
]
|
|
766
1013
|
}
|
|
767
1014
|
)
|
|
768
1015
|
}
|
|
769
1016
|
),
|
|
770
|
-
etaData.progress !== void 0 && /* @__PURE__ */ (0,
|
|
1017
|
+
etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
771
1018
|
"div",
|
|
772
1019
|
{
|
|
773
1020
|
className: "h-full bg-cyan-400",
|
|
@@ -777,166 +1024,174 @@ var MapEtaPanel = ({
|
|
|
777
1024
|
] });
|
|
778
1025
|
}
|
|
779
1026
|
if (layoutMode === "open-card") {
|
|
780
|
-
return /* @__PURE__ */ (0,
|
|
781
|
-
/* @__PURE__ */ (0,
|
|
782
|
-
/* @__PURE__ */ (0,
|
|
783
|
-
/* @__PURE__ */ (0,
|
|
784
|
-
/* @__PURE__ */ (0,
|
|
1027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Card, { className: "mx-4 mt-2 p-4 bg-white/5 border border-white/10 rounded-xl flex flex-col text-card-foreground", children: [
|
|
1028
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
|
|
1029
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1030
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
|
|
1031
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Journey Active" })
|
|
785
1032
|
] }),
|
|
786
|
-
etaData.onAbort && /* @__PURE__ */ (0,
|
|
787
|
-
|
|
1033
|
+
etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1034
|
+
Button,
|
|
788
1035
|
{
|
|
789
|
-
className: "px-1
|
|
1036
|
+
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!",
|
|
790
1037
|
onClick: etaData.onAbort,
|
|
791
|
-
|
|
1038
|
+
variant: "ghost",
|
|
1039
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
792
1040
|
"svg",
|
|
793
1041
|
{
|
|
794
1042
|
className: "lucide lucide-x",
|
|
795
1043
|
fill: "none",
|
|
796
1044
|
height: "18",
|
|
797
1045
|
stroke: "currentColor",
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
1046
|
+
strokeLinecap: "round",
|
|
1047
|
+
strokeLinejoin: "round",
|
|
1048
|
+
strokeWidth: "2.5",
|
|
801
1049
|
viewBox: "0 0 24 24",
|
|
802
1050
|
width: "18",
|
|
803
1051
|
xmlns: "http://www.w3.org/2000/svg",
|
|
804
1052
|
children: [
|
|
805
|
-
/* @__PURE__ */ (0,
|
|
806
|
-
/* @__PURE__ */ (0,
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6 6 18" }),
|
|
1054
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 6 12 12" })
|
|
807
1055
|
]
|
|
808
1056
|
}
|
|
809
1057
|
)
|
|
810
1058
|
}
|
|
811
1059
|
)
|
|
812
1060
|
] }),
|
|
813
|
-
/* @__PURE__ */ (0,
|
|
814
|
-
/* @__PURE__ */ (0,
|
|
815
|
-
/* @__PURE__ */ (0,
|
|
816
|
-
|
|
817
|
-
|
|
1061
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CardContent, { className: "p-0 flex flex-col", children: [
|
|
1062
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-1.5 mb-2.5", children: [
|
|
1063
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-center", children: [
|
|
1064
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-xl font-black text-white leading-none", children: [
|
|
1065
|
+
etaData.etaMins,
|
|
1066
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs text-zinc-400 font-normal", children: " min" })
|
|
1067
|
+
] }),
|
|
1068
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Time Remaining" })
|
|
818
1069
|
] }),
|
|
819
|
-
/* @__PURE__ */ (0,
|
|
1070
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-center", children: [
|
|
1071
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-xl font-black text-white leading-none", children: [
|
|
1072
|
+
etaData.distanceRemainingKm.toFixed(1),
|
|
1073
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs text-zinc-400 font-normal", children: " km" })
|
|
1074
|
+
] }),
|
|
1075
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-[8px] text-zinc-500 font-bold uppercase tracking-wider mt-1", children: "Distance Remaining" })
|
|
1076
|
+
] })
|
|
820
1077
|
] }),
|
|
821
|
-
/* @__PURE__ */ (0,
|
|
822
|
-
/* @__PURE__ */ (0,
|
|
823
|
-
|
|
824
|
-
/* @__PURE__ */ (0,
|
|
1078
|
+
etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mb-3", children: [
|
|
1079
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-[9px] font-bold text-zinc-400 mb-1", children: [
|
|
1080
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Progress" }),
|
|
1081
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
|
|
1082
|
+
Math.round(etaData.progress),
|
|
1083
|
+
"%"
|
|
1084
|
+
] })
|
|
825
1085
|
] }),
|
|
826
|
-
/* @__PURE__ */ (0,
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
Math.round(etaData.progress),
|
|
834
|
-
"%"
|
|
835
|
-
] })
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-1 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1087
|
+
"div",
|
|
1088
|
+
{
|
|
1089
|
+
className: "h-full bg-cyan-400 rounded-full",
|
|
1090
|
+
style: { width: `${etaData.progress}%` }
|
|
1091
|
+
}
|
|
1092
|
+
) })
|
|
836
1093
|
] }),
|
|
837
|
-
|
|
838
|
-
|
|
1094
|
+
etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1095
|
+
Button,
|
|
839
1096
|
{
|
|
840
|
-
className: "
|
|
841
|
-
|
|
1097
|
+
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",
|
|
1098
|
+
onClick: etaData.onStart,
|
|
1099
|
+
variant: "ghost",
|
|
1100
|
+
children: "Start Guidance"
|
|
842
1101
|
}
|
|
843
|
-
)
|
|
844
|
-
] })
|
|
845
|
-
etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
846
|
-
"button",
|
|
847
|
-
{
|
|
848
|
-
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",
|
|
849
|
-
onClick: etaData.onStart,
|
|
850
|
-
children: "Start Guidance"
|
|
851
|
-
}
|
|
852
|
-
)
|
|
1102
|
+
)
|
|
1103
|
+
] })
|
|
853
1104
|
] });
|
|
854
1105
|
}
|
|
855
|
-
return /* @__PURE__ */ (0,
|
|
856
|
-
|
|
1106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
1107
|
+
Card,
|
|
857
1108
|
{
|
|
858
|
-
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"}`,
|
|
1109
|
+
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"}`,
|
|
859
1110
|
style,
|
|
860
1111
|
children: [
|
|
861
|
-
/* @__PURE__ */ (0,
|
|
862
|
-
/* @__PURE__ */ (0,
|
|
863
|
-
/* @__PURE__ */ (0,
|
|
864
|
-
/* @__PURE__ */ (0,
|
|
1112
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between mb-2 sm:mb-3", children: [
|
|
1113
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1114
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-emerald-500 animate-pulse" }),
|
|
1115
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[9px] sm:text-[10px] font-bold text-emerald-400 uppercase tracking-wider", children: etaData.label || "Guidance Active" })
|
|
865
1116
|
] }),
|
|
866
|
-
etaData.onAbort && /* @__PURE__ */ (0,
|
|
867
|
-
|
|
1117
|
+
etaData.onAbort && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1118
|
+
Button,
|
|
868
1119
|
{
|
|
869
|
-
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",
|
|
1120
|
+
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!",
|
|
870
1121
|
onClick: etaData.onAbort,
|
|
871
|
-
|
|
1122
|
+
variant: "ghost",
|
|
1123
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
872
1124
|
"svg",
|
|
873
1125
|
{
|
|
874
1126
|
className: "lucide lucide-x",
|
|
875
1127
|
fill: "none",
|
|
876
1128
|
height: "18",
|
|
877
1129
|
stroke: "currentColor",
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
1130
|
+
strokeLinecap: "round",
|
|
1131
|
+
strokeLinejoin: "round",
|
|
1132
|
+
strokeWidth: "2.5",
|
|
881
1133
|
viewBox: "0 0 24 24",
|
|
882
1134
|
width: "18",
|
|
883
1135
|
xmlns: "http://www.w3.org/2000/svg",
|
|
884
1136
|
children: [
|
|
885
|
-
/* @__PURE__ */ (0,
|
|
886
|
-
/* @__PURE__ */ (0,
|
|
1137
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6 6 18" }),
|
|
1138
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 6 12 12" })
|
|
887
1139
|
]
|
|
888
1140
|
}
|
|
889
1141
|
)
|
|
890
1142
|
}
|
|
891
1143
|
)
|
|
892
1144
|
] }),
|
|
893
|
-
/* @__PURE__ */ (0,
|
|
894
|
-
/* @__PURE__ */ (0,
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
" ",
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
" ",
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
910
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-between text-[8px] sm:text-[9px] font-bold text-zinc-400 mb-1", children: [
|
|
911
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Progress" }),
|
|
912
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
|
|
913
|
-
Math.round(etaData.progress),
|
|
914
|
-
"%"
|
|
915
|
-
] })
|
|
1145
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CardContent, { className: "p-0 flex flex-col", children: [
|
|
1146
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 divide-x divide-white/10 py-0.5 sm:py-1 mb-2 sm:mb-3", children: [
|
|
1147
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
|
|
1148
|
+
etaData.etaMins,
|
|
1149
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
|
|
1150
|
+
" ",
|
|
1151
|
+
"min"
|
|
1152
|
+
] })
|
|
1153
|
+
] }) }),
|
|
1154
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-base sm:text-lg font-black text-white leading-none", children: [
|
|
1155
|
+
etaData.distanceRemainingKm.toFixed(1),
|
|
1156
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-[10px] sm:text-xs text-zinc-400 font-normal", children: [
|
|
1157
|
+
" ",
|
|
1158
|
+
"km"
|
|
1159
|
+
] })
|
|
1160
|
+
] }) })
|
|
916
1161
|
] }),
|
|
917
|
-
/* @__PURE__ */ (0,
|
|
918
|
-
"div",
|
|
1162
|
+
etaData.progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
|
|
1163
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-[8px] sm:text-[9px] font-bold text-zinc-400 mb-1", children: [
|
|
1164
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Progress" }),
|
|
1165
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
|
|
1166
|
+
Math.round(etaData.progress),
|
|
1167
|
+
"%"
|
|
1168
|
+
] })
|
|
1169
|
+
] }),
|
|
1170
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-1 sm:h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1171
|
+
"div",
|
|
1172
|
+
{
|
|
1173
|
+
className: "h-full bg-cyan-400 rounded-full",
|
|
1174
|
+
style: { width: `${etaData.progress}%` }
|
|
1175
|
+
}
|
|
1176
|
+
) })
|
|
1177
|
+
] }),
|
|
1178
|
+
etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1179
|
+
Button,
|
|
919
1180
|
{
|
|
920
|
-
className: "
|
|
921
|
-
|
|
1181
|
+
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",
|
|
1182
|
+
onClick: etaData.onStart,
|
|
1183
|
+
variant: "ghost",
|
|
1184
|
+
children: "Start Guidance"
|
|
922
1185
|
}
|
|
923
|
-
)
|
|
924
|
-
] })
|
|
925
|
-
etaData.mode === "preview" && etaData.onStart && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
926
|
-
"button",
|
|
927
|
-
{
|
|
928
|
-
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",
|
|
929
|
-
onClick: etaData.onStart,
|
|
930
|
-
children: "Start Guidance"
|
|
931
|
-
}
|
|
932
|
-
)
|
|
1186
|
+
)
|
|
1187
|
+
] })
|
|
933
1188
|
]
|
|
934
1189
|
}
|
|
935
1190
|
);
|
|
936
1191
|
};
|
|
937
1192
|
|
|
938
1193
|
// src/components/Map/components/MapRightControls.tsx
|
|
939
|
-
var
|
|
1194
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
940
1195
|
var MapRightControls = ({
|
|
941
1196
|
customControls = [],
|
|
942
1197
|
etaBarHeight,
|
|
@@ -968,7 +1223,7 @@ var MapRightControls = ({
|
|
|
968
1223
|
const peekStyle = typeof drawerPeekHeight === "number" ? `${drawerPeekHeight}px` : drawerPeekHeight || "15%";
|
|
969
1224
|
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)`;
|
|
970
1225
|
const isControlsVisible = side !== "bottom" || drawerState !== "full";
|
|
971
|
-
return /* @__PURE__ */ (0,
|
|
1226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
972
1227
|
"div",
|
|
973
1228
|
{
|
|
974
1229
|
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"}`,
|
|
@@ -976,27 +1231,29 @@ var MapRightControls = ({
|
|
|
976
1231
|
bottom: controlsBottom
|
|
977
1232
|
},
|
|
978
1233
|
children: [
|
|
979
|
-
aboveControls.length > 0 && /* @__PURE__ */ (0,
|
|
980
|
-
control.tooltip && /* @__PURE__ */ (0,
|
|
981
|
-
/* @__PURE__ */ (0,
|
|
982
|
-
|
|
1234
|
+
aboveControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-2 pointer-events-auto", children: aboveControls.map((control) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative group flex items-center", children: [
|
|
1235
|
+
control.tooltip && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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 }),
|
|
1236
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1237
|
+
Button,
|
|
983
1238
|
{
|
|
984
|
-
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" : "
|
|
1239
|
+
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" : ""}`,
|
|
985
1240
|
onClick: control.onPress,
|
|
1241
|
+
variant: "ghost",
|
|
986
1242
|
children: control.icon
|
|
987
1243
|
}
|
|
988
1244
|
)
|
|
989
1245
|
] }, control.id)) }),
|
|
990
|
-
isCompassVisible && (customCompassButton ? /* @__PURE__ */ (0,
|
|
991
|
-
|
|
1246
|
+
isCompassVisible && (customCompassButton ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pointer-events-auto", children: customCompassButton }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1247
|
+
Button,
|
|
992
1248
|
{
|
|
993
|
-
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"}`,
|
|
1249
|
+
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"}`,
|
|
994
1250
|
onClick: () => onResetBearing({ pitch: initialViewState?.pitch ?? 0 }),
|
|
995
1251
|
style: {
|
|
996
1252
|
transform: isCompassVisible ? "scale(1) rotate(0deg)" : "scale(0.7) rotate(0deg)"
|
|
997
1253
|
},
|
|
998
1254
|
title: "Reset bearing to North",
|
|
999
|
-
|
|
1255
|
+
variant: "ghost",
|
|
1256
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1000
1257
|
"svg",
|
|
1001
1258
|
{
|
|
1002
1259
|
className: "w-7 h-7 transition-transform duration-75 ease-out",
|
|
@@ -1006,7 +1263,7 @@ var MapRightControls = ({
|
|
|
1006
1263
|
},
|
|
1007
1264
|
viewBox: "0 0 24 24",
|
|
1008
1265
|
children: [
|
|
1009
|
-
/* @__PURE__ */ (0,
|
|
1266
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1010
1267
|
"circle",
|
|
1011
1268
|
{
|
|
1012
1269
|
cx: "12",
|
|
@@ -1017,23 +1274,24 @@ var MapRightControls = ({
|
|
|
1017
1274
|
strokeWidth: "1"
|
|
1018
1275
|
}
|
|
1019
1276
|
),
|
|
1020
|
-
/* @__PURE__ */ (0,
|
|
1021
|
-
/* @__PURE__ */ (0,
|
|
1022
|
-
/* @__PURE__ */ (0,
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 4.5L15 12H9L12 4.5Z", fill: "#ef4444" }),
|
|
1278
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 19.5L9 12H15L12 19.5Z", fill: "#f4f4f5" }),
|
|
1279
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", fill: "#18181b", r: "1.5" })
|
|
1023
1280
|
]
|
|
1024
1281
|
}
|
|
1025
1282
|
)
|
|
1026
1283
|
}
|
|
1027
1284
|
) })),
|
|
1028
|
-
customRecenterButton ? /* @__PURE__ */ (0,
|
|
1029
|
-
|
|
1285
|
+
customRecenterButton ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pointer-events-auto", children: customRecenterButton }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1286
|
+
Button,
|
|
1030
1287
|
{
|
|
1031
|
-
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" : "
|
|
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 ${isMapCentered ? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-zinc-950" : ""}`,
|
|
1032
1289
|
onClick: () => onRecenter(),
|
|
1033
1290
|
title: "Recenter Map",
|
|
1291
|
+
variant: "ghost",
|
|
1034
1292
|
children: isMapCentered ? (
|
|
1035
1293
|
/* Filled active lock state */
|
|
1036
|
-
/* @__PURE__ */ (0,
|
|
1294
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1037
1295
|
"svg",
|
|
1038
1296
|
{
|
|
1039
1297
|
className: "w-6 h-6 text-cyan-400",
|
|
@@ -1042,18 +1300,18 @@ var MapRightControls = ({
|
|
|
1042
1300
|
strokeWidth: "2.2",
|
|
1043
1301
|
viewBox: "0 0 24 24",
|
|
1044
1302
|
children: [
|
|
1045
|
-
/* @__PURE__ */ (0,
|
|
1046
|
-
/* @__PURE__ */ (0,
|
|
1047
|
-
/* @__PURE__ */ (0,
|
|
1048
|
-
/* @__PURE__ */ (0,
|
|
1049
|
-
/* @__PURE__ */ (0,
|
|
1050
|
-
/* @__PURE__ */ (0,
|
|
1303
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "8" }),
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", fill: "currentColor", r: "3" }),
|
|
1305
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
|
|
1306
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
|
|
1307
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
|
|
1308
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
|
|
1051
1309
|
]
|
|
1052
1310
|
}
|
|
1053
1311
|
)
|
|
1054
1312
|
) : (
|
|
1055
1313
|
/* Outlined drifted state */
|
|
1056
|
-
/* @__PURE__ */ (0,
|
|
1314
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1057
1315
|
"svg",
|
|
1058
1316
|
{
|
|
1059
1317
|
className: "w-6 h-6 text-zinc-300",
|
|
@@ -1062,24 +1320,25 @@ var MapRightControls = ({
|
|
|
1062
1320
|
strokeWidth: "2",
|
|
1063
1321
|
viewBox: "0 0 24 24",
|
|
1064
1322
|
children: [
|
|
1065
|
-
/* @__PURE__ */ (0,
|
|
1066
|
-
/* @__PURE__ */ (0,
|
|
1067
|
-
/* @__PURE__ */ (0,
|
|
1068
|
-
/* @__PURE__ */ (0,
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1323
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "8" }),
|
|
1324
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", x2: "12", y1: "2", y2: "4" }),
|
|
1325
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", x2: "12", y1: "20", y2: "22" }),
|
|
1326
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "2", x2: "4", y1: "12", y2: "12" }),
|
|
1327
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "20", x2: "22", y1: "12", y2: "12" })
|
|
1070
1328
|
]
|
|
1071
1329
|
}
|
|
1072
1330
|
)
|
|
1073
1331
|
)
|
|
1074
1332
|
}
|
|
1075
1333
|
) }),
|
|
1076
|
-
belowControls.length > 0 && /* @__PURE__ */ (0,
|
|
1077
|
-
control.tooltip && /* @__PURE__ */ (0,
|
|
1078
|
-
/* @__PURE__ */ (0,
|
|
1079
|
-
|
|
1334
|
+
belowControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-2 pointer-events-auto", children: belowControls.map((control) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative group flex items-center", children: [
|
|
1335
|
+
control.tooltip && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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 }),
|
|
1336
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1337
|
+
Button,
|
|
1080
1338
|
{
|
|
1081
|
-
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" : "
|
|
1339
|
+
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" : ""}`,
|
|
1082
1340
|
onClick: control.onPress,
|
|
1341
|
+
variant: "ghost",
|
|
1083
1342
|
children: control.icon
|
|
1084
1343
|
}
|
|
1085
1344
|
)
|
|
@@ -1091,7 +1350,7 @@ var MapRightControls = ({
|
|
|
1091
1350
|
|
|
1092
1351
|
// src/components/Map/MapContext.tsx
|
|
1093
1352
|
var import_react2 = require("react");
|
|
1094
|
-
var
|
|
1353
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1095
1354
|
var MapControlsContext = (0, import_react2.createContext)(
|
|
1096
1355
|
null
|
|
1097
1356
|
);
|
|
@@ -1202,7 +1461,7 @@ var SDKMapProvider = ({
|
|
|
1202
1461
|
setInsets
|
|
1203
1462
|
]
|
|
1204
1463
|
);
|
|
1205
|
-
return /* @__PURE__ */ (0,
|
|
1464
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MapControlsContext.Provider, { value: contextValue, children });
|
|
1206
1465
|
};
|
|
1207
1466
|
var useMapControls = () => {
|
|
1208
1467
|
const context = (0, import_react2.useContext)(MapControlsContext);
|
|
@@ -1214,7 +1473,7 @@ var useMapControls = () => {
|
|
|
1214
1473
|
|
|
1215
1474
|
// src/components/Map/components/MapControls.tsx
|
|
1216
1475
|
var import_react3 = require("react");
|
|
1217
|
-
var
|
|
1476
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1218
1477
|
var resolveHeightToPixels2 = (height, containerHeight) => {
|
|
1219
1478
|
if (typeof height === "number") {
|
|
1220
1479
|
return height;
|
|
@@ -1389,9 +1648,9 @@ var MapControls = ({
|
|
|
1389
1648
|
etaOpacity = drawerState === "full" ? 0 : 1;
|
|
1390
1649
|
etaBottomStyle = `calc(1rem + ${bottomInset}px)`;
|
|
1391
1650
|
}
|
|
1392
|
-
return /* @__PURE__ */ (0,
|
|
1393
|
-
/* @__PURE__ */ (0,
|
|
1394
|
-
/* @__PURE__ */ (0,
|
|
1651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
1652
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, style: { display: "none" } }),
|
|
1653
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1395
1654
|
MapDrawer,
|
|
1396
1655
|
{
|
|
1397
1656
|
clampedDragOffset,
|
|
@@ -1417,7 +1676,7 @@ var MapControls = ({
|
|
|
1417
1676
|
touchStartY
|
|
1418
1677
|
}
|
|
1419
1678
|
),
|
|
1420
|
-
/* @__PURE__ */ (0,
|
|
1679
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1421
1680
|
MapRightControls,
|
|
1422
1681
|
{
|
|
1423
1682
|
clampedDragOffset,
|
|
@@ -1439,7 +1698,7 @@ var MapControls = ({
|
|
|
1439
1698
|
side
|
|
1440
1699
|
}
|
|
1441
1700
|
),
|
|
1442
|
-
resolvedEtaData && /* @__PURE__ */ (0,
|
|
1701
|
+
resolvedEtaData && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1443
1702
|
MapEtaPanel,
|
|
1444
1703
|
{
|
|
1445
1704
|
etaData: resolvedEtaData,
|
|
@@ -1458,9 +1717,9 @@ var MapControls = ({
|
|
|
1458
1717
|
|
|
1459
1718
|
// src/components/Map/components/MapMenu.tsx
|
|
1460
1719
|
var import_react4 = require("react");
|
|
1461
|
-
var
|
|
1720
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1462
1721
|
var MapMenu = ({ children }) => {
|
|
1463
|
-
return /* @__PURE__ */ (0,
|
|
1722
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children });
|
|
1464
1723
|
};
|
|
1465
1724
|
var MapMenuItem = ({
|
|
1466
1725
|
id,
|
|
@@ -1479,7 +1738,7 @@ var MapMenuItem = ({
|
|
|
1479
1738
|
context.setDrawerState("closed");
|
|
1480
1739
|
}
|
|
1481
1740
|
};
|
|
1482
|
-
return /* @__PURE__ */ (0,
|
|
1741
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1483
1742
|
"button",
|
|
1484
1743
|
{
|
|
1485
1744
|
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"}`,
|
|
@@ -1487,12 +1746,12 @@ var MapMenuItem = ({
|
|
|
1487
1746
|
onClick: handleClick,
|
|
1488
1747
|
type: "button",
|
|
1489
1748
|
children: [
|
|
1490
|
-
icon && /* @__PURE__ */ (0,
|
|
1749
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 text-zinc-300", children: [
|
|
1491
1750
|
icon,
|
|
1492
|
-
badge !== void 0 && /* @__PURE__ */ (0,
|
|
1751
|
+
badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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 })
|
|
1493
1752
|
] }),
|
|
1494
|
-
/* @__PURE__ */ (0,
|
|
1495
|
-
/* @__PURE__ */ (0,
|
|
1753
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 flex flex-col justify-center", children: [
|
|
1754
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium tracking-wide flex-1", children: label }),
|
|
1496
1755
|
children
|
|
1497
1756
|
] })
|
|
1498
1757
|
]
|
|
@@ -1506,7 +1765,7 @@ var MapMenuTitle = ({
|
|
|
1506
1765
|
showDivider = true,
|
|
1507
1766
|
className = ""
|
|
1508
1767
|
}) => {
|
|
1509
|
-
return /* @__PURE__ */ (0,
|
|
1768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1510
1769
|
"div",
|
|
1511
1770
|
{
|
|
1512
1771
|
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" : ""}`,
|
|
@@ -1518,14 +1777,14 @@ MapMenuTitle.displayName = "MapMenuTitle";
|
|
|
1518
1777
|
var MapMenuDivider = ({
|
|
1519
1778
|
className = ""
|
|
1520
1779
|
}) => {
|
|
1521
|
-
return /* @__PURE__ */ (0,
|
|
1780
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `h-[1px] bg-white/10 my-3 mx-3.5 ${className}` });
|
|
1522
1781
|
};
|
|
1523
1782
|
MapMenuDivider.displayName = "MapMenuDivider";
|
|
1524
1783
|
var MapMenuFooter = ({
|
|
1525
1784
|
children,
|
|
1526
1785
|
className = ""
|
|
1527
1786
|
}) => {
|
|
1528
|
-
return /* @__PURE__ */ (0,
|
|
1787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1529
1788
|
"div",
|
|
1530
1789
|
{
|
|
1531
1790
|
className: `mt-auto pt-4 border-t border-white/10 px-3.5 text-xs text-zinc-500 font-medium ${className}`,
|
|
@@ -1683,7 +1942,8 @@ var useLiveRouting = ({
|
|
|
1683
1942
|
const [error, setError] = (0, import_react6.useState)(null);
|
|
1684
1943
|
const [mode, setMode] = (0, import_react6.useState)(initialMode);
|
|
1685
1944
|
const userLocationState = useUserLocation();
|
|
1686
|
-
const
|
|
1945
|
+
const calculationOrigin = manualOrigin || userLocationState.coords;
|
|
1946
|
+
const trackingLocation = userLocationState.coords || manualOrigin;
|
|
1687
1947
|
const lastCalcOrigin = (0, import_react6.useRef)(null);
|
|
1688
1948
|
const lastCalcDest = (0, import_react6.useRef)(null);
|
|
1689
1949
|
const isRequestInProgress = (0, import_react6.useRef)(false);
|
|
@@ -1701,9 +1961,32 @@ var useLiveRouting = ({
|
|
|
1701
1961
|
[]
|
|
1702
1962
|
);
|
|
1703
1963
|
const currentDistanceMeters = (0, import_react6.useMemo)(() => {
|
|
1704
|
-
if (!
|
|
1705
|
-
|
|
1706
|
-
|
|
1964
|
+
if (!trackingLocation || !route || route.geometry.coordinates.length < 2) {
|
|
1965
|
+
if (trackingLocation && destination) {
|
|
1966
|
+
return getDistance(trackingLocation, destination);
|
|
1967
|
+
}
|
|
1968
|
+
return null;
|
|
1969
|
+
}
|
|
1970
|
+
const coords = route.geometry.coordinates;
|
|
1971
|
+
let minDistSq = Infinity;
|
|
1972
|
+
let closestIndex = 0;
|
|
1973
|
+
const getDistSq = (p1, p2) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2;
|
|
1974
|
+
for (let i = 0; i < coords.length; i++) {
|
|
1975
|
+
const d = getDistSq(trackingLocation, coords[i]);
|
|
1976
|
+
if (d < minDistSq) {
|
|
1977
|
+
minDistSq = d;
|
|
1978
|
+
closestIndex = i;
|
|
1979
|
+
}
|
|
1980
|
+
}
|
|
1981
|
+
const remainingCoords = coords.slice(closestIndex + 1);
|
|
1982
|
+
let dist = 0;
|
|
1983
|
+
let prev = trackingLocation;
|
|
1984
|
+
for (const coord of remainingCoords) {
|
|
1985
|
+
dist += getDistance(prev, coord);
|
|
1986
|
+
prev = coord;
|
|
1987
|
+
}
|
|
1988
|
+
return dist;
|
|
1989
|
+
}, [trackingLocation, route, destination, getDistance]);
|
|
1707
1990
|
const calculate = (0, import_react6.useCallback)(
|
|
1708
1991
|
async (origin, dest, isNewDest) => {
|
|
1709
1992
|
if (isRequestInProgress.current) return;
|
|
@@ -1718,7 +2001,15 @@ var useLiveRouting = ({
|
|
|
1718
2001
|
setRoute(data);
|
|
1719
2002
|
setError(null);
|
|
1720
2003
|
if (isNewDest) {
|
|
1721
|
-
|
|
2004
|
+
const coords = data.geometry.coordinates;
|
|
2005
|
+
let sum = 0;
|
|
2006
|
+
for (let i = 0; i < coords.length - 1; i++) {
|
|
2007
|
+
sum += getDistance(
|
|
2008
|
+
coords[i],
|
|
2009
|
+
coords[i + 1]
|
|
2010
|
+
);
|
|
2011
|
+
}
|
|
2012
|
+
setTotalDistance(sum);
|
|
1722
2013
|
}
|
|
1723
2014
|
lastCalcOrigin.current = origin;
|
|
1724
2015
|
lastCalcDest.current = dest;
|
|
@@ -1729,10 +2020,10 @@ var useLiveRouting = ({
|
|
|
1729
2020
|
isRequestInProgress.current = false;
|
|
1730
2021
|
}
|
|
1731
2022
|
},
|
|
1732
|
-
[profile]
|
|
2023
|
+
[profile, getDistance]
|
|
1733
2024
|
);
|
|
1734
2025
|
(0, import_react6.useEffect)(() => {
|
|
1735
|
-
if (!enabled || !destination || !
|
|
2026
|
+
if (!enabled || !destination || !calculationOrigin) {
|
|
1736
2027
|
if (!enabled || !destination) {
|
|
1737
2028
|
setRoute(null);
|
|
1738
2029
|
setTotalDistance(null);
|
|
@@ -1743,17 +2034,19 @@ var useLiveRouting = ({
|
|
|
1743
2034
|
}
|
|
1744
2035
|
const destChanged = !lastCalcDest.current || lastCalcDest.current[0] !== destination[0] || lastCalcDest.current[1] !== destination[1];
|
|
1745
2036
|
if (destChanged) {
|
|
1746
|
-
calculate(
|
|
2037
|
+
calculate(calculationOrigin, destination, true);
|
|
1747
2038
|
} else if (lastCalcOrigin.current) {
|
|
1748
|
-
const
|
|
2039
|
+
const livePos = trackingLocation || calculationOrigin;
|
|
2040
|
+
const dist = getDistance(livePos, lastCalcOrigin.current);
|
|
1749
2041
|
if (dist > recalculateThreshold) {
|
|
1750
|
-
calculate(
|
|
2042
|
+
calculate(livePos, destination, false);
|
|
1751
2043
|
}
|
|
1752
2044
|
} else {
|
|
1753
|
-
calculate(
|
|
2045
|
+
calculate(calculationOrigin, destination, true);
|
|
1754
2046
|
}
|
|
1755
2047
|
}, [
|
|
1756
|
-
|
|
2048
|
+
calculationOrigin,
|
|
2049
|
+
trackingLocation,
|
|
1757
2050
|
destination,
|
|
1758
2051
|
enabled,
|
|
1759
2052
|
recalculateThreshold,
|
|
@@ -1765,7 +2058,7 @@ var useLiveRouting = ({
|
|
|
1765
2058
|
error,
|
|
1766
2059
|
isCalculating,
|
|
1767
2060
|
mode,
|
|
1768
|
-
recalculate: () =>
|
|
2061
|
+
recalculate: () => calculationOrigin && destination && calculate(calculationOrigin, destination, false),
|
|
1769
2062
|
route,
|
|
1770
2063
|
start: () => setMode("navigation"),
|
|
1771
2064
|
totalDistance
|
|
@@ -1829,7 +2122,7 @@ var useTrimmedRoute = (route, userLocation) => {
|
|
|
1829
2122
|
|
|
1830
2123
|
// src/components/Map/layers/RouteLayer.tsx
|
|
1831
2124
|
var import_react_maplibre = require("@vis.gl/react-maplibre");
|
|
1832
|
-
var
|
|
2125
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1833
2126
|
var RouteLayer = ({
|
|
1834
2127
|
geometry,
|
|
1835
2128
|
color = "#3b82f6",
|
|
@@ -1842,8 +2135,8 @@ var RouteLayer = ({
|
|
|
1842
2135
|
properties: {},
|
|
1843
2136
|
type: "Feature"
|
|
1844
2137
|
};
|
|
1845
|
-
return /* @__PURE__ */ (0,
|
|
1846
|
-
/* @__PURE__ */ (0,
|
|
2138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_maplibre.Source, { data, id: "sdk-route-source", type: "geojson", children: [
|
|
2139
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1847
2140
|
import_react_maplibre.Layer,
|
|
1848
2141
|
{
|
|
1849
2142
|
id: "sdk-route-layer-casing",
|
|
@@ -1856,7 +2149,7 @@ var RouteLayer = ({
|
|
|
1856
2149
|
type: "line"
|
|
1857
2150
|
}
|
|
1858
2151
|
),
|
|
1859
|
-
/* @__PURE__ */ (0,
|
|
2152
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1860
2153
|
import_react_maplibre.Layer,
|
|
1861
2154
|
{
|
|
1862
2155
|
id: "sdk-route-layer",
|
|
@@ -1883,7 +2176,7 @@ var import_maplibre_gl = require("maplibre-gl/dist/maplibre-gl.css");
|
|
|
1883
2176
|
// src/components/Map/layers/POILayers.tsx
|
|
1884
2177
|
var import_react_maplibre2 = require("@vis.gl/react-maplibre");
|
|
1885
2178
|
var import_react8 = require("react");
|
|
1886
|
-
var
|
|
2179
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1887
2180
|
function createEmojiIcon(emoji, size = 64) {
|
|
1888
2181
|
const canvas = document.createElement("canvas");
|
|
1889
2182
|
canvas.width = size;
|
|
@@ -1960,7 +2253,7 @@ var POILayers = ({ pois }) => {
|
|
|
1960
2253
|
}),
|
|
1961
2254
|
[glPois]
|
|
1962
2255
|
);
|
|
1963
|
-
return /* @__PURE__ */ (0,
|
|
2256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_maplibre2.Source, { data: geojson, id: "sdk-pois", type: "geojson", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1964
2257
|
import_react_maplibre2.Layer,
|
|
1965
2258
|
{
|
|
1966
2259
|
id: "sdk-poi-layer",
|
|
@@ -1997,11 +2290,11 @@ var POILayers = ({ pois }) => {
|
|
|
1997
2290
|
|
|
1998
2291
|
// src/components/Map/layers/POIMarkers.tsx
|
|
1999
2292
|
var import_react_maplibre3 = require("@vis.gl/react-maplibre");
|
|
2000
|
-
var
|
|
2293
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2001
2294
|
var POIMarkers = ({ pois, onClick }) => {
|
|
2002
2295
|
const markerPois = pois.filter((p) => p.displayMode === "marker");
|
|
2003
2296
|
if (markerPois.length === 0) return null;
|
|
2004
|
-
return /* @__PURE__ */ (0,
|
|
2297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: markerPois.map((poi) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2005
2298
|
import_react_maplibre3.Marker,
|
|
2006
2299
|
{
|
|
2007
2300
|
anchor: "bottom",
|
|
@@ -2011,7 +2304,7 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
2011
2304
|
e.originalEvent.stopPropagation();
|
|
2012
2305
|
if (onClick) onClick(poi);
|
|
2013
2306
|
},
|
|
2014
|
-
children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ (0,
|
|
2307
|
+
children: poi.markerComponent ? poi.markerComponent : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2015
2308
|
"div",
|
|
2016
2309
|
{
|
|
2017
2310
|
style: {
|
|
@@ -2020,7 +2313,7 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
2020
2313
|
transform: "transition-transform duration-200 hover:scale-110"
|
|
2021
2314
|
},
|
|
2022
2315
|
children: [
|
|
2023
|
-
/* @__PURE__ */ (0,
|
|
2316
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2024
2317
|
"div",
|
|
2025
2318
|
{
|
|
2026
2319
|
style: {
|
|
@@ -2033,7 +2326,7 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
2033
2326
|
justifyContent: "center",
|
|
2034
2327
|
width: "32px"
|
|
2035
2328
|
},
|
|
2036
|
-
children: poi.emoji ? /* @__PURE__ */ (0,
|
|
2329
|
+
children: poi.emoji ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: "16px" }, children: poi.emoji }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2037
2330
|
"div",
|
|
2038
2331
|
{
|
|
2039
2332
|
style: {
|
|
@@ -2046,7 +2339,7 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
2046
2339
|
)
|
|
2047
2340
|
}
|
|
2048
2341
|
),
|
|
2049
|
-
/* @__PURE__ */ (0,
|
|
2342
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2050
2343
|
"div",
|
|
2051
2344
|
{
|
|
2052
2345
|
style: {
|
|
@@ -2069,19 +2362,19 @@ var POIMarkers = ({ pois, onClick }) => {
|
|
|
2069
2362
|
|
|
2070
2363
|
// src/components/Map/layers/UserLocationLayer.tsx
|
|
2071
2364
|
var import_react_maplibre4 = require("@vis.gl/react-maplibre");
|
|
2072
|
-
var
|
|
2365
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2073
2366
|
var UserLocationLayer = ({
|
|
2074
2367
|
forcedLocation,
|
|
2075
2368
|
heading
|
|
2076
2369
|
}) => {
|
|
2077
2370
|
if (!forcedLocation) return null;
|
|
2078
|
-
return /* @__PURE__ */ (0,
|
|
2371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2079
2372
|
import_react_maplibre4.Marker,
|
|
2080
2373
|
{
|
|
2081
2374
|
anchor: "center",
|
|
2082
2375
|
latitude: forcedLocation[1],
|
|
2083
2376
|
longitude: forcedLocation[0],
|
|
2084
|
-
children: /* @__PURE__ */ (0,
|
|
2377
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2085
2378
|
"div",
|
|
2086
2379
|
{
|
|
2087
2380
|
style: {
|
|
@@ -2091,7 +2384,7 @@ var UserLocationLayer = ({
|
|
|
2091
2384
|
position: "relative"
|
|
2092
2385
|
},
|
|
2093
2386
|
children: [
|
|
2094
|
-
/* @__PURE__ */ (0,
|
|
2387
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2095
2388
|
"div",
|
|
2096
2389
|
{
|
|
2097
2390
|
style: {
|
|
@@ -2104,7 +2397,7 @@ var UserLocationLayer = ({
|
|
|
2104
2397
|
}
|
|
2105
2398
|
}
|
|
2106
2399
|
),
|
|
2107
|
-
heading !== void 0 && heading !== null && /* @__PURE__ */ (0,
|
|
2400
|
+
heading !== void 0 && heading !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2108
2401
|
"div",
|
|
2109
2402
|
{
|
|
2110
2403
|
style: {
|
|
@@ -2114,13 +2407,13 @@ var UserLocationLayer = ({
|
|
|
2114
2407
|
width: "60px",
|
|
2115
2408
|
zIndex: 0
|
|
2116
2409
|
},
|
|
2117
|
-
children: /* @__PURE__ */ (0,
|
|
2410
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2118
2411
|
"svg",
|
|
2119
2412
|
{
|
|
2120
2413
|
style: { height: "100%", width: "100%" },
|
|
2121
2414
|
viewBox: "0 0 100 100",
|
|
2122
2415
|
children: [
|
|
2123
|
-
/* @__PURE__ */ (0,
|
|
2416
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2124
2417
|
"radialGradient",
|
|
2125
2418
|
{
|
|
2126
2419
|
cx: "50%",
|
|
@@ -2130,7 +2423,7 @@ var UserLocationLayer = ({
|
|
|
2130
2423
|
id: "grad1",
|
|
2131
2424
|
r: "50%",
|
|
2132
2425
|
children: [
|
|
2133
|
-
/* @__PURE__ */ (0,
|
|
2426
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2134
2427
|
"stop",
|
|
2135
2428
|
{
|
|
2136
2429
|
offset: "0%",
|
|
@@ -2140,7 +2433,7 @@ var UserLocationLayer = ({
|
|
|
2140
2433
|
}
|
|
2141
2434
|
}
|
|
2142
2435
|
),
|
|
2143
|
-
/* @__PURE__ */ (0,
|
|
2436
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2144
2437
|
"stop",
|
|
2145
2438
|
{
|
|
2146
2439
|
offset: "100%",
|
|
@@ -2153,7 +2446,7 @@ var UserLocationLayer = ({
|
|
|
2153
2446
|
]
|
|
2154
2447
|
}
|
|
2155
2448
|
) }),
|
|
2156
|
-
/* @__PURE__ */ (0,
|
|
2449
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2157
2450
|
"path",
|
|
2158
2451
|
{
|
|
2159
2452
|
d: "M 50 50 L 35 0 A 50 50 0 0 1 65 0 Z",
|
|
@@ -2165,7 +2458,7 @@ var UserLocationLayer = ({
|
|
|
2165
2458
|
)
|
|
2166
2459
|
}
|
|
2167
2460
|
),
|
|
2168
|
-
/* @__PURE__ */ (0,
|
|
2461
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2169
2462
|
"div",
|
|
2170
2463
|
{
|
|
2171
2464
|
style: {
|
|
@@ -2179,7 +2472,7 @@ var UserLocationLayer = ({
|
|
|
2179
2472
|
width: "20px",
|
|
2180
2473
|
zIndex: 1
|
|
2181
2474
|
},
|
|
2182
|
-
children: /* @__PURE__ */ (0,
|
|
2475
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2183
2476
|
"div",
|
|
2184
2477
|
{
|
|
2185
2478
|
style: {
|
|
@@ -2193,7 +2486,7 @@ var UserLocationLayer = ({
|
|
|
2193
2486
|
)
|
|
2194
2487
|
}
|
|
2195
2488
|
),
|
|
2196
|
-
/* @__PURE__ */ (0,
|
|
2489
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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; } }` })
|
|
2197
2490
|
]
|
|
2198
2491
|
}
|
|
2199
2492
|
)
|
|
@@ -2202,7 +2495,7 @@ var UserLocationLayer = ({
|
|
|
2202
2495
|
};
|
|
2203
2496
|
|
|
2204
2497
|
// src/components/Map/Map.tsx
|
|
2205
|
-
var
|
|
2498
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2206
2499
|
var MapInternal = ({
|
|
2207
2500
|
initialViewState = {
|
|
2208
2501
|
latitude: 45.90583599233422,
|
|
@@ -2243,14 +2536,18 @@ var MapInternal = ({
|
|
|
2243
2536
|
const mapRef = (0, import_react9.useRef)(null);
|
|
2244
2537
|
const userLocationState = useUserLocation();
|
|
2245
2538
|
const [progNav, setProgNav] = (0, import_react9.useState)(null);
|
|
2539
|
+
const [isAborted, setIsAborted] = (0, import_react9.useState)(false);
|
|
2246
2540
|
(0, import_react9.useEffect)(() => {
|
|
2247
2541
|
const unsubCreate = sdk.on("SDK_NAVIGATION_CREATE", (payload) => {
|
|
2542
|
+
setIsAborted(false);
|
|
2248
2543
|
setProgNav(payload);
|
|
2249
2544
|
});
|
|
2250
2545
|
const unsubStart = sdk.on("SDK_NAVIGATION_START", () => {
|
|
2546
|
+
setIsAborted(false);
|
|
2251
2547
|
setProgNav((prev) => prev ? { ...prev, mode: "navigation" } : null);
|
|
2252
2548
|
});
|
|
2253
2549
|
const unsubAbort = sdk.on("SDK_NAVIGATION_ABORT", () => {
|
|
2550
|
+
setIsAborted(true);
|
|
2254
2551
|
setProgNav(null);
|
|
2255
2552
|
});
|
|
2256
2553
|
return () => {
|
|
@@ -2273,9 +2570,19 @@ var MapInternal = ({
|
|
|
2273
2570
|
onNavigationModeChange(internalNav.mode);
|
|
2274
2571
|
}
|
|
2275
2572
|
}, [internalNav.mode, onNavigationModeChange, navigation]);
|
|
2276
|
-
const
|
|
2277
|
-
const
|
|
2278
|
-
|
|
2573
|
+
const prevDest = (0, import_react9.useRef)(null);
|
|
2574
|
+
const currentDest = effectiveNavOptions?.destination;
|
|
2575
|
+
(0, import_react9.useEffect)(() => {
|
|
2576
|
+
if (currentDest) {
|
|
2577
|
+
if (!prevDest.current || prevDest.current[0] !== currentDest[0] || prevDest.current[1] !== currentDest[1]) {
|
|
2578
|
+
setIsAborted(false);
|
|
2579
|
+
}
|
|
2580
|
+
}
|
|
2581
|
+
prevDest.current = currentDest;
|
|
2582
|
+
}, [currentDest]);
|
|
2583
|
+
const navigationData = !isAborted ? effectiveNavOptions ? internalNav : externalNavigationData : void 0;
|
|
2584
|
+
const route = !isAborted ? effectiveNavOptions ? internalNav.route?.geometry : externalRoute : void 0;
|
|
2585
|
+
const showNavigationUI = !isAborted && effectiveNavOptions?.showUI !== false && (effectiveNavOptions ? !!effectiveNavOptions.destination : externalShowNavigationUI);
|
|
2279
2586
|
const mode = navigationData?.mode || "preview";
|
|
2280
2587
|
const resolvedInitialFollow = mapControls ? mapControls.isFollowing : initialFollowUser;
|
|
2281
2588
|
const isFollowingRef = (0, import_react9.useRef)(resolvedInitialFollow);
|
|
@@ -2324,15 +2631,29 @@ var MapInternal = ({
|
|
|
2324
2631
|
}
|
|
2325
2632
|
}, [initialFollowUser, setFollowMode, userLocationState.coords]);
|
|
2326
2633
|
const lastAutoLockedRouteRef = (0, import_react9.useRef)(null);
|
|
2634
|
+
const lastModeRef = (0, import_react9.useRef)(null);
|
|
2327
2635
|
(0, import_react9.useEffect)(() => {
|
|
2328
2636
|
if (!route || !mapRef.current) {
|
|
2329
2637
|
if (!route) lastAutoLockedRouteRef.current = null;
|
|
2330
2638
|
return;
|
|
2331
2639
|
}
|
|
2332
2640
|
const isNewRoute = route !== lastAutoLockedRouteRef.current;
|
|
2333
|
-
|
|
2641
|
+
const modeChanged = lastModeRef.current !== mode;
|
|
2334
2642
|
if (mode === "navigation") {
|
|
2335
2643
|
setFollowMode(true);
|
|
2644
|
+
if ((modeChanged || isNewRoute) && userLocationState.coords && mapRef.current) {
|
|
2645
|
+
isFlyingRef.current = true;
|
|
2646
|
+
mapRef.current.flyTo({
|
|
2647
|
+
center: userLocationState.coords,
|
|
2648
|
+
duration: 1e3,
|
|
2649
|
+
essential: true,
|
|
2650
|
+
zoom: 17
|
|
2651
|
+
// Zoomed in on user for active guidance
|
|
2652
|
+
});
|
|
2653
|
+
setTimeout(() => {
|
|
2654
|
+
isFlyingRef.current = false;
|
|
2655
|
+
}, 1050);
|
|
2656
|
+
}
|
|
2336
2657
|
} else if (mode === "preview" && isNewRoute) {
|
|
2337
2658
|
setFollowMode(false);
|
|
2338
2659
|
const coords = route.coordinates;
|
|
@@ -2356,7 +2677,8 @@ var MapInternal = ({
|
|
|
2356
2677
|
}
|
|
2357
2678
|
}
|
|
2358
2679
|
lastAutoLockedRouteRef.current = route;
|
|
2359
|
-
|
|
2680
|
+
lastModeRef.current = mode;
|
|
2681
|
+
}, [route, mode, setFollowMode, userLocationState.coords]);
|
|
2360
2682
|
(0, import_react9.useEffect)(() => {
|
|
2361
2683
|
if (isFollowingRef.current && !isFlyingRef.current && userLocationState.coords && mapRef.current) {
|
|
2362
2684
|
mapRef.current.easeTo({
|
|
@@ -2372,33 +2694,33 @@ var MapInternal = ({
|
|
|
2372
2694
|
route,
|
|
2373
2695
|
showUserLocation ? userLocationState.coords : null
|
|
2374
2696
|
);
|
|
2375
|
-
const
|
|
2376
|
-
const
|
|
2697
|
+
const currentDistMeters = navigationData?.currentDistanceMeters ?? null;
|
|
2698
|
+
const totalDist = navigationData?.totalDistance ?? null;
|
|
2699
|
+
const routeDurationSeconds = navigationData?.route?.durationSeconds ?? null;
|
|
2700
|
+
const remainingMeters = currentDistMeters ?? 0;
|
|
2701
|
+
const etaMins = (() => {
|
|
2702
|
+
if (!routeDurationSeconds || !totalDist || !currentDistMeters) return 0;
|
|
2703
|
+
const ratio = currentDistMeters / totalDist;
|
|
2704
|
+
return Math.ceil(routeDurationSeconds * ratio / 60);
|
|
2705
|
+
})();
|
|
2377
2706
|
const kmRemaining = remainingMeters / 1e3;
|
|
2378
|
-
const
|
|
2379
|
-
const
|
|
2380
|
-
|
|
2381
|
-
if (!navigationData || !route) return void 0;
|
|
2382
|
-
return {
|
|
2383
|
-
distanceRemainingKm: kmRemaining,
|
|
2384
|
-
etaMins,
|
|
2385
|
-
label: mode === "navigation" ? "Walking Guidance Active" : "Route Preview",
|
|
2386
|
-
mode,
|
|
2387
|
-
onAbort: onNavigationAbort || (() => {
|
|
2388
|
-
setProgNav(null);
|
|
2389
|
-
}),
|
|
2390
|
-
onStart: navigationData.start,
|
|
2391
|
-
progress: progressValue
|
|
2392
|
-
};
|
|
2393
|
-
}, [
|
|
2394
|
-
navigationData,
|
|
2395
|
-
route,
|
|
2707
|
+
const progressValue = totalDist && totalDist > 0 ? Math.min(100, Math.max(0, (totalDist - remainingMeters) / totalDist * 100)) : 0;
|
|
2708
|
+
const showEtaData = navigationData && route ? {
|
|
2709
|
+
distanceRemainingKm: kmRemaining,
|
|
2396
2710
|
etaMins,
|
|
2397
|
-
|
|
2711
|
+
label: mode === "navigation" ? "Walking Guidance Active" : "Route Preview",
|
|
2398
2712
|
mode,
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2713
|
+
onAbort: () => {
|
|
2714
|
+
setIsAborted(true);
|
|
2715
|
+
setProgNav(null);
|
|
2716
|
+
sdk.navigation.abort();
|
|
2717
|
+
if (onNavigationAbort) {
|
|
2718
|
+
onNavigationAbort();
|
|
2719
|
+
}
|
|
2720
|
+
},
|
|
2721
|
+
onStart: navigationData.start,
|
|
2722
|
+
progress: progressValue
|
|
2723
|
+
} : void 0;
|
|
2402
2724
|
const setEtaDataCtx = mapControls?.setEtaData;
|
|
2403
2725
|
(0, import_react9.useEffect)(() => {
|
|
2404
2726
|
if (setEtaDataCtx) {
|
|
@@ -2414,7 +2736,7 @@ var MapInternal = ({
|
|
|
2414
2736
|
const defaultMenuItems = (0, import_react9.useMemo)(
|
|
2415
2737
|
() => [
|
|
2416
2738
|
{
|
|
2417
|
-
icon: /* @__PURE__ */ (0,
|
|
2739
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2418
2740
|
"svg",
|
|
2419
2741
|
{
|
|
2420
2742
|
className: "w-5 h-5",
|
|
@@ -2422,7 +2744,7 @@ var MapInternal = ({
|
|
|
2422
2744
|
stroke: "currentColor",
|
|
2423
2745
|
strokeWidth: "2",
|
|
2424
2746
|
viewBox: "0 0 24 24",
|
|
2425
|
-
children: /* @__PURE__ */ (0,
|
|
2747
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2426
2748
|
"path",
|
|
2427
2749
|
{
|
|
2428
2750
|
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",
|
|
@@ -2473,7 +2795,7 @@ var MapInternal = ({
|
|
|
2473
2795
|
mapLibreChildren2.push(child);
|
|
2474
2796
|
}
|
|
2475
2797
|
});
|
|
2476
|
-
const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ (0,
|
|
2798
|
+
const menuContentFromChildren2 = extractedMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MapMenu, { children: extractedMenuItems }) : null;
|
|
2477
2799
|
return { mapLibreChildren: mapLibreChildren2, menuContentFromChildren: menuContentFromChildren2 };
|
|
2478
2800
|
}, [children]);
|
|
2479
2801
|
const handleMapClick = (e) => {
|
|
@@ -2547,13 +2869,13 @@ var MapInternal = ({
|
|
|
2547
2869
|
}
|
|
2548
2870
|
}
|
|
2549
2871
|
};
|
|
2550
|
-
return /* @__PURE__ */ (0,
|
|
2872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
2551
2873
|
"div",
|
|
2552
2874
|
{
|
|
2553
2875
|
className: `w-full h-full overflow-hidden relative ${className}`,
|
|
2554
2876
|
style,
|
|
2555
2877
|
children: [
|
|
2556
|
-
/* @__PURE__ */ (0,
|
|
2878
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
2557
2879
|
import_react_maplibre5.Map,
|
|
2558
2880
|
{
|
|
2559
2881
|
attributionControl: false,
|
|
@@ -2582,23 +2904,23 @@ var MapInternal = ({
|
|
|
2582
2904
|
showUserLocation && userLocationState.coords && (renderUserLocation ? renderUserLocation({
|
|
2583
2905
|
coords: userLocationState.coords,
|
|
2584
2906
|
heading: userLocationState.heading
|
|
2585
|
-
}) : /* @__PURE__ */ (0,
|
|
2907
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2586
2908
|
UserLocationLayer,
|
|
2587
2909
|
{
|
|
2588
2910
|
forcedLocation: userLocationState.coords,
|
|
2589
2911
|
heading: userLocationState.heading
|
|
2590
2912
|
}
|
|
2591
2913
|
)),
|
|
2592
|
-
displayRoute && /* @__PURE__ */ (0,
|
|
2593
|
-
pois.length > 0 && /* @__PURE__ */ (0,
|
|
2594
|
-
/* @__PURE__ */ (0,
|
|
2595
|
-
/* @__PURE__ */ (0,
|
|
2914
|
+
displayRoute && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RouteLayer, { geometry: displayRoute }),
|
|
2915
|
+
pois.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
2916
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(POILayers, { pois }),
|
|
2917
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(POIMarkers, { onClick: onPoiClick, pois })
|
|
2596
2918
|
] }),
|
|
2597
2919
|
mapLibreChildren
|
|
2598
2920
|
]
|
|
2599
2921
|
}
|
|
2600
2922
|
),
|
|
2601
|
-
showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ (0,
|
|
2923
|
+
showControls && mapControls && !mapControls.hasControls && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2602
2924
|
MapControls,
|
|
2603
2925
|
{
|
|
2604
2926
|
drawerContentRef,
|
|
@@ -2620,12 +2942,12 @@ var SDKMapProviderWrapper = ({
|
|
|
2620
2942
|
}) => {
|
|
2621
2943
|
const context = (0, import_react9.useContext)(MapControlsContext);
|
|
2622
2944
|
if (context) {
|
|
2623
|
-
return /* @__PURE__ */ (0,
|
|
2945
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
|
|
2624
2946
|
}
|
|
2625
|
-
return /* @__PURE__ */ (0,
|
|
2947
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SDKMapProvider, { children });
|
|
2626
2948
|
};
|
|
2627
2949
|
var Map2 = (props) => {
|
|
2628
|
-
return /* @__PURE__ */ (0,
|
|
2950
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SDKMapProviderWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_maplibre5.MapProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MapInternal, { ...props }) }) });
|
|
2629
2951
|
};
|
|
2630
2952
|
|
|
2631
2953
|
// src/components/MapWrapper.tsx
|
|
@@ -2822,7 +3144,7 @@ var RoutingService = {
|
|
|
2822
3144
|
};
|
|
2823
3145
|
|
|
2824
3146
|
// package.json
|
|
2825
|
-
var version = "0.2.
|
|
3147
|
+
var version = "0.2.3";
|
|
2826
3148
|
|
|
2827
3149
|
// src/sdk.ts
|
|
2828
3150
|
function deepFreeze(obj) {
|
|
@@ -3155,7 +3477,7 @@ var sdk = deepFreeze(new MiniAppSDK());
|
|
|
3155
3477
|
|
|
3156
3478
|
// src/components/BridgeMocker.tsx
|
|
3157
3479
|
var import_react11 = require("react");
|
|
3158
|
-
var
|
|
3480
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
3159
3481
|
var getBearing = (p1, p2) => {
|
|
3160
3482
|
const lat1 = p1[1] * Math.PI / 180;
|
|
3161
3483
|
const lat2 = p2[1] * Math.PI / 180;
|
|
@@ -3447,16 +3769,17 @@ var BridgeMocker = ({
|
|
|
3447
3769
|
};
|
|
3448
3770
|
}, [appId]);
|
|
3449
3771
|
if (!isReady) return null;
|
|
3450
|
-
return /* @__PURE__ */ (0,
|
|
3451
|
-
/* @__PURE__ */ (0,
|
|
3452
|
-
isMinimized ? /* @__PURE__ */ (0,
|
|
3453
|
-
|
|
3772
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative w-full h-full", children: [
|
|
3773
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full h-full", children }),
|
|
3774
|
+
isMinimized ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3775
|
+
Button,
|
|
3454
3776
|
{
|
|
3455
|
-
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",
|
|
3777
|
+
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!",
|
|
3456
3778
|
onClick: () => setIsMinimized(false),
|
|
3457
3779
|
title: "Open Simulation Controls",
|
|
3458
3780
|
type: "button",
|
|
3459
|
-
|
|
3781
|
+
variant: "ghost",
|
|
3782
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
3460
3783
|
"svg",
|
|
3461
3784
|
{
|
|
3462
3785
|
className: "group-hover:scale-110 transition-transform",
|
|
@@ -3470,41 +3793,49 @@ var BridgeMocker = ({
|
|
|
3470
3793
|
width: "14",
|
|
3471
3794
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3472
3795
|
children: [
|
|
3473
|
-
/* @__PURE__ */ (0,
|
|
3474
|
-
/* @__PURE__ */ (0,
|
|
3475
|
-
/* @__PURE__ */ (0,
|
|
3476
|
-
/* @__PURE__ */ (0,
|
|
3477
|
-
/* @__PURE__ */ (0,
|
|
3478
|
-
/* @__PURE__ */ (0,
|
|
3479
|
-
/* @__PURE__ */ (0,
|
|
3796
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M21 4H3" }),
|
|
3797
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 8H3" }),
|
|
3798
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M21 12H3" }),
|
|
3799
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 16H3" }),
|
|
3800
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M21 20H3" }),
|
|
3801
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "14", cy: "8", r: "2" }),
|
|
3802
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "14", cy: "16", r: "2" })
|
|
3480
3803
|
]
|
|
3481
3804
|
}
|
|
3482
3805
|
)
|
|
3483
3806
|
}
|
|
3484
|
-
) : /* @__PURE__ */ (0,
|
|
3807
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
3485
3808
|
"div",
|
|
3486
3809
|
{
|
|
3487
3810
|
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",
|
|
3488
3811
|
style: { zIndex: 9998 },
|
|
3489
3812
|
children: [
|
|
3490
|
-
/* @__PURE__ */ (0,
|
|
3813
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
3491
3814
|
"div",
|
|
3492
3815
|
{
|
|
3493
3816
|
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",
|
|
3494
3817
|
onClick: () => setIsMinimized(true),
|
|
3495
3818
|
children: [
|
|
3496
|
-
/* @__PURE__ */ (0,
|
|
3497
|
-
/* @__PURE__ */ (0,
|
|
3819
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "font-bold text-slate-100 flex items-center gap-2", children: [
|
|
3820
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-lg", children: "\u{1F6E0}\uFE0F" }),
|
|
3498
3821
|
" Simulation Controls"
|
|
3499
3822
|
] }),
|
|
3500
|
-
/* @__PURE__ */ (0,
|
|
3823
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3824
|
+
Button,
|
|
3825
|
+
{
|
|
3826
|
+
className: "text-slate-500 hover:text-white p-0 h-auto hover:bg-transparent cursor-pointer",
|
|
3827
|
+
type: "button",
|
|
3828
|
+
variant: "ghost",
|
|
3829
|
+
children: "\u25BC"
|
|
3830
|
+
}
|
|
3831
|
+
)
|
|
3501
3832
|
]
|
|
3502
3833
|
}
|
|
3503
3834
|
),
|
|
3504
|
-
/* @__PURE__ */ (0,
|
|
3505
|
-
/* @__PURE__ */ (0,
|
|
3506
|
-
/* @__PURE__ */ (0,
|
|
3507
|
-
/* @__PURE__ */ (0,
|
|
3835
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-4 flex flex-col gap-3", children: [
|
|
3836
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-between items-center", children: [
|
|
3837
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
|
|
3838
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3508
3839
|
"input",
|
|
3509
3840
|
{
|
|
3510
3841
|
checked: autoMove,
|
|
@@ -3513,20 +3844,20 @@ var BridgeMocker = ({
|
|
|
3513
3844
|
type: "checkbox"
|
|
3514
3845
|
}
|
|
3515
3846
|
),
|
|
3516
|
-
/* @__PURE__ */ (0,
|
|
3847
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-slate-200 font-bold", children: [
|
|
3517
3848
|
"Auto-Move ",
|
|
3518
3849
|
simulationPath ? "(Path)" : "(Random)"
|
|
3519
3850
|
] })
|
|
3520
3851
|
] }),
|
|
3521
|
-
/* @__PURE__ */ (0,
|
|
3522
|
-
/* @__PURE__ */ (0,
|
|
3523
|
-
/* @__PURE__ */ (0,
|
|
3852
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3853
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500", children: "Speed:" }),
|
|
3854
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3524
3855
|
"select",
|
|
3525
3856
|
{
|
|
3526
3857
|
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]",
|
|
3527
3858
|
onChange: (e) => setSpeedMultiplier(Number(e.target.value)),
|
|
3528
3859
|
value: speedMultiplier,
|
|
3529
|
-
children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ (0,
|
|
3860
|
+
children: [1, 2, 5, 10, 50, 100, 250].map((s) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("option", { value: s, children: [
|
|
3530
3861
|
s,
|
|
3531
3862
|
"x"
|
|
3532
3863
|
] }, s))
|
|
@@ -3534,10 +3865,10 @@ var BridgeMocker = ({
|
|
|
3534
3865
|
)
|
|
3535
3866
|
] })
|
|
3536
3867
|
] }),
|
|
3537
|
-
/* @__PURE__ */ (0,
|
|
3538
|
-
/* @__PURE__ */ (0,
|
|
3539
|
-
/* @__PURE__ */ (0,
|
|
3540
|
-
/* @__PURE__ */ (0,
|
|
3868
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
|
|
3869
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
3870
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lng" }),
|
|
3871
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3541
3872
|
"input",
|
|
3542
3873
|
{
|
|
3543
3874
|
className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
|
|
@@ -3552,9 +3883,9 @@ var BridgeMocker = ({
|
|
|
3552
3883
|
}
|
|
3553
3884
|
)
|
|
3554
3885
|
] }),
|
|
3555
|
-
/* @__PURE__ */ (0,
|
|
3556
|
-
/* @__PURE__ */ (0,
|
|
3557
|
-
/* @__PURE__ */ (0,
|
|
3886
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
3887
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500 text-left", children: "Lat" }),
|
|
3888
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3558
3889
|
"input",
|
|
3559
3890
|
{
|
|
3560
3891
|
className: "bg-slate-800 border border-slate-700 rounded px-2 py-1 text-white focus:outline-none focus:border-blue-500",
|
|
@@ -3569,9 +3900,9 @@ var BridgeMocker = ({
|
|
|
3569
3900
|
}
|
|
3570
3901
|
)
|
|
3571
3902
|
] }),
|
|
3572
|
-
/* @__PURE__ */ (0,
|
|
3573
|
-
/* @__PURE__ */ (0,
|
|
3574
|
-
/* @__PURE__ */ (0,
|
|
3903
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1 col-span-2", children: [
|
|
3904
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-slate-500", children: "Heading (Degrees)" }),
|
|
3905
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3575
3906
|
"input",
|
|
3576
3907
|
{
|
|
3577
3908
|
className: "w-full accent-blue-500",
|
|
@@ -3585,7 +3916,7 @@ var BridgeMocker = ({
|
|
|
3585
3916
|
value: heading
|
|
3586
3917
|
}
|
|
3587
3918
|
),
|
|
3588
|
-
/* @__PURE__ */ (0,
|
|
3919
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "text-right text-slate-400", children: [
|
|
3589
3920
|
heading,
|
|
3590
3921
|
"\xB0"
|
|
3591
3922
|
] })
|
|
@@ -3600,7 +3931,7 @@ var BridgeMocker = ({
|
|
|
3600
3931
|
|
|
3601
3932
|
// src/components/DebugConsole.tsx
|
|
3602
3933
|
var import_react12 = require("react");
|
|
3603
|
-
var
|
|
3934
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
3604
3935
|
var DebugConsole = ({
|
|
3605
3936
|
isOpen: initialOpen = false,
|
|
3606
3937
|
onClose
|
|
@@ -3644,14 +3975,15 @@ var DebugConsole = ({
|
|
|
3644
3975
|
};
|
|
3645
3976
|
}, [addLog]);
|
|
3646
3977
|
if (!showConsole) {
|
|
3647
|
-
return /* @__PURE__ */ (0,
|
|
3648
|
-
|
|
3978
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3979
|
+
Button,
|
|
3649
3980
|
{
|
|
3650
|
-
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",
|
|
3981
|
+
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!",
|
|
3651
3982
|
onClick: () => setShowConsole(true),
|
|
3652
3983
|
title: "Open Debug Console",
|
|
3653
3984
|
type: "button",
|
|
3654
|
-
|
|
3985
|
+
variant: "ghost",
|
|
3986
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3655
3987
|
"svg",
|
|
3656
3988
|
{
|
|
3657
3989
|
className: "group-hover:scale-110 transition-transform",
|
|
@@ -3665,68 +3997,70 @@ var DebugConsole = ({
|
|
|
3665
3997
|
width: "14",
|
|
3666
3998
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3667
3999
|
children: [
|
|
3668
|
-
/* @__PURE__ */ (0,
|
|
3669
|
-
/* @__PURE__ */ (0,
|
|
3670
|
-
/* @__PURE__ */ (0,
|
|
3671
|
-
/* @__PURE__ */ (0,
|
|
3672
|
-
/* @__PURE__ */ (0,
|
|
3673
|
-
/* @__PURE__ */ (0,
|
|
3674
|
-
/* @__PURE__ */ (0,
|
|
3675
|
-
/* @__PURE__ */ (0,
|
|
3676
|
-
/* @__PURE__ */ (0,
|
|
3677
|
-
/* @__PURE__ */ (0,
|
|
3678
|
-
/* @__PURE__ */ (0,
|
|
4000
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m8 2 1.88 1.88" }),
|
|
4001
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M14.12 3.88 16 2" }),
|
|
4002
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
|
|
4003
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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" }),
|
|
4004
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M12 20v-9" }),
|
|
4005
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
|
|
4006
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6 13H2" }),
|
|
4007
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
|
|
4008
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
|
|
4009
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M22 13h-4" }),
|
|
4010
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
|
|
3679
4011
|
]
|
|
3680
4012
|
}
|
|
3681
4013
|
)
|
|
3682
4014
|
}
|
|
3683
4015
|
);
|
|
3684
4016
|
}
|
|
3685
|
-
return /* @__PURE__ */ (0,
|
|
3686
|
-
/* @__PURE__ */ (0,
|
|
3687
|
-
/* @__PURE__ */ (0,
|
|
3688
|
-
/* @__PURE__ */ (0,
|
|
4017
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("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: [
|
|
4018
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
|
|
4019
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-[10px] font-bold uppercase tracking-widest text-slate-400 flex items-center gap-2", children: [
|
|
4020
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }),
|
|
3689
4021
|
"UP SDK Debug Console"
|
|
3690
4022
|
] }),
|
|
3691
|
-
/* @__PURE__ */ (0,
|
|
3692
|
-
/* @__PURE__ */ (0,
|
|
3693
|
-
|
|
4023
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-4", children: [
|
|
4024
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
4025
|
+
Button,
|
|
3694
4026
|
{
|
|
3695
|
-
className: "text-[10px] text-slate-500 font-bold uppercase hover:text-slate-300 transition-colors",
|
|
4027
|
+
className: "text-[10px] text-slate-500 font-bold uppercase hover:text-slate-300 hover:bg-transparent transition-colors p-0 h-auto cursor-pointer",
|
|
3696
4028
|
onClick: clearLogs,
|
|
3697
4029
|
type: "button",
|
|
4030
|
+
variant: "ghost",
|
|
3698
4031
|
children: "Clear"
|
|
3699
4032
|
}
|
|
3700
4033
|
),
|
|
3701
|
-
/* @__PURE__ */ (0,
|
|
3702
|
-
|
|
4034
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
4035
|
+
Button,
|
|
3703
4036
|
{
|
|
3704
|
-
className: "text-[10px] text-pink-500 font-bold uppercase hover:
|
|
4037
|
+
className: "text-[10px] text-pink-500 font-bold uppercase hover:text-pink-400 hover:bg-transparent transition-colors p-0 h-auto cursor-pointer",
|
|
3705
4038
|
onClick: () => {
|
|
3706
4039
|
setShowConsole(false);
|
|
3707
4040
|
if (onClose) onClose();
|
|
3708
4041
|
},
|
|
3709
4042
|
type: "button",
|
|
4043
|
+
variant: "ghost",
|
|
3710
4044
|
children: "Close"
|
|
3711
4045
|
}
|
|
3712
4046
|
)
|
|
3713
4047
|
] })
|
|
3714
4048
|
] }),
|
|
3715
|
-
/* @__PURE__ */ (0,
|
|
4049
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3716
4050
|
"div",
|
|
3717
4051
|
{
|
|
3718
4052
|
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",
|
|
3719
4053
|
ref: scrollRef,
|
|
3720
|
-
children: logs.length === 0 ? /* @__PURE__ */ (0,
|
|
4054
|
+
children: logs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3721
4055
|
"div",
|
|
3722
4056
|
{
|
|
3723
4057
|
className: "mb-3 pb-3 border-b border-slate-900/50 last:border-0 last:mb-0 last:pb-0",
|
|
3724
4058
|
children: [
|
|
3725
|
-
/* @__PURE__ */ (0,
|
|
3726
|
-
/* @__PURE__ */ (0,
|
|
3727
|
-
/* @__PURE__ */ (0,
|
|
4059
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-2 text-slate-500 mb-1 items-center", children: [
|
|
4060
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[8px]", children: log.time }),
|
|
4061
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-bold text-white uppercase text-[8px] bg-slate-800 px-1.5 py-0.5 rounded leading-none", children: log.label })
|
|
3728
4062
|
] }),
|
|
3729
|
-
/* @__PURE__ */ (0,
|
|
4063
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pre", { className: "whitespace-pre-wrap break-all opacity-90", children: log.content })
|
|
3730
4064
|
]
|
|
3731
4065
|
},
|
|
3732
4066
|
log.id
|
|
@@ -3738,7 +4072,7 @@ var DebugConsole = ({
|
|
|
3738
4072
|
|
|
3739
4073
|
// src/components/SDKProvider.tsx
|
|
3740
4074
|
var import_react13 = require("react");
|
|
3741
|
-
var
|
|
4075
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3742
4076
|
var SDKContext = (0, import_react13.createContext)({ isMocked: false });
|
|
3743
4077
|
var useIsMocked = () => (0, import_react13.useContext)(SDKContext).isMocked;
|
|
3744
4078
|
var SDKProvider = ({
|
|
@@ -3748,14 +4082,14 @@ var SDKProvider = ({
|
|
|
3748
4082
|
}) => {
|
|
3749
4083
|
const isMocked = typeof window !== "undefined" && !(window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView);
|
|
3750
4084
|
const value = (0, import_react13.useMemo)(() => ({ isMocked }), [isMocked]);
|
|
3751
|
-
const content = /* @__PURE__ */ (0,
|
|
4085
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
3752
4086
|
children,
|
|
3753
|
-
debug && /* @__PURE__ */ (0,
|
|
4087
|
+
(debug || isMocked) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DebugConsole, {})
|
|
3754
4088
|
] });
|
|
3755
4089
|
if (isMocked) {
|
|
3756
|
-
return /* @__PURE__ */ (0,
|
|
4090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SDKContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BridgeMocker, { ...mockerProps, children: content }) });
|
|
3757
4091
|
}
|
|
3758
|
-
return /* @__PURE__ */ (0,
|
|
4092
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SDKContext.Provider, { value, children: content });
|
|
3759
4093
|
};
|
|
3760
4094
|
|
|
3761
4095
|
// src/host/routingHandler.ts
|