@ohhwells/bridge 0.1.49-next.115 → 0.1.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +462 -1243
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -28
- package/dist/index.d.ts +4 -28
- package/dist/index.js +268 -1043
- package/dist/index.js.map +1 -1
- package/dist/styles.css +0 -135
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -36,12 +36,6 @@ __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,
|
|
45
39
|
ItemActionToolbar: () => ItemActionToolbar,
|
|
46
40
|
ItemInteractionLayer: () => ItemInteractionLayer,
|
|
47
41
|
LinkEditorPanel: () => LinkEditorPanel,
|
|
@@ -69,7 +63,7 @@ __export(index_exports, {
|
|
|
69
63
|
module.exports = __toCommonJS(index_exports);
|
|
70
64
|
|
|
71
65
|
// src/OhhwellsBridge.tsx
|
|
72
|
-
var
|
|
66
|
+
var import_react10 = __toESM(require("react"), 1);
|
|
73
67
|
var import_client = require("react-dom/client");
|
|
74
68
|
var import_react_dom2 = require("react-dom");
|
|
75
69
|
|
|
@@ -4406,116 +4400,22 @@ var CustomToolbarButton = React4.forwardRef(
|
|
|
4406
4400
|
CustomToolbarButton.displayName = "CustomToolbarButton";
|
|
4407
4401
|
|
|
4408
4402
|
// src/ui/item-action-toolbar.tsx
|
|
4409
|
-
var import_react4 = require("react");
|
|
4410
4403
|
var import_lucide_react2 = require("lucide-react");
|
|
4411
4404
|
|
|
4412
|
-
// src/ui/
|
|
4405
|
+
// src/ui/tooltip.tsx
|
|
4413
4406
|
var import_radix_ui3 = require("radix-ui");
|
|
4414
4407
|
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");
|
|
4508
4408
|
function TooltipProvider({
|
|
4509
4409
|
delayDuration = 0,
|
|
4510
4410
|
...props
|
|
4511
4411
|
}) {
|
|
4512
|
-
return /* @__PURE__ */ (0,
|
|
4412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.Tooltip.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
|
|
4513
4413
|
}
|
|
4514
4414
|
function Tooltip({ ...props }) {
|
|
4515
|
-
return /* @__PURE__ */ (0,
|
|
4415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.Tooltip.Root, { "data-slot": "tooltip", ...props });
|
|
4516
4416
|
}
|
|
4517
4417
|
function TooltipTrigger({ ...props }) {
|
|
4518
|
-
return /* @__PURE__ */ (0,
|
|
4418
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
4519
4419
|
}
|
|
4520
4420
|
var arrowClassBySide = {
|
|
4521
4421
|
top: "before:bottom-0 before:left-1/2 before:-translate-x-1/2 before:translate-y-1/2",
|
|
@@ -4532,8 +4432,8 @@ function TooltipContent({
|
|
|
4532
4432
|
...props
|
|
4533
4433
|
}) {
|
|
4534
4434
|
const resolvedSide = side ?? "bottom";
|
|
4535
|
-
return /* @__PURE__ */ (0,
|
|
4536
|
-
|
|
4435
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4436
|
+
import_radix_ui3.Tooltip.Content,
|
|
4537
4437
|
{
|
|
4538
4438
|
"data-slot": "tooltip-content",
|
|
4539
4439
|
side,
|
|
@@ -4555,7 +4455,7 @@ function TooltipContent({
|
|
|
4555
4455
|
}
|
|
4556
4456
|
|
|
4557
4457
|
// src/ui/item-action-toolbar.tsx
|
|
4558
|
-
var
|
|
4458
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
4559
4459
|
function ToolbarActionTooltip({
|
|
4560
4460
|
label,
|
|
4561
4461
|
side = "bottom",
|
|
@@ -4563,31 +4463,25 @@ function ToolbarActionTooltip({
|
|
|
4563
4463
|
buttonProps,
|
|
4564
4464
|
children
|
|
4565
4465
|
}) {
|
|
4566
|
-
const button = /* @__PURE__ */ (0,
|
|
4567
|
-
return /* @__PURE__ */ (0,
|
|
4568
|
-
/* @__PURE__ */ (0,
|
|
4569
|
-
/* @__PURE__ */ (0,
|
|
4466
|
+
const button = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CustomToolbarButton, { type: "button", "aria-label": label, disabled, ...buttonProps, children });
|
|
4467
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Tooltip, { children: [
|
|
4468
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-flex", children: button }) : button }),
|
|
4469
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipContent, { side, sideOffset: 9, children: label })
|
|
4570
4470
|
] });
|
|
4571
4471
|
}
|
|
4572
4472
|
function ItemActionToolbar({
|
|
4573
4473
|
onEditLink,
|
|
4574
4474
|
onAddItem,
|
|
4575
|
-
|
|
4576
|
-
onDuplicate,
|
|
4577
|
-
onDelete,
|
|
4475
|
+
onMore,
|
|
4578
4476
|
editLinkDisabled = false,
|
|
4579
4477
|
addItemDisabled = true,
|
|
4580
|
-
moreDisabled =
|
|
4581
|
-
selectParentDisabled = false,
|
|
4582
|
-
duplicateDisabled = false,
|
|
4583
|
-
deleteDisabled = false,
|
|
4478
|
+
moreDisabled = true,
|
|
4584
4479
|
showAddItem = true,
|
|
4585
4480
|
showMore = true,
|
|
4586
4481
|
tooltipSide = "bottom"
|
|
4587
4482
|
}) {
|
|
4588
|
-
|
|
4589
|
-
|
|
4590
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CustomToolbar, { children: [
|
|
4484
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4591
4485
|
ToolbarActionTooltip,
|
|
4592
4486
|
{
|
|
4593
4487
|
label: "Edit link",
|
|
@@ -4605,10 +4499,10 @@ function ItemActionToolbar({
|
|
|
4605
4499
|
e.stopPropagation();
|
|
4606
4500
|
}
|
|
4607
4501
|
},
|
|
4608
|
-
children: /* @__PURE__ */ (0,
|
|
4502
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4609
4503
|
}
|
|
4610
4504
|
),
|
|
4611
|
-
showAddItem ? /* @__PURE__ */ (0,
|
|
4505
|
+
showAddItem ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4612
4506
|
ToolbarActionTooltip,
|
|
4613
4507
|
{
|
|
4614
4508
|
label: "Add item",
|
|
@@ -4622,84 +4516,32 @@ function ItemActionToolbar({
|
|
|
4622
4516
|
onAddItem?.();
|
|
4623
4517
|
}
|
|
4624
4518
|
},
|
|
4625
|
-
children: /* @__PURE__ */ (0,
|
|
4519
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Plus, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4626
4520
|
}
|
|
4627
4521
|
) : null,
|
|
4628
|
-
showMore ? /* @__PURE__ */ (0,
|
|
4629
|
-
|
|
4630
|
-
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
|
|
4634
|
-
|
|
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(),
|
|
4522
|
+
showMore ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4523
|
+
ToolbarActionTooltip,
|
|
4524
|
+
{
|
|
4525
|
+
label: "More",
|
|
4526
|
+
side: tooltipSide,
|
|
4527
|
+
disabled: moreDisabled,
|
|
4528
|
+
buttonProps: {
|
|
4651
4529
|
onMouseDown: (e) => {
|
|
4530
|
+
if (moreDisabled) return;
|
|
4652
4531
|
e.preventDefault();
|
|
4653
4532
|
e.stopPropagation();
|
|
4654
|
-
|
|
4655
|
-
|
|
4656
|
-
|
|
4657
|
-
|
|
4658
|
-
|
|
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
|
|
4533
|
+
onMore?.();
|
|
4534
|
+
}
|
|
4535
|
+
},
|
|
4536
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.MoreHorizontal, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4537
|
+
}
|
|
4538
|
+
) : null
|
|
4697
4539
|
] }) });
|
|
4698
4540
|
}
|
|
4699
4541
|
|
|
4700
4542
|
// src/ui/item-interaction-layer.tsx
|
|
4701
4543
|
var React5 = __toESM(require("react"), 1);
|
|
4702
|
-
var
|
|
4544
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
4703
4545
|
var PRIMARY = "var(--ohw-primary, #0885FE)";
|
|
4704
4546
|
var FOCUS_RING = `0 0 0 4px color-mix(in srgb, ${PRIMARY} 12%, transparent)`;
|
|
4705
4547
|
var DRAG_SHADOW = "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)";
|
|
@@ -4781,7 +4623,7 @@ function ClampedToolbarSlot({
|
|
|
4781
4623
|
window.removeEventListener("resize", clamp);
|
|
4782
4624
|
};
|
|
4783
4625
|
}, [placement, children]);
|
|
4784
|
-
return /* @__PURE__ */ (0,
|
|
4626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4785
4627
|
"div",
|
|
4786
4628
|
{
|
|
4787
4629
|
ref: slotRef,
|
|
@@ -4821,7 +4663,7 @@ function ItemInteractionLayer({
|
|
|
4821
4663
|
const showToolbar = isActive && toolbar;
|
|
4822
4664
|
const showDragHandle = (isActive || isDragging) && showHandle;
|
|
4823
4665
|
const itemDragEnabled = itemDragSurface && isActive && showHandle && !isDragging && !dragDisabled;
|
|
4824
|
-
return /* @__PURE__ */ (0,
|
|
4666
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4825
4667
|
"div",
|
|
4826
4668
|
{
|
|
4827
4669
|
ref: elRef,
|
|
@@ -4837,7 +4679,7 @@ function ItemInteractionLayer({
|
|
|
4837
4679
|
zIndex: getChromeZIndex(state)
|
|
4838
4680
|
},
|
|
4839
4681
|
children: [
|
|
4840
|
-
/* @__PURE__ */ (0,
|
|
4682
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4841
4683
|
"div",
|
|
4842
4684
|
{
|
|
4843
4685
|
"aria-hidden": true,
|
|
@@ -4845,7 +4687,7 @@ function ItemInteractionLayer({
|
|
|
4845
4687
|
style: getChromeStyle(state)
|
|
4846
4688
|
}
|
|
4847
4689
|
),
|
|
4848
|
-
itemDragEnabled && /* @__PURE__ */ (0,
|
|
4690
|
+
itemDragEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4849
4691
|
"div",
|
|
4850
4692
|
{
|
|
4851
4693
|
"data-ohw-item-drag-surface": "",
|
|
@@ -4861,14 +4703,14 @@ function ItemInteractionLayer({
|
|
|
4861
4703
|
}
|
|
4862
4704
|
}
|
|
4863
4705
|
),
|
|
4864
|
-
showDragHandle && /* @__PURE__ */ (0,
|
|
4706
|
+
showDragHandle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4865
4707
|
"div",
|
|
4866
4708
|
{
|
|
4867
4709
|
"data-ohw-drag-handle-container": "",
|
|
4868
4710
|
className: "pointer-events-auto absolute left-0 top-1/2 z-10 -translate-x-[calc(100%+7px)] -translate-y-1/2",
|
|
4869
4711
|
style: isDragging ? { opacity: 0 } : void 0,
|
|
4870
4712
|
"aria-hidden": isDragging || void 0,
|
|
4871
|
-
children: /* @__PURE__ */ (0,
|
|
4713
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4872
4714
|
DragHandle,
|
|
4873
4715
|
{
|
|
4874
4716
|
draggable: !dragDisabled,
|
|
@@ -4898,8 +4740,8 @@ function ItemInteractionLayer({
|
|
|
4898
4740
|
)
|
|
4899
4741
|
}
|
|
4900
4742
|
),
|
|
4901
|
-
showToolbar && state === "active-top" && /* @__PURE__ */ (0,
|
|
4902
|
-
showToolbar && state === "active-bottom" && /* @__PURE__ */ (0,
|
|
4743
|
+
showToolbar && state === "active-top" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ClampedToolbarSlot, { placement: "top", children: toolbar }),
|
|
4744
|
+
showToolbar && state === "active-bottom" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ClampedToolbarSlot, { placement: "bottom", children: toolbar })
|
|
4903
4745
|
]
|
|
4904
4746
|
}
|
|
4905
4747
|
);
|
|
@@ -4911,8 +4753,8 @@ var import_lucide_react3 = require("lucide-react");
|
|
|
4911
4753
|
|
|
4912
4754
|
// src/ui/button.tsx
|
|
4913
4755
|
var React6 = __toESM(require("react"), 1);
|
|
4914
|
-
var
|
|
4915
|
-
var
|
|
4756
|
+
var import_radix_ui4 = require("radix-ui");
|
|
4757
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
4916
4758
|
var buttonVariants = cva(
|
|
4917
4759
|
"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",
|
|
4918
4760
|
{
|
|
@@ -4935,8 +4777,8 @@ var buttonVariants = cva(
|
|
|
4935
4777
|
);
|
|
4936
4778
|
var Button = React6.forwardRef(
|
|
4937
4779
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
4938
|
-
const Comp = asChild ?
|
|
4939
|
-
return /* @__PURE__ */ (0,
|
|
4780
|
+
const Comp = asChild ? import_radix_ui4.Slot.Root : "button";
|
|
4781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4940
4782
|
Comp,
|
|
4941
4783
|
{
|
|
4942
4784
|
ref,
|
|
@@ -4950,7 +4792,7 @@ var Button = React6.forwardRef(
|
|
|
4950
4792
|
Button.displayName = "Button";
|
|
4951
4793
|
|
|
4952
4794
|
// src/ui/MediaOverlay.tsx
|
|
4953
|
-
var
|
|
4795
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
4954
4796
|
var MEDIA_UPLOAD_FADE_MS = 300;
|
|
4955
4797
|
var VIDEO_SETTINGS_BAR_INSET = 8;
|
|
4956
4798
|
var OVERLAY_BUTTON_STYLE = {
|
|
@@ -5008,7 +4850,7 @@ function MediaOverlay({
|
|
|
5008
4850
|
return () => anim.cancel();
|
|
5009
4851
|
}, [isUploading, fadingOut, onFadeOutComplete, hover.key]);
|
|
5010
4852
|
if (isUploading) {
|
|
5011
|
-
return /* @__PURE__ */ (0,
|
|
4853
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
5012
4854
|
"div",
|
|
5013
4855
|
{
|
|
5014
4856
|
ref: skeletonRef,
|
|
@@ -5017,11 +4859,11 @@ function MediaOverlay({
|
|
|
5017
4859
|
"data-ohw-media-skeleton": "",
|
|
5018
4860
|
"aria-hidden": true,
|
|
5019
4861
|
style: { ...box, pointerEvents: "none" },
|
|
5020
|
-
children: /* @__PURE__ */ (0,
|
|
4862
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: SKELETON_CSS })
|
|
5021
4863
|
}
|
|
5022
4864
|
);
|
|
5023
4865
|
}
|
|
5024
|
-
const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0,
|
|
4866
|
+
const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
5025
4867
|
"div",
|
|
5026
4868
|
{
|
|
5027
4869
|
"data-ohw-bridge": "",
|
|
@@ -5037,7 +4879,7 @@ function MediaOverlay({
|
|
|
5037
4879
|
},
|
|
5038
4880
|
onClick: (e) => e.stopPropagation(),
|
|
5039
4881
|
children: [
|
|
5040
|
-
/* @__PURE__ */ (0,
|
|
4882
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
5041
4883
|
Button,
|
|
5042
4884
|
{
|
|
5043
4885
|
"data-ohw-media-overlay": "",
|
|
@@ -5052,10 +4894,10 @@ function MediaOverlay({
|
|
|
5052
4894
|
e.stopPropagation();
|
|
5053
4895
|
onVideoSettingsChange?.(hover.key, { autoplay: !autoplay });
|
|
5054
4896
|
},
|
|
5055
|
-
children: autoplay ? /* @__PURE__ */ (0,
|
|
4897
|
+
children: autoplay ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Pause, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Play, { size: 14 })
|
|
5056
4898
|
}
|
|
5057
4899
|
),
|
|
5058
|
-
/* @__PURE__ */ (0,
|
|
4900
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
5059
4901
|
Button,
|
|
5060
4902
|
{
|
|
5061
4903
|
"data-ohw-media-overlay": "",
|
|
@@ -5070,15 +4912,15 @@ function MediaOverlay({
|
|
|
5070
4912
|
e.stopPropagation();
|
|
5071
4913
|
onVideoSettingsChange?.(hover.key, { muted: !muted });
|
|
5072
4914
|
},
|
|
5073
|
-
children: muted ? /* @__PURE__ */ (0,
|
|
4915
|
+
children: muted ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.VolumeX, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Volume2, { size: 14 })
|
|
5074
4916
|
}
|
|
5075
4917
|
)
|
|
5076
4918
|
]
|
|
5077
4919
|
}
|
|
5078
4920
|
) : null;
|
|
5079
|
-
return /* @__PURE__ */ (0,
|
|
4921
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
5080
4922
|
settingsBar,
|
|
5081
|
-
/* @__PURE__ */ (0,
|
|
4923
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
5082
4924
|
"div",
|
|
5083
4925
|
{
|
|
5084
4926
|
"data-ohw-bridge": "",
|
|
@@ -5095,25 +4937,21 @@ function MediaOverlay({
|
|
|
5095
4937
|
background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
|
|
5096
4938
|
},
|
|
5097
4939
|
onClick: () => onReplace(hover.key),
|
|
5098
|
-
children: /* @__PURE__ */ (0,
|
|
4940
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
5099
4941
|
Button,
|
|
5100
4942
|
{
|
|
5101
4943
|
"data-ohw-media-overlay": "",
|
|
5102
4944
|
variant: "outline",
|
|
5103
4945
|
size: "sm",
|
|
5104
4946
|
className: "gap-1.5 cursor-pointer hover:bg-background",
|
|
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
|
-
},
|
|
4947
|
+
style: OVERLAY_BUTTON_STYLE,
|
|
5110
4948
|
onMouseDown: (e) => e.preventDefault(),
|
|
5111
4949
|
onClick: (e) => {
|
|
5112
4950
|
e.stopPropagation();
|
|
5113
4951
|
onReplace(hover.key);
|
|
5114
4952
|
},
|
|
5115
4953
|
children: [
|
|
5116
|
-
isVideo ? /* @__PURE__ */ (0,
|
|
4954
|
+
isVideo ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.ImageIcon, { size: 14 }),
|
|
5117
4955
|
isVideo ? "Replace video" : "Replace image"
|
|
5118
4956
|
]
|
|
5119
4957
|
}
|
|
@@ -5125,7 +4963,7 @@ function MediaOverlay({
|
|
|
5125
4963
|
|
|
5126
4964
|
// src/ui/CarouselOverlay.tsx
|
|
5127
4965
|
var import_lucide_react4 = require("lucide-react");
|
|
5128
|
-
var
|
|
4966
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
5129
4967
|
var OVERLAY_BUTTON_STYLE2 = {
|
|
5130
4968
|
pointerEvents: "auto",
|
|
5131
4969
|
fontFamily: "Inter, sans-serif",
|
|
@@ -5137,7 +4975,7 @@ function CarouselOverlay({
|
|
|
5137
4975
|
onEdit
|
|
5138
4976
|
}) {
|
|
5139
4977
|
const { rect } = hover;
|
|
5140
|
-
return /* @__PURE__ */ (0,
|
|
4978
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
5141
4979
|
"div",
|
|
5142
4980
|
{
|
|
5143
4981
|
"data-ohw-bridge": "",
|
|
@@ -5155,7 +4993,7 @@ function CarouselOverlay({
|
|
|
5155
4993
|
background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
|
|
5156
4994
|
},
|
|
5157
4995
|
onClick: () => onEdit(hover.key),
|
|
5158
|
-
children: /* @__PURE__ */ (0,
|
|
4996
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
5159
4997
|
Button,
|
|
5160
4998
|
{
|
|
5161
4999
|
"data-ohw-carousel-overlay": "",
|
|
@@ -5169,7 +5007,7 @@ function CarouselOverlay({
|
|
|
5169
5007
|
onEdit(hover.key);
|
|
5170
5008
|
},
|
|
5171
5009
|
children: [
|
|
5172
|
-
/* @__PURE__ */ (0,
|
|
5010
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.GalleryHorizontal, { size: 14 }),
|
|
5173
5011
|
"Edit gallery"
|
|
5174
5012
|
]
|
|
5175
5013
|
}
|
|
@@ -5458,29 +5296,29 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
5458
5296
|
}
|
|
5459
5297
|
|
|
5460
5298
|
// src/ui/link-modal/LinkPopover.tsx
|
|
5461
|
-
var
|
|
5299
|
+
var import_react7 = require("react");
|
|
5462
5300
|
|
|
5463
5301
|
// src/ui/dialog.tsx
|
|
5464
5302
|
var React8 = __toESM(require("react"), 1);
|
|
5465
|
-
var
|
|
5303
|
+
var import_radix_ui5 = require("radix-ui");
|
|
5466
5304
|
var import_lucide_react5 = require("lucide-react");
|
|
5467
|
-
var
|
|
5305
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
5468
5306
|
function Dialog2({
|
|
5469
5307
|
...props
|
|
5470
5308
|
}) {
|
|
5471
|
-
return /* @__PURE__ */ (0,
|
|
5309
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui5.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
5472
5310
|
}
|
|
5473
5311
|
function DialogPortal({
|
|
5474
5312
|
...props
|
|
5475
5313
|
}) {
|
|
5476
|
-
return /* @__PURE__ */ (0,
|
|
5314
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui5.Dialog.Portal, { ...props });
|
|
5477
5315
|
}
|
|
5478
5316
|
function DialogOverlay({
|
|
5479
5317
|
className,
|
|
5480
5318
|
...props
|
|
5481
5319
|
}) {
|
|
5482
|
-
return /* @__PURE__ */ (0,
|
|
5483
|
-
|
|
5320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5321
|
+
import_radix_ui5.Dialog.Overlay,
|
|
5484
5322
|
{
|
|
5485
5323
|
"data-slot": "dialog-overlay",
|
|
5486
5324
|
"data-ohw-link-modal-root": "",
|
|
@@ -5492,10 +5330,10 @@ function DialogOverlay({
|
|
|
5492
5330
|
var DialogContent = React8.forwardRef(
|
|
5493
5331
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
5494
5332
|
const positionMode = container ? "absolute" : "fixed";
|
|
5495
|
-
return /* @__PURE__ */ (0,
|
|
5496
|
-
/* @__PURE__ */ (0,
|
|
5497
|
-
/* @__PURE__ */ (0,
|
|
5498
|
-
|
|
5333
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
5334
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
5335
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
5336
|
+
import_radix_ui5.Dialog.Content,
|
|
5499
5337
|
{
|
|
5500
5338
|
ref,
|
|
5501
5339
|
"data-slot": "dialog-content",
|
|
@@ -5510,13 +5348,13 @@ var DialogContent = React8.forwardRef(
|
|
|
5510
5348
|
...props,
|
|
5511
5349
|
children: [
|
|
5512
5350
|
children,
|
|
5513
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
5514
|
-
|
|
5351
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5352
|
+
import_radix_ui5.Dialog.Close,
|
|
5515
5353
|
{
|
|
5516
5354
|
type: "button",
|
|
5517
5355
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
5518
5356
|
"aria-label": "Close",
|
|
5519
|
-
children: /* @__PURE__ */ (0,
|
|
5357
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.X, { size: 16, "aria-hidden": true })
|
|
5520
5358
|
}
|
|
5521
5359
|
) : null
|
|
5522
5360
|
]
|
|
@@ -5525,18 +5363,18 @@ var DialogContent = React8.forwardRef(
|
|
|
5525
5363
|
] });
|
|
5526
5364
|
}
|
|
5527
5365
|
);
|
|
5528
|
-
DialogContent.displayName =
|
|
5366
|
+
DialogContent.displayName = import_radix_ui5.Dialog.Content.displayName;
|
|
5529
5367
|
function DialogHeader({
|
|
5530
5368
|
className,
|
|
5531
5369
|
...props
|
|
5532
5370
|
}) {
|
|
5533
|
-
return /* @__PURE__ */ (0,
|
|
5371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
5534
5372
|
}
|
|
5535
5373
|
function DialogFooter({
|
|
5536
5374
|
className,
|
|
5537
5375
|
...props
|
|
5538
5376
|
}) {
|
|
5539
|
-
return /* @__PURE__ */ (0,
|
|
5377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5540
5378
|
"div",
|
|
5541
5379
|
{
|
|
5542
5380
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -5544,8 +5382,8 @@ function DialogFooter({
|
|
|
5544
5382
|
}
|
|
5545
5383
|
);
|
|
5546
5384
|
}
|
|
5547
|
-
var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5548
|
-
|
|
5385
|
+
var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5386
|
+
import_radix_ui5.Dialog.Title,
|
|
5549
5387
|
{
|
|
5550
5388
|
ref,
|
|
5551
5389
|
className: cn(
|
|
@@ -5555,36 +5393,36 @@ var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
5555
5393
|
...props
|
|
5556
5394
|
}
|
|
5557
5395
|
));
|
|
5558
|
-
DialogTitle.displayName =
|
|
5559
|
-
var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5560
|
-
|
|
5396
|
+
DialogTitle.displayName = import_radix_ui5.Dialog.Title.displayName;
|
|
5397
|
+
var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5398
|
+
import_radix_ui5.Dialog.Description,
|
|
5561
5399
|
{
|
|
5562
5400
|
ref,
|
|
5563
5401
|
className: cn("text-sm text-muted-foreground", className),
|
|
5564
5402
|
...props
|
|
5565
5403
|
}
|
|
5566
5404
|
));
|
|
5567
|
-
DialogDescription.displayName =
|
|
5568
|
-
var DialogClose =
|
|
5405
|
+
DialogDescription.displayName = import_radix_ui5.Dialog.Description.displayName;
|
|
5406
|
+
var DialogClose = import_radix_ui5.Dialog.Close;
|
|
5569
5407
|
|
|
5570
5408
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
5571
5409
|
var import_lucide_react9 = require("lucide-react");
|
|
5572
5410
|
|
|
5573
5411
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
5574
5412
|
var import_lucide_react6 = require("lucide-react");
|
|
5575
|
-
var
|
|
5413
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
5576
5414
|
function DestinationBreadcrumb({
|
|
5577
5415
|
pageTitle,
|
|
5578
5416
|
sectionLabel
|
|
5579
5417
|
}) {
|
|
5580
|
-
return /* @__PURE__ */ (0,
|
|
5581
|
-
/* @__PURE__ */ (0,
|
|
5582
|
-
/* @__PURE__ */ (0,
|
|
5583
|
-
/* @__PURE__ */ (0,
|
|
5584
|
-
/* @__PURE__ */ (0,
|
|
5585
|
-
/* @__PURE__ */ (0,
|
|
5418
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
5419
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
5420
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
5421
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
5422
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
5423
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
5586
5424
|
] }),
|
|
5587
|
-
/* @__PURE__ */ (0,
|
|
5425
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5588
5426
|
import_lucide_react6.ArrowRight,
|
|
5589
5427
|
{
|
|
5590
5428
|
size: 16,
|
|
@@ -5592,8 +5430,8 @@ function DestinationBreadcrumb({
|
|
|
5592
5430
|
"aria-hidden": true
|
|
5593
5431
|
}
|
|
5594
5432
|
),
|
|
5595
|
-
/* @__PURE__ */ (0,
|
|
5596
|
-
/* @__PURE__ */ (0,
|
|
5433
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
5434
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5597
5435
|
import_lucide_react6.GalleryVertical,
|
|
5598
5436
|
{
|
|
5599
5437
|
size: 16,
|
|
@@ -5601,7 +5439,7 @@ function DestinationBreadcrumb({
|
|
|
5601
5439
|
"aria-hidden": true
|
|
5602
5440
|
}
|
|
5603
5441
|
),
|
|
5604
|
-
/* @__PURE__ */ (0,
|
|
5442
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
5605
5443
|
] })
|
|
5606
5444
|
] })
|
|
5607
5445
|
] });
|
|
@@ -5609,22 +5447,22 @@ function DestinationBreadcrumb({
|
|
|
5609
5447
|
|
|
5610
5448
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
5611
5449
|
var import_lucide_react7 = require("lucide-react");
|
|
5612
|
-
var
|
|
5450
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
5613
5451
|
function SectionTreeItem({
|
|
5614
5452
|
section,
|
|
5615
5453
|
onSelect,
|
|
5616
5454
|
selected
|
|
5617
5455
|
}) {
|
|
5618
5456
|
const interactive = Boolean(onSelect);
|
|
5619
|
-
return /* @__PURE__ */ (0,
|
|
5620
|
-
/* @__PURE__ */ (0,
|
|
5457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
5458
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5621
5459
|
"div",
|
|
5622
5460
|
{
|
|
5623
5461
|
className: "mr-[-1px] h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
5624
5462
|
"aria-hidden": true
|
|
5625
5463
|
}
|
|
5626
5464
|
),
|
|
5627
|
-
/* @__PURE__ */ (0,
|
|
5465
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
5628
5466
|
"div",
|
|
5629
5467
|
{
|
|
5630
5468
|
role: interactive ? "button" : void 0,
|
|
@@ -5642,7 +5480,7 @@ function SectionTreeItem({
|
|
|
5642
5480
|
interactive && selected && "border-primary"
|
|
5643
5481
|
),
|
|
5644
5482
|
children: [
|
|
5645
|
-
/* @__PURE__ */ (0,
|
|
5483
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5646
5484
|
import_lucide_react7.GalleryVertical,
|
|
5647
5485
|
{
|
|
5648
5486
|
size: 16,
|
|
@@ -5650,7 +5488,7 @@ function SectionTreeItem({
|
|
|
5650
5488
|
"aria-hidden": true
|
|
5651
5489
|
}
|
|
5652
5490
|
),
|
|
5653
|
-
/* @__PURE__ */ (0,
|
|
5491
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
5654
5492
|
]
|
|
5655
5493
|
}
|
|
5656
5494
|
)
|
|
@@ -5658,14 +5496,14 @@ function SectionTreeItem({
|
|
|
5658
5496
|
}
|
|
5659
5497
|
|
|
5660
5498
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
5661
|
-
var
|
|
5499
|
+
var import_react4 = require("react");
|
|
5662
5500
|
|
|
5663
5501
|
// src/ui/input.tsx
|
|
5664
5502
|
var React9 = __toESM(require("react"), 1);
|
|
5665
|
-
var
|
|
5503
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
5666
5504
|
var Input = React9.forwardRef(
|
|
5667
5505
|
({ className, type, ...props }, ref) => {
|
|
5668
|
-
return /* @__PURE__ */ (0,
|
|
5506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5669
5507
|
"input",
|
|
5670
5508
|
{
|
|
5671
5509
|
type,
|
|
@@ -5683,11 +5521,11 @@ var Input = React9.forwardRef(
|
|
|
5683
5521
|
Input.displayName = "Input";
|
|
5684
5522
|
|
|
5685
5523
|
// src/ui/label.tsx
|
|
5686
|
-
var
|
|
5687
|
-
var
|
|
5524
|
+
var import_radix_ui6 = require("radix-ui");
|
|
5525
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
5688
5526
|
function Label({ className, ...props }) {
|
|
5689
|
-
return /* @__PURE__ */ (0,
|
|
5690
|
-
|
|
5527
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
5528
|
+
import_radix_ui6.Label.Root,
|
|
5691
5529
|
{
|
|
5692
5530
|
"data-slot": "label",
|
|
5693
5531
|
className: cn("text-sm font-medium leading-5 text-foreground", className),
|
|
@@ -5698,11 +5536,11 @@ function Label({ className, ...props }) {
|
|
|
5698
5536
|
|
|
5699
5537
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
5700
5538
|
var import_lucide_react8 = require("lucide-react");
|
|
5701
|
-
var
|
|
5539
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
5702
5540
|
function FieldChevron({
|
|
5703
5541
|
onClick
|
|
5704
5542
|
}) {
|
|
5705
|
-
return /* @__PURE__ */ (0,
|
|
5543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
5706
5544
|
"button",
|
|
5707
5545
|
{
|
|
5708
5546
|
type: "button",
|
|
@@ -5710,7 +5548,7 @@ function FieldChevron({
|
|
|
5710
5548
|
onClick,
|
|
5711
5549
|
"aria-label": "Open page list",
|
|
5712
5550
|
tabIndex: -1,
|
|
5713
|
-
children: /* @__PURE__ */ (0,
|
|
5551
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ChevronDown, { size: 16 })
|
|
5714
5552
|
}
|
|
5715
5553
|
);
|
|
5716
5554
|
}
|
|
@@ -5726,11 +5564,11 @@ function UrlOrPageInput({
|
|
|
5726
5564
|
readOnly = false,
|
|
5727
5565
|
urlError
|
|
5728
5566
|
}) {
|
|
5729
|
-
const inputId = (0,
|
|
5730
|
-
const inputRef = (0,
|
|
5731
|
-
const rootRef = (0,
|
|
5732
|
-
const [isFocused, setIsFocused] = (0,
|
|
5733
|
-
(0,
|
|
5567
|
+
const inputId = (0, import_react4.useId)();
|
|
5568
|
+
const inputRef = (0, import_react4.useRef)(null);
|
|
5569
|
+
const rootRef = (0, import_react4.useRef)(null);
|
|
5570
|
+
const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
|
|
5571
|
+
(0, import_react4.useEffect)(() => {
|
|
5734
5572
|
if (!dropdownOpen) return;
|
|
5735
5573
|
const isOutside = (e) => {
|
|
5736
5574
|
const root = rootRef.current;
|
|
@@ -5771,11 +5609,11 @@ function UrlOrPageInput({
|
|
|
5771
5609
|
"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]",
|
|
5772
5610
|
urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
|
|
5773
5611
|
);
|
|
5774
|
-
return /* @__PURE__ */ (0,
|
|
5775
|
-
/* @__PURE__ */ (0,
|
|
5776
|
-
/* @__PURE__ */ (0,
|
|
5777
|
-
/* @__PURE__ */ (0,
|
|
5778
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
5612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
5613
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
5614
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
5615
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
5616
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
5779
5617
|
import_lucide_react8.File,
|
|
5780
5618
|
{
|
|
5781
5619
|
size: 16,
|
|
@@ -5783,7 +5621,7 @@ function UrlOrPageInput({
|
|
|
5783
5621
|
"aria-hidden": true
|
|
5784
5622
|
}
|
|
5785
5623
|
) }) : null,
|
|
5786
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
5624
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
5787
5625
|
Input,
|
|
5788
5626
|
{
|
|
5789
5627
|
ref: inputRef,
|
|
@@ -5809,7 +5647,7 @@ function UrlOrPageInput({
|
|
|
5809
5647
|
)
|
|
5810
5648
|
}
|
|
5811
5649
|
),
|
|
5812
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
5650
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
5813
5651
|
"button",
|
|
5814
5652
|
{
|
|
5815
5653
|
type: "button",
|
|
@@ -5817,26 +5655,26 @@ function UrlOrPageInput({
|
|
|
5817
5655
|
onMouseDown: clearSelection,
|
|
5818
5656
|
"aria-label": "Clear selected page",
|
|
5819
5657
|
tabIndex: -1,
|
|
5820
|
-
children: /* @__PURE__ */ (0,
|
|
5658
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.X, { size: 16, "aria-hidden": true })
|
|
5821
5659
|
}
|
|
5822
5660
|
) : null,
|
|
5823
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
5661
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
5824
5662
|
] }),
|
|
5825
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
5663
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
5826
5664
|
"div",
|
|
5827
5665
|
{
|
|
5828
5666
|
"data-ohw-link-page-dropdown": "",
|
|
5829
5667
|
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",
|
|
5830
5668
|
onMouseDown: (e) => e.preventDefault(),
|
|
5831
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
5669
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
5832
5670
|
"button",
|
|
5833
5671
|
{
|
|
5834
5672
|
type: "button",
|
|
5835
5673
|
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",
|
|
5836
5674
|
onClick: () => onPageSelect(page),
|
|
5837
5675
|
children: [
|
|
5838
|
-
/* @__PURE__ */ (0,
|
|
5839
|
-
/* @__PURE__ */ (0,
|
|
5676
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
5677
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate", children: page.title })
|
|
5840
5678
|
]
|
|
5841
5679
|
},
|
|
5842
5680
|
page.path
|
|
@@ -5844,34 +5682,34 @@ function UrlOrPageInput({
|
|
|
5844
5682
|
}
|
|
5845
5683
|
) : null
|
|
5846
5684
|
] }),
|
|
5847
|
-
urlError ? /* @__PURE__ */ (0,
|
|
5685
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
5848
5686
|
] });
|
|
5849
5687
|
}
|
|
5850
5688
|
|
|
5851
5689
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
5852
|
-
var
|
|
5690
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
5853
5691
|
function LinkEditorPanel({ state, onClose }) {
|
|
5854
5692
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
5855
|
-
return /* @__PURE__ */ (0,
|
|
5856
|
-
/* @__PURE__ */ (0,
|
|
5693
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
5694
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5857
5695
|
"button",
|
|
5858
5696
|
{
|
|
5859
5697
|
type: "button",
|
|
5860
5698
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
5861
5699
|
"aria-label": "Close",
|
|
5862
5700
|
onClick: onClose,
|
|
5863
|
-
children: /* @__PURE__ */ (0,
|
|
5701
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.X, { size: 16, "aria-hidden": true })
|
|
5864
5702
|
}
|
|
5865
5703
|
) }),
|
|
5866
|
-
/* @__PURE__ */ (0,
|
|
5867
|
-
/* @__PURE__ */ (0,
|
|
5868
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
5704
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
5705
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
5706
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5869
5707
|
DestinationBreadcrumb,
|
|
5870
5708
|
{
|
|
5871
5709
|
pageTitle: state.selectedPage.title,
|
|
5872
5710
|
sectionLabel: state.selectedSection.label
|
|
5873
5711
|
}
|
|
5874
|
-
) : /* @__PURE__ */ (0,
|
|
5712
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5875
5713
|
UrlOrPageInput,
|
|
5876
5714
|
{
|
|
5877
5715
|
value: state.searchValue,
|
|
@@ -5884,8 +5722,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5884
5722
|
urlError: state.urlError
|
|
5885
5723
|
}
|
|
5886
5724
|
),
|
|
5887
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
5888
|
-
/* @__PURE__ */ (0,
|
|
5725
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
5726
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5889
5727
|
Button,
|
|
5890
5728
|
{
|
|
5891
5729
|
type: "button",
|
|
@@ -5896,15 +5734,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5896
5734
|
children: "Choose a section"
|
|
5897
5735
|
}
|
|
5898
5736
|
),
|
|
5899
|
-
/* @__PURE__ */ (0,
|
|
5900
|
-
/* @__PURE__ */ (0,
|
|
5901
|
-
/* @__PURE__ */ (0,
|
|
5737
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
5738
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
5739
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
5902
5740
|
] })
|
|
5903
5741
|
] }) : null,
|
|
5904
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
5742
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
5905
5743
|
] }),
|
|
5906
|
-
/* @__PURE__ */ (0,
|
|
5907
|
-
/* @__PURE__ */ (0,
|
|
5744
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
5745
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5908
5746
|
Button,
|
|
5909
5747
|
{
|
|
5910
5748
|
type: "button",
|
|
@@ -5919,7 +5757,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5919
5757
|
children: state.secondaryLabel
|
|
5920
5758
|
}
|
|
5921
5759
|
),
|
|
5922
|
-
/* @__PURE__ */ (0,
|
|
5760
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5923
5761
|
Button,
|
|
5924
5762
|
{
|
|
5925
5763
|
type: "button",
|
|
@@ -5938,11 +5776,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5938
5776
|
}
|
|
5939
5777
|
|
|
5940
5778
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
5941
|
-
var
|
|
5779
|
+
var import_react5 = require("react");
|
|
5942
5780
|
var import_react_dom = require("react-dom");
|
|
5943
5781
|
var import_lucide_react10 = require("lucide-react");
|
|
5944
5782
|
var import_navigation = require("next/navigation");
|
|
5945
|
-
var
|
|
5783
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
5946
5784
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
5947
5785
|
function rectsEqual(a, b) {
|
|
5948
5786
|
if (a.size !== b.size) return false;
|
|
@@ -5975,12 +5813,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
5975
5813
|
return null;
|
|
5976
5814
|
}
|
|
5977
5815
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
5978
|
-
const [rects, setRects] = (0,
|
|
5979
|
-
const sectionIds = (0,
|
|
5816
|
+
const [rects, setRects] = (0, import_react5.useState)(/* @__PURE__ */ new Map());
|
|
5817
|
+
const sectionIds = (0, import_react5.useMemo)(
|
|
5980
5818
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
5981
5819
|
[sectionIdsKey]
|
|
5982
5820
|
);
|
|
5983
|
-
(0,
|
|
5821
|
+
(0, import_react5.useEffect)(() => {
|
|
5984
5822
|
if (!enabled || sectionIds.length === 0) {
|
|
5985
5823
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
5986
5824
|
return;
|
|
@@ -6021,13 +5859,13 @@ function SectionPickerOverlay({
|
|
|
6021
5859
|
}) {
|
|
6022
5860
|
const router = (0, import_navigation.useRouter)();
|
|
6023
5861
|
const pathname = (0, import_navigation.usePathname)();
|
|
6024
|
-
const [selectedId, setSelectedId] = (0,
|
|
6025
|
-
const [hoveredId, setHoveredId] = (0,
|
|
6026
|
-
const pointerRef = (0,
|
|
6027
|
-
const pointerScreenRef = (0,
|
|
6028
|
-
const iframeOffsetTopRef = (0,
|
|
6029
|
-
const sectionIdsRef = (0,
|
|
6030
|
-
const [chromeClip, setChromeClip] = (0,
|
|
5862
|
+
const [selectedId, setSelectedId] = (0, import_react5.useState)(null);
|
|
5863
|
+
const [hoveredId, setHoveredId] = (0, import_react5.useState)(null);
|
|
5864
|
+
const pointerRef = (0, import_react5.useRef)(null);
|
|
5865
|
+
const pointerScreenRef = (0, import_react5.useRef)(null);
|
|
5866
|
+
const iframeOffsetTopRef = (0, import_react5.useRef)(null);
|
|
5867
|
+
const sectionIdsRef = (0, import_react5.useRef)([]);
|
|
5868
|
+
const [chromeClip, setChromeClip] = (0, import_react5.useState)(
|
|
6031
5869
|
() => ({
|
|
6032
5870
|
top: 0,
|
|
6033
5871
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -6035,12 +5873,12 @@ function SectionPickerOverlay({
|
|
|
6035
5873
|
);
|
|
6036
5874
|
const normalizedTarget = normalizePath(pagePath);
|
|
6037
5875
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
6038
|
-
(0,
|
|
5876
|
+
(0, import_react5.useEffect)(() => {
|
|
6039
5877
|
if (isOnTargetPage) return;
|
|
6040
5878
|
const search = readPreservedSearch();
|
|
6041
5879
|
router.push(`${normalizedTarget}${search}`);
|
|
6042
5880
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
6043
|
-
(0,
|
|
5881
|
+
(0, import_react5.useEffect)(() => {
|
|
6044
5882
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
6045
5883
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
6046
5884
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -6052,24 +5890,24 @@ function SectionPickerOverlay({
|
|
|
6052
5890
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
6053
5891
|
};
|
|
6054
5892
|
}, []);
|
|
6055
|
-
const liveSections = (0,
|
|
5893
|
+
const liveSections = (0, import_react5.useMemo)(() => {
|
|
6056
5894
|
if (!isOnTargetPage) return sections;
|
|
6057
5895
|
const live = collectSectionsFromDom();
|
|
6058
5896
|
if (live.length === 0) return sections;
|
|
6059
5897
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
6060
5898
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
6061
5899
|
}, [isOnTargetPage, sections, pathname]);
|
|
6062
|
-
const sectionIdsKey = (0,
|
|
5900
|
+
const sectionIdsKey = (0, import_react5.useMemo)(
|
|
6063
5901
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
6064
5902
|
[liveSections]
|
|
6065
5903
|
);
|
|
6066
|
-
const sectionIds = (0,
|
|
5904
|
+
const sectionIds = (0, import_react5.useMemo)(
|
|
6067
5905
|
() => liveSections.map((s) => s.id),
|
|
6068
5906
|
[liveSections]
|
|
6069
5907
|
);
|
|
6070
5908
|
sectionIdsRef.current = sectionIds;
|
|
6071
5909
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
6072
|
-
const applyHoverAt = (0,
|
|
5910
|
+
const applyHoverAt = (0, import_react5.useCallback)(
|
|
6073
5911
|
(x, y, liveRects) => {
|
|
6074
5912
|
const ids = sectionIdsRef.current;
|
|
6075
5913
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -6078,7 +5916,7 @@ function SectionPickerOverlay({
|
|
|
6078
5916
|
},
|
|
6079
5917
|
[]
|
|
6080
5918
|
);
|
|
6081
|
-
(0,
|
|
5919
|
+
(0, import_react5.useEffect)(() => {
|
|
6082
5920
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
6083
5921
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
6084
5922
|
const bottom = Math.min(
|
|
@@ -6120,12 +5958,12 @@ function SectionPickerOverlay({
|
|
|
6120
5958
|
window.removeEventListener("resize", onResize);
|
|
6121
5959
|
};
|
|
6122
5960
|
}, [applyHoverAt]);
|
|
6123
|
-
(0,
|
|
5961
|
+
(0, import_react5.useEffect)(() => {
|
|
6124
5962
|
const ptr = pointerRef.current;
|
|
6125
5963
|
if (!ptr) return;
|
|
6126
5964
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
6127
5965
|
}, [rects, applyHoverAt]);
|
|
6128
|
-
(0,
|
|
5966
|
+
(0, import_react5.useEffect)(() => {
|
|
6129
5967
|
const rememberPointer = (clientX, clientY) => {
|
|
6130
5968
|
pointerRef.current = { x: clientX, y: clientY };
|
|
6131
5969
|
const top = iframeOffsetTopRef.current;
|
|
@@ -6149,7 +5987,7 @@ function SectionPickerOverlay({
|
|
|
6149
5987
|
window.removeEventListener("message", onPointerSync);
|
|
6150
5988
|
};
|
|
6151
5989
|
}, [rects, applyHoverAt]);
|
|
6152
|
-
const handleSelect = (0,
|
|
5990
|
+
const handleSelect = (0, import_react5.useCallback)(
|
|
6153
5991
|
(section) => {
|
|
6154
5992
|
if (selectedId) return;
|
|
6155
5993
|
setSelectedId(section.id);
|
|
@@ -6157,7 +5995,7 @@ function SectionPickerOverlay({
|
|
|
6157
5995
|
},
|
|
6158
5996
|
[selectedId, onSelect]
|
|
6159
5997
|
);
|
|
6160
|
-
(0,
|
|
5998
|
+
(0, import_react5.useEffect)(() => {
|
|
6161
5999
|
const onKeyDown = (e) => {
|
|
6162
6000
|
if (e.key === "Escape") {
|
|
6163
6001
|
e.preventDefault();
|
|
@@ -6171,7 +6009,7 @@ function SectionPickerOverlay({
|
|
|
6171
6009
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
6172
6010
|
if (!portalRoot) return null;
|
|
6173
6011
|
return (0, import_react_dom.createPortal)(
|
|
6174
|
-
/* @__PURE__ */ (0,
|
|
6012
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
6175
6013
|
"div",
|
|
6176
6014
|
{
|
|
6177
6015
|
"data-ohw-section-picker": "",
|
|
@@ -6181,12 +6019,12 @@ function SectionPickerOverlay({
|
|
|
6181
6019
|
role: "dialog",
|
|
6182
6020
|
"aria-label": "Choose a section",
|
|
6183
6021
|
children: [
|
|
6184
|
-
/* @__PURE__ */ (0,
|
|
6022
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
6185
6023
|
"div",
|
|
6186
6024
|
{
|
|
6187
6025
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
6188
6026
|
style: { top: chromeClip.top + 20 },
|
|
6189
|
-
children: /* @__PURE__ */ (0,
|
|
6027
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
6190
6028
|
Button,
|
|
6191
6029
|
{
|
|
6192
6030
|
type: "button",
|
|
@@ -6195,14 +6033,14 @@ function SectionPickerOverlay({
|
|
|
6195
6033
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
6196
6034
|
onClick: onBack,
|
|
6197
6035
|
children: [
|
|
6198
|
-
/* @__PURE__ */ (0,
|
|
6036
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
6199
6037
|
"Back"
|
|
6200
6038
|
]
|
|
6201
6039
|
}
|
|
6202
6040
|
)
|
|
6203
6041
|
}
|
|
6204
6042
|
),
|
|
6205
|
-
/* @__PURE__ */ (0,
|
|
6043
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
6206
6044
|
"div",
|
|
6207
6045
|
{
|
|
6208
6046
|
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",
|
|
@@ -6215,7 +6053,7 @@ function SectionPickerOverlay({
|
|
|
6215
6053
|
children: "Click on section to select"
|
|
6216
6054
|
}
|
|
6217
6055
|
),
|
|
6218
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
6056
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
6219
6057
|
"div",
|
|
6220
6058
|
{
|
|
6221
6059
|
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",
|
|
@@ -6223,14 +6061,14 @@ function SectionPickerOverlay({
|
|
|
6223
6061
|
children: "Loading page preview\u2026"
|
|
6224
6062
|
}
|
|
6225
6063
|
) : null,
|
|
6226
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
6064
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
6227
6065
|
isOnTargetPage ? liveSections.map((section) => {
|
|
6228
6066
|
const rect = rects.get(section.id);
|
|
6229
6067
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
6230
6068
|
const isSelected = selectedId === section.id;
|
|
6231
6069
|
const isHovered = hoveredId === section.id;
|
|
6232
6070
|
const isLit = isSelected || isHovered;
|
|
6233
|
-
return /* @__PURE__ */ (0,
|
|
6071
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
6234
6072
|
"button",
|
|
6235
6073
|
{
|
|
6236
6074
|
type: "button",
|
|
@@ -6245,7 +6083,7 @@ function SectionPickerOverlay({
|
|
|
6245
6083
|
"aria-label": `Select section ${section.label}`,
|
|
6246
6084
|
onClick: () => handleSelect(section),
|
|
6247
6085
|
children: [
|
|
6248
|
-
isLit ? /* @__PURE__ */ (0,
|
|
6086
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
6249
6087
|
"span",
|
|
6250
6088
|
{
|
|
6251
6089
|
className: "pointer-events-none absolute",
|
|
@@ -6258,13 +6096,13 @@ function SectionPickerOverlay({
|
|
|
6258
6096
|
"aria-hidden": true
|
|
6259
6097
|
}
|
|
6260
6098
|
) : null,
|
|
6261
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
6099
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
6262
6100
|
"span",
|
|
6263
6101
|
{
|
|
6264
6102
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
6265
6103
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
6266
6104
|
"aria-hidden": true,
|
|
6267
|
-
children: /* @__PURE__ */ (0,
|
|
6105
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Check, { className: "size-5" })
|
|
6268
6106
|
}
|
|
6269
6107
|
) : null
|
|
6270
6108
|
]
|
|
@@ -6280,7 +6118,7 @@ function SectionPickerOverlay({
|
|
|
6280
6118
|
}
|
|
6281
6119
|
|
|
6282
6120
|
// src/ui/link-modal/useLinkModalState.ts
|
|
6283
|
-
var
|
|
6121
|
+
var import_react6 = require("react");
|
|
6284
6122
|
function useLinkModalState({
|
|
6285
6123
|
open,
|
|
6286
6124
|
mode,
|
|
@@ -6292,14 +6130,14 @@ function useLinkModalState({
|
|
|
6292
6130
|
onClose,
|
|
6293
6131
|
onSubmit
|
|
6294
6132
|
}) {
|
|
6295
|
-
const availablePages = (0,
|
|
6296
|
-
const [searchValue, setSearchValue] = (0,
|
|
6297
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
6298
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
6299
|
-
const [step, setStep] = (0,
|
|
6300
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
6301
|
-
const [urlError, setUrlError] = (0,
|
|
6302
|
-
const reset = (0,
|
|
6133
|
+
const availablePages = (0, import_react6.useMemo)(() => pages, [pages]);
|
|
6134
|
+
const [searchValue, setSearchValue] = (0, import_react6.useState)("");
|
|
6135
|
+
const [selectedPage, setSelectedPage] = (0, import_react6.useState)(null);
|
|
6136
|
+
const [selectedSection, setSelectedSection] = (0, import_react6.useState)(null);
|
|
6137
|
+
const [step, setStep] = (0, import_react6.useState)("input");
|
|
6138
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react6.useState)(false);
|
|
6139
|
+
const [urlError, setUrlError] = (0, import_react6.useState)("");
|
|
6140
|
+
const reset = (0, import_react6.useCallback)(() => {
|
|
6303
6141
|
setSearchValue("");
|
|
6304
6142
|
setSelectedPage(null);
|
|
6305
6143
|
setSelectedSection(null);
|
|
@@ -6307,7 +6145,7 @@ function useLinkModalState({
|
|
|
6307
6145
|
setDropdownOpen(false);
|
|
6308
6146
|
setUrlError("");
|
|
6309
6147
|
}, []);
|
|
6310
|
-
(0,
|
|
6148
|
+
(0, import_react6.useEffect)(() => {
|
|
6311
6149
|
if (!open) return;
|
|
6312
6150
|
if (mode === "edit" && initialTarget) {
|
|
6313
6151
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -6323,11 +6161,11 @@ function useLinkModalState({
|
|
|
6323
6161
|
setDropdownOpen(false);
|
|
6324
6162
|
setUrlError("");
|
|
6325
6163
|
}, [open, mode, initialTarget, reset]);
|
|
6326
|
-
const filteredPages = (0,
|
|
6164
|
+
const filteredPages = (0, import_react6.useMemo)(() => {
|
|
6327
6165
|
if (!searchValue.trim()) return availablePages;
|
|
6328
6166
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
6329
6167
|
}, [availablePages, searchValue]);
|
|
6330
|
-
const activeSections = (0,
|
|
6168
|
+
const activeSections = (0, import_react6.useMemo)(() => {
|
|
6331
6169
|
if (!selectedPage) return [];
|
|
6332
6170
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
6333
6171
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -6376,7 +6214,7 @@ function useLinkModalState({
|
|
|
6376
6214
|
reset();
|
|
6377
6215
|
onClose();
|
|
6378
6216
|
};
|
|
6379
|
-
const isValid = (0,
|
|
6217
|
+
const isValid = (0, import_react6.useMemo)(() => {
|
|
6380
6218
|
if (urlError) return false;
|
|
6381
6219
|
if (showBreadcrumb) return true;
|
|
6382
6220
|
if (selectedPage) return true;
|
|
@@ -6444,7 +6282,7 @@ function useLinkModalState({
|
|
|
6444
6282
|
}
|
|
6445
6283
|
|
|
6446
6284
|
// src/ui/link-modal/LinkPopover.tsx
|
|
6447
|
-
var
|
|
6285
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
6448
6286
|
function postToParent(data) {
|
|
6449
6287
|
window.parent?.postMessage(data, "*");
|
|
6450
6288
|
}
|
|
@@ -6473,7 +6311,7 @@ function LinkPopover({
|
|
|
6473
6311
|
onSubmit
|
|
6474
6312
|
});
|
|
6475
6313
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
6476
|
-
(0,
|
|
6314
|
+
(0, import_react7.useEffect)(() => {
|
|
6477
6315
|
if (!open) return;
|
|
6478
6316
|
if (sectionPickerActive) {
|
|
6479
6317
|
postToParent({ type: "ui:unlock" });
|
|
@@ -6540,15 +6378,15 @@ function LinkPopover({
|
|
|
6540
6378
|
);
|
|
6541
6379
|
};
|
|
6542
6380
|
}, [open, sectionPickerActive]);
|
|
6543
|
-
return /* @__PURE__ */ (0,
|
|
6544
|
-
/* @__PURE__ */ (0,
|
|
6381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
6382
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6545
6383
|
Dialog2,
|
|
6546
6384
|
{
|
|
6547
6385
|
open: open && !sectionPickerActive,
|
|
6548
6386
|
onOpenChange: (next) => {
|
|
6549
6387
|
if (!next) onClose?.();
|
|
6550
6388
|
},
|
|
6551
|
-
children: /* @__PURE__ */ (0,
|
|
6389
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6552
6390
|
DialogContent,
|
|
6553
6391
|
{
|
|
6554
6392
|
ref: panelRef,
|
|
@@ -6558,12 +6396,12 @@ function LinkPopover({
|
|
|
6558
6396
|
"data-ohw-bridge": "",
|
|
6559
6397
|
showCloseButton: false,
|
|
6560
6398
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
6561
|
-
children: /* @__PURE__ */ (0,
|
|
6399
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LinkEditorPanel, { state, onClose })
|
|
6562
6400
|
}
|
|
6563
6401
|
)
|
|
6564
6402
|
}
|
|
6565
6403
|
),
|
|
6566
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
6404
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6567
6405
|
SectionPickerOverlay,
|
|
6568
6406
|
{
|
|
6569
6407
|
pagePath: state.selectedPage.path,
|
|
@@ -7102,57 +6940,9 @@ function insertNavbarItem(href, label, afterAnchor = null) {
|
|
|
7102
6940
|
order
|
|
7103
6941
|
};
|
|
7104
6942
|
}
|
|
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
|
-
}
|
|
7152
6943
|
|
|
7153
6944
|
// src/lib/footer-items.ts
|
|
7154
6945
|
var FOOTER_ORDER_KEY = "__ohw_footer_order";
|
|
7155
|
-
var MAX_FOOTER_COLUMNS = 18;
|
|
7156
6946
|
var FOOTER_HREF_RE = /^footer-(\d+)-(\d+)-href$/;
|
|
7157
6947
|
function parseFooterHrefKey(key) {
|
|
7158
6948
|
if (!key) return null;
|
|
@@ -7333,191 +7123,7 @@ function parseFooterOrder(content) {
|
|
|
7333
7123
|
return null;
|
|
7334
7124
|
}
|
|
7335
7125
|
}
|
|
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
|
-
}
|
|
7519
7126
|
function reconcileFooterOrderFromContent(content) {
|
|
7520
|
-
reconcileFooterColumnsFromContent(content);
|
|
7521
7127
|
const order = parseFooterOrder(content);
|
|
7522
7128
|
if (!order?.length) return;
|
|
7523
7129
|
const current = getFooterOrderFromDom();
|
|
@@ -7527,26 +7133,6 @@ function reconcileFooterOrderFromContent(content) {
|
|
|
7527
7133
|
}
|
|
7528
7134
|
applyFooterOrder(order);
|
|
7529
7135
|
}
|
|
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
|
-
}
|
|
7550
7136
|
function isRowLayoutColumn(links) {
|
|
7551
7137
|
if (links.length < 2) return false;
|
|
7552
7138
|
const firstTop = links[0].getBoundingClientRect().top;
|
|
@@ -7701,108 +7287,6 @@ function hitTestColumnDropSlot(clientX, _clientY) {
|
|
|
7701
7287
|
}
|
|
7702
7288
|
return best?.slot ?? null;
|
|
7703
7289
|
}
|
|
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
|
-
}
|
|
7806
7290
|
|
|
7807
7291
|
// src/lib/item-drag-interaction.ts
|
|
7808
7292
|
function disableNativeHrefDrag(el) {
|
|
@@ -8001,7 +7485,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey) {
|
|
|
8001
7485
|
}
|
|
8002
7486
|
|
|
8003
7487
|
// src/useNavItemDrag.ts
|
|
8004
|
-
var
|
|
7488
|
+
var import_react8 = require("react");
|
|
8005
7489
|
function useNavItemDrag({
|
|
8006
7490
|
isEditMode,
|
|
8007
7491
|
editContentRef,
|
|
@@ -8026,11 +7510,11 @@ function useNavItemDrag({
|
|
|
8026
7510
|
isDragHandleDisabled: isDragHandleDisabled2,
|
|
8027
7511
|
isNavbarButton: isNavbarButton3
|
|
8028
7512
|
}) {
|
|
8029
|
-
const navDragRef = (0,
|
|
8030
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
8031
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
8032
|
-
const navPointerDragRef = (0,
|
|
8033
|
-
const clearNavDragVisuals = (0,
|
|
7513
|
+
const navDragRef = (0, import_react8.useRef)(null);
|
|
7514
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react8.useState)([]);
|
|
7515
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react8.useState)(null);
|
|
7516
|
+
const navPointerDragRef = (0, import_react8.useRef)(null);
|
|
7517
|
+
const clearNavDragVisuals = (0, import_react8.useCallback)(() => {
|
|
8034
7518
|
navDragRef.current = null;
|
|
8035
7519
|
setNavDropSlots([]);
|
|
8036
7520
|
setActiveNavDropIndex(null);
|
|
@@ -8039,7 +7523,7 @@ function useNavItemDrag({
|
|
|
8039
7523
|
setIsItemDragging(false);
|
|
8040
7524
|
unlockItemDragInteraction();
|
|
8041
7525
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
8042
|
-
const refreshNavDragVisuals = (0,
|
|
7526
|
+
const refreshNavDragVisuals = (0, import_react8.useCallback)(
|
|
8043
7527
|
(session, activeSlot, clientX, clientY) => {
|
|
8044
7528
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
8045
7529
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -8057,13 +7541,13 @@ function useNavItemDrag({
|
|
|
8057
7541
|
},
|
|
8058
7542
|
[setDraggedItemRect, setSiblingHintRects]
|
|
8059
7543
|
);
|
|
8060
|
-
const refreshNavDragVisualsRef = (0,
|
|
7544
|
+
const refreshNavDragVisualsRef = (0, import_react8.useRef)(refreshNavDragVisuals);
|
|
8061
7545
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
8062
|
-
const commitNavDragRef = (0,
|
|
7546
|
+
const commitNavDragRef = (0, import_react8.useRef)(() => {
|
|
8063
7547
|
});
|
|
8064
|
-
const beginNavDragRef = (0,
|
|
7548
|
+
const beginNavDragRef = (0, import_react8.useRef)(() => {
|
|
8065
7549
|
});
|
|
8066
|
-
const beginNavDrag = (0,
|
|
7550
|
+
const beginNavDrag = (0, import_react8.useCallback)(
|
|
8067
7551
|
(session) => {
|
|
8068
7552
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
8069
7553
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -8090,7 +7574,7 @@ function useNavItemDrag({
|
|
|
8090
7574
|
]
|
|
8091
7575
|
);
|
|
8092
7576
|
beginNavDragRef.current = beginNavDrag;
|
|
8093
|
-
const commitNavDrag = (0,
|
|
7577
|
+
const commitNavDrag = (0, import_react8.useCallback)(
|
|
8094
7578
|
(clientX, clientY) => {
|
|
8095
7579
|
const session = navDragRef.current;
|
|
8096
7580
|
if (!session) {
|
|
@@ -8151,7 +7635,7 @@ function useNavItemDrag({
|
|
|
8151
7635
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
8152
7636
|
);
|
|
8153
7637
|
commitNavDragRef.current = commitNavDrag;
|
|
8154
|
-
const startNavLinkDrag = (0,
|
|
7638
|
+
const startNavLinkDrag = (0, import_react8.useCallback)(
|
|
8155
7639
|
(anchor, clientX, clientY, wasSelected) => {
|
|
8156
7640
|
if (footerDragRef.current) return false;
|
|
8157
7641
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -8169,7 +7653,7 @@ function useNavItemDrag({
|
|
|
8169
7653
|
},
|
|
8170
7654
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isNavbarButton3]
|
|
8171
7655
|
);
|
|
8172
|
-
const onNavDragOver = (0,
|
|
7656
|
+
const onNavDragOver = (0, import_react8.useCallback)(
|
|
8173
7657
|
(e) => {
|
|
8174
7658
|
const session = navDragRef.current;
|
|
8175
7659
|
if (!session) return false;
|
|
@@ -8181,7 +7665,7 @@ function useNavItemDrag({
|
|
|
8181
7665
|
},
|
|
8182
7666
|
[]
|
|
8183
7667
|
);
|
|
8184
|
-
(0,
|
|
7668
|
+
(0, import_react8.useEffect)(() => {
|
|
8185
7669
|
if (!isEditMode) return;
|
|
8186
7670
|
const THRESHOLD = 10;
|
|
8187
7671
|
const resolveWasSelected = (el) => {
|
|
@@ -8306,7 +7790,7 @@ function useNavItemDrag({
|
|
|
8306
7790
|
setLinkPopover,
|
|
8307
7791
|
suppressNextClickRef
|
|
8308
7792
|
]);
|
|
8309
|
-
const armNavPressFromChrome = (0,
|
|
7793
|
+
const armNavPressFromChrome = (0, import_react8.useCallback)(
|
|
8310
7794
|
(selected, clientX, clientY, pointerId) => {
|
|
8311
7795
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
8312
7796
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -8336,59 +7820,8 @@ function useNavItemDrag({
|
|
|
8336
7820
|
};
|
|
8337
7821
|
}
|
|
8338
7822
|
|
|
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
|
-
|
|
8390
7823
|
// src/lib/carousel.ts
|
|
8391
|
-
var
|
|
7824
|
+
var import_react9 = require("react");
|
|
8392
7825
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
8393
7826
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
8394
7827
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -8450,8 +7883,8 @@ function applyCarouselNode(key, val) {
|
|
|
8450
7883
|
return true;
|
|
8451
7884
|
}
|
|
8452
7885
|
function useOhwCarousel(key, initial) {
|
|
8453
|
-
const [images, setImages] = (0,
|
|
8454
|
-
(0,
|
|
7886
|
+
const [images, setImages] = (0, import_react9.useState)(initial);
|
|
7887
|
+
(0, import_react9.useEffect)(() => {
|
|
8455
7888
|
const el = document.querySelector(
|
|
8456
7889
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
8457
7890
|
);
|
|
@@ -8472,14 +7905,14 @@ function useOhwCarousel(key, initial) {
|
|
|
8472
7905
|
}
|
|
8473
7906
|
|
|
8474
7907
|
// src/ui/navbar-container-chrome.tsx
|
|
8475
|
-
var
|
|
8476
|
-
var
|
|
7908
|
+
var import_lucide_react11 = require("lucide-react");
|
|
7909
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
8477
7910
|
function NavbarContainerChrome({
|
|
8478
7911
|
rect,
|
|
8479
7912
|
onAdd
|
|
8480
7913
|
}) {
|
|
8481
7914
|
const chromeGap = 6;
|
|
8482
|
-
return /* @__PURE__ */ (0,
|
|
7915
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
8483
7916
|
"div",
|
|
8484
7917
|
{
|
|
8485
7918
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -8491,7 +7924,7 @@ function NavbarContainerChrome({
|
|
|
8491
7924
|
width: rect.width + chromeGap * 2,
|
|
8492
7925
|
height: rect.height + chromeGap * 2
|
|
8493
7926
|
},
|
|
8494
|
-
children: /* @__PURE__ */ (0,
|
|
7927
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
8495
7928
|
"button",
|
|
8496
7929
|
{
|
|
8497
7930
|
type: "button",
|
|
@@ -8508,7 +7941,7 @@ function NavbarContainerChrome({
|
|
|
8508
7941
|
e.stopPropagation();
|
|
8509
7942
|
onAdd();
|
|
8510
7943
|
},
|
|
8511
|
-
children: /* @__PURE__ */ (0,
|
|
7944
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
8512
7945
|
}
|
|
8513
7946
|
)
|
|
8514
7947
|
}
|
|
@@ -8517,7 +7950,7 @@ function NavbarContainerChrome({
|
|
|
8517
7950
|
|
|
8518
7951
|
// src/ui/drop-indicator.tsx
|
|
8519
7952
|
var React10 = __toESM(require("react"), 1);
|
|
8520
|
-
var
|
|
7953
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
8521
7954
|
var dropIndicatorVariants = cva(
|
|
8522
7955
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
8523
7956
|
{
|
|
@@ -8541,7 +7974,7 @@ var dropIndicatorVariants = cva(
|
|
|
8541
7974
|
);
|
|
8542
7975
|
var DropIndicator = React10.forwardRef(
|
|
8543
7976
|
({ className, direction, state, ...props }, ref) => {
|
|
8544
|
-
return /* @__PURE__ */ (0,
|
|
7977
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
8545
7978
|
"div",
|
|
8546
7979
|
{
|
|
8547
7980
|
ref,
|
|
@@ -8558,7 +7991,7 @@ var DropIndicator = React10.forwardRef(
|
|
|
8558
7991
|
DropIndicator.displayName = "DropIndicator";
|
|
8559
7992
|
|
|
8560
7993
|
// src/ui/badge.tsx
|
|
8561
|
-
var
|
|
7994
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
8562
7995
|
var badgeVariants = cva(
|
|
8563
7996
|
"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",
|
|
8564
7997
|
{
|
|
@@ -8576,12 +8009,12 @@ var badgeVariants = cva(
|
|
|
8576
8009
|
}
|
|
8577
8010
|
);
|
|
8578
8011
|
function Badge({ className, variant, ...props }) {
|
|
8579
|
-
return /* @__PURE__ */ (0,
|
|
8012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
8580
8013
|
}
|
|
8581
8014
|
|
|
8582
8015
|
// src/OhhwellsBridge.tsx
|
|
8583
|
-
var
|
|
8584
|
-
var
|
|
8016
|
+
var import_lucide_react12 = require("lucide-react");
|
|
8017
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
8585
8018
|
var PRIMARY2 = "#0885FE";
|
|
8586
8019
|
var IMAGE_FADE_MS = 300;
|
|
8587
8020
|
function runOpacityFade(el, onDone) {
|
|
@@ -8760,7 +8193,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
8760
8193
|
const root = (0, import_client.createRoot)(container);
|
|
8761
8194
|
(0, import_react_dom2.flushSync)(() => {
|
|
8762
8195
|
root.render(
|
|
8763
|
-
/* @__PURE__ */ (0,
|
|
8196
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
8764
8197
|
SchedulingWidget,
|
|
8765
8198
|
{
|
|
8766
8199
|
notifyOnConnect,
|
|
@@ -8800,7 +8233,7 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
|
|
|
8800
8233
|
}
|
|
8801
8234
|
}
|
|
8802
8235
|
}
|
|
8803
|
-
function
|
|
8236
|
+
function getLinkHref2(el) {
|
|
8804
8237
|
const anchor = el instanceof HTMLAnchorElement ? el : el.querySelector("a");
|
|
8805
8238
|
return anchor?.getAttribute("href") ?? "";
|
|
8806
8239
|
}
|
|
@@ -8850,7 +8283,7 @@ function collectEditableNodes(extraContent) {
|
|
|
8850
8283
|
return { key: el.dataset.ohwKey ?? "", type: "video", text: getVideoEl(el)?.src ?? "" };
|
|
8851
8284
|
}
|
|
8852
8285
|
if (el.dataset.ohwEditable === "link") {
|
|
8853
|
-
return { key: el.dataset.ohwKey ?? "", type: "link", text:
|
|
8286
|
+
return { key: el.dataset.ohwKey ?? "", type: "link", text: getLinkHref2(el) };
|
|
8854
8287
|
}
|
|
8855
8288
|
return {
|
|
8856
8289
|
key: el.dataset.ohwKey ?? "",
|
|
@@ -8861,7 +8294,7 @@ function collectEditableNodes(extraContent) {
|
|
|
8861
8294
|
document.querySelectorAll("[data-ohw-href-key]").forEach((el) => {
|
|
8862
8295
|
const key = el.getAttribute("data-ohw-href-key") ?? "";
|
|
8863
8296
|
if (!key) return;
|
|
8864
|
-
nodes.push({ key, type: "link", text:
|
|
8297
|
+
nodes.push({ key, type: "link", text: getLinkHref2(el) });
|
|
8865
8298
|
});
|
|
8866
8299
|
if (extraContent) {
|
|
8867
8300
|
for (const key of [NAV_ORDER_KEY, FOOTER_ORDER_KEY, NAV_COUNT_KEY]) {
|
|
@@ -8964,7 +8397,7 @@ function applyLinkByKey(key, val) {
|
|
|
8964
8397
|
}
|
|
8965
8398
|
function isInsideLinkEditor(target) {
|
|
8966
8399
|
return Boolean(
|
|
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(
|
|
8400
|
+
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"]')
|
|
8968
8401
|
);
|
|
8969
8402
|
}
|
|
8970
8403
|
function getHrefKeyFromElement(el) {
|
|
@@ -9045,7 +8478,7 @@ function isInferredFooterGroup(el) {
|
|
|
9045
8478
|
return countFooterNavItems(el) >= 2;
|
|
9046
8479
|
}
|
|
9047
8480
|
function isNavigationContainer(el) {
|
|
9048
|
-
return el.hasAttribute("data-ohw-nav-container") ||
|
|
8481
|
+
return el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isInferredFooterGroup(el);
|
|
9049
8482
|
}
|
|
9050
8483
|
function isNavbarLinksContainer(el) {
|
|
9051
8484
|
return el.hasAttribute("data-ohw-nav-container");
|
|
@@ -9064,9 +8497,6 @@ function isPointOverNavigation(x, y) {
|
|
|
9064
8497
|
const roots = /* @__PURE__ */ new Set();
|
|
9065
8498
|
const navRoot = document.querySelector("[data-ohw-nav-root]") ?? document.querySelector("nav");
|
|
9066
8499
|
if (navRoot) roots.add(navRoot);
|
|
9067
|
-
document.querySelectorAll("[data-ohw-nav-drawer], [data-ohw-nav-container]").forEach((el) => {
|
|
9068
|
-
roots.add(el);
|
|
9069
|
-
});
|
|
9070
8500
|
const footer = document.querySelector("footer");
|
|
9071
8501
|
if (footer) roots.add(footer);
|
|
9072
8502
|
for (const root of roots) {
|
|
@@ -9095,12 +8525,6 @@ function isPointOverNavItem(container, x, y) {
|
|
|
9095
8525
|
return x >= itemRect.left && x <= itemRect.right && y >= itemRect.top && y <= itemRect.bottom;
|
|
9096
8526
|
});
|
|
9097
8527
|
}
|
|
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
|
-
}
|
|
9104
8528
|
function resolveNavContainerSelectionTarget(target, clientX, clientY) {
|
|
9105
8529
|
if (getNavigationItemAnchor(target)) return null;
|
|
9106
8530
|
if (target.closest('[data-ohw-role="navbar-button"]')) return null;
|
|
@@ -9131,10 +8555,7 @@ function getNavigationSelectionParent(el) {
|
|
|
9131
8555
|
if (footerGroup) return footerGroup;
|
|
9132
8556
|
return getNavigationRoot(el);
|
|
9133
8557
|
}
|
|
9134
|
-
if (
|
|
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)) {
|
|
8558
|
+
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup(el)) {
|
|
9138
8559
|
return getNavigationRoot(el);
|
|
9139
8560
|
}
|
|
9140
8561
|
return null;
|
|
@@ -9361,7 +8782,7 @@ function EditGlowChrome({
|
|
|
9361
8782
|
hideHandle = false
|
|
9362
8783
|
}) {
|
|
9363
8784
|
const GAP = SELECTION_CHROME_GAP2;
|
|
9364
|
-
return /* @__PURE__ */ (0,
|
|
8785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
9365
8786
|
"div",
|
|
9366
8787
|
{
|
|
9367
8788
|
ref: elRef,
|
|
@@ -9376,7 +8797,7 @@ function EditGlowChrome({
|
|
|
9376
8797
|
zIndex: 2147483646
|
|
9377
8798
|
},
|
|
9378
8799
|
children: [
|
|
9379
|
-
/* @__PURE__ */ (0,
|
|
8800
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9380
8801
|
"div",
|
|
9381
8802
|
{
|
|
9382
8803
|
style: {
|
|
@@ -9389,7 +8810,7 @@ function EditGlowChrome({
|
|
|
9389
8810
|
}
|
|
9390
8811
|
}
|
|
9391
8812
|
),
|
|
9392
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
8813
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9393
8814
|
"div",
|
|
9394
8815
|
{
|
|
9395
8816
|
"data-ohw-drag-handle-container": "",
|
|
@@ -9401,7 +8822,7 @@ function EditGlowChrome({
|
|
|
9401
8822
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
9402
8823
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
9403
8824
|
},
|
|
9404
|
-
children: /* @__PURE__ */ (0,
|
|
8825
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9405
8826
|
DragHandle,
|
|
9406
8827
|
{
|
|
9407
8828
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -9584,9 +9005,9 @@ function FloatingToolbar({
|
|
|
9584
9005
|
showEditLink,
|
|
9585
9006
|
onEditLink
|
|
9586
9007
|
}) {
|
|
9587
|
-
const localRef =
|
|
9588
|
-
const [measuredW, setMeasuredW] =
|
|
9589
|
-
const setRefs =
|
|
9008
|
+
const localRef = import_react10.default.useRef(null);
|
|
9009
|
+
const [measuredW, setMeasuredW] = import_react10.default.useState(330);
|
|
9010
|
+
const setRefs = import_react10.default.useCallback(
|
|
9590
9011
|
(node) => {
|
|
9591
9012
|
localRef.current = node;
|
|
9592
9013
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -9598,7 +9019,7 @@ function FloatingToolbar({
|
|
|
9598
9019
|
},
|
|
9599
9020
|
[elRef]
|
|
9600
9021
|
);
|
|
9601
|
-
|
|
9022
|
+
import_react10.default.useLayoutEffect(() => {
|
|
9602
9023
|
const node = localRef.current;
|
|
9603
9024
|
if (!node) return;
|
|
9604
9025
|
const update = () => {
|
|
@@ -9611,7 +9032,7 @@ function FloatingToolbar({
|
|
|
9611
9032
|
return () => ro.disconnect();
|
|
9612
9033
|
}, [showEditLink, activeCommands]);
|
|
9613
9034
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
9614
|
-
return /* @__PURE__ */ (0,
|
|
9035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9615
9036
|
"div",
|
|
9616
9037
|
{
|
|
9617
9038
|
ref: setRefs,
|
|
@@ -9623,12 +9044,12 @@ function FloatingToolbar({
|
|
|
9623
9044
|
zIndex: 2147483647,
|
|
9624
9045
|
pointerEvents: "auto"
|
|
9625
9046
|
},
|
|
9626
|
-
children: /* @__PURE__ */ (0,
|
|
9627
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
9628
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
9047
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(CustomToolbar, { children: [
|
|
9048
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react10.default.Fragment, { children: [
|
|
9049
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CustomToolbarDivider, {}),
|
|
9629
9050
|
btns.map((btn) => {
|
|
9630
9051
|
const isActive = activeCommands.has(btn.cmd);
|
|
9631
|
-
return /* @__PURE__ */ (0,
|
|
9052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9632
9053
|
CustomToolbarButton,
|
|
9633
9054
|
{
|
|
9634
9055
|
title: btn.title,
|
|
@@ -9637,7 +9058,7 @@ function FloatingToolbar({
|
|
|
9637
9058
|
e.preventDefault();
|
|
9638
9059
|
onCommand(btn.cmd);
|
|
9639
9060
|
},
|
|
9640
|
-
children: /* @__PURE__ */ (0,
|
|
9061
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9641
9062
|
"svg",
|
|
9642
9063
|
{
|
|
9643
9064
|
width: "16",
|
|
@@ -9658,7 +9079,7 @@ function FloatingToolbar({
|
|
|
9658
9079
|
);
|
|
9659
9080
|
})
|
|
9660
9081
|
] }, gi)),
|
|
9661
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
9082
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9662
9083
|
CustomToolbarButton,
|
|
9663
9084
|
{
|
|
9664
9085
|
type: "button",
|
|
@@ -9672,7 +9093,7 @@ function FloatingToolbar({
|
|
|
9672
9093
|
e.preventDefault();
|
|
9673
9094
|
e.stopPropagation();
|
|
9674
9095
|
},
|
|
9675
|
-
children: /* @__PURE__ */ (0,
|
|
9096
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
9676
9097
|
}
|
|
9677
9098
|
) : null
|
|
9678
9099
|
] })
|
|
@@ -9689,7 +9110,7 @@ function StateToggle({
|
|
|
9689
9110
|
states,
|
|
9690
9111
|
onStateChange
|
|
9691
9112
|
}) {
|
|
9692
|
-
return /* @__PURE__ */ (0,
|
|
9113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9693
9114
|
ToggleGroup,
|
|
9694
9115
|
{
|
|
9695
9116
|
"data-ohw-state-toggle": "",
|
|
@@ -9703,7 +9124,7 @@ function StateToggle({
|
|
|
9703
9124
|
left: rect.right - 8,
|
|
9704
9125
|
transform: "translateX(-100%)"
|
|
9705
9126
|
},
|
|
9706
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
9127
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
9707
9128
|
}
|
|
9708
9129
|
);
|
|
9709
9130
|
}
|
|
@@ -9730,8 +9151,8 @@ function OhhwellsBridge() {
|
|
|
9730
9151
|
const router = (0, import_navigation2.useRouter)();
|
|
9731
9152
|
const searchParams = (0, import_navigation2.useSearchParams)();
|
|
9732
9153
|
const isEditMode = isEditSessionActive();
|
|
9733
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
9734
|
-
(0,
|
|
9154
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react10.useState)(null);
|
|
9155
|
+
(0, import_react10.useEffect)(() => {
|
|
9735
9156
|
const figtreeFontId = "ohw-figtree-font";
|
|
9736
9157
|
if (!document.getElementById(figtreeFontId)) {
|
|
9737
9158
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -9759,99 +9180,99 @@ function OhhwellsBridge() {
|
|
|
9759
9180
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
9760
9181
|
const subdomain = resolveSubdomain(subdomainFromQuery);
|
|
9761
9182
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
9762
|
-
const postToParent2 = (0,
|
|
9183
|
+
const postToParent2 = (0, import_react10.useCallback)((data) => {
|
|
9763
9184
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
9764
9185
|
window.parent.postMessage(data, "*");
|
|
9765
9186
|
}
|
|
9766
9187
|
}, []);
|
|
9767
|
-
const [fetchState, setFetchState] = (0,
|
|
9768
|
-
const autoSaveTimers = (0,
|
|
9769
|
-
const activeElRef = (0,
|
|
9770
|
-
const pointerHeldRef = (0,
|
|
9771
|
-
const selectedElRef = (0,
|
|
9772
|
-
const selectedHrefKeyRef = (0,
|
|
9773
|
-
const selectedFooterColAttrRef = (0,
|
|
9774
|
-
const originalContentRef = (0,
|
|
9775
|
-
const activeStateElRef = (0,
|
|
9776
|
-
const parentScrollRef = (0,
|
|
9777
|
-
const visibleViewportRef = (0,
|
|
9778
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
9779
|
-
const attachVisibleViewport = (0,
|
|
9188
|
+
const [fetchState, setFetchState] = (0, import_react10.useState)("idle");
|
|
9189
|
+
const autoSaveTimers = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
|
|
9190
|
+
const activeElRef = (0, import_react10.useRef)(null);
|
|
9191
|
+
const pointerHeldRef = (0, import_react10.useRef)(false);
|
|
9192
|
+
const selectedElRef = (0, import_react10.useRef)(null);
|
|
9193
|
+
const selectedHrefKeyRef = (0, import_react10.useRef)(null);
|
|
9194
|
+
const selectedFooterColAttrRef = (0, import_react10.useRef)(null);
|
|
9195
|
+
const originalContentRef = (0, import_react10.useRef)(null);
|
|
9196
|
+
const activeStateElRef = (0, import_react10.useRef)(null);
|
|
9197
|
+
const parentScrollRef = (0, import_react10.useRef)(null);
|
|
9198
|
+
const visibleViewportRef = (0, import_react10.useRef)(null);
|
|
9199
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react10.useState)(null);
|
|
9200
|
+
const attachVisibleViewport = (0, import_react10.useCallback)((node) => {
|
|
9780
9201
|
visibleViewportRef.current = node;
|
|
9781
9202
|
setDialogPortalContainer(node);
|
|
9782
9203
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
9783
9204
|
}, []);
|
|
9784
|
-
const toolbarElRef = (0,
|
|
9785
|
-
const glowElRef = (0,
|
|
9786
|
-
const hoveredImageRef = (0,
|
|
9787
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
9788
|
-
const dragOverElRef = (0,
|
|
9789
|
-
const [mediaHover, setMediaHover] = (0,
|
|
9790
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
9791
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
9792
|
-
const hoveredGapRef = (0,
|
|
9793
|
-
const imageUnhoverTimerRef = (0,
|
|
9794
|
-
const imageShowTimerRef = (0,
|
|
9795
|
-
const editStylesRef = (0,
|
|
9796
|
-
const activateRef = (0,
|
|
9205
|
+
const toolbarElRef = (0, import_react10.useRef)(null);
|
|
9206
|
+
const glowElRef = (0, import_react10.useRef)(null);
|
|
9207
|
+
const hoveredImageRef = (0, import_react10.useRef)(null);
|
|
9208
|
+
const hoveredImageHasTextOverlapRef = (0, import_react10.useRef)(false);
|
|
9209
|
+
const dragOverElRef = (0, import_react10.useRef)(null);
|
|
9210
|
+
const [mediaHover, setMediaHover] = (0, import_react10.useState)(null);
|
|
9211
|
+
const [carouselHover, setCarouselHover] = (0, import_react10.useState)(null);
|
|
9212
|
+
const [uploadingRects, setUploadingRects] = (0, import_react10.useState)({});
|
|
9213
|
+
const hoveredGapRef = (0, import_react10.useRef)(null);
|
|
9214
|
+
const imageUnhoverTimerRef = (0, import_react10.useRef)(null);
|
|
9215
|
+
const imageShowTimerRef = (0, import_react10.useRef)(null);
|
|
9216
|
+
const editStylesRef = (0, import_react10.useRef)(null);
|
|
9217
|
+
const activateRef = (0, import_react10.useRef)(() => {
|
|
9797
9218
|
});
|
|
9798
|
-
const deactivateRef = (0,
|
|
9219
|
+
const deactivateRef = (0, import_react10.useRef)(() => {
|
|
9799
9220
|
});
|
|
9800
|
-
const selectRef = (0,
|
|
9221
|
+
const selectRef = (0, import_react10.useRef)(() => {
|
|
9801
9222
|
});
|
|
9802
|
-
const selectFrameRef = (0,
|
|
9223
|
+
const selectFrameRef = (0, import_react10.useRef)(() => {
|
|
9803
9224
|
});
|
|
9804
|
-
const deselectRef = (0,
|
|
9225
|
+
const deselectRef = (0, import_react10.useRef)(() => {
|
|
9805
9226
|
});
|
|
9806
|
-
const reselectNavigationItemRef = (0,
|
|
9227
|
+
const reselectNavigationItemRef = (0, import_react10.useRef)(() => {
|
|
9807
9228
|
});
|
|
9808
|
-
const commitNavigationTextEditRef = (0,
|
|
9229
|
+
const commitNavigationTextEditRef = (0, import_react10.useRef)(() => {
|
|
9809
9230
|
});
|
|
9810
|
-
const refreshActiveCommandsRef = (0,
|
|
9231
|
+
const refreshActiveCommandsRef = (0, import_react10.useRef)(() => {
|
|
9811
9232
|
});
|
|
9812
|
-
const postToParentRef = (0,
|
|
9233
|
+
const postToParentRef = (0, import_react10.useRef)(postToParent2);
|
|
9813
9234
|
postToParentRef.current = postToParent2;
|
|
9814
|
-
const sectionsLoadedRef = (0,
|
|
9815
|
-
const pendingScheduleConfigRequests = (0,
|
|
9816
|
-
const [toolbarRect, setToolbarRect] = (0,
|
|
9817
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
9818
|
-
const toolbarVariantRef = (0,
|
|
9235
|
+
const sectionsLoadedRef = (0, import_react10.useRef)(false);
|
|
9236
|
+
const pendingScheduleConfigRequests = (0, import_react10.useRef)([]);
|
|
9237
|
+
const [toolbarRect, setToolbarRect] = (0, import_react10.useState)(null);
|
|
9238
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react10.useState)("none");
|
|
9239
|
+
const toolbarVariantRef = (0, import_react10.useRef)("none");
|
|
9819
9240
|
toolbarVariantRef.current = toolbarVariant;
|
|
9820
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
9821
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
9822
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
9823
|
-
const [toggleState, setToggleState] = (0,
|
|
9824
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
9825
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
9826
|
-
const [sectionGap, setSectionGap] = (0,
|
|
9827
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
9828
|
-
const hoveredNavContainerRef = (0,
|
|
9829
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
9830
|
-
const hoveredItemElRef = (0,
|
|
9831
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
9832
|
-
const siblingHintElRef = (0,
|
|
9833
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
9834
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
9835
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
9836
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
9837
|
-
const footerDragRef = (0,
|
|
9838
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
9839
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
9840
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
9841
|
-
const footerPointerDragRef = (0,
|
|
9842
|
-
const suppressNextClickRef = (0,
|
|
9843
|
-
const suppressClickUntilRef = (0,
|
|
9844
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
9845
|
-
const linkPopoverSessionRef = (0,
|
|
9846
|
-
const addNavAfterAnchorRef = (0,
|
|
9847
|
-
const editContentRef = (0,
|
|
9848
|
-
const [sitePages, setSitePages] = (0,
|
|
9849
|
-
const [sectionsByPath, setSectionsByPath] = (0,
|
|
9850
|
-
const sectionsPrefetchGenRef = (0,
|
|
9851
|
-
const setLinkPopoverRef = (0,
|
|
9852
|
-
const linkPopoverPanelRef = (0,
|
|
9853
|
-
const linkPopoverOpenRef = (0,
|
|
9854
|
-
const linkPopoverGraceUntilRef = (0,
|
|
9241
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react10.useState)(false);
|
|
9242
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react10.useState)(null);
|
|
9243
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react10.useState)(false);
|
|
9244
|
+
const [toggleState, setToggleState] = (0, import_react10.useState)(null);
|
|
9245
|
+
const [maxBadge, setMaxBadge] = (0, import_react10.useState)(null);
|
|
9246
|
+
const [activeCommands, setActiveCommands] = (0, import_react10.useState)(/* @__PURE__ */ new Set());
|
|
9247
|
+
const [sectionGap, setSectionGap] = (0, import_react10.useState)(null);
|
|
9248
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react10.useState)(false);
|
|
9249
|
+
const hoveredNavContainerRef = (0, import_react10.useRef)(null);
|
|
9250
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react10.useState)(null);
|
|
9251
|
+
const hoveredItemElRef = (0, import_react10.useRef)(null);
|
|
9252
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react10.useState)(null);
|
|
9253
|
+
const siblingHintElRef = (0, import_react10.useRef)(null);
|
|
9254
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react10.useState)(null);
|
|
9255
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react10.useState)([]);
|
|
9256
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react10.useState)(false);
|
|
9257
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react10.useState)(false);
|
|
9258
|
+
const footerDragRef = (0, import_react10.useRef)(null);
|
|
9259
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react10.useState)([]);
|
|
9260
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react10.useState)(null);
|
|
9261
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react10.useState)(null);
|
|
9262
|
+
const footerPointerDragRef = (0, import_react10.useRef)(null);
|
|
9263
|
+
const suppressNextClickRef = (0, import_react10.useRef)(false);
|
|
9264
|
+
const suppressClickUntilRef = (0, import_react10.useRef)(0);
|
|
9265
|
+
const [linkPopover, setLinkPopover] = (0, import_react10.useState)(null);
|
|
9266
|
+
const linkPopoverSessionRef = (0, import_react10.useRef)(null);
|
|
9267
|
+
const addNavAfterAnchorRef = (0, import_react10.useRef)(null);
|
|
9268
|
+
const editContentRef = (0, import_react10.useRef)({});
|
|
9269
|
+
const [sitePages, setSitePages] = (0, import_react10.useState)([]);
|
|
9270
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react10.useState)({});
|
|
9271
|
+
const sectionsPrefetchGenRef = (0, import_react10.useRef)(0);
|
|
9272
|
+
const setLinkPopoverRef = (0, import_react10.useRef)(setLinkPopover);
|
|
9273
|
+
const linkPopoverPanelRef = (0, import_react10.useRef)(null);
|
|
9274
|
+
const linkPopoverOpenRef = (0, import_react10.useRef)(false);
|
|
9275
|
+
const linkPopoverGraceUntilRef = (0, import_react10.useRef)(0);
|
|
9855
9276
|
setLinkPopoverRef.current = setLinkPopover;
|
|
9856
9277
|
linkPopoverSessionRef.current = linkPopover;
|
|
9857
9278
|
const {
|
|
@@ -9890,7 +9311,7 @@ function OhhwellsBridge() {
|
|
|
9890
9311
|
const bumpLinkPopoverGrace = () => {
|
|
9891
9312
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
9892
9313
|
};
|
|
9893
|
-
const runSectionsPrefetch = (0,
|
|
9314
|
+
const runSectionsPrefetch = (0, import_react10.useCallback)((pages) => {
|
|
9894
9315
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
9895
9316
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
9896
9317
|
const paths = pages.map((p) => p.path);
|
|
@@ -9909,9 +9330,9 @@ function OhhwellsBridge() {
|
|
|
9909
9330
|
);
|
|
9910
9331
|
});
|
|
9911
9332
|
}, [isEditMode, pathname]);
|
|
9912
|
-
const runSectionsPrefetchRef = (0,
|
|
9333
|
+
const runSectionsPrefetchRef = (0, import_react10.useRef)(runSectionsPrefetch);
|
|
9913
9334
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
9914
|
-
(0,
|
|
9335
|
+
(0, import_react10.useEffect)(() => {
|
|
9915
9336
|
if (!linkPopover) {
|
|
9916
9337
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
9917
9338
|
return;
|
|
@@ -9961,7 +9382,7 @@ function OhhwellsBridge() {
|
|
|
9961
9382
|
document.removeEventListener("touchmove", preventBackgroundScroll, scrollOpts);
|
|
9962
9383
|
};
|
|
9963
9384
|
}, [linkPopover, postToParent2]);
|
|
9964
|
-
(0,
|
|
9385
|
+
(0, import_react10.useEffect)(() => {
|
|
9965
9386
|
if (!isEditMode) return;
|
|
9966
9387
|
const useFixtures = shouldUseDevFixtures();
|
|
9967
9388
|
if (useFixtures) {
|
|
@@ -9985,14 +9406,14 @@ function OhhwellsBridge() {
|
|
|
9985
9406
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
9986
9407
|
return () => window.removeEventListener("message", onSitePages);
|
|
9987
9408
|
}, [isEditMode, postToParent2]);
|
|
9988
|
-
(0,
|
|
9409
|
+
(0, import_react10.useEffect)(() => {
|
|
9989
9410
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
9990
9411
|
void loadAllSectionsManifest().then((manifest) => {
|
|
9991
9412
|
if (Object.keys(manifest).length === 0) return;
|
|
9992
9413
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
9993
9414
|
});
|
|
9994
9415
|
}, [isEditMode]);
|
|
9995
|
-
(0,
|
|
9416
|
+
(0, import_react10.useEffect)(() => {
|
|
9996
9417
|
const update = () => {
|
|
9997
9418
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
9998
9419
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -10016,10 +9437,10 @@ function OhhwellsBridge() {
|
|
|
10016
9437
|
vvp.removeEventListener("resize", update);
|
|
10017
9438
|
};
|
|
10018
9439
|
}, []);
|
|
10019
|
-
const refreshStateRules = (0,
|
|
9440
|
+
const refreshStateRules = (0, import_react10.useCallback)(() => {
|
|
10020
9441
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
10021
9442
|
}, []);
|
|
10022
|
-
const processConfigRequest = (0,
|
|
9443
|
+
const processConfigRequest = (0, import_react10.useCallback)((insertAfterVal) => {
|
|
10023
9444
|
const tracker = getSectionsTracker();
|
|
10024
9445
|
let entries = [];
|
|
10025
9446
|
try {
|
|
@@ -10042,7 +9463,7 @@ function OhhwellsBridge() {
|
|
|
10042
9463
|
}
|
|
10043
9464
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
10044
9465
|
}, [isEditMode]);
|
|
10045
|
-
const deactivate = (0,
|
|
9466
|
+
const deactivate = (0, import_react10.useCallback)(() => {
|
|
10046
9467
|
const el = activeElRef.current;
|
|
10047
9468
|
if (!el) return;
|
|
10048
9469
|
const key = el.dataset.ohwKey;
|
|
@@ -10074,12 +9495,12 @@ function OhhwellsBridge() {
|
|
|
10074
9495
|
setToolbarShowEditLink(false);
|
|
10075
9496
|
postToParent2({ type: "ow:exit-edit" });
|
|
10076
9497
|
}, [postToParent2]);
|
|
10077
|
-
const clearSelectedAttr = (0,
|
|
9498
|
+
const clearSelectedAttr = (0, import_react10.useCallback)(() => {
|
|
10078
9499
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
10079
9500
|
el.removeAttribute("data-ohw-selected");
|
|
10080
9501
|
});
|
|
10081
9502
|
}, []);
|
|
10082
|
-
const deselect = (0,
|
|
9503
|
+
const deselect = (0, import_react10.useCallback)(() => {
|
|
10083
9504
|
clearSelectedAttr();
|
|
10084
9505
|
selectedElRef.current = null;
|
|
10085
9506
|
selectedHrefKeyRef.current = null;
|
|
@@ -10099,11 +9520,11 @@ function OhhwellsBridge() {
|
|
|
10099
9520
|
setToolbarVariant("none");
|
|
10100
9521
|
}
|
|
10101
9522
|
}, [clearSelectedAttr]);
|
|
10102
|
-
const markSelected = (0,
|
|
9523
|
+
const markSelected = (0, import_react10.useCallback)((el) => {
|
|
10103
9524
|
clearSelectedAttr();
|
|
10104
9525
|
el.setAttribute("data-ohw-selected", "");
|
|
10105
9526
|
}, [clearSelectedAttr]);
|
|
10106
|
-
const resolveHrefKeyElement = (0,
|
|
9527
|
+
const resolveHrefKeyElement = (0, import_react10.useCallback)((hrefKey) => {
|
|
10107
9528
|
if (isFooterHrefKey(hrefKey)) {
|
|
10108
9529
|
return document.querySelector(
|
|
10109
9530
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -10118,7 +9539,7 @@ function OhhwellsBridge() {
|
|
|
10118
9539
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
10119
9540
|
);
|
|
10120
9541
|
}, []);
|
|
10121
|
-
const resyncSelectedNavigationItem = (0,
|
|
9542
|
+
const resyncSelectedNavigationItem = (0, import_react10.useCallback)(() => {
|
|
10122
9543
|
const hrefKey = selectedHrefKeyRef.current;
|
|
10123
9544
|
if (hrefKey) {
|
|
10124
9545
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -10146,7 +9567,7 @@ function OhhwellsBridge() {
|
|
|
10146
9567
|
);
|
|
10147
9568
|
}
|
|
10148
9569
|
}, [resolveHrefKeyElement]);
|
|
10149
|
-
const reselectNavigationItem = (0,
|
|
9570
|
+
const reselectNavigationItem = (0, import_react10.useCallback)((navAnchor) => {
|
|
10150
9571
|
selectedElRef.current = navAnchor;
|
|
10151
9572
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
10152
9573
|
selectedFooterColAttrRef.current = null;
|
|
@@ -10161,7 +9582,7 @@ function OhhwellsBridge() {
|
|
|
10161
9582
|
setToolbarShowEditLink(false);
|
|
10162
9583
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
10163
9584
|
}, [markSelected]);
|
|
10164
|
-
const commitNavigationTextEdit = (0,
|
|
9585
|
+
const commitNavigationTextEdit = (0, import_react10.useCallback)((navAnchor) => {
|
|
10165
9586
|
const el = activeElRef.current;
|
|
10166
9587
|
if (!el) return;
|
|
10167
9588
|
const key = el.dataset.ohwKey;
|
|
@@ -10188,7 +9609,7 @@ function OhhwellsBridge() {
|
|
|
10188
9609
|
postToParent2({ type: "ow:exit-edit" });
|
|
10189
9610
|
reselectNavigationItem(navAnchor);
|
|
10190
9611
|
}, [postToParent2, reselectNavigationItem]);
|
|
10191
|
-
const handleAddTopLevelNavItem = (0,
|
|
9612
|
+
const handleAddTopLevelNavItem = (0, import_react10.useCallback)(() => {
|
|
10192
9613
|
const items = listNavbarItems();
|
|
10193
9614
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
10194
9615
|
deselectRef.current();
|
|
@@ -10200,28 +9621,7 @@ function OhhwellsBridge() {
|
|
|
10200
9621
|
intent: "add-nav"
|
|
10201
9622
|
});
|
|
10202
9623
|
}, []);
|
|
10203
|
-
const
|
|
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)(() => {
|
|
9624
|
+
const clearFooterDragVisuals = (0, import_react10.useCallback)(() => {
|
|
10225
9625
|
footerDragRef.current = null;
|
|
10226
9626
|
setSiblingHintRects([]);
|
|
10227
9627
|
setFooterDropSlots([]);
|
|
@@ -10230,7 +9630,7 @@ function OhhwellsBridge() {
|
|
|
10230
9630
|
setIsItemDragging(false);
|
|
10231
9631
|
unlockFooterDragInteraction();
|
|
10232
9632
|
}, []);
|
|
10233
|
-
const refreshFooterDragVisuals = (0,
|
|
9633
|
+
const refreshFooterDragVisuals = (0, import_react10.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
10234
9634
|
const dragged = session.draggedEl;
|
|
10235
9635
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
10236
9636
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -10255,13 +9655,13 @@ function OhhwellsBridge() {
|
|
|
10255
9655
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
10256
9656
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
10257
9657
|
}, []);
|
|
10258
|
-
const refreshFooterDragVisualsRef = (0,
|
|
9658
|
+
const refreshFooterDragVisualsRef = (0, import_react10.useRef)(refreshFooterDragVisuals);
|
|
10259
9659
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
10260
|
-
const commitFooterDragRef = (0,
|
|
9660
|
+
const commitFooterDragRef = (0, import_react10.useRef)(() => {
|
|
10261
9661
|
});
|
|
10262
|
-
const beginFooterDragRef = (0,
|
|
9662
|
+
const beginFooterDragRef = (0, import_react10.useRef)(() => {
|
|
10263
9663
|
});
|
|
10264
|
-
const beginFooterDrag = (0,
|
|
9664
|
+
const beginFooterDrag = (0, import_react10.useCallback)(
|
|
10265
9665
|
(session) => {
|
|
10266
9666
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
10267
9667
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -10281,7 +9681,7 @@ function OhhwellsBridge() {
|
|
|
10281
9681
|
[refreshFooterDragVisuals]
|
|
10282
9682
|
);
|
|
10283
9683
|
beginFooterDragRef.current = beginFooterDrag;
|
|
10284
|
-
const commitFooterDrag = (0,
|
|
9684
|
+
const commitFooterDrag = (0, import_react10.useCallback)(
|
|
10285
9685
|
(clientX, clientY) => {
|
|
10286
9686
|
const session = footerDragRef.current;
|
|
10287
9687
|
if (!session) {
|
|
@@ -10385,7 +9785,7 @@ function OhhwellsBridge() {
|
|
|
10385
9785
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
10386
9786
|
);
|
|
10387
9787
|
commitFooterDragRef.current = commitFooterDrag;
|
|
10388
|
-
const startFooterLinkDrag = (0,
|
|
9788
|
+
const startFooterLinkDrag = (0, import_react10.useCallback)(
|
|
10389
9789
|
(anchor, clientX, clientY, wasSelected) => {
|
|
10390
9790
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
10391
9791
|
if (!hrefKey || !isFooterHrefKey(hrefKey)) return false;
|
|
@@ -10406,7 +9806,7 @@ function OhhwellsBridge() {
|
|
|
10406
9806
|
},
|
|
10407
9807
|
[beginFooterDrag]
|
|
10408
9808
|
);
|
|
10409
|
-
const startFooterColumnDrag = (0,
|
|
9809
|
+
const startFooterColumnDrag = (0, import_react10.useCallback)(
|
|
10410
9810
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
10411
9811
|
const columns = listFooterColumns();
|
|
10412
9812
|
const idx = columns.indexOf(columnEl);
|
|
@@ -10426,7 +9826,7 @@ function OhhwellsBridge() {
|
|
|
10426
9826
|
},
|
|
10427
9827
|
[beginFooterDrag]
|
|
10428
9828
|
);
|
|
10429
|
-
const handleItemDragStart = (0,
|
|
9829
|
+
const handleItemDragStart = (0, import_react10.useCallback)(
|
|
10430
9830
|
(e) => {
|
|
10431
9831
|
const selected = selectedElRef.current;
|
|
10432
9832
|
if (!selected) {
|
|
@@ -10446,7 +9846,7 @@ function OhhwellsBridge() {
|
|
|
10446
9846
|
},
|
|
10447
9847
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
10448
9848
|
);
|
|
10449
|
-
const handleItemDragEnd = (0,
|
|
9849
|
+
const handleItemDragEnd = (0, import_react10.useCallback)(
|
|
10450
9850
|
(e) => {
|
|
10451
9851
|
if (footerDragRef.current) {
|
|
10452
9852
|
const x = e?.clientX;
|
|
@@ -10472,7 +9872,7 @@ function OhhwellsBridge() {
|
|
|
10472
9872
|
},
|
|
10473
9873
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
10474
9874
|
);
|
|
10475
|
-
const handleItemChromePointerDown = (0,
|
|
9875
|
+
const handleItemChromePointerDown = (0, import_react10.useCallback)((e) => {
|
|
10476
9876
|
if (e.button !== 0) return;
|
|
10477
9877
|
const selected = selectedElRef.current;
|
|
10478
9878
|
if (!selected) return;
|
|
@@ -10503,7 +9903,7 @@ function OhhwellsBridge() {
|
|
|
10503
9903
|
}
|
|
10504
9904
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
10505
9905
|
}, [armNavPressFromChrome]);
|
|
10506
|
-
const handleItemChromeClick = (0,
|
|
9906
|
+
const handleItemChromeClick = (0, import_react10.useCallback)((clientX, clientY) => {
|
|
10507
9907
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
10508
9908
|
suppressNextClickRef.current = false;
|
|
10509
9909
|
return;
|
|
@@ -10516,7 +9916,7 @@ function OhhwellsBridge() {
|
|
|
10516
9916
|
}, []);
|
|
10517
9917
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
10518
9918
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
10519
|
-
const select = (0,
|
|
9919
|
+
const select = (0, import_react10.useCallback)((anchor) => {
|
|
10520
9920
|
if (!isNavigationItem(anchor)) return;
|
|
10521
9921
|
if (activeElRef.current) deactivate();
|
|
10522
9922
|
selectedElRef.current = anchor;
|
|
@@ -10542,10 +9942,10 @@ function OhhwellsBridge() {
|
|
|
10542
9942
|
setToolbarShowEditLink(false);
|
|
10543
9943
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
10544
9944
|
}, [deactivate, markSelected]);
|
|
10545
|
-
const selectFrame = (0,
|
|
9945
|
+
const selectFrame = (0, import_react10.useCallback)((el) => {
|
|
10546
9946
|
if (!isNavigationContainer(el)) return;
|
|
10547
9947
|
if (activeElRef.current) deactivate();
|
|
10548
|
-
const isFooterColumn =
|
|
9948
|
+
const isFooterColumn = el.hasAttribute("data-ohw-footer-col") || Boolean(el.closest("footer") && isInferredFooterGroup(el));
|
|
10549
9949
|
selectedElRef.current = el;
|
|
10550
9950
|
selectedHrefKeyRef.current = null;
|
|
10551
9951
|
selectedFooterColAttrRef.current = isFooterColumn ? el.getAttribute("data-ohw-footer-col") ?? String(listFooterColumns().indexOf(el)) : null;
|
|
@@ -10570,7 +9970,7 @@ function OhhwellsBridge() {
|
|
|
10570
9970
|
setToolbarShowEditLink(false);
|
|
10571
9971
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
10572
9972
|
}, [deactivate, markSelected]);
|
|
10573
|
-
const activate = (0,
|
|
9973
|
+
const activate = (0, import_react10.useCallback)((el, options) => {
|
|
10574
9974
|
if (activeElRef.current === el) return;
|
|
10575
9975
|
clearSelectedAttr();
|
|
10576
9976
|
selectedElRef.current = null;
|
|
@@ -10635,7 +10035,7 @@ function OhhwellsBridge() {
|
|
|
10635
10035
|
selectRef.current = select;
|
|
10636
10036
|
selectFrameRef.current = selectFrame;
|
|
10637
10037
|
deselectRef.current = deselect;
|
|
10638
|
-
(0,
|
|
10038
|
+
(0, import_react10.useLayoutEffect)(() => {
|
|
10639
10039
|
if (!subdomain || isEditMode) {
|
|
10640
10040
|
setFetchState("done");
|
|
10641
10041
|
return;
|
|
@@ -10706,7 +10106,7 @@ function OhhwellsBridge() {
|
|
|
10706
10106
|
cancelled = true;
|
|
10707
10107
|
};
|
|
10708
10108
|
}, [subdomain, isEditMode]);
|
|
10709
|
-
(0,
|
|
10109
|
+
(0, import_react10.useEffect)(() => {
|
|
10710
10110
|
if (!subdomain || isEditMode) return;
|
|
10711
10111
|
let debounceTimer = null;
|
|
10712
10112
|
let observer = null;
|
|
@@ -10757,16 +10157,16 @@ function OhhwellsBridge() {
|
|
|
10757
10157
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
10758
10158
|
};
|
|
10759
10159
|
}, [subdomain, isEditMode, pathname]);
|
|
10760
|
-
(0,
|
|
10160
|
+
(0, import_react10.useLayoutEffect)(() => {
|
|
10761
10161
|
const el = document.getElementById("ohw-loader");
|
|
10762
10162
|
if (!el) return;
|
|
10763
10163
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
10764
10164
|
el.style.display = visible ? "flex" : "none";
|
|
10765
10165
|
}, [subdomain, fetchState]);
|
|
10766
|
-
(0,
|
|
10166
|
+
(0, import_react10.useEffect)(() => {
|
|
10767
10167
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
10768
10168
|
}, [pathname, postToParent2]);
|
|
10769
|
-
(0,
|
|
10169
|
+
(0, import_react10.useEffect)(() => {
|
|
10770
10170
|
if (!isEditMode) return;
|
|
10771
10171
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
10772
10172
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -10774,7 +10174,7 @@ function OhhwellsBridge() {
|
|
|
10774
10174
|
deselectRef.current();
|
|
10775
10175
|
deactivateRef.current();
|
|
10776
10176
|
}, [pathname, isEditMode]);
|
|
10777
|
-
(0,
|
|
10177
|
+
(0, import_react10.useEffect)(() => {
|
|
10778
10178
|
const contentForNav = () => {
|
|
10779
10179
|
if (isEditMode) return editContentRef.current;
|
|
10780
10180
|
if (!subdomain) return {};
|
|
@@ -10839,7 +10239,7 @@ function OhhwellsBridge() {
|
|
|
10839
10239
|
observer?.disconnect();
|
|
10840
10240
|
};
|
|
10841
10241
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
10842
|
-
(0,
|
|
10242
|
+
(0, import_react10.useEffect)(() => {
|
|
10843
10243
|
if (!isEditMode) return;
|
|
10844
10244
|
const measure = () => {
|
|
10845
10245
|
const h = document.body.scrollHeight;
|
|
@@ -10863,7 +10263,7 @@ function OhhwellsBridge() {
|
|
|
10863
10263
|
window.removeEventListener("resize", handleResize);
|
|
10864
10264
|
};
|
|
10865
10265
|
}, [pathname, isEditMode, postToParent2]);
|
|
10866
|
-
(0,
|
|
10266
|
+
(0, import_react10.useEffect)(() => {
|
|
10867
10267
|
if (!subdomainFromQuery || isEditMode) return;
|
|
10868
10268
|
const handleClick = (e) => {
|
|
10869
10269
|
const anchor = e.target.closest("a");
|
|
@@ -10879,7 +10279,7 @@ function OhhwellsBridge() {
|
|
|
10879
10279
|
document.addEventListener("click", handleClick, true);
|
|
10880
10280
|
return () => document.removeEventListener("click", handleClick, true);
|
|
10881
10281
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
10882
|
-
(0,
|
|
10282
|
+
(0, import_react10.useEffect)(() => {
|
|
10883
10283
|
if (!isEditMode) {
|
|
10884
10284
|
editStylesRef.current?.base.remove();
|
|
10885
10285
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -11078,7 +10478,7 @@ function OhhwellsBridge() {
|
|
|
11078
10478
|
setLinkPopoverRef.current({
|
|
11079
10479
|
key: editable.dataset.ohwKey ?? "",
|
|
11080
10480
|
mode: "edit",
|
|
11081
|
-
target:
|
|
10481
|
+
target: getLinkHref2(editable)
|
|
11082
10482
|
});
|
|
11083
10483
|
return;
|
|
11084
10484
|
}
|
|
@@ -11103,7 +10503,7 @@ function OhhwellsBridge() {
|
|
|
11103
10503
|
}
|
|
11104
10504
|
e.preventDefault();
|
|
11105
10505
|
e.stopPropagation();
|
|
11106
|
-
activateRef.current(editable
|
|
10506
|
+
activateRef.current(editable);
|
|
11107
10507
|
return;
|
|
11108
10508
|
}
|
|
11109
10509
|
const hrefAnchor = getNavigationItemAnchor(target);
|
|
@@ -11130,18 +10530,6 @@ function OhhwellsBridge() {
|
|
|
11130
10530
|
selectFrameRef.current(footerColClick);
|
|
11131
10531
|
return;
|
|
11132
10532
|
}
|
|
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
|
-
}
|
|
11145
10533
|
const navContainerToSelect = resolveNavContainerSelectionTarget(target, e.clientX, e.clientY);
|
|
11146
10534
|
if (navContainerToSelect) {
|
|
11147
10535
|
e.preventDefault();
|
|
@@ -11200,8 +10588,8 @@ function OhhwellsBridge() {
|
|
|
11200
10588
|
return;
|
|
11201
10589
|
}
|
|
11202
10590
|
const navLabel = getNavigationLabelEditable(target);
|
|
11203
|
-
|
|
11204
|
-
|
|
10591
|
+
if (!navLabel) return;
|
|
10592
|
+
const { editable } = navLabel;
|
|
11205
10593
|
e.preventDefault();
|
|
11206
10594
|
e.stopPropagation();
|
|
11207
10595
|
if (activeElRef.current !== editable) {
|
|
@@ -11222,38 +10610,16 @@ function OhhwellsBridge() {
|
|
|
11222
10610
|
setHoveredNavContainerRect(null);
|
|
11223
10611
|
return;
|
|
11224
10612
|
}
|
|
11225
|
-
{
|
|
11226
|
-
const
|
|
11227
|
-
|
|
11228
|
-
|
|
11229
|
-
|
|
11230
|
-
|
|
11231
|
-
|
|
11232
|
-
|
|
11233
|
-
hoveredNavContainerRef.current = navContainer;
|
|
11234
|
-
setHoveredNavContainerRect(navContainer.getBoundingClientRect());
|
|
11235
|
-
hoveredItemElRef.current = null;
|
|
11236
|
-
setHoveredItemRect(null);
|
|
11237
|
-
return;
|
|
11238
|
-
}
|
|
10613
|
+
if (toolbarVariantRef.current !== "select-frame") {
|
|
10614
|
+
const navContainer = target.closest("[data-ohw-nav-container]");
|
|
10615
|
+
if (navContainer && !getNavigationItemAnchor(target)) {
|
|
10616
|
+
hoveredNavContainerRef.current = navContainer;
|
|
10617
|
+
setHoveredNavContainerRect(navContainer.getBoundingClientRect());
|
|
10618
|
+
hoveredItemElRef.current = null;
|
|
10619
|
+
setHoveredItemRect(null);
|
|
10620
|
+
return;
|
|
11239
10621
|
}
|
|
11240
|
-
if (
|
|
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") {
|
|
10622
|
+
if (!target.closest("[data-ohw-nav-container]")) {
|
|
11257
10623
|
hoveredNavContainerRef.current = null;
|
|
11258
10624
|
setHoveredNavContainerRect(null);
|
|
11259
10625
|
}
|
|
@@ -11295,9 +10661,9 @@ function OhhwellsBridge() {
|
|
|
11295
10661
|
};
|
|
11296
10662
|
const handleMouseOut = (e) => {
|
|
11297
10663
|
const target = e.target;
|
|
11298
|
-
if (target.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column]
|
|
10664
|
+
if (target.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column]")) {
|
|
11299
10665
|
const related2 = e.relatedTarget instanceof Element ? e.relatedTarget : null;
|
|
11300
|
-
if (related2?.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column], [data-ohw-
|
|
10666
|
+
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]")) {
|
|
11301
10667
|
return;
|
|
11302
10668
|
}
|
|
11303
10669
|
hoveredNavContainerRef.current = null;
|
|
@@ -11392,15 +10758,6 @@ function OhhwellsBridge() {
|
|
|
11392
10758
|
if (track) track.setAttribute("data-ohw-hover-paused", "");
|
|
11393
10759
|
};
|
|
11394
10760
|
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
|
-
};
|
|
11404
10761
|
const findImageAtPoint = (clientX, clientY, fromParentViewport) => {
|
|
11405
10762
|
const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
|
|
11406
10763
|
const images = Array.from(document.querySelectorAll(MEDIA_SELECTOR));
|
|
@@ -11444,13 +10801,16 @@ function OhhwellsBridge() {
|
|
|
11444
10801
|
}
|
|
11445
10802
|
return smallest;
|
|
11446
10803
|
};
|
|
10804
|
+
const dismissImageHover = () => {
|
|
10805
|
+
if (hoveredImageRef.current) {
|
|
10806
|
+
hoveredImageRef.current = null;
|
|
10807
|
+
hoveredImageHasTextOverlapRef.current = false;
|
|
10808
|
+
resumeAnimTracks();
|
|
10809
|
+
postToParentRef.current({ type: "ow:image-unhover" });
|
|
10810
|
+
}
|
|
10811
|
+
};
|
|
11447
10812
|
const probeNavigationHoverAt = (x, y) => {
|
|
11448
|
-
|
|
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) {
|
|
10813
|
+
if (toolbarVariantRef.current === "select-frame") {
|
|
11454
10814
|
hoveredNavContainerRef.current = null;
|
|
11455
10815
|
setHoveredNavContainerRect(null);
|
|
11456
10816
|
}
|
|
@@ -11472,6 +10832,7 @@ function OhhwellsBridge() {
|
|
|
11472
10832
|
if (navItemHit) {
|
|
11473
10833
|
hoveredNavContainerRef.current = null;
|
|
11474
10834
|
setHoveredNavContainerRect(null);
|
|
10835
|
+
const selected = selectedElRef.current;
|
|
11475
10836
|
if (selected !== navItemHit) {
|
|
11476
10837
|
clearHrefKeyHover(navItemHit);
|
|
11477
10838
|
hoveredItemElRef.current = navItemHit;
|
|
@@ -11483,7 +10844,7 @@ function OhhwellsBridge() {
|
|
|
11483
10844
|
return;
|
|
11484
10845
|
}
|
|
11485
10846
|
}
|
|
11486
|
-
if (
|
|
10847
|
+
if (toolbarVariantRef.current !== "select-frame") {
|
|
11487
10848
|
for (const container of navContainers) {
|
|
11488
10849
|
const containerRect = container.getBoundingClientRect();
|
|
11489
10850
|
const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
|
|
@@ -11495,23 +10856,12 @@ function OhhwellsBridge() {
|
|
|
11495
10856
|
setHoveredItemRect(null);
|
|
11496
10857
|
return;
|
|
11497
10858
|
}
|
|
10859
|
+
hoveredNavContainerRef.current = null;
|
|
10860
|
+
setHoveredNavContainerRect(null);
|
|
10861
|
+
} else {
|
|
10862
|
+
hoveredNavContainerRef.current = null;
|
|
10863
|
+
setHoveredNavContainerRect(null);
|
|
11498
10864
|
}
|
|
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);
|
|
11515
10865
|
for (const column of footerColumns) {
|
|
11516
10866
|
const containerRect = column.getBoundingClientRect();
|
|
11517
10867
|
const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
|
|
@@ -11550,13 +10900,6 @@ function OhhwellsBridge() {
|
|
|
11550
10900
|
probeNavigationHoverAt(x, y);
|
|
11551
10901
|
return;
|
|
11552
10902
|
}
|
|
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
|
-
}
|
|
11560
10903
|
hoveredNavContainerRef.current = null;
|
|
11561
10904
|
setHoveredNavContainerRect(null);
|
|
11562
10905
|
if (hoveredItemElRef.current?.hasAttribute("data-ohw-footer-col") || hoveredItemElRef.current?.hasAttribute("data-ohw-footer-column")) {
|
|
@@ -11603,7 +10946,7 @@ function OhhwellsBridge() {
|
|
|
11603
10946
|
return;
|
|
11604
10947
|
}
|
|
11605
10948
|
const topEl = document.elementFromPoint(x2, y2);
|
|
11606
|
-
if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]
|
|
10949
|
+
if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]')) {
|
|
11607
10950
|
if (hoveredImageRef.current) {
|
|
11608
10951
|
hoveredImageRef.current = null;
|
|
11609
10952
|
resumeAnimTracks();
|
|
@@ -12027,7 +11370,6 @@ function OhhwellsBridge() {
|
|
|
12027
11370
|
}
|
|
12028
11371
|
editContentRef.current = { ...editContentRef.current, ...content };
|
|
12029
11372
|
reconcileNavbarItemsFromContent(editContentRef.current);
|
|
12030
|
-
reconcileFooterOrderFromContent(editContentRef.current);
|
|
12031
11373
|
syncNavigationDragCursorAttrs();
|
|
12032
11374
|
enforceLinkHrefs();
|
|
12033
11375
|
postToParentRef.current({ type: "ow:hydrate-done" });
|
|
@@ -12047,7 +11389,6 @@ function OhhwellsBridge() {
|
|
|
12047
11389
|
window.addEventListener("message", handleDeactivate);
|
|
12048
11390
|
const handleUiEscape = (e) => {
|
|
12049
11391
|
if (e.data?.type !== "ui:escape") return;
|
|
12050
|
-
if (document.querySelector("[data-ohw-more-menu]")) return;
|
|
12051
11392
|
if (linkPopoverOpenRef.current) {
|
|
12052
11393
|
setLinkPopoverRef.current(null);
|
|
12053
11394
|
return;
|
|
@@ -12083,11 +11424,6 @@ function OhhwellsBridge() {
|
|
|
12083
11424
|
}
|
|
12084
11425
|
if (selectedElRef.current) {
|
|
12085
11426
|
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
|
-
}
|
|
12091
11427
|
deselectRef.current();
|
|
12092
11428
|
return;
|
|
12093
11429
|
}
|
|
@@ -12102,12 +11438,14 @@ function OhhwellsBridge() {
|
|
|
12102
11438
|
window.addEventListener("message", handleUiEscape);
|
|
12103
11439
|
const handleKeyDown = (e) => {
|
|
12104
11440
|
if (e.key === "Escape" && document.querySelector("[data-ohw-section-picker]")) return;
|
|
12105
|
-
if (e.key === "Escape" && document.querySelector("[data-ohw-more-menu]")) return;
|
|
12106
11441
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a" && activeElRef.current) {
|
|
12107
|
-
|
|
12108
|
-
|
|
12109
|
-
|
|
12110
|
-
|
|
11442
|
+
const navAnchor = getNavigationItemAnchor(activeElRef.current);
|
|
11443
|
+
if (navAnchor) {
|
|
11444
|
+
e.preventDefault();
|
|
11445
|
+
selectAllTextInEditable(activeElRef.current);
|
|
11446
|
+
refreshActiveCommandsRef.current();
|
|
11447
|
+
return;
|
|
11448
|
+
}
|
|
12111
11449
|
}
|
|
12112
11450
|
if (e.key === "Escape" && linkPopoverOpenRef.current) {
|
|
12113
11451
|
setLinkPopoverRef.current(null);
|
|
@@ -12115,12 +11453,6 @@ function OhhwellsBridge() {
|
|
|
12115
11453
|
}
|
|
12116
11454
|
if (e.key === "Escape" && selectedElRef.current && !activeElRef.current) {
|
|
12117
11455
|
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
|
-
}
|
|
12124
11456
|
deselectRef.current();
|
|
12125
11457
|
return;
|
|
12126
11458
|
}
|
|
@@ -12570,7 +11902,7 @@ function OhhwellsBridge() {
|
|
|
12570
11902
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
12571
11903
|
};
|
|
12572
11904
|
}, [isEditMode, refreshStateRules]);
|
|
12573
|
-
(0,
|
|
11905
|
+
(0, import_react10.useEffect)(() => {
|
|
12574
11906
|
if (!isEditMode) return;
|
|
12575
11907
|
const THRESHOLD = 10;
|
|
12576
11908
|
const resolveWasSelected = (el) => {
|
|
@@ -12724,7 +12056,7 @@ function OhhwellsBridge() {
|
|
|
12724
12056
|
unlockFooterDragInteraction();
|
|
12725
12057
|
};
|
|
12726
12058
|
}, [isEditMode]);
|
|
12727
|
-
(0,
|
|
12059
|
+
(0, import_react10.useEffect)(() => {
|
|
12728
12060
|
const handler = (e) => {
|
|
12729
12061
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
12730
12062
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -12740,7 +12072,7 @@ function OhhwellsBridge() {
|
|
|
12740
12072
|
window.addEventListener("message", handler);
|
|
12741
12073
|
return () => window.removeEventListener("message", handler);
|
|
12742
12074
|
}, [processConfigRequest]);
|
|
12743
|
-
(0,
|
|
12075
|
+
(0, import_react10.useEffect)(() => {
|
|
12744
12076
|
if (!isEditMode) return;
|
|
12745
12077
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
12746
12078
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -12775,13 +12107,13 @@ function OhhwellsBridge() {
|
|
|
12775
12107
|
clearTimeout(timer);
|
|
12776
12108
|
};
|
|
12777
12109
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
12778
|
-
(0,
|
|
12110
|
+
(0, import_react10.useEffect)(() => {
|
|
12779
12111
|
scrollToHashSectionWhenReady();
|
|
12780
12112
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
12781
12113
|
window.addEventListener("hashchange", onHashChange);
|
|
12782
12114
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
12783
12115
|
}, [pathname]);
|
|
12784
|
-
const handleCommand = (0,
|
|
12116
|
+
const handleCommand = (0, import_react10.useCallback)((cmd) => {
|
|
12785
12117
|
const el = activeElRef.current;
|
|
12786
12118
|
const selBefore = window.getSelection();
|
|
12787
12119
|
let savedOffsets = null;
|
|
@@ -12817,7 +12149,7 @@ function OhhwellsBridge() {
|
|
|
12817
12149
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
12818
12150
|
refreshActiveCommandsRef.current();
|
|
12819
12151
|
}, []);
|
|
12820
|
-
const handleStateChange = (0,
|
|
12152
|
+
const handleStateChange = (0, import_react10.useCallback)((state) => {
|
|
12821
12153
|
if (!activeStateElRef.current) return;
|
|
12822
12154
|
const el = activeStateElRef.current;
|
|
12823
12155
|
if (state === "Default") {
|
|
@@ -12830,22 +12162,22 @@ function OhhwellsBridge() {
|
|
|
12830
12162
|
}
|
|
12831
12163
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
12832
12164
|
}, [deactivate]);
|
|
12833
|
-
const closeLinkPopover = (0,
|
|
12165
|
+
const closeLinkPopover = (0, import_react10.useCallback)(() => {
|
|
12834
12166
|
addNavAfterAnchorRef.current = null;
|
|
12835
12167
|
setLinkPopover(null);
|
|
12836
12168
|
}, []);
|
|
12837
|
-
const openLinkPopoverForActive = (0,
|
|
12169
|
+
const openLinkPopoverForActive = (0, import_react10.useCallback)(() => {
|
|
12838
12170
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
12839
12171
|
if (!hrefCtx) return;
|
|
12840
12172
|
bumpLinkPopoverGrace();
|
|
12841
12173
|
setLinkPopover({
|
|
12842
12174
|
key: hrefCtx.key,
|
|
12843
12175
|
mode: "edit",
|
|
12844
|
-
target:
|
|
12176
|
+
target: getLinkHref2(hrefCtx.anchor)
|
|
12845
12177
|
});
|
|
12846
12178
|
deactivate();
|
|
12847
12179
|
}, [deactivate]);
|
|
12848
|
-
const openLinkPopoverForSelected = (0,
|
|
12180
|
+
const openLinkPopoverForSelected = (0, import_react10.useCallback)(() => {
|
|
12849
12181
|
const anchor = selectedElRef.current;
|
|
12850
12182
|
if (!anchor) return;
|
|
12851
12183
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -12854,108 +12186,11 @@ function OhhwellsBridge() {
|
|
|
12854
12186
|
setLinkPopover({
|
|
12855
12187
|
key,
|
|
12856
12188
|
mode: "edit",
|
|
12857
|
-
target:
|
|
12189
|
+
target: getLinkHref2(anchor)
|
|
12858
12190
|
});
|
|
12859
12191
|
deselect();
|
|
12860
12192
|
}, [deselect]);
|
|
12861
|
-
const
|
|
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)(
|
|
12193
|
+
const handleLinkPopoverSubmit = (0, import_react10.useCallback)(
|
|
12959
12194
|
(target) => {
|
|
12960
12195
|
const session = linkPopoverSessionRef.current;
|
|
12961
12196
|
if (!session) return;
|
|
@@ -13014,19 +12249,19 @@ function OhhwellsBridge() {
|
|
|
13014
12249
|
const showEditLink = toolbarShowEditLink;
|
|
13015
12250
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
13016
12251
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
13017
|
-
const handleMediaReplace = (0,
|
|
12252
|
+
const handleMediaReplace = (0, import_react10.useCallback)(
|
|
13018
12253
|
(key) => {
|
|
13019
12254
|
postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
|
|
13020
12255
|
},
|
|
13021
12256
|
[postToParent2, mediaHover?.elementType]
|
|
13022
12257
|
);
|
|
13023
|
-
const handleEditCarousel = (0,
|
|
12258
|
+
const handleEditCarousel = (0, import_react10.useCallback)(
|
|
13024
12259
|
(key) => {
|
|
13025
12260
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
13026
12261
|
},
|
|
13027
12262
|
[postToParent2]
|
|
13028
12263
|
);
|
|
13029
|
-
const handleMediaFadeOutComplete = (0,
|
|
12264
|
+
const handleMediaFadeOutComplete = (0, import_react10.useCallback)((key) => {
|
|
13030
12265
|
setUploadingRects((prev) => {
|
|
13031
12266
|
if (!(key in prev)) return prev;
|
|
13032
12267
|
const next = { ...prev };
|
|
@@ -13034,7 +12269,7 @@ function OhhwellsBridge() {
|
|
|
13034
12269
|
return next;
|
|
13035
12270
|
});
|
|
13036
12271
|
}, []);
|
|
13037
|
-
const handleVideoSettingsChange = (0,
|
|
12272
|
+
const handleVideoSettingsChange = (0, import_react10.useCallback)(
|
|
13038
12273
|
(key, settings) => {
|
|
13039
12274
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
13040
12275
|
const video = getVideoEl(el);
|
|
@@ -13057,9 +12292,9 @@ function OhhwellsBridge() {
|
|
|
13057
12292
|
[postToParent2]
|
|
13058
12293
|
);
|
|
13059
12294
|
return bridgeRoot ? (0, import_react_dom3.createPortal)(
|
|
13060
|
-
/* @__PURE__ */ (0,
|
|
13061
|
-
/* @__PURE__ */ (0,
|
|
13062
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
12295
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
12296
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
12297
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13063
12298
|
MediaOverlay,
|
|
13064
12299
|
{
|
|
13065
12300
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -13070,7 +12305,7 @@ function OhhwellsBridge() {
|
|
|
13070
12305
|
},
|
|
13071
12306
|
`uploading-${key}`
|
|
13072
12307
|
)),
|
|
13073
|
-
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0,
|
|
12308
|
+
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13074
12309
|
MediaOverlay,
|
|
13075
12310
|
{
|
|
13076
12311
|
hover: mediaHover,
|
|
@@ -13079,11 +12314,11 @@ function OhhwellsBridge() {
|
|
|
13079
12314
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
13080
12315
|
}
|
|
13081
12316
|
),
|
|
13082
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
13083
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
13084
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
13085
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0,
|
|
13086
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
12317
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
|
|
12318
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
12319
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
12320
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
12321
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13087
12322
|
"div",
|
|
13088
12323
|
{
|
|
13089
12324
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -13093,7 +12328,7 @@ function OhhwellsBridge() {
|
|
|
13093
12328
|
width: slot.width,
|
|
13094
12329
|
height: slot.height
|
|
13095
12330
|
},
|
|
13096
|
-
children: /* @__PURE__ */ (0,
|
|
12331
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13097
12332
|
DropIndicator,
|
|
13098
12333
|
{
|
|
13099
12334
|
direction: slot.direction,
|
|
@@ -13104,7 +12339,7 @@ function OhhwellsBridge() {
|
|
|
13104
12339
|
},
|
|
13105
12340
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
13106
12341
|
)),
|
|
13107
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
12342
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13108
12343
|
"div",
|
|
13109
12344
|
{
|
|
13110
12345
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -13114,7 +12349,7 @@ function OhhwellsBridge() {
|
|
|
13114
12349
|
width: slot.width,
|
|
13115
12350
|
height: slot.height
|
|
13116
12351
|
},
|
|
13117
|
-
children: /* @__PURE__ */ (0,
|
|
12352
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13118
12353
|
DropIndicator,
|
|
13119
12354
|
{
|
|
13120
12355
|
direction: slot.direction,
|
|
@@ -13125,18 +12360,10 @@ function OhhwellsBridge() {
|
|
|
13125
12360
|
},
|
|
13126
12361
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
13127
12362
|
)),
|
|
13128
|
-
hoveredNavContainerRect &&
|
|
13129
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
13130
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
13131
|
-
|
|
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)(
|
|
12363
|
+
hoveredNavContainerRect && toolbarVariant !== "select-frame" && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
12364
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
12365
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
12366
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13140
12367
|
ItemInteractionLayer,
|
|
13141
12368
|
{
|
|
13142
12369
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -13150,23 +12377,21 @@ function OhhwellsBridge() {
|
|
|
13150
12377
|
onItemPointerDown: handleItemChromePointerDown,
|
|
13151
12378
|
onItemClick: handleItemChromeClick,
|
|
13152
12379
|
itemDragSurface: !isFooterFrameSelection,
|
|
13153
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0,
|
|
12380
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13154
12381
|
ItemActionToolbar,
|
|
13155
12382
|
{
|
|
13156
12383
|
onEditLink: openLinkPopoverForSelected,
|
|
13157
|
-
onSelectParent: handleSelectParent,
|
|
13158
|
-
onDuplicate: handleDuplicateSelected,
|
|
13159
12384
|
addItemDisabled: true,
|
|
13160
12385
|
editLinkDisabled: false,
|
|
13161
|
-
moreDisabled:
|
|
12386
|
+
moreDisabled: true,
|
|
13162
12387
|
showAddItem: !selectedIsCta,
|
|
13163
12388
|
showMore: !selectedIsCta
|
|
13164
12389
|
}
|
|
13165
12390
|
) : void 0
|
|
13166
12391
|
}
|
|
13167
12392
|
),
|
|
13168
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0,
|
|
13169
|
-
/* @__PURE__ */ (0,
|
|
12393
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
12394
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13170
12395
|
EditGlowChrome,
|
|
13171
12396
|
{
|
|
13172
12397
|
rect: toolbarRect,
|
|
@@ -13176,7 +12401,7 @@ function OhhwellsBridge() {
|
|
|
13176
12401
|
hideHandle: isItemDragging
|
|
13177
12402
|
}
|
|
13178
12403
|
),
|
|
13179
|
-
/* @__PURE__ */ (0,
|
|
12404
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13180
12405
|
FloatingToolbar,
|
|
13181
12406
|
{
|
|
13182
12407
|
rect: toolbarRect,
|
|
@@ -13189,7 +12414,7 @@ function OhhwellsBridge() {
|
|
|
13189
12414
|
}
|
|
13190
12415
|
)
|
|
13191
12416
|
] }),
|
|
13192
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
12417
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
13193
12418
|
"div",
|
|
13194
12419
|
{
|
|
13195
12420
|
"data-ohw-max-badge": "",
|
|
@@ -13215,7 +12440,7 @@ function OhhwellsBridge() {
|
|
|
13215
12440
|
]
|
|
13216
12441
|
}
|
|
13217
12442
|
),
|
|
13218
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
12443
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13219
12444
|
StateToggle,
|
|
13220
12445
|
{
|
|
13221
12446
|
rect: toggleState.rect,
|
|
@@ -13224,15 +12449,15 @@ function OhhwellsBridge() {
|
|
|
13224
12449
|
onStateChange: handleStateChange
|
|
13225
12450
|
}
|
|
13226
12451
|
),
|
|
13227
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
12452
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
13228
12453
|
"div",
|
|
13229
12454
|
{
|
|
13230
12455
|
"data-ohw-section-insert-line": "",
|
|
13231
12456
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
13232
12457
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
13233
12458
|
children: [
|
|
13234
|
-
/* @__PURE__ */ (0,
|
|
13235
|
-
/* @__PURE__ */ (0,
|
|
12459
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
|
|
12460
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13236
12461
|
Badge,
|
|
13237
12462
|
{
|
|
13238
12463
|
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",
|
|
@@ -13249,11 +12474,11 @@ function OhhwellsBridge() {
|
|
|
13249
12474
|
children: "Add Section"
|
|
13250
12475
|
}
|
|
13251
12476
|
),
|
|
13252
|
-
/* @__PURE__ */ (0,
|
|
12477
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
|
|
13253
12478
|
]
|
|
13254
12479
|
}
|
|
13255
12480
|
),
|
|
13256
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
12481
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
13257
12482
|
LinkPopover,
|
|
13258
12483
|
{
|
|
13259
12484
|
panelRef: linkPopoverPanelRef,
|
|
@@ -13281,12 +12506,6 @@ function OhhwellsBridge() {
|
|
|
13281
12506
|
CustomToolbarDivider,
|
|
13282
12507
|
DragHandle,
|
|
13283
12508
|
DropIndicator,
|
|
13284
|
-
DropdownMenu,
|
|
13285
|
-
DropdownMenuContent,
|
|
13286
|
-
DropdownMenuGroup,
|
|
13287
|
-
DropdownMenuItem,
|
|
13288
|
-
DropdownMenuSeparator,
|
|
13289
|
-
DropdownMenuTrigger,
|
|
13290
12509
|
ItemActionToolbar,
|
|
13291
12510
|
ItemInteractionLayer,
|
|
13292
12511
|
LinkEditorPanel,
|