@ohhwells/bridge 0.1.51-next.122 → 0.1.51-next.124
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 +1091 -428
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +26 -9
- package/dist/index.d.ts +26 -9
- package/dist/index.js +1075 -412
- package/dist/index.js.map +1 -1
- package/dist/styles.css +7 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -69,7 +69,7 @@ __export(index_exports, {
|
|
|
69
69
|
module.exports = __toCommonJS(index_exports);
|
|
70
70
|
|
|
71
71
|
// src/OhhwellsBridge.tsx
|
|
72
|
-
var
|
|
72
|
+
var import_react13 = __toESM(require("react"), 1);
|
|
73
73
|
var import_client = require("react-dom/client");
|
|
74
74
|
var import_react_dom2 = require("react-dom");
|
|
75
75
|
|
|
@@ -4587,10 +4587,57 @@ function ItemActionToolbar({
|
|
|
4587
4587
|
showEditLink = true,
|
|
4588
4588
|
showAddItem = true,
|
|
4589
4589
|
showMore = true,
|
|
4590
|
-
tooltipSide = "bottom"
|
|
4590
|
+
tooltipSide = "bottom",
|
|
4591
|
+
dropdownOpen = null,
|
|
4592
|
+
onDropdownOpenChange,
|
|
4593
|
+
headingVisible = null,
|
|
4594
|
+
onHeadingVisibleChange
|
|
4591
4595
|
}) {
|
|
4592
4596
|
const [moreOpen, setMoreOpen] = (0, import_react4.useState)(false);
|
|
4597
|
+
const showDropdownToggle = dropdownOpen !== null && dropdownOpen !== void 0;
|
|
4598
|
+
const showHeadingToggle = headingVisible !== null && headingVisible !== void 0;
|
|
4599
|
+
const headingTooltip = headingVisible ? "Hide heading" : "Show heading";
|
|
4593
4600
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(CustomToolbar, { children: [
|
|
4601
|
+
showDropdownToggle ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
4602
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4603
|
+
ToggleGroup,
|
|
4604
|
+
{
|
|
4605
|
+
value: dropdownOpen ? "open" : "closed",
|
|
4606
|
+
onValueChange: (value) => {
|
|
4607
|
+
if (value !== "open" && value !== "closed") return;
|
|
4608
|
+
onDropdownOpenChange?.(value === "open");
|
|
4609
|
+
},
|
|
4610
|
+
className: "h-7 gap-0.5 rounded-[calc(var(--radius,0.5rem)-2px)] bg-muted p-0.5",
|
|
4611
|
+
onMouseDown: (e) => {
|
|
4612
|
+
e.preventDefault();
|
|
4613
|
+
e.stopPropagation();
|
|
4614
|
+
},
|
|
4615
|
+
children: [
|
|
4616
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4617
|
+
ToggleGroupItem,
|
|
4618
|
+
{
|
|
4619
|
+
value: "closed",
|
|
4620
|
+
size: "sm",
|
|
4621
|
+
"aria-label": "Closed",
|
|
4622
|
+
className: "h-6 min-w-0 px-2 text-xs font-medium",
|
|
4623
|
+
children: "Closed"
|
|
4624
|
+
}
|
|
4625
|
+
),
|
|
4626
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4627
|
+
ToggleGroupItem,
|
|
4628
|
+
{
|
|
4629
|
+
value: "open",
|
|
4630
|
+
size: "sm",
|
|
4631
|
+
"aria-label": "Open",
|
|
4632
|
+
className: "h-6 min-w-0 px-2 text-xs font-medium",
|
|
4633
|
+
children: "Open"
|
|
4634
|
+
}
|
|
4635
|
+
)
|
|
4636
|
+
]
|
|
4637
|
+
}
|
|
4638
|
+
),
|
|
4639
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomToolbarDivider, {})
|
|
4640
|
+
] }) : null,
|
|
4594
4641
|
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4595
4642
|
ToolbarActionTooltip,
|
|
4596
4643
|
{
|
|
@@ -4629,6 +4676,26 @@ function ItemActionToolbar({
|
|
|
4629
4676
|
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Plus, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4630
4677
|
}
|
|
4631
4678
|
) : null,
|
|
4679
|
+
showHeadingToggle ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4680
|
+
ToolbarActionTooltip,
|
|
4681
|
+
{
|
|
4682
|
+
label: headingTooltip,
|
|
4683
|
+
side: tooltipSide,
|
|
4684
|
+
buttonProps: {
|
|
4685
|
+
active: Boolean(headingVisible),
|
|
4686
|
+
style: headingVisible ? {
|
|
4687
|
+
backgroundColor: "var(--ohw-primary, #0885FE)",
|
|
4688
|
+
color: "var(--ohw-primary-foreground, #FAFAF9)"
|
|
4689
|
+
} : void 0,
|
|
4690
|
+
onMouseDown: (e) => {
|
|
4691
|
+
e.preventDefault();
|
|
4692
|
+
e.stopPropagation();
|
|
4693
|
+
onHeadingVisibleChange?.(!headingVisible);
|
|
4694
|
+
}
|
|
4695
|
+
},
|
|
4696
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Heading, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4697
|
+
}
|
|
4698
|
+
) : null,
|
|
4632
4699
|
showMore ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { open: moreOpen, onOpenChange: setMoreOpen, children: [
|
|
4633
4700
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { open: moreOpen ? false : void 0, children: [
|
|
4634
4701
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuTrigger, { asChild: true, disabled: moreDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
@@ -4702,7 +4769,7 @@ function ItemActionToolbar({
|
|
|
4702
4769
|
}
|
|
4703
4770
|
|
|
4704
4771
|
// src/ui/item-interaction-layer.tsx
|
|
4705
|
-
var
|
|
4772
|
+
var import_react5 = require("react");
|
|
4706
4773
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
4707
4774
|
var PRIMARY = "var(--ohw-primary, #0885FE)";
|
|
4708
4775
|
var FOCUS_RING = `0 0 0 4px color-mix(in srgb, ${PRIMARY} 12%, transparent)`;
|
|
@@ -4754,8 +4821,8 @@ function ClampedToolbarSlot({
|
|
|
4754
4821
|
placement,
|
|
4755
4822
|
children
|
|
4756
4823
|
}) {
|
|
4757
|
-
const slotRef =
|
|
4758
|
-
|
|
4824
|
+
const slotRef = (0, import_react5.useRef)(null);
|
|
4825
|
+
(0, import_react5.useLayoutEffect)(() => {
|
|
4759
4826
|
const slot = slotRef.current;
|
|
4760
4827
|
if (!slot) return;
|
|
4761
4828
|
const clamp = () => {
|
|
@@ -4803,11 +4870,59 @@ function ClampedToolbarSlot({
|
|
|
4803
4870
|
}
|
|
4804
4871
|
);
|
|
4805
4872
|
}
|
|
4873
|
+
function DetachedBelowToolbarSlot({
|
|
4874
|
+
centerX,
|
|
4875
|
+
belowRect,
|
|
4876
|
+
children
|
|
4877
|
+
}) {
|
|
4878
|
+
const slotRef = (0, import_react5.useRef)(null);
|
|
4879
|
+
(0, import_react5.useLayoutEffect)(() => {
|
|
4880
|
+
const slot = slotRef.current;
|
|
4881
|
+
if (!slot) return;
|
|
4882
|
+
const clamp = () => {
|
|
4883
|
+
const toolbar = slot.firstElementChild;
|
|
4884
|
+
if (!toolbar) return;
|
|
4885
|
+
const w = toolbar.offsetWidth;
|
|
4886
|
+
if (w <= 0) return;
|
|
4887
|
+
const half = w / 2;
|
|
4888
|
+
const clampedCenter = Math.max(
|
|
4889
|
+
TOOLBAR_EDGE_MARGIN + half,
|
|
4890
|
+
Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN - half)
|
|
4891
|
+
);
|
|
4892
|
+
slot.style.left = `${clampedCenter}px`;
|
|
4893
|
+
};
|
|
4894
|
+
clamp();
|
|
4895
|
+
const ro = new ResizeObserver(clamp);
|
|
4896
|
+
ro.observe(slot);
|
|
4897
|
+
if (slot.firstElementChild) ro.observe(slot.firstElementChild);
|
|
4898
|
+
window.addEventListener("resize", clamp);
|
|
4899
|
+
return () => {
|
|
4900
|
+
ro.disconnect();
|
|
4901
|
+
window.removeEventListener("resize", clamp);
|
|
4902
|
+
};
|
|
4903
|
+
}, [centerX, belowRect, children]);
|
|
4904
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4905
|
+
"div",
|
|
4906
|
+
{
|
|
4907
|
+
ref: slotRef,
|
|
4908
|
+
className: "pointer-events-auto fixed",
|
|
4909
|
+
style: {
|
|
4910
|
+
top: belowRect.bottom + TOOLBAR_STROKE_GAP,
|
|
4911
|
+
left: centerX,
|
|
4912
|
+
transform: "translateX(-50%)",
|
|
4913
|
+
zIndex: getChromeZIndex("active-bottom")
|
|
4914
|
+
},
|
|
4915
|
+
"data-ohw-item-toolbar-anchor": "below-external",
|
|
4916
|
+
children
|
|
4917
|
+
}
|
|
4918
|
+
);
|
|
4919
|
+
}
|
|
4806
4920
|
function ItemInteractionLayer({
|
|
4807
4921
|
rect,
|
|
4808
4922
|
state,
|
|
4809
4923
|
elRef,
|
|
4810
4924
|
toolbar,
|
|
4925
|
+
toolbarBelowRect = null,
|
|
4811
4926
|
showHandle = false,
|
|
4812
4927
|
dragDisabled = false,
|
|
4813
4928
|
dragHandleLabel = "Reorder item",
|
|
@@ -4825,6 +4940,7 @@ function ItemInteractionLayer({
|
|
|
4825
4940
|
const showToolbar = isActive && toolbar;
|
|
4826
4941
|
const showDragHandle = (isActive || isDragging) && showHandle;
|
|
4827
4942
|
const itemDragEnabled = itemDragSurface && isActive && showHandle && !isDragging && !dragDisabled;
|
|
4943
|
+
const useDetachedBelowToolbar = Boolean(showToolbar && state === "active-bottom" && toolbarBelowRect);
|
|
4828
4944
|
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
4829
4945
|
"div",
|
|
4830
4946
|
{
|
|
@@ -4903,18 +5019,26 @@ function ItemInteractionLayer({
|
|
|
4903
5019
|
}
|
|
4904
5020
|
),
|
|
4905
5021
|
showToolbar && state === "active-top" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClampedToolbarSlot, { placement: "top", children: toolbar }),
|
|
4906
|
-
showToolbar && state === "active-bottom" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClampedToolbarSlot, { placement: "bottom", children: toolbar })
|
|
5022
|
+
showToolbar && state === "active-bottom" && !useDetachedBelowToolbar && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClampedToolbarSlot, { placement: "bottom", children: toolbar }),
|
|
5023
|
+
useDetachedBelowToolbar && toolbarBelowRect ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
5024
|
+
DetachedBelowToolbarSlot,
|
|
5025
|
+
{
|
|
5026
|
+
centerX: rect.left + rect.width / 2,
|
|
5027
|
+
belowRect: toolbarBelowRect,
|
|
5028
|
+
children: toolbar
|
|
5029
|
+
}
|
|
5030
|
+
) : null
|
|
4907
5031
|
]
|
|
4908
5032
|
}
|
|
4909
5033
|
);
|
|
4910
5034
|
}
|
|
4911
5035
|
|
|
4912
5036
|
// src/ui/MediaOverlay.tsx
|
|
4913
|
-
var
|
|
5037
|
+
var React6 = __toESM(require("react"), 1);
|
|
4914
5038
|
var import_lucide_react3 = require("lucide-react");
|
|
4915
5039
|
|
|
4916
5040
|
// src/ui/button.tsx
|
|
4917
|
-
var
|
|
5041
|
+
var React5 = __toESM(require("react"), 1);
|
|
4918
5042
|
var import_radix_ui5 = require("radix-ui");
|
|
4919
5043
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
4920
5044
|
var buttonVariants = cva(
|
|
@@ -4937,7 +5061,7 @@ var buttonVariants = cva(
|
|
|
4937
5061
|
}
|
|
4938
5062
|
}
|
|
4939
5063
|
);
|
|
4940
|
-
var Button =
|
|
5064
|
+
var Button = React5.forwardRef(
|
|
4941
5065
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
4942
5066
|
const Comp = asChild ? import_radix_ui5.Slot.Root : "button";
|
|
4943
5067
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
@@ -4989,7 +5113,7 @@ function MediaOverlay({
|
|
|
4989
5113
|
onVideoSettingsChange
|
|
4990
5114
|
}) {
|
|
4991
5115
|
const { rect } = hover;
|
|
4992
|
-
const skeletonRef =
|
|
5116
|
+
const skeletonRef = React6.useRef(null);
|
|
4993
5117
|
const isVideo = hover.elementType === "video";
|
|
4994
5118
|
const autoplay = hover.videoAutoplay ?? true;
|
|
4995
5119
|
const muted = hover.videoMuted ?? true;
|
|
@@ -5001,7 +5125,7 @@ function MediaOverlay({
|
|
|
5001
5125
|
height: rect.height,
|
|
5002
5126
|
zIndex: 2147483646
|
|
5003
5127
|
};
|
|
5004
|
-
|
|
5128
|
+
React6.useEffect(() => {
|
|
5005
5129
|
if (!isUploading || !fadingOut || !skeletonRef.current) return;
|
|
5006
5130
|
const anim = skeletonRef.current.animate([{ opacity: 1 }, { opacity: 0 }], {
|
|
5007
5131
|
duration: MEDIA_UPLOAD_FADE_MS,
|
|
@@ -5182,29 +5306,12 @@ function CarouselOverlay({
|
|
|
5182
5306
|
);
|
|
5183
5307
|
}
|
|
5184
5308
|
|
|
5185
|
-
// src/
|
|
5186
|
-
var
|
|
5187
|
-
var
|
|
5188
|
-
|
|
5189
|
-
// src/lib/session-search.ts
|
|
5190
|
-
var STORAGE_KEY = "ohw-preserved-search";
|
|
5191
|
-
function readPreservedSearch() {
|
|
5192
|
-
if (typeof window === "undefined") return "";
|
|
5193
|
-
const fromUrl = window.location.search;
|
|
5194
|
-
if (fromUrl && fromUrl !== "?") {
|
|
5195
|
-
sessionStorage.setItem(STORAGE_KEY, fromUrl);
|
|
5196
|
-
return fromUrl;
|
|
5197
|
-
}
|
|
5198
|
-
return sessionStorage.getItem(STORAGE_KEY) ?? "";
|
|
5199
|
-
}
|
|
5200
|
-
function isEditSessionActive() {
|
|
5201
|
-
const search = readPreservedSearch();
|
|
5202
|
-
if (!search || search === "?") return false;
|
|
5203
|
-
const q = search.startsWith("?") ? search.slice(1) : search;
|
|
5204
|
-
return new URLSearchParams(q).get("mode") === "edit";
|
|
5205
|
-
}
|
|
5309
|
+
// src/ui/ai-section/AiSectionOverlay.tsx
|
|
5310
|
+
var import_react6 = require("react");
|
|
5311
|
+
var import_lucide_react5 = require("lucide-react");
|
|
5206
5312
|
|
|
5207
5313
|
// src/lib/sections.ts
|
|
5314
|
+
var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
|
|
5208
5315
|
function titleCaseSectionId(id) {
|
|
5209
5316
|
return id.split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
|
|
5210
5317
|
}
|
|
@@ -5213,7 +5320,7 @@ function parseSectionsFromRoot(root) {
|
|
|
5213
5320
|
const sections = [];
|
|
5214
5321
|
for (const el of root.querySelectorAll("[data-ohw-section]")) {
|
|
5215
5322
|
const id = el.getAttribute("data-ohw-section") ?? "";
|
|
5216
|
-
if (!id || seen.has(id)) continue;
|
|
5323
|
+
if (!id || seen.has(id) || LINK_PICKER_EXCLUDED_IDS.has(id)) continue;
|
|
5217
5324
|
if (el.parentElement?.closest("[data-ohw-section]")) continue;
|
|
5218
5325
|
seen.add(id);
|
|
5219
5326
|
const label = el.getAttribute("data-ohw-section-label") ?? titleCaseSectionId(id);
|
|
@@ -5230,6 +5337,333 @@ function parseSectionsFromHtml(html) {
|
|
|
5230
5337
|
return parseSectionsFromRoot(doc);
|
|
5231
5338
|
}
|
|
5232
5339
|
|
|
5340
|
+
// src/ui/ai-section/AiSectionOverlay.tsx
|
|
5341
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
5342
|
+
function readRect(sectionId) {
|
|
5343
|
+
const el = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
|
|
5344
|
+
if (!el) return null;
|
|
5345
|
+
const r2 = el.getBoundingClientRect();
|
|
5346
|
+
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
5347
|
+
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
5348
|
+
}
|
|
5349
|
+
function useLiveSectionRect(sectionId) {
|
|
5350
|
+
const [rect, setRect] = (0, import_react6.useState)(null);
|
|
5351
|
+
(0, import_react6.useEffect)(() => {
|
|
5352
|
+
if (!sectionId) {
|
|
5353
|
+
setRect(null);
|
|
5354
|
+
return;
|
|
5355
|
+
}
|
|
5356
|
+
const update = () => {
|
|
5357
|
+
const next = readRect(sectionId);
|
|
5358
|
+
setRect(
|
|
5359
|
+
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
5360
|
+
);
|
|
5361
|
+
};
|
|
5362
|
+
update();
|
|
5363
|
+
const opts = { capture: true, passive: true };
|
|
5364
|
+
window.addEventListener("scroll", update, opts);
|
|
5365
|
+
window.addEventListener("resize", update);
|
|
5366
|
+
const el = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
|
|
5367
|
+
const ro = el ? new ResizeObserver(update) : null;
|
|
5368
|
+
if (el && ro) ro.observe(el);
|
|
5369
|
+
const interval = setInterval(update, 500);
|
|
5370
|
+
return () => {
|
|
5371
|
+
window.removeEventListener("scroll", update, opts);
|
|
5372
|
+
window.removeEventListener("resize", update);
|
|
5373
|
+
ro?.disconnect();
|
|
5374
|
+
clearInterval(interval);
|
|
5375
|
+
};
|
|
5376
|
+
}, [sectionId]);
|
|
5377
|
+
return rect;
|
|
5378
|
+
}
|
|
5379
|
+
var PRIMARY2 = "#0885FE";
|
|
5380
|
+
function edgeAwareRadius(rect) {
|
|
5381
|
+
const container = window.innerWidth <= 480 ? 16 : 24;
|
|
5382
|
+
const docHeight = document.documentElement.scrollHeight;
|
|
5383
|
+
const atTop = rect.top + window.scrollY <= 4;
|
|
5384
|
+
const atBottom = rect.top + rect.height + window.scrollY >= docHeight - 4;
|
|
5385
|
+
const top = atTop ? container : 4;
|
|
5386
|
+
const bottom = atBottom ? container : 4;
|
|
5387
|
+
return `${top}px ${top}px ${bottom}px ${bottom}px`;
|
|
5388
|
+
}
|
|
5389
|
+
function ReviewButton({
|
|
5390
|
+
label,
|
|
5391
|
+
onClick,
|
|
5392
|
+
children,
|
|
5393
|
+
background,
|
|
5394
|
+
color
|
|
5395
|
+
}) {
|
|
5396
|
+
const [hover, setHover] = (0, import_react6.useState)(false);
|
|
5397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { position: "relative" }, children: [
|
|
5398
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5399
|
+
"button",
|
|
5400
|
+
{
|
|
5401
|
+
type: "button",
|
|
5402
|
+
"aria-label": label,
|
|
5403
|
+
onClick,
|
|
5404
|
+
onMouseEnter: () => setHover(true),
|
|
5405
|
+
onMouseLeave: () => setHover(false),
|
|
5406
|
+
style: {
|
|
5407
|
+
width: 32,
|
|
5408
|
+
height: 32,
|
|
5409
|
+
display: "flex",
|
|
5410
|
+
alignItems: "center",
|
|
5411
|
+
justifyContent: "center",
|
|
5412
|
+
borderRadius: 8,
|
|
5413
|
+
border: "none",
|
|
5414
|
+
cursor: "pointer",
|
|
5415
|
+
background,
|
|
5416
|
+
color,
|
|
5417
|
+
boxShadow: "0 2px 6px rgba(0,0,0,0.15)"
|
|
5418
|
+
},
|
|
5419
|
+
children
|
|
5420
|
+
}
|
|
5421
|
+
),
|
|
5422
|
+
hover && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5423
|
+
"div",
|
|
5424
|
+
{
|
|
5425
|
+
style: {
|
|
5426
|
+
position: "absolute",
|
|
5427
|
+
top: "100%",
|
|
5428
|
+
left: "50%",
|
|
5429
|
+
transform: "translateX(-50%)",
|
|
5430
|
+
marginTop: 6,
|
|
5431
|
+
background: "#0c0a09",
|
|
5432
|
+
color: "#ffffff",
|
|
5433
|
+
fontSize: 12,
|
|
5434
|
+
lineHeight: "16px",
|
|
5435
|
+
padding: "4px 8px",
|
|
5436
|
+
borderRadius: 8,
|
|
5437
|
+
whiteSpace: "nowrap",
|
|
5438
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
5439
|
+
pointerEvents: "none"
|
|
5440
|
+
},
|
|
5441
|
+
children: label
|
|
5442
|
+
}
|
|
5443
|
+
)
|
|
5444
|
+
] });
|
|
5445
|
+
}
|
|
5446
|
+
function AiSectionOverlay({
|
|
5447
|
+
postToParent: postToParent2,
|
|
5448
|
+
apiRef
|
|
5449
|
+
}) {
|
|
5450
|
+
const [selectedId, setSelectedId] = (0, import_react6.useState)(null);
|
|
5451
|
+
const [reviewId, setReviewId] = (0, import_react6.useState)(null);
|
|
5452
|
+
const reviewIdRef = (0, import_react6.useRef)(null);
|
|
5453
|
+
reviewIdRef.current = reviewId;
|
|
5454
|
+
const selectedIdRef = (0, import_react6.useRef)(null);
|
|
5455
|
+
selectedIdRef.current = selectedId;
|
|
5456
|
+
const report = (0, import_react6.useCallback)(
|
|
5457
|
+
(el) => {
|
|
5458
|
+
postToParent2({
|
|
5459
|
+
type: "ow:section-selected",
|
|
5460
|
+
sectionId: el?.dataset.ohwSection ?? null,
|
|
5461
|
+
sectionLabel: el ? el.dataset.ohwSectionLabel ?? titleCaseSectionId(el.dataset.ohwSection ?? "") : null
|
|
5462
|
+
});
|
|
5463
|
+
},
|
|
5464
|
+
[postToParent2]
|
|
5465
|
+
);
|
|
5466
|
+
const selectFromElement = (0, import_react6.useCallback)(
|
|
5467
|
+
(el, options) => {
|
|
5468
|
+
const sectionEl = el?.closest("[data-ohw-section]") ?? null;
|
|
5469
|
+
const id = sectionEl?.dataset.ohwSection ?? null;
|
|
5470
|
+
if (id === selectedIdRef.current) return;
|
|
5471
|
+
setSelectedId(id);
|
|
5472
|
+
if (options?.report !== false) report(sectionEl);
|
|
5473
|
+
},
|
|
5474
|
+
[report]
|
|
5475
|
+
);
|
|
5476
|
+
(0, import_react6.useEffect)(() => {
|
|
5477
|
+
apiRef.current = {
|
|
5478
|
+
selectFromElement,
|
|
5479
|
+
handleBackgroundClick: (target, clientX, clientY) => {
|
|
5480
|
+
let sectionEl = target?.closest("[data-ohw-section]") ?? null;
|
|
5481
|
+
if (!sectionEl && clientX !== void 0 && clientY !== void 0) {
|
|
5482
|
+
const beneath = document.elementsFromPoint(clientX, clientY).find(
|
|
5483
|
+
(el) => el instanceof HTMLElement && !el.closest("[data-ohw-bridge-root]") && el.closest("[data-ohw-section]") != null
|
|
5484
|
+
);
|
|
5485
|
+
sectionEl = beneath?.closest("[data-ohw-section]") ?? null;
|
|
5486
|
+
}
|
|
5487
|
+
selectFromElement(sectionEl);
|
|
5488
|
+
return sectionEl != null;
|
|
5489
|
+
},
|
|
5490
|
+
clear: () => setSelectedId(null)
|
|
5491
|
+
};
|
|
5492
|
+
return () => {
|
|
5493
|
+
apiRef.current = null;
|
|
5494
|
+
};
|
|
5495
|
+
}, [apiRef, selectFromElement]);
|
|
5496
|
+
(0, import_react6.useEffect)(() => {
|
|
5497
|
+
const onMessage = (e) => {
|
|
5498
|
+
if (e.data?.type === "ow:ai-select" && e.data.sectionId === null) {
|
|
5499
|
+
setSelectedId(null);
|
|
5500
|
+
return;
|
|
5501
|
+
}
|
|
5502
|
+
if (e.data?.type === "ow:ai-review") {
|
|
5503
|
+
const sectionId = e.data.sectionId;
|
|
5504
|
+
if (sectionId === null) {
|
|
5505
|
+
setReviewId(null);
|
|
5506
|
+
return;
|
|
5507
|
+
}
|
|
5508
|
+
const found = readRect(sectionId) != null;
|
|
5509
|
+
setReviewId(found ? sectionId : null);
|
|
5510
|
+
postToParent2({ type: "ow:ai-review-started", sectionId, found });
|
|
5511
|
+
if (found) {
|
|
5512
|
+
document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
5513
|
+
}
|
|
5514
|
+
}
|
|
5515
|
+
};
|
|
5516
|
+
window.addEventListener("message", onMessage);
|
|
5517
|
+
return () => window.removeEventListener("message", onMessage);
|
|
5518
|
+
}, [postToParent2]);
|
|
5519
|
+
const [hoveredId, setHoveredId] = (0, import_react6.useState)(null);
|
|
5520
|
+
(0, import_react6.useEffect)(() => {
|
|
5521
|
+
const onMove = (e) => {
|
|
5522
|
+
const t = e.target;
|
|
5523
|
+
if (!(t instanceof HTMLElement)) return;
|
|
5524
|
+
if (t.closest(
|
|
5525
|
+
"[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review]"
|
|
5526
|
+
)) {
|
|
5527
|
+
setHoveredId(null);
|
|
5528
|
+
return;
|
|
5529
|
+
}
|
|
5530
|
+
const sec = t.closest("[data-ohw-section]");
|
|
5531
|
+
setHoveredId(sec?.dataset.ohwSection ?? null);
|
|
5532
|
+
};
|
|
5533
|
+
const onLeave = () => setHoveredId(null);
|
|
5534
|
+
document.addEventListener("mousemove", onMove, { passive: true });
|
|
5535
|
+
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
5536
|
+
return () => {
|
|
5537
|
+
document.removeEventListener("mousemove", onMove);
|
|
5538
|
+
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
5539
|
+
};
|
|
5540
|
+
}, []);
|
|
5541
|
+
(0, import_react6.useEffect)(() => {
|
|
5542
|
+
const onKeyDown = (e) => {
|
|
5543
|
+
if (e.key !== "Escape") return;
|
|
5544
|
+
if (reviewIdRef.current) return;
|
|
5545
|
+
if (document.querySelector("[data-ohw-editing]")) return;
|
|
5546
|
+
if (selectedIdRef.current) {
|
|
5547
|
+
setSelectedId(null);
|
|
5548
|
+
report(null);
|
|
5549
|
+
}
|
|
5550
|
+
};
|
|
5551
|
+
document.addEventListener("keydown", onKeyDown);
|
|
5552
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
5553
|
+
}, [report]);
|
|
5554
|
+
const decide = (0, import_react6.useCallback)(
|
|
5555
|
+
(decision) => {
|
|
5556
|
+
const sectionId = reviewIdRef.current;
|
|
5557
|
+
if (!sectionId) return;
|
|
5558
|
+
setReviewId(null);
|
|
5559
|
+
postToParent2({ type: "ow:ai-review-decision", sectionId, decision });
|
|
5560
|
+
},
|
|
5561
|
+
[postToParent2]
|
|
5562
|
+
);
|
|
5563
|
+
const selectionRect = useLiveSectionRect(reviewId ? null : selectedId);
|
|
5564
|
+
const reviewRect = useLiveSectionRect(reviewId);
|
|
5565
|
+
const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
|
|
5566
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
5567
|
+
hoverRect && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5568
|
+
"div",
|
|
5569
|
+
{
|
|
5570
|
+
"data-ohw-ai-section-hover": "",
|
|
5571
|
+
"aria-hidden": true,
|
|
5572
|
+
style: {
|
|
5573
|
+
position: "fixed",
|
|
5574
|
+
top: hoverRect.top,
|
|
5575
|
+
left: hoverRect.left,
|
|
5576
|
+
width: hoverRect.width,
|
|
5577
|
+
height: hoverRect.height,
|
|
5578
|
+
border: `2px solid rgba(8, 133, 254, 0.45)`,
|
|
5579
|
+
borderRadius: edgeAwareRadius(hoverRect),
|
|
5580
|
+
pointerEvents: "none",
|
|
5581
|
+
zIndex: 2147482900
|
|
5582
|
+
}
|
|
5583
|
+
}
|
|
5584
|
+
),
|
|
5585
|
+
selectionRect && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5586
|
+
"div",
|
|
5587
|
+
{
|
|
5588
|
+
"data-ohw-ai-section-selected": "",
|
|
5589
|
+
"aria-hidden": true,
|
|
5590
|
+
style: {
|
|
5591
|
+
position: "fixed",
|
|
5592
|
+
top: selectionRect.top,
|
|
5593
|
+
left: selectionRect.left,
|
|
5594
|
+
width: selectionRect.width,
|
|
5595
|
+
height: selectionRect.height,
|
|
5596
|
+
border: `2px solid ${PRIMARY2}`,
|
|
5597
|
+
borderRadius: edgeAwareRadius(selectionRect),
|
|
5598
|
+
pointerEvents: "none",
|
|
5599
|
+
zIndex: 2147483e3
|
|
5600
|
+
}
|
|
5601
|
+
}
|
|
5602
|
+
),
|
|
5603
|
+
reviewRect && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5604
|
+
"div",
|
|
5605
|
+
{
|
|
5606
|
+
"data-ohw-ai-review": "",
|
|
5607
|
+
style: {
|
|
5608
|
+
position: "fixed",
|
|
5609
|
+
top: reviewRect.top,
|
|
5610
|
+
left: reviewRect.left,
|
|
5611
|
+
width: reviewRect.width,
|
|
5612
|
+
height: reviewRect.height,
|
|
5613
|
+
border: `2px solid ${PRIMARY2}`,
|
|
5614
|
+
borderRadius: edgeAwareRadius(reviewRect),
|
|
5615
|
+
zIndex: 2147483200,
|
|
5616
|
+
// The veil itself: swallows clicks so the section stays locked until decided.
|
|
5617
|
+
background: "rgba(8, 133, 254, 0.04)",
|
|
5618
|
+
pointerEvents: "auto",
|
|
5619
|
+
cursor: "default"
|
|
5620
|
+
},
|
|
5621
|
+
onClick: (e) => e.stopPropagation(),
|
|
5622
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
5623
|
+
"div",
|
|
5624
|
+
{
|
|
5625
|
+
style: {
|
|
5626
|
+
position: "sticky",
|
|
5627
|
+
top: 12,
|
|
5628
|
+
display: "flex",
|
|
5629
|
+
gap: 8,
|
|
5630
|
+
justifyContent: "flex-end",
|
|
5631
|
+
paddingRight: 12,
|
|
5632
|
+
paddingTop: 12
|
|
5633
|
+
},
|
|
5634
|
+
children: [
|
|
5635
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
|
|
5636
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
|
|
5637
|
+
]
|
|
5638
|
+
}
|
|
5639
|
+
)
|
|
5640
|
+
}
|
|
5641
|
+
)
|
|
5642
|
+
] });
|
|
5643
|
+
}
|
|
5644
|
+
|
|
5645
|
+
// src/OhhwellsBridge.tsx
|
|
5646
|
+
var import_react_dom3 = require("react-dom");
|
|
5647
|
+
var import_navigation2 = require("next/navigation");
|
|
5648
|
+
|
|
5649
|
+
// src/lib/session-search.ts
|
|
5650
|
+
var STORAGE_KEY = "ohw-preserved-search";
|
|
5651
|
+
function readPreservedSearch() {
|
|
5652
|
+
if (typeof window === "undefined") return "";
|
|
5653
|
+
const fromUrl = window.location.search;
|
|
5654
|
+
if (fromUrl && fromUrl !== "?") {
|
|
5655
|
+
sessionStorage.setItem(STORAGE_KEY, fromUrl);
|
|
5656
|
+
return fromUrl;
|
|
5657
|
+
}
|
|
5658
|
+
return sessionStorage.getItem(STORAGE_KEY) ?? "";
|
|
5659
|
+
}
|
|
5660
|
+
function isEditSessionActive() {
|
|
5661
|
+
const search = readPreservedSearch();
|
|
5662
|
+
if (!search || search === "?") return false;
|
|
5663
|
+
const q = search.startsWith("?") ? search.slice(1) : search;
|
|
5664
|
+
return new URLSearchParams(q).get("mode") === "edit";
|
|
5665
|
+
}
|
|
5666
|
+
|
|
5233
5667
|
// src/ui/link-modal/linkModal.utils.ts
|
|
5234
5668
|
function parseTarget(target) {
|
|
5235
5669
|
if (!target) return { pageRoute: "", sectionId: null };
|
|
@@ -5462,28 +5896,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
5462
5896
|
}
|
|
5463
5897
|
|
|
5464
5898
|
// src/ui/link-modal/LinkPopover.tsx
|
|
5465
|
-
var
|
|
5899
|
+
var import_react10 = require("react");
|
|
5466
5900
|
|
|
5467
5901
|
// src/ui/dialog.tsx
|
|
5468
|
-
var
|
|
5902
|
+
var React7 = __toESM(require("react"), 1);
|
|
5469
5903
|
var import_radix_ui6 = require("radix-ui");
|
|
5470
|
-
var
|
|
5471
|
-
var
|
|
5904
|
+
var import_lucide_react6 = require("lucide-react");
|
|
5905
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
5472
5906
|
function Dialog2({
|
|
5473
5907
|
...props
|
|
5474
5908
|
}) {
|
|
5475
|
-
return /* @__PURE__ */ (0,
|
|
5909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
5476
5910
|
}
|
|
5477
5911
|
function DialogPortal({
|
|
5478
5912
|
...props
|
|
5479
5913
|
}) {
|
|
5480
|
-
return /* @__PURE__ */ (0,
|
|
5914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
5481
5915
|
}
|
|
5482
5916
|
function DialogOverlay({
|
|
5483
5917
|
className,
|
|
5484
5918
|
...props
|
|
5485
5919
|
}) {
|
|
5486
|
-
return /* @__PURE__ */ (0,
|
|
5920
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5487
5921
|
import_radix_ui6.Dialog.Overlay,
|
|
5488
5922
|
{
|
|
5489
5923
|
"data-slot": "dialog-overlay",
|
|
@@ -5493,12 +5927,12 @@ function DialogOverlay({
|
|
|
5493
5927
|
}
|
|
5494
5928
|
);
|
|
5495
5929
|
}
|
|
5496
|
-
var DialogContent =
|
|
5930
|
+
var DialogContent = React7.forwardRef(
|
|
5497
5931
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
5498
5932
|
const positionMode = container ? "absolute" : "fixed";
|
|
5499
|
-
return /* @__PURE__ */ (0,
|
|
5500
|
-
/* @__PURE__ */ (0,
|
|
5501
|
-
/* @__PURE__ */ (0,
|
|
5933
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
5934
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
5935
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
5502
5936
|
import_radix_ui6.Dialog.Content,
|
|
5503
5937
|
{
|
|
5504
5938
|
ref,
|
|
@@ -5514,13 +5948,13 @@ var DialogContent = React8.forwardRef(
|
|
|
5514
5948
|
...props,
|
|
5515
5949
|
children: [
|
|
5516
5950
|
children,
|
|
5517
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
5951
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5518
5952
|
import_radix_ui6.Dialog.Close,
|
|
5519
5953
|
{
|
|
5520
5954
|
type: "button",
|
|
5521
5955
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
5522
5956
|
"aria-label": "Close",
|
|
5523
|
-
children: /* @__PURE__ */ (0,
|
|
5957
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.X, { size: 16, "aria-hidden": true })
|
|
5524
5958
|
}
|
|
5525
5959
|
) : null
|
|
5526
5960
|
]
|
|
@@ -5534,13 +5968,13 @@ function DialogHeader({
|
|
|
5534
5968
|
className,
|
|
5535
5969
|
...props
|
|
5536
5970
|
}) {
|
|
5537
|
-
return /* @__PURE__ */ (0,
|
|
5971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
5538
5972
|
}
|
|
5539
5973
|
function DialogFooter({
|
|
5540
5974
|
className,
|
|
5541
5975
|
...props
|
|
5542
5976
|
}) {
|
|
5543
|
-
return /* @__PURE__ */ (0,
|
|
5977
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5544
5978
|
"div",
|
|
5545
5979
|
{
|
|
5546
5980
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -5548,7 +5982,7 @@ function DialogFooter({
|
|
|
5548
5982
|
}
|
|
5549
5983
|
);
|
|
5550
5984
|
}
|
|
5551
|
-
var DialogTitle =
|
|
5985
|
+
var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5552
5986
|
import_radix_ui6.Dialog.Title,
|
|
5553
5987
|
{
|
|
5554
5988
|
ref,
|
|
@@ -5560,7 +5994,7 @@ var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
5560
5994
|
}
|
|
5561
5995
|
));
|
|
5562
5996
|
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
5563
|
-
var DialogDescription =
|
|
5997
|
+
var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5564
5998
|
import_radix_ui6.Dialog.Description,
|
|
5565
5999
|
{
|
|
5566
6000
|
ref,
|
|
@@ -5572,63 +6006,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
|
5572
6006
|
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
5573
6007
|
|
|
5574
6008
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
5575
|
-
var
|
|
6009
|
+
var import_lucide_react10 = require("lucide-react");
|
|
5576
6010
|
|
|
5577
6011
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
5578
|
-
var
|
|
5579
|
-
var
|
|
6012
|
+
var import_lucide_react7 = require("lucide-react");
|
|
6013
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
5580
6014
|
function DestinationBreadcrumb({
|
|
5581
6015
|
pageTitle,
|
|
5582
6016
|
sectionLabel
|
|
5583
6017
|
}) {
|
|
5584
|
-
return /* @__PURE__ */ (0,
|
|
5585
|
-
/* @__PURE__ */ (0,
|
|
5586
|
-
/* @__PURE__ */ (0,
|
|
5587
|
-
/* @__PURE__ */ (0,
|
|
5588
|
-
/* @__PURE__ */ (0,
|
|
5589
|
-
/* @__PURE__ */ (0,
|
|
6018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
6019
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
6020
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
6021
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
6022
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
6023
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
5590
6024
|
] }),
|
|
5591
|
-
/* @__PURE__ */ (0,
|
|
5592
|
-
|
|
6025
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
6026
|
+
import_lucide_react7.ArrowRight,
|
|
5593
6027
|
{
|
|
5594
6028
|
size: 16,
|
|
5595
6029
|
className: "shrink-0 text-muted-foreground",
|
|
5596
6030
|
"aria-hidden": true
|
|
5597
6031
|
}
|
|
5598
6032
|
),
|
|
5599
|
-
/* @__PURE__ */ (0,
|
|
5600
|
-
/* @__PURE__ */ (0,
|
|
5601
|
-
|
|
6033
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
6034
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
6035
|
+
import_lucide_react7.GalleryVertical,
|
|
5602
6036
|
{
|
|
5603
6037
|
size: 16,
|
|
5604
6038
|
className: "shrink-0 text-foreground",
|
|
5605
6039
|
"aria-hidden": true
|
|
5606
6040
|
}
|
|
5607
6041
|
),
|
|
5608
|
-
/* @__PURE__ */ (0,
|
|
6042
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
5609
6043
|
] })
|
|
5610
6044
|
] })
|
|
5611
6045
|
] });
|
|
5612
6046
|
}
|
|
5613
6047
|
|
|
5614
6048
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
5615
|
-
var
|
|
5616
|
-
var
|
|
6049
|
+
var import_lucide_react8 = require("lucide-react");
|
|
6050
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
5617
6051
|
function SectionTreeItem({
|
|
5618
6052
|
section,
|
|
5619
6053
|
onSelect,
|
|
5620
6054
|
selected
|
|
5621
6055
|
}) {
|
|
5622
6056
|
const interactive = Boolean(onSelect);
|
|
5623
|
-
return /* @__PURE__ */ (0,
|
|
5624
|
-
/* @__PURE__ */ (0,
|
|
6057
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
6058
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
5625
6059
|
"div",
|
|
5626
6060
|
{
|
|
5627
6061
|
className: "mr-[-1px] h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
5628
6062
|
"aria-hidden": true
|
|
5629
6063
|
}
|
|
5630
6064
|
),
|
|
5631
|
-
/* @__PURE__ */ (0,
|
|
6065
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
5632
6066
|
"div",
|
|
5633
6067
|
{
|
|
5634
6068
|
role: interactive ? "button" : void 0,
|
|
@@ -5646,15 +6080,15 @@ function SectionTreeItem({
|
|
|
5646
6080
|
interactive && selected && "border-primary"
|
|
5647
6081
|
),
|
|
5648
6082
|
children: [
|
|
5649
|
-
/* @__PURE__ */ (0,
|
|
5650
|
-
|
|
6083
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
6084
|
+
import_lucide_react8.GalleryVertical,
|
|
5651
6085
|
{
|
|
5652
6086
|
size: 16,
|
|
5653
6087
|
className: "shrink-0 text-foreground",
|
|
5654
6088
|
"aria-hidden": true
|
|
5655
6089
|
}
|
|
5656
6090
|
),
|
|
5657
|
-
/* @__PURE__ */ (0,
|
|
6091
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
5658
6092
|
]
|
|
5659
6093
|
}
|
|
5660
6094
|
)
|
|
@@ -5662,14 +6096,14 @@ function SectionTreeItem({
|
|
|
5662
6096
|
}
|
|
5663
6097
|
|
|
5664
6098
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
5665
|
-
var
|
|
6099
|
+
var import_react7 = require("react");
|
|
5666
6100
|
|
|
5667
6101
|
// src/ui/input.tsx
|
|
5668
|
-
var
|
|
5669
|
-
var
|
|
5670
|
-
var Input =
|
|
6102
|
+
var React8 = __toESM(require("react"), 1);
|
|
6103
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
6104
|
+
var Input = React8.forwardRef(
|
|
5671
6105
|
({ className, type, ...props }, ref) => {
|
|
5672
|
-
return /* @__PURE__ */ (0,
|
|
6106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
5673
6107
|
"input",
|
|
5674
6108
|
{
|
|
5675
6109
|
type,
|
|
@@ -5688,9 +6122,9 @@ Input.displayName = "Input";
|
|
|
5688
6122
|
|
|
5689
6123
|
// src/ui/label.tsx
|
|
5690
6124
|
var import_radix_ui7 = require("radix-ui");
|
|
5691
|
-
var
|
|
6125
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
5692
6126
|
function Label({ className, ...props }) {
|
|
5693
|
-
return /* @__PURE__ */ (0,
|
|
6127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5694
6128
|
import_radix_ui7.Label.Root,
|
|
5695
6129
|
{
|
|
5696
6130
|
"data-slot": "label",
|
|
@@ -5701,12 +6135,12 @@ function Label({ className, ...props }) {
|
|
|
5701
6135
|
}
|
|
5702
6136
|
|
|
5703
6137
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
5704
|
-
var
|
|
5705
|
-
var
|
|
6138
|
+
var import_lucide_react9 = require("lucide-react");
|
|
6139
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
5706
6140
|
function FieldChevron({
|
|
5707
6141
|
onClick
|
|
5708
6142
|
}) {
|
|
5709
|
-
return /* @__PURE__ */ (0,
|
|
6143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5710
6144
|
"button",
|
|
5711
6145
|
{
|
|
5712
6146
|
type: "button",
|
|
@@ -5714,7 +6148,7 @@ function FieldChevron({
|
|
|
5714
6148
|
onClick,
|
|
5715
6149
|
"aria-label": "Open page list",
|
|
5716
6150
|
tabIndex: -1,
|
|
5717
|
-
children: /* @__PURE__ */ (0,
|
|
6151
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.ChevronDown, { size: 16 })
|
|
5718
6152
|
}
|
|
5719
6153
|
);
|
|
5720
6154
|
}
|
|
@@ -5730,11 +6164,11 @@ function UrlOrPageInput({
|
|
|
5730
6164
|
readOnly = false,
|
|
5731
6165
|
urlError
|
|
5732
6166
|
}) {
|
|
5733
|
-
const inputId = (0,
|
|
5734
|
-
const inputRef = (0,
|
|
5735
|
-
const rootRef = (0,
|
|
5736
|
-
const [isFocused, setIsFocused] = (0,
|
|
5737
|
-
(0,
|
|
6167
|
+
const inputId = (0, import_react7.useId)();
|
|
6168
|
+
const inputRef = (0, import_react7.useRef)(null);
|
|
6169
|
+
const rootRef = (0, import_react7.useRef)(null);
|
|
6170
|
+
const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
|
|
6171
|
+
(0, import_react7.useEffect)(() => {
|
|
5738
6172
|
if (!dropdownOpen) return;
|
|
5739
6173
|
const isOutside = (e) => {
|
|
5740
6174
|
const root = rootRef.current;
|
|
@@ -5775,19 +6209,19 @@ function UrlOrPageInput({
|
|
|
5775
6209
|
"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]",
|
|
5776
6210
|
urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
|
|
5777
6211
|
);
|
|
5778
|
-
return /* @__PURE__ */ (0,
|
|
5779
|
-
/* @__PURE__ */ (0,
|
|
5780
|
-
/* @__PURE__ */ (0,
|
|
5781
|
-
/* @__PURE__ */ (0,
|
|
5782
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
5783
|
-
|
|
6212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
6213
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
6214
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
6215
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
6216
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
6217
|
+
import_lucide_react9.File,
|
|
5784
6218
|
{
|
|
5785
6219
|
size: 16,
|
|
5786
6220
|
className: "shrink-0 text-foreground",
|
|
5787
6221
|
"aria-hidden": true
|
|
5788
6222
|
}
|
|
5789
6223
|
) }) : null,
|
|
5790
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
6224
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5791
6225
|
Input,
|
|
5792
6226
|
{
|
|
5793
6227
|
ref: inputRef,
|
|
@@ -5813,7 +6247,7 @@ function UrlOrPageInput({
|
|
|
5813
6247
|
)
|
|
5814
6248
|
}
|
|
5815
6249
|
),
|
|
5816
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
6250
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5817
6251
|
"button",
|
|
5818
6252
|
{
|
|
5819
6253
|
type: "button",
|
|
@@ -5821,26 +6255,26 @@ function UrlOrPageInput({
|
|
|
5821
6255
|
onMouseDown: clearSelection,
|
|
5822
6256
|
"aria-label": "Clear selected page",
|
|
5823
6257
|
tabIndex: -1,
|
|
5824
|
-
children: /* @__PURE__ */ (0,
|
|
6258
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.X, { size: 16, "aria-hidden": true })
|
|
5825
6259
|
}
|
|
5826
6260
|
) : null,
|
|
5827
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
6261
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
5828
6262
|
] }),
|
|
5829
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
6263
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5830
6264
|
"div",
|
|
5831
6265
|
{
|
|
5832
6266
|
"data-ohw-link-page-dropdown": "",
|
|
5833
6267
|
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",
|
|
5834
6268
|
onMouseDown: (e) => e.preventDefault(),
|
|
5835
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
6269
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
5836
6270
|
"button",
|
|
5837
6271
|
{
|
|
5838
6272
|
type: "button",
|
|
5839
6273
|
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",
|
|
5840
6274
|
onClick: () => onPageSelect(page),
|
|
5841
6275
|
children: [
|
|
5842
|
-
/* @__PURE__ */ (0,
|
|
5843
|
-
/* @__PURE__ */ (0,
|
|
6276
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
6277
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate", children: page.title })
|
|
5844
6278
|
]
|
|
5845
6279
|
},
|
|
5846
6280
|
page.path
|
|
@@ -5848,34 +6282,34 @@ function UrlOrPageInput({
|
|
|
5848
6282
|
}
|
|
5849
6283
|
) : null
|
|
5850
6284
|
] }),
|
|
5851
|
-
urlError ? /* @__PURE__ */ (0,
|
|
6285
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
5852
6286
|
] });
|
|
5853
6287
|
}
|
|
5854
6288
|
|
|
5855
6289
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
5856
|
-
var
|
|
6290
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
5857
6291
|
function LinkEditorPanel({ state, onClose }) {
|
|
5858
6292
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
5859
|
-
return /* @__PURE__ */ (0,
|
|
5860
|
-
/* @__PURE__ */ (0,
|
|
6293
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
6294
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
5861
6295
|
"button",
|
|
5862
6296
|
{
|
|
5863
6297
|
type: "button",
|
|
5864
6298
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
5865
6299
|
"aria-label": "Close",
|
|
5866
6300
|
onClick: onClose,
|
|
5867
|
-
children: /* @__PURE__ */ (0,
|
|
6301
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.X, { size: 16, "aria-hidden": true })
|
|
5868
6302
|
}
|
|
5869
6303
|
) }),
|
|
5870
|
-
/* @__PURE__ */ (0,
|
|
5871
|
-
/* @__PURE__ */ (0,
|
|
5872
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
6304
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
6305
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
6306
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
5873
6307
|
DestinationBreadcrumb,
|
|
5874
6308
|
{
|
|
5875
6309
|
pageTitle: state.selectedPage.title,
|
|
5876
6310
|
sectionLabel: state.selectedSection.label
|
|
5877
6311
|
}
|
|
5878
|
-
) : /* @__PURE__ */ (0,
|
|
6312
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
5879
6313
|
UrlOrPageInput,
|
|
5880
6314
|
{
|
|
5881
6315
|
value: state.searchValue,
|
|
@@ -5888,8 +6322,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5888
6322
|
urlError: state.urlError
|
|
5889
6323
|
}
|
|
5890
6324
|
),
|
|
5891
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
5892
|
-
/* @__PURE__ */ (0,
|
|
6325
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
6326
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
5893
6327
|
Button,
|
|
5894
6328
|
{
|
|
5895
6329
|
type: "button",
|
|
@@ -5900,15 +6334,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5900
6334
|
children: "Choose a section"
|
|
5901
6335
|
}
|
|
5902
6336
|
),
|
|
5903
|
-
/* @__PURE__ */ (0,
|
|
5904
|
-
/* @__PURE__ */ (0,
|
|
5905
|
-
/* @__PURE__ */ (0,
|
|
6337
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
6338
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
6339
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
5906
6340
|
] })
|
|
5907
6341
|
] }) : null,
|
|
5908
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
6342
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
5909
6343
|
] }),
|
|
5910
|
-
/* @__PURE__ */ (0,
|
|
5911
|
-
/* @__PURE__ */ (0,
|
|
6344
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
6345
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
5912
6346
|
Button,
|
|
5913
6347
|
{
|
|
5914
6348
|
type: "button",
|
|
@@ -5923,7 +6357,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5923
6357
|
children: state.secondaryLabel
|
|
5924
6358
|
}
|
|
5925
6359
|
),
|
|
5926
|
-
/* @__PURE__ */ (0,
|
|
6360
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
5927
6361
|
Button,
|
|
5928
6362
|
{
|
|
5929
6363
|
type: "button",
|
|
@@ -5942,11 +6376,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5942
6376
|
}
|
|
5943
6377
|
|
|
5944
6378
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
5945
|
-
var
|
|
6379
|
+
var import_react8 = require("react");
|
|
5946
6380
|
var import_react_dom = require("react-dom");
|
|
5947
|
-
var
|
|
6381
|
+
var import_lucide_react11 = require("lucide-react");
|
|
5948
6382
|
var import_navigation = require("next/navigation");
|
|
5949
|
-
var
|
|
6383
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
5950
6384
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
5951
6385
|
function rectsEqual(a, b) {
|
|
5952
6386
|
if (a.size !== b.size) return false;
|
|
@@ -5979,12 +6413,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
5979
6413
|
return null;
|
|
5980
6414
|
}
|
|
5981
6415
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
5982
|
-
const [rects, setRects] = (0,
|
|
5983
|
-
const sectionIds = (0,
|
|
6416
|
+
const [rects, setRects] = (0, import_react8.useState)(/* @__PURE__ */ new Map());
|
|
6417
|
+
const sectionIds = (0, import_react8.useMemo)(
|
|
5984
6418
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
5985
6419
|
[sectionIdsKey]
|
|
5986
6420
|
);
|
|
5987
|
-
(0,
|
|
6421
|
+
(0, import_react8.useEffect)(() => {
|
|
5988
6422
|
if (!enabled || sectionIds.length === 0) {
|
|
5989
6423
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
5990
6424
|
return;
|
|
@@ -6025,13 +6459,13 @@ function SectionPickerOverlay({
|
|
|
6025
6459
|
}) {
|
|
6026
6460
|
const router = (0, import_navigation.useRouter)();
|
|
6027
6461
|
const pathname = (0, import_navigation.usePathname)();
|
|
6028
|
-
const [selectedId, setSelectedId] = (0,
|
|
6029
|
-
const [hoveredId, setHoveredId] = (0,
|
|
6030
|
-
const pointerRef = (0,
|
|
6031
|
-
const pointerScreenRef = (0,
|
|
6032
|
-
const iframeOffsetTopRef = (0,
|
|
6033
|
-
const sectionIdsRef = (0,
|
|
6034
|
-
const [chromeClip, setChromeClip] = (0,
|
|
6462
|
+
const [selectedId, setSelectedId] = (0, import_react8.useState)(null);
|
|
6463
|
+
const [hoveredId, setHoveredId] = (0, import_react8.useState)(null);
|
|
6464
|
+
const pointerRef = (0, import_react8.useRef)(null);
|
|
6465
|
+
const pointerScreenRef = (0, import_react8.useRef)(null);
|
|
6466
|
+
const iframeOffsetTopRef = (0, import_react8.useRef)(null);
|
|
6467
|
+
const sectionIdsRef = (0, import_react8.useRef)([]);
|
|
6468
|
+
const [chromeClip, setChromeClip] = (0, import_react8.useState)(
|
|
6035
6469
|
() => ({
|
|
6036
6470
|
top: 0,
|
|
6037
6471
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -6039,12 +6473,12 @@ function SectionPickerOverlay({
|
|
|
6039
6473
|
);
|
|
6040
6474
|
const normalizedTarget = normalizePath(pagePath);
|
|
6041
6475
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
6042
|
-
(0,
|
|
6476
|
+
(0, import_react8.useEffect)(() => {
|
|
6043
6477
|
if (isOnTargetPage) return;
|
|
6044
6478
|
const search = readPreservedSearch();
|
|
6045
6479
|
router.push(`${normalizedTarget}${search}`);
|
|
6046
6480
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
6047
|
-
(0,
|
|
6481
|
+
(0, import_react8.useEffect)(() => {
|
|
6048
6482
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
6049
6483
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
6050
6484
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -6056,24 +6490,24 @@ function SectionPickerOverlay({
|
|
|
6056
6490
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
6057
6491
|
};
|
|
6058
6492
|
}, []);
|
|
6059
|
-
const liveSections = (0,
|
|
6493
|
+
const liveSections = (0, import_react8.useMemo)(() => {
|
|
6060
6494
|
if (!isOnTargetPage) return sections;
|
|
6061
6495
|
const live = collectSectionsFromDom();
|
|
6062
6496
|
if (live.length === 0) return sections;
|
|
6063
6497
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
6064
6498
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
6065
6499
|
}, [isOnTargetPage, sections, pathname]);
|
|
6066
|
-
const sectionIdsKey = (0,
|
|
6500
|
+
const sectionIdsKey = (0, import_react8.useMemo)(
|
|
6067
6501
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
6068
6502
|
[liveSections]
|
|
6069
6503
|
);
|
|
6070
|
-
const sectionIds = (0,
|
|
6504
|
+
const sectionIds = (0, import_react8.useMemo)(
|
|
6071
6505
|
() => liveSections.map((s) => s.id),
|
|
6072
6506
|
[liveSections]
|
|
6073
6507
|
);
|
|
6074
6508
|
sectionIdsRef.current = sectionIds;
|
|
6075
6509
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
6076
|
-
const applyHoverAt = (0,
|
|
6510
|
+
const applyHoverAt = (0, import_react8.useCallback)(
|
|
6077
6511
|
(x, y, liveRects) => {
|
|
6078
6512
|
const ids = sectionIdsRef.current;
|
|
6079
6513
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -6082,7 +6516,7 @@ function SectionPickerOverlay({
|
|
|
6082
6516
|
},
|
|
6083
6517
|
[]
|
|
6084
6518
|
);
|
|
6085
|
-
(0,
|
|
6519
|
+
(0, import_react8.useEffect)(() => {
|
|
6086
6520
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
6087
6521
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
6088
6522
|
const bottom = Math.min(
|
|
@@ -6124,12 +6558,12 @@ function SectionPickerOverlay({
|
|
|
6124
6558
|
window.removeEventListener("resize", onResize);
|
|
6125
6559
|
};
|
|
6126
6560
|
}, [applyHoverAt]);
|
|
6127
|
-
(0,
|
|
6561
|
+
(0, import_react8.useEffect)(() => {
|
|
6128
6562
|
const ptr = pointerRef.current;
|
|
6129
6563
|
if (!ptr) return;
|
|
6130
6564
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
6131
6565
|
}, [rects, applyHoverAt]);
|
|
6132
|
-
(0,
|
|
6566
|
+
(0, import_react8.useEffect)(() => {
|
|
6133
6567
|
const rememberPointer = (clientX, clientY) => {
|
|
6134
6568
|
pointerRef.current = { x: clientX, y: clientY };
|
|
6135
6569
|
const top = iframeOffsetTopRef.current;
|
|
@@ -6153,7 +6587,7 @@ function SectionPickerOverlay({
|
|
|
6153
6587
|
window.removeEventListener("message", onPointerSync);
|
|
6154
6588
|
};
|
|
6155
6589
|
}, [rects, applyHoverAt]);
|
|
6156
|
-
const handleSelect = (0,
|
|
6590
|
+
const handleSelect = (0, import_react8.useCallback)(
|
|
6157
6591
|
(section) => {
|
|
6158
6592
|
if (selectedId) return;
|
|
6159
6593
|
setSelectedId(section.id);
|
|
@@ -6161,7 +6595,7 @@ function SectionPickerOverlay({
|
|
|
6161
6595
|
},
|
|
6162
6596
|
[selectedId, onSelect]
|
|
6163
6597
|
);
|
|
6164
|
-
(0,
|
|
6598
|
+
(0, import_react8.useEffect)(() => {
|
|
6165
6599
|
const onKeyDown = (e) => {
|
|
6166
6600
|
if (e.key === "Escape") {
|
|
6167
6601
|
e.preventDefault();
|
|
@@ -6175,7 +6609,7 @@ function SectionPickerOverlay({
|
|
|
6175
6609
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
6176
6610
|
if (!portalRoot) return null;
|
|
6177
6611
|
return (0, import_react_dom.createPortal)(
|
|
6178
|
-
/* @__PURE__ */ (0,
|
|
6612
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
6179
6613
|
"div",
|
|
6180
6614
|
{
|
|
6181
6615
|
"data-ohw-section-picker": "",
|
|
@@ -6185,12 +6619,12 @@ function SectionPickerOverlay({
|
|
|
6185
6619
|
role: "dialog",
|
|
6186
6620
|
"aria-label": "Choose a section",
|
|
6187
6621
|
children: [
|
|
6188
|
-
/* @__PURE__ */ (0,
|
|
6622
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6189
6623
|
"div",
|
|
6190
6624
|
{
|
|
6191
6625
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
6192
6626
|
style: { top: chromeClip.top + 20 },
|
|
6193
|
-
children: /* @__PURE__ */ (0,
|
|
6627
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
6194
6628
|
Button,
|
|
6195
6629
|
{
|
|
6196
6630
|
type: "button",
|
|
@@ -6199,14 +6633,14 @@ function SectionPickerOverlay({
|
|
|
6199
6633
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
6200
6634
|
onClick: onBack,
|
|
6201
6635
|
children: [
|
|
6202
|
-
/* @__PURE__ */ (0,
|
|
6636
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
6203
6637
|
"Back"
|
|
6204
6638
|
]
|
|
6205
6639
|
}
|
|
6206
6640
|
)
|
|
6207
6641
|
}
|
|
6208
6642
|
),
|
|
6209
|
-
/* @__PURE__ */ (0,
|
|
6643
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6210
6644
|
"div",
|
|
6211
6645
|
{
|
|
6212
6646
|
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",
|
|
@@ -6219,7 +6653,7 @@ function SectionPickerOverlay({
|
|
|
6219
6653
|
children: "Click on section to select"
|
|
6220
6654
|
}
|
|
6221
6655
|
),
|
|
6222
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
6656
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6223
6657
|
"div",
|
|
6224
6658
|
{
|
|
6225
6659
|
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",
|
|
@@ -6227,14 +6661,14 @@ function SectionPickerOverlay({
|
|
|
6227
6661
|
children: "Loading page preview\u2026"
|
|
6228
6662
|
}
|
|
6229
6663
|
) : null,
|
|
6230
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
6664
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
6231
6665
|
isOnTargetPage ? liveSections.map((section) => {
|
|
6232
6666
|
const rect = rects.get(section.id);
|
|
6233
6667
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
6234
6668
|
const isSelected = selectedId === section.id;
|
|
6235
6669
|
const isHovered = hoveredId === section.id;
|
|
6236
6670
|
const isLit = isSelected || isHovered;
|
|
6237
|
-
return /* @__PURE__ */ (0,
|
|
6671
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
6238
6672
|
"button",
|
|
6239
6673
|
{
|
|
6240
6674
|
type: "button",
|
|
@@ -6249,7 +6683,7 @@ function SectionPickerOverlay({
|
|
|
6249
6683
|
"aria-label": `Select section ${section.label}`,
|
|
6250
6684
|
onClick: () => handleSelect(section),
|
|
6251
6685
|
children: [
|
|
6252
|
-
isLit ? /* @__PURE__ */ (0,
|
|
6686
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6253
6687
|
"span",
|
|
6254
6688
|
{
|
|
6255
6689
|
className: "pointer-events-none absolute",
|
|
@@ -6262,13 +6696,13 @@ function SectionPickerOverlay({
|
|
|
6262
6696
|
"aria-hidden": true
|
|
6263
6697
|
}
|
|
6264
6698
|
) : null,
|
|
6265
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
6699
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6266
6700
|
"span",
|
|
6267
6701
|
{
|
|
6268
6702
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
6269
6703
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
6270
6704
|
"aria-hidden": true,
|
|
6271
|
-
children: /* @__PURE__ */ (0,
|
|
6705
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.Check, { className: "size-5" })
|
|
6272
6706
|
}
|
|
6273
6707
|
) : null
|
|
6274
6708
|
]
|
|
@@ -6284,7 +6718,7 @@ function SectionPickerOverlay({
|
|
|
6284
6718
|
}
|
|
6285
6719
|
|
|
6286
6720
|
// src/ui/link-modal/useLinkModalState.ts
|
|
6287
|
-
var
|
|
6721
|
+
var import_react9 = require("react");
|
|
6288
6722
|
function useLinkModalState({
|
|
6289
6723
|
open,
|
|
6290
6724
|
mode,
|
|
@@ -6296,14 +6730,14 @@ function useLinkModalState({
|
|
|
6296
6730
|
onClose,
|
|
6297
6731
|
onSubmit
|
|
6298
6732
|
}) {
|
|
6299
|
-
const availablePages = (0,
|
|
6300
|
-
const [searchValue, setSearchValue] = (0,
|
|
6301
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
6302
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
6303
|
-
const [step, setStep] = (0,
|
|
6304
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
6305
|
-
const [urlError, setUrlError] = (0,
|
|
6306
|
-
const reset = (0,
|
|
6733
|
+
const availablePages = (0, import_react9.useMemo)(() => pages, [pages]);
|
|
6734
|
+
const [searchValue, setSearchValue] = (0, import_react9.useState)("");
|
|
6735
|
+
const [selectedPage, setSelectedPage] = (0, import_react9.useState)(null);
|
|
6736
|
+
const [selectedSection, setSelectedSection] = (0, import_react9.useState)(null);
|
|
6737
|
+
const [step, setStep] = (0, import_react9.useState)("input");
|
|
6738
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react9.useState)(false);
|
|
6739
|
+
const [urlError, setUrlError] = (0, import_react9.useState)("");
|
|
6740
|
+
const reset = (0, import_react9.useCallback)(() => {
|
|
6307
6741
|
setSearchValue("");
|
|
6308
6742
|
setSelectedPage(null);
|
|
6309
6743
|
setSelectedSection(null);
|
|
@@ -6311,7 +6745,7 @@ function useLinkModalState({
|
|
|
6311
6745
|
setDropdownOpen(false);
|
|
6312
6746
|
setUrlError("");
|
|
6313
6747
|
}, []);
|
|
6314
|
-
(0,
|
|
6748
|
+
(0, import_react9.useEffect)(() => {
|
|
6315
6749
|
if (!open) return;
|
|
6316
6750
|
if (mode === "edit" && initialTarget) {
|
|
6317
6751
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -6327,11 +6761,11 @@ function useLinkModalState({
|
|
|
6327
6761
|
setDropdownOpen(false);
|
|
6328
6762
|
setUrlError("");
|
|
6329
6763
|
}, [open, mode, initialTarget, reset]);
|
|
6330
|
-
const filteredPages = (0,
|
|
6764
|
+
const filteredPages = (0, import_react9.useMemo)(() => {
|
|
6331
6765
|
if (!searchValue.trim()) return availablePages;
|
|
6332
6766
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
6333
6767
|
}, [availablePages, searchValue]);
|
|
6334
|
-
const activeSections = (0,
|
|
6768
|
+
const activeSections = (0, import_react9.useMemo)(() => {
|
|
6335
6769
|
if (!selectedPage) return [];
|
|
6336
6770
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
6337
6771
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -6380,7 +6814,7 @@ function useLinkModalState({
|
|
|
6380
6814
|
reset();
|
|
6381
6815
|
onClose();
|
|
6382
6816
|
};
|
|
6383
|
-
const isValid = (0,
|
|
6817
|
+
const isValid = (0, import_react9.useMemo)(() => {
|
|
6384
6818
|
if (urlError) return false;
|
|
6385
6819
|
if (showBreadcrumb) return true;
|
|
6386
6820
|
if (selectedPage) return true;
|
|
@@ -6448,7 +6882,7 @@ function useLinkModalState({
|
|
|
6448
6882
|
}
|
|
6449
6883
|
|
|
6450
6884
|
// src/ui/link-modal/LinkPopover.tsx
|
|
6451
|
-
var
|
|
6885
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
6452
6886
|
function postToParent(data) {
|
|
6453
6887
|
window.parent?.postMessage(data, "*");
|
|
6454
6888
|
}
|
|
@@ -6477,7 +6911,7 @@ function LinkPopover({
|
|
|
6477
6911
|
onSubmit
|
|
6478
6912
|
});
|
|
6479
6913
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
6480
|
-
(0,
|
|
6914
|
+
(0, import_react10.useEffect)(() => {
|
|
6481
6915
|
if (!open) return;
|
|
6482
6916
|
if (sectionPickerActive) {
|
|
6483
6917
|
postToParent({ type: "ui:unlock" });
|
|
@@ -6544,15 +6978,15 @@ function LinkPopover({
|
|
|
6544
6978
|
);
|
|
6545
6979
|
};
|
|
6546
6980
|
}, [open, sectionPickerActive]);
|
|
6547
|
-
return /* @__PURE__ */ (0,
|
|
6548
|
-
/* @__PURE__ */ (0,
|
|
6981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
6982
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6549
6983
|
Dialog2,
|
|
6550
6984
|
{
|
|
6551
6985
|
open: open && !sectionPickerActive,
|
|
6552
6986
|
onOpenChange: (next) => {
|
|
6553
6987
|
if (!next) onClose?.();
|
|
6554
6988
|
},
|
|
6555
|
-
children: /* @__PURE__ */ (0,
|
|
6989
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6556
6990
|
DialogContent,
|
|
6557
6991
|
{
|
|
6558
6992
|
ref: panelRef,
|
|
@@ -6562,12 +6996,12 @@ function LinkPopover({
|
|
|
6562
6996
|
"data-ohw-bridge": "",
|
|
6563
6997
|
showCloseButton: false,
|
|
6564
6998
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
6565
|
-
children: /* @__PURE__ */ (0,
|
|
6999
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LinkEditorPanel, { state, onClose })
|
|
6566
7000
|
}
|
|
6567
7001
|
)
|
|
6568
7002
|
}
|
|
6569
7003
|
),
|
|
6570
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
7004
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
6571
7005
|
SectionPickerOverlay,
|
|
6572
7006
|
{
|
|
6573
7007
|
pagePath: state.selectedPage.path,
|
|
@@ -7934,6 +8368,90 @@ function buildFooterHeading(colIndex, text) {
|
|
|
7934
8368
|
].join(";");
|
|
7935
8369
|
return heading;
|
|
7936
8370
|
}
|
|
8371
|
+
var FOOTER_HEADING_CACHE_ATTR = "data-ohw-heading-cache";
|
|
8372
|
+
function getFooterColumnHeadingEl(column) {
|
|
8373
|
+
return column.querySelector('[data-ohw-key^="footer-"][data-ohw-key$="-heading"]') ?? null;
|
|
8374
|
+
}
|
|
8375
|
+
function getFooterColumnHeadingKey(column) {
|
|
8376
|
+
const attr = column.getAttribute("data-ohw-footer-col");
|
|
8377
|
+
if (attr != null) {
|
|
8378
|
+
const n = parseInt(attr, 10);
|
|
8379
|
+
if (Number.isFinite(n)) return `footer-${n}-heading`;
|
|
8380
|
+
}
|
|
8381
|
+
const existing = getFooterColumnHeadingEl(column)?.getAttribute("data-ohw-key");
|
|
8382
|
+
if (existing) return existing;
|
|
8383
|
+
const index = listFooterColumns().indexOf(column);
|
|
8384
|
+
if (index >= 0) return `footer-${index}-heading`;
|
|
8385
|
+
return null;
|
|
8386
|
+
}
|
|
8387
|
+
function isFooterColumnHeadingVisible(column) {
|
|
8388
|
+
return getFooterColumnHeadingEl(column) !== null;
|
|
8389
|
+
}
|
|
8390
|
+
function setFooterColumnHeadingVisible(column, visible) {
|
|
8391
|
+
const headingKey = getFooterColumnHeadingKey(column);
|
|
8392
|
+
if (!headingKey) return null;
|
|
8393
|
+
const colMatch = headingKey.match(FOOTER_HEADING_RE);
|
|
8394
|
+
const colIndex = colMatch ? parseInt(colMatch[1], 10) : NaN;
|
|
8395
|
+
if (!Number.isFinite(colIndex)) return null;
|
|
8396
|
+
const existing = getFooterColumnHeadingEl(column);
|
|
8397
|
+
if (!visible) {
|
|
8398
|
+
const text2 = (existing?.textContent ?? "").trim() || column.getAttribute(FOOTER_HEADING_CACHE_ATTR) || DEFAULT_FOOTER_COLUMN_HEADING;
|
|
8399
|
+
column.setAttribute(FOOTER_HEADING_CACHE_ATTR, text2);
|
|
8400
|
+
existing?.remove();
|
|
8401
|
+
return { headingKey, text: "", visible: false };
|
|
8402
|
+
}
|
|
8403
|
+
if (existing) {
|
|
8404
|
+
return {
|
|
8405
|
+
headingKey,
|
|
8406
|
+
text: (existing.textContent ?? "").trim() || DEFAULT_FOOTER_COLUMN_HEADING,
|
|
8407
|
+
visible: true
|
|
8408
|
+
};
|
|
8409
|
+
}
|
|
8410
|
+
const text = column.getAttribute(FOOTER_HEADING_CACHE_ATTR) || DEFAULT_FOOTER_COLUMN_HEADING;
|
|
8411
|
+
const heading = buildFooterHeading(colIndex, text);
|
|
8412
|
+
const firstLink = listFooterLinksInColumn(column)[0];
|
|
8413
|
+
if (firstLink) column.insertBefore(heading, firstLink);
|
|
8414
|
+
else column.prepend(heading);
|
|
8415
|
+
return { headingKey, text, visible: true };
|
|
8416
|
+
}
|
|
8417
|
+
function ensureFooterColumnDefaultHeading(column, content) {
|
|
8418
|
+
if (isFooterColumnHeadingVisible(column)) return null;
|
|
8419
|
+
const headingKey = getFooterColumnHeadingKey(column);
|
|
8420
|
+
if (!headingKey) return null;
|
|
8421
|
+
if (content && content[headingKey] === "") return null;
|
|
8422
|
+
const result = setFooterColumnHeadingVisible(column, true);
|
|
8423
|
+
if (!result?.visible) return null;
|
|
8424
|
+
return { headingKey: result.headingKey, text: result.text };
|
|
8425
|
+
}
|
|
8426
|
+
function reconcileFooterHeadingVisibility(content) {
|
|
8427
|
+
for (const column of listFooterColumns()) {
|
|
8428
|
+
const headingKey = getFooterColumnHeadingKey(column);
|
|
8429
|
+
if (!headingKey) continue;
|
|
8430
|
+
const raw = content[headingKey];
|
|
8431
|
+
if (raw === void 0) continue;
|
|
8432
|
+
if (raw === "") {
|
|
8433
|
+
const existing2 = getFooterColumnHeadingEl(column);
|
|
8434
|
+
if (existing2) {
|
|
8435
|
+
const cached = (existing2.textContent ?? "").trim();
|
|
8436
|
+
if (cached) column.setAttribute(FOOTER_HEADING_CACHE_ATTR, cached);
|
|
8437
|
+
existing2.remove();
|
|
8438
|
+
}
|
|
8439
|
+
continue;
|
|
8440
|
+
}
|
|
8441
|
+
const existing = getFooterColumnHeadingEl(column);
|
|
8442
|
+
if (existing) {
|
|
8443
|
+
if (existing.textContent !== raw) existing.textContent = raw;
|
|
8444
|
+
continue;
|
|
8445
|
+
}
|
|
8446
|
+
const colMatch = headingKey.match(FOOTER_HEADING_RE);
|
|
8447
|
+
const colIndex = colMatch ? parseInt(colMatch[1], 10) : NaN;
|
|
8448
|
+
if (!Number.isFinite(colIndex)) continue;
|
|
8449
|
+
const heading = buildFooterHeading(colIndex, raw);
|
|
8450
|
+
const firstLink = listFooterLinksInColumn(column)[0];
|
|
8451
|
+
if (firstLink) column.insertBefore(heading, firstLink);
|
|
8452
|
+
else column.prepend(heading);
|
|
8453
|
+
}
|
|
8454
|
+
}
|
|
7937
8455
|
function buildFooterLink(colIndex, itemIndex, href, label, template) {
|
|
7938
8456
|
const anchor = cloneFooterLinkShell(template);
|
|
7939
8457
|
anchor.setAttribute("href", href);
|
|
@@ -7973,7 +8491,11 @@ function insertFooterColumnDom(colIndex, heading, items) {
|
|
|
7973
8491
|
column.style.display = getComputedStyle(colTemplate).display || "flex";
|
|
7974
8492
|
column.style.flexDirection = "column";
|
|
7975
8493
|
}
|
|
7976
|
-
|
|
8494
|
+
if (heading != null && heading !== "") {
|
|
8495
|
+
column.appendChild(buildFooterHeading(colIndex, heading));
|
|
8496
|
+
} else if (heading === "") {
|
|
8497
|
+
column.setAttribute(FOOTER_HEADING_CACHE_ATTR, DEFAULT_FOOTER_COLUMN_HEADING);
|
|
8498
|
+
}
|
|
7977
8499
|
let firstLink = null;
|
|
7978
8500
|
items.forEach((item, itemIndex) => {
|
|
7979
8501
|
const link = buildFooterLink(colIndex, itemIndex, item.href, item.label, linkTemplate);
|
|
@@ -8060,9 +8582,10 @@ function reconcileFooterColumnsFromContent(content) {
|
|
|
8060
8582
|
for (const colIndex of indices) {
|
|
8061
8583
|
if (allowedCols && !allowedCols.has(colIndex)) continue;
|
|
8062
8584
|
if (footerColumnExistsInDom(colIndex)) continue;
|
|
8063
|
-
const
|
|
8585
|
+
const headingRaw = content[`footer-${colIndex}-heading`];
|
|
8586
|
+
const heading = headingRaw === "" ? "" : headingRaw ?? DEFAULT_FOOTER_COLUMN_HEADING;
|
|
8064
8587
|
const items = collectFooterItemsForColumn(content, colIndex);
|
|
8065
|
-
const hasPayload =
|
|
8588
|
+
const hasPayload = content[`footer-${colIndex}-heading`] !== void 0 || items.some(
|
|
8066
8589
|
(_, i) => content[`footer-${colIndex}-${i}-href`] !== void 0 || content[`footer-${colIndex}-${i}-label`] !== void 0
|
|
8067
8590
|
) || (order?.some((col) => col.some((k) => parseFooterHrefKey(k)?.col === colIndex)) ?? false);
|
|
8068
8591
|
if (!hasPayload) continue;
|
|
@@ -8072,7 +8595,10 @@ function reconcileFooterColumnsFromContent(content) {
|
|
|
8072
8595
|
function reconcileFooterOrderFromContent(content) {
|
|
8073
8596
|
reconcileFooterColumnsFromContent(content);
|
|
8074
8597
|
const order = parseFooterOrder(content);
|
|
8075
|
-
if (!order?.length)
|
|
8598
|
+
if (!order?.length) {
|
|
8599
|
+
reconcileFooterHeadingVisibility(content);
|
|
8600
|
+
return;
|
|
8601
|
+
}
|
|
8076
8602
|
const linkTemplate = getFooterLinkTemplate();
|
|
8077
8603
|
for (let c = 0; c < order.length; c++) {
|
|
8078
8604
|
const colOrder = order[c];
|
|
@@ -8092,6 +8618,7 @@ function reconcileFooterOrderFromContent(content) {
|
|
|
8092
8618
|
}
|
|
8093
8619
|
pruneFooterToOrder(order);
|
|
8094
8620
|
applyFooterOrder(order);
|
|
8621
|
+
reconcileFooterHeadingVisibility(content);
|
|
8095
8622
|
}
|
|
8096
8623
|
function pruneFooterToOrder(order) {
|
|
8097
8624
|
const allowedKeys = new Set(order.flat());
|
|
@@ -8679,7 +9206,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey) {
|
|
|
8679
9206
|
}
|
|
8680
9207
|
|
|
8681
9208
|
// src/useNavItemDrag.ts
|
|
8682
|
-
var
|
|
9209
|
+
var import_react11 = require("react");
|
|
8683
9210
|
function useNavItemDrag({
|
|
8684
9211
|
isEditMode,
|
|
8685
9212
|
editContentRef,
|
|
@@ -8704,22 +9231,28 @@ function useNavItemDrag({
|
|
|
8704
9231
|
isDragHandleDisabled: isDragHandleDisabled2,
|
|
8705
9232
|
isNavbarButton: isNavbarButton3
|
|
8706
9233
|
}) {
|
|
8707
|
-
const navDragRef = (0,
|
|
8708
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
8709
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
8710
|
-
const navPointerDragRef = (0,
|
|
8711
|
-
const clearNavDragVisuals = (0,
|
|
9234
|
+
const navDragRef = (0, import_react11.useRef)(null);
|
|
9235
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react11.useState)([]);
|
|
9236
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react11.useState)(null);
|
|
9237
|
+
const navPointerDragRef = (0, import_react11.useRef)(null);
|
|
9238
|
+
const clearNavDragVisuals = (0, import_react11.useCallback)(() => {
|
|
9239
|
+
const session = navDragRef.current;
|
|
9240
|
+
const keepOpenEl = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.draggedEl : null;
|
|
8712
9241
|
navDragRef.current = null;
|
|
8713
9242
|
setNavDropSlots([]);
|
|
8714
9243
|
setActiveNavDropIndex(null);
|
|
8715
9244
|
setDraggedItemRect(null);
|
|
8716
9245
|
setSiblingHintRects([]);
|
|
8717
9246
|
setIsItemDragging(false);
|
|
8718
|
-
|
|
9247
|
+
if (keepOpenEl?.isConnected) {
|
|
9248
|
+
setNavGroupForceOpen(keepOpenEl, true);
|
|
9249
|
+
} else {
|
|
9250
|
+
setNavGroupForceOpen(null, false);
|
|
9251
|
+
}
|
|
8719
9252
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
8720
9253
|
unlockItemDragInteraction();
|
|
8721
9254
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
8722
|
-
const refreshNavDragVisuals = (0,
|
|
9255
|
+
const refreshNavDragVisuals = (0, import_react11.useCallback)(
|
|
8723
9256
|
(session, activeSlot, clientX, clientY) => {
|
|
8724
9257
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
8725
9258
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -8737,13 +9270,13 @@ function useNavItemDrag({
|
|
|
8737
9270
|
},
|
|
8738
9271
|
[setDraggedItemRect, setSiblingHintRects]
|
|
8739
9272
|
);
|
|
8740
|
-
const refreshNavDragVisualsRef = (0,
|
|
9273
|
+
const refreshNavDragVisualsRef = (0, import_react11.useRef)(refreshNavDragVisuals);
|
|
8741
9274
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
8742
|
-
const commitNavDragRef = (0,
|
|
9275
|
+
const commitNavDragRef = (0, import_react11.useRef)(() => {
|
|
8743
9276
|
});
|
|
8744
|
-
const beginNavDragRef = (0,
|
|
9277
|
+
const beginNavDragRef = (0, import_react11.useRef)(() => {
|
|
8745
9278
|
});
|
|
8746
|
-
const beginNavDrag = (0,
|
|
9279
|
+
const beginNavDrag = (0, import_react11.useCallback)(
|
|
8747
9280
|
(session) => {
|
|
8748
9281
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
8749
9282
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -8777,7 +9310,7 @@ function useNavItemDrag({
|
|
|
8777
9310
|
]
|
|
8778
9311
|
);
|
|
8779
9312
|
beginNavDragRef.current = beginNavDrag;
|
|
8780
|
-
const commitNavDrag = (0,
|
|
9313
|
+
const commitNavDrag = (0, import_react11.useCallback)(
|
|
8781
9314
|
(clientX, clientY) => {
|
|
8782
9315
|
const session = navDragRef.current;
|
|
8783
9316
|
if (!session) {
|
|
@@ -8838,7 +9371,7 @@ function useNavItemDrag({
|
|
|
8838
9371
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
8839
9372
|
);
|
|
8840
9373
|
commitNavDragRef.current = commitNavDrag;
|
|
8841
|
-
const startNavLinkDrag = (0,
|
|
9374
|
+
const startNavLinkDrag = (0, import_react11.useCallback)(
|
|
8842
9375
|
(anchor, clientX, clientY, wasSelected) => {
|
|
8843
9376
|
if (footerDragRef.current) return false;
|
|
8844
9377
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -8856,7 +9389,7 @@ function useNavItemDrag({
|
|
|
8856
9389
|
},
|
|
8857
9390
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isNavbarButton3]
|
|
8858
9391
|
);
|
|
8859
|
-
const onNavDragOver = (0,
|
|
9392
|
+
const onNavDragOver = (0, import_react11.useCallback)(
|
|
8860
9393
|
(e) => {
|
|
8861
9394
|
const session = navDragRef.current;
|
|
8862
9395
|
if (!session) return false;
|
|
@@ -8868,7 +9401,7 @@ function useNavItemDrag({
|
|
|
8868
9401
|
},
|
|
8869
9402
|
[]
|
|
8870
9403
|
);
|
|
8871
|
-
(0,
|
|
9404
|
+
(0, import_react11.useEffect)(() => {
|
|
8872
9405
|
if (!isEditMode) return;
|
|
8873
9406
|
const THRESHOLD = 10;
|
|
8874
9407
|
const resolveWasSelected = (el) => {
|
|
@@ -8993,7 +9526,7 @@ function useNavItemDrag({
|
|
|
8993
9526
|
setLinkPopover,
|
|
8994
9527
|
suppressNextClickRef
|
|
8995
9528
|
]);
|
|
8996
|
-
const armNavPressFromChrome = (0,
|
|
9529
|
+
const armNavPressFromChrome = (0, import_react11.useCallback)(
|
|
8997
9530
|
(selected, clientX, clientY, pointerId) => {
|
|
8998
9531
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
8999
9532
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -9024,8 +9557,8 @@ function useNavItemDrag({
|
|
|
9024
9557
|
}
|
|
9025
9558
|
|
|
9026
9559
|
// src/ui/footer-container-chrome.tsx
|
|
9027
|
-
var
|
|
9028
|
-
var
|
|
9560
|
+
var import_lucide_react12 = require("lucide-react");
|
|
9561
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
9029
9562
|
function FooterContainerChrome({
|
|
9030
9563
|
rect,
|
|
9031
9564
|
onAdd,
|
|
@@ -9033,7 +9566,7 @@ function FooterContainerChrome({
|
|
|
9033
9566
|
}) {
|
|
9034
9567
|
const chromeGap = 6;
|
|
9035
9568
|
const buttonMargin = 7;
|
|
9036
|
-
return /* @__PURE__ */ (0,
|
|
9569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
9037
9570
|
"div",
|
|
9038
9571
|
{
|
|
9039
9572
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -9045,8 +9578,8 @@ function FooterContainerChrome({
|
|
|
9045
9578
|
width: rect.width + chromeGap * 2,
|
|
9046
9579
|
height: rect.height + chromeGap * 2
|
|
9047
9580
|
},
|
|
9048
|
-
children: /* @__PURE__ */ (0,
|
|
9049
|
-
/* @__PURE__ */ (0,
|
|
9581
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
|
|
9582
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
9050
9583
|
"button",
|
|
9051
9584
|
{
|
|
9052
9585
|
type: "button",
|
|
@@ -9065,17 +9598,17 @@ function FooterContainerChrome({
|
|
|
9065
9598
|
if (addDisabled) return;
|
|
9066
9599
|
onAdd();
|
|
9067
9600
|
},
|
|
9068
|
-
children: /* @__PURE__ */ (0,
|
|
9601
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
9069
9602
|
}
|
|
9070
9603
|
) }),
|
|
9071
|
-
/* @__PURE__ */ (0,
|
|
9604
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
9072
9605
|
] })
|
|
9073
9606
|
}
|
|
9074
9607
|
) });
|
|
9075
9608
|
}
|
|
9076
9609
|
|
|
9077
9610
|
// src/lib/carousel.ts
|
|
9078
|
-
var
|
|
9611
|
+
var import_react12 = require("react");
|
|
9079
9612
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
9080
9613
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
9081
9614
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -9137,8 +9670,8 @@ function applyCarouselNode(key, val) {
|
|
|
9137
9670
|
return true;
|
|
9138
9671
|
}
|
|
9139
9672
|
function useOhwCarousel(key, initial) {
|
|
9140
|
-
const [images, setImages] = (0,
|
|
9141
|
-
(0,
|
|
9673
|
+
const [images, setImages] = (0, import_react12.useState)(initial);
|
|
9674
|
+
(0, import_react12.useEffect)(() => {
|
|
9142
9675
|
const el = document.querySelector(
|
|
9143
9676
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
9144
9677
|
);
|
|
@@ -9493,14 +10026,14 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
9493
10026
|
}
|
|
9494
10027
|
|
|
9495
10028
|
// src/ui/navbar-container-chrome.tsx
|
|
9496
|
-
var
|
|
9497
|
-
var
|
|
10029
|
+
var import_lucide_react13 = require("lucide-react");
|
|
10030
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
9498
10031
|
function NavbarContainerChrome({
|
|
9499
10032
|
rect,
|
|
9500
10033
|
onAdd
|
|
9501
10034
|
}) {
|
|
9502
10035
|
const chromeGap = 6;
|
|
9503
|
-
return /* @__PURE__ */ (0,
|
|
10036
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9504
10037
|
"div",
|
|
9505
10038
|
{
|
|
9506
10039
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -9512,7 +10045,7 @@ function NavbarContainerChrome({
|
|
|
9512
10045
|
width: rect.width + chromeGap * 2,
|
|
9513
10046
|
height: rect.height + chromeGap * 2
|
|
9514
10047
|
},
|
|
9515
|
-
children: /* @__PURE__ */ (0,
|
|
10048
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
9516
10049
|
"button",
|
|
9517
10050
|
{
|
|
9518
10051
|
type: "button",
|
|
@@ -9529,7 +10062,7 @@ function NavbarContainerChrome({
|
|
|
9529
10062
|
e.stopPropagation();
|
|
9530
10063
|
onAdd();
|
|
9531
10064
|
},
|
|
9532
|
-
children: /* @__PURE__ */ (0,
|
|
10065
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
9533
10066
|
}
|
|
9534
10067
|
)
|
|
9535
10068
|
}
|
|
@@ -9537,8 +10070,8 @@ function NavbarContainerChrome({
|
|
|
9537
10070
|
}
|
|
9538
10071
|
|
|
9539
10072
|
// src/ui/drop-indicator.tsx
|
|
9540
|
-
var
|
|
9541
|
-
var
|
|
10073
|
+
var React9 = __toESM(require("react"), 1);
|
|
10074
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
9542
10075
|
var dropIndicatorVariants = cva(
|
|
9543
10076
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
9544
10077
|
{
|
|
@@ -9560,9 +10093,9 @@ var dropIndicatorVariants = cva(
|
|
|
9560
10093
|
}
|
|
9561
10094
|
}
|
|
9562
10095
|
);
|
|
9563
|
-
var DropIndicator =
|
|
10096
|
+
var DropIndicator = React9.forwardRef(
|
|
9564
10097
|
({ className, direction, state, ...props }, ref) => {
|
|
9565
|
-
return /* @__PURE__ */ (0,
|
|
10098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9566
10099
|
"div",
|
|
9567
10100
|
{
|
|
9568
10101
|
ref,
|
|
@@ -9579,7 +10112,7 @@ var DropIndicator = React10.forwardRef(
|
|
|
9579
10112
|
DropIndicator.displayName = "DropIndicator";
|
|
9580
10113
|
|
|
9581
10114
|
// src/ui/badge.tsx
|
|
9582
|
-
var
|
|
10115
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
9583
10116
|
var badgeVariants = cva(
|
|
9584
10117
|
"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",
|
|
9585
10118
|
{
|
|
@@ -9597,13 +10130,13 @@ var badgeVariants = cva(
|
|
|
9597
10130
|
}
|
|
9598
10131
|
);
|
|
9599
10132
|
function Badge({ className, variant, ...props }) {
|
|
9600
|
-
return /* @__PURE__ */ (0,
|
|
10133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
9601
10134
|
}
|
|
9602
10135
|
|
|
9603
10136
|
// src/OhhwellsBridge.tsx
|
|
9604
|
-
var
|
|
9605
|
-
var
|
|
9606
|
-
var
|
|
10137
|
+
var import_lucide_react14 = require("lucide-react");
|
|
10138
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
10139
|
+
var PRIMARY3 = "#0885FE";
|
|
9607
10140
|
var IMAGE_FADE_MS = 300;
|
|
9608
10141
|
function runOpacityFade(el, onDone) {
|
|
9609
10142
|
const anim = el.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
@@ -9781,7 +10314,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
9781
10314
|
const root = (0, import_client.createRoot)(container);
|
|
9782
10315
|
(0, import_react_dom2.flushSync)(() => {
|
|
9783
10316
|
root.render(
|
|
9784
|
-
/* @__PURE__ */ (0,
|
|
10317
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
9785
10318
|
SchedulingWidget,
|
|
9786
10319
|
{
|
|
9787
10320
|
notifyOnConnect,
|
|
@@ -9969,6 +10502,15 @@ function isNavDropdownPanelOpen(childrenRoot) {
|
|
|
9969
10502
|
}
|
|
9970
10503
|
return true;
|
|
9971
10504
|
}
|
|
10505
|
+
function getOpenNavDropdownPanelRect(anchor) {
|
|
10506
|
+
const group = anchor.closest("[data-ohw-nav-group]");
|
|
10507
|
+
if (!group?.hasAttribute("data-ohw-nav-force-open")) return null;
|
|
10508
|
+
const panel = group.querySelector(":scope > [data-ohw-nav-children]");
|
|
10509
|
+
if (!panel || !isNavDropdownPanelOpen(panel)) return null;
|
|
10510
|
+
const panelRect = panel.getBoundingClientRect();
|
|
10511
|
+
if (panelRect.height < 2 || panelRect.width < 2) return null;
|
|
10512
|
+
return panelRect;
|
|
10513
|
+
}
|
|
9972
10514
|
function isNavItemPointerTarget(el) {
|
|
9973
10515
|
const childrenRoot = el.closest("[data-ohw-nav-children]");
|
|
9974
10516
|
if (!childrenRoot) return true;
|
|
@@ -10382,7 +10924,7 @@ function EditGlowChrome({
|
|
|
10382
10924
|
hideHandle = false
|
|
10383
10925
|
}) {
|
|
10384
10926
|
const GAP = SELECTION_CHROME_GAP2;
|
|
10385
|
-
return /* @__PURE__ */ (0,
|
|
10927
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
10386
10928
|
"div",
|
|
10387
10929
|
{
|
|
10388
10930
|
ref: elRef,
|
|
@@ -10397,7 +10939,7 @@ function EditGlowChrome({
|
|
|
10397
10939
|
zIndex: 2147483646
|
|
10398
10940
|
},
|
|
10399
10941
|
children: [
|
|
10400
|
-
/* @__PURE__ */ (0,
|
|
10942
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
10401
10943
|
"div",
|
|
10402
10944
|
{
|
|
10403
10945
|
style: {
|
|
@@ -10410,7 +10952,7 @@ function EditGlowChrome({
|
|
|
10410
10952
|
}
|
|
10411
10953
|
}
|
|
10412
10954
|
),
|
|
10413
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
10955
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
10414
10956
|
"div",
|
|
10415
10957
|
{
|
|
10416
10958
|
"data-ohw-drag-handle-container": "",
|
|
@@ -10422,7 +10964,7 @@ function EditGlowChrome({
|
|
|
10422
10964
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
10423
10965
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
10424
10966
|
},
|
|
10425
|
-
children: /* @__PURE__ */ (0,
|
|
10967
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
10426
10968
|
DragHandle,
|
|
10427
10969
|
{
|
|
10428
10970
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -10605,9 +11147,9 @@ function FloatingToolbar({
|
|
|
10605
11147
|
showEditLink,
|
|
10606
11148
|
onEditLink
|
|
10607
11149
|
}) {
|
|
10608
|
-
const localRef =
|
|
10609
|
-
const [measuredW, setMeasuredW] =
|
|
10610
|
-
const setRefs =
|
|
11150
|
+
const localRef = import_react13.default.useRef(null);
|
|
11151
|
+
const [measuredW, setMeasuredW] = import_react13.default.useState(330);
|
|
11152
|
+
const setRefs = import_react13.default.useCallback(
|
|
10611
11153
|
(node) => {
|
|
10612
11154
|
localRef.current = node;
|
|
10613
11155
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -10619,7 +11161,7 @@ function FloatingToolbar({
|
|
|
10619
11161
|
},
|
|
10620
11162
|
[elRef]
|
|
10621
11163
|
);
|
|
10622
|
-
|
|
11164
|
+
import_react13.default.useLayoutEffect(() => {
|
|
10623
11165
|
const node = localRef.current;
|
|
10624
11166
|
if (!node) return;
|
|
10625
11167
|
const update = () => {
|
|
@@ -10632,7 +11174,7 @@ function FloatingToolbar({
|
|
|
10632
11174
|
return () => ro.disconnect();
|
|
10633
11175
|
}, [showEditLink, activeCommands]);
|
|
10634
11176
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
10635
|
-
return /* @__PURE__ */ (0,
|
|
11177
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
10636
11178
|
"div",
|
|
10637
11179
|
{
|
|
10638
11180
|
ref: setRefs,
|
|
@@ -10644,12 +11186,12 @@ function FloatingToolbar({
|
|
|
10644
11186
|
zIndex: 2147483647,
|
|
10645
11187
|
pointerEvents: "auto"
|
|
10646
11188
|
},
|
|
10647
|
-
children: /* @__PURE__ */ (0,
|
|
10648
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
10649
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
11189
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(CustomToolbar, { children: [
|
|
11190
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react13.default.Fragment, { children: [
|
|
11191
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CustomToolbarDivider, {}),
|
|
10650
11192
|
btns.map((btn) => {
|
|
10651
11193
|
const isActive = activeCommands.has(btn.cmd);
|
|
10652
|
-
return /* @__PURE__ */ (0,
|
|
11194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
10653
11195
|
CustomToolbarButton,
|
|
10654
11196
|
{
|
|
10655
11197
|
title: btn.title,
|
|
@@ -10658,7 +11200,7 @@ function FloatingToolbar({
|
|
|
10658
11200
|
e.preventDefault();
|
|
10659
11201
|
onCommand(btn.cmd);
|
|
10660
11202
|
},
|
|
10661
|
-
children: /* @__PURE__ */ (0,
|
|
11203
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
10662
11204
|
"svg",
|
|
10663
11205
|
{
|
|
10664
11206
|
width: "16",
|
|
@@ -10679,7 +11221,7 @@ function FloatingToolbar({
|
|
|
10679
11221
|
);
|
|
10680
11222
|
})
|
|
10681
11223
|
] }, gi)),
|
|
10682
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
11224
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
10683
11225
|
CustomToolbarButton,
|
|
10684
11226
|
{
|
|
10685
11227
|
type: "button",
|
|
@@ -10693,7 +11235,7 @@ function FloatingToolbar({
|
|
|
10693
11235
|
e.preventDefault();
|
|
10694
11236
|
e.stopPropagation();
|
|
10695
11237
|
},
|
|
10696
|
-
children: /* @__PURE__ */ (0,
|
|
11238
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
10697
11239
|
}
|
|
10698
11240
|
) : null
|
|
10699
11241
|
] })
|
|
@@ -10710,7 +11252,7 @@ function StateToggle({
|
|
|
10710
11252
|
states,
|
|
10711
11253
|
onStateChange
|
|
10712
11254
|
}) {
|
|
10713
|
-
return /* @__PURE__ */ (0,
|
|
11255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
10714
11256
|
ToggleGroup,
|
|
10715
11257
|
{
|
|
10716
11258
|
"data-ohw-state-toggle": "",
|
|
@@ -10724,7 +11266,7 @@ function StateToggle({
|
|
|
10724
11266
|
left: rect.right - 8,
|
|
10725
11267
|
transform: "translateX(-100%)"
|
|
10726
11268
|
},
|
|
10727
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
11269
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
10728
11270
|
}
|
|
10729
11271
|
);
|
|
10730
11272
|
}
|
|
@@ -10751,8 +11293,8 @@ function OhhwellsBridge() {
|
|
|
10751
11293
|
const router = (0, import_navigation2.useRouter)();
|
|
10752
11294
|
const searchParams = (0, import_navigation2.useSearchParams)();
|
|
10753
11295
|
const isEditMode = isEditSessionActive();
|
|
10754
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
10755
|
-
(0,
|
|
11296
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react13.useState)(null);
|
|
11297
|
+
(0, import_react13.useEffect)(() => {
|
|
10756
11298
|
const figtreeFontId = "ohw-figtree-font";
|
|
10757
11299
|
if (!document.getElementById(figtreeFontId)) {
|
|
10758
11300
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -10780,104 +11322,107 @@ function OhhwellsBridge() {
|
|
|
10780
11322
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
10781
11323
|
const subdomain = resolveSubdomain(subdomainFromQuery);
|
|
10782
11324
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
10783
|
-
const postToParent2 = (0,
|
|
11325
|
+
const postToParent2 = (0, import_react13.useCallback)((data) => {
|
|
10784
11326
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
10785
11327
|
window.parent.postMessage(data, "*");
|
|
10786
11328
|
}
|
|
10787
11329
|
}, []);
|
|
10788
|
-
const [fetchState, setFetchState] = (0,
|
|
10789
|
-
const autoSaveTimers = (0,
|
|
10790
|
-
const activeElRef = (0,
|
|
10791
|
-
const pointerHeldRef = (0,
|
|
10792
|
-
const selectedElRef = (0,
|
|
10793
|
-
const selectedHrefKeyRef = (0,
|
|
10794
|
-
const selectedFooterColAttrRef = (0,
|
|
10795
|
-
const originalContentRef = (0,
|
|
10796
|
-
const activeStateElRef = (0,
|
|
10797
|
-
const parentScrollRef = (0,
|
|
10798
|
-
const visibleViewportRef = (0,
|
|
10799
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
10800
|
-
const attachVisibleViewport = (0,
|
|
11330
|
+
const [fetchState, setFetchState] = (0, import_react13.useState)("idle");
|
|
11331
|
+
const autoSaveTimers = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
|
|
11332
|
+
const activeElRef = (0, import_react13.useRef)(null);
|
|
11333
|
+
const pointerHeldRef = (0, import_react13.useRef)(false);
|
|
11334
|
+
const selectedElRef = (0, import_react13.useRef)(null);
|
|
11335
|
+
const selectedHrefKeyRef = (0, import_react13.useRef)(null);
|
|
11336
|
+
const selectedFooterColAttrRef = (0, import_react13.useRef)(null);
|
|
11337
|
+
const originalContentRef = (0, import_react13.useRef)(null);
|
|
11338
|
+
const activeStateElRef = (0, import_react13.useRef)(null);
|
|
11339
|
+
const parentScrollRef = (0, import_react13.useRef)(null);
|
|
11340
|
+
const visibleViewportRef = (0, import_react13.useRef)(null);
|
|
11341
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react13.useState)(null);
|
|
11342
|
+
const attachVisibleViewport = (0, import_react13.useCallback)((node) => {
|
|
10801
11343
|
visibleViewportRef.current = node;
|
|
10802
11344
|
setDialogPortalContainer(node);
|
|
10803
11345
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
10804
11346
|
}, []);
|
|
10805
|
-
const toolbarElRef = (0,
|
|
10806
|
-
const glowElRef = (0,
|
|
10807
|
-
const hoveredImageRef = (0,
|
|
10808
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
10809
|
-
const dragOverElRef = (0,
|
|
10810
|
-
const [mediaHover, setMediaHover] = (0,
|
|
10811
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
10812
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
10813
|
-
const hoveredGapRef = (0,
|
|
10814
|
-
const imageUnhoverTimerRef = (0,
|
|
10815
|
-
const imageShowTimerRef = (0,
|
|
10816
|
-
const editStylesRef = (0,
|
|
10817
|
-
const activateRef = (0,
|
|
11347
|
+
const toolbarElRef = (0, import_react13.useRef)(null);
|
|
11348
|
+
const glowElRef = (0, import_react13.useRef)(null);
|
|
11349
|
+
const hoveredImageRef = (0, import_react13.useRef)(null);
|
|
11350
|
+
const hoveredImageHasTextOverlapRef = (0, import_react13.useRef)(false);
|
|
11351
|
+
const dragOverElRef = (0, import_react13.useRef)(null);
|
|
11352
|
+
const [mediaHover, setMediaHover] = (0, import_react13.useState)(null);
|
|
11353
|
+
const [carouselHover, setCarouselHover] = (0, import_react13.useState)(null);
|
|
11354
|
+
const [uploadingRects, setUploadingRects] = (0, import_react13.useState)({});
|
|
11355
|
+
const hoveredGapRef = (0, import_react13.useRef)(null);
|
|
11356
|
+
const imageUnhoverTimerRef = (0, import_react13.useRef)(null);
|
|
11357
|
+
const imageShowTimerRef = (0, import_react13.useRef)(null);
|
|
11358
|
+
const editStylesRef = (0, import_react13.useRef)(null);
|
|
11359
|
+
const activateRef = (0, import_react13.useRef)(() => {
|
|
10818
11360
|
});
|
|
10819
|
-
const deactivateRef = (0,
|
|
11361
|
+
const deactivateRef = (0, import_react13.useRef)(() => {
|
|
10820
11362
|
});
|
|
10821
|
-
const selectRef = (0,
|
|
11363
|
+
const selectRef = (0, import_react13.useRef)(() => {
|
|
10822
11364
|
});
|
|
10823
|
-
const selectFrameRef = (0,
|
|
11365
|
+
const selectFrameRef = (0, import_react13.useRef)(() => {
|
|
10824
11366
|
});
|
|
10825
|
-
const deselectRef = (0,
|
|
11367
|
+
const deselectRef = (0, import_react13.useRef)(() => {
|
|
10826
11368
|
});
|
|
10827
|
-
const reselectNavigationItemRef = (0,
|
|
11369
|
+
const reselectNavigationItemRef = (0, import_react13.useRef)(() => {
|
|
10828
11370
|
});
|
|
10829
|
-
const commitNavigationTextEditRef = (0,
|
|
11371
|
+
const commitNavigationTextEditRef = (0, import_react13.useRef)(() => {
|
|
10830
11372
|
});
|
|
10831
|
-
const handleDeleteSelectedRef = (0,
|
|
10832
|
-
const runPendingDeleteUndoRef = (0,
|
|
10833
|
-
const isFooterFrameSelectionRef = (0,
|
|
10834
|
-
const refreshActiveCommandsRef = (0,
|
|
11373
|
+
const handleDeleteSelectedRef = (0, import_react13.useRef)(() => false);
|
|
11374
|
+
const runPendingDeleteUndoRef = (0, import_react13.useRef)(() => false);
|
|
11375
|
+
const isFooterFrameSelectionRef = (0, import_react13.useRef)(false);
|
|
11376
|
+
const refreshActiveCommandsRef = (0, import_react13.useRef)(() => {
|
|
10835
11377
|
});
|
|
10836
|
-
const postToParentRef = (0,
|
|
11378
|
+
const postToParentRef = (0, import_react13.useRef)(postToParent2);
|
|
10837
11379
|
postToParentRef.current = postToParent2;
|
|
10838
|
-
const
|
|
10839
|
-
const
|
|
10840
|
-
const
|
|
10841
|
-
const [
|
|
10842
|
-
const
|
|
11380
|
+
const aiSectionApiRef = (0, import_react13.useRef)(null);
|
|
11381
|
+
const sectionsLoadedRef = (0, import_react13.useRef)(false);
|
|
11382
|
+
const pendingScheduleConfigRequests = (0, import_react13.useRef)([]);
|
|
11383
|
+
const [toolbarRect, setToolbarRect] = (0, import_react13.useState)(null);
|
|
11384
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react13.useState)("none");
|
|
11385
|
+
const toolbarVariantRef = (0, import_react13.useRef)("none");
|
|
10843
11386
|
toolbarVariantRef.current = toolbarVariant;
|
|
10844
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
10845
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
10846
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
10847
|
-
const [toggleState, setToggleState] = (0,
|
|
10848
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
10849
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
10850
|
-
const [sectionGap, setSectionGap] = (0,
|
|
10851
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
10852
|
-
const hoveredNavContainerRef = (0,
|
|
10853
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
10854
|
-
const hoveredItemElRef = (0,
|
|
10855
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
10856
|
-
const siblingHintElRef = (0,
|
|
10857
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
10858
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
10859
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
10860
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
11387
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react13.useState)(false);
|
|
11388
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react13.useState)(null);
|
|
11389
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react13.useState)(false);
|
|
11390
|
+
const [toggleState, setToggleState] = (0, import_react13.useState)(null);
|
|
11391
|
+
const [maxBadge, setMaxBadge] = (0, import_react13.useState)(null);
|
|
11392
|
+
const [activeCommands, setActiveCommands] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
|
|
11393
|
+
const [sectionGap, setSectionGap] = (0, import_react13.useState)(null);
|
|
11394
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react13.useState)(false);
|
|
11395
|
+
const hoveredNavContainerRef = (0, import_react13.useRef)(null);
|
|
11396
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react13.useState)(null);
|
|
11397
|
+
const hoveredItemElRef = (0, import_react13.useRef)(null);
|
|
11398
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react13.useState)(null);
|
|
11399
|
+
const siblingHintElRef = (0, import_react13.useRef)(null);
|
|
11400
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react13.useState)(null);
|
|
11401
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react13.useState)([]);
|
|
11402
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react13.useState)(false);
|
|
11403
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react13.useState)(false);
|
|
10861
11404
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
10862
|
-
const
|
|
10863
|
-
const [
|
|
10864
|
-
const
|
|
10865
|
-
const [
|
|
10866
|
-
const
|
|
10867
|
-
const
|
|
10868
|
-
const
|
|
10869
|
-
const
|
|
10870
|
-
const
|
|
10871
|
-
const
|
|
10872
|
-
const
|
|
10873
|
-
const
|
|
10874
|
-
const
|
|
10875
|
-
const
|
|
10876
|
-
const
|
|
10877
|
-
const
|
|
10878
|
-
const
|
|
10879
|
-
const
|
|
10880
|
-
const
|
|
11405
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react13.useState)(null);
|
|
11406
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react13.useState)(null);
|
|
11407
|
+
const footerDragRef = (0, import_react13.useRef)(null);
|
|
11408
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react13.useState)([]);
|
|
11409
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react13.useState)(null);
|
|
11410
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react13.useState)(null);
|
|
11411
|
+
const footerPointerDragRef = (0, import_react13.useRef)(null);
|
|
11412
|
+
const suppressNextClickRef = (0, import_react13.useRef)(false);
|
|
11413
|
+
const suppressClickUntilRef = (0, import_react13.useRef)(0);
|
|
11414
|
+
const [linkPopover, setLinkPopover] = (0, import_react13.useState)(null);
|
|
11415
|
+
const linkPopoverSessionRef = (0, import_react13.useRef)(null);
|
|
11416
|
+
const addNavAfterAnchorRef = (0, import_react13.useRef)(null);
|
|
11417
|
+
const editContentRef = (0, import_react13.useRef)({});
|
|
11418
|
+
const pendingDeleteUndoRef = (0, import_react13.useRef)(null);
|
|
11419
|
+
const [sitePages, setSitePages] = (0, import_react13.useState)([]);
|
|
11420
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react13.useState)({});
|
|
11421
|
+
const sectionsPrefetchGenRef = (0, import_react13.useRef)(0);
|
|
11422
|
+
const setLinkPopoverRef = (0, import_react13.useRef)(setLinkPopover);
|
|
11423
|
+
const linkPopoverPanelRef = (0, import_react13.useRef)(null);
|
|
11424
|
+
const linkPopoverOpenRef = (0, import_react13.useRef)(false);
|
|
11425
|
+
const linkPopoverGraceUntilRef = (0, import_react13.useRef)(0);
|
|
10881
11426
|
setLinkPopoverRef.current = setLinkPopover;
|
|
10882
11427
|
linkPopoverSessionRef.current = linkPopover;
|
|
10883
11428
|
const {
|
|
@@ -10916,7 +11461,7 @@ function OhhwellsBridge() {
|
|
|
10916
11461
|
const bumpLinkPopoverGrace = () => {
|
|
10917
11462
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
10918
11463
|
};
|
|
10919
|
-
const runSectionsPrefetch = (0,
|
|
11464
|
+
const runSectionsPrefetch = (0, import_react13.useCallback)((pages) => {
|
|
10920
11465
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
10921
11466
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
10922
11467
|
const paths = pages.map((p) => p.path);
|
|
@@ -10935,9 +11480,9 @@ function OhhwellsBridge() {
|
|
|
10935
11480
|
);
|
|
10936
11481
|
});
|
|
10937
11482
|
}, [isEditMode, pathname]);
|
|
10938
|
-
const runSectionsPrefetchRef = (0,
|
|
11483
|
+
const runSectionsPrefetchRef = (0, import_react13.useRef)(runSectionsPrefetch);
|
|
10939
11484
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
10940
|
-
(0,
|
|
11485
|
+
(0, import_react13.useEffect)(() => {
|
|
10941
11486
|
if (!linkPopover) {
|
|
10942
11487
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
10943
11488
|
return;
|
|
@@ -10965,7 +11510,7 @@ function OhhwellsBridge() {
|
|
|
10965
11510
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
10966
11511
|
};
|
|
10967
11512
|
}, [linkPopover, postToParent2]);
|
|
10968
|
-
(0,
|
|
11513
|
+
(0, import_react13.useEffect)(() => {
|
|
10969
11514
|
if (!isEditMode) return;
|
|
10970
11515
|
const useFixtures = shouldUseDevFixtures();
|
|
10971
11516
|
if (useFixtures) {
|
|
@@ -10989,14 +11534,14 @@ function OhhwellsBridge() {
|
|
|
10989
11534
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
10990
11535
|
return () => window.removeEventListener("message", onSitePages);
|
|
10991
11536
|
}, [isEditMode, postToParent2]);
|
|
10992
|
-
(0,
|
|
11537
|
+
(0, import_react13.useEffect)(() => {
|
|
10993
11538
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
10994
11539
|
void loadAllSectionsManifest().then((manifest) => {
|
|
10995
11540
|
if (Object.keys(manifest).length === 0) return;
|
|
10996
11541
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
10997
11542
|
});
|
|
10998
11543
|
}, [isEditMode]);
|
|
10999
|
-
(0,
|
|
11544
|
+
(0, import_react13.useEffect)(() => {
|
|
11000
11545
|
const update = () => {
|
|
11001
11546
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
11002
11547
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -11020,10 +11565,10 @@ function OhhwellsBridge() {
|
|
|
11020
11565
|
vvp.removeEventListener("resize", update);
|
|
11021
11566
|
};
|
|
11022
11567
|
}, []);
|
|
11023
|
-
const refreshStateRules = (0,
|
|
11568
|
+
const refreshStateRules = (0, import_react13.useCallback)(() => {
|
|
11024
11569
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
11025
11570
|
}, []);
|
|
11026
|
-
const processConfigRequest = (0,
|
|
11571
|
+
const processConfigRequest = (0, import_react13.useCallback)((insertAfterVal) => {
|
|
11027
11572
|
const tracker = getSectionsTracker();
|
|
11028
11573
|
let entries = [];
|
|
11029
11574
|
try {
|
|
@@ -11046,7 +11591,7 @@ function OhhwellsBridge() {
|
|
|
11046
11591
|
}
|
|
11047
11592
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
11048
11593
|
}, [isEditMode]);
|
|
11049
|
-
const deactivate = (0,
|
|
11594
|
+
const deactivate = (0, import_react13.useCallback)(() => {
|
|
11050
11595
|
const el = activeElRef.current;
|
|
11051
11596
|
if (!el) return;
|
|
11052
11597
|
const key = el.dataset.ohwKey;
|
|
@@ -11079,12 +11624,12 @@ function OhhwellsBridge() {
|
|
|
11079
11624
|
setToolbarShowEditLink(false);
|
|
11080
11625
|
postToParent2({ type: "ow:exit-edit" });
|
|
11081
11626
|
}, [postToParent2]);
|
|
11082
|
-
const clearSelectedAttr = (0,
|
|
11627
|
+
const clearSelectedAttr = (0, import_react13.useCallback)(() => {
|
|
11083
11628
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
11084
11629
|
el.removeAttribute("data-ohw-selected");
|
|
11085
11630
|
});
|
|
11086
11631
|
}, []);
|
|
11087
|
-
const deselect = (0,
|
|
11632
|
+
const deselect = (0, import_react13.useCallback)(() => {
|
|
11088
11633
|
clearSelectedAttr();
|
|
11089
11634
|
selectedElRef.current = null;
|
|
11090
11635
|
selectedHrefKeyRef.current = null;
|
|
@@ -11093,6 +11638,8 @@ function OhhwellsBridge() {
|
|
|
11093
11638
|
setReorderHrefKey(null);
|
|
11094
11639
|
setReorderDragDisabled(false);
|
|
11095
11640
|
setIsFooterFrameSelection(false);
|
|
11641
|
+
setNavDropdownPreviewOpen(null);
|
|
11642
|
+
setFooterHeadingVisible(null);
|
|
11096
11643
|
siblingHintElRef.current = null;
|
|
11097
11644
|
setSiblingHintRect(null);
|
|
11098
11645
|
setSiblingHintRects([]);
|
|
@@ -11105,11 +11652,11 @@ function OhhwellsBridge() {
|
|
|
11105
11652
|
setToolbarVariant("none");
|
|
11106
11653
|
}
|
|
11107
11654
|
}, [clearSelectedAttr]);
|
|
11108
|
-
const markSelected = (0,
|
|
11655
|
+
const markSelected = (0, import_react13.useCallback)((el) => {
|
|
11109
11656
|
clearSelectedAttr();
|
|
11110
11657
|
el.setAttribute("data-ohw-selected", "");
|
|
11111
11658
|
}, [clearSelectedAttr]);
|
|
11112
|
-
const resolveHrefKeyElement = (0,
|
|
11659
|
+
const resolveHrefKeyElement = (0, import_react13.useCallback)((hrefKey) => {
|
|
11113
11660
|
if (isFooterHrefKey(hrefKey)) {
|
|
11114
11661
|
return document.querySelector(
|
|
11115
11662
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -11124,7 +11671,7 @@ function OhhwellsBridge() {
|
|
|
11124
11671
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
11125
11672
|
);
|
|
11126
11673
|
}, []);
|
|
11127
|
-
const resyncSelectedNavigationItem = (0,
|
|
11674
|
+
const resyncSelectedNavigationItem = (0, import_react13.useCallback)(() => {
|
|
11128
11675
|
const hrefKey = selectedHrefKeyRef.current;
|
|
11129
11676
|
if (hrefKey) {
|
|
11130
11677
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -11134,6 +11681,14 @@ function OhhwellsBridge() {
|
|
|
11134
11681
|
setReorderHrefKey(key);
|
|
11135
11682
|
setReorderDragDisabled(disabled);
|
|
11136
11683
|
setIsFooterFrameSelection(false);
|
|
11684
|
+
setFooterHeadingVisible(null);
|
|
11685
|
+
const isDropdownTrigger = !isNestedNavChild(link) && (navItemHasDropdownChildren(link) || navItemOwnsDropdownPanel(link));
|
|
11686
|
+
if (isDropdownTrigger) {
|
|
11687
|
+
const group = link.closest("[data-ohw-nav-group]");
|
|
11688
|
+
setNavDropdownPreviewOpen(Boolean(group?.hasAttribute("data-ohw-nav-force-open")));
|
|
11689
|
+
} else {
|
|
11690
|
+
setNavDropdownPreviewOpen(null);
|
|
11691
|
+
}
|
|
11137
11692
|
setToolbarVariant("link-action");
|
|
11138
11693
|
setToolbarRect(link.getBoundingClientRect());
|
|
11139
11694
|
setSiblingHintRects(collectNavigationItemSiblingHintRects(link));
|
|
@@ -11145,6 +11700,8 @@ function OhhwellsBridge() {
|
|
|
11145
11700
|
if (!column || !isNavigationContainer(column)) return;
|
|
11146
11701
|
selectedElRef.current = column;
|
|
11147
11702
|
setIsFooterFrameSelection(true);
|
|
11703
|
+
setNavDropdownPreviewOpen(null);
|
|
11704
|
+
setFooterHeadingVisible(isFooterColumnHeadingVisible(column));
|
|
11148
11705
|
setToolbarVariant("select-frame");
|
|
11149
11706
|
setToolbarRect(column.getBoundingClientRect());
|
|
11150
11707
|
setSiblingHintRects(
|
|
@@ -11152,13 +11709,26 @@ function OhhwellsBridge() {
|
|
|
11152
11709
|
);
|
|
11153
11710
|
}
|
|
11154
11711
|
}, [resolveHrefKeyElement]);
|
|
11155
|
-
const reselectNavigationItem = (0,
|
|
11712
|
+
const reselectNavigationItem = (0, import_react13.useCallback)((navAnchor) => {
|
|
11156
11713
|
selectedElRef.current = navAnchor;
|
|
11157
11714
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
11158
11715
|
selectedFooterColAttrRef.current = null;
|
|
11159
11716
|
markSelected(navAnchor);
|
|
11160
11717
|
setSelectedIsCta(isNavbarButton2(navAnchor));
|
|
11161
|
-
|
|
11718
|
+
const isDropdownTrigger = !isNestedNavChild(navAnchor) && (navItemHasDropdownChildren(navAnchor) || navItemOwnsDropdownPanel(navAnchor));
|
|
11719
|
+
if (isNestedNavChild(navAnchor)) {
|
|
11720
|
+
setNavGroupForceOpen(navAnchor, true);
|
|
11721
|
+
setNavDropdownPreviewOpen(null);
|
|
11722
|
+
} else if (isDropdownTrigger) {
|
|
11723
|
+
const group = navAnchor.closest("[data-ohw-nav-group]");
|
|
11724
|
+
const open = Boolean(group?.hasAttribute("data-ohw-nav-force-open"));
|
|
11725
|
+
setNavDropdownPreviewOpen(open);
|
|
11726
|
+
if (!open) setNavGroupForceOpen(null, false);
|
|
11727
|
+
} else {
|
|
11728
|
+
setNavGroupForceOpen(null, false);
|
|
11729
|
+
setNavDropdownPreviewOpen(null);
|
|
11730
|
+
}
|
|
11731
|
+
setFooterHeadingVisible(null);
|
|
11162
11732
|
const { key, disabled } = getNavigationItemReorderState(navAnchor);
|
|
11163
11733
|
setReorderHrefKey(key);
|
|
11164
11734
|
setReorderDragDisabled(disabled);
|
|
@@ -11168,7 +11738,7 @@ function OhhwellsBridge() {
|
|
|
11168
11738
|
setToolbarShowEditLink(false);
|
|
11169
11739
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
11170
11740
|
}, [markSelected]);
|
|
11171
|
-
const commitNavigationTextEdit = (0,
|
|
11741
|
+
const commitNavigationTextEdit = (0, import_react13.useCallback)((navAnchor) => {
|
|
11172
11742
|
const el = activeElRef.current;
|
|
11173
11743
|
if (!el) return;
|
|
11174
11744
|
const key = el.dataset.ohwKey;
|
|
@@ -11195,7 +11765,7 @@ function OhhwellsBridge() {
|
|
|
11195
11765
|
postToParent2({ type: "ow:exit-edit" });
|
|
11196
11766
|
reselectNavigationItem(navAnchor);
|
|
11197
11767
|
}, [postToParent2, reselectNavigationItem]);
|
|
11198
|
-
const handleAddTopLevelNavItem = (0,
|
|
11768
|
+
const handleAddTopLevelNavItem = (0, import_react13.useCallback)(() => {
|
|
11199
11769
|
const items = listNavbarRootItems();
|
|
11200
11770
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
11201
11771
|
deselectRef.current();
|
|
@@ -11207,7 +11777,7 @@ function OhhwellsBridge() {
|
|
|
11207
11777
|
intent: "add-nav"
|
|
11208
11778
|
});
|
|
11209
11779
|
}, []);
|
|
11210
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
11780
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react13.useCallback)(
|
|
11211
11781
|
(anchor) => {
|
|
11212
11782
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
11213
11783
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -11220,7 +11790,43 @@ function OhhwellsBridge() {
|
|
|
11220
11790
|
},
|
|
11221
11791
|
[postToParent2]
|
|
11222
11792
|
);
|
|
11223
|
-
const
|
|
11793
|
+
const handleNavDropdownOpenChange = (0, import_react13.useCallback)((open) => {
|
|
11794
|
+
const selected = selectedElRef.current;
|
|
11795
|
+
if (!selected || !isNavigationItem2(selected)) return;
|
|
11796
|
+
setNavGroupForceOpen(selected, open);
|
|
11797
|
+
setNavDropdownPreviewOpen(open);
|
|
11798
|
+
requestAnimationFrame(() => {
|
|
11799
|
+
const el = selectedElRef.current;
|
|
11800
|
+
if (el?.isConnected && isNavigationItem2(el)) {
|
|
11801
|
+
setToolbarRect(el.getBoundingClientRect());
|
|
11802
|
+
}
|
|
11803
|
+
});
|
|
11804
|
+
}, []);
|
|
11805
|
+
const handleFooterHeadingVisibleChange = (0, import_react13.useCallback)(
|
|
11806
|
+
(visible) => {
|
|
11807
|
+
const selected = selectedElRef.current;
|
|
11808
|
+
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
11809
|
+
const column = (selected.hasAttribute("data-ohw-footer-col") ? selected : null) ?? selected.closest("[data-ohw-footer-col]") ?? (listFooterColumns().includes(selected) ? selected : null);
|
|
11810
|
+
if (!column) return;
|
|
11811
|
+
const result = setFooterColumnHeadingVisible(column, visible);
|
|
11812
|
+
if (!result) return;
|
|
11813
|
+
editContentRef.current = {
|
|
11814
|
+
...editContentRef.current,
|
|
11815
|
+
[result.headingKey]: result.text
|
|
11816
|
+
};
|
|
11817
|
+
postToParent2({
|
|
11818
|
+
type: "ow:change",
|
|
11819
|
+
nodes: [{ key: result.headingKey, text: result.text }]
|
|
11820
|
+
});
|
|
11821
|
+
setFooterHeadingVisible(result.visible);
|
|
11822
|
+
requestAnimationFrame(() => {
|
|
11823
|
+
const el = selectedElRef.current;
|
|
11824
|
+
if (el?.isConnected) setToolbarRect(el.getBoundingClientRect());
|
|
11825
|
+
});
|
|
11826
|
+
},
|
|
11827
|
+
[postToParent2]
|
|
11828
|
+
);
|
|
11829
|
+
const enterEditOnNewItem = (0, import_react13.useCallback)((anchor) => {
|
|
11224
11830
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
11225
11831
|
if (!label) {
|
|
11226
11832
|
selectRef.current(anchor);
|
|
@@ -11229,7 +11835,7 @@ function OhhwellsBridge() {
|
|
|
11229
11835
|
setNavGroupForceOpen(anchor, true);
|
|
11230
11836
|
activateRef.current(label);
|
|
11231
11837
|
}, []);
|
|
11232
|
-
const handleAddChildItem = (0,
|
|
11838
|
+
const handleAddChildItem = (0, import_react13.useCallback)(() => {
|
|
11233
11839
|
const selected = selectedElRef.current;
|
|
11234
11840
|
if (!selected) return;
|
|
11235
11841
|
if (toolbarVariantRef.current === "select-frame" && isFooterFrameSelection) {
|
|
@@ -11297,11 +11903,15 @@ function OhhwellsBridge() {
|
|
|
11297
11903
|
);
|
|
11298
11904
|
}
|
|
11299
11905
|
enforceLinkHrefs();
|
|
11906
|
+
setNavGroupForceOpen(selected, true);
|
|
11907
|
+
setNavDropdownPreviewOpen(true);
|
|
11908
|
+
setToolbarRect(selected.getBoundingClientRect());
|
|
11300
11909
|
requestAnimationFrame(() => {
|
|
11910
|
+
if (selected.isConnected) setToolbarRect(selected.getBoundingClientRect());
|
|
11301
11911
|
enterEditOnNewItem(result.anchor);
|
|
11302
11912
|
});
|
|
11303
11913
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
11304
|
-
const handleAddFooterColumn = (0,
|
|
11914
|
+
const handleAddFooterColumn = (0, import_react13.useCallback)(() => {
|
|
11305
11915
|
if (!canAddFooterColumn()) {
|
|
11306
11916
|
postToParent2({
|
|
11307
11917
|
type: "ow:toast",
|
|
@@ -11322,7 +11932,7 @@ function OhhwellsBridge() {
|
|
|
11322
11932
|
selectRef.current(result.firstLink);
|
|
11323
11933
|
});
|
|
11324
11934
|
}, [postToParent2]);
|
|
11325
|
-
const clearFooterDragVisuals = (0,
|
|
11935
|
+
const clearFooterDragVisuals = (0, import_react13.useCallback)(() => {
|
|
11326
11936
|
footerDragRef.current = null;
|
|
11327
11937
|
setSiblingHintRects([]);
|
|
11328
11938
|
setFooterDropSlots([]);
|
|
@@ -11331,7 +11941,7 @@ function OhhwellsBridge() {
|
|
|
11331
11941
|
setIsItemDragging(false);
|
|
11332
11942
|
unlockFooterDragInteraction();
|
|
11333
11943
|
}, []);
|
|
11334
|
-
const refreshFooterDragVisuals = (0,
|
|
11944
|
+
const refreshFooterDragVisuals = (0, import_react13.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
11335
11945
|
const dragged = session.draggedEl;
|
|
11336
11946
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
11337
11947
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -11356,13 +11966,13 @@ function OhhwellsBridge() {
|
|
|
11356
11966
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
11357
11967
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
11358
11968
|
}, []);
|
|
11359
|
-
const refreshFooterDragVisualsRef = (0,
|
|
11969
|
+
const refreshFooterDragVisualsRef = (0, import_react13.useRef)(refreshFooterDragVisuals);
|
|
11360
11970
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
11361
|
-
const commitFooterDragRef = (0,
|
|
11971
|
+
const commitFooterDragRef = (0, import_react13.useRef)(() => {
|
|
11362
11972
|
});
|
|
11363
|
-
const beginFooterDragRef = (0,
|
|
11973
|
+
const beginFooterDragRef = (0, import_react13.useRef)(() => {
|
|
11364
11974
|
});
|
|
11365
|
-
const beginFooterDrag = (0,
|
|
11975
|
+
const beginFooterDrag = (0, import_react13.useCallback)(
|
|
11366
11976
|
(session) => {
|
|
11367
11977
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
11368
11978
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -11382,7 +11992,7 @@ function OhhwellsBridge() {
|
|
|
11382
11992
|
[refreshFooterDragVisuals]
|
|
11383
11993
|
);
|
|
11384
11994
|
beginFooterDragRef.current = beginFooterDrag;
|
|
11385
|
-
const commitFooterDrag = (0,
|
|
11995
|
+
const commitFooterDrag = (0, import_react13.useCallback)(
|
|
11386
11996
|
(clientX, clientY) => {
|
|
11387
11997
|
const session = footerDragRef.current;
|
|
11388
11998
|
if (!session) {
|
|
@@ -11486,7 +12096,7 @@ function OhhwellsBridge() {
|
|
|
11486
12096
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
11487
12097
|
);
|
|
11488
12098
|
commitFooterDragRef.current = commitFooterDrag;
|
|
11489
|
-
const startFooterLinkDrag = (0,
|
|
12099
|
+
const startFooterLinkDrag = (0, import_react13.useCallback)(
|
|
11490
12100
|
(anchor, clientX, clientY, wasSelected) => {
|
|
11491
12101
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
11492
12102
|
if (!hrefKey || !isFooterHrefKey(hrefKey)) return false;
|
|
@@ -11507,7 +12117,7 @@ function OhhwellsBridge() {
|
|
|
11507
12117
|
},
|
|
11508
12118
|
[beginFooterDrag]
|
|
11509
12119
|
);
|
|
11510
|
-
const startFooterColumnDrag = (0,
|
|
12120
|
+
const startFooterColumnDrag = (0, import_react13.useCallback)(
|
|
11511
12121
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
11512
12122
|
const columns = listFooterColumns();
|
|
11513
12123
|
const idx = columns.indexOf(columnEl);
|
|
@@ -11527,7 +12137,7 @@ function OhhwellsBridge() {
|
|
|
11527
12137
|
},
|
|
11528
12138
|
[beginFooterDrag]
|
|
11529
12139
|
);
|
|
11530
|
-
const handleItemDragStart = (0,
|
|
12140
|
+
const handleItemDragStart = (0, import_react13.useCallback)(
|
|
11531
12141
|
(e) => {
|
|
11532
12142
|
const selected = selectedElRef.current;
|
|
11533
12143
|
if (!selected) {
|
|
@@ -11547,7 +12157,7 @@ function OhhwellsBridge() {
|
|
|
11547
12157
|
},
|
|
11548
12158
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
11549
12159
|
);
|
|
11550
|
-
const handleItemDragEnd = (0,
|
|
12160
|
+
const handleItemDragEnd = (0, import_react13.useCallback)(
|
|
11551
12161
|
(e) => {
|
|
11552
12162
|
if (footerDragRef.current) {
|
|
11553
12163
|
const x = e?.clientX;
|
|
@@ -11573,7 +12183,7 @@ function OhhwellsBridge() {
|
|
|
11573
12183
|
},
|
|
11574
12184
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
11575
12185
|
);
|
|
11576
|
-
const handleItemChromePointerDown = (0,
|
|
12186
|
+
const handleItemChromePointerDown = (0, import_react13.useCallback)((e) => {
|
|
11577
12187
|
if (e.button !== 0) return;
|
|
11578
12188
|
const selected = selectedElRef.current;
|
|
11579
12189
|
if (!selected) return;
|
|
@@ -11604,7 +12214,7 @@ function OhhwellsBridge() {
|
|
|
11604
12214
|
}
|
|
11605
12215
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
11606
12216
|
}, [armNavPressFromChrome]);
|
|
11607
|
-
const handleItemChromeClick = (0,
|
|
12217
|
+
const handleItemChromeClick = (0, import_react13.useCallback)((clientX, clientY) => {
|
|
11608
12218
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
11609
12219
|
suppressNextClickRef.current = false;
|
|
11610
12220
|
return;
|
|
@@ -11617,16 +12227,28 @@ function OhhwellsBridge() {
|
|
|
11617
12227
|
}, []);
|
|
11618
12228
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
11619
12229
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
11620
|
-
const select = (0,
|
|
12230
|
+
const select = (0, import_react13.useCallback)((anchor) => {
|
|
11621
12231
|
if (!isNavigationItem2(anchor)) return;
|
|
11622
12232
|
if (activeElRef.current) deactivate();
|
|
12233
|
+
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
11623
12234
|
selectedElRef.current = anchor;
|
|
11624
12235
|
selectedHrefKeyRef.current = anchor.getAttribute("data-ohw-href-key");
|
|
11625
12236
|
selectedFooterColAttrRef.current = null;
|
|
11626
12237
|
markSelected(anchor);
|
|
11627
12238
|
setSelectedIsCta(isNavbarButton2(anchor));
|
|
11628
12239
|
clearHrefKeyHover(anchor);
|
|
11629
|
-
|
|
12240
|
+
const isDropdownTrigger = !isNestedNavChild(anchor) && (navItemHasDropdownChildren(anchor) || navItemOwnsDropdownPanel(anchor));
|
|
12241
|
+
if (isNestedNavChild(anchor)) {
|
|
12242
|
+
setNavGroupForceOpen(anchor, true);
|
|
12243
|
+
setNavDropdownPreviewOpen(null);
|
|
12244
|
+
} else if (isDropdownTrigger) {
|
|
12245
|
+
setNavGroupForceOpen(null, false);
|
|
12246
|
+
setNavDropdownPreviewOpen(false);
|
|
12247
|
+
} else {
|
|
12248
|
+
setNavGroupForceOpen(null, false);
|
|
12249
|
+
setNavDropdownPreviewOpen(null);
|
|
12250
|
+
}
|
|
12251
|
+
setFooterHeadingVisible(null);
|
|
11630
12252
|
hoveredNavContainerRef.current = null;
|
|
11631
12253
|
setHoveredNavContainerRect(null);
|
|
11632
12254
|
setHoveredItemRect(null);
|
|
@@ -11644,9 +12266,10 @@ function OhhwellsBridge() {
|
|
|
11644
12266
|
setToolbarShowEditLink(false);
|
|
11645
12267
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
11646
12268
|
}, [deactivate, markSelected]);
|
|
11647
|
-
const selectFrame = (0,
|
|
12269
|
+
const selectFrame = (0, import_react13.useCallback)((el) => {
|
|
11648
12270
|
if (!isNavigationContainer(el)) return;
|
|
11649
12271
|
if (activeElRef.current) deactivate();
|
|
12272
|
+
aiSectionApiRef.current?.selectFromElement(el);
|
|
11650
12273
|
const isFooterColumn = !isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || Boolean(el.closest("footer") && isInferredFooterGroup2(el)));
|
|
11651
12274
|
selectedElRef.current = el;
|
|
11652
12275
|
selectedHrefKeyRef.current = null;
|
|
@@ -11668,12 +12291,29 @@ function OhhwellsBridge() {
|
|
|
11668
12291
|
setReorderHrefKey(null);
|
|
11669
12292
|
setReorderDragDisabled(false);
|
|
11670
12293
|
setIsFooterFrameSelection(isFooterColumn);
|
|
12294
|
+
setNavDropdownPreviewOpen(null);
|
|
12295
|
+
if (isFooterColumn) {
|
|
12296
|
+
const ensured = ensureFooterColumnDefaultHeading(el, editContentRef.current);
|
|
12297
|
+
if (ensured) {
|
|
12298
|
+
editContentRef.current = {
|
|
12299
|
+
...editContentRef.current,
|
|
12300
|
+
[ensured.headingKey]: ensured.text
|
|
12301
|
+
};
|
|
12302
|
+
postToParent2({
|
|
12303
|
+
type: "ow:change",
|
|
12304
|
+
nodes: [{ key: ensured.headingKey, text: ensured.text }]
|
|
12305
|
+
});
|
|
12306
|
+
}
|
|
12307
|
+
setFooterHeadingVisible(isFooterColumnHeadingVisible(el));
|
|
12308
|
+
} else {
|
|
12309
|
+
setFooterHeadingVisible(null);
|
|
12310
|
+
}
|
|
11671
12311
|
setToolbarVariant("select-frame");
|
|
11672
12312
|
setToolbarRect(el.getBoundingClientRect());
|
|
11673
12313
|
setToolbarShowEditLink(false);
|
|
11674
12314
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
11675
|
-
}, [deactivate, markSelected]);
|
|
11676
|
-
const activate = (0,
|
|
12315
|
+
}, [deactivate, markSelected, postToParent2]);
|
|
12316
|
+
const activate = (0, import_react13.useCallback)((el, options) => {
|
|
11677
12317
|
if (activeElRef.current === el) return;
|
|
11678
12318
|
clearSelectedAttr();
|
|
11679
12319
|
selectedElRef.current = null;
|
|
@@ -11722,7 +12362,9 @@ function OhhwellsBridge() {
|
|
|
11722
12362
|
setToolbarShowEditLink(Boolean(getHrefKeyFromElement(el)));
|
|
11723
12363
|
const navAnchor = getNavigationItemAnchor(el);
|
|
11724
12364
|
if (navAnchor) {
|
|
11725
|
-
|
|
12365
|
+
if (isNestedNavChild(navAnchor)) {
|
|
12366
|
+
setNavGroupForceOpen(navAnchor, true);
|
|
12367
|
+
}
|
|
11726
12368
|
setReorderHrefKey(null);
|
|
11727
12369
|
setReorderDragDisabled(false);
|
|
11728
12370
|
} else {
|
|
@@ -11740,6 +12382,7 @@ function OhhwellsBridge() {
|
|
|
11740
12382
|
sectionId: sectionEl?.dataset.ohwSection ?? null,
|
|
11741
12383
|
sectionLabel: sectionEl?.dataset.ohwSectionLabel ?? null
|
|
11742
12384
|
});
|
|
12385
|
+
aiSectionApiRef.current?.selectFromElement(el, { report: false });
|
|
11743
12386
|
requestAnimationFrame(() => refreshActiveCommandsRef.current());
|
|
11744
12387
|
}, [clearSelectedAttr, deactivate, postToParent2]);
|
|
11745
12388
|
activateRef.current = activate;
|
|
@@ -11747,7 +12390,7 @@ function OhhwellsBridge() {
|
|
|
11747
12390
|
selectRef.current = select;
|
|
11748
12391
|
selectFrameRef.current = selectFrame;
|
|
11749
12392
|
deselectRef.current = deselect;
|
|
11750
|
-
(0,
|
|
12393
|
+
(0, import_react13.useLayoutEffect)(() => {
|
|
11751
12394
|
if (!subdomain || isEditMode) {
|
|
11752
12395
|
setFetchState("done");
|
|
11753
12396
|
return;
|
|
@@ -11818,7 +12461,7 @@ function OhhwellsBridge() {
|
|
|
11818
12461
|
cancelled = true;
|
|
11819
12462
|
};
|
|
11820
12463
|
}, [subdomain, isEditMode]);
|
|
11821
|
-
(0,
|
|
12464
|
+
(0, import_react13.useEffect)(() => {
|
|
11822
12465
|
if (!subdomain || isEditMode) return;
|
|
11823
12466
|
let debounceTimer = null;
|
|
11824
12467
|
let observer = null;
|
|
@@ -11869,16 +12512,16 @@ function OhhwellsBridge() {
|
|
|
11869
12512
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
11870
12513
|
};
|
|
11871
12514
|
}, [subdomain, isEditMode, pathname]);
|
|
11872
|
-
(0,
|
|
12515
|
+
(0, import_react13.useLayoutEffect)(() => {
|
|
11873
12516
|
const el = document.getElementById("ohw-loader");
|
|
11874
12517
|
if (!el) return;
|
|
11875
12518
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
11876
12519
|
el.style.display = visible ? "flex" : "none";
|
|
11877
12520
|
}, [subdomain, fetchState]);
|
|
11878
|
-
(0,
|
|
12521
|
+
(0, import_react13.useEffect)(() => {
|
|
11879
12522
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
11880
12523
|
}, [pathname, postToParent2]);
|
|
11881
|
-
(0,
|
|
12524
|
+
(0, import_react13.useEffect)(() => {
|
|
11882
12525
|
if (!isEditMode) return;
|
|
11883
12526
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
11884
12527
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -11886,7 +12529,7 @@ function OhhwellsBridge() {
|
|
|
11886
12529
|
deselectRef.current();
|
|
11887
12530
|
deactivateRef.current();
|
|
11888
12531
|
}, [pathname, isEditMode]);
|
|
11889
|
-
(0,
|
|
12532
|
+
(0, import_react13.useEffect)(() => {
|
|
11890
12533
|
const contentForNav = () => {
|
|
11891
12534
|
if (isEditMode) return editContentRef.current;
|
|
11892
12535
|
if (!subdomain) return {};
|
|
@@ -11951,7 +12594,7 @@ function OhhwellsBridge() {
|
|
|
11951
12594
|
observer?.disconnect();
|
|
11952
12595
|
};
|
|
11953
12596
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
11954
|
-
(0,
|
|
12597
|
+
(0, import_react13.useEffect)(() => {
|
|
11955
12598
|
if (!isEditMode) return;
|
|
11956
12599
|
const measure = () => {
|
|
11957
12600
|
const h = document.body.scrollHeight;
|
|
@@ -11975,7 +12618,7 @@ function OhhwellsBridge() {
|
|
|
11975
12618
|
window.removeEventListener("resize", handleResize);
|
|
11976
12619
|
};
|
|
11977
12620
|
}, [pathname, isEditMode, postToParent2]);
|
|
11978
|
-
(0,
|
|
12621
|
+
(0, import_react13.useEffect)(() => {
|
|
11979
12622
|
if (!subdomainFromQuery || isEditMode) return;
|
|
11980
12623
|
const handleClick = (e) => {
|
|
11981
12624
|
const anchor = e.target.closest("a");
|
|
@@ -11991,7 +12634,7 @@ function OhhwellsBridge() {
|
|
|
11991
12634
|
document.addEventListener("click", handleClick, true);
|
|
11992
12635
|
return () => document.removeEventListener("click", handleClick, true);
|
|
11993
12636
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
11994
|
-
(0,
|
|
12637
|
+
(0, import_react13.useEffect)(() => {
|
|
11995
12638
|
if (!isEditMode) {
|
|
11996
12639
|
editStylesRef.current?.base.remove();
|
|
11997
12640
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -12043,7 +12686,7 @@ function OhhwellsBridge() {
|
|
|
12043
12686
|
[data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
|
|
12044
12687
|
[data-ohw-editable="link"], [data-ohw-editable="link"] * { cursor: pointer !important; }
|
|
12045
12688
|
[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]) {
|
|
12046
|
-
outline: 2px dashed ${
|
|
12689
|
+
outline: 2px dashed ${PRIMARY3} !important;
|
|
12047
12690
|
outline-offset: 4px;
|
|
12048
12691
|
}
|
|
12049
12692
|
[data-ohw-href-key] [data-ohw-hovered],
|
|
@@ -12078,11 +12721,11 @@ function OhhwellsBridge() {
|
|
|
12078
12721
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
12079
12722
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
12080
12723
|
outline: none !important;
|
|
12081
|
-
caret-color: ${
|
|
12724
|
+
caret-color: ${PRIMARY3} !important;
|
|
12082
12725
|
cursor: text !important;
|
|
12083
12726
|
}
|
|
12084
12727
|
[data-ohw-editable][contenteditable]::selection,
|
|
12085
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
12728
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY3}59 !important; }
|
|
12086
12729
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
12087
12730
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
12088
12731
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -12097,7 +12740,7 @@ function OhhwellsBridge() {
|
|
|
12097
12740
|
stateViews.textContent = `
|
|
12098
12741
|
[data-ohw-state-view]:not([data-ohw-state-view="default"]) { display: none; }
|
|
12099
12742
|
[data-ohw-state-view="default"] [data-ohw-editable] { pointer-events: auto !important; }
|
|
12100
|
-
[data-ohw-state-hovered] { outline: 2px dashed ${
|
|
12743
|
+
[data-ohw-state-hovered] { outline: 2px dashed ${PRIMARY3} !important; outline-offset: 4px; }
|
|
12101
12744
|
[data-ohw-state-hovered]:has([data-ohw-hovered]) { outline: none !important; }
|
|
12102
12745
|
`;
|
|
12103
12746
|
document.head.appendChild(base);
|
|
@@ -12121,6 +12764,10 @@ function OhhwellsBridge() {
|
|
|
12121
12764
|
if (target.closest("[data-ohw-max-badge]")) return;
|
|
12122
12765
|
if (isInsideLinkEditor(target)) return;
|
|
12123
12766
|
if (target.closest('[data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]')) {
|
|
12767
|
+
const beneath = document.elementsFromPoint(e.clientX, e.clientY).find(
|
|
12768
|
+
(el) => el instanceof HTMLElement && !el.closest("[data-ohw-bridge-root]") && el.closest("[data-ohw-section]") != null
|
|
12769
|
+
);
|
|
12770
|
+
if (beneath) aiSectionApiRef.current?.selectFromElement(beneath);
|
|
12124
12771
|
if (target.closest("[data-ohw-item-drag-surface]")) {
|
|
12125
12772
|
e.preventDefault();
|
|
12126
12773
|
e.stopPropagation();
|
|
@@ -12184,6 +12831,7 @@ function OhhwellsBridge() {
|
|
|
12184
12831
|
if (editable.dataset.ohwEditable === "link") {
|
|
12185
12832
|
e.preventDefault();
|
|
12186
12833
|
e.stopPropagation();
|
|
12834
|
+
aiSectionApiRef.current?.selectFromElement(editable);
|
|
12187
12835
|
deselectRef.current();
|
|
12188
12836
|
deactivateRef.current();
|
|
12189
12837
|
bumpLinkPopoverGrace();
|
|
@@ -12197,6 +12845,7 @@ function OhhwellsBridge() {
|
|
|
12197
12845
|
if (isMediaEditable(editable)) {
|
|
12198
12846
|
e.preventDefault();
|
|
12199
12847
|
e.stopPropagation();
|
|
12848
|
+
aiSectionApiRef.current?.selectFromElement(editable);
|
|
12200
12849
|
postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
|
|
12201
12850
|
return;
|
|
12202
12851
|
}
|
|
@@ -12299,6 +12948,7 @@ function OhhwellsBridge() {
|
|
|
12299
12948
|
closeLinkPopoverRef.current();
|
|
12300
12949
|
return;
|
|
12301
12950
|
}
|
|
12951
|
+
aiSectionApiRef.current?.handleBackgroundClick(target, e.clientX, e.clientY);
|
|
12302
12952
|
deselectRef.current();
|
|
12303
12953
|
deactivateRef.current();
|
|
12304
12954
|
};
|
|
@@ -13360,8 +14010,7 @@ function OhhwellsBridge() {
|
|
|
13360
14010
|
const handleScroll = () => {
|
|
13361
14011
|
const focusEl = activeElRef.current ?? selectedElRef.current;
|
|
13362
14012
|
if (focusEl) {
|
|
13363
|
-
const
|
|
13364
|
-
const r2 = measureEl.getBoundingClientRect();
|
|
14013
|
+
const r2 = activeElRef.current ? getEditMeasureEl(activeElRef.current).getBoundingClientRect() : focusEl.getBoundingClientRect();
|
|
13365
14014
|
applyToolbarPos(r2);
|
|
13366
14015
|
setToolbarRect(r2);
|
|
13367
14016
|
setMaxBadge((prev) => prev && activeElRef.current ? { ...prev, rect: r2 } : prev);
|
|
@@ -13698,6 +14347,7 @@ function OhhwellsBridge() {
|
|
|
13698
14347
|
selectFrameRef.current(footerColumn);
|
|
13699
14348
|
return;
|
|
13700
14349
|
}
|
|
14350
|
+
aiSectionApiRef.current?.handleBackgroundClick(e.target, clientX, clientY);
|
|
13701
14351
|
deactivateRef.current();
|
|
13702
14352
|
};
|
|
13703
14353
|
window.addEventListener("message", handleSave);
|
|
@@ -13776,7 +14426,7 @@ function OhhwellsBridge() {
|
|
|
13776
14426
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
13777
14427
|
};
|
|
13778
14428
|
}, [isEditMode, refreshStateRules]);
|
|
13779
|
-
(0,
|
|
14429
|
+
(0, import_react13.useEffect)(() => {
|
|
13780
14430
|
if (!isEditMode) return;
|
|
13781
14431
|
const THRESHOLD = 10;
|
|
13782
14432
|
const resolveWasSelected = (el) => {
|
|
@@ -13930,7 +14580,7 @@ function OhhwellsBridge() {
|
|
|
13930
14580
|
unlockFooterDragInteraction();
|
|
13931
14581
|
};
|
|
13932
14582
|
}, [isEditMode]);
|
|
13933
|
-
(0,
|
|
14583
|
+
(0, import_react13.useEffect)(() => {
|
|
13934
14584
|
const handler = (e) => {
|
|
13935
14585
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
13936
14586
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -13946,7 +14596,7 @@ function OhhwellsBridge() {
|
|
|
13946
14596
|
window.addEventListener("message", handler);
|
|
13947
14597
|
return () => window.removeEventListener("message", handler);
|
|
13948
14598
|
}, [processConfigRequest]);
|
|
13949
|
-
(0,
|
|
14599
|
+
(0, import_react13.useEffect)(() => {
|
|
13950
14600
|
if (!isEditMode) return;
|
|
13951
14601
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
13952
14602
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -13982,13 +14632,13 @@ function OhhwellsBridge() {
|
|
|
13982
14632
|
clearTimeout(timer);
|
|
13983
14633
|
};
|
|
13984
14634
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
13985
|
-
(0,
|
|
14635
|
+
(0, import_react13.useEffect)(() => {
|
|
13986
14636
|
scrollToHashSectionWhenReady();
|
|
13987
14637
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
13988
14638
|
window.addEventListener("hashchange", onHashChange);
|
|
13989
14639
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
13990
14640
|
}, [pathname]);
|
|
13991
|
-
const handleCommand = (0,
|
|
14641
|
+
const handleCommand = (0, import_react13.useCallback)((cmd) => {
|
|
13992
14642
|
const el = activeElRef.current;
|
|
13993
14643
|
const selBefore = window.getSelection();
|
|
13994
14644
|
let savedOffsets = null;
|
|
@@ -14024,7 +14674,7 @@ function OhhwellsBridge() {
|
|
|
14024
14674
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
14025
14675
|
refreshActiveCommandsRef.current();
|
|
14026
14676
|
}, []);
|
|
14027
|
-
const handleStateChange = (0,
|
|
14677
|
+
const handleStateChange = (0, import_react13.useCallback)((state) => {
|
|
14028
14678
|
if (!activeStateElRef.current) return;
|
|
14029
14679
|
const el = activeStateElRef.current;
|
|
14030
14680
|
if (state === "Default") {
|
|
@@ -14037,7 +14687,7 @@ function OhhwellsBridge() {
|
|
|
14037
14687
|
}
|
|
14038
14688
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
14039
14689
|
}, [deactivate]);
|
|
14040
|
-
const reselectAfterLinkPopover = (0,
|
|
14690
|
+
const reselectAfterLinkPopover = (0, import_react13.useCallback)(
|
|
14041
14691
|
(hrefKey) => {
|
|
14042
14692
|
requestAnimationFrame(() => {
|
|
14043
14693
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -14046,7 +14696,7 @@ function OhhwellsBridge() {
|
|
|
14046
14696
|
},
|
|
14047
14697
|
[resolveHrefKeyElement]
|
|
14048
14698
|
);
|
|
14049
|
-
const closeLinkPopover = (0,
|
|
14699
|
+
const closeLinkPopover = (0, import_react13.useCallback)(() => {
|
|
14050
14700
|
const session = linkPopoverSessionRef.current;
|
|
14051
14701
|
addNavAfterAnchorRef.current = null;
|
|
14052
14702
|
setLinkPopover(null);
|
|
@@ -14054,9 +14704,9 @@ function OhhwellsBridge() {
|
|
|
14054
14704
|
reselectAfterLinkPopover(session.key);
|
|
14055
14705
|
}
|
|
14056
14706
|
}, [reselectAfterLinkPopover]);
|
|
14057
|
-
const closeLinkPopoverRef = (0,
|
|
14707
|
+
const closeLinkPopoverRef = (0, import_react13.useRef)(closeLinkPopover);
|
|
14058
14708
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
14059
|
-
const openLinkPopoverForActive = (0,
|
|
14709
|
+
const openLinkPopoverForActive = (0, import_react13.useCallback)(() => {
|
|
14060
14710
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
14061
14711
|
if (!hrefCtx) return;
|
|
14062
14712
|
bumpLinkPopoverGrace();
|
|
@@ -14067,7 +14717,7 @@ function OhhwellsBridge() {
|
|
|
14067
14717
|
});
|
|
14068
14718
|
deactivate();
|
|
14069
14719
|
}, [deactivate]);
|
|
14070
|
-
const openLinkPopoverForSelected = (0,
|
|
14720
|
+
const openLinkPopoverForSelected = (0, import_react13.useCallback)(() => {
|
|
14071
14721
|
const anchor = selectedElRef.current;
|
|
14072
14722
|
if (!anchor) return;
|
|
14073
14723
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -14080,7 +14730,7 @@ function OhhwellsBridge() {
|
|
|
14080
14730
|
});
|
|
14081
14731
|
deselect();
|
|
14082
14732
|
}, [deselect]);
|
|
14083
|
-
const handleSelectParent = (0,
|
|
14733
|
+
const handleSelectParent = (0, import_react13.useCallback)(() => {
|
|
14084
14734
|
const selected = selectedElRef.current;
|
|
14085
14735
|
if (!selected) return;
|
|
14086
14736
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -14107,7 +14757,7 @@ function OhhwellsBridge() {
|
|
|
14107
14757
|
}
|
|
14108
14758
|
deselectRef.current();
|
|
14109
14759
|
}, []);
|
|
14110
|
-
const handleDuplicateSelected = (0,
|
|
14760
|
+
const handleDuplicateSelected = (0, import_react13.useCallback)(() => {
|
|
14111
14761
|
const selected = selectedElRef.current;
|
|
14112
14762
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
14113
14763
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
@@ -14157,8 +14807,15 @@ function OhhwellsBridge() {
|
|
|
14157
14807
|
};
|
|
14158
14808
|
postToParent2({ type: "ow:change", nodes });
|
|
14159
14809
|
enforceLinkHrefs();
|
|
14810
|
+
if (isNestedNavChild(selected) || navItemOwnsDropdownPanel(selected)) {
|
|
14811
|
+
setNavGroupForceOpen(selected, true);
|
|
14812
|
+
}
|
|
14160
14813
|
requestAnimationFrame(() => {
|
|
14161
14814
|
selectRef.current(result.anchor);
|
|
14815
|
+
requestAnimationFrame(() => {
|
|
14816
|
+
const el = selectedElRef.current;
|
|
14817
|
+
if (el?.isConnected) setToolbarRect(el.getBoundingClientRect());
|
|
14818
|
+
});
|
|
14162
14819
|
});
|
|
14163
14820
|
return;
|
|
14164
14821
|
}
|
|
@@ -14190,7 +14847,7 @@ function OhhwellsBridge() {
|
|
|
14190
14847
|
});
|
|
14191
14848
|
}
|
|
14192
14849
|
}, [postToParent2]);
|
|
14193
|
-
const runPendingDeleteUndo = (0,
|
|
14850
|
+
const runPendingDeleteUndo = (0, import_react13.useCallback)(() => {
|
|
14194
14851
|
const pending = pendingDeleteUndoRef.current;
|
|
14195
14852
|
if (!pending) return false;
|
|
14196
14853
|
pendingDeleteUndoRef.current = null;
|
|
@@ -14198,7 +14855,7 @@ function OhhwellsBridge() {
|
|
|
14198
14855
|
enforceLinkHrefs();
|
|
14199
14856
|
return true;
|
|
14200
14857
|
}, []);
|
|
14201
|
-
const handleDeleteSelected = (0,
|
|
14858
|
+
const handleDeleteSelected = (0, import_react13.useCallback)(() => {
|
|
14202
14859
|
const selected = selectedElRef.current;
|
|
14203
14860
|
if (!selected) return false;
|
|
14204
14861
|
return deleteSelectedNavFooterItem({
|
|
@@ -14219,7 +14876,7 @@ function OhhwellsBridge() {
|
|
|
14219
14876
|
}, [postToParent2]);
|
|
14220
14877
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
14221
14878
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
14222
|
-
const handleLinkPopoverSubmit = (0,
|
|
14879
|
+
const handleLinkPopoverSubmit = (0, import_react13.useCallback)(
|
|
14223
14880
|
(target) => {
|
|
14224
14881
|
const session = linkPopoverSessionRef.current;
|
|
14225
14882
|
if (!session) return;
|
|
@@ -14284,19 +14941,19 @@ function OhhwellsBridge() {
|
|
|
14284
14941
|
const showEditLink = toolbarShowEditLink;
|
|
14285
14942
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
14286
14943
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
14287
|
-
const handleMediaReplace = (0,
|
|
14944
|
+
const handleMediaReplace = (0, import_react13.useCallback)(
|
|
14288
14945
|
(key) => {
|
|
14289
14946
|
postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
|
|
14290
14947
|
},
|
|
14291
14948
|
[postToParent2, mediaHover?.elementType]
|
|
14292
14949
|
);
|
|
14293
|
-
const handleEditCarousel = (0,
|
|
14950
|
+
const handleEditCarousel = (0, import_react13.useCallback)(
|
|
14294
14951
|
(key) => {
|
|
14295
14952
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
14296
14953
|
},
|
|
14297
14954
|
[postToParent2]
|
|
14298
14955
|
);
|
|
14299
|
-
const handleMediaFadeOutComplete = (0,
|
|
14956
|
+
const handleMediaFadeOutComplete = (0, import_react13.useCallback)((key) => {
|
|
14300
14957
|
setUploadingRects((prev) => {
|
|
14301
14958
|
if (!(key in prev)) return prev;
|
|
14302
14959
|
const next = { ...prev };
|
|
@@ -14304,7 +14961,7 @@ function OhhwellsBridge() {
|
|
|
14304
14961
|
return next;
|
|
14305
14962
|
});
|
|
14306
14963
|
}, []);
|
|
14307
|
-
const handleVideoSettingsChange = (0,
|
|
14964
|
+
const handleVideoSettingsChange = (0, import_react13.useCallback)(
|
|
14308
14965
|
(key, settings) => {
|
|
14309
14966
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
14310
14967
|
const video = getVideoEl2(el);
|
|
@@ -14327,9 +14984,10 @@ function OhhwellsBridge() {
|
|
|
14327
14984
|
[postToParent2]
|
|
14328
14985
|
);
|
|
14329
14986
|
return bridgeRoot ? (0, import_react_dom3.createPortal)(
|
|
14330
|
-
/* @__PURE__ */ (0,
|
|
14331
|
-
/* @__PURE__ */ (0,
|
|
14332
|
-
|
|
14987
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
|
|
14988
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
14989
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
|
|
14990
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14333
14991
|
MediaOverlay,
|
|
14334
14992
|
{
|
|
14335
14993
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -14340,7 +14998,7 @@ function OhhwellsBridge() {
|
|
|
14340
14998
|
},
|
|
14341
14999
|
`uploading-${key}`
|
|
14342
15000
|
)),
|
|
14343
|
-
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0,
|
|
15001
|
+
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14344
15002
|
MediaOverlay,
|
|
14345
15003
|
{
|
|
14346
15004
|
hover: mediaHover,
|
|
@@ -14349,11 +15007,11 @@ function OhhwellsBridge() {
|
|
|
14349
15007
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
14350
15008
|
}
|
|
14351
15009
|
),
|
|
14352
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
14353
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
14354
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
14355
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0,
|
|
14356
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
15010
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
|
|
15011
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
15012
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
15013
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
15014
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14357
15015
|
"div",
|
|
14358
15016
|
{
|
|
14359
15017
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -14363,7 +15021,7 @@ function OhhwellsBridge() {
|
|
|
14363
15021
|
width: slot.width,
|
|
14364
15022
|
height: slot.height
|
|
14365
15023
|
},
|
|
14366
|
-
children: /* @__PURE__ */ (0,
|
|
15024
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14367
15025
|
DropIndicator,
|
|
14368
15026
|
{
|
|
14369
15027
|
direction: slot.direction,
|
|
@@ -14374,7 +15032,7 @@ function OhhwellsBridge() {
|
|
|
14374
15032
|
},
|
|
14375
15033
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
14376
15034
|
)),
|
|
14377
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
15035
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14378
15036
|
"div",
|
|
14379
15037
|
{
|
|
14380
15038
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -14384,7 +15042,7 @@ function OhhwellsBridge() {
|
|
|
14384
15042
|
width: slot.width,
|
|
14385
15043
|
height: slot.height
|
|
14386
15044
|
},
|
|
14387
|
-
children: /* @__PURE__ */ (0,
|
|
15045
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14388
15046
|
DropIndicator,
|
|
14389
15047
|
{
|
|
14390
15048
|
direction: slot.direction,
|
|
@@ -14395,10 +15053,10 @@ function OhhwellsBridge() {
|
|
|
14395
15053
|
},
|
|
14396
15054
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
14397
15055
|
)),
|
|
14398
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
14399
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
14400
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
14401
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
15056
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
15057
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
15058
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
15059
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14402
15060
|
FooterContainerChrome,
|
|
14403
15061
|
{
|
|
14404
15062
|
rect: toolbarRect,
|
|
@@ -14406,12 +15064,13 @@ function OhhwellsBridge() {
|
|
|
14406
15064
|
addDisabled: !canAddFooterColumn()
|
|
14407
15065
|
}
|
|
14408
15066
|
),
|
|
14409
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0,
|
|
15067
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14410
15068
|
ItemInteractionLayer,
|
|
14411
15069
|
{
|
|
14412
15070
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
15071
|
+
toolbarBelowRect: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanelRect(selectedElRef.current) : null,
|
|
14413
15072
|
elRef: glowElRef,
|
|
14414
|
-
state: isItemDragging ? "dragging" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
|
|
15073
|
+
state: isItemDragging ? "dragging" : selectedElRef.current && isNavigationItem2(selectedElRef.current) && getOpenNavDropdownPanelRect(selectedElRef.current) ? "active-bottom" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
|
|
14415
15074
|
showHandle: toolbarVariant === "link-action" && Boolean(reorderHrefKey) || toolbarVariant === "select-frame" && isFooterFrameSelection,
|
|
14416
15075
|
dragDisabled: reorderDragDisabled,
|
|
14417
15076
|
dragHandleLabel: reorderHrefKey ? `Reorder ${reorderHrefKey}` : "Reorder item",
|
|
@@ -14420,7 +15079,7 @@ function OhhwellsBridge() {
|
|
|
14420
15079
|
onItemPointerDown: handleItemChromePointerDown,
|
|
14421
15080
|
onItemClick: handleItemChromeClick,
|
|
14422
15081
|
itemDragSurface: !isFooterFrameSelection,
|
|
14423
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && isFooterFrameSelection && !isItemDragging ? /* @__PURE__ */ (0,
|
|
15082
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && isFooterFrameSelection && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14424
15083
|
ItemActionToolbar,
|
|
14425
15084
|
{
|
|
14426
15085
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -14432,17 +15091,21 @@ function OhhwellsBridge() {
|
|
|
14432
15091
|
editLinkDisabled: false,
|
|
14433
15092
|
moreDisabled: false,
|
|
14434
15093
|
duplicateDisabled: isFooterFrameSelection,
|
|
14435
|
-
showEditLink: !isFooterFrameSelection,
|
|
15094
|
+
showEditLink: !isFooterFrameSelection && navDropdownPreviewOpen === null,
|
|
14436
15095
|
showAddItem: isFooterFrameSelection || !selectedIsCta && Boolean(
|
|
14437
15096
|
selectedElRef.current && isNavbarHrefKey(selectedElRef.current.getAttribute("data-ohw-href-key")) && !isNestedNavChild(selectedElRef.current)
|
|
14438
15097
|
),
|
|
14439
|
-
showMore: !selectedIsCta || isFooterFrameSelection
|
|
15098
|
+
showMore: !selectedIsCta || isFooterFrameSelection,
|
|
15099
|
+
dropdownOpen: navDropdownPreviewOpen,
|
|
15100
|
+
onDropdownOpenChange: handleNavDropdownOpenChange,
|
|
15101
|
+
headingVisible: footerHeadingVisible,
|
|
15102
|
+
onHeadingVisibleChange: handleFooterHeadingVisibleChange
|
|
14440
15103
|
}
|
|
14441
15104
|
) : void 0
|
|
14442
15105
|
}
|
|
14443
15106
|
),
|
|
14444
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0,
|
|
14445
|
-
/* @__PURE__ */ (0,
|
|
15107
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
|
|
15108
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14446
15109
|
EditGlowChrome,
|
|
14447
15110
|
{
|
|
14448
15111
|
rect: toolbarRect,
|
|
@@ -14452,7 +15115,7 @@ function OhhwellsBridge() {
|
|
|
14452
15115
|
hideHandle: isItemDragging
|
|
14453
15116
|
}
|
|
14454
15117
|
),
|
|
14455
|
-
/* @__PURE__ */ (0,
|
|
15118
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14456
15119
|
FloatingToolbar,
|
|
14457
15120
|
{
|
|
14458
15121
|
rect: toolbarRect,
|
|
@@ -14465,7 +15128,7 @@ function OhhwellsBridge() {
|
|
|
14465
15128
|
}
|
|
14466
15129
|
)
|
|
14467
15130
|
] }),
|
|
14468
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
15131
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
14469
15132
|
"div",
|
|
14470
15133
|
{
|
|
14471
15134
|
"data-ohw-max-badge": "",
|
|
@@ -14491,7 +15154,7 @@ function OhhwellsBridge() {
|
|
|
14491
15154
|
]
|
|
14492
15155
|
}
|
|
14493
15156
|
),
|
|
14494
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
15157
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14495
15158
|
StateToggle,
|
|
14496
15159
|
{
|
|
14497
15160
|
rect: toggleState.rect,
|
|
@@ -14500,15 +15163,15 @@ function OhhwellsBridge() {
|
|
|
14500
15163
|
onStateChange: handleStateChange
|
|
14501
15164
|
}
|
|
14502
15165
|
),
|
|
14503
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
15166
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
14504
15167
|
"div",
|
|
14505
15168
|
{
|
|
14506
15169
|
"data-ohw-section-insert-line": "",
|
|
14507
15170
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
14508
15171
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
14509
15172
|
children: [
|
|
14510
|
-
/* @__PURE__ */ (0,
|
|
14511
|
-
/* @__PURE__ */ (0,
|
|
15173
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
|
|
15174
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14512
15175
|
Badge,
|
|
14513
15176
|
{
|
|
14514
15177
|
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",
|
|
@@ -14525,11 +15188,11 @@ function OhhwellsBridge() {
|
|
|
14525
15188
|
children: "Add Section"
|
|
14526
15189
|
}
|
|
14527
15190
|
),
|
|
14528
|
-
/* @__PURE__ */ (0,
|
|
15191
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
|
|
14529
15192
|
]
|
|
14530
15193
|
}
|
|
14531
15194
|
),
|
|
14532
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
15195
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14533
15196
|
LinkPopover,
|
|
14534
15197
|
{
|
|
14535
15198
|
panelRef: linkPopoverPanelRef,
|