@ohhwells/bridge 0.1.49 → 0.1.51-next.118
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/README.md +12 -0
- package/dist/index.cjs +1320 -483
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +28 -4
- package/dist/index.d.ts +28 -4
- package/dist/index.js +1168 -337
- package/dist/index.js.map +1 -1
- package/dist/styles.css +347 -392
- package/package.json +2 -1
package/dist/index.cjs
CHANGED
|
@@ -36,6 +36,12 @@ __export(index_exports, {
|
|
|
36
36
|
CustomToolbarDivider: () => CustomToolbarDivider,
|
|
37
37
|
DragHandle: () => DragHandle,
|
|
38
38
|
DropIndicator: () => DropIndicator,
|
|
39
|
+
DropdownMenu: () => DropdownMenu,
|
|
40
|
+
DropdownMenuContent: () => DropdownMenuContent,
|
|
41
|
+
DropdownMenuGroup: () => DropdownMenuGroup,
|
|
42
|
+
DropdownMenuItem: () => DropdownMenuItem,
|
|
43
|
+
DropdownMenuSeparator: () => DropdownMenuSeparator,
|
|
44
|
+
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
39
45
|
ItemActionToolbar: () => ItemActionToolbar,
|
|
40
46
|
ItemInteractionLayer: () => ItemInteractionLayer,
|
|
41
47
|
LinkEditorPanel: () => LinkEditorPanel,
|
|
@@ -63,7 +69,7 @@ __export(index_exports, {
|
|
|
63
69
|
module.exports = __toCommonJS(index_exports);
|
|
64
70
|
|
|
65
71
|
// src/OhhwellsBridge.tsx
|
|
66
|
-
var
|
|
72
|
+
var import_react11 = __toESM(require("react"), 1);
|
|
67
73
|
var import_client = require("react-dom/client");
|
|
68
74
|
var import_react_dom2 = require("react-dom");
|
|
69
75
|
|
|
@@ -116,6 +122,7 @@ var import_react3 = require("react");
|
|
|
116
122
|
var import_react2 = require("react");
|
|
117
123
|
var import_radix_ui = require("radix-ui");
|
|
118
124
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
125
|
+
var isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
|
119
126
|
function Spinner() {
|
|
120
127
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
121
128
|
"svg",
|
|
@@ -149,12 +156,17 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
|
|
|
149
156
|
const [error, setError] = (0, import_react2.useState)(null);
|
|
150
157
|
const isBook = title === "Confirm your spot";
|
|
151
158
|
const handleSubmit = async () => {
|
|
152
|
-
|
|
159
|
+
const trimmed = email.trim();
|
|
160
|
+
if (!trimmed) return;
|
|
161
|
+
if (!isValidEmail(trimmed)) {
|
|
162
|
+
setError("Please enter a valid email address.");
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
153
165
|
setLoading(true);
|
|
154
166
|
setError(null);
|
|
155
167
|
try {
|
|
156
|
-
await onSubmit(
|
|
157
|
-
setSubmittedEmail(
|
|
168
|
+
await onSubmit(trimmed);
|
|
169
|
+
setSubmittedEmail(trimmed);
|
|
158
170
|
setSuccess(true);
|
|
159
171
|
} catch (e) {
|
|
160
172
|
setError(e instanceof Error ? e.message : "Something went wrong. Please try again.");
|
|
@@ -229,7 +241,10 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
|
|
|
229
241
|
{
|
|
230
242
|
type: "email",
|
|
231
243
|
value: email,
|
|
232
|
-
onChange: (e) =>
|
|
244
|
+
onChange: (e) => {
|
|
245
|
+
setEmail(e.target.value);
|
|
246
|
+
if (error) setError(null);
|
|
247
|
+
},
|
|
233
248
|
onKeyDown: handleKeyDown,
|
|
234
249
|
placeholder: "hello@gmail.com",
|
|
235
250
|
autoFocus: true,
|
|
@@ -286,12 +301,20 @@ function formatClassTime(cls) {
|
|
|
286
301
|
const em = endTotal % 60;
|
|
287
302
|
return `${h}:${cls.startTime.minutes}-${eh}:${String(em).padStart(2, "0")}`;
|
|
288
303
|
}
|
|
304
|
+
function formatBookingLabel(cls) {
|
|
305
|
+
const price = cls.price;
|
|
306
|
+
const isFree = price === null || price === void 0 || `${price}` === "" || `${price}` === "0";
|
|
307
|
+
return isFree ? "Book for free" : `Book for ${cls.currency ?? ""} ${price}`.trim();
|
|
308
|
+
}
|
|
289
309
|
function getBookingsOnDate(cls, date) {
|
|
290
310
|
if (!cls.bookings?.length) return 0;
|
|
291
|
-
const
|
|
311
|
+
const target = new Date(date);
|
|
312
|
+
target.setHours(0, 0, 0, 0);
|
|
292
313
|
return cls.bookings.filter((b) => {
|
|
293
314
|
try {
|
|
294
|
-
|
|
315
|
+
const bookingDate = new Date(b.classDate);
|
|
316
|
+
bookingDate.setHours(0, 0, 0, 0);
|
|
317
|
+
return bookingDate.getTime() === target.getTime();
|
|
295
318
|
} catch {
|
|
296
319
|
return false;
|
|
297
320
|
}
|
|
@@ -556,7 +579,7 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
|
|
|
556
579
|
}
|
|
557
580
|
)
|
|
558
581
|
] }),
|
|
559
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sm:hidden flex flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
582
|
+
cls.showAvailability !== false && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sm:hidden flex flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
560
583
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: [
|
|
561
584
|
available,
|
|
562
585
|
"/",
|
|
@@ -568,9 +591,17 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
|
|
|
568
591
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-1 flex-col gap-2 min-w-0 sm:contents", children: [
|
|
569
592
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 flex flex-col gap-2 min-w-0", children: [
|
|
570
593
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block truncate", children: cls.name }),
|
|
571
|
-
cls.hostName && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block truncate", children: cls.hostName })
|
|
594
|
+
cls.hostName && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block truncate", children: cls.hostName }),
|
|
595
|
+
cls.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
596
|
+
"span",
|
|
597
|
+
{
|
|
598
|
+
className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block",
|
|
599
|
+
style: { wordBreak: "break-word" },
|
|
600
|
+
children: cls.description
|
|
601
|
+
}
|
|
602
|
+
)
|
|
572
603
|
] }),
|
|
573
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hidden sm:flex w-14 shrink-0 flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
604
|
+
cls.showAvailability !== false && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hidden sm:flex w-14 shrink-0 flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
574
605
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: [
|
|
575
606
|
available,
|
|
576
607
|
"/",
|
|
@@ -595,7 +626,7 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
|
|
|
595
626
|
if (!cls.id) return;
|
|
596
627
|
onOpenModal?.(isFull ? "waitlist" : "book", cls.id, selectedDate);
|
|
597
628
|
},
|
|
598
|
-
children: isFull ? "Join Waitlist" :
|
|
629
|
+
children: isFull ? "Join Waitlist" : formatBookingLabel(cls)
|
|
599
630
|
}
|
|
600
631
|
)
|
|
601
632
|
] })
|
|
@@ -637,6 +668,17 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
|
|
|
637
668
|
const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
|
|
638
669
|
const [modalState, setModalState] = (0, import_react3.useState)(null);
|
|
639
670
|
const switchScheduleIdRef = (0, import_react3.useRef)(null);
|
|
671
|
+
const liveScheduleIdRef = (0, import_react3.useRef)(null);
|
|
672
|
+
const refetchLiveSchedule = (0, import_react3.useCallback)(async () => {
|
|
673
|
+
const id = liveScheduleIdRef.current;
|
|
674
|
+
if (!id) return;
|
|
675
|
+
try {
|
|
676
|
+
const res = await fetch(`${API_URL}/api/schedule/id/${id}`);
|
|
677
|
+
const data = await res.json();
|
|
678
|
+
if (data?.id) setSchedule(data);
|
|
679
|
+
} catch {
|
|
680
|
+
}
|
|
681
|
+
}, []);
|
|
640
682
|
const dates = (0, import_react3.useMemo)(() => {
|
|
641
683
|
const today = /* @__PURE__ */ new Date();
|
|
642
684
|
today.setHours(0, 0, 0, 0);
|
|
@@ -656,6 +698,18 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
|
|
|
656
698
|
}
|
|
657
699
|
}
|
|
658
700
|
}, [schedule, dates]);
|
|
701
|
+
(0, import_react3.useEffect)(() => {
|
|
702
|
+
if (typeof window === "undefined") return;
|
|
703
|
+
const onVisible = () => {
|
|
704
|
+
if (!document.hidden) void refetchLiveSchedule();
|
|
705
|
+
};
|
|
706
|
+
window.addEventListener("focus", refetchLiveSchedule);
|
|
707
|
+
document.addEventListener("visibilitychange", onVisible);
|
|
708
|
+
return () => {
|
|
709
|
+
window.removeEventListener("focus", refetchLiveSchedule);
|
|
710
|
+
document.removeEventListener("visibilitychange", onVisible);
|
|
711
|
+
};
|
|
712
|
+
}, [refetchLiveSchedule]);
|
|
659
713
|
(0, import_react3.useEffect)(() => {
|
|
660
714
|
if (typeof window === "undefined") return;
|
|
661
715
|
const isInEditor = window.self !== window.top;
|
|
@@ -717,7 +771,7 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
|
|
|
717
771
|
setLoading(false);
|
|
718
772
|
return;
|
|
719
773
|
}
|
|
720
|
-
;
|
|
774
|
+
liveScheduleIdRef.current = effectiveId;
|
|
721
775
|
(async () => {
|
|
722
776
|
try {
|
|
723
777
|
const res = await fetch(`${API_URL}/api/schedule/id/${effectiveId}`);
|
|
@@ -774,18 +828,14 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
|
|
|
774
828
|
const data = await res.json().catch(() => ({}));
|
|
775
829
|
throw new Error(data?.message ?? "Something went wrong. Please try again.");
|
|
776
830
|
}
|
|
831
|
+
await refetchLiveSchedule();
|
|
777
832
|
};
|
|
778
833
|
const handleReplaceSchedule = () => {
|
|
779
834
|
setIsHovered(false);
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
insertAfter
|
|
785
|
-
}, "*");
|
|
786
|
-
} else {
|
|
787
|
-
window.parent.postMessage({ type: "ow:scheduling-not-connected", insertAfter }, "*");
|
|
788
|
-
}
|
|
835
|
+
window.parent.postMessage(
|
|
836
|
+
{ type: "ow:scheduling-not-connected", insertAfter, currentScheduleId: schedule?.id },
|
|
837
|
+
"*"
|
|
838
|
+
);
|
|
789
839
|
};
|
|
790
840
|
if (!inEditor && !loading && !schedule) return null;
|
|
791
841
|
const sectionId = `scheduling-${insertAfter}`;
|
|
@@ -828,7 +878,19 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
|
|
|
828
878
|
),
|
|
829
879
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "max-w-[1280px] mx-auto flex flex-col items-center gap-16", children: [
|
|
830
880
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
|
|
831
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
881
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
882
|
+
"h2",
|
|
883
|
+
{
|
|
884
|
+
className: "font-display text-center m-0 text-(--color-dark,#200C02)",
|
|
885
|
+
style: {
|
|
886
|
+
fontSize: "var(--fs-section-h2, clamp(40px, 4.4vw, 64px))",
|
|
887
|
+
fontWeight: "var(--font-weight-heading, 400)",
|
|
888
|
+
lineHeight: 1.05,
|
|
889
|
+
letterSpacing: "-0.02em"
|
|
890
|
+
},
|
|
891
|
+
children: schedule?.name ?? "Book an appointment"
|
|
892
|
+
}
|
|
893
|
+
),
|
|
832
894
|
schedule?.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "font-body text-body text-center m-0 text-(--color-accent,#A89B83)", children: schedule.description })
|
|
833
895
|
] }),
|
|
834
896
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full flex flex-col items-end gap-3", children: [
|
|
@@ -4344,22 +4406,116 @@ var CustomToolbarButton = React4.forwardRef(
|
|
|
4344
4406
|
CustomToolbarButton.displayName = "CustomToolbarButton";
|
|
4345
4407
|
|
|
4346
4408
|
// src/ui/item-action-toolbar.tsx
|
|
4409
|
+
var import_react4 = require("react");
|
|
4347
4410
|
var import_lucide_react2 = require("lucide-react");
|
|
4348
4411
|
|
|
4349
|
-
// src/ui/
|
|
4412
|
+
// src/ui/dropdown-menu.tsx
|
|
4350
4413
|
var import_radix_ui3 = require("radix-ui");
|
|
4351
4414
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
4415
|
+
function DropdownMenu({ ...props }) {
|
|
4416
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
|
|
4417
|
+
}
|
|
4418
|
+
function DropdownMenuTrigger({
|
|
4419
|
+
...props
|
|
4420
|
+
}) {
|
|
4421
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.DropdownMenu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
|
|
4422
|
+
}
|
|
4423
|
+
function DropdownMenuGroup({
|
|
4424
|
+
className,
|
|
4425
|
+
...props
|
|
4426
|
+
}) {
|
|
4427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4428
|
+
import_radix_ui3.DropdownMenu.Group,
|
|
4429
|
+
{
|
|
4430
|
+
"data-slot": "dropdown-menu-group",
|
|
4431
|
+
className: cn("flex w-full flex-col items-start p-1", className),
|
|
4432
|
+
...props
|
|
4433
|
+
}
|
|
4434
|
+
);
|
|
4435
|
+
}
|
|
4436
|
+
function DropdownMenuContent({
|
|
4437
|
+
className,
|
|
4438
|
+
sideOffset = 6,
|
|
4439
|
+
...props
|
|
4440
|
+
}) {
|
|
4441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4442
|
+
import_radix_ui3.DropdownMenu.Content,
|
|
4443
|
+
{
|
|
4444
|
+
"data-slot": "dropdown-menu-content",
|
|
4445
|
+
"data-ohw-more-menu": "",
|
|
4446
|
+
sideOffset,
|
|
4447
|
+
className: cn(
|
|
4448
|
+
"z-[2147483647] flex w-56 min-w-32 flex-col items-center overflow-hidden rounded-[6px] border border-border bg-popover p-0 text-popover-foreground outline-none",
|
|
4449
|
+
"shadow-[0px_4px_6px_0px_rgba(0,0,0,0.1),0px_2px_4px_0px_rgba(0,0,0,0.1)]",
|
|
4450
|
+
"origin-[var(--radix-dropdown-menu-content-transform-origin)]",
|
|
4451
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
4452
|
+
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
4453
|
+
className
|
|
4454
|
+
),
|
|
4455
|
+
...props
|
|
4456
|
+
}
|
|
4457
|
+
) });
|
|
4458
|
+
}
|
|
4459
|
+
function DropdownMenuItem({
|
|
4460
|
+
className,
|
|
4461
|
+
inset,
|
|
4462
|
+
variant = "default",
|
|
4463
|
+
...props
|
|
4464
|
+
}) {
|
|
4465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4466
|
+
import_radix_ui3.DropdownMenu.Item,
|
|
4467
|
+
{
|
|
4468
|
+
"data-slot": "dropdown-menu-item",
|
|
4469
|
+
"data-inset": inset ? "" : void 0,
|
|
4470
|
+
"data-variant": variant,
|
|
4471
|
+
className: cn(
|
|
4472
|
+
"relative flex w-full min-w-32 cursor-pointer select-none items-center gap-2 rounded-[calc(var(--radius,0.5rem)-4px)] py-1.5 pl-8 pr-2 text-sm leading-5 outline-none",
|
|
4473
|
+
"text-popover-foreground",
|
|
4474
|
+
"focus:bg-muted data-[highlighted]:bg-muted",
|
|
4475
|
+
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
4476
|
+
"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
4477
|
+
"[&_svg:not([class*=absolute])]:relative",
|
|
4478
|
+
// Leading icon — Figma absolute left-2 / top-1/2
|
|
4479
|
+
"[&>svg:first-child]:absolute [&>svg:first-child]:left-2 [&>svg:first-child]:top-1/2 [&>svg:first-child]:-translate-y-1/2",
|
|
4480
|
+
"data-[variant=destructive]:text-destructive",
|
|
4481
|
+
"data-[variant=destructive]:focus:bg-bg-destructive-10 data-[variant=destructive]:focus:text-destructive",
|
|
4482
|
+
"data-[variant=destructive]:data-[highlighted]:bg-bg-destructive-10 data-[variant=destructive]:data-[highlighted]:text-destructive",
|
|
4483
|
+
"data-[variant=destructive]:[&_svg]:text-destructive",
|
|
4484
|
+
inset && "pl-8",
|
|
4485
|
+
className
|
|
4486
|
+
),
|
|
4487
|
+
...props
|
|
4488
|
+
}
|
|
4489
|
+
);
|
|
4490
|
+
}
|
|
4491
|
+
function DropdownMenuSeparator({
|
|
4492
|
+
className,
|
|
4493
|
+
...props
|
|
4494
|
+
}) {
|
|
4495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4496
|
+
import_radix_ui3.DropdownMenu.Separator,
|
|
4497
|
+
{
|
|
4498
|
+
"data-slot": "dropdown-menu-separator",
|
|
4499
|
+
className: cn("h-px w-full bg-border", className),
|
|
4500
|
+
...props
|
|
4501
|
+
}
|
|
4502
|
+
);
|
|
4503
|
+
}
|
|
4504
|
+
|
|
4505
|
+
// src/ui/tooltip.tsx
|
|
4506
|
+
var import_radix_ui4 = require("radix-ui");
|
|
4507
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
4352
4508
|
function TooltipProvider({
|
|
4353
4509
|
delayDuration = 0,
|
|
4354
4510
|
...props
|
|
4355
4511
|
}) {
|
|
4356
|
-
return /* @__PURE__ */ (0,
|
|
4512
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Tooltip.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
|
|
4357
4513
|
}
|
|
4358
4514
|
function Tooltip({ ...props }) {
|
|
4359
|
-
return /* @__PURE__ */ (0,
|
|
4515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Tooltip.Root, { "data-slot": "tooltip", ...props });
|
|
4360
4516
|
}
|
|
4361
4517
|
function TooltipTrigger({ ...props }) {
|
|
4362
|
-
return /* @__PURE__ */ (0,
|
|
4518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
4363
4519
|
}
|
|
4364
4520
|
var arrowClassBySide = {
|
|
4365
4521
|
top: "before:bottom-0 before:left-1/2 before:-translate-x-1/2 before:translate-y-1/2",
|
|
@@ -4376,8 +4532,8 @@ function TooltipContent({
|
|
|
4376
4532
|
...props
|
|
4377
4533
|
}) {
|
|
4378
4534
|
const resolvedSide = side ?? "bottom";
|
|
4379
|
-
return /* @__PURE__ */ (0,
|
|
4380
|
-
|
|
4535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4536
|
+
import_radix_ui4.Tooltip.Content,
|
|
4381
4537
|
{
|
|
4382
4538
|
"data-slot": "tooltip-content",
|
|
4383
4539
|
side,
|
|
@@ -4399,7 +4555,7 @@ function TooltipContent({
|
|
|
4399
4555
|
}
|
|
4400
4556
|
|
|
4401
4557
|
// src/ui/item-action-toolbar.tsx
|
|
4402
|
-
var
|
|
4558
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
4403
4559
|
function ToolbarActionTooltip({
|
|
4404
4560
|
label,
|
|
4405
4561
|
side = "bottom",
|
|
@@ -4407,25 +4563,31 @@ function ToolbarActionTooltip({
|
|
|
4407
4563
|
buttonProps,
|
|
4408
4564
|
children
|
|
4409
4565
|
}) {
|
|
4410
|
-
const button = /* @__PURE__ */ (0,
|
|
4411
|
-
return /* @__PURE__ */ (0,
|
|
4412
|
-
/* @__PURE__ */ (0,
|
|
4413
|
-
/* @__PURE__ */ (0,
|
|
4566
|
+
const button = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomToolbarButton, { type: "button", "aria-label": label, disabled, ...buttonProps, children });
|
|
4567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
|
|
4568
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex", children: button }) : button }),
|
|
4569
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { side, sideOffset: 9, children: label })
|
|
4414
4570
|
] });
|
|
4415
4571
|
}
|
|
4416
4572
|
function ItemActionToolbar({
|
|
4417
4573
|
onEditLink,
|
|
4418
4574
|
onAddItem,
|
|
4419
|
-
|
|
4575
|
+
onSelectParent,
|
|
4576
|
+
onDuplicate,
|
|
4577
|
+
onDelete,
|
|
4420
4578
|
editLinkDisabled = false,
|
|
4421
4579
|
addItemDisabled = true,
|
|
4422
|
-
moreDisabled =
|
|
4580
|
+
moreDisabled = false,
|
|
4581
|
+
selectParentDisabled = false,
|
|
4582
|
+
duplicateDisabled = false,
|
|
4583
|
+
deleteDisabled = false,
|
|
4423
4584
|
showAddItem = true,
|
|
4424
4585
|
showMore = true,
|
|
4425
4586
|
tooltipSide = "bottom"
|
|
4426
4587
|
}) {
|
|
4427
|
-
|
|
4428
|
-
|
|
4588
|
+
const [moreOpen, setMoreOpen] = (0, import_react4.useState)(false);
|
|
4589
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(CustomToolbar, { children: [
|
|
4590
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4429
4591
|
ToolbarActionTooltip,
|
|
4430
4592
|
{
|
|
4431
4593
|
label: "Edit link",
|
|
@@ -4443,10 +4605,10 @@ function ItemActionToolbar({
|
|
|
4443
4605
|
e.stopPropagation();
|
|
4444
4606
|
}
|
|
4445
4607
|
},
|
|
4446
|
-
children: /* @__PURE__ */ (0,
|
|
4608
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4447
4609
|
}
|
|
4448
4610
|
),
|
|
4449
|
-
showAddItem ? /* @__PURE__ */ (0,
|
|
4611
|
+
showAddItem ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4450
4612
|
ToolbarActionTooltip,
|
|
4451
4613
|
{
|
|
4452
4614
|
label: "Add item",
|
|
@@ -4460,32 +4622,84 @@ function ItemActionToolbar({
|
|
|
4460
4622
|
onAddItem?.();
|
|
4461
4623
|
}
|
|
4462
4624
|
},
|
|
4463
|
-
children: /* @__PURE__ */ (0,
|
|
4625
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Plus, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4464
4626
|
}
|
|
4465
4627
|
) : null,
|
|
4466
|
-
showMore ? /* @__PURE__ */ (0,
|
|
4467
|
-
|
|
4468
|
-
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
|
|
4628
|
+
showMore ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { open: moreOpen, onOpenChange: setMoreOpen, children: [
|
|
4629
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { open: moreOpen ? false : void 0, children: [
|
|
4630
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuTrigger, { asChild: true, disabled: moreDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4631
|
+
CustomToolbarButton,
|
|
4632
|
+
{
|
|
4633
|
+
type: "button",
|
|
4634
|
+
"aria-label": "More",
|
|
4635
|
+
disabled: moreDisabled,
|
|
4636
|
+
onMouseDown: (e) => {
|
|
4637
|
+
e.preventDefault();
|
|
4638
|
+
e.stopPropagation();
|
|
4639
|
+
},
|
|
4640
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.MoreHorizontal, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4641
|
+
}
|
|
4642
|
+
) }) }),
|
|
4643
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { side: tooltipSide, sideOffset: 9, children: "More" })
|
|
4644
|
+
] }),
|
|
4645
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4646
|
+
DropdownMenuContent,
|
|
4647
|
+
{
|
|
4648
|
+
align: "end",
|
|
4649
|
+
side: "bottom",
|
|
4650
|
+
onCloseAutoFocus: (e) => e.preventDefault(),
|
|
4473
4651
|
onMouseDown: (e) => {
|
|
4474
|
-
if (moreDisabled) return;
|
|
4475
4652
|
e.preventDefault();
|
|
4476
4653
|
e.stopPropagation();
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
|
|
4480
|
-
|
|
4481
|
-
|
|
4482
|
-
|
|
4654
|
+
},
|
|
4655
|
+
children: [
|
|
4656
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuGroup, { children: [
|
|
4657
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4658
|
+
DropdownMenuItem,
|
|
4659
|
+
{
|
|
4660
|
+
disabled: selectParentDisabled,
|
|
4661
|
+
onSelect: () => onSelectParent?.(),
|
|
4662
|
+
children: [
|
|
4663
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.CornerLeftUp, { size: 12, "aria-hidden": true }),
|
|
4664
|
+
"Select parent"
|
|
4665
|
+
]
|
|
4666
|
+
}
|
|
4667
|
+
),
|
|
4668
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4669
|
+
DropdownMenuItem,
|
|
4670
|
+
{
|
|
4671
|
+
disabled: duplicateDisabled,
|
|
4672
|
+
onSelect: () => onDuplicate?.(),
|
|
4673
|
+
children: [
|
|
4674
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Copy, { size: 12, "aria-hidden": true }),
|
|
4675
|
+
"Duplicate"
|
|
4676
|
+
]
|
|
4677
|
+
}
|
|
4678
|
+
)
|
|
4679
|
+
] }),
|
|
4680
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuSeparator, {}),
|
|
4681
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4682
|
+
DropdownMenuItem,
|
|
4683
|
+
{
|
|
4684
|
+
variant: "destructive",
|
|
4685
|
+
disabled: deleteDisabled,
|
|
4686
|
+
onSelect: () => onDelete?.(),
|
|
4687
|
+
children: [
|
|
4688
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Trash2, { size: 15, "aria-hidden": true }),
|
|
4689
|
+
"Delete"
|
|
4690
|
+
]
|
|
4691
|
+
}
|
|
4692
|
+
) })
|
|
4693
|
+
]
|
|
4694
|
+
}
|
|
4695
|
+
)
|
|
4696
|
+
] }) : null
|
|
4483
4697
|
] }) });
|
|
4484
4698
|
}
|
|
4485
4699
|
|
|
4486
4700
|
// src/ui/item-interaction-layer.tsx
|
|
4487
4701
|
var React5 = __toESM(require("react"), 1);
|
|
4488
|
-
var
|
|
4702
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
4489
4703
|
var PRIMARY = "var(--ohw-primary, #0885FE)";
|
|
4490
4704
|
var FOCUS_RING = `0 0 0 4px color-mix(in srgb, ${PRIMARY} 12%, transparent)`;
|
|
4491
4705
|
var DRAG_SHADOW = "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)";
|
|
@@ -4567,7 +4781,7 @@ function ClampedToolbarSlot({
|
|
|
4567
4781
|
window.removeEventListener("resize", clamp);
|
|
4568
4782
|
};
|
|
4569
4783
|
}, [placement, children]);
|
|
4570
|
-
return /* @__PURE__ */ (0,
|
|
4784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4571
4785
|
"div",
|
|
4572
4786
|
{
|
|
4573
4787
|
ref: slotRef,
|
|
@@ -4607,7 +4821,7 @@ function ItemInteractionLayer({
|
|
|
4607
4821
|
const showToolbar = isActive && toolbar;
|
|
4608
4822
|
const showDragHandle = (isActive || isDragging) && showHandle;
|
|
4609
4823
|
const itemDragEnabled = itemDragSurface && isActive && showHandle && !isDragging && !dragDisabled;
|
|
4610
|
-
return /* @__PURE__ */ (0,
|
|
4824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
4611
4825
|
"div",
|
|
4612
4826
|
{
|
|
4613
4827
|
ref: elRef,
|
|
@@ -4623,7 +4837,7 @@ function ItemInteractionLayer({
|
|
|
4623
4837
|
zIndex: getChromeZIndex(state)
|
|
4624
4838
|
},
|
|
4625
4839
|
children: [
|
|
4626
|
-
/* @__PURE__ */ (0,
|
|
4840
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4627
4841
|
"div",
|
|
4628
4842
|
{
|
|
4629
4843
|
"aria-hidden": true,
|
|
@@ -4631,7 +4845,7 @@ function ItemInteractionLayer({
|
|
|
4631
4845
|
style: getChromeStyle(state)
|
|
4632
4846
|
}
|
|
4633
4847
|
),
|
|
4634
|
-
itemDragEnabled && /* @__PURE__ */ (0,
|
|
4848
|
+
itemDragEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4635
4849
|
"div",
|
|
4636
4850
|
{
|
|
4637
4851
|
"data-ohw-item-drag-surface": "",
|
|
@@ -4647,14 +4861,14 @@ function ItemInteractionLayer({
|
|
|
4647
4861
|
}
|
|
4648
4862
|
}
|
|
4649
4863
|
),
|
|
4650
|
-
showDragHandle && /* @__PURE__ */ (0,
|
|
4864
|
+
showDragHandle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4651
4865
|
"div",
|
|
4652
4866
|
{
|
|
4653
4867
|
"data-ohw-drag-handle-container": "",
|
|
4654
4868
|
className: "pointer-events-auto absolute left-0 top-1/2 z-10 -translate-x-[calc(100%+7px)] -translate-y-1/2",
|
|
4655
4869
|
style: isDragging ? { opacity: 0 } : void 0,
|
|
4656
4870
|
"aria-hidden": isDragging || void 0,
|
|
4657
|
-
children: /* @__PURE__ */ (0,
|
|
4871
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4658
4872
|
DragHandle,
|
|
4659
4873
|
{
|
|
4660
4874
|
draggable: !dragDisabled,
|
|
@@ -4684,8 +4898,8 @@ function ItemInteractionLayer({
|
|
|
4684
4898
|
)
|
|
4685
4899
|
}
|
|
4686
4900
|
),
|
|
4687
|
-
showToolbar && state === "active-top" && /* @__PURE__ */ (0,
|
|
4688
|
-
showToolbar && state === "active-bottom" && /* @__PURE__ */ (0,
|
|
4901
|
+
showToolbar && state === "active-top" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClampedToolbarSlot, { placement: "top", children: toolbar }),
|
|
4902
|
+
showToolbar && state === "active-bottom" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClampedToolbarSlot, { placement: "bottom", children: toolbar })
|
|
4689
4903
|
]
|
|
4690
4904
|
}
|
|
4691
4905
|
);
|
|
@@ -4697,8 +4911,8 @@ var import_lucide_react3 = require("lucide-react");
|
|
|
4697
4911
|
|
|
4698
4912
|
// src/ui/button.tsx
|
|
4699
4913
|
var React6 = __toESM(require("react"), 1);
|
|
4700
|
-
var
|
|
4701
|
-
var
|
|
4914
|
+
var import_radix_ui5 = require("radix-ui");
|
|
4915
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
4702
4916
|
var buttonVariants = cva(
|
|
4703
4917
|
"inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 min-w-[80px] px-3 py-2",
|
|
4704
4918
|
{
|
|
@@ -4721,8 +4935,8 @@ var buttonVariants = cva(
|
|
|
4721
4935
|
);
|
|
4722
4936
|
var Button = React6.forwardRef(
|
|
4723
4937
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
4724
|
-
const Comp = asChild ?
|
|
4725
|
-
return /* @__PURE__ */ (0,
|
|
4938
|
+
const Comp = asChild ? import_radix_ui5.Slot.Root : "button";
|
|
4939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
4726
4940
|
Comp,
|
|
4727
4941
|
{
|
|
4728
4942
|
ref,
|
|
@@ -4736,7 +4950,7 @@ var Button = React6.forwardRef(
|
|
|
4736
4950
|
Button.displayName = "Button";
|
|
4737
4951
|
|
|
4738
4952
|
// src/ui/MediaOverlay.tsx
|
|
4739
|
-
var
|
|
4953
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
4740
4954
|
var MEDIA_UPLOAD_FADE_MS = 300;
|
|
4741
4955
|
var VIDEO_SETTINGS_BAR_INSET = 8;
|
|
4742
4956
|
var OVERLAY_BUTTON_STYLE = {
|
|
@@ -4794,7 +5008,7 @@ function MediaOverlay({
|
|
|
4794
5008
|
return () => anim.cancel();
|
|
4795
5009
|
}, [isUploading, fadingOut, onFadeOutComplete, hover.key]);
|
|
4796
5010
|
if (isUploading) {
|
|
4797
|
-
return /* @__PURE__ */ (0,
|
|
5011
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4798
5012
|
"div",
|
|
4799
5013
|
{
|
|
4800
5014
|
ref: skeletonRef,
|
|
@@ -4803,11 +5017,11 @@ function MediaOverlay({
|
|
|
4803
5017
|
"data-ohw-media-skeleton": "",
|
|
4804
5018
|
"aria-hidden": true,
|
|
4805
5019
|
style: { ...box, pointerEvents: "none" },
|
|
4806
|
-
children: /* @__PURE__ */ (0,
|
|
5020
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("style", { children: SKELETON_CSS })
|
|
4807
5021
|
}
|
|
4808
5022
|
);
|
|
4809
5023
|
}
|
|
4810
|
-
const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0,
|
|
5024
|
+
const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
4811
5025
|
"div",
|
|
4812
5026
|
{
|
|
4813
5027
|
"data-ohw-bridge": "",
|
|
@@ -4823,7 +5037,7 @@ function MediaOverlay({
|
|
|
4823
5037
|
},
|
|
4824
5038
|
onClick: (e) => e.stopPropagation(),
|
|
4825
5039
|
children: [
|
|
4826
|
-
/* @__PURE__ */ (0,
|
|
5040
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4827
5041
|
Button,
|
|
4828
5042
|
{
|
|
4829
5043
|
"data-ohw-media-overlay": "",
|
|
@@ -4838,10 +5052,10 @@ function MediaOverlay({
|
|
|
4838
5052
|
e.stopPropagation();
|
|
4839
5053
|
onVideoSettingsChange?.(hover.key, { autoplay: !autoplay });
|
|
4840
5054
|
},
|
|
4841
|
-
children: autoplay ? /* @__PURE__ */ (0,
|
|
5055
|
+
children: autoplay ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Pause, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Play, { size: 14 })
|
|
4842
5056
|
}
|
|
4843
5057
|
),
|
|
4844
|
-
/* @__PURE__ */ (0,
|
|
5058
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4845
5059
|
Button,
|
|
4846
5060
|
{
|
|
4847
5061
|
"data-ohw-media-overlay": "",
|
|
@@ -4856,15 +5070,15 @@ function MediaOverlay({
|
|
|
4856
5070
|
e.stopPropagation();
|
|
4857
5071
|
onVideoSettingsChange?.(hover.key, { muted: !muted });
|
|
4858
5072
|
},
|
|
4859
|
-
children: muted ? /* @__PURE__ */ (0,
|
|
5073
|
+
children: muted ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.VolumeX, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Volume2, { size: 14 })
|
|
4860
5074
|
}
|
|
4861
5075
|
)
|
|
4862
5076
|
]
|
|
4863
5077
|
}
|
|
4864
5078
|
) : null;
|
|
4865
|
-
return /* @__PURE__ */ (0,
|
|
5079
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
4866
5080
|
settingsBar,
|
|
4867
|
-
/* @__PURE__ */ (0,
|
|
5081
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4868
5082
|
"div",
|
|
4869
5083
|
{
|
|
4870
5084
|
"data-ohw-bridge": "",
|
|
@@ -4881,21 +5095,25 @@ function MediaOverlay({
|
|
|
4881
5095
|
background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
|
|
4882
5096
|
},
|
|
4883
5097
|
onClick: () => onReplace(hover.key),
|
|
4884
|
-
children: /* @__PURE__ */ (0,
|
|
5098
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
4885
5099
|
Button,
|
|
4886
5100
|
{
|
|
4887
5101
|
"data-ohw-media-overlay": "",
|
|
4888
5102
|
variant: "outline",
|
|
4889
5103
|
size: "sm",
|
|
4890
5104
|
className: "gap-1.5 cursor-pointer hover:bg-background",
|
|
4891
|
-
style:
|
|
5105
|
+
style: {
|
|
5106
|
+
...OVERLAY_BUTTON_STYLE,
|
|
5107
|
+
// Don't let Replace steal clicks when text (e.g. nav) sits on top of this media.
|
|
5108
|
+
pointerEvents: hover.hasTextOverlap ? "none" : "auto"
|
|
5109
|
+
},
|
|
4892
5110
|
onMouseDown: (e) => e.preventDefault(),
|
|
4893
5111
|
onClick: (e) => {
|
|
4894
5112
|
e.stopPropagation();
|
|
4895
5113
|
onReplace(hover.key);
|
|
4896
5114
|
},
|
|
4897
5115
|
children: [
|
|
4898
|
-
isVideo ? /* @__PURE__ */ (0,
|
|
5116
|
+
isVideo ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ImageIcon, { size: 14 }),
|
|
4899
5117
|
isVideo ? "Replace video" : "Replace image"
|
|
4900
5118
|
]
|
|
4901
5119
|
}
|
|
@@ -4907,7 +5125,7 @@ function MediaOverlay({
|
|
|
4907
5125
|
|
|
4908
5126
|
// src/ui/CarouselOverlay.tsx
|
|
4909
5127
|
var import_lucide_react4 = require("lucide-react");
|
|
4910
|
-
var
|
|
5128
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
4911
5129
|
var OVERLAY_BUTTON_STYLE2 = {
|
|
4912
5130
|
pointerEvents: "auto",
|
|
4913
5131
|
fontFamily: "Inter, sans-serif",
|
|
@@ -4919,7 +5137,7 @@ function CarouselOverlay({
|
|
|
4919
5137
|
onEdit
|
|
4920
5138
|
}) {
|
|
4921
5139
|
const { rect } = hover;
|
|
4922
|
-
return /* @__PURE__ */ (0,
|
|
5140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4923
5141
|
"div",
|
|
4924
5142
|
{
|
|
4925
5143
|
"data-ohw-bridge": "",
|
|
@@ -4937,7 +5155,7 @@ function CarouselOverlay({
|
|
|
4937
5155
|
background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
|
|
4938
5156
|
},
|
|
4939
5157
|
onClick: () => onEdit(hover.key),
|
|
4940
|
-
children: /* @__PURE__ */ (0,
|
|
5158
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
4941
5159
|
Button,
|
|
4942
5160
|
{
|
|
4943
5161
|
"data-ohw-carousel-overlay": "",
|
|
@@ -4951,7 +5169,7 @@ function CarouselOverlay({
|
|
|
4951
5169
|
onEdit(hover.key);
|
|
4952
5170
|
},
|
|
4953
5171
|
children: [
|
|
4954
|
-
/* @__PURE__ */ (0,
|
|
5172
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.GalleryHorizontal, { size: 14 }),
|
|
4955
5173
|
"Edit gallery"
|
|
4956
5174
|
]
|
|
4957
5175
|
}
|
|
@@ -5240,29 +5458,29 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
5240
5458
|
}
|
|
5241
5459
|
|
|
5242
5460
|
// src/ui/link-modal/LinkPopover.tsx
|
|
5243
|
-
var
|
|
5461
|
+
var import_react8 = require("react");
|
|
5244
5462
|
|
|
5245
5463
|
// src/ui/dialog.tsx
|
|
5246
5464
|
var React8 = __toESM(require("react"), 1);
|
|
5247
|
-
var
|
|
5465
|
+
var import_radix_ui6 = require("radix-ui");
|
|
5248
5466
|
var import_lucide_react5 = require("lucide-react");
|
|
5249
|
-
var
|
|
5467
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
5250
5468
|
function Dialog2({
|
|
5251
5469
|
...props
|
|
5252
5470
|
}) {
|
|
5253
|
-
return /* @__PURE__ */ (0,
|
|
5471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
5254
5472
|
}
|
|
5255
5473
|
function DialogPortal({
|
|
5256
5474
|
...props
|
|
5257
5475
|
}) {
|
|
5258
|
-
return /* @__PURE__ */ (0,
|
|
5476
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
5259
5477
|
}
|
|
5260
5478
|
function DialogOverlay({
|
|
5261
5479
|
className,
|
|
5262
5480
|
...props
|
|
5263
5481
|
}) {
|
|
5264
|
-
return /* @__PURE__ */ (0,
|
|
5265
|
-
|
|
5482
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5483
|
+
import_radix_ui6.Dialog.Overlay,
|
|
5266
5484
|
{
|
|
5267
5485
|
"data-slot": "dialog-overlay",
|
|
5268
5486
|
"data-ohw-link-modal-root": "",
|
|
@@ -5274,10 +5492,10 @@ function DialogOverlay({
|
|
|
5274
5492
|
var DialogContent = React8.forwardRef(
|
|
5275
5493
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
5276
5494
|
const positionMode = container ? "absolute" : "fixed";
|
|
5277
|
-
return /* @__PURE__ */ (0,
|
|
5278
|
-
/* @__PURE__ */ (0,
|
|
5279
|
-
/* @__PURE__ */ (0,
|
|
5280
|
-
|
|
5495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
5496
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
5497
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
5498
|
+
import_radix_ui6.Dialog.Content,
|
|
5281
5499
|
{
|
|
5282
5500
|
ref,
|
|
5283
5501
|
"data-slot": "dialog-content",
|
|
@@ -5292,13 +5510,13 @@ var DialogContent = React8.forwardRef(
|
|
|
5292
5510
|
...props,
|
|
5293
5511
|
children: [
|
|
5294
5512
|
children,
|
|
5295
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
5296
|
-
|
|
5513
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5514
|
+
import_radix_ui6.Dialog.Close,
|
|
5297
5515
|
{
|
|
5298
5516
|
type: "button",
|
|
5299
5517
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
5300
5518
|
"aria-label": "Close",
|
|
5301
|
-
children: /* @__PURE__ */ (0,
|
|
5519
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.X, { size: 16, "aria-hidden": true })
|
|
5302
5520
|
}
|
|
5303
5521
|
) : null
|
|
5304
5522
|
]
|
|
@@ -5307,18 +5525,18 @@ var DialogContent = React8.forwardRef(
|
|
|
5307
5525
|
] });
|
|
5308
5526
|
}
|
|
5309
5527
|
);
|
|
5310
|
-
DialogContent.displayName =
|
|
5528
|
+
DialogContent.displayName = import_radix_ui6.Dialog.Content.displayName;
|
|
5311
5529
|
function DialogHeader({
|
|
5312
5530
|
className,
|
|
5313
5531
|
...props
|
|
5314
5532
|
}) {
|
|
5315
|
-
return /* @__PURE__ */ (0,
|
|
5533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
5316
5534
|
}
|
|
5317
5535
|
function DialogFooter({
|
|
5318
5536
|
className,
|
|
5319
5537
|
...props
|
|
5320
5538
|
}) {
|
|
5321
|
-
return /* @__PURE__ */ (0,
|
|
5539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5322
5540
|
"div",
|
|
5323
5541
|
{
|
|
5324
5542
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -5326,8 +5544,8 @@ function DialogFooter({
|
|
|
5326
5544
|
}
|
|
5327
5545
|
);
|
|
5328
5546
|
}
|
|
5329
|
-
var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5330
|
-
|
|
5547
|
+
var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5548
|
+
import_radix_ui6.Dialog.Title,
|
|
5331
5549
|
{
|
|
5332
5550
|
ref,
|
|
5333
5551
|
className: cn(
|
|
@@ -5337,36 +5555,36 @@ var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
5337
5555
|
...props
|
|
5338
5556
|
}
|
|
5339
5557
|
));
|
|
5340
|
-
DialogTitle.displayName =
|
|
5341
|
-
var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5342
|
-
|
|
5558
|
+
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
5559
|
+
var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5560
|
+
import_radix_ui6.Dialog.Description,
|
|
5343
5561
|
{
|
|
5344
5562
|
ref,
|
|
5345
5563
|
className: cn("text-sm text-muted-foreground", className),
|
|
5346
5564
|
...props
|
|
5347
5565
|
}
|
|
5348
5566
|
));
|
|
5349
|
-
DialogDescription.displayName =
|
|
5350
|
-
var DialogClose =
|
|
5567
|
+
DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
5568
|
+
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
5351
5569
|
|
|
5352
5570
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
5353
5571
|
var import_lucide_react9 = require("lucide-react");
|
|
5354
5572
|
|
|
5355
5573
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
5356
5574
|
var import_lucide_react6 = require("lucide-react");
|
|
5357
|
-
var
|
|
5575
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
5358
5576
|
function DestinationBreadcrumb({
|
|
5359
5577
|
pageTitle,
|
|
5360
5578
|
sectionLabel
|
|
5361
5579
|
}) {
|
|
5362
|
-
return /* @__PURE__ */ (0,
|
|
5363
|
-
/* @__PURE__ */ (0,
|
|
5364
|
-
/* @__PURE__ */ (0,
|
|
5365
|
-
/* @__PURE__ */ (0,
|
|
5366
|
-
/* @__PURE__ */ (0,
|
|
5367
|
-
/* @__PURE__ */ (0,
|
|
5580
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
5581
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
5582
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
5583
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
5584
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
5585
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
5368
5586
|
] }),
|
|
5369
|
-
/* @__PURE__ */ (0,
|
|
5587
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5370
5588
|
import_lucide_react6.ArrowRight,
|
|
5371
5589
|
{
|
|
5372
5590
|
size: 16,
|
|
@@ -5374,8 +5592,8 @@ function DestinationBreadcrumb({
|
|
|
5374
5592
|
"aria-hidden": true
|
|
5375
5593
|
}
|
|
5376
5594
|
),
|
|
5377
|
-
/* @__PURE__ */ (0,
|
|
5378
|
-
/* @__PURE__ */ (0,
|
|
5595
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
5596
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5379
5597
|
import_lucide_react6.GalleryVertical,
|
|
5380
5598
|
{
|
|
5381
5599
|
size: 16,
|
|
@@ -5383,7 +5601,7 @@ function DestinationBreadcrumb({
|
|
|
5383
5601
|
"aria-hidden": true
|
|
5384
5602
|
}
|
|
5385
5603
|
),
|
|
5386
|
-
/* @__PURE__ */ (0,
|
|
5604
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
5387
5605
|
] })
|
|
5388
5606
|
] })
|
|
5389
5607
|
] });
|
|
@@ -5391,22 +5609,22 @@ function DestinationBreadcrumb({
|
|
|
5391
5609
|
|
|
5392
5610
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
5393
5611
|
var import_lucide_react7 = require("lucide-react");
|
|
5394
|
-
var
|
|
5612
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
5395
5613
|
function SectionTreeItem({
|
|
5396
5614
|
section,
|
|
5397
5615
|
onSelect,
|
|
5398
5616
|
selected
|
|
5399
5617
|
}) {
|
|
5400
5618
|
const interactive = Boolean(onSelect);
|
|
5401
|
-
return /* @__PURE__ */ (0,
|
|
5402
|
-
/* @__PURE__ */ (0,
|
|
5619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
5620
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5403
5621
|
"div",
|
|
5404
5622
|
{
|
|
5405
5623
|
className: "mr-[-1px] h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
5406
5624
|
"aria-hidden": true
|
|
5407
5625
|
}
|
|
5408
5626
|
),
|
|
5409
|
-
/* @__PURE__ */ (0,
|
|
5627
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
5410
5628
|
"div",
|
|
5411
5629
|
{
|
|
5412
5630
|
role: interactive ? "button" : void 0,
|
|
@@ -5424,7 +5642,7 @@ function SectionTreeItem({
|
|
|
5424
5642
|
interactive && selected && "border-primary"
|
|
5425
5643
|
),
|
|
5426
5644
|
children: [
|
|
5427
|
-
/* @__PURE__ */ (0,
|
|
5645
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5428
5646
|
import_lucide_react7.GalleryVertical,
|
|
5429
5647
|
{
|
|
5430
5648
|
size: 16,
|
|
@@ -5432,7 +5650,7 @@ function SectionTreeItem({
|
|
|
5432
5650
|
"aria-hidden": true
|
|
5433
5651
|
}
|
|
5434
5652
|
),
|
|
5435
|
-
/* @__PURE__ */ (0,
|
|
5653
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
5436
5654
|
]
|
|
5437
5655
|
}
|
|
5438
5656
|
)
|
|
@@ -5440,14 +5658,14 @@ function SectionTreeItem({
|
|
|
5440
5658
|
}
|
|
5441
5659
|
|
|
5442
5660
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
5443
|
-
var
|
|
5661
|
+
var import_react5 = require("react");
|
|
5444
5662
|
|
|
5445
5663
|
// src/ui/input.tsx
|
|
5446
5664
|
var React9 = __toESM(require("react"), 1);
|
|
5447
|
-
var
|
|
5665
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
5448
5666
|
var Input = React9.forwardRef(
|
|
5449
5667
|
({ className, type, ...props }, ref) => {
|
|
5450
|
-
return /* @__PURE__ */ (0,
|
|
5668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
5451
5669
|
"input",
|
|
5452
5670
|
{
|
|
5453
5671
|
type,
|
|
@@ -5465,11 +5683,11 @@ var Input = React9.forwardRef(
|
|
|
5465
5683
|
Input.displayName = "Input";
|
|
5466
5684
|
|
|
5467
5685
|
// src/ui/label.tsx
|
|
5468
|
-
var
|
|
5469
|
-
var
|
|
5686
|
+
var import_radix_ui7 = require("radix-ui");
|
|
5687
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
5470
5688
|
function Label({ className, ...props }) {
|
|
5471
|
-
return /* @__PURE__ */ (0,
|
|
5472
|
-
|
|
5689
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
5690
|
+
import_radix_ui7.Label.Root,
|
|
5473
5691
|
{
|
|
5474
5692
|
"data-slot": "label",
|
|
5475
5693
|
className: cn("text-sm font-medium leading-5 text-foreground", className),
|
|
@@ -5480,11 +5698,11 @@ function Label({ className, ...props }) {
|
|
|
5480
5698
|
|
|
5481
5699
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
5482
5700
|
var import_lucide_react8 = require("lucide-react");
|
|
5483
|
-
var
|
|
5701
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
5484
5702
|
function FieldChevron({
|
|
5485
5703
|
onClick
|
|
5486
5704
|
}) {
|
|
5487
|
-
return /* @__PURE__ */ (0,
|
|
5705
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5488
5706
|
"button",
|
|
5489
5707
|
{
|
|
5490
5708
|
type: "button",
|
|
@@ -5492,7 +5710,7 @@ function FieldChevron({
|
|
|
5492
5710
|
onClick,
|
|
5493
5711
|
"aria-label": "Open page list",
|
|
5494
5712
|
tabIndex: -1,
|
|
5495
|
-
children: /* @__PURE__ */ (0,
|
|
5713
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react8.ChevronDown, { size: 16 })
|
|
5496
5714
|
}
|
|
5497
5715
|
);
|
|
5498
5716
|
}
|
|
@@ -5508,11 +5726,11 @@ function UrlOrPageInput({
|
|
|
5508
5726
|
readOnly = false,
|
|
5509
5727
|
urlError
|
|
5510
5728
|
}) {
|
|
5511
|
-
const inputId = (0,
|
|
5512
|
-
const inputRef = (0,
|
|
5513
|
-
const rootRef = (0,
|
|
5514
|
-
const [isFocused, setIsFocused] = (0,
|
|
5515
|
-
(0,
|
|
5729
|
+
const inputId = (0, import_react5.useId)();
|
|
5730
|
+
const inputRef = (0, import_react5.useRef)(null);
|
|
5731
|
+
const rootRef = (0, import_react5.useRef)(null);
|
|
5732
|
+
const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
|
|
5733
|
+
(0, import_react5.useEffect)(() => {
|
|
5516
5734
|
if (!dropdownOpen) return;
|
|
5517
5735
|
const isOutside = (e) => {
|
|
5518
5736
|
const root = rootRef.current;
|
|
@@ -5553,11 +5771,11 @@ function UrlOrPageInput({
|
|
|
5553
5771
|
"data-ohw-link-field flex h-[36px] w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
|
|
5554
5772
|
urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
|
|
5555
5773
|
);
|
|
5556
|
-
return /* @__PURE__ */ (0,
|
|
5557
|
-
/* @__PURE__ */ (0,
|
|
5558
|
-
/* @__PURE__ */ (0,
|
|
5559
|
-
/* @__PURE__ */ (0,
|
|
5560
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
5774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
5775
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
5776
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
5777
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
5778
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5561
5779
|
import_lucide_react8.File,
|
|
5562
5780
|
{
|
|
5563
5781
|
size: 16,
|
|
@@ -5565,7 +5783,7 @@ function UrlOrPageInput({
|
|
|
5565
5783
|
"aria-hidden": true
|
|
5566
5784
|
}
|
|
5567
5785
|
) }) : null,
|
|
5568
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
5786
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5569
5787
|
Input,
|
|
5570
5788
|
{
|
|
5571
5789
|
ref: inputRef,
|
|
@@ -5591,7 +5809,7 @@ function UrlOrPageInput({
|
|
|
5591
5809
|
)
|
|
5592
5810
|
}
|
|
5593
5811
|
),
|
|
5594
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
5812
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5595
5813
|
"button",
|
|
5596
5814
|
{
|
|
5597
5815
|
type: "button",
|
|
@@ -5599,26 +5817,26 @@ function UrlOrPageInput({
|
|
|
5599
5817
|
onMouseDown: clearSelection,
|
|
5600
5818
|
"aria-label": "Clear selected page",
|
|
5601
5819
|
tabIndex: -1,
|
|
5602
|
-
children: /* @__PURE__ */ (0,
|
|
5820
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react8.X, { size: 16, "aria-hidden": true })
|
|
5603
5821
|
}
|
|
5604
5822
|
) : null,
|
|
5605
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
5823
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
5606
5824
|
] }),
|
|
5607
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
5825
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5608
5826
|
"div",
|
|
5609
5827
|
{
|
|
5610
5828
|
"data-ohw-link-page-dropdown": "",
|
|
5611
5829
|
className: "absolute left-0 right-0 top-[calc(100%+4px)] z-50 max-h-48 overflow-auto rounded-lg border border-border bg-popover py-1 shadow-lg",
|
|
5612
5830
|
onMouseDown: (e) => e.preventDefault(),
|
|
5613
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
5831
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
5614
5832
|
"button",
|
|
5615
5833
|
{
|
|
5616
5834
|
type: "button",
|
|
5617
5835
|
className: "flex h-9 w-full items-center gap-2 border-0 bg-transparent px-3 text-left text-sm leading-5 text-foreground outline-none hover:bg-muted",
|
|
5618
5836
|
onClick: () => onPageSelect(page),
|
|
5619
5837
|
children: [
|
|
5620
|
-
/* @__PURE__ */ (0,
|
|
5621
|
-
/* @__PURE__ */ (0,
|
|
5838
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react8.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
5839
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "truncate", children: page.title })
|
|
5622
5840
|
]
|
|
5623
5841
|
},
|
|
5624
5842
|
page.path
|
|
@@ -5626,34 +5844,34 @@ function UrlOrPageInput({
|
|
|
5626
5844
|
}
|
|
5627
5845
|
) : null
|
|
5628
5846
|
] }),
|
|
5629
|
-
urlError ? /* @__PURE__ */ (0,
|
|
5847
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
5630
5848
|
] });
|
|
5631
5849
|
}
|
|
5632
5850
|
|
|
5633
5851
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
5634
|
-
var
|
|
5852
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
5635
5853
|
function LinkEditorPanel({ state, onClose }) {
|
|
5636
5854
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
5637
|
-
return /* @__PURE__ */ (0,
|
|
5638
|
-
/* @__PURE__ */ (0,
|
|
5855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
|
|
5856
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5639
5857
|
"button",
|
|
5640
5858
|
{
|
|
5641
5859
|
type: "button",
|
|
5642
5860
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
5643
5861
|
"aria-label": "Close",
|
|
5644
5862
|
onClick: onClose,
|
|
5645
|
-
children: /* @__PURE__ */ (0,
|
|
5863
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.X, { size: 16, "aria-hidden": true })
|
|
5646
5864
|
}
|
|
5647
5865
|
) }),
|
|
5648
|
-
/* @__PURE__ */ (0,
|
|
5649
|
-
/* @__PURE__ */ (0,
|
|
5650
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
5866
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
5867
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
5868
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5651
5869
|
DestinationBreadcrumb,
|
|
5652
5870
|
{
|
|
5653
5871
|
pageTitle: state.selectedPage.title,
|
|
5654
5872
|
sectionLabel: state.selectedSection.label
|
|
5655
5873
|
}
|
|
5656
|
-
) : /* @__PURE__ */ (0,
|
|
5874
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5657
5875
|
UrlOrPageInput,
|
|
5658
5876
|
{
|
|
5659
5877
|
value: state.searchValue,
|
|
@@ -5666,8 +5884,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5666
5884
|
urlError: state.urlError
|
|
5667
5885
|
}
|
|
5668
5886
|
),
|
|
5669
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
5670
|
-
/* @__PURE__ */ (0,
|
|
5887
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
5888
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5671
5889
|
Button,
|
|
5672
5890
|
{
|
|
5673
5891
|
type: "button",
|
|
@@ -5678,15 +5896,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5678
5896
|
children: "Choose a section"
|
|
5679
5897
|
}
|
|
5680
5898
|
),
|
|
5681
|
-
/* @__PURE__ */ (0,
|
|
5682
|
-
/* @__PURE__ */ (0,
|
|
5683
|
-
/* @__PURE__ */ (0,
|
|
5899
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
5900
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
5901
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
5684
5902
|
] })
|
|
5685
5903
|
] }) : null,
|
|
5686
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
5904
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
5687
5905
|
] }),
|
|
5688
|
-
/* @__PURE__ */ (0,
|
|
5689
|
-
/* @__PURE__ */ (0,
|
|
5906
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
5907
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5690
5908
|
Button,
|
|
5691
5909
|
{
|
|
5692
5910
|
type: "button",
|
|
@@ -5701,7 +5919,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5701
5919
|
children: state.secondaryLabel
|
|
5702
5920
|
}
|
|
5703
5921
|
),
|
|
5704
|
-
/* @__PURE__ */ (0,
|
|
5922
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5705
5923
|
Button,
|
|
5706
5924
|
{
|
|
5707
5925
|
type: "button",
|
|
@@ -5720,11 +5938,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5720
5938
|
}
|
|
5721
5939
|
|
|
5722
5940
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
5723
|
-
var
|
|
5941
|
+
var import_react6 = require("react");
|
|
5724
5942
|
var import_react_dom = require("react-dom");
|
|
5725
5943
|
var import_lucide_react10 = require("lucide-react");
|
|
5726
5944
|
var import_navigation = require("next/navigation");
|
|
5727
|
-
var
|
|
5945
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
5728
5946
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
5729
5947
|
function rectsEqual(a, b) {
|
|
5730
5948
|
if (a.size !== b.size) return false;
|
|
@@ -5757,12 +5975,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
5757
5975
|
return null;
|
|
5758
5976
|
}
|
|
5759
5977
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
5760
|
-
const [rects, setRects] = (0,
|
|
5761
|
-
const sectionIds = (0,
|
|
5978
|
+
const [rects, setRects] = (0, import_react6.useState)(/* @__PURE__ */ new Map());
|
|
5979
|
+
const sectionIds = (0, import_react6.useMemo)(
|
|
5762
5980
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
5763
5981
|
[sectionIdsKey]
|
|
5764
5982
|
);
|
|
5765
|
-
(0,
|
|
5983
|
+
(0, import_react6.useEffect)(() => {
|
|
5766
5984
|
if (!enabled || sectionIds.length === 0) {
|
|
5767
5985
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
5768
5986
|
return;
|
|
@@ -5803,13 +6021,13 @@ function SectionPickerOverlay({
|
|
|
5803
6021
|
}) {
|
|
5804
6022
|
const router = (0, import_navigation.useRouter)();
|
|
5805
6023
|
const pathname = (0, import_navigation.usePathname)();
|
|
5806
|
-
const [selectedId, setSelectedId] = (0,
|
|
5807
|
-
const [hoveredId, setHoveredId] = (0,
|
|
5808
|
-
const pointerRef = (0,
|
|
5809
|
-
const pointerScreenRef = (0,
|
|
5810
|
-
const iframeOffsetTopRef = (0,
|
|
5811
|
-
const sectionIdsRef = (0,
|
|
5812
|
-
const [chromeClip, setChromeClip] = (0,
|
|
6024
|
+
const [selectedId, setSelectedId] = (0, import_react6.useState)(null);
|
|
6025
|
+
const [hoveredId, setHoveredId] = (0, import_react6.useState)(null);
|
|
6026
|
+
const pointerRef = (0, import_react6.useRef)(null);
|
|
6027
|
+
const pointerScreenRef = (0, import_react6.useRef)(null);
|
|
6028
|
+
const iframeOffsetTopRef = (0, import_react6.useRef)(null);
|
|
6029
|
+
const sectionIdsRef = (0, import_react6.useRef)([]);
|
|
6030
|
+
const [chromeClip, setChromeClip] = (0, import_react6.useState)(
|
|
5813
6031
|
() => ({
|
|
5814
6032
|
top: 0,
|
|
5815
6033
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -5817,12 +6035,12 @@ function SectionPickerOverlay({
|
|
|
5817
6035
|
);
|
|
5818
6036
|
const normalizedTarget = normalizePath(pagePath);
|
|
5819
6037
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
5820
|
-
(0,
|
|
6038
|
+
(0, import_react6.useEffect)(() => {
|
|
5821
6039
|
if (isOnTargetPage) return;
|
|
5822
6040
|
const search = readPreservedSearch();
|
|
5823
6041
|
router.push(`${normalizedTarget}${search}`);
|
|
5824
6042
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
5825
|
-
(0,
|
|
6043
|
+
(0, import_react6.useEffect)(() => {
|
|
5826
6044
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
5827
6045
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
5828
6046
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -5834,24 +6052,24 @@ function SectionPickerOverlay({
|
|
|
5834
6052
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
5835
6053
|
};
|
|
5836
6054
|
}, []);
|
|
5837
|
-
const liveSections = (0,
|
|
6055
|
+
const liveSections = (0, import_react6.useMemo)(() => {
|
|
5838
6056
|
if (!isOnTargetPage) return sections;
|
|
5839
6057
|
const live = collectSectionsFromDom();
|
|
5840
6058
|
if (live.length === 0) return sections;
|
|
5841
6059
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
5842
6060
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
5843
6061
|
}, [isOnTargetPage, sections, pathname]);
|
|
5844
|
-
const sectionIdsKey = (0,
|
|
6062
|
+
const sectionIdsKey = (0, import_react6.useMemo)(
|
|
5845
6063
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
5846
6064
|
[liveSections]
|
|
5847
6065
|
);
|
|
5848
|
-
const sectionIds = (0,
|
|
6066
|
+
const sectionIds = (0, import_react6.useMemo)(
|
|
5849
6067
|
() => liveSections.map((s) => s.id),
|
|
5850
6068
|
[liveSections]
|
|
5851
6069
|
);
|
|
5852
6070
|
sectionIdsRef.current = sectionIds;
|
|
5853
6071
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
5854
|
-
const applyHoverAt = (0,
|
|
6072
|
+
const applyHoverAt = (0, import_react6.useCallback)(
|
|
5855
6073
|
(x, y, liveRects) => {
|
|
5856
6074
|
const ids = sectionIdsRef.current;
|
|
5857
6075
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -5860,7 +6078,7 @@ function SectionPickerOverlay({
|
|
|
5860
6078
|
},
|
|
5861
6079
|
[]
|
|
5862
6080
|
);
|
|
5863
|
-
(0,
|
|
6081
|
+
(0, import_react6.useEffect)(() => {
|
|
5864
6082
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
5865
6083
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
5866
6084
|
const bottom = Math.min(
|
|
@@ -5902,12 +6120,12 @@ function SectionPickerOverlay({
|
|
|
5902
6120
|
window.removeEventListener("resize", onResize);
|
|
5903
6121
|
};
|
|
5904
6122
|
}, [applyHoverAt]);
|
|
5905
|
-
(0,
|
|
6123
|
+
(0, import_react6.useEffect)(() => {
|
|
5906
6124
|
const ptr = pointerRef.current;
|
|
5907
6125
|
if (!ptr) return;
|
|
5908
6126
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
5909
6127
|
}, [rects, applyHoverAt]);
|
|
5910
|
-
(0,
|
|
6128
|
+
(0, import_react6.useEffect)(() => {
|
|
5911
6129
|
const rememberPointer = (clientX, clientY) => {
|
|
5912
6130
|
pointerRef.current = { x: clientX, y: clientY };
|
|
5913
6131
|
const top = iframeOffsetTopRef.current;
|
|
@@ -5931,7 +6149,7 @@ function SectionPickerOverlay({
|
|
|
5931
6149
|
window.removeEventListener("message", onPointerSync);
|
|
5932
6150
|
};
|
|
5933
6151
|
}, [rects, applyHoverAt]);
|
|
5934
|
-
const handleSelect = (0,
|
|
6152
|
+
const handleSelect = (0, import_react6.useCallback)(
|
|
5935
6153
|
(section) => {
|
|
5936
6154
|
if (selectedId) return;
|
|
5937
6155
|
setSelectedId(section.id);
|
|
@@ -5939,7 +6157,7 @@ function SectionPickerOverlay({
|
|
|
5939
6157
|
},
|
|
5940
6158
|
[selectedId, onSelect]
|
|
5941
6159
|
);
|
|
5942
|
-
(0,
|
|
6160
|
+
(0, import_react6.useEffect)(() => {
|
|
5943
6161
|
const onKeyDown = (e) => {
|
|
5944
6162
|
if (e.key === "Escape") {
|
|
5945
6163
|
e.preventDefault();
|
|
@@ -5953,7 +6171,7 @@ function SectionPickerOverlay({
|
|
|
5953
6171
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
5954
6172
|
if (!portalRoot) return null;
|
|
5955
6173
|
return (0, import_react_dom.createPortal)(
|
|
5956
|
-
/* @__PURE__ */ (0,
|
|
6174
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
5957
6175
|
"div",
|
|
5958
6176
|
{
|
|
5959
6177
|
"data-ohw-section-picker": "",
|
|
@@ -5963,12 +6181,12 @@ function SectionPickerOverlay({
|
|
|
5963
6181
|
role: "dialog",
|
|
5964
6182
|
"aria-label": "Choose a section",
|
|
5965
6183
|
children: [
|
|
5966
|
-
/* @__PURE__ */ (0,
|
|
6184
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
5967
6185
|
"div",
|
|
5968
6186
|
{
|
|
5969
6187
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
5970
6188
|
style: { top: chromeClip.top + 20 },
|
|
5971
|
-
children: /* @__PURE__ */ (0,
|
|
6189
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
5972
6190
|
Button,
|
|
5973
6191
|
{
|
|
5974
6192
|
type: "button",
|
|
@@ -5977,14 +6195,14 @@ function SectionPickerOverlay({
|
|
|
5977
6195
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
5978
6196
|
onClick: onBack,
|
|
5979
6197
|
children: [
|
|
5980
|
-
/* @__PURE__ */ (0,
|
|
6198
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
5981
6199
|
"Back"
|
|
5982
6200
|
]
|
|
5983
6201
|
}
|
|
5984
6202
|
)
|
|
5985
6203
|
}
|
|
5986
6204
|
),
|
|
5987
|
-
/* @__PURE__ */ (0,
|
|
6205
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
5988
6206
|
"div",
|
|
5989
6207
|
{
|
|
5990
6208
|
className: "pointer-events-none fixed left-1/2 z-[2] rounded-lg px-4 py-3 text-xs leading-4 tracking-[0.18px] text-white shadow-md",
|
|
@@ -5997,7 +6215,7 @@ function SectionPickerOverlay({
|
|
|
5997
6215
|
children: "Click on section to select"
|
|
5998
6216
|
}
|
|
5999
6217
|
),
|
|
6000
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
6218
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6001
6219
|
"div",
|
|
6002
6220
|
{
|
|
6003
6221
|
className: "pointer-events-none fixed left-1/2 z-[1] -translate-x-1/2 rounded-md px-3 py-2 text-sm text-muted-foreground shadow-sm",
|
|
@@ -6005,14 +6223,14 @@ function SectionPickerOverlay({
|
|
|
6005
6223
|
children: "Loading page preview\u2026"
|
|
6006
6224
|
}
|
|
6007
6225
|
) : null,
|
|
6008
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
6226
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
6009
6227
|
isOnTargetPage ? liveSections.map((section) => {
|
|
6010
6228
|
const rect = rects.get(section.id);
|
|
6011
6229
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
6012
6230
|
const isSelected = selectedId === section.id;
|
|
6013
6231
|
const isHovered = hoveredId === section.id;
|
|
6014
6232
|
const isLit = isSelected || isHovered;
|
|
6015
|
-
return /* @__PURE__ */ (0,
|
|
6233
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
6016
6234
|
"button",
|
|
6017
6235
|
{
|
|
6018
6236
|
type: "button",
|
|
@@ -6027,7 +6245,7 @@ function SectionPickerOverlay({
|
|
|
6027
6245
|
"aria-label": `Select section ${section.label}`,
|
|
6028
6246
|
onClick: () => handleSelect(section),
|
|
6029
6247
|
children: [
|
|
6030
|
-
isLit ? /* @__PURE__ */ (0,
|
|
6248
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6031
6249
|
"span",
|
|
6032
6250
|
{
|
|
6033
6251
|
className: "pointer-events-none absolute",
|
|
@@ -6040,13 +6258,13 @@ function SectionPickerOverlay({
|
|
|
6040
6258
|
"aria-hidden": true
|
|
6041
6259
|
}
|
|
6042
6260
|
) : null,
|
|
6043
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
6261
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6044
6262
|
"span",
|
|
6045
6263
|
{
|
|
6046
6264
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
6047
6265
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
6048
6266
|
"aria-hidden": true,
|
|
6049
|
-
children: /* @__PURE__ */ (0,
|
|
6267
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.Check, { className: "size-5" })
|
|
6050
6268
|
}
|
|
6051
6269
|
) : null
|
|
6052
6270
|
]
|
|
@@ -6062,7 +6280,7 @@ function SectionPickerOverlay({
|
|
|
6062
6280
|
}
|
|
6063
6281
|
|
|
6064
6282
|
// src/ui/link-modal/useLinkModalState.ts
|
|
6065
|
-
var
|
|
6283
|
+
var import_react7 = require("react");
|
|
6066
6284
|
function useLinkModalState({
|
|
6067
6285
|
open,
|
|
6068
6286
|
mode,
|
|
@@ -6074,14 +6292,14 @@ function useLinkModalState({
|
|
|
6074
6292
|
onClose,
|
|
6075
6293
|
onSubmit
|
|
6076
6294
|
}) {
|
|
6077
|
-
const availablePages = (0,
|
|
6078
|
-
const [searchValue, setSearchValue] = (0,
|
|
6079
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
6080
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
6081
|
-
const [step, setStep] = (0,
|
|
6082
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
6083
|
-
const [urlError, setUrlError] = (0,
|
|
6084
|
-
const reset = (0,
|
|
6295
|
+
const availablePages = (0, import_react7.useMemo)(() => pages, [pages]);
|
|
6296
|
+
const [searchValue, setSearchValue] = (0, import_react7.useState)("");
|
|
6297
|
+
const [selectedPage, setSelectedPage] = (0, import_react7.useState)(null);
|
|
6298
|
+
const [selectedSection, setSelectedSection] = (0, import_react7.useState)(null);
|
|
6299
|
+
const [step, setStep] = (0, import_react7.useState)("input");
|
|
6300
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react7.useState)(false);
|
|
6301
|
+
const [urlError, setUrlError] = (0, import_react7.useState)("");
|
|
6302
|
+
const reset = (0, import_react7.useCallback)(() => {
|
|
6085
6303
|
setSearchValue("");
|
|
6086
6304
|
setSelectedPage(null);
|
|
6087
6305
|
setSelectedSection(null);
|
|
@@ -6089,7 +6307,7 @@ function useLinkModalState({
|
|
|
6089
6307
|
setDropdownOpen(false);
|
|
6090
6308
|
setUrlError("");
|
|
6091
6309
|
}, []);
|
|
6092
|
-
(0,
|
|
6310
|
+
(0, import_react7.useEffect)(() => {
|
|
6093
6311
|
if (!open) return;
|
|
6094
6312
|
if (mode === "edit" && initialTarget) {
|
|
6095
6313
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -6105,11 +6323,11 @@ function useLinkModalState({
|
|
|
6105
6323
|
setDropdownOpen(false);
|
|
6106
6324
|
setUrlError("");
|
|
6107
6325
|
}, [open, mode, initialTarget, reset]);
|
|
6108
|
-
const filteredPages = (0,
|
|
6326
|
+
const filteredPages = (0, import_react7.useMemo)(() => {
|
|
6109
6327
|
if (!searchValue.trim()) return availablePages;
|
|
6110
6328
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
6111
6329
|
}, [availablePages, searchValue]);
|
|
6112
|
-
const activeSections = (0,
|
|
6330
|
+
const activeSections = (0, import_react7.useMemo)(() => {
|
|
6113
6331
|
if (!selectedPage) return [];
|
|
6114
6332
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
6115
6333
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -6158,7 +6376,7 @@ function useLinkModalState({
|
|
|
6158
6376
|
reset();
|
|
6159
6377
|
onClose();
|
|
6160
6378
|
};
|
|
6161
|
-
const isValid = (0,
|
|
6379
|
+
const isValid = (0, import_react7.useMemo)(() => {
|
|
6162
6380
|
if (urlError) return false;
|
|
6163
6381
|
if (showBreadcrumb) return true;
|
|
6164
6382
|
if (selectedPage) return true;
|
|
@@ -6226,7 +6444,7 @@ function useLinkModalState({
|
|
|
6226
6444
|
}
|
|
6227
6445
|
|
|
6228
6446
|
// src/ui/link-modal/LinkPopover.tsx
|
|
6229
|
-
var
|
|
6447
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
6230
6448
|
function postToParent(data) {
|
|
6231
6449
|
window.parent?.postMessage(data, "*");
|
|
6232
6450
|
}
|
|
@@ -6255,7 +6473,7 @@ function LinkPopover({
|
|
|
6255
6473
|
onSubmit
|
|
6256
6474
|
});
|
|
6257
6475
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
6258
|
-
(0,
|
|
6476
|
+
(0, import_react8.useEffect)(() => {
|
|
6259
6477
|
if (!open) return;
|
|
6260
6478
|
if (sectionPickerActive) {
|
|
6261
6479
|
postToParent({ type: "ui:unlock" });
|
|
@@ -6322,15 +6540,15 @@ function LinkPopover({
|
|
|
6322
6540
|
);
|
|
6323
6541
|
};
|
|
6324
6542
|
}, [open, sectionPickerActive]);
|
|
6325
|
-
return /* @__PURE__ */ (0,
|
|
6326
|
-
/* @__PURE__ */ (0,
|
|
6543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
6544
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6327
6545
|
Dialog2,
|
|
6328
6546
|
{
|
|
6329
6547
|
open: open && !sectionPickerActive,
|
|
6330
6548
|
onOpenChange: (next) => {
|
|
6331
6549
|
if (!next) onClose?.();
|
|
6332
6550
|
},
|
|
6333
|
-
children: /* @__PURE__ */ (0,
|
|
6551
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6334
6552
|
DialogContent,
|
|
6335
6553
|
{
|
|
6336
6554
|
ref: panelRef,
|
|
@@ -6340,12 +6558,12 @@ function LinkPopover({
|
|
|
6340
6558
|
"data-ohw-bridge": "",
|
|
6341
6559
|
showCloseButton: false,
|
|
6342
6560
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
6343
|
-
children: /* @__PURE__ */ (0,
|
|
6561
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LinkEditorPanel, { state, onClose })
|
|
6344
6562
|
}
|
|
6345
6563
|
)
|
|
6346
6564
|
}
|
|
6347
6565
|
),
|
|
6348
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
6566
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6349
6567
|
SectionPickerOverlay,
|
|
6350
6568
|
{
|
|
6351
6569
|
pagePath: state.selectedPage.path,
|
|
@@ -6884,9 +7102,57 @@ function insertNavbarItem(href, label, afterAnchor = null) {
|
|
|
6884
7102
|
order
|
|
6885
7103
|
};
|
|
6886
7104
|
}
|
|
7105
|
+
function duplicateNavbarItem(sourceAnchor) {
|
|
7106
|
+
if (!isNavbarLinkItem(sourceAnchor)) return null;
|
|
7107
|
+
const sourceHrefKey = sourceAnchor.getAttribute("data-ohw-href-key");
|
|
7108
|
+
if (!sourceHrefKey || !isNavbarHrefKey(sourceHrefKey)) return null;
|
|
7109
|
+
const href = getLinkHref(sourceAnchor);
|
|
7110
|
+
const labelEl = sourceAnchor.querySelector('[data-ohw-editable="text"]');
|
|
7111
|
+
const label = (labelEl?.textContent ?? "").trim() || "Untitled";
|
|
7112
|
+
const forest = getNavForestFromDom();
|
|
7113
|
+
const sourceNode = forest.find((n) => n.id === sourceHrefKey);
|
|
7114
|
+
const childIds = sourceNode?.children.map((c) => c.id) ?? [];
|
|
7115
|
+
const primary = insertNavbarItem(href, label, sourceAnchor);
|
|
7116
|
+
const childResults = [];
|
|
7117
|
+
let after = primary.anchor;
|
|
7118
|
+
for (const childId of childIds) {
|
|
7119
|
+
const childEl = findCounterpartByHrefKey(childId, document) ?? document.querySelector(`[data-ohw-href-key="${CSS.escape(childId)}"]`);
|
|
7120
|
+
if (!childEl || !isNavbarLinkItem(childEl)) continue;
|
|
7121
|
+
const childHref = getLinkHref(childEl);
|
|
7122
|
+
const childLabelEl = childEl.querySelector('[data-ohw-editable="text"]');
|
|
7123
|
+
const childLabel = (childLabelEl?.textContent ?? "").trim() || "Untitled";
|
|
7124
|
+
const inserted = insertNavbarItem(childHref, childLabel, after);
|
|
7125
|
+
childResults.push(inserted);
|
|
7126
|
+
after = inserted.anchor;
|
|
7127
|
+
}
|
|
7128
|
+
let orderJson;
|
|
7129
|
+
if (childResults.length > 0) {
|
|
7130
|
+
const nextForest = getNavForestFromDom();
|
|
7131
|
+
const withoutNew = nextForest.filter(
|
|
7132
|
+
(n) => n.id !== primary.hrefKey && !childResults.some((c) => c.hrefKey === n.id)
|
|
7133
|
+
);
|
|
7134
|
+
const sourceIdx = withoutNew.findIndex((n) => n.id === sourceHrefKey);
|
|
7135
|
+
const insertAt = sourceIdx >= 0 ? sourceIdx + 1 : withoutNew.length;
|
|
7136
|
+
withoutNew.splice(insertAt, 0, {
|
|
7137
|
+
id: primary.hrefKey,
|
|
7138
|
+
children: childResults.map((c) => ({ id: c.hrefKey, children: [] }))
|
|
7139
|
+
});
|
|
7140
|
+
applyNavForest(withoutNew);
|
|
7141
|
+
orderJson = serializeNavOrder(withoutNew);
|
|
7142
|
+
} else {
|
|
7143
|
+
orderJson = serializeNavOrder(getNavForestFromDom());
|
|
7144
|
+
}
|
|
7145
|
+
return {
|
|
7146
|
+
...primary,
|
|
7147
|
+
order: flattenNavOrder(parseNavOrderJson(orderJson) ?? getNavForestFromDom()),
|
|
7148
|
+
childResults,
|
|
7149
|
+
orderJson
|
|
7150
|
+
};
|
|
7151
|
+
}
|
|
6887
7152
|
|
|
6888
7153
|
// src/lib/footer-items.ts
|
|
6889
7154
|
var FOOTER_ORDER_KEY = "__ohw_footer_order";
|
|
7155
|
+
var MAX_FOOTER_COLUMNS = 18;
|
|
6890
7156
|
var FOOTER_HREF_RE = /^footer-(\d+)-(\d+)-href$/;
|
|
6891
7157
|
function parseFooterHrefKey(key) {
|
|
6892
7158
|
if (!key) return null;
|
|
@@ -7067,7 +7333,191 @@ function parseFooterOrder(content) {
|
|
|
7067
7333
|
return null;
|
|
7068
7334
|
}
|
|
7069
7335
|
}
|
|
7336
|
+
var FOOTER_HEADING_RE = /^footer-(\d+)-heading$/;
|
|
7337
|
+
var FOOTER_LABEL_RE = /^footer-(\d+)-(\d+)-label$/;
|
|
7338
|
+
var DEFAULT_FOOTER_COLUMN_HEADING = "New";
|
|
7339
|
+
var DEFAULT_FOOTER_COLUMN_LINK_LABEL = "New link";
|
|
7340
|
+
var DEFAULT_FOOTER_COLUMN_LINK_HREF = "";
|
|
7341
|
+
function isFooterLinksContainer(el) {
|
|
7342
|
+
return el.hasAttribute("data-ohw-footer-links") || el.classList.contains("rb-footer-links");
|
|
7343
|
+
}
|
|
7344
|
+
function getFooterColumnIndicesInDom() {
|
|
7345
|
+
const indices = /* @__PURE__ */ new Set();
|
|
7346
|
+
for (const col of listFooterColumns()) {
|
|
7347
|
+
const attr = col.getAttribute("data-ohw-footer-col");
|
|
7348
|
+
if (attr != null) {
|
|
7349
|
+
const n = parseInt(attr, 10);
|
|
7350
|
+
if (Number.isFinite(n)) indices.add(n);
|
|
7351
|
+
}
|
|
7352
|
+
for (const link of listFooterLinksInColumn(col)) {
|
|
7353
|
+
const parsed = parseFooterHrefKey(link.getAttribute("data-ohw-href-key"));
|
|
7354
|
+
if (parsed) indices.add(parsed.col);
|
|
7355
|
+
}
|
|
7356
|
+
const heading = col.querySelector('[data-ohw-key^="footer-"][data-ohw-key$="-heading"]');
|
|
7357
|
+
const headingKey = heading?.getAttribute("data-ohw-key");
|
|
7358
|
+
if (headingKey) {
|
|
7359
|
+
const match = headingKey.match(FOOTER_HEADING_RE);
|
|
7360
|
+
if (match) indices.add(parseInt(match[1], 10));
|
|
7361
|
+
}
|
|
7362
|
+
}
|
|
7363
|
+
return [...indices].sort((a, b) => a - b);
|
|
7364
|
+
}
|
|
7365
|
+
function getNextFooterColumnIndex() {
|
|
7366
|
+
const indices = getFooterColumnIndicesInDom();
|
|
7367
|
+
if (indices.length === 0) return 0;
|
|
7368
|
+
return Math.max(...indices) + 1;
|
|
7369
|
+
}
|
|
7370
|
+
function canAddFooterColumn() {
|
|
7371
|
+
return listFooterColumns().length < MAX_FOOTER_COLUMNS;
|
|
7372
|
+
}
|
|
7373
|
+
function buildFooterHeading(colIndex, text) {
|
|
7374
|
+
const heading = document.createElement("p");
|
|
7375
|
+
heading.setAttribute("data-ohw-editable", "text");
|
|
7376
|
+
heading.setAttribute("data-ohw-key", `footer-${colIndex}-heading`);
|
|
7377
|
+
heading.textContent = text;
|
|
7378
|
+
heading.style.cssText = [
|
|
7379
|
+
"color: var(--espresso, #3d312b)",
|
|
7380
|
+
"font-size: 14px",
|
|
7381
|
+
"font-weight: 800",
|
|
7382
|
+
"opacity: 0.82",
|
|
7383
|
+
"margin: 0 0 6px",
|
|
7384
|
+
"padding: 0",
|
|
7385
|
+
"line-height: 1.2"
|
|
7386
|
+
].join(";");
|
|
7387
|
+
return heading;
|
|
7388
|
+
}
|
|
7389
|
+
function buildFooterLink(colIndex, itemIndex, href, label, template) {
|
|
7390
|
+
const anchor = cloneFooterLinkShell(template);
|
|
7391
|
+
anchor.setAttribute("href", href);
|
|
7392
|
+
anchor.setAttribute("data-ohw-href-key", `footer-${colIndex}-${itemIndex}-href`);
|
|
7393
|
+
const span = document.createElement("span");
|
|
7394
|
+
span.setAttribute("data-ohw-editable", "text");
|
|
7395
|
+
span.setAttribute("data-ohw-key", `footer-${colIndex}-${itemIndex}-label`);
|
|
7396
|
+
span.textContent = label;
|
|
7397
|
+
anchor.appendChild(span);
|
|
7398
|
+
return anchor;
|
|
7399
|
+
}
|
|
7400
|
+
function footerColumnExistsInDom(colIndex) {
|
|
7401
|
+
return document.querySelector(`[data-ohw-footer-col="${colIndex}"]`) !== null || document.querySelector(`[data-ohw-href-key^="footer-${colIndex}-"]`) !== null || document.querySelector(`[data-ohw-key="footer-${colIndex}-heading"]`) !== null;
|
|
7402
|
+
}
|
|
7403
|
+
function getFooterLinkTemplate() {
|
|
7404
|
+
for (const col of listFooterColumns()) {
|
|
7405
|
+
const link = listFooterLinksInColumn(col)[0];
|
|
7406
|
+
if (link) return link;
|
|
7407
|
+
}
|
|
7408
|
+
return null;
|
|
7409
|
+
}
|
|
7410
|
+
function getFooterColumnTemplate() {
|
|
7411
|
+
return listFooterColumns()[0] ?? null;
|
|
7412
|
+
}
|
|
7413
|
+
function insertFooterColumnDom(colIndex, heading, items) {
|
|
7414
|
+
const container = getFooterLinksContainer();
|
|
7415
|
+
if (!container) return null;
|
|
7416
|
+
const colTemplate = getFooterColumnTemplate();
|
|
7417
|
+
const linkTemplate = getFooterLinkTemplate();
|
|
7418
|
+
const column = document.createElement("div");
|
|
7419
|
+
if (colTemplate?.className) column.className = colTemplate.className;
|
|
7420
|
+
else column.className = "rb-footer-link-col";
|
|
7421
|
+
column.setAttribute("data-ohw-footer-col", String(colIndex));
|
|
7422
|
+
if (colTemplate) {
|
|
7423
|
+
const gap = getComputedStyle(colTemplate).gap;
|
|
7424
|
+
if (gap && gap !== "normal") column.style.gap = gap;
|
|
7425
|
+
column.style.display = getComputedStyle(colTemplate).display || "flex";
|
|
7426
|
+
column.style.flexDirection = "column";
|
|
7427
|
+
}
|
|
7428
|
+
column.appendChild(buildFooterHeading(colIndex, heading));
|
|
7429
|
+
let firstLink = null;
|
|
7430
|
+
items.forEach((item, itemIndex) => {
|
|
7431
|
+
const link = buildFooterLink(colIndex, itemIndex, item.href, item.label, linkTemplate);
|
|
7432
|
+
column.appendChild(link);
|
|
7433
|
+
if (!firstLink) firstLink = link;
|
|
7434
|
+
});
|
|
7435
|
+
container.appendChild(column);
|
|
7436
|
+
return { column, firstLink };
|
|
7437
|
+
}
|
|
7438
|
+
function insertFooterColumn(heading = DEFAULT_FOOTER_COLUMN_HEADING, linkLabel = DEFAULT_FOOTER_COLUMN_LINK_LABEL, linkHref = DEFAULT_FOOTER_COLUMN_LINK_HREF) {
|
|
7439
|
+
if (!canAddFooterColumn()) {
|
|
7440
|
+
throw new Error(`Footer column limit reached (${MAX_FOOTER_COLUMNS})`);
|
|
7441
|
+
}
|
|
7442
|
+
const colIndex = getNextFooterColumnIndex();
|
|
7443
|
+
const inserted = insertFooterColumnDom(colIndex, heading, [{ href: linkHref, label: linkLabel }]);
|
|
7444
|
+
if (!inserted?.firstLink) throw new Error("Failed to insert footer column");
|
|
7445
|
+
syncFooterColumnIndices(listFooterColumns());
|
|
7446
|
+
return {
|
|
7447
|
+
column: inserted.column,
|
|
7448
|
+
firstLink: inserted.firstLink,
|
|
7449
|
+
colIndex,
|
|
7450
|
+
headingKey: `footer-${colIndex}-heading`,
|
|
7451
|
+
hrefKey: `footer-${colIndex}-0-href`,
|
|
7452
|
+
labelKey: `footer-${colIndex}-0-label`,
|
|
7453
|
+
heading,
|
|
7454
|
+
label: linkLabel,
|
|
7455
|
+
href: linkHref,
|
|
7456
|
+
order: getFooterOrderFromDom()
|
|
7457
|
+
};
|
|
7458
|
+
}
|
|
7459
|
+
function collectFooterColumnIndicesFromContent(content) {
|
|
7460
|
+
const indices = /* @__PURE__ */ new Set();
|
|
7461
|
+
for (const key of Object.keys(content)) {
|
|
7462
|
+
const href = parseFooterHrefKey(key);
|
|
7463
|
+
if (href) indices.add(href.col);
|
|
7464
|
+
const heading = key.match(FOOTER_HEADING_RE);
|
|
7465
|
+
if (heading) indices.add(parseInt(heading[1], 10));
|
|
7466
|
+
const label = key.match(FOOTER_LABEL_RE);
|
|
7467
|
+
if (label) indices.add(parseInt(label[1], 10));
|
|
7468
|
+
}
|
|
7469
|
+
const order = parseFooterOrder(content);
|
|
7470
|
+
if (order) {
|
|
7471
|
+
for (const col of order) {
|
|
7472
|
+
for (const hrefKey of col) {
|
|
7473
|
+
const parsed = parseFooterHrefKey(hrefKey);
|
|
7474
|
+
if (parsed) indices.add(parsed.col);
|
|
7475
|
+
}
|
|
7476
|
+
}
|
|
7477
|
+
}
|
|
7478
|
+
return [...indices].sort((a, b) => a - b);
|
|
7479
|
+
}
|
|
7480
|
+
function collectFooterItemsForColumn(content, colIndex) {
|
|
7481
|
+
const itemIndices = /* @__PURE__ */ new Set();
|
|
7482
|
+
for (const key of Object.keys(content)) {
|
|
7483
|
+
const href = parseFooterHrefKey(key);
|
|
7484
|
+
if (href?.col === colIndex) itemIndices.add(href.item);
|
|
7485
|
+
const label = key.match(FOOTER_LABEL_RE);
|
|
7486
|
+
if (label && parseInt(label[1], 10) === colIndex) {
|
|
7487
|
+
itemIndices.add(parseInt(label[2], 10));
|
|
7488
|
+
}
|
|
7489
|
+
}
|
|
7490
|
+
const sorted = [...itemIndices].sort((a, b) => a - b);
|
|
7491
|
+
if (sorted.length === 0) {
|
|
7492
|
+
return [
|
|
7493
|
+
{
|
|
7494
|
+
href: content[`footer-${colIndex}-0-href`] ?? DEFAULT_FOOTER_COLUMN_LINK_HREF,
|
|
7495
|
+
label: content[`footer-${colIndex}-0-label`] ?? DEFAULT_FOOTER_COLUMN_LINK_LABEL
|
|
7496
|
+
}
|
|
7497
|
+
];
|
|
7498
|
+
}
|
|
7499
|
+
return sorted.map((itemIndex) => ({
|
|
7500
|
+
href: content[`footer-${colIndex}-${itemIndex}-href`] ?? DEFAULT_FOOTER_COLUMN_LINK_HREF,
|
|
7501
|
+
label: content[`footer-${colIndex}-${itemIndex}-label`] ?? DEFAULT_FOOTER_COLUMN_LINK_LABEL
|
|
7502
|
+
}));
|
|
7503
|
+
}
|
|
7504
|
+
function reconcileFooterColumnsFromContent(content) {
|
|
7505
|
+
const indices = collectFooterColumnIndicesFromContent(content);
|
|
7506
|
+
for (const colIndex of indices) {
|
|
7507
|
+
if (footerColumnExistsInDom(colIndex)) continue;
|
|
7508
|
+
const heading = content[`footer-${colIndex}-heading`] ?? DEFAULT_FOOTER_COLUMN_HEADING;
|
|
7509
|
+
const items = collectFooterItemsForColumn(content, colIndex);
|
|
7510
|
+
const hasPayload = Boolean(content[`footer-${colIndex}-heading`]) || items.some(
|
|
7511
|
+
(_, i) => content[`footer-${colIndex}-${i}-href`] !== void 0 || content[`footer-${colIndex}-${i}-label`] !== void 0
|
|
7512
|
+
) || (parseFooterOrder(content)?.some(
|
|
7513
|
+
(col) => col.some((k) => parseFooterHrefKey(k)?.col === colIndex)
|
|
7514
|
+
) ?? false);
|
|
7515
|
+
if (!hasPayload) continue;
|
|
7516
|
+
insertFooterColumnDom(colIndex, heading, items);
|
|
7517
|
+
}
|
|
7518
|
+
}
|
|
7070
7519
|
function reconcileFooterOrderFromContent(content) {
|
|
7520
|
+
reconcileFooterColumnsFromContent(content);
|
|
7071
7521
|
const order = parseFooterOrder(content);
|
|
7072
7522
|
if (!order?.length) return;
|
|
7073
7523
|
const current = getFooterOrderFromDom();
|
|
@@ -7077,6 +7527,26 @@ function reconcileFooterOrderFromContent(content) {
|
|
|
7077
7527
|
}
|
|
7078
7528
|
applyFooterOrder(order);
|
|
7079
7529
|
}
|
|
7530
|
+
function resolveFooterLinksContainerSelectionTarget(target, clientX, clientY, isPointOverItem) {
|
|
7531
|
+
const container = getFooterLinksContainer();
|
|
7532
|
+
if (!container) return null;
|
|
7533
|
+
const inContainer = target === container || container.contains(target) && Boolean(target.closest("[data-ohw-footer-links], .rb-footer-links"));
|
|
7534
|
+
if (!inContainer && target !== container) {
|
|
7535
|
+
const r2 = container.getBoundingClientRect();
|
|
7536
|
+
const over = clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
|
|
7537
|
+
if (!over) return null;
|
|
7538
|
+
}
|
|
7539
|
+
if (isPointOverItem(container, clientX, clientY)) return null;
|
|
7540
|
+
const column = target.closest("[data-ohw-footer-col], [data-ohw-footer-column]") ?? null;
|
|
7541
|
+
if (column && container.contains(column)) {
|
|
7542
|
+
if (target === column || column.contains(target)) return null;
|
|
7543
|
+
}
|
|
7544
|
+
if (target === container || container.contains(target) || inContainer) {
|
|
7545
|
+
if (target === container || isFooterLinksContainer(target)) return container;
|
|
7546
|
+
if (!column) return container;
|
|
7547
|
+
}
|
|
7548
|
+
return null;
|
|
7549
|
+
}
|
|
7080
7550
|
function isRowLayoutColumn(links) {
|
|
7081
7551
|
if (links.length < 2) return false;
|
|
7082
7552
|
const firstTop = links[0].getBoundingClientRect().top;
|
|
@@ -7231,6 +7701,108 @@ function hitTestColumnDropSlot(clientX, _clientY) {
|
|
|
7231
7701
|
}
|
|
7232
7702
|
return best?.slot ?? null;
|
|
7233
7703
|
}
|
|
7704
|
+
function getLinkHref2(el) {
|
|
7705
|
+
const key = el.getAttribute("data-ohw-href-key");
|
|
7706
|
+
if (key) {
|
|
7707
|
+
const stored = getStoredLinkHref(key);
|
|
7708
|
+
if (stored !== void 0) return stored;
|
|
7709
|
+
}
|
|
7710
|
+
return el.getAttribute("href") ?? "";
|
|
7711
|
+
}
|
|
7712
|
+
function getNextFooterItemIndex(col) {
|
|
7713
|
+
let max = -1;
|
|
7714
|
+
for (const el of document.querySelectorAll("footer [data-ohw-href-key]")) {
|
|
7715
|
+
const parsed = parseFooterHrefKey(el.getAttribute("data-ohw-href-key"));
|
|
7716
|
+
if (!parsed || parsed.col !== col) continue;
|
|
7717
|
+
if (parsed.item > max) max = parsed.item;
|
|
7718
|
+
}
|
|
7719
|
+
return max + 1;
|
|
7720
|
+
}
|
|
7721
|
+
function cloneFooterLinkShell(template) {
|
|
7722
|
+
const anchor = document.createElement("a");
|
|
7723
|
+
if (template) {
|
|
7724
|
+
anchor.style.cssText = template.style.cssText;
|
|
7725
|
+
if (template.className) anchor.className = template.className;
|
|
7726
|
+
}
|
|
7727
|
+
anchor.style.cursor = "pointer";
|
|
7728
|
+
anchor.style.textDecoration = "none";
|
|
7729
|
+
return anchor;
|
|
7730
|
+
}
|
|
7731
|
+
function insertFooterItem(column, href, label, afterAnchor = null) {
|
|
7732
|
+
const columns = listFooterColumns();
|
|
7733
|
+
const colIndex = columns.indexOf(column);
|
|
7734
|
+
if (colIndex < 0) throw new Error("Footer column not found");
|
|
7735
|
+
const item = getNextFooterItemIndex(colIndex);
|
|
7736
|
+
const hrefKey = `footer-${colIndex}-${item}-href`;
|
|
7737
|
+
const labelKey = `footer-${colIndex}-${item}-label`;
|
|
7738
|
+
const template = listFooterLinksInColumn(column)[0] ?? null;
|
|
7739
|
+
const anchor = cloneFooterLinkShell(template);
|
|
7740
|
+
anchor.href = href;
|
|
7741
|
+
anchor.setAttribute("data-ohw-href-key", hrefKey);
|
|
7742
|
+
const span = document.createElement("span");
|
|
7743
|
+
span.setAttribute("data-ohw-editable", "text");
|
|
7744
|
+
span.setAttribute("data-ohw-key", labelKey);
|
|
7745
|
+
span.textContent = label;
|
|
7746
|
+
anchor.appendChild(span);
|
|
7747
|
+
if (afterAnchor && afterAnchor.parentElement === column) {
|
|
7748
|
+
afterAnchor.insertAdjacentElement("afterend", anchor);
|
|
7749
|
+
} else {
|
|
7750
|
+
column.appendChild(anchor);
|
|
7751
|
+
}
|
|
7752
|
+
const order = getFooterOrderFromDom();
|
|
7753
|
+
applyFooterOrder(order);
|
|
7754
|
+
return {
|
|
7755
|
+
anchor,
|
|
7756
|
+
col: colIndex,
|
|
7757
|
+
item,
|
|
7758
|
+
hrefKey,
|
|
7759
|
+
labelKey,
|
|
7760
|
+
href,
|
|
7761
|
+
label,
|
|
7762
|
+
order
|
|
7763
|
+
};
|
|
7764
|
+
}
|
|
7765
|
+
function duplicateFooterItem(sourceAnchor) {
|
|
7766
|
+
if (!isFooterLinkAnchor(sourceAnchor)) return null;
|
|
7767
|
+
const column = findFooterColumnForLink(sourceAnchor);
|
|
7768
|
+
if (!column) return null;
|
|
7769
|
+
const href = getLinkHref2(sourceAnchor);
|
|
7770
|
+
const labelEl = sourceAnchor.querySelector('[data-ohw-editable="text"]');
|
|
7771
|
+
const label = (labelEl?.textContent ?? "").trim() || "Untitled";
|
|
7772
|
+
return insertFooterItem(column, href || "/", label, sourceAnchor);
|
|
7773
|
+
}
|
|
7774
|
+
|
|
7775
|
+
// src/lib/add-footer-column.ts
|
|
7776
|
+
function buildFooterColumnEditContentPatch(result) {
|
|
7777
|
+
return {
|
|
7778
|
+
[result.headingKey]: result.heading,
|
|
7779
|
+
[result.hrefKey]: result.href,
|
|
7780
|
+
[result.labelKey]: result.label,
|
|
7781
|
+
[FOOTER_ORDER_KEY]: JSON.stringify(result.order)
|
|
7782
|
+
};
|
|
7783
|
+
}
|
|
7784
|
+
function addFooterColumnWithPersist({
|
|
7785
|
+
postToParent: postToParent2
|
|
7786
|
+
}) {
|
|
7787
|
+
if (!canAddFooterColumn()) {
|
|
7788
|
+
postToParent2({
|
|
7789
|
+
type: "ow:toast",
|
|
7790
|
+
title: `Maximum ${MAX_FOOTER_COLUMNS} columns`,
|
|
7791
|
+
toastType: "error"
|
|
7792
|
+
});
|
|
7793
|
+
return null;
|
|
7794
|
+
}
|
|
7795
|
+
const result = insertFooterColumn();
|
|
7796
|
+
const patch = buildFooterColumnEditContentPatch(result);
|
|
7797
|
+
setStoredLinkHref(result.hrefKey, result.href);
|
|
7798
|
+
postToParent2({
|
|
7799
|
+
type: "ow:change",
|
|
7800
|
+
nodes: Object.entries(patch).map(([key, text]) => ({ key, text }))
|
|
7801
|
+
});
|
|
7802
|
+
postToParent2({ type: "ow:toast", title: "Item added", toastType: "success" });
|
|
7803
|
+
enforceLinkHrefs();
|
|
7804
|
+
return result;
|
|
7805
|
+
}
|
|
7234
7806
|
|
|
7235
7807
|
// src/lib/item-drag-interaction.ts
|
|
7236
7808
|
function disableNativeHrefDrag(el) {
|
|
@@ -7429,7 +8001,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey) {
|
|
|
7429
8001
|
}
|
|
7430
8002
|
|
|
7431
8003
|
// src/useNavItemDrag.ts
|
|
7432
|
-
var
|
|
8004
|
+
var import_react9 = require("react");
|
|
7433
8005
|
function useNavItemDrag({
|
|
7434
8006
|
isEditMode,
|
|
7435
8007
|
editContentRef,
|
|
@@ -7454,11 +8026,11 @@ function useNavItemDrag({
|
|
|
7454
8026
|
isDragHandleDisabled: isDragHandleDisabled2,
|
|
7455
8027
|
isNavbarButton: isNavbarButton3
|
|
7456
8028
|
}) {
|
|
7457
|
-
const navDragRef = (0,
|
|
7458
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
7459
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
7460
|
-
const navPointerDragRef = (0,
|
|
7461
|
-
const clearNavDragVisuals = (0,
|
|
8029
|
+
const navDragRef = (0, import_react9.useRef)(null);
|
|
8030
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react9.useState)([]);
|
|
8031
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react9.useState)(null);
|
|
8032
|
+
const navPointerDragRef = (0, import_react9.useRef)(null);
|
|
8033
|
+
const clearNavDragVisuals = (0, import_react9.useCallback)(() => {
|
|
7462
8034
|
navDragRef.current = null;
|
|
7463
8035
|
setNavDropSlots([]);
|
|
7464
8036
|
setActiveNavDropIndex(null);
|
|
@@ -7467,7 +8039,7 @@ function useNavItemDrag({
|
|
|
7467
8039
|
setIsItemDragging(false);
|
|
7468
8040
|
unlockItemDragInteraction();
|
|
7469
8041
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
7470
|
-
const refreshNavDragVisuals = (0,
|
|
8042
|
+
const refreshNavDragVisuals = (0, import_react9.useCallback)(
|
|
7471
8043
|
(session, activeSlot, clientX, clientY) => {
|
|
7472
8044
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
7473
8045
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -7485,13 +8057,13 @@ function useNavItemDrag({
|
|
|
7485
8057
|
},
|
|
7486
8058
|
[setDraggedItemRect, setSiblingHintRects]
|
|
7487
8059
|
);
|
|
7488
|
-
const refreshNavDragVisualsRef = (0,
|
|
8060
|
+
const refreshNavDragVisualsRef = (0, import_react9.useRef)(refreshNavDragVisuals);
|
|
7489
8061
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
7490
|
-
const commitNavDragRef = (0,
|
|
8062
|
+
const commitNavDragRef = (0, import_react9.useRef)(() => {
|
|
7491
8063
|
});
|
|
7492
|
-
const beginNavDragRef = (0,
|
|
8064
|
+
const beginNavDragRef = (0, import_react9.useRef)(() => {
|
|
7493
8065
|
});
|
|
7494
|
-
const beginNavDrag = (0,
|
|
8066
|
+
const beginNavDrag = (0, import_react9.useCallback)(
|
|
7495
8067
|
(session) => {
|
|
7496
8068
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
7497
8069
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -7518,7 +8090,7 @@ function useNavItemDrag({
|
|
|
7518
8090
|
]
|
|
7519
8091
|
);
|
|
7520
8092
|
beginNavDragRef.current = beginNavDrag;
|
|
7521
|
-
const commitNavDrag = (0,
|
|
8093
|
+
const commitNavDrag = (0, import_react9.useCallback)(
|
|
7522
8094
|
(clientX, clientY) => {
|
|
7523
8095
|
const session = navDragRef.current;
|
|
7524
8096
|
if (!session) {
|
|
@@ -7579,7 +8151,7 @@ function useNavItemDrag({
|
|
|
7579
8151
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
7580
8152
|
);
|
|
7581
8153
|
commitNavDragRef.current = commitNavDrag;
|
|
7582
|
-
const startNavLinkDrag = (0,
|
|
8154
|
+
const startNavLinkDrag = (0, import_react9.useCallback)(
|
|
7583
8155
|
(anchor, clientX, clientY, wasSelected) => {
|
|
7584
8156
|
if (footerDragRef.current) return false;
|
|
7585
8157
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -7597,7 +8169,7 @@ function useNavItemDrag({
|
|
|
7597
8169
|
},
|
|
7598
8170
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isNavbarButton3]
|
|
7599
8171
|
);
|
|
7600
|
-
const onNavDragOver = (0,
|
|
8172
|
+
const onNavDragOver = (0, import_react9.useCallback)(
|
|
7601
8173
|
(e) => {
|
|
7602
8174
|
const session = navDragRef.current;
|
|
7603
8175
|
if (!session) return false;
|
|
@@ -7609,7 +8181,7 @@ function useNavItemDrag({
|
|
|
7609
8181
|
},
|
|
7610
8182
|
[]
|
|
7611
8183
|
);
|
|
7612
|
-
(0,
|
|
8184
|
+
(0, import_react9.useEffect)(() => {
|
|
7613
8185
|
if (!isEditMode) return;
|
|
7614
8186
|
const THRESHOLD = 10;
|
|
7615
8187
|
const resolveWasSelected = (el) => {
|
|
@@ -7734,7 +8306,7 @@ function useNavItemDrag({
|
|
|
7734
8306
|
setLinkPopover,
|
|
7735
8307
|
suppressNextClickRef
|
|
7736
8308
|
]);
|
|
7737
|
-
const armNavPressFromChrome = (0,
|
|
8309
|
+
const armNavPressFromChrome = (0, import_react9.useCallback)(
|
|
7738
8310
|
(selected, clientX, clientY, pointerId) => {
|
|
7739
8311
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
7740
8312
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -7764,8 +8336,59 @@ function useNavItemDrag({
|
|
|
7764
8336
|
};
|
|
7765
8337
|
}
|
|
7766
8338
|
|
|
8339
|
+
// src/ui/footer-container-chrome.tsx
|
|
8340
|
+
var import_lucide_react11 = require("lucide-react");
|
|
8341
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
8342
|
+
function FooterContainerChrome({
|
|
8343
|
+
rect,
|
|
8344
|
+
onAdd,
|
|
8345
|
+
addDisabled = false
|
|
8346
|
+
}) {
|
|
8347
|
+
const chromeGap = 6;
|
|
8348
|
+
const buttonMargin = 7;
|
|
8349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
8350
|
+
"div",
|
|
8351
|
+
{
|
|
8352
|
+
"data-ohw-footer-container-chrome": "",
|
|
8353
|
+
"data-ohw-bridge": "",
|
|
8354
|
+
className: "pointer-events-none fixed z-[2147483647]",
|
|
8355
|
+
style: {
|
|
8356
|
+
top: rect.top - chromeGap,
|
|
8357
|
+
left: rect.left - chromeGap,
|
|
8358
|
+
width: rect.width + chromeGap * 2,
|
|
8359
|
+
height: rect.height + chromeGap * 2
|
|
8360
|
+
},
|
|
8361
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Tooltip, { children: [
|
|
8362
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
8363
|
+
"button",
|
|
8364
|
+
{
|
|
8365
|
+
type: "button",
|
|
8366
|
+
"data-ohw-footer-add-button": "",
|
|
8367
|
+
disabled: addDisabled,
|
|
8368
|
+
className: "pointer-events-auto absolute left-1/2 flex size-7 -translate-x-1/2 -translate-y-full items-center justify-center rounded-[10px] border border-border bg-background p-0.5 shadow-sm transition-colors hover:bg-muted/80 disabled:pointer-events-none disabled:opacity-40",
|
|
8369
|
+
style: { top: chromeGap - buttonMargin },
|
|
8370
|
+
"aria-label": "Add item",
|
|
8371
|
+
onMouseDown: (e) => {
|
|
8372
|
+
e.preventDefault();
|
|
8373
|
+
e.stopPropagation();
|
|
8374
|
+
},
|
|
8375
|
+
onClick: (e) => {
|
|
8376
|
+
e.preventDefault();
|
|
8377
|
+
e.stopPropagation();
|
|
8378
|
+
if (addDisabled) return;
|
|
8379
|
+
onAdd();
|
|
8380
|
+
},
|
|
8381
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
8382
|
+
}
|
|
8383
|
+
) }),
|
|
8384
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
8385
|
+
] })
|
|
8386
|
+
}
|
|
8387
|
+
) });
|
|
8388
|
+
}
|
|
8389
|
+
|
|
7767
8390
|
// src/lib/carousel.ts
|
|
7768
|
-
var
|
|
8391
|
+
var import_react10 = require("react");
|
|
7769
8392
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
7770
8393
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
7771
8394
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -7827,8 +8450,8 @@ function applyCarouselNode(key, val) {
|
|
|
7827
8450
|
return true;
|
|
7828
8451
|
}
|
|
7829
8452
|
function useOhwCarousel(key, initial) {
|
|
7830
|
-
const [images, setImages] = (0,
|
|
7831
|
-
(0,
|
|
8453
|
+
const [images, setImages] = (0, import_react10.useState)(initial);
|
|
8454
|
+
(0, import_react10.useEffect)(() => {
|
|
7832
8455
|
const el = document.querySelector(
|
|
7833
8456
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
7834
8457
|
);
|
|
@@ -7849,14 +8472,14 @@ function useOhwCarousel(key, initial) {
|
|
|
7849
8472
|
}
|
|
7850
8473
|
|
|
7851
8474
|
// src/ui/navbar-container-chrome.tsx
|
|
7852
|
-
var
|
|
7853
|
-
var
|
|
8475
|
+
var import_lucide_react12 = require("lucide-react");
|
|
8476
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
7854
8477
|
function NavbarContainerChrome({
|
|
7855
8478
|
rect,
|
|
7856
8479
|
onAdd
|
|
7857
8480
|
}) {
|
|
7858
8481
|
const chromeGap = 6;
|
|
7859
|
-
return /* @__PURE__ */ (0,
|
|
8482
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
7860
8483
|
"div",
|
|
7861
8484
|
{
|
|
7862
8485
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -7868,7 +8491,7 @@ function NavbarContainerChrome({
|
|
|
7868
8491
|
width: rect.width + chromeGap * 2,
|
|
7869
8492
|
height: rect.height + chromeGap * 2
|
|
7870
8493
|
},
|
|
7871
|
-
children: /* @__PURE__ */ (0,
|
|
8494
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
7872
8495
|
"button",
|
|
7873
8496
|
{
|
|
7874
8497
|
type: "button",
|
|
@@ -7885,7 +8508,7 @@ function NavbarContainerChrome({
|
|
|
7885
8508
|
e.stopPropagation();
|
|
7886
8509
|
onAdd();
|
|
7887
8510
|
},
|
|
7888
|
-
children: /* @__PURE__ */ (0,
|
|
8511
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
7889
8512
|
}
|
|
7890
8513
|
)
|
|
7891
8514
|
}
|
|
@@ -7894,7 +8517,7 @@ function NavbarContainerChrome({
|
|
|
7894
8517
|
|
|
7895
8518
|
// src/ui/drop-indicator.tsx
|
|
7896
8519
|
var React10 = __toESM(require("react"), 1);
|
|
7897
|
-
var
|
|
8520
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
7898
8521
|
var dropIndicatorVariants = cva(
|
|
7899
8522
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
7900
8523
|
{
|
|
@@ -7918,7 +8541,7 @@ var dropIndicatorVariants = cva(
|
|
|
7918
8541
|
);
|
|
7919
8542
|
var DropIndicator = React10.forwardRef(
|
|
7920
8543
|
({ className, direction, state, ...props }, ref) => {
|
|
7921
|
-
return /* @__PURE__ */ (0,
|
|
8544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
7922
8545
|
"div",
|
|
7923
8546
|
{
|
|
7924
8547
|
ref,
|
|
@@ -7935,7 +8558,7 @@ var DropIndicator = React10.forwardRef(
|
|
|
7935
8558
|
DropIndicator.displayName = "DropIndicator";
|
|
7936
8559
|
|
|
7937
8560
|
// src/ui/badge.tsx
|
|
7938
|
-
var
|
|
8561
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
7939
8562
|
var badgeVariants = cva(
|
|
7940
8563
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
7941
8564
|
{
|
|
@@ -7953,12 +8576,12 @@ var badgeVariants = cva(
|
|
|
7953
8576
|
}
|
|
7954
8577
|
);
|
|
7955
8578
|
function Badge({ className, variant, ...props }) {
|
|
7956
|
-
return /* @__PURE__ */ (0,
|
|
8579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
7957
8580
|
}
|
|
7958
8581
|
|
|
7959
8582
|
// src/OhhwellsBridge.tsx
|
|
7960
|
-
var
|
|
7961
|
-
var
|
|
8583
|
+
var import_lucide_react13 = require("lucide-react");
|
|
8584
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
7962
8585
|
var PRIMARY2 = "#0885FE";
|
|
7963
8586
|
var IMAGE_FADE_MS = 300;
|
|
7964
8587
|
function runOpacityFade(el, onDone) {
|
|
@@ -8137,7 +8760,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
8137
8760
|
const root = (0, import_client.createRoot)(container);
|
|
8138
8761
|
(0, import_react_dom2.flushSync)(() => {
|
|
8139
8762
|
root.render(
|
|
8140
|
-
/* @__PURE__ */ (0,
|
|
8763
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8141
8764
|
SchedulingWidget,
|
|
8142
8765
|
{
|
|
8143
8766
|
notifyOnConnect,
|
|
@@ -8177,7 +8800,7 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
|
|
|
8177
8800
|
}
|
|
8178
8801
|
}
|
|
8179
8802
|
}
|
|
8180
|
-
function
|
|
8803
|
+
function getLinkHref3(el) {
|
|
8181
8804
|
const anchor = el instanceof HTMLAnchorElement ? el : el.querySelector("a");
|
|
8182
8805
|
return anchor?.getAttribute("href") ?? "";
|
|
8183
8806
|
}
|
|
@@ -8227,7 +8850,7 @@ function collectEditableNodes(extraContent) {
|
|
|
8227
8850
|
return { key: el.dataset.ohwKey ?? "", type: "video", text: getVideoEl(el)?.src ?? "" };
|
|
8228
8851
|
}
|
|
8229
8852
|
if (el.dataset.ohwEditable === "link") {
|
|
8230
|
-
return { key: el.dataset.ohwKey ?? "", type: "link", text:
|
|
8853
|
+
return { key: el.dataset.ohwKey ?? "", type: "link", text: getLinkHref3(el) };
|
|
8231
8854
|
}
|
|
8232
8855
|
return {
|
|
8233
8856
|
key: el.dataset.ohwKey ?? "",
|
|
@@ -8238,7 +8861,7 @@ function collectEditableNodes(extraContent) {
|
|
|
8238
8861
|
document.querySelectorAll("[data-ohw-href-key]").forEach((el) => {
|
|
8239
8862
|
const key = el.getAttribute("data-ohw-href-key") ?? "";
|
|
8240
8863
|
if (!key) return;
|
|
8241
|
-
nodes.push({ key, type: "link", text:
|
|
8864
|
+
nodes.push({ key, type: "link", text: getLinkHref3(el) });
|
|
8242
8865
|
});
|
|
8243
8866
|
if (extraContent) {
|
|
8244
8867
|
for (const key of [NAV_ORDER_KEY, FOOTER_ORDER_KEY, NAV_COUNT_KEY]) {
|
|
@@ -8341,7 +8964,7 @@ function applyLinkByKey(key, val) {
|
|
|
8341
8964
|
}
|
|
8342
8965
|
function isInsideLinkEditor(target) {
|
|
8343
8966
|
return Boolean(
|
|
8344
|
-
target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
|
|
8967
|
+
target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
|
|
8345
8968
|
);
|
|
8346
8969
|
}
|
|
8347
8970
|
function getHrefKeyFromElement(el) {
|
|
@@ -8422,7 +9045,7 @@ function isInferredFooterGroup(el) {
|
|
|
8422
9045
|
return countFooterNavItems(el) >= 2;
|
|
8423
9046
|
}
|
|
8424
9047
|
function isNavigationContainer(el) {
|
|
8425
|
-
return el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isInferredFooterGroup(el);
|
|
9048
|
+
return el.hasAttribute("data-ohw-nav-container") || isFooterLinksContainer(el) || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isInferredFooterGroup(el);
|
|
8426
9049
|
}
|
|
8427
9050
|
function isNavbarLinksContainer(el) {
|
|
8428
9051
|
return el.hasAttribute("data-ohw-nav-container");
|
|
@@ -8441,6 +9064,9 @@ function isPointOverNavigation(x, y) {
|
|
|
8441
9064
|
const roots = /* @__PURE__ */ new Set();
|
|
8442
9065
|
const navRoot = document.querySelector("[data-ohw-nav-root]") ?? document.querySelector("nav");
|
|
8443
9066
|
if (navRoot) roots.add(navRoot);
|
|
9067
|
+
document.querySelectorAll("[data-ohw-nav-drawer], [data-ohw-nav-container]").forEach((el) => {
|
|
9068
|
+
roots.add(el);
|
|
9069
|
+
});
|
|
8444
9070
|
const footer = document.querySelector("footer");
|
|
8445
9071
|
if (footer) roots.add(footer);
|
|
8446
9072
|
for (const root of roots) {
|
|
@@ -8469,6 +9095,12 @@ function isPointOverNavItem(container, x, y) {
|
|
|
8469
9095
|
return x >= itemRect.left && x <= itemRect.right && y >= itemRect.top && y <= itemRect.bottom;
|
|
8470
9096
|
});
|
|
8471
9097
|
}
|
|
9098
|
+
function isPointOverFooterColumn(x, y) {
|
|
9099
|
+
return listFooterColumns().some((col) => {
|
|
9100
|
+
const r2 = col.getBoundingClientRect();
|
|
9101
|
+
return x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom;
|
|
9102
|
+
});
|
|
9103
|
+
}
|
|
8472
9104
|
function resolveNavContainerSelectionTarget(target, clientX, clientY) {
|
|
8473
9105
|
if (getNavigationItemAnchor(target)) return null;
|
|
8474
9106
|
if (target.closest('[data-ohw-role="navbar-button"]')) return null;
|
|
@@ -8499,7 +9131,10 @@ function getNavigationSelectionParent(el) {
|
|
|
8499
9131
|
if (footerGroup) return footerGroup;
|
|
8500
9132
|
return getNavigationRoot(el);
|
|
8501
9133
|
}
|
|
8502
|
-
if (el
|
|
9134
|
+
if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup(el))) {
|
|
9135
|
+
return getFooterLinksContainer();
|
|
9136
|
+
}
|
|
9137
|
+
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup(el)) {
|
|
8503
9138
|
return getNavigationRoot(el);
|
|
8504
9139
|
}
|
|
8505
9140
|
return null;
|
|
@@ -8726,7 +9361,7 @@ function EditGlowChrome({
|
|
|
8726
9361
|
hideHandle = false
|
|
8727
9362
|
}) {
|
|
8728
9363
|
const GAP = SELECTION_CHROME_GAP2;
|
|
8729
|
-
return /* @__PURE__ */ (0,
|
|
9364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
8730
9365
|
"div",
|
|
8731
9366
|
{
|
|
8732
9367
|
ref: elRef,
|
|
@@ -8741,7 +9376,7 @@ function EditGlowChrome({
|
|
|
8741
9376
|
zIndex: 2147483646
|
|
8742
9377
|
},
|
|
8743
9378
|
children: [
|
|
8744
|
-
/* @__PURE__ */ (0,
|
|
9379
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8745
9380
|
"div",
|
|
8746
9381
|
{
|
|
8747
9382
|
style: {
|
|
@@ -8754,7 +9389,7 @@ function EditGlowChrome({
|
|
|
8754
9389
|
}
|
|
8755
9390
|
}
|
|
8756
9391
|
),
|
|
8757
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
9392
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8758
9393
|
"div",
|
|
8759
9394
|
{
|
|
8760
9395
|
"data-ohw-drag-handle-container": "",
|
|
@@ -8766,7 +9401,7 @@ function EditGlowChrome({
|
|
|
8766
9401
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
8767
9402
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
8768
9403
|
},
|
|
8769
|
-
children: /* @__PURE__ */ (0,
|
|
9404
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8770
9405
|
DragHandle,
|
|
8771
9406
|
{
|
|
8772
9407
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -8949,9 +9584,9 @@ function FloatingToolbar({
|
|
|
8949
9584
|
showEditLink,
|
|
8950
9585
|
onEditLink
|
|
8951
9586
|
}) {
|
|
8952
|
-
const localRef =
|
|
8953
|
-
const [measuredW, setMeasuredW] =
|
|
8954
|
-
const setRefs =
|
|
9587
|
+
const localRef = import_react11.default.useRef(null);
|
|
9588
|
+
const [measuredW, setMeasuredW] = import_react11.default.useState(330);
|
|
9589
|
+
const setRefs = import_react11.default.useCallback(
|
|
8955
9590
|
(node) => {
|
|
8956
9591
|
localRef.current = node;
|
|
8957
9592
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -8963,7 +9598,7 @@ function FloatingToolbar({
|
|
|
8963
9598
|
},
|
|
8964
9599
|
[elRef]
|
|
8965
9600
|
);
|
|
8966
|
-
|
|
9601
|
+
import_react11.default.useLayoutEffect(() => {
|
|
8967
9602
|
const node = localRef.current;
|
|
8968
9603
|
if (!node) return;
|
|
8969
9604
|
const update = () => {
|
|
@@ -8976,7 +9611,7 @@ function FloatingToolbar({
|
|
|
8976
9611
|
return () => ro.disconnect();
|
|
8977
9612
|
}, [showEditLink, activeCommands]);
|
|
8978
9613
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
8979
|
-
return /* @__PURE__ */ (0,
|
|
9614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8980
9615
|
"div",
|
|
8981
9616
|
{
|
|
8982
9617
|
ref: setRefs,
|
|
@@ -8988,12 +9623,12 @@ function FloatingToolbar({
|
|
|
8988
9623
|
zIndex: 2147483647,
|
|
8989
9624
|
pointerEvents: "auto"
|
|
8990
9625
|
},
|
|
8991
|
-
children: /* @__PURE__ */ (0,
|
|
8992
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
8993
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
9626
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CustomToolbar, { children: [
|
|
9627
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react11.default.Fragment, { children: [
|
|
9628
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CustomToolbarDivider, {}),
|
|
8994
9629
|
btns.map((btn) => {
|
|
8995
9630
|
const isActive = activeCommands.has(btn.cmd);
|
|
8996
|
-
return /* @__PURE__ */ (0,
|
|
9631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8997
9632
|
CustomToolbarButton,
|
|
8998
9633
|
{
|
|
8999
9634
|
title: btn.title,
|
|
@@ -9002,7 +9637,7 @@ function FloatingToolbar({
|
|
|
9002
9637
|
e.preventDefault();
|
|
9003
9638
|
onCommand(btn.cmd);
|
|
9004
9639
|
},
|
|
9005
|
-
children: /* @__PURE__ */ (0,
|
|
9640
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
9006
9641
|
"svg",
|
|
9007
9642
|
{
|
|
9008
9643
|
width: "16",
|
|
@@ -9023,7 +9658,7 @@ function FloatingToolbar({
|
|
|
9023
9658
|
);
|
|
9024
9659
|
})
|
|
9025
9660
|
] }, gi)),
|
|
9026
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
9661
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
9027
9662
|
CustomToolbarButton,
|
|
9028
9663
|
{
|
|
9029
9664
|
type: "button",
|
|
@@ -9037,7 +9672,7 @@ function FloatingToolbar({
|
|
|
9037
9672
|
e.preventDefault();
|
|
9038
9673
|
e.stopPropagation();
|
|
9039
9674
|
},
|
|
9040
|
-
children: /* @__PURE__ */ (0,
|
|
9675
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react13.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
9041
9676
|
}
|
|
9042
9677
|
) : null
|
|
9043
9678
|
] })
|
|
@@ -9054,7 +9689,7 @@ function StateToggle({
|
|
|
9054
9689
|
states,
|
|
9055
9690
|
onStateChange
|
|
9056
9691
|
}) {
|
|
9057
|
-
return /* @__PURE__ */ (0,
|
|
9692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
9058
9693
|
ToggleGroup,
|
|
9059
9694
|
{
|
|
9060
9695
|
"data-ohw-state-toggle": "",
|
|
@@ -9068,7 +9703,7 @@ function StateToggle({
|
|
|
9068
9703
|
left: rect.right - 8,
|
|
9069
9704
|
transform: "translateX(-100%)"
|
|
9070
9705
|
},
|
|
9071
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
9706
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
9072
9707
|
}
|
|
9073
9708
|
);
|
|
9074
9709
|
}
|
|
@@ -9095,8 +9730,8 @@ function OhhwellsBridge() {
|
|
|
9095
9730
|
const router = (0, import_navigation2.useRouter)();
|
|
9096
9731
|
const searchParams = (0, import_navigation2.useSearchParams)();
|
|
9097
9732
|
const isEditMode = isEditSessionActive();
|
|
9098
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
9099
|
-
(0,
|
|
9733
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react11.useState)(null);
|
|
9734
|
+
(0, import_react11.useEffect)(() => {
|
|
9100
9735
|
const figtreeFontId = "ohw-figtree-font";
|
|
9101
9736
|
if (!document.getElementById(figtreeFontId)) {
|
|
9102
9737
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -9124,99 +9759,99 @@ function OhhwellsBridge() {
|
|
|
9124
9759
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
9125
9760
|
const subdomain = resolveSubdomain(subdomainFromQuery);
|
|
9126
9761
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
9127
|
-
const postToParent2 = (0,
|
|
9762
|
+
const postToParent2 = (0, import_react11.useCallback)((data) => {
|
|
9128
9763
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
9129
9764
|
window.parent.postMessage(data, "*");
|
|
9130
9765
|
}
|
|
9131
9766
|
}, []);
|
|
9132
|
-
const [fetchState, setFetchState] = (0,
|
|
9133
|
-
const autoSaveTimers = (0,
|
|
9134
|
-
const activeElRef = (0,
|
|
9135
|
-
const pointerHeldRef = (0,
|
|
9136
|
-
const selectedElRef = (0,
|
|
9137
|
-
const selectedHrefKeyRef = (0,
|
|
9138
|
-
const selectedFooterColAttrRef = (0,
|
|
9139
|
-
const originalContentRef = (0,
|
|
9140
|
-
const activeStateElRef = (0,
|
|
9141
|
-
const parentScrollRef = (0,
|
|
9142
|
-
const visibleViewportRef = (0,
|
|
9143
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
9144
|
-
const attachVisibleViewport = (0,
|
|
9767
|
+
const [fetchState, setFetchState] = (0, import_react11.useState)("idle");
|
|
9768
|
+
const autoSaveTimers = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
|
|
9769
|
+
const activeElRef = (0, import_react11.useRef)(null);
|
|
9770
|
+
const pointerHeldRef = (0, import_react11.useRef)(false);
|
|
9771
|
+
const selectedElRef = (0, import_react11.useRef)(null);
|
|
9772
|
+
const selectedHrefKeyRef = (0, import_react11.useRef)(null);
|
|
9773
|
+
const selectedFooterColAttrRef = (0, import_react11.useRef)(null);
|
|
9774
|
+
const originalContentRef = (0, import_react11.useRef)(null);
|
|
9775
|
+
const activeStateElRef = (0, import_react11.useRef)(null);
|
|
9776
|
+
const parentScrollRef = (0, import_react11.useRef)(null);
|
|
9777
|
+
const visibleViewportRef = (0, import_react11.useRef)(null);
|
|
9778
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react11.useState)(null);
|
|
9779
|
+
const attachVisibleViewport = (0, import_react11.useCallback)((node) => {
|
|
9145
9780
|
visibleViewportRef.current = node;
|
|
9146
9781
|
setDialogPortalContainer(node);
|
|
9147
9782
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
9148
9783
|
}, []);
|
|
9149
|
-
const toolbarElRef = (0,
|
|
9150
|
-
const glowElRef = (0,
|
|
9151
|
-
const hoveredImageRef = (0,
|
|
9152
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
9153
|
-
const dragOverElRef = (0,
|
|
9154
|
-
const [mediaHover, setMediaHover] = (0,
|
|
9155
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
9156
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
9157
|
-
const hoveredGapRef = (0,
|
|
9158
|
-
const imageUnhoverTimerRef = (0,
|
|
9159
|
-
const imageShowTimerRef = (0,
|
|
9160
|
-
const editStylesRef = (0,
|
|
9161
|
-
const activateRef = (0,
|
|
9784
|
+
const toolbarElRef = (0, import_react11.useRef)(null);
|
|
9785
|
+
const glowElRef = (0, import_react11.useRef)(null);
|
|
9786
|
+
const hoveredImageRef = (0, import_react11.useRef)(null);
|
|
9787
|
+
const hoveredImageHasTextOverlapRef = (0, import_react11.useRef)(false);
|
|
9788
|
+
const dragOverElRef = (0, import_react11.useRef)(null);
|
|
9789
|
+
const [mediaHover, setMediaHover] = (0, import_react11.useState)(null);
|
|
9790
|
+
const [carouselHover, setCarouselHover] = (0, import_react11.useState)(null);
|
|
9791
|
+
const [uploadingRects, setUploadingRects] = (0, import_react11.useState)({});
|
|
9792
|
+
const hoveredGapRef = (0, import_react11.useRef)(null);
|
|
9793
|
+
const imageUnhoverTimerRef = (0, import_react11.useRef)(null);
|
|
9794
|
+
const imageShowTimerRef = (0, import_react11.useRef)(null);
|
|
9795
|
+
const editStylesRef = (0, import_react11.useRef)(null);
|
|
9796
|
+
const activateRef = (0, import_react11.useRef)(() => {
|
|
9162
9797
|
});
|
|
9163
|
-
const deactivateRef = (0,
|
|
9798
|
+
const deactivateRef = (0, import_react11.useRef)(() => {
|
|
9164
9799
|
});
|
|
9165
|
-
const selectRef = (0,
|
|
9800
|
+
const selectRef = (0, import_react11.useRef)(() => {
|
|
9166
9801
|
});
|
|
9167
|
-
const selectFrameRef = (0,
|
|
9802
|
+
const selectFrameRef = (0, import_react11.useRef)(() => {
|
|
9168
9803
|
});
|
|
9169
|
-
const deselectRef = (0,
|
|
9804
|
+
const deselectRef = (0, import_react11.useRef)(() => {
|
|
9170
9805
|
});
|
|
9171
|
-
const reselectNavigationItemRef = (0,
|
|
9806
|
+
const reselectNavigationItemRef = (0, import_react11.useRef)(() => {
|
|
9172
9807
|
});
|
|
9173
|
-
const commitNavigationTextEditRef = (0,
|
|
9808
|
+
const commitNavigationTextEditRef = (0, import_react11.useRef)(() => {
|
|
9174
9809
|
});
|
|
9175
|
-
const refreshActiveCommandsRef = (0,
|
|
9810
|
+
const refreshActiveCommandsRef = (0, import_react11.useRef)(() => {
|
|
9176
9811
|
});
|
|
9177
|
-
const postToParentRef = (0,
|
|
9812
|
+
const postToParentRef = (0, import_react11.useRef)(postToParent2);
|
|
9178
9813
|
postToParentRef.current = postToParent2;
|
|
9179
|
-
const sectionsLoadedRef = (0,
|
|
9180
|
-
const pendingScheduleConfigRequests = (0,
|
|
9181
|
-
const [toolbarRect, setToolbarRect] = (0,
|
|
9182
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
9183
|
-
const toolbarVariantRef = (0,
|
|
9814
|
+
const sectionsLoadedRef = (0, import_react11.useRef)(false);
|
|
9815
|
+
const pendingScheduleConfigRequests = (0, import_react11.useRef)([]);
|
|
9816
|
+
const [toolbarRect, setToolbarRect] = (0, import_react11.useState)(null);
|
|
9817
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react11.useState)("none");
|
|
9818
|
+
const toolbarVariantRef = (0, import_react11.useRef)("none");
|
|
9184
9819
|
toolbarVariantRef.current = toolbarVariant;
|
|
9185
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
9186
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
9187
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
9188
|
-
const [toggleState, setToggleState] = (0,
|
|
9189
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
9190
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
9191
|
-
const [sectionGap, setSectionGap] = (0,
|
|
9192
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
9193
|
-
const hoveredNavContainerRef = (0,
|
|
9194
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
9195
|
-
const hoveredItemElRef = (0,
|
|
9196
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
9197
|
-
const siblingHintElRef = (0,
|
|
9198
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
9199
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
9200
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
9201
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
9202
|
-
const footerDragRef = (0,
|
|
9203
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
9204
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
9205
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
9206
|
-
const footerPointerDragRef = (0,
|
|
9207
|
-
const suppressNextClickRef = (0,
|
|
9208
|
-
const suppressClickUntilRef = (0,
|
|
9209
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
9210
|
-
const linkPopoverSessionRef = (0,
|
|
9211
|
-
const addNavAfterAnchorRef = (0,
|
|
9212
|
-
const editContentRef = (0,
|
|
9213
|
-
const [sitePages, setSitePages] = (0,
|
|
9214
|
-
const [sectionsByPath, setSectionsByPath] = (0,
|
|
9215
|
-
const sectionsPrefetchGenRef = (0,
|
|
9216
|
-
const setLinkPopoverRef = (0,
|
|
9217
|
-
const linkPopoverPanelRef = (0,
|
|
9218
|
-
const linkPopoverOpenRef = (0,
|
|
9219
|
-
const linkPopoverGraceUntilRef = (0,
|
|
9820
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react11.useState)(false);
|
|
9821
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react11.useState)(null);
|
|
9822
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react11.useState)(false);
|
|
9823
|
+
const [toggleState, setToggleState] = (0, import_react11.useState)(null);
|
|
9824
|
+
const [maxBadge, setMaxBadge] = (0, import_react11.useState)(null);
|
|
9825
|
+
const [activeCommands, setActiveCommands] = (0, import_react11.useState)(/* @__PURE__ */ new Set());
|
|
9826
|
+
const [sectionGap, setSectionGap] = (0, import_react11.useState)(null);
|
|
9827
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react11.useState)(false);
|
|
9828
|
+
const hoveredNavContainerRef = (0, import_react11.useRef)(null);
|
|
9829
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react11.useState)(null);
|
|
9830
|
+
const hoveredItemElRef = (0, import_react11.useRef)(null);
|
|
9831
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react11.useState)(null);
|
|
9832
|
+
const siblingHintElRef = (0, import_react11.useRef)(null);
|
|
9833
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react11.useState)(null);
|
|
9834
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react11.useState)([]);
|
|
9835
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react11.useState)(false);
|
|
9836
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react11.useState)(false);
|
|
9837
|
+
const footerDragRef = (0, import_react11.useRef)(null);
|
|
9838
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react11.useState)([]);
|
|
9839
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react11.useState)(null);
|
|
9840
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react11.useState)(null);
|
|
9841
|
+
const footerPointerDragRef = (0, import_react11.useRef)(null);
|
|
9842
|
+
const suppressNextClickRef = (0, import_react11.useRef)(false);
|
|
9843
|
+
const suppressClickUntilRef = (0, import_react11.useRef)(0);
|
|
9844
|
+
const [linkPopover, setLinkPopover] = (0, import_react11.useState)(null);
|
|
9845
|
+
const linkPopoverSessionRef = (0, import_react11.useRef)(null);
|
|
9846
|
+
const addNavAfterAnchorRef = (0, import_react11.useRef)(null);
|
|
9847
|
+
const editContentRef = (0, import_react11.useRef)({});
|
|
9848
|
+
const [sitePages, setSitePages] = (0, import_react11.useState)([]);
|
|
9849
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react11.useState)({});
|
|
9850
|
+
const sectionsPrefetchGenRef = (0, import_react11.useRef)(0);
|
|
9851
|
+
const setLinkPopoverRef = (0, import_react11.useRef)(setLinkPopover);
|
|
9852
|
+
const linkPopoverPanelRef = (0, import_react11.useRef)(null);
|
|
9853
|
+
const linkPopoverOpenRef = (0, import_react11.useRef)(false);
|
|
9854
|
+
const linkPopoverGraceUntilRef = (0, import_react11.useRef)(0);
|
|
9220
9855
|
setLinkPopoverRef.current = setLinkPopover;
|
|
9221
9856
|
linkPopoverSessionRef.current = linkPopover;
|
|
9222
9857
|
const {
|
|
@@ -9255,7 +9890,7 @@ function OhhwellsBridge() {
|
|
|
9255
9890
|
const bumpLinkPopoverGrace = () => {
|
|
9256
9891
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
9257
9892
|
};
|
|
9258
|
-
const runSectionsPrefetch = (0,
|
|
9893
|
+
const runSectionsPrefetch = (0, import_react11.useCallback)((pages) => {
|
|
9259
9894
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
9260
9895
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
9261
9896
|
const paths = pages.map((p) => p.path);
|
|
@@ -9274,9 +9909,9 @@ function OhhwellsBridge() {
|
|
|
9274
9909
|
);
|
|
9275
9910
|
});
|
|
9276
9911
|
}, [isEditMode, pathname]);
|
|
9277
|
-
const runSectionsPrefetchRef = (0,
|
|
9912
|
+
const runSectionsPrefetchRef = (0, import_react11.useRef)(runSectionsPrefetch);
|
|
9278
9913
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
9279
|
-
(0,
|
|
9914
|
+
(0, import_react11.useEffect)(() => {
|
|
9280
9915
|
if (!linkPopover) {
|
|
9281
9916
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
9282
9917
|
return;
|
|
@@ -9326,7 +9961,7 @@ function OhhwellsBridge() {
|
|
|
9326
9961
|
document.removeEventListener("touchmove", preventBackgroundScroll, scrollOpts);
|
|
9327
9962
|
};
|
|
9328
9963
|
}, [linkPopover, postToParent2]);
|
|
9329
|
-
(0,
|
|
9964
|
+
(0, import_react11.useEffect)(() => {
|
|
9330
9965
|
if (!isEditMode) return;
|
|
9331
9966
|
const useFixtures = shouldUseDevFixtures();
|
|
9332
9967
|
if (useFixtures) {
|
|
@@ -9350,14 +9985,14 @@ function OhhwellsBridge() {
|
|
|
9350
9985
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
9351
9986
|
return () => window.removeEventListener("message", onSitePages);
|
|
9352
9987
|
}, [isEditMode, postToParent2]);
|
|
9353
|
-
(0,
|
|
9988
|
+
(0, import_react11.useEffect)(() => {
|
|
9354
9989
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
9355
9990
|
void loadAllSectionsManifest().then((manifest) => {
|
|
9356
9991
|
if (Object.keys(manifest).length === 0) return;
|
|
9357
9992
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
9358
9993
|
});
|
|
9359
9994
|
}, [isEditMode]);
|
|
9360
|
-
(0,
|
|
9995
|
+
(0, import_react11.useEffect)(() => {
|
|
9361
9996
|
const update = () => {
|
|
9362
9997
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
9363
9998
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -9381,10 +10016,10 @@ function OhhwellsBridge() {
|
|
|
9381
10016
|
vvp.removeEventListener("resize", update);
|
|
9382
10017
|
};
|
|
9383
10018
|
}, []);
|
|
9384
|
-
const refreshStateRules = (0,
|
|
10019
|
+
const refreshStateRules = (0, import_react11.useCallback)(() => {
|
|
9385
10020
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
9386
10021
|
}, []);
|
|
9387
|
-
const processConfigRequest = (0,
|
|
10022
|
+
const processConfigRequest = (0, import_react11.useCallback)((insertAfterVal) => {
|
|
9388
10023
|
const tracker = getSectionsTracker();
|
|
9389
10024
|
let entries = [];
|
|
9390
10025
|
try {
|
|
@@ -9407,7 +10042,7 @@ function OhhwellsBridge() {
|
|
|
9407
10042
|
}
|
|
9408
10043
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
9409
10044
|
}, [isEditMode]);
|
|
9410
|
-
const deactivate = (0,
|
|
10045
|
+
const deactivate = (0, import_react11.useCallback)(() => {
|
|
9411
10046
|
const el = activeElRef.current;
|
|
9412
10047
|
if (!el) return;
|
|
9413
10048
|
const key = el.dataset.ohwKey;
|
|
@@ -9439,12 +10074,12 @@ function OhhwellsBridge() {
|
|
|
9439
10074
|
setToolbarShowEditLink(false);
|
|
9440
10075
|
postToParent2({ type: "ow:exit-edit" });
|
|
9441
10076
|
}, [postToParent2]);
|
|
9442
|
-
const clearSelectedAttr = (0,
|
|
10077
|
+
const clearSelectedAttr = (0, import_react11.useCallback)(() => {
|
|
9443
10078
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
9444
10079
|
el.removeAttribute("data-ohw-selected");
|
|
9445
10080
|
});
|
|
9446
10081
|
}, []);
|
|
9447
|
-
const deselect = (0,
|
|
10082
|
+
const deselect = (0, import_react11.useCallback)(() => {
|
|
9448
10083
|
clearSelectedAttr();
|
|
9449
10084
|
selectedElRef.current = null;
|
|
9450
10085
|
selectedHrefKeyRef.current = null;
|
|
@@ -9464,11 +10099,11 @@ function OhhwellsBridge() {
|
|
|
9464
10099
|
setToolbarVariant("none");
|
|
9465
10100
|
}
|
|
9466
10101
|
}, [clearSelectedAttr]);
|
|
9467
|
-
const markSelected = (0,
|
|
10102
|
+
const markSelected = (0, import_react11.useCallback)((el) => {
|
|
9468
10103
|
clearSelectedAttr();
|
|
9469
10104
|
el.setAttribute("data-ohw-selected", "");
|
|
9470
10105
|
}, [clearSelectedAttr]);
|
|
9471
|
-
const resolveHrefKeyElement = (0,
|
|
10106
|
+
const resolveHrefKeyElement = (0, import_react11.useCallback)((hrefKey) => {
|
|
9472
10107
|
if (isFooterHrefKey(hrefKey)) {
|
|
9473
10108
|
return document.querySelector(
|
|
9474
10109
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -9483,7 +10118,7 @@ function OhhwellsBridge() {
|
|
|
9483
10118
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
9484
10119
|
);
|
|
9485
10120
|
}, []);
|
|
9486
|
-
const resyncSelectedNavigationItem = (0,
|
|
10121
|
+
const resyncSelectedNavigationItem = (0, import_react11.useCallback)(() => {
|
|
9487
10122
|
const hrefKey = selectedHrefKeyRef.current;
|
|
9488
10123
|
if (hrefKey) {
|
|
9489
10124
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -9511,7 +10146,7 @@ function OhhwellsBridge() {
|
|
|
9511
10146
|
);
|
|
9512
10147
|
}
|
|
9513
10148
|
}, [resolveHrefKeyElement]);
|
|
9514
|
-
const reselectNavigationItem = (0,
|
|
10149
|
+
const reselectNavigationItem = (0, import_react11.useCallback)((navAnchor) => {
|
|
9515
10150
|
selectedElRef.current = navAnchor;
|
|
9516
10151
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
9517
10152
|
selectedFooterColAttrRef.current = null;
|
|
@@ -9526,7 +10161,7 @@ function OhhwellsBridge() {
|
|
|
9526
10161
|
setToolbarShowEditLink(false);
|
|
9527
10162
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
9528
10163
|
}, [markSelected]);
|
|
9529
|
-
const commitNavigationTextEdit = (0,
|
|
10164
|
+
const commitNavigationTextEdit = (0, import_react11.useCallback)((navAnchor) => {
|
|
9530
10165
|
const el = activeElRef.current;
|
|
9531
10166
|
if (!el) return;
|
|
9532
10167
|
const key = el.dataset.ohwKey;
|
|
@@ -9553,7 +10188,7 @@ function OhhwellsBridge() {
|
|
|
9553
10188
|
postToParent2({ type: "ow:exit-edit" });
|
|
9554
10189
|
reselectNavigationItem(navAnchor);
|
|
9555
10190
|
}, [postToParent2, reselectNavigationItem]);
|
|
9556
|
-
const handleAddTopLevelNavItem = (0,
|
|
10191
|
+
const handleAddTopLevelNavItem = (0, import_react11.useCallback)(() => {
|
|
9557
10192
|
const items = listNavbarItems();
|
|
9558
10193
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
9559
10194
|
deselectRef.current();
|
|
@@ -9565,7 +10200,28 @@ function OhhwellsBridge() {
|
|
|
9565
10200
|
intent: "add-nav"
|
|
9566
10201
|
});
|
|
9567
10202
|
}, []);
|
|
9568
|
-
const
|
|
10203
|
+
const handleAddFooterColumn = (0, import_react11.useCallback)(() => {
|
|
10204
|
+
if (!canAddFooterColumn()) {
|
|
10205
|
+
postToParent2({
|
|
10206
|
+
type: "ow:toast",
|
|
10207
|
+
title: `Maximum ${MAX_FOOTER_COLUMNS} columns`,
|
|
10208
|
+
toastType: "error"
|
|
10209
|
+
});
|
|
10210
|
+
return;
|
|
10211
|
+
}
|
|
10212
|
+
deselectRef.current();
|
|
10213
|
+
deactivateRef.current();
|
|
10214
|
+
const result = addFooterColumnWithPersist({ postToParent: postToParent2 });
|
|
10215
|
+
if (!result) return;
|
|
10216
|
+
editContentRef.current = {
|
|
10217
|
+
...editContentRef.current,
|
|
10218
|
+
...buildFooterColumnEditContentPatch(result)
|
|
10219
|
+
};
|
|
10220
|
+
requestAnimationFrame(() => {
|
|
10221
|
+
selectRef.current(result.firstLink);
|
|
10222
|
+
});
|
|
10223
|
+
}, [postToParent2]);
|
|
10224
|
+
const clearFooterDragVisuals = (0, import_react11.useCallback)(() => {
|
|
9569
10225
|
footerDragRef.current = null;
|
|
9570
10226
|
setSiblingHintRects([]);
|
|
9571
10227
|
setFooterDropSlots([]);
|
|
@@ -9574,7 +10230,7 @@ function OhhwellsBridge() {
|
|
|
9574
10230
|
setIsItemDragging(false);
|
|
9575
10231
|
unlockFooterDragInteraction();
|
|
9576
10232
|
}, []);
|
|
9577
|
-
const refreshFooterDragVisuals = (0,
|
|
10233
|
+
const refreshFooterDragVisuals = (0, import_react11.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
9578
10234
|
const dragged = session.draggedEl;
|
|
9579
10235
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
9580
10236
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -9599,13 +10255,13 @@ function OhhwellsBridge() {
|
|
|
9599
10255
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
9600
10256
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
9601
10257
|
}, []);
|
|
9602
|
-
const refreshFooterDragVisualsRef = (0,
|
|
10258
|
+
const refreshFooterDragVisualsRef = (0, import_react11.useRef)(refreshFooterDragVisuals);
|
|
9603
10259
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
9604
|
-
const commitFooterDragRef = (0,
|
|
10260
|
+
const commitFooterDragRef = (0, import_react11.useRef)(() => {
|
|
9605
10261
|
});
|
|
9606
|
-
const beginFooterDragRef = (0,
|
|
10262
|
+
const beginFooterDragRef = (0, import_react11.useRef)(() => {
|
|
9607
10263
|
});
|
|
9608
|
-
const beginFooterDrag = (0,
|
|
10264
|
+
const beginFooterDrag = (0, import_react11.useCallback)(
|
|
9609
10265
|
(session) => {
|
|
9610
10266
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
9611
10267
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -9625,7 +10281,7 @@ function OhhwellsBridge() {
|
|
|
9625
10281
|
[refreshFooterDragVisuals]
|
|
9626
10282
|
);
|
|
9627
10283
|
beginFooterDragRef.current = beginFooterDrag;
|
|
9628
|
-
const commitFooterDrag = (0,
|
|
10284
|
+
const commitFooterDrag = (0, import_react11.useCallback)(
|
|
9629
10285
|
(clientX, clientY) => {
|
|
9630
10286
|
const session = footerDragRef.current;
|
|
9631
10287
|
if (!session) {
|
|
@@ -9729,7 +10385,7 @@ function OhhwellsBridge() {
|
|
|
9729
10385
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
9730
10386
|
);
|
|
9731
10387
|
commitFooterDragRef.current = commitFooterDrag;
|
|
9732
|
-
const startFooterLinkDrag = (0,
|
|
10388
|
+
const startFooterLinkDrag = (0, import_react11.useCallback)(
|
|
9733
10389
|
(anchor, clientX, clientY, wasSelected) => {
|
|
9734
10390
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
9735
10391
|
if (!hrefKey || !isFooterHrefKey(hrefKey)) return false;
|
|
@@ -9750,7 +10406,7 @@ function OhhwellsBridge() {
|
|
|
9750
10406
|
},
|
|
9751
10407
|
[beginFooterDrag]
|
|
9752
10408
|
);
|
|
9753
|
-
const startFooterColumnDrag = (0,
|
|
10409
|
+
const startFooterColumnDrag = (0, import_react11.useCallback)(
|
|
9754
10410
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
9755
10411
|
const columns = listFooterColumns();
|
|
9756
10412
|
const idx = columns.indexOf(columnEl);
|
|
@@ -9770,7 +10426,7 @@ function OhhwellsBridge() {
|
|
|
9770
10426
|
},
|
|
9771
10427
|
[beginFooterDrag]
|
|
9772
10428
|
);
|
|
9773
|
-
const handleItemDragStart = (0,
|
|
10429
|
+
const handleItemDragStart = (0, import_react11.useCallback)(
|
|
9774
10430
|
(e) => {
|
|
9775
10431
|
const selected = selectedElRef.current;
|
|
9776
10432
|
if (!selected) {
|
|
@@ -9790,7 +10446,7 @@ function OhhwellsBridge() {
|
|
|
9790
10446
|
},
|
|
9791
10447
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
9792
10448
|
);
|
|
9793
|
-
const handleItemDragEnd = (0,
|
|
10449
|
+
const handleItemDragEnd = (0, import_react11.useCallback)(
|
|
9794
10450
|
(e) => {
|
|
9795
10451
|
if (footerDragRef.current) {
|
|
9796
10452
|
const x = e?.clientX;
|
|
@@ -9816,7 +10472,7 @@ function OhhwellsBridge() {
|
|
|
9816
10472
|
},
|
|
9817
10473
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
9818
10474
|
);
|
|
9819
|
-
const handleItemChromePointerDown = (0,
|
|
10475
|
+
const handleItemChromePointerDown = (0, import_react11.useCallback)((e) => {
|
|
9820
10476
|
if (e.button !== 0) return;
|
|
9821
10477
|
const selected = selectedElRef.current;
|
|
9822
10478
|
if (!selected) return;
|
|
@@ -9847,7 +10503,7 @@ function OhhwellsBridge() {
|
|
|
9847
10503
|
}
|
|
9848
10504
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
9849
10505
|
}, [armNavPressFromChrome]);
|
|
9850
|
-
const handleItemChromeClick = (0,
|
|
10506
|
+
const handleItemChromeClick = (0, import_react11.useCallback)((clientX, clientY) => {
|
|
9851
10507
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
9852
10508
|
suppressNextClickRef.current = false;
|
|
9853
10509
|
return;
|
|
@@ -9860,7 +10516,7 @@ function OhhwellsBridge() {
|
|
|
9860
10516
|
}, []);
|
|
9861
10517
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
9862
10518
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
9863
|
-
const select = (0,
|
|
10519
|
+
const select = (0, import_react11.useCallback)((anchor) => {
|
|
9864
10520
|
if (!isNavigationItem(anchor)) return;
|
|
9865
10521
|
if (activeElRef.current) deactivate();
|
|
9866
10522
|
selectedElRef.current = anchor;
|
|
@@ -9886,10 +10542,10 @@ function OhhwellsBridge() {
|
|
|
9886
10542
|
setToolbarShowEditLink(false);
|
|
9887
10543
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
9888
10544
|
}, [deactivate, markSelected]);
|
|
9889
|
-
const selectFrame = (0,
|
|
10545
|
+
const selectFrame = (0, import_react11.useCallback)((el) => {
|
|
9890
10546
|
if (!isNavigationContainer(el)) return;
|
|
9891
10547
|
if (activeElRef.current) deactivate();
|
|
9892
|
-
const isFooterColumn = el.hasAttribute("data-ohw-footer-col") || Boolean(el.closest("footer") && isInferredFooterGroup(el));
|
|
10548
|
+
const isFooterColumn = !isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || Boolean(el.closest("footer") && isInferredFooterGroup(el)));
|
|
9893
10549
|
selectedElRef.current = el;
|
|
9894
10550
|
selectedHrefKeyRef.current = null;
|
|
9895
10551
|
selectedFooterColAttrRef.current = isFooterColumn ? el.getAttribute("data-ohw-footer-col") ?? String(listFooterColumns().indexOf(el)) : null;
|
|
@@ -9914,7 +10570,7 @@ function OhhwellsBridge() {
|
|
|
9914
10570
|
setToolbarShowEditLink(false);
|
|
9915
10571
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
9916
10572
|
}, [deactivate, markSelected]);
|
|
9917
|
-
const activate = (0,
|
|
10573
|
+
const activate = (0, import_react11.useCallback)((el, options) => {
|
|
9918
10574
|
if (activeElRef.current === el) return;
|
|
9919
10575
|
clearSelectedAttr();
|
|
9920
10576
|
selectedElRef.current = null;
|
|
@@ -9979,7 +10635,7 @@ function OhhwellsBridge() {
|
|
|
9979
10635
|
selectRef.current = select;
|
|
9980
10636
|
selectFrameRef.current = selectFrame;
|
|
9981
10637
|
deselectRef.current = deselect;
|
|
9982
|
-
(0,
|
|
10638
|
+
(0, import_react11.useLayoutEffect)(() => {
|
|
9983
10639
|
if (!subdomain || isEditMode) {
|
|
9984
10640
|
setFetchState("done");
|
|
9985
10641
|
return;
|
|
@@ -10050,7 +10706,7 @@ function OhhwellsBridge() {
|
|
|
10050
10706
|
cancelled = true;
|
|
10051
10707
|
};
|
|
10052
10708
|
}, [subdomain, isEditMode]);
|
|
10053
|
-
(0,
|
|
10709
|
+
(0, import_react11.useEffect)(() => {
|
|
10054
10710
|
if (!subdomain || isEditMode) return;
|
|
10055
10711
|
let debounceTimer = null;
|
|
10056
10712
|
let observer = null;
|
|
@@ -10101,16 +10757,16 @@ function OhhwellsBridge() {
|
|
|
10101
10757
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
10102
10758
|
};
|
|
10103
10759
|
}, [subdomain, isEditMode, pathname]);
|
|
10104
|
-
(0,
|
|
10760
|
+
(0, import_react11.useLayoutEffect)(() => {
|
|
10105
10761
|
const el = document.getElementById("ohw-loader");
|
|
10106
10762
|
if (!el) return;
|
|
10107
10763
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
10108
10764
|
el.style.display = visible ? "flex" : "none";
|
|
10109
10765
|
}, [subdomain, fetchState]);
|
|
10110
|
-
(0,
|
|
10766
|
+
(0, import_react11.useEffect)(() => {
|
|
10111
10767
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
10112
10768
|
}, [pathname, postToParent2]);
|
|
10113
|
-
(0,
|
|
10769
|
+
(0, import_react11.useEffect)(() => {
|
|
10114
10770
|
if (!isEditMode) return;
|
|
10115
10771
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
10116
10772
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -10118,7 +10774,7 @@ function OhhwellsBridge() {
|
|
|
10118
10774
|
deselectRef.current();
|
|
10119
10775
|
deactivateRef.current();
|
|
10120
10776
|
}, [pathname, isEditMode]);
|
|
10121
|
-
(0,
|
|
10777
|
+
(0, import_react11.useEffect)(() => {
|
|
10122
10778
|
const contentForNav = () => {
|
|
10123
10779
|
if (isEditMode) return editContentRef.current;
|
|
10124
10780
|
if (!subdomain) return {};
|
|
@@ -10183,7 +10839,7 @@ function OhhwellsBridge() {
|
|
|
10183
10839
|
observer?.disconnect();
|
|
10184
10840
|
};
|
|
10185
10841
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
10186
|
-
(0,
|
|
10842
|
+
(0, import_react11.useEffect)(() => {
|
|
10187
10843
|
if (!isEditMode) return;
|
|
10188
10844
|
const measure = () => {
|
|
10189
10845
|
const h = document.body.scrollHeight;
|
|
@@ -10207,7 +10863,7 @@ function OhhwellsBridge() {
|
|
|
10207
10863
|
window.removeEventListener("resize", handleResize);
|
|
10208
10864
|
};
|
|
10209
10865
|
}, [pathname, isEditMode, postToParent2]);
|
|
10210
|
-
(0,
|
|
10866
|
+
(0, import_react11.useEffect)(() => {
|
|
10211
10867
|
if (!subdomainFromQuery || isEditMode) return;
|
|
10212
10868
|
const handleClick = (e) => {
|
|
10213
10869
|
const anchor = e.target.closest("a");
|
|
@@ -10223,7 +10879,7 @@ function OhhwellsBridge() {
|
|
|
10223
10879
|
document.addEventListener("click", handleClick, true);
|
|
10224
10880
|
return () => document.removeEventListener("click", handleClick, true);
|
|
10225
10881
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
10226
|
-
(0,
|
|
10882
|
+
(0, import_react11.useEffect)(() => {
|
|
10227
10883
|
if (!isEditMode) {
|
|
10228
10884
|
editStylesRef.current?.base.remove();
|
|
10229
10885
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -10422,7 +11078,7 @@ function OhhwellsBridge() {
|
|
|
10422
11078
|
setLinkPopoverRef.current({
|
|
10423
11079
|
key: editable.dataset.ohwKey ?? "",
|
|
10424
11080
|
mode: "edit",
|
|
10425
|
-
target:
|
|
11081
|
+
target: getLinkHref3(editable)
|
|
10426
11082
|
});
|
|
10427
11083
|
return;
|
|
10428
11084
|
}
|
|
@@ -10447,7 +11103,7 @@ function OhhwellsBridge() {
|
|
|
10447
11103
|
}
|
|
10448
11104
|
e.preventDefault();
|
|
10449
11105
|
e.stopPropagation();
|
|
10450
|
-
activateRef.current(editable);
|
|
11106
|
+
activateRef.current(editable, { caretX: e.clientX, caretY: e.clientY });
|
|
10451
11107
|
return;
|
|
10452
11108
|
}
|
|
10453
11109
|
const hrefAnchor = getNavigationItemAnchor(target);
|
|
@@ -10474,6 +11130,18 @@ function OhhwellsBridge() {
|
|
|
10474
11130
|
selectFrameRef.current(footerColClick);
|
|
10475
11131
|
return;
|
|
10476
11132
|
}
|
|
11133
|
+
const footerLinksToSelect = resolveFooterLinksContainerSelectionTarget(
|
|
11134
|
+
target,
|
|
11135
|
+
e.clientX,
|
|
11136
|
+
e.clientY,
|
|
11137
|
+
isPointOverNavItem
|
|
11138
|
+
);
|
|
11139
|
+
if (footerLinksToSelect) {
|
|
11140
|
+
e.preventDefault();
|
|
11141
|
+
e.stopPropagation();
|
|
11142
|
+
selectFrameRef.current(footerLinksToSelect);
|
|
11143
|
+
return;
|
|
11144
|
+
}
|
|
10477
11145
|
const navContainerToSelect = resolveNavContainerSelectionTarget(target, e.clientX, e.clientY);
|
|
10478
11146
|
if (navContainerToSelect) {
|
|
10479
11147
|
e.preventDefault();
|
|
@@ -10532,8 +11200,8 @@ function OhhwellsBridge() {
|
|
|
10532
11200
|
return;
|
|
10533
11201
|
}
|
|
10534
11202
|
const navLabel = getNavigationLabelEditable(target);
|
|
10535
|
-
|
|
10536
|
-
|
|
11203
|
+
const editable = navLabel?.editable ?? target.closest('[data-ohw-editable="text"], [data-ohw-editable="plain"]');
|
|
11204
|
+
if (!editable || isMediaEditable(editable) || editable.dataset.ohwEditable === "link") return;
|
|
10537
11205
|
e.preventDefault();
|
|
10538
11206
|
e.stopPropagation();
|
|
10539
11207
|
if (activeElRef.current !== editable) {
|
|
@@ -10554,16 +11222,38 @@ function OhhwellsBridge() {
|
|
|
10554
11222
|
setHoveredNavContainerRect(null);
|
|
10555
11223
|
return;
|
|
10556
11224
|
}
|
|
10557
|
-
|
|
10558
|
-
const
|
|
10559
|
-
|
|
10560
|
-
|
|
10561
|
-
|
|
10562
|
-
|
|
10563
|
-
|
|
10564
|
-
|
|
11225
|
+
{
|
|
11226
|
+
const selected2 = selectedElRef.current;
|
|
11227
|
+
const selectedIsFooterColumn = Boolean(selected2) && !isFooterLinksContainer(selected2) && (selected2.hasAttribute("data-ohw-footer-col") || selected2.hasAttribute("data-ohw-footer-column") || Boolean(selected2.closest("footer") && isInferredFooterGroup(selected2)));
|
|
11228
|
+
const allowNavContainerHover = toolbarVariantRef.current !== "select-frame";
|
|
11229
|
+
const allowFooterLinksHover = toolbarVariantRef.current !== "select-frame" || selectedIsFooterColumn;
|
|
11230
|
+
if (allowNavContainerHover) {
|
|
11231
|
+
const navContainer = target.closest("[data-ohw-nav-container]");
|
|
11232
|
+
if (navContainer && !getNavigationItemAnchor(target)) {
|
|
11233
|
+
hoveredNavContainerRef.current = navContainer;
|
|
11234
|
+
setHoveredNavContainerRect(navContainer.getBoundingClientRect());
|
|
11235
|
+
hoveredItemElRef.current = null;
|
|
11236
|
+
setHoveredItemRect(null);
|
|
11237
|
+
return;
|
|
11238
|
+
}
|
|
10565
11239
|
}
|
|
10566
|
-
if (
|
|
11240
|
+
if (allowFooterLinksHover) {
|
|
11241
|
+
const navContainer = target.closest("[data-ohw-nav-container]");
|
|
11242
|
+
if (!navContainer) {
|
|
11243
|
+
const footerLinks = target.closest("[data-ohw-footer-links], .rb-footer-links") ?? null;
|
|
11244
|
+
if (footerLinks && selected2 !== footerLinks && !getNavigationItemAnchor(target) && !target.closest("[data-ohw-footer-col], [data-ohw-footer-column]")) {
|
|
11245
|
+
hoveredNavContainerRef.current = footerLinks;
|
|
11246
|
+
setHoveredNavContainerRect(footerLinks.getBoundingClientRect());
|
|
11247
|
+
hoveredItemElRef.current = null;
|
|
11248
|
+
setHoveredItemRect(null);
|
|
11249
|
+
return;
|
|
11250
|
+
}
|
|
11251
|
+
if (!footerLinks) {
|
|
11252
|
+
hoveredNavContainerRef.current = null;
|
|
11253
|
+
setHoveredNavContainerRect(null);
|
|
11254
|
+
}
|
|
11255
|
+
}
|
|
11256
|
+
} else if (toolbarVariantRef.current === "select-frame") {
|
|
10567
11257
|
hoveredNavContainerRef.current = null;
|
|
10568
11258
|
setHoveredNavContainerRect(null);
|
|
10569
11259
|
}
|
|
@@ -10605,9 +11295,9 @@ function OhhwellsBridge() {
|
|
|
10605
11295
|
};
|
|
10606
11296
|
const handleMouseOut = (e) => {
|
|
10607
11297
|
const target = e.target;
|
|
10608
|
-
if (target.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column]")) {
|
|
11298
|
+
if (target.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column], [data-ohw-footer-links], .rb-footer-links")) {
|
|
10609
11299
|
const related2 = e.relatedTarget instanceof Element ? e.relatedTarget : null;
|
|
10610
|
-
if (related2?.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column], [data-ohw-navbar-container-chrome], [data-ohw-navbar-add-button]")) {
|
|
11300
|
+
if (related2?.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column], [data-ohw-footer-links], .rb-footer-links, [data-ohw-navbar-container-chrome], [data-ohw-navbar-add-button], [data-ohw-footer-container-chrome], [data-ohw-footer-add-button]")) {
|
|
10611
11301
|
return;
|
|
10612
11302
|
}
|
|
10613
11303
|
hoveredNavContainerRef.current = null;
|
|
@@ -10702,6 +11392,15 @@ function OhhwellsBridge() {
|
|
|
10702
11392
|
if (track) track.setAttribute("data-ohw-hover-paused", "");
|
|
10703
11393
|
};
|
|
10704
11394
|
const clearImageHover = () => setMediaHover(null);
|
|
11395
|
+
const dismissImageHover = () => {
|
|
11396
|
+
if (hoveredImageRef.current) {
|
|
11397
|
+
hoveredImageRef.current = null;
|
|
11398
|
+
hoveredImageHasTextOverlapRef.current = false;
|
|
11399
|
+
resumeAnimTracks();
|
|
11400
|
+
postToParentRef.current({ type: "ow:image-unhover" });
|
|
11401
|
+
}
|
|
11402
|
+
clearImageHover();
|
|
11403
|
+
};
|
|
10705
11404
|
const findImageAtPoint = (clientX, clientY, fromParentViewport) => {
|
|
10706
11405
|
const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
|
|
10707
11406
|
const images = Array.from(document.querySelectorAll(MEDIA_SELECTOR));
|
|
@@ -10745,16 +11444,13 @@ function OhhwellsBridge() {
|
|
|
10745
11444
|
}
|
|
10746
11445
|
return smallest;
|
|
10747
11446
|
};
|
|
10748
|
-
const dismissImageHover = () => {
|
|
10749
|
-
if (hoveredImageRef.current) {
|
|
10750
|
-
hoveredImageRef.current = null;
|
|
10751
|
-
hoveredImageHasTextOverlapRef.current = false;
|
|
10752
|
-
resumeAnimTracks();
|
|
10753
|
-
postToParentRef.current({ type: "ow:image-unhover" });
|
|
10754
|
-
}
|
|
10755
|
-
};
|
|
10756
11447
|
const probeNavigationHoverAt = (x, y) => {
|
|
10757
|
-
|
|
11448
|
+
const selected = selectedElRef.current;
|
|
11449
|
+
const selectedIsFooterColumn = Boolean(selected) && !isFooterLinksContainer(selected) && (selected.hasAttribute("data-ohw-footer-col") || selected.hasAttribute("data-ohw-footer-column") || Boolean(selected.closest("footer") && isInferredFooterGroup(selected)));
|
|
11450
|
+
const selectedIsFooterLinks = Boolean(selected && isFooterLinksContainer(selected));
|
|
11451
|
+
const allowNavContainerHover = toolbarVariantRef.current !== "select-frame";
|
|
11452
|
+
const allowFooterLinksHover = (toolbarVariantRef.current !== "select-frame" || selectedIsFooterColumn) && !selectedIsFooterLinks;
|
|
11453
|
+
if (toolbarVariantRef.current === "select-frame" && !allowFooterLinksHover) {
|
|
10758
11454
|
hoveredNavContainerRef.current = null;
|
|
10759
11455
|
setHoveredNavContainerRect(null);
|
|
10760
11456
|
}
|
|
@@ -10776,7 +11472,6 @@ function OhhwellsBridge() {
|
|
|
10776
11472
|
if (navItemHit) {
|
|
10777
11473
|
hoveredNavContainerRef.current = null;
|
|
10778
11474
|
setHoveredNavContainerRect(null);
|
|
10779
|
-
const selected = selectedElRef.current;
|
|
10780
11475
|
if (selected !== navItemHit) {
|
|
10781
11476
|
clearHrefKeyHover(navItemHit);
|
|
10782
11477
|
hoveredItemElRef.current = navItemHit;
|
|
@@ -10788,7 +11483,7 @@ function OhhwellsBridge() {
|
|
|
10788
11483
|
return;
|
|
10789
11484
|
}
|
|
10790
11485
|
}
|
|
10791
|
-
if (
|
|
11486
|
+
if (allowNavContainerHover) {
|
|
10792
11487
|
for (const container of navContainers) {
|
|
10793
11488
|
const containerRect = container.getBoundingClientRect();
|
|
10794
11489
|
const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
|
|
@@ -10800,12 +11495,23 @@ function OhhwellsBridge() {
|
|
|
10800
11495
|
setHoveredItemRect(null);
|
|
10801
11496
|
return;
|
|
10802
11497
|
}
|
|
10803
|
-
hoveredNavContainerRef.current = null;
|
|
10804
|
-
setHoveredNavContainerRect(null);
|
|
10805
|
-
} else {
|
|
10806
|
-
hoveredNavContainerRef.current = null;
|
|
10807
|
-
setHoveredNavContainerRect(null);
|
|
10808
11498
|
}
|
|
11499
|
+
if (allowFooterLinksHover) {
|
|
11500
|
+
const footerLinks = getFooterLinksContainer();
|
|
11501
|
+
if (footerLinks) {
|
|
11502
|
+
const containerRect = footerLinks.getBoundingClientRect();
|
|
11503
|
+
const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
|
|
11504
|
+
if (overContainer && !isPointOverNavItem(footerLinks, x, y) && !isPointOverFooterColumn(x, y)) {
|
|
11505
|
+
hoveredNavContainerRef.current = footerLinks;
|
|
11506
|
+
setHoveredNavContainerRect(footerLinks.getBoundingClientRect());
|
|
11507
|
+
hoveredItemElRef.current = null;
|
|
11508
|
+
setHoveredItemRect(null);
|
|
11509
|
+
return;
|
|
11510
|
+
}
|
|
11511
|
+
}
|
|
11512
|
+
}
|
|
11513
|
+
hoveredNavContainerRef.current = null;
|
|
11514
|
+
setHoveredNavContainerRect(null);
|
|
10809
11515
|
for (const column of footerColumns) {
|
|
10810
11516
|
const containerRect = column.getBoundingClientRect();
|
|
10811
11517
|
const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
|
|
@@ -10844,6 +11550,13 @@ function OhhwellsBridge() {
|
|
|
10844
11550
|
probeNavigationHoverAt(x, y);
|
|
10845
11551
|
return;
|
|
10846
11552
|
}
|
|
11553
|
+
const overMoreMenu = document.elementFromPoint(x, y)?.closest?.(
|
|
11554
|
+
'[data-ohw-more-menu], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]'
|
|
11555
|
+
);
|
|
11556
|
+
if (overMoreMenu) {
|
|
11557
|
+
dismissImageHover();
|
|
11558
|
+
return;
|
|
11559
|
+
}
|
|
10847
11560
|
hoveredNavContainerRef.current = null;
|
|
10848
11561
|
setHoveredNavContainerRect(null);
|
|
10849
11562
|
if (hoveredItemElRef.current?.hasAttribute("data-ohw-footer-col") || hoveredItemElRef.current?.hasAttribute("data-ohw-footer-column")) {
|
|
@@ -10890,7 +11603,7 @@ function OhhwellsBridge() {
|
|
|
10890
11603
|
return;
|
|
10891
11604
|
}
|
|
10892
11605
|
const topEl = document.elementFromPoint(x2, y2);
|
|
10893
|
-
if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]')) {
|
|
11606
|
+
if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-more-menu], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]')) {
|
|
10894
11607
|
if (hoveredImageRef.current) {
|
|
10895
11608
|
hoveredImageRef.current = null;
|
|
10896
11609
|
resumeAnimTracks();
|
|
@@ -11314,6 +12027,7 @@ function OhhwellsBridge() {
|
|
|
11314
12027
|
}
|
|
11315
12028
|
editContentRef.current = { ...editContentRef.current, ...content };
|
|
11316
12029
|
reconcileNavbarItemsFromContent(editContentRef.current);
|
|
12030
|
+
reconcileFooterOrderFromContent(editContentRef.current);
|
|
11317
12031
|
syncNavigationDragCursorAttrs();
|
|
11318
12032
|
enforceLinkHrefs();
|
|
11319
12033
|
postToParentRef.current({ type: "ow:hydrate-done" });
|
|
@@ -11333,6 +12047,7 @@ function OhhwellsBridge() {
|
|
|
11333
12047
|
window.addEventListener("message", handleDeactivate);
|
|
11334
12048
|
const handleUiEscape = (e) => {
|
|
11335
12049
|
if (e.data?.type !== "ui:escape") return;
|
|
12050
|
+
if (document.querySelector("[data-ohw-more-menu]")) return;
|
|
11336
12051
|
if (linkPopoverOpenRef.current) {
|
|
11337
12052
|
setLinkPopoverRef.current(null);
|
|
11338
12053
|
return;
|
|
@@ -11368,6 +12083,11 @@ function OhhwellsBridge() {
|
|
|
11368
12083
|
}
|
|
11369
12084
|
if (selectedElRef.current) {
|
|
11370
12085
|
if (toolbarVariantRef.current === "select-frame") {
|
|
12086
|
+
const parent2 = getNavigationSelectionParent(selectedElRef.current);
|
|
12087
|
+
if (parent2 && isNavigationContainer(parent2) && isFooterLinksContainer(parent2) && !isFooterLinksContainer(selectedElRef.current)) {
|
|
12088
|
+
selectFrameRef.current(parent2);
|
|
12089
|
+
return;
|
|
12090
|
+
}
|
|
11371
12091
|
deselectRef.current();
|
|
11372
12092
|
return;
|
|
11373
12093
|
}
|
|
@@ -11382,14 +12102,12 @@ function OhhwellsBridge() {
|
|
|
11382
12102
|
window.addEventListener("message", handleUiEscape);
|
|
11383
12103
|
const handleKeyDown = (e) => {
|
|
11384
12104
|
if (e.key === "Escape" && document.querySelector("[data-ohw-section-picker]")) return;
|
|
12105
|
+
if (e.key === "Escape" && document.querySelector("[data-ohw-more-menu]")) return;
|
|
11385
12106
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a" && activeElRef.current) {
|
|
11386
|
-
|
|
11387
|
-
|
|
11388
|
-
|
|
11389
|
-
|
|
11390
|
-
refreshActiveCommandsRef.current();
|
|
11391
|
-
return;
|
|
11392
|
-
}
|
|
12107
|
+
e.preventDefault();
|
|
12108
|
+
selectAllTextInEditable(activeElRef.current);
|
|
12109
|
+
refreshActiveCommandsRef.current();
|
|
12110
|
+
return;
|
|
11393
12111
|
}
|
|
11394
12112
|
if (e.key === "Escape" && linkPopoverOpenRef.current) {
|
|
11395
12113
|
setLinkPopoverRef.current(null);
|
|
@@ -11397,6 +12115,12 @@ function OhhwellsBridge() {
|
|
|
11397
12115
|
}
|
|
11398
12116
|
if (e.key === "Escape" && selectedElRef.current && !activeElRef.current) {
|
|
11399
12117
|
if (toolbarVariantRef.current === "select-frame") {
|
|
12118
|
+
const parent2 = getNavigationSelectionParent(selectedElRef.current);
|
|
12119
|
+
if (parent2 && isNavigationContainer(parent2) && isFooterLinksContainer(parent2) && !isFooterLinksContainer(selectedElRef.current)) {
|
|
12120
|
+
e.preventDefault();
|
|
12121
|
+
selectFrameRef.current(parent2);
|
|
12122
|
+
return;
|
|
12123
|
+
}
|
|
11400
12124
|
deselectRef.current();
|
|
11401
12125
|
return;
|
|
11402
12126
|
}
|
|
@@ -11846,7 +12570,7 @@ function OhhwellsBridge() {
|
|
|
11846
12570
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
11847
12571
|
};
|
|
11848
12572
|
}, [isEditMode, refreshStateRules]);
|
|
11849
|
-
(0,
|
|
12573
|
+
(0, import_react11.useEffect)(() => {
|
|
11850
12574
|
if (!isEditMode) return;
|
|
11851
12575
|
const THRESHOLD = 10;
|
|
11852
12576
|
const resolveWasSelected = (el) => {
|
|
@@ -12000,7 +12724,7 @@ function OhhwellsBridge() {
|
|
|
12000
12724
|
unlockFooterDragInteraction();
|
|
12001
12725
|
};
|
|
12002
12726
|
}, [isEditMode]);
|
|
12003
|
-
(0,
|
|
12727
|
+
(0, import_react11.useEffect)(() => {
|
|
12004
12728
|
const handler = (e) => {
|
|
12005
12729
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
12006
12730
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -12016,7 +12740,7 @@ function OhhwellsBridge() {
|
|
|
12016
12740
|
window.addEventListener("message", handler);
|
|
12017
12741
|
return () => window.removeEventListener("message", handler);
|
|
12018
12742
|
}, [processConfigRequest]);
|
|
12019
|
-
(0,
|
|
12743
|
+
(0, import_react11.useEffect)(() => {
|
|
12020
12744
|
if (!isEditMode) return;
|
|
12021
12745
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
12022
12746
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -12051,13 +12775,13 @@ function OhhwellsBridge() {
|
|
|
12051
12775
|
clearTimeout(timer);
|
|
12052
12776
|
};
|
|
12053
12777
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
12054
|
-
(0,
|
|
12778
|
+
(0, import_react11.useEffect)(() => {
|
|
12055
12779
|
scrollToHashSectionWhenReady();
|
|
12056
12780
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
12057
12781
|
window.addEventListener("hashchange", onHashChange);
|
|
12058
12782
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
12059
12783
|
}, [pathname]);
|
|
12060
|
-
const handleCommand = (0,
|
|
12784
|
+
const handleCommand = (0, import_react11.useCallback)((cmd) => {
|
|
12061
12785
|
const el = activeElRef.current;
|
|
12062
12786
|
const selBefore = window.getSelection();
|
|
12063
12787
|
let savedOffsets = null;
|
|
@@ -12093,7 +12817,7 @@ function OhhwellsBridge() {
|
|
|
12093
12817
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
12094
12818
|
refreshActiveCommandsRef.current();
|
|
12095
12819
|
}, []);
|
|
12096
|
-
const handleStateChange = (0,
|
|
12820
|
+
const handleStateChange = (0, import_react11.useCallback)((state) => {
|
|
12097
12821
|
if (!activeStateElRef.current) return;
|
|
12098
12822
|
const el = activeStateElRef.current;
|
|
12099
12823
|
if (state === "Default") {
|
|
@@ -12106,22 +12830,22 @@ function OhhwellsBridge() {
|
|
|
12106
12830
|
}
|
|
12107
12831
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
12108
12832
|
}, [deactivate]);
|
|
12109
|
-
const closeLinkPopover = (0,
|
|
12833
|
+
const closeLinkPopover = (0, import_react11.useCallback)(() => {
|
|
12110
12834
|
addNavAfterAnchorRef.current = null;
|
|
12111
12835
|
setLinkPopover(null);
|
|
12112
12836
|
}, []);
|
|
12113
|
-
const openLinkPopoverForActive = (0,
|
|
12837
|
+
const openLinkPopoverForActive = (0, import_react11.useCallback)(() => {
|
|
12114
12838
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
12115
12839
|
if (!hrefCtx) return;
|
|
12116
12840
|
bumpLinkPopoverGrace();
|
|
12117
12841
|
setLinkPopover({
|
|
12118
12842
|
key: hrefCtx.key,
|
|
12119
12843
|
mode: "edit",
|
|
12120
|
-
target:
|
|
12844
|
+
target: getLinkHref3(hrefCtx.anchor)
|
|
12121
12845
|
});
|
|
12122
12846
|
deactivate();
|
|
12123
12847
|
}, [deactivate]);
|
|
12124
|
-
const openLinkPopoverForSelected = (0,
|
|
12848
|
+
const openLinkPopoverForSelected = (0, import_react11.useCallback)(() => {
|
|
12125
12849
|
const anchor = selectedElRef.current;
|
|
12126
12850
|
if (!anchor) return;
|
|
12127
12851
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -12130,11 +12854,108 @@ function OhhwellsBridge() {
|
|
|
12130
12854
|
setLinkPopover({
|
|
12131
12855
|
key,
|
|
12132
12856
|
mode: "edit",
|
|
12133
|
-
target:
|
|
12857
|
+
target: getLinkHref3(anchor)
|
|
12134
12858
|
});
|
|
12135
12859
|
deselect();
|
|
12136
12860
|
}, [deselect]);
|
|
12137
|
-
const
|
|
12861
|
+
const handleSelectParent = (0, import_react11.useCallback)(() => {
|
|
12862
|
+
const selected = selectedElRef.current;
|
|
12863
|
+
if (!selected) return;
|
|
12864
|
+
if (toolbarVariantRef.current === "select-frame") {
|
|
12865
|
+
deselectRef.current();
|
|
12866
|
+
return;
|
|
12867
|
+
}
|
|
12868
|
+
const parent = getNavigationSelectionParent(selected);
|
|
12869
|
+
if (parent && isNavigationContainer(parent)) {
|
|
12870
|
+
selectFrameRef.current(parent);
|
|
12871
|
+
} else {
|
|
12872
|
+
deselectRef.current();
|
|
12873
|
+
}
|
|
12874
|
+
}, []);
|
|
12875
|
+
const handleDuplicateSelected = (0, import_react11.useCallback)(() => {
|
|
12876
|
+
const selected = selectedElRef.current;
|
|
12877
|
+
if (!selected || !isNavigationItem(selected)) return;
|
|
12878
|
+
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
12879
|
+
if (!hrefKey) return;
|
|
12880
|
+
if (isNavbarHrefKey(hrefKey)) {
|
|
12881
|
+
const result = duplicateNavbarItem(selected);
|
|
12882
|
+
if (!result) return;
|
|
12883
|
+
applyLinkByKey(result.hrefKey, result.href);
|
|
12884
|
+
document.querySelectorAll(`[data-ohw-key="${result.labelKey}"]`).forEach((el) => {
|
|
12885
|
+
el.textContent = result.label;
|
|
12886
|
+
});
|
|
12887
|
+
const nodes = [
|
|
12888
|
+
{ key: result.hrefKey, text: result.href },
|
|
12889
|
+
{ key: result.labelKey, text: result.label }
|
|
12890
|
+
];
|
|
12891
|
+
for (const child of result.childResults) {
|
|
12892
|
+
applyLinkByKey(child.hrefKey, child.href);
|
|
12893
|
+
document.querySelectorAll(`[data-ohw-key="${child.labelKey}"]`).forEach((el) => {
|
|
12894
|
+
el.textContent = child.label;
|
|
12895
|
+
});
|
|
12896
|
+
nodes.push(
|
|
12897
|
+
{ key: child.hrefKey, text: child.href },
|
|
12898
|
+
{ key: child.labelKey, text: child.label }
|
|
12899
|
+
);
|
|
12900
|
+
}
|
|
12901
|
+
const maxIndex = Math.max(
|
|
12902
|
+
result.index,
|
|
12903
|
+
...result.childResults.map((c) => c.index)
|
|
12904
|
+
);
|
|
12905
|
+
const navCount = String(maxIndex + 1);
|
|
12906
|
+
nodes.push(
|
|
12907
|
+
{ key: NAV_COUNT_KEY, text: navCount },
|
|
12908
|
+
{ key: NAV_ORDER_KEY, text: result.orderJson }
|
|
12909
|
+
);
|
|
12910
|
+
editContentRef.current = {
|
|
12911
|
+
...editContentRef.current,
|
|
12912
|
+
[result.hrefKey]: result.href,
|
|
12913
|
+
[result.labelKey]: result.label,
|
|
12914
|
+
...Object.fromEntries(
|
|
12915
|
+
result.childResults.flatMap((c) => [
|
|
12916
|
+
[c.hrefKey, c.href],
|
|
12917
|
+
[c.labelKey, c.label]
|
|
12918
|
+
])
|
|
12919
|
+
),
|
|
12920
|
+
[NAV_COUNT_KEY]: navCount,
|
|
12921
|
+
[NAV_ORDER_KEY]: result.orderJson
|
|
12922
|
+
};
|
|
12923
|
+
postToParent2({ type: "ow:change", nodes });
|
|
12924
|
+
enforceLinkHrefs();
|
|
12925
|
+
requestAnimationFrame(() => {
|
|
12926
|
+
selectRef.current(result.anchor);
|
|
12927
|
+
});
|
|
12928
|
+
return;
|
|
12929
|
+
}
|
|
12930
|
+
if (isFooterHrefKey(hrefKey)) {
|
|
12931
|
+
const result = duplicateFooterItem(selected);
|
|
12932
|
+
if (!result) return;
|
|
12933
|
+
applyLinkByKey(result.hrefKey, result.href);
|
|
12934
|
+
document.querySelectorAll(`[data-ohw-key="${result.labelKey}"]`).forEach((el) => {
|
|
12935
|
+
el.textContent = result.label;
|
|
12936
|
+
});
|
|
12937
|
+
const orderJson = JSON.stringify(result.order);
|
|
12938
|
+
editContentRef.current = {
|
|
12939
|
+
...editContentRef.current,
|
|
12940
|
+
[result.hrefKey]: result.href,
|
|
12941
|
+
[result.labelKey]: result.label,
|
|
12942
|
+
[FOOTER_ORDER_KEY]: orderJson
|
|
12943
|
+
};
|
|
12944
|
+
postToParent2({
|
|
12945
|
+
type: "ow:change",
|
|
12946
|
+
nodes: [
|
|
12947
|
+
{ key: result.hrefKey, text: result.href },
|
|
12948
|
+
{ key: result.labelKey, text: result.label },
|
|
12949
|
+
{ key: FOOTER_ORDER_KEY, text: orderJson }
|
|
12950
|
+
]
|
|
12951
|
+
});
|
|
12952
|
+
enforceLinkHrefs();
|
|
12953
|
+
requestAnimationFrame(() => {
|
|
12954
|
+
selectRef.current(result.anchor);
|
|
12955
|
+
});
|
|
12956
|
+
}
|
|
12957
|
+
}, [postToParent2]);
|
|
12958
|
+
const handleLinkPopoverSubmit = (0, import_react11.useCallback)(
|
|
12138
12959
|
(target) => {
|
|
12139
12960
|
const session = linkPopoverSessionRef.current;
|
|
12140
12961
|
if (!session) return;
|
|
@@ -12193,19 +13014,19 @@ function OhhwellsBridge() {
|
|
|
12193
13014
|
const showEditLink = toolbarShowEditLink;
|
|
12194
13015
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
12195
13016
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
12196
|
-
const handleMediaReplace = (0,
|
|
13017
|
+
const handleMediaReplace = (0, import_react11.useCallback)(
|
|
12197
13018
|
(key) => {
|
|
12198
13019
|
postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
|
|
12199
13020
|
},
|
|
12200
13021
|
[postToParent2, mediaHover?.elementType]
|
|
12201
13022
|
);
|
|
12202
|
-
const handleEditCarousel = (0,
|
|
13023
|
+
const handleEditCarousel = (0, import_react11.useCallback)(
|
|
12203
13024
|
(key) => {
|
|
12204
13025
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
12205
13026
|
},
|
|
12206
13027
|
[postToParent2]
|
|
12207
13028
|
);
|
|
12208
|
-
const handleMediaFadeOutComplete = (0,
|
|
13029
|
+
const handleMediaFadeOutComplete = (0, import_react11.useCallback)((key) => {
|
|
12209
13030
|
setUploadingRects((prev) => {
|
|
12210
13031
|
if (!(key in prev)) return prev;
|
|
12211
13032
|
const next = { ...prev };
|
|
@@ -12213,7 +13034,7 @@ function OhhwellsBridge() {
|
|
|
12213
13034
|
return next;
|
|
12214
13035
|
});
|
|
12215
13036
|
}, []);
|
|
12216
|
-
const handleVideoSettingsChange = (0,
|
|
13037
|
+
const handleVideoSettingsChange = (0, import_react11.useCallback)(
|
|
12217
13038
|
(key, settings) => {
|
|
12218
13039
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
12219
13040
|
const video = getVideoEl(el);
|
|
@@ -12236,9 +13057,9 @@ function OhhwellsBridge() {
|
|
|
12236
13057
|
[postToParent2]
|
|
12237
13058
|
);
|
|
12238
13059
|
return bridgeRoot ? (0, import_react_dom3.createPortal)(
|
|
12239
|
-
/* @__PURE__ */ (0,
|
|
12240
|
-
/* @__PURE__ */ (0,
|
|
12241
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
13060
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
13061
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
13062
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12242
13063
|
MediaOverlay,
|
|
12243
13064
|
{
|
|
12244
13065
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -12249,7 +13070,7 @@ function OhhwellsBridge() {
|
|
|
12249
13070
|
},
|
|
12250
13071
|
`uploading-${key}`
|
|
12251
13072
|
)),
|
|
12252
|
-
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0,
|
|
13073
|
+
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12253
13074
|
MediaOverlay,
|
|
12254
13075
|
{
|
|
12255
13076
|
hover: mediaHover,
|
|
@@ -12258,11 +13079,11 @@ function OhhwellsBridge() {
|
|
|
12258
13079
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
12259
13080
|
}
|
|
12260
13081
|
),
|
|
12261
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
12262
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
12263
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
12264
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0,
|
|
12265
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
13082
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
|
|
13083
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
13084
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
13085
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
13086
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12266
13087
|
"div",
|
|
12267
13088
|
{
|
|
12268
13089
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -12272,7 +13093,7 @@ function OhhwellsBridge() {
|
|
|
12272
13093
|
width: slot.width,
|
|
12273
13094
|
height: slot.height
|
|
12274
13095
|
},
|
|
12275
|
-
children: /* @__PURE__ */ (0,
|
|
13096
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12276
13097
|
DropIndicator,
|
|
12277
13098
|
{
|
|
12278
13099
|
direction: slot.direction,
|
|
@@ -12283,7 +13104,7 @@ function OhhwellsBridge() {
|
|
|
12283
13104
|
},
|
|
12284
13105
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
12285
13106
|
)),
|
|
12286
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
13107
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12287
13108
|
"div",
|
|
12288
13109
|
{
|
|
12289
13110
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -12293,7 +13114,7 @@ function OhhwellsBridge() {
|
|
|
12293
13114
|
width: slot.width,
|
|
12294
13115
|
height: slot.height
|
|
12295
13116
|
},
|
|
12296
|
-
children: /* @__PURE__ */ (0,
|
|
13117
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12297
13118
|
DropIndicator,
|
|
12298
13119
|
{
|
|
12299
13120
|
direction: slot.direction,
|
|
@@ -12304,10 +13125,18 @@ function OhhwellsBridge() {
|
|
|
12304
13125
|
},
|
|
12305
13126
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
12306
13127
|
)),
|
|
12307
|
-
hoveredNavContainerRect && toolbarVariant !== "select-frame" && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
12308
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
12309
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
12310
|
-
toolbarRect && !linkPopover &&
|
|
13128
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
13129
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
13130
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
13131
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
13132
|
+
FooterContainerChrome,
|
|
13133
|
+
{
|
|
13134
|
+
rect: toolbarRect,
|
|
13135
|
+
onAdd: handleAddFooterColumn,
|
|
13136
|
+
addDisabled: !canAddFooterColumn()
|
|
13137
|
+
}
|
|
13138
|
+
),
|
|
13139
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12311
13140
|
ItemInteractionLayer,
|
|
12312
13141
|
{
|
|
12313
13142
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -12321,21 +13150,23 @@ function OhhwellsBridge() {
|
|
|
12321
13150
|
onItemPointerDown: handleItemChromePointerDown,
|
|
12322
13151
|
onItemClick: handleItemChromeClick,
|
|
12323
13152
|
itemDragSurface: !isFooterFrameSelection,
|
|
12324
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0,
|
|
13153
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12325
13154
|
ItemActionToolbar,
|
|
12326
13155
|
{
|
|
12327
13156
|
onEditLink: openLinkPopoverForSelected,
|
|
13157
|
+
onSelectParent: handleSelectParent,
|
|
13158
|
+
onDuplicate: handleDuplicateSelected,
|
|
12328
13159
|
addItemDisabled: true,
|
|
12329
13160
|
editLinkDisabled: false,
|
|
12330
|
-
moreDisabled:
|
|
13161
|
+
moreDisabled: false,
|
|
12331
13162
|
showAddItem: !selectedIsCta,
|
|
12332
13163
|
showMore: !selectedIsCta
|
|
12333
13164
|
}
|
|
12334
13165
|
) : void 0
|
|
12335
13166
|
}
|
|
12336
13167
|
),
|
|
12337
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0,
|
|
12338
|
-
/* @__PURE__ */ (0,
|
|
13168
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
13169
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12339
13170
|
EditGlowChrome,
|
|
12340
13171
|
{
|
|
12341
13172
|
rect: toolbarRect,
|
|
@@ -12345,7 +13176,7 @@ function OhhwellsBridge() {
|
|
|
12345
13176
|
hideHandle: isItemDragging
|
|
12346
13177
|
}
|
|
12347
13178
|
),
|
|
12348
|
-
/* @__PURE__ */ (0,
|
|
13179
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12349
13180
|
FloatingToolbar,
|
|
12350
13181
|
{
|
|
12351
13182
|
rect: toolbarRect,
|
|
@@ -12358,7 +13189,7 @@ function OhhwellsBridge() {
|
|
|
12358
13189
|
}
|
|
12359
13190
|
)
|
|
12360
13191
|
] }),
|
|
12361
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
13192
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
12362
13193
|
"div",
|
|
12363
13194
|
{
|
|
12364
13195
|
"data-ohw-max-badge": "",
|
|
@@ -12384,7 +13215,7 @@ function OhhwellsBridge() {
|
|
|
12384
13215
|
]
|
|
12385
13216
|
}
|
|
12386
13217
|
),
|
|
12387
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
13218
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12388
13219
|
StateToggle,
|
|
12389
13220
|
{
|
|
12390
13221
|
rect: toggleState.rect,
|
|
@@ -12393,15 +13224,15 @@ function OhhwellsBridge() {
|
|
|
12393
13224
|
onStateChange: handleStateChange
|
|
12394
13225
|
}
|
|
12395
13226
|
),
|
|
12396
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
13227
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
12397
13228
|
"div",
|
|
12398
13229
|
{
|
|
12399
13230
|
"data-ohw-section-insert-line": "",
|
|
12400
13231
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
12401
13232
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
12402
13233
|
children: [
|
|
12403
|
-
/* @__PURE__ */ (0,
|
|
12404
|
-
/* @__PURE__ */ (0,
|
|
13234
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
|
|
13235
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12405
13236
|
Badge,
|
|
12406
13237
|
{
|
|
12407
13238
|
className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
|
|
@@ -12418,11 +13249,11 @@ function OhhwellsBridge() {
|
|
|
12418
13249
|
children: "Add Section"
|
|
12419
13250
|
}
|
|
12420
13251
|
),
|
|
12421
|
-
/* @__PURE__ */ (0,
|
|
13252
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
|
|
12422
13253
|
]
|
|
12423
13254
|
}
|
|
12424
13255
|
),
|
|
12425
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
13256
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12426
13257
|
LinkPopover,
|
|
12427
13258
|
{
|
|
12428
13259
|
panelRef: linkPopoverPanelRef,
|
|
@@ -12450,6 +13281,12 @@ function OhhwellsBridge() {
|
|
|
12450
13281
|
CustomToolbarDivider,
|
|
12451
13282
|
DragHandle,
|
|
12452
13283
|
DropIndicator,
|
|
13284
|
+
DropdownMenu,
|
|
13285
|
+
DropdownMenuContent,
|
|
13286
|
+
DropdownMenuGroup,
|
|
13287
|
+
DropdownMenuItem,
|
|
13288
|
+
DropdownMenuSeparator,
|
|
13289
|
+
DropdownMenuTrigger,
|
|
12453
13290
|
ItemActionToolbar,
|
|
12454
13291
|
ItemInteractionLayer,
|
|
12455
13292
|
LinkEditorPanel,
|