@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.cjs
CHANGED
|
@@ -75,7 +75,7 @@ __export(index_exports, {
|
|
|
75
75
|
module.exports = __toCommonJS(index_exports);
|
|
76
76
|
|
|
77
77
|
// src/OhhwellsBridge.tsx
|
|
78
|
-
var
|
|
78
|
+
var import_react20 = __toESM(require("react"), 1);
|
|
79
79
|
var import_client2 = require("react-dom/client");
|
|
80
80
|
var import_react_dom4 = require("react-dom");
|
|
81
81
|
|
|
@@ -1861,6 +1861,117 @@ function MediaBox({
|
|
|
1861
1861
|
}
|
|
1862
1862
|
);
|
|
1863
1863
|
}
|
|
1864
|
+
function VideoEmbed({ slots, ctx, path }) {
|
|
1865
|
+
const [playing, setPlaying] = import_react.default.useState(false);
|
|
1866
|
+
const videoId = str(slots.videoId);
|
|
1867
|
+
const caption = str(slots.caption);
|
|
1868
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing3 }, children: [
|
|
1869
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1870
|
+
"div",
|
|
1871
|
+
{
|
|
1872
|
+
"data-ohw-video-block": "",
|
|
1873
|
+
"data-ohw-video-path": path,
|
|
1874
|
+
style: {
|
|
1875
|
+
position: "relative",
|
|
1876
|
+
width: "100%",
|
|
1877
|
+
aspectRatio: "16 / 9",
|
|
1878
|
+
// Floor so YouTube's own control chrome (volume tooltip, CC, related-videos
|
|
1879
|
+
// overlay) has enough room on narrow mobile widths — 16:9 alone can shrink
|
|
1880
|
+
// below what that fixed-size chrome needs and it starts clipping.
|
|
1881
|
+
minHeight: 250,
|
|
1882
|
+
borderRadius: AI_TREE_TOKENS.radiusCard,
|
|
1883
|
+
overflow: "hidden",
|
|
1884
|
+
background: "#DBEAFE"
|
|
1885
|
+
},
|
|
1886
|
+
children: !videoId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1887
|
+
"div",
|
|
1888
|
+
{
|
|
1889
|
+
style: {
|
|
1890
|
+
position: "absolute",
|
|
1891
|
+
inset: 0,
|
|
1892
|
+
display: "flex",
|
|
1893
|
+
alignItems: "center",
|
|
1894
|
+
justifyContent: "center",
|
|
1895
|
+
color: "#93C5FD",
|
|
1896
|
+
fontSize: 13
|
|
1897
|
+
},
|
|
1898
|
+
children: "video"
|
|
1899
|
+
}
|
|
1900
|
+
) : playing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1901
|
+
"iframe",
|
|
1902
|
+
{
|
|
1903
|
+
src: `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1&rel=0`,
|
|
1904
|
+
title: caption || "YouTube video",
|
|
1905
|
+
style: { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 },
|
|
1906
|
+
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture",
|
|
1907
|
+
allowFullScreen: true,
|
|
1908
|
+
sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox",
|
|
1909
|
+
loading: "lazy"
|
|
1910
|
+
}
|
|
1911
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
1912
|
+
"button",
|
|
1913
|
+
{
|
|
1914
|
+
type: "button",
|
|
1915
|
+
onClick: () => setPlaying(true),
|
|
1916
|
+
"aria-label": "Play video",
|
|
1917
|
+
style: {
|
|
1918
|
+
position: "absolute",
|
|
1919
|
+
inset: 0,
|
|
1920
|
+
width: "100%",
|
|
1921
|
+
height: "100%",
|
|
1922
|
+
border: 0,
|
|
1923
|
+
padding: 0,
|
|
1924
|
+
margin: 0,
|
|
1925
|
+
cursor: "pointer",
|
|
1926
|
+
background: "none"
|
|
1927
|
+
},
|
|
1928
|
+
children: [
|
|
1929
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1930
|
+
"img",
|
|
1931
|
+
{
|
|
1932
|
+
src: `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
|
|
1933
|
+
alt: "",
|
|
1934
|
+
style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
|
|
1935
|
+
}
|
|
1936
|
+
),
|
|
1937
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1938
|
+
"span",
|
|
1939
|
+
{
|
|
1940
|
+
style: {
|
|
1941
|
+
position: "absolute",
|
|
1942
|
+
top: "50%",
|
|
1943
|
+
left: "50%",
|
|
1944
|
+
transform: "translate(-50%, -50%)",
|
|
1945
|
+
width: 64,
|
|
1946
|
+
height: 64,
|
|
1947
|
+
borderRadius: "50%",
|
|
1948
|
+
background: "rgba(0,0,0,0.65)",
|
|
1949
|
+
display: "flex",
|
|
1950
|
+
alignItems: "center",
|
|
1951
|
+
justifyContent: "center"
|
|
1952
|
+
},
|
|
1953
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Play, { size: 28, color: "#fff", fill: "#fff" })
|
|
1954
|
+
}
|
|
1955
|
+
)
|
|
1956
|
+
]
|
|
1957
|
+
}
|
|
1958
|
+
)
|
|
1959
|
+
}
|
|
1960
|
+
),
|
|
1961
|
+
caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1962
|
+
"div",
|
|
1963
|
+
{
|
|
1964
|
+
...textAttrs(ctx, `${path}.caption`),
|
|
1965
|
+
style: {
|
|
1966
|
+
...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body),
|
|
1967
|
+
color: ctx.brand.palette.dark,
|
|
1968
|
+
textAlign: "center"
|
|
1969
|
+
},
|
|
1970
|
+
children: caption
|
|
1971
|
+
}
|
|
1972
|
+
)
|
|
1973
|
+
] });
|
|
1974
|
+
}
|
|
1864
1975
|
function ButtonEl({
|
|
1865
1976
|
slots,
|
|
1866
1977
|
ctx,
|
|
@@ -2941,6 +3052,8 @@ function renderNode(node, ctx, path) {
|
|
|
2941
3052
|
editPath: `${path}.source`
|
|
2942
3053
|
}
|
|
2943
3054
|
);
|
|
3055
|
+
case "video":
|
|
3056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoEmbed, { slots, ctx, path });
|
|
2944
3057
|
case "media-list": {
|
|
2945
3058
|
const stacked = slots.layout === "stack";
|
|
2946
3059
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: stacked ? 0 : AI_TREE_TOKENS.spacing3 }, children: (node.children ?? []).map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -11296,49 +11409,539 @@ function PricingCardToolbar({
|
|
|
11296
11409
|
}
|
|
11297
11410
|
);
|
|
11298
11411
|
}
|
|
11299
|
-
function findPricingCardNode(tree, index) {
|
|
11300
|
-
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
11301
|
-
while (stack.length) {
|
|
11302
|
-
const node = stack.shift();
|
|
11303
|
-
if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
|
|
11304
|
-
return node.children[index] ?? null;
|
|
11305
|
-
}
|
|
11306
|
-
if (node.children) stack.push(...node.children);
|
|
11307
|
-
}
|
|
11308
|
-
return null;
|
|
11309
|
-
}
|
|
11310
|
-
function AiPricingCardOverlay({
|
|
11412
|
+
function findPricingCardNode(tree, index) {
|
|
11413
|
+
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
11414
|
+
while (stack.length) {
|
|
11415
|
+
const node = stack.shift();
|
|
11416
|
+
if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
|
|
11417
|
+
return node.children[index] ?? null;
|
|
11418
|
+
}
|
|
11419
|
+
if (node.children) stack.push(...node.children);
|
|
11420
|
+
}
|
|
11421
|
+
return null;
|
|
11422
|
+
}
|
|
11423
|
+
function AiPricingCardOverlay({
|
|
11424
|
+
postToParent: postToParent2,
|
|
11425
|
+
aiSectionsRef,
|
|
11426
|
+
applyTreeLocalRef
|
|
11427
|
+
}) {
|
|
11428
|
+
const [hover, setHover] = (0, import_react10.useState)(null);
|
|
11429
|
+
const [active, setActive] = (0, import_react10.useState)(null);
|
|
11430
|
+
const [pending, setPending] = (0, import_react10.useState)(false);
|
|
11431
|
+
const [error, setError] = (0, import_react10.useState)(null);
|
|
11432
|
+
const activeRef = (0, import_react10.useRef)(null);
|
|
11433
|
+
activeRef.current = active;
|
|
11434
|
+
(0, import_react10.useEffect)(() => {
|
|
11435
|
+
const onMove = (e) => {
|
|
11436
|
+
const t = e.target;
|
|
11437
|
+
if (!(t instanceof HTMLElement)) return;
|
|
11438
|
+
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]")) {
|
|
11439
|
+
return;
|
|
11440
|
+
}
|
|
11441
|
+
const cardEl = t.closest("[data-ohw-pricing-card]");
|
|
11442
|
+
if (!cardEl) {
|
|
11443
|
+
setHover(null);
|
|
11444
|
+
return;
|
|
11445
|
+
}
|
|
11446
|
+
const sectionEl = cardEl.closest("[data-ohw-section]");
|
|
11447
|
+
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
11448
|
+
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
11449
|
+
const index = Number(cardEl.dataset.ohwPricingIndex);
|
|
11450
|
+
if (!sectionId || Number.isNaN(index)) {
|
|
11451
|
+
setHover(null);
|
|
11452
|
+
return;
|
|
11453
|
+
}
|
|
11454
|
+
setHover({ sectionId, index });
|
|
11455
|
+
};
|
|
11456
|
+
const onLeave = () => setHover(null);
|
|
11457
|
+
document.addEventListener("mousemove", onMove, { passive: true });
|
|
11458
|
+
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
11459
|
+
return () => {
|
|
11460
|
+
document.removeEventListener("mousemove", onMove);
|
|
11461
|
+
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
11462
|
+
};
|
|
11463
|
+
}, []);
|
|
11464
|
+
(0, import_react10.useEffect)(() => {
|
|
11465
|
+
const onClick = (e) => {
|
|
11466
|
+
const current = activeRef.current;
|
|
11467
|
+
if (!current) return;
|
|
11468
|
+
const t = e.target;
|
|
11469
|
+
if (!(t instanceof HTMLElement)) return;
|
|
11470
|
+
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
11471
|
+
const cardEl = findPricingCardElement(current.sectionId, current.index);
|
|
11472
|
+
if (cardEl && cardEl.contains(t)) return;
|
|
11473
|
+
setActive(null);
|
|
11474
|
+
setError(null);
|
|
11475
|
+
};
|
|
11476
|
+
document.addEventListener("click", onClick, true);
|
|
11477
|
+
return () => document.removeEventListener("click", onClick, true);
|
|
11478
|
+
}, []);
|
|
11479
|
+
(0, import_react10.useEffect)(() => {
|
|
11480
|
+
const onBlur = () => {
|
|
11481
|
+
if (!activeRef.current) return;
|
|
11482
|
+
setActive(null);
|
|
11483
|
+
setError(null);
|
|
11484
|
+
};
|
|
11485
|
+
window.addEventListener("blur", onBlur);
|
|
11486
|
+
return () => window.removeEventListener("blur", onBlur);
|
|
11487
|
+
}, []);
|
|
11488
|
+
(0, import_react10.useEffect)(() => {
|
|
11489
|
+
const onKeyDown = (e) => {
|
|
11490
|
+
if (e.key !== "Escape") return;
|
|
11491
|
+
if (!activeRef.current) return;
|
|
11492
|
+
setActive(null);
|
|
11493
|
+
setError(null);
|
|
11494
|
+
};
|
|
11495
|
+
document.addEventListener("keydown", onKeyDown);
|
|
11496
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
11497
|
+
}, []);
|
|
11498
|
+
const findEntry = (0, import_react10.useCallback)(
|
|
11499
|
+
(sectionId) => {
|
|
11500
|
+
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
11501
|
+
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
11502
|
+
},
|
|
11503
|
+
[aiSectionsRef]
|
|
11504
|
+
);
|
|
11505
|
+
const runMutation = (0, import_react10.useCallback)(
|
|
11506
|
+
async (sectionId, mutate) => {
|
|
11507
|
+
const entry = findEntry(sectionId);
|
|
11508
|
+
if (!entry) return false;
|
|
11509
|
+
const nextTree = mutate(entry.tree);
|
|
11510
|
+
if (!nextTree) return false;
|
|
11511
|
+
setPending(true);
|
|
11512
|
+
setError(null);
|
|
11513
|
+
const { ok, reasons } = await requestValidateTree2(postToParent2, nextTree);
|
|
11514
|
+
setPending(false);
|
|
11515
|
+
if (!ok) {
|
|
11516
|
+
setError(reasons[0] ?? "That change is not allowed.");
|
|
11517
|
+
return false;
|
|
11518
|
+
}
|
|
11519
|
+
applyTreeLocalRef.current?.({
|
|
11520
|
+
id: sectionId,
|
|
11521
|
+
mode: "replace",
|
|
11522
|
+
targetSectionId: sectionId,
|
|
11523
|
+
tree: nextTree,
|
|
11524
|
+
label: entry.label,
|
|
11525
|
+
media: entry.media,
|
|
11526
|
+
...entry.brand ? { brand: entry.brand } : {},
|
|
11527
|
+
// The user is already looking at the card they just edited — recentering the
|
|
11528
|
+
// viewport on every tier add/remove/toggle reads as the section jumping around.
|
|
11529
|
+
skipScrollIntoView: true
|
|
11530
|
+
});
|
|
11531
|
+
return true;
|
|
11532
|
+
},
|
|
11533
|
+
[findEntry, postToParent2, applyTreeLocalRef]
|
|
11534
|
+
);
|
|
11535
|
+
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
11536
|
+
const activeCardRect = useLiveCardRect(active);
|
|
11537
|
+
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
11538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
11539
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11540
|
+
"button",
|
|
11541
|
+
{
|
|
11542
|
+
type: "button",
|
|
11543
|
+
"data-ohw-toolbar": "",
|
|
11544
|
+
onClick: () => setActive(hover),
|
|
11545
|
+
"aria-label": "Configure pricing tier",
|
|
11546
|
+
style: {
|
|
11547
|
+
position: "fixed",
|
|
11548
|
+
top: hoverHandleRect.top + 8,
|
|
11549
|
+
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
11550
|
+
width: 28,
|
|
11551
|
+
height: 28,
|
|
11552
|
+
borderRadius: 8,
|
|
11553
|
+
border: `1.5px dashed ${PRIMARY4}`,
|
|
11554
|
+
background: "#ffffff",
|
|
11555
|
+
color: PRIMARY4,
|
|
11556
|
+
display: "flex",
|
|
11557
|
+
alignItems: "center",
|
|
11558
|
+
justifyContent: "center",
|
|
11559
|
+
cursor: "pointer",
|
|
11560
|
+
zIndex: 2147483643,
|
|
11561
|
+
fontSize: 14,
|
|
11562
|
+
fontWeight: 700
|
|
11563
|
+
},
|
|
11564
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
11565
|
+
}
|
|
11566
|
+
),
|
|
11567
|
+
activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11568
|
+
ItemInteractionLayer,
|
|
11569
|
+
{
|
|
11570
|
+
rect: activeCardRect,
|
|
11571
|
+
state: "active-top",
|
|
11572
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11573
|
+
PricingCardToolbar,
|
|
11574
|
+
{
|
|
11575
|
+
entry: activeEntry,
|
|
11576
|
+
index: active.index,
|
|
11577
|
+
pending,
|
|
11578
|
+
error,
|
|
11579
|
+
onAddTier: () => runMutation(active.sectionId, addPricingTier),
|
|
11580
|
+
onRemoveTier: () => {
|
|
11581
|
+
void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
|
|
11582
|
+
(applied) => {
|
|
11583
|
+
if (applied) setActive(null);
|
|
11584
|
+
}
|
|
11585
|
+
);
|
|
11586
|
+
},
|
|
11587
|
+
onToggleFeatured: (enabled) => runMutation(
|
|
11588
|
+
active.sectionId,
|
|
11589
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled })
|
|
11590
|
+
),
|
|
11591
|
+
onSetTreatment: (treatment) => runMutation(
|
|
11592
|
+
active.sectionId,
|
|
11593
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
11594
|
+
),
|
|
11595
|
+
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
11596
|
+
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
11597
|
+
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
11598
|
+
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
11599
|
+
}
|
|
11600
|
+
)
|
|
11601
|
+
}
|
|
11602
|
+
)
|
|
11603
|
+
] });
|
|
11604
|
+
}
|
|
11605
|
+
|
|
11606
|
+
// src/ui/ai-section/AiVideoOverlay.tsx
|
|
11607
|
+
var import_react11 = require("react");
|
|
11608
|
+
var import_lucide_react10 = require("lucide-react");
|
|
11609
|
+
|
|
11610
|
+
// src/lib/ai-video-tree.ts
|
|
11611
|
+
function resolveVideoBlock(tree, path) {
|
|
11612
|
+
const segments = path.split(".");
|
|
11613
|
+
const rowSeg = segments[0];
|
|
11614
|
+
const blockSeg = segments[1];
|
|
11615
|
+
if (!rowSeg?.startsWith("r") || !blockSeg?.startsWith("b")) return null;
|
|
11616
|
+
let node = tree.rows[Number(rowSeg.slice(1))]?.blocks[Number(blockSeg.slice(1))];
|
|
11617
|
+
for (const seg of segments.slice(2)) {
|
|
11618
|
+
if (!node || !seg.startsWith("c")) return null;
|
|
11619
|
+
node = node.children?.[Number(seg.slice(1))];
|
|
11620
|
+
}
|
|
11621
|
+
return node && node.type === "video" ? node : null;
|
|
11622
|
+
}
|
|
11623
|
+
function withVideo(tree, path, mutate) {
|
|
11624
|
+
const next = JSON.parse(JSON.stringify(tree));
|
|
11625
|
+
const block = resolveVideoBlock(next, path);
|
|
11626
|
+
if (!block) return null;
|
|
11627
|
+
block.slots = block.slots ?? {};
|
|
11628
|
+
return mutate(block) ? next : null;
|
|
11629
|
+
}
|
|
11630
|
+
function videoIdAt(tree, path) {
|
|
11631
|
+
const block = resolveVideoBlock(tree, path);
|
|
11632
|
+
const id = block?.slots?.videoId;
|
|
11633
|
+
return typeof id === "string" ? id : "";
|
|
11634
|
+
}
|
|
11635
|
+
function setVideoId(tree, path, videoId) {
|
|
11636
|
+
return withVideo(tree, path, (block) => {
|
|
11637
|
+
block.slots = { ...block.slots, videoId };
|
|
11638
|
+
return true;
|
|
11639
|
+
});
|
|
11640
|
+
}
|
|
11641
|
+
function clearVideo(tree, path) {
|
|
11642
|
+
return withVideo(tree, path, (block) => {
|
|
11643
|
+
const slots = { ...block.slots };
|
|
11644
|
+
delete slots.videoId;
|
|
11645
|
+
block.slots = slots;
|
|
11646
|
+
return true;
|
|
11647
|
+
});
|
|
11648
|
+
}
|
|
11649
|
+
|
|
11650
|
+
// src/lib/youtube.ts
|
|
11651
|
+
var YOUTUBE_ID_PATTERN = /^[A-Za-z0-9_-]{11}$/;
|
|
11652
|
+
function extractYouTubeId(input) {
|
|
11653
|
+
const trimmed = input.trim();
|
|
11654
|
+
if (!trimmed) return null;
|
|
11655
|
+
if (YOUTUBE_ID_PATTERN.test(trimmed)) return trimmed;
|
|
11656
|
+
let url;
|
|
11657
|
+
try {
|
|
11658
|
+
url = new URL(trimmed);
|
|
11659
|
+
} catch {
|
|
11660
|
+
return null;
|
|
11661
|
+
}
|
|
11662
|
+
const host = url.hostname.replace(/^www\./, "");
|
|
11663
|
+
if (host !== "youtube.com" && host !== "m.youtube.com" && host !== "youtu.be" && host !== "youtube-nocookie.com") {
|
|
11664
|
+
return null;
|
|
11665
|
+
}
|
|
11666
|
+
let candidate = null;
|
|
11667
|
+
if (host === "youtu.be") {
|
|
11668
|
+
candidate = url.pathname.slice(1).split("/")[0] ?? null;
|
|
11669
|
+
} else if (url.pathname === "/watch") {
|
|
11670
|
+
candidate = url.searchParams.get("v");
|
|
11671
|
+
} else {
|
|
11672
|
+
const match = url.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/);
|
|
11673
|
+
candidate = match ? match[1] : null;
|
|
11674
|
+
}
|
|
11675
|
+
return candidate && YOUTUBE_ID_PATTERN.test(candidate) ? candidate : null;
|
|
11676
|
+
}
|
|
11677
|
+
|
|
11678
|
+
// src/ui/ai-section/AiVideoOverlay.tsx
|
|
11679
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
11680
|
+
var PRIMARY5 = "#0885FE";
|
|
11681
|
+
var OHW_BLUE3 = `var(--ohw-primary, ${PRIMARY5})`;
|
|
11682
|
+
var OHW_BLUE_DARK3 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY5}) 60%, #000000)`;
|
|
11683
|
+
function findVideoBlockElement(sectionId, path) {
|
|
11684
|
+
const sectionEl = findByInstanceId(sectionId);
|
|
11685
|
+
if (!sectionEl) return null;
|
|
11686
|
+
const items = sectionEl.querySelectorAll("[data-ohw-video-block]");
|
|
11687
|
+
for (const el of Array.from(items)) {
|
|
11688
|
+
if (el.dataset.ohwVideoPath === path) return el;
|
|
11689
|
+
}
|
|
11690
|
+
return null;
|
|
11691
|
+
}
|
|
11692
|
+
function readRect4(ref) {
|
|
11693
|
+
const el = ref && findVideoBlockElement(ref.sectionId, ref.path);
|
|
11694
|
+
if (!el) return null;
|
|
11695
|
+
const r2 = el.getBoundingClientRect();
|
|
11696
|
+
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
11697
|
+
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
11698
|
+
}
|
|
11699
|
+
function useLiveBlockRect(ref) {
|
|
11700
|
+
const [rect, setRect] = (0, import_react11.useState)(null);
|
|
11701
|
+
(0, import_react11.useEffect)(() => {
|
|
11702
|
+
if (!ref) {
|
|
11703
|
+
setRect(null);
|
|
11704
|
+
return;
|
|
11705
|
+
}
|
|
11706
|
+
const update = () => {
|
|
11707
|
+
const next = readRect4(ref);
|
|
11708
|
+
setRect(
|
|
11709
|
+
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
11710
|
+
);
|
|
11711
|
+
};
|
|
11712
|
+
update();
|
|
11713
|
+
const opts = { capture: true, passive: true };
|
|
11714
|
+
window.addEventListener("scroll", update, opts);
|
|
11715
|
+
window.addEventListener("resize", update);
|
|
11716
|
+
const interval = setInterval(update, 500);
|
|
11717
|
+
return () => {
|
|
11718
|
+
window.removeEventListener("scroll", update, opts);
|
|
11719
|
+
window.removeEventListener("resize", update);
|
|
11720
|
+
clearInterval(interval);
|
|
11721
|
+
};
|
|
11722
|
+
}, [ref?.sectionId, ref?.path]);
|
|
11723
|
+
return rect;
|
|
11724
|
+
}
|
|
11725
|
+
function requestValidateTree3(postToParent2, tree) {
|
|
11726
|
+
return new Promise((resolve) => {
|
|
11727
|
+
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
11728
|
+
const timeout = window.setTimeout(() => {
|
|
11729
|
+
window.removeEventListener("message", onMessage);
|
|
11730
|
+
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
11731
|
+
}, 8e3);
|
|
11732
|
+
function onMessage(e) {
|
|
11733
|
+
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
11734
|
+
window.clearTimeout(timeout);
|
|
11735
|
+
window.removeEventListener("message", onMessage);
|
|
11736
|
+
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
11737
|
+
}
|
|
11738
|
+
window.addEventListener("message", onMessage);
|
|
11739
|
+
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
11740
|
+
});
|
|
11741
|
+
}
|
|
11742
|
+
function Pill3({
|
|
11743
|
+
label,
|
|
11744
|
+
onClick,
|
|
11745
|
+
disabled
|
|
11746
|
+
}) {
|
|
11747
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11748
|
+
"button",
|
|
11749
|
+
{
|
|
11750
|
+
type: "button",
|
|
11751
|
+
onClick,
|
|
11752
|
+
disabled,
|
|
11753
|
+
style: {
|
|
11754
|
+
height: 28,
|
|
11755
|
+
padding: "0 10px",
|
|
11756
|
+
display: "inline-flex",
|
|
11757
|
+
alignItems: "center",
|
|
11758
|
+
gap: 4,
|
|
11759
|
+
borderRadius: 999,
|
|
11760
|
+
border: "none",
|
|
11761
|
+
cursor: disabled ? "default" : "pointer",
|
|
11762
|
+
background: "#ffffff",
|
|
11763
|
+
color: OHW_BLUE_DARK3,
|
|
11764
|
+
opacity: disabled ? 0.4 : 1,
|
|
11765
|
+
fontSize: 12,
|
|
11766
|
+
lineHeight: "16px",
|
|
11767
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
11768
|
+
whiteSpace: "nowrap",
|
|
11769
|
+
flex: "0 0 auto"
|
|
11770
|
+
},
|
|
11771
|
+
children: label
|
|
11772
|
+
}
|
|
11773
|
+
);
|
|
11774
|
+
}
|
|
11775
|
+
function watchUrl(id) {
|
|
11776
|
+
return `https://www.youtube.com/watch?v=${id}`;
|
|
11777
|
+
}
|
|
11778
|
+
function VideoUrlInput({ value, onCommit }) {
|
|
11779
|
+
const [draft, setDraft] = (0, import_react11.useState)(value ? watchUrl(value) : "");
|
|
11780
|
+
const [invalid, setInvalid] = (0, import_react11.useState)(false);
|
|
11781
|
+
(0, import_react11.useEffect)(() => {
|
|
11782
|
+
setDraft(value ? watchUrl(value) : "");
|
|
11783
|
+
setInvalid(false);
|
|
11784
|
+
}, [value]);
|
|
11785
|
+
const commit = () => {
|
|
11786
|
+
const next = draft.trim();
|
|
11787
|
+
if (!next) {
|
|
11788
|
+
setInvalid(false);
|
|
11789
|
+
if (value) onCommit(null);
|
|
11790
|
+
return;
|
|
11791
|
+
}
|
|
11792
|
+
const id = extractYouTubeId(next);
|
|
11793
|
+
if (!id) return setInvalid(true);
|
|
11794
|
+
setInvalid(false);
|
|
11795
|
+
setDraft(watchUrl(id));
|
|
11796
|
+
if (id !== value) onCommit(id);
|
|
11797
|
+
};
|
|
11798
|
+
const handleChange = (next) => {
|
|
11799
|
+
setDraft(next);
|
|
11800
|
+
const id = extractYouTubeId(next.trim());
|
|
11801
|
+
if (id && id !== value) {
|
|
11802
|
+
setInvalid(false);
|
|
11803
|
+
onCommit(id);
|
|
11804
|
+
}
|
|
11805
|
+
};
|
|
11806
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4, width: "100%", maxWidth: 280 }, children: [
|
|
11807
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
11808
|
+
"div",
|
|
11809
|
+
{
|
|
11810
|
+
style: {
|
|
11811
|
+
display: "flex",
|
|
11812
|
+
alignItems: "center",
|
|
11813
|
+
gap: 6,
|
|
11814
|
+
height: 28,
|
|
11815
|
+
padding: "0 12px",
|
|
11816
|
+
borderRadius: 999,
|
|
11817
|
+
background: "#ffffff",
|
|
11818
|
+
width: "100%",
|
|
11819
|
+
boxSizing: "border-box",
|
|
11820
|
+
boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
|
|
11821
|
+
},
|
|
11822
|
+
children: [
|
|
11823
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11824
|
+
"span",
|
|
11825
|
+
{
|
|
11826
|
+
style: {
|
|
11827
|
+
flex: "0 0 auto",
|
|
11828
|
+
color: OHW_BLUE_DARK3,
|
|
11829
|
+
fontSize: 10,
|
|
11830
|
+
lineHeight: "16px",
|
|
11831
|
+
fontWeight: 700,
|
|
11832
|
+
textTransform: "uppercase",
|
|
11833
|
+
letterSpacing: 0.4
|
|
11834
|
+
},
|
|
11835
|
+
children: "Video"
|
|
11836
|
+
}
|
|
11837
|
+
),
|
|
11838
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11839
|
+
"input",
|
|
11840
|
+
{
|
|
11841
|
+
type: "text",
|
|
11842
|
+
inputMode: "url",
|
|
11843
|
+
value: draft,
|
|
11844
|
+
onChange: (e) => handleChange(e.target.value),
|
|
11845
|
+
onBlur: commit,
|
|
11846
|
+
onKeyDown: (e) => {
|
|
11847
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
11848
|
+
if (e.key === "Escape") {
|
|
11849
|
+
setDraft(value ? watchUrl(value) : "");
|
|
11850
|
+
setInvalid(false);
|
|
11851
|
+
e.currentTarget.blur();
|
|
11852
|
+
}
|
|
11853
|
+
},
|
|
11854
|
+
placeholder: "Paste a YouTube URL",
|
|
11855
|
+
"aria-label": "YouTube video URL",
|
|
11856
|
+
"aria-invalid": invalid,
|
|
11857
|
+
style: {
|
|
11858
|
+
flex: 1,
|
|
11859
|
+
minWidth: 0,
|
|
11860
|
+
border: "none",
|
|
11861
|
+
outline: "none",
|
|
11862
|
+
background: "transparent",
|
|
11863
|
+
padding: 0,
|
|
11864
|
+
margin: 0,
|
|
11865
|
+
fontSize: 12,
|
|
11866
|
+
lineHeight: "16px",
|
|
11867
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
11868
|
+
color: "#1f2937"
|
|
11869
|
+
}
|
|
11870
|
+
}
|
|
11871
|
+
)
|
|
11872
|
+
]
|
|
11873
|
+
}
|
|
11874
|
+
),
|
|
11875
|
+
invalid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, textAlign: "center" }, children: "That doesn't look like a YouTube link \u2014 try pasting the video URL again." })
|
|
11876
|
+
] });
|
|
11877
|
+
}
|
|
11878
|
+
function VideoToolbar({
|
|
11879
|
+
videoId,
|
|
11880
|
+
pending,
|
|
11881
|
+
error,
|
|
11882
|
+
onSetVideoId,
|
|
11883
|
+
onRemove
|
|
11884
|
+
}) {
|
|
11885
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
11886
|
+
"div",
|
|
11887
|
+
{
|
|
11888
|
+
"data-ohw-bridge": "",
|
|
11889
|
+
"data-ohw-toolbar": "",
|
|
11890
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
11891
|
+
style: {
|
|
11892
|
+
display: "flex",
|
|
11893
|
+
flexDirection: "column",
|
|
11894
|
+
gap: 6,
|
|
11895
|
+
alignItems: "center",
|
|
11896
|
+
width: 280,
|
|
11897
|
+
background: OHW_BLUE3,
|
|
11898
|
+
padding: 8,
|
|
11899
|
+
borderRadius: 12,
|
|
11900
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
11901
|
+
pointerEvents: pending ? "none" : "auto",
|
|
11902
|
+
opacity: pending ? 0.6 : 1
|
|
11903
|
+
},
|
|
11904
|
+
children: [
|
|
11905
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VideoUrlInput, { value: videoId, onCommit: onSetVideoId }),
|
|
11906
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill3, { label: "Remove video", onClick: onRemove, disabled: !videoId }),
|
|
11907
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
11908
|
+
]
|
|
11909
|
+
}
|
|
11910
|
+
);
|
|
11911
|
+
}
|
|
11912
|
+
function AiVideoOverlay({
|
|
11311
11913
|
postToParent: postToParent2,
|
|
11312
11914
|
aiSectionsRef,
|
|
11313
|
-
applyTreeLocalRef
|
|
11915
|
+
applyTreeLocalRef,
|
|
11916
|
+
clearInteractionChromeRef
|
|
11314
11917
|
}) {
|
|
11315
|
-
const [hover, setHover] = (0,
|
|
11316
|
-
const [active, setActive] = (0,
|
|
11317
|
-
const [pending, setPending] = (0,
|
|
11318
|
-
const [error, setError] = (0,
|
|
11319
|
-
const activeRef = (0,
|
|
11918
|
+
const [hover, setHover] = (0, import_react11.useState)(null);
|
|
11919
|
+
const [active, setActive] = (0, import_react11.useState)(null);
|
|
11920
|
+
const [pending, setPending] = (0, import_react11.useState)(false);
|
|
11921
|
+
const [error, setError] = (0, import_react11.useState)(null);
|
|
11922
|
+
const activeRef = (0, import_react11.useRef)(null);
|
|
11320
11923
|
activeRef.current = active;
|
|
11321
|
-
(0,
|
|
11924
|
+
(0, import_react11.useEffect)(() => {
|
|
11322
11925
|
const onMove = (e) => {
|
|
11323
11926
|
const t = e.target;
|
|
11324
11927
|
if (!(t instanceof HTMLElement)) return;
|
|
11325
11928
|
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]")) {
|
|
11326
11929
|
return;
|
|
11327
11930
|
}
|
|
11328
|
-
const
|
|
11329
|
-
if (!
|
|
11931
|
+
const blockEl = t.closest("[data-ohw-video-block]");
|
|
11932
|
+
if (!blockEl) {
|
|
11330
11933
|
setHover(null);
|
|
11331
11934
|
return;
|
|
11332
11935
|
}
|
|
11333
|
-
const sectionEl =
|
|
11936
|
+
const sectionEl = blockEl.closest("[data-ohw-section]");
|
|
11334
11937
|
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
11335
11938
|
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
11336
|
-
const
|
|
11337
|
-
if (!sectionId ||
|
|
11939
|
+
const path = blockEl.dataset.ohwVideoPath;
|
|
11940
|
+
if (!sectionId || !path) {
|
|
11338
11941
|
setHover(null);
|
|
11339
11942
|
return;
|
|
11340
11943
|
}
|
|
11341
|
-
setHover({ sectionId,
|
|
11944
|
+
setHover({ sectionId, path });
|
|
11342
11945
|
};
|
|
11343
11946
|
const onLeave = () => setHover(null);
|
|
11344
11947
|
document.addEventListener("mousemove", onMove, { passive: true });
|
|
@@ -11348,22 +11951,22 @@ function AiPricingCardOverlay({
|
|
|
11348
11951
|
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
11349
11952
|
};
|
|
11350
11953
|
}, []);
|
|
11351
|
-
(0,
|
|
11954
|
+
(0, import_react11.useEffect)(() => {
|
|
11352
11955
|
const onClick = (e) => {
|
|
11353
11956
|
const current = activeRef.current;
|
|
11354
11957
|
if (!current) return;
|
|
11355
11958
|
const t = e.target;
|
|
11356
11959
|
if (!(t instanceof HTMLElement)) return;
|
|
11357
11960
|
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
11358
|
-
const
|
|
11359
|
-
if (
|
|
11961
|
+
const blockEl = findVideoBlockElement(current.sectionId, current.path);
|
|
11962
|
+
if (blockEl && blockEl.contains(t)) return;
|
|
11360
11963
|
setActive(null);
|
|
11361
11964
|
setError(null);
|
|
11362
11965
|
};
|
|
11363
11966
|
document.addEventListener("click", onClick, true);
|
|
11364
11967
|
return () => document.removeEventListener("click", onClick, true);
|
|
11365
11968
|
}, []);
|
|
11366
|
-
(0,
|
|
11969
|
+
(0, import_react11.useEffect)(() => {
|
|
11367
11970
|
const onBlur = () => {
|
|
11368
11971
|
if (!activeRef.current) return;
|
|
11369
11972
|
setActive(null);
|
|
@@ -11372,7 +11975,7 @@ function AiPricingCardOverlay({
|
|
|
11372
11975
|
window.addEventListener("blur", onBlur);
|
|
11373
11976
|
return () => window.removeEventListener("blur", onBlur);
|
|
11374
11977
|
}, []);
|
|
11375
|
-
(0,
|
|
11978
|
+
(0, import_react11.useEffect)(() => {
|
|
11376
11979
|
const onKeyDown = (e) => {
|
|
11377
11980
|
if (e.key !== "Escape") return;
|
|
11378
11981
|
if (!activeRef.current) return;
|
|
@@ -11382,14 +11985,14 @@ function AiPricingCardOverlay({
|
|
|
11382
11985
|
document.addEventListener("keydown", onKeyDown);
|
|
11383
11986
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
11384
11987
|
}, []);
|
|
11385
|
-
const findEntry = (0,
|
|
11988
|
+
const findEntry = (0, import_react11.useCallback)(
|
|
11386
11989
|
(sectionId) => {
|
|
11387
11990
|
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
11388
11991
|
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
11389
11992
|
},
|
|
11390
11993
|
[aiSectionsRef]
|
|
11391
11994
|
);
|
|
11392
|
-
const runMutation = (0,
|
|
11995
|
+
const runMutation = (0, import_react11.useCallback)(
|
|
11393
11996
|
async (sectionId, mutate) => {
|
|
11394
11997
|
const entry = findEntry(sectionId);
|
|
11395
11998
|
if (!entry) return false;
|
|
@@ -11397,7 +12000,7 @@ function AiPricingCardOverlay({
|
|
|
11397
12000
|
if (!nextTree) return false;
|
|
11398
12001
|
setPending(true);
|
|
11399
12002
|
setError(null);
|
|
11400
|
-
const { ok, reasons } = await
|
|
12003
|
+
const { ok, reasons } = await requestValidateTree3(postToParent2, nextTree);
|
|
11401
12004
|
setPending(false);
|
|
11402
12005
|
if (!ok) {
|
|
11403
12006
|
setError(reasons[0] ?? "That change is not allowed.");
|
|
@@ -11410,26 +12013,28 @@ function AiPricingCardOverlay({
|
|
|
11410
12013
|
tree: nextTree,
|
|
11411
12014
|
label: entry.label,
|
|
11412
12015
|
media: entry.media,
|
|
11413
|
-
...entry.brand ? { brand: entry.brand } : {}
|
|
11414
|
-
// The user is already looking at the card they just edited — recentering the
|
|
11415
|
-
// viewport on every tier add/remove/toggle reads as the section jumping around.
|
|
11416
|
-
skipScrollIntoView: true
|
|
12016
|
+
...entry.brand ? { brand: entry.brand } : {}
|
|
11417
12017
|
});
|
|
11418
12018
|
return true;
|
|
11419
12019
|
},
|
|
11420
12020
|
[findEntry, postToParent2, applyTreeLocalRef]
|
|
11421
12021
|
);
|
|
11422
12022
|
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
11423
|
-
const
|
|
11424
|
-
const
|
|
11425
|
-
|
|
11426
|
-
|
|
12023
|
+
const hoverHandleRect = useLiveBlockRect(!active && hover ? hover : null);
|
|
12024
|
+
const activeBlockRect = useLiveBlockRect(active);
|
|
12025
|
+
const TOOLBAR_APPROX_H = 90;
|
|
12026
|
+
const toolbarState = activeBlockRect && activeBlockRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
12027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
|
|
12028
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11427
12029
|
"button",
|
|
11428
12030
|
{
|
|
11429
12031
|
type: "button",
|
|
11430
12032
|
"data-ohw-toolbar": "",
|
|
11431
|
-
onClick: () =>
|
|
11432
|
-
|
|
12033
|
+
onClick: () => {
|
|
12034
|
+
clearInteractionChromeRef.current();
|
|
12035
|
+
setActive(hover);
|
|
12036
|
+
},
|
|
12037
|
+
"aria-label": "Configure video",
|
|
11433
12038
|
style: {
|
|
11434
12039
|
position: "fixed",
|
|
11435
12040
|
top: hoverHandleRect.top + 8,
|
|
@@ -11437,9 +12042,9 @@ function AiPricingCardOverlay({
|
|
|
11437
12042
|
width: 28,
|
|
11438
12043
|
height: 28,
|
|
11439
12044
|
borderRadius: 8,
|
|
11440
|
-
border: `1.5px dashed ${
|
|
12045
|
+
border: `1.5px dashed ${PRIMARY5}`,
|
|
11441
12046
|
background: "#ffffff",
|
|
11442
|
-
color:
|
|
12047
|
+
color: PRIMARY5,
|
|
11443
12048
|
display: "flex",
|
|
11444
12049
|
alignItems: "center",
|
|
11445
12050
|
justifyContent: "center",
|
|
@@ -11448,41 +12053,29 @@ function AiPricingCardOverlay({
|
|
|
11448
12053
|
fontSize: 14,
|
|
11449
12054
|
fontWeight: 700
|
|
11450
12055
|
},
|
|
11451
|
-
children: /* @__PURE__ */ (0,
|
|
12056
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
11452
12057
|
}
|
|
11453
12058
|
),
|
|
11454
|
-
|
|
12059
|
+
activeBlockRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11455
12060
|
ItemInteractionLayer,
|
|
11456
12061
|
{
|
|
11457
|
-
rect:
|
|
11458
|
-
state:
|
|
11459
|
-
toolbar: /* @__PURE__ */ (0,
|
|
11460
|
-
|
|
12062
|
+
rect: activeBlockRect,
|
|
12063
|
+
state: toolbarState,
|
|
12064
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
12065
|
+
VideoToolbar,
|
|
11461
12066
|
{
|
|
11462
|
-
|
|
11463
|
-
index: active.index,
|
|
12067
|
+
videoId: videoIdAt(activeEntry.tree, active.path),
|
|
11464
12068
|
pending,
|
|
11465
12069
|
error,
|
|
11466
|
-
|
|
11467
|
-
|
|
11468
|
-
|
|
11469
|
-
(
|
|
11470
|
-
if (applied) setActive(null);
|
|
11471
|
-
}
|
|
12070
|
+
onSetVideoId: (videoId) => {
|
|
12071
|
+
void runMutation(
|
|
12072
|
+
active.sectionId,
|
|
12073
|
+
(tree) => videoId ? setVideoId(tree, active.path, videoId) : clearVideo(tree, active.path)
|
|
11472
12074
|
);
|
|
11473
12075
|
},
|
|
11474
|
-
|
|
11475
|
-
active.sectionId,
|
|
11476
|
-
|
|
11477
|
-
),
|
|
11478
|
-
onSetTreatment: (treatment) => runMutation(
|
|
11479
|
-
active.sectionId,
|
|
11480
|
-
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
11481
|
-
),
|
|
11482
|
-
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
11483
|
-
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
11484
|
-
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
11485
|
-
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
12076
|
+
onRemove: () => {
|
|
12077
|
+
void runMutation(active.sectionId, (tree) => clearVideo(tree, active.path));
|
|
12078
|
+
}
|
|
11486
12079
|
}
|
|
11487
12080
|
)
|
|
11488
12081
|
}
|
|
@@ -11801,28 +12394,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
11801
12394
|
}
|
|
11802
12395
|
|
|
11803
12396
|
// src/ui/link-modal/LinkPopover.tsx
|
|
11804
|
-
var
|
|
12397
|
+
var import_react15 = require("react");
|
|
11805
12398
|
|
|
11806
12399
|
// src/ui/dialog.tsx
|
|
11807
12400
|
var React9 = __toESM(require("react"), 1);
|
|
11808
12401
|
var import_radix_ui6 = require("radix-ui");
|
|
11809
|
-
var
|
|
11810
|
-
var
|
|
12402
|
+
var import_lucide_react11 = require("lucide-react");
|
|
12403
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
11811
12404
|
function Dialog2({
|
|
11812
12405
|
...props
|
|
11813
12406
|
}) {
|
|
11814
|
-
return /* @__PURE__ */ (0,
|
|
12407
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
11815
12408
|
}
|
|
11816
12409
|
function DialogPortal({
|
|
11817
12410
|
...props
|
|
11818
12411
|
}) {
|
|
11819
|
-
return /* @__PURE__ */ (0,
|
|
12412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
11820
12413
|
}
|
|
11821
12414
|
function DialogOverlay({
|
|
11822
12415
|
className,
|
|
11823
12416
|
...props
|
|
11824
12417
|
}) {
|
|
11825
|
-
return /* @__PURE__ */ (0,
|
|
12418
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11826
12419
|
import_radix_ui6.Dialog.Overlay,
|
|
11827
12420
|
{
|
|
11828
12421
|
"data-slot": "dialog-overlay",
|
|
@@ -11835,9 +12428,9 @@ function DialogOverlay({
|
|
|
11835
12428
|
var DialogContent = React9.forwardRef(
|
|
11836
12429
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
11837
12430
|
const positionMode = container ? "absolute" : "fixed";
|
|
11838
|
-
return /* @__PURE__ */ (0,
|
|
11839
|
-
/* @__PURE__ */ (0,
|
|
11840
|
-
/* @__PURE__ */ (0,
|
|
12431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
12432
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
12433
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
11841
12434
|
import_radix_ui6.Dialog.Content,
|
|
11842
12435
|
{
|
|
11843
12436
|
ref,
|
|
@@ -11853,13 +12446,13 @@ var DialogContent = React9.forwardRef(
|
|
|
11853
12446
|
...props,
|
|
11854
12447
|
children: [
|
|
11855
12448
|
children,
|
|
11856
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
12449
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11857
12450
|
import_radix_ui6.Dialog.Close,
|
|
11858
12451
|
{
|
|
11859
12452
|
type: "button",
|
|
11860
12453
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
11861
12454
|
"aria-label": "Close",
|
|
11862
|
-
children: /* @__PURE__ */ (0,
|
|
12455
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.X, { size: 16, "aria-hidden": true })
|
|
11863
12456
|
}
|
|
11864
12457
|
) : null
|
|
11865
12458
|
]
|
|
@@ -11873,13 +12466,13 @@ function DialogHeader({
|
|
|
11873
12466
|
className,
|
|
11874
12467
|
...props
|
|
11875
12468
|
}) {
|
|
11876
|
-
return /* @__PURE__ */ (0,
|
|
12469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
11877
12470
|
}
|
|
11878
12471
|
function DialogFooter({
|
|
11879
12472
|
className,
|
|
11880
12473
|
...props
|
|
11881
12474
|
}) {
|
|
11882
|
-
return /* @__PURE__ */ (0,
|
|
12475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11883
12476
|
"div",
|
|
11884
12477
|
{
|
|
11885
12478
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -11887,7 +12480,7 @@ function DialogFooter({
|
|
|
11887
12480
|
}
|
|
11888
12481
|
);
|
|
11889
12482
|
}
|
|
11890
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
12483
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11891
12484
|
import_radix_ui6.Dialog.Title,
|
|
11892
12485
|
{
|
|
11893
12486
|
ref,
|
|
@@ -11899,7 +12492,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
11899
12492
|
}
|
|
11900
12493
|
));
|
|
11901
12494
|
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
11902
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
12495
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11903
12496
|
import_radix_ui6.Dialog.Description,
|
|
11904
12497
|
{
|
|
11905
12498
|
ref,
|
|
@@ -11911,63 +12504,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
|
11911
12504
|
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
11912
12505
|
|
|
11913
12506
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
11914
|
-
var
|
|
12507
|
+
var import_lucide_react15 = require("lucide-react");
|
|
11915
12508
|
|
|
11916
12509
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
11917
|
-
var
|
|
11918
|
-
var
|
|
12510
|
+
var import_lucide_react12 = require("lucide-react");
|
|
12511
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
11919
12512
|
function DestinationBreadcrumb({
|
|
11920
12513
|
pageTitle,
|
|
11921
12514
|
sectionLabel
|
|
11922
12515
|
}) {
|
|
11923
|
-
return /* @__PURE__ */ (0,
|
|
11924
|
-
/* @__PURE__ */ (0,
|
|
11925
|
-
/* @__PURE__ */ (0,
|
|
11926
|
-
/* @__PURE__ */ (0,
|
|
11927
|
-
/* @__PURE__ */ (0,
|
|
11928
|
-
/* @__PURE__ */ (0,
|
|
12516
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
12517
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
12518
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
12519
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
12520
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
12521
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
11929
12522
|
] }),
|
|
11930
|
-
/* @__PURE__ */ (0,
|
|
11931
|
-
|
|
12523
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
12524
|
+
import_lucide_react12.ArrowRight,
|
|
11932
12525
|
{
|
|
11933
12526
|
size: 16,
|
|
11934
12527
|
className: "shrink-0 text-muted-foreground",
|
|
11935
12528
|
"aria-hidden": true
|
|
11936
12529
|
}
|
|
11937
12530
|
),
|
|
11938
|
-
/* @__PURE__ */ (0,
|
|
11939
|
-
/* @__PURE__ */ (0,
|
|
11940
|
-
|
|
12531
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
12532
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
12533
|
+
import_lucide_react12.GalleryVertical,
|
|
11941
12534
|
{
|
|
11942
12535
|
size: 16,
|
|
11943
12536
|
className: "shrink-0 text-foreground",
|
|
11944
12537
|
"aria-hidden": true
|
|
11945
12538
|
}
|
|
11946
12539
|
),
|
|
11947
|
-
/* @__PURE__ */ (0,
|
|
12540
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
11948
12541
|
] })
|
|
11949
12542
|
] })
|
|
11950
12543
|
] });
|
|
11951
12544
|
}
|
|
11952
12545
|
|
|
11953
12546
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
11954
|
-
var
|
|
11955
|
-
var
|
|
12547
|
+
var import_lucide_react13 = require("lucide-react");
|
|
12548
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
11956
12549
|
function SectionTreeItem({
|
|
11957
12550
|
section,
|
|
11958
12551
|
onSelect,
|
|
11959
12552
|
selected
|
|
11960
12553
|
}) {
|
|
11961
12554
|
const interactive = Boolean(onSelect);
|
|
11962
|
-
return /* @__PURE__ */ (0,
|
|
11963
|
-
/* @__PURE__ */ (0,
|
|
12555
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
12556
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
11964
12557
|
"div",
|
|
11965
12558
|
{
|
|
11966
12559
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
11967
12560
|
"aria-hidden": true
|
|
11968
12561
|
}
|
|
11969
12562
|
),
|
|
11970
|
-
/* @__PURE__ */ (0,
|
|
12563
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
11971
12564
|
"div",
|
|
11972
12565
|
{
|
|
11973
12566
|
role: interactive ? "button" : void 0,
|
|
@@ -11985,15 +12578,15 @@ function SectionTreeItem({
|
|
|
11985
12578
|
interactive && selected && "border-bridge-primary"
|
|
11986
12579
|
),
|
|
11987
12580
|
children: [
|
|
11988
|
-
/* @__PURE__ */ (0,
|
|
11989
|
-
|
|
12581
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
12582
|
+
import_lucide_react13.GalleryVertical,
|
|
11990
12583
|
{
|
|
11991
12584
|
size: 16,
|
|
11992
12585
|
className: "shrink-0 text-foreground",
|
|
11993
12586
|
"aria-hidden": true
|
|
11994
12587
|
}
|
|
11995
12588
|
),
|
|
11996
|
-
/* @__PURE__ */ (0,
|
|
12589
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
11997
12590
|
]
|
|
11998
12591
|
}
|
|
11999
12592
|
)
|
|
@@ -12001,14 +12594,14 @@ function SectionTreeItem({
|
|
|
12001
12594
|
}
|
|
12002
12595
|
|
|
12003
12596
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
12004
|
-
var
|
|
12597
|
+
var import_react12 = require("react");
|
|
12005
12598
|
|
|
12006
12599
|
// src/ui/input.tsx
|
|
12007
12600
|
var React10 = __toESM(require("react"), 1);
|
|
12008
|
-
var
|
|
12601
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
12009
12602
|
var Input = React10.forwardRef(
|
|
12010
12603
|
({ className, type, ...props }, ref) => {
|
|
12011
|
-
return /* @__PURE__ */ (0,
|
|
12604
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
12012
12605
|
"input",
|
|
12013
12606
|
{
|
|
12014
12607
|
type,
|
|
@@ -12027,9 +12620,9 @@ Input.displayName = "Input";
|
|
|
12027
12620
|
|
|
12028
12621
|
// src/ui/label.tsx
|
|
12029
12622
|
var import_radix_ui7 = require("radix-ui");
|
|
12030
|
-
var
|
|
12623
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
12031
12624
|
function Label({ className, ...props }) {
|
|
12032
|
-
return /* @__PURE__ */ (0,
|
|
12625
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
12033
12626
|
import_radix_ui7.Label.Root,
|
|
12034
12627
|
{
|
|
12035
12628
|
"data-slot": "label",
|
|
@@ -12040,12 +12633,12 @@ function Label({ className, ...props }) {
|
|
|
12040
12633
|
}
|
|
12041
12634
|
|
|
12042
12635
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
12043
|
-
var
|
|
12044
|
-
var
|
|
12636
|
+
var import_lucide_react14 = require("lucide-react");
|
|
12637
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
12045
12638
|
function FieldChevron({
|
|
12046
12639
|
onClick
|
|
12047
12640
|
}) {
|
|
12048
|
-
return /* @__PURE__ */ (0,
|
|
12641
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12049
12642
|
"button",
|
|
12050
12643
|
{
|
|
12051
12644
|
type: "button",
|
|
@@ -12053,7 +12646,7 @@ function FieldChevron({
|
|
|
12053
12646
|
onClick,
|
|
12054
12647
|
"aria-label": "Open page list",
|
|
12055
12648
|
tabIndex: -1,
|
|
12056
|
-
children: /* @__PURE__ */ (0,
|
|
12649
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ChevronDown, { size: 16 })
|
|
12057
12650
|
}
|
|
12058
12651
|
);
|
|
12059
12652
|
}
|
|
@@ -12069,11 +12662,11 @@ function UrlOrPageInput({
|
|
|
12069
12662
|
readOnly = false,
|
|
12070
12663
|
urlError
|
|
12071
12664
|
}) {
|
|
12072
|
-
const inputId = (0,
|
|
12073
|
-
const inputRef = (0,
|
|
12074
|
-
const rootRef = (0,
|
|
12075
|
-
const [isFocused, setIsFocused] = (0,
|
|
12076
|
-
(0,
|
|
12665
|
+
const inputId = (0, import_react12.useId)();
|
|
12666
|
+
const inputRef = (0, import_react12.useRef)(null);
|
|
12667
|
+
const rootRef = (0, import_react12.useRef)(null);
|
|
12668
|
+
const [isFocused, setIsFocused] = (0, import_react12.useState)(false);
|
|
12669
|
+
(0, import_react12.useEffect)(() => {
|
|
12077
12670
|
if (!dropdownOpen) return;
|
|
12078
12671
|
const isOutside = (e) => {
|
|
12079
12672
|
const root = rootRef.current;
|
|
@@ -12114,19 +12707,19 @@ function UrlOrPageInput({
|
|
|
12114
12707
|
"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]",
|
|
12115
12708
|
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"
|
|
12116
12709
|
);
|
|
12117
|
-
return /* @__PURE__ */ (0,
|
|
12118
|
-
/* @__PURE__ */ (0,
|
|
12119
|
-
/* @__PURE__ */ (0,
|
|
12120
|
-
/* @__PURE__ */ (0,
|
|
12121
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
12122
|
-
|
|
12710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
12711
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
12712
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
12713
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
12714
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12715
|
+
import_lucide_react14.File,
|
|
12123
12716
|
{
|
|
12124
12717
|
size: 16,
|
|
12125
12718
|
className: "shrink-0 text-foreground",
|
|
12126
12719
|
"aria-hidden": true
|
|
12127
12720
|
}
|
|
12128
12721
|
) }) : null,
|
|
12129
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
12722
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12130
12723
|
Input,
|
|
12131
12724
|
{
|
|
12132
12725
|
ref: inputRef,
|
|
@@ -12152,7 +12745,7 @@ function UrlOrPageInput({
|
|
|
12152
12745
|
)
|
|
12153
12746
|
}
|
|
12154
12747
|
),
|
|
12155
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
12748
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12156
12749
|
"button",
|
|
12157
12750
|
{
|
|
12158
12751
|
type: "button",
|
|
@@ -12160,26 +12753,26 @@ function UrlOrPageInput({
|
|
|
12160
12753
|
onMouseDown: clearSelection,
|
|
12161
12754
|
"aria-label": "Clear selected page",
|
|
12162
12755
|
tabIndex: -1,
|
|
12163
|
-
children: /* @__PURE__ */ (0,
|
|
12756
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.X, { size: 16, "aria-hidden": true })
|
|
12164
12757
|
}
|
|
12165
12758
|
) : null,
|
|
12166
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
12759
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
12167
12760
|
] }),
|
|
12168
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
12761
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12169
12762
|
"div",
|
|
12170
12763
|
{
|
|
12171
12764
|
"data-ohw-link-page-dropdown": "",
|
|
12172
12765
|
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",
|
|
12173
12766
|
onMouseDown: (e) => e.preventDefault(),
|
|
12174
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
12767
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12175
12768
|
"button",
|
|
12176
12769
|
{
|
|
12177
12770
|
type: "button",
|
|
12178
12771
|
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",
|
|
12179
12772
|
onClick: () => onPageSelect(page),
|
|
12180
12773
|
children: [
|
|
12181
|
-
/* @__PURE__ */ (0,
|
|
12182
|
-
/* @__PURE__ */ (0,
|
|
12774
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
12775
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "truncate", children: page.title })
|
|
12183
12776
|
]
|
|
12184
12777
|
},
|
|
12185
12778
|
page.path
|
|
@@ -12187,34 +12780,34 @@ function UrlOrPageInput({
|
|
|
12187
12780
|
}
|
|
12188
12781
|
) : null
|
|
12189
12782
|
] }),
|
|
12190
|
-
urlError ? /* @__PURE__ */ (0,
|
|
12783
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
12191
12784
|
] });
|
|
12192
12785
|
}
|
|
12193
12786
|
|
|
12194
12787
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
12195
|
-
var
|
|
12788
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
12196
12789
|
function LinkEditorPanel({ state, onClose }) {
|
|
12197
12790
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
12198
|
-
return /* @__PURE__ */ (0,
|
|
12199
|
-
/* @__PURE__ */ (0,
|
|
12791
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
12792
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12200
12793
|
"button",
|
|
12201
12794
|
{
|
|
12202
12795
|
type: "button",
|
|
12203
12796
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
12204
12797
|
"aria-label": "Close",
|
|
12205
12798
|
onClick: onClose,
|
|
12206
|
-
children: /* @__PURE__ */ (0,
|
|
12799
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.X, { size: 16, "aria-hidden": true })
|
|
12207
12800
|
}
|
|
12208
12801
|
) }),
|
|
12209
|
-
/* @__PURE__ */ (0,
|
|
12210
|
-
/* @__PURE__ */ (0,
|
|
12211
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
12802
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
12803
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
12804
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12212
12805
|
DestinationBreadcrumb,
|
|
12213
12806
|
{
|
|
12214
12807
|
pageTitle: state.selectedPage.title,
|
|
12215
12808
|
sectionLabel: state.selectedSection.label
|
|
12216
12809
|
}
|
|
12217
|
-
) : /* @__PURE__ */ (0,
|
|
12810
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12218
12811
|
UrlOrPageInput,
|
|
12219
12812
|
{
|
|
12220
12813
|
value: state.searchValue,
|
|
@@ -12227,8 +12820,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12227
12820
|
urlError: state.urlError
|
|
12228
12821
|
}
|
|
12229
12822
|
),
|
|
12230
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
12231
|
-
/* @__PURE__ */ (0,
|
|
12823
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
12824
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12232
12825
|
Button,
|
|
12233
12826
|
{
|
|
12234
12827
|
type: "button",
|
|
@@ -12239,15 +12832,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12239
12832
|
children: "Choose a section"
|
|
12240
12833
|
}
|
|
12241
12834
|
),
|
|
12242
|
-
/* @__PURE__ */ (0,
|
|
12243
|
-
/* @__PURE__ */ (0,
|
|
12244
|
-
/* @__PURE__ */ (0,
|
|
12835
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
12836
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
12837
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
12245
12838
|
] })
|
|
12246
12839
|
] }) : null,
|
|
12247
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
12840
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
12248
12841
|
] }),
|
|
12249
|
-
/* @__PURE__ */ (0,
|
|
12250
|
-
/* @__PURE__ */ (0,
|
|
12842
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
12843
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12251
12844
|
Button,
|
|
12252
12845
|
{
|
|
12253
12846
|
type: "button",
|
|
@@ -12262,7 +12855,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12262
12855
|
children: state.secondaryLabel
|
|
12263
12856
|
}
|
|
12264
12857
|
),
|
|
12265
|
-
/* @__PURE__ */ (0,
|
|
12858
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12266
12859
|
Button,
|
|
12267
12860
|
{
|
|
12268
12861
|
type: "button",
|
|
@@ -12281,9 +12874,9 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12281
12874
|
}
|
|
12282
12875
|
|
|
12283
12876
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
12284
|
-
var
|
|
12877
|
+
var import_react13 = require("react");
|
|
12285
12878
|
var import_react_dom3 = require("react-dom");
|
|
12286
|
-
var
|
|
12879
|
+
var import_lucide_react16 = require("lucide-react");
|
|
12287
12880
|
var import_navigation2 = require("next/navigation");
|
|
12288
12881
|
|
|
12289
12882
|
// src/lib/parent-scroll.ts
|
|
@@ -12305,7 +12898,7 @@ function getIframeChromeClip(parentScroll) {
|
|
|
12305
12898
|
}
|
|
12306
12899
|
|
|
12307
12900
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
12308
|
-
var
|
|
12901
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
12309
12902
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
12310
12903
|
function rectsEqual(a, b) {
|
|
12311
12904
|
if (a.size !== b.size) return false;
|
|
@@ -12338,12 +12931,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
12338
12931
|
return null;
|
|
12339
12932
|
}
|
|
12340
12933
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
12341
|
-
const [rects, setRects] = (0,
|
|
12342
|
-
const sectionIds = (0,
|
|
12934
|
+
const [rects, setRects] = (0, import_react13.useState)(/* @__PURE__ */ new Map());
|
|
12935
|
+
const sectionIds = (0, import_react13.useMemo)(
|
|
12343
12936
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
12344
12937
|
[sectionIdsKey]
|
|
12345
12938
|
);
|
|
12346
|
-
(0,
|
|
12939
|
+
(0, import_react13.useEffect)(() => {
|
|
12347
12940
|
if (!enabled || sectionIds.length === 0) {
|
|
12348
12941
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
12349
12942
|
return;
|
|
@@ -12384,13 +12977,13 @@ function SectionPickerOverlay({
|
|
|
12384
12977
|
}) {
|
|
12385
12978
|
const router = (0, import_navigation2.useRouter)();
|
|
12386
12979
|
const pathname = (0, import_navigation2.usePathname)();
|
|
12387
|
-
const [selectedId, setSelectedId] = (0,
|
|
12388
|
-
const [hoveredId, setHoveredId] = (0,
|
|
12389
|
-
const pointerRef = (0,
|
|
12390
|
-
const pointerScreenRef = (0,
|
|
12391
|
-
const iframeOffsetTopRef = (0,
|
|
12392
|
-
const sectionIdsRef = (0,
|
|
12393
|
-
const [chromeClip, setChromeClip] = (0,
|
|
12980
|
+
const [selectedId, setSelectedId] = (0, import_react13.useState)(null);
|
|
12981
|
+
const [hoveredId, setHoveredId] = (0, import_react13.useState)(null);
|
|
12982
|
+
const pointerRef = (0, import_react13.useRef)(null);
|
|
12983
|
+
const pointerScreenRef = (0, import_react13.useRef)(null);
|
|
12984
|
+
const iframeOffsetTopRef = (0, import_react13.useRef)(null);
|
|
12985
|
+
const sectionIdsRef = (0, import_react13.useRef)([]);
|
|
12986
|
+
const [chromeClip, setChromeClip] = (0, import_react13.useState)(
|
|
12394
12987
|
() => ({
|
|
12395
12988
|
top: 0,
|
|
12396
12989
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -12398,12 +12991,12 @@ function SectionPickerOverlay({
|
|
|
12398
12991
|
);
|
|
12399
12992
|
const normalizedTarget = normalizePath(pagePath);
|
|
12400
12993
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
12401
|
-
(0,
|
|
12994
|
+
(0, import_react13.useEffect)(() => {
|
|
12402
12995
|
if (isOnTargetPage) return;
|
|
12403
12996
|
const search = readPreservedSearch();
|
|
12404
12997
|
router.push(`${normalizedTarget}${search}`);
|
|
12405
12998
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
12406
|
-
(0,
|
|
12999
|
+
(0, import_react13.useEffect)(() => {
|
|
12407
13000
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
12408
13001
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
12409
13002
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -12415,24 +13008,24 @@ function SectionPickerOverlay({
|
|
|
12415
13008
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
12416
13009
|
};
|
|
12417
13010
|
}, []);
|
|
12418
|
-
const liveSections = (0,
|
|
13011
|
+
const liveSections = (0, import_react13.useMemo)(() => {
|
|
12419
13012
|
if (!isOnTargetPage) return sections;
|
|
12420
13013
|
const live = collectSectionsFromDom();
|
|
12421
13014
|
if (live.length === 0) return sections;
|
|
12422
13015
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
12423
13016
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
12424
13017
|
}, [isOnTargetPage, sections, pathname]);
|
|
12425
|
-
const sectionIdsKey = (0,
|
|
13018
|
+
const sectionIdsKey = (0, import_react13.useMemo)(
|
|
12426
13019
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
12427
13020
|
[liveSections]
|
|
12428
13021
|
);
|
|
12429
|
-
const sectionIds = (0,
|
|
13022
|
+
const sectionIds = (0, import_react13.useMemo)(
|
|
12430
13023
|
() => liveSections.map((s) => s.id),
|
|
12431
13024
|
[liveSections]
|
|
12432
13025
|
);
|
|
12433
13026
|
sectionIdsRef.current = sectionIds;
|
|
12434
13027
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
12435
|
-
const applyHoverAt = (0,
|
|
13028
|
+
const applyHoverAt = (0, import_react13.useCallback)(
|
|
12436
13029
|
(x, y, liveRects) => {
|
|
12437
13030
|
const ids = sectionIdsRef.current;
|
|
12438
13031
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -12441,7 +13034,7 @@ function SectionPickerOverlay({
|
|
|
12441
13034
|
},
|
|
12442
13035
|
[]
|
|
12443
13036
|
);
|
|
12444
|
-
(0,
|
|
13037
|
+
(0, import_react13.useEffect)(() => {
|
|
12445
13038
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
|
|
12446
13039
|
const next = getIframeVisibleClip({
|
|
12447
13040
|
iframeOffsetTop,
|
|
@@ -12485,12 +13078,12 @@ function SectionPickerOverlay({
|
|
|
12485
13078
|
window.removeEventListener("resize", onResize);
|
|
12486
13079
|
};
|
|
12487
13080
|
}, [applyHoverAt]);
|
|
12488
|
-
(0,
|
|
13081
|
+
(0, import_react13.useEffect)(() => {
|
|
12489
13082
|
const ptr = pointerRef.current;
|
|
12490
13083
|
if (!ptr) return;
|
|
12491
13084
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
12492
13085
|
}, [rects, applyHoverAt]);
|
|
12493
|
-
(0,
|
|
13086
|
+
(0, import_react13.useEffect)(() => {
|
|
12494
13087
|
const rememberPointer = (clientX, clientY) => {
|
|
12495
13088
|
pointerRef.current = { x: clientX, y: clientY };
|
|
12496
13089
|
const top = iframeOffsetTopRef.current;
|
|
@@ -12514,7 +13107,7 @@ function SectionPickerOverlay({
|
|
|
12514
13107
|
window.removeEventListener("message", onPointerSync);
|
|
12515
13108
|
};
|
|
12516
13109
|
}, [rects, applyHoverAt]);
|
|
12517
|
-
const handleSelect = (0,
|
|
13110
|
+
const handleSelect = (0, import_react13.useCallback)(
|
|
12518
13111
|
(section) => {
|
|
12519
13112
|
if (selectedId) return;
|
|
12520
13113
|
setSelectedId(section.id);
|
|
@@ -12522,7 +13115,7 @@ function SectionPickerOverlay({
|
|
|
12522
13115
|
},
|
|
12523
13116
|
[selectedId, onSelect]
|
|
12524
13117
|
);
|
|
12525
|
-
(0,
|
|
13118
|
+
(0, import_react13.useEffect)(() => {
|
|
12526
13119
|
const onKeyDown = (e) => {
|
|
12527
13120
|
if (e.key === "Escape") {
|
|
12528
13121
|
e.preventDefault();
|
|
@@ -12536,7 +13129,7 @@ function SectionPickerOverlay({
|
|
|
12536
13129
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
12537
13130
|
if (!portalRoot) return null;
|
|
12538
13131
|
return (0, import_react_dom3.createPortal)(
|
|
12539
|
-
/* @__PURE__ */ (0,
|
|
13132
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
12540
13133
|
"div",
|
|
12541
13134
|
{
|
|
12542
13135
|
"data-ohw-section-picker": "",
|
|
@@ -12546,12 +13139,12 @@ function SectionPickerOverlay({
|
|
|
12546
13139
|
role: "dialog",
|
|
12547
13140
|
"aria-label": "Choose a section",
|
|
12548
13141
|
children: [
|
|
12549
|
-
/* @__PURE__ */ (0,
|
|
13142
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
12550
13143
|
"div",
|
|
12551
13144
|
{
|
|
12552
13145
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
12553
13146
|
style: { top: chromeClip.top + 20 },
|
|
12554
|
-
children: /* @__PURE__ */ (0,
|
|
13147
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
12555
13148
|
Button,
|
|
12556
13149
|
{
|
|
12557
13150
|
type: "button",
|
|
@@ -12560,14 +13153,14 @@ function SectionPickerOverlay({
|
|
|
12560
13153
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
12561
13154
|
onClick: onBack,
|
|
12562
13155
|
children: [
|
|
12563
|
-
/* @__PURE__ */ (0,
|
|
13156
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
12564
13157
|
"Back"
|
|
12565
13158
|
]
|
|
12566
13159
|
}
|
|
12567
13160
|
)
|
|
12568
13161
|
}
|
|
12569
13162
|
),
|
|
12570
|
-
/* @__PURE__ */ (0,
|
|
13163
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
12571
13164
|
"div",
|
|
12572
13165
|
{
|
|
12573
13166
|
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",
|
|
@@ -12580,7 +13173,7 @@ function SectionPickerOverlay({
|
|
|
12580
13173
|
children: "Click on section to select"
|
|
12581
13174
|
}
|
|
12582
13175
|
),
|
|
12583
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
13176
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
12584
13177
|
"div",
|
|
12585
13178
|
{
|
|
12586
13179
|
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",
|
|
@@ -12588,14 +13181,14 @@ function SectionPickerOverlay({
|
|
|
12588
13181
|
children: "Loading page preview\u2026"
|
|
12589
13182
|
}
|
|
12590
13183
|
) : null,
|
|
12591
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
13184
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
12592
13185
|
isOnTargetPage ? liveSections.map((section) => {
|
|
12593
13186
|
const rect = rects.get(section.id);
|
|
12594
13187
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
12595
13188
|
const isSelected = selectedId === section.id;
|
|
12596
13189
|
const isHovered = hoveredId === section.id;
|
|
12597
13190
|
const isLit = isSelected || isHovered;
|
|
12598
|
-
return /* @__PURE__ */ (0,
|
|
13191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
12599
13192
|
"button",
|
|
12600
13193
|
{
|
|
12601
13194
|
type: "button",
|
|
@@ -12610,7 +13203,7 @@ function SectionPickerOverlay({
|
|
|
12610
13203
|
"aria-label": `Select section ${section.label}`,
|
|
12611
13204
|
onClick: () => handleSelect(section),
|
|
12612
13205
|
children: [
|
|
12613
|
-
isLit ? /* @__PURE__ */ (0,
|
|
13206
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
12614
13207
|
"span",
|
|
12615
13208
|
{
|
|
12616
13209
|
className: "pointer-events-none absolute",
|
|
@@ -12623,13 +13216,13 @@ function SectionPickerOverlay({
|
|
|
12623
13216
|
"aria-hidden": true
|
|
12624
13217
|
}
|
|
12625
13218
|
) : null,
|
|
12626
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
13219
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
12627
13220
|
"span",
|
|
12628
13221
|
{
|
|
12629
13222
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
12630
13223
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
12631
13224
|
"aria-hidden": true,
|
|
12632
|
-
children: /* @__PURE__ */ (0,
|
|
13225
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.Check, { className: "size-5" })
|
|
12633
13226
|
}
|
|
12634
13227
|
) : null
|
|
12635
13228
|
]
|
|
@@ -12645,7 +13238,7 @@ function SectionPickerOverlay({
|
|
|
12645
13238
|
}
|
|
12646
13239
|
|
|
12647
13240
|
// src/ui/link-modal/useLinkModalState.ts
|
|
12648
|
-
var
|
|
13241
|
+
var import_react14 = require("react");
|
|
12649
13242
|
function useLinkModalState({
|
|
12650
13243
|
open,
|
|
12651
13244
|
mode,
|
|
@@ -12657,14 +13250,14 @@ function useLinkModalState({
|
|
|
12657
13250
|
onClose,
|
|
12658
13251
|
onSubmit
|
|
12659
13252
|
}) {
|
|
12660
|
-
const availablePages = (0,
|
|
12661
|
-
const [searchValue, setSearchValue] = (0,
|
|
12662
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
12663
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
12664
|
-
const [step, setStep] = (0,
|
|
12665
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
12666
|
-
const [urlError, setUrlError] = (0,
|
|
12667
|
-
const reset = (0,
|
|
13253
|
+
const availablePages = (0, import_react14.useMemo)(() => pages, [pages]);
|
|
13254
|
+
const [searchValue, setSearchValue] = (0, import_react14.useState)("");
|
|
13255
|
+
const [selectedPage, setSelectedPage] = (0, import_react14.useState)(null);
|
|
13256
|
+
const [selectedSection, setSelectedSection] = (0, import_react14.useState)(null);
|
|
13257
|
+
const [step, setStep] = (0, import_react14.useState)("input");
|
|
13258
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react14.useState)(false);
|
|
13259
|
+
const [urlError, setUrlError] = (0, import_react14.useState)("");
|
|
13260
|
+
const reset = (0, import_react14.useCallback)(() => {
|
|
12668
13261
|
setSearchValue("");
|
|
12669
13262
|
setSelectedPage(null);
|
|
12670
13263
|
setSelectedSection(null);
|
|
@@ -12672,7 +13265,7 @@ function useLinkModalState({
|
|
|
12672
13265
|
setDropdownOpen(false);
|
|
12673
13266
|
setUrlError("");
|
|
12674
13267
|
}, []);
|
|
12675
|
-
(0,
|
|
13268
|
+
(0, import_react14.useEffect)(() => {
|
|
12676
13269
|
if (!open) return;
|
|
12677
13270
|
if (mode === "edit" && initialTarget) {
|
|
12678
13271
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -12688,11 +13281,11 @@ function useLinkModalState({
|
|
|
12688
13281
|
setDropdownOpen(false);
|
|
12689
13282
|
setUrlError("");
|
|
12690
13283
|
}, [open, mode, initialTarget, reset]);
|
|
12691
|
-
const filteredPages = (0,
|
|
13284
|
+
const filteredPages = (0, import_react14.useMemo)(() => {
|
|
12692
13285
|
if (!searchValue.trim()) return availablePages;
|
|
12693
13286
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
12694
13287
|
}, [availablePages, searchValue]);
|
|
12695
|
-
const activeSections = (0,
|
|
13288
|
+
const activeSections = (0, import_react14.useMemo)(() => {
|
|
12696
13289
|
if (!selectedPage) return [];
|
|
12697
13290
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
12698
13291
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -12741,7 +13334,7 @@ function useLinkModalState({
|
|
|
12741
13334
|
reset();
|
|
12742
13335
|
onClose();
|
|
12743
13336
|
};
|
|
12744
|
-
const isValid = (0,
|
|
13337
|
+
const isValid = (0, import_react14.useMemo)(() => {
|
|
12745
13338
|
if (urlError) return false;
|
|
12746
13339
|
if (showBreadcrumb) return true;
|
|
12747
13340
|
if (selectedPage) return true;
|
|
@@ -12809,7 +13402,7 @@ function useLinkModalState({
|
|
|
12809
13402
|
}
|
|
12810
13403
|
|
|
12811
13404
|
// src/ui/link-modal/LinkPopover.tsx
|
|
12812
|
-
var
|
|
13405
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
12813
13406
|
function postToParent(data) {
|
|
12814
13407
|
window.parent?.postMessage(data, "*");
|
|
12815
13408
|
}
|
|
@@ -12838,7 +13431,7 @@ function LinkPopover({
|
|
|
12838
13431
|
onSubmit
|
|
12839
13432
|
});
|
|
12840
13433
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
12841
|
-
(0,
|
|
13434
|
+
(0, import_react15.useEffect)(() => {
|
|
12842
13435
|
if (!open) return;
|
|
12843
13436
|
if (sectionPickerActive) {
|
|
12844
13437
|
postToParent({ type: "ui:unlock" });
|
|
@@ -12905,15 +13498,15 @@ function LinkPopover({
|
|
|
12905
13498
|
);
|
|
12906
13499
|
};
|
|
12907
13500
|
}, [open, sectionPickerActive]);
|
|
12908
|
-
return /* @__PURE__ */ (0,
|
|
12909
|
-
/* @__PURE__ */ (0,
|
|
13501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
13502
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
12910
13503
|
Dialog2,
|
|
12911
13504
|
{
|
|
12912
13505
|
open: open && !sectionPickerActive,
|
|
12913
13506
|
onOpenChange: (next) => {
|
|
12914
13507
|
if (!next) onClose?.();
|
|
12915
13508
|
},
|
|
12916
|
-
children: /* @__PURE__ */ (0,
|
|
13509
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
12917
13510
|
DialogContent,
|
|
12918
13511
|
{
|
|
12919
13512
|
ref: panelRef,
|
|
@@ -12923,12 +13516,12 @@ function LinkPopover({
|
|
|
12923
13516
|
"data-ohw-bridge": "",
|
|
12924
13517
|
showCloseButton: false,
|
|
12925
13518
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
12926
|
-
children: /* @__PURE__ */ (0,
|
|
13519
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LinkEditorPanel, { state, onClose })
|
|
12927
13520
|
}
|
|
12928
13521
|
)
|
|
12929
13522
|
}
|
|
12930
13523
|
),
|
|
12931
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
13524
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
12932
13525
|
SectionPickerOverlay,
|
|
12933
13526
|
{
|
|
12934
13527
|
pagePath: state.selectedPage.path,
|
|
@@ -16116,9 +16709,9 @@ function addFooterColumnWithPersist({
|
|
|
16116
16709
|
}
|
|
16117
16710
|
|
|
16118
16711
|
// src/ui/FloatingPanel.tsx
|
|
16119
|
-
var
|
|
16120
|
-
var
|
|
16121
|
-
var
|
|
16712
|
+
var import_react16 = require("react");
|
|
16713
|
+
var import_lucide_react17 = require("lucide-react");
|
|
16714
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
16122
16715
|
var PANEL_WIDTH = 256;
|
|
16123
16716
|
var EDGE_MARGIN = 16;
|
|
16124
16717
|
var HEADER_MIN = 56;
|
|
@@ -16178,10 +16771,10 @@ function FloatingPanel({
|
|
|
16178
16771
|
className,
|
|
16179
16772
|
bodyClassName
|
|
16180
16773
|
}) {
|
|
16181
|
-
const panelRef = (0,
|
|
16182
|
-
const [measured, setMeasured] = (0,
|
|
16183
|
-
const dragRef = (0,
|
|
16184
|
-
const homeRef = (0,
|
|
16774
|
+
const panelRef = (0, import_react16.useRef)(null);
|
|
16775
|
+
const [measured, setMeasured] = (0, import_react16.useState)({ w: PANEL_WIDTH, h: 280 });
|
|
16776
|
+
const dragRef = (0, import_react16.useRef)(null);
|
|
16777
|
+
const homeRef = (0, import_react16.useRef)(null);
|
|
16185
16778
|
if (!open) {
|
|
16186
16779
|
homeRef.current = null;
|
|
16187
16780
|
} else if (position) {
|
|
@@ -16189,17 +16782,17 @@ function FloatingPanel({
|
|
|
16189
16782
|
} else if (homeRef.current == null) {
|
|
16190
16783
|
homeRef.current = defaultFloatingPanelPosition(parentScroll);
|
|
16191
16784
|
}
|
|
16192
|
-
const [liveScroll, setLiveScroll] = (0,
|
|
16785
|
+
const [liveScroll, setLiveScroll] = (0, import_react16.useState)(parentScroll);
|
|
16193
16786
|
const home = position ?? homeRef.current ?? defaultFloatingPanelPosition(parentScroll);
|
|
16194
16787
|
const { y: fittedY, maxHeight } = fitPanelInClip(home.y, liveScroll, measured.h);
|
|
16195
16788
|
const clamped = {
|
|
16196
16789
|
x: clampX(home.x, measured.w),
|
|
16197
16790
|
y: fittedY
|
|
16198
16791
|
};
|
|
16199
|
-
(0,
|
|
16792
|
+
(0, import_react16.useEffect)(() => {
|
|
16200
16793
|
setLiveScroll(parentScroll);
|
|
16201
16794
|
}, [parentScroll]);
|
|
16202
|
-
(0,
|
|
16795
|
+
(0, import_react16.useEffect)(() => {
|
|
16203
16796
|
if (!open) return;
|
|
16204
16797
|
const onParentScroll = (e) => {
|
|
16205
16798
|
if (e.data?.type !== "ow:parent-scroll") return;
|
|
@@ -16209,8 +16802,8 @@ function FloatingPanel({
|
|
|
16209
16802
|
window.addEventListener("message", onParentScroll);
|
|
16210
16803
|
return () => window.removeEventListener("message", onParentScroll);
|
|
16211
16804
|
}, [open]);
|
|
16212
|
-
const positionRef = (0,
|
|
16213
|
-
(0,
|
|
16805
|
+
const positionRef = (0, import_react16.useRef)(position);
|
|
16806
|
+
(0, import_react16.useLayoutEffect)(() => {
|
|
16214
16807
|
if (!open) {
|
|
16215
16808
|
positionRef.current = position;
|
|
16216
16809
|
return;
|
|
@@ -16220,7 +16813,7 @@ function FloatingPanel({
|
|
|
16220
16813
|
}
|
|
16221
16814
|
positionRef.current = position;
|
|
16222
16815
|
}, [open, position, liveScroll, parentScroll]);
|
|
16223
|
-
(0,
|
|
16816
|
+
(0, import_react16.useLayoutEffect)(() => {
|
|
16224
16817
|
if (!open || !panelRef.current) return;
|
|
16225
16818
|
const el = panelRef.current;
|
|
16226
16819
|
const header = el.querySelector("[data-ohw-floating-panel-header]");
|
|
@@ -16229,7 +16822,7 @@ function FloatingPanel({
|
|
|
16229
16822
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: contentH };
|
|
16230
16823
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
16231
16824
|
}, [open, children, title, context]);
|
|
16232
|
-
const onHeaderPointerDown = (0,
|
|
16825
|
+
const onHeaderPointerDown = (0, import_react16.useCallback)(
|
|
16233
16826
|
(e) => {
|
|
16234
16827
|
if (e.button !== 0) return;
|
|
16235
16828
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -16248,7 +16841,7 @@ function FloatingPanel({
|
|
|
16248
16841
|
},
|
|
16249
16842
|
[clamped.x, clamped.y]
|
|
16250
16843
|
);
|
|
16251
|
-
const onHeaderPointerMove = (0,
|
|
16844
|
+
const onHeaderPointerMove = (0, import_react16.useCallback)(
|
|
16252
16845
|
(e) => {
|
|
16253
16846
|
const drag = dragRef.current;
|
|
16254
16847
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -16274,7 +16867,7 @@ function FloatingPanel({
|
|
|
16274
16867
|
},
|
|
16275
16868
|
[measured.w, onPositionChange, liveScroll]
|
|
16276
16869
|
);
|
|
16277
|
-
const endDrag = (0,
|
|
16870
|
+
const endDrag = (0, import_react16.useCallback)((e) => {
|
|
16278
16871
|
const drag = dragRef.current;
|
|
16279
16872
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
16280
16873
|
dragRef.current = null;
|
|
@@ -16284,13 +16877,13 @@ function FloatingPanel({
|
|
|
16284
16877
|
} catch {
|
|
16285
16878
|
}
|
|
16286
16879
|
}, []);
|
|
16287
|
-
(0,
|
|
16880
|
+
(0, import_react16.useEffect)(() => {
|
|
16288
16881
|
if (open) return;
|
|
16289
16882
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
16290
16883
|
}, [open]);
|
|
16291
|
-
(0,
|
|
16884
|
+
(0, import_react16.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
16292
16885
|
if (!open) return null;
|
|
16293
|
-
return /* @__PURE__ */ (0,
|
|
16886
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
16294
16887
|
"div",
|
|
16295
16888
|
{
|
|
16296
16889
|
ref: panelRef,
|
|
@@ -16307,7 +16900,7 @@ function FloatingPanel({
|
|
|
16307
16900
|
onPointerDown: (e) => e.stopPropagation(),
|
|
16308
16901
|
onClick: (e) => e.stopPropagation(),
|
|
16309
16902
|
children: [
|
|
16310
|
-
/* @__PURE__ */ (0,
|
|
16903
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
16311
16904
|
"div",
|
|
16312
16905
|
{
|
|
16313
16906
|
"data-ohw-floating-panel-header": "",
|
|
@@ -16317,14 +16910,14 @@ function FloatingPanel({
|
|
|
16317
16910
|
onPointerUp: endDrag,
|
|
16318
16911
|
onPointerCancel: endDrag,
|
|
16319
16912
|
children: [
|
|
16320
|
-
/* @__PURE__ */ (0,
|
|
16321
|
-
/* @__PURE__ */ (0,
|
|
16322
|
-
icon ? /* @__PURE__ */ (0,
|
|
16323
|
-
/* @__PURE__ */ (0,
|
|
16913
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
16914
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
16915
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
16916
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
16324
16917
|
] }),
|
|
16325
|
-
context ? /* @__PURE__ */ (0,
|
|
16918
|
+
context ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
16326
16919
|
] }),
|
|
16327
|
-
/* @__PURE__ */ (0,
|
|
16920
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16328
16921
|
"button",
|
|
16329
16922
|
{
|
|
16330
16923
|
type: "button",
|
|
@@ -16336,13 +16929,13 @@ function FloatingPanel({
|
|
|
16336
16929
|
onClose();
|
|
16337
16930
|
},
|
|
16338
16931
|
onPointerDown: (e) => e.stopPropagation(),
|
|
16339
|
-
children: /* @__PURE__ */ (0,
|
|
16932
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react17.X, { size: 16, "aria-hidden": true })
|
|
16340
16933
|
}
|
|
16341
16934
|
)
|
|
16342
16935
|
]
|
|
16343
16936
|
}
|
|
16344
16937
|
),
|
|
16345
|
-
/* @__PURE__ */ (0,
|
|
16938
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16346
16939
|
"div",
|
|
16347
16940
|
{
|
|
16348
16941
|
"data-ohw-floating-panel-body": "",
|
|
@@ -16360,15 +16953,15 @@ function FloatingPanel({
|
|
|
16360
16953
|
}
|
|
16361
16954
|
|
|
16362
16955
|
// src/ui/socials-display-panel.tsx
|
|
16363
|
-
var
|
|
16956
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
16364
16957
|
function DisplaySwitch({
|
|
16365
16958
|
label,
|
|
16366
16959
|
checked,
|
|
16367
16960
|
disabled,
|
|
16368
16961
|
onChange
|
|
16369
16962
|
}) {
|
|
16370
|
-
return /* @__PURE__ */ (0,
|
|
16371
|
-
/* @__PURE__ */ (0,
|
|
16963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
|
|
16964
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16372
16965
|
"span",
|
|
16373
16966
|
{
|
|
16374
16967
|
className: cn(
|
|
@@ -16378,7 +16971,7 @@ function DisplaySwitch({
|
|
|
16378
16971
|
children: label
|
|
16379
16972
|
}
|
|
16380
16973
|
),
|
|
16381
|
-
/* @__PURE__ */ (0,
|
|
16974
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16382
16975
|
"button",
|
|
16383
16976
|
{
|
|
16384
16977
|
type: "button",
|
|
@@ -16392,7 +16985,7 @@ function DisplaySwitch({
|
|
|
16392
16985
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
16393
16986
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
16394
16987
|
),
|
|
16395
|
-
children: /* @__PURE__ */ (0,
|
|
16988
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16396
16989
|
"span",
|
|
16397
16990
|
{
|
|
16398
16991
|
className: cn(
|
|
@@ -16406,8 +16999,8 @@ function DisplaySwitch({
|
|
|
16406
16999
|
] });
|
|
16407
17000
|
}
|
|
16408
17001
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
16409
|
-
return /* @__PURE__ */ (0,
|
|
16410
|
-
/* @__PURE__ */ (0,
|
|
17002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
17003
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16411
17004
|
DisplaySwitch,
|
|
16412
17005
|
{
|
|
16413
17006
|
label: "Text",
|
|
@@ -16416,7 +17009,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
16416
17009
|
onChange: (text) => onChange({ ...display, text })
|
|
16417
17010
|
}
|
|
16418
17011
|
),
|
|
16419
|
-
/* @__PURE__ */ (0,
|
|
17012
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16420
17013
|
DisplaySwitch,
|
|
16421
17014
|
{
|
|
16422
17015
|
label: "Icon",
|
|
@@ -16429,7 +17022,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
16429
17022
|
}
|
|
16430
17023
|
|
|
16431
17024
|
// src/ui/button-style-panel.tsx
|
|
16432
|
-
var
|
|
17025
|
+
var import_lucide_react18 = require("lucide-react");
|
|
16433
17026
|
|
|
16434
17027
|
// src/lib/button-styles.ts
|
|
16435
17028
|
var BUTTON_VARIANTS_KEY = "__ohw_button_variants";
|
|
@@ -17132,7 +17725,7 @@ function withAssignment(content, id, assignment) {
|
|
|
17132
17725
|
}
|
|
17133
17726
|
|
|
17134
17727
|
// src/ui/button-style-panel.tsx
|
|
17135
|
-
var
|
|
17728
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
17136
17729
|
var SIZE_LABEL = { s: "S", m: "M", l: "L" };
|
|
17137
17730
|
function ButtonStylePanel({
|
|
17138
17731
|
variants,
|
|
@@ -17146,15 +17739,15 @@ function ButtonStylePanel({
|
|
|
17146
17739
|
}) {
|
|
17147
17740
|
const preview = scaleGeometry(sizes.m, 0.75);
|
|
17148
17741
|
const label = previewLabel.trim() || "Book Now";
|
|
17149
|
-
return /* @__PURE__ */ (0,
|
|
17150
|
-
/* @__PURE__ */ (0,
|
|
17151
|
-
/* @__PURE__ */ (0,
|
|
17152
|
-
/* @__PURE__ */ (0,
|
|
17742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex w-full flex-col gap-5", children: [
|
|
17743
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
17744
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Variants" }),
|
|
17745
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
|
|
17153
17746
|
const chrome = variants[id];
|
|
17154
17747
|
const selected = id === variant;
|
|
17155
17748
|
const hasBorder = parseFloat(chrome.borderWidth) > 0;
|
|
17156
17749
|
const cardSlot = previewSlotForChrome(chrome, slotBackground);
|
|
17157
|
-
return /* @__PURE__ */ (0,
|
|
17750
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
17158
17751
|
"button",
|
|
17159
17752
|
{
|
|
17160
17753
|
type: "button",
|
|
@@ -17170,12 +17763,12 @@ function ButtonStylePanel({
|
|
|
17170
17763
|
selected ? "border-2 border-primary" : "border border-border"
|
|
17171
17764
|
),
|
|
17172
17765
|
children: [
|
|
17173
|
-
/* @__PURE__ */ (0,
|
|
17766
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
17174
17767
|
"div",
|
|
17175
17768
|
{
|
|
17176
17769
|
className: "flex w-full items-center justify-center py-4",
|
|
17177
17770
|
style: { background: cardSlot },
|
|
17178
|
-
children: /* @__PURE__ */ (0,
|
|
17771
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
17179
17772
|
"span",
|
|
17180
17773
|
{
|
|
17181
17774
|
className: "inline-flex items-center justify-center whitespace-nowrap font-semibold uppercase leading-none",
|
|
@@ -17197,12 +17790,12 @@ function ButtonStylePanel({
|
|
|
17197
17790
|
)
|
|
17198
17791
|
}
|
|
17199
17792
|
),
|
|
17200
|
-
selected ? /* @__PURE__ */ (0,
|
|
17793
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
17201
17794
|
"span",
|
|
17202
17795
|
{
|
|
17203
17796
|
className: "absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
|
|
17204
17797
|
"aria-hidden": true,
|
|
17205
|
-
children: /* @__PURE__ */ (0,
|
|
17798
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.Check, { className: "size-3", strokeWidth: 3 })
|
|
17206
17799
|
}
|
|
17207
17800
|
) : null
|
|
17208
17801
|
]
|
|
@@ -17211,9 +17804,9 @@ function ButtonStylePanel({
|
|
|
17211
17804
|
);
|
|
17212
17805
|
}) })
|
|
17213
17806
|
] }),
|
|
17214
|
-
/* @__PURE__ */ (0,
|
|
17215
|
-
/* @__PURE__ */ (0,
|
|
17216
|
-
/* @__PURE__ */ (0,
|
|
17807
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
17808
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Size" }),
|
|
17809
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
17217
17810
|
"div",
|
|
17218
17811
|
{
|
|
17219
17812
|
className: "flex w-full items-start rounded-lg bg-stone-100 p-1",
|
|
@@ -17221,7 +17814,7 @@ function ButtonStylePanel({
|
|
|
17221
17814
|
"aria-label": "Size",
|
|
17222
17815
|
children: BUTTON_SIZE_IDS.map((id) => {
|
|
17223
17816
|
const selected = id === size;
|
|
17224
|
-
return /* @__PURE__ */ (0,
|
|
17817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
17225
17818
|
"button",
|
|
17226
17819
|
{
|
|
17227
17820
|
type: "button",
|
|
@@ -18125,7 +18718,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
18125
18718
|
}
|
|
18126
18719
|
|
|
18127
18720
|
// src/useNavItemDrag.ts
|
|
18128
|
-
var
|
|
18721
|
+
var import_react17 = require("react");
|
|
18129
18722
|
function useNavItemDrag({
|
|
18130
18723
|
isEditMode,
|
|
18131
18724
|
editContentRef,
|
|
@@ -18149,11 +18742,11 @@ function useNavItemDrag({
|
|
|
18149
18742
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
18150
18743
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
18151
18744
|
}) {
|
|
18152
|
-
const navDragRef = (0,
|
|
18153
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
18154
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
18155
|
-
const navPointerDragRef = (0,
|
|
18156
|
-
const clearNavDragVisuals = (0,
|
|
18745
|
+
const navDragRef = (0, import_react17.useRef)(null);
|
|
18746
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react17.useState)([]);
|
|
18747
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react17.useState)(null);
|
|
18748
|
+
const navPointerDragRef = (0, import_react17.useRef)(null);
|
|
18749
|
+
const clearNavDragVisuals = (0, import_react17.useCallback)(() => {
|
|
18157
18750
|
const session = navDragRef.current;
|
|
18158
18751
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
18159
18752
|
navDragRef.current = null;
|
|
@@ -18186,7 +18779,7 @@ function useNavItemDrag({
|
|
|
18186
18779
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
18187
18780
|
unlockItemDragInteraction();
|
|
18188
18781
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
18189
|
-
const refreshNavDragVisuals = (0,
|
|
18782
|
+
const refreshNavDragVisuals = (0, import_react17.useCallback)(
|
|
18190
18783
|
(session, activeSlot, clientX, clientY) => {
|
|
18191
18784
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
18192
18785
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -18204,13 +18797,13 @@ function useNavItemDrag({
|
|
|
18204
18797
|
},
|
|
18205
18798
|
[setDraggedItemRect, setSiblingHintRects]
|
|
18206
18799
|
);
|
|
18207
|
-
const refreshNavDragVisualsRef = (0,
|
|
18800
|
+
const refreshNavDragVisualsRef = (0, import_react17.useRef)(refreshNavDragVisuals);
|
|
18208
18801
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
18209
|
-
const commitNavDragRef = (0,
|
|
18802
|
+
const commitNavDragRef = (0, import_react17.useRef)(() => {
|
|
18210
18803
|
});
|
|
18211
|
-
const beginNavDragRef = (0,
|
|
18804
|
+
const beginNavDragRef = (0, import_react17.useRef)(() => {
|
|
18212
18805
|
});
|
|
18213
|
-
const beginNavDrag = (0,
|
|
18806
|
+
const beginNavDrag = (0, import_react17.useCallback)(
|
|
18214
18807
|
(session) => {
|
|
18215
18808
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
18216
18809
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -18249,7 +18842,7 @@ function useNavItemDrag({
|
|
|
18249
18842
|
]
|
|
18250
18843
|
);
|
|
18251
18844
|
beginNavDragRef.current = beginNavDrag;
|
|
18252
|
-
const commitNavDrag = (0,
|
|
18845
|
+
const commitNavDrag = (0, import_react17.useCallback)(
|
|
18253
18846
|
(clientX, clientY) => {
|
|
18254
18847
|
const session = navDragRef.current;
|
|
18255
18848
|
if (!session) {
|
|
@@ -18328,7 +18921,7 @@ function useNavItemDrag({
|
|
|
18328
18921
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
18329
18922
|
);
|
|
18330
18923
|
commitNavDragRef.current = commitNavDrag;
|
|
18331
|
-
const startNavLinkDrag = (0,
|
|
18924
|
+
const startNavLinkDrag = (0, import_react17.useCallback)(
|
|
18332
18925
|
(anchor, clientX, clientY, wasSelected) => {
|
|
18333
18926
|
if (footerDragRef.current) return false;
|
|
18334
18927
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -18346,7 +18939,7 @@ function useNavItemDrag({
|
|
|
18346
18939
|
},
|
|
18347
18940
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
18348
18941
|
);
|
|
18349
|
-
const onNavDragOver = (0,
|
|
18942
|
+
const onNavDragOver = (0, import_react17.useCallback)(
|
|
18350
18943
|
(e) => {
|
|
18351
18944
|
const session = navDragRef.current;
|
|
18352
18945
|
if (!session) return false;
|
|
@@ -18358,7 +18951,7 @@ function useNavItemDrag({
|
|
|
18358
18951
|
},
|
|
18359
18952
|
[]
|
|
18360
18953
|
);
|
|
18361
|
-
(0,
|
|
18954
|
+
(0, import_react17.useEffect)(() => {
|
|
18362
18955
|
if (!isEditMode) return;
|
|
18363
18956
|
const THRESHOLD = 10;
|
|
18364
18957
|
const resolveWasSelected = (el) => {
|
|
@@ -18485,7 +19078,7 @@ function useNavItemDrag({
|
|
|
18485
19078
|
setLinkPopover,
|
|
18486
19079
|
suppressNextClickRef
|
|
18487
19080
|
]);
|
|
18488
|
-
const armNavPressFromChrome = (0,
|
|
19081
|
+
const armNavPressFromChrome = (0, import_react17.useCallback)(
|
|
18489
19082
|
(selected, clientX, clientY, pointerId) => {
|
|
18490
19083
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
18491
19084
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -18517,7 +19110,7 @@ function useNavItemDrag({
|
|
|
18517
19110
|
}
|
|
18518
19111
|
|
|
18519
19112
|
// src/useSectionDrag.ts
|
|
18520
|
-
var
|
|
19113
|
+
var import_react18 = require("react");
|
|
18521
19114
|
|
|
18522
19115
|
// src/lib/section-dnd.ts
|
|
18523
19116
|
function isFooterSection(el) {
|
|
@@ -18610,21 +19203,21 @@ function useSectionDrag({
|
|
|
18610
19203
|
suppressNextClickRef,
|
|
18611
19204
|
suppressClickUntilRef
|
|
18612
19205
|
}) {
|
|
18613
|
-
const sectionDragRef = (0,
|
|
18614
|
-
const [sectionDropSlots, setSectionDropSlots] = (0,
|
|
18615
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0,
|
|
18616
|
-
const [isSectionDragging, setIsSectionDragging] = (0,
|
|
18617
|
-
const sectionPointerDragRef = (0,
|
|
18618
|
-
const autoScrollRafRef = (0,
|
|
18619
|
-
const autoScrollDeltaRef = (0,
|
|
18620
|
-
const stopAutoScroll = (0,
|
|
19206
|
+
const sectionDragRef = (0, import_react18.useRef)(null);
|
|
19207
|
+
const [sectionDropSlots, setSectionDropSlots] = (0, import_react18.useState)([]);
|
|
19208
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react18.useState)(null);
|
|
19209
|
+
const [isSectionDragging, setIsSectionDragging] = (0, import_react18.useState)(false);
|
|
19210
|
+
const sectionPointerDragRef = (0, import_react18.useRef)(null);
|
|
19211
|
+
const autoScrollRafRef = (0, import_react18.useRef)(null);
|
|
19212
|
+
const autoScrollDeltaRef = (0, import_react18.useRef)(0);
|
|
19213
|
+
const stopAutoScroll = (0, import_react18.useCallback)(() => {
|
|
18621
19214
|
if (autoScrollRafRef.current != null) {
|
|
18622
19215
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
18623
19216
|
autoScrollRafRef.current = null;
|
|
18624
19217
|
}
|
|
18625
19218
|
autoScrollDeltaRef.current = 0;
|
|
18626
19219
|
}, []);
|
|
18627
|
-
const tickAutoScroll = (0,
|
|
19220
|
+
const tickAutoScroll = (0, import_react18.useCallback)(() => {
|
|
18628
19221
|
if (!sectionDragRef.current) {
|
|
18629
19222
|
stopAutoScroll();
|
|
18630
19223
|
return;
|
|
@@ -18634,7 +19227,7 @@ function useSectionDrag({
|
|
|
18634
19227
|
}
|
|
18635
19228
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
18636
19229
|
}, [postToParentRef, stopAutoScroll]);
|
|
18637
|
-
const updateAutoScroll = (0,
|
|
19230
|
+
const updateAutoScroll = (0, import_react18.useCallback)(
|
|
18638
19231
|
(clientY) => {
|
|
18639
19232
|
const clip = getIframeChromeClip(parentScrollRef.current);
|
|
18640
19233
|
let delta = 0;
|
|
@@ -18656,7 +19249,7 @@ function useSectionDrag({
|
|
|
18656
19249
|
},
|
|
18657
19250
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
18658
19251
|
);
|
|
18659
|
-
const clearSectionDragVisuals = (0,
|
|
19252
|
+
const clearSectionDragVisuals = (0, import_react18.useCallback)(() => {
|
|
18660
19253
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
18661
19254
|
sectionDragRef.current = null;
|
|
18662
19255
|
setSectionDropSlots([]);
|
|
@@ -18666,7 +19259,7 @@ function useSectionDrag({
|
|
|
18666
19259
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
18667
19260
|
unlockItemDragInteraction();
|
|
18668
19261
|
}, [stopAutoScroll]);
|
|
18669
|
-
const refreshSectionDragVisuals = (0,
|
|
19262
|
+
const refreshSectionDragVisuals = (0, import_react18.useCallback)(
|
|
18670
19263
|
(session, clientX, clientY) => {
|
|
18671
19264
|
session.lastClientX = clientX;
|
|
18672
19265
|
session.lastClientY = clientY;
|
|
@@ -18680,7 +19273,7 @@ function useSectionDrag({
|
|
|
18680
19273
|
},
|
|
18681
19274
|
[updateAutoScroll]
|
|
18682
19275
|
);
|
|
18683
|
-
const beginSectionDrag = (0,
|
|
19276
|
+
const beginSectionDrag = (0, import_react18.useCallback)(
|
|
18684
19277
|
(session) => {
|
|
18685
19278
|
sectionDragRef.current = session;
|
|
18686
19279
|
setIsSectionDragging(true);
|
|
@@ -18691,7 +19284,7 @@ function useSectionDrag({
|
|
|
18691
19284
|
},
|
|
18692
19285
|
[refreshSectionDragVisuals]
|
|
18693
19286
|
);
|
|
18694
|
-
const commitSectionDrag = (0,
|
|
19287
|
+
const commitSectionDrag = (0, import_react18.useCallback)(() => {
|
|
18695
19288
|
const session = sectionDragRef.current;
|
|
18696
19289
|
if (!session) {
|
|
18697
19290
|
clearSectionDragVisuals();
|
|
@@ -18720,7 +19313,7 @@ function useSectionDrag({
|
|
|
18720
19313
|
});
|
|
18721
19314
|
});
|
|
18722
19315
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
18723
|
-
const startSectionPressDrag = (0,
|
|
19316
|
+
const startSectionPressDrag = (0, import_react18.useCallback)(
|
|
18724
19317
|
(el, clientX, clientY, pointerId) => {
|
|
18725
19318
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
18726
19319
|
const instanceId = instanceIdOf(el);
|
|
@@ -18737,7 +19330,7 @@ function useSectionDrag({
|
|
|
18737
19330
|
},
|
|
18738
19331
|
[footerDragRef, navDragRef]
|
|
18739
19332
|
);
|
|
18740
|
-
(0,
|
|
19333
|
+
(0, import_react18.useEffect)(() => {
|
|
18741
19334
|
if (!isEditMode) return;
|
|
18742
19335
|
const onPointerDown = (e) => {
|
|
18743
19336
|
if (e.button !== 0) return;
|
|
@@ -18842,8 +19435,8 @@ function useSectionDrag({
|
|
|
18842
19435
|
}
|
|
18843
19436
|
|
|
18844
19437
|
// src/ui/footer-container-chrome.tsx
|
|
18845
|
-
var
|
|
18846
|
-
var
|
|
19438
|
+
var import_lucide_react19 = require("lucide-react");
|
|
19439
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
18847
19440
|
function FooterContainerChrome({
|
|
18848
19441
|
rect,
|
|
18849
19442
|
onAdd,
|
|
@@ -18851,7 +19444,7 @@ function FooterContainerChrome({
|
|
|
18851
19444
|
}) {
|
|
18852
19445
|
const chromeGap = 6;
|
|
18853
19446
|
const buttonMargin = 7;
|
|
18854
|
-
return /* @__PURE__ */ (0,
|
|
19447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
18855
19448
|
"div",
|
|
18856
19449
|
{
|
|
18857
19450
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -18863,8 +19456,8 @@ function FooterContainerChrome({
|
|
|
18863
19456
|
width: rect.width + chromeGap * 2,
|
|
18864
19457
|
height: rect.height + chromeGap * 2
|
|
18865
19458
|
},
|
|
18866
|
-
children: /* @__PURE__ */ (0,
|
|
18867
|
-
/* @__PURE__ */ (0,
|
|
19459
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Tooltip, { children: [
|
|
19460
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
18868
19461
|
"button",
|
|
18869
19462
|
{
|
|
18870
19463
|
type: "button",
|
|
@@ -18883,17 +19476,17 @@ function FooterContainerChrome({
|
|
|
18883
19476
|
if (addDisabled) return;
|
|
18884
19477
|
onAdd();
|
|
18885
19478
|
},
|
|
18886
|
-
children: /* @__PURE__ */ (0,
|
|
19479
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react19.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
18887
19480
|
}
|
|
18888
19481
|
) }),
|
|
18889
|
-
/* @__PURE__ */ (0,
|
|
19482
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
18890
19483
|
] })
|
|
18891
19484
|
}
|
|
18892
19485
|
) });
|
|
18893
19486
|
}
|
|
18894
19487
|
|
|
18895
19488
|
// src/lib/carousel.ts
|
|
18896
|
-
var
|
|
19489
|
+
var import_react19 = require("react");
|
|
18897
19490
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
18898
19491
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
18899
19492
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -18955,8 +19548,8 @@ function applyCarouselNode(key, val) {
|
|
|
18955
19548
|
return true;
|
|
18956
19549
|
}
|
|
18957
19550
|
function useOhwCarousel(key, initial) {
|
|
18958
|
-
const [images, setImages] = (0,
|
|
18959
|
-
(0,
|
|
19551
|
+
const [images, setImages] = (0, import_react19.useState)(initial);
|
|
19552
|
+
(0, import_react19.useEffect)(() => {
|
|
18960
19553
|
const el = document.querySelector(
|
|
18961
19554
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
18962
19555
|
);
|
|
@@ -19375,14 +19968,14 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
19375
19968
|
}
|
|
19376
19969
|
|
|
19377
19970
|
// src/ui/navbar-container-chrome.tsx
|
|
19378
|
-
var
|
|
19379
|
-
var
|
|
19971
|
+
var import_lucide_react20 = require("lucide-react");
|
|
19972
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
19380
19973
|
function NavbarContainerChrome({
|
|
19381
19974
|
rect,
|
|
19382
19975
|
onAdd
|
|
19383
19976
|
}) {
|
|
19384
19977
|
const chromeGap = 6;
|
|
19385
|
-
return /* @__PURE__ */ (0,
|
|
19978
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
19386
19979
|
"div",
|
|
19387
19980
|
{
|
|
19388
19981
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -19394,7 +19987,7 @@ function NavbarContainerChrome({
|
|
|
19394
19987
|
width: rect.width + chromeGap * 2,
|
|
19395
19988
|
height: rect.height + chromeGap * 2
|
|
19396
19989
|
},
|
|
19397
|
-
children: /* @__PURE__ */ (0,
|
|
19990
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
19398
19991
|
"button",
|
|
19399
19992
|
{
|
|
19400
19993
|
type: "button",
|
|
@@ -19411,7 +20004,7 @@ function NavbarContainerChrome({
|
|
|
19411
20004
|
e.stopPropagation();
|
|
19412
20005
|
onAdd();
|
|
19413
20006
|
},
|
|
19414
|
-
children: /* @__PURE__ */ (0,
|
|
20007
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react20.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
19415
20008
|
}
|
|
19416
20009
|
)
|
|
19417
20010
|
}
|
|
@@ -19420,7 +20013,7 @@ function NavbarContainerChrome({
|
|
|
19420
20013
|
|
|
19421
20014
|
// src/ui/drop-indicator.tsx
|
|
19422
20015
|
var React11 = __toESM(require("react"), 1);
|
|
19423
|
-
var
|
|
20016
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
19424
20017
|
var dropIndicatorVariants = cva(
|
|
19425
20018
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
19426
20019
|
{
|
|
@@ -19444,7 +20037,7 @@ var dropIndicatorVariants = cva(
|
|
|
19444
20037
|
);
|
|
19445
20038
|
var DropIndicator = React11.forwardRef(
|
|
19446
20039
|
({ className, direction, state, ...props }, ref) => {
|
|
19447
|
-
return /* @__PURE__ */ (0,
|
|
20040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
19448
20041
|
"div",
|
|
19449
20042
|
{
|
|
19450
20043
|
ref,
|
|
@@ -19461,7 +20054,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
19461
20054
|
DropIndicator.displayName = "DropIndicator";
|
|
19462
20055
|
|
|
19463
20056
|
// src/ui/badge.tsx
|
|
19464
|
-
var
|
|
20057
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
19465
20058
|
var badgeVariants = cva(
|
|
19466
20059
|
"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",
|
|
19467
20060
|
{
|
|
@@ -19479,13 +20072,13 @@ var badgeVariants = cva(
|
|
|
19479
20072
|
}
|
|
19480
20073
|
);
|
|
19481
20074
|
function Badge({ className, variant, ...props }) {
|
|
19482
|
-
return /* @__PURE__ */ (0,
|
|
20075
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
19483
20076
|
}
|
|
19484
20077
|
|
|
19485
20078
|
// src/OhhwellsBridge.tsx
|
|
19486
|
-
var
|
|
19487
|
-
var
|
|
19488
|
-
var
|
|
20079
|
+
var import_lucide_react21 = require("lucide-react");
|
|
20080
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
20081
|
+
var PRIMARY6 = "#0885FE";
|
|
19489
20082
|
var IMAGE_FADE_MS = 300;
|
|
19490
20083
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
19491
20084
|
function runOpacityFade(el, onDone) {
|
|
@@ -19606,7 +20199,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
19606
20199
|
schedulingRoots.set(container, root);
|
|
19607
20200
|
(0, import_react_dom4.flushSync)(() => {
|
|
19608
20201
|
root.render(
|
|
19609
|
-
/* @__PURE__ */ (0,
|
|
20202
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
19610
20203
|
SchedulingWidget,
|
|
19611
20204
|
{
|
|
19612
20205
|
notifyOnConnect: false,
|
|
@@ -19734,7 +20327,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
19734
20327
|
schedulingRoots.set(container, root);
|
|
19735
20328
|
(0, import_react_dom4.flushSync)(() => {
|
|
19736
20329
|
root.render(
|
|
19737
|
-
/* @__PURE__ */ (0,
|
|
20330
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
19738
20331
|
SchedulingWidget,
|
|
19739
20332
|
{
|
|
19740
20333
|
notifyOnConnect,
|
|
@@ -20471,7 +21064,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
20471
21064
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
20472
21065
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
20473
21066
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
20474
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
21067
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY6})`;
|
|
20475
21068
|
var TOOLBAR_GROUPS = [
|
|
20476
21069
|
[
|
|
20477
21070
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -20497,7 +21090,7 @@ function EditGlowChrome({
|
|
|
20497
21090
|
hideHandle = false
|
|
20498
21091
|
}) {
|
|
20499
21092
|
const GAP = SELECTION_CHROME_GAP2;
|
|
20500
|
-
return /* @__PURE__ */ (0,
|
|
21093
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
20501
21094
|
"div",
|
|
20502
21095
|
{
|
|
20503
21096
|
ref: elRef,
|
|
@@ -20512,7 +21105,7 @@ function EditGlowChrome({
|
|
|
20512
21105
|
zIndex: 2147483646
|
|
20513
21106
|
},
|
|
20514
21107
|
children: [
|
|
20515
|
-
/* @__PURE__ */ (0,
|
|
21108
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20516
21109
|
"div",
|
|
20517
21110
|
{
|
|
20518
21111
|
style: {
|
|
@@ -20526,7 +21119,7 @@ function EditGlowChrome({
|
|
|
20526
21119
|
}
|
|
20527
21120
|
}
|
|
20528
21121
|
),
|
|
20529
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
21122
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20530
21123
|
"div",
|
|
20531
21124
|
{
|
|
20532
21125
|
"data-ohw-drag-handle-container": "",
|
|
@@ -20538,7 +21131,7 @@ function EditGlowChrome({
|
|
|
20538
21131
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
20539
21132
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
20540
21133
|
},
|
|
20541
|
-
children: /* @__PURE__ */ (0,
|
|
21134
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20542
21135
|
DragHandle,
|
|
20543
21136
|
{
|
|
20544
21137
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -20715,9 +21308,9 @@ function FloatingToolbar({
|
|
|
20715
21308
|
showEditLink,
|
|
20716
21309
|
onEditLink
|
|
20717
21310
|
}) {
|
|
20718
|
-
const localRef =
|
|
20719
|
-
const [measuredW, setMeasuredW] =
|
|
20720
|
-
const setRefs =
|
|
21311
|
+
const localRef = import_react20.default.useRef(null);
|
|
21312
|
+
const [measuredW, setMeasuredW] = import_react20.default.useState(330);
|
|
21313
|
+
const setRefs = import_react20.default.useCallback(
|
|
20721
21314
|
(node) => {
|
|
20722
21315
|
localRef.current = node;
|
|
20723
21316
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -20729,7 +21322,7 @@ function FloatingToolbar({
|
|
|
20729
21322
|
},
|
|
20730
21323
|
[elRef]
|
|
20731
21324
|
);
|
|
20732
|
-
|
|
21325
|
+
import_react20.default.useLayoutEffect(() => {
|
|
20733
21326
|
const node = localRef.current;
|
|
20734
21327
|
if (!node) return;
|
|
20735
21328
|
const update = () => {
|
|
@@ -20742,7 +21335,7 @@ function FloatingToolbar({
|
|
|
20742
21335
|
return () => ro.disconnect();
|
|
20743
21336
|
}, [showEditLink, activeCommands]);
|
|
20744
21337
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
20745
|
-
return /* @__PURE__ */ (0,
|
|
21338
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20746
21339
|
"div",
|
|
20747
21340
|
{
|
|
20748
21341
|
ref: setRefs,
|
|
@@ -20754,12 +21347,12 @@ function FloatingToolbar({
|
|
|
20754
21347
|
zIndex: 2147483647,
|
|
20755
21348
|
pointerEvents: "auto"
|
|
20756
21349
|
},
|
|
20757
|
-
children: /* @__PURE__ */ (0,
|
|
20758
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
20759
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
21350
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(CustomToolbar, { children: [
|
|
21351
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react20.default.Fragment, { children: [
|
|
21352
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomToolbarDivider, {}),
|
|
20760
21353
|
btns.map((btn) => {
|
|
20761
21354
|
const isActive = activeCommands.has(btn.cmd);
|
|
20762
|
-
return /* @__PURE__ */ (0,
|
|
21355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20763
21356
|
CustomToolbarButton,
|
|
20764
21357
|
{
|
|
20765
21358
|
title: btn.title,
|
|
@@ -20768,7 +21361,7 @@ function FloatingToolbar({
|
|
|
20768
21361
|
e.preventDefault();
|
|
20769
21362
|
onCommand(btn.cmd);
|
|
20770
21363
|
},
|
|
20771
|
-
children: /* @__PURE__ */ (0,
|
|
21364
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20772
21365
|
"svg",
|
|
20773
21366
|
{
|
|
20774
21367
|
width: "16",
|
|
@@ -20789,7 +21382,7 @@ function FloatingToolbar({
|
|
|
20789
21382
|
);
|
|
20790
21383
|
})
|
|
20791
21384
|
] }, gi)),
|
|
20792
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
21385
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20793
21386
|
CustomToolbarButton,
|
|
20794
21387
|
{
|
|
20795
21388
|
type: "button",
|
|
@@ -20803,7 +21396,7 @@ function FloatingToolbar({
|
|
|
20803
21396
|
e.preventDefault();
|
|
20804
21397
|
e.stopPropagation();
|
|
20805
21398
|
},
|
|
20806
|
-
children: /* @__PURE__ */ (0,
|
|
21399
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react21.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
20807
21400
|
}
|
|
20808
21401
|
) : null
|
|
20809
21402
|
] })
|
|
@@ -20820,7 +21413,7 @@ function StateToggle({
|
|
|
20820
21413
|
states,
|
|
20821
21414
|
onStateChange
|
|
20822
21415
|
}) {
|
|
20823
|
-
return /* @__PURE__ */ (0,
|
|
21416
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20824
21417
|
ToggleGroup,
|
|
20825
21418
|
{
|
|
20826
21419
|
"data-ohw-state-toggle": "",
|
|
@@ -20834,7 +21427,7 @@ function StateToggle({
|
|
|
20834
21427
|
left: rect.right - 8,
|
|
20835
21428
|
transform: "translateX(-100%)"
|
|
20836
21429
|
},
|
|
20837
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
21430
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
20838
21431
|
}
|
|
20839
21432
|
);
|
|
20840
21433
|
}
|
|
@@ -20851,9 +21444,9 @@ var OHW_LOADER_STYLE = {
|
|
|
20851
21444
|
justifyContent: "center"
|
|
20852
21445
|
};
|
|
20853
21446
|
function OhwLoaderSpinner() {
|
|
20854
|
-
return /* @__PURE__ */ (0,
|
|
20855
|
-
/* @__PURE__ */ (0,
|
|
20856
|
-
/* @__PURE__ */ (0,
|
|
21447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
21448
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
21449
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20857
21450
|
"circle",
|
|
20858
21451
|
{
|
|
20859
21452
|
cx: "14",
|
|
@@ -20863,7 +21456,7 @@ function OhwLoaderSpinner() {
|
|
|
20863
21456
|
strokeWidth: "3",
|
|
20864
21457
|
strokeDasharray: "17 52",
|
|
20865
21458
|
strokeLinecap: "round",
|
|
20866
|
-
children: /* @__PURE__ */ (0,
|
|
21459
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20867
21460
|
"animateTransform",
|
|
20868
21461
|
{
|
|
20869
21462
|
attributeName: "transform",
|
|
@@ -20879,7 +21472,7 @@ function OhwLoaderSpinner() {
|
|
|
20879
21472
|
] });
|
|
20880
21473
|
}
|
|
20881
21474
|
function OhwBrandMark() {
|
|
20882
|
-
return /* @__PURE__ */ (0,
|
|
21475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
20883
21476
|
"svg",
|
|
20884
21477
|
{
|
|
20885
21478
|
width: "16",
|
|
@@ -20890,7 +21483,7 @@ function OhwBrandMark() {
|
|
|
20890
21483
|
style: { display: "block", flexShrink: 0 },
|
|
20891
21484
|
xmlns: "http://www.w3.org/2000/svg",
|
|
20892
21485
|
children: [
|
|
20893
|
-
/* @__PURE__ */ (0,
|
|
21486
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
20894
21487
|
"mask",
|
|
20895
21488
|
{
|
|
20896
21489
|
id: "ohw-badge-mark",
|
|
@@ -20900,15 +21493,15 @@ function OhwBrandMark() {
|
|
|
20900
21493
|
y: "0",
|
|
20901
21494
|
width: "48",
|
|
20902
21495
|
height: "48",
|
|
20903
|
-
children: /* @__PURE__ */ (0,
|
|
21496
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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" })
|
|
20904
21497
|
}
|
|
20905
21498
|
),
|
|
20906
|
-
/* @__PURE__ */ (0,
|
|
20907
|
-
/* @__PURE__ */ (0,
|
|
20908
|
-
/* @__PURE__ */ (0,
|
|
20909
|
-
/* @__PURE__ */ (0,
|
|
20910
|
-
/* @__PURE__ */ (0,
|
|
20911
|
-
/* @__PURE__ */ (0,
|
|
21499
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
21500
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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" }),
|
|
21501
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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" }),
|
|
21502
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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" }),
|
|
21503
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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" }),
|
|
21504
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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" })
|
|
20912
21505
|
] })
|
|
20913
21506
|
]
|
|
20914
21507
|
}
|
|
@@ -20945,7 +21538,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
20945
21538
|
whiteSpace: "nowrap"
|
|
20946
21539
|
};
|
|
20947
21540
|
function MadeWithOhhWells() {
|
|
20948
|
-
return /* @__PURE__ */ (0,
|
|
21541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
20949
21542
|
"a",
|
|
20950
21543
|
{
|
|
20951
21544
|
href: "https://ohhwells.com",
|
|
@@ -20955,8 +21548,8 @@ function MadeWithOhhWells() {
|
|
|
20955
21548
|
"data-ohw-badge": "",
|
|
20956
21549
|
style: OHW_BADGE_STYLE,
|
|
20957
21550
|
children: [
|
|
20958
|
-
/* @__PURE__ */ (0,
|
|
20959
|
-
/* @__PURE__ */ (0,
|
|
21551
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OhwBrandMark, {}),
|
|
21552
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
20960
21553
|
]
|
|
20961
21554
|
}
|
|
20962
21555
|
);
|
|
@@ -21002,8 +21595,8 @@ function OhhwellsBridge() {
|
|
|
21002
21595
|
const router = (0, import_navigation3.useRouter)();
|
|
21003
21596
|
const searchParams = (0, import_navigation3.useSearchParams)();
|
|
21004
21597
|
const isEditMode = isEditSessionActive();
|
|
21005
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
21006
|
-
(0,
|
|
21598
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react20.useState)(null);
|
|
21599
|
+
(0, import_react20.useEffect)(() => {
|
|
21007
21600
|
const figtreeFontId = "ohw-figtree-font";
|
|
21008
21601
|
if (!document.getElementById(figtreeFontId)) {
|
|
21009
21602
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -21029,8 +21622,8 @@ function OhhwellsBridge() {
|
|
|
21029
21622
|
};
|
|
21030
21623
|
}, []);
|
|
21031
21624
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
21032
|
-
const [subdomain, setSubdomain] = (0,
|
|
21033
|
-
(0,
|
|
21625
|
+
const [subdomain, setSubdomain] = (0, import_react20.useState)(() => resolveSubdomain(subdomainFromQuery));
|
|
21626
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
21034
21627
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
21035
21628
|
if (next !== subdomain) setSubdomain(next);
|
|
21036
21629
|
if (next) return;
|
|
@@ -21042,7 +21635,7 @@ function OhhwellsBridge() {
|
|
|
21042
21635
|
}, 0);
|
|
21043
21636
|
return () => window.clearTimeout(t);
|
|
21044
21637
|
}, [subdomainFromQuery, subdomain]);
|
|
21045
|
-
(0,
|
|
21638
|
+
(0, import_react20.useEffect)(() => {
|
|
21046
21639
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
21047
21640
|
const url = new URL(window.location.href);
|
|
21048
21641
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -21052,45 +21645,45 @@ function OhhwellsBridge() {
|
|
|
21052
21645
|
}, [subdomainFromQuery]);
|
|
21053
21646
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
21054
21647
|
useSavedLinkNavigation(isEditMode);
|
|
21055
|
-
const postToParent2 = (0,
|
|
21648
|
+
const postToParent2 = (0, import_react20.useCallback)((data) => {
|
|
21056
21649
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
21057
21650
|
window.parent.postMessage(data, "*");
|
|
21058
21651
|
}
|
|
21059
21652
|
}, []);
|
|
21060
|
-
const [fetchState, setFetchState] = (0,
|
|
21061
|
-
const [showBranding, setShowBranding] = (0,
|
|
21062
|
-
const autoSaveTimers = (0,
|
|
21063
|
-
const activeElRef = (0,
|
|
21064
|
-
const pointerHeldRef = (0,
|
|
21065
|
-
const selectedElRef = (0,
|
|
21066
|
-
const selectedHrefKeyRef = (0,
|
|
21067
|
-
const selectedFooterColAttrRef = (0,
|
|
21068
|
-
const originalContentRef = (0,
|
|
21069
|
-
const activeStateElRef = (0,
|
|
21070
|
-
const parentScrollRef = (0,
|
|
21071
|
-
const visibleViewportRef = (0,
|
|
21072
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
21073
|
-
const attachVisibleViewport = (0,
|
|
21653
|
+
const [fetchState, setFetchState] = (0, import_react20.useState)("idle");
|
|
21654
|
+
const [showBranding, setShowBranding] = (0, import_react20.useState)(false);
|
|
21655
|
+
const autoSaveTimers = (0, import_react20.useRef)(/* @__PURE__ */ new Map());
|
|
21656
|
+
const activeElRef = (0, import_react20.useRef)(null);
|
|
21657
|
+
const pointerHeldRef = (0, import_react20.useRef)(false);
|
|
21658
|
+
const selectedElRef = (0, import_react20.useRef)(null);
|
|
21659
|
+
const selectedHrefKeyRef = (0, import_react20.useRef)(null);
|
|
21660
|
+
const selectedFooterColAttrRef = (0, import_react20.useRef)(null);
|
|
21661
|
+
const originalContentRef = (0, import_react20.useRef)(null);
|
|
21662
|
+
const activeStateElRef = (0, import_react20.useRef)(null);
|
|
21663
|
+
const parentScrollRef = (0, import_react20.useRef)(null);
|
|
21664
|
+
const visibleViewportRef = (0, import_react20.useRef)(null);
|
|
21665
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react20.useState)(null);
|
|
21666
|
+
const attachVisibleViewport = (0, import_react20.useCallback)((node) => {
|
|
21074
21667
|
visibleViewportRef.current = node;
|
|
21075
21668
|
setDialogPortalContainer(node);
|
|
21076
21669
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
21077
21670
|
}, []);
|
|
21078
|
-
const toolbarElRef = (0,
|
|
21079
|
-
const glowElRef = (0,
|
|
21080
|
-
const hoveredImageRef = (0,
|
|
21081
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
21082
|
-
const dragOverElRef = (0,
|
|
21083
|
-
const [mediaHover, setMediaHover] = (0,
|
|
21084
|
-
const [selectedAiSectionId, setSelectedAiSectionId] = (0,
|
|
21085
|
-
const selectedAiSectionIdRef = (0,
|
|
21086
|
-
const handleAiSectionSelectionChange = (0,
|
|
21671
|
+
const toolbarElRef = (0, import_react20.useRef)(null);
|
|
21672
|
+
const glowElRef = (0, import_react20.useRef)(null);
|
|
21673
|
+
const hoveredImageRef = (0, import_react20.useRef)(null);
|
|
21674
|
+
const hoveredImageHasTextOverlapRef = (0, import_react20.useRef)(false);
|
|
21675
|
+
const dragOverElRef = (0, import_react20.useRef)(null);
|
|
21676
|
+
const [mediaHover, setMediaHover] = (0, import_react20.useState)(null);
|
|
21677
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react20.useState)(null);
|
|
21678
|
+
const selectedAiSectionIdRef = (0, import_react20.useRef)(null);
|
|
21679
|
+
const handleAiSectionSelectionChange = (0, import_react20.useCallback)((id) => {
|
|
21087
21680
|
selectedAiSectionIdRef.current = id;
|
|
21088
21681
|
setSelectedAiSectionId(id);
|
|
21089
21682
|
}, []);
|
|
21090
|
-
const [selectedMedia, setSelectedMedia] = (0,
|
|
21091
|
-
const selectedMediaElRef = (0,
|
|
21092
|
-
const mediaKeyDropTokenRef = (0,
|
|
21093
|
-
const clearMediaSelection = (0,
|
|
21683
|
+
const [selectedMedia, setSelectedMedia] = (0, import_react20.useState)(null);
|
|
21684
|
+
const selectedMediaElRef = (0, import_react20.useRef)(null);
|
|
21685
|
+
const mediaKeyDropTokenRef = (0, import_react20.useRef)(0);
|
|
21686
|
+
const clearMediaSelection = (0, import_react20.useCallback)(() => {
|
|
21094
21687
|
const prev = selectedMediaElRef.current;
|
|
21095
21688
|
selectedMediaElRef.current = null;
|
|
21096
21689
|
setSelectedMedia(null);
|
|
@@ -21115,9 +21708,9 @@ function OhhwellsBridge() {
|
|
|
21115
21708
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
21116
21709
|
}
|
|
21117
21710
|
}, []);
|
|
21118
|
-
const clearMediaSelectionRef = (0,
|
|
21711
|
+
const clearMediaSelectionRef = (0, import_react20.useRef)(clearMediaSelection);
|
|
21119
21712
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
21120
|
-
const selectMediaElement = (0,
|
|
21713
|
+
const selectMediaElement = (0, import_react20.useCallback)((el) => {
|
|
21121
21714
|
const r2 = el.getBoundingClientRect();
|
|
21122
21715
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
21123
21716
|
selectedMediaElRef.current = el;
|
|
@@ -21141,9 +21734,9 @@ function OhhwellsBridge() {
|
|
|
21141
21734
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
21142
21735
|
});
|
|
21143
21736
|
}, []);
|
|
21144
|
-
const selectMediaElementRef = (0,
|
|
21737
|
+
const selectMediaElementRef = (0, import_react20.useRef)(selectMediaElement);
|
|
21145
21738
|
selectMediaElementRef.current = selectMediaElement;
|
|
21146
|
-
(0,
|
|
21739
|
+
(0, import_react20.useEffect)(() => {
|
|
21147
21740
|
if (!selectedMedia) return;
|
|
21148
21741
|
const update = () => {
|
|
21149
21742
|
const el = selectedMediaElRef.current;
|
|
@@ -21163,54 +21756,54 @@ function OhhwellsBridge() {
|
|
|
21163
21756
|
window.removeEventListener("resize", update);
|
|
21164
21757
|
};
|
|
21165
21758
|
}, [selectedMedia !== null]);
|
|
21166
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
21167
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
21168
|
-
const hoveredGapRef = (0,
|
|
21169
|
-
const imageUnhoverTimerRef = (0,
|
|
21170
|
-
const imageShowTimerRef = (0,
|
|
21171
|
-
const editStylesRef = (0,
|
|
21172
|
-
const activateRef = (0,
|
|
21759
|
+
const [carouselHover, setCarouselHover] = (0, import_react20.useState)(null);
|
|
21760
|
+
const [uploadingRects, setUploadingRects] = (0, import_react20.useState)({});
|
|
21761
|
+
const hoveredGapRef = (0, import_react20.useRef)(null);
|
|
21762
|
+
const imageUnhoverTimerRef = (0, import_react20.useRef)(null);
|
|
21763
|
+
const imageShowTimerRef = (0, import_react20.useRef)(null);
|
|
21764
|
+
const editStylesRef = (0, import_react20.useRef)(null);
|
|
21765
|
+
const activateRef = (0, import_react20.useRef)(() => {
|
|
21173
21766
|
});
|
|
21174
|
-
const deactivateRef = (0,
|
|
21767
|
+
const deactivateRef = (0, import_react20.useRef)(() => {
|
|
21175
21768
|
});
|
|
21176
|
-
const selectRef = (0,
|
|
21769
|
+
const selectRef = (0, import_react20.useRef)(() => {
|
|
21177
21770
|
});
|
|
21178
|
-
const selectFrameRef = (0,
|
|
21771
|
+
const selectFrameRef = (0, import_react20.useRef)(() => {
|
|
21179
21772
|
});
|
|
21180
|
-
const selectLogoRef = (0,
|
|
21773
|
+
const selectLogoRef = (0, import_react20.useRef)(() => {
|
|
21181
21774
|
});
|
|
21182
|
-
const openLogoSizePanelRef = (0,
|
|
21775
|
+
const openLogoSizePanelRef = (0, import_react20.useRef)(() => {
|
|
21183
21776
|
});
|
|
21184
|
-
const deselectRef = (0,
|
|
21777
|
+
const deselectRef = (0, import_react20.useRef)(() => {
|
|
21185
21778
|
});
|
|
21186
|
-
const closeFloatingPanelOnlyRef = (0,
|
|
21779
|
+
const closeFloatingPanelOnlyRef = (0, import_react20.useRef)(() => {
|
|
21187
21780
|
});
|
|
21188
|
-
const reselectNavigationItemRef = (0,
|
|
21781
|
+
const reselectNavigationItemRef = (0, import_react20.useRef)(() => {
|
|
21189
21782
|
});
|
|
21190
|
-
const commitNavigationTextEditRef = (0,
|
|
21783
|
+
const commitNavigationTextEditRef = (0, import_react20.useRef)(() => {
|
|
21191
21784
|
});
|
|
21192
|
-
const handleDeleteSelectedRef = (0,
|
|
21193
|
-
const runPendingDeleteUndoRef = (0,
|
|
21194
|
-
const isFooterFrameSelectionRef = (0,
|
|
21195
|
-
const refreshActiveCommandsRef = (0,
|
|
21785
|
+
const handleDeleteSelectedRef = (0, import_react20.useRef)(() => false);
|
|
21786
|
+
const runPendingDeleteUndoRef = (0, import_react20.useRef)(() => false);
|
|
21787
|
+
const isFooterFrameSelectionRef = (0, import_react20.useRef)(false);
|
|
21788
|
+
const refreshActiveCommandsRef = (0, import_react20.useRef)(() => {
|
|
21196
21789
|
});
|
|
21197
|
-
const postToParentRef = (0,
|
|
21790
|
+
const postToParentRef = (0, import_react20.useRef)(postToParent2);
|
|
21198
21791
|
postToParentRef.current = postToParent2;
|
|
21199
|
-
const aiSectionApiRef = (0,
|
|
21200
|
-
const sectionsLoadedRef = (0,
|
|
21201
|
-
const pendingScheduleConfigRequests = (0,
|
|
21202
|
-
const [toolbarRect, setToolbarRect] = (0,
|
|
21203
|
-
const [formPickRect, setFormPickRect] = (0,
|
|
21204
|
-
const formPickElRef = (0,
|
|
21205
|
-
const [formViewState, setFormViewStateUi] = (0,
|
|
21206
|
-
const [formPickCount, setFormPickCount] = (0,
|
|
21207
|
-
const [formHoverRect, setFormHoverRect] = (0,
|
|
21208
|
-
const formHoverElRef = (0,
|
|
21209
|
-
const [fieldPickRect, setFieldPickRect] = (0,
|
|
21210
|
-
const fieldPickElRef = (0,
|
|
21211
|
-
const [fieldPickState, setFieldPickState] = (0,
|
|
21212
|
-
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0,
|
|
21213
|
-
const clearFormPick = (0,
|
|
21792
|
+
const aiSectionApiRef = (0, import_react20.useRef)(null);
|
|
21793
|
+
const sectionsLoadedRef = (0, import_react20.useRef)(false);
|
|
21794
|
+
const pendingScheduleConfigRequests = (0, import_react20.useRef)([]);
|
|
21795
|
+
const [toolbarRect, setToolbarRect] = (0, import_react20.useState)(null);
|
|
21796
|
+
const [formPickRect, setFormPickRect] = (0, import_react20.useState)(null);
|
|
21797
|
+
const formPickElRef = (0, import_react20.useRef)(null);
|
|
21798
|
+
const [formViewState, setFormViewStateUi] = (0, import_react20.useState)("default");
|
|
21799
|
+
const [formPickCount, setFormPickCount] = (0, import_react20.useState)(null);
|
|
21800
|
+
const [formHoverRect, setFormHoverRect] = (0, import_react20.useState)(null);
|
|
21801
|
+
const formHoverElRef = (0, import_react20.useRef)(null);
|
|
21802
|
+
const [fieldPickRect, setFieldPickRect] = (0, import_react20.useState)(null);
|
|
21803
|
+
const fieldPickElRef = (0, import_react20.useRef)(null);
|
|
21804
|
+
const [fieldPickState, setFieldPickState] = (0, import_react20.useState)(null);
|
|
21805
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react20.useState)(false);
|
|
21806
|
+
const clearFormPick = (0, import_react20.useCallback)(() => {
|
|
21214
21807
|
const form = formPickElRef.current;
|
|
21215
21808
|
const editing = fieldPickElRef.current;
|
|
21216
21809
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -21230,7 +21823,7 @@ function OhhwellsBridge() {
|
|
|
21230
21823
|
formPickElRef.current = null;
|
|
21231
21824
|
setFormPickRect(null);
|
|
21232
21825
|
}, []);
|
|
21233
|
-
const clearFieldPick = (0,
|
|
21826
|
+
const clearFieldPick = (0, import_react20.useCallback)(() => {
|
|
21234
21827
|
const wrapper = fieldPickElRef.current;
|
|
21235
21828
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
21236
21829
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -21240,9 +21833,9 @@ function OhhwellsBridge() {
|
|
|
21240
21833
|
setFieldPickRect(null);
|
|
21241
21834
|
setFieldPickState(null);
|
|
21242
21835
|
}, []);
|
|
21243
|
-
const persistFieldsRef = (0,
|
|
21836
|
+
const persistFieldsRef = (0, import_react20.useRef)(() => {
|
|
21244
21837
|
});
|
|
21245
|
-
const persistFields = (0,
|
|
21838
|
+
const persistFields = (0, import_react20.useCallback)(
|
|
21246
21839
|
(form) => {
|
|
21247
21840
|
const key = formKeyOf(form);
|
|
21248
21841
|
if (!key) return;
|
|
@@ -21253,7 +21846,7 @@ function OhhwellsBridge() {
|
|
|
21253
21846
|
[]
|
|
21254
21847
|
);
|
|
21255
21848
|
persistFieldsRef.current = persistFields;
|
|
21256
|
-
const selectField = (0,
|
|
21849
|
+
const selectField = (0, import_react20.useCallback)((wrapper) => {
|
|
21257
21850
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
21258
21851
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
21259
21852
|
}
|
|
@@ -21266,7 +21859,7 @@ function OhhwellsBridge() {
|
|
|
21266
21859
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
21267
21860
|
setFieldTypePickerOpen(false);
|
|
21268
21861
|
}, []);
|
|
21269
|
-
const withSelectedField = (0,
|
|
21862
|
+
const withSelectedField = (0, import_react20.useCallback)(
|
|
21270
21863
|
(run) => {
|
|
21271
21864
|
const wrapper = fieldPickElRef.current;
|
|
21272
21865
|
const form = formPickElRef.current;
|
|
@@ -21279,28 +21872,28 @@ function OhhwellsBridge() {
|
|
|
21279
21872
|
},
|
|
21280
21873
|
[persistFields]
|
|
21281
21874
|
);
|
|
21282
|
-
const handleFieldTypeChange = (0,
|
|
21875
|
+
const handleFieldTypeChange = (0, import_react20.useCallback)(
|
|
21283
21876
|
(type) => withSelectedField((_form, wrapper) => {
|
|
21284
21877
|
applyFieldType(wrapper, type);
|
|
21285
21878
|
selectField(wrapper);
|
|
21286
21879
|
}),
|
|
21287
21880
|
[selectField, withSelectedField]
|
|
21288
21881
|
);
|
|
21289
|
-
const handleFieldRequiredToggle = (0,
|
|
21882
|
+
const handleFieldRequiredToggle = (0, import_react20.useCallback)(
|
|
21290
21883
|
() => withSelectedField((_form, wrapper) => {
|
|
21291
21884
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
21292
21885
|
selectField(wrapper);
|
|
21293
21886
|
}),
|
|
21294
21887
|
[selectField, withSelectedField]
|
|
21295
21888
|
);
|
|
21296
|
-
const handleFieldDuplicate = (0,
|
|
21889
|
+
const handleFieldDuplicate = (0, import_react20.useCallback)(
|
|
21297
21890
|
() => withSelectedField((form, wrapper) => {
|
|
21298
21891
|
const copy = duplicateField(form, wrapper);
|
|
21299
21892
|
selectField(copy);
|
|
21300
21893
|
}),
|
|
21301
21894
|
[selectField, withSelectedField]
|
|
21302
21895
|
);
|
|
21303
|
-
const handleFieldDelete = (0,
|
|
21896
|
+
const handleFieldDelete = (0, import_react20.useCallback)(
|
|
21304
21897
|
() => withSelectedField((_form, wrapper) => {
|
|
21305
21898
|
removeField(wrapper);
|
|
21306
21899
|
clearFieldPick();
|
|
@@ -21308,7 +21901,7 @@ function OhhwellsBridge() {
|
|
|
21308
21901
|
}),
|
|
21309
21902
|
[clearFieldPick, withSelectedField]
|
|
21310
21903
|
);
|
|
21311
|
-
const handleAddField = (0,
|
|
21904
|
+
const handleAddField = (0, import_react20.useCallback)(
|
|
21312
21905
|
(type) => {
|
|
21313
21906
|
const form = formPickElRef.current;
|
|
21314
21907
|
if (!form) return;
|
|
@@ -21324,8 +21917,8 @@ function OhhwellsBridge() {
|
|
|
21324
21917
|
},
|
|
21325
21918
|
[persistFields, selectField]
|
|
21326
21919
|
);
|
|
21327
|
-
const fieldDragRef = (0,
|
|
21328
|
-
const buildFieldDropSlots = (0,
|
|
21920
|
+
const fieldDragRef = (0, import_react20.useRef)(null);
|
|
21921
|
+
const buildFieldDropSlots = (0, import_react20.useCallback)((form, draggedKey) => {
|
|
21329
21922
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
21330
21923
|
const slots = others.map((el) => {
|
|
21331
21924
|
const rect = el.getBoundingClientRect();
|
|
@@ -21338,7 +21931,7 @@ function OhhwellsBridge() {
|
|
|
21338
21931
|
}
|
|
21339
21932
|
return slots;
|
|
21340
21933
|
}, []);
|
|
21341
|
-
const handleFieldDragStart = (0,
|
|
21934
|
+
const handleFieldDragStart = (0, import_react20.useCallback)(() => {
|
|
21342
21935
|
const wrapper = fieldPickElRef.current;
|
|
21343
21936
|
const form = formPickElRef.current;
|
|
21344
21937
|
if (!wrapper || !form) return;
|
|
@@ -21347,18 +21940,18 @@ function OhhwellsBridge() {
|
|
|
21347
21940
|
setFieldDragging(true);
|
|
21348
21941
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
21349
21942
|
}, [buildFieldDropSlots]);
|
|
21350
|
-
const handleFieldDragEnd = (0,
|
|
21943
|
+
const handleFieldDragEnd = (0, import_react20.useCallback)(() => {
|
|
21351
21944
|
fieldDragRef.current = null;
|
|
21352
21945
|
setFieldDropIndex(null);
|
|
21353
21946
|
setFieldDropSlots([]);
|
|
21354
21947
|
setFieldDragging(false);
|
|
21355
21948
|
}, []);
|
|
21356
|
-
const [fieldDropIndex, setFieldDropIndex] = (0,
|
|
21357
|
-
const [fieldDropSlots, setFieldDropSlots] = (0,
|
|
21358
|
-
const [fieldDragging, setFieldDragging] = (0,
|
|
21359
|
-
const clearFormPickRef = (0,
|
|
21949
|
+
const [fieldDropIndex, setFieldDropIndex] = (0, import_react20.useState)(null);
|
|
21950
|
+
const [fieldDropSlots, setFieldDropSlots] = (0, import_react20.useState)([]);
|
|
21951
|
+
const [fieldDragging, setFieldDragging] = (0, import_react20.useState)(false);
|
|
21952
|
+
const clearFormPickRef = (0, import_react20.useRef)(clearFormPick);
|
|
21360
21953
|
clearFormPickRef.current = clearFormPick;
|
|
21361
|
-
(0,
|
|
21954
|
+
(0, import_react20.useEffect)(() => {
|
|
21362
21955
|
const el = fieldPickElRef.current;
|
|
21363
21956
|
if (!el || fieldPickRect === null) return;
|
|
21364
21957
|
const observer = new ResizeObserver(() => {
|
|
@@ -21367,7 +21960,7 @@ function OhhwellsBridge() {
|
|
|
21367
21960
|
observer.observe(el);
|
|
21368
21961
|
return () => observer.disconnect();
|
|
21369
21962
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
21370
|
-
(0,
|
|
21963
|
+
(0, import_react20.useEffect)(() => {
|
|
21371
21964
|
const el = formPickElRef.current;
|
|
21372
21965
|
if (!el || formPickRect === null) return;
|
|
21373
21966
|
const observer = new ResizeObserver(() => {
|
|
@@ -21376,25 +21969,25 @@ function OhhwellsBridge() {
|
|
|
21376
21969
|
observer.observe(el);
|
|
21377
21970
|
return () => observer.disconnect();
|
|
21378
21971
|
}, [formPickRect !== null, formViewState]);
|
|
21379
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
21380
|
-
const toolbarVariantRef = (0,
|
|
21972
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react20.useState)("none");
|
|
21973
|
+
const toolbarVariantRef = (0, import_react20.useRef)("none");
|
|
21381
21974
|
toolbarVariantRef.current = toolbarVariant;
|
|
21382
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
21383
|
-
const [selectedIsSocial, setSelectedIsSocial] = (0,
|
|
21384
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0,
|
|
21385
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
21386
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
21387
|
-
const [toggleState, setToggleState] = (0,
|
|
21388
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
21389
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
21390
|
-
const [sectionGap, setSectionGap] = (0,
|
|
21391
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
21392
|
-
const hoveredNavContainerRef = (0,
|
|
21393
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
21394
|
-
const hoveredItemElRef = (0,
|
|
21395
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
21396
|
-
const [hoveredTextRect, setHoveredTextRect] = (0,
|
|
21397
|
-
(0,
|
|
21975
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react20.useState)(false);
|
|
21976
|
+
const [selectedIsSocial, setSelectedIsSocial] = (0, import_react20.useState)(false);
|
|
21977
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react20.useState)(false);
|
|
21978
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react20.useState)(null);
|
|
21979
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react20.useState)(false);
|
|
21980
|
+
const [toggleState, setToggleState] = (0, import_react20.useState)(null);
|
|
21981
|
+
const [maxBadge, setMaxBadge] = (0, import_react20.useState)(null);
|
|
21982
|
+
const [activeCommands, setActiveCommands] = (0, import_react20.useState)(/* @__PURE__ */ new Set());
|
|
21983
|
+
const [sectionGap, setSectionGap] = (0, import_react20.useState)(null);
|
|
21984
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react20.useState)(false);
|
|
21985
|
+
const hoveredNavContainerRef = (0, import_react20.useRef)(null);
|
|
21986
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react20.useState)(null);
|
|
21987
|
+
const hoveredItemElRef = (0, import_react20.useRef)(null);
|
|
21988
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react20.useState)(null);
|
|
21989
|
+
const [hoveredTextRect, setHoveredTextRect] = (0, import_react20.useState)(null);
|
|
21990
|
+
(0, import_react20.useEffect)(() => {
|
|
21398
21991
|
const sync = () => {
|
|
21399
21992
|
const el = document.querySelector(
|
|
21400
21993
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -21438,60 +22031,60 @@ function OhhwellsBridge() {
|
|
|
21438
22031
|
});
|
|
21439
22032
|
return () => observer.disconnect();
|
|
21440
22033
|
}, []);
|
|
21441
|
-
const siblingHintElRef = (0,
|
|
21442
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
21443
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
21444
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
21445
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
22034
|
+
const siblingHintElRef = (0, import_react20.useRef)(null);
|
|
22035
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react20.useState)(null);
|
|
22036
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react20.useState)([]);
|
|
22037
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react20.useState)(false);
|
|
22038
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react20.useState)(false);
|
|
21446
22039
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
21447
|
-
const [floatingPanel, setFloatingPanel] = (0,
|
|
21448
|
-
const floatingPanelOpenRef = (0,
|
|
22040
|
+
const [floatingPanel, setFloatingPanel] = (0, import_react20.useState)(null);
|
|
22041
|
+
const floatingPanelOpenRef = (0, import_react20.useRef)(false);
|
|
21449
22042
|
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
21450
|
-
const floatingPanelRef = (0,
|
|
22043
|
+
const floatingPanelRef = (0, import_react20.useRef)(null);
|
|
21451
22044
|
floatingPanelRef.current = floatingPanel;
|
|
21452
|
-
const [floatingPanelPos, setFloatingPanelPos] = (0,
|
|
21453
|
-
const buttonCollectionDragRef = (0,
|
|
21454
|
-
const buttonDropInsertIndexRef = (0,
|
|
21455
|
-
const [buttonDropSlots, setButtonDropSlots] = (0,
|
|
21456
|
-
const [activeButtonDropIndex, setActiveButtonDropIndex] = (0,
|
|
21457
|
-
const buttonPointerDragRef = (0,
|
|
21458
|
-
const [buttonStyleTick, setButtonStyleTick] = (0,
|
|
21459
|
-
const [logoSizeDraft, setLogoSizeDraft] = (0,
|
|
21460
|
-
const [editorViewport, setEditorViewport] = (0,
|
|
21461
|
-
const [parentScrollSnap, setParentScrollSnap] = (0,
|
|
21462
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0,
|
|
21463
|
-
const [footerHeadingVisible, setFooterHeadingVisible] = (0,
|
|
21464
|
-
const footerDragRef = (0,
|
|
21465
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
21466
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
21467
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
21468
|
-
const footerPointerDragRef = (0,
|
|
21469
|
-
const suppressNextClickRef = (0,
|
|
21470
|
-
const suppressClickUntilRef = (0,
|
|
21471
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
21472
|
-
const linkPopoverSessionRef = (0,
|
|
21473
|
-
const addNavAfterAnchorRef = (0,
|
|
21474
|
-
const editContentRef = (0,
|
|
21475
|
-
const aiSectionsRef = (0,
|
|
21476
|
-
const applyTreeLocalRef = (0,
|
|
22045
|
+
const [floatingPanelPos, setFloatingPanelPos] = (0, import_react20.useState)(null);
|
|
22046
|
+
const buttonCollectionDragRef = (0, import_react20.useRef)(null);
|
|
22047
|
+
const buttonDropInsertIndexRef = (0, import_react20.useRef)(null);
|
|
22048
|
+
const [buttonDropSlots, setButtonDropSlots] = (0, import_react20.useState)([]);
|
|
22049
|
+
const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react20.useState)(null);
|
|
22050
|
+
const buttonPointerDragRef = (0, import_react20.useRef)(null);
|
|
22051
|
+
const [buttonStyleTick, setButtonStyleTick] = (0, import_react20.useState)(0);
|
|
22052
|
+
const [logoSizeDraft, setLogoSizeDraft] = (0, import_react20.useState)(null);
|
|
22053
|
+
const [editorViewport, setEditorViewport] = (0, import_react20.useState)("desktop");
|
|
22054
|
+
const [parentScrollSnap, setParentScrollSnap] = (0, import_react20.useState)(null);
|
|
22055
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react20.useState)(null);
|
|
22056
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react20.useState)(null);
|
|
22057
|
+
const footerDragRef = (0, import_react20.useRef)(null);
|
|
22058
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react20.useState)([]);
|
|
22059
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react20.useState)(null);
|
|
22060
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react20.useState)(null);
|
|
22061
|
+
const footerPointerDragRef = (0, import_react20.useRef)(null);
|
|
22062
|
+
const suppressNextClickRef = (0, import_react20.useRef)(false);
|
|
22063
|
+
const suppressClickUntilRef = (0, import_react20.useRef)(0);
|
|
22064
|
+
const [linkPopover, setLinkPopover] = (0, import_react20.useState)(null);
|
|
22065
|
+
const linkPopoverSessionRef = (0, import_react20.useRef)(null);
|
|
22066
|
+
const addNavAfterAnchorRef = (0, import_react20.useRef)(null);
|
|
22067
|
+
const editContentRef = (0, import_react20.useRef)({});
|
|
22068
|
+
const aiSectionsRef = (0, import_react20.useRef)("");
|
|
22069
|
+
const applyTreeLocalRef = (0, import_react20.useRef)(
|
|
21477
22070
|
null
|
|
21478
22071
|
);
|
|
21479
|
-
const clearInteractionChromeRef = (0,
|
|
22072
|
+
const clearInteractionChromeRef = (0, import_react20.useRef)(() => {
|
|
21480
22073
|
});
|
|
21481
|
-
const brandKitRef = (0,
|
|
21482
|
-
const stylesRef = (0,
|
|
21483
|
-
const appliedDrawerRef = (0,
|
|
21484
|
-
const pendingDeleteUndoRef = (0,
|
|
21485
|
-
const [sitePages, setSitePages] = (0,
|
|
21486
|
-
const [sectionsByPath, setSectionsByPath] = (0,
|
|
21487
|
-
const sectionsPrefetchGenRef = (0,
|
|
21488
|
-
const setLinkPopoverRef = (0,
|
|
21489
|
-
const linkPopoverPanelRef = (0,
|
|
21490
|
-
const linkPopoverOpenRef = (0,
|
|
21491
|
-
const linkPopoverGraceUntilRef = (0,
|
|
22074
|
+
const brandKitRef = (0, import_react20.useRef)("");
|
|
22075
|
+
const stylesRef = (0, import_react20.useRef)("");
|
|
22076
|
+
const appliedDrawerRef = (0, import_react20.useRef)(null);
|
|
22077
|
+
const pendingDeleteUndoRef = (0, import_react20.useRef)(null);
|
|
22078
|
+
const [sitePages, setSitePages] = (0, import_react20.useState)([]);
|
|
22079
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react20.useState)({});
|
|
22080
|
+
const sectionsPrefetchGenRef = (0, import_react20.useRef)(0);
|
|
22081
|
+
const setLinkPopoverRef = (0, import_react20.useRef)(setLinkPopover);
|
|
22082
|
+
const linkPopoverPanelRef = (0, import_react20.useRef)(null);
|
|
22083
|
+
const linkPopoverOpenRef = (0, import_react20.useRef)(false);
|
|
22084
|
+
const linkPopoverGraceUntilRef = (0, import_react20.useRef)(0);
|
|
21492
22085
|
setLinkPopoverRef.current = setLinkPopover;
|
|
21493
22086
|
linkPopoverSessionRef.current = linkPopover;
|
|
21494
|
-
(0,
|
|
22087
|
+
(0, import_react20.useEffect)(() => {
|
|
21495
22088
|
setSectionOrderPersistHandler((entries) => {
|
|
21496
22089
|
const currentPath = window.location.pathname;
|
|
21497
22090
|
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
@@ -21547,7 +22140,7 @@ function OhhwellsBridge() {
|
|
|
21547
22140
|
const bumpLinkPopoverGrace = () => {
|
|
21548
22141
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
21549
22142
|
};
|
|
21550
|
-
const runSectionsPrefetch = (0,
|
|
22143
|
+
const runSectionsPrefetch = (0, import_react20.useCallback)((pages) => {
|
|
21551
22144
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
21552
22145
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
21553
22146
|
const paths = pages.map((p) => p.path);
|
|
@@ -21566,9 +22159,9 @@ function OhhwellsBridge() {
|
|
|
21566
22159
|
);
|
|
21567
22160
|
});
|
|
21568
22161
|
}, [isEditMode, pathname]);
|
|
21569
|
-
const runSectionsPrefetchRef = (0,
|
|
22162
|
+
const runSectionsPrefetchRef = (0, import_react20.useRef)(runSectionsPrefetch);
|
|
21570
22163
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
21571
|
-
(0,
|
|
22164
|
+
(0, import_react20.useEffect)(() => {
|
|
21572
22165
|
if (!linkPopover) {
|
|
21573
22166
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21574
22167
|
return;
|
|
@@ -21596,7 +22189,7 @@ function OhhwellsBridge() {
|
|
|
21596
22189
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21597
22190
|
};
|
|
21598
22191
|
}, [linkPopover, postToParent2]);
|
|
21599
|
-
(0,
|
|
22192
|
+
(0, import_react20.useEffect)(() => {
|
|
21600
22193
|
if (!isEditMode) return;
|
|
21601
22194
|
const useFixtures = shouldUseDevFixtures();
|
|
21602
22195
|
if (useFixtures) {
|
|
@@ -21620,14 +22213,14 @@ function OhhwellsBridge() {
|
|
|
21620
22213
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
21621
22214
|
return () => window.removeEventListener("message", onSitePages);
|
|
21622
22215
|
}, [isEditMode, postToParent2]);
|
|
21623
|
-
(0,
|
|
22216
|
+
(0, import_react20.useEffect)(() => {
|
|
21624
22217
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
21625
22218
|
void loadAllSectionsManifest().then((manifest) => {
|
|
21626
22219
|
if (Object.keys(manifest).length === 0) return;
|
|
21627
22220
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
21628
22221
|
});
|
|
21629
22222
|
}, [isEditMode]);
|
|
21630
|
-
(0,
|
|
22223
|
+
(0, import_react20.useEffect)(() => {
|
|
21631
22224
|
const update = () => {
|
|
21632
22225
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
21633
22226
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -21651,10 +22244,10 @@ function OhhwellsBridge() {
|
|
|
21651
22244
|
vvp.removeEventListener("resize", update);
|
|
21652
22245
|
};
|
|
21653
22246
|
}, []);
|
|
21654
|
-
const refreshStateRules = (0,
|
|
22247
|
+
const refreshStateRules = (0, import_react20.useCallback)(() => {
|
|
21655
22248
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
21656
22249
|
}, []);
|
|
21657
|
-
const processConfigRequest = (0,
|
|
22250
|
+
const processConfigRequest = (0, import_react20.useCallback)((insertAfterVal) => {
|
|
21658
22251
|
const tracker = getSectionsTracker();
|
|
21659
22252
|
let entries = [];
|
|
21660
22253
|
try {
|
|
@@ -21677,7 +22270,7 @@ function OhhwellsBridge() {
|
|
|
21677
22270
|
}
|
|
21678
22271
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
21679
22272
|
}, [isEditMode]);
|
|
21680
|
-
const deactivate = (0,
|
|
22273
|
+
const deactivate = (0, import_react20.useCallback)(() => {
|
|
21681
22274
|
const el = activeElRef.current;
|
|
21682
22275
|
if (!el) return;
|
|
21683
22276
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -21728,12 +22321,12 @@ function OhhwellsBridge() {
|
|
|
21728
22321
|
setToolbarShowEditLink(false);
|
|
21729
22322
|
postToParent2({ type: "ow:exit-edit" });
|
|
21730
22323
|
}, [postToParent2]);
|
|
21731
|
-
const clearSelectedAttr = (0,
|
|
22324
|
+
const clearSelectedAttr = (0, import_react20.useCallback)(() => {
|
|
21732
22325
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
21733
22326
|
el.removeAttribute("data-ohw-selected");
|
|
21734
22327
|
});
|
|
21735
22328
|
}, []);
|
|
21736
|
-
const deselect = (0,
|
|
22329
|
+
const deselect = (0, import_react20.useCallback)(() => {
|
|
21737
22330
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
21738
22331
|
clearSelectedAttr();
|
|
21739
22332
|
selectedElRef.current = null;
|
|
@@ -21768,20 +22361,20 @@ function OhhwellsBridge() {
|
|
|
21768
22361
|
setToolbarVariant("none");
|
|
21769
22362
|
}
|
|
21770
22363
|
}, [clearSelectedAttr]);
|
|
21771
|
-
const markSelected = (0,
|
|
22364
|
+
const markSelected = (0, import_react20.useCallback)((el) => {
|
|
21772
22365
|
clearSelectedAttr();
|
|
21773
22366
|
el.removeAttribute("data-ohw-hovered");
|
|
21774
22367
|
el.setAttribute("data-ohw-selected", "");
|
|
21775
22368
|
}, [clearSelectedAttr]);
|
|
21776
|
-
const isSelectedForHover = (0,
|
|
22369
|
+
const isSelectedForHover = (0, import_react20.useCallback)((el) => {
|
|
21777
22370
|
if (!el) return false;
|
|
21778
22371
|
return [selectedElRef.current, activeElRef.current].some(
|
|
21779
22372
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
21780
22373
|
);
|
|
21781
22374
|
}, []);
|
|
21782
|
-
const isSelectedForHoverRef = (0,
|
|
22375
|
+
const isSelectedForHoverRef = (0, import_react20.useRef)(isSelectedForHover);
|
|
21783
22376
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
21784
|
-
const resolveHrefKeyElement = (0,
|
|
22377
|
+
const resolveHrefKeyElement = (0, import_react20.useCallback)((hrefKey) => {
|
|
21785
22378
|
if (isFooterHrefKey(hrefKey)) {
|
|
21786
22379
|
return document.querySelector(
|
|
21787
22380
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -21796,7 +22389,7 @@ function OhhwellsBridge() {
|
|
|
21796
22389
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
21797
22390
|
);
|
|
21798
22391
|
}, []);
|
|
21799
|
-
const resyncSelectedNavigationItem = (0,
|
|
22392
|
+
const resyncSelectedNavigationItem = (0, import_react20.useCallback)(() => {
|
|
21800
22393
|
const hrefKey = selectedHrefKeyRef.current;
|
|
21801
22394
|
if (hrefKey) {
|
|
21802
22395
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -21834,7 +22427,7 @@ function OhhwellsBridge() {
|
|
|
21834
22427
|
);
|
|
21835
22428
|
}
|
|
21836
22429
|
}, [resolveHrefKeyElement]);
|
|
21837
|
-
const reselectNavigationItem = (0,
|
|
22430
|
+
const reselectNavigationItem = (0, import_react20.useCallback)((navAnchor) => {
|
|
21838
22431
|
selectedElRef.current = navAnchor;
|
|
21839
22432
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
21840
22433
|
selectedFooterColAttrRef.current = null;
|
|
@@ -21865,7 +22458,7 @@ function OhhwellsBridge() {
|
|
|
21865
22458
|
setToolbarShowEditLink(false);
|
|
21866
22459
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
21867
22460
|
}, [markSelected]);
|
|
21868
|
-
const commitNavigationTextEdit = (0,
|
|
22461
|
+
const commitNavigationTextEdit = (0, import_react20.useCallback)((navAnchor) => {
|
|
21869
22462
|
const el = activeElRef.current;
|
|
21870
22463
|
if (!el) return;
|
|
21871
22464
|
const key = el.dataset.ohwKey;
|
|
@@ -21898,7 +22491,7 @@ function OhhwellsBridge() {
|
|
|
21898
22491
|
postToParent2({ type: "ow:exit-edit" });
|
|
21899
22492
|
reselectNavigationItem(navAnchor);
|
|
21900
22493
|
}, [postToParent2, reselectNavigationItem]);
|
|
21901
|
-
const handleAddTopLevelNavItem = (0,
|
|
22494
|
+
const handleAddTopLevelNavItem = (0, import_react20.useCallback)(() => {
|
|
21902
22495
|
const items = listNavbarRootItems();
|
|
21903
22496
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
21904
22497
|
deselectRef.current();
|
|
@@ -21910,7 +22503,7 @@ function OhhwellsBridge() {
|
|
|
21910
22503
|
intent: "add-nav"
|
|
21911
22504
|
});
|
|
21912
22505
|
}, []);
|
|
21913
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
22506
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react20.useCallback)(
|
|
21914
22507
|
(anchor) => {
|
|
21915
22508
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
21916
22509
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -21923,7 +22516,7 @@ function OhhwellsBridge() {
|
|
|
21923
22516
|
},
|
|
21924
22517
|
[postToParent2]
|
|
21925
22518
|
);
|
|
21926
|
-
const handleNavDropdownOpenChange = (0,
|
|
22519
|
+
const handleNavDropdownOpenChange = (0, import_react20.useCallback)((open) => {
|
|
21927
22520
|
const selected = selectedElRef.current;
|
|
21928
22521
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
21929
22522
|
if (isNestedNavChild(selected)) return;
|
|
@@ -21939,7 +22532,7 @@ function OhhwellsBridge() {
|
|
|
21939
22532
|
}
|
|
21940
22533
|
});
|
|
21941
22534
|
}, []);
|
|
21942
|
-
const handleFooterHeadingVisibleChange = (0,
|
|
22535
|
+
const handleFooterHeadingVisibleChange = (0, import_react20.useCallback)(
|
|
21943
22536
|
(visible) => {
|
|
21944
22537
|
const selected = selectedElRef.current;
|
|
21945
22538
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -21963,7 +22556,7 @@ function OhhwellsBridge() {
|
|
|
21963
22556
|
},
|
|
21964
22557
|
[postToParent2]
|
|
21965
22558
|
);
|
|
21966
|
-
const enterEditOnNewItem = (0,
|
|
22559
|
+
const enterEditOnNewItem = (0, import_react20.useCallback)((anchor) => {
|
|
21967
22560
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
21968
22561
|
if (!label) {
|
|
21969
22562
|
selectRef.current(anchor);
|
|
@@ -21972,8 +22565,8 @@ function OhhwellsBridge() {
|
|
|
21972
22565
|
setNavGroupForceOpen(anchor, true);
|
|
21973
22566
|
activateRef.current(label);
|
|
21974
22567
|
}, []);
|
|
21975
|
-
const pendingSocialAddRef = (0,
|
|
21976
|
-
const handleAddChildItem = (0,
|
|
22568
|
+
const pendingSocialAddRef = (0, import_react20.useRef)(null);
|
|
22569
|
+
const handleAddChildItem = (0, import_react20.useCallback)(() => {
|
|
21977
22570
|
const selected = selectedElRef.current;
|
|
21978
22571
|
if (!selected) return;
|
|
21979
22572
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -22084,7 +22677,7 @@ function OhhwellsBridge() {
|
|
|
22084
22677
|
});
|
|
22085
22678
|
});
|
|
22086
22679
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
22087
|
-
const handleAddFooterColumn = (0,
|
|
22680
|
+
const handleAddFooterColumn = (0, import_react20.useCallback)(() => {
|
|
22088
22681
|
if (!canAddFooterColumn()) {
|
|
22089
22682
|
postToParent2({
|
|
22090
22683
|
type: "ow:toast",
|
|
@@ -22105,7 +22698,7 @@ function OhhwellsBridge() {
|
|
|
22105
22698
|
selectRef.current(result.firstLink);
|
|
22106
22699
|
});
|
|
22107
22700
|
}, [postToParent2]);
|
|
22108
|
-
const clearFooterDragVisuals = (0,
|
|
22701
|
+
const clearFooterDragVisuals = (0, import_react20.useCallback)(() => {
|
|
22109
22702
|
footerDragRef.current = null;
|
|
22110
22703
|
setSiblingHintRects([]);
|
|
22111
22704
|
setFooterDropSlots([]);
|
|
@@ -22114,7 +22707,7 @@ function OhhwellsBridge() {
|
|
|
22114
22707
|
setIsItemDragging(false);
|
|
22115
22708
|
unlockFooterDragInteraction();
|
|
22116
22709
|
}, []);
|
|
22117
|
-
const refreshFooterDragVisuals = (0,
|
|
22710
|
+
const refreshFooterDragVisuals = (0, import_react20.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
22118
22711
|
const dragged = session.draggedEl;
|
|
22119
22712
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
22120
22713
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -22146,13 +22739,13 @@ function OhhwellsBridge() {
|
|
|
22146
22739
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
22147
22740
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
22148
22741
|
}, []);
|
|
22149
|
-
const refreshFooterDragVisualsRef = (0,
|
|
22742
|
+
const refreshFooterDragVisualsRef = (0, import_react20.useRef)(refreshFooterDragVisuals);
|
|
22150
22743
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
22151
|
-
const commitFooterDragRef = (0,
|
|
22744
|
+
const commitFooterDragRef = (0, import_react20.useRef)(() => {
|
|
22152
22745
|
});
|
|
22153
|
-
const beginFooterDragRef = (0,
|
|
22746
|
+
const beginFooterDragRef = (0, import_react20.useRef)(() => {
|
|
22154
22747
|
});
|
|
22155
|
-
const beginFooterDrag = (0,
|
|
22748
|
+
const beginFooterDrag = (0, import_react20.useCallback)(
|
|
22156
22749
|
(session) => {
|
|
22157
22750
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
22158
22751
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -22172,7 +22765,7 @@ function OhhwellsBridge() {
|
|
|
22172
22765
|
[refreshFooterDragVisuals]
|
|
22173
22766
|
);
|
|
22174
22767
|
beginFooterDragRef.current = beginFooterDrag;
|
|
22175
|
-
const commitFooterDrag = (0,
|
|
22768
|
+
const commitFooterDrag = (0, import_react20.useCallback)(
|
|
22176
22769
|
(clientX, clientY) => {
|
|
22177
22770
|
const session = footerDragRef.current;
|
|
22178
22771
|
if (!session) {
|
|
@@ -22301,7 +22894,7 @@ function OhhwellsBridge() {
|
|
|
22301
22894
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
22302
22895
|
);
|
|
22303
22896
|
commitFooterDragRef.current = commitFooterDrag;
|
|
22304
|
-
const startFooterLinkDrag = (0,
|
|
22897
|
+
const startFooterLinkDrag = (0, import_react20.useCallback)(
|
|
22305
22898
|
(anchor, clientX, clientY, wasSelected) => {
|
|
22306
22899
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
22307
22900
|
if (!hrefKey) return false;
|
|
@@ -22337,7 +22930,7 @@ function OhhwellsBridge() {
|
|
|
22337
22930
|
},
|
|
22338
22931
|
[beginFooterDrag]
|
|
22339
22932
|
);
|
|
22340
|
-
const startFooterColumnDrag = (0,
|
|
22933
|
+
const startFooterColumnDrag = (0, import_react20.useCallback)(
|
|
22341
22934
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
22342
22935
|
const columns = listFooterColumns();
|
|
22343
22936
|
const idx = columns.indexOf(columnEl);
|
|
@@ -22357,7 +22950,7 @@ function OhhwellsBridge() {
|
|
|
22357
22950
|
},
|
|
22358
22951
|
[beginFooterDrag]
|
|
22359
22952
|
);
|
|
22360
|
-
const persistButtonCollectionDrag = (0,
|
|
22953
|
+
const persistButtonCollectionDrag = (0, import_react20.useCallback)(
|
|
22361
22954
|
(button, clientX) => {
|
|
22362
22955
|
const insertIndex = buttonDropInsertIndexRef.current;
|
|
22363
22956
|
if (insertIndex != null) insertButtonAtCollectionIndex(button, insertIndex);
|
|
@@ -22381,7 +22974,7 @@ function OhhwellsBridge() {
|
|
|
22381
22974
|
},
|
|
22382
22975
|
[postToParent2]
|
|
22383
22976
|
);
|
|
22384
|
-
const refreshButtonDragVisuals = (0,
|
|
22977
|
+
const refreshButtonDragVisuals = (0, import_react20.useCallback)((button, clientX, clientY) => {
|
|
22385
22978
|
const collection = buttonCollectionOf(button);
|
|
22386
22979
|
if (!collection) {
|
|
22387
22980
|
setButtonDropSlots([]);
|
|
@@ -22398,7 +22991,7 @@ function OhhwellsBridge() {
|
|
|
22398
22991
|
setDraggedItemRect(button.getBoundingClientRect());
|
|
22399
22992
|
if (selectedElRef.current === button) setToolbarRect(button.getBoundingClientRect());
|
|
22400
22993
|
}, []);
|
|
22401
|
-
const handleItemDragStart = (0,
|
|
22994
|
+
const handleItemDragStart = (0, import_react20.useCallback)(
|
|
22402
22995
|
(e) => {
|
|
22403
22996
|
const selected = selectedElRef.current;
|
|
22404
22997
|
if (!selected) {
|
|
@@ -22429,7 +23022,7 @@ function OhhwellsBridge() {
|
|
|
22429
23022
|
},
|
|
22430
23023
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag, refreshButtonDragVisuals]
|
|
22431
23024
|
);
|
|
22432
|
-
const handleItemDragEnd = (0,
|
|
23025
|
+
const handleItemDragEnd = (0, import_react20.useCallback)(
|
|
22433
23026
|
(e) => {
|
|
22434
23027
|
const collectionButton = buttonCollectionDragRef.current;
|
|
22435
23028
|
if (collectionButton) {
|
|
@@ -22460,7 +23053,7 @@ function OhhwellsBridge() {
|
|
|
22460
23053
|
},
|
|
22461
23054
|
[commitFooterDrag, commitNavDrag, navDragRef, persistButtonCollectionDrag]
|
|
22462
23055
|
);
|
|
22463
|
-
const handleItemChromePointerDown = (0,
|
|
23056
|
+
const handleItemChromePointerDown = (0, import_react20.useCallback)((e) => {
|
|
22464
23057
|
if (e.button !== 0) return;
|
|
22465
23058
|
const selected = selectedElRef.current;
|
|
22466
23059
|
if (!selected) return;
|
|
@@ -22501,7 +23094,7 @@ function OhhwellsBridge() {
|
|
|
22501
23094
|
}
|
|
22502
23095
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
22503
23096
|
}, [armNavPressFromChrome]);
|
|
22504
|
-
const handleItemChromeClick = (0,
|
|
23097
|
+
const handleItemChromeClick = (0, import_react20.useCallback)((clientX, clientY) => {
|
|
22505
23098
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
22506
23099
|
suppressNextClickRef.current = false;
|
|
22507
23100
|
return;
|
|
@@ -22514,7 +23107,7 @@ function OhhwellsBridge() {
|
|
|
22514
23107
|
}, []);
|
|
22515
23108
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
22516
23109
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
22517
|
-
const select = (0,
|
|
23110
|
+
const select = (0, import_react20.useCallback)((anchor) => {
|
|
22518
23111
|
if (!isNavigationItem2(anchor)) return;
|
|
22519
23112
|
if (activeElRef.current) deactivate();
|
|
22520
23113
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -22576,7 +23169,7 @@ function OhhwellsBridge() {
|
|
|
22576
23169
|
setLogoSizeDraft(null);
|
|
22577
23170
|
}
|
|
22578
23171
|
}, [deactivate, markSelected]);
|
|
22579
|
-
const selectFrame = (0,
|
|
23172
|
+
const selectFrame = (0, import_react20.useCallback)((el) => {
|
|
22580
23173
|
if (!isNavigationContainer(el)) return;
|
|
22581
23174
|
if (activeElRef.current) deactivate();
|
|
22582
23175
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -22617,7 +23210,7 @@ function OhhwellsBridge() {
|
|
|
22617
23210
|
setFloatingPanelPos(null);
|
|
22618
23211
|
setLogoSizeDraft(null);
|
|
22619
23212
|
}, [deactivate, markSelected, postToParent2]);
|
|
22620
|
-
const selectLogo = (0,
|
|
23213
|
+
const selectLogo = (0, import_react20.useCallback)(
|
|
22621
23214
|
(logoEl) => {
|
|
22622
23215
|
if (activeElRef.current) deactivate();
|
|
22623
23216
|
selectedElRef.current = logoEl;
|
|
@@ -22646,7 +23239,7 @@ function OhhwellsBridge() {
|
|
|
22646
23239
|
},
|
|
22647
23240
|
[deactivate, markSelected]
|
|
22648
23241
|
);
|
|
22649
|
-
const openLogoSizePanel = (0,
|
|
23242
|
+
const openLogoSizePanel = (0, import_react20.useCallback)((logoEl) => {
|
|
22650
23243
|
const placement = getLogoPlacement(logoEl);
|
|
22651
23244
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
22652
23245
|
setLogoSizeDraft(draft);
|
|
@@ -22659,7 +23252,7 @@ function OhhwellsBridge() {
|
|
|
22659
23252
|
placement
|
|
22660
23253
|
});
|
|
22661
23254
|
}, []);
|
|
22662
|
-
const openSocialsDisplayPanel = (0,
|
|
23255
|
+
const openSocialsDisplayPanel = (0, import_react20.useCallback)((row) => {
|
|
22663
23256
|
setFloatingPanelPos(null);
|
|
22664
23257
|
setParentScrollSnap(parentScrollRef.current);
|
|
22665
23258
|
setFloatingPanel({
|
|
@@ -22670,7 +23263,7 @@ function OhhwellsBridge() {
|
|
|
22670
23263
|
row
|
|
22671
23264
|
});
|
|
22672
23265
|
}, []);
|
|
22673
|
-
const rememberButtonTokens = (0,
|
|
23266
|
+
const rememberButtonTokens = (0, import_react20.useCallback)(
|
|
22674
23267
|
(content, tokens, nodes) => {
|
|
22675
23268
|
if (nodes.length === 0) return content;
|
|
22676
23269
|
const next = { ...content };
|
|
@@ -22681,7 +23274,7 @@ function OhhwellsBridge() {
|
|
|
22681
23274
|
},
|
|
22682
23275
|
[postToParent2]
|
|
22683
23276
|
);
|
|
22684
|
-
const tokensForButton = (0,
|
|
23277
|
+
const tokensForButton = (0, import_react20.useCallback)(
|
|
22685
23278
|
(el, persistFallback = false) => {
|
|
22686
23279
|
const stored = readStoredStyleTokens(editContentRef.current);
|
|
22687
23280
|
if (stored) return stored;
|
|
@@ -22696,7 +23289,7 @@ function OhhwellsBridge() {
|
|
|
22696
23289
|
},
|
|
22697
23290
|
[rememberButtonTokens]
|
|
22698
23291
|
);
|
|
22699
|
-
const openButtonStylePanel = (0,
|
|
23292
|
+
const openButtonStylePanel = (0, import_react20.useCallback)(
|
|
22700
23293
|
(anchor) => {
|
|
22701
23294
|
const id = buttonId(anchor);
|
|
22702
23295
|
if (!id) return;
|
|
@@ -22714,7 +23307,7 @@ function OhhwellsBridge() {
|
|
|
22714
23307
|
},
|
|
22715
23308
|
[tokensForButton]
|
|
22716
23309
|
);
|
|
22717
|
-
const applySelectedButtonStyle = (0,
|
|
23310
|
+
const applySelectedButtonStyle = (0, import_react20.useCallback)(
|
|
22718
23311
|
(patch) => {
|
|
22719
23312
|
const panel = floatingPanelRef.current;
|
|
22720
23313
|
const id = panel?.kind === "button-style" ? panel.buttonId : null;
|
|
@@ -22732,7 +23325,7 @@ function OhhwellsBridge() {
|
|
|
22732
23325
|
},
|
|
22733
23326
|
[postToParent2]
|
|
22734
23327
|
);
|
|
22735
|
-
(0,
|
|
23328
|
+
(0, import_react20.useEffect)(() => {
|
|
22736
23329
|
const onDragOver = (e) => {
|
|
22737
23330
|
const dragged = buttonCollectionDragRef.current;
|
|
22738
23331
|
if (!dragged) return;
|
|
@@ -22751,11 +23344,11 @@ function OhhwellsBridge() {
|
|
|
22751
23344
|
document.removeEventListener("drop", onDrop);
|
|
22752
23345
|
};
|
|
22753
23346
|
}, [refreshButtonDragVisuals]);
|
|
22754
|
-
const isEditModeRef = (0,
|
|
22755
|
-
const requestMissingSocialIconsRef = (0,
|
|
23347
|
+
const isEditModeRef = (0, import_react20.useRef)(false);
|
|
23348
|
+
const requestMissingSocialIconsRef = (0, import_react20.useRef)(() => {
|
|
22756
23349
|
});
|
|
22757
|
-
const askedSocialIconsRef = (0,
|
|
22758
|
-
const requestMissingSocialIcons = (0,
|
|
23350
|
+
const askedSocialIconsRef = (0, import_react20.useRef)(/* @__PURE__ */ new Set());
|
|
23351
|
+
const requestMissingSocialIcons = (0, import_react20.useCallback)(() => {
|
|
22759
23352
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
22760
23353
|
const missing = socialsMissingIcons(row);
|
|
22761
23354
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -22767,7 +23360,7 @@ function OhhwellsBridge() {
|
|
|
22767
23360
|
}, []);
|
|
22768
23361
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
22769
23362
|
isEditModeRef.current = isEditMode;
|
|
22770
|
-
const changeSocialsDisplay = (0,
|
|
23363
|
+
const changeSocialsDisplay = (0, import_react20.useCallback)(
|
|
22771
23364
|
(row, next) => {
|
|
22772
23365
|
if (next.icon) {
|
|
22773
23366
|
const missing = socialsMissingIcons(row);
|
|
@@ -22791,19 +23384,19 @@ function OhhwellsBridge() {
|
|
|
22791
23384
|
},
|
|
22792
23385
|
[]
|
|
22793
23386
|
);
|
|
22794
|
-
const closeFloatingPanelOnly = (0,
|
|
23387
|
+
const closeFloatingPanelOnly = (0, import_react20.useCallback)(() => {
|
|
22795
23388
|
setFloatingPanel(null);
|
|
22796
23389
|
setFloatingPanelPos(null);
|
|
22797
23390
|
setLogoSizeDraft(null);
|
|
22798
23391
|
}, []);
|
|
22799
23392
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22800
|
-
const closeFloatingPanelAndDeselect = (0,
|
|
23393
|
+
const closeFloatingPanelAndDeselect = (0, import_react20.useCallback)(() => {
|
|
22801
23394
|
setFloatingPanel(null);
|
|
22802
23395
|
setFloatingPanelPos(null);
|
|
22803
23396
|
setLogoSizeDraft(null);
|
|
22804
23397
|
deselectRef.current();
|
|
22805
23398
|
}, []);
|
|
22806
|
-
(0,
|
|
23399
|
+
(0, import_react20.useEffect)(() => {
|
|
22807
23400
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
22808
23401
|
if (!session || !logoSizeDraft) {
|
|
22809
23402
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -22822,7 +23415,7 @@ function OhhwellsBridge() {
|
|
|
22822
23415
|
max: LOGO_SIZE_MAX
|
|
22823
23416
|
});
|
|
22824
23417
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
22825
|
-
const persistLogoSizeDraft = (0,
|
|
23418
|
+
const persistLogoSizeDraft = (0, import_react20.useCallback)(
|
|
22826
23419
|
(placement, draft) => {
|
|
22827
23420
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
22828
23421
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -22862,7 +23455,7 @@ function OhhwellsBridge() {
|
|
|
22862
23455
|
},
|
|
22863
23456
|
[postToParent2]
|
|
22864
23457
|
);
|
|
22865
|
-
const activate = (0,
|
|
23458
|
+
const activate = (0, import_react20.useCallback)((el, options) => {
|
|
22866
23459
|
if (activeElRef.current === el) return;
|
|
22867
23460
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
22868
23461
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -22960,8 +23553,8 @@ function OhhwellsBridge() {
|
|
|
22960
23553
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
22961
23554
|
deselectRef.current = deselect;
|
|
22962
23555
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22963
|
-
const lastSiteWideScopeRef = (0,
|
|
22964
|
-
(0,
|
|
23556
|
+
const lastSiteWideScopeRef = (0, import_react20.useRef)(null);
|
|
23557
|
+
(0, import_react20.useEffect)(() => {
|
|
22965
23558
|
if (!isEditMode) {
|
|
22966
23559
|
if (lastSiteWideScopeRef.current !== false) {
|
|
22967
23560
|
lastSiteWideScopeRef.current = false;
|
|
@@ -22987,7 +23580,7 @@ function OhhwellsBridge() {
|
|
|
22987
23580
|
isFooterFrameSelection,
|
|
22988
23581
|
postToParent2
|
|
22989
23582
|
]);
|
|
22990
|
-
(0,
|
|
23583
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
22991
23584
|
if (!subdomain || isEditMode) {
|
|
22992
23585
|
setFetchState("done");
|
|
22993
23586
|
return;
|
|
@@ -23111,7 +23704,7 @@ function OhhwellsBridge() {
|
|
|
23111
23704
|
cancelled = true;
|
|
23112
23705
|
};
|
|
23113
23706
|
}, [subdomain, isEditMode]);
|
|
23114
|
-
(0,
|
|
23707
|
+
(0, import_react20.useEffect)(() => {
|
|
23115
23708
|
if (!isEditMode) return;
|
|
23116
23709
|
const resolveIndex = (form, clientY) => {
|
|
23117
23710
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -23152,7 +23745,7 @@ function OhhwellsBridge() {
|
|
|
23152
23745
|
window.removeEventListener("drop", onDrop, true);
|
|
23153
23746
|
};
|
|
23154
23747
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
23155
|
-
(0,
|
|
23748
|
+
(0, import_react20.useEffect)(() => {
|
|
23156
23749
|
if (!isEditMode) return;
|
|
23157
23750
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23158
23751
|
markFormFields(form);
|
|
@@ -23164,7 +23757,7 @@ function OhhwellsBridge() {
|
|
|
23164
23757
|
});
|
|
23165
23758
|
return () => observer.disconnect();
|
|
23166
23759
|
}, [isEditMode, fetchState, pathname]);
|
|
23167
|
-
(0,
|
|
23760
|
+
(0, import_react20.useEffect)(() => {
|
|
23168
23761
|
if (!isEditMode) return;
|
|
23169
23762
|
let saveTimer = null;
|
|
23170
23763
|
const onInput = (e) => {
|
|
@@ -23186,14 +23779,14 @@ function OhhwellsBridge() {
|
|
|
23186
23779
|
document.addEventListener("input", onInput, true);
|
|
23187
23780
|
return () => document.removeEventListener("input", onInput, true);
|
|
23188
23781
|
}, [isEditMode, persistFields]);
|
|
23189
|
-
(0,
|
|
23782
|
+
(0, import_react20.useEffect)(() => {
|
|
23190
23783
|
if (isEditMode || fetchState !== "done") return;
|
|
23191
23784
|
const content = contentCache.get(subdomain) ?? {};
|
|
23192
23785
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23193
23786
|
reconcileFieldsFromContent(form, content);
|
|
23194
23787
|
});
|
|
23195
23788
|
}, [isEditMode, fetchState, subdomain]);
|
|
23196
|
-
(0,
|
|
23789
|
+
(0, import_react20.useEffect)(() => {
|
|
23197
23790
|
if (!isEditMode) return;
|
|
23198
23791
|
const swallow = (e) => {
|
|
23199
23792
|
const target = e.target;
|
|
@@ -23202,14 +23795,14 @@ function OhhwellsBridge() {
|
|
|
23202
23795
|
document.addEventListener("submit", swallow, true);
|
|
23203
23796
|
return () => document.removeEventListener("submit", swallow, true);
|
|
23204
23797
|
}, [isEditMode]);
|
|
23205
|
-
(0,
|
|
23798
|
+
(0, import_react20.useEffect)(() => {
|
|
23206
23799
|
if (isEditMode || fetchState !== "done") return;
|
|
23207
23800
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
23208
23801
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
23209
23802
|
console.log({ apiUrl, subdomain });
|
|
23210
23803
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
23211
23804
|
}, [isEditMode, fetchState, subdomain]);
|
|
23212
|
-
(0,
|
|
23805
|
+
(0, import_react20.useEffect)(() => {
|
|
23213
23806
|
if (!subdomain || isEditMode) return;
|
|
23214
23807
|
let debounceTimer = null;
|
|
23215
23808
|
let observer = null;
|
|
@@ -23310,16 +23903,16 @@ function OhhwellsBridge() {
|
|
|
23310
23903
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
23311
23904
|
};
|
|
23312
23905
|
}, [subdomain, isEditMode, pathname]);
|
|
23313
|
-
(0,
|
|
23906
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
23314
23907
|
const el = document.getElementById("ohw-loader");
|
|
23315
23908
|
if (!el) return;
|
|
23316
23909
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
23317
23910
|
el.style.display = visible ? "flex" : "none";
|
|
23318
23911
|
}, [subdomain, fetchState]);
|
|
23319
|
-
(0,
|
|
23912
|
+
(0, import_react20.useEffect)(() => {
|
|
23320
23913
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
23321
23914
|
}, [pathname, postToParent2]);
|
|
23322
|
-
(0,
|
|
23915
|
+
(0, import_react20.useEffect)(() => {
|
|
23323
23916
|
if (!subdomain || isEditMode) return;
|
|
23324
23917
|
const content = contentCache.get(subdomain);
|
|
23325
23918
|
if (!content) return;
|
|
@@ -23335,7 +23928,7 @@ function OhhwellsBridge() {
|
|
|
23335
23928
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
23336
23929
|
}
|
|
23337
23930
|
}, [pathname, subdomain, isEditMode]);
|
|
23338
|
-
(0,
|
|
23931
|
+
(0, import_react20.useEffect)(() => {
|
|
23339
23932
|
if (!isEditMode) return;
|
|
23340
23933
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
23341
23934
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -23343,11 +23936,11 @@ function OhhwellsBridge() {
|
|
|
23343
23936
|
deselectRef.current();
|
|
23344
23937
|
deactivateRef.current();
|
|
23345
23938
|
}, [pathname, isEditMode]);
|
|
23346
|
-
(0,
|
|
23939
|
+
(0, import_react20.useEffect)(() => {
|
|
23347
23940
|
if (!isEditMode) return;
|
|
23348
23941
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
23349
23942
|
}, [pathname, isEditMode]);
|
|
23350
|
-
(0,
|
|
23943
|
+
(0, import_react20.useEffect)(() => {
|
|
23351
23944
|
if (!isEditMode) return;
|
|
23352
23945
|
const observer = new MutationObserver(() => {
|
|
23353
23946
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -23358,7 +23951,7 @@ function OhhwellsBridge() {
|
|
|
23358
23951
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
23359
23952
|
return () => observer.disconnect();
|
|
23360
23953
|
}, [isEditMode, pathname]);
|
|
23361
|
-
(0,
|
|
23954
|
+
(0, import_react20.useEffect)(() => {
|
|
23362
23955
|
const contentForNav = () => {
|
|
23363
23956
|
if (isEditMode) return editContentRef.current;
|
|
23364
23957
|
if (!subdomain) return {};
|
|
@@ -23431,7 +24024,7 @@ function OhhwellsBridge() {
|
|
|
23431
24024
|
observer?.disconnect();
|
|
23432
24025
|
};
|
|
23433
24026
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
23434
|
-
(0,
|
|
24027
|
+
(0, import_react20.useEffect)(() => {
|
|
23435
24028
|
if (!isEditMode) return;
|
|
23436
24029
|
let applying = false;
|
|
23437
24030
|
let rafId = null;
|
|
@@ -23469,7 +24062,7 @@ function OhhwellsBridge() {
|
|
|
23469
24062
|
observer.disconnect();
|
|
23470
24063
|
};
|
|
23471
24064
|
}, [isEditMode, pathname]);
|
|
23472
|
-
(0,
|
|
24065
|
+
(0, import_react20.useEffect)(() => {
|
|
23473
24066
|
if (!isEditMode) return;
|
|
23474
24067
|
let lastPosted = 0;
|
|
23475
24068
|
const measure = () => {
|
|
@@ -23513,7 +24106,7 @@ function OhhwellsBridge() {
|
|
|
23513
24106
|
window.removeEventListener("resize", handleResize);
|
|
23514
24107
|
};
|
|
23515
24108
|
}, [pathname, isEditMode, postToParent2]);
|
|
23516
|
-
(0,
|
|
24109
|
+
(0, import_react20.useEffect)(() => {
|
|
23517
24110
|
if (!subdomainFromQuery || isEditMode) return;
|
|
23518
24111
|
const handleClick = (e) => {
|
|
23519
24112
|
const anchor = e.target.closest("a");
|
|
@@ -23529,7 +24122,7 @@ function OhhwellsBridge() {
|
|
|
23529
24122
|
document.addEventListener("click", handleClick, true);
|
|
23530
24123
|
return () => document.removeEventListener("click", handleClick, true);
|
|
23531
24124
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
23532
|
-
(0,
|
|
24125
|
+
(0, import_react20.useEffect)(() => {
|
|
23533
24126
|
if (!isEditMode) {
|
|
23534
24127
|
editStylesRef.current?.base.remove();
|
|
23535
24128
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -23755,11 +24348,11 @@ function OhhwellsBridge() {
|
|
|
23755
24348
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
23756
24349
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
23757
24350
|
outline: none !important;
|
|
23758
|
-
caret-color: ${
|
|
24351
|
+
caret-color: ${PRIMARY6} !important;
|
|
23759
24352
|
cursor: text !important;
|
|
23760
24353
|
}
|
|
23761
24354
|
[data-ohw-editable][contenteditable]::selection,
|
|
23762
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
24355
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY6}59 !important; }
|
|
23763
24356
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
23764
24357
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
23765
24358
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -26648,7 +27241,7 @@ function OhhwellsBridge() {
|
|
|
26648
27241
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
26649
27242
|
};
|
|
26650
27243
|
}, [isEditMode, refreshStateRules]);
|
|
26651
|
-
(0,
|
|
27244
|
+
(0, import_react20.useEffect)(() => {
|
|
26652
27245
|
if (!isEditMode) return;
|
|
26653
27246
|
const THRESHOLD = 10;
|
|
26654
27247
|
const resolveWasSelected = (el) => {
|
|
@@ -26804,7 +27397,7 @@ function OhhwellsBridge() {
|
|
|
26804
27397
|
unlockFooterDragInteraction();
|
|
26805
27398
|
};
|
|
26806
27399
|
}, [isEditMode]);
|
|
26807
|
-
(0,
|
|
27400
|
+
(0, import_react20.useEffect)(() => {
|
|
26808
27401
|
if (!isEditMode) return;
|
|
26809
27402
|
const THRESHOLD = 10;
|
|
26810
27403
|
const onPointerDown = (e) => {
|
|
@@ -26895,7 +27488,7 @@ function OhhwellsBridge() {
|
|
|
26895
27488
|
document.removeEventListener("selectstart", blockSelectStart, true);
|
|
26896
27489
|
};
|
|
26897
27490
|
}, [isEditMode, persistButtonCollectionDrag, refreshButtonDragVisuals]);
|
|
26898
|
-
(0,
|
|
27491
|
+
(0, import_react20.useEffect)(() => {
|
|
26899
27492
|
const handler = (e) => {
|
|
26900
27493
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
26901
27494
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -26911,7 +27504,7 @@ function OhhwellsBridge() {
|
|
|
26911
27504
|
window.addEventListener("message", handler);
|
|
26912
27505
|
return () => window.removeEventListener("message", handler);
|
|
26913
27506
|
}, [processConfigRequest]);
|
|
26914
|
-
(0,
|
|
27507
|
+
(0, import_react20.useEffect)(() => {
|
|
26915
27508
|
if (!isEditMode) return;
|
|
26916
27509
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
26917
27510
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -26935,7 +27528,7 @@ function OhhwellsBridge() {
|
|
|
26935
27528
|
postToParent2({
|
|
26936
27529
|
type: "ow:ready",
|
|
26937
27530
|
version: "1",
|
|
26938
|
-
bridgeVersion: "0.1.
|
|
27531
|
+
bridgeVersion: "0.1.126",
|
|
26939
27532
|
path: pathname,
|
|
26940
27533
|
nodes: collectEditableNodes(editContentRef.current),
|
|
26941
27534
|
sections
|
|
@@ -26947,13 +27540,13 @@ function OhhwellsBridge() {
|
|
|
26947
27540
|
clearTimeout(timer);
|
|
26948
27541
|
};
|
|
26949
27542
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
26950
|
-
(0,
|
|
27543
|
+
(0, import_react20.useEffect)(() => {
|
|
26951
27544
|
scrollToHashSectionWhenReady();
|
|
26952
27545
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
26953
27546
|
window.addEventListener("hashchange", onHashChange);
|
|
26954
27547
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
26955
27548
|
}, [pathname]);
|
|
26956
|
-
const handleCommand = (0,
|
|
27549
|
+
const handleCommand = (0, import_react20.useCallback)((cmd) => {
|
|
26957
27550
|
const el = activeElRef.current;
|
|
26958
27551
|
const selBefore = window.getSelection();
|
|
26959
27552
|
let savedOffsets = null;
|
|
@@ -26989,7 +27582,7 @@ function OhhwellsBridge() {
|
|
|
26989
27582
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
26990
27583
|
refreshActiveCommandsRef.current();
|
|
26991
27584
|
}, []);
|
|
26992
|
-
(0,
|
|
27585
|
+
(0, import_react20.useEffect)(() => {
|
|
26993
27586
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
26994
27587
|
if (!session || !logoSizeDraft) return;
|
|
26995
27588
|
const onPanelAction = (e) => {
|
|
@@ -27027,7 +27620,7 @@ function OhhwellsBridge() {
|
|
|
27027
27620
|
window.addEventListener("message", onPanelAction);
|
|
27028
27621
|
return () => window.removeEventListener("message", onPanelAction);
|
|
27029
27622
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
27030
|
-
const handleStateChange = (0,
|
|
27623
|
+
const handleStateChange = (0, import_react20.useCallback)((state) => {
|
|
27031
27624
|
if (!activeStateElRef.current) return;
|
|
27032
27625
|
const el = activeStateElRef.current;
|
|
27033
27626
|
if (state === "Default") {
|
|
@@ -27040,7 +27633,7 @@ function OhhwellsBridge() {
|
|
|
27040
27633
|
}
|
|
27041
27634
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
27042
27635
|
}, [deactivate]);
|
|
27043
|
-
const reselectAfterLinkPopover = (0,
|
|
27636
|
+
const reselectAfterLinkPopover = (0, import_react20.useCallback)(
|
|
27044
27637
|
(hrefKey) => {
|
|
27045
27638
|
requestAnimationFrame(() => {
|
|
27046
27639
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -27049,7 +27642,7 @@ function OhhwellsBridge() {
|
|
|
27049
27642
|
},
|
|
27050
27643
|
[resolveHrefKeyElement]
|
|
27051
27644
|
);
|
|
27052
|
-
const closeLinkPopover = (0,
|
|
27645
|
+
const closeLinkPopover = (0, import_react20.useCallback)(() => {
|
|
27053
27646
|
const session = linkPopoverSessionRef.current;
|
|
27054
27647
|
addNavAfterAnchorRef.current = null;
|
|
27055
27648
|
setLinkPopover(null);
|
|
@@ -27057,9 +27650,9 @@ function OhhwellsBridge() {
|
|
|
27057
27650
|
reselectAfterLinkPopover(session.key);
|
|
27058
27651
|
}
|
|
27059
27652
|
}, [reselectAfterLinkPopover]);
|
|
27060
|
-
const closeLinkPopoverRef = (0,
|
|
27653
|
+
const closeLinkPopoverRef = (0, import_react20.useRef)(closeLinkPopover);
|
|
27061
27654
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
27062
|
-
const openLinkPopoverForActive = (0,
|
|
27655
|
+
const openLinkPopoverForActive = (0, import_react20.useCallback)(() => {
|
|
27063
27656
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
27064
27657
|
if (!hrefCtx) return;
|
|
27065
27658
|
bumpLinkPopoverGrace();
|
|
@@ -27070,7 +27663,7 @@ function OhhwellsBridge() {
|
|
|
27070
27663
|
});
|
|
27071
27664
|
deactivate();
|
|
27072
27665
|
}, [deactivate]);
|
|
27073
|
-
const openLinkPopoverForSelected = (0,
|
|
27666
|
+
const openLinkPopoverForSelected = (0, import_react20.useCallback)(() => {
|
|
27074
27667
|
const anchor = selectedElRef.current;
|
|
27075
27668
|
if (!anchor) return;
|
|
27076
27669
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -27087,7 +27680,7 @@ function OhhwellsBridge() {
|
|
|
27087
27680
|
});
|
|
27088
27681
|
deselect();
|
|
27089
27682
|
}, [deselect]);
|
|
27090
|
-
const handleSelectParent = (0,
|
|
27683
|
+
const handleSelectParent = (0, import_react20.useCallback)(() => {
|
|
27091
27684
|
const selected = selectedElRef.current;
|
|
27092
27685
|
if (!selected) return;
|
|
27093
27686
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -27114,7 +27707,7 @@ function OhhwellsBridge() {
|
|
|
27114
27707
|
}
|
|
27115
27708
|
deselectRef.current();
|
|
27116
27709
|
}, []);
|
|
27117
|
-
const handleDuplicateSelected = (0,
|
|
27710
|
+
const handleDuplicateSelected = (0, import_react20.useCallback)(() => {
|
|
27118
27711
|
const selected = selectedElRef.current;
|
|
27119
27712
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
27120
27713
|
if (isCtaButton(selected)) {
|
|
@@ -27277,7 +27870,7 @@ function OhhwellsBridge() {
|
|
|
27277
27870
|
});
|
|
27278
27871
|
}
|
|
27279
27872
|
}, [postToParent2, tokensForButton]);
|
|
27280
|
-
const runPendingDeleteUndo = (0,
|
|
27873
|
+
const runPendingDeleteUndo = (0, import_react20.useCallback)(() => {
|
|
27281
27874
|
const pending = pendingDeleteUndoRef.current;
|
|
27282
27875
|
if (!pending) return false;
|
|
27283
27876
|
pendingDeleteUndoRef.current = null;
|
|
@@ -27285,7 +27878,7 @@ function OhhwellsBridge() {
|
|
|
27285
27878
|
enforceLinkHrefs();
|
|
27286
27879
|
return true;
|
|
27287
27880
|
}, []);
|
|
27288
|
-
const handleDeleteSelected = (0,
|
|
27881
|
+
const handleDeleteSelected = (0, import_react20.useCallback)(() => {
|
|
27289
27882
|
const selected = selectedElRef.current;
|
|
27290
27883
|
if (!selected) return false;
|
|
27291
27884
|
if (isCtaButton(selected)) {
|
|
@@ -27338,7 +27931,7 @@ function OhhwellsBridge() {
|
|
|
27338
27931
|
}, [postToParent2]);
|
|
27339
27932
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
27340
27933
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
27341
|
-
const handleLinkPopoverSubmit = (0,
|
|
27934
|
+
const handleLinkPopoverSubmit = (0, import_react20.useCallback)(
|
|
27342
27935
|
(target) => {
|
|
27343
27936
|
const session = linkPopoverSessionRef.current;
|
|
27344
27937
|
if (!session) return;
|
|
@@ -27404,14 +27997,14 @@ function OhhwellsBridge() {
|
|
|
27404
27997
|
const showEditLink = toolbarShowEditLink;
|
|
27405
27998
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
27406
27999
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
27407
|
-
const handleMediaSelect = (0,
|
|
28000
|
+
const handleMediaSelect = (0, import_react20.useCallback)((key) => {
|
|
27408
28001
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
27409
28002
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
27410
28003
|
) ?? null;
|
|
27411
28004
|
if (!el) return;
|
|
27412
28005
|
selectMediaElementRef.current(el);
|
|
27413
28006
|
}, []);
|
|
27414
|
-
const handleMediaReplace = (0,
|
|
28007
|
+
const handleMediaReplace = (0, import_react20.useCallback)(
|
|
27415
28008
|
(key) => {
|
|
27416
28009
|
postToParent2({
|
|
27417
28010
|
type: "ow:image-pick",
|
|
@@ -27421,13 +28014,13 @@ function OhhwellsBridge() {
|
|
|
27421
28014
|
},
|
|
27422
28015
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
27423
28016
|
);
|
|
27424
|
-
const handleEditCarousel = (0,
|
|
28017
|
+
const handleEditCarousel = (0, import_react20.useCallback)(
|
|
27425
28018
|
(key) => {
|
|
27426
28019
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
27427
28020
|
},
|
|
27428
28021
|
[postToParent2]
|
|
27429
28022
|
);
|
|
27430
|
-
const handleMediaFadeOutComplete = (0,
|
|
28023
|
+
const handleMediaFadeOutComplete = (0, import_react20.useCallback)((key) => {
|
|
27431
28024
|
setUploadingRects((prev) => {
|
|
27432
28025
|
if (!(key in prev)) return prev;
|
|
27433
28026
|
const next = { ...prev };
|
|
@@ -27435,7 +28028,7 @@ function OhhwellsBridge() {
|
|
|
27435
28028
|
return next;
|
|
27436
28029
|
});
|
|
27437
28030
|
}, []);
|
|
27438
|
-
const handleVideoSettingsChange = (0,
|
|
28031
|
+
const handleVideoSettingsChange = (0, import_react20.useCallback)(
|
|
27439
28032
|
(key, settings) => {
|
|
27440
28033
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
27441
28034
|
const video = getVideoEl2(el);
|
|
@@ -27457,14 +28050,14 @@ function OhhwellsBridge() {
|
|
|
27457
28050
|
},
|
|
27458
28051
|
[postToParent2]
|
|
27459
28052
|
);
|
|
27460
|
-
return /* @__PURE__ */ (0,
|
|
27461
|
-
/* @__PURE__ */ (0,
|
|
27462
|
-
/* @__PURE__ */ (0,
|
|
27463
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0,
|
|
28053
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
28054
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OhwLoaderSpinner, {}) }),
|
|
28055
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
28056
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MadeWithOhhWells, {}),
|
|
27464
28057
|
bridgeRoot ? (0, import_react_dom5.createPortal)(
|
|
27465
|
-
/* @__PURE__ */ (0,
|
|
27466
|
-
/* @__PURE__ */ (0,
|
|
27467
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
28058
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
28059
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
28060
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27468
28061
|
AiSectionOverlay,
|
|
27469
28062
|
{
|
|
27470
28063
|
postToParent: postToParent2,
|
|
@@ -27472,7 +28065,7 @@ function OhhwellsBridge() {
|
|
|
27472
28065
|
onSelectionChange: handleAiSectionSelectionChange
|
|
27473
28066
|
}
|
|
27474
28067
|
),
|
|
27475
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
28068
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27476
28069
|
AiMediaStripOverlay,
|
|
27477
28070
|
{
|
|
27478
28071
|
postToParent: postToParent2,
|
|
@@ -27481,7 +28074,7 @@ function OhhwellsBridge() {
|
|
|
27481
28074
|
clearInteractionChromeRef
|
|
27482
28075
|
}
|
|
27483
28076
|
),
|
|
27484
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
28077
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27485
28078
|
AiPricingCardOverlay,
|
|
27486
28079
|
{
|
|
27487
28080
|
postToParent: postToParent2,
|
|
@@ -27489,12 +28082,21 @@ function OhhwellsBridge() {
|
|
|
27489
28082
|
applyTreeLocalRef
|
|
27490
28083
|
}
|
|
27491
28084
|
),
|
|
27492
|
-
|
|
28085
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
28086
|
+
AiVideoOverlay,
|
|
28087
|
+
{
|
|
28088
|
+
postToParent: postToParent2,
|
|
28089
|
+
aiSectionsRef,
|
|
28090
|
+
applyTreeLocalRef,
|
|
28091
|
+
clearInteractionChromeRef
|
|
28092
|
+
}
|
|
28093
|
+
),
|
|
28094
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27493
28095
|
"div",
|
|
27494
28096
|
{
|
|
27495
28097
|
className: "pointer-events-none fixed z-2147483646",
|
|
27496
28098
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
27497
|
-
children: /* @__PURE__ */ (0,
|
|
28099
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27498
28100
|
DropIndicator,
|
|
27499
28101
|
{
|
|
27500
28102
|
direction: "horizontal",
|
|
@@ -27505,7 +28107,7 @@ function OhhwellsBridge() {
|
|
|
27505
28107
|
},
|
|
27506
28108
|
`section-drop-${slot.insertIndex}-${i}`
|
|
27507
28109
|
)),
|
|
27508
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
28110
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27509
28111
|
MediaOverlay,
|
|
27510
28112
|
{
|
|
27511
28113
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -27516,7 +28118,7 @@ function OhhwellsBridge() {
|
|
|
27516
28118
|
},
|
|
27517
28119
|
`uploading-${key}`
|
|
27518
28120
|
)),
|
|
27519
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0,
|
|
28121
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27520
28122
|
MediaOverlay,
|
|
27521
28123
|
{
|
|
27522
28124
|
hover: mediaHover,
|
|
@@ -27527,7 +28129,7 @@ function OhhwellsBridge() {
|
|
|
27527
28129
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27528
28130
|
}
|
|
27529
28131
|
),
|
|
27530
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0,
|
|
28132
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27531
28133
|
MediaOverlay,
|
|
27532
28134
|
{
|
|
27533
28135
|
hover: selectedMedia,
|
|
@@ -27539,7 +28141,7 @@ function OhhwellsBridge() {
|
|
|
27539
28141
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27540
28142
|
}
|
|
27541
28143
|
),
|
|
27542
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
28144
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27543
28145
|
CarouselOverlay,
|
|
27544
28146
|
{
|
|
27545
28147
|
hover: carouselHover,
|
|
@@ -27547,10 +28149,10 @@ function OhhwellsBridge() {
|
|
|
27547
28149
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
27548
28150
|
}
|
|
27549
28151
|
),
|
|
27550
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
27551
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
27552
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ (0,
|
|
27553
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
28152
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
28153
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
28154
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
28155
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27554
28156
|
"div",
|
|
27555
28157
|
{
|
|
27556
28158
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27560,7 +28162,7 @@ function OhhwellsBridge() {
|
|
|
27560
28162
|
width: slot.width,
|
|
27561
28163
|
height: slot.height
|
|
27562
28164
|
},
|
|
27563
|
-
children: /* @__PURE__ */ (0,
|
|
28165
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27564
28166
|
DropIndicator,
|
|
27565
28167
|
{
|
|
27566
28168
|
direction: slot.direction,
|
|
@@ -27571,7 +28173,7 @@ function OhhwellsBridge() {
|
|
|
27571
28173
|
},
|
|
27572
28174
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
27573
28175
|
)),
|
|
27574
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
28176
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27575
28177
|
"div",
|
|
27576
28178
|
{
|
|
27577
28179
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27581,7 +28183,7 @@ function OhhwellsBridge() {
|
|
|
27581
28183
|
width: slot.width,
|
|
27582
28184
|
height: slot.height
|
|
27583
28185
|
},
|
|
27584
|
-
children: /* @__PURE__ */ (0,
|
|
28186
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27585
28187
|
DropIndicator,
|
|
27586
28188
|
{
|
|
27587
28189
|
direction: slot.direction,
|
|
@@ -27592,7 +28194,7 @@ function OhhwellsBridge() {
|
|
|
27592
28194
|
},
|
|
27593
28195
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
27594
28196
|
)),
|
|
27595
|
-
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
28197
|
+
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27596
28198
|
"div",
|
|
27597
28199
|
{
|
|
27598
28200
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27602,7 +28204,7 @@ function OhhwellsBridge() {
|
|
|
27602
28204
|
width: slot.width,
|
|
27603
28205
|
height: slot.height
|
|
27604
28206
|
},
|
|
27605
|
-
children: /* @__PURE__ */ (0,
|
|
28207
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27606
28208
|
DropIndicator,
|
|
27607
28209
|
{
|
|
27608
28210
|
direction: slot.direction,
|
|
@@ -27613,10 +28215,10 @@ function OhhwellsBridge() {
|
|
|
27613
28215
|
},
|
|
27614
28216
|
`button-drop-${slot.direction}-${slot.insertIndex}-${i}`
|
|
27615
28217
|
)),
|
|
27616
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
27617
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
27618
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
27619
|
-
formPickRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
28218
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
28219
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
28220
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
28221
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27620
28222
|
ItemInteractionLayer,
|
|
27621
28223
|
{
|
|
27622
28224
|
rect: formPickRect,
|
|
@@ -27624,13 +28226,13 @@ function OhhwellsBridge() {
|
|
|
27624
28226
|
itemDragSurface: false,
|
|
27625
28227
|
toolbarAlign: "left",
|
|
27626
28228
|
chromeGap: 24,
|
|
27627
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0,
|
|
28229
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
27628
28230
|
"div",
|
|
27629
28231
|
{
|
|
27630
28232
|
"data-ohw-form-toolbar": "",
|
|
27631
28233
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
27632
28234
|
children: [
|
|
27633
|
-
/* @__PURE__ */ (0,
|
|
28235
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27634
28236
|
"button",
|
|
27635
28237
|
{
|
|
27636
28238
|
type: "button",
|
|
@@ -27638,11 +28240,11 @@ function OhhwellsBridge() {
|
|
|
27638
28240
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
27639
28241
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
27640
28242
|
"data-ohw-add-field": "",
|
|
27641
|
-
children: /* @__PURE__ */ (0,
|
|
28243
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react21.Plus, { size: 15, "aria-hidden": true })
|
|
27642
28244
|
}
|
|
27643
28245
|
),
|
|
27644
|
-
/* @__PURE__ */ (0,
|
|
27645
|
-
/* @__PURE__ */ (0,
|
|
28246
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
28247
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
27646
28248
|
"button",
|
|
27647
28249
|
{
|
|
27648
28250
|
type: "button",
|
|
@@ -27658,11 +28260,11 @@ function OhhwellsBridge() {
|
|
|
27658
28260
|
});
|
|
27659
28261
|
},
|
|
27660
28262
|
children: [
|
|
27661
|
-
/* @__PURE__ */ (0,
|
|
28263
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react21.Settings, { size: 14, "aria-hidden": true }),
|
|
27662
28264
|
"Form settings",
|
|
27663
28265
|
formPickCount ? (
|
|
27664
28266
|
// Counter pill, per the design — not a text suffix.
|
|
27665
|
-
/* @__PURE__ */ (0,
|
|
28267
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27666
28268
|
"span",
|
|
27667
28269
|
{
|
|
27668
28270
|
"data-ohw-form-count": "",
|
|
@@ -27674,8 +28276,8 @@ function OhhwellsBridge() {
|
|
|
27674
28276
|
]
|
|
27675
28277
|
}
|
|
27676
28278
|
),
|
|
27677
|
-
/* @__PURE__ */ (0,
|
|
27678
|
-
/* @__PURE__ */ (0,
|
|
28279
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
28280
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27679
28281
|
"button",
|
|
27680
28282
|
{
|
|
27681
28283
|
type: "button",
|
|
@@ -27706,7 +28308,7 @@ function OhhwellsBridge() {
|
|
|
27706
28308
|
)
|
|
27707
28309
|
}
|
|
27708
28310
|
),
|
|
27709
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
28311
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27710
28312
|
ItemInteractionLayer,
|
|
27711
28313
|
{
|
|
27712
28314
|
rect: formHoverRect,
|
|
@@ -27714,7 +28316,7 @@ function OhhwellsBridge() {
|
|
|
27714
28316
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
27715
28317
|
}
|
|
27716
28318
|
),
|
|
27717
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
28319
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27718
28320
|
ItemInteractionLayer,
|
|
27719
28321
|
{
|
|
27720
28322
|
rect: fieldPickRect,
|
|
@@ -27726,7 +28328,7 @@ function OhhwellsBridge() {
|
|
|
27726
28328
|
dragHandleLabel: "Reorder field",
|
|
27727
28329
|
onDragHandleDragStart: handleFieldDragStart,
|
|
27728
28330
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
27729
|
-
toolbar: /* @__PURE__ */ (0,
|
|
28331
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27730
28332
|
FormFieldToolbar,
|
|
27731
28333
|
{
|
|
27732
28334
|
type: fieldPickState.type,
|
|
@@ -27739,12 +28341,12 @@ function OhhwellsBridge() {
|
|
|
27739
28341
|
)
|
|
27740
28342
|
}
|
|
27741
28343
|
),
|
|
27742
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
28344
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27743
28345
|
"div",
|
|
27744
28346
|
{
|
|
27745
28347
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
27746
28348
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
27747
|
-
children: /* @__PURE__ */ (0,
|
|
28349
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27748
28350
|
DropIndicator,
|
|
27749
28351
|
{
|
|
27750
28352
|
direction: "horizontal",
|
|
@@ -27757,7 +28359,7 @@ function OhhwellsBridge() {
|
|
|
27757
28359
|
)) : null,
|
|
27758
28360
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
27759
28361
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
27760
|
-
return /* @__PURE__ */ (0,
|
|
28362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27761
28363
|
"div",
|
|
27762
28364
|
{
|
|
27763
28365
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -27765,12 +28367,12 @@ function OhhwellsBridge() {
|
|
|
27765
28367
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
27766
28368
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
27767
28369
|
},
|
|
27768
|
-
children: /* @__PURE__ */ (0,
|
|
28370
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FieldTypePicker, { onPick: handleAddField })
|
|
27769
28371
|
}
|
|
27770
28372
|
);
|
|
27771
28373
|
})() : null,
|
|
27772
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
27773
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
28374
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
28375
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27774
28376
|
FooterContainerChrome,
|
|
27775
28377
|
{
|
|
27776
28378
|
rect: toolbarRect,
|
|
@@ -27778,7 +28380,7 @@ function OhhwellsBridge() {
|
|
|
27778
28380
|
addDisabled: !canAddFooterColumn()
|
|
27779
28381
|
}
|
|
27780
28382
|
),
|
|
27781
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0,
|
|
28383
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27782
28384
|
ItemInteractionLayer,
|
|
27783
28385
|
{
|
|
27784
28386
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
|
|
@@ -27798,7 +28400,7 @@ function OhhwellsBridge() {
|
|
|
27798
28400
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
27799
28401
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
27800
28402
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
27801
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0,
|
|
28403
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27802
28404
|
ItemActionToolbar,
|
|
27803
28405
|
{
|
|
27804
28406
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -27849,8 +28451,8 @@ function OhhwellsBridge() {
|
|
|
27849
28451
|
) : void 0
|
|
27850
28452
|
}
|
|
27851
28453
|
),
|
|
27852
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0,
|
|
27853
|
-
/* @__PURE__ */ (0,
|
|
28454
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
28455
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27854
28456
|
EditGlowChrome,
|
|
27855
28457
|
{
|
|
27856
28458
|
rect: toolbarRect,
|
|
@@ -27860,7 +28462,7 @@ function OhhwellsBridge() {
|
|
|
27860
28462
|
hideHandle: isItemDragging
|
|
27861
28463
|
}
|
|
27862
28464
|
),
|
|
27863
|
-
/* @__PURE__ */ (0,
|
|
28465
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27864
28466
|
FloatingToolbar,
|
|
27865
28467
|
{
|
|
27866
28468
|
rect: toolbarRect,
|
|
@@ -27873,7 +28475,7 @@ function OhhwellsBridge() {
|
|
|
27873
28475
|
}
|
|
27874
28476
|
)
|
|
27875
28477
|
] }),
|
|
27876
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
28478
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
27877
28479
|
"div",
|
|
27878
28480
|
{
|
|
27879
28481
|
"data-ohw-max-badge": "",
|
|
@@ -27899,7 +28501,7 @@ function OhhwellsBridge() {
|
|
|
27899
28501
|
]
|
|
27900
28502
|
}
|
|
27901
28503
|
),
|
|
27902
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
28504
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27903
28505
|
StateToggle,
|
|
27904
28506
|
{
|
|
27905
28507
|
rect: toggleState.rect,
|
|
@@ -27908,15 +28510,15 @@ function OhhwellsBridge() {
|
|
|
27908
28510
|
onStateChange: handleStateChange
|
|
27909
28511
|
}
|
|
27910
28512
|
),
|
|
27911
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
28513
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
27912
28514
|
"div",
|
|
27913
28515
|
{
|
|
27914
28516
|
"data-ohw-section-insert-line": "",
|
|
27915
28517
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
27916
28518
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
27917
28519
|
children: [
|
|
27918
|
-
/* @__PURE__ */ (0,
|
|
27919
|
-
/* @__PURE__ */ (0,
|
|
28520
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
28521
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27920
28522
|
Badge,
|
|
27921
28523
|
{
|
|
27922
28524
|
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",
|
|
@@ -27933,11 +28535,11 @@ function OhhwellsBridge() {
|
|
|
27933
28535
|
children: "Add Section"
|
|
27934
28536
|
}
|
|
27935
28537
|
),
|
|
27936
|
-
/* @__PURE__ */ (0,
|
|
28538
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
27937
28539
|
]
|
|
27938
28540
|
}
|
|
27939
28541
|
),
|
|
27940
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
28542
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27941
28543
|
LinkPopover,
|
|
27942
28544
|
{
|
|
27943
28545
|
panelRef: linkPopoverPanelRef,
|
|
@@ -27954,7 +28556,7 @@ function OhhwellsBridge() {
|
|
|
27954
28556
|
},
|
|
27955
28557
|
linkPopover.key
|
|
27956
28558
|
) : null,
|
|
27957
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0,
|
|
28559
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27958
28560
|
FloatingPanel,
|
|
27959
28561
|
{
|
|
27960
28562
|
open: true,
|
|
@@ -27964,7 +28566,7 @@ function OhhwellsBridge() {
|
|
|
27964
28566
|
onPositionChange: setFloatingPanelPos,
|
|
27965
28567
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27966
28568
|
onClose: closeFloatingPanelOnly,
|
|
27967
|
-
children: /* @__PURE__ */ (0,
|
|
28569
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27968
28570
|
SocialsDisplayPanel,
|
|
27969
28571
|
{
|
|
27970
28572
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|
|
@@ -27985,19 +28587,19 @@ function OhhwellsBridge() {
|
|
|
27985
28587
|
const tokens = tokensFromButton(button);
|
|
27986
28588
|
const current = assignmentFor(button, editContentRef.current, tokens);
|
|
27987
28589
|
void buttonStyleTick;
|
|
27988
|
-
return /* @__PURE__ */ (0,
|
|
28590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27989
28591
|
FloatingPanel,
|
|
27990
28592
|
{
|
|
27991
28593
|
open: true,
|
|
27992
28594
|
title: floatingPanel.title,
|
|
27993
28595
|
context: floatingPanel.context,
|
|
27994
|
-
icon: /* @__PURE__ */ (0,
|
|
28596
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react21.Brush, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
27995
28597
|
position: floatingPanelPos,
|
|
27996
28598
|
onPositionChange: setFloatingPanelPos,
|
|
27997
28599
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27998
28600
|
onClose: closeFloatingPanelOnly,
|
|
27999
28601
|
bodyClassName: "gap-5",
|
|
28000
|
-
children: /* @__PURE__ */ (0,
|
|
28602
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
28001
28603
|
ButtonStylePanel,
|
|
28002
28604
|
{
|
|
28003
28605
|
variants: tokens.variants,
|
|
@@ -28025,10 +28627,10 @@ function OhhwellsBridge() {
|
|
|
28025
28627
|
|
|
28026
28628
|
// src/ui/EmptySection.tsx
|
|
28027
28629
|
var import_link = __toESM(require("next/link"), 1);
|
|
28028
|
-
var
|
|
28630
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
28029
28631
|
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
28030
|
-
return /* @__PURE__ */ (0,
|
|
28031
|
-
/* @__PURE__ */ (0,
|
|
28632
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
28633
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
28032
28634
|
"p",
|
|
28033
28635
|
{
|
|
28034
28636
|
style: {
|
|
@@ -28040,10 +28642,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
28040
28642
|
color: "var(--brand-accent)",
|
|
28041
28643
|
marginBottom: "1.5rem"
|
|
28042
28644
|
},
|
|
28043
|
-
children: /* @__PURE__ */ (0,
|
|
28645
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
|
|
28044
28646
|
}
|
|
28045
28647
|
),
|
|
28046
|
-
/* @__PURE__ */ (0,
|
|
28648
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
28047
28649
|
"h1",
|
|
28048
28650
|
{
|
|
28049
28651
|
style: {
|
|
@@ -28058,7 +28660,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
28058
28660
|
children: title
|
|
28059
28661
|
}
|
|
28060
28662
|
),
|
|
28061
|
-
/* @__PURE__ */ (0,
|
|
28663
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
28062
28664
|
"p",
|
|
28063
28665
|
{
|
|
28064
28666
|
style: {
|