@ohhwells/bridge 0.1.119 → 0.1.120
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 +1560 -651
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -2
- package/dist/index.d.ts +11 -2
- package/dist/index.js +1576 -667
- package/dist/index.js.map +1 -1
- package/dist/styles.css +7 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -74,7 +74,7 @@ __export(index_exports, {
|
|
|
74
74
|
module.exports = __toCommonJS(index_exports);
|
|
75
75
|
|
|
76
76
|
// src/OhhwellsBridge.tsx
|
|
77
|
-
var
|
|
77
|
+
var import_react19 = __toESM(require("react"), 1);
|
|
78
78
|
var import_client2 = require("react-dom/client");
|
|
79
79
|
var import_react_dom4 = require("react-dom");
|
|
80
80
|
|
|
@@ -1497,12 +1497,20 @@ function MediaBox({
|
|
|
1497
1497
|
aspect,
|
|
1498
1498
|
radius,
|
|
1499
1499
|
height,
|
|
1500
|
-
editPath
|
|
1500
|
+
editPath,
|
|
1501
|
+
alt,
|
|
1502
|
+
fit,
|
|
1503
|
+
grayscale,
|
|
1504
|
+
fixedSize,
|
|
1505
|
+
genericImageEdit = true
|
|
1501
1506
|
}) {
|
|
1502
1507
|
const url = refValue ? ctx.resolveMedia(refValue) : null;
|
|
1503
1508
|
const isIcon = /^(lucide|simple):/.test(refValue);
|
|
1504
1509
|
const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
|
|
1505
|
-
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1510
|
+
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1511
|
+
"data-ohw-key": ctx.keyFor(editPath),
|
|
1512
|
+
...genericImageEdit ? { "data-ohw-editable": "image" } : {}
|
|
1513
|
+
} : {};
|
|
1506
1514
|
if (isIcon) {
|
|
1507
1515
|
const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
|
|
1508
1516
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1527,9 +1535,10 @@ function MediaBox({
|
|
|
1527
1535
|
{
|
|
1528
1536
|
...editAttrs,
|
|
1529
1537
|
style: {
|
|
1530
|
-
width: "100%",
|
|
1538
|
+
width: fixedSize ? "auto" : "100%",
|
|
1531
1539
|
aspectRatio,
|
|
1532
|
-
|
|
1540
|
+
height: fixedSize ? height : void 0,
|
|
1541
|
+
minHeight: fixedSize ? void 0 : height ?? (aspectRatio ? void 0 : 180),
|
|
1533
1542
|
borderRadius: radius,
|
|
1534
1543
|
overflow: "hidden",
|
|
1535
1544
|
background: "#DBEAFE",
|
|
@@ -1537,7 +1546,8 @@ function MediaBox({
|
|
|
1537
1546
|
alignItems: "center",
|
|
1538
1547
|
justifyContent: "center",
|
|
1539
1548
|
color: "#93C5FD",
|
|
1540
|
-
fontSize: 13
|
|
1549
|
+
fontSize: 13,
|
|
1550
|
+
filter: grayscale ? "grayscale(1)" : void 0
|
|
1541
1551
|
},
|
|
1542
1552
|
children: url || keyed ? (
|
|
1543
1553
|
// Keyed slots always mount an <img> so hydrate overrides have a target.
|
|
@@ -1545,8 +1555,13 @@ function MediaBox({
|
|
|
1545
1555
|
"img",
|
|
1546
1556
|
{
|
|
1547
1557
|
src: url ?? TRANSPARENT_PX,
|
|
1548
|
-
alt: "",
|
|
1549
|
-
style: {
|
|
1558
|
+
alt: alt ?? "",
|
|
1559
|
+
style: {
|
|
1560
|
+
width: fixedSize ? "auto" : "100%",
|
|
1561
|
+
height: "100%",
|
|
1562
|
+
objectFit: fit ?? "cover",
|
|
1563
|
+
display: "block"
|
|
1564
|
+
}
|
|
1550
1565
|
}
|
|
1551
1566
|
)
|
|
1552
1567
|
) : refValue || "media"
|
|
@@ -2199,7 +2214,8 @@ function toggleAccordionItem(button) {
|
|
|
2199
2214
|
}
|
|
2200
2215
|
function AccordionBlock({ node, ctx, path }) {
|
|
2201
2216
|
const rule = `1px solid ${ctx.brand.palette.dark}33`;
|
|
2202
|
-
|
|
2217
|
+
const items = node.items ?? [];
|
|
2218
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ai-accordion": "", style: { borderTop: rule }, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderBottom: rule }, children: [
|
|
2203
2219
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
2204
2220
|
"button",
|
|
2205
2221
|
{
|
|
@@ -2252,6 +2268,94 @@ function AccordionBlock({ node, ctx, path }) {
|
|
|
2252
2268
|
) })
|
|
2253
2269
|
] }, i)) });
|
|
2254
2270
|
}
|
|
2271
|
+
function MediaStripBlock({ node, ctx, path }) {
|
|
2272
|
+
const slots = node.slots ?? {};
|
|
2273
|
+
const items = node.items ?? [];
|
|
2274
|
+
const variant = slots.variant === "reel" ? "reel" : "logos";
|
|
2275
|
+
const align = slots.align === "left" || slots.align === "right" ? slots.align : "center";
|
|
2276
|
+
const treatment = slots.treatment === "color" || slots.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
2277
|
+
const logoMaxHeight = typeof slots.logoMaxHeight === "number" ? slots.logoMaxHeight : 48;
|
|
2278
|
+
const cardWidth = typeof slots.cardWidth === "number" ? slots.cardWidth : 240;
|
|
2279
|
+
const justify = align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
|
|
2280
|
+
const label = str(slots.label);
|
|
2281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ohw-media-strip": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing6 }, children: [
|
|
2282
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
|
|
2283
|
+
// Host sites often style `a:hover{opacity}` globally — that would fade every linked item
|
|
2284
|
+
// whatever preset is chosen, so the anchors here opt out and only the preset applies.
|
|
2285
|
+
children: '[data-ohw-media-strip] a,[data-ohw-media-strip] a:hover{opacity:1}[data-ohw-media-strip-hover]{transition:transform 0.2s ease, opacity 0.2s ease}[data-ohw-media-strip-item]:hover>[data-ohw-media-strip-hover="lift"]{transform:translateY(-4px)}[data-ohw-media-strip-item]:hover>[data-ohw-media-strip-hover="zoom"]{transform:scale(1.05)}[data-ohw-media-strip-item]:hover>[data-ohw-media-strip-hover="fade"]{opacity:0.75}'
|
|
2286
|
+
}),
|
|
2287
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2288
|
+
"div",
|
|
2289
|
+
{
|
|
2290
|
+
...textAttrs(ctx, `${path}.label`),
|
|
2291
|
+
style: {
|
|
2292
|
+
...typeStyle(AI_TREE_TOKENS.type.eyebrow, ctx.brand.fonts.body),
|
|
2293
|
+
color: ctx.brand.palette.accent,
|
|
2294
|
+
textAlign: align
|
|
2295
|
+
},
|
|
2296
|
+
children: label
|
|
2297
|
+
}
|
|
2298
|
+
),
|
|
2299
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2300
|
+
"div",
|
|
2301
|
+
{
|
|
2302
|
+
style: {
|
|
2303
|
+
display: "flex",
|
|
2304
|
+
flexWrap: "wrap",
|
|
2305
|
+
gap: AI_TREE_TOKENS.spacing4,
|
|
2306
|
+
justifyContent: justify,
|
|
2307
|
+
alignItems: variant === "logos" ? "center" : "flex-start"
|
|
2308
|
+
},
|
|
2309
|
+
children: items.map((item, i) => {
|
|
2310
|
+
const hasLink = typeof item.href === "string" && item.href.length > 0;
|
|
2311
|
+
const hoverPreset = !hasLink ? "none" : slots.hover === "none" || slots.hover === "lift" || slots.hover === "zoom" || slots.hover === "fade" ? slots.hover : "lift";
|
|
2312
|
+
const box = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2313
|
+
"div",
|
|
2314
|
+
{
|
|
2315
|
+
"data-ohw-media-strip-item": "",
|
|
2316
|
+
"data-ohw-media-strip-index": i,
|
|
2317
|
+
style: variant === "logos" ? { height: logoMaxHeight, width: "auto" } : { width: cardWidth, flexShrink: 0 },
|
|
2318
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2319
|
+
"div",
|
|
2320
|
+
{
|
|
2321
|
+
"data-ohw-media-strip-hover": hoverPreset === "none" ? void 0 : hoverPreset,
|
|
2322
|
+
style: { height: "100%" },
|
|
2323
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2324
|
+
MediaBox,
|
|
2325
|
+
{
|
|
2326
|
+
refValue: item.assetId,
|
|
2327
|
+
ctx,
|
|
2328
|
+
aspect: variant === "reel" ? "9:16" : void 0,
|
|
2329
|
+
radius: variant === "reel" ? AI_TREE_TOKENS.radiusCard : 4,
|
|
2330
|
+
height: variant === "logos" ? logoMaxHeight : void 0,
|
|
2331
|
+
editPath: `${path}.items.${i}.assetId`,
|
|
2332
|
+
alt: item.alt,
|
|
2333
|
+
fit: variant === "logos" ? "contain" : "cover",
|
|
2334
|
+
grayscale: treatment === "grayscale",
|
|
2335
|
+
fixedSize: variant === "logos",
|
|
2336
|
+
genericImageEdit: false
|
|
2337
|
+
}
|
|
2338
|
+
)
|
|
2339
|
+
}
|
|
2340
|
+
)
|
|
2341
|
+
}
|
|
2342
|
+
);
|
|
2343
|
+
return hasLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2344
|
+
"a",
|
|
2345
|
+
{
|
|
2346
|
+
href: item.href,
|
|
2347
|
+
target: item.linkTarget === "same-tab" ? void 0 : "_blank",
|
|
2348
|
+
rel: item.linkTarget === "same-tab" ? void 0 : "noopener noreferrer",
|
|
2349
|
+
style: { display: "block", textDecoration: "none" },
|
|
2350
|
+
children: box
|
|
2351
|
+
},
|
|
2352
|
+
i
|
|
2353
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: box }, i);
|
|
2354
|
+
})
|
|
2355
|
+
}
|
|
2356
|
+
)
|
|
2357
|
+
] });
|
|
2358
|
+
}
|
|
2255
2359
|
function useIsMobile() {
|
|
2256
2360
|
const [mobile, setMobile] = import_react.default.useState(
|
|
2257
2361
|
() => typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
|
|
@@ -2583,6 +2687,8 @@ function renderNode(node, ctx, path) {
|
|
|
2583
2687
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollectionBlock, { node, ctx, path });
|
|
2584
2688
|
case "accordion":
|
|
2585
2689
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionBlock, { node, ctx, path });
|
|
2690
|
+
case "media-strip":
|
|
2691
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaStripBlock, { node, ctx, path });
|
|
2586
2692
|
case "embed": {
|
|
2587
2693
|
const child = (node.children ?? [])[0];
|
|
2588
2694
|
if (child) {
|
|
@@ -3080,21 +3186,21 @@ function placeContainer(container, entry) {
|
|
|
3080
3186
|
const original = findTemplateSection(entry.replaces);
|
|
3081
3187
|
if (original) {
|
|
3082
3188
|
original.insertAdjacentElement("afterend", container);
|
|
3083
|
-
return;
|
|
3189
|
+
return "anchored";
|
|
3084
3190
|
}
|
|
3085
3191
|
}
|
|
3086
3192
|
if (entry.beforeSection) {
|
|
3087
3193
|
const anchor = findPlacementAnchor(entry.beforeSection, container);
|
|
3088
3194
|
if (anchor) {
|
|
3089
3195
|
anchor.insertAdjacentElement("beforebegin", container);
|
|
3090
|
-
return;
|
|
3196
|
+
return "anchored";
|
|
3091
3197
|
}
|
|
3092
3198
|
}
|
|
3093
3199
|
if (entry.afterSection) {
|
|
3094
3200
|
const anchor = findPlacementAnchor(entry.afterSection, container);
|
|
3095
3201
|
if (anchor) {
|
|
3096
3202
|
anchor.insertAdjacentElement("afterend", container);
|
|
3097
|
-
return;
|
|
3203
|
+
return "anchored";
|
|
3098
3204
|
}
|
|
3099
3205
|
}
|
|
3100
3206
|
const footer = findFooterSection();
|
|
@@ -3103,6 +3209,7 @@ function placeContainer(container, entry) {
|
|
|
3103
3209
|
} else {
|
|
3104
3210
|
document.body.appendChild(container);
|
|
3105
3211
|
}
|
|
3212
|
+
return "fallback";
|
|
3106
3213
|
}
|
|
3107
3214
|
function syncRemovedSections(state) {
|
|
3108
3215
|
const removed = new Set(state.removed ?? []);
|
|
@@ -3159,6 +3266,10 @@ function syncReplacedOriginals(state) {
|
|
|
3159
3266
|
}
|
|
3160
3267
|
var sectionOrderIndex = /* @__PURE__ */ new Map();
|
|
3161
3268
|
var removedSectionIds = /* @__PURE__ */ new Set();
|
|
3269
|
+
var persistSectionOrder = null;
|
|
3270
|
+
function setSectionOrderPersistHandler(handler) {
|
|
3271
|
+
persistSectionOrder = handler;
|
|
3272
|
+
}
|
|
3162
3273
|
function setAiSectionOrder(raw, currentPath) {
|
|
3163
3274
|
const next = /* @__PURE__ */ new Map();
|
|
3164
3275
|
const removed = /* @__PURE__ */ new Set();
|
|
@@ -3239,16 +3350,16 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3239
3350
|
mounted.delete(id);
|
|
3240
3351
|
}
|
|
3241
3352
|
}
|
|
3353
|
+
const newlyAnchoredIds = [];
|
|
3242
3354
|
for (const entry of ordered) {
|
|
3243
3355
|
const serialized = JSON.stringify(entry) + brandKey;
|
|
3244
3356
|
const existing = mounted.get(entry.id);
|
|
3245
3357
|
if (existing && existing.serialized === serialized && existing.container.isConnected) {
|
|
3246
3358
|
continue;
|
|
3247
3359
|
}
|
|
3360
|
+
const isNewMount = !existing || !existing.container.isConnected;
|
|
3248
3361
|
let container = existing?.container;
|
|
3249
|
-
let isNewMount = false;
|
|
3250
3362
|
if (!container || !container.isConnected) {
|
|
3251
|
-
isNewMount = true;
|
|
3252
3363
|
existing?.root.unmount();
|
|
3253
3364
|
container?.remove();
|
|
3254
3365
|
container = document.createElement("div");
|
|
@@ -3258,7 +3369,10 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3258
3369
|
container.setAttribute("data-ohw-section", entry.id);
|
|
3259
3370
|
container.setAttribute("data-ohw-instance", entry.id);
|
|
3260
3371
|
container.setAttribute("data-ohw-section-label", entry.label);
|
|
3261
|
-
if (isNewMount)
|
|
3372
|
+
if (isNewMount) {
|
|
3373
|
+
const mode = placeContainer(container, entry);
|
|
3374
|
+
if (mode === "anchored" && !sectionOrderIndex.has(entry.id)) newlyAnchoredIds.push(entry.id);
|
|
3375
|
+
}
|
|
3262
3376
|
const root = mounted.get(entry.id)?.root ?? (0, import_client.createRoot)(container);
|
|
3263
3377
|
const resolveMedia = (ref) => entry.media[ref] ?? null;
|
|
3264
3378
|
(0, import_react_dom.flushSync)(() => {
|
|
@@ -3288,6 +3402,16 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3288
3402
|
prev = el;
|
|
3289
3403
|
}
|
|
3290
3404
|
}
|
|
3405
|
+
if (newlyAnchoredIds.length > 0 && persistSectionOrder) {
|
|
3406
|
+
const snapshot = topLevelSections().map((el, order) => ({
|
|
3407
|
+
instanceId: instanceIdOf(el),
|
|
3408
|
+
type: el.getAttribute("data-ohw-section") ?? "",
|
|
3409
|
+
order,
|
|
3410
|
+
pagePath
|
|
3411
|
+
}));
|
|
3412
|
+
for (const snapEntry of snapshot) sectionOrderIndex.set(snapEntry.instanceId, snapEntry.order);
|
|
3413
|
+
persistSectionOrder(snapshot);
|
|
3414
|
+
}
|
|
3291
3415
|
syncReplacedOriginals(state);
|
|
3292
3416
|
syncRemovedSections(state);
|
|
3293
3417
|
syncTemplateHidden(state, pageSections.length > 0);
|
|
@@ -9749,35 +9873,796 @@ function AiSectionOverlay({
|
|
|
9749
9873
|
pointerEvents: "none",
|
|
9750
9874
|
zIndex: 2147483200
|
|
9751
9875
|
}
|
|
9752
|
-
}
|
|
9753
|
-
),
|
|
9754
|
-
!reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
9755
|
-
"div",
|
|
9756
|
-
{
|
|
9757
|
-
style: {
|
|
9758
|
-
position: "fixed",
|
|
9759
|
-
top: reviewRect.top + 12,
|
|
9760
|
-
left: reviewRect.left,
|
|
9761
|
-
width: reviewRect.width,
|
|
9762
|
-
display: "flex",
|
|
9763
|
-
gap: 8,
|
|
9764
|
-
justifyContent: "flex-end",
|
|
9765
|
-
paddingRight: 12,
|
|
9766
|
-
zIndex: 2147483201
|
|
9767
|
-
},
|
|
9768
|
-
children: [
|
|
9769
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
|
|
9770
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
|
|
9771
|
-
]
|
|
9772
|
-
}
|
|
9773
|
-
)
|
|
9774
|
-
] })
|
|
9876
|
+
}
|
|
9877
|
+
),
|
|
9878
|
+
!reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
9879
|
+
"div",
|
|
9880
|
+
{
|
|
9881
|
+
style: {
|
|
9882
|
+
position: "fixed",
|
|
9883
|
+
top: reviewRect.top + 12,
|
|
9884
|
+
left: reviewRect.left,
|
|
9885
|
+
width: reviewRect.width,
|
|
9886
|
+
display: "flex",
|
|
9887
|
+
gap: 8,
|
|
9888
|
+
justifyContent: "flex-end",
|
|
9889
|
+
paddingRight: 12,
|
|
9890
|
+
zIndex: 2147483201
|
|
9891
|
+
},
|
|
9892
|
+
children: [
|
|
9893
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
|
|
9894
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
|
|
9895
|
+
]
|
|
9896
|
+
}
|
|
9897
|
+
)
|
|
9898
|
+
] })
|
|
9899
|
+
] });
|
|
9900
|
+
}
|
|
9901
|
+
|
|
9902
|
+
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
9903
|
+
var import_react9 = require("react");
|
|
9904
|
+
var import_lucide_react8 = require("lucide-react");
|
|
9905
|
+
|
|
9906
|
+
// src/lib/ai-media-strip-tree.ts
|
|
9907
|
+
var MEDIA_STRIP_ITEM_MIN = 1;
|
|
9908
|
+
var LOGO_MAX_HEIGHT_MIN = 24;
|
|
9909
|
+
var LOGO_MAX_HEIGHT_MAX = 96;
|
|
9910
|
+
var CARD_WIDTH_MIN = 160;
|
|
9911
|
+
var CARD_WIDTH_MAX = 320;
|
|
9912
|
+
function isMediaStrip(node) {
|
|
9913
|
+
return node.type === "media-strip";
|
|
9914
|
+
}
|
|
9915
|
+
function findBlock(node) {
|
|
9916
|
+
if (isMediaStrip(node)) return node;
|
|
9917
|
+
for (const child of node.children ?? []) {
|
|
9918
|
+
const found = findBlock(child);
|
|
9919
|
+
if (found) return found;
|
|
9920
|
+
}
|
|
9921
|
+
return null;
|
|
9922
|
+
}
|
|
9923
|
+
function findMediaStripBlock(tree) {
|
|
9924
|
+
for (const row of tree.rows ?? []) {
|
|
9925
|
+
for (const block of row.blocks ?? []) {
|
|
9926
|
+
const found = findBlock(block);
|
|
9927
|
+
if (found) return found;
|
|
9928
|
+
}
|
|
9929
|
+
}
|
|
9930
|
+
return null;
|
|
9931
|
+
}
|
|
9932
|
+
function mediaStripItems(tree) {
|
|
9933
|
+
const block = findMediaStripBlock(tree);
|
|
9934
|
+
return block?.items ?? [];
|
|
9935
|
+
}
|
|
9936
|
+
function withMediaStrip(tree, mutate) {
|
|
9937
|
+
const next = JSON.parse(JSON.stringify(tree));
|
|
9938
|
+
const block = findMediaStripBlock(next);
|
|
9939
|
+
if (!block) return null;
|
|
9940
|
+
block.items = block.items ?? [];
|
|
9941
|
+
return mutate(block) ? next : null;
|
|
9942
|
+
}
|
|
9943
|
+
function addMediaStripItem(tree, item, afterIndex) {
|
|
9944
|
+
return withMediaStrip(tree, (block) => {
|
|
9945
|
+
const items = block.items;
|
|
9946
|
+
const at = afterIndex === void 0 ? items.length : Math.min(items.length, afterIndex + 1);
|
|
9947
|
+
items.splice(at, 0, { ...item });
|
|
9948
|
+
return true;
|
|
9949
|
+
});
|
|
9950
|
+
}
|
|
9951
|
+
function removeMediaStripItem(tree, index) {
|
|
9952
|
+
return withMediaStrip(tree, (block) => {
|
|
9953
|
+
const items = block.items;
|
|
9954
|
+
if (items.length <= MEDIA_STRIP_ITEM_MIN) return false;
|
|
9955
|
+
if (index < 0 || index >= items.length) return false;
|
|
9956
|
+
items.splice(index, 1);
|
|
9957
|
+
return true;
|
|
9958
|
+
});
|
|
9959
|
+
}
|
|
9960
|
+
function reorderMediaStripItem(tree, index, direction) {
|
|
9961
|
+
return withMediaStrip(tree, (block) => {
|
|
9962
|
+
const items = block.items;
|
|
9963
|
+
const target = index + direction;
|
|
9964
|
+
if (index < 0 || index >= items.length || target < 0 || target >= items.length) return false;
|
|
9965
|
+
const [moved] = items.splice(index, 1);
|
|
9966
|
+
items.splice(target, 0, moved);
|
|
9967
|
+
return true;
|
|
9968
|
+
});
|
|
9969
|
+
}
|
|
9970
|
+
function setMediaStripVariant(tree, variant) {
|
|
9971
|
+
return withMediaStrip(tree, (block) => {
|
|
9972
|
+
block.slots = { ...block.slots, variant };
|
|
9973
|
+
if (variant === "logos") delete block.slots.cardWidth;
|
|
9974
|
+
if (variant === "reel") delete block.slots.logoMaxHeight;
|
|
9975
|
+
return true;
|
|
9976
|
+
});
|
|
9977
|
+
}
|
|
9978
|
+
function setMediaStripSizing(tree, value) {
|
|
9979
|
+
return withMediaStrip(tree, (block) => {
|
|
9980
|
+
const variant = block.slots?.variant;
|
|
9981
|
+
if (variant === "logos") {
|
|
9982
|
+
block.slots = { ...block.slots, logoMaxHeight: Math.min(LOGO_MAX_HEIGHT_MAX, Math.max(LOGO_MAX_HEIGHT_MIN, value)) };
|
|
9983
|
+
return true;
|
|
9984
|
+
}
|
|
9985
|
+
if (variant === "reel") {
|
|
9986
|
+
block.slots = { ...block.slots, cardWidth: Math.min(CARD_WIDTH_MAX, Math.max(CARD_WIDTH_MIN, value)) };
|
|
9987
|
+
return true;
|
|
9988
|
+
}
|
|
9989
|
+
return false;
|
|
9990
|
+
});
|
|
9991
|
+
}
|
|
9992
|
+
function setMediaStripTreatment(tree, treatment) {
|
|
9993
|
+
return withMediaStrip(tree, (block) => {
|
|
9994
|
+
block.slots = { ...block.slots, treatment };
|
|
9995
|
+
return true;
|
|
9996
|
+
});
|
|
9997
|
+
}
|
|
9998
|
+
function setMediaStripAlign(tree, align) {
|
|
9999
|
+
return withMediaStrip(tree, (block) => {
|
|
10000
|
+
block.slots = { ...block.slots, align };
|
|
10001
|
+
return true;
|
|
10002
|
+
});
|
|
10003
|
+
}
|
|
10004
|
+
function setMediaStripHover(tree, hover) {
|
|
10005
|
+
return withMediaStrip(tree, (block) => {
|
|
10006
|
+
block.slots = { ...block.slots, hover };
|
|
10007
|
+
return true;
|
|
10008
|
+
});
|
|
10009
|
+
}
|
|
10010
|
+
function setMediaStripItemAsset(tree, index, assetId) {
|
|
10011
|
+
return withMediaStrip(tree, (block) => {
|
|
10012
|
+
const items = block.items;
|
|
10013
|
+
if (index < 0 || index >= items.length) return false;
|
|
10014
|
+
items[index] = { ...items[index], assetId };
|
|
10015
|
+
return true;
|
|
10016
|
+
});
|
|
10017
|
+
}
|
|
10018
|
+
function setMediaStripItemAlt(tree, index, alt) {
|
|
10019
|
+
return withMediaStrip(tree, (block) => {
|
|
10020
|
+
const items = block.items;
|
|
10021
|
+
if (index < 0 || index >= items.length) return false;
|
|
10022
|
+
items[index] = { ...items[index], alt };
|
|
10023
|
+
return true;
|
|
10024
|
+
});
|
|
10025
|
+
}
|
|
10026
|
+
function setMediaStripItemLink(tree, index, link) {
|
|
10027
|
+
return withMediaStrip(tree, (block) => {
|
|
10028
|
+
const items = block.items;
|
|
10029
|
+
if (index < 0 || index >= items.length) return false;
|
|
10030
|
+
const item = { ...items[index] };
|
|
10031
|
+
if (link.href) {
|
|
10032
|
+
item.href = link.href;
|
|
10033
|
+
if (link.linkTarget) item.linkTarget = link.linkTarget;
|
|
10034
|
+
} else {
|
|
10035
|
+
delete item.href;
|
|
10036
|
+
delete item.linkTarget;
|
|
10037
|
+
}
|
|
10038
|
+
items[index] = item;
|
|
10039
|
+
return true;
|
|
10040
|
+
});
|
|
10041
|
+
}
|
|
10042
|
+
|
|
10043
|
+
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
10044
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
10045
|
+
var PRIMARY3 = "#0885FE";
|
|
10046
|
+
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
10047
|
+
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
10048
|
+
function findMediaStripItemElement(sectionId, index) {
|
|
10049
|
+
const sectionEl = findByInstanceId(sectionId);
|
|
10050
|
+
if (!sectionEl) return null;
|
|
10051
|
+
const items = sectionEl.querySelectorAll("[data-ohw-media-strip-item]");
|
|
10052
|
+
for (const el of Array.from(items)) {
|
|
10053
|
+
if (Number(el.dataset.ohwMediaStripIndex) === index) return el;
|
|
10054
|
+
}
|
|
10055
|
+
return null;
|
|
10056
|
+
}
|
|
10057
|
+
function readRect2(ref) {
|
|
10058
|
+
const el = ref && findMediaStripItemElement(ref.sectionId, ref.index);
|
|
10059
|
+
if (!el) return null;
|
|
10060
|
+
const r2 = el.getBoundingClientRect();
|
|
10061
|
+
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
10062
|
+
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
10063
|
+
}
|
|
10064
|
+
function useLiveItemRect(ref) {
|
|
10065
|
+
const [rect, setRect] = (0, import_react9.useState)(null);
|
|
10066
|
+
(0, import_react9.useEffect)(() => {
|
|
10067
|
+
if (!ref) {
|
|
10068
|
+
setRect(null);
|
|
10069
|
+
return;
|
|
10070
|
+
}
|
|
10071
|
+
const update = () => {
|
|
10072
|
+
const next = readRect2(ref);
|
|
10073
|
+
setRect(
|
|
10074
|
+
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
10075
|
+
);
|
|
10076
|
+
};
|
|
10077
|
+
update();
|
|
10078
|
+
const opts = { capture: true, passive: true };
|
|
10079
|
+
window.addEventListener("scroll", update, opts);
|
|
10080
|
+
window.addEventListener("resize", update);
|
|
10081
|
+
const interval = setInterval(update, 500);
|
|
10082
|
+
return () => {
|
|
10083
|
+
window.removeEventListener("scroll", update, opts);
|
|
10084
|
+
window.removeEventListener("resize", update);
|
|
10085
|
+
clearInterval(interval);
|
|
10086
|
+
};
|
|
10087
|
+
}, [ref?.sectionId, ref?.index]);
|
|
10088
|
+
return rect;
|
|
10089
|
+
}
|
|
10090
|
+
function requestValidateTree(postToParent2, tree) {
|
|
10091
|
+
return new Promise((resolve) => {
|
|
10092
|
+
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10093
|
+
const timeout = window.setTimeout(() => {
|
|
10094
|
+
window.removeEventListener("message", onMessage);
|
|
10095
|
+
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
10096
|
+
}, 8e3);
|
|
10097
|
+
function onMessage(e) {
|
|
10098
|
+
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
10099
|
+
window.clearTimeout(timeout);
|
|
10100
|
+
window.removeEventListener("message", onMessage);
|
|
10101
|
+
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
10102
|
+
}
|
|
10103
|
+
window.addEventListener("message", onMessage);
|
|
10104
|
+
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
10105
|
+
});
|
|
10106
|
+
}
|
|
10107
|
+
function requestAssetPick(postToParent2) {
|
|
10108
|
+
return new Promise((resolve) => {
|
|
10109
|
+
const id = `ai-asset-pick-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10110
|
+
const timeout = window.setTimeout(() => {
|
|
10111
|
+
window.removeEventListener("message", onMessage);
|
|
10112
|
+
resolve(null);
|
|
10113
|
+
}, 3e5);
|
|
10114
|
+
function onMessage(e) {
|
|
10115
|
+
if (e.data?.type !== "ow:asset-picked" || e.data.id !== id) return;
|
|
10116
|
+
window.clearTimeout(timeout);
|
|
10117
|
+
window.removeEventListener("message", onMessage);
|
|
10118
|
+
resolve(
|
|
10119
|
+
typeof e.data.assetId === "string" && typeof e.data.url === "string" ? { assetId: e.data.assetId, url: e.data.url } : null
|
|
10120
|
+
);
|
|
10121
|
+
}
|
|
10122
|
+
window.addEventListener("message", onMessage);
|
|
10123
|
+
postToParent2({ type: "ow:asset-pick", id });
|
|
10124
|
+
});
|
|
10125
|
+
}
|
|
10126
|
+
function Pill({
|
|
10127
|
+
label,
|
|
10128
|
+
onClick,
|
|
10129
|
+
disabled,
|
|
10130
|
+
active
|
|
10131
|
+
}) {
|
|
10132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10133
|
+
"button",
|
|
10134
|
+
{
|
|
10135
|
+
type: "button",
|
|
10136
|
+
onClick,
|
|
10137
|
+
disabled,
|
|
10138
|
+
style: {
|
|
10139
|
+
height: 28,
|
|
10140
|
+
padding: "0 10px",
|
|
10141
|
+
display: "inline-flex",
|
|
10142
|
+
alignItems: "center",
|
|
10143
|
+
gap: 4,
|
|
10144
|
+
borderRadius: 999,
|
|
10145
|
+
border: "none",
|
|
10146
|
+
cursor: disabled ? "default" : "pointer",
|
|
10147
|
+
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10148
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10149
|
+
opacity: disabled ? 0.4 : 1,
|
|
10150
|
+
fontSize: 12,
|
|
10151
|
+
lineHeight: "16px",
|
|
10152
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10153
|
+
whiteSpace: "nowrap",
|
|
10154
|
+
flex: "0 0 auto"
|
|
10155
|
+
},
|
|
10156
|
+
children: label
|
|
10157
|
+
}
|
|
10158
|
+
);
|
|
10159
|
+
}
|
|
10160
|
+
function AltInput({ value, onCommit }) {
|
|
10161
|
+
const [draft, setDraft] = (0, import_react9.useState)(value);
|
|
10162
|
+
(0, import_react9.useEffect)(() => setDraft(value), [value]);
|
|
10163
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10164
|
+
"div",
|
|
10165
|
+
{
|
|
10166
|
+
style: {
|
|
10167
|
+
display: "flex",
|
|
10168
|
+
alignItems: "center",
|
|
10169
|
+
gap: 6,
|
|
10170
|
+
height: 28,
|
|
10171
|
+
padding: "0 12px",
|
|
10172
|
+
borderRadius: 999,
|
|
10173
|
+
background: "#ffffff",
|
|
10174
|
+
width: "100%",
|
|
10175
|
+
maxWidth: 260,
|
|
10176
|
+
boxSizing: "border-box"
|
|
10177
|
+
},
|
|
10178
|
+
children: [
|
|
10179
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10180
|
+
"span",
|
|
10181
|
+
{
|
|
10182
|
+
style: {
|
|
10183
|
+
flex: "0 0 auto",
|
|
10184
|
+
color: OHW_BLUE_DARK,
|
|
10185
|
+
fontSize: 10,
|
|
10186
|
+
fontWeight: 700,
|
|
10187
|
+
textTransform: "uppercase",
|
|
10188
|
+
letterSpacing: 0.4
|
|
10189
|
+
},
|
|
10190
|
+
children: "Alt"
|
|
10191
|
+
}
|
|
10192
|
+
),
|
|
10193
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10194
|
+
"input",
|
|
10195
|
+
{
|
|
10196
|
+
type: "text",
|
|
10197
|
+
value: draft,
|
|
10198
|
+
onChange: (e) => setDraft(e.target.value),
|
|
10199
|
+
onBlur: () => {
|
|
10200
|
+
if (draft !== value) onCommit(draft);
|
|
10201
|
+
},
|
|
10202
|
+
onKeyDown: (e) => {
|
|
10203
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
10204
|
+
if (e.key === "Escape") {
|
|
10205
|
+
setDraft(value);
|
|
10206
|
+
e.currentTarget.blur();
|
|
10207
|
+
}
|
|
10208
|
+
},
|
|
10209
|
+
placeholder: "Describe this image",
|
|
10210
|
+
"aria-label": "Image alt text",
|
|
10211
|
+
style: {
|
|
10212
|
+
flex: 1,
|
|
10213
|
+
minWidth: 0,
|
|
10214
|
+
border: "none",
|
|
10215
|
+
outline: "none",
|
|
10216
|
+
background: "transparent",
|
|
10217
|
+
fontSize: 12,
|
|
10218
|
+
lineHeight: "16px",
|
|
10219
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10220
|
+
color: "#1f2937"
|
|
10221
|
+
}
|
|
10222
|
+
}
|
|
10223
|
+
)
|
|
10224
|
+
]
|
|
10225
|
+
}
|
|
10226
|
+
);
|
|
10227
|
+
}
|
|
10228
|
+
var VARIANTS = [
|
|
10229
|
+
{ value: "logos", label: "Logos" },
|
|
10230
|
+
{ value: "reel", label: "Reel" }
|
|
10231
|
+
];
|
|
10232
|
+
var ALIGNS = [
|
|
10233
|
+
{ value: "left", label: "Left" },
|
|
10234
|
+
{ value: "center", label: "Center" },
|
|
10235
|
+
{ value: "right", label: "Right" }
|
|
10236
|
+
];
|
|
10237
|
+
var HOVERS = [
|
|
10238
|
+
{ value: "none", label: "None" },
|
|
10239
|
+
{ value: "lift", label: "Lift" },
|
|
10240
|
+
{ value: "zoom", label: "Zoom" },
|
|
10241
|
+
{ value: "fade", label: "Fade" }
|
|
10242
|
+
];
|
|
10243
|
+
var TREATMENTS = [
|
|
10244
|
+
{ value: "color", label: "Color" },
|
|
10245
|
+
{ value: "grayscale", label: "Grayscale" }
|
|
10246
|
+
];
|
|
10247
|
+
var HTTP_URL_RE = /^https?:\/\/\S+$/i;
|
|
10248
|
+
function LinkInput({ value, onCommit }) {
|
|
10249
|
+
const [draft, setDraft] = (0, import_react9.useState)(value);
|
|
10250
|
+
const [invalid, setInvalid] = (0, import_react9.useState)(false);
|
|
10251
|
+
(0, import_react9.useEffect)(() => {
|
|
10252
|
+
setDraft(value);
|
|
10253
|
+
setInvalid(false);
|
|
10254
|
+
}, [value]);
|
|
10255
|
+
const commit = () => {
|
|
10256
|
+
const next = draft.trim();
|
|
10257
|
+
if (next === value) return setInvalid(false);
|
|
10258
|
+
if (next && !HTTP_URL_RE.test(next)) return setInvalid(true);
|
|
10259
|
+
setInvalid(false);
|
|
10260
|
+
onCommit(next);
|
|
10261
|
+
};
|
|
10262
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10263
|
+
"div",
|
|
10264
|
+
{
|
|
10265
|
+
style: {
|
|
10266
|
+
display: "flex",
|
|
10267
|
+
alignItems: "center",
|
|
10268
|
+
gap: 6,
|
|
10269
|
+
height: 28,
|
|
10270
|
+
padding: "0 12px",
|
|
10271
|
+
borderRadius: 999,
|
|
10272
|
+
background: "#ffffff",
|
|
10273
|
+
width: "100%",
|
|
10274
|
+
maxWidth: 260,
|
|
10275
|
+
boxSizing: "border-box",
|
|
10276
|
+
boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
|
|
10277
|
+
},
|
|
10278
|
+
children: [
|
|
10279
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10280
|
+
"span",
|
|
10281
|
+
{
|
|
10282
|
+
style: {
|
|
10283
|
+
flex: "0 0 auto",
|
|
10284
|
+
color: OHW_BLUE_DARK,
|
|
10285
|
+
fontSize: 10,
|
|
10286
|
+
fontWeight: 700,
|
|
10287
|
+
textTransform: "uppercase",
|
|
10288
|
+
letterSpacing: 0.4
|
|
10289
|
+
},
|
|
10290
|
+
children: "Link"
|
|
10291
|
+
}
|
|
10292
|
+
),
|
|
10293
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10294
|
+
"input",
|
|
10295
|
+
{
|
|
10296
|
+
type: "text",
|
|
10297
|
+
inputMode: "url",
|
|
10298
|
+
value: draft,
|
|
10299
|
+
onChange: (e) => setDraft(e.target.value),
|
|
10300
|
+
onBlur: commit,
|
|
10301
|
+
onKeyDown: (e) => {
|
|
10302
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
10303
|
+
if (e.key === "Escape") {
|
|
10304
|
+
setDraft(value);
|
|
10305
|
+
setInvalid(false);
|
|
10306
|
+
e.currentTarget.blur();
|
|
10307
|
+
}
|
|
10308
|
+
},
|
|
10309
|
+
placeholder: "https://example.com",
|
|
10310
|
+
"aria-label": "Image link URL",
|
|
10311
|
+
"aria-invalid": invalid,
|
|
10312
|
+
style: {
|
|
10313
|
+
flex: 1,
|
|
10314
|
+
minWidth: 0,
|
|
10315
|
+
border: "none",
|
|
10316
|
+
outline: "none",
|
|
10317
|
+
background: "transparent",
|
|
10318
|
+
fontSize: 12,
|
|
10319
|
+
lineHeight: "16px",
|
|
10320
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10321
|
+
color: "#1f2937"
|
|
10322
|
+
}
|
|
10323
|
+
}
|
|
10324
|
+
)
|
|
10325
|
+
]
|
|
10326
|
+
}
|
|
10327
|
+
);
|
|
10328
|
+
}
|
|
10329
|
+
function MediaStripToolbar({
|
|
10330
|
+
entry,
|
|
10331
|
+
index,
|
|
10332
|
+
pending,
|
|
10333
|
+
error,
|
|
10334
|
+
onSetVariant,
|
|
10335
|
+
onSetAlign,
|
|
10336
|
+
onSetHover,
|
|
10337
|
+
onSetTreatment,
|
|
10338
|
+
onResize,
|
|
10339
|
+
onSetAlt,
|
|
10340
|
+
onSetLink,
|
|
10341
|
+
onAddItem,
|
|
10342
|
+
onRemoveItem,
|
|
10343
|
+
onChangeImage,
|
|
10344
|
+
onMoveLeft,
|
|
10345
|
+
onMoveRight
|
|
10346
|
+
}) {
|
|
10347
|
+
const items = mediaStripItems(entry.tree);
|
|
10348
|
+
const itemCount = items.length;
|
|
10349
|
+
const currentAlt = items[index]?.alt ?? "";
|
|
10350
|
+
const currentHref = items[index]?.href ?? "";
|
|
10351
|
+
const currentTarget = items[index]?.linkTarget === "same-tab" ? "same-tab" : "new-tab";
|
|
10352
|
+
const slots = findMediaStripSlots(entry.tree);
|
|
10353
|
+
const variant = slots?.variant === "reel" ? "reel" : "logos";
|
|
10354
|
+
const align = slots?.align === "left" || slots?.align === "right" ? slots.align : "center";
|
|
10355
|
+
const hover = slots?.hover === "none" || slots?.hover === "lift" || slots?.hover === "zoom" || slots?.hover === "fade" ? slots.hover : "lift";
|
|
10356
|
+
const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
10357
|
+
const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10358
|
+
const isMobile = window.innerWidth <= 480;
|
|
10359
|
+
const rowStyle = isMobile ? {
|
|
10360
|
+
display: "flex",
|
|
10361
|
+
gap: 6,
|
|
10362
|
+
flexWrap: "nowrap",
|
|
10363
|
+
justifyContent: "center",
|
|
10364
|
+
overflowX: "auto",
|
|
10365
|
+
WebkitOverflowScrolling: "touch",
|
|
10366
|
+
width: "100%",
|
|
10367
|
+
scrollbarWidth: "none"
|
|
10368
|
+
} : { display: "flex", gap: 6, flexWrap: "nowrap", justifyContent: "center" };
|
|
10369
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10370
|
+
"div",
|
|
10371
|
+
{
|
|
10372
|
+
"data-ohw-bridge": "",
|
|
10373
|
+
"data-ohw-toolbar": "",
|
|
10374
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
10375
|
+
style: {
|
|
10376
|
+
display: "flex",
|
|
10377
|
+
flexDirection: "column",
|
|
10378
|
+
gap: 6,
|
|
10379
|
+
alignItems: "center",
|
|
10380
|
+
background: OHW_BLUE,
|
|
10381
|
+
padding: 8,
|
|
10382
|
+
borderRadius: 12,
|
|
10383
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
10384
|
+
pointerEvents: pending ? "none" : "auto",
|
|
10385
|
+
opacity: pending ? 0.6 : 1,
|
|
10386
|
+
maxWidth: isMobile ? "calc(100vw - 24px)" : "none"
|
|
10387
|
+
},
|
|
10388
|
+
children: [
|
|
10389
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10390
|
+
VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
|
|
10391
|
+
ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
|
|
10392
|
+
] }),
|
|
10393
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10394
|
+
HOVERS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
|
|
10395
|
+
TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
|
|
10396
|
+
] }),
|
|
10397
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
|
|
10398
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212", onClick: () => onResize(-8) }),
|
|
10399
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: "#ffffff", fontSize: 12, minWidth: 34, textAlign: "center" }, children: [
|
|
10400
|
+
sizeValue,
|
|
10401
|
+
"px"
|
|
10402
|
+
] }),
|
|
10403
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+", onClick: () => onResize(8) })
|
|
10404
|
+
] }),
|
|
10405
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AltInput, { value: currentAlt, onCommit: onSetAlt }) }),
|
|
10406
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LinkInput, { value: currentHref, onCommit: (href) => onSetLink(href, currentTarget) }) }),
|
|
10407
|
+
currentHref && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10408
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "New tab", active: currentTarget === "new-tab", onClick: () => onSetLink(currentHref, "new-tab") }),
|
|
10409
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Same tab", active: currentTarget === "same-tab", onClick: () => onSetLink(currentHref, "same-tab") })
|
|
10410
|
+
] }),
|
|
10411
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10412
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Change Image", onClick: onChangeImage }),
|
|
10413
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Item", onClick: onAddItem }),
|
|
10414
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 })
|
|
10415
|
+
] }),
|
|
10416
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10417
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
|
|
10418
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
|
|
10419
|
+
] }),
|
|
10420
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10421
|
+
]
|
|
10422
|
+
}
|
|
10423
|
+
);
|
|
10424
|
+
}
|
|
10425
|
+
function findMediaStripSlots(tree) {
|
|
10426
|
+
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
10427
|
+
while (stack.length) {
|
|
10428
|
+
const node = stack.shift();
|
|
10429
|
+
if (node.type === "media-strip") return node.slots ?? {};
|
|
10430
|
+
if (node.children) stack.push(...node.children);
|
|
10431
|
+
}
|
|
10432
|
+
return null;
|
|
10433
|
+
}
|
|
10434
|
+
function AiMediaStripOverlay({
|
|
10435
|
+
postToParent: postToParent2,
|
|
10436
|
+
aiSectionsRef,
|
|
10437
|
+
applyTreeLocalRef,
|
|
10438
|
+
clearInteractionChromeRef
|
|
10439
|
+
}) {
|
|
10440
|
+
const [hover, setHover] = (0, import_react9.useState)(null);
|
|
10441
|
+
const [active, setActive] = (0, import_react9.useState)(null);
|
|
10442
|
+
const [pending, setPending] = (0, import_react9.useState)(false);
|
|
10443
|
+
const [error, setError] = (0, import_react9.useState)(null);
|
|
10444
|
+
const activeRef = (0, import_react9.useRef)(null);
|
|
10445
|
+
activeRef.current = active;
|
|
10446
|
+
(0, import_react9.useEffect)(() => {
|
|
10447
|
+
const onMove = (e) => {
|
|
10448
|
+
const t = e.target;
|
|
10449
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10450
|
+
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]")) {
|
|
10451
|
+
return;
|
|
10452
|
+
}
|
|
10453
|
+
const itemEl = t.closest("[data-ohw-media-strip-item]");
|
|
10454
|
+
if (!itemEl) {
|
|
10455
|
+
setHover(null);
|
|
10456
|
+
return;
|
|
10457
|
+
}
|
|
10458
|
+
const sectionEl = itemEl.closest("[data-ohw-section]");
|
|
10459
|
+
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
10460
|
+
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
10461
|
+
const index = Number(itemEl.dataset.ohwMediaStripIndex);
|
|
10462
|
+
if (!sectionId || Number.isNaN(index)) {
|
|
10463
|
+
setHover(null);
|
|
10464
|
+
return;
|
|
10465
|
+
}
|
|
10466
|
+
setHover({ sectionId, index });
|
|
10467
|
+
};
|
|
10468
|
+
const onLeave = () => setHover(null);
|
|
10469
|
+
document.addEventListener("mousemove", onMove, { passive: true });
|
|
10470
|
+
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
10471
|
+
return () => {
|
|
10472
|
+
document.removeEventListener("mousemove", onMove);
|
|
10473
|
+
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10474
|
+
};
|
|
10475
|
+
}, []);
|
|
10476
|
+
(0, import_react9.useEffect)(() => {
|
|
10477
|
+
const onClick = (e) => {
|
|
10478
|
+
const current = activeRef.current;
|
|
10479
|
+
if (!current) return;
|
|
10480
|
+
const t = e.target;
|
|
10481
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10482
|
+
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
10483
|
+
const itemEl = findMediaStripItemElement(current.sectionId, current.index);
|
|
10484
|
+
if (itemEl && itemEl.contains(t)) return;
|
|
10485
|
+
setActive(null);
|
|
10486
|
+
setError(null);
|
|
10487
|
+
};
|
|
10488
|
+
document.addEventListener("click", onClick, true);
|
|
10489
|
+
return () => document.removeEventListener("click", onClick, true);
|
|
10490
|
+
}, []);
|
|
10491
|
+
(0, import_react9.useEffect)(() => {
|
|
10492
|
+
const onBlur = () => {
|
|
10493
|
+
if (!activeRef.current) return;
|
|
10494
|
+
setActive(null);
|
|
10495
|
+
setError(null);
|
|
10496
|
+
};
|
|
10497
|
+
window.addEventListener("blur", onBlur);
|
|
10498
|
+
return () => window.removeEventListener("blur", onBlur);
|
|
10499
|
+
}, []);
|
|
10500
|
+
(0, import_react9.useEffect)(() => {
|
|
10501
|
+
const onKeyDown = (e) => {
|
|
10502
|
+
if (e.key !== "Escape") return;
|
|
10503
|
+
if (!activeRef.current) return;
|
|
10504
|
+
setActive(null);
|
|
10505
|
+
setError(null);
|
|
10506
|
+
};
|
|
10507
|
+
document.addEventListener("keydown", onKeyDown);
|
|
10508
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10509
|
+
}, []);
|
|
10510
|
+
const findEntry = (0, import_react9.useCallback)(
|
|
10511
|
+
(sectionId) => {
|
|
10512
|
+
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10513
|
+
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10514
|
+
},
|
|
10515
|
+
[aiSectionsRef]
|
|
10516
|
+
);
|
|
10517
|
+
const runMutation = (0, import_react9.useCallback)(
|
|
10518
|
+
async (sectionId, mutate, extraMedia) => {
|
|
10519
|
+
const entry = findEntry(sectionId);
|
|
10520
|
+
if (!entry) return false;
|
|
10521
|
+
const nextTree = mutate(entry.tree);
|
|
10522
|
+
if (!nextTree) return false;
|
|
10523
|
+
setPending(true);
|
|
10524
|
+
setError(null);
|
|
10525
|
+
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10526
|
+
setPending(false);
|
|
10527
|
+
if (!ok) {
|
|
10528
|
+
setError(reasons[0] ?? "That change is not allowed.");
|
|
10529
|
+
return false;
|
|
10530
|
+
}
|
|
10531
|
+
applyTreeLocalRef.current?.({
|
|
10532
|
+
id: sectionId,
|
|
10533
|
+
mode: "replace",
|
|
10534
|
+
targetSectionId: sectionId,
|
|
10535
|
+
tree: nextTree,
|
|
10536
|
+
label: entry.label,
|
|
10537
|
+
media: extraMedia ? { ...entry.media, ...extraMedia } : entry.media,
|
|
10538
|
+
...entry.brand ? { brand: entry.brand } : {}
|
|
10539
|
+
});
|
|
10540
|
+
return true;
|
|
10541
|
+
},
|
|
10542
|
+
[findEntry, postToParent2, applyTreeLocalRef]
|
|
10543
|
+
);
|
|
10544
|
+
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10545
|
+
const hoverHandleRect = useLiveItemRect(!active && hover ? hover : null);
|
|
10546
|
+
const activeItemRect = useLiveItemRect(active);
|
|
10547
|
+
const TOOLBAR_APPROX_H = 170;
|
|
10548
|
+
const toolbarState = activeItemRect && activeItemRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
10549
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
10550
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10551
|
+
"button",
|
|
10552
|
+
{
|
|
10553
|
+
type: "button",
|
|
10554
|
+
"data-ohw-toolbar": "",
|
|
10555
|
+
onClick: () => {
|
|
10556
|
+
clearInteractionChromeRef.current();
|
|
10557
|
+
setActive(hover);
|
|
10558
|
+
},
|
|
10559
|
+
"aria-label": "Configure media item",
|
|
10560
|
+
style: {
|
|
10561
|
+
position: "fixed",
|
|
10562
|
+
top: hoverHandleRect.top + 8,
|
|
10563
|
+
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
10564
|
+
width: 28,
|
|
10565
|
+
height: 28,
|
|
10566
|
+
borderRadius: 8,
|
|
10567
|
+
border: `1.5px dashed ${PRIMARY3}`,
|
|
10568
|
+
background: "#ffffff",
|
|
10569
|
+
color: PRIMARY3,
|
|
10570
|
+
display: "flex",
|
|
10571
|
+
alignItems: "center",
|
|
10572
|
+
justifyContent: "center",
|
|
10573
|
+
cursor: "pointer",
|
|
10574
|
+
zIndex: 2147483643,
|
|
10575
|
+
fontSize: 14,
|
|
10576
|
+
fontWeight: 700
|
|
10577
|
+
},
|
|
10578
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
10579
|
+
}
|
|
10580
|
+
),
|
|
10581
|
+
activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10582
|
+
ItemInteractionLayer,
|
|
10583
|
+
{
|
|
10584
|
+
rect: activeItemRect,
|
|
10585
|
+
state: toolbarState,
|
|
10586
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10587
|
+
MediaStripToolbar,
|
|
10588
|
+
{
|
|
10589
|
+
entry: activeEntry,
|
|
10590
|
+
index: active.index,
|
|
10591
|
+
pending,
|
|
10592
|
+
error,
|
|
10593
|
+
onSetVariant: (variant) => runMutation(active.sectionId, (tree) => setMediaStripVariant(tree, variant)),
|
|
10594
|
+
onSetAlign: (align) => runMutation(active.sectionId, (tree) => setMediaStripAlign(tree, align)),
|
|
10595
|
+
onSetHover: (hoverPreset) => runMutation(active.sectionId, (tree) => setMediaStripHover(tree, hoverPreset)),
|
|
10596
|
+
onSetTreatment: (treatment) => runMutation(active.sectionId, (tree) => setMediaStripTreatment(tree, treatment)),
|
|
10597
|
+
onResize: (delta) => {
|
|
10598
|
+
const slots = findMediaStripSlots(activeEntry.tree);
|
|
10599
|
+
const variant = slots?.variant === "reel" ? "reel" : "logos";
|
|
10600
|
+
const current = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10601
|
+
void runMutation(active.sectionId, (tree) => setMediaStripSizing(tree, current + delta));
|
|
10602
|
+
},
|
|
10603
|
+
onSetAlt: (alt) => {
|
|
10604
|
+
void runMutation(active.sectionId, (tree) => setMediaStripItemAlt(tree, active.index, alt));
|
|
10605
|
+
},
|
|
10606
|
+
onSetLink: (href, linkTarget) => {
|
|
10607
|
+
void runMutation(
|
|
10608
|
+
active.sectionId,
|
|
10609
|
+
(tree) => setMediaStripItemLink(tree, active.index, href ? { href, linkTarget } : {})
|
|
10610
|
+
);
|
|
10611
|
+
},
|
|
10612
|
+
onAddItem: () => {
|
|
10613
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10614
|
+
if (!picked) return;
|
|
10615
|
+
const item = { assetId: picked.assetId, alt: "Logo" };
|
|
10616
|
+
void runMutation(
|
|
10617
|
+
active.sectionId,
|
|
10618
|
+
(tree) => addMediaStripItem(tree, item, active.index),
|
|
10619
|
+
{ [picked.assetId]: picked.url }
|
|
10620
|
+
).then((applied) => {
|
|
10621
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10622
|
+
});
|
|
10623
|
+
});
|
|
10624
|
+
},
|
|
10625
|
+
onChangeImage: () => {
|
|
10626
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10627
|
+
if (!picked) return;
|
|
10628
|
+
void runMutation(
|
|
10629
|
+
active.sectionId,
|
|
10630
|
+
(tree) => setMediaStripItemAsset(tree, active.index, picked.assetId),
|
|
10631
|
+
{ [picked.assetId]: picked.url }
|
|
10632
|
+
);
|
|
10633
|
+
});
|
|
10634
|
+
},
|
|
10635
|
+
onRemoveItem: () => {
|
|
10636
|
+
void runMutation(active.sectionId, (tree) => removeMediaStripItem(tree, active.index)).then(
|
|
10637
|
+
(applied) => {
|
|
10638
|
+
if (applied) setActive(null);
|
|
10639
|
+
}
|
|
10640
|
+
);
|
|
10641
|
+
},
|
|
10642
|
+
onMoveLeft: () => {
|
|
10643
|
+
void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, -1)).then(
|
|
10644
|
+
(applied) => {
|
|
10645
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index - 1 });
|
|
10646
|
+
}
|
|
10647
|
+
);
|
|
10648
|
+
},
|
|
10649
|
+
onMoveRight: () => {
|
|
10650
|
+
void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, 1)).then(
|
|
10651
|
+
(applied) => {
|
|
10652
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10653
|
+
}
|
|
10654
|
+
);
|
|
10655
|
+
}
|
|
10656
|
+
}
|
|
10657
|
+
)
|
|
10658
|
+
}
|
|
10659
|
+
)
|
|
9775
10660
|
] });
|
|
9776
10661
|
}
|
|
9777
10662
|
|
|
9778
10663
|
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9779
|
-
var
|
|
9780
|
-
var
|
|
10664
|
+
var import_react10 = require("react");
|
|
10665
|
+
var import_lucide_react9 = require("lucide-react");
|
|
9781
10666
|
|
|
9782
10667
|
// src/lib/ai-pricing-tree.ts
|
|
9783
10668
|
var PRICING_MIN_CARDS = 1;
|
|
@@ -9920,16 +10805,16 @@ function removePricingCardFeature(tree, index) {
|
|
|
9920
10805
|
}
|
|
9921
10806
|
|
|
9922
10807
|
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9923
|
-
var
|
|
10808
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
9924
10809
|
var EMPHASIS_TREATMENTS = [
|
|
9925
10810
|
{ value: "outlined", label: "Outline" },
|
|
9926
10811
|
{ value: "lifted", label: "Lift" },
|
|
9927
10812
|
{ value: "inverted", label: "Invert" },
|
|
9928
10813
|
{ value: "accent-header", label: "Header" }
|
|
9929
10814
|
];
|
|
9930
|
-
var
|
|
9931
|
-
var
|
|
9932
|
-
var
|
|
10815
|
+
var PRIMARY4 = "#0885FE";
|
|
10816
|
+
var OHW_BLUE2 = `var(--ohw-primary, ${PRIMARY4})`;
|
|
10817
|
+
var OHW_BLUE_DARK2 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY4}) 60%, #000000)`;
|
|
9933
10818
|
function findPricingCardElement(sectionId, index) {
|
|
9934
10819
|
const sectionEl = findByInstanceId(sectionId);
|
|
9935
10820
|
if (!sectionEl) return null;
|
|
@@ -9939,7 +10824,7 @@ function findPricingCardElement(sectionId, index) {
|
|
|
9939
10824
|
}
|
|
9940
10825
|
return null;
|
|
9941
10826
|
}
|
|
9942
|
-
function
|
|
10827
|
+
function readRect3(ref) {
|
|
9943
10828
|
const el = ref && findPricingCardElement(ref.sectionId, ref.index);
|
|
9944
10829
|
if (!el) return null;
|
|
9945
10830
|
const r2 = el.getBoundingClientRect();
|
|
@@ -9947,14 +10832,14 @@ function readRect2(ref) {
|
|
|
9947
10832
|
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
9948
10833
|
}
|
|
9949
10834
|
function useLiveCardRect(ref) {
|
|
9950
|
-
const [rect, setRect] = (0,
|
|
9951
|
-
(0,
|
|
10835
|
+
const [rect, setRect] = (0, import_react10.useState)(null);
|
|
10836
|
+
(0, import_react10.useEffect)(() => {
|
|
9952
10837
|
if (!ref) {
|
|
9953
10838
|
setRect(null);
|
|
9954
10839
|
return;
|
|
9955
10840
|
}
|
|
9956
10841
|
const update = () => {
|
|
9957
|
-
const next =
|
|
10842
|
+
const next = readRect3(ref);
|
|
9958
10843
|
setRect(
|
|
9959
10844
|
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
9960
10845
|
);
|
|
@@ -9972,7 +10857,7 @@ function useLiveCardRect(ref) {
|
|
|
9972
10857
|
}, [ref?.sectionId, ref?.index]);
|
|
9973
10858
|
return rect;
|
|
9974
10859
|
}
|
|
9975
|
-
function
|
|
10860
|
+
function requestValidateTree2(postToParent2, tree) {
|
|
9976
10861
|
return new Promise((resolve) => {
|
|
9977
10862
|
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
9978
10863
|
const timeout = window.setTimeout(() => {
|
|
@@ -9989,13 +10874,13 @@ function requestValidateTree(postToParent2, tree) {
|
|
|
9989
10874
|
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
9990
10875
|
});
|
|
9991
10876
|
}
|
|
9992
|
-
function
|
|
10877
|
+
function Pill2({
|
|
9993
10878
|
label,
|
|
9994
10879
|
onClick,
|
|
9995
10880
|
disabled,
|
|
9996
10881
|
active
|
|
9997
10882
|
}) {
|
|
9998
|
-
return /* @__PURE__ */ (0,
|
|
10883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
9999
10884
|
"button",
|
|
10000
10885
|
{
|
|
10001
10886
|
type: "button",
|
|
@@ -10010,8 +10895,8 @@ function Pill({
|
|
|
10010
10895
|
borderRadius: 999,
|
|
10011
10896
|
border: "none",
|
|
10012
10897
|
cursor: disabled ? "default" : "pointer",
|
|
10013
|
-
background: active ?
|
|
10014
|
-
color: active ? "#ffffff" :
|
|
10898
|
+
background: active ? OHW_BLUE_DARK2 : "#ffffff",
|
|
10899
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK2,
|
|
10015
10900
|
opacity: disabled ? 0.4 : 1,
|
|
10016
10901
|
fontSize: 12,
|
|
10017
10902
|
lineHeight: "16px",
|
|
@@ -10044,7 +10929,7 @@ function PricingCardToolbar({
|
|
|
10044
10929
|
const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
|
|
10045
10930
|
const featureCount = pricingCardFeatureCount(entry.tree, index);
|
|
10046
10931
|
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
10047
|
-
return /* @__PURE__ */ (0,
|
|
10932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
10048
10933
|
"div",
|
|
10049
10934
|
{
|
|
10050
10935
|
"data-ohw-bridge": "",
|
|
@@ -10055,7 +10940,7 @@ function PricingCardToolbar({
|
|
|
10055
10940
|
flexDirection: "column",
|
|
10056
10941
|
gap: 6,
|
|
10057
10942
|
alignItems: "center",
|
|
10058
|
-
background:
|
|
10943
|
+
background: OHW_BLUE2,
|
|
10059
10944
|
padding: 8,
|
|
10060
10945
|
borderRadius: 12,
|
|
10061
10946
|
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
@@ -10066,17 +10951,17 @@ function PricingCardToolbar({
|
|
|
10066
10951
|
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
10067
10952
|
},
|
|
10068
10953
|
children: [
|
|
10069
|
-
/* @__PURE__ */ (0,
|
|
10070
|
-
/* @__PURE__ */ (0,
|
|
10071
|
-
/* @__PURE__ */ (0,
|
|
10072
|
-
/* @__PURE__ */ (0,
|
|
10073
|
-
/* @__PURE__ */ (0,
|
|
10074
|
-
/* @__PURE__ */ (0,
|
|
10075
|
-
/* @__PURE__ */ (0,
|
|
10076
|
-
/* @__PURE__ */ (0,
|
|
10954
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10955
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
|
|
10956
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
|
|
10957
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
|
|
10958
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
|
|
10959
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
|
|
10960
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
|
|
10961
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
|
|
10077
10962
|
] }),
|
|
10078
|
-
isFeatured && /* @__PURE__ */ (0,
|
|
10079
|
-
|
|
10963
|
+
isFeatured && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10964
|
+
Pill2,
|
|
10080
10965
|
{
|
|
10081
10966
|
label: t.label,
|
|
10082
10967
|
active: (featured?.treatment ?? "outlined") === t.value,
|
|
@@ -10084,7 +10969,7 @@ function PricingCardToolbar({
|
|
|
10084
10969
|
},
|
|
10085
10970
|
t.value
|
|
10086
10971
|
)) }),
|
|
10087
|
-
error && /* @__PURE__ */ (0,
|
|
10972
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10088
10973
|
]
|
|
10089
10974
|
}
|
|
10090
10975
|
);
|
|
@@ -10105,13 +10990,13 @@ function AiPricingCardOverlay({
|
|
|
10105
10990
|
aiSectionsRef,
|
|
10106
10991
|
applyTreeLocalRef
|
|
10107
10992
|
}) {
|
|
10108
|
-
const [hover, setHover] = (0,
|
|
10109
|
-
const [active, setActive] = (0,
|
|
10110
|
-
const [pending, setPending] = (0,
|
|
10111
|
-
const [error, setError] = (0,
|
|
10112
|
-
const activeRef = (0,
|
|
10993
|
+
const [hover, setHover] = (0, import_react10.useState)(null);
|
|
10994
|
+
const [active, setActive] = (0, import_react10.useState)(null);
|
|
10995
|
+
const [pending, setPending] = (0, import_react10.useState)(false);
|
|
10996
|
+
const [error, setError] = (0, import_react10.useState)(null);
|
|
10997
|
+
const activeRef = (0, import_react10.useRef)(null);
|
|
10113
10998
|
activeRef.current = active;
|
|
10114
|
-
(0,
|
|
10999
|
+
(0, import_react10.useEffect)(() => {
|
|
10115
11000
|
const onMove = (e) => {
|
|
10116
11001
|
const t = e.target;
|
|
10117
11002
|
if (!(t instanceof HTMLElement)) return;
|
|
@@ -10141,7 +11026,7 @@ function AiPricingCardOverlay({
|
|
|
10141
11026
|
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10142
11027
|
};
|
|
10143
11028
|
}, []);
|
|
10144
|
-
(0,
|
|
11029
|
+
(0, import_react10.useEffect)(() => {
|
|
10145
11030
|
const onClick = (e) => {
|
|
10146
11031
|
const current = activeRef.current;
|
|
10147
11032
|
if (!current) return;
|
|
@@ -10156,7 +11041,7 @@ function AiPricingCardOverlay({
|
|
|
10156
11041
|
document.addEventListener("click", onClick, true);
|
|
10157
11042
|
return () => document.removeEventListener("click", onClick, true);
|
|
10158
11043
|
}, []);
|
|
10159
|
-
(0,
|
|
11044
|
+
(0, import_react10.useEffect)(() => {
|
|
10160
11045
|
const onBlur = () => {
|
|
10161
11046
|
if (!activeRef.current) return;
|
|
10162
11047
|
setActive(null);
|
|
@@ -10165,7 +11050,7 @@ function AiPricingCardOverlay({
|
|
|
10165
11050
|
window.addEventListener("blur", onBlur);
|
|
10166
11051
|
return () => window.removeEventListener("blur", onBlur);
|
|
10167
11052
|
}, []);
|
|
10168
|
-
(0,
|
|
11053
|
+
(0, import_react10.useEffect)(() => {
|
|
10169
11054
|
const onKeyDown = (e) => {
|
|
10170
11055
|
if (e.key !== "Escape") return;
|
|
10171
11056
|
if (!activeRef.current) return;
|
|
@@ -10175,14 +11060,14 @@ function AiPricingCardOverlay({
|
|
|
10175
11060
|
document.addEventListener("keydown", onKeyDown);
|
|
10176
11061
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10177
11062
|
}, []);
|
|
10178
|
-
const findEntry = (0,
|
|
11063
|
+
const findEntry = (0, import_react10.useCallback)(
|
|
10179
11064
|
(sectionId) => {
|
|
10180
11065
|
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10181
11066
|
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10182
11067
|
},
|
|
10183
11068
|
[aiSectionsRef]
|
|
10184
11069
|
);
|
|
10185
|
-
const runMutation = (0,
|
|
11070
|
+
const runMutation = (0, import_react10.useCallback)(
|
|
10186
11071
|
async (sectionId, mutate) => {
|
|
10187
11072
|
const entry = findEntry(sectionId);
|
|
10188
11073
|
if (!entry) return false;
|
|
@@ -10190,7 +11075,7 @@ function AiPricingCardOverlay({
|
|
|
10190
11075
|
if (!nextTree) return false;
|
|
10191
11076
|
setPending(true);
|
|
10192
11077
|
setError(null);
|
|
10193
|
-
const { ok, reasons } = await
|
|
11078
|
+
const { ok, reasons } = await requestValidateTree2(postToParent2, nextTree);
|
|
10194
11079
|
setPending(false);
|
|
10195
11080
|
if (!ok) {
|
|
10196
11081
|
setError(reasons[0] ?? "That change is not allowed.");
|
|
@@ -10215,8 +11100,8 @@ function AiPricingCardOverlay({
|
|
|
10215
11100
|
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10216
11101
|
const activeCardRect = useLiveCardRect(active);
|
|
10217
11102
|
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
10218
|
-
return /* @__PURE__ */ (0,
|
|
10219
|
-
hoverHandleRect && hover && /* @__PURE__ */ (0,
|
|
11103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
11104
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10220
11105
|
"button",
|
|
10221
11106
|
{
|
|
10222
11107
|
type: "button",
|
|
@@ -10230,9 +11115,9 @@ function AiPricingCardOverlay({
|
|
|
10230
11115
|
width: 28,
|
|
10231
11116
|
height: 28,
|
|
10232
11117
|
borderRadius: 8,
|
|
10233
|
-
border: `1.5px dashed ${
|
|
11118
|
+
border: `1.5px dashed ${PRIMARY4}`,
|
|
10234
11119
|
background: "#ffffff",
|
|
10235
|
-
color:
|
|
11120
|
+
color: PRIMARY4,
|
|
10236
11121
|
display: "flex",
|
|
10237
11122
|
alignItems: "center",
|
|
10238
11123
|
justifyContent: "center",
|
|
@@ -10241,15 +11126,15 @@ function AiPricingCardOverlay({
|
|
|
10241
11126
|
fontSize: 14,
|
|
10242
11127
|
fontWeight: 700
|
|
10243
11128
|
},
|
|
10244
|
-
children: /* @__PURE__ */ (0,
|
|
11129
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
10245
11130
|
}
|
|
10246
11131
|
),
|
|
10247
|
-
activeCardRect && active && activeEntry && /* @__PURE__ */ (0,
|
|
11132
|
+
activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10248
11133
|
ItemInteractionLayer,
|
|
10249
11134
|
{
|
|
10250
11135
|
rect: activeCardRect,
|
|
10251
11136
|
state: "active-top",
|
|
10252
|
-
toolbar: /* @__PURE__ */ (0,
|
|
11137
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10253
11138
|
PricingCardToolbar,
|
|
10254
11139
|
{
|
|
10255
11140
|
entry: activeEntry,
|
|
@@ -10587,28 +11472,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
10587
11472
|
}
|
|
10588
11473
|
|
|
10589
11474
|
// src/ui/link-modal/LinkPopover.tsx
|
|
10590
|
-
var
|
|
11475
|
+
var import_react14 = require("react");
|
|
10591
11476
|
|
|
10592
11477
|
// src/ui/dialog.tsx
|
|
10593
11478
|
var React9 = __toESM(require("react"), 1);
|
|
10594
11479
|
var import_radix_ui6 = require("radix-ui");
|
|
10595
|
-
var
|
|
10596
|
-
var
|
|
11480
|
+
var import_lucide_react10 = require("lucide-react");
|
|
11481
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
10597
11482
|
function Dialog2({
|
|
10598
11483
|
...props
|
|
10599
11484
|
}) {
|
|
10600
|
-
return /* @__PURE__ */ (0,
|
|
11485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
10601
11486
|
}
|
|
10602
11487
|
function DialogPortal({
|
|
10603
11488
|
...props
|
|
10604
11489
|
}) {
|
|
10605
|
-
return /* @__PURE__ */ (0,
|
|
11490
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
10606
11491
|
}
|
|
10607
11492
|
function DialogOverlay({
|
|
10608
11493
|
className,
|
|
10609
11494
|
...props
|
|
10610
11495
|
}) {
|
|
10611
|
-
return /* @__PURE__ */ (0,
|
|
11496
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10612
11497
|
import_radix_ui6.Dialog.Overlay,
|
|
10613
11498
|
{
|
|
10614
11499
|
"data-slot": "dialog-overlay",
|
|
@@ -10621,9 +11506,9 @@ function DialogOverlay({
|
|
|
10621
11506
|
var DialogContent = React9.forwardRef(
|
|
10622
11507
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
10623
11508
|
const positionMode = container ? "absolute" : "fixed";
|
|
10624
|
-
return /* @__PURE__ */ (0,
|
|
10625
|
-
/* @__PURE__ */ (0,
|
|
10626
|
-
/* @__PURE__ */ (0,
|
|
11509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
11510
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
11511
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
10627
11512
|
import_radix_ui6.Dialog.Content,
|
|
10628
11513
|
{
|
|
10629
11514
|
ref,
|
|
@@ -10639,13 +11524,13 @@ var DialogContent = React9.forwardRef(
|
|
|
10639
11524
|
...props,
|
|
10640
11525
|
children: [
|
|
10641
11526
|
children,
|
|
10642
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
11527
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10643
11528
|
import_radix_ui6.Dialog.Close,
|
|
10644
11529
|
{
|
|
10645
11530
|
type: "button",
|
|
10646
11531
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
10647
11532
|
"aria-label": "Close",
|
|
10648
|
-
children: /* @__PURE__ */ (0,
|
|
11533
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.X, { size: 16, "aria-hidden": true })
|
|
10649
11534
|
}
|
|
10650
11535
|
) : null
|
|
10651
11536
|
]
|
|
@@ -10659,13 +11544,13 @@ function DialogHeader({
|
|
|
10659
11544
|
className,
|
|
10660
11545
|
...props
|
|
10661
11546
|
}) {
|
|
10662
|
-
return /* @__PURE__ */ (0,
|
|
11547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
10663
11548
|
}
|
|
10664
11549
|
function DialogFooter({
|
|
10665
11550
|
className,
|
|
10666
11551
|
...props
|
|
10667
11552
|
}) {
|
|
10668
|
-
return /* @__PURE__ */ (0,
|
|
11553
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10669
11554
|
"div",
|
|
10670
11555
|
{
|
|
10671
11556
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -10673,7 +11558,7 @@ function DialogFooter({
|
|
|
10673
11558
|
}
|
|
10674
11559
|
);
|
|
10675
11560
|
}
|
|
10676
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11561
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10677
11562
|
import_radix_ui6.Dialog.Title,
|
|
10678
11563
|
{
|
|
10679
11564
|
ref,
|
|
@@ -10685,7 +11570,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
10685
11570
|
}
|
|
10686
11571
|
));
|
|
10687
11572
|
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
10688
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11573
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10689
11574
|
import_radix_ui6.Dialog.Description,
|
|
10690
11575
|
{
|
|
10691
11576
|
ref,
|
|
@@ -10697,63 +11582,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
|
10697
11582
|
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
10698
11583
|
|
|
10699
11584
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
10700
|
-
var
|
|
11585
|
+
var import_lucide_react14 = require("lucide-react");
|
|
10701
11586
|
|
|
10702
11587
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
10703
|
-
var
|
|
10704
|
-
var
|
|
11588
|
+
var import_lucide_react11 = require("lucide-react");
|
|
11589
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
10705
11590
|
function DestinationBreadcrumb({
|
|
10706
11591
|
pageTitle,
|
|
10707
11592
|
sectionLabel
|
|
10708
11593
|
}) {
|
|
10709
|
-
return /* @__PURE__ */ (0,
|
|
10710
|
-
/* @__PURE__ */ (0,
|
|
10711
|
-
/* @__PURE__ */ (0,
|
|
10712
|
-
/* @__PURE__ */ (0,
|
|
10713
|
-
/* @__PURE__ */ (0,
|
|
10714
|
-
/* @__PURE__ */ (0,
|
|
11594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
11595
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
11596
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
11597
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
11598
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
11599
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
10715
11600
|
] }),
|
|
10716
|
-
/* @__PURE__ */ (0,
|
|
10717
|
-
|
|
11601
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11602
|
+
import_lucide_react11.ArrowRight,
|
|
10718
11603
|
{
|
|
10719
11604
|
size: 16,
|
|
10720
11605
|
className: "shrink-0 text-muted-foreground",
|
|
10721
11606
|
"aria-hidden": true
|
|
10722
11607
|
}
|
|
10723
11608
|
),
|
|
10724
|
-
/* @__PURE__ */ (0,
|
|
10725
|
-
/* @__PURE__ */ (0,
|
|
10726
|
-
|
|
11609
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
11610
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11611
|
+
import_lucide_react11.GalleryVertical,
|
|
10727
11612
|
{
|
|
10728
11613
|
size: 16,
|
|
10729
11614
|
className: "shrink-0 text-foreground",
|
|
10730
11615
|
"aria-hidden": true
|
|
10731
11616
|
}
|
|
10732
11617
|
),
|
|
10733
|
-
/* @__PURE__ */ (0,
|
|
11618
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
10734
11619
|
] })
|
|
10735
11620
|
] })
|
|
10736
11621
|
] });
|
|
10737
11622
|
}
|
|
10738
11623
|
|
|
10739
11624
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
10740
|
-
var
|
|
10741
|
-
var
|
|
11625
|
+
var import_lucide_react12 = require("lucide-react");
|
|
11626
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
10742
11627
|
function SectionTreeItem({
|
|
10743
11628
|
section,
|
|
10744
11629
|
onSelect,
|
|
10745
11630
|
selected
|
|
10746
11631
|
}) {
|
|
10747
11632
|
const interactive = Boolean(onSelect);
|
|
10748
|
-
return /* @__PURE__ */ (0,
|
|
10749
|
-
/* @__PURE__ */ (0,
|
|
11633
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
11634
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
10750
11635
|
"div",
|
|
10751
11636
|
{
|
|
10752
11637
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
10753
11638
|
"aria-hidden": true
|
|
10754
11639
|
}
|
|
10755
11640
|
),
|
|
10756
|
-
/* @__PURE__ */ (0,
|
|
11641
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
10757
11642
|
"div",
|
|
10758
11643
|
{
|
|
10759
11644
|
role: interactive ? "button" : void 0,
|
|
@@ -10771,15 +11656,15 @@ function SectionTreeItem({
|
|
|
10771
11656
|
interactive && selected && "border-bridge-primary"
|
|
10772
11657
|
),
|
|
10773
11658
|
children: [
|
|
10774
|
-
/* @__PURE__ */ (0,
|
|
10775
|
-
|
|
11659
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
11660
|
+
import_lucide_react12.GalleryVertical,
|
|
10776
11661
|
{
|
|
10777
11662
|
size: 16,
|
|
10778
11663
|
className: "shrink-0 text-foreground",
|
|
10779
11664
|
"aria-hidden": true
|
|
10780
11665
|
}
|
|
10781
11666
|
),
|
|
10782
|
-
/* @__PURE__ */ (0,
|
|
11667
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
10783
11668
|
]
|
|
10784
11669
|
}
|
|
10785
11670
|
)
|
|
@@ -10787,14 +11672,14 @@ function SectionTreeItem({
|
|
|
10787
11672
|
}
|
|
10788
11673
|
|
|
10789
11674
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10790
|
-
var
|
|
11675
|
+
var import_react11 = require("react");
|
|
10791
11676
|
|
|
10792
11677
|
// src/ui/input.tsx
|
|
10793
11678
|
var React10 = __toESM(require("react"), 1);
|
|
10794
|
-
var
|
|
11679
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
10795
11680
|
var Input = React10.forwardRef(
|
|
10796
11681
|
({ className, type, ...props }, ref) => {
|
|
10797
|
-
return /* @__PURE__ */ (0,
|
|
11682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
10798
11683
|
"input",
|
|
10799
11684
|
{
|
|
10800
11685
|
type,
|
|
@@ -10813,9 +11698,9 @@ Input.displayName = "Input";
|
|
|
10813
11698
|
|
|
10814
11699
|
// src/ui/label.tsx
|
|
10815
11700
|
var import_radix_ui7 = require("radix-ui");
|
|
10816
|
-
var
|
|
11701
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
10817
11702
|
function Label({ className, ...props }) {
|
|
10818
|
-
return /* @__PURE__ */ (0,
|
|
11703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
10819
11704
|
import_radix_ui7.Label.Root,
|
|
10820
11705
|
{
|
|
10821
11706
|
"data-slot": "label",
|
|
@@ -10826,12 +11711,12 @@ function Label({ className, ...props }) {
|
|
|
10826
11711
|
}
|
|
10827
11712
|
|
|
10828
11713
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10829
|
-
var
|
|
10830
|
-
var
|
|
11714
|
+
var import_lucide_react13 = require("lucide-react");
|
|
11715
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
10831
11716
|
function FieldChevron({
|
|
10832
11717
|
onClick
|
|
10833
11718
|
}) {
|
|
10834
|
-
return /* @__PURE__ */ (0,
|
|
11719
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10835
11720
|
"button",
|
|
10836
11721
|
{
|
|
10837
11722
|
type: "button",
|
|
@@ -10839,7 +11724,7 @@ function FieldChevron({
|
|
|
10839
11724
|
onClick,
|
|
10840
11725
|
"aria-label": "Open page list",
|
|
10841
11726
|
tabIndex: -1,
|
|
10842
|
-
children: /* @__PURE__ */ (0,
|
|
11727
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.ChevronDown, { size: 16 })
|
|
10843
11728
|
}
|
|
10844
11729
|
);
|
|
10845
11730
|
}
|
|
@@ -10855,11 +11740,11 @@ function UrlOrPageInput({
|
|
|
10855
11740
|
readOnly = false,
|
|
10856
11741
|
urlError
|
|
10857
11742
|
}) {
|
|
10858
|
-
const inputId = (0,
|
|
10859
|
-
const inputRef = (0,
|
|
10860
|
-
const rootRef = (0,
|
|
10861
|
-
const [isFocused, setIsFocused] = (0,
|
|
10862
|
-
(0,
|
|
11743
|
+
const inputId = (0, import_react11.useId)();
|
|
11744
|
+
const inputRef = (0, import_react11.useRef)(null);
|
|
11745
|
+
const rootRef = (0, import_react11.useRef)(null);
|
|
11746
|
+
const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
|
|
11747
|
+
(0, import_react11.useEffect)(() => {
|
|
10863
11748
|
if (!dropdownOpen) return;
|
|
10864
11749
|
const isOutside = (e) => {
|
|
10865
11750
|
const root = rootRef.current;
|
|
@@ -10900,19 +11785,19 @@ function UrlOrPageInput({
|
|
|
10900
11785
|
"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]",
|
|
10901
11786
|
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"
|
|
10902
11787
|
);
|
|
10903
|
-
return /* @__PURE__ */ (0,
|
|
10904
|
-
/* @__PURE__ */ (0,
|
|
10905
|
-
/* @__PURE__ */ (0,
|
|
10906
|
-
/* @__PURE__ */ (0,
|
|
10907
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
10908
|
-
|
|
11788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
11789
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
11790
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
11791
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
11792
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11793
|
+
import_lucide_react13.File,
|
|
10909
11794
|
{
|
|
10910
11795
|
size: 16,
|
|
10911
11796
|
className: "shrink-0 text-foreground",
|
|
10912
11797
|
"aria-hidden": true
|
|
10913
11798
|
}
|
|
10914
11799
|
) }) : null,
|
|
10915
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
11800
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10916
11801
|
Input,
|
|
10917
11802
|
{
|
|
10918
11803
|
ref: inputRef,
|
|
@@ -10938,7 +11823,7 @@ function UrlOrPageInput({
|
|
|
10938
11823
|
)
|
|
10939
11824
|
}
|
|
10940
11825
|
),
|
|
10941
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
11826
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10942
11827
|
"button",
|
|
10943
11828
|
{
|
|
10944
11829
|
type: "button",
|
|
@@ -10946,26 +11831,26 @@ function UrlOrPageInput({
|
|
|
10946
11831
|
onMouseDown: clearSelection,
|
|
10947
11832
|
"aria-label": "Clear selected page",
|
|
10948
11833
|
tabIndex: -1,
|
|
10949
|
-
children: /* @__PURE__ */ (0,
|
|
11834
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
|
|
10950
11835
|
}
|
|
10951
11836
|
) : null,
|
|
10952
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
11837
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
10953
11838
|
] }),
|
|
10954
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
11839
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10955
11840
|
"div",
|
|
10956
11841
|
{
|
|
10957
11842
|
"data-ohw-link-page-dropdown": "",
|
|
10958
11843
|
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",
|
|
10959
11844
|
onMouseDown: (e) => e.preventDefault(),
|
|
10960
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
11845
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
10961
11846
|
"button",
|
|
10962
11847
|
{
|
|
10963
11848
|
type: "button",
|
|
10964
11849
|
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",
|
|
10965
11850
|
onClick: () => onPageSelect(page),
|
|
10966
11851
|
children: [
|
|
10967
|
-
/* @__PURE__ */ (0,
|
|
10968
|
-
/* @__PURE__ */ (0,
|
|
11852
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11853
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate", children: page.title })
|
|
10969
11854
|
]
|
|
10970
11855
|
},
|
|
10971
11856
|
page.path
|
|
@@ -10973,34 +11858,34 @@ function UrlOrPageInput({
|
|
|
10973
11858
|
}
|
|
10974
11859
|
) : null
|
|
10975
11860
|
] }),
|
|
10976
|
-
urlError ? /* @__PURE__ */ (0,
|
|
11861
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
10977
11862
|
] });
|
|
10978
11863
|
}
|
|
10979
11864
|
|
|
10980
11865
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
10981
|
-
var
|
|
11866
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
10982
11867
|
function LinkEditorPanel({ state, onClose }) {
|
|
10983
11868
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
10984
|
-
return /* @__PURE__ */ (0,
|
|
10985
|
-
/* @__PURE__ */ (0,
|
|
11869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
11870
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10986
11871
|
"button",
|
|
10987
11872
|
{
|
|
10988
11873
|
type: "button",
|
|
10989
11874
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
10990
11875
|
"aria-label": "Close",
|
|
10991
11876
|
onClick: onClose,
|
|
10992
|
-
children: /* @__PURE__ */ (0,
|
|
11877
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.X, { size: 16, "aria-hidden": true })
|
|
10993
11878
|
}
|
|
10994
11879
|
) }),
|
|
10995
|
-
/* @__PURE__ */ (0,
|
|
10996
|
-
/* @__PURE__ */ (0,
|
|
10997
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11880
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
11881
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
11882
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10998
11883
|
DestinationBreadcrumb,
|
|
10999
11884
|
{
|
|
11000
11885
|
pageTitle: state.selectedPage.title,
|
|
11001
11886
|
sectionLabel: state.selectedSection.label
|
|
11002
11887
|
}
|
|
11003
|
-
) : /* @__PURE__ */ (0,
|
|
11888
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
11004
11889
|
UrlOrPageInput,
|
|
11005
11890
|
{
|
|
11006
11891
|
value: state.searchValue,
|
|
@@ -11013,8 +11898,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11013
11898
|
urlError: state.urlError
|
|
11014
11899
|
}
|
|
11015
11900
|
),
|
|
11016
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
11017
|
-
/* @__PURE__ */ (0,
|
|
11901
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
11902
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
11018
11903
|
Button,
|
|
11019
11904
|
{
|
|
11020
11905
|
type: "button",
|
|
@@ -11025,15 +11910,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11025
11910
|
children: "Choose a section"
|
|
11026
11911
|
}
|
|
11027
11912
|
),
|
|
11028
|
-
/* @__PURE__ */ (0,
|
|
11029
|
-
/* @__PURE__ */ (0,
|
|
11030
|
-
/* @__PURE__ */ (0,
|
|
11913
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
11914
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11915
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
11031
11916
|
] })
|
|
11032
11917
|
] }) : null,
|
|
11033
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11918
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
11034
11919
|
] }),
|
|
11035
|
-
/* @__PURE__ */ (0,
|
|
11036
|
-
/* @__PURE__ */ (0,
|
|
11920
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
11921
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
11037
11922
|
Button,
|
|
11038
11923
|
{
|
|
11039
11924
|
type: "button",
|
|
@@ -11048,7 +11933,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11048
11933
|
children: state.secondaryLabel
|
|
11049
11934
|
}
|
|
11050
11935
|
),
|
|
11051
|
-
/* @__PURE__ */ (0,
|
|
11936
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
11052
11937
|
Button,
|
|
11053
11938
|
{
|
|
11054
11939
|
type: "button",
|
|
@@ -11067,11 +11952,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11067
11952
|
}
|
|
11068
11953
|
|
|
11069
11954
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
11070
|
-
var
|
|
11955
|
+
var import_react12 = require("react");
|
|
11071
11956
|
var import_react_dom3 = require("react-dom");
|
|
11072
|
-
var
|
|
11957
|
+
var import_lucide_react15 = require("lucide-react");
|
|
11073
11958
|
var import_navigation2 = require("next/navigation");
|
|
11074
|
-
var
|
|
11959
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
11075
11960
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
11076
11961
|
function rectsEqual(a, b) {
|
|
11077
11962
|
if (a.size !== b.size) return false;
|
|
@@ -11104,12 +11989,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
11104
11989
|
return null;
|
|
11105
11990
|
}
|
|
11106
11991
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
11107
|
-
const [rects, setRects] = (0,
|
|
11108
|
-
const sectionIds = (0,
|
|
11992
|
+
const [rects, setRects] = (0, import_react12.useState)(/* @__PURE__ */ new Map());
|
|
11993
|
+
const sectionIds = (0, import_react12.useMemo)(
|
|
11109
11994
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
11110
11995
|
[sectionIdsKey]
|
|
11111
11996
|
);
|
|
11112
|
-
(0,
|
|
11997
|
+
(0, import_react12.useEffect)(() => {
|
|
11113
11998
|
if (!enabled || sectionIds.length === 0) {
|
|
11114
11999
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
11115
12000
|
return;
|
|
@@ -11150,13 +12035,13 @@ function SectionPickerOverlay({
|
|
|
11150
12035
|
}) {
|
|
11151
12036
|
const router = (0, import_navigation2.useRouter)();
|
|
11152
12037
|
const pathname = (0, import_navigation2.usePathname)();
|
|
11153
|
-
const [selectedId, setSelectedId] = (0,
|
|
11154
|
-
const [hoveredId, setHoveredId] = (0,
|
|
11155
|
-
const pointerRef = (0,
|
|
11156
|
-
const pointerScreenRef = (0,
|
|
11157
|
-
const iframeOffsetTopRef = (0,
|
|
11158
|
-
const sectionIdsRef = (0,
|
|
11159
|
-
const [chromeClip, setChromeClip] = (0,
|
|
12038
|
+
const [selectedId, setSelectedId] = (0, import_react12.useState)(null);
|
|
12039
|
+
const [hoveredId, setHoveredId] = (0, import_react12.useState)(null);
|
|
12040
|
+
const pointerRef = (0, import_react12.useRef)(null);
|
|
12041
|
+
const pointerScreenRef = (0, import_react12.useRef)(null);
|
|
12042
|
+
const iframeOffsetTopRef = (0, import_react12.useRef)(null);
|
|
12043
|
+
const sectionIdsRef = (0, import_react12.useRef)([]);
|
|
12044
|
+
const [chromeClip, setChromeClip] = (0, import_react12.useState)(
|
|
11160
12045
|
() => ({
|
|
11161
12046
|
top: 0,
|
|
11162
12047
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -11164,12 +12049,12 @@ function SectionPickerOverlay({
|
|
|
11164
12049
|
);
|
|
11165
12050
|
const normalizedTarget = normalizePath(pagePath);
|
|
11166
12051
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
11167
|
-
(0,
|
|
12052
|
+
(0, import_react12.useEffect)(() => {
|
|
11168
12053
|
if (isOnTargetPage) return;
|
|
11169
12054
|
const search = readPreservedSearch();
|
|
11170
12055
|
router.push(`${normalizedTarget}${search}`);
|
|
11171
12056
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
11172
|
-
(0,
|
|
12057
|
+
(0, import_react12.useEffect)(() => {
|
|
11173
12058
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
11174
12059
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
11175
12060
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -11181,24 +12066,24 @@ function SectionPickerOverlay({
|
|
|
11181
12066
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
11182
12067
|
};
|
|
11183
12068
|
}, []);
|
|
11184
|
-
const liveSections = (0,
|
|
12069
|
+
const liveSections = (0, import_react12.useMemo)(() => {
|
|
11185
12070
|
if (!isOnTargetPage) return sections;
|
|
11186
12071
|
const live = collectSectionsFromDom();
|
|
11187
12072
|
if (live.length === 0) return sections;
|
|
11188
12073
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
11189
12074
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
11190
12075
|
}, [isOnTargetPage, sections, pathname]);
|
|
11191
|
-
const sectionIdsKey = (0,
|
|
12076
|
+
const sectionIdsKey = (0, import_react12.useMemo)(
|
|
11192
12077
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
11193
12078
|
[liveSections]
|
|
11194
12079
|
);
|
|
11195
|
-
const sectionIds = (0,
|
|
12080
|
+
const sectionIds = (0, import_react12.useMemo)(
|
|
11196
12081
|
() => liveSections.map((s) => s.id),
|
|
11197
12082
|
[liveSections]
|
|
11198
12083
|
);
|
|
11199
12084
|
sectionIdsRef.current = sectionIds;
|
|
11200
12085
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
11201
|
-
const applyHoverAt = (0,
|
|
12086
|
+
const applyHoverAt = (0, import_react12.useCallback)(
|
|
11202
12087
|
(x, y, liveRects) => {
|
|
11203
12088
|
const ids = sectionIdsRef.current;
|
|
11204
12089
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -11207,7 +12092,7 @@ function SectionPickerOverlay({
|
|
|
11207
12092
|
},
|
|
11208
12093
|
[]
|
|
11209
12094
|
);
|
|
11210
|
-
(0,
|
|
12095
|
+
(0, import_react12.useEffect)(() => {
|
|
11211
12096
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
11212
12097
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
11213
12098
|
const bottom = Math.min(
|
|
@@ -11249,12 +12134,12 @@ function SectionPickerOverlay({
|
|
|
11249
12134
|
window.removeEventListener("resize", onResize);
|
|
11250
12135
|
};
|
|
11251
12136
|
}, [applyHoverAt]);
|
|
11252
|
-
(0,
|
|
12137
|
+
(0, import_react12.useEffect)(() => {
|
|
11253
12138
|
const ptr = pointerRef.current;
|
|
11254
12139
|
if (!ptr) return;
|
|
11255
12140
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
11256
12141
|
}, [rects, applyHoverAt]);
|
|
11257
|
-
(0,
|
|
12142
|
+
(0, import_react12.useEffect)(() => {
|
|
11258
12143
|
const rememberPointer = (clientX, clientY) => {
|
|
11259
12144
|
pointerRef.current = { x: clientX, y: clientY };
|
|
11260
12145
|
const top = iframeOffsetTopRef.current;
|
|
@@ -11278,7 +12163,7 @@ function SectionPickerOverlay({
|
|
|
11278
12163
|
window.removeEventListener("message", onPointerSync);
|
|
11279
12164
|
};
|
|
11280
12165
|
}, [rects, applyHoverAt]);
|
|
11281
|
-
const handleSelect = (0,
|
|
12166
|
+
const handleSelect = (0, import_react12.useCallback)(
|
|
11282
12167
|
(section) => {
|
|
11283
12168
|
if (selectedId) return;
|
|
11284
12169
|
setSelectedId(section.id);
|
|
@@ -11286,7 +12171,7 @@ function SectionPickerOverlay({
|
|
|
11286
12171
|
},
|
|
11287
12172
|
[selectedId, onSelect]
|
|
11288
12173
|
);
|
|
11289
|
-
(0,
|
|
12174
|
+
(0, import_react12.useEffect)(() => {
|
|
11290
12175
|
const onKeyDown = (e) => {
|
|
11291
12176
|
if (e.key === "Escape") {
|
|
11292
12177
|
e.preventDefault();
|
|
@@ -11300,7 +12185,7 @@ function SectionPickerOverlay({
|
|
|
11300
12185
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
11301
12186
|
if (!portalRoot) return null;
|
|
11302
12187
|
return (0, import_react_dom3.createPortal)(
|
|
11303
|
-
/* @__PURE__ */ (0,
|
|
12188
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
11304
12189
|
"div",
|
|
11305
12190
|
{
|
|
11306
12191
|
"data-ohw-section-picker": "",
|
|
@@ -11310,12 +12195,12 @@ function SectionPickerOverlay({
|
|
|
11310
12195
|
role: "dialog",
|
|
11311
12196
|
"aria-label": "Choose a section",
|
|
11312
12197
|
children: [
|
|
11313
|
-
/* @__PURE__ */ (0,
|
|
12198
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11314
12199
|
"div",
|
|
11315
12200
|
{
|
|
11316
12201
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
11317
12202
|
style: { top: chromeClip.top + 20 },
|
|
11318
|
-
children: /* @__PURE__ */ (0,
|
|
12203
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
11319
12204
|
Button,
|
|
11320
12205
|
{
|
|
11321
12206
|
type: "button",
|
|
@@ -11324,14 +12209,14 @@ function SectionPickerOverlay({
|
|
|
11324
12209
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
11325
12210
|
onClick: onBack,
|
|
11326
12211
|
children: [
|
|
11327
|
-
/* @__PURE__ */ (0,
|
|
12212
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
11328
12213
|
"Back"
|
|
11329
12214
|
]
|
|
11330
12215
|
}
|
|
11331
12216
|
)
|
|
11332
12217
|
}
|
|
11333
12218
|
),
|
|
11334
|
-
/* @__PURE__ */ (0,
|
|
12219
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11335
12220
|
"div",
|
|
11336
12221
|
{
|
|
11337
12222
|
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",
|
|
@@ -11344,7 +12229,7 @@ function SectionPickerOverlay({
|
|
|
11344
12229
|
children: "Click on section to select"
|
|
11345
12230
|
}
|
|
11346
12231
|
),
|
|
11347
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
12232
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11348
12233
|
"div",
|
|
11349
12234
|
{
|
|
11350
12235
|
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",
|
|
@@ -11352,14 +12237,14 @@ function SectionPickerOverlay({
|
|
|
11352
12237
|
children: "Loading page preview\u2026"
|
|
11353
12238
|
}
|
|
11354
12239
|
) : null,
|
|
11355
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
12240
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
11356
12241
|
isOnTargetPage ? liveSections.map((section) => {
|
|
11357
12242
|
const rect = rects.get(section.id);
|
|
11358
12243
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
11359
12244
|
const isSelected = selectedId === section.id;
|
|
11360
12245
|
const isHovered = hoveredId === section.id;
|
|
11361
12246
|
const isLit = isSelected || isHovered;
|
|
11362
|
-
return /* @__PURE__ */ (0,
|
|
12247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
11363
12248
|
"button",
|
|
11364
12249
|
{
|
|
11365
12250
|
type: "button",
|
|
@@ -11374,7 +12259,7 @@ function SectionPickerOverlay({
|
|
|
11374
12259
|
"aria-label": `Select section ${section.label}`,
|
|
11375
12260
|
onClick: () => handleSelect(section),
|
|
11376
12261
|
children: [
|
|
11377
|
-
isLit ? /* @__PURE__ */ (0,
|
|
12262
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11378
12263
|
"span",
|
|
11379
12264
|
{
|
|
11380
12265
|
className: "pointer-events-none absolute",
|
|
@@ -11387,13 +12272,13 @@ function SectionPickerOverlay({
|
|
|
11387
12272
|
"aria-hidden": true
|
|
11388
12273
|
}
|
|
11389
12274
|
) : null,
|
|
11390
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
12275
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11391
12276
|
"span",
|
|
11392
12277
|
{
|
|
11393
12278
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
11394
12279
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
11395
12280
|
"aria-hidden": true,
|
|
11396
|
-
children: /* @__PURE__ */ (0,
|
|
12281
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.Check, { className: "size-5" })
|
|
11397
12282
|
}
|
|
11398
12283
|
) : null
|
|
11399
12284
|
]
|
|
@@ -11409,7 +12294,7 @@ function SectionPickerOverlay({
|
|
|
11409
12294
|
}
|
|
11410
12295
|
|
|
11411
12296
|
// src/ui/link-modal/useLinkModalState.ts
|
|
11412
|
-
var
|
|
12297
|
+
var import_react13 = require("react");
|
|
11413
12298
|
function useLinkModalState({
|
|
11414
12299
|
open,
|
|
11415
12300
|
mode,
|
|
@@ -11421,14 +12306,14 @@ function useLinkModalState({
|
|
|
11421
12306
|
onClose,
|
|
11422
12307
|
onSubmit
|
|
11423
12308
|
}) {
|
|
11424
|
-
const availablePages = (0,
|
|
11425
|
-
const [searchValue, setSearchValue] = (0,
|
|
11426
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
11427
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
11428
|
-
const [step, setStep] = (0,
|
|
11429
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
11430
|
-
const [urlError, setUrlError] = (0,
|
|
11431
|
-
const reset = (0,
|
|
12309
|
+
const availablePages = (0, import_react13.useMemo)(() => pages, [pages]);
|
|
12310
|
+
const [searchValue, setSearchValue] = (0, import_react13.useState)("");
|
|
12311
|
+
const [selectedPage, setSelectedPage] = (0, import_react13.useState)(null);
|
|
12312
|
+
const [selectedSection, setSelectedSection] = (0, import_react13.useState)(null);
|
|
12313
|
+
const [step, setStep] = (0, import_react13.useState)("input");
|
|
12314
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react13.useState)(false);
|
|
12315
|
+
const [urlError, setUrlError] = (0, import_react13.useState)("");
|
|
12316
|
+
const reset = (0, import_react13.useCallback)(() => {
|
|
11432
12317
|
setSearchValue("");
|
|
11433
12318
|
setSelectedPage(null);
|
|
11434
12319
|
setSelectedSection(null);
|
|
@@ -11436,7 +12321,7 @@ function useLinkModalState({
|
|
|
11436
12321
|
setDropdownOpen(false);
|
|
11437
12322
|
setUrlError("");
|
|
11438
12323
|
}, []);
|
|
11439
|
-
(0,
|
|
12324
|
+
(0, import_react13.useEffect)(() => {
|
|
11440
12325
|
if (!open) return;
|
|
11441
12326
|
if (mode === "edit" && initialTarget) {
|
|
11442
12327
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -11452,11 +12337,11 @@ function useLinkModalState({
|
|
|
11452
12337
|
setDropdownOpen(false);
|
|
11453
12338
|
setUrlError("");
|
|
11454
12339
|
}, [open, mode, initialTarget, reset]);
|
|
11455
|
-
const filteredPages = (0,
|
|
12340
|
+
const filteredPages = (0, import_react13.useMemo)(() => {
|
|
11456
12341
|
if (!searchValue.trim()) return availablePages;
|
|
11457
12342
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
11458
12343
|
}, [availablePages, searchValue]);
|
|
11459
|
-
const activeSections = (0,
|
|
12344
|
+
const activeSections = (0, import_react13.useMemo)(() => {
|
|
11460
12345
|
if (!selectedPage) return [];
|
|
11461
12346
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
11462
12347
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -11505,7 +12390,7 @@ function useLinkModalState({
|
|
|
11505
12390
|
reset();
|
|
11506
12391
|
onClose();
|
|
11507
12392
|
};
|
|
11508
|
-
const isValid = (0,
|
|
12393
|
+
const isValid = (0, import_react13.useMemo)(() => {
|
|
11509
12394
|
if (urlError) return false;
|
|
11510
12395
|
if (showBreadcrumb) return true;
|
|
11511
12396
|
if (selectedPage) return true;
|
|
@@ -11573,7 +12458,7 @@ function useLinkModalState({
|
|
|
11573
12458
|
}
|
|
11574
12459
|
|
|
11575
12460
|
// src/ui/link-modal/LinkPopover.tsx
|
|
11576
|
-
var
|
|
12461
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
11577
12462
|
function postToParent(data) {
|
|
11578
12463
|
window.parent?.postMessage(data, "*");
|
|
11579
12464
|
}
|
|
@@ -11602,7 +12487,7 @@ function LinkPopover({
|
|
|
11602
12487
|
onSubmit
|
|
11603
12488
|
});
|
|
11604
12489
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
11605
|
-
(0,
|
|
12490
|
+
(0, import_react14.useEffect)(() => {
|
|
11606
12491
|
if (!open) return;
|
|
11607
12492
|
if (sectionPickerActive) {
|
|
11608
12493
|
postToParent({ type: "ui:unlock" });
|
|
@@ -11669,15 +12554,15 @@ function LinkPopover({
|
|
|
11669
12554
|
);
|
|
11670
12555
|
};
|
|
11671
12556
|
}, [open, sectionPickerActive]);
|
|
11672
|
-
return /* @__PURE__ */ (0,
|
|
11673
|
-
/* @__PURE__ */ (0,
|
|
12557
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
|
|
12558
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
11674
12559
|
Dialog2,
|
|
11675
12560
|
{
|
|
11676
12561
|
open: open && !sectionPickerActive,
|
|
11677
12562
|
onOpenChange: (next) => {
|
|
11678
12563
|
if (!next) onClose?.();
|
|
11679
12564
|
},
|
|
11680
|
-
children: /* @__PURE__ */ (0,
|
|
12565
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
11681
12566
|
DialogContent,
|
|
11682
12567
|
{
|
|
11683
12568
|
ref: panelRef,
|
|
@@ -11687,12 +12572,12 @@ function LinkPopover({
|
|
|
11687
12572
|
"data-ohw-bridge": "",
|
|
11688
12573
|
showCloseButton: false,
|
|
11689
12574
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
11690
|
-
children: /* @__PURE__ */ (0,
|
|
12575
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkEditorPanel, { state, onClose })
|
|
11691
12576
|
}
|
|
11692
12577
|
)
|
|
11693
12578
|
}
|
|
11694
12579
|
),
|
|
11695
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
12580
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
11696
12581
|
SectionPickerOverlay,
|
|
11697
12582
|
{
|
|
11698
12583
|
pagePath: state.selectedPage.path,
|
|
@@ -14880,9 +15765,9 @@ function addFooterColumnWithPersist({
|
|
|
14880
15765
|
}
|
|
14881
15766
|
|
|
14882
15767
|
// src/ui/FloatingPanel.tsx
|
|
14883
|
-
var
|
|
14884
|
-
var
|
|
14885
|
-
var
|
|
15768
|
+
var import_react15 = require("react");
|
|
15769
|
+
var import_lucide_react16 = require("lucide-react");
|
|
15770
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
14886
15771
|
var PANEL_WIDTH = 256;
|
|
14887
15772
|
var EDGE_MARGIN = 16;
|
|
14888
15773
|
function getVisibleClip(parentScroll) {
|
|
@@ -14928,23 +15813,23 @@ function FloatingPanel({
|
|
|
14928
15813
|
className,
|
|
14929
15814
|
bodyClassName
|
|
14930
15815
|
}) {
|
|
14931
|
-
const panelRef = (0,
|
|
14932
|
-
const [measured, setMeasured] = (0,
|
|
14933
|
-
const dragRef = (0,
|
|
15816
|
+
const panelRef = (0, import_react15.useRef)(null);
|
|
15817
|
+
const [measured, setMeasured] = (0, import_react15.useState)({ w: PANEL_WIDTH, h: 280 });
|
|
15818
|
+
const dragRef = (0, import_react15.useRef)(null);
|
|
14934
15819
|
const resolved = position ?? defaultFloatingPanelPosition(parentScroll, measured.h);
|
|
14935
15820
|
const clamped = clampPosition(resolved, parentScroll, measured.w, measured.h);
|
|
14936
|
-
(0,
|
|
15821
|
+
(0, import_react15.useLayoutEffect)(() => {
|
|
14937
15822
|
if (!open || !panelRef.current) return;
|
|
14938
15823
|
const el = panelRef.current;
|
|
14939
15824
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
|
|
14940
15825
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
14941
15826
|
}, [open, children, title, context]);
|
|
14942
|
-
(0,
|
|
15827
|
+
(0, import_react15.useEffect)(() => {
|
|
14943
15828
|
if (!open || !position || !onPositionChange) return;
|
|
14944
15829
|
const next = clampPosition(position, parentScroll, measured.w, measured.h);
|
|
14945
15830
|
if (next.x !== position.x || next.y !== position.y) onPositionChange(next);
|
|
14946
15831
|
}, [open, parentScroll, measured.w, measured.h, position, onPositionChange]);
|
|
14947
|
-
const onHeaderPointerDown = (0,
|
|
15832
|
+
const onHeaderPointerDown = (0, import_react15.useCallback)(
|
|
14948
15833
|
(e) => {
|
|
14949
15834
|
if (e.button !== 0) return;
|
|
14950
15835
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -14963,7 +15848,7 @@ function FloatingPanel({
|
|
|
14963
15848
|
},
|
|
14964
15849
|
[clamped.x, clamped.y]
|
|
14965
15850
|
);
|
|
14966
|
-
const onHeaderPointerMove = (0,
|
|
15851
|
+
const onHeaderPointerMove = (0, import_react15.useCallback)(
|
|
14967
15852
|
(e) => {
|
|
14968
15853
|
const drag = dragRef.current;
|
|
14969
15854
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -14990,7 +15875,7 @@ function FloatingPanel({
|
|
|
14990
15875
|
},
|
|
14991
15876
|
[measured.h, measured.w, onPositionChange, parentScroll]
|
|
14992
15877
|
);
|
|
14993
|
-
const endDrag = (0,
|
|
15878
|
+
const endDrag = (0, import_react15.useCallback)((e) => {
|
|
14994
15879
|
const drag = dragRef.current;
|
|
14995
15880
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
14996
15881
|
dragRef.current = null;
|
|
@@ -15000,13 +15885,13 @@ function FloatingPanel({
|
|
|
15000
15885
|
} catch {
|
|
15001
15886
|
}
|
|
15002
15887
|
}, []);
|
|
15003
|
-
(0,
|
|
15888
|
+
(0, import_react15.useEffect)(() => {
|
|
15004
15889
|
if (open) return;
|
|
15005
15890
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
15006
15891
|
}, [open]);
|
|
15007
|
-
(0,
|
|
15892
|
+
(0, import_react15.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
15008
15893
|
if (!open) return null;
|
|
15009
|
-
return /* @__PURE__ */ (0,
|
|
15894
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
15010
15895
|
"div",
|
|
15011
15896
|
{
|
|
15012
15897
|
ref: panelRef,
|
|
@@ -15023,7 +15908,7 @@ function FloatingPanel({
|
|
|
15023
15908
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15024
15909
|
onClick: (e) => e.stopPropagation(),
|
|
15025
15910
|
children: [
|
|
15026
|
-
/* @__PURE__ */ (0,
|
|
15911
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
15027
15912
|
"div",
|
|
15028
15913
|
{
|
|
15029
15914
|
"data-ohw-floating-panel-header": "",
|
|
@@ -15033,14 +15918,14 @@ function FloatingPanel({
|
|
|
15033
15918
|
onPointerUp: endDrag,
|
|
15034
15919
|
onPointerCancel: endDrag,
|
|
15035
15920
|
children: [
|
|
15036
|
-
/* @__PURE__ */ (0,
|
|
15037
|
-
/* @__PURE__ */ (0,
|
|
15038
|
-
icon ? /* @__PURE__ */ (0,
|
|
15039
|
-
/* @__PURE__ */ (0,
|
|
15921
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
15922
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
15923
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
15924
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
15040
15925
|
] }),
|
|
15041
|
-
context ? /* @__PURE__ */ (0,
|
|
15926
|
+
context ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
15042
15927
|
] }),
|
|
15043
|
-
/* @__PURE__ */ (0,
|
|
15928
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15044
15929
|
"button",
|
|
15045
15930
|
{
|
|
15046
15931
|
type: "button",
|
|
@@ -15052,13 +15937,13 @@ function FloatingPanel({
|
|
|
15052
15937
|
onClose();
|
|
15053
15938
|
},
|
|
15054
15939
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15055
|
-
children: /* @__PURE__ */ (0,
|
|
15940
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react16.X, { size: 16, "aria-hidden": true })
|
|
15056
15941
|
}
|
|
15057
15942
|
)
|
|
15058
15943
|
]
|
|
15059
15944
|
}
|
|
15060
15945
|
),
|
|
15061
|
-
/* @__PURE__ */ (0,
|
|
15946
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15062
15947
|
"div",
|
|
15063
15948
|
{
|
|
15064
15949
|
"data-ohw-floating-panel-body": "",
|
|
@@ -15072,15 +15957,15 @@ function FloatingPanel({
|
|
|
15072
15957
|
}
|
|
15073
15958
|
|
|
15074
15959
|
// src/ui/socials-display-panel.tsx
|
|
15075
|
-
var
|
|
15960
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
15076
15961
|
function DisplaySwitch({
|
|
15077
15962
|
label,
|
|
15078
15963
|
checked,
|
|
15079
15964
|
disabled,
|
|
15080
15965
|
onChange
|
|
15081
15966
|
}) {
|
|
15082
|
-
return /* @__PURE__ */ (0,
|
|
15083
|
-
/* @__PURE__ */ (0,
|
|
15967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
|
|
15968
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15084
15969
|
"span",
|
|
15085
15970
|
{
|
|
15086
15971
|
className: cn(
|
|
@@ -15090,7 +15975,7 @@ function DisplaySwitch({
|
|
|
15090
15975
|
children: label
|
|
15091
15976
|
}
|
|
15092
15977
|
),
|
|
15093
|
-
/* @__PURE__ */ (0,
|
|
15978
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15094
15979
|
"button",
|
|
15095
15980
|
{
|
|
15096
15981
|
type: "button",
|
|
@@ -15104,7 +15989,7 @@ function DisplaySwitch({
|
|
|
15104
15989
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
15105
15990
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
15106
15991
|
),
|
|
15107
|
-
children: /* @__PURE__ */ (0,
|
|
15992
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15108
15993
|
"span",
|
|
15109
15994
|
{
|
|
15110
15995
|
className: cn(
|
|
@@ -15118,8 +16003,8 @@ function DisplaySwitch({
|
|
|
15118
16003
|
] });
|
|
15119
16004
|
}
|
|
15120
16005
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
15121
|
-
return /* @__PURE__ */ (0,
|
|
15122
|
-
/* @__PURE__ */ (0,
|
|
16006
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
16007
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15123
16008
|
DisplaySwitch,
|
|
15124
16009
|
{
|
|
15125
16010
|
label: "Text",
|
|
@@ -15128,7 +16013,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15128
16013
|
onChange: (text) => onChange({ ...display, text })
|
|
15129
16014
|
}
|
|
15130
16015
|
),
|
|
15131
|
-
/* @__PURE__ */ (0,
|
|
16016
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15132
16017
|
DisplaySwitch,
|
|
15133
16018
|
{
|
|
15134
16019
|
label: "Icon",
|
|
@@ -15403,7 +16288,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
15403
16288
|
}
|
|
15404
16289
|
|
|
15405
16290
|
// src/useNavItemDrag.ts
|
|
15406
|
-
var
|
|
16291
|
+
var import_react16 = require("react");
|
|
15407
16292
|
function useNavItemDrag({
|
|
15408
16293
|
isEditMode,
|
|
15409
16294
|
editContentRef,
|
|
@@ -15427,11 +16312,11 @@ function useNavItemDrag({
|
|
|
15427
16312
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
15428
16313
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
15429
16314
|
}) {
|
|
15430
|
-
const navDragRef = (0,
|
|
15431
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
15432
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
15433
|
-
const navPointerDragRef = (0,
|
|
15434
|
-
const clearNavDragVisuals = (0,
|
|
16315
|
+
const navDragRef = (0, import_react16.useRef)(null);
|
|
16316
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react16.useState)([]);
|
|
16317
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react16.useState)(null);
|
|
16318
|
+
const navPointerDragRef = (0, import_react16.useRef)(null);
|
|
16319
|
+
const clearNavDragVisuals = (0, import_react16.useCallback)(() => {
|
|
15435
16320
|
const session = navDragRef.current;
|
|
15436
16321
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
15437
16322
|
navDragRef.current = null;
|
|
@@ -15464,7 +16349,7 @@ function useNavItemDrag({
|
|
|
15464
16349
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
15465
16350
|
unlockItemDragInteraction();
|
|
15466
16351
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
15467
|
-
const refreshNavDragVisuals = (0,
|
|
16352
|
+
const refreshNavDragVisuals = (0, import_react16.useCallback)(
|
|
15468
16353
|
(session, activeSlot, clientX, clientY) => {
|
|
15469
16354
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
15470
16355
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -15482,13 +16367,13 @@ function useNavItemDrag({
|
|
|
15482
16367
|
},
|
|
15483
16368
|
[setDraggedItemRect, setSiblingHintRects]
|
|
15484
16369
|
);
|
|
15485
|
-
const refreshNavDragVisualsRef = (0,
|
|
16370
|
+
const refreshNavDragVisualsRef = (0, import_react16.useRef)(refreshNavDragVisuals);
|
|
15486
16371
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
15487
|
-
const commitNavDragRef = (0,
|
|
16372
|
+
const commitNavDragRef = (0, import_react16.useRef)(() => {
|
|
15488
16373
|
});
|
|
15489
|
-
const beginNavDragRef = (0,
|
|
16374
|
+
const beginNavDragRef = (0, import_react16.useRef)(() => {
|
|
15490
16375
|
});
|
|
15491
|
-
const beginNavDrag = (0,
|
|
16376
|
+
const beginNavDrag = (0, import_react16.useCallback)(
|
|
15492
16377
|
(session) => {
|
|
15493
16378
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
15494
16379
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -15527,7 +16412,7 @@ function useNavItemDrag({
|
|
|
15527
16412
|
]
|
|
15528
16413
|
);
|
|
15529
16414
|
beginNavDragRef.current = beginNavDrag;
|
|
15530
|
-
const commitNavDrag = (0,
|
|
16415
|
+
const commitNavDrag = (0, import_react16.useCallback)(
|
|
15531
16416
|
(clientX, clientY) => {
|
|
15532
16417
|
const session = navDragRef.current;
|
|
15533
16418
|
if (!session) {
|
|
@@ -15606,7 +16491,7 @@ function useNavItemDrag({
|
|
|
15606
16491
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
15607
16492
|
);
|
|
15608
16493
|
commitNavDragRef.current = commitNavDrag;
|
|
15609
|
-
const startNavLinkDrag = (0,
|
|
16494
|
+
const startNavLinkDrag = (0, import_react16.useCallback)(
|
|
15610
16495
|
(anchor, clientX, clientY, wasSelected) => {
|
|
15611
16496
|
if (footerDragRef.current) return false;
|
|
15612
16497
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -15624,7 +16509,7 @@ function useNavItemDrag({
|
|
|
15624
16509
|
},
|
|
15625
16510
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
15626
16511
|
);
|
|
15627
|
-
const onNavDragOver = (0,
|
|
16512
|
+
const onNavDragOver = (0, import_react16.useCallback)(
|
|
15628
16513
|
(e) => {
|
|
15629
16514
|
const session = navDragRef.current;
|
|
15630
16515
|
if (!session) return false;
|
|
@@ -15636,7 +16521,7 @@ function useNavItemDrag({
|
|
|
15636
16521
|
},
|
|
15637
16522
|
[]
|
|
15638
16523
|
);
|
|
15639
|
-
(0,
|
|
16524
|
+
(0, import_react16.useEffect)(() => {
|
|
15640
16525
|
if (!isEditMode) return;
|
|
15641
16526
|
const THRESHOLD = 10;
|
|
15642
16527
|
const resolveWasSelected = (el) => {
|
|
@@ -15763,7 +16648,7 @@ function useNavItemDrag({
|
|
|
15763
16648
|
setLinkPopover,
|
|
15764
16649
|
suppressNextClickRef
|
|
15765
16650
|
]);
|
|
15766
|
-
const armNavPressFromChrome = (0,
|
|
16651
|
+
const armNavPressFromChrome = (0, import_react16.useCallback)(
|
|
15767
16652
|
(selected, clientX, clientY, pointerId) => {
|
|
15768
16653
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
15769
16654
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -15795,7 +16680,7 @@ function useNavItemDrag({
|
|
|
15795
16680
|
}
|
|
15796
16681
|
|
|
15797
16682
|
// src/useSectionDrag.ts
|
|
15798
|
-
var
|
|
16683
|
+
var import_react17 = require("react");
|
|
15799
16684
|
|
|
15800
16685
|
// src/lib/section-dnd.ts
|
|
15801
16686
|
function isFooterSection(el) {
|
|
@@ -15894,21 +16779,21 @@ function useSectionDrag({
|
|
|
15894
16779
|
suppressNextClickRef,
|
|
15895
16780
|
suppressClickUntilRef
|
|
15896
16781
|
}) {
|
|
15897
|
-
const sectionDragRef = (0,
|
|
15898
|
-
const [sectionDropSlots, setSectionDropSlots] = (0,
|
|
15899
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0,
|
|
15900
|
-
const [isSectionDragging, setIsSectionDragging] = (0,
|
|
15901
|
-
const sectionPointerDragRef = (0,
|
|
15902
|
-
const autoScrollRafRef = (0,
|
|
15903
|
-
const autoScrollDeltaRef = (0,
|
|
15904
|
-
const stopAutoScroll = (0,
|
|
16782
|
+
const sectionDragRef = (0, import_react17.useRef)(null);
|
|
16783
|
+
const [sectionDropSlots, setSectionDropSlots] = (0, import_react17.useState)([]);
|
|
16784
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react17.useState)(null);
|
|
16785
|
+
const [isSectionDragging, setIsSectionDragging] = (0, import_react17.useState)(false);
|
|
16786
|
+
const sectionPointerDragRef = (0, import_react17.useRef)(null);
|
|
16787
|
+
const autoScrollRafRef = (0, import_react17.useRef)(null);
|
|
16788
|
+
const autoScrollDeltaRef = (0, import_react17.useRef)(0);
|
|
16789
|
+
const stopAutoScroll = (0, import_react17.useCallback)(() => {
|
|
15905
16790
|
if (autoScrollRafRef.current != null) {
|
|
15906
16791
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
15907
16792
|
autoScrollRafRef.current = null;
|
|
15908
16793
|
}
|
|
15909
16794
|
autoScrollDeltaRef.current = 0;
|
|
15910
16795
|
}, []);
|
|
15911
|
-
const tickAutoScroll = (0,
|
|
16796
|
+
const tickAutoScroll = (0, import_react17.useCallback)(() => {
|
|
15912
16797
|
if (!sectionDragRef.current) {
|
|
15913
16798
|
stopAutoScroll();
|
|
15914
16799
|
return;
|
|
@@ -15918,7 +16803,7 @@ function useSectionDrag({
|
|
|
15918
16803
|
}
|
|
15919
16804
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
15920
16805
|
}, [postToParentRef, stopAutoScroll]);
|
|
15921
|
-
const updateAutoScroll = (0,
|
|
16806
|
+
const updateAutoScroll = (0, import_react17.useCallback)(
|
|
15922
16807
|
(clientY) => {
|
|
15923
16808
|
const clip = visibleClip(parentScrollRef.current);
|
|
15924
16809
|
let delta = 0;
|
|
@@ -15940,7 +16825,7 @@ function useSectionDrag({
|
|
|
15940
16825
|
},
|
|
15941
16826
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
15942
16827
|
);
|
|
15943
|
-
const clearSectionDragVisuals = (0,
|
|
16828
|
+
const clearSectionDragVisuals = (0, import_react17.useCallback)(() => {
|
|
15944
16829
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
15945
16830
|
sectionDragRef.current = null;
|
|
15946
16831
|
setSectionDropSlots([]);
|
|
@@ -15950,7 +16835,7 @@ function useSectionDrag({
|
|
|
15950
16835
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
15951
16836
|
unlockItemDragInteraction();
|
|
15952
16837
|
}, [stopAutoScroll]);
|
|
15953
|
-
const refreshSectionDragVisuals = (0,
|
|
16838
|
+
const refreshSectionDragVisuals = (0, import_react17.useCallback)(
|
|
15954
16839
|
(session, clientX, clientY) => {
|
|
15955
16840
|
session.lastClientX = clientX;
|
|
15956
16841
|
session.lastClientY = clientY;
|
|
@@ -15964,7 +16849,7 @@ function useSectionDrag({
|
|
|
15964
16849
|
},
|
|
15965
16850
|
[updateAutoScroll]
|
|
15966
16851
|
);
|
|
15967
|
-
const beginSectionDrag = (0,
|
|
16852
|
+
const beginSectionDrag = (0, import_react17.useCallback)(
|
|
15968
16853
|
(session) => {
|
|
15969
16854
|
sectionDragRef.current = session;
|
|
15970
16855
|
setIsSectionDragging(true);
|
|
@@ -15975,7 +16860,7 @@ function useSectionDrag({
|
|
|
15975
16860
|
},
|
|
15976
16861
|
[refreshSectionDragVisuals]
|
|
15977
16862
|
);
|
|
15978
|
-
const commitSectionDrag = (0,
|
|
16863
|
+
const commitSectionDrag = (0, import_react17.useCallback)(() => {
|
|
15979
16864
|
const session = sectionDragRef.current;
|
|
15980
16865
|
if (!session) {
|
|
15981
16866
|
clearSectionDragVisuals();
|
|
@@ -16004,7 +16889,7 @@ function useSectionDrag({
|
|
|
16004
16889
|
});
|
|
16005
16890
|
});
|
|
16006
16891
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
16007
|
-
const startSectionPressDrag = (0,
|
|
16892
|
+
const startSectionPressDrag = (0, import_react17.useCallback)(
|
|
16008
16893
|
(el, clientX, clientY, pointerId) => {
|
|
16009
16894
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
16010
16895
|
const instanceId = instanceIdOf(el);
|
|
@@ -16021,7 +16906,7 @@ function useSectionDrag({
|
|
|
16021
16906
|
},
|
|
16022
16907
|
[footerDragRef, navDragRef]
|
|
16023
16908
|
);
|
|
16024
|
-
(0,
|
|
16909
|
+
(0, import_react17.useEffect)(() => {
|
|
16025
16910
|
if (!isEditMode) return;
|
|
16026
16911
|
const onPointerDown = (e) => {
|
|
16027
16912
|
if (e.button !== 0) return;
|
|
@@ -16126,8 +17011,8 @@ function useSectionDrag({
|
|
|
16126
17011
|
}
|
|
16127
17012
|
|
|
16128
17013
|
// src/ui/footer-container-chrome.tsx
|
|
16129
|
-
var
|
|
16130
|
-
var
|
|
17014
|
+
var import_lucide_react17 = require("lucide-react");
|
|
17015
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
16131
17016
|
function FooterContainerChrome({
|
|
16132
17017
|
rect,
|
|
16133
17018
|
onAdd,
|
|
@@ -16135,7 +17020,7 @@ function FooterContainerChrome({
|
|
|
16135
17020
|
}) {
|
|
16136
17021
|
const chromeGap = 6;
|
|
16137
17022
|
const buttonMargin = 7;
|
|
16138
|
-
return /* @__PURE__ */ (0,
|
|
17023
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16139
17024
|
"div",
|
|
16140
17025
|
{
|
|
16141
17026
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -16147,8 +17032,8 @@ function FooterContainerChrome({
|
|
|
16147
17032
|
width: rect.width + chromeGap * 2,
|
|
16148
17033
|
height: rect.height + chromeGap * 2
|
|
16149
17034
|
},
|
|
16150
|
-
children: /* @__PURE__ */ (0,
|
|
16151
|
-
/* @__PURE__ */ (0,
|
|
17035
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
17036
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16152
17037
|
"button",
|
|
16153
17038
|
{
|
|
16154
17039
|
type: "button",
|
|
@@ -16167,17 +17052,17 @@ function FooterContainerChrome({
|
|
|
16167
17052
|
if (addDisabled) return;
|
|
16168
17053
|
onAdd();
|
|
16169
17054
|
},
|
|
16170
|
-
children: /* @__PURE__ */ (0,
|
|
17055
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16171
17056
|
}
|
|
16172
17057
|
) }),
|
|
16173
|
-
/* @__PURE__ */ (0,
|
|
17058
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
16174
17059
|
] })
|
|
16175
17060
|
}
|
|
16176
17061
|
) });
|
|
16177
17062
|
}
|
|
16178
17063
|
|
|
16179
17064
|
// src/lib/carousel.ts
|
|
16180
|
-
var
|
|
17065
|
+
var import_react18 = require("react");
|
|
16181
17066
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
16182
17067
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
16183
17068
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -16239,8 +17124,8 @@ function applyCarouselNode(key, val) {
|
|
|
16239
17124
|
return true;
|
|
16240
17125
|
}
|
|
16241
17126
|
function useOhwCarousel(key, initial) {
|
|
16242
|
-
const [images, setImages] = (0,
|
|
16243
|
-
(0,
|
|
17127
|
+
const [images, setImages] = (0, import_react18.useState)(initial);
|
|
17128
|
+
(0, import_react18.useEffect)(() => {
|
|
16244
17129
|
const el = document.querySelector(
|
|
16245
17130
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
16246
17131
|
);
|
|
@@ -16652,14 +17537,14 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
16652
17537
|
}
|
|
16653
17538
|
|
|
16654
17539
|
// src/ui/navbar-container-chrome.tsx
|
|
16655
|
-
var
|
|
16656
|
-
var
|
|
17540
|
+
var import_lucide_react18 = require("lucide-react");
|
|
17541
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
16657
17542
|
function NavbarContainerChrome({
|
|
16658
17543
|
rect,
|
|
16659
17544
|
onAdd
|
|
16660
17545
|
}) {
|
|
16661
17546
|
const chromeGap = 6;
|
|
16662
|
-
return /* @__PURE__ */ (0,
|
|
17547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
16663
17548
|
"div",
|
|
16664
17549
|
{
|
|
16665
17550
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -16671,7 +17556,7 @@ function NavbarContainerChrome({
|
|
|
16671
17556
|
width: rect.width + chromeGap * 2,
|
|
16672
17557
|
height: rect.height + chromeGap * 2
|
|
16673
17558
|
},
|
|
16674
|
-
children: /* @__PURE__ */ (0,
|
|
17559
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
16675
17560
|
"button",
|
|
16676
17561
|
{
|
|
16677
17562
|
type: "button",
|
|
@@ -16688,7 +17573,7 @@ function NavbarContainerChrome({
|
|
|
16688
17573
|
e.stopPropagation();
|
|
16689
17574
|
onAdd();
|
|
16690
17575
|
},
|
|
16691
|
-
children: /* @__PURE__ */ (0,
|
|
17576
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16692
17577
|
}
|
|
16693
17578
|
)
|
|
16694
17579
|
}
|
|
@@ -16697,7 +17582,7 @@ function NavbarContainerChrome({
|
|
|
16697
17582
|
|
|
16698
17583
|
// src/ui/drop-indicator.tsx
|
|
16699
17584
|
var React11 = __toESM(require("react"), 1);
|
|
16700
|
-
var
|
|
17585
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
16701
17586
|
var dropIndicatorVariants = cva(
|
|
16702
17587
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
16703
17588
|
{
|
|
@@ -16721,7 +17606,7 @@ var dropIndicatorVariants = cva(
|
|
|
16721
17606
|
);
|
|
16722
17607
|
var DropIndicator = React11.forwardRef(
|
|
16723
17608
|
({ className, direction, state, ...props }, ref) => {
|
|
16724
|
-
return /* @__PURE__ */ (0,
|
|
17609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
16725
17610
|
"div",
|
|
16726
17611
|
{
|
|
16727
17612
|
ref,
|
|
@@ -16738,7 +17623,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
16738
17623
|
DropIndicator.displayName = "DropIndicator";
|
|
16739
17624
|
|
|
16740
17625
|
// src/ui/badge.tsx
|
|
16741
|
-
var
|
|
17626
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
16742
17627
|
var badgeVariants = cva(
|
|
16743
17628
|
"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",
|
|
16744
17629
|
{
|
|
@@ -16756,13 +17641,13 @@ var badgeVariants = cva(
|
|
|
16756
17641
|
}
|
|
16757
17642
|
);
|
|
16758
17643
|
function Badge({ className, variant, ...props }) {
|
|
16759
|
-
return /* @__PURE__ */ (0,
|
|
17644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
16760
17645
|
}
|
|
16761
17646
|
|
|
16762
17647
|
// src/OhhwellsBridge.tsx
|
|
16763
|
-
var
|
|
16764
|
-
var
|
|
16765
|
-
var
|
|
17648
|
+
var import_lucide_react19 = require("lucide-react");
|
|
17649
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
17650
|
+
var PRIMARY5 = "#0885FE";
|
|
16766
17651
|
var IMAGE_FADE_MS = 300;
|
|
16767
17652
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
16768
17653
|
function runOpacityFade(el, onDone) {
|
|
@@ -16883,7 +17768,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
16883
17768
|
schedulingRoots.set(container, root);
|
|
16884
17769
|
(0, import_react_dom4.flushSync)(() => {
|
|
16885
17770
|
root.render(
|
|
16886
|
-
/* @__PURE__ */ (0,
|
|
17771
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
16887
17772
|
SchedulingWidget,
|
|
16888
17773
|
{
|
|
16889
17774
|
notifyOnConnect: false,
|
|
@@ -17021,7 +17906,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
17021
17906
|
schedulingRoots.set(container, root);
|
|
17022
17907
|
(0, import_react_dom4.flushSync)(() => {
|
|
17023
17908
|
root.render(
|
|
17024
|
-
/* @__PURE__ */ (0,
|
|
17909
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
17025
17910
|
SchedulingWidget,
|
|
17026
17911
|
{
|
|
17027
17912
|
notifyOnConnect,
|
|
@@ -17741,7 +18626,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
17741
18626
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
17742
18627
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
17743
18628
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
17744
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
18629
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY5})`;
|
|
17745
18630
|
var TOOLBAR_GROUPS = [
|
|
17746
18631
|
[
|
|
17747
18632
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -17767,7 +18652,7 @@ function EditGlowChrome({
|
|
|
17767
18652
|
hideHandle = false
|
|
17768
18653
|
}) {
|
|
17769
18654
|
const GAP = SELECTION_CHROME_GAP2;
|
|
17770
|
-
return /* @__PURE__ */ (0,
|
|
18655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
17771
18656
|
"div",
|
|
17772
18657
|
{
|
|
17773
18658
|
ref: elRef,
|
|
@@ -17782,7 +18667,7 @@ function EditGlowChrome({
|
|
|
17782
18667
|
zIndex: 2147483646
|
|
17783
18668
|
},
|
|
17784
18669
|
children: [
|
|
17785
|
-
/* @__PURE__ */ (0,
|
|
18670
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
17786
18671
|
"div",
|
|
17787
18672
|
{
|
|
17788
18673
|
style: {
|
|
@@ -17796,7 +18681,7 @@ function EditGlowChrome({
|
|
|
17796
18681
|
}
|
|
17797
18682
|
}
|
|
17798
18683
|
),
|
|
17799
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
18684
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
17800
18685
|
"div",
|
|
17801
18686
|
{
|
|
17802
18687
|
"data-ohw-drag-handle-container": "",
|
|
@@ -17808,7 +18693,7 @@ function EditGlowChrome({
|
|
|
17808
18693
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
17809
18694
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
17810
18695
|
},
|
|
17811
|
-
children: /* @__PURE__ */ (0,
|
|
18696
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
17812
18697
|
DragHandle,
|
|
17813
18698
|
{
|
|
17814
18699
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -17995,9 +18880,9 @@ function FloatingToolbar({
|
|
|
17995
18880
|
showEditLink,
|
|
17996
18881
|
onEditLink
|
|
17997
18882
|
}) {
|
|
17998
|
-
const localRef =
|
|
17999
|
-
const [measuredW, setMeasuredW] =
|
|
18000
|
-
const setRefs =
|
|
18883
|
+
const localRef = import_react19.default.useRef(null);
|
|
18884
|
+
const [measuredW, setMeasuredW] = import_react19.default.useState(330);
|
|
18885
|
+
const setRefs = import_react19.default.useCallback(
|
|
18001
18886
|
(node) => {
|
|
18002
18887
|
localRef.current = node;
|
|
18003
18888
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -18009,7 +18894,7 @@ function FloatingToolbar({
|
|
|
18009
18894
|
},
|
|
18010
18895
|
[elRef]
|
|
18011
18896
|
);
|
|
18012
|
-
|
|
18897
|
+
import_react19.default.useLayoutEffect(() => {
|
|
18013
18898
|
const node = localRef.current;
|
|
18014
18899
|
if (!node) return;
|
|
18015
18900
|
const update = () => {
|
|
@@ -18022,7 +18907,7 @@ function FloatingToolbar({
|
|
|
18022
18907
|
return () => ro.disconnect();
|
|
18023
18908
|
}, [showEditLink, activeCommands]);
|
|
18024
18909
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
18025
|
-
return /* @__PURE__ */ (0,
|
|
18910
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18026
18911
|
"div",
|
|
18027
18912
|
{
|
|
18028
18913
|
ref: setRefs,
|
|
@@ -18034,12 +18919,12 @@ function FloatingToolbar({
|
|
|
18034
18919
|
zIndex: 2147483647,
|
|
18035
18920
|
pointerEvents: "auto"
|
|
18036
18921
|
},
|
|
18037
|
-
children: /* @__PURE__ */ (0,
|
|
18038
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
18039
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
18922
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(CustomToolbar, { children: [
|
|
18923
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react19.default.Fragment, { children: [
|
|
18924
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomToolbarDivider, {}),
|
|
18040
18925
|
btns.map((btn) => {
|
|
18041
18926
|
const isActive = activeCommands.has(btn.cmd);
|
|
18042
|
-
return /* @__PURE__ */ (0,
|
|
18927
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18043
18928
|
CustomToolbarButton,
|
|
18044
18929
|
{
|
|
18045
18930
|
title: btn.title,
|
|
@@ -18048,7 +18933,7 @@ function FloatingToolbar({
|
|
|
18048
18933
|
e.preventDefault();
|
|
18049
18934
|
onCommand(btn.cmd);
|
|
18050
18935
|
},
|
|
18051
|
-
children: /* @__PURE__ */ (0,
|
|
18936
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18052
18937
|
"svg",
|
|
18053
18938
|
{
|
|
18054
18939
|
width: "16",
|
|
@@ -18069,7 +18954,7 @@ function FloatingToolbar({
|
|
|
18069
18954
|
);
|
|
18070
18955
|
})
|
|
18071
18956
|
] }, gi)),
|
|
18072
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
18957
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18073
18958
|
CustomToolbarButton,
|
|
18074
18959
|
{
|
|
18075
18960
|
type: "button",
|
|
@@ -18083,7 +18968,7 @@ function FloatingToolbar({
|
|
|
18083
18968
|
e.preventDefault();
|
|
18084
18969
|
e.stopPropagation();
|
|
18085
18970
|
},
|
|
18086
|
-
children: /* @__PURE__ */ (0,
|
|
18971
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
18087
18972
|
}
|
|
18088
18973
|
) : null
|
|
18089
18974
|
] })
|
|
@@ -18100,7 +18985,7 @@ function StateToggle({
|
|
|
18100
18985
|
states,
|
|
18101
18986
|
onStateChange
|
|
18102
18987
|
}) {
|
|
18103
|
-
return /* @__PURE__ */ (0,
|
|
18988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18104
18989
|
ToggleGroup,
|
|
18105
18990
|
{
|
|
18106
18991
|
"data-ohw-state-toggle": "",
|
|
@@ -18114,7 +18999,7 @@ function StateToggle({
|
|
|
18114
18999
|
left: rect.right - 8,
|
|
18115
19000
|
transform: "translateX(-100%)"
|
|
18116
19001
|
},
|
|
18117
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
19002
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
18118
19003
|
}
|
|
18119
19004
|
);
|
|
18120
19005
|
}
|
|
@@ -18130,9 +19015,9 @@ var OHW_LOADER_STYLE = {
|
|
|
18130
19015
|
justifyContent: "center"
|
|
18131
19016
|
};
|
|
18132
19017
|
function OhwLoaderSpinner() {
|
|
18133
|
-
return /* @__PURE__ */ (0,
|
|
18134
|
-
/* @__PURE__ */ (0,
|
|
18135
|
-
/* @__PURE__ */ (0,
|
|
19018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
19019
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
19020
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18136
19021
|
"circle",
|
|
18137
19022
|
{
|
|
18138
19023
|
cx: "14",
|
|
@@ -18142,7 +19027,7 @@ function OhwLoaderSpinner() {
|
|
|
18142
19027
|
strokeWidth: "3",
|
|
18143
19028
|
strokeDasharray: "17 52",
|
|
18144
19029
|
strokeLinecap: "round",
|
|
18145
|
-
children: /* @__PURE__ */ (0,
|
|
19030
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18146
19031
|
"animateTransform",
|
|
18147
19032
|
{
|
|
18148
19033
|
attributeName: "transform",
|
|
@@ -18158,7 +19043,7 @@ function OhwLoaderSpinner() {
|
|
|
18158
19043
|
] });
|
|
18159
19044
|
}
|
|
18160
19045
|
function OhwBrandMark() {
|
|
18161
|
-
return /* @__PURE__ */ (0,
|
|
19046
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
18162
19047
|
"svg",
|
|
18163
19048
|
{
|
|
18164
19049
|
width: "16",
|
|
@@ -18169,7 +19054,7 @@ function OhwBrandMark() {
|
|
|
18169
19054
|
style: { display: "block", flexShrink: 0 },
|
|
18170
19055
|
xmlns: "http://www.w3.org/2000/svg",
|
|
18171
19056
|
children: [
|
|
18172
|
-
/* @__PURE__ */ (0,
|
|
19057
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18173
19058
|
"mask",
|
|
18174
19059
|
{
|
|
18175
19060
|
id: "ohw-badge-mark",
|
|
@@ -18179,15 +19064,15 @@ function OhwBrandMark() {
|
|
|
18179
19064
|
y: "0",
|
|
18180
19065
|
width: "48",
|
|
18181
19066
|
height: "48",
|
|
18182
|
-
children: /* @__PURE__ */ (0,
|
|
19067
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.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" })
|
|
18183
19068
|
}
|
|
18184
19069
|
),
|
|
18185
|
-
/* @__PURE__ */ (0,
|
|
18186
|
-
/* @__PURE__ */ (0,
|
|
18187
|
-
/* @__PURE__ */ (0,
|
|
18188
|
-
/* @__PURE__ */ (0,
|
|
18189
|
-
/* @__PURE__ */ (0,
|
|
18190
|
-
/* @__PURE__ */ (0,
|
|
19070
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
19071
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.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" }),
|
|
19072
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.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" }),
|
|
19073
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.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" }),
|
|
19074
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.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" }),
|
|
19075
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.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" })
|
|
18191
19076
|
] })
|
|
18192
19077
|
]
|
|
18193
19078
|
}
|
|
@@ -18224,7 +19109,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
18224
19109
|
whiteSpace: "nowrap"
|
|
18225
19110
|
};
|
|
18226
19111
|
function MadeWithOhhWells() {
|
|
18227
|
-
return /* @__PURE__ */ (0,
|
|
19112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
18228
19113
|
"a",
|
|
18229
19114
|
{
|
|
18230
19115
|
href: "https://ohhwells.com",
|
|
@@ -18234,8 +19119,8 @@ function MadeWithOhhWells() {
|
|
|
18234
19119
|
"data-ohw-badge": "",
|
|
18235
19120
|
style: OHW_BADGE_STYLE,
|
|
18236
19121
|
children: [
|
|
18237
|
-
/* @__PURE__ */ (0,
|
|
18238
|
-
/* @__PURE__ */ (0,
|
|
19122
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OhwBrandMark, {}),
|
|
19123
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
18239
19124
|
]
|
|
18240
19125
|
}
|
|
18241
19126
|
);
|
|
@@ -18281,8 +19166,8 @@ function OhhwellsBridge() {
|
|
|
18281
19166
|
const router = (0, import_navigation3.useRouter)();
|
|
18282
19167
|
const searchParams = (0, import_navigation3.useSearchParams)();
|
|
18283
19168
|
const isEditMode = isEditSessionActive();
|
|
18284
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
18285
|
-
(0,
|
|
19169
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react19.useState)(null);
|
|
19170
|
+
(0, import_react19.useEffect)(() => {
|
|
18286
19171
|
const figtreeFontId = "ohw-figtree-font";
|
|
18287
19172
|
if (!document.getElementById(figtreeFontId)) {
|
|
18288
19173
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -18308,8 +19193,8 @@ function OhhwellsBridge() {
|
|
|
18308
19193
|
};
|
|
18309
19194
|
}, []);
|
|
18310
19195
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
18311
|
-
const [subdomain, setSubdomain] = (0,
|
|
18312
|
-
(0,
|
|
19196
|
+
const [subdomain, setSubdomain] = (0, import_react19.useState)(() => resolveSubdomain(subdomainFromQuery));
|
|
19197
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
18313
19198
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
18314
19199
|
if (next !== subdomain) setSubdomain(next);
|
|
18315
19200
|
if (next) return;
|
|
@@ -18321,7 +19206,7 @@ function OhhwellsBridge() {
|
|
|
18321
19206
|
}, 0);
|
|
18322
19207
|
return () => window.clearTimeout(t);
|
|
18323
19208
|
}, [subdomainFromQuery, subdomain]);
|
|
18324
|
-
(0,
|
|
19209
|
+
(0, import_react19.useEffect)(() => {
|
|
18325
19210
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
18326
19211
|
const url = new URL(window.location.href);
|
|
18327
19212
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -18330,45 +19215,45 @@ function OhhwellsBridge() {
|
|
|
18330
19215
|
}, [subdomainFromQuery]);
|
|
18331
19216
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
18332
19217
|
useSavedLinkNavigation(isEditMode);
|
|
18333
|
-
const postToParent2 = (0,
|
|
19218
|
+
const postToParent2 = (0, import_react19.useCallback)((data) => {
|
|
18334
19219
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
18335
19220
|
window.parent.postMessage(data, "*");
|
|
18336
19221
|
}
|
|
18337
19222
|
}, []);
|
|
18338
|
-
const [fetchState, setFetchState] = (0,
|
|
18339
|
-
const [showBranding, setShowBranding] = (0,
|
|
18340
|
-
const autoSaveTimers = (0,
|
|
18341
|
-
const activeElRef = (0,
|
|
18342
|
-
const pointerHeldRef = (0,
|
|
18343
|
-
const selectedElRef = (0,
|
|
18344
|
-
const selectedHrefKeyRef = (0,
|
|
18345
|
-
const selectedFooterColAttrRef = (0,
|
|
18346
|
-
const originalContentRef = (0,
|
|
18347
|
-
const activeStateElRef = (0,
|
|
18348
|
-
const parentScrollRef = (0,
|
|
18349
|
-
const visibleViewportRef = (0,
|
|
18350
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
18351
|
-
const attachVisibleViewport = (0,
|
|
19223
|
+
const [fetchState, setFetchState] = (0, import_react19.useState)("idle");
|
|
19224
|
+
const [showBranding, setShowBranding] = (0, import_react19.useState)(false);
|
|
19225
|
+
const autoSaveTimers = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
|
|
19226
|
+
const activeElRef = (0, import_react19.useRef)(null);
|
|
19227
|
+
const pointerHeldRef = (0, import_react19.useRef)(false);
|
|
19228
|
+
const selectedElRef = (0, import_react19.useRef)(null);
|
|
19229
|
+
const selectedHrefKeyRef = (0, import_react19.useRef)(null);
|
|
19230
|
+
const selectedFooterColAttrRef = (0, import_react19.useRef)(null);
|
|
19231
|
+
const originalContentRef = (0, import_react19.useRef)(null);
|
|
19232
|
+
const activeStateElRef = (0, import_react19.useRef)(null);
|
|
19233
|
+
const parentScrollRef = (0, import_react19.useRef)(null);
|
|
19234
|
+
const visibleViewportRef = (0, import_react19.useRef)(null);
|
|
19235
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react19.useState)(null);
|
|
19236
|
+
const attachVisibleViewport = (0, import_react19.useCallback)((node) => {
|
|
18352
19237
|
visibleViewportRef.current = node;
|
|
18353
19238
|
setDialogPortalContainer(node);
|
|
18354
19239
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
18355
19240
|
}, []);
|
|
18356
|
-
const toolbarElRef = (0,
|
|
18357
|
-
const glowElRef = (0,
|
|
18358
|
-
const hoveredImageRef = (0,
|
|
18359
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
18360
|
-
const dragOverElRef = (0,
|
|
18361
|
-
const [mediaHover, setMediaHover] = (0,
|
|
18362
|
-
const [selectedAiSectionId, setSelectedAiSectionId] = (0,
|
|
18363
|
-
const selectedAiSectionIdRef = (0,
|
|
18364
|
-
const handleAiSectionSelectionChange = (0,
|
|
19241
|
+
const toolbarElRef = (0, import_react19.useRef)(null);
|
|
19242
|
+
const glowElRef = (0, import_react19.useRef)(null);
|
|
19243
|
+
const hoveredImageRef = (0, import_react19.useRef)(null);
|
|
19244
|
+
const hoveredImageHasTextOverlapRef = (0, import_react19.useRef)(false);
|
|
19245
|
+
const dragOverElRef = (0, import_react19.useRef)(null);
|
|
19246
|
+
const [mediaHover, setMediaHover] = (0, import_react19.useState)(null);
|
|
19247
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react19.useState)(null);
|
|
19248
|
+
const selectedAiSectionIdRef = (0, import_react19.useRef)(null);
|
|
19249
|
+
const handleAiSectionSelectionChange = (0, import_react19.useCallback)((id) => {
|
|
18365
19250
|
selectedAiSectionIdRef.current = id;
|
|
18366
19251
|
setSelectedAiSectionId(id);
|
|
18367
19252
|
}, []);
|
|
18368
|
-
const [selectedMedia, setSelectedMedia] = (0,
|
|
18369
|
-
const selectedMediaElRef = (0,
|
|
18370
|
-
const mediaKeyDropTokenRef = (0,
|
|
18371
|
-
const clearMediaSelection = (0,
|
|
19253
|
+
const [selectedMedia, setSelectedMedia] = (0, import_react19.useState)(null);
|
|
19254
|
+
const selectedMediaElRef = (0, import_react19.useRef)(null);
|
|
19255
|
+
const mediaKeyDropTokenRef = (0, import_react19.useRef)(0);
|
|
19256
|
+
const clearMediaSelection = (0, import_react19.useCallback)(() => {
|
|
18372
19257
|
const prev = selectedMediaElRef.current;
|
|
18373
19258
|
selectedMediaElRef.current = null;
|
|
18374
19259
|
setSelectedMedia(null);
|
|
@@ -18393,9 +19278,9 @@ function OhhwellsBridge() {
|
|
|
18393
19278
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
18394
19279
|
}
|
|
18395
19280
|
}, []);
|
|
18396
|
-
const clearMediaSelectionRef = (0,
|
|
19281
|
+
const clearMediaSelectionRef = (0, import_react19.useRef)(clearMediaSelection);
|
|
18397
19282
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
18398
|
-
const selectMediaElement = (0,
|
|
19283
|
+
const selectMediaElement = (0, import_react19.useCallback)((el) => {
|
|
18399
19284
|
const r2 = el.getBoundingClientRect();
|
|
18400
19285
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
18401
19286
|
selectedMediaElRef.current = el;
|
|
@@ -18419,9 +19304,9 @@ function OhhwellsBridge() {
|
|
|
18419
19304
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
18420
19305
|
});
|
|
18421
19306
|
}, []);
|
|
18422
|
-
const selectMediaElementRef = (0,
|
|
19307
|
+
const selectMediaElementRef = (0, import_react19.useRef)(selectMediaElement);
|
|
18423
19308
|
selectMediaElementRef.current = selectMediaElement;
|
|
18424
|
-
(0,
|
|
19309
|
+
(0, import_react19.useEffect)(() => {
|
|
18425
19310
|
if (!selectedMedia) return;
|
|
18426
19311
|
const update = () => {
|
|
18427
19312
|
const el = selectedMediaElRef.current;
|
|
@@ -18441,55 +19326,54 @@ function OhhwellsBridge() {
|
|
|
18441
19326
|
window.removeEventListener("resize", update);
|
|
18442
19327
|
};
|
|
18443
19328
|
}, [selectedMedia !== null]);
|
|
18444
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
18445
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
18446
|
-
const hoveredGapRef = (0,
|
|
18447
|
-
const imageUnhoverTimerRef = (0,
|
|
18448
|
-
const imageShowTimerRef = (0,
|
|
18449
|
-
const editStylesRef = (0,
|
|
18450
|
-
const activateRef = (0,
|
|
19329
|
+
const [carouselHover, setCarouselHover] = (0, import_react19.useState)(null);
|
|
19330
|
+
const [uploadingRects, setUploadingRects] = (0, import_react19.useState)({});
|
|
19331
|
+
const hoveredGapRef = (0, import_react19.useRef)(null);
|
|
19332
|
+
const imageUnhoverTimerRef = (0, import_react19.useRef)(null);
|
|
19333
|
+
const imageShowTimerRef = (0, import_react19.useRef)(null);
|
|
19334
|
+
const editStylesRef = (0, import_react19.useRef)(null);
|
|
19335
|
+
const activateRef = (0, import_react19.useRef)(() => {
|
|
18451
19336
|
});
|
|
18452
|
-
const deactivateRef = (0,
|
|
19337
|
+
const deactivateRef = (0, import_react19.useRef)(() => {
|
|
18453
19338
|
});
|
|
18454
|
-
const selectRef = (0,
|
|
19339
|
+
const selectRef = (0, import_react19.useRef)(() => {
|
|
18455
19340
|
});
|
|
18456
|
-
const selectFrameRef = (0,
|
|
19341
|
+
const selectFrameRef = (0, import_react19.useRef)(() => {
|
|
18457
19342
|
});
|
|
18458
|
-
const selectLogoRef = (0,
|
|
19343
|
+
const selectLogoRef = (0, import_react19.useRef)(() => {
|
|
18459
19344
|
});
|
|
18460
|
-
const openLogoSizePanelRef = (0,
|
|
19345
|
+
const openLogoSizePanelRef = (0, import_react19.useRef)(() => {
|
|
18461
19346
|
});
|
|
18462
|
-
const deselectRef = (0,
|
|
19347
|
+
const deselectRef = (0, import_react19.useRef)(() => {
|
|
18463
19348
|
});
|
|
18464
|
-
const closeFloatingPanelOnlyRef = (0,
|
|
19349
|
+
const closeFloatingPanelOnlyRef = (0, import_react19.useRef)(() => {
|
|
18465
19350
|
});
|
|
18466
|
-
const reselectNavigationItemRef = (0,
|
|
19351
|
+
const reselectNavigationItemRef = (0, import_react19.useRef)(() => {
|
|
18467
19352
|
});
|
|
18468
|
-
const commitNavigationTextEditRef = (0,
|
|
19353
|
+
const commitNavigationTextEditRef = (0, import_react19.useRef)(() => {
|
|
18469
19354
|
});
|
|
18470
|
-
const handleDeleteSelectedRef = (0,
|
|
18471
|
-
const runPendingDeleteUndoRef = (0,
|
|
18472
|
-
const isFooterFrameSelectionRef = (0,
|
|
18473
|
-
const refreshActiveCommandsRef = (0,
|
|
19355
|
+
const handleDeleteSelectedRef = (0, import_react19.useRef)(() => false);
|
|
19356
|
+
const runPendingDeleteUndoRef = (0, import_react19.useRef)(() => false);
|
|
19357
|
+
const isFooterFrameSelectionRef = (0, import_react19.useRef)(false);
|
|
19358
|
+
const refreshActiveCommandsRef = (0, import_react19.useRef)(() => {
|
|
18474
19359
|
});
|
|
18475
|
-
const postToParentRef = (0,
|
|
19360
|
+
const postToParentRef = (0, import_react19.useRef)(postToParent2);
|
|
18476
19361
|
postToParentRef.current = postToParent2;
|
|
18477
|
-
const aiSectionApiRef = (0,
|
|
18478
|
-
const
|
|
18479
|
-
const
|
|
18480
|
-
const
|
|
18481
|
-
const [
|
|
18482
|
-
const
|
|
18483
|
-
const
|
|
18484
|
-
const [
|
|
18485
|
-
const [
|
|
18486
|
-
const
|
|
18487
|
-
const
|
|
18488
|
-
const
|
|
18489
|
-
const
|
|
18490
|
-
const [
|
|
18491
|
-
const
|
|
18492
|
-
const clearFormPick = (0, import_react18.useCallback)(() => {
|
|
19362
|
+
const aiSectionApiRef = (0, import_react19.useRef)(null);
|
|
19363
|
+
const sectionsLoadedRef = (0, import_react19.useRef)(false);
|
|
19364
|
+
const pendingScheduleConfigRequests = (0, import_react19.useRef)([]);
|
|
19365
|
+
const [toolbarRect, setToolbarRect] = (0, import_react19.useState)(null);
|
|
19366
|
+
const [formPickRect, setFormPickRect] = (0, import_react19.useState)(null);
|
|
19367
|
+
const formPickElRef = (0, import_react19.useRef)(null);
|
|
19368
|
+
const [formViewState, setFormViewStateUi] = (0, import_react19.useState)("default");
|
|
19369
|
+
const [formPickCount, setFormPickCount] = (0, import_react19.useState)(null);
|
|
19370
|
+
const [formHoverRect, setFormHoverRect] = (0, import_react19.useState)(null);
|
|
19371
|
+
const formHoverElRef = (0, import_react19.useRef)(null);
|
|
19372
|
+
const [fieldPickRect, setFieldPickRect] = (0, import_react19.useState)(null);
|
|
19373
|
+
const fieldPickElRef = (0, import_react19.useRef)(null);
|
|
19374
|
+
const [fieldPickState, setFieldPickState] = (0, import_react19.useState)(null);
|
|
19375
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react19.useState)(false);
|
|
19376
|
+
const clearFormPick = (0, import_react19.useCallback)(() => {
|
|
18493
19377
|
const form = formPickElRef.current;
|
|
18494
19378
|
const editing = fieldPickElRef.current;
|
|
18495
19379
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -18509,7 +19393,7 @@ function OhhwellsBridge() {
|
|
|
18509
19393
|
formPickElRef.current = null;
|
|
18510
19394
|
setFormPickRect(null);
|
|
18511
19395
|
}, []);
|
|
18512
|
-
const clearFieldPick = (0,
|
|
19396
|
+
const clearFieldPick = (0, import_react19.useCallback)(() => {
|
|
18513
19397
|
const wrapper = fieldPickElRef.current;
|
|
18514
19398
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
18515
19399
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -18519,9 +19403,9 @@ function OhhwellsBridge() {
|
|
|
18519
19403
|
setFieldPickRect(null);
|
|
18520
19404
|
setFieldPickState(null);
|
|
18521
19405
|
}, []);
|
|
18522
|
-
const persistFieldsRef = (0,
|
|
19406
|
+
const persistFieldsRef = (0, import_react19.useRef)(() => {
|
|
18523
19407
|
});
|
|
18524
|
-
const persistFields = (0,
|
|
19408
|
+
const persistFields = (0, import_react19.useCallback)(
|
|
18525
19409
|
(form) => {
|
|
18526
19410
|
const key = formKeyOf(form);
|
|
18527
19411
|
if (!key) return;
|
|
@@ -18532,7 +19416,7 @@ function OhhwellsBridge() {
|
|
|
18532
19416
|
[]
|
|
18533
19417
|
);
|
|
18534
19418
|
persistFieldsRef.current = persistFields;
|
|
18535
|
-
const selectField = (0,
|
|
19419
|
+
const selectField = (0, import_react19.useCallback)((wrapper) => {
|
|
18536
19420
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
18537
19421
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
18538
19422
|
}
|
|
@@ -18545,7 +19429,7 @@ function OhhwellsBridge() {
|
|
|
18545
19429
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
18546
19430
|
setFieldTypePickerOpen(false);
|
|
18547
19431
|
}, []);
|
|
18548
|
-
const withSelectedField = (0,
|
|
19432
|
+
const withSelectedField = (0, import_react19.useCallback)(
|
|
18549
19433
|
(run) => {
|
|
18550
19434
|
const wrapper = fieldPickElRef.current;
|
|
18551
19435
|
const form = formPickElRef.current;
|
|
@@ -18558,28 +19442,28 @@ function OhhwellsBridge() {
|
|
|
18558
19442
|
},
|
|
18559
19443
|
[persistFields]
|
|
18560
19444
|
);
|
|
18561
|
-
const handleFieldTypeChange = (0,
|
|
19445
|
+
const handleFieldTypeChange = (0, import_react19.useCallback)(
|
|
18562
19446
|
(type) => withSelectedField((_form, wrapper) => {
|
|
18563
19447
|
applyFieldType(wrapper, type);
|
|
18564
19448
|
selectField(wrapper);
|
|
18565
19449
|
}),
|
|
18566
19450
|
[selectField, withSelectedField]
|
|
18567
19451
|
);
|
|
18568
|
-
const handleFieldRequiredToggle = (0,
|
|
19452
|
+
const handleFieldRequiredToggle = (0, import_react19.useCallback)(
|
|
18569
19453
|
() => withSelectedField((_form, wrapper) => {
|
|
18570
19454
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
18571
19455
|
selectField(wrapper);
|
|
18572
19456
|
}),
|
|
18573
19457
|
[selectField, withSelectedField]
|
|
18574
19458
|
);
|
|
18575
|
-
const handleFieldDuplicate = (0,
|
|
19459
|
+
const handleFieldDuplicate = (0, import_react19.useCallback)(
|
|
18576
19460
|
() => withSelectedField((form, wrapper) => {
|
|
18577
19461
|
const copy = duplicateField(form, wrapper);
|
|
18578
19462
|
selectField(copy);
|
|
18579
19463
|
}),
|
|
18580
19464
|
[selectField, withSelectedField]
|
|
18581
19465
|
);
|
|
18582
|
-
const handleFieldDelete = (0,
|
|
19466
|
+
const handleFieldDelete = (0, import_react19.useCallback)(
|
|
18583
19467
|
() => withSelectedField((_form, wrapper) => {
|
|
18584
19468
|
removeField(wrapper);
|
|
18585
19469
|
clearFieldPick();
|
|
@@ -18587,7 +19471,7 @@ function OhhwellsBridge() {
|
|
|
18587
19471
|
}),
|
|
18588
19472
|
[clearFieldPick, withSelectedField]
|
|
18589
19473
|
);
|
|
18590
|
-
const handleAddField = (0,
|
|
19474
|
+
const handleAddField = (0, import_react19.useCallback)(
|
|
18591
19475
|
(type) => {
|
|
18592
19476
|
const form = formPickElRef.current;
|
|
18593
19477
|
if (!form) return;
|
|
@@ -18603,8 +19487,8 @@ function OhhwellsBridge() {
|
|
|
18603
19487
|
},
|
|
18604
19488
|
[persistFields, selectField]
|
|
18605
19489
|
);
|
|
18606
|
-
const fieldDragRef = (0,
|
|
18607
|
-
const buildFieldDropSlots = (0,
|
|
19490
|
+
const fieldDragRef = (0, import_react19.useRef)(null);
|
|
19491
|
+
const buildFieldDropSlots = (0, import_react19.useCallback)((form, draggedKey) => {
|
|
18608
19492
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
18609
19493
|
const slots = others.map((el) => {
|
|
18610
19494
|
const rect = el.getBoundingClientRect();
|
|
@@ -18617,7 +19501,7 @@ function OhhwellsBridge() {
|
|
|
18617
19501
|
}
|
|
18618
19502
|
return slots;
|
|
18619
19503
|
}, []);
|
|
18620
|
-
const handleFieldDragStart = (0,
|
|
19504
|
+
const handleFieldDragStart = (0, import_react19.useCallback)(() => {
|
|
18621
19505
|
const wrapper = fieldPickElRef.current;
|
|
18622
19506
|
const form = formPickElRef.current;
|
|
18623
19507
|
if (!wrapper || !form) return;
|
|
@@ -18626,18 +19510,18 @@ function OhhwellsBridge() {
|
|
|
18626
19510
|
setFieldDragging(true);
|
|
18627
19511
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
18628
19512
|
}, [buildFieldDropSlots]);
|
|
18629
|
-
const handleFieldDragEnd = (0,
|
|
19513
|
+
const handleFieldDragEnd = (0, import_react19.useCallback)(() => {
|
|
18630
19514
|
fieldDragRef.current = null;
|
|
18631
19515
|
setFieldDropIndex(null);
|
|
18632
19516
|
setFieldDropSlots([]);
|
|
18633
19517
|
setFieldDragging(false);
|
|
18634
19518
|
}, []);
|
|
18635
|
-
const [fieldDropIndex, setFieldDropIndex] = (0,
|
|
18636
|
-
const [fieldDropSlots, setFieldDropSlots] = (0,
|
|
18637
|
-
const [fieldDragging, setFieldDragging] = (0,
|
|
18638
|
-
const clearFormPickRef = (0,
|
|
19519
|
+
const [fieldDropIndex, setFieldDropIndex] = (0, import_react19.useState)(null);
|
|
19520
|
+
const [fieldDropSlots, setFieldDropSlots] = (0, import_react19.useState)([]);
|
|
19521
|
+
const [fieldDragging, setFieldDragging] = (0, import_react19.useState)(false);
|
|
19522
|
+
const clearFormPickRef = (0, import_react19.useRef)(clearFormPick);
|
|
18639
19523
|
clearFormPickRef.current = clearFormPick;
|
|
18640
|
-
(0,
|
|
19524
|
+
(0, import_react19.useEffect)(() => {
|
|
18641
19525
|
const el = fieldPickElRef.current;
|
|
18642
19526
|
if (!el || fieldPickRect === null) return;
|
|
18643
19527
|
const observer = new ResizeObserver(() => {
|
|
@@ -18646,7 +19530,7 @@ function OhhwellsBridge() {
|
|
|
18646
19530
|
observer.observe(el);
|
|
18647
19531
|
return () => observer.disconnect();
|
|
18648
19532
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
18649
|
-
(0,
|
|
19533
|
+
(0, import_react19.useEffect)(() => {
|
|
18650
19534
|
const el = formPickElRef.current;
|
|
18651
19535
|
if (!el || formPickRect === null) return;
|
|
18652
19536
|
const observer = new ResizeObserver(() => {
|
|
@@ -18655,25 +19539,25 @@ function OhhwellsBridge() {
|
|
|
18655
19539
|
observer.observe(el);
|
|
18656
19540
|
return () => observer.disconnect();
|
|
18657
19541
|
}, [formPickRect !== null, formViewState]);
|
|
18658
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
18659
|
-
const toolbarVariantRef = (0,
|
|
19542
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react19.useState)("none");
|
|
19543
|
+
const toolbarVariantRef = (0, import_react19.useRef)("none");
|
|
18660
19544
|
toolbarVariantRef.current = toolbarVariant;
|
|
18661
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
18662
|
-
const [selectedIsSocial, setSelectedIsSocial] = (0,
|
|
18663
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0,
|
|
18664
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
18665
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
18666
|
-
const [toggleState, setToggleState] = (0,
|
|
18667
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
18668
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
18669
|
-
const [sectionGap, setSectionGap] = (0,
|
|
18670
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
18671
|
-
const hoveredNavContainerRef = (0,
|
|
18672
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
18673
|
-
const hoveredItemElRef = (0,
|
|
18674
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
18675
|
-
const [hoveredTextRect, setHoveredTextRect] = (0,
|
|
18676
|
-
(0,
|
|
19545
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react19.useState)(false);
|
|
19546
|
+
const [selectedIsSocial, setSelectedIsSocial] = (0, import_react19.useState)(false);
|
|
19547
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react19.useState)(false);
|
|
19548
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react19.useState)(null);
|
|
19549
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react19.useState)(false);
|
|
19550
|
+
const [toggleState, setToggleState] = (0, import_react19.useState)(null);
|
|
19551
|
+
const [maxBadge, setMaxBadge] = (0, import_react19.useState)(null);
|
|
19552
|
+
const [activeCommands, setActiveCommands] = (0, import_react19.useState)(/* @__PURE__ */ new Set());
|
|
19553
|
+
const [sectionGap, setSectionGap] = (0, import_react19.useState)(null);
|
|
19554
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react19.useState)(false);
|
|
19555
|
+
const hoveredNavContainerRef = (0, import_react19.useRef)(null);
|
|
19556
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react19.useState)(null);
|
|
19557
|
+
const hoveredItemElRef = (0, import_react19.useRef)(null);
|
|
19558
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react19.useState)(null);
|
|
19559
|
+
const [hoveredTextRect, setHoveredTextRect] = (0, import_react19.useState)(null);
|
|
19560
|
+
(0, import_react19.useEffect)(() => {
|
|
18677
19561
|
const sync = () => {
|
|
18678
19562
|
const el = document.querySelector(
|
|
18679
19563
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -18717,46 +19601,61 @@ function OhhwellsBridge() {
|
|
|
18717
19601
|
});
|
|
18718
19602
|
return () => observer.disconnect();
|
|
18719
19603
|
}, []);
|
|
18720
|
-
const siblingHintElRef = (0,
|
|
18721
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
18722
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
18723
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
18724
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
19604
|
+
const siblingHintElRef = (0, import_react19.useRef)(null);
|
|
19605
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react19.useState)(null);
|
|
19606
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react19.useState)([]);
|
|
19607
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react19.useState)(false);
|
|
19608
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react19.useState)(false);
|
|
18725
19609
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
18726
|
-
const [floatingPanel, setFloatingPanel] = (0,
|
|
18727
|
-
const floatingPanelOpenRef = (0,
|
|
19610
|
+
const [floatingPanel, setFloatingPanel] = (0, import_react19.useState)(null);
|
|
19611
|
+
const floatingPanelOpenRef = (0, import_react19.useRef)(false);
|
|
18728
19612
|
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
18729
|
-
const [floatingPanelPos, setFloatingPanelPos] = (0,
|
|
18730
|
-
const [logoSizeDraft, setLogoSizeDraft] = (0,
|
|
18731
|
-
const [editorViewport, setEditorViewport] = (0,
|
|
18732
|
-
const [parentScrollSnap, setParentScrollSnap] = (0,
|
|
18733
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0,
|
|
18734
|
-
const [footerHeadingVisible, setFooterHeadingVisible] = (0,
|
|
18735
|
-
const footerDragRef = (0,
|
|
18736
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
18737
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
18738
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
18739
|
-
const footerPointerDragRef = (0,
|
|
18740
|
-
const suppressNextClickRef = (0,
|
|
18741
|
-
const suppressClickUntilRef = (0,
|
|
18742
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
18743
|
-
const linkPopoverSessionRef = (0,
|
|
18744
|
-
const addNavAfterAnchorRef = (0,
|
|
18745
|
-
const editContentRef = (0,
|
|
18746
|
-
const aiSectionsRef = (0,
|
|
18747
|
-
const
|
|
18748
|
-
|
|
18749
|
-
|
|
18750
|
-
const
|
|
18751
|
-
|
|
18752
|
-
const
|
|
18753
|
-
const
|
|
18754
|
-
const
|
|
18755
|
-
const
|
|
18756
|
-
const
|
|
18757
|
-
const
|
|
19613
|
+
const [floatingPanelPos, setFloatingPanelPos] = (0, import_react19.useState)(null);
|
|
19614
|
+
const [logoSizeDraft, setLogoSizeDraft] = (0, import_react19.useState)(null);
|
|
19615
|
+
const [editorViewport, setEditorViewport] = (0, import_react19.useState)("desktop");
|
|
19616
|
+
const [parentScrollSnap, setParentScrollSnap] = (0, import_react19.useState)(null);
|
|
19617
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react19.useState)(null);
|
|
19618
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react19.useState)(null);
|
|
19619
|
+
const footerDragRef = (0, import_react19.useRef)(null);
|
|
19620
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react19.useState)([]);
|
|
19621
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react19.useState)(null);
|
|
19622
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react19.useState)(null);
|
|
19623
|
+
const footerPointerDragRef = (0, import_react19.useRef)(null);
|
|
19624
|
+
const suppressNextClickRef = (0, import_react19.useRef)(false);
|
|
19625
|
+
const suppressClickUntilRef = (0, import_react19.useRef)(0);
|
|
19626
|
+
const [linkPopover, setLinkPopover] = (0, import_react19.useState)(null);
|
|
19627
|
+
const linkPopoverSessionRef = (0, import_react19.useRef)(null);
|
|
19628
|
+
const addNavAfterAnchorRef = (0, import_react19.useRef)(null);
|
|
19629
|
+
const editContentRef = (0, import_react19.useRef)({});
|
|
19630
|
+
const aiSectionsRef = (0, import_react19.useRef)("");
|
|
19631
|
+
const applyTreeLocalRef = (0, import_react19.useRef)(
|
|
19632
|
+
null
|
|
19633
|
+
);
|
|
19634
|
+
const clearInteractionChromeRef = (0, import_react19.useRef)(() => {
|
|
19635
|
+
});
|
|
19636
|
+
const brandKitRef = (0, import_react19.useRef)("");
|
|
19637
|
+
const stylesRef = (0, import_react19.useRef)("");
|
|
19638
|
+
const appliedDrawerRef = (0, import_react19.useRef)(null);
|
|
19639
|
+
const pendingDeleteUndoRef = (0, import_react19.useRef)(null);
|
|
19640
|
+
const [sitePages, setSitePages] = (0, import_react19.useState)([]);
|
|
19641
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react19.useState)({});
|
|
19642
|
+
const sectionsPrefetchGenRef = (0, import_react19.useRef)(0);
|
|
19643
|
+
const setLinkPopoverRef = (0, import_react19.useRef)(setLinkPopover);
|
|
19644
|
+
const linkPopoverPanelRef = (0, import_react19.useRef)(null);
|
|
19645
|
+
const linkPopoverOpenRef = (0, import_react19.useRef)(false);
|
|
19646
|
+
const linkPopoverGraceUntilRef = (0, import_react19.useRef)(0);
|
|
18758
19647
|
setLinkPopoverRef.current = setLinkPopover;
|
|
18759
19648
|
linkPopoverSessionRef.current = linkPopover;
|
|
19649
|
+
(0, import_react19.useEffect)(() => {
|
|
19650
|
+
setSectionOrderPersistHandler((entries) => {
|
|
19651
|
+
const currentPath = window.location.pathname;
|
|
19652
|
+
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
19653
|
+
const text = JSON.stringify(merged);
|
|
19654
|
+
editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: text };
|
|
19655
|
+
postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text }] });
|
|
19656
|
+
});
|
|
19657
|
+
return () => setSectionOrderPersistHandler(null);
|
|
19658
|
+
}, []);
|
|
18760
19659
|
const {
|
|
18761
19660
|
navDragRef,
|
|
18762
19661
|
navPointerDragRef,
|
|
@@ -18803,7 +19702,7 @@ function OhhwellsBridge() {
|
|
|
18803
19702
|
const bumpLinkPopoverGrace = () => {
|
|
18804
19703
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
18805
19704
|
};
|
|
18806
|
-
const runSectionsPrefetch = (0,
|
|
19705
|
+
const runSectionsPrefetch = (0, import_react19.useCallback)((pages) => {
|
|
18807
19706
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
18808
19707
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
18809
19708
|
const paths = pages.map((p) => p.path);
|
|
@@ -18822,9 +19721,9 @@ function OhhwellsBridge() {
|
|
|
18822
19721
|
);
|
|
18823
19722
|
});
|
|
18824
19723
|
}, [isEditMode, pathname]);
|
|
18825
|
-
const runSectionsPrefetchRef = (0,
|
|
19724
|
+
const runSectionsPrefetchRef = (0, import_react19.useRef)(runSectionsPrefetch);
|
|
18826
19725
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
18827
|
-
(0,
|
|
19726
|
+
(0, import_react19.useEffect)(() => {
|
|
18828
19727
|
if (!linkPopover) {
|
|
18829
19728
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18830
19729
|
return;
|
|
@@ -18852,7 +19751,7 @@ function OhhwellsBridge() {
|
|
|
18852
19751
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18853
19752
|
};
|
|
18854
19753
|
}, [linkPopover, postToParent2]);
|
|
18855
|
-
(0,
|
|
19754
|
+
(0, import_react19.useEffect)(() => {
|
|
18856
19755
|
if (!isEditMode) return;
|
|
18857
19756
|
const useFixtures = shouldUseDevFixtures();
|
|
18858
19757
|
if (useFixtures) {
|
|
@@ -18876,14 +19775,14 @@ function OhhwellsBridge() {
|
|
|
18876
19775
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
18877
19776
|
return () => window.removeEventListener("message", onSitePages);
|
|
18878
19777
|
}, [isEditMode, postToParent2]);
|
|
18879
|
-
(0,
|
|
19778
|
+
(0, import_react19.useEffect)(() => {
|
|
18880
19779
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
18881
19780
|
void loadAllSectionsManifest().then((manifest) => {
|
|
18882
19781
|
if (Object.keys(manifest).length === 0) return;
|
|
18883
19782
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
18884
19783
|
});
|
|
18885
19784
|
}, [isEditMode]);
|
|
18886
|
-
(0,
|
|
19785
|
+
(0, import_react19.useEffect)(() => {
|
|
18887
19786
|
const update = () => {
|
|
18888
19787
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
18889
19788
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -18907,10 +19806,10 @@ function OhhwellsBridge() {
|
|
|
18907
19806
|
vvp.removeEventListener("resize", update);
|
|
18908
19807
|
};
|
|
18909
19808
|
}, []);
|
|
18910
|
-
const refreshStateRules = (0,
|
|
19809
|
+
const refreshStateRules = (0, import_react19.useCallback)(() => {
|
|
18911
19810
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
18912
19811
|
}, []);
|
|
18913
|
-
const processConfigRequest = (0,
|
|
19812
|
+
const processConfigRequest = (0, import_react19.useCallback)((insertAfterVal) => {
|
|
18914
19813
|
const tracker = getSectionsTracker();
|
|
18915
19814
|
let entries = [];
|
|
18916
19815
|
try {
|
|
@@ -18933,7 +19832,7 @@ function OhhwellsBridge() {
|
|
|
18933
19832
|
}
|
|
18934
19833
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
18935
19834
|
}, [isEditMode]);
|
|
18936
|
-
const deactivate = (0,
|
|
19835
|
+
const deactivate = (0, import_react19.useCallback)(() => {
|
|
18937
19836
|
const el = activeElRef.current;
|
|
18938
19837
|
if (!el) return;
|
|
18939
19838
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -18984,12 +19883,12 @@ function OhhwellsBridge() {
|
|
|
18984
19883
|
setToolbarShowEditLink(false);
|
|
18985
19884
|
postToParent2({ type: "ow:exit-edit" });
|
|
18986
19885
|
}, [postToParent2]);
|
|
18987
|
-
const clearSelectedAttr = (0,
|
|
19886
|
+
const clearSelectedAttr = (0, import_react19.useCallback)(() => {
|
|
18988
19887
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
18989
19888
|
el.removeAttribute("data-ohw-selected");
|
|
18990
19889
|
});
|
|
18991
19890
|
}, []);
|
|
18992
|
-
const deselect = (0,
|
|
19891
|
+
const deselect = (0, import_react19.useCallback)(() => {
|
|
18993
19892
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
18994
19893
|
clearSelectedAttr();
|
|
18995
19894
|
selectedElRef.current = null;
|
|
@@ -19023,20 +19922,20 @@ function OhhwellsBridge() {
|
|
|
19023
19922
|
setToolbarVariant("none");
|
|
19024
19923
|
}
|
|
19025
19924
|
}, [clearSelectedAttr]);
|
|
19026
|
-
const markSelected = (0,
|
|
19925
|
+
const markSelected = (0, import_react19.useCallback)((el) => {
|
|
19027
19926
|
clearSelectedAttr();
|
|
19028
19927
|
el.removeAttribute("data-ohw-hovered");
|
|
19029
19928
|
el.setAttribute("data-ohw-selected", "");
|
|
19030
19929
|
}, [clearSelectedAttr]);
|
|
19031
|
-
const isSelectedForHover = (0,
|
|
19930
|
+
const isSelectedForHover = (0, import_react19.useCallback)((el) => {
|
|
19032
19931
|
if (!el) return false;
|
|
19033
19932
|
return [selectedElRef.current, activeElRef.current].some(
|
|
19034
19933
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
19035
19934
|
);
|
|
19036
19935
|
}, []);
|
|
19037
|
-
const isSelectedForHoverRef = (0,
|
|
19936
|
+
const isSelectedForHoverRef = (0, import_react19.useRef)(isSelectedForHover);
|
|
19038
19937
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
19039
|
-
const resolveHrefKeyElement = (0,
|
|
19938
|
+
const resolveHrefKeyElement = (0, import_react19.useCallback)((hrefKey) => {
|
|
19040
19939
|
if (isFooterHrefKey(hrefKey)) {
|
|
19041
19940
|
return document.querySelector(
|
|
19042
19941
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -19051,7 +19950,7 @@ function OhhwellsBridge() {
|
|
|
19051
19950
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
19052
19951
|
);
|
|
19053
19952
|
}, []);
|
|
19054
|
-
const resyncSelectedNavigationItem = (0,
|
|
19953
|
+
const resyncSelectedNavigationItem = (0, import_react19.useCallback)(() => {
|
|
19055
19954
|
const hrefKey = selectedHrefKeyRef.current;
|
|
19056
19955
|
if (hrefKey) {
|
|
19057
19956
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -19089,7 +19988,7 @@ function OhhwellsBridge() {
|
|
|
19089
19988
|
);
|
|
19090
19989
|
}
|
|
19091
19990
|
}, [resolveHrefKeyElement]);
|
|
19092
|
-
const reselectNavigationItem = (0,
|
|
19991
|
+
const reselectNavigationItem = (0, import_react19.useCallback)((navAnchor) => {
|
|
19093
19992
|
selectedElRef.current = navAnchor;
|
|
19094
19993
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
19095
19994
|
selectedFooterColAttrRef.current = null;
|
|
@@ -19120,7 +20019,7 @@ function OhhwellsBridge() {
|
|
|
19120
20019
|
setToolbarShowEditLink(false);
|
|
19121
20020
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
19122
20021
|
}, [markSelected]);
|
|
19123
|
-
const commitNavigationTextEdit = (0,
|
|
20022
|
+
const commitNavigationTextEdit = (0, import_react19.useCallback)((navAnchor) => {
|
|
19124
20023
|
const el = activeElRef.current;
|
|
19125
20024
|
if (!el) return;
|
|
19126
20025
|
const key = el.dataset.ohwKey;
|
|
@@ -19153,7 +20052,7 @@ function OhhwellsBridge() {
|
|
|
19153
20052
|
postToParent2({ type: "ow:exit-edit" });
|
|
19154
20053
|
reselectNavigationItem(navAnchor);
|
|
19155
20054
|
}, [postToParent2, reselectNavigationItem]);
|
|
19156
|
-
const handleAddTopLevelNavItem = (0,
|
|
20055
|
+
const handleAddTopLevelNavItem = (0, import_react19.useCallback)(() => {
|
|
19157
20056
|
const items = listNavbarRootItems();
|
|
19158
20057
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
19159
20058
|
deselectRef.current();
|
|
@@ -19165,7 +20064,7 @@ function OhhwellsBridge() {
|
|
|
19165
20064
|
intent: "add-nav"
|
|
19166
20065
|
});
|
|
19167
20066
|
}, []);
|
|
19168
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
20067
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react19.useCallback)(
|
|
19169
20068
|
(anchor) => {
|
|
19170
20069
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
19171
20070
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -19178,7 +20077,7 @@ function OhhwellsBridge() {
|
|
|
19178
20077
|
},
|
|
19179
20078
|
[postToParent2]
|
|
19180
20079
|
);
|
|
19181
|
-
const handleNavDropdownOpenChange = (0,
|
|
20080
|
+
const handleNavDropdownOpenChange = (0, import_react19.useCallback)((open) => {
|
|
19182
20081
|
const selected = selectedElRef.current;
|
|
19183
20082
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
19184
20083
|
if (isNestedNavChild(selected)) return;
|
|
@@ -19194,7 +20093,7 @@ function OhhwellsBridge() {
|
|
|
19194
20093
|
}
|
|
19195
20094
|
});
|
|
19196
20095
|
}, []);
|
|
19197
|
-
const handleFooterHeadingVisibleChange = (0,
|
|
20096
|
+
const handleFooterHeadingVisibleChange = (0, import_react19.useCallback)(
|
|
19198
20097
|
(visible) => {
|
|
19199
20098
|
const selected = selectedElRef.current;
|
|
19200
20099
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -19218,7 +20117,7 @@ function OhhwellsBridge() {
|
|
|
19218
20117
|
},
|
|
19219
20118
|
[postToParent2]
|
|
19220
20119
|
);
|
|
19221
|
-
const enterEditOnNewItem = (0,
|
|
20120
|
+
const enterEditOnNewItem = (0, import_react19.useCallback)((anchor) => {
|
|
19222
20121
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
19223
20122
|
if (!label) {
|
|
19224
20123
|
selectRef.current(anchor);
|
|
@@ -19227,8 +20126,8 @@ function OhhwellsBridge() {
|
|
|
19227
20126
|
setNavGroupForceOpen(anchor, true);
|
|
19228
20127
|
activateRef.current(label);
|
|
19229
20128
|
}, []);
|
|
19230
|
-
const pendingSocialAddRef = (0,
|
|
19231
|
-
const handleAddChildItem = (0,
|
|
20129
|
+
const pendingSocialAddRef = (0, import_react19.useRef)(null);
|
|
20130
|
+
const handleAddChildItem = (0, import_react19.useCallback)(() => {
|
|
19232
20131
|
const selected = selectedElRef.current;
|
|
19233
20132
|
if (!selected) return;
|
|
19234
20133
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -19339,7 +20238,7 @@ function OhhwellsBridge() {
|
|
|
19339
20238
|
});
|
|
19340
20239
|
});
|
|
19341
20240
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
19342
|
-
const handleAddFooterColumn = (0,
|
|
20241
|
+
const handleAddFooterColumn = (0, import_react19.useCallback)(() => {
|
|
19343
20242
|
if (!canAddFooterColumn()) {
|
|
19344
20243
|
postToParent2({
|
|
19345
20244
|
type: "ow:toast",
|
|
@@ -19360,7 +20259,7 @@ function OhhwellsBridge() {
|
|
|
19360
20259
|
selectRef.current(result.firstLink);
|
|
19361
20260
|
});
|
|
19362
20261
|
}, [postToParent2]);
|
|
19363
|
-
const clearFooterDragVisuals = (0,
|
|
20262
|
+
const clearFooterDragVisuals = (0, import_react19.useCallback)(() => {
|
|
19364
20263
|
footerDragRef.current = null;
|
|
19365
20264
|
setSiblingHintRects([]);
|
|
19366
20265
|
setFooterDropSlots([]);
|
|
@@ -19369,7 +20268,7 @@ function OhhwellsBridge() {
|
|
|
19369
20268
|
setIsItemDragging(false);
|
|
19370
20269
|
unlockFooterDragInteraction();
|
|
19371
20270
|
}, []);
|
|
19372
|
-
const refreshFooterDragVisuals = (0,
|
|
20271
|
+
const refreshFooterDragVisuals = (0, import_react19.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
19373
20272
|
const dragged = session.draggedEl;
|
|
19374
20273
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
19375
20274
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -19401,13 +20300,13 @@ function OhhwellsBridge() {
|
|
|
19401
20300
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
19402
20301
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
19403
20302
|
}, []);
|
|
19404
|
-
const refreshFooterDragVisualsRef = (0,
|
|
20303
|
+
const refreshFooterDragVisualsRef = (0, import_react19.useRef)(refreshFooterDragVisuals);
|
|
19405
20304
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
19406
|
-
const commitFooterDragRef = (0,
|
|
20305
|
+
const commitFooterDragRef = (0, import_react19.useRef)(() => {
|
|
19407
20306
|
});
|
|
19408
|
-
const beginFooterDragRef = (0,
|
|
20307
|
+
const beginFooterDragRef = (0, import_react19.useRef)(() => {
|
|
19409
20308
|
});
|
|
19410
|
-
const beginFooterDrag = (0,
|
|
20309
|
+
const beginFooterDrag = (0, import_react19.useCallback)(
|
|
19411
20310
|
(session) => {
|
|
19412
20311
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
19413
20312
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -19427,7 +20326,7 @@ function OhhwellsBridge() {
|
|
|
19427
20326
|
[refreshFooterDragVisuals]
|
|
19428
20327
|
);
|
|
19429
20328
|
beginFooterDragRef.current = beginFooterDrag;
|
|
19430
|
-
const commitFooterDrag = (0,
|
|
20329
|
+
const commitFooterDrag = (0, import_react19.useCallback)(
|
|
19431
20330
|
(clientX, clientY) => {
|
|
19432
20331
|
const session = footerDragRef.current;
|
|
19433
20332
|
if (!session) {
|
|
@@ -19556,7 +20455,7 @@ function OhhwellsBridge() {
|
|
|
19556
20455
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
19557
20456
|
);
|
|
19558
20457
|
commitFooterDragRef.current = commitFooterDrag;
|
|
19559
|
-
const startFooterLinkDrag = (0,
|
|
20458
|
+
const startFooterLinkDrag = (0, import_react19.useCallback)(
|
|
19560
20459
|
(anchor, clientX, clientY, wasSelected) => {
|
|
19561
20460
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
19562
20461
|
if (!hrefKey) return false;
|
|
@@ -19592,7 +20491,7 @@ function OhhwellsBridge() {
|
|
|
19592
20491
|
},
|
|
19593
20492
|
[beginFooterDrag]
|
|
19594
20493
|
);
|
|
19595
|
-
const startFooterColumnDrag = (0,
|
|
20494
|
+
const startFooterColumnDrag = (0, import_react19.useCallback)(
|
|
19596
20495
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
19597
20496
|
const columns = listFooterColumns();
|
|
19598
20497
|
const idx = columns.indexOf(columnEl);
|
|
@@ -19612,7 +20511,7 @@ function OhhwellsBridge() {
|
|
|
19612
20511
|
},
|
|
19613
20512
|
[beginFooterDrag]
|
|
19614
20513
|
);
|
|
19615
|
-
const handleItemDragStart = (0,
|
|
20514
|
+
const handleItemDragStart = (0, import_react19.useCallback)(
|
|
19616
20515
|
(e) => {
|
|
19617
20516
|
const selected = selectedElRef.current;
|
|
19618
20517
|
if (!selected) {
|
|
@@ -19632,7 +20531,7 @@ function OhhwellsBridge() {
|
|
|
19632
20531
|
},
|
|
19633
20532
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
19634
20533
|
);
|
|
19635
|
-
const handleItemDragEnd = (0,
|
|
20534
|
+
const handleItemDragEnd = (0, import_react19.useCallback)(
|
|
19636
20535
|
(e) => {
|
|
19637
20536
|
if (footerDragRef.current) {
|
|
19638
20537
|
const x = e?.clientX;
|
|
@@ -19658,7 +20557,7 @@ function OhhwellsBridge() {
|
|
|
19658
20557
|
},
|
|
19659
20558
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
19660
20559
|
);
|
|
19661
|
-
const handleItemChromePointerDown = (0,
|
|
20560
|
+
const handleItemChromePointerDown = (0, import_react19.useCallback)((e) => {
|
|
19662
20561
|
if (e.button !== 0) return;
|
|
19663
20562
|
const selected = selectedElRef.current;
|
|
19664
20563
|
if (!selected) return;
|
|
@@ -19689,7 +20588,7 @@ function OhhwellsBridge() {
|
|
|
19689
20588
|
}
|
|
19690
20589
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
19691
20590
|
}, [armNavPressFromChrome]);
|
|
19692
|
-
const handleItemChromeClick = (0,
|
|
20591
|
+
const handleItemChromeClick = (0, import_react19.useCallback)((clientX, clientY) => {
|
|
19693
20592
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
19694
20593
|
suppressNextClickRef.current = false;
|
|
19695
20594
|
return;
|
|
@@ -19702,7 +20601,7 @@ function OhhwellsBridge() {
|
|
|
19702
20601
|
}, []);
|
|
19703
20602
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
19704
20603
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
19705
|
-
const select = (0,
|
|
20604
|
+
const select = (0, import_react19.useCallback)((anchor) => {
|
|
19706
20605
|
if (!isNavigationItem2(anchor)) return;
|
|
19707
20606
|
if (activeElRef.current) deactivate();
|
|
19708
20607
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -19745,7 +20644,7 @@ function OhhwellsBridge() {
|
|
|
19745
20644
|
setFloatingPanel(null);
|
|
19746
20645
|
setLogoSizeDraft(null);
|
|
19747
20646
|
}, [deactivate, markSelected]);
|
|
19748
|
-
const selectFrame = (0,
|
|
20647
|
+
const selectFrame = (0, import_react19.useCallback)((el) => {
|
|
19749
20648
|
if (!isNavigationContainer(el)) return;
|
|
19750
20649
|
if (activeElRef.current) deactivate();
|
|
19751
20650
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -19785,7 +20684,7 @@ function OhhwellsBridge() {
|
|
|
19785
20684
|
setFloatingPanel(null);
|
|
19786
20685
|
setLogoSizeDraft(null);
|
|
19787
20686
|
}, [deactivate, markSelected, postToParent2]);
|
|
19788
|
-
const selectLogo = (0,
|
|
20687
|
+
const selectLogo = (0, import_react19.useCallback)(
|
|
19789
20688
|
(logoEl) => {
|
|
19790
20689
|
if (activeElRef.current) deactivate();
|
|
19791
20690
|
selectedElRef.current = logoEl;
|
|
@@ -19814,7 +20713,7 @@ function OhhwellsBridge() {
|
|
|
19814
20713
|
},
|
|
19815
20714
|
[deactivate, markSelected]
|
|
19816
20715
|
);
|
|
19817
|
-
const openLogoSizePanel = (0,
|
|
20716
|
+
const openLogoSizePanel = (0, import_react19.useCallback)((logoEl) => {
|
|
19818
20717
|
const placement = getLogoPlacement(logoEl);
|
|
19819
20718
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
19820
20719
|
setLogoSizeDraft(draft);
|
|
@@ -19827,7 +20726,7 @@ function OhhwellsBridge() {
|
|
|
19827
20726
|
placement
|
|
19828
20727
|
});
|
|
19829
20728
|
}, []);
|
|
19830
|
-
const openSocialsDisplayPanel = (0,
|
|
20729
|
+
const openSocialsDisplayPanel = (0, import_react19.useCallback)((row) => {
|
|
19831
20730
|
setParentScrollSnap(parentScrollRef.current);
|
|
19832
20731
|
setFloatingPanel({
|
|
19833
20732
|
key: "socials-display",
|
|
@@ -19837,11 +20736,11 @@ function OhhwellsBridge() {
|
|
|
19837
20736
|
row
|
|
19838
20737
|
});
|
|
19839
20738
|
}, []);
|
|
19840
|
-
const isEditModeRef = (0,
|
|
19841
|
-
const requestMissingSocialIconsRef = (0,
|
|
20739
|
+
const isEditModeRef = (0, import_react19.useRef)(false);
|
|
20740
|
+
const requestMissingSocialIconsRef = (0, import_react19.useRef)(() => {
|
|
19842
20741
|
});
|
|
19843
|
-
const askedSocialIconsRef = (0,
|
|
19844
|
-
const requestMissingSocialIcons = (0,
|
|
20742
|
+
const askedSocialIconsRef = (0, import_react19.useRef)(/* @__PURE__ */ new Set());
|
|
20743
|
+
const requestMissingSocialIcons = (0, import_react19.useCallback)(() => {
|
|
19845
20744
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
19846
20745
|
const missing = socialsMissingIcons(row);
|
|
19847
20746
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -19853,7 +20752,7 @@ function OhhwellsBridge() {
|
|
|
19853
20752
|
}, []);
|
|
19854
20753
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
19855
20754
|
isEditModeRef.current = isEditMode;
|
|
19856
|
-
const changeSocialsDisplay = (0,
|
|
20755
|
+
const changeSocialsDisplay = (0, import_react19.useCallback)(
|
|
19857
20756
|
(row, next) => {
|
|
19858
20757
|
if (next.icon) {
|
|
19859
20758
|
const missing = socialsMissingIcons(row);
|
|
@@ -19877,17 +20776,17 @@ function OhhwellsBridge() {
|
|
|
19877
20776
|
},
|
|
19878
20777
|
[]
|
|
19879
20778
|
);
|
|
19880
|
-
const closeFloatingPanelOnly = (0,
|
|
20779
|
+
const closeFloatingPanelOnly = (0, import_react19.useCallback)(() => {
|
|
19881
20780
|
setFloatingPanel(null);
|
|
19882
20781
|
setLogoSizeDraft(null);
|
|
19883
20782
|
}, []);
|
|
19884
20783
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19885
|
-
const closeFloatingPanelAndDeselect = (0,
|
|
20784
|
+
const closeFloatingPanelAndDeselect = (0, import_react19.useCallback)(() => {
|
|
19886
20785
|
setFloatingPanel(null);
|
|
19887
20786
|
setLogoSizeDraft(null);
|
|
19888
20787
|
deselectRef.current();
|
|
19889
20788
|
}, []);
|
|
19890
|
-
(0,
|
|
20789
|
+
(0, import_react19.useEffect)(() => {
|
|
19891
20790
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
19892
20791
|
if (!session || !logoSizeDraft) {
|
|
19893
20792
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -19906,7 +20805,7 @@ function OhhwellsBridge() {
|
|
|
19906
20805
|
max: LOGO_SIZE_MAX
|
|
19907
20806
|
});
|
|
19908
20807
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
19909
|
-
const persistLogoSizeDraft = (0,
|
|
20808
|
+
const persistLogoSizeDraft = (0, import_react19.useCallback)(
|
|
19910
20809
|
(placement, draft) => {
|
|
19911
20810
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
19912
20811
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -19946,7 +20845,7 @@ function OhhwellsBridge() {
|
|
|
19946
20845
|
},
|
|
19947
20846
|
[postToParent2]
|
|
19948
20847
|
);
|
|
19949
|
-
const activate = (0,
|
|
20848
|
+
const activate = (0, import_react19.useCallback)((el, options) => {
|
|
19950
20849
|
if (activeElRef.current === el) return;
|
|
19951
20850
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
19952
20851
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -20044,8 +20943,8 @@ function OhhwellsBridge() {
|
|
|
20044
20943
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
20045
20944
|
deselectRef.current = deselect;
|
|
20046
20945
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
20047
|
-
const lastSiteWideScopeRef = (0,
|
|
20048
|
-
(0,
|
|
20946
|
+
const lastSiteWideScopeRef = (0, import_react19.useRef)(null);
|
|
20947
|
+
(0, import_react19.useEffect)(() => {
|
|
20049
20948
|
if (!isEditMode) {
|
|
20050
20949
|
if (lastSiteWideScopeRef.current !== false) {
|
|
20051
20950
|
lastSiteWideScopeRef.current = false;
|
|
@@ -20071,7 +20970,7 @@ function OhhwellsBridge() {
|
|
|
20071
20970
|
isFooterFrameSelection,
|
|
20072
20971
|
postToParent2
|
|
20073
20972
|
]);
|
|
20074
|
-
(0,
|
|
20973
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
20075
20974
|
if (!subdomain || isEditMode) {
|
|
20076
20975
|
setFetchState("done");
|
|
20077
20976
|
return;
|
|
@@ -20190,7 +21089,7 @@ function OhhwellsBridge() {
|
|
|
20190
21089
|
cancelled = true;
|
|
20191
21090
|
};
|
|
20192
21091
|
}, [subdomain, isEditMode]);
|
|
20193
|
-
(0,
|
|
21092
|
+
(0, import_react19.useEffect)(() => {
|
|
20194
21093
|
if (!isEditMode) return;
|
|
20195
21094
|
const resolveIndex = (form, clientY) => {
|
|
20196
21095
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -20231,7 +21130,7 @@ function OhhwellsBridge() {
|
|
|
20231
21130
|
window.removeEventListener("drop", onDrop, true);
|
|
20232
21131
|
};
|
|
20233
21132
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
20234
|
-
(0,
|
|
21133
|
+
(0, import_react19.useEffect)(() => {
|
|
20235
21134
|
if (!isEditMode) return;
|
|
20236
21135
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
20237
21136
|
markFormFields(form);
|
|
@@ -20243,7 +21142,7 @@ function OhhwellsBridge() {
|
|
|
20243
21142
|
});
|
|
20244
21143
|
return () => observer.disconnect();
|
|
20245
21144
|
}, [isEditMode, fetchState, pathname]);
|
|
20246
|
-
(0,
|
|
21145
|
+
(0, import_react19.useEffect)(() => {
|
|
20247
21146
|
if (!isEditMode) return;
|
|
20248
21147
|
let saveTimer = null;
|
|
20249
21148
|
const onInput = (e) => {
|
|
@@ -20265,14 +21164,14 @@ function OhhwellsBridge() {
|
|
|
20265
21164
|
document.addEventListener("input", onInput, true);
|
|
20266
21165
|
return () => document.removeEventListener("input", onInput, true);
|
|
20267
21166
|
}, [isEditMode, persistFields]);
|
|
20268
|
-
(0,
|
|
21167
|
+
(0, import_react19.useEffect)(() => {
|
|
20269
21168
|
if (isEditMode || fetchState !== "done") return;
|
|
20270
21169
|
const content = contentCache.get(subdomain) ?? {};
|
|
20271
21170
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
20272
21171
|
reconcileFieldsFromContent(form, content);
|
|
20273
21172
|
});
|
|
20274
21173
|
}, [isEditMode, fetchState, subdomain]);
|
|
20275
|
-
(0,
|
|
21174
|
+
(0, import_react19.useEffect)(() => {
|
|
20276
21175
|
if (!isEditMode) return;
|
|
20277
21176
|
const swallow = (e) => {
|
|
20278
21177
|
const target = e.target;
|
|
@@ -20281,14 +21180,14 @@ function OhhwellsBridge() {
|
|
|
20281
21180
|
document.addEventListener("submit", swallow, true);
|
|
20282
21181
|
return () => document.removeEventListener("submit", swallow, true);
|
|
20283
21182
|
}, [isEditMode]);
|
|
20284
|
-
(0,
|
|
21183
|
+
(0, import_react19.useEffect)(() => {
|
|
20285
21184
|
if (isEditMode || fetchState !== "done") return;
|
|
20286
21185
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
20287
21186
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
20288
21187
|
console.log({ apiUrl, subdomain });
|
|
20289
21188
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
20290
21189
|
}, [isEditMode, fetchState, subdomain]);
|
|
20291
|
-
(0,
|
|
21190
|
+
(0, import_react19.useEffect)(() => {
|
|
20292
21191
|
if (!subdomain || isEditMode) return;
|
|
20293
21192
|
let debounceTimer = null;
|
|
20294
21193
|
let observer = null;
|
|
@@ -20377,16 +21276,16 @@ function OhhwellsBridge() {
|
|
|
20377
21276
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
20378
21277
|
};
|
|
20379
21278
|
}, [subdomain, isEditMode, pathname]);
|
|
20380
|
-
(0,
|
|
21279
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
20381
21280
|
const el = document.getElementById("ohw-loader");
|
|
20382
21281
|
if (!el) return;
|
|
20383
21282
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
20384
21283
|
el.style.display = visible ? "flex" : "none";
|
|
20385
21284
|
}, [subdomain, fetchState]);
|
|
20386
|
-
(0,
|
|
21285
|
+
(0, import_react19.useEffect)(() => {
|
|
20387
21286
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
20388
21287
|
}, [pathname, postToParent2]);
|
|
20389
|
-
(0,
|
|
21288
|
+
(0, import_react19.useEffect)(() => {
|
|
20390
21289
|
if (!subdomain || isEditMode) return;
|
|
20391
21290
|
const content = contentCache.get(subdomain);
|
|
20392
21291
|
if (!content) return;
|
|
@@ -20402,7 +21301,7 @@ function OhhwellsBridge() {
|
|
|
20402
21301
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
20403
21302
|
}
|
|
20404
21303
|
}, [pathname, subdomain, isEditMode]);
|
|
20405
|
-
(0,
|
|
21304
|
+
(0, import_react19.useEffect)(() => {
|
|
20406
21305
|
if (!isEditMode) return;
|
|
20407
21306
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
20408
21307
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -20410,11 +21309,11 @@ function OhhwellsBridge() {
|
|
|
20410
21309
|
deselectRef.current();
|
|
20411
21310
|
deactivateRef.current();
|
|
20412
21311
|
}, [pathname, isEditMode]);
|
|
20413
|
-
(0,
|
|
21312
|
+
(0, import_react19.useEffect)(() => {
|
|
20414
21313
|
if (!isEditMode) return;
|
|
20415
21314
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
20416
21315
|
}, [pathname, isEditMode]);
|
|
20417
|
-
(0,
|
|
21316
|
+
(0, import_react19.useEffect)(() => {
|
|
20418
21317
|
if (!isEditMode) return;
|
|
20419
21318
|
const observer = new MutationObserver(() => {
|
|
20420
21319
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -20425,7 +21324,7 @@ function OhhwellsBridge() {
|
|
|
20425
21324
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
20426
21325
|
return () => observer.disconnect();
|
|
20427
21326
|
}, [isEditMode, pathname]);
|
|
20428
|
-
(0,
|
|
21327
|
+
(0, import_react19.useEffect)(() => {
|
|
20429
21328
|
const contentForNav = () => {
|
|
20430
21329
|
if (isEditMode) return editContentRef.current;
|
|
20431
21330
|
if (!subdomain) return {};
|
|
@@ -20494,7 +21393,7 @@ function OhhwellsBridge() {
|
|
|
20494
21393
|
observer?.disconnect();
|
|
20495
21394
|
};
|
|
20496
21395
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
20497
|
-
(0,
|
|
21396
|
+
(0, import_react19.useEffect)(() => {
|
|
20498
21397
|
if (!isEditMode) return;
|
|
20499
21398
|
let lastPosted = 0;
|
|
20500
21399
|
const measure = () => {
|
|
@@ -20538,7 +21437,7 @@ function OhhwellsBridge() {
|
|
|
20538
21437
|
window.removeEventListener("resize", handleResize);
|
|
20539
21438
|
};
|
|
20540
21439
|
}, [pathname, isEditMode, postToParent2]);
|
|
20541
|
-
(0,
|
|
21440
|
+
(0, import_react19.useEffect)(() => {
|
|
20542
21441
|
if (!subdomainFromQuery || isEditMode) return;
|
|
20543
21442
|
const handleClick = (e) => {
|
|
20544
21443
|
const anchor = e.target.closest("a");
|
|
@@ -20554,7 +21453,7 @@ function OhhwellsBridge() {
|
|
|
20554
21453
|
document.addEventListener("click", handleClick, true);
|
|
20555
21454
|
return () => document.removeEventListener("click", handleClick, true);
|
|
20556
21455
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
20557
|
-
(0,
|
|
21456
|
+
(0, import_react19.useEffect)(() => {
|
|
20558
21457
|
if (!isEditMode) {
|
|
20559
21458
|
editStylesRef.current?.base.remove();
|
|
20560
21459
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -20780,11 +21679,11 @@ function OhhwellsBridge() {
|
|
|
20780
21679
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
20781
21680
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
20782
21681
|
outline: none !important;
|
|
20783
|
-
caret-color: ${
|
|
21682
|
+
caret-color: ${PRIMARY5} !important;
|
|
20784
21683
|
cursor: text !important;
|
|
20785
21684
|
}
|
|
20786
21685
|
[data-ohw-editable][contenteditable]::selection,
|
|
20787
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
21686
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY5}59 !important; }
|
|
20788
21687
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
20789
21688
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
20790
21689
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -22564,6 +23463,7 @@ function OhhwellsBridge() {
|
|
|
22564
23463
|
deselectRef.current();
|
|
22565
23464
|
clearMediaSelectionRef.current();
|
|
22566
23465
|
};
|
|
23466
|
+
clearInteractionChromeRef.current = clearInteractionChrome;
|
|
22567
23467
|
const applyTreeToLocalState = (payload) => {
|
|
22568
23468
|
clearInteractionChrome();
|
|
22569
23469
|
const previous = aiSectionsRef.current;
|
|
@@ -23618,7 +24518,7 @@ function OhhwellsBridge() {
|
|
|
23618
24518
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
23619
24519
|
};
|
|
23620
24520
|
}, [isEditMode, refreshStateRules]);
|
|
23621
|
-
(0,
|
|
24521
|
+
(0, import_react19.useEffect)(() => {
|
|
23622
24522
|
if (!isEditMode) return;
|
|
23623
24523
|
const THRESHOLD = 10;
|
|
23624
24524
|
const resolveWasSelected = (el) => {
|
|
@@ -23774,7 +24674,7 @@ function OhhwellsBridge() {
|
|
|
23774
24674
|
unlockFooterDragInteraction();
|
|
23775
24675
|
};
|
|
23776
24676
|
}, [isEditMode]);
|
|
23777
|
-
(0,
|
|
24677
|
+
(0, import_react19.useEffect)(() => {
|
|
23778
24678
|
const handler = (e) => {
|
|
23779
24679
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
23780
24680
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -23790,7 +24690,7 @@ function OhhwellsBridge() {
|
|
|
23790
24690
|
window.addEventListener("message", handler);
|
|
23791
24691
|
return () => window.removeEventListener("message", handler);
|
|
23792
24692
|
}, [processConfigRequest]);
|
|
23793
|
-
(0,
|
|
24693
|
+
(0, import_react19.useEffect)(() => {
|
|
23794
24694
|
if (!isEditMode) return;
|
|
23795
24695
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
23796
24696
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -23814,7 +24714,7 @@ function OhhwellsBridge() {
|
|
|
23814
24714
|
postToParent2({
|
|
23815
24715
|
type: "ow:ready",
|
|
23816
24716
|
version: "1",
|
|
23817
|
-
bridgeVersion: "0.1.
|
|
24717
|
+
bridgeVersion: "0.1.119",
|
|
23818
24718
|
path: pathname,
|
|
23819
24719
|
nodes: collectEditableNodes(editContentRef.current),
|
|
23820
24720
|
sections
|
|
@@ -23826,13 +24726,13 @@ function OhhwellsBridge() {
|
|
|
23826
24726
|
clearTimeout(timer);
|
|
23827
24727
|
};
|
|
23828
24728
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
23829
|
-
(0,
|
|
24729
|
+
(0, import_react19.useEffect)(() => {
|
|
23830
24730
|
scrollToHashSectionWhenReady();
|
|
23831
24731
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
23832
24732
|
window.addEventListener("hashchange", onHashChange);
|
|
23833
24733
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
23834
24734
|
}, [pathname]);
|
|
23835
|
-
const handleCommand = (0,
|
|
24735
|
+
const handleCommand = (0, import_react19.useCallback)((cmd) => {
|
|
23836
24736
|
const el = activeElRef.current;
|
|
23837
24737
|
const selBefore = window.getSelection();
|
|
23838
24738
|
let savedOffsets = null;
|
|
@@ -23868,7 +24768,7 @@ function OhhwellsBridge() {
|
|
|
23868
24768
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
23869
24769
|
refreshActiveCommandsRef.current();
|
|
23870
24770
|
}, []);
|
|
23871
|
-
(0,
|
|
24771
|
+
(0, import_react19.useEffect)(() => {
|
|
23872
24772
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23873
24773
|
if (!session || !logoSizeDraft) return;
|
|
23874
24774
|
const onPanelAction = (e) => {
|
|
@@ -23906,7 +24806,7 @@ function OhhwellsBridge() {
|
|
|
23906
24806
|
window.addEventListener("message", onPanelAction);
|
|
23907
24807
|
return () => window.removeEventListener("message", onPanelAction);
|
|
23908
24808
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
23909
|
-
const handleStateChange = (0,
|
|
24809
|
+
const handleStateChange = (0, import_react19.useCallback)((state) => {
|
|
23910
24810
|
if (!activeStateElRef.current) return;
|
|
23911
24811
|
const el = activeStateElRef.current;
|
|
23912
24812
|
if (state === "Default") {
|
|
@@ -23919,7 +24819,7 @@ function OhhwellsBridge() {
|
|
|
23919
24819
|
}
|
|
23920
24820
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
23921
24821
|
}, [deactivate]);
|
|
23922
|
-
const reselectAfterLinkPopover = (0,
|
|
24822
|
+
const reselectAfterLinkPopover = (0, import_react19.useCallback)(
|
|
23923
24823
|
(hrefKey) => {
|
|
23924
24824
|
requestAnimationFrame(() => {
|
|
23925
24825
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -23928,7 +24828,7 @@ function OhhwellsBridge() {
|
|
|
23928
24828
|
},
|
|
23929
24829
|
[resolveHrefKeyElement]
|
|
23930
24830
|
);
|
|
23931
|
-
const closeLinkPopover = (0,
|
|
24831
|
+
const closeLinkPopover = (0, import_react19.useCallback)(() => {
|
|
23932
24832
|
const session = linkPopoverSessionRef.current;
|
|
23933
24833
|
addNavAfterAnchorRef.current = null;
|
|
23934
24834
|
setLinkPopover(null);
|
|
@@ -23936,9 +24836,9 @@ function OhhwellsBridge() {
|
|
|
23936
24836
|
reselectAfterLinkPopover(session.key);
|
|
23937
24837
|
}
|
|
23938
24838
|
}, [reselectAfterLinkPopover]);
|
|
23939
|
-
const closeLinkPopoverRef = (0,
|
|
24839
|
+
const closeLinkPopoverRef = (0, import_react19.useRef)(closeLinkPopover);
|
|
23940
24840
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
23941
|
-
const openLinkPopoverForActive = (0,
|
|
24841
|
+
const openLinkPopoverForActive = (0, import_react19.useCallback)(() => {
|
|
23942
24842
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
23943
24843
|
if (!hrefCtx) return;
|
|
23944
24844
|
bumpLinkPopoverGrace();
|
|
@@ -23949,7 +24849,7 @@ function OhhwellsBridge() {
|
|
|
23949
24849
|
});
|
|
23950
24850
|
deactivate();
|
|
23951
24851
|
}, [deactivate]);
|
|
23952
|
-
const openLinkPopoverForSelected = (0,
|
|
24852
|
+
const openLinkPopoverForSelected = (0, import_react19.useCallback)(() => {
|
|
23953
24853
|
const anchor = selectedElRef.current;
|
|
23954
24854
|
if (!anchor) return;
|
|
23955
24855
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -23966,7 +24866,7 @@ function OhhwellsBridge() {
|
|
|
23966
24866
|
});
|
|
23967
24867
|
deselect();
|
|
23968
24868
|
}, [deselect]);
|
|
23969
|
-
const handleSelectParent = (0,
|
|
24869
|
+
const handleSelectParent = (0, import_react19.useCallback)(() => {
|
|
23970
24870
|
const selected = selectedElRef.current;
|
|
23971
24871
|
if (!selected) return;
|
|
23972
24872
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -23993,7 +24893,7 @@ function OhhwellsBridge() {
|
|
|
23993
24893
|
}
|
|
23994
24894
|
deselectRef.current();
|
|
23995
24895
|
}, []);
|
|
23996
|
-
const handleDuplicateSelected = (0,
|
|
24896
|
+
const handleDuplicateSelected = (0, import_react19.useCallback)(() => {
|
|
23997
24897
|
const selected = selectedElRef.current;
|
|
23998
24898
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
23999
24899
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
@@ -24126,7 +25026,7 @@ function OhhwellsBridge() {
|
|
|
24126
25026
|
});
|
|
24127
25027
|
}
|
|
24128
25028
|
}, [postToParent2]);
|
|
24129
|
-
const runPendingDeleteUndo = (0,
|
|
25029
|
+
const runPendingDeleteUndo = (0, import_react19.useCallback)(() => {
|
|
24130
25030
|
const pending = pendingDeleteUndoRef.current;
|
|
24131
25031
|
if (!pending) return false;
|
|
24132
25032
|
pendingDeleteUndoRef.current = null;
|
|
@@ -24134,7 +25034,7 @@ function OhhwellsBridge() {
|
|
|
24134
25034
|
enforceLinkHrefs();
|
|
24135
25035
|
return true;
|
|
24136
25036
|
}, []);
|
|
24137
|
-
const handleDeleteSelected = (0,
|
|
25037
|
+
const handleDeleteSelected = (0, import_react19.useCallback)(() => {
|
|
24138
25038
|
const selected = selectedElRef.current;
|
|
24139
25039
|
if (!selected) return false;
|
|
24140
25040
|
return deleteSelectedNavFooterItem({
|
|
@@ -24155,7 +25055,7 @@ function OhhwellsBridge() {
|
|
|
24155
25055
|
}, [postToParent2]);
|
|
24156
25056
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
24157
25057
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
24158
|
-
const handleLinkPopoverSubmit = (0,
|
|
25058
|
+
const handleLinkPopoverSubmit = (0, import_react19.useCallback)(
|
|
24159
25059
|
(target) => {
|
|
24160
25060
|
const session = linkPopoverSessionRef.current;
|
|
24161
25061
|
if (!session) return;
|
|
@@ -24221,14 +25121,14 @@ function OhhwellsBridge() {
|
|
|
24221
25121
|
const showEditLink = toolbarShowEditLink;
|
|
24222
25122
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
24223
25123
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
24224
|
-
const handleMediaSelect = (0,
|
|
25124
|
+
const handleMediaSelect = (0, import_react19.useCallback)((key) => {
|
|
24225
25125
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
24226
25126
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
24227
25127
|
) ?? null;
|
|
24228
25128
|
if (!el) return;
|
|
24229
25129
|
selectMediaElementRef.current(el);
|
|
24230
25130
|
}, []);
|
|
24231
|
-
const handleMediaReplace = (0,
|
|
25131
|
+
const handleMediaReplace = (0, import_react19.useCallback)(
|
|
24232
25132
|
(key) => {
|
|
24233
25133
|
postToParent2({
|
|
24234
25134
|
type: "ow:image-pick",
|
|
@@ -24238,13 +25138,13 @@ function OhhwellsBridge() {
|
|
|
24238
25138
|
},
|
|
24239
25139
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
24240
25140
|
);
|
|
24241
|
-
const handleEditCarousel = (0,
|
|
25141
|
+
const handleEditCarousel = (0, import_react19.useCallback)(
|
|
24242
25142
|
(key) => {
|
|
24243
25143
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
24244
25144
|
},
|
|
24245
25145
|
[postToParent2]
|
|
24246
25146
|
);
|
|
24247
|
-
const handleMediaFadeOutComplete = (0,
|
|
25147
|
+
const handleMediaFadeOutComplete = (0, import_react19.useCallback)((key) => {
|
|
24248
25148
|
setUploadingRects((prev) => {
|
|
24249
25149
|
if (!(key in prev)) return prev;
|
|
24250
25150
|
const next = { ...prev };
|
|
@@ -24252,7 +25152,7 @@ function OhhwellsBridge() {
|
|
|
24252
25152
|
return next;
|
|
24253
25153
|
});
|
|
24254
25154
|
}, []);
|
|
24255
|
-
const handleVideoSettingsChange = (0,
|
|
25155
|
+
const handleVideoSettingsChange = (0, import_react19.useCallback)(
|
|
24256
25156
|
(key, settings) => {
|
|
24257
25157
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
24258
25158
|
const video = getVideoEl2(el);
|
|
@@ -24274,14 +25174,14 @@ function OhhwellsBridge() {
|
|
|
24274
25174
|
},
|
|
24275
25175
|
[postToParent2]
|
|
24276
25176
|
);
|
|
24277
|
-
return /* @__PURE__ */ (0,
|
|
24278
|
-
/* @__PURE__ */ (0,
|
|
24279
|
-
/* @__PURE__ */ (0,
|
|
24280
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0,
|
|
25177
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
25178
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OhwLoaderSpinner, {}) }),
|
|
25179
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
25180
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MadeWithOhhWells, {}),
|
|
24281
25181
|
bridgeRoot ? (0, import_react_dom5.createPortal)(
|
|
24282
|
-
/* @__PURE__ */ (0,
|
|
24283
|
-
/* @__PURE__ */ (0,
|
|
24284
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
25182
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
25183
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
25184
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24285
25185
|
AiSectionOverlay,
|
|
24286
25186
|
{
|
|
24287
25187
|
postToParent: postToParent2,
|
|
@@ -24289,7 +25189,16 @@ function OhhwellsBridge() {
|
|
|
24289
25189
|
onSelectionChange: handleAiSectionSelectionChange
|
|
24290
25190
|
}
|
|
24291
25191
|
),
|
|
24292
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
25192
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
25193
|
+
AiMediaStripOverlay,
|
|
25194
|
+
{
|
|
25195
|
+
postToParent: postToParent2,
|
|
25196
|
+
aiSectionsRef,
|
|
25197
|
+
applyTreeLocalRef,
|
|
25198
|
+
clearInteractionChromeRef
|
|
25199
|
+
}
|
|
25200
|
+
),
|
|
25201
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24293
25202
|
AiPricingCardOverlay,
|
|
24294
25203
|
{
|
|
24295
25204
|
postToParent: postToParent2,
|
|
@@ -24297,12 +25206,12 @@ function OhhwellsBridge() {
|
|
|
24297
25206
|
applyTreeLocalRef
|
|
24298
25207
|
}
|
|
24299
25208
|
),
|
|
24300
|
-
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
25209
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24301
25210
|
"div",
|
|
24302
25211
|
{
|
|
24303
25212
|
className: "pointer-events-none fixed z-2147483646",
|
|
24304
25213
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
24305
|
-
children: /* @__PURE__ */ (0,
|
|
25214
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24306
25215
|
DropIndicator,
|
|
24307
25216
|
{
|
|
24308
25217
|
direction: "horizontal",
|
|
@@ -24313,7 +25222,7 @@ function OhhwellsBridge() {
|
|
|
24313
25222
|
},
|
|
24314
25223
|
`section-drop-${slot.insertIndex}-${i}`
|
|
24315
25224
|
)),
|
|
24316
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
25225
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24317
25226
|
MediaOverlay,
|
|
24318
25227
|
{
|
|
24319
25228
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -24324,7 +25233,7 @@ function OhhwellsBridge() {
|
|
|
24324
25233
|
},
|
|
24325
25234
|
`uploading-${key}`
|
|
24326
25235
|
)),
|
|
24327
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0,
|
|
25236
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24328
25237
|
MediaOverlay,
|
|
24329
25238
|
{
|
|
24330
25239
|
hover: mediaHover,
|
|
@@ -24335,7 +25244,7 @@ function OhhwellsBridge() {
|
|
|
24335
25244
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
24336
25245
|
}
|
|
24337
25246
|
),
|
|
24338
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0,
|
|
25247
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24339
25248
|
MediaOverlay,
|
|
24340
25249
|
{
|
|
24341
25250
|
hover: selectedMedia,
|
|
@@ -24347,7 +25256,7 @@ function OhhwellsBridge() {
|
|
|
24347
25256
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
24348
25257
|
}
|
|
24349
25258
|
),
|
|
24350
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
25259
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24351
25260
|
CarouselOverlay,
|
|
24352
25261
|
{
|
|
24353
25262
|
hover: carouselHover,
|
|
@@ -24355,10 +25264,10 @@ function OhhwellsBridge() {
|
|
|
24355
25264
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
24356
25265
|
}
|
|
24357
25266
|
),
|
|
24358
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
24359
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
24360
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0,
|
|
24361
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
25267
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
25268
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
25269
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
25270
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24362
25271
|
"div",
|
|
24363
25272
|
{
|
|
24364
25273
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -24368,7 +25277,7 @@ function OhhwellsBridge() {
|
|
|
24368
25277
|
width: slot.width,
|
|
24369
25278
|
height: slot.height
|
|
24370
25279
|
},
|
|
24371
|
-
children: /* @__PURE__ */ (0,
|
|
25280
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24372
25281
|
DropIndicator,
|
|
24373
25282
|
{
|
|
24374
25283
|
direction: slot.direction,
|
|
@@ -24379,7 +25288,7 @@ function OhhwellsBridge() {
|
|
|
24379
25288
|
},
|
|
24380
25289
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
24381
25290
|
)),
|
|
24382
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
25291
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24383
25292
|
"div",
|
|
24384
25293
|
{
|
|
24385
25294
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -24389,7 +25298,7 @@ function OhhwellsBridge() {
|
|
|
24389
25298
|
width: slot.width,
|
|
24390
25299
|
height: slot.height
|
|
24391
25300
|
},
|
|
24392
|
-
children: /* @__PURE__ */ (0,
|
|
25301
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24393
25302
|
DropIndicator,
|
|
24394
25303
|
{
|
|
24395
25304
|
direction: slot.direction,
|
|
@@ -24400,10 +25309,10 @@ function OhhwellsBridge() {
|
|
|
24400
25309
|
},
|
|
24401
25310
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
24402
25311
|
)),
|
|
24403
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
24404
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
24405
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
24406
|
-
formPickRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
25312
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
25313
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
25314
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
25315
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24407
25316
|
ItemInteractionLayer,
|
|
24408
25317
|
{
|
|
24409
25318
|
rect: formPickRect,
|
|
@@ -24411,13 +25320,13 @@ function OhhwellsBridge() {
|
|
|
24411
25320
|
itemDragSurface: false,
|
|
24412
25321
|
toolbarAlign: "left",
|
|
24413
25322
|
chromeGap: 24,
|
|
24414
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0,
|
|
25323
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
24415
25324
|
"div",
|
|
24416
25325
|
{
|
|
24417
25326
|
"data-ohw-form-toolbar": "",
|
|
24418
25327
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
24419
25328
|
children: [
|
|
24420
|
-
/* @__PURE__ */ (0,
|
|
25329
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24421
25330
|
"button",
|
|
24422
25331
|
{
|
|
24423
25332
|
type: "button",
|
|
@@ -24425,11 +25334,11 @@ function OhhwellsBridge() {
|
|
|
24425
25334
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
24426
25335
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
24427
25336
|
"data-ohw-add-field": "",
|
|
24428
|
-
children: /* @__PURE__ */ (0,
|
|
25337
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Plus, { size: 15, "aria-hidden": true })
|
|
24429
25338
|
}
|
|
24430
25339
|
),
|
|
24431
|
-
/* @__PURE__ */ (0,
|
|
24432
|
-
/* @__PURE__ */ (0,
|
|
25340
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
25341
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
24433
25342
|
"button",
|
|
24434
25343
|
{
|
|
24435
25344
|
type: "button",
|
|
@@ -24445,11 +25354,11 @@ function OhhwellsBridge() {
|
|
|
24445
25354
|
});
|
|
24446
25355
|
},
|
|
24447
25356
|
children: [
|
|
24448
|
-
/* @__PURE__ */ (0,
|
|
25357
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Settings, { size: 14, "aria-hidden": true }),
|
|
24449
25358
|
"Form settings",
|
|
24450
25359
|
formPickCount ? (
|
|
24451
25360
|
// Counter pill, per the design — not a text suffix.
|
|
24452
|
-
/* @__PURE__ */ (0,
|
|
25361
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24453
25362
|
"span",
|
|
24454
25363
|
{
|
|
24455
25364
|
"data-ohw-form-count": "",
|
|
@@ -24461,8 +25370,8 @@ function OhhwellsBridge() {
|
|
|
24461
25370
|
]
|
|
24462
25371
|
}
|
|
24463
25372
|
),
|
|
24464
|
-
/* @__PURE__ */ (0,
|
|
24465
|
-
/* @__PURE__ */ (0,
|
|
25373
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
25374
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24466
25375
|
"button",
|
|
24467
25376
|
{
|
|
24468
25377
|
type: "button",
|
|
@@ -24493,7 +25402,7 @@ function OhhwellsBridge() {
|
|
|
24493
25402
|
)
|
|
24494
25403
|
}
|
|
24495
25404
|
),
|
|
24496
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
25405
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24497
25406
|
ItemInteractionLayer,
|
|
24498
25407
|
{
|
|
24499
25408
|
rect: formHoverRect,
|
|
@@ -24501,7 +25410,7 @@ function OhhwellsBridge() {
|
|
|
24501
25410
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
24502
25411
|
}
|
|
24503
25412
|
),
|
|
24504
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
25413
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24505
25414
|
ItemInteractionLayer,
|
|
24506
25415
|
{
|
|
24507
25416
|
rect: fieldPickRect,
|
|
@@ -24513,7 +25422,7 @@ function OhhwellsBridge() {
|
|
|
24513
25422
|
dragHandleLabel: "Reorder field",
|
|
24514
25423
|
onDragHandleDragStart: handleFieldDragStart,
|
|
24515
25424
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
24516
|
-
toolbar: /* @__PURE__ */ (0,
|
|
25425
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24517
25426
|
FormFieldToolbar,
|
|
24518
25427
|
{
|
|
24519
25428
|
type: fieldPickState.type,
|
|
@@ -24526,12 +25435,12 @@ function OhhwellsBridge() {
|
|
|
24526
25435
|
)
|
|
24527
25436
|
}
|
|
24528
25437
|
),
|
|
24529
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
25438
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24530
25439
|
"div",
|
|
24531
25440
|
{
|
|
24532
25441
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
24533
25442
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
24534
|
-
children: /* @__PURE__ */ (0,
|
|
25443
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24535
25444
|
DropIndicator,
|
|
24536
25445
|
{
|
|
24537
25446
|
direction: "horizontal",
|
|
@@ -24544,7 +25453,7 @@ function OhhwellsBridge() {
|
|
|
24544
25453
|
)) : null,
|
|
24545
25454
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
24546
25455
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
24547
|
-
return /* @__PURE__ */ (0,
|
|
25456
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24548
25457
|
"div",
|
|
24549
25458
|
{
|
|
24550
25459
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -24552,12 +25461,12 @@ function OhhwellsBridge() {
|
|
|
24552
25461
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
24553
25462
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
24554
25463
|
},
|
|
24555
|
-
children: /* @__PURE__ */ (0,
|
|
25464
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FieldTypePicker, { onPick: handleAddField })
|
|
24556
25465
|
}
|
|
24557
25466
|
);
|
|
24558
25467
|
})() : null,
|
|
24559
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
24560
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
25468
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
25469
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24561
25470
|
FooterContainerChrome,
|
|
24562
25471
|
{
|
|
24563
25472
|
rect: toolbarRect,
|
|
@@ -24565,7 +25474,7 @@ function OhhwellsBridge() {
|
|
|
24565
25474
|
addDisabled: !canAddFooterColumn()
|
|
24566
25475
|
}
|
|
24567
25476
|
),
|
|
24568
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0,
|
|
25477
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24569
25478
|
ItemInteractionLayer,
|
|
24570
25479
|
{
|
|
24571
25480
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -24581,7 +25490,7 @@ function OhhwellsBridge() {
|
|
|
24581
25490
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
24582
25491
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
24583
25492
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
24584
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0,
|
|
25493
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24585
25494
|
ItemActionToolbar,
|
|
24586
25495
|
{
|
|
24587
25496
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -24625,8 +25534,8 @@ function OhhwellsBridge() {
|
|
|
24625
25534
|
) : void 0
|
|
24626
25535
|
}
|
|
24627
25536
|
),
|
|
24628
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0,
|
|
24629
|
-
/* @__PURE__ */ (0,
|
|
25537
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
25538
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24630
25539
|
EditGlowChrome,
|
|
24631
25540
|
{
|
|
24632
25541
|
rect: toolbarRect,
|
|
@@ -24636,7 +25545,7 @@ function OhhwellsBridge() {
|
|
|
24636
25545
|
hideHandle: isItemDragging
|
|
24637
25546
|
}
|
|
24638
25547
|
),
|
|
24639
|
-
/* @__PURE__ */ (0,
|
|
25548
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24640
25549
|
FloatingToolbar,
|
|
24641
25550
|
{
|
|
24642
25551
|
rect: toolbarRect,
|
|
@@ -24649,7 +25558,7 @@ function OhhwellsBridge() {
|
|
|
24649
25558
|
}
|
|
24650
25559
|
)
|
|
24651
25560
|
] }),
|
|
24652
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
25561
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
24653
25562
|
"div",
|
|
24654
25563
|
{
|
|
24655
25564
|
"data-ohw-max-badge": "",
|
|
@@ -24675,7 +25584,7 @@ function OhhwellsBridge() {
|
|
|
24675
25584
|
]
|
|
24676
25585
|
}
|
|
24677
25586
|
),
|
|
24678
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
25587
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24679
25588
|
StateToggle,
|
|
24680
25589
|
{
|
|
24681
25590
|
rect: toggleState.rect,
|
|
@@ -24684,15 +25593,15 @@ function OhhwellsBridge() {
|
|
|
24684
25593
|
onStateChange: handleStateChange
|
|
24685
25594
|
}
|
|
24686
25595
|
),
|
|
24687
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
25596
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
24688
25597
|
"div",
|
|
24689
25598
|
{
|
|
24690
25599
|
"data-ohw-section-insert-line": "",
|
|
24691
25600
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
24692
25601
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
24693
25602
|
children: [
|
|
24694
|
-
/* @__PURE__ */ (0,
|
|
24695
|
-
/* @__PURE__ */ (0,
|
|
25603
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
25604
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24696
25605
|
Badge,
|
|
24697
25606
|
{
|
|
24698
25607
|
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",
|
|
@@ -24709,11 +25618,11 @@ function OhhwellsBridge() {
|
|
|
24709
25618
|
children: "Add Section"
|
|
24710
25619
|
}
|
|
24711
25620
|
),
|
|
24712
|
-
/* @__PURE__ */ (0,
|
|
25621
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
24713
25622
|
]
|
|
24714
25623
|
}
|
|
24715
25624
|
),
|
|
24716
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
25625
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24717
25626
|
LinkPopover,
|
|
24718
25627
|
{
|
|
24719
25628
|
panelRef: linkPopoverPanelRef,
|
|
@@ -24730,7 +25639,7 @@ function OhhwellsBridge() {
|
|
|
24730
25639
|
},
|
|
24731
25640
|
linkPopover.key
|
|
24732
25641
|
) : null,
|
|
24733
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0,
|
|
25642
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24734
25643
|
FloatingPanel,
|
|
24735
25644
|
{
|
|
24736
25645
|
open: true,
|
|
@@ -24740,7 +25649,7 @@ function OhhwellsBridge() {
|
|
|
24740
25649
|
onPositionChange: setFloatingPanelPos,
|
|
24741
25650
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
24742
25651
|
onClose: closeFloatingPanelOnly,
|
|
24743
|
-
children: /* @__PURE__ */ (0,
|
|
25652
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24744
25653
|
SocialsDisplayPanel,
|
|
24745
25654
|
{
|
|
24746
25655
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|