@ohhwells/bridge 0.1.126 → 0.1.127
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 +1290 -688
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1192 -590
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
// src/OhhwellsBridge.tsx
|
|
4
|
-
import React12, { useCallback as
|
|
4
|
+
import React12, { useCallback as useCallback11, useEffect as useEffect16, useLayoutEffect as useLayoutEffect5, useRef as useRef13, useState as useState17 } from "react";
|
|
5
5
|
import { createRoot as createRoot2 } from "react-dom/client";
|
|
6
6
|
import { flushSync as flushSync2 } from "react-dom";
|
|
7
7
|
|
|
@@ -1237,7 +1237,7 @@ function initSectionInstancesFromContent(content, currentPath) {
|
|
|
1237
1237
|
|
|
1238
1238
|
// src/ui/ai-tree/AiTreeRenderer.tsx
|
|
1239
1239
|
import React from "react";
|
|
1240
|
-
import { ArrowLeft, ArrowRight, ChevronDown, icons as lucideIcons } from "lucide-react";
|
|
1240
|
+
import { ArrowLeft, ArrowRight, ChevronDown, Play, icons as lucideIcons } from "lucide-react";
|
|
1241
1241
|
|
|
1242
1242
|
// src/lib/placeholder-imagery.ts
|
|
1243
1243
|
var U = (id) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=1600&q=80`;
|
|
@@ -1787,6 +1787,117 @@ function MediaBox({
|
|
|
1787
1787
|
}
|
|
1788
1788
|
);
|
|
1789
1789
|
}
|
|
1790
|
+
function VideoEmbed({ slots, ctx, path }) {
|
|
1791
|
+
const [playing, setPlaying] = React.useState(false);
|
|
1792
|
+
const videoId = str(slots.videoId);
|
|
1793
|
+
const caption = str(slots.caption);
|
|
1794
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing3 }, children: [
|
|
1795
|
+
/* @__PURE__ */ jsx(
|
|
1796
|
+
"div",
|
|
1797
|
+
{
|
|
1798
|
+
"data-ohw-video-block": "",
|
|
1799
|
+
"data-ohw-video-path": path,
|
|
1800
|
+
style: {
|
|
1801
|
+
position: "relative",
|
|
1802
|
+
width: "100%",
|
|
1803
|
+
aspectRatio: "16 / 9",
|
|
1804
|
+
// Floor so YouTube's own control chrome (volume tooltip, CC, related-videos
|
|
1805
|
+
// overlay) has enough room on narrow mobile widths — 16:9 alone can shrink
|
|
1806
|
+
// below what that fixed-size chrome needs and it starts clipping.
|
|
1807
|
+
minHeight: 250,
|
|
1808
|
+
borderRadius: AI_TREE_TOKENS.radiusCard,
|
|
1809
|
+
overflow: "hidden",
|
|
1810
|
+
background: "#DBEAFE"
|
|
1811
|
+
},
|
|
1812
|
+
children: !videoId ? /* @__PURE__ */ jsx(
|
|
1813
|
+
"div",
|
|
1814
|
+
{
|
|
1815
|
+
style: {
|
|
1816
|
+
position: "absolute",
|
|
1817
|
+
inset: 0,
|
|
1818
|
+
display: "flex",
|
|
1819
|
+
alignItems: "center",
|
|
1820
|
+
justifyContent: "center",
|
|
1821
|
+
color: "#93C5FD",
|
|
1822
|
+
fontSize: 13
|
|
1823
|
+
},
|
|
1824
|
+
children: "video"
|
|
1825
|
+
}
|
|
1826
|
+
) : playing ? /* @__PURE__ */ jsx(
|
|
1827
|
+
"iframe",
|
|
1828
|
+
{
|
|
1829
|
+
src: `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1&rel=0`,
|
|
1830
|
+
title: caption || "YouTube video",
|
|
1831
|
+
style: { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 },
|
|
1832
|
+
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture",
|
|
1833
|
+
allowFullScreen: true,
|
|
1834
|
+
sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox",
|
|
1835
|
+
loading: "lazy"
|
|
1836
|
+
}
|
|
1837
|
+
) : /* @__PURE__ */ jsxs(
|
|
1838
|
+
"button",
|
|
1839
|
+
{
|
|
1840
|
+
type: "button",
|
|
1841
|
+
onClick: () => setPlaying(true),
|
|
1842
|
+
"aria-label": "Play video",
|
|
1843
|
+
style: {
|
|
1844
|
+
position: "absolute",
|
|
1845
|
+
inset: 0,
|
|
1846
|
+
width: "100%",
|
|
1847
|
+
height: "100%",
|
|
1848
|
+
border: 0,
|
|
1849
|
+
padding: 0,
|
|
1850
|
+
margin: 0,
|
|
1851
|
+
cursor: "pointer",
|
|
1852
|
+
background: "none"
|
|
1853
|
+
},
|
|
1854
|
+
children: [
|
|
1855
|
+
/* @__PURE__ */ jsx(
|
|
1856
|
+
"img",
|
|
1857
|
+
{
|
|
1858
|
+
src: `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
|
|
1859
|
+
alt: "",
|
|
1860
|
+
style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
|
|
1861
|
+
}
|
|
1862
|
+
),
|
|
1863
|
+
/* @__PURE__ */ jsx(
|
|
1864
|
+
"span",
|
|
1865
|
+
{
|
|
1866
|
+
style: {
|
|
1867
|
+
position: "absolute",
|
|
1868
|
+
top: "50%",
|
|
1869
|
+
left: "50%",
|
|
1870
|
+
transform: "translate(-50%, -50%)",
|
|
1871
|
+
width: 64,
|
|
1872
|
+
height: 64,
|
|
1873
|
+
borderRadius: "50%",
|
|
1874
|
+
background: "rgba(0,0,0,0.65)",
|
|
1875
|
+
display: "flex",
|
|
1876
|
+
alignItems: "center",
|
|
1877
|
+
justifyContent: "center"
|
|
1878
|
+
},
|
|
1879
|
+
children: /* @__PURE__ */ jsx(Play, { size: 28, color: "#fff", fill: "#fff" })
|
|
1880
|
+
}
|
|
1881
|
+
)
|
|
1882
|
+
]
|
|
1883
|
+
}
|
|
1884
|
+
)
|
|
1885
|
+
}
|
|
1886
|
+
),
|
|
1887
|
+
caption && /* @__PURE__ */ jsx(
|
|
1888
|
+
"div",
|
|
1889
|
+
{
|
|
1890
|
+
...textAttrs(ctx, `${path}.caption`),
|
|
1891
|
+
style: {
|
|
1892
|
+
...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body),
|
|
1893
|
+
color: ctx.brand.palette.dark,
|
|
1894
|
+
textAlign: "center"
|
|
1895
|
+
},
|
|
1896
|
+
children: caption
|
|
1897
|
+
}
|
|
1898
|
+
)
|
|
1899
|
+
] });
|
|
1900
|
+
}
|
|
1790
1901
|
function ButtonEl({
|
|
1791
1902
|
slots,
|
|
1792
1903
|
ctx,
|
|
@@ -2867,6 +2978,8 @@ function renderNode(node, ctx, path) {
|
|
|
2867
2978
|
editPath: `${path}.source`
|
|
2868
2979
|
}
|
|
2869
2980
|
);
|
|
2981
|
+
case "video":
|
|
2982
|
+
return /* @__PURE__ */ jsx(VideoEmbed, { slots, ctx, path });
|
|
2870
2983
|
case "media-list": {
|
|
2871
2984
|
const stacked = slots.layout === "stack";
|
|
2872
2985
|
return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: stacked ? 0 : AI_TREE_TOKENS.spacing3 }, children: (node.children ?? []).map((child, i) => /* @__PURE__ */ jsx(
|
|
@@ -9373,7 +9486,7 @@ function FieldTypePicker({ onPick }) {
|
|
|
9373
9486
|
|
|
9374
9487
|
// src/ui/MediaOverlay.tsx
|
|
9375
9488
|
import * as React8 from "react";
|
|
9376
|
-
import { Film, ImageIcon, Pause, Play, Volume2, VolumeX } from "lucide-react";
|
|
9489
|
+
import { Film, ImageIcon, Pause, Play as Play2, Volume2, VolumeX } from "lucide-react";
|
|
9377
9490
|
|
|
9378
9491
|
// src/ui/button.tsx
|
|
9379
9492
|
import * as React7 from "react";
|
|
@@ -9544,7 +9657,7 @@ function MediaOverlay({
|
|
|
9544
9657
|
e.stopPropagation();
|
|
9545
9658
|
onVideoSettingsChange?.(hover.key, { autoplay: !autoplay });
|
|
9546
9659
|
},
|
|
9547
|
-
children: autoplay ? /* @__PURE__ */ jsx15(Pause, { size: 14 }) : /* @__PURE__ */ jsx15(
|
|
9660
|
+
children: autoplay ? /* @__PURE__ */ jsx15(Pause, { size: 14 }) : /* @__PURE__ */ jsx15(Play2, { size: 14 })
|
|
9548
9661
|
}
|
|
9549
9662
|
),
|
|
9550
9663
|
/* @__PURE__ */ jsx15(
|
|
@@ -11416,6 +11529,486 @@ function AiPricingCardOverlay({
|
|
|
11416
11529
|
] });
|
|
11417
11530
|
}
|
|
11418
11531
|
|
|
11532
|
+
// src/ui/ai-section/AiVideoOverlay.tsx
|
|
11533
|
+
import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef7, useState as useState9 } from "react";
|
|
11534
|
+
import { Star as Star3 } from "lucide-react";
|
|
11535
|
+
|
|
11536
|
+
// src/lib/ai-video-tree.ts
|
|
11537
|
+
function resolveVideoBlock(tree, path) {
|
|
11538
|
+
const segments = path.split(".");
|
|
11539
|
+
const rowSeg = segments[0];
|
|
11540
|
+
const blockSeg = segments[1];
|
|
11541
|
+
if (!rowSeg?.startsWith("r") || !blockSeg?.startsWith("b")) return null;
|
|
11542
|
+
let node = tree.rows[Number(rowSeg.slice(1))]?.blocks[Number(blockSeg.slice(1))];
|
|
11543
|
+
for (const seg of segments.slice(2)) {
|
|
11544
|
+
if (!node || !seg.startsWith("c")) return null;
|
|
11545
|
+
node = node.children?.[Number(seg.slice(1))];
|
|
11546
|
+
}
|
|
11547
|
+
return node && node.type === "video" ? node : null;
|
|
11548
|
+
}
|
|
11549
|
+
function withVideo(tree, path, mutate) {
|
|
11550
|
+
const next = JSON.parse(JSON.stringify(tree));
|
|
11551
|
+
const block = resolveVideoBlock(next, path);
|
|
11552
|
+
if (!block) return null;
|
|
11553
|
+
block.slots = block.slots ?? {};
|
|
11554
|
+
return mutate(block) ? next : null;
|
|
11555
|
+
}
|
|
11556
|
+
function videoIdAt(tree, path) {
|
|
11557
|
+
const block = resolveVideoBlock(tree, path);
|
|
11558
|
+
const id = block?.slots?.videoId;
|
|
11559
|
+
return typeof id === "string" ? id : "";
|
|
11560
|
+
}
|
|
11561
|
+
function setVideoId(tree, path, videoId) {
|
|
11562
|
+
return withVideo(tree, path, (block) => {
|
|
11563
|
+
block.slots = { ...block.slots, videoId };
|
|
11564
|
+
return true;
|
|
11565
|
+
});
|
|
11566
|
+
}
|
|
11567
|
+
function clearVideo(tree, path) {
|
|
11568
|
+
return withVideo(tree, path, (block) => {
|
|
11569
|
+
const slots = { ...block.slots };
|
|
11570
|
+
delete slots.videoId;
|
|
11571
|
+
block.slots = slots;
|
|
11572
|
+
return true;
|
|
11573
|
+
});
|
|
11574
|
+
}
|
|
11575
|
+
|
|
11576
|
+
// src/lib/youtube.ts
|
|
11577
|
+
var YOUTUBE_ID_PATTERN = /^[A-Za-z0-9_-]{11}$/;
|
|
11578
|
+
function extractYouTubeId(input) {
|
|
11579
|
+
const trimmed = input.trim();
|
|
11580
|
+
if (!trimmed) return null;
|
|
11581
|
+
if (YOUTUBE_ID_PATTERN.test(trimmed)) return trimmed;
|
|
11582
|
+
let url;
|
|
11583
|
+
try {
|
|
11584
|
+
url = new URL(trimmed);
|
|
11585
|
+
} catch {
|
|
11586
|
+
return null;
|
|
11587
|
+
}
|
|
11588
|
+
const host = url.hostname.replace(/^www\./, "");
|
|
11589
|
+
if (host !== "youtube.com" && host !== "m.youtube.com" && host !== "youtu.be" && host !== "youtube-nocookie.com") {
|
|
11590
|
+
return null;
|
|
11591
|
+
}
|
|
11592
|
+
let candidate = null;
|
|
11593
|
+
if (host === "youtu.be") {
|
|
11594
|
+
candidate = url.pathname.slice(1).split("/")[0] ?? null;
|
|
11595
|
+
} else if (url.pathname === "/watch") {
|
|
11596
|
+
candidate = url.searchParams.get("v");
|
|
11597
|
+
} else {
|
|
11598
|
+
const match = url.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/);
|
|
11599
|
+
candidate = match ? match[1] : null;
|
|
11600
|
+
}
|
|
11601
|
+
return candidate && YOUTUBE_ID_PATTERN.test(candidate) ? candidate : null;
|
|
11602
|
+
}
|
|
11603
|
+
|
|
11604
|
+
// src/ui/ai-section/AiVideoOverlay.tsx
|
|
11605
|
+
import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
11606
|
+
var PRIMARY5 = "#0885FE";
|
|
11607
|
+
var OHW_BLUE3 = `var(--ohw-primary, ${PRIMARY5})`;
|
|
11608
|
+
var OHW_BLUE_DARK3 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY5}) 60%, #000000)`;
|
|
11609
|
+
function findVideoBlockElement(sectionId, path) {
|
|
11610
|
+
const sectionEl = findByInstanceId(sectionId);
|
|
11611
|
+
if (!sectionEl) return null;
|
|
11612
|
+
const items = sectionEl.querySelectorAll("[data-ohw-video-block]");
|
|
11613
|
+
for (const el of Array.from(items)) {
|
|
11614
|
+
if (el.dataset.ohwVideoPath === path) return el;
|
|
11615
|
+
}
|
|
11616
|
+
return null;
|
|
11617
|
+
}
|
|
11618
|
+
function readRect4(ref) {
|
|
11619
|
+
const el = ref && findVideoBlockElement(ref.sectionId, ref.path);
|
|
11620
|
+
if (!el) return null;
|
|
11621
|
+
const r2 = el.getBoundingClientRect();
|
|
11622
|
+
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
11623
|
+
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
11624
|
+
}
|
|
11625
|
+
function useLiveBlockRect(ref) {
|
|
11626
|
+
const [rect, setRect] = useState9(null);
|
|
11627
|
+
useEffect7(() => {
|
|
11628
|
+
if (!ref) {
|
|
11629
|
+
setRect(null);
|
|
11630
|
+
return;
|
|
11631
|
+
}
|
|
11632
|
+
const update = () => {
|
|
11633
|
+
const next = readRect4(ref);
|
|
11634
|
+
setRect(
|
|
11635
|
+
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
11636
|
+
);
|
|
11637
|
+
};
|
|
11638
|
+
update();
|
|
11639
|
+
const opts = { capture: true, passive: true };
|
|
11640
|
+
window.addEventListener("scroll", update, opts);
|
|
11641
|
+
window.addEventListener("resize", update);
|
|
11642
|
+
const interval = setInterval(update, 500);
|
|
11643
|
+
return () => {
|
|
11644
|
+
window.removeEventListener("scroll", update, opts);
|
|
11645
|
+
window.removeEventListener("resize", update);
|
|
11646
|
+
clearInterval(interval);
|
|
11647
|
+
};
|
|
11648
|
+
}, [ref?.sectionId, ref?.path]);
|
|
11649
|
+
return rect;
|
|
11650
|
+
}
|
|
11651
|
+
function requestValidateTree3(postToParent2, tree) {
|
|
11652
|
+
return new Promise((resolve) => {
|
|
11653
|
+
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
11654
|
+
const timeout = window.setTimeout(() => {
|
|
11655
|
+
window.removeEventListener("message", onMessage);
|
|
11656
|
+
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
11657
|
+
}, 8e3);
|
|
11658
|
+
function onMessage(e) {
|
|
11659
|
+
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
11660
|
+
window.clearTimeout(timeout);
|
|
11661
|
+
window.removeEventListener("message", onMessage);
|
|
11662
|
+
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
11663
|
+
}
|
|
11664
|
+
window.addEventListener("message", onMessage);
|
|
11665
|
+
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
11666
|
+
});
|
|
11667
|
+
}
|
|
11668
|
+
function Pill3({
|
|
11669
|
+
label,
|
|
11670
|
+
onClick,
|
|
11671
|
+
disabled
|
|
11672
|
+
}) {
|
|
11673
|
+
return /* @__PURE__ */ jsx20(
|
|
11674
|
+
"button",
|
|
11675
|
+
{
|
|
11676
|
+
type: "button",
|
|
11677
|
+
onClick,
|
|
11678
|
+
disabled,
|
|
11679
|
+
style: {
|
|
11680
|
+
height: 28,
|
|
11681
|
+
padding: "0 10px",
|
|
11682
|
+
display: "inline-flex",
|
|
11683
|
+
alignItems: "center",
|
|
11684
|
+
gap: 4,
|
|
11685
|
+
borderRadius: 999,
|
|
11686
|
+
border: "none",
|
|
11687
|
+
cursor: disabled ? "default" : "pointer",
|
|
11688
|
+
background: "#ffffff",
|
|
11689
|
+
color: OHW_BLUE_DARK3,
|
|
11690
|
+
opacity: disabled ? 0.4 : 1,
|
|
11691
|
+
fontSize: 12,
|
|
11692
|
+
lineHeight: "16px",
|
|
11693
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
11694
|
+
whiteSpace: "nowrap",
|
|
11695
|
+
flex: "0 0 auto"
|
|
11696
|
+
},
|
|
11697
|
+
children: label
|
|
11698
|
+
}
|
|
11699
|
+
);
|
|
11700
|
+
}
|
|
11701
|
+
function watchUrl(id) {
|
|
11702
|
+
return `https://www.youtube.com/watch?v=${id}`;
|
|
11703
|
+
}
|
|
11704
|
+
function VideoUrlInput({ value, onCommit }) {
|
|
11705
|
+
const [draft, setDraft] = useState9(value ? watchUrl(value) : "");
|
|
11706
|
+
const [invalid, setInvalid] = useState9(false);
|
|
11707
|
+
useEffect7(() => {
|
|
11708
|
+
setDraft(value ? watchUrl(value) : "");
|
|
11709
|
+
setInvalid(false);
|
|
11710
|
+
}, [value]);
|
|
11711
|
+
const commit = () => {
|
|
11712
|
+
const next = draft.trim();
|
|
11713
|
+
if (!next) {
|
|
11714
|
+
setInvalid(false);
|
|
11715
|
+
if (value) onCommit(null);
|
|
11716
|
+
return;
|
|
11717
|
+
}
|
|
11718
|
+
const id = extractYouTubeId(next);
|
|
11719
|
+
if (!id) return setInvalid(true);
|
|
11720
|
+
setInvalid(false);
|
|
11721
|
+
setDraft(watchUrl(id));
|
|
11722
|
+
if (id !== value) onCommit(id);
|
|
11723
|
+
};
|
|
11724
|
+
const handleChange = (next) => {
|
|
11725
|
+
setDraft(next);
|
|
11726
|
+
const id = extractYouTubeId(next.trim());
|
|
11727
|
+
if (id && id !== value) {
|
|
11728
|
+
setInvalid(false);
|
|
11729
|
+
onCommit(id);
|
|
11730
|
+
}
|
|
11731
|
+
};
|
|
11732
|
+
return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: 4, width: "100%", maxWidth: 280 }, children: [
|
|
11733
|
+
/* @__PURE__ */ jsxs12(
|
|
11734
|
+
"div",
|
|
11735
|
+
{
|
|
11736
|
+
style: {
|
|
11737
|
+
display: "flex",
|
|
11738
|
+
alignItems: "center",
|
|
11739
|
+
gap: 6,
|
|
11740
|
+
height: 28,
|
|
11741
|
+
padding: "0 12px",
|
|
11742
|
+
borderRadius: 999,
|
|
11743
|
+
background: "#ffffff",
|
|
11744
|
+
width: "100%",
|
|
11745
|
+
boxSizing: "border-box",
|
|
11746
|
+
boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
|
|
11747
|
+
},
|
|
11748
|
+
children: [
|
|
11749
|
+
/* @__PURE__ */ jsx20(
|
|
11750
|
+
"span",
|
|
11751
|
+
{
|
|
11752
|
+
style: {
|
|
11753
|
+
flex: "0 0 auto",
|
|
11754
|
+
color: OHW_BLUE_DARK3,
|
|
11755
|
+
fontSize: 10,
|
|
11756
|
+
lineHeight: "16px",
|
|
11757
|
+
fontWeight: 700,
|
|
11758
|
+
textTransform: "uppercase",
|
|
11759
|
+
letterSpacing: 0.4
|
|
11760
|
+
},
|
|
11761
|
+
children: "Video"
|
|
11762
|
+
}
|
|
11763
|
+
),
|
|
11764
|
+
/* @__PURE__ */ jsx20(
|
|
11765
|
+
"input",
|
|
11766
|
+
{
|
|
11767
|
+
type: "text",
|
|
11768
|
+
inputMode: "url",
|
|
11769
|
+
value: draft,
|
|
11770
|
+
onChange: (e) => handleChange(e.target.value),
|
|
11771
|
+
onBlur: commit,
|
|
11772
|
+
onKeyDown: (e) => {
|
|
11773
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
11774
|
+
if (e.key === "Escape") {
|
|
11775
|
+
setDraft(value ? watchUrl(value) : "");
|
|
11776
|
+
setInvalid(false);
|
|
11777
|
+
e.currentTarget.blur();
|
|
11778
|
+
}
|
|
11779
|
+
},
|
|
11780
|
+
placeholder: "Paste a YouTube URL",
|
|
11781
|
+
"aria-label": "YouTube video URL",
|
|
11782
|
+
"aria-invalid": invalid,
|
|
11783
|
+
style: {
|
|
11784
|
+
flex: 1,
|
|
11785
|
+
minWidth: 0,
|
|
11786
|
+
border: "none",
|
|
11787
|
+
outline: "none",
|
|
11788
|
+
background: "transparent",
|
|
11789
|
+
padding: 0,
|
|
11790
|
+
margin: 0,
|
|
11791
|
+
fontSize: 12,
|
|
11792
|
+
lineHeight: "16px",
|
|
11793
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
11794
|
+
color: "#1f2937"
|
|
11795
|
+
}
|
|
11796
|
+
}
|
|
11797
|
+
)
|
|
11798
|
+
]
|
|
11799
|
+
}
|
|
11800
|
+
),
|
|
11801
|
+
invalid && /* @__PURE__ */ jsx20("div", { style: { color: "#FCA5A5", fontSize: 11, textAlign: "center" }, children: "That doesn't look like a YouTube link \u2014 try pasting the video URL again." })
|
|
11802
|
+
] });
|
|
11803
|
+
}
|
|
11804
|
+
function VideoToolbar({
|
|
11805
|
+
videoId,
|
|
11806
|
+
pending,
|
|
11807
|
+
error,
|
|
11808
|
+
onSetVideoId,
|
|
11809
|
+
onRemove
|
|
11810
|
+
}) {
|
|
11811
|
+
return /* @__PURE__ */ jsxs12(
|
|
11812
|
+
"div",
|
|
11813
|
+
{
|
|
11814
|
+
"data-ohw-bridge": "",
|
|
11815
|
+
"data-ohw-toolbar": "",
|
|
11816
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
11817
|
+
style: {
|
|
11818
|
+
display: "flex",
|
|
11819
|
+
flexDirection: "column",
|
|
11820
|
+
gap: 6,
|
|
11821
|
+
alignItems: "center",
|
|
11822
|
+
width: 280,
|
|
11823
|
+
background: OHW_BLUE3,
|
|
11824
|
+
padding: 8,
|
|
11825
|
+
borderRadius: 12,
|
|
11826
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
11827
|
+
pointerEvents: pending ? "none" : "auto",
|
|
11828
|
+
opacity: pending ? 0.6 : 1
|
|
11829
|
+
},
|
|
11830
|
+
children: [
|
|
11831
|
+
/* @__PURE__ */ jsx20(VideoUrlInput, { value: videoId, onCommit: onSetVideoId }),
|
|
11832
|
+
/* @__PURE__ */ jsx20(Pill3, { label: "Remove video", onClick: onRemove, disabled: !videoId }),
|
|
11833
|
+
error && /* @__PURE__ */ jsx20("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
11834
|
+
]
|
|
11835
|
+
}
|
|
11836
|
+
);
|
|
11837
|
+
}
|
|
11838
|
+
function AiVideoOverlay({
|
|
11839
|
+
postToParent: postToParent2,
|
|
11840
|
+
aiSectionsRef,
|
|
11841
|
+
applyTreeLocalRef,
|
|
11842
|
+
clearInteractionChromeRef
|
|
11843
|
+
}) {
|
|
11844
|
+
const [hover, setHover] = useState9(null);
|
|
11845
|
+
const [active, setActive] = useState9(null);
|
|
11846
|
+
const [pending, setPending] = useState9(false);
|
|
11847
|
+
const [error, setError] = useState9(null);
|
|
11848
|
+
const activeRef = useRef7(null);
|
|
11849
|
+
activeRef.current = active;
|
|
11850
|
+
useEffect7(() => {
|
|
11851
|
+
const onMove = (e) => {
|
|
11852
|
+
const t = e.target;
|
|
11853
|
+
if (!(t instanceof HTMLElement)) return;
|
|
11854
|
+
if (t.closest("[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review]")) {
|
|
11855
|
+
return;
|
|
11856
|
+
}
|
|
11857
|
+
const blockEl = t.closest("[data-ohw-video-block]");
|
|
11858
|
+
if (!blockEl) {
|
|
11859
|
+
setHover(null);
|
|
11860
|
+
return;
|
|
11861
|
+
}
|
|
11862
|
+
const sectionEl = blockEl.closest("[data-ohw-section]");
|
|
11863
|
+
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
11864
|
+
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
11865
|
+
const path = blockEl.dataset.ohwVideoPath;
|
|
11866
|
+
if (!sectionId || !path) {
|
|
11867
|
+
setHover(null);
|
|
11868
|
+
return;
|
|
11869
|
+
}
|
|
11870
|
+
setHover({ sectionId, path });
|
|
11871
|
+
};
|
|
11872
|
+
const onLeave = () => setHover(null);
|
|
11873
|
+
document.addEventListener("mousemove", onMove, { passive: true });
|
|
11874
|
+
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
11875
|
+
return () => {
|
|
11876
|
+
document.removeEventListener("mousemove", onMove);
|
|
11877
|
+
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
11878
|
+
};
|
|
11879
|
+
}, []);
|
|
11880
|
+
useEffect7(() => {
|
|
11881
|
+
const onClick = (e) => {
|
|
11882
|
+
const current = activeRef.current;
|
|
11883
|
+
if (!current) return;
|
|
11884
|
+
const t = e.target;
|
|
11885
|
+
if (!(t instanceof HTMLElement)) return;
|
|
11886
|
+
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
11887
|
+
const blockEl = findVideoBlockElement(current.sectionId, current.path);
|
|
11888
|
+
if (blockEl && blockEl.contains(t)) return;
|
|
11889
|
+
setActive(null);
|
|
11890
|
+
setError(null);
|
|
11891
|
+
};
|
|
11892
|
+
document.addEventListener("click", onClick, true);
|
|
11893
|
+
return () => document.removeEventListener("click", onClick, true);
|
|
11894
|
+
}, []);
|
|
11895
|
+
useEffect7(() => {
|
|
11896
|
+
const onBlur = () => {
|
|
11897
|
+
if (!activeRef.current) return;
|
|
11898
|
+
setActive(null);
|
|
11899
|
+
setError(null);
|
|
11900
|
+
};
|
|
11901
|
+
window.addEventListener("blur", onBlur);
|
|
11902
|
+
return () => window.removeEventListener("blur", onBlur);
|
|
11903
|
+
}, []);
|
|
11904
|
+
useEffect7(() => {
|
|
11905
|
+
const onKeyDown = (e) => {
|
|
11906
|
+
if (e.key !== "Escape") return;
|
|
11907
|
+
if (!activeRef.current) return;
|
|
11908
|
+
setActive(null);
|
|
11909
|
+
setError(null);
|
|
11910
|
+
};
|
|
11911
|
+
document.addEventListener("keydown", onKeyDown);
|
|
11912
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
11913
|
+
}, []);
|
|
11914
|
+
const findEntry = useCallback5(
|
|
11915
|
+
(sectionId) => {
|
|
11916
|
+
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
11917
|
+
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
11918
|
+
},
|
|
11919
|
+
[aiSectionsRef]
|
|
11920
|
+
);
|
|
11921
|
+
const runMutation = useCallback5(
|
|
11922
|
+
async (sectionId, mutate) => {
|
|
11923
|
+
const entry = findEntry(sectionId);
|
|
11924
|
+
if (!entry) return false;
|
|
11925
|
+
const nextTree = mutate(entry.tree);
|
|
11926
|
+
if (!nextTree) return false;
|
|
11927
|
+
setPending(true);
|
|
11928
|
+
setError(null);
|
|
11929
|
+
const { ok, reasons } = await requestValidateTree3(postToParent2, nextTree);
|
|
11930
|
+
setPending(false);
|
|
11931
|
+
if (!ok) {
|
|
11932
|
+
setError(reasons[0] ?? "That change is not allowed.");
|
|
11933
|
+
return false;
|
|
11934
|
+
}
|
|
11935
|
+
applyTreeLocalRef.current?.({
|
|
11936
|
+
id: sectionId,
|
|
11937
|
+
mode: "replace",
|
|
11938
|
+
targetSectionId: sectionId,
|
|
11939
|
+
tree: nextTree,
|
|
11940
|
+
label: entry.label,
|
|
11941
|
+
media: entry.media,
|
|
11942
|
+
...entry.brand ? { brand: entry.brand } : {}
|
|
11943
|
+
});
|
|
11944
|
+
return true;
|
|
11945
|
+
},
|
|
11946
|
+
[findEntry, postToParent2, applyTreeLocalRef]
|
|
11947
|
+
);
|
|
11948
|
+
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
11949
|
+
const hoverHandleRect = useLiveBlockRect(!active && hover ? hover : null);
|
|
11950
|
+
const activeBlockRect = useLiveBlockRect(active);
|
|
11951
|
+
const TOOLBAR_APPROX_H = 90;
|
|
11952
|
+
const toolbarState = activeBlockRect && activeBlockRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
11953
|
+
return /* @__PURE__ */ jsxs12(Fragment8, { children: [
|
|
11954
|
+
hoverHandleRect && hover && /* @__PURE__ */ jsx20(
|
|
11955
|
+
"button",
|
|
11956
|
+
{
|
|
11957
|
+
type: "button",
|
|
11958
|
+
"data-ohw-toolbar": "",
|
|
11959
|
+
onClick: () => {
|
|
11960
|
+
clearInteractionChromeRef.current();
|
|
11961
|
+
setActive(hover);
|
|
11962
|
+
},
|
|
11963
|
+
"aria-label": "Configure video",
|
|
11964
|
+
style: {
|
|
11965
|
+
position: "fixed",
|
|
11966
|
+
top: hoverHandleRect.top + 8,
|
|
11967
|
+
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
11968
|
+
width: 28,
|
|
11969
|
+
height: 28,
|
|
11970
|
+
borderRadius: 8,
|
|
11971
|
+
border: `1.5px dashed ${PRIMARY5}`,
|
|
11972
|
+
background: "#ffffff",
|
|
11973
|
+
color: PRIMARY5,
|
|
11974
|
+
display: "flex",
|
|
11975
|
+
alignItems: "center",
|
|
11976
|
+
justifyContent: "center",
|
|
11977
|
+
cursor: "pointer",
|
|
11978
|
+
zIndex: 2147483643,
|
|
11979
|
+
fontSize: 14,
|
|
11980
|
+
fontWeight: 700
|
|
11981
|
+
},
|
|
11982
|
+
children: /* @__PURE__ */ jsx20(Star3, { size: 14, style: { pointerEvents: "none" } })
|
|
11983
|
+
}
|
|
11984
|
+
),
|
|
11985
|
+
activeBlockRect && active && activeEntry && /* @__PURE__ */ jsx20(
|
|
11986
|
+
ItemInteractionLayer,
|
|
11987
|
+
{
|
|
11988
|
+
rect: activeBlockRect,
|
|
11989
|
+
state: toolbarState,
|
|
11990
|
+
toolbar: /* @__PURE__ */ jsx20(
|
|
11991
|
+
VideoToolbar,
|
|
11992
|
+
{
|
|
11993
|
+
videoId: videoIdAt(activeEntry.tree, active.path),
|
|
11994
|
+
pending,
|
|
11995
|
+
error,
|
|
11996
|
+
onSetVideoId: (videoId) => {
|
|
11997
|
+
void runMutation(
|
|
11998
|
+
active.sectionId,
|
|
11999
|
+
(tree) => videoId ? setVideoId(tree, active.path, videoId) : clearVideo(tree, active.path)
|
|
12000
|
+
);
|
|
12001
|
+
},
|
|
12002
|
+
onRemove: () => {
|
|
12003
|
+
void runMutation(active.sectionId, (tree) => clearVideo(tree, active.path));
|
|
12004
|
+
}
|
|
12005
|
+
}
|
|
12006
|
+
)
|
|
12007
|
+
}
|
|
12008
|
+
)
|
|
12009
|
+
] });
|
|
12010
|
+
}
|
|
12011
|
+
|
|
11419
12012
|
// src/OhhwellsBridge.tsx
|
|
11420
12013
|
import { createPortal as createPortal3 } from "react-dom";
|
|
11421
12014
|
import { usePathname as usePathname2, useRouter as useRouter3, useSearchParams } from "next/navigation";
|
|
@@ -11727,28 +12320,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
11727
12320
|
}
|
|
11728
12321
|
|
|
11729
12322
|
// src/ui/link-modal/LinkPopover.tsx
|
|
11730
|
-
import { useEffect as
|
|
12323
|
+
import { useEffect as useEffect11 } from "react";
|
|
11731
12324
|
|
|
11732
12325
|
// src/ui/dialog.tsx
|
|
11733
12326
|
import * as React9 from "react";
|
|
11734
12327
|
import { Dialog as DialogPrimitive } from "radix-ui";
|
|
11735
12328
|
import { X as X2 } from "lucide-react";
|
|
11736
|
-
import { jsx as
|
|
12329
|
+
import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
11737
12330
|
function Dialog2({
|
|
11738
12331
|
...props
|
|
11739
12332
|
}) {
|
|
11740
|
-
return /* @__PURE__ */
|
|
12333
|
+
return /* @__PURE__ */ jsx21(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
11741
12334
|
}
|
|
11742
12335
|
function DialogPortal({
|
|
11743
12336
|
...props
|
|
11744
12337
|
}) {
|
|
11745
|
-
return /* @__PURE__ */
|
|
12338
|
+
return /* @__PURE__ */ jsx21(DialogPrimitive.Portal, { ...props });
|
|
11746
12339
|
}
|
|
11747
12340
|
function DialogOverlay({
|
|
11748
12341
|
className,
|
|
11749
12342
|
...props
|
|
11750
12343
|
}) {
|
|
11751
|
-
return /* @__PURE__ */
|
|
12344
|
+
return /* @__PURE__ */ jsx21(
|
|
11752
12345
|
DialogPrimitive.Overlay,
|
|
11753
12346
|
{
|
|
11754
12347
|
"data-slot": "dialog-overlay",
|
|
@@ -11761,9 +12354,9 @@ function DialogOverlay({
|
|
|
11761
12354
|
var DialogContent = React9.forwardRef(
|
|
11762
12355
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
11763
12356
|
const positionMode = container ? "absolute" : "fixed";
|
|
11764
|
-
return /* @__PURE__ */
|
|
11765
|
-
/* @__PURE__ */
|
|
11766
|
-
/* @__PURE__ */
|
|
12357
|
+
return /* @__PURE__ */ jsxs13(DialogPortal, { container: container ?? void 0, children: [
|
|
12358
|
+
/* @__PURE__ */ jsx21(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
12359
|
+
/* @__PURE__ */ jsxs13(
|
|
11767
12360
|
DialogPrimitive.Content,
|
|
11768
12361
|
{
|
|
11769
12362
|
ref,
|
|
@@ -11779,13 +12372,13 @@ var DialogContent = React9.forwardRef(
|
|
|
11779
12372
|
...props,
|
|
11780
12373
|
children: [
|
|
11781
12374
|
children,
|
|
11782
|
-
showCloseButton ? /* @__PURE__ */
|
|
12375
|
+
showCloseButton ? /* @__PURE__ */ jsx21(
|
|
11783
12376
|
DialogPrimitive.Close,
|
|
11784
12377
|
{
|
|
11785
12378
|
type: "button",
|
|
11786
12379
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
11787
12380
|
"aria-label": "Close",
|
|
11788
|
-
children: /* @__PURE__ */
|
|
12381
|
+
children: /* @__PURE__ */ jsx21(X2, { size: 16, "aria-hidden": true })
|
|
11789
12382
|
}
|
|
11790
12383
|
) : null
|
|
11791
12384
|
]
|
|
@@ -11799,13 +12392,13 @@ function DialogHeader({
|
|
|
11799
12392
|
className,
|
|
11800
12393
|
...props
|
|
11801
12394
|
}) {
|
|
11802
|
-
return /* @__PURE__ */
|
|
12395
|
+
return /* @__PURE__ */ jsx21("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
11803
12396
|
}
|
|
11804
12397
|
function DialogFooter({
|
|
11805
12398
|
className,
|
|
11806
12399
|
...props
|
|
11807
12400
|
}) {
|
|
11808
|
-
return /* @__PURE__ */
|
|
12401
|
+
return /* @__PURE__ */ jsx21(
|
|
11809
12402
|
"div",
|
|
11810
12403
|
{
|
|
11811
12404
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -11813,7 +12406,7 @@ function DialogFooter({
|
|
|
11813
12406
|
}
|
|
11814
12407
|
);
|
|
11815
12408
|
}
|
|
11816
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
12409
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
|
|
11817
12410
|
DialogPrimitive.Title,
|
|
11818
12411
|
{
|
|
11819
12412
|
ref,
|
|
@@ -11825,7 +12418,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
11825
12418
|
}
|
|
11826
12419
|
));
|
|
11827
12420
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
11828
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
12421
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
|
|
11829
12422
|
DialogPrimitive.Description,
|
|
11830
12423
|
{
|
|
11831
12424
|
ref,
|
|
@@ -11841,19 +12434,19 @@ import { Info, X as X4 } from "lucide-react";
|
|
|
11841
12434
|
|
|
11842
12435
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
11843
12436
|
import { ArrowRight as ArrowRight2, File, GalleryVertical } from "lucide-react";
|
|
11844
|
-
import { jsx as
|
|
12437
|
+
import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
11845
12438
|
function DestinationBreadcrumb({
|
|
11846
12439
|
pageTitle,
|
|
11847
12440
|
sectionLabel
|
|
11848
12441
|
}) {
|
|
11849
|
-
return /* @__PURE__ */
|
|
11850
|
-
/* @__PURE__ */
|
|
11851
|
-
/* @__PURE__ */
|
|
11852
|
-
/* @__PURE__ */
|
|
11853
|
-
/* @__PURE__ */
|
|
11854
|
-
/* @__PURE__ */
|
|
12442
|
+
return /* @__PURE__ */ jsxs14("div", { className: "flex w-full flex-col gap-2", children: [
|
|
12443
|
+
/* @__PURE__ */ jsx22("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
12444
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-3", children: [
|
|
12445
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
|
|
12446
|
+
/* @__PURE__ */ jsx22(File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
12447
|
+
/* @__PURE__ */ jsx22("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
11855
12448
|
] }),
|
|
11856
|
-
/* @__PURE__ */
|
|
12449
|
+
/* @__PURE__ */ jsx22(
|
|
11857
12450
|
ArrowRight2,
|
|
11858
12451
|
{
|
|
11859
12452
|
size: 16,
|
|
@@ -11861,8 +12454,8 @@ function DestinationBreadcrumb({
|
|
|
11861
12454
|
"aria-hidden": true
|
|
11862
12455
|
}
|
|
11863
12456
|
),
|
|
11864
|
-
/* @__PURE__ */
|
|
11865
|
-
/* @__PURE__ */
|
|
12457
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
12458
|
+
/* @__PURE__ */ jsx22(
|
|
11866
12459
|
GalleryVertical,
|
|
11867
12460
|
{
|
|
11868
12461
|
size: 16,
|
|
@@ -11870,7 +12463,7 @@ function DestinationBreadcrumb({
|
|
|
11870
12463
|
"aria-hidden": true
|
|
11871
12464
|
}
|
|
11872
12465
|
),
|
|
11873
|
-
/* @__PURE__ */
|
|
12466
|
+
/* @__PURE__ */ jsx22("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
11874
12467
|
] })
|
|
11875
12468
|
] })
|
|
11876
12469
|
] });
|
|
@@ -11878,22 +12471,22 @@ function DestinationBreadcrumb({
|
|
|
11878
12471
|
|
|
11879
12472
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
11880
12473
|
import { GalleryVertical as GalleryVertical2 } from "lucide-react";
|
|
11881
|
-
import { jsx as
|
|
12474
|
+
import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
11882
12475
|
function SectionTreeItem({
|
|
11883
12476
|
section,
|
|
11884
12477
|
onSelect,
|
|
11885
12478
|
selected
|
|
11886
12479
|
}) {
|
|
11887
12480
|
const interactive = Boolean(onSelect);
|
|
11888
|
-
return /* @__PURE__ */
|
|
11889
|
-
/* @__PURE__ */
|
|
12481
|
+
return /* @__PURE__ */ jsxs15("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
12482
|
+
/* @__PURE__ */ jsx23(
|
|
11890
12483
|
"div",
|
|
11891
12484
|
{
|
|
11892
12485
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
11893
12486
|
"aria-hidden": true
|
|
11894
12487
|
}
|
|
11895
12488
|
),
|
|
11896
|
-
/* @__PURE__ */
|
|
12489
|
+
/* @__PURE__ */ jsxs15(
|
|
11897
12490
|
"div",
|
|
11898
12491
|
{
|
|
11899
12492
|
role: interactive ? "button" : void 0,
|
|
@@ -11911,7 +12504,7 @@ function SectionTreeItem({
|
|
|
11911
12504
|
interactive && selected && "border-bridge-primary"
|
|
11912
12505
|
),
|
|
11913
12506
|
children: [
|
|
11914
|
-
/* @__PURE__ */
|
|
12507
|
+
/* @__PURE__ */ jsx23(
|
|
11915
12508
|
GalleryVertical2,
|
|
11916
12509
|
{
|
|
11917
12510
|
size: 16,
|
|
@@ -11919,7 +12512,7 @@ function SectionTreeItem({
|
|
|
11919
12512
|
"aria-hidden": true
|
|
11920
12513
|
}
|
|
11921
12514
|
),
|
|
11922
|
-
/* @__PURE__ */
|
|
12515
|
+
/* @__PURE__ */ jsx23("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
11923
12516
|
]
|
|
11924
12517
|
}
|
|
11925
12518
|
)
|
|
@@ -11927,14 +12520,14 @@ function SectionTreeItem({
|
|
|
11927
12520
|
}
|
|
11928
12521
|
|
|
11929
12522
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
11930
|
-
import { useEffect as
|
|
12523
|
+
import { useEffect as useEffect8, useId as useId2, useRef as useRef8, useState as useState10 } from "react";
|
|
11931
12524
|
|
|
11932
12525
|
// src/ui/input.tsx
|
|
11933
12526
|
import * as React10 from "react";
|
|
11934
|
-
import { jsx as
|
|
12527
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
11935
12528
|
var Input = React10.forwardRef(
|
|
11936
12529
|
({ className, type, ...props }, ref) => {
|
|
11937
|
-
return /* @__PURE__ */
|
|
12530
|
+
return /* @__PURE__ */ jsx24(
|
|
11938
12531
|
"input",
|
|
11939
12532
|
{
|
|
11940
12533
|
type,
|
|
@@ -11953,9 +12546,9 @@ Input.displayName = "Input";
|
|
|
11953
12546
|
|
|
11954
12547
|
// src/ui/label.tsx
|
|
11955
12548
|
import { Label as LabelPrimitive } from "radix-ui";
|
|
11956
|
-
import { jsx as
|
|
12549
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
11957
12550
|
function Label({ className, ...props }) {
|
|
11958
|
-
return /* @__PURE__ */
|
|
12551
|
+
return /* @__PURE__ */ jsx25(
|
|
11959
12552
|
LabelPrimitive.Root,
|
|
11960
12553
|
{
|
|
11961
12554
|
"data-slot": "label",
|
|
@@ -11967,11 +12560,11 @@ function Label({ className, ...props }) {
|
|
|
11967
12560
|
|
|
11968
12561
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
11969
12562
|
import { ChevronDown as ChevronDown3, File as File2, X as X3 } from "lucide-react";
|
|
11970
|
-
import { jsx as
|
|
12563
|
+
import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
11971
12564
|
function FieldChevron({
|
|
11972
12565
|
onClick
|
|
11973
12566
|
}) {
|
|
11974
|
-
return /* @__PURE__ */
|
|
12567
|
+
return /* @__PURE__ */ jsx26(
|
|
11975
12568
|
"button",
|
|
11976
12569
|
{
|
|
11977
12570
|
type: "button",
|
|
@@ -11979,7 +12572,7 @@ function FieldChevron({
|
|
|
11979
12572
|
onClick,
|
|
11980
12573
|
"aria-label": "Open page list",
|
|
11981
12574
|
tabIndex: -1,
|
|
11982
|
-
children: /* @__PURE__ */
|
|
12575
|
+
children: /* @__PURE__ */ jsx26(ChevronDown3, { size: 16 })
|
|
11983
12576
|
}
|
|
11984
12577
|
);
|
|
11985
12578
|
}
|
|
@@ -11996,10 +12589,10 @@ function UrlOrPageInput({
|
|
|
11996
12589
|
urlError
|
|
11997
12590
|
}) {
|
|
11998
12591
|
const inputId = useId2();
|
|
11999
|
-
const inputRef =
|
|
12000
|
-
const rootRef =
|
|
12001
|
-
const [isFocused, setIsFocused] =
|
|
12002
|
-
|
|
12592
|
+
const inputRef = useRef8(null);
|
|
12593
|
+
const rootRef = useRef8(null);
|
|
12594
|
+
const [isFocused, setIsFocused] = useState10(false);
|
|
12595
|
+
useEffect8(() => {
|
|
12003
12596
|
if (!dropdownOpen) return;
|
|
12004
12597
|
const isOutside = (e) => {
|
|
12005
12598
|
const root = rootRef.current;
|
|
@@ -12040,11 +12633,11 @@ function UrlOrPageInput({
|
|
|
12040
12633
|
"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]",
|
|
12041
12634
|
urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-bridge-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
|
|
12042
12635
|
);
|
|
12043
|
-
return /* @__PURE__ */
|
|
12044
|
-
/* @__PURE__ */
|
|
12045
|
-
/* @__PURE__ */
|
|
12046
|
-
/* @__PURE__ */
|
|
12047
|
-
selectedPage ? /* @__PURE__ */
|
|
12636
|
+
return /* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
12637
|
+
/* @__PURE__ */ jsx26(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
12638
|
+
/* @__PURE__ */ jsxs16("div", { ref: rootRef, className: "relative w-full", children: [
|
|
12639
|
+
/* @__PURE__ */ jsxs16("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
12640
|
+
selectedPage ? /* @__PURE__ */ jsx26("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx26(
|
|
12048
12641
|
File2,
|
|
12049
12642
|
{
|
|
12050
12643
|
size: 16,
|
|
@@ -12052,7 +12645,7 @@ function UrlOrPageInput({
|
|
|
12052
12645
|
"aria-hidden": true
|
|
12053
12646
|
}
|
|
12054
12647
|
) }) : null,
|
|
12055
|
-
readOnly ? /* @__PURE__ */
|
|
12648
|
+
readOnly ? /* @__PURE__ */ jsx26("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ jsx26(
|
|
12056
12649
|
Input,
|
|
12057
12650
|
{
|
|
12058
12651
|
ref: inputRef,
|
|
@@ -12078,7 +12671,7 @@ function UrlOrPageInput({
|
|
|
12078
12671
|
)
|
|
12079
12672
|
}
|
|
12080
12673
|
),
|
|
12081
|
-
selectedPage && !readOnly ? /* @__PURE__ */
|
|
12674
|
+
selectedPage && !readOnly ? /* @__PURE__ */ jsx26(
|
|
12082
12675
|
"button",
|
|
12083
12676
|
{
|
|
12084
12677
|
type: "button",
|
|
@@ -12086,26 +12679,26 @@ function UrlOrPageInput({
|
|
|
12086
12679
|
onMouseDown: clearSelection,
|
|
12087
12680
|
"aria-label": "Clear selected page",
|
|
12088
12681
|
tabIndex: -1,
|
|
12089
|
-
children: /* @__PURE__ */
|
|
12682
|
+
children: /* @__PURE__ */ jsx26(X3, { size: 16, "aria-hidden": true })
|
|
12090
12683
|
}
|
|
12091
12684
|
) : null,
|
|
12092
|
-
!readOnly ? /* @__PURE__ */
|
|
12685
|
+
!readOnly ? /* @__PURE__ */ jsx26(FieldChevron, { onClick: toggleDropdown }) : null
|
|
12093
12686
|
] }),
|
|
12094
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */
|
|
12687
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ jsx26(
|
|
12095
12688
|
"div",
|
|
12096
12689
|
{
|
|
12097
12690
|
"data-ohw-link-page-dropdown": "",
|
|
12098
12691
|
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",
|
|
12099
12692
|
onMouseDown: (e) => e.preventDefault(),
|
|
12100
|
-
children: filteredPages.map((page) => /* @__PURE__ */
|
|
12693
|
+
children: filteredPages.map((page) => /* @__PURE__ */ jsxs16(
|
|
12101
12694
|
"button",
|
|
12102
12695
|
{
|
|
12103
12696
|
type: "button",
|
|
12104
12697
|
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",
|
|
12105
12698
|
onClick: () => onPageSelect(page),
|
|
12106
12699
|
children: [
|
|
12107
|
-
/* @__PURE__ */
|
|
12108
|
-
/* @__PURE__ */
|
|
12700
|
+
/* @__PURE__ */ jsx26(File2, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
12701
|
+
/* @__PURE__ */ jsx26("span", { className: "truncate", children: page.title })
|
|
12109
12702
|
]
|
|
12110
12703
|
},
|
|
12111
12704
|
page.path
|
|
@@ -12113,34 +12706,34 @@ function UrlOrPageInput({
|
|
|
12113
12706
|
}
|
|
12114
12707
|
) : null
|
|
12115
12708
|
] }),
|
|
12116
|
-
urlError ? /* @__PURE__ */
|
|
12709
|
+
urlError ? /* @__PURE__ */ jsx26("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
12117
12710
|
] });
|
|
12118
12711
|
}
|
|
12119
12712
|
|
|
12120
12713
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
12121
|
-
import { Fragment as
|
|
12714
|
+
import { Fragment as Fragment9, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
12122
12715
|
function LinkEditorPanel({ state, onClose }) {
|
|
12123
12716
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
12124
|
-
return /* @__PURE__ */
|
|
12125
|
-
/* @__PURE__ */
|
|
12717
|
+
return /* @__PURE__ */ jsxs17(Fragment9, { children: [
|
|
12718
|
+
/* @__PURE__ */ jsx27(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx27(
|
|
12126
12719
|
"button",
|
|
12127
12720
|
{
|
|
12128
12721
|
type: "button",
|
|
12129
12722
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
12130
12723
|
"aria-label": "Close",
|
|
12131
12724
|
onClick: onClose,
|
|
12132
|
-
children: /* @__PURE__ */
|
|
12725
|
+
children: /* @__PURE__ */ jsx27(X4, { size: 16, "aria-hidden": true })
|
|
12133
12726
|
}
|
|
12134
12727
|
) }),
|
|
12135
|
-
/* @__PURE__ */
|
|
12136
|
-
/* @__PURE__ */
|
|
12137
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */
|
|
12728
|
+
/* @__PURE__ */ jsx27(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ jsx27(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
12729
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
12730
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ jsx27(
|
|
12138
12731
|
DestinationBreadcrumb,
|
|
12139
12732
|
{
|
|
12140
12733
|
pageTitle: state.selectedPage.title,
|
|
12141
12734
|
sectionLabel: state.selectedSection.label
|
|
12142
12735
|
}
|
|
12143
|
-
) : /* @__PURE__ */
|
|
12736
|
+
) : /* @__PURE__ */ jsx27(
|
|
12144
12737
|
UrlOrPageInput,
|
|
12145
12738
|
{
|
|
12146
12739
|
value: state.searchValue,
|
|
@@ -12153,8 +12746,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12153
12746
|
urlError: state.urlError
|
|
12154
12747
|
}
|
|
12155
12748
|
),
|
|
12156
|
-
state.showChooseSection ? /* @__PURE__ */
|
|
12157
|
-
/* @__PURE__ */
|
|
12749
|
+
state.showChooseSection ? /* @__PURE__ */ jsxs17("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
12750
|
+
/* @__PURE__ */ jsx27(
|
|
12158
12751
|
Button,
|
|
12159
12752
|
{
|
|
12160
12753
|
type: "button",
|
|
@@ -12165,15 +12758,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12165
12758
|
children: "Choose a section"
|
|
12166
12759
|
}
|
|
12167
12760
|
),
|
|
12168
|
-
/* @__PURE__ */
|
|
12169
|
-
/* @__PURE__ */
|
|
12170
|
-
/* @__PURE__ */
|
|
12761
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
12762
|
+
/* @__PURE__ */ jsx27(Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
12763
|
+
/* @__PURE__ */ jsx27("span", { children: "Pick a section this link should scroll to." })
|
|
12171
12764
|
] })
|
|
12172
12765
|
] }) : null,
|
|
12173
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */
|
|
12766
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ jsx27(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
12174
12767
|
] }),
|
|
12175
|
-
/* @__PURE__ */
|
|
12176
|
-
/* @__PURE__ */
|
|
12768
|
+
/* @__PURE__ */ jsxs17(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
12769
|
+
/* @__PURE__ */ jsx27(
|
|
12177
12770
|
Button,
|
|
12178
12771
|
{
|
|
12179
12772
|
type: "button",
|
|
@@ -12188,7 +12781,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12188
12781
|
children: state.secondaryLabel
|
|
12189
12782
|
}
|
|
12190
12783
|
),
|
|
12191
|
-
/* @__PURE__ */
|
|
12784
|
+
/* @__PURE__ */ jsx27(
|
|
12192
12785
|
Button,
|
|
12193
12786
|
{
|
|
12194
12787
|
type: "button",
|
|
@@ -12207,7 +12800,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12207
12800
|
}
|
|
12208
12801
|
|
|
12209
12802
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
12210
|
-
import { useCallback as
|
|
12803
|
+
import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo2, useRef as useRef9, useState as useState11 } from "react";
|
|
12211
12804
|
import { createPortal as createPortal2 } from "react-dom";
|
|
12212
12805
|
import { ArrowLeft as ArrowLeft2, Check as Check2 } from "lucide-react";
|
|
12213
12806
|
import { usePathname, useRouter as useRouter2 } from "next/navigation";
|
|
@@ -12231,7 +12824,7 @@ function getIframeChromeClip(parentScroll) {
|
|
|
12231
12824
|
}
|
|
12232
12825
|
|
|
12233
12826
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
12234
|
-
import { jsx as
|
|
12827
|
+
import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
12235
12828
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
12236
12829
|
function rectsEqual(a, b) {
|
|
12237
12830
|
if (a.size !== b.size) return false;
|
|
@@ -12264,12 +12857,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
12264
12857
|
return null;
|
|
12265
12858
|
}
|
|
12266
12859
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
12267
|
-
const [rects, setRects] =
|
|
12860
|
+
const [rects, setRects] = useState11(/* @__PURE__ */ new Map());
|
|
12268
12861
|
const sectionIds = useMemo2(
|
|
12269
12862
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
12270
12863
|
[sectionIdsKey]
|
|
12271
12864
|
);
|
|
12272
|
-
|
|
12865
|
+
useEffect9(() => {
|
|
12273
12866
|
if (!enabled || sectionIds.length === 0) {
|
|
12274
12867
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
12275
12868
|
return;
|
|
@@ -12310,13 +12903,13 @@ function SectionPickerOverlay({
|
|
|
12310
12903
|
}) {
|
|
12311
12904
|
const router = useRouter2();
|
|
12312
12905
|
const pathname = usePathname();
|
|
12313
|
-
const [selectedId, setSelectedId] =
|
|
12314
|
-
const [hoveredId, setHoveredId] =
|
|
12315
|
-
const pointerRef =
|
|
12316
|
-
const pointerScreenRef =
|
|
12317
|
-
const iframeOffsetTopRef =
|
|
12318
|
-
const sectionIdsRef =
|
|
12319
|
-
const [chromeClip, setChromeClip] =
|
|
12906
|
+
const [selectedId, setSelectedId] = useState11(null);
|
|
12907
|
+
const [hoveredId, setHoveredId] = useState11(null);
|
|
12908
|
+
const pointerRef = useRef9(null);
|
|
12909
|
+
const pointerScreenRef = useRef9(null);
|
|
12910
|
+
const iframeOffsetTopRef = useRef9(null);
|
|
12911
|
+
const sectionIdsRef = useRef9([]);
|
|
12912
|
+
const [chromeClip, setChromeClip] = useState11(
|
|
12320
12913
|
() => ({
|
|
12321
12914
|
top: 0,
|
|
12322
12915
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -12324,12 +12917,12 @@ function SectionPickerOverlay({
|
|
|
12324
12917
|
);
|
|
12325
12918
|
const normalizedTarget = normalizePath(pagePath);
|
|
12326
12919
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
12327
|
-
|
|
12920
|
+
useEffect9(() => {
|
|
12328
12921
|
if (isOnTargetPage) return;
|
|
12329
12922
|
const search = readPreservedSearch();
|
|
12330
12923
|
router.push(`${normalizedTarget}${search}`);
|
|
12331
12924
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
12332
|
-
|
|
12925
|
+
useEffect9(() => {
|
|
12333
12926
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
12334
12927
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
12335
12928
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -12358,7 +12951,7 @@ function SectionPickerOverlay({
|
|
|
12358
12951
|
);
|
|
12359
12952
|
sectionIdsRef.current = sectionIds;
|
|
12360
12953
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
12361
|
-
const applyHoverAt =
|
|
12954
|
+
const applyHoverAt = useCallback6(
|
|
12362
12955
|
(x, y, liveRects) => {
|
|
12363
12956
|
const ids = sectionIdsRef.current;
|
|
12364
12957
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -12367,7 +12960,7 @@ function SectionPickerOverlay({
|
|
|
12367
12960
|
},
|
|
12368
12961
|
[]
|
|
12369
12962
|
);
|
|
12370
|
-
|
|
12963
|
+
useEffect9(() => {
|
|
12371
12964
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
|
|
12372
12965
|
const next = getIframeVisibleClip({
|
|
12373
12966
|
iframeOffsetTop,
|
|
@@ -12411,12 +13004,12 @@ function SectionPickerOverlay({
|
|
|
12411
13004
|
window.removeEventListener("resize", onResize);
|
|
12412
13005
|
};
|
|
12413
13006
|
}, [applyHoverAt]);
|
|
12414
|
-
|
|
13007
|
+
useEffect9(() => {
|
|
12415
13008
|
const ptr = pointerRef.current;
|
|
12416
13009
|
if (!ptr) return;
|
|
12417
13010
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
12418
13011
|
}, [rects, applyHoverAt]);
|
|
12419
|
-
|
|
13012
|
+
useEffect9(() => {
|
|
12420
13013
|
const rememberPointer = (clientX, clientY) => {
|
|
12421
13014
|
pointerRef.current = { x: clientX, y: clientY };
|
|
12422
13015
|
const top = iframeOffsetTopRef.current;
|
|
@@ -12440,7 +13033,7 @@ function SectionPickerOverlay({
|
|
|
12440
13033
|
window.removeEventListener("message", onPointerSync);
|
|
12441
13034
|
};
|
|
12442
13035
|
}, [rects, applyHoverAt]);
|
|
12443
|
-
const handleSelect =
|
|
13036
|
+
const handleSelect = useCallback6(
|
|
12444
13037
|
(section) => {
|
|
12445
13038
|
if (selectedId) return;
|
|
12446
13039
|
setSelectedId(section.id);
|
|
@@ -12448,7 +13041,7 @@ function SectionPickerOverlay({
|
|
|
12448
13041
|
},
|
|
12449
13042
|
[selectedId, onSelect]
|
|
12450
13043
|
);
|
|
12451
|
-
|
|
13044
|
+
useEffect9(() => {
|
|
12452
13045
|
const onKeyDown = (e) => {
|
|
12453
13046
|
if (e.key === "Escape") {
|
|
12454
13047
|
e.preventDefault();
|
|
@@ -12462,7 +13055,7 @@ function SectionPickerOverlay({
|
|
|
12462
13055
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
12463
13056
|
if (!portalRoot) return null;
|
|
12464
13057
|
return createPortal2(
|
|
12465
|
-
/* @__PURE__ */
|
|
13058
|
+
/* @__PURE__ */ jsxs18(
|
|
12466
13059
|
"div",
|
|
12467
13060
|
{
|
|
12468
13061
|
"data-ohw-section-picker": "",
|
|
@@ -12472,12 +13065,12 @@ function SectionPickerOverlay({
|
|
|
12472
13065
|
role: "dialog",
|
|
12473
13066
|
"aria-label": "Choose a section",
|
|
12474
13067
|
children: [
|
|
12475
|
-
/* @__PURE__ */
|
|
13068
|
+
/* @__PURE__ */ jsx28(
|
|
12476
13069
|
"div",
|
|
12477
13070
|
{
|
|
12478
13071
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
12479
13072
|
style: { top: chromeClip.top + 20 },
|
|
12480
|
-
children: /* @__PURE__ */
|
|
13073
|
+
children: /* @__PURE__ */ jsxs18(
|
|
12481
13074
|
Button,
|
|
12482
13075
|
{
|
|
12483
13076
|
type: "button",
|
|
@@ -12486,14 +13079,14 @@ function SectionPickerOverlay({
|
|
|
12486
13079
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
12487
13080
|
onClick: onBack,
|
|
12488
13081
|
children: [
|
|
12489
|
-
/* @__PURE__ */
|
|
13082
|
+
/* @__PURE__ */ jsx28(ArrowLeft2, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
12490
13083
|
"Back"
|
|
12491
13084
|
]
|
|
12492
13085
|
}
|
|
12493
13086
|
)
|
|
12494
13087
|
}
|
|
12495
13088
|
),
|
|
12496
|
-
/* @__PURE__ */
|
|
13089
|
+
/* @__PURE__ */ jsx28(
|
|
12497
13090
|
"div",
|
|
12498
13091
|
{
|
|
12499
13092
|
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",
|
|
@@ -12506,7 +13099,7 @@ function SectionPickerOverlay({
|
|
|
12506
13099
|
children: "Click on section to select"
|
|
12507
13100
|
}
|
|
12508
13101
|
),
|
|
12509
|
-
!isOnTargetPage ? /* @__PURE__ */
|
|
13102
|
+
!isOnTargetPage ? /* @__PURE__ */ jsx28(
|
|
12510
13103
|
"div",
|
|
12511
13104
|
{
|
|
12512
13105
|
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",
|
|
@@ -12514,14 +13107,14 @@ function SectionPickerOverlay({
|
|
|
12514
13107
|
children: "Loading page preview\u2026"
|
|
12515
13108
|
}
|
|
12516
13109
|
) : null,
|
|
12517
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */
|
|
13110
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ jsx28("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ jsx28("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
12518
13111
|
isOnTargetPage ? liveSections.map((section) => {
|
|
12519
13112
|
const rect = rects.get(section.id);
|
|
12520
13113
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
12521
13114
|
const isSelected = selectedId === section.id;
|
|
12522
13115
|
const isHovered = hoveredId === section.id;
|
|
12523
13116
|
const isLit = isSelected || isHovered;
|
|
12524
|
-
return /* @__PURE__ */
|
|
13117
|
+
return /* @__PURE__ */ jsxs18(
|
|
12525
13118
|
"button",
|
|
12526
13119
|
{
|
|
12527
13120
|
type: "button",
|
|
@@ -12536,7 +13129,7 @@ function SectionPickerOverlay({
|
|
|
12536
13129
|
"aria-label": `Select section ${section.label}`,
|
|
12537
13130
|
onClick: () => handleSelect(section),
|
|
12538
13131
|
children: [
|
|
12539
|
-
isLit ? /* @__PURE__ */
|
|
13132
|
+
isLit ? /* @__PURE__ */ jsx28(
|
|
12540
13133
|
"span",
|
|
12541
13134
|
{
|
|
12542
13135
|
className: "pointer-events-none absolute",
|
|
@@ -12549,13 +13142,13 @@ function SectionPickerOverlay({
|
|
|
12549
13142
|
"aria-hidden": true
|
|
12550
13143
|
}
|
|
12551
13144
|
) : null,
|
|
12552
|
-
isSelected ? /* @__PURE__ */
|
|
13145
|
+
isSelected ? /* @__PURE__ */ jsx28(
|
|
12553
13146
|
"span",
|
|
12554
13147
|
{
|
|
12555
13148
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
12556
13149
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
12557
13150
|
"aria-hidden": true,
|
|
12558
|
-
children: /* @__PURE__ */
|
|
13151
|
+
children: /* @__PURE__ */ jsx28(Check2, { className: "size-5" })
|
|
12559
13152
|
}
|
|
12560
13153
|
) : null
|
|
12561
13154
|
]
|
|
@@ -12571,7 +13164,7 @@ function SectionPickerOverlay({
|
|
|
12571
13164
|
}
|
|
12572
13165
|
|
|
12573
13166
|
// src/ui/link-modal/useLinkModalState.ts
|
|
12574
|
-
import { useCallback as
|
|
13167
|
+
import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo3, useState as useState12 } from "react";
|
|
12575
13168
|
function useLinkModalState({
|
|
12576
13169
|
open,
|
|
12577
13170
|
mode,
|
|
@@ -12584,13 +13177,13 @@ function useLinkModalState({
|
|
|
12584
13177
|
onSubmit
|
|
12585
13178
|
}) {
|
|
12586
13179
|
const availablePages = useMemo3(() => pages, [pages]);
|
|
12587
|
-
const [searchValue, setSearchValue] =
|
|
12588
|
-
const [selectedPage, setSelectedPage] =
|
|
12589
|
-
const [selectedSection, setSelectedSection] =
|
|
12590
|
-
const [step, setStep] =
|
|
12591
|
-
const [dropdownOpen, setDropdownOpen] =
|
|
12592
|
-
const [urlError, setUrlError] =
|
|
12593
|
-
const reset =
|
|
13180
|
+
const [searchValue, setSearchValue] = useState12("");
|
|
13181
|
+
const [selectedPage, setSelectedPage] = useState12(null);
|
|
13182
|
+
const [selectedSection, setSelectedSection] = useState12(null);
|
|
13183
|
+
const [step, setStep] = useState12("input");
|
|
13184
|
+
const [dropdownOpen, setDropdownOpen] = useState12(false);
|
|
13185
|
+
const [urlError, setUrlError] = useState12("");
|
|
13186
|
+
const reset = useCallback7(() => {
|
|
12594
13187
|
setSearchValue("");
|
|
12595
13188
|
setSelectedPage(null);
|
|
12596
13189
|
setSelectedSection(null);
|
|
@@ -12598,7 +13191,7 @@ function useLinkModalState({
|
|
|
12598
13191
|
setDropdownOpen(false);
|
|
12599
13192
|
setUrlError("");
|
|
12600
13193
|
}, []);
|
|
12601
|
-
|
|
13194
|
+
useEffect10(() => {
|
|
12602
13195
|
if (!open) return;
|
|
12603
13196
|
if (mode === "edit" && initialTarget) {
|
|
12604
13197
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -12735,7 +13328,7 @@ function useLinkModalState({
|
|
|
12735
13328
|
}
|
|
12736
13329
|
|
|
12737
13330
|
// src/ui/link-modal/LinkPopover.tsx
|
|
12738
|
-
import { Fragment as
|
|
13331
|
+
import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
12739
13332
|
function postToParent(data) {
|
|
12740
13333
|
window.parent?.postMessage(data, "*");
|
|
12741
13334
|
}
|
|
@@ -12764,7 +13357,7 @@ function LinkPopover({
|
|
|
12764
13357
|
onSubmit
|
|
12765
13358
|
});
|
|
12766
13359
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
12767
|
-
|
|
13360
|
+
useEffect11(() => {
|
|
12768
13361
|
if (!open) return;
|
|
12769
13362
|
if (sectionPickerActive) {
|
|
12770
13363
|
postToParent({ type: "ui:unlock" });
|
|
@@ -12831,15 +13424,15 @@ function LinkPopover({
|
|
|
12831
13424
|
);
|
|
12832
13425
|
};
|
|
12833
13426
|
}, [open, sectionPickerActive]);
|
|
12834
|
-
return /* @__PURE__ */
|
|
12835
|
-
/* @__PURE__ */
|
|
13427
|
+
return /* @__PURE__ */ jsxs19(Fragment10, { children: [
|
|
13428
|
+
/* @__PURE__ */ jsx29(
|
|
12836
13429
|
Dialog2,
|
|
12837
13430
|
{
|
|
12838
13431
|
open: open && !sectionPickerActive,
|
|
12839
13432
|
onOpenChange: (next) => {
|
|
12840
13433
|
if (!next) onClose?.();
|
|
12841
13434
|
},
|
|
12842
|
-
children: /* @__PURE__ */
|
|
13435
|
+
children: /* @__PURE__ */ jsx29(
|
|
12843
13436
|
DialogContent,
|
|
12844
13437
|
{
|
|
12845
13438
|
ref: panelRef,
|
|
@@ -12849,12 +13442,12 @@ function LinkPopover({
|
|
|
12849
13442
|
"data-ohw-bridge": "",
|
|
12850
13443
|
showCloseButton: false,
|
|
12851
13444
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
12852
|
-
children: /* @__PURE__ */
|
|
13445
|
+
children: /* @__PURE__ */ jsx29(LinkEditorPanel, { state, onClose })
|
|
12853
13446
|
}
|
|
12854
13447
|
)
|
|
12855
13448
|
}
|
|
12856
13449
|
),
|
|
12857
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */
|
|
13450
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ jsx29(
|
|
12858
13451
|
SectionPickerOverlay,
|
|
12859
13452
|
{
|
|
12860
13453
|
pagePath: state.selectedPage.path,
|
|
@@ -16043,14 +16636,14 @@ function addFooterColumnWithPersist({
|
|
|
16043
16636
|
|
|
16044
16637
|
// src/ui/FloatingPanel.tsx
|
|
16045
16638
|
import {
|
|
16046
|
-
useCallback as
|
|
16047
|
-
useEffect as
|
|
16639
|
+
useCallback as useCallback8,
|
|
16640
|
+
useEffect as useEffect12,
|
|
16048
16641
|
useLayoutEffect as useLayoutEffect4,
|
|
16049
|
-
useRef as
|
|
16050
|
-
useState as
|
|
16642
|
+
useRef as useRef10,
|
|
16643
|
+
useState as useState13
|
|
16051
16644
|
} from "react";
|
|
16052
16645
|
import { X as X5 } from "lucide-react";
|
|
16053
|
-
import { jsx as
|
|
16646
|
+
import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
16054
16647
|
var PANEL_WIDTH = 256;
|
|
16055
16648
|
var EDGE_MARGIN = 16;
|
|
16056
16649
|
var HEADER_MIN = 56;
|
|
@@ -16110,10 +16703,10 @@ function FloatingPanel({
|
|
|
16110
16703
|
className,
|
|
16111
16704
|
bodyClassName
|
|
16112
16705
|
}) {
|
|
16113
|
-
const panelRef =
|
|
16114
|
-
const [measured, setMeasured] =
|
|
16115
|
-
const dragRef =
|
|
16116
|
-
const homeRef =
|
|
16706
|
+
const panelRef = useRef10(null);
|
|
16707
|
+
const [measured, setMeasured] = useState13({ w: PANEL_WIDTH, h: 280 });
|
|
16708
|
+
const dragRef = useRef10(null);
|
|
16709
|
+
const homeRef = useRef10(null);
|
|
16117
16710
|
if (!open) {
|
|
16118
16711
|
homeRef.current = null;
|
|
16119
16712
|
} else if (position) {
|
|
@@ -16121,17 +16714,17 @@ function FloatingPanel({
|
|
|
16121
16714
|
} else if (homeRef.current == null) {
|
|
16122
16715
|
homeRef.current = defaultFloatingPanelPosition(parentScroll);
|
|
16123
16716
|
}
|
|
16124
|
-
const [liveScroll, setLiveScroll] =
|
|
16717
|
+
const [liveScroll, setLiveScroll] = useState13(parentScroll);
|
|
16125
16718
|
const home = position ?? homeRef.current ?? defaultFloatingPanelPosition(parentScroll);
|
|
16126
16719
|
const { y: fittedY, maxHeight } = fitPanelInClip(home.y, liveScroll, measured.h);
|
|
16127
16720
|
const clamped = {
|
|
16128
16721
|
x: clampX(home.x, measured.w),
|
|
16129
16722
|
y: fittedY
|
|
16130
16723
|
};
|
|
16131
|
-
|
|
16724
|
+
useEffect12(() => {
|
|
16132
16725
|
setLiveScroll(parentScroll);
|
|
16133
16726
|
}, [parentScroll]);
|
|
16134
|
-
|
|
16727
|
+
useEffect12(() => {
|
|
16135
16728
|
if (!open) return;
|
|
16136
16729
|
const onParentScroll = (e) => {
|
|
16137
16730
|
if (e.data?.type !== "ow:parent-scroll") return;
|
|
@@ -16141,7 +16734,7 @@ function FloatingPanel({
|
|
|
16141
16734
|
window.addEventListener("message", onParentScroll);
|
|
16142
16735
|
return () => window.removeEventListener("message", onParentScroll);
|
|
16143
16736
|
}, [open]);
|
|
16144
|
-
const positionRef =
|
|
16737
|
+
const positionRef = useRef10(position);
|
|
16145
16738
|
useLayoutEffect4(() => {
|
|
16146
16739
|
if (!open) {
|
|
16147
16740
|
positionRef.current = position;
|
|
@@ -16161,7 +16754,7 @@ function FloatingPanel({
|
|
|
16161
16754
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: contentH };
|
|
16162
16755
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
16163
16756
|
}, [open, children, title, context]);
|
|
16164
|
-
const onHeaderPointerDown =
|
|
16757
|
+
const onHeaderPointerDown = useCallback8(
|
|
16165
16758
|
(e) => {
|
|
16166
16759
|
if (e.button !== 0) return;
|
|
16167
16760
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -16180,7 +16773,7 @@ function FloatingPanel({
|
|
|
16180
16773
|
},
|
|
16181
16774
|
[clamped.x, clamped.y]
|
|
16182
16775
|
);
|
|
16183
|
-
const onHeaderPointerMove =
|
|
16776
|
+
const onHeaderPointerMove = useCallback8(
|
|
16184
16777
|
(e) => {
|
|
16185
16778
|
const drag = dragRef.current;
|
|
16186
16779
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -16206,7 +16799,7 @@ function FloatingPanel({
|
|
|
16206
16799
|
},
|
|
16207
16800
|
[measured.w, onPositionChange, liveScroll]
|
|
16208
16801
|
);
|
|
16209
|
-
const endDrag =
|
|
16802
|
+
const endDrag = useCallback8((e) => {
|
|
16210
16803
|
const drag = dragRef.current;
|
|
16211
16804
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
16212
16805
|
dragRef.current = null;
|
|
@@ -16216,13 +16809,13 @@ function FloatingPanel({
|
|
|
16216
16809
|
} catch {
|
|
16217
16810
|
}
|
|
16218
16811
|
}, []);
|
|
16219
|
-
|
|
16812
|
+
useEffect12(() => {
|
|
16220
16813
|
if (open) return;
|
|
16221
16814
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
16222
16815
|
}, [open]);
|
|
16223
|
-
|
|
16816
|
+
useEffect12(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
16224
16817
|
if (!open) return null;
|
|
16225
|
-
return /* @__PURE__ */
|
|
16818
|
+
return /* @__PURE__ */ jsxs20(
|
|
16226
16819
|
"div",
|
|
16227
16820
|
{
|
|
16228
16821
|
ref: panelRef,
|
|
@@ -16239,7 +16832,7 @@ function FloatingPanel({
|
|
|
16239
16832
|
onPointerDown: (e) => e.stopPropagation(),
|
|
16240
16833
|
onClick: (e) => e.stopPropagation(),
|
|
16241
16834
|
children: [
|
|
16242
|
-
/* @__PURE__ */
|
|
16835
|
+
/* @__PURE__ */ jsxs20(
|
|
16243
16836
|
"div",
|
|
16244
16837
|
{
|
|
16245
16838
|
"data-ohw-floating-panel-header": "",
|
|
@@ -16249,14 +16842,14 @@ function FloatingPanel({
|
|
|
16249
16842
|
onPointerUp: endDrag,
|
|
16250
16843
|
onPointerCancel: endDrag,
|
|
16251
16844
|
children: [
|
|
16252
|
-
/* @__PURE__ */
|
|
16253
|
-
/* @__PURE__ */
|
|
16254
|
-
icon ? /* @__PURE__ */
|
|
16255
|
-
/* @__PURE__ */
|
|
16845
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
16846
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
|
|
16847
|
+
icon ? /* @__PURE__ */ jsx30("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
16848
|
+
/* @__PURE__ */ jsx30("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
16256
16849
|
] }),
|
|
16257
|
-
context ? /* @__PURE__ */
|
|
16850
|
+
context ? /* @__PURE__ */ jsx30("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
16258
16851
|
] }),
|
|
16259
|
-
/* @__PURE__ */
|
|
16852
|
+
/* @__PURE__ */ jsx30(
|
|
16260
16853
|
"button",
|
|
16261
16854
|
{
|
|
16262
16855
|
type: "button",
|
|
@@ -16268,13 +16861,13 @@ function FloatingPanel({
|
|
|
16268
16861
|
onClose();
|
|
16269
16862
|
},
|
|
16270
16863
|
onPointerDown: (e) => e.stopPropagation(),
|
|
16271
|
-
children: /* @__PURE__ */
|
|
16864
|
+
children: /* @__PURE__ */ jsx30(X5, { size: 16, "aria-hidden": true })
|
|
16272
16865
|
}
|
|
16273
16866
|
)
|
|
16274
16867
|
]
|
|
16275
16868
|
}
|
|
16276
16869
|
),
|
|
16277
|
-
/* @__PURE__ */
|
|
16870
|
+
/* @__PURE__ */ jsx30(
|
|
16278
16871
|
"div",
|
|
16279
16872
|
{
|
|
16280
16873
|
"data-ohw-floating-panel-body": "",
|
|
@@ -16292,15 +16885,15 @@ function FloatingPanel({
|
|
|
16292
16885
|
}
|
|
16293
16886
|
|
|
16294
16887
|
// src/ui/socials-display-panel.tsx
|
|
16295
|
-
import { jsx as
|
|
16888
|
+
import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
16296
16889
|
function DisplaySwitch({
|
|
16297
16890
|
label,
|
|
16298
16891
|
checked,
|
|
16299
16892
|
disabled,
|
|
16300
16893
|
onChange
|
|
16301
16894
|
}) {
|
|
16302
|
-
return /* @__PURE__ */
|
|
16303
|
-
/* @__PURE__ */
|
|
16895
|
+
return /* @__PURE__ */ jsxs21("div", { className: "flex w-full items-center gap-2", children: [
|
|
16896
|
+
/* @__PURE__ */ jsx31(
|
|
16304
16897
|
"span",
|
|
16305
16898
|
{
|
|
16306
16899
|
className: cn(
|
|
@@ -16310,7 +16903,7 @@ function DisplaySwitch({
|
|
|
16310
16903
|
children: label
|
|
16311
16904
|
}
|
|
16312
16905
|
),
|
|
16313
|
-
/* @__PURE__ */
|
|
16906
|
+
/* @__PURE__ */ jsx31(
|
|
16314
16907
|
"button",
|
|
16315
16908
|
{
|
|
16316
16909
|
type: "button",
|
|
@@ -16324,7 +16917,7 @@ function DisplaySwitch({
|
|
|
16324
16917
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
16325
16918
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
16326
16919
|
),
|
|
16327
|
-
children: /* @__PURE__ */
|
|
16920
|
+
children: /* @__PURE__ */ jsx31(
|
|
16328
16921
|
"span",
|
|
16329
16922
|
{
|
|
16330
16923
|
className: cn(
|
|
@@ -16338,8 +16931,8 @@ function DisplaySwitch({
|
|
|
16338
16931
|
] });
|
|
16339
16932
|
}
|
|
16340
16933
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
16341
|
-
return /* @__PURE__ */
|
|
16342
|
-
/* @__PURE__ */
|
|
16934
|
+
return /* @__PURE__ */ jsxs21("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
16935
|
+
/* @__PURE__ */ jsx31(
|
|
16343
16936
|
DisplaySwitch,
|
|
16344
16937
|
{
|
|
16345
16938
|
label: "Text",
|
|
@@ -16348,7 +16941,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
16348
16941
|
onChange: (text) => onChange({ ...display, text })
|
|
16349
16942
|
}
|
|
16350
16943
|
),
|
|
16351
|
-
/* @__PURE__ */
|
|
16944
|
+
/* @__PURE__ */ jsx31(
|
|
16352
16945
|
DisplaySwitch,
|
|
16353
16946
|
{
|
|
16354
16947
|
label: "Icon",
|
|
@@ -17064,7 +17657,7 @@ function withAssignment(content, id, assignment) {
|
|
|
17064
17657
|
}
|
|
17065
17658
|
|
|
17066
17659
|
// src/ui/button-style-panel.tsx
|
|
17067
|
-
import { jsx as
|
|
17660
|
+
import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
17068
17661
|
var SIZE_LABEL = { s: "S", m: "M", l: "L" };
|
|
17069
17662
|
function ButtonStylePanel({
|
|
17070
17663
|
variants,
|
|
@@ -17078,15 +17671,15 @@ function ButtonStylePanel({
|
|
|
17078
17671
|
}) {
|
|
17079
17672
|
const preview = scaleGeometry(sizes.m, 0.75);
|
|
17080
17673
|
const label = previewLabel.trim() || "Book Now";
|
|
17081
|
-
return /* @__PURE__ */
|
|
17082
|
-
/* @__PURE__ */
|
|
17083
|
-
/* @__PURE__ */
|
|
17084
|
-
/* @__PURE__ */
|
|
17674
|
+
return /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col gap-5", children: [
|
|
17675
|
+
/* @__PURE__ */ jsxs22("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
17676
|
+
/* @__PURE__ */ jsx32("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Variants" }),
|
|
17677
|
+
/* @__PURE__ */ jsx32("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
|
|
17085
17678
|
const chrome = variants[id];
|
|
17086
17679
|
const selected = id === variant;
|
|
17087
17680
|
const hasBorder = parseFloat(chrome.borderWidth) > 0;
|
|
17088
17681
|
const cardSlot = previewSlotForChrome(chrome, slotBackground);
|
|
17089
|
-
return /* @__PURE__ */
|
|
17682
|
+
return /* @__PURE__ */ jsxs22(
|
|
17090
17683
|
"button",
|
|
17091
17684
|
{
|
|
17092
17685
|
type: "button",
|
|
@@ -17102,12 +17695,12 @@ function ButtonStylePanel({
|
|
|
17102
17695
|
selected ? "border-2 border-primary" : "border border-border"
|
|
17103
17696
|
),
|
|
17104
17697
|
children: [
|
|
17105
|
-
/* @__PURE__ */
|
|
17698
|
+
/* @__PURE__ */ jsx32(
|
|
17106
17699
|
"div",
|
|
17107
17700
|
{
|
|
17108
17701
|
className: "flex w-full items-center justify-center py-4",
|
|
17109
17702
|
style: { background: cardSlot },
|
|
17110
|
-
children: /* @__PURE__ */
|
|
17703
|
+
children: /* @__PURE__ */ jsx32(
|
|
17111
17704
|
"span",
|
|
17112
17705
|
{
|
|
17113
17706
|
className: "inline-flex items-center justify-center whitespace-nowrap font-semibold uppercase leading-none",
|
|
@@ -17129,12 +17722,12 @@ function ButtonStylePanel({
|
|
|
17129
17722
|
)
|
|
17130
17723
|
}
|
|
17131
17724
|
),
|
|
17132
|
-
selected ? /* @__PURE__ */
|
|
17725
|
+
selected ? /* @__PURE__ */ jsx32(
|
|
17133
17726
|
"span",
|
|
17134
17727
|
{
|
|
17135
17728
|
className: "absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
|
|
17136
17729
|
"aria-hidden": true,
|
|
17137
|
-
children: /* @__PURE__ */
|
|
17730
|
+
children: /* @__PURE__ */ jsx32(Check3, { className: "size-3", strokeWidth: 3 })
|
|
17138
17731
|
}
|
|
17139
17732
|
) : null
|
|
17140
17733
|
]
|
|
@@ -17143,9 +17736,9 @@ function ButtonStylePanel({
|
|
|
17143
17736
|
);
|
|
17144
17737
|
}) })
|
|
17145
17738
|
] }),
|
|
17146
|
-
/* @__PURE__ */
|
|
17147
|
-
/* @__PURE__ */
|
|
17148
|
-
/* @__PURE__ */
|
|
17739
|
+
/* @__PURE__ */ jsxs22("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
17740
|
+
/* @__PURE__ */ jsx32("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Size" }),
|
|
17741
|
+
/* @__PURE__ */ jsx32(
|
|
17149
17742
|
"div",
|
|
17150
17743
|
{
|
|
17151
17744
|
className: "flex w-full items-start rounded-lg bg-stone-100 p-1",
|
|
@@ -17153,7 +17746,7 @@ function ButtonStylePanel({
|
|
|
17153
17746
|
"aria-label": "Size",
|
|
17154
17747
|
children: BUTTON_SIZE_IDS.map((id) => {
|
|
17155
17748
|
const selected = id === size;
|
|
17156
|
-
return /* @__PURE__ */
|
|
17749
|
+
return /* @__PURE__ */ jsx32(
|
|
17157
17750
|
"button",
|
|
17158
17751
|
{
|
|
17159
17752
|
type: "button",
|
|
@@ -18057,7 +18650,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
18057
18650
|
}
|
|
18058
18651
|
|
|
18059
18652
|
// src/useNavItemDrag.ts
|
|
18060
|
-
import { useCallback as
|
|
18653
|
+
import { useCallback as useCallback9, useEffect as useEffect13, useRef as useRef11, useState as useState14 } from "react";
|
|
18061
18654
|
function useNavItemDrag({
|
|
18062
18655
|
isEditMode,
|
|
18063
18656
|
editContentRef,
|
|
@@ -18081,11 +18674,11 @@ function useNavItemDrag({
|
|
|
18081
18674
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
18082
18675
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
18083
18676
|
}) {
|
|
18084
|
-
const navDragRef =
|
|
18085
|
-
const [navDropSlots, setNavDropSlots] =
|
|
18086
|
-
const [activeNavDropIndex, setActiveNavDropIndex] =
|
|
18087
|
-
const navPointerDragRef =
|
|
18088
|
-
const clearNavDragVisuals =
|
|
18677
|
+
const navDragRef = useRef11(null);
|
|
18678
|
+
const [navDropSlots, setNavDropSlots] = useState14([]);
|
|
18679
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = useState14(null);
|
|
18680
|
+
const navPointerDragRef = useRef11(null);
|
|
18681
|
+
const clearNavDragVisuals = useCallback9(() => {
|
|
18089
18682
|
const session = navDragRef.current;
|
|
18090
18683
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
18091
18684
|
navDragRef.current = null;
|
|
@@ -18118,7 +18711,7 @@ function useNavItemDrag({
|
|
|
18118
18711
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
18119
18712
|
unlockItemDragInteraction();
|
|
18120
18713
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
18121
|
-
const refreshNavDragVisuals =
|
|
18714
|
+
const refreshNavDragVisuals = useCallback9(
|
|
18122
18715
|
(session, activeSlot, clientX, clientY) => {
|
|
18123
18716
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
18124
18717
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -18136,13 +18729,13 @@ function useNavItemDrag({
|
|
|
18136
18729
|
},
|
|
18137
18730
|
[setDraggedItemRect, setSiblingHintRects]
|
|
18138
18731
|
);
|
|
18139
|
-
const refreshNavDragVisualsRef =
|
|
18732
|
+
const refreshNavDragVisualsRef = useRef11(refreshNavDragVisuals);
|
|
18140
18733
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
18141
|
-
const commitNavDragRef =
|
|
18734
|
+
const commitNavDragRef = useRef11(() => {
|
|
18142
18735
|
});
|
|
18143
|
-
const beginNavDragRef =
|
|
18736
|
+
const beginNavDragRef = useRef11(() => {
|
|
18144
18737
|
});
|
|
18145
|
-
const beginNavDrag =
|
|
18738
|
+
const beginNavDrag = useCallback9(
|
|
18146
18739
|
(session) => {
|
|
18147
18740
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
18148
18741
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -18181,7 +18774,7 @@ function useNavItemDrag({
|
|
|
18181
18774
|
]
|
|
18182
18775
|
);
|
|
18183
18776
|
beginNavDragRef.current = beginNavDrag;
|
|
18184
|
-
const commitNavDrag =
|
|
18777
|
+
const commitNavDrag = useCallback9(
|
|
18185
18778
|
(clientX, clientY) => {
|
|
18186
18779
|
const session = navDragRef.current;
|
|
18187
18780
|
if (!session) {
|
|
@@ -18260,7 +18853,7 @@ function useNavItemDrag({
|
|
|
18260
18853
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
18261
18854
|
);
|
|
18262
18855
|
commitNavDragRef.current = commitNavDrag;
|
|
18263
|
-
const startNavLinkDrag =
|
|
18856
|
+
const startNavLinkDrag = useCallback9(
|
|
18264
18857
|
(anchor, clientX, clientY, wasSelected) => {
|
|
18265
18858
|
if (footerDragRef.current) return false;
|
|
18266
18859
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -18278,7 +18871,7 @@ function useNavItemDrag({
|
|
|
18278
18871
|
},
|
|
18279
18872
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
18280
18873
|
);
|
|
18281
|
-
const onNavDragOver =
|
|
18874
|
+
const onNavDragOver = useCallback9(
|
|
18282
18875
|
(e) => {
|
|
18283
18876
|
const session = navDragRef.current;
|
|
18284
18877
|
if (!session) return false;
|
|
@@ -18290,7 +18883,7 @@ function useNavItemDrag({
|
|
|
18290
18883
|
},
|
|
18291
18884
|
[]
|
|
18292
18885
|
);
|
|
18293
|
-
|
|
18886
|
+
useEffect13(() => {
|
|
18294
18887
|
if (!isEditMode) return;
|
|
18295
18888
|
const THRESHOLD = 10;
|
|
18296
18889
|
const resolveWasSelected = (el) => {
|
|
@@ -18417,7 +19010,7 @@ function useNavItemDrag({
|
|
|
18417
19010
|
setLinkPopover,
|
|
18418
19011
|
suppressNextClickRef
|
|
18419
19012
|
]);
|
|
18420
|
-
const armNavPressFromChrome =
|
|
19013
|
+
const armNavPressFromChrome = useCallback9(
|
|
18421
19014
|
(selected, clientX, clientY, pointerId) => {
|
|
18422
19015
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
18423
19016
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -18449,7 +19042,7 @@ function useNavItemDrag({
|
|
|
18449
19042
|
}
|
|
18450
19043
|
|
|
18451
19044
|
// src/useSectionDrag.ts
|
|
18452
|
-
import { useCallback as
|
|
19045
|
+
import { useCallback as useCallback10, useEffect as useEffect14, useRef as useRef12, useState as useState15 } from "react";
|
|
18453
19046
|
|
|
18454
19047
|
// src/lib/section-dnd.ts
|
|
18455
19048
|
function isFooterSection(el) {
|
|
@@ -18542,21 +19135,21 @@ function useSectionDrag({
|
|
|
18542
19135
|
suppressNextClickRef,
|
|
18543
19136
|
suppressClickUntilRef
|
|
18544
19137
|
}) {
|
|
18545
|
-
const sectionDragRef =
|
|
18546
|
-
const [sectionDropSlots, setSectionDropSlots] =
|
|
18547
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] =
|
|
18548
|
-
const [isSectionDragging, setIsSectionDragging] =
|
|
18549
|
-
const sectionPointerDragRef =
|
|
18550
|
-
const autoScrollRafRef =
|
|
18551
|
-
const autoScrollDeltaRef =
|
|
18552
|
-
const stopAutoScroll =
|
|
19138
|
+
const sectionDragRef = useRef12(null);
|
|
19139
|
+
const [sectionDropSlots, setSectionDropSlots] = useState15([]);
|
|
19140
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = useState15(null);
|
|
19141
|
+
const [isSectionDragging, setIsSectionDragging] = useState15(false);
|
|
19142
|
+
const sectionPointerDragRef = useRef12(null);
|
|
19143
|
+
const autoScrollRafRef = useRef12(null);
|
|
19144
|
+
const autoScrollDeltaRef = useRef12(0);
|
|
19145
|
+
const stopAutoScroll = useCallback10(() => {
|
|
18553
19146
|
if (autoScrollRafRef.current != null) {
|
|
18554
19147
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
18555
19148
|
autoScrollRafRef.current = null;
|
|
18556
19149
|
}
|
|
18557
19150
|
autoScrollDeltaRef.current = 0;
|
|
18558
19151
|
}, []);
|
|
18559
|
-
const tickAutoScroll =
|
|
19152
|
+
const tickAutoScroll = useCallback10(() => {
|
|
18560
19153
|
if (!sectionDragRef.current) {
|
|
18561
19154
|
stopAutoScroll();
|
|
18562
19155
|
return;
|
|
@@ -18566,7 +19159,7 @@ function useSectionDrag({
|
|
|
18566
19159
|
}
|
|
18567
19160
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
18568
19161
|
}, [postToParentRef, stopAutoScroll]);
|
|
18569
|
-
const updateAutoScroll =
|
|
19162
|
+
const updateAutoScroll = useCallback10(
|
|
18570
19163
|
(clientY) => {
|
|
18571
19164
|
const clip = getIframeChromeClip(parentScrollRef.current);
|
|
18572
19165
|
let delta = 0;
|
|
@@ -18588,7 +19181,7 @@ function useSectionDrag({
|
|
|
18588
19181
|
},
|
|
18589
19182
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
18590
19183
|
);
|
|
18591
|
-
const clearSectionDragVisuals =
|
|
19184
|
+
const clearSectionDragVisuals = useCallback10(() => {
|
|
18592
19185
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
18593
19186
|
sectionDragRef.current = null;
|
|
18594
19187
|
setSectionDropSlots([]);
|
|
@@ -18598,7 +19191,7 @@ function useSectionDrag({
|
|
|
18598
19191
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
18599
19192
|
unlockItemDragInteraction();
|
|
18600
19193
|
}, [stopAutoScroll]);
|
|
18601
|
-
const refreshSectionDragVisuals =
|
|
19194
|
+
const refreshSectionDragVisuals = useCallback10(
|
|
18602
19195
|
(session, clientX, clientY) => {
|
|
18603
19196
|
session.lastClientX = clientX;
|
|
18604
19197
|
session.lastClientY = clientY;
|
|
@@ -18612,7 +19205,7 @@ function useSectionDrag({
|
|
|
18612
19205
|
},
|
|
18613
19206
|
[updateAutoScroll]
|
|
18614
19207
|
);
|
|
18615
|
-
const beginSectionDrag =
|
|
19208
|
+
const beginSectionDrag = useCallback10(
|
|
18616
19209
|
(session) => {
|
|
18617
19210
|
sectionDragRef.current = session;
|
|
18618
19211
|
setIsSectionDragging(true);
|
|
@@ -18623,7 +19216,7 @@ function useSectionDrag({
|
|
|
18623
19216
|
},
|
|
18624
19217
|
[refreshSectionDragVisuals]
|
|
18625
19218
|
);
|
|
18626
|
-
const commitSectionDrag =
|
|
19219
|
+
const commitSectionDrag = useCallback10(() => {
|
|
18627
19220
|
const session = sectionDragRef.current;
|
|
18628
19221
|
if (!session) {
|
|
18629
19222
|
clearSectionDragVisuals();
|
|
@@ -18652,7 +19245,7 @@ function useSectionDrag({
|
|
|
18652
19245
|
});
|
|
18653
19246
|
});
|
|
18654
19247
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
18655
|
-
const startSectionPressDrag =
|
|
19248
|
+
const startSectionPressDrag = useCallback10(
|
|
18656
19249
|
(el, clientX, clientY, pointerId) => {
|
|
18657
19250
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
18658
19251
|
const instanceId = instanceIdOf(el);
|
|
@@ -18669,7 +19262,7 @@ function useSectionDrag({
|
|
|
18669
19262
|
},
|
|
18670
19263
|
[footerDragRef, navDragRef]
|
|
18671
19264
|
);
|
|
18672
|
-
|
|
19265
|
+
useEffect14(() => {
|
|
18673
19266
|
if (!isEditMode) return;
|
|
18674
19267
|
const onPointerDown = (e) => {
|
|
18675
19268
|
if (e.button !== 0) return;
|
|
@@ -18775,7 +19368,7 @@ function useSectionDrag({
|
|
|
18775
19368
|
|
|
18776
19369
|
// src/ui/footer-container-chrome.tsx
|
|
18777
19370
|
import { Plus as Plus2 } from "lucide-react";
|
|
18778
|
-
import { jsx as
|
|
19371
|
+
import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
18779
19372
|
function FooterContainerChrome({
|
|
18780
19373
|
rect,
|
|
18781
19374
|
onAdd,
|
|
@@ -18783,7 +19376,7 @@ function FooterContainerChrome({
|
|
|
18783
19376
|
}) {
|
|
18784
19377
|
const chromeGap = 6;
|
|
18785
19378
|
const buttonMargin = 7;
|
|
18786
|
-
return /* @__PURE__ */
|
|
19379
|
+
return /* @__PURE__ */ jsx33(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx33(
|
|
18787
19380
|
"div",
|
|
18788
19381
|
{
|
|
18789
19382
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -18795,8 +19388,8 @@ function FooterContainerChrome({
|
|
|
18795
19388
|
width: rect.width + chromeGap * 2,
|
|
18796
19389
|
height: rect.height + chromeGap * 2
|
|
18797
19390
|
},
|
|
18798
|
-
children: /* @__PURE__ */
|
|
18799
|
-
/* @__PURE__ */
|
|
19391
|
+
children: /* @__PURE__ */ jsxs23(Tooltip, { children: [
|
|
19392
|
+
/* @__PURE__ */ jsx33(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
|
|
18800
19393
|
"button",
|
|
18801
19394
|
{
|
|
18802
19395
|
type: "button",
|
|
@@ -18815,17 +19408,17 @@ function FooterContainerChrome({
|
|
|
18815
19408
|
if (addDisabled) return;
|
|
18816
19409
|
onAdd();
|
|
18817
19410
|
},
|
|
18818
|
-
children: /* @__PURE__ */
|
|
19411
|
+
children: /* @__PURE__ */ jsx33(Plus2, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
18819
19412
|
}
|
|
18820
19413
|
) }),
|
|
18821
|
-
/* @__PURE__ */
|
|
19414
|
+
/* @__PURE__ */ jsx33(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
18822
19415
|
] })
|
|
18823
19416
|
}
|
|
18824
19417
|
) });
|
|
18825
19418
|
}
|
|
18826
19419
|
|
|
18827
19420
|
// src/lib/carousel.ts
|
|
18828
|
-
import { useEffect as
|
|
19421
|
+
import { useEffect as useEffect15, useState as useState16 } from "react";
|
|
18829
19422
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
18830
19423
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
18831
19424
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -18887,8 +19480,8 @@ function applyCarouselNode(key, val) {
|
|
|
18887
19480
|
return true;
|
|
18888
19481
|
}
|
|
18889
19482
|
function useOhwCarousel(key, initial) {
|
|
18890
|
-
const [images, setImages] =
|
|
18891
|
-
|
|
19483
|
+
const [images, setImages] = useState16(initial);
|
|
19484
|
+
useEffect15(() => {
|
|
18892
19485
|
const el = document.querySelector(
|
|
18893
19486
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
18894
19487
|
);
|
|
@@ -19308,13 +19901,13 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
19308
19901
|
|
|
19309
19902
|
// src/ui/navbar-container-chrome.tsx
|
|
19310
19903
|
import { Plus as Plus3 } from "lucide-react";
|
|
19311
|
-
import { jsx as
|
|
19904
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
19312
19905
|
function NavbarContainerChrome({
|
|
19313
19906
|
rect,
|
|
19314
19907
|
onAdd
|
|
19315
19908
|
}) {
|
|
19316
19909
|
const chromeGap = 6;
|
|
19317
|
-
return /* @__PURE__ */
|
|
19910
|
+
return /* @__PURE__ */ jsx34(
|
|
19318
19911
|
"div",
|
|
19319
19912
|
{
|
|
19320
19913
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -19326,7 +19919,7 @@ function NavbarContainerChrome({
|
|
|
19326
19919
|
width: rect.width + chromeGap * 2,
|
|
19327
19920
|
height: rect.height + chromeGap * 2
|
|
19328
19921
|
},
|
|
19329
|
-
children: /* @__PURE__ */
|
|
19922
|
+
children: /* @__PURE__ */ jsx34(
|
|
19330
19923
|
"button",
|
|
19331
19924
|
{
|
|
19332
19925
|
type: "button",
|
|
@@ -19343,7 +19936,7 @@ function NavbarContainerChrome({
|
|
|
19343
19936
|
e.stopPropagation();
|
|
19344
19937
|
onAdd();
|
|
19345
19938
|
},
|
|
19346
|
-
children: /* @__PURE__ */
|
|
19939
|
+
children: /* @__PURE__ */ jsx34(Plus3, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
19347
19940
|
}
|
|
19348
19941
|
)
|
|
19349
19942
|
}
|
|
@@ -19352,7 +19945,7 @@ function NavbarContainerChrome({
|
|
|
19352
19945
|
|
|
19353
19946
|
// src/ui/drop-indicator.tsx
|
|
19354
19947
|
import * as React11 from "react";
|
|
19355
|
-
import { jsx as
|
|
19948
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
19356
19949
|
var dropIndicatorVariants = cva(
|
|
19357
19950
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
19358
19951
|
{
|
|
@@ -19376,7 +19969,7 @@ var dropIndicatorVariants = cva(
|
|
|
19376
19969
|
);
|
|
19377
19970
|
var DropIndicator = React11.forwardRef(
|
|
19378
19971
|
({ className, direction, state, ...props }, ref) => {
|
|
19379
|
-
return /* @__PURE__ */
|
|
19972
|
+
return /* @__PURE__ */ jsx35(
|
|
19380
19973
|
"div",
|
|
19381
19974
|
{
|
|
19382
19975
|
ref,
|
|
@@ -19393,7 +19986,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
19393
19986
|
DropIndicator.displayName = "DropIndicator";
|
|
19394
19987
|
|
|
19395
19988
|
// src/ui/badge.tsx
|
|
19396
|
-
import { jsx as
|
|
19989
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
19397
19990
|
var badgeVariants = cva(
|
|
19398
19991
|
"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",
|
|
19399
19992
|
{
|
|
@@ -19411,13 +20004,13 @@ var badgeVariants = cva(
|
|
|
19411
20004
|
}
|
|
19412
20005
|
);
|
|
19413
20006
|
function Badge({ className, variant, ...props }) {
|
|
19414
|
-
return /* @__PURE__ */
|
|
20007
|
+
return /* @__PURE__ */ jsx36("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
19415
20008
|
}
|
|
19416
20009
|
|
|
19417
20010
|
// src/OhhwellsBridge.tsx
|
|
19418
20011
|
import { Brush as Brush2, Link as Link2, Plus as Plus4, Settings } from "lucide-react";
|
|
19419
|
-
import { Fragment as
|
|
19420
|
-
var
|
|
20012
|
+
import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
20013
|
+
var PRIMARY6 = "#0885FE";
|
|
19421
20014
|
var IMAGE_FADE_MS = 300;
|
|
19422
20015
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
19423
20016
|
function runOpacityFade(el, onDone) {
|
|
@@ -19538,7 +20131,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
19538
20131
|
schedulingRoots.set(container, root);
|
|
19539
20132
|
flushSync2(() => {
|
|
19540
20133
|
root.render(
|
|
19541
|
-
/* @__PURE__ */
|
|
20134
|
+
/* @__PURE__ */ jsx37(
|
|
19542
20135
|
SchedulingWidget,
|
|
19543
20136
|
{
|
|
19544
20137
|
notifyOnConnect: false,
|
|
@@ -19666,7 +20259,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
19666
20259
|
schedulingRoots.set(container, root);
|
|
19667
20260
|
flushSync2(() => {
|
|
19668
20261
|
root.render(
|
|
19669
|
-
/* @__PURE__ */
|
|
20262
|
+
/* @__PURE__ */ jsx37(
|
|
19670
20263
|
SchedulingWidget,
|
|
19671
20264
|
{
|
|
19672
20265
|
notifyOnConnect,
|
|
@@ -20403,7 +20996,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
20403
20996
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
20404
20997
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
20405
20998
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
20406
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
20999
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY6})`;
|
|
20407
21000
|
var TOOLBAR_GROUPS = [
|
|
20408
21001
|
[
|
|
20409
21002
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -20429,7 +21022,7 @@ function EditGlowChrome({
|
|
|
20429
21022
|
hideHandle = false
|
|
20430
21023
|
}) {
|
|
20431
21024
|
const GAP = SELECTION_CHROME_GAP2;
|
|
20432
|
-
return /* @__PURE__ */
|
|
21025
|
+
return /* @__PURE__ */ jsxs24(
|
|
20433
21026
|
"div",
|
|
20434
21027
|
{
|
|
20435
21028
|
ref: elRef,
|
|
@@ -20444,7 +21037,7 @@ function EditGlowChrome({
|
|
|
20444
21037
|
zIndex: 2147483646
|
|
20445
21038
|
},
|
|
20446
21039
|
children: [
|
|
20447
|
-
/* @__PURE__ */
|
|
21040
|
+
/* @__PURE__ */ jsx37(
|
|
20448
21041
|
"div",
|
|
20449
21042
|
{
|
|
20450
21043
|
style: {
|
|
@@ -20458,7 +21051,7 @@ function EditGlowChrome({
|
|
|
20458
21051
|
}
|
|
20459
21052
|
}
|
|
20460
21053
|
),
|
|
20461
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */
|
|
21054
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ jsx37(
|
|
20462
21055
|
"div",
|
|
20463
21056
|
{
|
|
20464
21057
|
"data-ohw-drag-handle-container": "",
|
|
@@ -20470,7 +21063,7 @@ function EditGlowChrome({
|
|
|
20470
21063
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
20471
21064
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
20472
21065
|
},
|
|
20473
|
-
children: /* @__PURE__ */
|
|
21066
|
+
children: /* @__PURE__ */ jsx37(
|
|
20474
21067
|
DragHandle,
|
|
20475
21068
|
{
|
|
20476
21069
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -20674,7 +21267,7 @@ function FloatingToolbar({
|
|
|
20674
21267
|
return () => ro.disconnect();
|
|
20675
21268
|
}, [showEditLink, activeCommands]);
|
|
20676
21269
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
20677
|
-
return /* @__PURE__ */
|
|
21270
|
+
return /* @__PURE__ */ jsx37(
|
|
20678
21271
|
"div",
|
|
20679
21272
|
{
|
|
20680
21273
|
ref: setRefs,
|
|
@@ -20686,12 +21279,12 @@ function FloatingToolbar({
|
|
|
20686
21279
|
zIndex: 2147483647,
|
|
20687
21280
|
pointerEvents: "auto"
|
|
20688
21281
|
},
|
|
20689
|
-
children: /* @__PURE__ */
|
|
20690
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */
|
|
20691
|
-
gi > 0 && /* @__PURE__ */
|
|
21282
|
+
children: /* @__PURE__ */ jsxs24(CustomToolbar, { children: [
|
|
21283
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs24(React12.Fragment, { children: [
|
|
21284
|
+
gi > 0 && /* @__PURE__ */ jsx37(CustomToolbarDivider, {}),
|
|
20692
21285
|
btns.map((btn) => {
|
|
20693
21286
|
const isActive = activeCommands.has(btn.cmd);
|
|
20694
|
-
return /* @__PURE__ */
|
|
21287
|
+
return /* @__PURE__ */ jsx37(
|
|
20695
21288
|
CustomToolbarButton,
|
|
20696
21289
|
{
|
|
20697
21290
|
title: btn.title,
|
|
@@ -20700,7 +21293,7 @@ function FloatingToolbar({
|
|
|
20700
21293
|
e.preventDefault();
|
|
20701
21294
|
onCommand(btn.cmd);
|
|
20702
21295
|
},
|
|
20703
|
-
children: /* @__PURE__ */
|
|
21296
|
+
children: /* @__PURE__ */ jsx37(
|
|
20704
21297
|
"svg",
|
|
20705
21298
|
{
|
|
20706
21299
|
width: "16",
|
|
@@ -20721,7 +21314,7 @@ function FloatingToolbar({
|
|
|
20721
21314
|
);
|
|
20722
21315
|
})
|
|
20723
21316
|
] }, gi)),
|
|
20724
|
-
showEditLink ? /* @__PURE__ */
|
|
21317
|
+
showEditLink ? /* @__PURE__ */ jsx37(
|
|
20725
21318
|
CustomToolbarButton,
|
|
20726
21319
|
{
|
|
20727
21320
|
type: "button",
|
|
@@ -20735,7 +21328,7 @@ function FloatingToolbar({
|
|
|
20735
21328
|
e.preventDefault();
|
|
20736
21329
|
e.stopPropagation();
|
|
20737
21330
|
},
|
|
20738
|
-
children: /* @__PURE__ */
|
|
21331
|
+
children: /* @__PURE__ */ jsx37(Link2, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
20739
21332
|
}
|
|
20740
21333
|
) : null
|
|
20741
21334
|
] })
|
|
@@ -20752,7 +21345,7 @@ function StateToggle({
|
|
|
20752
21345
|
states,
|
|
20753
21346
|
onStateChange
|
|
20754
21347
|
}) {
|
|
20755
|
-
return /* @__PURE__ */
|
|
21348
|
+
return /* @__PURE__ */ jsx37(
|
|
20756
21349
|
ToggleGroup,
|
|
20757
21350
|
{
|
|
20758
21351
|
"data-ohw-state-toggle": "",
|
|
@@ -20766,7 +21359,7 @@ function StateToggle({
|
|
|
20766
21359
|
left: rect.right - 8,
|
|
20767
21360
|
transform: "translateX(-100%)"
|
|
20768
21361
|
},
|
|
20769
|
-
children: states.map((state) => /* @__PURE__ */
|
|
21362
|
+
children: states.map((state) => /* @__PURE__ */ jsx37(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
20770
21363
|
}
|
|
20771
21364
|
);
|
|
20772
21365
|
}
|
|
@@ -20783,9 +21376,9 @@ var OHW_LOADER_STYLE = {
|
|
|
20783
21376
|
justifyContent: "center"
|
|
20784
21377
|
};
|
|
20785
21378
|
function OhwLoaderSpinner() {
|
|
20786
|
-
return /* @__PURE__ */
|
|
20787
|
-
/* @__PURE__ */
|
|
20788
|
-
/* @__PURE__ */
|
|
21379
|
+
return /* @__PURE__ */ jsxs24("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
21380
|
+
/* @__PURE__ */ jsx37("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
21381
|
+
/* @__PURE__ */ jsx37(
|
|
20789
21382
|
"circle",
|
|
20790
21383
|
{
|
|
20791
21384
|
cx: "14",
|
|
@@ -20795,7 +21388,7 @@ function OhwLoaderSpinner() {
|
|
|
20795
21388
|
strokeWidth: "3",
|
|
20796
21389
|
strokeDasharray: "17 52",
|
|
20797
21390
|
strokeLinecap: "round",
|
|
20798
|
-
children: /* @__PURE__ */
|
|
21391
|
+
children: /* @__PURE__ */ jsx37(
|
|
20799
21392
|
"animateTransform",
|
|
20800
21393
|
{
|
|
20801
21394
|
attributeName: "transform",
|
|
@@ -20811,7 +21404,7 @@ function OhwLoaderSpinner() {
|
|
|
20811
21404
|
] });
|
|
20812
21405
|
}
|
|
20813
21406
|
function OhwBrandMark() {
|
|
20814
|
-
return /* @__PURE__ */
|
|
21407
|
+
return /* @__PURE__ */ jsxs24(
|
|
20815
21408
|
"svg",
|
|
20816
21409
|
{
|
|
20817
21410
|
width: "16",
|
|
@@ -20822,7 +21415,7 @@ function OhwBrandMark() {
|
|
|
20822
21415
|
style: { display: "block", flexShrink: 0 },
|
|
20823
21416
|
xmlns: "http://www.w3.org/2000/svg",
|
|
20824
21417
|
children: [
|
|
20825
|
-
/* @__PURE__ */
|
|
21418
|
+
/* @__PURE__ */ jsx37(
|
|
20826
21419
|
"mask",
|
|
20827
21420
|
{
|
|
20828
21421
|
id: "ohw-badge-mark",
|
|
@@ -20832,15 +21425,15 @@ function OhwBrandMark() {
|
|
|
20832
21425
|
y: "0",
|
|
20833
21426
|
width: "48",
|
|
20834
21427
|
height: "48",
|
|
20835
|
-
children: /* @__PURE__ */
|
|
21428
|
+
children: /* @__PURE__ */ jsx37("path", { d: "M23.8741 48C37.0594 48 47.7481 37.2548 47.7481 24C47.7481 10.7452 37.0594 0 23.8741 0C10.6888 0 0 10.7452 0 24C0 37.2548 10.6888 48 23.8741 48Z", fill: "white" })
|
|
20836
21429
|
}
|
|
20837
21430
|
),
|
|
20838
|
-
/* @__PURE__ */
|
|
20839
|
-
/* @__PURE__ */
|
|
20840
|
-
/* @__PURE__ */
|
|
20841
|
-
/* @__PURE__ */
|
|
20842
|
-
/* @__PURE__ */
|
|
20843
|
-
/* @__PURE__ */
|
|
21431
|
+
/* @__PURE__ */ jsxs24("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
21432
|
+
/* @__PURE__ */ jsx37("path", { d: "M23.8731 48.0497C37.0584 48.0497 47.7472 37.3046 47.7472 24.0497C47.7472 10.7949 37.0584 0.0497208 23.8731 0.0497208C10.6878 0.0497208 -0.000976562 10.7949 -0.000976562 24.0497C-0.000976562 37.3046 10.6878 48.0497 23.8731 48.0497Z", fill: "#0078E5" }),
|
|
21433
|
+
/* @__PURE__ */ jsx37("path", { d: "M17.1307 14.7172C13.1687 14.7172 9.38102 18.1154 8.65114 22.34C8.38885 23.8488 8.5598 25.2581 9.06929 26.4451C6.20005 29.1677 1.77216 27.8721 -1.40212 26.1536C-2.73618 25.4317 -3.92695 27.4745 -2.59037 28.1981C1.33389 30.3226 6.86037 31.6621 10.4402 28.4188C11.4718 29.3859 12.867 29.9621 14.4894 29.9621C18.4161 29.9621 22.2038 26.5318 22.9337 22.34C23.6636 18.1162 21.0566 14.7172 17.1298 14.7172H17.1307ZM19.9798 22.34C19.5281 25.0399 17.2689 27.231 14.9754 27.231C12.6466 27.231 11.1877 25.0399 11.6394 22.34C12.1262 19.6401 14.3151 17.4482 16.6438 17.4482C18.9374 17.4482 20.4667 19.6401 19.9798 22.34Z", fill: "white" }),
|
|
21434
|
+
/* @__PURE__ */ jsx37("path", { d: "M40.0017 27.0262C39.1797 27.081 38.2721 26.995 37.4668 26.7415C37.3344 26.6993 37.28 26.5401 37.3529 26.4205C37.5959 26.0212 37.8255 25.6152 38.009 25.1889C38.1071 24.9918 38.2018 24.793 38.2897 24.5908C38.3274 24.5041 38.4163 24.451 38.5101 24.4619C38.63 24.4754 38.7054 24.4821 38.8881 24.4821L39.1529 24.4796L39.8283 24.4543C45.9229 24.0492 50.4765 20.4319 54.8466 16.9014C56.0172 15.9554 57.6932 17.6208 56.5116 18.5752C51.7687 22.4065 47.1966 26.5081 40.9319 26.9689", fill: "white" }),
|
|
21435
|
+
/* @__PURE__ */ jsx37("path", { d: "M37.9687 24.27C38.4472 23.1319 38.7656 21.9045 38.9609 20.6991C39.5927 16.76 38.5058 14.2193 36.1553 14.2193C34.1835 14.2193 33.1469 17.2427 32.9199 18.8694C32.743 19.9872 32.5914 22.1219 33.6028 23.9524C33.7553 24.259 34.15 24.7712 34.471 25.1259C34.5447 25.2067 34.6746 25.2 34.7349 25.1082C34.9528 24.7788 35.1615 24.4039 35.3584 24.0257C35.5444 23.6677 35.5888 23.6138 35.8587 23.0207C35.8838 22.966 35.8813 22.9002 35.8478 22.8505C35.5888 22.4597 35.2168 21.9787 35.1204 21.4614C34.9184 20.4455 34.9436 19.2257 35.2218 18.1078C35.4413 17.3118 35.7195 16.7844 35.9039 16.5106C35.9466 16.4466 36.0279 16.4129 36.0975 16.4449C36.369 16.5671 36.5827 16.8838 36.7385 17.396C37.0167 18.2089 37.0167 19.3782 36.814 20.6999C36.6991 21.5271 36.4771 22.3729 36.1746 23.1673C36.1293 23.308 36.0757 23.4461 36.0187 23.5826C36.0187 23.5868 36.0187 23.591 36.0187 23.5961C35.9911 23.6946 35.9207 23.8067 35.8846 23.901C35.5536 24.5497 35.2344 25.1697 34.8439 25.7838C34.8388 25.7863 34.8346 25.7914 34.8296 25.7931C34.6528 26.0525 34.4718 26.2901 34.2866 26.4965C34.2774 26.5099 34.2682 26.5234 34.2589 26.5369C34.2405 26.5638 34.2179 26.5815 34.1944 26.595C33.5064 27.3212 32.7665 27.6893 32.0123 27.6893C31.8606 27.6893 31.6838 27.664 31.507 27.4349C31.3042 27.1299 30.85 26.0879 31.2539 22.9112C31.4785 21.3949 31.8011 20.0268 31.931 19.5408C31.9579 19.4413 31.8908 19.3419 31.7886 19.3293L30.0062 19.1162C29.9241 19.1061 29.8478 19.1566 29.8252 19.2366C29.2704 21.1615 27.0305 27.6885 24.9599 27.6885C24.328 27.6885 24.1512 26.6211 24.1001 26.2909C23.775 23.6264 25.528 18.5492 29.5302 16.2267C29.6048 16.1838 29.635 16.0928 29.5998 16.0136L28.9042 14.467C28.8632 14.3752 28.7501 14.3389 28.6638 14.3886C25.8079 16.0414 24.1847 18.5231 23.2915 20.3436C22.2046 22.5793 21.6993 25.0189 21.9515 26.8738C22.1795 28.7794 23.1398 29.872 24.6054 29.872C26.0543 29.872 27.4369 28.9066 28.7098 27.0187C28.7953 26.8915 28.9889 26.9311 29.0149 27.0819C29.2646 28.5283 29.9811 29.872 31.6579 29.872C33.5282 29.872 35.3232 28.7288 36.7134 26.6447C36.7712 26.5874 36.7972 26.5411 36.8181 26.4906C36.8232 26.4931 36.8282 26.4948 36.8332 26.4973C37.01 26.2025 37.181 25.9051 37.3444 25.6027C37.4508 25.4005 37.5572 25.1992 37.6586 24.9945C37.7181 24.874 37.7743 24.7527 37.8262 24.6289C37.838 24.6002 37.8547 24.5665 37.8706 24.5337", fill: "white" }),
|
|
21436
|
+
/* @__PURE__ */ jsx37("path", { d: "M30.5839 31.6397C25.7546 34.8577 19.4773 34.7853 14.6907 31.5243C13.5368 30.7384 12.5044 32.6498 13.6474 33.4281C19.034 37.0985 26.3077 37.096 31.7218 33.488C32.8791 32.7172 31.7478 30.8639 30.5839 31.6397Z", fill: "white" })
|
|
20844
21437
|
] })
|
|
20845
21438
|
]
|
|
20846
21439
|
}
|
|
@@ -20877,7 +21470,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
20877
21470
|
whiteSpace: "nowrap"
|
|
20878
21471
|
};
|
|
20879
21472
|
function MadeWithOhhWells() {
|
|
20880
|
-
return /* @__PURE__ */
|
|
21473
|
+
return /* @__PURE__ */ jsxs24(
|
|
20881
21474
|
"a",
|
|
20882
21475
|
{
|
|
20883
21476
|
href: "https://ohhwells.com",
|
|
@@ -20887,8 +21480,8 @@ function MadeWithOhhWells() {
|
|
|
20887
21480
|
"data-ohw-badge": "",
|
|
20888
21481
|
style: OHW_BADGE_STYLE,
|
|
20889
21482
|
children: [
|
|
20890
|
-
/* @__PURE__ */
|
|
20891
|
-
/* @__PURE__ */
|
|
21483
|
+
/* @__PURE__ */ jsx37(OhwBrandMark, {}),
|
|
21484
|
+
/* @__PURE__ */ jsx37("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
20892
21485
|
]
|
|
20893
21486
|
}
|
|
20894
21487
|
);
|
|
@@ -20934,8 +21527,8 @@ function OhhwellsBridge() {
|
|
|
20934
21527
|
const router = useRouter3();
|
|
20935
21528
|
const searchParams = useSearchParams();
|
|
20936
21529
|
const isEditMode = isEditSessionActive();
|
|
20937
|
-
const [bridgeRoot, setBridgeRoot] =
|
|
20938
|
-
|
|
21530
|
+
const [bridgeRoot, setBridgeRoot] = useState17(null);
|
|
21531
|
+
useEffect16(() => {
|
|
20939
21532
|
const figtreeFontId = "ohw-figtree-font";
|
|
20940
21533
|
if (!document.getElementById(figtreeFontId)) {
|
|
20941
21534
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -20961,7 +21554,7 @@ function OhhwellsBridge() {
|
|
|
20961
21554
|
};
|
|
20962
21555
|
}, []);
|
|
20963
21556
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
20964
|
-
const [subdomain, setSubdomain] =
|
|
21557
|
+
const [subdomain, setSubdomain] = useState17(() => resolveSubdomain(subdomainFromQuery));
|
|
20965
21558
|
useLayoutEffect5(() => {
|
|
20966
21559
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
20967
21560
|
if (next !== subdomain) setSubdomain(next);
|
|
@@ -20974,7 +21567,7 @@ function OhhwellsBridge() {
|
|
|
20974
21567
|
}, 0);
|
|
20975
21568
|
return () => window.clearTimeout(t);
|
|
20976
21569
|
}, [subdomainFromQuery, subdomain]);
|
|
20977
|
-
|
|
21570
|
+
useEffect16(() => {
|
|
20978
21571
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
20979
21572
|
const url = new URL(window.location.href);
|
|
20980
21573
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -20984,45 +21577,45 @@ function OhhwellsBridge() {
|
|
|
20984
21577
|
}, [subdomainFromQuery]);
|
|
20985
21578
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
20986
21579
|
useSavedLinkNavigation(isEditMode);
|
|
20987
|
-
const postToParent2 =
|
|
21580
|
+
const postToParent2 = useCallback11((data) => {
|
|
20988
21581
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
20989
21582
|
window.parent.postMessage(data, "*");
|
|
20990
21583
|
}
|
|
20991
21584
|
}, []);
|
|
20992
|
-
const [fetchState, setFetchState] =
|
|
20993
|
-
const [showBranding, setShowBranding] =
|
|
20994
|
-
const autoSaveTimers =
|
|
20995
|
-
const activeElRef =
|
|
20996
|
-
const pointerHeldRef =
|
|
20997
|
-
const selectedElRef =
|
|
20998
|
-
const selectedHrefKeyRef =
|
|
20999
|
-
const selectedFooterColAttrRef =
|
|
21000
|
-
const originalContentRef =
|
|
21001
|
-
const activeStateElRef =
|
|
21002
|
-
const parentScrollRef =
|
|
21003
|
-
const visibleViewportRef =
|
|
21004
|
-
const [dialogPortalContainer, setDialogPortalContainer] =
|
|
21005
|
-
const attachVisibleViewport =
|
|
21585
|
+
const [fetchState, setFetchState] = useState17("idle");
|
|
21586
|
+
const [showBranding, setShowBranding] = useState17(false);
|
|
21587
|
+
const autoSaveTimers = useRef13(/* @__PURE__ */ new Map());
|
|
21588
|
+
const activeElRef = useRef13(null);
|
|
21589
|
+
const pointerHeldRef = useRef13(false);
|
|
21590
|
+
const selectedElRef = useRef13(null);
|
|
21591
|
+
const selectedHrefKeyRef = useRef13(null);
|
|
21592
|
+
const selectedFooterColAttrRef = useRef13(null);
|
|
21593
|
+
const originalContentRef = useRef13(null);
|
|
21594
|
+
const activeStateElRef = useRef13(null);
|
|
21595
|
+
const parentScrollRef = useRef13(null);
|
|
21596
|
+
const visibleViewportRef = useRef13(null);
|
|
21597
|
+
const [dialogPortalContainer, setDialogPortalContainer] = useState17(null);
|
|
21598
|
+
const attachVisibleViewport = useCallback11((node) => {
|
|
21006
21599
|
visibleViewportRef.current = node;
|
|
21007
21600
|
setDialogPortalContainer(node);
|
|
21008
21601
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
21009
21602
|
}, []);
|
|
21010
|
-
const toolbarElRef =
|
|
21011
|
-
const glowElRef =
|
|
21012
|
-
const hoveredImageRef =
|
|
21013
|
-
const hoveredImageHasTextOverlapRef =
|
|
21014
|
-
const dragOverElRef =
|
|
21015
|
-
const [mediaHover, setMediaHover] =
|
|
21016
|
-
const [selectedAiSectionId, setSelectedAiSectionId] =
|
|
21017
|
-
const selectedAiSectionIdRef =
|
|
21018
|
-
const handleAiSectionSelectionChange =
|
|
21603
|
+
const toolbarElRef = useRef13(null);
|
|
21604
|
+
const glowElRef = useRef13(null);
|
|
21605
|
+
const hoveredImageRef = useRef13(null);
|
|
21606
|
+
const hoveredImageHasTextOverlapRef = useRef13(false);
|
|
21607
|
+
const dragOverElRef = useRef13(null);
|
|
21608
|
+
const [mediaHover, setMediaHover] = useState17(null);
|
|
21609
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = useState17(null);
|
|
21610
|
+
const selectedAiSectionIdRef = useRef13(null);
|
|
21611
|
+
const handleAiSectionSelectionChange = useCallback11((id) => {
|
|
21019
21612
|
selectedAiSectionIdRef.current = id;
|
|
21020
21613
|
setSelectedAiSectionId(id);
|
|
21021
21614
|
}, []);
|
|
21022
|
-
const [selectedMedia, setSelectedMedia] =
|
|
21023
|
-
const selectedMediaElRef =
|
|
21024
|
-
const mediaKeyDropTokenRef =
|
|
21025
|
-
const clearMediaSelection =
|
|
21615
|
+
const [selectedMedia, setSelectedMedia] = useState17(null);
|
|
21616
|
+
const selectedMediaElRef = useRef13(null);
|
|
21617
|
+
const mediaKeyDropTokenRef = useRef13(0);
|
|
21618
|
+
const clearMediaSelection = useCallback11(() => {
|
|
21026
21619
|
const prev = selectedMediaElRef.current;
|
|
21027
21620
|
selectedMediaElRef.current = null;
|
|
21028
21621
|
setSelectedMedia(null);
|
|
@@ -21047,9 +21640,9 @@ function OhhwellsBridge() {
|
|
|
21047
21640
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
21048
21641
|
}
|
|
21049
21642
|
}, []);
|
|
21050
|
-
const clearMediaSelectionRef =
|
|
21643
|
+
const clearMediaSelectionRef = useRef13(clearMediaSelection);
|
|
21051
21644
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
21052
|
-
const selectMediaElement =
|
|
21645
|
+
const selectMediaElement = useCallback11((el) => {
|
|
21053
21646
|
const r2 = el.getBoundingClientRect();
|
|
21054
21647
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
21055
21648
|
selectedMediaElRef.current = el;
|
|
@@ -21073,9 +21666,9 @@ function OhhwellsBridge() {
|
|
|
21073
21666
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
21074
21667
|
});
|
|
21075
21668
|
}, []);
|
|
21076
|
-
const selectMediaElementRef =
|
|
21669
|
+
const selectMediaElementRef = useRef13(selectMediaElement);
|
|
21077
21670
|
selectMediaElementRef.current = selectMediaElement;
|
|
21078
|
-
|
|
21671
|
+
useEffect16(() => {
|
|
21079
21672
|
if (!selectedMedia) return;
|
|
21080
21673
|
const update = () => {
|
|
21081
21674
|
const el = selectedMediaElRef.current;
|
|
@@ -21095,54 +21688,54 @@ function OhhwellsBridge() {
|
|
|
21095
21688
|
window.removeEventListener("resize", update);
|
|
21096
21689
|
};
|
|
21097
21690
|
}, [selectedMedia !== null]);
|
|
21098
|
-
const [carouselHover, setCarouselHover] =
|
|
21099
|
-
const [uploadingRects, setUploadingRects] =
|
|
21100
|
-
const hoveredGapRef =
|
|
21101
|
-
const imageUnhoverTimerRef =
|
|
21102
|
-
const imageShowTimerRef =
|
|
21103
|
-
const editStylesRef =
|
|
21104
|
-
const activateRef =
|
|
21691
|
+
const [carouselHover, setCarouselHover] = useState17(null);
|
|
21692
|
+
const [uploadingRects, setUploadingRects] = useState17({});
|
|
21693
|
+
const hoveredGapRef = useRef13(null);
|
|
21694
|
+
const imageUnhoverTimerRef = useRef13(null);
|
|
21695
|
+
const imageShowTimerRef = useRef13(null);
|
|
21696
|
+
const editStylesRef = useRef13(null);
|
|
21697
|
+
const activateRef = useRef13(() => {
|
|
21105
21698
|
});
|
|
21106
|
-
const deactivateRef =
|
|
21699
|
+
const deactivateRef = useRef13(() => {
|
|
21107
21700
|
});
|
|
21108
|
-
const selectRef =
|
|
21701
|
+
const selectRef = useRef13(() => {
|
|
21109
21702
|
});
|
|
21110
|
-
const selectFrameRef =
|
|
21703
|
+
const selectFrameRef = useRef13(() => {
|
|
21111
21704
|
});
|
|
21112
|
-
const selectLogoRef =
|
|
21705
|
+
const selectLogoRef = useRef13(() => {
|
|
21113
21706
|
});
|
|
21114
|
-
const openLogoSizePanelRef =
|
|
21707
|
+
const openLogoSizePanelRef = useRef13(() => {
|
|
21115
21708
|
});
|
|
21116
|
-
const deselectRef =
|
|
21709
|
+
const deselectRef = useRef13(() => {
|
|
21117
21710
|
});
|
|
21118
|
-
const closeFloatingPanelOnlyRef =
|
|
21711
|
+
const closeFloatingPanelOnlyRef = useRef13(() => {
|
|
21119
21712
|
});
|
|
21120
|
-
const reselectNavigationItemRef =
|
|
21713
|
+
const reselectNavigationItemRef = useRef13(() => {
|
|
21121
21714
|
});
|
|
21122
|
-
const commitNavigationTextEditRef =
|
|
21715
|
+
const commitNavigationTextEditRef = useRef13(() => {
|
|
21123
21716
|
});
|
|
21124
|
-
const handleDeleteSelectedRef =
|
|
21125
|
-
const runPendingDeleteUndoRef =
|
|
21126
|
-
const isFooterFrameSelectionRef =
|
|
21127
|
-
const refreshActiveCommandsRef =
|
|
21717
|
+
const handleDeleteSelectedRef = useRef13(() => false);
|
|
21718
|
+
const runPendingDeleteUndoRef = useRef13(() => false);
|
|
21719
|
+
const isFooterFrameSelectionRef = useRef13(false);
|
|
21720
|
+
const refreshActiveCommandsRef = useRef13(() => {
|
|
21128
21721
|
});
|
|
21129
|
-
const postToParentRef =
|
|
21722
|
+
const postToParentRef = useRef13(postToParent2);
|
|
21130
21723
|
postToParentRef.current = postToParent2;
|
|
21131
|
-
const aiSectionApiRef =
|
|
21132
|
-
const sectionsLoadedRef =
|
|
21133
|
-
const pendingScheduleConfigRequests =
|
|
21134
|
-
const [toolbarRect, setToolbarRect] =
|
|
21135
|
-
const [formPickRect, setFormPickRect] =
|
|
21136
|
-
const formPickElRef =
|
|
21137
|
-
const [formViewState, setFormViewStateUi] =
|
|
21138
|
-
const [formPickCount, setFormPickCount] =
|
|
21139
|
-
const [formHoverRect, setFormHoverRect] =
|
|
21140
|
-
const formHoverElRef =
|
|
21141
|
-
const [fieldPickRect, setFieldPickRect] =
|
|
21142
|
-
const fieldPickElRef =
|
|
21143
|
-
const [fieldPickState, setFieldPickState] =
|
|
21144
|
-
const [fieldTypePickerOpen, setFieldTypePickerOpen] =
|
|
21145
|
-
const clearFormPick =
|
|
21724
|
+
const aiSectionApiRef = useRef13(null);
|
|
21725
|
+
const sectionsLoadedRef = useRef13(false);
|
|
21726
|
+
const pendingScheduleConfigRequests = useRef13([]);
|
|
21727
|
+
const [toolbarRect, setToolbarRect] = useState17(null);
|
|
21728
|
+
const [formPickRect, setFormPickRect] = useState17(null);
|
|
21729
|
+
const formPickElRef = useRef13(null);
|
|
21730
|
+
const [formViewState, setFormViewStateUi] = useState17("default");
|
|
21731
|
+
const [formPickCount, setFormPickCount] = useState17(null);
|
|
21732
|
+
const [formHoverRect, setFormHoverRect] = useState17(null);
|
|
21733
|
+
const formHoverElRef = useRef13(null);
|
|
21734
|
+
const [fieldPickRect, setFieldPickRect] = useState17(null);
|
|
21735
|
+
const fieldPickElRef = useRef13(null);
|
|
21736
|
+
const [fieldPickState, setFieldPickState] = useState17(null);
|
|
21737
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = useState17(false);
|
|
21738
|
+
const clearFormPick = useCallback11(() => {
|
|
21146
21739
|
const form = formPickElRef.current;
|
|
21147
21740
|
const editing = fieldPickElRef.current;
|
|
21148
21741
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -21162,7 +21755,7 @@ function OhhwellsBridge() {
|
|
|
21162
21755
|
formPickElRef.current = null;
|
|
21163
21756
|
setFormPickRect(null);
|
|
21164
21757
|
}, []);
|
|
21165
|
-
const clearFieldPick =
|
|
21758
|
+
const clearFieldPick = useCallback11(() => {
|
|
21166
21759
|
const wrapper = fieldPickElRef.current;
|
|
21167
21760
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
21168
21761
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -21172,9 +21765,9 @@ function OhhwellsBridge() {
|
|
|
21172
21765
|
setFieldPickRect(null);
|
|
21173
21766
|
setFieldPickState(null);
|
|
21174
21767
|
}, []);
|
|
21175
|
-
const persistFieldsRef =
|
|
21768
|
+
const persistFieldsRef = useRef13(() => {
|
|
21176
21769
|
});
|
|
21177
|
-
const persistFields =
|
|
21770
|
+
const persistFields = useCallback11(
|
|
21178
21771
|
(form) => {
|
|
21179
21772
|
const key = formKeyOf(form);
|
|
21180
21773
|
if (!key) return;
|
|
@@ -21185,7 +21778,7 @@ function OhhwellsBridge() {
|
|
|
21185
21778
|
[]
|
|
21186
21779
|
);
|
|
21187
21780
|
persistFieldsRef.current = persistFields;
|
|
21188
|
-
const selectField =
|
|
21781
|
+
const selectField = useCallback11((wrapper) => {
|
|
21189
21782
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
21190
21783
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
21191
21784
|
}
|
|
@@ -21198,7 +21791,7 @@ function OhhwellsBridge() {
|
|
|
21198
21791
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
21199
21792
|
setFieldTypePickerOpen(false);
|
|
21200
21793
|
}, []);
|
|
21201
|
-
const withSelectedField =
|
|
21794
|
+
const withSelectedField = useCallback11(
|
|
21202
21795
|
(run) => {
|
|
21203
21796
|
const wrapper = fieldPickElRef.current;
|
|
21204
21797
|
const form = formPickElRef.current;
|
|
@@ -21211,28 +21804,28 @@ function OhhwellsBridge() {
|
|
|
21211
21804
|
},
|
|
21212
21805
|
[persistFields]
|
|
21213
21806
|
);
|
|
21214
|
-
const handleFieldTypeChange =
|
|
21807
|
+
const handleFieldTypeChange = useCallback11(
|
|
21215
21808
|
(type) => withSelectedField((_form, wrapper) => {
|
|
21216
21809
|
applyFieldType(wrapper, type);
|
|
21217
21810
|
selectField(wrapper);
|
|
21218
21811
|
}),
|
|
21219
21812
|
[selectField, withSelectedField]
|
|
21220
21813
|
);
|
|
21221
|
-
const handleFieldRequiredToggle =
|
|
21814
|
+
const handleFieldRequiredToggle = useCallback11(
|
|
21222
21815
|
() => withSelectedField((_form, wrapper) => {
|
|
21223
21816
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
21224
21817
|
selectField(wrapper);
|
|
21225
21818
|
}),
|
|
21226
21819
|
[selectField, withSelectedField]
|
|
21227
21820
|
);
|
|
21228
|
-
const handleFieldDuplicate =
|
|
21821
|
+
const handleFieldDuplicate = useCallback11(
|
|
21229
21822
|
() => withSelectedField((form, wrapper) => {
|
|
21230
21823
|
const copy = duplicateField(form, wrapper);
|
|
21231
21824
|
selectField(copy);
|
|
21232
21825
|
}),
|
|
21233
21826
|
[selectField, withSelectedField]
|
|
21234
21827
|
);
|
|
21235
|
-
const handleFieldDelete =
|
|
21828
|
+
const handleFieldDelete = useCallback11(
|
|
21236
21829
|
() => withSelectedField((_form, wrapper) => {
|
|
21237
21830
|
removeField(wrapper);
|
|
21238
21831
|
clearFieldPick();
|
|
@@ -21240,7 +21833,7 @@ function OhhwellsBridge() {
|
|
|
21240
21833
|
}),
|
|
21241
21834
|
[clearFieldPick, withSelectedField]
|
|
21242
21835
|
);
|
|
21243
|
-
const handleAddField =
|
|
21836
|
+
const handleAddField = useCallback11(
|
|
21244
21837
|
(type) => {
|
|
21245
21838
|
const form = formPickElRef.current;
|
|
21246
21839
|
if (!form) return;
|
|
@@ -21256,8 +21849,8 @@ function OhhwellsBridge() {
|
|
|
21256
21849
|
},
|
|
21257
21850
|
[persistFields, selectField]
|
|
21258
21851
|
);
|
|
21259
|
-
const fieldDragRef =
|
|
21260
|
-
const buildFieldDropSlots =
|
|
21852
|
+
const fieldDragRef = useRef13(null);
|
|
21853
|
+
const buildFieldDropSlots = useCallback11((form, draggedKey) => {
|
|
21261
21854
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
21262
21855
|
const slots = others.map((el) => {
|
|
21263
21856
|
const rect = el.getBoundingClientRect();
|
|
@@ -21270,7 +21863,7 @@ function OhhwellsBridge() {
|
|
|
21270
21863
|
}
|
|
21271
21864
|
return slots;
|
|
21272
21865
|
}, []);
|
|
21273
|
-
const handleFieldDragStart =
|
|
21866
|
+
const handleFieldDragStart = useCallback11(() => {
|
|
21274
21867
|
const wrapper = fieldPickElRef.current;
|
|
21275
21868
|
const form = formPickElRef.current;
|
|
21276
21869
|
if (!wrapper || !form) return;
|
|
@@ -21279,18 +21872,18 @@ function OhhwellsBridge() {
|
|
|
21279
21872
|
setFieldDragging(true);
|
|
21280
21873
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
21281
21874
|
}, [buildFieldDropSlots]);
|
|
21282
|
-
const handleFieldDragEnd =
|
|
21875
|
+
const handleFieldDragEnd = useCallback11(() => {
|
|
21283
21876
|
fieldDragRef.current = null;
|
|
21284
21877
|
setFieldDropIndex(null);
|
|
21285
21878
|
setFieldDropSlots([]);
|
|
21286
21879
|
setFieldDragging(false);
|
|
21287
21880
|
}, []);
|
|
21288
|
-
const [fieldDropIndex, setFieldDropIndex] =
|
|
21289
|
-
const [fieldDropSlots, setFieldDropSlots] =
|
|
21290
|
-
const [fieldDragging, setFieldDragging] =
|
|
21291
|
-
const clearFormPickRef =
|
|
21881
|
+
const [fieldDropIndex, setFieldDropIndex] = useState17(null);
|
|
21882
|
+
const [fieldDropSlots, setFieldDropSlots] = useState17([]);
|
|
21883
|
+
const [fieldDragging, setFieldDragging] = useState17(false);
|
|
21884
|
+
const clearFormPickRef = useRef13(clearFormPick);
|
|
21292
21885
|
clearFormPickRef.current = clearFormPick;
|
|
21293
|
-
|
|
21886
|
+
useEffect16(() => {
|
|
21294
21887
|
const el = fieldPickElRef.current;
|
|
21295
21888
|
if (!el || fieldPickRect === null) return;
|
|
21296
21889
|
const observer = new ResizeObserver(() => {
|
|
@@ -21299,7 +21892,7 @@ function OhhwellsBridge() {
|
|
|
21299
21892
|
observer.observe(el);
|
|
21300
21893
|
return () => observer.disconnect();
|
|
21301
21894
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
21302
|
-
|
|
21895
|
+
useEffect16(() => {
|
|
21303
21896
|
const el = formPickElRef.current;
|
|
21304
21897
|
if (!el || formPickRect === null) return;
|
|
21305
21898
|
const observer = new ResizeObserver(() => {
|
|
@@ -21308,25 +21901,25 @@ function OhhwellsBridge() {
|
|
|
21308
21901
|
observer.observe(el);
|
|
21309
21902
|
return () => observer.disconnect();
|
|
21310
21903
|
}, [formPickRect !== null, formViewState]);
|
|
21311
|
-
const [toolbarVariant, setToolbarVariant] =
|
|
21312
|
-
const toolbarVariantRef =
|
|
21904
|
+
const [toolbarVariant, setToolbarVariant] = useState17("none");
|
|
21905
|
+
const toolbarVariantRef = useRef13("none");
|
|
21313
21906
|
toolbarVariantRef.current = toolbarVariant;
|
|
21314
|
-
const [selectedIsCta, setSelectedIsCta] =
|
|
21315
|
-
const [selectedIsSocial, setSelectedIsSocial] =
|
|
21316
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] =
|
|
21317
|
-
const [reorderHrefKey, setReorderHrefKey] =
|
|
21318
|
-
const [reorderDragDisabled, setReorderDragDisabled] =
|
|
21319
|
-
const [toggleState, setToggleState] =
|
|
21320
|
-
const [maxBadge, setMaxBadge] =
|
|
21321
|
-
const [activeCommands, setActiveCommands] =
|
|
21322
|
-
const [sectionGap, setSectionGap] =
|
|
21323
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] =
|
|
21324
|
-
const hoveredNavContainerRef =
|
|
21325
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] =
|
|
21326
|
-
const hoveredItemElRef =
|
|
21327
|
-
const [hoveredItemRect, setHoveredItemRect] =
|
|
21328
|
-
const [hoveredTextRect, setHoveredTextRect] =
|
|
21329
|
-
|
|
21907
|
+
const [selectedIsCta, setSelectedIsCta] = useState17(false);
|
|
21908
|
+
const [selectedIsSocial, setSelectedIsSocial] = useState17(false);
|
|
21909
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = useState17(false);
|
|
21910
|
+
const [reorderHrefKey, setReorderHrefKey] = useState17(null);
|
|
21911
|
+
const [reorderDragDisabled, setReorderDragDisabled] = useState17(false);
|
|
21912
|
+
const [toggleState, setToggleState] = useState17(null);
|
|
21913
|
+
const [maxBadge, setMaxBadge] = useState17(null);
|
|
21914
|
+
const [activeCommands, setActiveCommands] = useState17(/* @__PURE__ */ new Set());
|
|
21915
|
+
const [sectionGap, setSectionGap] = useState17(null);
|
|
21916
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = useState17(false);
|
|
21917
|
+
const hoveredNavContainerRef = useRef13(null);
|
|
21918
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = useState17(null);
|
|
21919
|
+
const hoveredItemElRef = useRef13(null);
|
|
21920
|
+
const [hoveredItemRect, setHoveredItemRect] = useState17(null);
|
|
21921
|
+
const [hoveredTextRect, setHoveredTextRect] = useState17(null);
|
|
21922
|
+
useEffect16(() => {
|
|
21330
21923
|
const sync = () => {
|
|
21331
21924
|
const el = document.querySelector(
|
|
21332
21925
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -21370,60 +21963,60 @@ function OhhwellsBridge() {
|
|
|
21370
21963
|
});
|
|
21371
21964
|
return () => observer.disconnect();
|
|
21372
21965
|
}, []);
|
|
21373
|
-
const siblingHintElRef =
|
|
21374
|
-
const [siblingHintRect, setSiblingHintRect] =
|
|
21375
|
-
const [siblingHintRects, setSiblingHintRects] =
|
|
21376
|
-
const [isItemDragging, setIsItemDragging] =
|
|
21377
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] =
|
|
21966
|
+
const siblingHintElRef = useRef13(null);
|
|
21967
|
+
const [siblingHintRect, setSiblingHintRect] = useState17(null);
|
|
21968
|
+
const [siblingHintRects, setSiblingHintRects] = useState17([]);
|
|
21969
|
+
const [isItemDragging, setIsItemDragging] = useState17(false);
|
|
21970
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = useState17(false);
|
|
21378
21971
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
21379
|
-
const [floatingPanel, setFloatingPanel] =
|
|
21380
|
-
const floatingPanelOpenRef =
|
|
21972
|
+
const [floatingPanel, setFloatingPanel] = useState17(null);
|
|
21973
|
+
const floatingPanelOpenRef = useRef13(false);
|
|
21381
21974
|
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
21382
|
-
const floatingPanelRef =
|
|
21975
|
+
const floatingPanelRef = useRef13(null);
|
|
21383
21976
|
floatingPanelRef.current = floatingPanel;
|
|
21384
|
-
const [floatingPanelPos, setFloatingPanelPos] =
|
|
21385
|
-
const buttonCollectionDragRef =
|
|
21386
|
-
const buttonDropInsertIndexRef =
|
|
21387
|
-
const [buttonDropSlots, setButtonDropSlots] =
|
|
21388
|
-
const [activeButtonDropIndex, setActiveButtonDropIndex] =
|
|
21389
|
-
const buttonPointerDragRef =
|
|
21390
|
-
const [buttonStyleTick, setButtonStyleTick] =
|
|
21391
|
-
const [logoSizeDraft, setLogoSizeDraft] =
|
|
21392
|
-
const [editorViewport, setEditorViewport] =
|
|
21393
|
-
const [parentScrollSnap, setParentScrollSnap] =
|
|
21394
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] =
|
|
21395
|
-
const [footerHeadingVisible, setFooterHeadingVisible] =
|
|
21396
|
-
const footerDragRef =
|
|
21397
|
-
const [footerDropSlots, setFooterDropSlots] =
|
|
21398
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] =
|
|
21399
|
-
const [draggedItemRect, setDraggedItemRect] =
|
|
21400
|
-
const footerPointerDragRef =
|
|
21401
|
-
const suppressNextClickRef =
|
|
21402
|
-
const suppressClickUntilRef =
|
|
21403
|
-
const [linkPopover, setLinkPopover] =
|
|
21404
|
-
const linkPopoverSessionRef =
|
|
21405
|
-
const addNavAfterAnchorRef =
|
|
21406
|
-
const editContentRef =
|
|
21407
|
-
const aiSectionsRef =
|
|
21408
|
-
const applyTreeLocalRef =
|
|
21977
|
+
const [floatingPanelPos, setFloatingPanelPos] = useState17(null);
|
|
21978
|
+
const buttonCollectionDragRef = useRef13(null);
|
|
21979
|
+
const buttonDropInsertIndexRef = useRef13(null);
|
|
21980
|
+
const [buttonDropSlots, setButtonDropSlots] = useState17([]);
|
|
21981
|
+
const [activeButtonDropIndex, setActiveButtonDropIndex] = useState17(null);
|
|
21982
|
+
const buttonPointerDragRef = useRef13(null);
|
|
21983
|
+
const [buttonStyleTick, setButtonStyleTick] = useState17(0);
|
|
21984
|
+
const [logoSizeDraft, setLogoSizeDraft] = useState17(null);
|
|
21985
|
+
const [editorViewport, setEditorViewport] = useState17("desktop");
|
|
21986
|
+
const [parentScrollSnap, setParentScrollSnap] = useState17(null);
|
|
21987
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState17(null);
|
|
21988
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = useState17(null);
|
|
21989
|
+
const footerDragRef = useRef13(null);
|
|
21990
|
+
const [footerDropSlots, setFooterDropSlots] = useState17([]);
|
|
21991
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = useState17(null);
|
|
21992
|
+
const [draggedItemRect, setDraggedItemRect] = useState17(null);
|
|
21993
|
+
const footerPointerDragRef = useRef13(null);
|
|
21994
|
+
const suppressNextClickRef = useRef13(false);
|
|
21995
|
+
const suppressClickUntilRef = useRef13(0);
|
|
21996
|
+
const [linkPopover, setLinkPopover] = useState17(null);
|
|
21997
|
+
const linkPopoverSessionRef = useRef13(null);
|
|
21998
|
+
const addNavAfterAnchorRef = useRef13(null);
|
|
21999
|
+
const editContentRef = useRef13({});
|
|
22000
|
+
const aiSectionsRef = useRef13("");
|
|
22001
|
+
const applyTreeLocalRef = useRef13(
|
|
21409
22002
|
null
|
|
21410
22003
|
);
|
|
21411
|
-
const clearInteractionChromeRef =
|
|
22004
|
+
const clearInteractionChromeRef = useRef13(() => {
|
|
21412
22005
|
});
|
|
21413
|
-
const brandKitRef =
|
|
21414
|
-
const stylesRef =
|
|
21415
|
-
const appliedDrawerRef =
|
|
21416
|
-
const pendingDeleteUndoRef =
|
|
21417
|
-
const [sitePages, setSitePages] =
|
|
21418
|
-
const [sectionsByPath, setSectionsByPath] =
|
|
21419
|
-
const sectionsPrefetchGenRef =
|
|
21420
|
-
const setLinkPopoverRef =
|
|
21421
|
-
const linkPopoverPanelRef =
|
|
21422
|
-
const linkPopoverOpenRef =
|
|
21423
|
-
const linkPopoverGraceUntilRef =
|
|
22006
|
+
const brandKitRef = useRef13("");
|
|
22007
|
+
const stylesRef = useRef13("");
|
|
22008
|
+
const appliedDrawerRef = useRef13(null);
|
|
22009
|
+
const pendingDeleteUndoRef = useRef13(null);
|
|
22010
|
+
const [sitePages, setSitePages] = useState17([]);
|
|
22011
|
+
const [sectionsByPath, setSectionsByPath] = useState17({});
|
|
22012
|
+
const sectionsPrefetchGenRef = useRef13(0);
|
|
22013
|
+
const setLinkPopoverRef = useRef13(setLinkPopover);
|
|
22014
|
+
const linkPopoverPanelRef = useRef13(null);
|
|
22015
|
+
const linkPopoverOpenRef = useRef13(false);
|
|
22016
|
+
const linkPopoverGraceUntilRef = useRef13(0);
|
|
21424
22017
|
setLinkPopoverRef.current = setLinkPopover;
|
|
21425
22018
|
linkPopoverSessionRef.current = linkPopover;
|
|
21426
|
-
|
|
22019
|
+
useEffect16(() => {
|
|
21427
22020
|
setSectionOrderPersistHandler((entries) => {
|
|
21428
22021
|
const currentPath = window.location.pathname;
|
|
21429
22022
|
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
@@ -21479,7 +22072,7 @@ function OhhwellsBridge() {
|
|
|
21479
22072
|
const bumpLinkPopoverGrace = () => {
|
|
21480
22073
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
21481
22074
|
};
|
|
21482
|
-
const runSectionsPrefetch =
|
|
22075
|
+
const runSectionsPrefetch = useCallback11((pages) => {
|
|
21483
22076
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
21484
22077
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
21485
22078
|
const paths = pages.map((p) => p.path);
|
|
@@ -21498,9 +22091,9 @@ function OhhwellsBridge() {
|
|
|
21498
22091
|
);
|
|
21499
22092
|
});
|
|
21500
22093
|
}, [isEditMode, pathname]);
|
|
21501
|
-
const runSectionsPrefetchRef =
|
|
22094
|
+
const runSectionsPrefetchRef = useRef13(runSectionsPrefetch);
|
|
21502
22095
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
21503
|
-
|
|
22096
|
+
useEffect16(() => {
|
|
21504
22097
|
if (!linkPopover) {
|
|
21505
22098
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21506
22099
|
return;
|
|
@@ -21528,7 +22121,7 @@ function OhhwellsBridge() {
|
|
|
21528
22121
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21529
22122
|
};
|
|
21530
22123
|
}, [linkPopover, postToParent2]);
|
|
21531
|
-
|
|
22124
|
+
useEffect16(() => {
|
|
21532
22125
|
if (!isEditMode) return;
|
|
21533
22126
|
const useFixtures = shouldUseDevFixtures();
|
|
21534
22127
|
if (useFixtures) {
|
|
@@ -21552,14 +22145,14 @@ function OhhwellsBridge() {
|
|
|
21552
22145
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
21553
22146
|
return () => window.removeEventListener("message", onSitePages);
|
|
21554
22147
|
}, [isEditMode, postToParent2]);
|
|
21555
|
-
|
|
22148
|
+
useEffect16(() => {
|
|
21556
22149
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
21557
22150
|
void loadAllSectionsManifest().then((manifest) => {
|
|
21558
22151
|
if (Object.keys(manifest).length === 0) return;
|
|
21559
22152
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
21560
22153
|
});
|
|
21561
22154
|
}, [isEditMode]);
|
|
21562
|
-
|
|
22155
|
+
useEffect16(() => {
|
|
21563
22156
|
const update = () => {
|
|
21564
22157
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
21565
22158
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -21583,10 +22176,10 @@ function OhhwellsBridge() {
|
|
|
21583
22176
|
vvp.removeEventListener("resize", update);
|
|
21584
22177
|
};
|
|
21585
22178
|
}, []);
|
|
21586
|
-
const refreshStateRules =
|
|
22179
|
+
const refreshStateRules = useCallback11(() => {
|
|
21587
22180
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
21588
22181
|
}, []);
|
|
21589
|
-
const processConfigRequest =
|
|
22182
|
+
const processConfigRequest = useCallback11((insertAfterVal) => {
|
|
21590
22183
|
const tracker = getSectionsTracker();
|
|
21591
22184
|
let entries = [];
|
|
21592
22185
|
try {
|
|
@@ -21609,7 +22202,7 @@ function OhhwellsBridge() {
|
|
|
21609
22202
|
}
|
|
21610
22203
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
21611
22204
|
}, [isEditMode]);
|
|
21612
|
-
const deactivate =
|
|
22205
|
+
const deactivate = useCallback11(() => {
|
|
21613
22206
|
const el = activeElRef.current;
|
|
21614
22207
|
if (!el) return;
|
|
21615
22208
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -21660,12 +22253,12 @@ function OhhwellsBridge() {
|
|
|
21660
22253
|
setToolbarShowEditLink(false);
|
|
21661
22254
|
postToParent2({ type: "ow:exit-edit" });
|
|
21662
22255
|
}, [postToParent2]);
|
|
21663
|
-
const clearSelectedAttr =
|
|
22256
|
+
const clearSelectedAttr = useCallback11(() => {
|
|
21664
22257
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
21665
22258
|
el.removeAttribute("data-ohw-selected");
|
|
21666
22259
|
});
|
|
21667
22260
|
}, []);
|
|
21668
|
-
const deselect =
|
|
22261
|
+
const deselect = useCallback11(() => {
|
|
21669
22262
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
21670
22263
|
clearSelectedAttr();
|
|
21671
22264
|
selectedElRef.current = null;
|
|
@@ -21700,20 +22293,20 @@ function OhhwellsBridge() {
|
|
|
21700
22293
|
setToolbarVariant("none");
|
|
21701
22294
|
}
|
|
21702
22295
|
}, [clearSelectedAttr]);
|
|
21703
|
-
const markSelected =
|
|
22296
|
+
const markSelected = useCallback11((el) => {
|
|
21704
22297
|
clearSelectedAttr();
|
|
21705
22298
|
el.removeAttribute("data-ohw-hovered");
|
|
21706
22299
|
el.setAttribute("data-ohw-selected", "");
|
|
21707
22300
|
}, [clearSelectedAttr]);
|
|
21708
|
-
const isSelectedForHover =
|
|
22301
|
+
const isSelectedForHover = useCallback11((el) => {
|
|
21709
22302
|
if (!el) return false;
|
|
21710
22303
|
return [selectedElRef.current, activeElRef.current].some(
|
|
21711
22304
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
21712
22305
|
);
|
|
21713
22306
|
}, []);
|
|
21714
|
-
const isSelectedForHoverRef =
|
|
22307
|
+
const isSelectedForHoverRef = useRef13(isSelectedForHover);
|
|
21715
22308
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
21716
|
-
const resolveHrefKeyElement =
|
|
22309
|
+
const resolveHrefKeyElement = useCallback11((hrefKey) => {
|
|
21717
22310
|
if (isFooterHrefKey(hrefKey)) {
|
|
21718
22311
|
return document.querySelector(
|
|
21719
22312
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -21728,7 +22321,7 @@ function OhhwellsBridge() {
|
|
|
21728
22321
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
21729
22322
|
);
|
|
21730
22323
|
}, []);
|
|
21731
|
-
const resyncSelectedNavigationItem =
|
|
22324
|
+
const resyncSelectedNavigationItem = useCallback11(() => {
|
|
21732
22325
|
const hrefKey = selectedHrefKeyRef.current;
|
|
21733
22326
|
if (hrefKey) {
|
|
21734
22327
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -21766,7 +22359,7 @@ function OhhwellsBridge() {
|
|
|
21766
22359
|
);
|
|
21767
22360
|
}
|
|
21768
22361
|
}, [resolveHrefKeyElement]);
|
|
21769
|
-
const reselectNavigationItem =
|
|
22362
|
+
const reselectNavigationItem = useCallback11((navAnchor) => {
|
|
21770
22363
|
selectedElRef.current = navAnchor;
|
|
21771
22364
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
21772
22365
|
selectedFooterColAttrRef.current = null;
|
|
@@ -21797,7 +22390,7 @@ function OhhwellsBridge() {
|
|
|
21797
22390
|
setToolbarShowEditLink(false);
|
|
21798
22391
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
21799
22392
|
}, [markSelected]);
|
|
21800
|
-
const commitNavigationTextEdit =
|
|
22393
|
+
const commitNavigationTextEdit = useCallback11((navAnchor) => {
|
|
21801
22394
|
const el = activeElRef.current;
|
|
21802
22395
|
if (!el) return;
|
|
21803
22396
|
const key = el.dataset.ohwKey;
|
|
@@ -21830,7 +22423,7 @@ function OhhwellsBridge() {
|
|
|
21830
22423
|
postToParent2({ type: "ow:exit-edit" });
|
|
21831
22424
|
reselectNavigationItem(navAnchor);
|
|
21832
22425
|
}, [postToParent2, reselectNavigationItem]);
|
|
21833
|
-
const handleAddTopLevelNavItem =
|
|
22426
|
+
const handleAddTopLevelNavItem = useCallback11(() => {
|
|
21834
22427
|
const items = listNavbarRootItems();
|
|
21835
22428
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
21836
22429
|
deselectRef.current();
|
|
@@ -21842,7 +22435,7 @@ function OhhwellsBridge() {
|
|
|
21842
22435
|
intent: "add-nav"
|
|
21843
22436
|
});
|
|
21844
22437
|
}, []);
|
|
21845
|
-
const maybeWarnNavLinkDropdownConflict =
|
|
22438
|
+
const maybeWarnNavLinkDropdownConflict = useCallback11(
|
|
21846
22439
|
(anchor) => {
|
|
21847
22440
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
21848
22441
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -21855,7 +22448,7 @@ function OhhwellsBridge() {
|
|
|
21855
22448
|
},
|
|
21856
22449
|
[postToParent2]
|
|
21857
22450
|
);
|
|
21858
|
-
const handleNavDropdownOpenChange =
|
|
22451
|
+
const handleNavDropdownOpenChange = useCallback11((open) => {
|
|
21859
22452
|
const selected = selectedElRef.current;
|
|
21860
22453
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
21861
22454
|
if (isNestedNavChild(selected)) return;
|
|
@@ -21871,7 +22464,7 @@ function OhhwellsBridge() {
|
|
|
21871
22464
|
}
|
|
21872
22465
|
});
|
|
21873
22466
|
}, []);
|
|
21874
|
-
const handleFooterHeadingVisibleChange =
|
|
22467
|
+
const handleFooterHeadingVisibleChange = useCallback11(
|
|
21875
22468
|
(visible) => {
|
|
21876
22469
|
const selected = selectedElRef.current;
|
|
21877
22470
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -21895,7 +22488,7 @@ function OhhwellsBridge() {
|
|
|
21895
22488
|
},
|
|
21896
22489
|
[postToParent2]
|
|
21897
22490
|
);
|
|
21898
|
-
const enterEditOnNewItem =
|
|
22491
|
+
const enterEditOnNewItem = useCallback11((anchor) => {
|
|
21899
22492
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
21900
22493
|
if (!label) {
|
|
21901
22494
|
selectRef.current(anchor);
|
|
@@ -21904,8 +22497,8 @@ function OhhwellsBridge() {
|
|
|
21904
22497
|
setNavGroupForceOpen(anchor, true);
|
|
21905
22498
|
activateRef.current(label);
|
|
21906
22499
|
}, []);
|
|
21907
|
-
const pendingSocialAddRef =
|
|
21908
|
-
const handleAddChildItem =
|
|
22500
|
+
const pendingSocialAddRef = useRef13(null);
|
|
22501
|
+
const handleAddChildItem = useCallback11(() => {
|
|
21909
22502
|
const selected = selectedElRef.current;
|
|
21910
22503
|
if (!selected) return;
|
|
21911
22504
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -22016,7 +22609,7 @@ function OhhwellsBridge() {
|
|
|
22016
22609
|
});
|
|
22017
22610
|
});
|
|
22018
22611
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
22019
|
-
const handleAddFooterColumn =
|
|
22612
|
+
const handleAddFooterColumn = useCallback11(() => {
|
|
22020
22613
|
if (!canAddFooterColumn()) {
|
|
22021
22614
|
postToParent2({
|
|
22022
22615
|
type: "ow:toast",
|
|
@@ -22037,7 +22630,7 @@ function OhhwellsBridge() {
|
|
|
22037
22630
|
selectRef.current(result.firstLink);
|
|
22038
22631
|
});
|
|
22039
22632
|
}, [postToParent2]);
|
|
22040
|
-
const clearFooterDragVisuals =
|
|
22633
|
+
const clearFooterDragVisuals = useCallback11(() => {
|
|
22041
22634
|
footerDragRef.current = null;
|
|
22042
22635
|
setSiblingHintRects([]);
|
|
22043
22636
|
setFooterDropSlots([]);
|
|
@@ -22046,7 +22639,7 @@ function OhhwellsBridge() {
|
|
|
22046
22639
|
setIsItemDragging(false);
|
|
22047
22640
|
unlockFooterDragInteraction();
|
|
22048
22641
|
}, []);
|
|
22049
|
-
const refreshFooterDragVisuals =
|
|
22642
|
+
const refreshFooterDragVisuals = useCallback11((session, activeSlot, clientX, clientY) => {
|
|
22050
22643
|
const dragged = session.draggedEl;
|
|
22051
22644
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
22052
22645
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -22078,13 +22671,13 @@ function OhhwellsBridge() {
|
|
|
22078
22671
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
22079
22672
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
22080
22673
|
}, []);
|
|
22081
|
-
const refreshFooterDragVisualsRef =
|
|
22674
|
+
const refreshFooterDragVisualsRef = useRef13(refreshFooterDragVisuals);
|
|
22082
22675
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
22083
|
-
const commitFooterDragRef =
|
|
22676
|
+
const commitFooterDragRef = useRef13(() => {
|
|
22084
22677
|
});
|
|
22085
|
-
const beginFooterDragRef =
|
|
22678
|
+
const beginFooterDragRef = useRef13(() => {
|
|
22086
22679
|
});
|
|
22087
|
-
const beginFooterDrag =
|
|
22680
|
+
const beginFooterDrag = useCallback11(
|
|
22088
22681
|
(session) => {
|
|
22089
22682
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
22090
22683
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -22104,7 +22697,7 @@ function OhhwellsBridge() {
|
|
|
22104
22697
|
[refreshFooterDragVisuals]
|
|
22105
22698
|
);
|
|
22106
22699
|
beginFooterDragRef.current = beginFooterDrag;
|
|
22107
|
-
const commitFooterDrag =
|
|
22700
|
+
const commitFooterDrag = useCallback11(
|
|
22108
22701
|
(clientX, clientY) => {
|
|
22109
22702
|
const session = footerDragRef.current;
|
|
22110
22703
|
if (!session) {
|
|
@@ -22233,7 +22826,7 @@ function OhhwellsBridge() {
|
|
|
22233
22826
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
22234
22827
|
);
|
|
22235
22828
|
commitFooterDragRef.current = commitFooterDrag;
|
|
22236
|
-
const startFooterLinkDrag =
|
|
22829
|
+
const startFooterLinkDrag = useCallback11(
|
|
22237
22830
|
(anchor, clientX, clientY, wasSelected) => {
|
|
22238
22831
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
22239
22832
|
if (!hrefKey) return false;
|
|
@@ -22269,7 +22862,7 @@ function OhhwellsBridge() {
|
|
|
22269
22862
|
},
|
|
22270
22863
|
[beginFooterDrag]
|
|
22271
22864
|
);
|
|
22272
|
-
const startFooterColumnDrag =
|
|
22865
|
+
const startFooterColumnDrag = useCallback11(
|
|
22273
22866
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
22274
22867
|
const columns = listFooterColumns();
|
|
22275
22868
|
const idx = columns.indexOf(columnEl);
|
|
@@ -22289,7 +22882,7 @@ function OhhwellsBridge() {
|
|
|
22289
22882
|
},
|
|
22290
22883
|
[beginFooterDrag]
|
|
22291
22884
|
);
|
|
22292
|
-
const persistButtonCollectionDrag =
|
|
22885
|
+
const persistButtonCollectionDrag = useCallback11(
|
|
22293
22886
|
(button, clientX) => {
|
|
22294
22887
|
const insertIndex = buttonDropInsertIndexRef.current;
|
|
22295
22888
|
if (insertIndex != null) insertButtonAtCollectionIndex(button, insertIndex);
|
|
@@ -22313,7 +22906,7 @@ function OhhwellsBridge() {
|
|
|
22313
22906
|
},
|
|
22314
22907
|
[postToParent2]
|
|
22315
22908
|
);
|
|
22316
|
-
const refreshButtonDragVisuals =
|
|
22909
|
+
const refreshButtonDragVisuals = useCallback11((button, clientX, clientY) => {
|
|
22317
22910
|
const collection = buttonCollectionOf(button);
|
|
22318
22911
|
if (!collection) {
|
|
22319
22912
|
setButtonDropSlots([]);
|
|
@@ -22330,7 +22923,7 @@ function OhhwellsBridge() {
|
|
|
22330
22923
|
setDraggedItemRect(button.getBoundingClientRect());
|
|
22331
22924
|
if (selectedElRef.current === button) setToolbarRect(button.getBoundingClientRect());
|
|
22332
22925
|
}, []);
|
|
22333
|
-
const handleItemDragStart =
|
|
22926
|
+
const handleItemDragStart = useCallback11(
|
|
22334
22927
|
(e) => {
|
|
22335
22928
|
const selected = selectedElRef.current;
|
|
22336
22929
|
if (!selected) {
|
|
@@ -22361,7 +22954,7 @@ function OhhwellsBridge() {
|
|
|
22361
22954
|
},
|
|
22362
22955
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag, refreshButtonDragVisuals]
|
|
22363
22956
|
);
|
|
22364
|
-
const handleItemDragEnd =
|
|
22957
|
+
const handleItemDragEnd = useCallback11(
|
|
22365
22958
|
(e) => {
|
|
22366
22959
|
const collectionButton = buttonCollectionDragRef.current;
|
|
22367
22960
|
if (collectionButton) {
|
|
@@ -22392,7 +22985,7 @@ function OhhwellsBridge() {
|
|
|
22392
22985
|
},
|
|
22393
22986
|
[commitFooterDrag, commitNavDrag, navDragRef, persistButtonCollectionDrag]
|
|
22394
22987
|
);
|
|
22395
|
-
const handleItemChromePointerDown =
|
|
22988
|
+
const handleItemChromePointerDown = useCallback11((e) => {
|
|
22396
22989
|
if (e.button !== 0) return;
|
|
22397
22990
|
const selected = selectedElRef.current;
|
|
22398
22991
|
if (!selected) return;
|
|
@@ -22433,7 +23026,7 @@ function OhhwellsBridge() {
|
|
|
22433
23026
|
}
|
|
22434
23027
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
22435
23028
|
}, [armNavPressFromChrome]);
|
|
22436
|
-
const handleItemChromeClick =
|
|
23029
|
+
const handleItemChromeClick = useCallback11((clientX, clientY) => {
|
|
22437
23030
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
22438
23031
|
suppressNextClickRef.current = false;
|
|
22439
23032
|
return;
|
|
@@ -22446,7 +23039,7 @@ function OhhwellsBridge() {
|
|
|
22446
23039
|
}, []);
|
|
22447
23040
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
22448
23041
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
22449
|
-
const select =
|
|
23042
|
+
const select = useCallback11((anchor) => {
|
|
22450
23043
|
if (!isNavigationItem2(anchor)) return;
|
|
22451
23044
|
if (activeElRef.current) deactivate();
|
|
22452
23045
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -22508,7 +23101,7 @@ function OhhwellsBridge() {
|
|
|
22508
23101
|
setLogoSizeDraft(null);
|
|
22509
23102
|
}
|
|
22510
23103
|
}, [deactivate, markSelected]);
|
|
22511
|
-
const selectFrame =
|
|
23104
|
+
const selectFrame = useCallback11((el) => {
|
|
22512
23105
|
if (!isNavigationContainer(el)) return;
|
|
22513
23106
|
if (activeElRef.current) deactivate();
|
|
22514
23107
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -22549,7 +23142,7 @@ function OhhwellsBridge() {
|
|
|
22549
23142
|
setFloatingPanelPos(null);
|
|
22550
23143
|
setLogoSizeDraft(null);
|
|
22551
23144
|
}, [deactivate, markSelected, postToParent2]);
|
|
22552
|
-
const selectLogo =
|
|
23145
|
+
const selectLogo = useCallback11(
|
|
22553
23146
|
(logoEl) => {
|
|
22554
23147
|
if (activeElRef.current) deactivate();
|
|
22555
23148
|
selectedElRef.current = logoEl;
|
|
@@ -22578,7 +23171,7 @@ function OhhwellsBridge() {
|
|
|
22578
23171
|
},
|
|
22579
23172
|
[deactivate, markSelected]
|
|
22580
23173
|
);
|
|
22581
|
-
const openLogoSizePanel =
|
|
23174
|
+
const openLogoSizePanel = useCallback11((logoEl) => {
|
|
22582
23175
|
const placement = getLogoPlacement(logoEl);
|
|
22583
23176
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
22584
23177
|
setLogoSizeDraft(draft);
|
|
@@ -22591,7 +23184,7 @@ function OhhwellsBridge() {
|
|
|
22591
23184
|
placement
|
|
22592
23185
|
});
|
|
22593
23186
|
}, []);
|
|
22594
|
-
const openSocialsDisplayPanel =
|
|
23187
|
+
const openSocialsDisplayPanel = useCallback11((row) => {
|
|
22595
23188
|
setFloatingPanelPos(null);
|
|
22596
23189
|
setParentScrollSnap(parentScrollRef.current);
|
|
22597
23190
|
setFloatingPanel({
|
|
@@ -22602,7 +23195,7 @@ function OhhwellsBridge() {
|
|
|
22602
23195
|
row
|
|
22603
23196
|
});
|
|
22604
23197
|
}, []);
|
|
22605
|
-
const rememberButtonTokens =
|
|
23198
|
+
const rememberButtonTokens = useCallback11(
|
|
22606
23199
|
(content, tokens, nodes) => {
|
|
22607
23200
|
if (nodes.length === 0) return content;
|
|
22608
23201
|
const next = { ...content };
|
|
@@ -22613,7 +23206,7 @@ function OhhwellsBridge() {
|
|
|
22613
23206
|
},
|
|
22614
23207
|
[postToParent2]
|
|
22615
23208
|
);
|
|
22616
|
-
const tokensForButton =
|
|
23209
|
+
const tokensForButton = useCallback11(
|
|
22617
23210
|
(el, persistFallback = false) => {
|
|
22618
23211
|
const stored = readStoredStyleTokens(editContentRef.current);
|
|
22619
23212
|
if (stored) return stored;
|
|
@@ -22628,7 +23221,7 @@ function OhhwellsBridge() {
|
|
|
22628
23221
|
},
|
|
22629
23222
|
[rememberButtonTokens]
|
|
22630
23223
|
);
|
|
22631
|
-
const openButtonStylePanel =
|
|
23224
|
+
const openButtonStylePanel = useCallback11(
|
|
22632
23225
|
(anchor) => {
|
|
22633
23226
|
const id = buttonId(anchor);
|
|
22634
23227
|
if (!id) return;
|
|
@@ -22646,7 +23239,7 @@ function OhhwellsBridge() {
|
|
|
22646
23239
|
},
|
|
22647
23240
|
[tokensForButton]
|
|
22648
23241
|
);
|
|
22649
|
-
const applySelectedButtonStyle =
|
|
23242
|
+
const applySelectedButtonStyle = useCallback11(
|
|
22650
23243
|
(patch) => {
|
|
22651
23244
|
const panel = floatingPanelRef.current;
|
|
22652
23245
|
const id = panel?.kind === "button-style" ? panel.buttonId : null;
|
|
@@ -22664,7 +23257,7 @@ function OhhwellsBridge() {
|
|
|
22664
23257
|
},
|
|
22665
23258
|
[postToParent2]
|
|
22666
23259
|
);
|
|
22667
|
-
|
|
23260
|
+
useEffect16(() => {
|
|
22668
23261
|
const onDragOver = (e) => {
|
|
22669
23262
|
const dragged = buttonCollectionDragRef.current;
|
|
22670
23263
|
if (!dragged) return;
|
|
@@ -22683,11 +23276,11 @@ function OhhwellsBridge() {
|
|
|
22683
23276
|
document.removeEventListener("drop", onDrop);
|
|
22684
23277
|
};
|
|
22685
23278
|
}, [refreshButtonDragVisuals]);
|
|
22686
|
-
const isEditModeRef =
|
|
22687
|
-
const requestMissingSocialIconsRef =
|
|
23279
|
+
const isEditModeRef = useRef13(false);
|
|
23280
|
+
const requestMissingSocialIconsRef = useRef13(() => {
|
|
22688
23281
|
});
|
|
22689
|
-
const askedSocialIconsRef =
|
|
22690
|
-
const requestMissingSocialIcons =
|
|
23282
|
+
const askedSocialIconsRef = useRef13(/* @__PURE__ */ new Set());
|
|
23283
|
+
const requestMissingSocialIcons = useCallback11(() => {
|
|
22691
23284
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
22692
23285
|
const missing = socialsMissingIcons(row);
|
|
22693
23286
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -22699,7 +23292,7 @@ function OhhwellsBridge() {
|
|
|
22699
23292
|
}, []);
|
|
22700
23293
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
22701
23294
|
isEditModeRef.current = isEditMode;
|
|
22702
|
-
const changeSocialsDisplay =
|
|
23295
|
+
const changeSocialsDisplay = useCallback11(
|
|
22703
23296
|
(row, next) => {
|
|
22704
23297
|
if (next.icon) {
|
|
22705
23298
|
const missing = socialsMissingIcons(row);
|
|
@@ -22723,19 +23316,19 @@ function OhhwellsBridge() {
|
|
|
22723
23316
|
},
|
|
22724
23317
|
[]
|
|
22725
23318
|
);
|
|
22726
|
-
const closeFloatingPanelOnly =
|
|
23319
|
+
const closeFloatingPanelOnly = useCallback11(() => {
|
|
22727
23320
|
setFloatingPanel(null);
|
|
22728
23321
|
setFloatingPanelPos(null);
|
|
22729
23322
|
setLogoSizeDraft(null);
|
|
22730
23323
|
}, []);
|
|
22731
23324
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22732
|
-
const closeFloatingPanelAndDeselect =
|
|
23325
|
+
const closeFloatingPanelAndDeselect = useCallback11(() => {
|
|
22733
23326
|
setFloatingPanel(null);
|
|
22734
23327
|
setFloatingPanelPos(null);
|
|
22735
23328
|
setLogoSizeDraft(null);
|
|
22736
23329
|
deselectRef.current();
|
|
22737
23330
|
}, []);
|
|
22738
|
-
|
|
23331
|
+
useEffect16(() => {
|
|
22739
23332
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
22740
23333
|
if (!session || !logoSizeDraft) {
|
|
22741
23334
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -22754,7 +23347,7 @@ function OhhwellsBridge() {
|
|
|
22754
23347
|
max: LOGO_SIZE_MAX
|
|
22755
23348
|
});
|
|
22756
23349
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
22757
|
-
const persistLogoSizeDraft =
|
|
23350
|
+
const persistLogoSizeDraft = useCallback11(
|
|
22758
23351
|
(placement, draft) => {
|
|
22759
23352
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
22760
23353
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -22794,7 +23387,7 @@ function OhhwellsBridge() {
|
|
|
22794
23387
|
},
|
|
22795
23388
|
[postToParent2]
|
|
22796
23389
|
);
|
|
22797
|
-
const activate =
|
|
23390
|
+
const activate = useCallback11((el, options) => {
|
|
22798
23391
|
if (activeElRef.current === el) return;
|
|
22799
23392
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
22800
23393
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -22892,8 +23485,8 @@ function OhhwellsBridge() {
|
|
|
22892
23485
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
22893
23486
|
deselectRef.current = deselect;
|
|
22894
23487
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22895
|
-
const lastSiteWideScopeRef =
|
|
22896
|
-
|
|
23488
|
+
const lastSiteWideScopeRef = useRef13(null);
|
|
23489
|
+
useEffect16(() => {
|
|
22897
23490
|
if (!isEditMode) {
|
|
22898
23491
|
if (lastSiteWideScopeRef.current !== false) {
|
|
22899
23492
|
lastSiteWideScopeRef.current = false;
|
|
@@ -23043,7 +23636,7 @@ function OhhwellsBridge() {
|
|
|
23043
23636
|
cancelled = true;
|
|
23044
23637
|
};
|
|
23045
23638
|
}, [subdomain, isEditMode]);
|
|
23046
|
-
|
|
23639
|
+
useEffect16(() => {
|
|
23047
23640
|
if (!isEditMode) return;
|
|
23048
23641
|
const resolveIndex = (form, clientY) => {
|
|
23049
23642
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -23084,7 +23677,7 @@ function OhhwellsBridge() {
|
|
|
23084
23677
|
window.removeEventListener("drop", onDrop, true);
|
|
23085
23678
|
};
|
|
23086
23679
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
23087
|
-
|
|
23680
|
+
useEffect16(() => {
|
|
23088
23681
|
if (!isEditMode) return;
|
|
23089
23682
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23090
23683
|
markFormFields(form);
|
|
@@ -23096,7 +23689,7 @@ function OhhwellsBridge() {
|
|
|
23096
23689
|
});
|
|
23097
23690
|
return () => observer.disconnect();
|
|
23098
23691
|
}, [isEditMode, fetchState, pathname]);
|
|
23099
|
-
|
|
23692
|
+
useEffect16(() => {
|
|
23100
23693
|
if (!isEditMode) return;
|
|
23101
23694
|
let saveTimer = null;
|
|
23102
23695
|
const onInput = (e) => {
|
|
@@ -23118,14 +23711,14 @@ function OhhwellsBridge() {
|
|
|
23118
23711
|
document.addEventListener("input", onInput, true);
|
|
23119
23712
|
return () => document.removeEventListener("input", onInput, true);
|
|
23120
23713
|
}, [isEditMode, persistFields]);
|
|
23121
|
-
|
|
23714
|
+
useEffect16(() => {
|
|
23122
23715
|
if (isEditMode || fetchState !== "done") return;
|
|
23123
23716
|
const content = contentCache.get(subdomain) ?? {};
|
|
23124
23717
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23125
23718
|
reconcileFieldsFromContent(form, content);
|
|
23126
23719
|
});
|
|
23127
23720
|
}, [isEditMode, fetchState, subdomain]);
|
|
23128
|
-
|
|
23721
|
+
useEffect16(() => {
|
|
23129
23722
|
if (!isEditMode) return;
|
|
23130
23723
|
const swallow = (e) => {
|
|
23131
23724
|
const target = e.target;
|
|
@@ -23134,14 +23727,14 @@ function OhhwellsBridge() {
|
|
|
23134
23727
|
document.addEventListener("submit", swallow, true);
|
|
23135
23728
|
return () => document.removeEventListener("submit", swallow, true);
|
|
23136
23729
|
}, [isEditMode]);
|
|
23137
|
-
|
|
23730
|
+
useEffect16(() => {
|
|
23138
23731
|
if (isEditMode || fetchState !== "done") return;
|
|
23139
23732
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
23140
23733
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
23141
23734
|
console.log({ apiUrl, subdomain });
|
|
23142
23735
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
23143
23736
|
}, [isEditMode, fetchState, subdomain]);
|
|
23144
|
-
|
|
23737
|
+
useEffect16(() => {
|
|
23145
23738
|
if (!subdomain || isEditMode) return;
|
|
23146
23739
|
let debounceTimer = null;
|
|
23147
23740
|
let observer = null;
|
|
@@ -23248,10 +23841,10 @@ function OhhwellsBridge() {
|
|
|
23248
23841
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
23249
23842
|
el.style.display = visible ? "flex" : "none";
|
|
23250
23843
|
}, [subdomain, fetchState]);
|
|
23251
|
-
|
|
23844
|
+
useEffect16(() => {
|
|
23252
23845
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
23253
23846
|
}, [pathname, postToParent2]);
|
|
23254
|
-
|
|
23847
|
+
useEffect16(() => {
|
|
23255
23848
|
if (!subdomain || isEditMode) return;
|
|
23256
23849
|
const content = contentCache.get(subdomain);
|
|
23257
23850
|
if (!content) return;
|
|
@@ -23267,7 +23860,7 @@ function OhhwellsBridge() {
|
|
|
23267
23860
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
23268
23861
|
}
|
|
23269
23862
|
}, [pathname, subdomain, isEditMode]);
|
|
23270
|
-
|
|
23863
|
+
useEffect16(() => {
|
|
23271
23864
|
if (!isEditMode) return;
|
|
23272
23865
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
23273
23866
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -23275,11 +23868,11 @@ function OhhwellsBridge() {
|
|
|
23275
23868
|
deselectRef.current();
|
|
23276
23869
|
deactivateRef.current();
|
|
23277
23870
|
}, [pathname, isEditMode]);
|
|
23278
|
-
|
|
23871
|
+
useEffect16(() => {
|
|
23279
23872
|
if (!isEditMode) return;
|
|
23280
23873
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
23281
23874
|
}, [pathname, isEditMode]);
|
|
23282
|
-
|
|
23875
|
+
useEffect16(() => {
|
|
23283
23876
|
if (!isEditMode) return;
|
|
23284
23877
|
const observer = new MutationObserver(() => {
|
|
23285
23878
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -23290,7 +23883,7 @@ function OhhwellsBridge() {
|
|
|
23290
23883
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
23291
23884
|
return () => observer.disconnect();
|
|
23292
23885
|
}, [isEditMode, pathname]);
|
|
23293
|
-
|
|
23886
|
+
useEffect16(() => {
|
|
23294
23887
|
const contentForNav = () => {
|
|
23295
23888
|
if (isEditMode) return editContentRef.current;
|
|
23296
23889
|
if (!subdomain) return {};
|
|
@@ -23363,7 +23956,7 @@ function OhhwellsBridge() {
|
|
|
23363
23956
|
observer?.disconnect();
|
|
23364
23957
|
};
|
|
23365
23958
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
23366
|
-
|
|
23959
|
+
useEffect16(() => {
|
|
23367
23960
|
if (!isEditMode) return;
|
|
23368
23961
|
let applying = false;
|
|
23369
23962
|
let rafId = null;
|
|
@@ -23401,7 +23994,7 @@ function OhhwellsBridge() {
|
|
|
23401
23994
|
observer.disconnect();
|
|
23402
23995
|
};
|
|
23403
23996
|
}, [isEditMode, pathname]);
|
|
23404
|
-
|
|
23997
|
+
useEffect16(() => {
|
|
23405
23998
|
if (!isEditMode) return;
|
|
23406
23999
|
let lastPosted = 0;
|
|
23407
24000
|
const measure = () => {
|
|
@@ -23445,7 +24038,7 @@ function OhhwellsBridge() {
|
|
|
23445
24038
|
window.removeEventListener("resize", handleResize);
|
|
23446
24039
|
};
|
|
23447
24040
|
}, [pathname, isEditMode, postToParent2]);
|
|
23448
|
-
|
|
24041
|
+
useEffect16(() => {
|
|
23449
24042
|
if (!subdomainFromQuery || isEditMode) return;
|
|
23450
24043
|
const handleClick = (e) => {
|
|
23451
24044
|
const anchor = e.target.closest("a");
|
|
@@ -23461,7 +24054,7 @@ function OhhwellsBridge() {
|
|
|
23461
24054
|
document.addEventListener("click", handleClick, true);
|
|
23462
24055
|
return () => document.removeEventListener("click", handleClick, true);
|
|
23463
24056
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
23464
|
-
|
|
24057
|
+
useEffect16(() => {
|
|
23465
24058
|
if (!isEditMode) {
|
|
23466
24059
|
editStylesRef.current?.base.remove();
|
|
23467
24060
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -23687,11 +24280,11 @@ function OhhwellsBridge() {
|
|
|
23687
24280
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
23688
24281
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
23689
24282
|
outline: none !important;
|
|
23690
|
-
caret-color: ${
|
|
24283
|
+
caret-color: ${PRIMARY6} !important;
|
|
23691
24284
|
cursor: text !important;
|
|
23692
24285
|
}
|
|
23693
24286
|
[data-ohw-editable][contenteditable]::selection,
|
|
23694
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
24287
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY6}59 !important; }
|
|
23695
24288
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
23696
24289
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
23697
24290
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -26580,7 +27173,7 @@ function OhhwellsBridge() {
|
|
|
26580
27173
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
26581
27174
|
};
|
|
26582
27175
|
}, [isEditMode, refreshStateRules]);
|
|
26583
|
-
|
|
27176
|
+
useEffect16(() => {
|
|
26584
27177
|
if (!isEditMode) return;
|
|
26585
27178
|
const THRESHOLD = 10;
|
|
26586
27179
|
const resolveWasSelected = (el) => {
|
|
@@ -26736,7 +27329,7 @@ function OhhwellsBridge() {
|
|
|
26736
27329
|
unlockFooterDragInteraction();
|
|
26737
27330
|
};
|
|
26738
27331
|
}, [isEditMode]);
|
|
26739
|
-
|
|
27332
|
+
useEffect16(() => {
|
|
26740
27333
|
if (!isEditMode) return;
|
|
26741
27334
|
const THRESHOLD = 10;
|
|
26742
27335
|
const onPointerDown = (e) => {
|
|
@@ -26827,7 +27420,7 @@ function OhhwellsBridge() {
|
|
|
26827
27420
|
document.removeEventListener("selectstart", blockSelectStart, true);
|
|
26828
27421
|
};
|
|
26829
27422
|
}, [isEditMode, persistButtonCollectionDrag, refreshButtonDragVisuals]);
|
|
26830
|
-
|
|
27423
|
+
useEffect16(() => {
|
|
26831
27424
|
const handler = (e) => {
|
|
26832
27425
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
26833
27426
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -26843,7 +27436,7 @@ function OhhwellsBridge() {
|
|
|
26843
27436
|
window.addEventListener("message", handler);
|
|
26844
27437
|
return () => window.removeEventListener("message", handler);
|
|
26845
27438
|
}, [processConfigRequest]);
|
|
26846
|
-
|
|
27439
|
+
useEffect16(() => {
|
|
26847
27440
|
if (!isEditMode) return;
|
|
26848
27441
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
26849
27442
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -26867,7 +27460,7 @@ function OhhwellsBridge() {
|
|
|
26867
27460
|
postToParent2({
|
|
26868
27461
|
type: "ow:ready",
|
|
26869
27462
|
version: "1",
|
|
26870
|
-
bridgeVersion: "0.1.
|
|
27463
|
+
bridgeVersion: "0.1.126",
|
|
26871
27464
|
path: pathname,
|
|
26872
27465
|
nodes: collectEditableNodes(editContentRef.current),
|
|
26873
27466
|
sections
|
|
@@ -26879,13 +27472,13 @@ function OhhwellsBridge() {
|
|
|
26879
27472
|
clearTimeout(timer);
|
|
26880
27473
|
};
|
|
26881
27474
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
26882
|
-
|
|
27475
|
+
useEffect16(() => {
|
|
26883
27476
|
scrollToHashSectionWhenReady();
|
|
26884
27477
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
26885
27478
|
window.addEventListener("hashchange", onHashChange);
|
|
26886
27479
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
26887
27480
|
}, [pathname]);
|
|
26888
|
-
const handleCommand =
|
|
27481
|
+
const handleCommand = useCallback11((cmd) => {
|
|
26889
27482
|
const el = activeElRef.current;
|
|
26890
27483
|
const selBefore = window.getSelection();
|
|
26891
27484
|
let savedOffsets = null;
|
|
@@ -26921,7 +27514,7 @@ function OhhwellsBridge() {
|
|
|
26921
27514
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
26922
27515
|
refreshActiveCommandsRef.current();
|
|
26923
27516
|
}, []);
|
|
26924
|
-
|
|
27517
|
+
useEffect16(() => {
|
|
26925
27518
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
26926
27519
|
if (!session || !logoSizeDraft) return;
|
|
26927
27520
|
const onPanelAction = (e) => {
|
|
@@ -26959,7 +27552,7 @@ function OhhwellsBridge() {
|
|
|
26959
27552
|
window.addEventListener("message", onPanelAction);
|
|
26960
27553
|
return () => window.removeEventListener("message", onPanelAction);
|
|
26961
27554
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
26962
|
-
const handleStateChange =
|
|
27555
|
+
const handleStateChange = useCallback11((state) => {
|
|
26963
27556
|
if (!activeStateElRef.current) return;
|
|
26964
27557
|
const el = activeStateElRef.current;
|
|
26965
27558
|
if (state === "Default") {
|
|
@@ -26972,7 +27565,7 @@ function OhhwellsBridge() {
|
|
|
26972
27565
|
}
|
|
26973
27566
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
26974
27567
|
}, [deactivate]);
|
|
26975
|
-
const reselectAfterLinkPopover =
|
|
27568
|
+
const reselectAfterLinkPopover = useCallback11(
|
|
26976
27569
|
(hrefKey) => {
|
|
26977
27570
|
requestAnimationFrame(() => {
|
|
26978
27571
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -26981,7 +27574,7 @@ function OhhwellsBridge() {
|
|
|
26981
27574
|
},
|
|
26982
27575
|
[resolveHrefKeyElement]
|
|
26983
27576
|
);
|
|
26984
|
-
const closeLinkPopover =
|
|
27577
|
+
const closeLinkPopover = useCallback11(() => {
|
|
26985
27578
|
const session = linkPopoverSessionRef.current;
|
|
26986
27579
|
addNavAfterAnchorRef.current = null;
|
|
26987
27580
|
setLinkPopover(null);
|
|
@@ -26989,9 +27582,9 @@ function OhhwellsBridge() {
|
|
|
26989
27582
|
reselectAfterLinkPopover(session.key);
|
|
26990
27583
|
}
|
|
26991
27584
|
}, [reselectAfterLinkPopover]);
|
|
26992
|
-
const closeLinkPopoverRef =
|
|
27585
|
+
const closeLinkPopoverRef = useRef13(closeLinkPopover);
|
|
26993
27586
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
26994
|
-
const openLinkPopoverForActive =
|
|
27587
|
+
const openLinkPopoverForActive = useCallback11(() => {
|
|
26995
27588
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
26996
27589
|
if (!hrefCtx) return;
|
|
26997
27590
|
bumpLinkPopoverGrace();
|
|
@@ -27002,7 +27595,7 @@ function OhhwellsBridge() {
|
|
|
27002
27595
|
});
|
|
27003
27596
|
deactivate();
|
|
27004
27597
|
}, [deactivate]);
|
|
27005
|
-
const openLinkPopoverForSelected =
|
|
27598
|
+
const openLinkPopoverForSelected = useCallback11(() => {
|
|
27006
27599
|
const anchor = selectedElRef.current;
|
|
27007
27600
|
if (!anchor) return;
|
|
27008
27601
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -27019,7 +27612,7 @@ function OhhwellsBridge() {
|
|
|
27019
27612
|
});
|
|
27020
27613
|
deselect();
|
|
27021
27614
|
}, [deselect]);
|
|
27022
|
-
const handleSelectParent =
|
|
27615
|
+
const handleSelectParent = useCallback11(() => {
|
|
27023
27616
|
const selected = selectedElRef.current;
|
|
27024
27617
|
if (!selected) return;
|
|
27025
27618
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -27046,7 +27639,7 @@ function OhhwellsBridge() {
|
|
|
27046
27639
|
}
|
|
27047
27640
|
deselectRef.current();
|
|
27048
27641
|
}, []);
|
|
27049
|
-
const handleDuplicateSelected =
|
|
27642
|
+
const handleDuplicateSelected = useCallback11(() => {
|
|
27050
27643
|
const selected = selectedElRef.current;
|
|
27051
27644
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
27052
27645
|
if (isCtaButton(selected)) {
|
|
@@ -27209,7 +27802,7 @@ function OhhwellsBridge() {
|
|
|
27209
27802
|
});
|
|
27210
27803
|
}
|
|
27211
27804
|
}, [postToParent2, tokensForButton]);
|
|
27212
|
-
const runPendingDeleteUndo =
|
|
27805
|
+
const runPendingDeleteUndo = useCallback11(() => {
|
|
27213
27806
|
const pending = pendingDeleteUndoRef.current;
|
|
27214
27807
|
if (!pending) return false;
|
|
27215
27808
|
pendingDeleteUndoRef.current = null;
|
|
@@ -27217,7 +27810,7 @@ function OhhwellsBridge() {
|
|
|
27217
27810
|
enforceLinkHrefs();
|
|
27218
27811
|
return true;
|
|
27219
27812
|
}, []);
|
|
27220
|
-
const handleDeleteSelected =
|
|
27813
|
+
const handleDeleteSelected = useCallback11(() => {
|
|
27221
27814
|
const selected = selectedElRef.current;
|
|
27222
27815
|
if (!selected) return false;
|
|
27223
27816
|
if (isCtaButton(selected)) {
|
|
@@ -27270,7 +27863,7 @@ function OhhwellsBridge() {
|
|
|
27270
27863
|
}, [postToParent2]);
|
|
27271
27864
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
27272
27865
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
27273
|
-
const handleLinkPopoverSubmit =
|
|
27866
|
+
const handleLinkPopoverSubmit = useCallback11(
|
|
27274
27867
|
(target) => {
|
|
27275
27868
|
const session = linkPopoverSessionRef.current;
|
|
27276
27869
|
if (!session) return;
|
|
@@ -27336,14 +27929,14 @@ function OhhwellsBridge() {
|
|
|
27336
27929
|
const showEditLink = toolbarShowEditLink;
|
|
27337
27930
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
27338
27931
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
27339
|
-
const handleMediaSelect =
|
|
27932
|
+
const handleMediaSelect = useCallback11((key) => {
|
|
27340
27933
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
27341
27934
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
27342
27935
|
) ?? null;
|
|
27343
27936
|
if (!el) return;
|
|
27344
27937
|
selectMediaElementRef.current(el);
|
|
27345
27938
|
}, []);
|
|
27346
|
-
const handleMediaReplace =
|
|
27939
|
+
const handleMediaReplace = useCallback11(
|
|
27347
27940
|
(key) => {
|
|
27348
27941
|
postToParent2({
|
|
27349
27942
|
type: "ow:image-pick",
|
|
@@ -27353,13 +27946,13 @@ function OhhwellsBridge() {
|
|
|
27353
27946
|
},
|
|
27354
27947
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
27355
27948
|
);
|
|
27356
|
-
const handleEditCarousel =
|
|
27949
|
+
const handleEditCarousel = useCallback11(
|
|
27357
27950
|
(key) => {
|
|
27358
27951
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
27359
27952
|
},
|
|
27360
27953
|
[postToParent2]
|
|
27361
27954
|
);
|
|
27362
|
-
const handleMediaFadeOutComplete =
|
|
27955
|
+
const handleMediaFadeOutComplete = useCallback11((key) => {
|
|
27363
27956
|
setUploadingRects((prev) => {
|
|
27364
27957
|
if (!(key in prev)) return prev;
|
|
27365
27958
|
const next = { ...prev };
|
|
@@ -27367,7 +27960,7 @@ function OhhwellsBridge() {
|
|
|
27367
27960
|
return next;
|
|
27368
27961
|
});
|
|
27369
27962
|
}, []);
|
|
27370
|
-
const handleVideoSettingsChange =
|
|
27963
|
+
const handleVideoSettingsChange = useCallback11(
|
|
27371
27964
|
(key, settings) => {
|
|
27372
27965
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
27373
27966
|
const video = getVideoEl2(el);
|
|
@@ -27389,14 +27982,14 @@ function OhhwellsBridge() {
|
|
|
27389
27982
|
},
|
|
27390
27983
|
[postToParent2]
|
|
27391
27984
|
);
|
|
27392
|
-
return /* @__PURE__ */
|
|
27393
|
-
/* @__PURE__ */
|
|
27394
|
-
/* @__PURE__ */
|
|
27395
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */
|
|
27985
|
+
return /* @__PURE__ */ jsxs24(Fragment11, { children: [
|
|
27986
|
+
/* @__PURE__ */ jsx37("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ jsx37(OhwLoaderSpinner, {}) }),
|
|
27987
|
+
/* @__PURE__ */ jsx37("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
27988
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ jsx37(MadeWithOhhWells, {}),
|
|
27396
27989
|
bridgeRoot ? createPortal3(
|
|
27397
|
-
/* @__PURE__ */
|
|
27398
|
-
/* @__PURE__ */
|
|
27399
|
-
isEditMode && /* @__PURE__ */
|
|
27990
|
+
/* @__PURE__ */ jsxs24(Fragment11, { children: [
|
|
27991
|
+
/* @__PURE__ */ jsx37("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
27992
|
+
isEditMode && /* @__PURE__ */ jsx37(
|
|
27400
27993
|
AiSectionOverlay,
|
|
27401
27994
|
{
|
|
27402
27995
|
postToParent: postToParent2,
|
|
@@ -27404,7 +27997,7 @@ function OhhwellsBridge() {
|
|
|
27404
27997
|
onSelectionChange: handleAiSectionSelectionChange
|
|
27405
27998
|
}
|
|
27406
27999
|
),
|
|
27407
|
-
isEditMode && /* @__PURE__ */
|
|
28000
|
+
isEditMode && /* @__PURE__ */ jsx37(
|
|
27408
28001
|
AiMediaStripOverlay,
|
|
27409
28002
|
{
|
|
27410
28003
|
postToParent: postToParent2,
|
|
@@ -27413,7 +28006,7 @@ function OhhwellsBridge() {
|
|
|
27413
28006
|
clearInteractionChromeRef
|
|
27414
28007
|
}
|
|
27415
28008
|
),
|
|
27416
|
-
isEditMode && /* @__PURE__ */
|
|
28009
|
+
isEditMode && /* @__PURE__ */ jsx37(
|
|
27417
28010
|
AiPricingCardOverlay,
|
|
27418
28011
|
{
|
|
27419
28012
|
postToParent: postToParent2,
|
|
@@ -27421,12 +28014,21 @@ function OhhwellsBridge() {
|
|
|
27421
28014
|
applyTreeLocalRef
|
|
27422
28015
|
}
|
|
27423
28016
|
),
|
|
27424
|
-
|
|
28017
|
+
isEditMode && /* @__PURE__ */ jsx37(
|
|
28018
|
+
AiVideoOverlay,
|
|
28019
|
+
{
|
|
28020
|
+
postToParent: postToParent2,
|
|
28021
|
+
aiSectionsRef,
|
|
28022
|
+
applyTreeLocalRef,
|
|
28023
|
+
clearInteractionChromeRef
|
|
28024
|
+
}
|
|
28025
|
+
),
|
|
28026
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ jsx37(
|
|
27425
28027
|
"div",
|
|
27426
28028
|
{
|
|
27427
28029
|
className: "pointer-events-none fixed z-2147483646",
|
|
27428
28030
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
27429
|
-
children: /* @__PURE__ */
|
|
28031
|
+
children: /* @__PURE__ */ jsx37(
|
|
27430
28032
|
DropIndicator,
|
|
27431
28033
|
{
|
|
27432
28034
|
direction: "horizontal",
|
|
@@ -27437,7 +28039,7 @@ function OhhwellsBridge() {
|
|
|
27437
28039
|
},
|
|
27438
28040
|
`section-drop-${slot.insertIndex}-${i}`
|
|
27439
28041
|
)),
|
|
27440
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */
|
|
28042
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx37(
|
|
27441
28043
|
MediaOverlay,
|
|
27442
28044
|
{
|
|
27443
28045
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -27448,7 +28050,7 @@ function OhhwellsBridge() {
|
|
|
27448
28050
|
},
|
|
27449
28051
|
`uploading-${key}`
|
|
27450
28052
|
)),
|
|
27451
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */
|
|
28053
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ jsx37(
|
|
27452
28054
|
MediaOverlay,
|
|
27453
28055
|
{
|
|
27454
28056
|
hover: mediaHover,
|
|
@@ -27459,7 +28061,7 @@ function OhhwellsBridge() {
|
|
|
27459
28061
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27460
28062
|
}
|
|
27461
28063
|
),
|
|
27462
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */
|
|
28064
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ jsx37(
|
|
27463
28065
|
MediaOverlay,
|
|
27464
28066
|
{
|
|
27465
28067
|
hover: selectedMedia,
|
|
@@ -27471,7 +28073,7 @@ function OhhwellsBridge() {
|
|
|
27471
28073
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27472
28074
|
}
|
|
27473
28075
|
),
|
|
27474
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
28076
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx37(
|
|
27475
28077
|
CarouselOverlay,
|
|
27476
28078
|
{
|
|
27477
28079
|
hover: carouselHover,
|
|
@@ -27479,10 +28081,10 @@ function OhhwellsBridge() {
|
|
|
27479
28081
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
27480
28082
|
}
|
|
27481
28083
|
),
|
|
27482
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */
|
|
27483
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */
|
|
27484
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */
|
|
27485
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */
|
|
28084
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ jsx37(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
28085
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ jsx37(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
28086
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ jsx37(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
28087
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ jsx37(
|
|
27486
28088
|
"div",
|
|
27487
28089
|
{
|
|
27488
28090
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27492,7 +28094,7 @@ function OhhwellsBridge() {
|
|
|
27492
28094
|
width: slot.width,
|
|
27493
28095
|
height: slot.height
|
|
27494
28096
|
},
|
|
27495
|
-
children: /* @__PURE__ */
|
|
28097
|
+
children: /* @__PURE__ */ jsx37(
|
|
27496
28098
|
DropIndicator,
|
|
27497
28099
|
{
|
|
27498
28100
|
direction: slot.direction,
|
|
@@ -27503,7 +28105,7 @@ function OhhwellsBridge() {
|
|
|
27503
28105
|
},
|
|
27504
28106
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
27505
28107
|
)),
|
|
27506
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */
|
|
28108
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ jsx37(
|
|
27507
28109
|
"div",
|
|
27508
28110
|
{
|
|
27509
28111
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27513,7 +28115,7 @@ function OhhwellsBridge() {
|
|
|
27513
28115
|
width: slot.width,
|
|
27514
28116
|
height: slot.height
|
|
27515
28117
|
},
|
|
27516
|
-
children: /* @__PURE__ */
|
|
28118
|
+
children: /* @__PURE__ */ jsx37(
|
|
27517
28119
|
DropIndicator,
|
|
27518
28120
|
{
|
|
27519
28121
|
direction: slot.direction,
|
|
@@ -27524,7 +28126,7 @@ function OhhwellsBridge() {
|
|
|
27524
28126
|
},
|
|
27525
28127
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
27526
28128
|
)),
|
|
27527
|
-
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */
|
|
28129
|
+
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ jsx37(
|
|
27528
28130
|
"div",
|
|
27529
28131
|
{
|
|
27530
28132
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27534,7 +28136,7 @@ function OhhwellsBridge() {
|
|
|
27534
28136
|
width: slot.width,
|
|
27535
28137
|
height: slot.height
|
|
27536
28138
|
},
|
|
27537
|
-
children: /* @__PURE__ */
|
|
28139
|
+
children: /* @__PURE__ */ jsx37(
|
|
27538
28140
|
DropIndicator,
|
|
27539
28141
|
{
|
|
27540
28142
|
direction: slot.direction,
|
|
@@ -27545,10 +28147,10 @@ function OhhwellsBridge() {
|
|
|
27545
28147
|
},
|
|
27546
28148
|
`button-drop-${slot.direction}-${slot.insertIndex}-${i}`
|
|
27547
28149
|
)),
|
|
27548
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
27549
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */
|
|
27550
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
27551
|
-
formPickRect && !isItemDragging && /* @__PURE__ */
|
|
28150
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx37(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
28151
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ jsx37(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
28152
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx37(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
28153
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ jsx37(
|
|
27552
28154
|
ItemInteractionLayer,
|
|
27553
28155
|
{
|
|
27554
28156
|
rect: formPickRect,
|
|
@@ -27556,13 +28158,13 @@ function OhhwellsBridge() {
|
|
|
27556
28158
|
itemDragSurface: false,
|
|
27557
28159
|
toolbarAlign: "left",
|
|
27558
28160
|
chromeGap: 24,
|
|
27559
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */
|
|
28161
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ jsxs24(
|
|
27560
28162
|
"div",
|
|
27561
28163
|
{
|
|
27562
28164
|
"data-ohw-form-toolbar": "",
|
|
27563
28165
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
27564
28166
|
children: [
|
|
27565
|
-
/* @__PURE__ */
|
|
28167
|
+
/* @__PURE__ */ jsx37(
|
|
27566
28168
|
"button",
|
|
27567
28169
|
{
|
|
27568
28170
|
type: "button",
|
|
@@ -27570,11 +28172,11 @@ function OhhwellsBridge() {
|
|
|
27570
28172
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
27571
28173
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
27572
28174
|
"data-ohw-add-field": "",
|
|
27573
|
-
children: /* @__PURE__ */
|
|
28175
|
+
children: /* @__PURE__ */ jsx37(Plus4, { size: 15, "aria-hidden": true })
|
|
27574
28176
|
}
|
|
27575
28177
|
),
|
|
27576
|
-
/* @__PURE__ */
|
|
27577
|
-
/* @__PURE__ */
|
|
28178
|
+
/* @__PURE__ */ jsx37("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
28179
|
+
/* @__PURE__ */ jsxs24(
|
|
27578
28180
|
"button",
|
|
27579
28181
|
{
|
|
27580
28182
|
type: "button",
|
|
@@ -27590,11 +28192,11 @@ function OhhwellsBridge() {
|
|
|
27590
28192
|
});
|
|
27591
28193
|
},
|
|
27592
28194
|
children: [
|
|
27593
|
-
/* @__PURE__ */
|
|
28195
|
+
/* @__PURE__ */ jsx37(Settings, { size: 14, "aria-hidden": true }),
|
|
27594
28196
|
"Form settings",
|
|
27595
28197
|
formPickCount ? (
|
|
27596
28198
|
// Counter pill, per the design — not a text suffix.
|
|
27597
|
-
/* @__PURE__ */
|
|
28199
|
+
/* @__PURE__ */ jsx37(
|
|
27598
28200
|
"span",
|
|
27599
28201
|
{
|
|
27600
28202
|
"data-ohw-form-count": "",
|
|
@@ -27606,8 +28208,8 @@ function OhhwellsBridge() {
|
|
|
27606
28208
|
]
|
|
27607
28209
|
}
|
|
27608
28210
|
),
|
|
27609
|
-
/* @__PURE__ */
|
|
27610
|
-
/* @__PURE__ */
|
|
28211
|
+
/* @__PURE__ */ jsx37("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
28212
|
+
/* @__PURE__ */ jsx37("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ jsx37(
|
|
27611
28213
|
"button",
|
|
27612
28214
|
{
|
|
27613
28215
|
type: "button",
|
|
@@ -27638,7 +28240,7 @@ function OhhwellsBridge() {
|
|
|
27638
28240
|
)
|
|
27639
28241
|
}
|
|
27640
28242
|
),
|
|
27641
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */
|
|
28243
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ jsx37(
|
|
27642
28244
|
ItemInteractionLayer,
|
|
27643
28245
|
{
|
|
27644
28246
|
rect: formHoverRect,
|
|
@@ -27646,7 +28248,7 @@ function OhhwellsBridge() {
|
|
|
27646
28248
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
27647
28249
|
}
|
|
27648
28250
|
),
|
|
27649
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
28251
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx37(
|
|
27650
28252
|
ItemInteractionLayer,
|
|
27651
28253
|
{
|
|
27652
28254
|
rect: fieldPickRect,
|
|
@@ -27658,7 +28260,7 @@ function OhhwellsBridge() {
|
|
|
27658
28260
|
dragHandleLabel: "Reorder field",
|
|
27659
28261
|
onDragHandleDragStart: handleFieldDragStart,
|
|
27660
28262
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
27661
|
-
toolbar: /* @__PURE__ */
|
|
28263
|
+
toolbar: /* @__PURE__ */ jsx37(
|
|
27662
28264
|
FormFieldToolbar,
|
|
27663
28265
|
{
|
|
27664
28266
|
type: fieldPickState.type,
|
|
@@ -27671,12 +28273,12 @@ function OhhwellsBridge() {
|
|
|
27671
28273
|
)
|
|
27672
28274
|
}
|
|
27673
28275
|
),
|
|
27674
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */
|
|
28276
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ jsx37(
|
|
27675
28277
|
"div",
|
|
27676
28278
|
{
|
|
27677
28279
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
27678
28280
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
27679
|
-
children: /* @__PURE__ */
|
|
28281
|
+
children: /* @__PURE__ */ jsx37(
|
|
27680
28282
|
DropIndicator,
|
|
27681
28283
|
{
|
|
27682
28284
|
direction: "horizontal",
|
|
@@ -27689,7 +28291,7 @@ function OhhwellsBridge() {
|
|
|
27689
28291
|
)) : null,
|
|
27690
28292
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
27691
28293
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
27692
|
-
return /* @__PURE__ */
|
|
28294
|
+
return /* @__PURE__ */ jsx37(
|
|
27693
28295
|
"div",
|
|
27694
28296
|
{
|
|
27695
28297
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -27697,12 +28299,12 @@ function OhhwellsBridge() {
|
|
|
27697
28299
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
27698
28300
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
27699
28301
|
},
|
|
27700
|
-
children: /* @__PURE__ */
|
|
28302
|
+
children: /* @__PURE__ */ jsx37(FieldTypePicker, { onPick: handleAddField })
|
|
27701
28303
|
}
|
|
27702
28304
|
);
|
|
27703
28305
|
})() : null,
|
|
27704
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */
|
|
27705
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */
|
|
28306
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ jsx37(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
28307
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ jsx37(
|
|
27706
28308
|
FooterContainerChrome,
|
|
27707
28309
|
{
|
|
27708
28310
|
rect: toolbarRect,
|
|
@@ -27710,7 +28312,7 @@ function OhhwellsBridge() {
|
|
|
27710
28312
|
addDisabled: !canAddFooterColumn()
|
|
27711
28313
|
}
|
|
27712
28314
|
),
|
|
27713
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */
|
|
28315
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ jsx37(
|
|
27714
28316
|
ItemInteractionLayer,
|
|
27715
28317
|
{
|
|
27716
28318
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
|
|
@@ -27730,7 +28332,7 @@ function OhhwellsBridge() {
|
|
|
27730
28332
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
27731
28333
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
27732
28334
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
27733
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */
|
|
28335
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ jsx37(
|
|
27734
28336
|
ItemActionToolbar,
|
|
27735
28337
|
{
|
|
27736
28338
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -27781,8 +28383,8 @@ function OhhwellsBridge() {
|
|
|
27781
28383
|
) : void 0
|
|
27782
28384
|
}
|
|
27783
28385
|
),
|
|
27784
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */
|
|
27785
|
-
/* @__PURE__ */
|
|
28386
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ jsxs24(Fragment11, { children: [
|
|
28387
|
+
/* @__PURE__ */ jsx37(
|
|
27786
28388
|
EditGlowChrome,
|
|
27787
28389
|
{
|
|
27788
28390
|
rect: toolbarRect,
|
|
@@ -27792,7 +28394,7 @@ function OhhwellsBridge() {
|
|
|
27792
28394
|
hideHandle: isItemDragging
|
|
27793
28395
|
}
|
|
27794
28396
|
),
|
|
27795
|
-
/* @__PURE__ */
|
|
28397
|
+
/* @__PURE__ */ jsx37(
|
|
27796
28398
|
FloatingToolbar,
|
|
27797
28399
|
{
|
|
27798
28400
|
rect: toolbarRect,
|
|
@@ -27805,7 +28407,7 @@ function OhhwellsBridge() {
|
|
|
27805
28407
|
}
|
|
27806
28408
|
)
|
|
27807
28409
|
] }),
|
|
27808
|
-
maxBadge && /* @__PURE__ */
|
|
28410
|
+
maxBadge && /* @__PURE__ */ jsxs24(
|
|
27809
28411
|
"div",
|
|
27810
28412
|
{
|
|
27811
28413
|
"data-ohw-max-badge": "",
|
|
@@ -27831,7 +28433,7 @@ function OhhwellsBridge() {
|
|
|
27831
28433
|
]
|
|
27832
28434
|
}
|
|
27833
28435
|
),
|
|
27834
|
-
toggleState && !linkPopover && /* @__PURE__ */
|
|
28436
|
+
toggleState && !linkPopover && /* @__PURE__ */ jsx37(
|
|
27835
28437
|
StateToggle,
|
|
27836
28438
|
{
|
|
27837
28439
|
rect: toggleState.rect,
|
|
@@ -27840,15 +28442,15 @@ function OhhwellsBridge() {
|
|
|
27840
28442
|
onStateChange: handleStateChange
|
|
27841
28443
|
}
|
|
27842
28444
|
),
|
|
27843
|
-
sectionGap && !linkPopover && /* @__PURE__ */
|
|
28445
|
+
sectionGap && !linkPopover && /* @__PURE__ */ jsxs24(
|
|
27844
28446
|
"div",
|
|
27845
28447
|
{
|
|
27846
28448
|
"data-ohw-section-insert-line": "",
|
|
27847
28449
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
27848
28450
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
27849
28451
|
children: [
|
|
27850
|
-
/* @__PURE__ */
|
|
27851
|
-
/* @__PURE__ */
|
|
28452
|
+
/* @__PURE__ */ jsx37("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
28453
|
+
/* @__PURE__ */ jsx37(
|
|
27852
28454
|
Badge,
|
|
27853
28455
|
{
|
|
27854
28456
|
className: "px-8 py-1 bg-bridge-primary hover:bg-bridge-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
|
|
@@ -27865,11 +28467,11 @@ function OhhwellsBridge() {
|
|
|
27865
28467
|
children: "Add Section"
|
|
27866
28468
|
}
|
|
27867
28469
|
),
|
|
27868
|
-
/* @__PURE__ */
|
|
28470
|
+
/* @__PURE__ */ jsx37("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
27869
28471
|
]
|
|
27870
28472
|
}
|
|
27871
28473
|
),
|
|
27872
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */
|
|
28474
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx37(
|
|
27873
28475
|
LinkPopover,
|
|
27874
28476
|
{
|
|
27875
28477
|
panelRef: linkPopoverPanelRef,
|
|
@@ -27886,7 +28488,7 @@ function OhhwellsBridge() {
|
|
|
27886
28488
|
},
|
|
27887
28489
|
linkPopover.key
|
|
27888
28490
|
) : null,
|
|
27889
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */
|
|
28491
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ jsx37(
|
|
27890
28492
|
FloatingPanel,
|
|
27891
28493
|
{
|
|
27892
28494
|
open: true,
|
|
@@ -27896,7 +28498,7 @@ function OhhwellsBridge() {
|
|
|
27896
28498
|
onPositionChange: setFloatingPanelPos,
|
|
27897
28499
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27898
28500
|
onClose: closeFloatingPanelOnly,
|
|
27899
|
-
children: /* @__PURE__ */
|
|
28501
|
+
children: /* @__PURE__ */ jsx37(
|
|
27900
28502
|
SocialsDisplayPanel,
|
|
27901
28503
|
{
|
|
27902
28504
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|
|
@@ -27917,19 +28519,19 @@ function OhhwellsBridge() {
|
|
|
27917
28519
|
const tokens = tokensFromButton(button);
|
|
27918
28520
|
const current = assignmentFor(button, editContentRef.current, tokens);
|
|
27919
28521
|
void buttonStyleTick;
|
|
27920
|
-
return /* @__PURE__ */
|
|
28522
|
+
return /* @__PURE__ */ jsx37(
|
|
27921
28523
|
FloatingPanel,
|
|
27922
28524
|
{
|
|
27923
28525
|
open: true,
|
|
27924
28526
|
title: floatingPanel.title,
|
|
27925
28527
|
context: floatingPanel.context,
|
|
27926
|
-
icon: /* @__PURE__ */
|
|
28528
|
+
icon: /* @__PURE__ */ jsx37(Brush2, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
27927
28529
|
position: floatingPanelPos,
|
|
27928
28530
|
onPositionChange: setFloatingPanelPos,
|
|
27929
28531
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27930
28532
|
onClose: closeFloatingPanelOnly,
|
|
27931
28533
|
bodyClassName: "gap-5",
|
|
27932
|
-
children: /* @__PURE__ */
|
|
28534
|
+
children: /* @__PURE__ */ jsx37(
|
|
27933
28535
|
ButtonStylePanel,
|
|
27934
28536
|
{
|
|
27935
28537
|
variants: tokens.variants,
|
|
@@ -27957,10 +28559,10 @@ function OhhwellsBridge() {
|
|
|
27957
28559
|
|
|
27958
28560
|
// src/ui/EmptySection.tsx
|
|
27959
28561
|
import Link3 from "next/link";
|
|
27960
|
-
import { Fragment as
|
|
28562
|
+
import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
27961
28563
|
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
27962
|
-
return /* @__PURE__ */
|
|
27963
|
-
/* @__PURE__ */
|
|
28564
|
+
return /* @__PURE__ */ jsxs25(Fragment12, { children: [
|
|
28565
|
+
/* @__PURE__ */ jsx38(
|
|
27964
28566
|
"p",
|
|
27965
28567
|
{
|
|
27966
28568
|
style: {
|
|
@@ -27972,10 +28574,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
27972
28574
|
color: "var(--brand-accent)",
|
|
27973
28575
|
marginBottom: "1.5rem"
|
|
27974
28576
|
},
|
|
27975
|
-
children: /* @__PURE__ */
|
|
28577
|
+
children: /* @__PURE__ */ jsx38(Link3, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ jsx38("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
|
|
27976
28578
|
}
|
|
27977
28579
|
),
|
|
27978
|
-
/* @__PURE__ */
|
|
28580
|
+
/* @__PURE__ */ jsx38(
|
|
27979
28581
|
"h1",
|
|
27980
28582
|
{
|
|
27981
28583
|
style: {
|
|
@@ -27990,7 +28592,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
27990
28592
|
children: title
|
|
27991
28593
|
}
|
|
27992
28594
|
),
|
|
27993
|
-
/* @__PURE__ */
|
|
28595
|
+
/* @__PURE__ */ jsx38(
|
|
27994
28596
|
"p",
|
|
27995
28597
|
{
|
|
27996
28598
|
style: {
|