@ohhwells/bridge 0.1.117-next.320 → 0.1.117-next.323
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 +780 -1237
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +725 -1182
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -75,7 +75,7 @@ __export(index_exports, {
|
|
|
75
75
|
module.exports = __toCommonJS(index_exports);
|
|
76
76
|
|
|
77
77
|
// src/OhhwellsBridge.tsx
|
|
78
|
-
var
|
|
78
|
+
var import_react18 = __toESM(require("react"), 1);
|
|
79
79
|
var import_client2 = require("react-dom/client");
|
|
80
80
|
var import_react_dom4 = require("react-dom");
|
|
81
81
|
|
|
@@ -1624,14 +1624,15 @@ function MediaBox({
|
|
|
1624
1624
|
alt,
|
|
1625
1625
|
fit,
|
|
1626
1626
|
grayscale,
|
|
1627
|
-
fixedSize
|
|
1627
|
+
fixedSize,
|
|
1628
|
+
genericImageEdit = true
|
|
1628
1629
|
}) {
|
|
1629
1630
|
const url = refValue ? ctx.resolveMedia(refValue) : null;
|
|
1630
1631
|
const isIcon = /^(lucide|simple):/.test(refValue);
|
|
1631
1632
|
const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
|
|
1632
1633
|
const editAttrs = ctx.keyFor && editPath ? {
|
|
1633
1634
|
"data-ohw-key": ctx.keyFor(editPath),
|
|
1634
|
-
"data-ohw-editable":
|
|
1635
|
+
...isIcon ? { "data-ohw-editable": "icon" } : genericImageEdit ? { "data-ohw-editable": "image" } : {}
|
|
1635
1636
|
} : {};
|
|
1636
1637
|
if (isIcon) {
|
|
1637
1638
|
const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
|
|
@@ -2449,7 +2450,8 @@ function MediaStripBlock({ node, ctx, path }) {
|
|
|
2449
2450
|
alt: item.alt,
|
|
2450
2451
|
fit: variant === "logos" ? "contain" : "cover",
|
|
2451
2452
|
grayscale: treatment === "grayscale",
|
|
2452
|
-
fixedSize: variant === "logos"
|
|
2453
|
+
fixedSize: variant === "logos",
|
|
2454
|
+
genericImageEdit: false
|
|
2453
2455
|
}
|
|
2454
2456
|
)
|
|
2455
2457
|
}
|
|
@@ -8502,8 +8504,15 @@ function ItemInteractionLayer({
|
|
|
8502
8504
|
itemDragSurface = true,
|
|
8503
8505
|
chromeGap,
|
|
8504
8506
|
toolbarAlign = "center",
|
|
8507
|
+
hidden = false,
|
|
8505
8508
|
className
|
|
8506
8509
|
}) {
|
|
8510
|
+
const localRef = (0, import_react7.useRef)(null);
|
|
8511
|
+
(0, import_react7.useLayoutEffect)(() => {
|
|
8512
|
+
const node = localRef.current;
|
|
8513
|
+
if (!node) return;
|
|
8514
|
+
node.style.display = hidden ? "none" : "block";
|
|
8515
|
+
}, [hidden, rect.top, rect.left, rect.width, rect.height, state]);
|
|
8507
8516
|
if (state === "default") return null;
|
|
8508
8517
|
const gap = chromeGap ?? (state === "hover" ? HOVER_CHROME_GAP : SELECTION_CHROME_GAP);
|
|
8509
8518
|
const isActive = state === "active-top" || state === "active-bottom";
|
|
@@ -8512,10 +8521,15 @@ function ItemInteractionLayer({
|
|
|
8512
8521
|
const showDragHandle = (isActive || isDragging) && showHandle;
|
|
8513
8522
|
const itemDragEnabled = itemDragSurface && isActive && !isDragging && !dragDisabled && Boolean(showHandle || onItemPointerDown);
|
|
8514
8523
|
const useDetachedBelowToolbar = Boolean(showToolbar && state === "active-bottom" && toolbarBelowRect);
|
|
8524
|
+
const setRootRef = (node) => {
|
|
8525
|
+
localRef.current = node;
|
|
8526
|
+
if (typeof elRef === "function") elRef(node);
|
|
8527
|
+
else if (elRef) elRef.current = node;
|
|
8528
|
+
};
|
|
8515
8529
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
8516
8530
|
"div",
|
|
8517
8531
|
{
|
|
8518
|
-
ref:
|
|
8532
|
+
ref: setRootRef,
|
|
8519
8533
|
"data-ohw-item-interaction": "",
|
|
8520
8534
|
"data-ohw-item-interaction-state": state,
|
|
8521
8535
|
className: cn("pointer-events-none", className),
|
|
@@ -8525,7 +8539,8 @@ function ItemInteractionLayer({
|
|
|
8525
8539
|
left: rect.left - gap,
|
|
8526
8540
|
width: rect.width + gap * 2,
|
|
8527
8541
|
height: rect.height + gap * 2,
|
|
8528
|
-
zIndex: getChromeZIndex(state)
|
|
8542
|
+
zIndex: getChromeZIndex(state),
|
|
8543
|
+
display: hidden ? "none" : "block"
|
|
8529
8544
|
},
|
|
8530
8545
|
children: [
|
|
8531
8546
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
@@ -9995,546 +10010,38 @@ function AiSectionOverlay({
|
|
|
9995
10010
|
height: reviewRect.height,
|
|
9996
10011
|
border: `2px solid ${PRIMARY2}`,
|
|
9997
10012
|
borderRadius: edgeAwareRadius(reviewRect),
|
|
9998
|
-
pointerEvents: "none",
|
|
9999
|
-
zIndex: 2147483200
|
|
10000
|
-
}
|
|
10001
|
-
}
|
|
10002
|
-
),
|
|
10003
|
-
!reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
10004
|
-
"div",
|
|
10005
|
-
{
|
|
10006
|
-
style: {
|
|
10007
|
-
position: "fixed",
|
|
10008
|
-
top: reviewRect.top + 12,
|
|
10009
|
-
left: reviewRect.left,
|
|
10010
|
-
width: reviewRect.width,
|
|
10011
|
-
display: "flex",
|
|
10012
|
-
gap: 8,
|
|
10013
|
-
justifyContent: "flex-end",
|
|
10014
|
-
paddingRight: 12,
|
|
10015
|
-
zIndex: 2147483201
|
|
10016
|
-
},
|
|
10017
|
-
children: [
|
|
10018
|
-
/* @__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 }) }),
|
|
10019
|
-
/* @__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 }) })
|
|
10020
|
-
]
|
|
10021
|
-
}
|
|
10022
|
-
)
|
|
10023
|
-
] })
|
|
10024
|
-
] });
|
|
10025
|
-
}
|
|
10026
|
-
|
|
10027
|
-
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
10028
|
-
var import_react9 = require("react");
|
|
10029
|
-
var import_lucide_react8 = require("lucide-react");
|
|
10030
|
-
|
|
10031
|
-
// src/lib/ai-pricing-tree.ts
|
|
10032
|
-
var PRICING_MIN_CARDS = 1;
|
|
10033
|
-
var PRICING_MAX_CARDS = 4;
|
|
10034
|
-
function isPricingCard(node) {
|
|
10035
|
-
return typeof node === "object" && node !== null && node.type === "card" && node.slots?.preset === "pricing";
|
|
10036
|
-
}
|
|
10037
|
-
function isPricingCollection(node) {
|
|
10038
|
-
return node.type === "collection" && Array.isArray(node.children) && node.children.length > 0 && isPricingCard(node.children[0]);
|
|
10039
|
-
}
|
|
10040
|
-
function findCollection(node) {
|
|
10041
|
-
if (isPricingCollection(node)) return node;
|
|
10042
|
-
for (const child of node.children ?? []) {
|
|
10043
|
-
const found = findCollection(child);
|
|
10044
|
-
if (found) return found;
|
|
10045
|
-
}
|
|
10046
|
-
return null;
|
|
10047
|
-
}
|
|
10048
|
-
function findPricingCollection(tree) {
|
|
10049
|
-
for (const row of tree.rows ?? []) {
|
|
10050
|
-
for (const block of row.blocks ?? []) {
|
|
10051
|
-
const found = findCollection(block);
|
|
10052
|
-
if (found) return found;
|
|
10053
|
-
}
|
|
10054
|
-
}
|
|
10055
|
-
return null;
|
|
10056
|
-
}
|
|
10057
|
-
function pricingCardCount(tree) {
|
|
10058
|
-
return findPricingCollection(tree)?.children?.length ?? 0;
|
|
10059
|
-
}
|
|
10060
|
-
function withPricingCollection(tree, mutate) {
|
|
10061
|
-
const next = JSON.parse(JSON.stringify(tree));
|
|
10062
|
-
const collection = findPricingCollection(next);
|
|
10063
|
-
if (!collection || !collection.children) return null;
|
|
10064
|
-
return mutate(collection) ? next : null;
|
|
10065
|
-
}
|
|
10066
|
-
function addPricingTier(tree) {
|
|
10067
|
-
return withPricingCollection(tree, (collection) => {
|
|
10068
|
-
const children = collection.children;
|
|
10069
|
-
if (children.length >= PRICING_MAX_CARDS) return false;
|
|
10070
|
-
const clone = JSON.parse(JSON.stringify(children[children.length - 1]));
|
|
10071
|
-
clone.slots = clone.slots ?? {};
|
|
10072
|
-
delete clone.slots.featured;
|
|
10073
|
-
clone.slots.heading = "New tier";
|
|
10074
|
-
children.push(clone);
|
|
10075
|
-
collection.slots = { ...collection.slots, itemsPerRow: children.length };
|
|
10076
|
-
return true;
|
|
10077
|
-
});
|
|
10078
|
-
}
|
|
10079
|
-
function removePricingTier(tree, index) {
|
|
10080
|
-
return withPricingCollection(tree, (collection) => {
|
|
10081
|
-
const children = collection.children;
|
|
10082
|
-
if (children.length <= PRICING_MIN_CARDS) return false;
|
|
10083
|
-
if (index < 0 || index >= children.length) return false;
|
|
10084
|
-
children.splice(index, 1);
|
|
10085
|
-
collection.slots = { ...collection.slots, itemsPerRow: children.length };
|
|
10086
|
-
return true;
|
|
10087
|
-
});
|
|
10088
|
-
}
|
|
10089
|
-
function setPricingCardFeatured(tree, index, patch) {
|
|
10090
|
-
return withPricingCollection(tree, (collection) => {
|
|
10091
|
-
const children = collection.children;
|
|
10092
|
-
if (index < 0 || index >= children.length) return false;
|
|
10093
|
-
const target = children[index];
|
|
10094
|
-
target.slots = target.slots ?? {};
|
|
10095
|
-
target.slots.featured = { ...patch };
|
|
10096
|
-
return true;
|
|
10097
|
-
});
|
|
10098
|
-
}
|
|
10099
|
-
function addPricingCardButton(tree, index, label) {
|
|
10100
|
-
return withPricingCollection(tree, (collection) => {
|
|
10101
|
-
const children = collection.children;
|
|
10102
|
-
if (index < 0 || index >= children.length) return false;
|
|
10103
|
-
const target = children[index];
|
|
10104
|
-
const buttons = (target.children ?? []).filter((c) => c.type === "button");
|
|
10105
|
-
if (buttons.length >= 2) return false;
|
|
10106
|
-
const hasPrimary = buttons.some((b) => b.slots?.variant === "primary");
|
|
10107
|
-
target.children = [
|
|
10108
|
-
...target.children ?? [],
|
|
10109
|
-
{ type: "button", span: 12, slots: { label, href: "#", variant: hasPrimary ? "secondary" : "primary" } }
|
|
10110
|
-
];
|
|
10111
|
-
return true;
|
|
10112
|
-
});
|
|
10113
|
-
}
|
|
10114
|
-
function removePricingCardButton(tree, index) {
|
|
10115
|
-
return withPricingCollection(tree, (collection) => {
|
|
10116
|
-
const children = collection.children;
|
|
10117
|
-
if (index < 0 || index >= children.length) return false;
|
|
10118
|
-
const target = children[index];
|
|
10119
|
-
const buttons = (target.children ?? []).filter((c) => c.type === "button");
|
|
10120
|
-
if (buttons.length === 0) return false;
|
|
10121
|
-
const lastButton = buttons[buttons.length - 1];
|
|
10122
|
-
target.children = (target.children ?? []).filter((c) => c !== lastButton);
|
|
10123
|
-
return true;
|
|
10124
|
-
});
|
|
10125
|
-
}
|
|
10126
|
-
var PRICING_FEATURES_MIN = 1;
|
|
10127
|
-
var PRICING_FEATURES_MAX = 10;
|
|
10128
|
-
function pricingFeatureList(target) {
|
|
10129
|
-
const raw = target.slots?.features;
|
|
10130
|
-
if (Array.isArray(raw)) {
|
|
10131
|
-
return raw.filter((item) => !!item && typeof item === "object" && typeof item.text === "string").map((item) => ({
|
|
10132
|
-
text: item.text,
|
|
10133
|
-
...typeof item.icon === "string" ? { icon: item.icon } : {},
|
|
10134
|
-
...typeof item.iconColor === "string" ? { iconColor: item.iconColor } : {}
|
|
10135
|
-
}));
|
|
10136
|
-
}
|
|
10137
|
-
if (typeof raw === "string") {
|
|
10138
|
-
return raw.split("\n").map((line) => line.replace(/^[-*•]\s*/, "").trim()).filter(Boolean).map((text) => ({ text }));
|
|
10139
|
-
}
|
|
10140
|
-
return [];
|
|
10141
|
-
}
|
|
10142
|
-
function pricingCardFeatureCount(tree, index) {
|
|
10143
|
-
const target = findPricingCollection(tree)?.children?.[index];
|
|
10144
|
-
return target ? pricingFeatureList(target).length : 0;
|
|
10145
|
-
}
|
|
10146
|
-
function addPricingCardFeature(tree, index, text) {
|
|
10147
|
-
return withPricingCollection(tree, (collection) => {
|
|
10148
|
-
const children = collection.children;
|
|
10149
|
-
if (index < 0 || index >= children.length) return false;
|
|
10150
|
-
const target = children[index];
|
|
10151
|
-
const features = pricingFeatureList(target);
|
|
10152
|
-
if (features.length >= PRICING_FEATURES_MAX) return false;
|
|
10153
|
-
target.slots = target.slots ?? {};
|
|
10154
|
-
target.slots.features = [...features, { text }];
|
|
10155
|
-
return true;
|
|
10156
|
-
});
|
|
10157
|
-
}
|
|
10158
|
-
function removePricingCardFeature(tree, index) {
|
|
10159
|
-
return withPricingCollection(tree, (collection) => {
|
|
10160
|
-
const children = collection.children;
|
|
10161
|
-
if (index < 0 || index >= children.length) return false;
|
|
10162
|
-
const target = children[index];
|
|
10163
|
-
const features = pricingFeatureList(target);
|
|
10164
|
-
if (features.length <= PRICING_FEATURES_MIN) return false;
|
|
10165
|
-
target.slots = target.slots ?? {};
|
|
10166
|
-
target.slots.features = features.slice(0, -1);
|
|
10167
|
-
return true;
|
|
10168
|
-
});
|
|
10169
|
-
}
|
|
10170
|
-
|
|
10171
|
-
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
10172
|
-
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
10173
|
-
var EMPHASIS_TREATMENTS = [
|
|
10174
|
-
{ value: "outlined", label: "Outline" },
|
|
10175
|
-
{ value: "lifted", label: "Lift" },
|
|
10176
|
-
{ value: "inverted", label: "Invert" },
|
|
10177
|
-
{ value: "accent-header", label: "Header" }
|
|
10178
|
-
];
|
|
10179
|
-
var PRIMARY3 = "#0885FE";
|
|
10180
|
-
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
10181
|
-
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
10182
|
-
function findPricingCardElement(sectionId, index) {
|
|
10183
|
-
const sectionEl = findByInstanceId(sectionId);
|
|
10184
|
-
if (!sectionEl) return null;
|
|
10185
|
-
const cards = sectionEl.querySelectorAll("[data-ohw-pricing-card]");
|
|
10186
|
-
for (const el of Array.from(cards)) {
|
|
10187
|
-
if (Number(el.dataset.ohwPricingIndex) === index) return el;
|
|
10188
|
-
}
|
|
10189
|
-
return null;
|
|
10190
|
-
}
|
|
10191
|
-
function readRect2(ref) {
|
|
10192
|
-
const el = ref && findPricingCardElement(ref.sectionId, ref.index);
|
|
10193
|
-
if (!el) return null;
|
|
10194
|
-
const r2 = el.getBoundingClientRect();
|
|
10195
|
-
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
10196
|
-
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
10197
|
-
}
|
|
10198
|
-
function useLiveCardRect(ref) {
|
|
10199
|
-
const [rect, setRect] = (0, import_react9.useState)(null);
|
|
10200
|
-
(0, import_react9.useEffect)(() => {
|
|
10201
|
-
if (!ref) {
|
|
10202
|
-
setRect(null);
|
|
10203
|
-
return;
|
|
10204
|
-
}
|
|
10205
|
-
const update = () => {
|
|
10206
|
-
const next = readRect2(ref);
|
|
10207
|
-
setRect(
|
|
10208
|
-
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
10209
|
-
);
|
|
10210
|
-
};
|
|
10211
|
-
update();
|
|
10212
|
-
const opts = { capture: true, passive: true };
|
|
10213
|
-
window.addEventListener("scroll", update, opts);
|
|
10214
|
-
window.addEventListener("resize", update);
|
|
10215
|
-
const interval = setInterval(update, 500);
|
|
10216
|
-
return () => {
|
|
10217
|
-
window.removeEventListener("scroll", update, opts);
|
|
10218
|
-
window.removeEventListener("resize", update);
|
|
10219
|
-
clearInterval(interval);
|
|
10220
|
-
};
|
|
10221
|
-
}, [ref?.sectionId, ref?.index]);
|
|
10222
|
-
return rect;
|
|
10223
|
-
}
|
|
10224
|
-
function requestValidateTree(postToParent2, tree) {
|
|
10225
|
-
return new Promise((resolve) => {
|
|
10226
|
-
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10227
|
-
const timeout = window.setTimeout(() => {
|
|
10228
|
-
window.removeEventListener("message", onMessage);
|
|
10229
|
-
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
10230
|
-
}, 8e3);
|
|
10231
|
-
function onMessage(e) {
|
|
10232
|
-
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
10233
|
-
window.clearTimeout(timeout);
|
|
10234
|
-
window.removeEventListener("message", onMessage);
|
|
10235
|
-
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
10236
|
-
}
|
|
10237
|
-
window.addEventListener("message", onMessage);
|
|
10238
|
-
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
10239
|
-
});
|
|
10240
|
-
}
|
|
10241
|
-
function Pill({
|
|
10242
|
-
label,
|
|
10243
|
-
onClick,
|
|
10244
|
-
disabled,
|
|
10245
|
-
active
|
|
10246
|
-
}) {
|
|
10247
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10248
|
-
"button",
|
|
10249
|
-
{
|
|
10250
|
-
type: "button",
|
|
10251
|
-
onClick,
|
|
10252
|
-
disabled,
|
|
10253
|
-
style: {
|
|
10254
|
-
height: 28,
|
|
10255
|
-
padding: "0 10px",
|
|
10256
|
-
display: "inline-flex",
|
|
10257
|
-
alignItems: "center",
|
|
10258
|
-
gap: 4,
|
|
10259
|
-
borderRadius: 999,
|
|
10260
|
-
border: "none",
|
|
10261
|
-
cursor: disabled ? "default" : "pointer",
|
|
10262
|
-
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10263
|
-
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10264
|
-
opacity: disabled ? 0.4 : 1,
|
|
10265
|
-
fontSize: 12,
|
|
10266
|
-
lineHeight: "16px",
|
|
10267
|
-
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10268
|
-
whiteSpace: "nowrap",
|
|
10269
|
-
flex: "0 0 auto"
|
|
10270
|
-
},
|
|
10271
|
-
children: label
|
|
10272
|
-
}
|
|
10273
|
-
);
|
|
10274
|
-
}
|
|
10275
|
-
function PricingCardToolbar({
|
|
10276
|
-
entry,
|
|
10277
|
-
index,
|
|
10278
|
-
pending,
|
|
10279
|
-
error,
|
|
10280
|
-
onAddTier,
|
|
10281
|
-
onRemoveTier,
|
|
10282
|
-
onToggleFeatured,
|
|
10283
|
-
onSetTreatment,
|
|
10284
|
-
onAddButton,
|
|
10285
|
-
onRemoveButton,
|
|
10286
|
-
onAddFeature,
|
|
10287
|
-
onRemoveFeature
|
|
10288
|
-
}) {
|
|
10289
|
-
const collectionCount = pricingCardCount(entry.tree);
|
|
10290
|
-
const card = findPricingCardNode(entry.tree, index);
|
|
10291
|
-
const featured = card?.slots?.featured;
|
|
10292
|
-
const isFeatured = featured?.enabled === true;
|
|
10293
|
-
const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
|
|
10294
|
-
const featureCount = pricingCardFeatureCount(entry.tree, index);
|
|
10295
|
-
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
10296
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10297
|
-
"div",
|
|
10298
|
-
{
|
|
10299
|
-
"data-ohw-bridge": "",
|
|
10300
|
-
"data-ohw-toolbar": "",
|
|
10301
|
-
onMouseDown: (e) => e.stopPropagation(),
|
|
10302
|
-
style: {
|
|
10303
|
-
display: "flex",
|
|
10304
|
-
flexDirection: "column",
|
|
10305
|
-
gap: 6,
|
|
10306
|
-
alignItems: "center",
|
|
10307
|
-
background: OHW_BLUE,
|
|
10308
|
-
padding: 8,
|
|
10309
|
-
borderRadius: 12,
|
|
10310
|
-
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
10311
|
-
pointerEvents: pending ? "none" : "auto",
|
|
10312
|
-
opacity: pending ? 0.6 : 1,
|
|
10313
|
-
// Only cap width on mobile, where the pill rows wrap — on desktop the row stays on one
|
|
10314
|
-
// line and should size to fit it, not get clipped/overflow against a fixed cap.
|
|
10315
|
-
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
10316
|
-
},
|
|
10317
|
-
children: [
|
|
10318
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10319
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
|
|
10320
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
|
|
10321
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
|
|
10322
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
|
|
10323
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
|
|
10324
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
|
|
10325
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
|
|
10326
|
-
] }),
|
|
10327
|
-
isFeatured && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10328
|
-
Pill,
|
|
10329
|
-
{
|
|
10330
|
-
label: t.label,
|
|
10331
|
-
active: (featured?.treatment ?? "outlined") === t.value,
|
|
10332
|
-
onClick: () => onSetTreatment(t.value)
|
|
10333
|
-
},
|
|
10334
|
-
t.value
|
|
10335
|
-
)) }),
|
|
10336
|
-
error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10337
|
-
]
|
|
10338
|
-
}
|
|
10339
|
-
);
|
|
10340
|
-
}
|
|
10341
|
-
function findPricingCardNode(tree, index) {
|
|
10342
|
-
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
10343
|
-
while (stack.length) {
|
|
10344
|
-
const node = stack.shift();
|
|
10345
|
-
if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
|
|
10346
|
-
return node.children[index] ?? null;
|
|
10347
|
-
}
|
|
10348
|
-
if (node.children) stack.push(...node.children);
|
|
10349
|
-
}
|
|
10350
|
-
return null;
|
|
10351
|
-
}
|
|
10352
|
-
function AiPricingCardOverlay({
|
|
10353
|
-
postToParent: postToParent2,
|
|
10354
|
-
aiSectionsRef,
|
|
10355
|
-
applyTreeLocalRef
|
|
10356
|
-
}) {
|
|
10357
|
-
const [hover, setHover] = (0, import_react9.useState)(null);
|
|
10358
|
-
const [active, setActive] = (0, import_react9.useState)(null);
|
|
10359
|
-
const [pending, setPending] = (0, import_react9.useState)(false);
|
|
10360
|
-
const [error, setError] = (0, import_react9.useState)(null);
|
|
10361
|
-
const activeRef = (0, import_react9.useRef)(null);
|
|
10362
|
-
activeRef.current = active;
|
|
10363
|
-
(0, import_react9.useEffect)(() => {
|
|
10364
|
-
const onMove = (e) => {
|
|
10365
|
-
const t = e.target;
|
|
10366
|
-
if (!(t instanceof HTMLElement)) return;
|
|
10367
|
-
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]")) {
|
|
10368
|
-
return;
|
|
10369
|
-
}
|
|
10370
|
-
const cardEl = t.closest("[data-ohw-pricing-card]");
|
|
10371
|
-
if (!cardEl) {
|
|
10372
|
-
setHover(null);
|
|
10373
|
-
return;
|
|
10374
|
-
}
|
|
10375
|
-
const sectionEl = cardEl.closest("[data-ohw-section]");
|
|
10376
|
-
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
10377
|
-
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
10378
|
-
const index = Number(cardEl.dataset.ohwPricingIndex);
|
|
10379
|
-
if (!sectionId || Number.isNaN(index)) {
|
|
10380
|
-
setHover(null);
|
|
10381
|
-
return;
|
|
10382
|
-
}
|
|
10383
|
-
setHover({ sectionId, index });
|
|
10384
|
-
};
|
|
10385
|
-
const onLeave = () => setHover(null);
|
|
10386
|
-
document.addEventListener("mousemove", onMove, { passive: true });
|
|
10387
|
-
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
10388
|
-
return () => {
|
|
10389
|
-
document.removeEventListener("mousemove", onMove);
|
|
10390
|
-
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10391
|
-
};
|
|
10392
|
-
}, []);
|
|
10393
|
-
(0, import_react9.useEffect)(() => {
|
|
10394
|
-
const onClick = (e) => {
|
|
10395
|
-
const current = activeRef.current;
|
|
10396
|
-
if (!current) return;
|
|
10397
|
-
const t = e.target;
|
|
10398
|
-
if (!(t instanceof HTMLElement)) return;
|
|
10399
|
-
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
10400
|
-
const cardEl = findPricingCardElement(current.sectionId, current.index);
|
|
10401
|
-
if (cardEl && cardEl.contains(t)) return;
|
|
10402
|
-
setActive(null);
|
|
10403
|
-
setError(null);
|
|
10404
|
-
};
|
|
10405
|
-
document.addEventListener("click", onClick, true);
|
|
10406
|
-
return () => document.removeEventListener("click", onClick, true);
|
|
10407
|
-
}, []);
|
|
10408
|
-
(0, import_react9.useEffect)(() => {
|
|
10409
|
-
const onBlur = () => {
|
|
10410
|
-
if (!activeRef.current) return;
|
|
10411
|
-
setActive(null);
|
|
10412
|
-
setError(null);
|
|
10413
|
-
};
|
|
10414
|
-
window.addEventListener("blur", onBlur);
|
|
10415
|
-
return () => window.removeEventListener("blur", onBlur);
|
|
10416
|
-
}, []);
|
|
10417
|
-
(0, import_react9.useEffect)(() => {
|
|
10418
|
-
const onKeyDown = (e) => {
|
|
10419
|
-
if (e.key !== "Escape") return;
|
|
10420
|
-
if (!activeRef.current) return;
|
|
10421
|
-
setActive(null);
|
|
10422
|
-
setError(null);
|
|
10423
|
-
};
|
|
10424
|
-
document.addEventListener("keydown", onKeyDown);
|
|
10425
|
-
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10426
|
-
}, []);
|
|
10427
|
-
const findEntry = (0, import_react9.useCallback)(
|
|
10428
|
-
(sectionId) => {
|
|
10429
|
-
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10430
|
-
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10431
|
-
},
|
|
10432
|
-
[aiSectionsRef]
|
|
10433
|
-
);
|
|
10434
|
-
const runMutation = (0, import_react9.useCallback)(
|
|
10435
|
-
async (sectionId, mutate) => {
|
|
10436
|
-
const entry = findEntry(sectionId);
|
|
10437
|
-
if (!entry) return false;
|
|
10438
|
-
const nextTree = mutate(entry.tree);
|
|
10439
|
-
if (!nextTree) return false;
|
|
10440
|
-
setPending(true);
|
|
10441
|
-
setError(null);
|
|
10442
|
-
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10443
|
-
setPending(false);
|
|
10444
|
-
if (!ok) {
|
|
10445
|
-
setError(reasons[0] ?? "That change is not allowed.");
|
|
10446
|
-
return false;
|
|
10447
|
-
}
|
|
10448
|
-
applyTreeLocalRef.current?.({
|
|
10449
|
-
id: sectionId,
|
|
10450
|
-
mode: "replace",
|
|
10451
|
-
targetSectionId: sectionId,
|
|
10452
|
-
tree: nextTree,
|
|
10453
|
-
label: entry.label,
|
|
10454
|
-
media: entry.media,
|
|
10455
|
-
...entry.brand ? { brand: entry.brand } : {},
|
|
10456
|
-
// The user is already looking at the card they just edited — recentering the
|
|
10457
|
-
// viewport on every tier add/remove/toggle reads as the section jumping around.
|
|
10458
|
-
skipScrollIntoView: true
|
|
10459
|
-
});
|
|
10460
|
-
return true;
|
|
10461
|
-
},
|
|
10462
|
-
[findEntry, postToParent2, applyTreeLocalRef]
|
|
10463
|
-
);
|
|
10464
|
-
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10465
|
-
const activeCardRect = useLiveCardRect(active);
|
|
10466
|
-
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
10467
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
10468
|
-
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10469
|
-
"button",
|
|
10470
|
-
{
|
|
10471
|
-
type: "button",
|
|
10472
|
-
"data-ohw-toolbar": "",
|
|
10473
|
-
onClick: () => setActive(hover),
|
|
10474
|
-
"aria-label": "Configure pricing tier",
|
|
10475
|
-
style: {
|
|
10476
|
-
position: "fixed",
|
|
10477
|
-
top: hoverHandleRect.top + 8,
|
|
10478
|
-
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
10479
|
-
width: 28,
|
|
10480
|
-
height: 28,
|
|
10481
|
-
borderRadius: 8,
|
|
10482
|
-
border: `1.5px dashed ${PRIMARY3}`,
|
|
10483
|
-
background: "#ffffff",
|
|
10484
|
-
color: PRIMARY3,
|
|
10485
|
-
display: "flex",
|
|
10486
|
-
alignItems: "center",
|
|
10487
|
-
justifyContent: "center",
|
|
10488
|
-
cursor: "pointer",
|
|
10489
|
-
zIndex: 2147483643,
|
|
10490
|
-
fontSize: 14,
|
|
10491
|
-
fontWeight: 700
|
|
10492
|
-
},
|
|
10493
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
10494
|
-
}
|
|
10495
|
-
),
|
|
10496
|
-
activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10497
|
-
ItemInteractionLayer,
|
|
10498
|
-
{
|
|
10499
|
-
rect: activeCardRect,
|
|
10500
|
-
state: "active-top",
|
|
10501
|
-
toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10502
|
-
PricingCardToolbar,
|
|
10503
|
-
{
|
|
10504
|
-
entry: activeEntry,
|
|
10505
|
-
index: active.index,
|
|
10506
|
-
pending,
|
|
10507
|
-
error,
|
|
10508
|
-
onAddTier: () => runMutation(active.sectionId, addPricingTier),
|
|
10509
|
-
onRemoveTier: () => {
|
|
10510
|
-
void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
|
|
10511
|
-
(applied) => {
|
|
10512
|
-
if (applied) setActive(null);
|
|
10513
|
-
}
|
|
10514
|
-
);
|
|
10515
|
-
},
|
|
10516
|
-
onToggleFeatured: (enabled) => runMutation(
|
|
10517
|
-
active.sectionId,
|
|
10518
|
-
(tree) => setPricingCardFeatured(tree, active.index, { enabled })
|
|
10519
|
-
),
|
|
10520
|
-
onSetTreatment: (treatment) => runMutation(
|
|
10521
|
-
active.sectionId,
|
|
10522
|
-
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
10523
|
-
),
|
|
10524
|
-
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
10525
|
-
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
10526
|
-
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
10527
|
-
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
10013
|
+
pointerEvents: "none",
|
|
10014
|
+
zIndex: 2147483200
|
|
10528
10015
|
}
|
|
10529
|
-
|
|
10530
|
-
|
|
10531
|
-
|
|
10016
|
+
}
|
|
10017
|
+
),
|
|
10018
|
+
!reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
10019
|
+
"div",
|
|
10020
|
+
{
|
|
10021
|
+
style: {
|
|
10022
|
+
position: "fixed",
|
|
10023
|
+
top: reviewRect.top + 12,
|
|
10024
|
+
left: reviewRect.left,
|
|
10025
|
+
width: reviewRect.width,
|
|
10026
|
+
display: "flex",
|
|
10027
|
+
gap: 8,
|
|
10028
|
+
justifyContent: "flex-end",
|
|
10029
|
+
paddingRight: 12,
|
|
10030
|
+
zIndex: 2147483201
|
|
10031
|
+
},
|
|
10032
|
+
children: [
|
|
10033
|
+
/* @__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 }) }),
|
|
10034
|
+
/* @__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 }) })
|
|
10035
|
+
]
|
|
10036
|
+
}
|
|
10037
|
+
)
|
|
10038
|
+
] })
|
|
10532
10039
|
] });
|
|
10533
10040
|
}
|
|
10534
10041
|
|
|
10535
10042
|
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
10536
|
-
var
|
|
10537
|
-
var
|
|
10043
|
+
var import_react9 = require("react");
|
|
10044
|
+
var import_lucide_react8 = require("lucide-react");
|
|
10538
10045
|
|
|
10539
10046
|
// src/lib/ai-media-strip-tree.ts
|
|
10540
10047
|
var MEDIA_STRIP_ITEM_MIN = 1;
|
|
@@ -10640,12 +10147,20 @@ function setMediaStripHover(tree, hover) {
|
|
|
10640
10147
|
return true;
|
|
10641
10148
|
});
|
|
10642
10149
|
}
|
|
10150
|
+
function setMediaStripItemAsset(tree, index, assetId) {
|
|
10151
|
+
return withMediaStrip(tree, (block) => {
|
|
10152
|
+
const items = block.items;
|
|
10153
|
+
if (index < 0 || index >= items.length) return false;
|
|
10154
|
+
items[index] = { ...items[index], assetId };
|
|
10155
|
+
return true;
|
|
10156
|
+
});
|
|
10157
|
+
}
|
|
10643
10158
|
|
|
10644
10159
|
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
10645
|
-
var
|
|
10646
|
-
var
|
|
10647
|
-
var
|
|
10648
|
-
var
|
|
10160
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
10161
|
+
var PRIMARY3 = "#0885FE";
|
|
10162
|
+
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
10163
|
+
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
10649
10164
|
function findMediaStripItemElement(sectionId, index) {
|
|
10650
10165
|
const sectionEl = findByInstanceId(sectionId);
|
|
10651
10166
|
if (!sectionEl) return null;
|
|
@@ -10655,7 +10170,7 @@ function findMediaStripItemElement(sectionId, index) {
|
|
|
10655
10170
|
}
|
|
10656
10171
|
return null;
|
|
10657
10172
|
}
|
|
10658
|
-
function
|
|
10173
|
+
function readRect2(ref) {
|
|
10659
10174
|
const el = ref && findMediaStripItemElement(ref.sectionId, ref.index);
|
|
10660
10175
|
if (!el) return null;
|
|
10661
10176
|
const r2 = el.getBoundingClientRect();
|
|
@@ -10663,14 +10178,14 @@ function readRect3(ref) {
|
|
|
10663
10178
|
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
10664
10179
|
}
|
|
10665
10180
|
function useLiveItemRect(ref) {
|
|
10666
|
-
const [rect, setRect] = (0,
|
|
10667
|
-
(0,
|
|
10181
|
+
const [rect, setRect] = (0, import_react9.useState)(null);
|
|
10182
|
+
(0, import_react9.useEffect)(() => {
|
|
10668
10183
|
if (!ref) {
|
|
10669
10184
|
setRect(null);
|
|
10670
10185
|
return;
|
|
10671
10186
|
}
|
|
10672
10187
|
const update = () => {
|
|
10673
|
-
const next =
|
|
10188
|
+
const next = readRect2(ref);
|
|
10674
10189
|
setRect(
|
|
10675
10190
|
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
10676
10191
|
);
|
|
@@ -10688,7 +10203,7 @@ function useLiveItemRect(ref) {
|
|
|
10688
10203
|
}, [ref?.sectionId, ref?.index]);
|
|
10689
10204
|
return rect;
|
|
10690
10205
|
}
|
|
10691
|
-
function
|
|
10206
|
+
function requestValidateTree(postToParent2, tree) {
|
|
10692
10207
|
return new Promise((resolve) => {
|
|
10693
10208
|
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10694
10209
|
const timeout = window.setTimeout(() => {
|
|
@@ -10724,13 +10239,13 @@ function requestAssetPick(postToParent2) {
|
|
|
10724
10239
|
postToParent2({ type: "ow:asset-pick", id });
|
|
10725
10240
|
});
|
|
10726
10241
|
}
|
|
10727
|
-
function
|
|
10242
|
+
function Pill({
|
|
10728
10243
|
label,
|
|
10729
10244
|
onClick,
|
|
10730
10245
|
disabled,
|
|
10731
10246
|
active
|
|
10732
10247
|
}) {
|
|
10733
|
-
return /* @__PURE__ */ (0,
|
|
10248
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10734
10249
|
"button",
|
|
10735
10250
|
{
|
|
10736
10251
|
type: "button",
|
|
@@ -10745,8 +10260,8 @@ function Pill2({
|
|
|
10745
10260
|
borderRadius: 999,
|
|
10746
10261
|
border: "none",
|
|
10747
10262
|
cursor: disabled ? "default" : "pointer",
|
|
10748
|
-
background: active ?
|
|
10749
|
-
color: active ? "#ffffff" :
|
|
10263
|
+
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10264
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10750
10265
|
opacity: disabled ? 0.4 : 1,
|
|
10751
10266
|
fontSize: 12,
|
|
10752
10267
|
lineHeight: "16px",
|
|
@@ -10789,6 +10304,7 @@ function MediaStripToolbar({
|
|
|
10789
10304
|
onResize,
|
|
10790
10305
|
onAddItem,
|
|
10791
10306
|
onRemoveItem,
|
|
10307
|
+
onChangeImage,
|
|
10792
10308
|
onMoveLeft,
|
|
10793
10309
|
onMoveRight
|
|
10794
10310
|
}) {
|
|
@@ -10801,7 +10317,7 @@ function MediaStripToolbar({
|
|
|
10801
10317
|
const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
10802
10318
|
const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10803
10319
|
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
10804
|
-
return /* @__PURE__ */ (0,
|
|
10320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10805
10321
|
"div",
|
|
10806
10322
|
{
|
|
10807
10323
|
"data-ohw-bridge": "",
|
|
@@ -10812,7 +10328,7 @@ function MediaStripToolbar({
|
|
|
10812
10328
|
flexDirection: "column",
|
|
10813
10329
|
gap: 6,
|
|
10814
10330
|
alignItems: "center",
|
|
10815
|
-
background:
|
|
10331
|
+
background: OHW_BLUE,
|
|
10816
10332
|
padding: 8,
|
|
10817
10333
|
borderRadius: 12,
|
|
10818
10334
|
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
@@ -10821,29 +10337,30 @@ function MediaStripToolbar({
|
|
|
10821
10337
|
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
10822
10338
|
},
|
|
10823
10339
|
children: [
|
|
10824
|
-
/* @__PURE__ */ (0,
|
|
10825
|
-
VARIANTS.map((v) => /* @__PURE__ */ (0,
|
|
10826
|
-
ALIGNS.map((a) => /* @__PURE__ */ (0,
|
|
10340
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10341
|
+
VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
|
|
10342
|
+
ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
|
|
10827
10343
|
] }),
|
|
10828
|
-
/* @__PURE__ */ (0,
|
|
10829
|
-
HOVERS.map((h) => /* @__PURE__ */ (0,
|
|
10830
|
-
TREATMENTS.map((t) => /* @__PURE__ */ (0,
|
|
10344
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10345
|
+
HOVERS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
|
|
10346
|
+
TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
|
|
10831
10347
|
] }),
|
|
10832
|
-
/* @__PURE__ */ (0,
|
|
10833
|
-
/* @__PURE__ */ (0,
|
|
10834
|
-
/* @__PURE__ */ (0,
|
|
10348
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
|
|
10349
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212", onClick: () => onResize(-8) }),
|
|
10350
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: "#ffffff", fontSize: 12, minWidth: 34, textAlign: "center" }, children: [
|
|
10835
10351
|
sizeValue,
|
|
10836
10352
|
"px"
|
|
10837
10353
|
] }),
|
|
10838
|
-
/* @__PURE__ */ (0,
|
|
10354
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+", onClick: () => onResize(8) })
|
|
10839
10355
|
] }),
|
|
10840
|
-
/* @__PURE__ */ (0,
|
|
10841
|
-
/* @__PURE__ */ (0,
|
|
10842
|
-
/* @__PURE__ */ (0,
|
|
10843
|
-
/* @__PURE__ */ (0,
|
|
10844
|
-
/* @__PURE__ */ (0,
|
|
10356
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10357
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Change Image", onClick: onChangeImage }),
|
|
10358
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Item", onClick: onAddItem }),
|
|
10359
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 }),
|
|
10360
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
|
|
10361
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
|
|
10845
10362
|
] }),
|
|
10846
|
-
error && /* @__PURE__ */ (0,
|
|
10363
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10847
10364
|
]
|
|
10848
10365
|
}
|
|
10849
10366
|
);
|
|
@@ -10862,13 +10379,13 @@ function AiMediaStripOverlay({
|
|
|
10862
10379
|
aiSectionsRef,
|
|
10863
10380
|
applyTreeLocalRef
|
|
10864
10381
|
}) {
|
|
10865
|
-
const [hover, setHover] = (0,
|
|
10866
|
-
const [active, setActive] = (0,
|
|
10867
|
-
const [pending, setPending] = (0,
|
|
10868
|
-
const [error, setError] = (0,
|
|
10869
|
-
const activeRef = (0,
|
|
10382
|
+
const [hover, setHover] = (0, import_react9.useState)(null);
|
|
10383
|
+
const [active, setActive] = (0, import_react9.useState)(null);
|
|
10384
|
+
const [pending, setPending] = (0, import_react9.useState)(false);
|
|
10385
|
+
const [error, setError] = (0, import_react9.useState)(null);
|
|
10386
|
+
const activeRef = (0, import_react9.useRef)(null);
|
|
10870
10387
|
activeRef.current = active;
|
|
10871
|
-
(0,
|
|
10388
|
+
(0, import_react9.useEffect)(() => {
|
|
10872
10389
|
const onMove = (e) => {
|
|
10873
10390
|
const t = e.target;
|
|
10874
10391
|
if (!(t instanceof HTMLElement)) return;
|
|
@@ -10898,7 +10415,7 @@ function AiMediaStripOverlay({
|
|
|
10898
10415
|
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10899
10416
|
};
|
|
10900
10417
|
}, []);
|
|
10901
|
-
(0,
|
|
10418
|
+
(0, import_react9.useEffect)(() => {
|
|
10902
10419
|
const onClick = (e) => {
|
|
10903
10420
|
const current = activeRef.current;
|
|
10904
10421
|
if (!current) return;
|
|
@@ -10913,7 +10430,7 @@ function AiMediaStripOverlay({
|
|
|
10913
10430
|
document.addEventListener("click", onClick, true);
|
|
10914
10431
|
return () => document.removeEventListener("click", onClick, true);
|
|
10915
10432
|
}, []);
|
|
10916
|
-
(0,
|
|
10433
|
+
(0, import_react9.useEffect)(() => {
|
|
10917
10434
|
const onBlur = () => {
|
|
10918
10435
|
if (!activeRef.current) return;
|
|
10919
10436
|
setActive(null);
|
|
@@ -10922,7 +10439,7 @@ function AiMediaStripOverlay({
|
|
|
10922
10439
|
window.addEventListener("blur", onBlur);
|
|
10923
10440
|
return () => window.removeEventListener("blur", onBlur);
|
|
10924
10441
|
}, []);
|
|
10925
|
-
(0,
|
|
10442
|
+
(0, import_react9.useEffect)(() => {
|
|
10926
10443
|
const onKeyDown = (e) => {
|
|
10927
10444
|
if (e.key !== "Escape") return;
|
|
10928
10445
|
if (!activeRef.current) return;
|
|
@@ -10932,22 +10449,22 @@ function AiMediaStripOverlay({
|
|
|
10932
10449
|
document.addEventListener("keydown", onKeyDown);
|
|
10933
10450
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10934
10451
|
}, []);
|
|
10935
|
-
const findEntry = (0,
|
|
10452
|
+
const findEntry = (0, import_react9.useCallback)(
|
|
10936
10453
|
(sectionId) => {
|
|
10937
10454
|
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10938
10455
|
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10939
10456
|
},
|
|
10940
10457
|
[aiSectionsRef]
|
|
10941
10458
|
);
|
|
10942
|
-
const runMutation = (0,
|
|
10943
|
-
async (sectionId, mutate) => {
|
|
10459
|
+
const runMutation = (0, import_react9.useCallback)(
|
|
10460
|
+
async (sectionId, mutate, extraMedia) => {
|
|
10944
10461
|
const entry = findEntry(sectionId);
|
|
10945
10462
|
if (!entry) return false;
|
|
10946
10463
|
const nextTree = mutate(entry.tree);
|
|
10947
10464
|
if (!nextTree) return false;
|
|
10948
10465
|
setPending(true);
|
|
10949
10466
|
setError(null);
|
|
10950
|
-
const { ok, reasons } = await
|
|
10467
|
+
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10951
10468
|
setPending(false);
|
|
10952
10469
|
if (!ok) {
|
|
10953
10470
|
setError(reasons[0] ?? "That change is not allowed.");
|
|
@@ -10959,9 +10476,8 @@ function AiMediaStripOverlay({
|
|
|
10959
10476
|
targetSectionId: sectionId,
|
|
10960
10477
|
tree: nextTree,
|
|
10961
10478
|
label: entry.label,
|
|
10962
|
-
media: entry.media,
|
|
10963
|
-
...entry.brand ? { brand: entry.brand } : {}
|
|
10964
|
-
skipScrollIntoView: true
|
|
10479
|
+
media: extraMedia ? { ...entry.media, ...extraMedia } : entry.media,
|
|
10480
|
+
...entry.brand ? { brand: entry.brand } : {}
|
|
10965
10481
|
});
|
|
10966
10482
|
return true;
|
|
10967
10483
|
},
|
|
@@ -10970,8 +10486,10 @@ function AiMediaStripOverlay({
|
|
|
10970
10486
|
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10971
10487
|
const hoverHandleRect = useLiveItemRect(!active && hover ? hover : null);
|
|
10972
10488
|
const activeItemRect = useLiveItemRect(active);
|
|
10973
|
-
|
|
10974
|
-
|
|
10489
|
+
const TOOLBAR_APPROX_H = 170;
|
|
10490
|
+
const toolbarState = activeItemRect && activeItemRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
10491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
10492
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10975
10493
|
"button",
|
|
10976
10494
|
{
|
|
10977
10495
|
type: "button",
|
|
@@ -10985,9 +10503,9 @@ function AiMediaStripOverlay({
|
|
|
10985
10503
|
width: 28,
|
|
10986
10504
|
height: 28,
|
|
10987
10505
|
borderRadius: 8,
|
|
10988
|
-
border: `1.5px dashed ${
|
|
10506
|
+
border: `1.5px dashed ${PRIMARY3}`,
|
|
10989
10507
|
background: "#ffffff",
|
|
10990
|
-
color:
|
|
10508
|
+
color: PRIMARY3,
|
|
10991
10509
|
display: "flex",
|
|
10992
10510
|
alignItems: "center",
|
|
10993
10511
|
justifyContent: "center",
|
|
@@ -10996,15 +10514,15 @@ function AiMediaStripOverlay({
|
|
|
10996
10514
|
fontSize: 14,
|
|
10997
10515
|
fontWeight: 700
|
|
10998
10516
|
},
|
|
10999
|
-
children: /* @__PURE__ */ (0,
|
|
10517
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
11000
10518
|
}
|
|
11001
10519
|
),
|
|
11002
|
-
activeItemRect && active && activeEntry && /* @__PURE__ */ (0,
|
|
10520
|
+
activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
11003
10521
|
ItemInteractionLayer,
|
|
11004
10522
|
{
|
|
11005
10523
|
rect: activeItemRect,
|
|
11006
|
-
state:
|
|
11007
|
-
toolbar: /* @__PURE__ */ (0,
|
|
10524
|
+
state: toolbarState,
|
|
10525
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
11008
10526
|
MediaStripToolbar,
|
|
11009
10527
|
{
|
|
11010
10528
|
entry: activeEntry,
|
|
@@ -11025,10 +10543,22 @@ function AiMediaStripOverlay({
|
|
|
11025
10543
|
void requestAssetPick(postToParent2).then((picked) => {
|
|
11026
10544
|
if (!picked) return;
|
|
11027
10545
|
const item = { assetId: picked.assetId, alt: "Logo" };
|
|
11028
|
-
void runMutation(
|
|
11029
|
-
|
|
11030
|
-
|
|
11031
|
-
}
|
|
10546
|
+
void runMutation(
|
|
10547
|
+
active.sectionId,
|
|
10548
|
+
(tree) => addMediaStripItem(tree, item, active.index),
|
|
10549
|
+
{ [picked.assetId]: picked.url }
|
|
10550
|
+
).then((applied) => {
|
|
10551
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10552
|
+
});
|
|
10553
|
+
});
|
|
10554
|
+
},
|
|
10555
|
+
onChangeImage: () => {
|
|
10556
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10557
|
+
if (!picked) return;
|
|
10558
|
+
void runMutation(
|
|
10559
|
+
active.sectionId,
|
|
10560
|
+
(tree) => setMediaStripItemAsset(tree, active.index, picked.assetId),
|
|
10561
|
+
{ [picked.assetId]: picked.url }
|
|
11032
10562
|
);
|
|
11033
10563
|
});
|
|
11034
10564
|
},
|
|
@@ -11371,28 +10901,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
11371
10901
|
}
|
|
11372
10902
|
|
|
11373
10903
|
// src/ui/link-modal/LinkPopover.tsx
|
|
11374
|
-
var
|
|
10904
|
+
var import_react13 = require("react");
|
|
11375
10905
|
|
|
11376
10906
|
// src/ui/dialog.tsx
|
|
11377
10907
|
var React9 = __toESM(require("react"), 1);
|
|
11378
10908
|
var import_radix_ui6 = require("radix-ui");
|
|
11379
|
-
var
|
|
11380
|
-
var
|
|
10909
|
+
var import_lucide_react9 = require("lucide-react");
|
|
10910
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
11381
10911
|
function Dialog2({
|
|
11382
10912
|
...props
|
|
11383
10913
|
}) {
|
|
11384
|
-
return /* @__PURE__ */ (0,
|
|
10914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
11385
10915
|
}
|
|
11386
10916
|
function DialogPortal({
|
|
11387
10917
|
...props
|
|
11388
10918
|
}) {
|
|
11389
|
-
return /* @__PURE__ */ (0,
|
|
10919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
11390
10920
|
}
|
|
11391
10921
|
function DialogOverlay({
|
|
11392
10922
|
className,
|
|
11393
10923
|
...props
|
|
11394
10924
|
}) {
|
|
11395
|
-
return /* @__PURE__ */ (0,
|
|
10925
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11396
10926
|
import_radix_ui6.Dialog.Overlay,
|
|
11397
10927
|
{
|
|
11398
10928
|
"data-slot": "dialog-overlay",
|
|
@@ -11405,9 +10935,9 @@ function DialogOverlay({
|
|
|
11405
10935
|
var DialogContent = React9.forwardRef(
|
|
11406
10936
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
11407
10937
|
const positionMode = container ? "absolute" : "fixed";
|
|
11408
|
-
return /* @__PURE__ */ (0,
|
|
11409
|
-
/* @__PURE__ */ (0,
|
|
11410
|
-
/* @__PURE__ */ (0,
|
|
10938
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
10939
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
10940
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
11411
10941
|
import_radix_ui6.Dialog.Content,
|
|
11412
10942
|
{
|
|
11413
10943
|
ref,
|
|
@@ -11423,13 +10953,13 @@ var DialogContent = React9.forwardRef(
|
|
|
11423
10953
|
...props,
|
|
11424
10954
|
children: [
|
|
11425
10955
|
children,
|
|
11426
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
10956
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11427
10957
|
import_radix_ui6.Dialog.Close,
|
|
11428
10958
|
{
|
|
11429
10959
|
type: "button",
|
|
11430
10960
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
11431
10961
|
"aria-label": "Close",
|
|
11432
|
-
children: /* @__PURE__ */ (0,
|
|
10962
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.X, { size: 16, "aria-hidden": true })
|
|
11433
10963
|
}
|
|
11434
10964
|
) : null
|
|
11435
10965
|
]
|
|
@@ -11443,13 +10973,13 @@ function DialogHeader({
|
|
|
11443
10973
|
className,
|
|
11444
10974
|
...props
|
|
11445
10975
|
}) {
|
|
11446
|
-
return /* @__PURE__ */ (0,
|
|
10976
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
11447
10977
|
}
|
|
11448
10978
|
function DialogFooter({
|
|
11449
10979
|
className,
|
|
11450
10980
|
...props
|
|
11451
10981
|
}) {
|
|
11452
|
-
return /* @__PURE__ */ (0,
|
|
10982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11453
10983
|
"div",
|
|
11454
10984
|
{
|
|
11455
10985
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -11457,7 +10987,7 @@ function DialogFooter({
|
|
|
11457
10987
|
}
|
|
11458
10988
|
);
|
|
11459
10989
|
}
|
|
11460
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
10990
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11461
10991
|
import_radix_ui6.Dialog.Title,
|
|
11462
10992
|
{
|
|
11463
10993
|
ref,
|
|
@@ -11469,7 +10999,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
11469
10999
|
}
|
|
11470
11000
|
));
|
|
11471
11001
|
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
11472
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11002
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11473
11003
|
import_radix_ui6.Dialog.Description,
|
|
11474
11004
|
{
|
|
11475
11005
|
ref,
|
|
@@ -11481,63 +11011,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
|
11481
11011
|
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
11482
11012
|
|
|
11483
11013
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
11484
|
-
var
|
|
11014
|
+
var import_lucide_react13 = require("lucide-react");
|
|
11485
11015
|
|
|
11486
11016
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
11487
|
-
var
|
|
11488
|
-
var
|
|
11017
|
+
var import_lucide_react10 = require("lucide-react");
|
|
11018
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
11489
11019
|
function DestinationBreadcrumb({
|
|
11490
11020
|
pageTitle,
|
|
11491
11021
|
sectionLabel
|
|
11492
11022
|
}) {
|
|
11493
|
-
return /* @__PURE__ */ (0,
|
|
11494
|
-
/* @__PURE__ */ (0,
|
|
11495
|
-
/* @__PURE__ */ (0,
|
|
11496
|
-
/* @__PURE__ */ (0,
|
|
11497
|
-
/* @__PURE__ */ (0,
|
|
11498
|
-
/* @__PURE__ */ (0,
|
|
11023
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
11024
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
11025
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
11026
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
11027
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
11028
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
11499
11029
|
] }),
|
|
11500
|
-
/* @__PURE__ */ (0,
|
|
11501
|
-
|
|
11030
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11031
|
+
import_lucide_react10.ArrowRight,
|
|
11502
11032
|
{
|
|
11503
11033
|
size: 16,
|
|
11504
11034
|
className: "shrink-0 text-muted-foreground",
|
|
11505
11035
|
"aria-hidden": true
|
|
11506
11036
|
}
|
|
11507
11037
|
),
|
|
11508
|
-
/* @__PURE__ */ (0,
|
|
11509
|
-
/* @__PURE__ */ (0,
|
|
11510
|
-
|
|
11038
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
11039
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11040
|
+
import_lucide_react10.GalleryVertical,
|
|
11511
11041
|
{
|
|
11512
11042
|
size: 16,
|
|
11513
11043
|
className: "shrink-0 text-foreground",
|
|
11514
11044
|
"aria-hidden": true
|
|
11515
11045
|
}
|
|
11516
11046
|
),
|
|
11517
|
-
/* @__PURE__ */ (0,
|
|
11047
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
11518
11048
|
] })
|
|
11519
11049
|
] })
|
|
11520
11050
|
] });
|
|
11521
11051
|
}
|
|
11522
11052
|
|
|
11523
11053
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
11524
|
-
var
|
|
11525
|
-
var
|
|
11054
|
+
var import_lucide_react11 = require("lucide-react");
|
|
11055
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
11526
11056
|
function SectionTreeItem({
|
|
11527
11057
|
section,
|
|
11528
11058
|
onSelect,
|
|
11529
11059
|
selected
|
|
11530
11060
|
}) {
|
|
11531
11061
|
const interactive = Boolean(onSelect);
|
|
11532
|
-
return /* @__PURE__ */ (0,
|
|
11533
|
-
/* @__PURE__ */ (0,
|
|
11062
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
11063
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11534
11064
|
"div",
|
|
11535
11065
|
{
|
|
11536
11066
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
11537
11067
|
"aria-hidden": true
|
|
11538
11068
|
}
|
|
11539
11069
|
),
|
|
11540
|
-
/* @__PURE__ */ (0,
|
|
11070
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
11541
11071
|
"div",
|
|
11542
11072
|
{
|
|
11543
11073
|
role: interactive ? "button" : void 0,
|
|
@@ -11555,15 +11085,15 @@ function SectionTreeItem({
|
|
|
11555
11085
|
interactive && selected && "border-bridge-primary"
|
|
11556
11086
|
),
|
|
11557
11087
|
children: [
|
|
11558
|
-
/* @__PURE__ */ (0,
|
|
11559
|
-
|
|
11088
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11089
|
+
import_lucide_react11.GalleryVertical,
|
|
11560
11090
|
{
|
|
11561
11091
|
size: 16,
|
|
11562
11092
|
className: "shrink-0 text-foreground",
|
|
11563
11093
|
"aria-hidden": true
|
|
11564
11094
|
}
|
|
11565
11095
|
),
|
|
11566
|
-
/* @__PURE__ */ (0,
|
|
11096
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
11567
11097
|
]
|
|
11568
11098
|
}
|
|
11569
11099
|
)
|
|
@@ -11571,14 +11101,14 @@ function SectionTreeItem({
|
|
|
11571
11101
|
}
|
|
11572
11102
|
|
|
11573
11103
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
11574
|
-
var
|
|
11104
|
+
var import_react10 = require("react");
|
|
11575
11105
|
|
|
11576
11106
|
// src/ui/input.tsx
|
|
11577
11107
|
var React10 = __toESM(require("react"), 1);
|
|
11578
|
-
var
|
|
11108
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
11579
11109
|
var Input = React10.forwardRef(
|
|
11580
11110
|
({ className, type, ...props }, ref) => {
|
|
11581
|
-
return /* @__PURE__ */ (0,
|
|
11111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
11582
11112
|
"input",
|
|
11583
11113
|
{
|
|
11584
11114
|
type,
|
|
@@ -11597,9 +11127,9 @@ Input.displayName = "Input";
|
|
|
11597
11127
|
|
|
11598
11128
|
// src/ui/label.tsx
|
|
11599
11129
|
var import_radix_ui7 = require("radix-ui");
|
|
11600
|
-
var
|
|
11130
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
11601
11131
|
function Label({ className, ...props }) {
|
|
11602
|
-
return /* @__PURE__ */ (0,
|
|
11132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
11603
11133
|
import_radix_ui7.Label.Root,
|
|
11604
11134
|
{
|
|
11605
11135
|
"data-slot": "label",
|
|
@@ -11610,12 +11140,12 @@ function Label({ className, ...props }) {
|
|
|
11610
11140
|
}
|
|
11611
11141
|
|
|
11612
11142
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
11613
|
-
var
|
|
11614
|
-
var
|
|
11143
|
+
var import_lucide_react12 = require("lucide-react");
|
|
11144
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
11615
11145
|
function FieldChevron({
|
|
11616
11146
|
onClick
|
|
11617
11147
|
}) {
|
|
11618
|
-
return /* @__PURE__ */ (0,
|
|
11148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11619
11149
|
"button",
|
|
11620
11150
|
{
|
|
11621
11151
|
type: "button",
|
|
@@ -11623,7 +11153,7 @@ function FieldChevron({
|
|
|
11623
11153
|
onClick,
|
|
11624
11154
|
"aria-label": "Open page list",
|
|
11625
11155
|
tabIndex: -1,
|
|
11626
|
-
children: /* @__PURE__ */ (0,
|
|
11156
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.ChevronDown, { size: 16 })
|
|
11627
11157
|
}
|
|
11628
11158
|
);
|
|
11629
11159
|
}
|
|
@@ -11639,11 +11169,11 @@ function UrlOrPageInput({
|
|
|
11639
11169
|
readOnly = false,
|
|
11640
11170
|
urlError
|
|
11641
11171
|
}) {
|
|
11642
|
-
const inputId = (0,
|
|
11643
|
-
const inputRef = (0,
|
|
11644
|
-
const rootRef = (0,
|
|
11645
|
-
const [isFocused, setIsFocused] = (0,
|
|
11646
|
-
(0,
|
|
11172
|
+
const inputId = (0, import_react10.useId)();
|
|
11173
|
+
const inputRef = (0, import_react10.useRef)(null);
|
|
11174
|
+
const rootRef = (0, import_react10.useRef)(null);
|
|
11175
|
+
const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
|
|
11176
|
+
(0, import_react10.useEffect)(() => {
|
|
11647
11177
|
if (!dropdownOpen) return;
|
|
11648
11178
|
const isOutside = (e) => {
|
|
11649
11179
|
const root = rootRef.current;
|
|
@@ -11684,19 +11214,19 @@ function UrlOrPageInput({
|
|
|
11684
11214
|
"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]",
|
|
11685
11215
|
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"
|
|
11686
11216
|
);
|
|
11687
|
-
return /* @__PURE__ */ (0,
|
|
11688
|
-
/* @__PURE__ */ (0,
|
|
11689
|
-
/* @__PURE__ */ (0,
|
|
11690
|
-
/* @__PURE__ */ (0,
|
|
11691
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
11692
|
-
|
|
11217
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
11218
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
11219
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
11220
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
11221
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11222
|
+
import_lucide_react12.File,
|
|
11693
11223
|
{
|
|
11694
11224
|
size: 16,
|
|
11695
11225
|
className: "shrink-0 text-foreground",
|
|
11696
11226
|
"aria-hidden": true
|
|
11697
11227
|
}
|
|
11698
11228
|
) }) : null,
|
|
11699
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
11229
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11700
11230
|
Input,
|
|
11701
11231
|
{
|
|
11702
11232
|
ref: inputRef,
|
|
@@ -11722,7 +11252,7 @@ function UrlOrPageInput({
|
|
|
11722
11252
|
)
|
|
11723
11253
|
}
|
|
11724
11254
|
),
|
|
11725
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
11255
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11726
11256
|
"button",
|
|
11727
11257
|
{
|
|
11728
11258
|
type: "button",
|
|
@@ -11730,26 +11260,26 @@ function UrlOrPageInput({
|
|
|
11730
11260
|
onMouseDown: clearSelection,
|
|
11731
11261
|
"aria-label": "Clear selected page",
|
|
11732
11262
|
tabIndex: -1,
|
|
11733
|
-
children: /* @__PURE__ */ (0,
|
|
11263
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { size: 16, "aria-hidden": true })
|
|
11734
11264
|
}
|
|
11735
11265
|
) : null,
|
|
11736
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
11266
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
11737
11267
|
] }),
|
|
11738
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
11268
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11739
11269
|
"div",
|
|
11740
11270
|
{
|
|
11741
11271
|
"data-ohw-link-page-dropdown": "",
|
|
11742
11272
|
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",
|
|
11743
11273
|
onMouseDown: (e) => e.preventDefault(),
|
|
11744
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
11274
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
11745
11275
|
"button",
|
|
11746
11276
|
{
|
|
11747
11277
|
type: "button",
|
|
11748
11278
|
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",
|
|
11749
11279
|
onClick: () => onPageSelect(page),
|
|
11750
11280
|
children: [
|
|
11751
|
-
/* @__PURE__ */ (0,
|
|
11752
|
-
/* @__PURE__ */ (0,
|
|
11281
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11282
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate", children: page.title })
|
|
11753
11283
|
]
|
|
11754
11284
|
},
|
|
11755
11285
|
page.path
|
|
@@ -11757,34 +11287,34 @@ function UrlOrPageInput({
|
|
|
11757
11287
|
}
|
|
11758
11288
|
) : null
|
|
11759
11289
|
] }),
|
|
11760
|
-
urlError ? /* @__PURE__ */ (0,
|
|
11290
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
11761
11291
|
] });
|
|
11762
11292
|
}
|
|
11763
11293
|
|
|
11764
11294
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
11765
|
-
var
|
|
11295
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
11766
11296
|
function LinkEditorPanel({ state, onClose }) {
|
|
11767
11297
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
11768
|
-
return /* @__PURE__ */ (0,
|
|
11769
|
-
/* @__PURE__ */ (0,
|
|
11298
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
11299
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11770
11300
|
"button",
|
|
11771
11301
|
{
|
|
11772
11302
|
type: "button",
|
|
11773
11303
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
11774
11304
|
"aria-label": "Close",
|
|
11775
11305
|
onClick: onClose,
|
|
11776
|
-
children: /* @__PURE__ */ (0,
|
|
11306
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
|
|
11777
11307
|
}
|
|
11778
11308
|
) }),
|
|
11779
|
-
/* @__PURE__ */ (0,
|
|
11780
|
-
/* @__PURE__ */ (0,
|
|
11781
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11309
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
11310
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
11311
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11782
11312
|
DestinationBreadcrumb,
|
|
11783
11313
|
{
|
|
11784
11314
|
pageTitle: state.selectedPage.title,
|
|
11785
11315
|
sectionLabel: state.selectedSection.label
|
|
11786
11316
|
}
|
|
11787
|
-
) : /* @__PURE__ */ (0,
|
|
11317
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11788
11318
|
UrlOrPageInput,
|
|
11789
11319
|
{
|
|
11790
11320
|
value: state.searchValue,
|
|
@@ -11797,8 +11327,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11797
11327
|
urlError: state.urlError
|
|
11798
11328
|
}
|
|
11799
11329
|
),
|
|
11800
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
11801
|
-
/* @__PURE__ */ (0,
|
|
11330
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
11331
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11802
11332
|
Button,
|
|
11803
11333
|
{
|
|
11804
11334
|
type: "button",
|
|
@@ -11809,15 +11339,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11809
11339
|
children: "Choose a section"
|
|
11810
11340
|
}
|
|
11811
11341
|
),
|
|
11812
|
-
/* @__PURE__ */ (0,
|
|
11813
|
-
/* @__PURE__ */ (0,
|
|
11814
|
-
/* @__PURE__ */ (0,
|
|
11342
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
11343
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11344
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
11815
11345
|
] })
|
|
11816
11346
|
] }) : null,
|
|
11817
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11347
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
11818
11348
|
] }),
|
|
11819
|
-
/* @__PURE__ */ (0,
|
|
11820
|
-
/* @__PURE__ */ (0,
|
|
11349
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
11350
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11821
11351
|
Button,
|
|
11822
11352
|
{
|
|
11823
11353
|
type: "button",
|
|
@@ -11832,7 +11362,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11832
11362
|
children: state.secondaryLabel
|
|
11833
11363
|
}
|
|
11834
11364
|
),
|
|
11835
|
-
/* @__PURE__ */ (0,
|
|
11365
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11836
11366
|
Button,
|
|
11837
11367
|
{
|
|
11838
11368
|
type: "button",
|
|
@@ -11851,9 +11381,9 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11851
11381
|
}
|
|
11852
11382
|
|
|
11853
11383
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
11854
|
-
var
|
|
11384
|
+
var import_react11 = require("react");
|
|
11855
11385
|
var import_react_dom3 = require("react-dom");
|
|
11856
|
-
var
|
|
11386
|
+
var import_lucide_react14 = require("lucide-react");
|
|
11857
11387
|
var import_navigation2 = require("next/navigation");
|
|
11858
11388
|
|
|
11859
11389
|
// src/lib/parent-scroll.ts
|
|
@@ -11875,7 +11405,7 @@ function getIframeChromeClip(parentScroll) {
|
|
|
11875
11405
|
}
|
|
11876
11406
|
|
|
11877
11407
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
11878
|
-
var
|
|
11408
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
11879
11409
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
11880
11410
|
function rectsEqual(a, b) {
|
|
11881
11411
|
if (a.size !== b.size) return false;
|
|
@@ -11908,12 +11438,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
11908
11438
|
return null;
|
|
11909
11439
|
}
|
|
11910
11440
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
11911
|
-
const [rects, setRects] = (0,
|
|
11912
|
-
const sectionIds = (0,
|
|
11441
|
+
const [rects, setRects] = (0, import_react11.useState)(/* @__PURE__ */ new Map());
|
|
11442
|
+
const sectionIds = (0, import_react11.useMemo)(
|
|
11913
11443
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
11914
11444
|
[sectionIdsKey]
|
|
11915
11445
|
);
|
|
11916
|
-
(0,
|
|
11446
|
+
(0, import_react11.useEffect)(() => {
|
|
11917
11447
|
if (!enabled || sectionIds.length === 0) {
|
|
11918
11448
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
11919
11449
|
return;
|
|
@@ -11954,13 +11484,13 @@ function SectionPickerOverlay({
|
|
|
11954
11484
|
}) {
|
|
11955
11485
|
const router = (0, import_navigation2.useRouter)();
|
|
11956
11486
|
const pathname = (0, import_navigation2.usePathname)();
|
|
11957
|
-
const [selectedId, setSelectedId] = (0,
|
|
11958
|
-
const [hoveredId, setHoveredId] = (0,
|
|
11959
|
-
const pointerRef = (0,
|
|
11960
|
-
const pointerScreenRef = (0,
|
|
11961
|
-
const iframeOffsetTopRef = (0,
|
|
11962
|
-
const sectionIdsRef = (0,
|
|
11963
|
-
const [chromeClip, setChromeClip] = (0,
|
|
11487
|
+
const [selectedId, setSelectedId] = (0, import_react11.useState)(null);
|
|
11488
|
+
const [hoveredId, setHoveredId] = (0, import_react11.useState)(null);
|
|
11489
|
+
const pointerRef = (0, import_react11.useRef)(null);
|
|
11490
|
+
const pointerScreenRef = (0, import_react11.useRef)(null);
|
|
11491
|
+
const iframeOffsetTopRef = (0, import_react11.useRef)(null);
|
|
11492
|
+
const sectionIdsRef = (0, import_react11.useRef)([]);
|
|
11493
|
+
const [chromeClip, setChromeClip] = (0, import_react11.useState)(
|
|
11964
11494
|
() => ({
|
|
11965
11495
|
top: 0,
|
|
11966
11496
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -11968,12 +11498,12 @@ function SectionPickerOverlay({
|
|
|
11968
11498
|
);
|
|
11969
11499
|
const normalizedTarget = normalizePath(pagePath);
|
|
11970
11500
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
11971
|
-
(0,
|
|
11501
|
+
(0, import_react11.useEffect)(() => {
|
|
11972
11502
|
if (isOnTargetPage) return;
|
|
11973
11503
|
const search = readPreservedSearch();
|
|
11974
11504
|
router.push(`${normalizedTarget}${search}`);
|
|
11975
11505
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
11976
|
-
(0,
|
|
11506
|
+
(0, import_react11.useEffect)(() => {
|
|
11977
11507
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
11978
11508
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
11979
11509
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -11985,24 +11515,24 @@ function SectionPickerOverlay({
|
|
|
11985
11515
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
11986
11516
|
};
|
|
11987
11517
|
}, []);
|
|
11988
|
-
const liveSections = (0,
|
|
11518
|
+
const liveSections = (0, import_react11.useMemo)(() => {
|
|
11989
11519
|
if (!isOnTargetPage) return sections;
|
|
11990
11520
|
const live = collectSectionsFromDom();
|
|
11991
11521
|
if (live.length === 0) return sections;
|
|
11992
11522
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
11993
11523
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
11994
11524
|
}, [isOnTargetPage, sections, pathname]);
|
|
11995
|
-
const sectionIdsKey = (0,
|
|
11525
|
+
const sectionIdsKey = (0, import_react11.useMemo)(
|
|
11996
11526
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
11997
11527
|
[liveSections]
|
|
11998
11528
|
);
|
|
11999
|
-
const sectionIds = (0,
|
|
11529
|
+
const sectionIds = (0, import_react11.useMemo)(
|
|
12000
11530
|
() => liveSections.map((s) => s.id),
|
|
12001
11531
|
[liveSections]
|
|
12002
11532
|
);
|
|
12003
11533
|
sectionIdsRef.current = sectionIds;
|
|
12004
11534
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
12005
|
-
const applyHoverAt = (0,
|
|
11535
|
+
const applyHoverAt = (0, import_react11.useCallback)(
|
|
12006
11536
|
(x, y, liveRects) => {
|
|
12007
11537
|
const ids = sectionIdsRef.current;
|
|
12008
11538
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -12011,7 +11541,7 @@ function SectionPickerOverlay({
|
|
|
12011
11541
|
},
|
|
12012
11542
|
[]
|
|
12013
11543
|
);
|
|
12014
|
-
(0,
|
|
11544
|
+
(0, import_react11.useEffect)(() => {
|
|
12015
11545
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
|
|
12016
11546
|
const next = getIframeVisibleClip({
|
|
12017
11547
|
iframeOffsetTop,
|
|
@@ -12055,12 +11585,12 @@ function SectionPickerOverlay({
|
|
|
12055
11585
|
window.removeEventListener("resize", onResize);
|
|
12056
11586
|
};
|
|
12057
11587
|
}, [applyHoverAt]);
|
|
12058
|
-
(0,
|
|
11588
|
+
(0, import_react11.useEffect)(() => {
|
|
12059
11589
|
const ptr = pointerRef.current;
|
|
12060
11590
|
if (!ptr) return;
|
|
12061
11591
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
12062
11592
|
}, [rects, applyHoverAt]);
|
|
12063
|
-
(0,
|
|
11593
|
+
(0, import_react11.useEffect)(() => {
|
|
12064
11594
|
const rememberPointer = (clientX, clientY) => {
|
|
12065
11595
|
pointerRef.current = { x: clientX, y: clientY };
|
|
12066
11596
|
const top = iframeOffsetTopRef.current;
|
|
@@ -12084,7 +11614,7 @@ function SectionPickerOverlay({
|
|
|
12084
11614
|
window.removeEventListener("message", onPointerSync);
|
|
12085
11615
|
};
|
|
12086
11616
|
}, [rects, applyHoverAt]);
|
|
12087
|
-
const handleSelect = (0,
|
|
11617
|
+
const handleSelect = (0, import_react11.useCallback)(
|
|
12088
11618
|
(section) => {
|
|
12089
11619
|
if (selectedId) return;
|
|
12090
11620
|
setSelectedId(section.id);
|
|
@@ -12092,7 +11622,7 @@ function SectionPickerOverlay({
|
|
|
12092
11622
|
},
|
|
12093
11623
|
[selectedId, onSelect]
|
|
12094
11624
|
);
|
|
12095
|
-
(0,
|
|
11625
|
+
(0, import_react11.useEffect)(() => {
|
|
12096
11626
|
const onKeyDown = (e) => {
|
|
12097
11627
|
if (e.key === "Escape") {
|
|
12098
11628
|
e.preventDefault();
|
|
@@ -12106,7 +11636,7 @@ function SectionPickerOverlay({
|
|
|
12106
11636
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
12107
11637
|
if (!portalRoot) return null;
|
|
12108
11638
|
return (0, import_react_dom3.createPortal)(
|
|
12109
|
-
/* @__PURE__ */ (0,
|
|
11639
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12110
11640
|
"div",
|
|
12111
11641
|
{
|
|
12112
11642
|
"data-ohw-section-picker": "",
|
|
@@ -12116,12 +11646,12 @@ function SectionPickerOverlay({
|
|
|
12116
11646
|
role: "dialog",
|
|
12117
11647
|
"aria-label": "Choose a section",
|
|
12118
11648
|
children: [
|
|
12119
|
-
/* @__PURE__ */ (0,
|
|
11649
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12120
11650
|
"div",
|
|
12121
11651
|
{
|
|
12122
11652
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
12123
11653
|
style: { top: chromeClip.top + 20 },
|
|
12124
|
-
children: /* @__PURE__ */ (0,
|
|
11654
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12125
11655
|
Button,
|
|
12126
11656
|
{
|
|
12127
11657
|
type: "button",
|
|
@@ -12130,14 +11660,14 @@ function SectionPickerOverlay({
|
|
|
12130
11660
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
12131
11661
|
onClick: onBack,
|
|
12132
11662
|
children: [
|
|
12133
|
-
/* @__PURE__ */ (0,
|
|
11663
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
12134
11664
|
"Back"
|
|
12135
11665
|
]
|
|
12136
11666
|
}
|
|
12137
11667
|
)
|
|
12138
11668
|
}
|
|
12139
11669
|
),
|
|
12140
|
-
/* @__PURE__ */ (0,
|
|
11670
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12141
11671
|
"div",
|
|
12142
11672
|
{
|
|
12143
11673
|
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",
|
|
@@ -12150,7 +11680,7 @@ function SectionPickerOverlay({
|
|
|
12150
11680
|
children: "Click on section to select"
|
|
12151
11681
|
}
|
|
12152
11682
|
),
|
|
12153
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
11683
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12154
11684
|
"div",
|
|
12155
11685
|
{
|
|
12156
11686
|
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",
|
|
@@ -12158,14 +11688,14 @@ function SectionPickerOverlay({
|
|
|
12158
11688
|
children: "Loading page preview\u2026"
|
|
12159
11689
|
}
|
|
12160
11690
|
) : null,
|
|
12161
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
11691
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
12162
11692
|
isOnTargetPage ? liveSections.map((section) => {
|
|
12163
11693
|
const rect = rects.get(section.id);
|
|
12164
11694
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
12165
11695
|
const isSelected = selectedId === section.id;
|
|
12166
11696
|
const isHovered = hoveredId === section.id;
|
|
12167
11697
|
const isLit = isSelected || isHovered;
|
|
12168
|
-
return /* @__PURE__ */ (0,
|
|
11698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12169
11699
|
"button",
|
|
12170
11700
|
{
|
|
12171
11701
|
type: "button",
|
|
@@ -12180,7 +11710,7 @@ function SectionPickerOverlay({
|
|
|
12180
11710
|
"aria-label": `Select section ${section.label}`,
|
|
12181
11711
|
onClick: () => handleSelect(section),
|
|
12182
11712
|
children: [
|
|
12183
|
-
isLit ? /* @__PURE__ */ (0,
|
|
11713
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12184
11714
|
"span",
|
|
12185
11715
|
{
|
|
12186
11716
|
className: "pointer-events-none absolute",
|
|
@@ -12193,13 +11723,13 @@ function SectionPickerOverlay({
|
|
|
12193
11723
|
"aria-hidden": true
|
|
12194
11724
|
}
|
|
12195
11725
|
) : null,
|
|
12196
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
11726
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12197
11727
|
"span",
|
|
12198
11728
|
{
|
|
12199
11729
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
12200
11730
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
12201
11731
|
"aria-hidden": true,
|
|
12202
|
-
children: /* @__PURE__ */ (0,
|
|
11732
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.Check, { className: "size-5" })
|
|
12203
11733
|
}
|
|
12204
11734
|
) : null
|
|
12205
11735
|
]
|
|
@@ -12215,7 +11745,7 @@ function SectionPickerOverlay({
|
|
|
12215
11745
|
}
|
|
12216
11746
|
|
|
12217
11747
|
// src/ui/link-modal/useLinkModalState.ts
|
|
12218
|
-
var
|
|
11748
|
+
var import_react12 = require("react");
|
|
12219
11749
|
function useLinkModalState({
|
|
12220
11750
|
open,
|
|
12221
11751
|
mode,
|
|
@@ -12227,14 +11757,14 @@ function useLinkModalState({
|
|
|
12227
11757
|
onClose,
|
|
12228
11758
|
onSubmit
|
|
12229
11759
|
}) {
|
|
12230
|
-
const availablePages = (0,
|
|
12231
|
-
const [searchValue, setSearchValue] = (0,
|
|
12232
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
12233
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
12234
|
-
const [step, setStep] = (0,
|
|
12235
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
12236
|
-
const [urlError, setUrlError] = (0,
|
|
12237
|
-
const reset = (0,
|
|
11760
|
+
const availablePages = (0, import_react12.useMemo)(() => pages, [pages]);
|
|
11761
|
+
const [searchValue, setSearchValue] = (0, import_react12.useState)("");
|
|
11762
|
+
const [selectedPage, setSelectedPage] = (0, import_react12.useState)(null);
|
|
11763
|
+
const [selectedSection, setSelectedSection] = (0, import_react12.useState)(null);
|
|
11764
|
+
const [step, setStep] = (0, import_react12.useState)("input");
|
|
11765
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react12.useState)(false);
|
|
11766
|
+
const [urlError, setUrlError] = (0, import_react12.useState)("");
|
|
11767
|
+
const reset = (0, import_react12.useCallback)(() => {
|
|
12238
11768
|
setSearchValue("");
|
|
12239
11769
|
setSelectedPage(null);
|
|
12240
11770
|
setSelectedSection(null);
|
|
@@ -12242,7 +11772,7 @@ function useLinkModalState({
|
|
|
12242
11772
|
setDropdownOpen(false);
|
|
12243
11773
|
setUrlError("");
|
|
12244
11774
|
}, []);
|
|
12245
|
-
(0,
|
|
11775
|
+
(0, import_react12.useEffect)(() => {
|
|
12246
11776
|
if (!open) return;
|
|
12247
11777
|
if (mode === "edit" && initialTarget) {
|
|
12248
11778
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -12258,11 +11788,11 @@ function useLinkModalState({
|
|
|
12258
11788
|
setDropdownOpen(false);
|
|
12259
11789
|
setUrlError("");
|
|
12260
11790
|
}, [open, mode, initialTarget, reset]);
|
|
12261
|
-
const filteredPages = (0,
|
|
11791
|
+
const filteredPages = (0, import_react12.useMemo)(() => {
|
|
12262
11792
|
if (!searchValue.trim()) return availablePages;
|
|
12263
11793
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
12264
11794
|
}, [availablePages, searchValue]);
|
|
12265
|
-
const activeSections = (0,
|
|
11795
|
+
const activeSections = (0, import_react12.useMemo)(() => {
|
|
12266
11796
|
if (!selectedPage) return [];
|
|
12267
11797
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
12268
11798
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -12311,7 +11841,7 @@ function useLinkModalState({
|
|
|
12311
11841
|
reset();
|
|
12312
11842
|
onClose();
|
|
12313
11843
|
};
|
|
12314
|
-
const isValid = (0,
|
|
11844
|
+
const isValid = (0, import_react12.useMemo)(() => {
|
|
12315
11845
|
if (urlError) return false;
|
|
12316
11846
|
if (showBreadcrumb) return true;
|
|
12317
11847
|
if (selectedPage) return true;
|
|
@@ -12379,7 +11909,7 @@ function useLinkModalState({
|
|
|
12379
11909
|
}
|
|
12380
11910
|
|
|
12381
11911
|
// src/ui/link-modal/LinkPopover.tsx
|
|
12382
|
-
var
|
|
11912
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
12383
11913
|
function postToParent(data) {
|
|
12384
11914
|
window.parent?.postMessage(data, "*");
|
|
12385
11915
|
}
|
|
@@ -12408,7 +11938,7 @@ function LinkPopover({
|
|
|
12408
11938
|
onSubmit
|
|
12409
11939
|
});
|
|
12410
11940
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
12411
|
-
(0,
|
|
11941
|
+
(0, import_react13.useEffect)(() => {
|
|
12412
11942
|
if (!open) return;
|
|
12413
11943
|
if (sectionPickerActive) {
|
|
12414
11944
|
postToParent({ type: "ui:unlock" });
|
|
@@ -12475,15 +12005,15 @@ function LinkPopover({
|
|
|
12475
12005
|
);
|
|
12476
12006
|
};
|
|
12477
12007
|
}, [open, sectionPickerActive]);
|
|
12478
|
-
return /* @__PURE__ */ (0,
|
|
12479
|
-
/* @__PURE__ */ (0,
|
|
12008
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
12009
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12480
12010
|
Dialog2,
|
|
12481
12011
|
{
|
|
12482
12012
|
open: open && !sectionPickerActive,
|
|
12483
12013
|
onOpenChange: (next) => {
|
|
12484
12014
|
if (!next) onClose?.();
|
|
12485
12015
|
},
|
|
12486
|
-
children: /* @__PURE__ */ (0,
|
|
12016
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12487
12017
|
DialogContent,
|
|
12488
12018
|
{
|
|
12489
12019
|
ref: panelRef,
|
|
@@ -12493,12 +12023,12 @@ function LinkPopover({
|
|
|
12493
12023
|
"data-ohw-bridge": "",
|
|
12494
12024
|
showCloseButton: false,
|
|
12495
12025
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
12496
|
-
children: /* @__PURE__ */ (0,
|
|
12026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkEditorPanel, { state, onClose })
|
|
12497
12027
|
}
|
|
12498
12028
|
)
|
|
12499
12029
|
}
|
|
12500
12030
|
),
|
|
12501
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
12031
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12502
12032
|
SectionPickerOverlay,
|
|
12503
12033
|
{
|
|
12504
12034
|
pagePath: state.selectedPage.path,
|
|
@@ -15687,9 +15217,9 @@ function addFooterColumnWithPersist({
|
|
|
15687
15217
|
}
|
|
15688
15218
|
|
|
15689
15219
|
// src/ui/FloatingPanel.tsx
|
|
15690
|
-
var
|
|
15691
|
-
var
|
|
15692
|
-
var
|
|
15220
|
+
var import_react14 = require("react");
|
|
15221
|
+
var import_lucide_react15 = require("lucide-react");
|
|
15222
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
15693
15223
|
var PANEL_WIDTH = 256;
|
|
15694
15224
|
var EDGE_MARGIN = 16;
|
|
15695
15225
|
var HEADER_MIN = 56;
|
|
@@ -15723,14 +15253,18 @@ function clampDragPosition(pos, parentScroll, panelW) {
|
|
|
15723
15253
|
y: Math.min(Math.max(pos.y, minY), maxY)
|
|
15724
15254
|
};
|
|
15725
15255
|
}
|
|
15726
|
-
function
|
|
15727
|
-
const clip = getVisibleClip(parentScroll);
|
|
15728
|
-
return Math.max(homeY, clip.top + EDGE_MARGIN);
|
|
15729
|
-
}
|
|
15730
|
-
function availablePanelHeight(parentScroll, top) {
|
|
15256
|
+
function fitPanelInClip(homeY, parentScroll, preferredHeight) {
|
|
15731
15257
|
const clip = getVisibleClip(parentScroll);
|
|
15732
|
-
const
|
|
15733
|
-
|
|
15258
|
+
const minY = clip.top + EDGE_MARGIN;
|
|
15259
|
+
const maxBottom = clip.bottom - EDGE_MARGIN;
|
|
15260
|
+
const band = Math.max(HEADER_MIN, maxBottom - minY);
|
|
15261
|
+
let y = Math.max(homeY, minY);
|
|
15262
|
+
const want = Math.min(Math.max(preferredHeight, HEADER_MIN), band);
|
|
15263
|
+
if (y + want > maxBottom) {
|
|
15264
|
+
y = Math.max(minY, maxBottom - want);
|
|
15265
|
+
}
|
|
15266
|
+
const maxHeight = Math.max(HEADER_MIN, Math.floor(maxBottom - y));
|
|
15267
|
+
return { y, maxHeight };
|
|
15734
15268
|
}
|
|
15735
15269
|
function FloatingPanel({
|
|
15736
15270
|
open,
|
|
@@ -15745,10 +15279,10 @@ function FloatingPanel({
|
|
|
15745
15279
|
className,
|
|
15746
15280
|
bodyClassName
|
|
15747
15281
|
}) {
|
|
15748
|
-
const panelRef = (0,
|
|
15749
|
-
const [measured, setMeasured] = (0,
|
|
15750
|
-
const dragRef = (0,
|
|
15751
|
-
const homeRef = (0,
|
|
15282
|
+
const panelRef = (0, import_react14.useRef)(null);
|
|
15283
|
+
const [measured, setMeasured] = (0, import_react14.useState)({ w: PANEL_WIDTH, h: 280 });
|
|
15284
|
+
const dragRef = (0, import_react14.useRef)(null);
|
|
15285
|
+
const homeRef = (0, import_react14.useRef)(null);
|
|
15752
15286
|
if (!open) {
|
|
15753
15287
|
homeRef.current = null;
|
|
15754
15288
|
} else if (position) {
|
|
@@ -15756,14 +15290,14 @@ function FloatingPanel({
|
|
|
15756
15290
|
} else if (homeRef.current == null) {
|
|
15757
15291
|
homeRef.current = defaultFloatingPanelPosition(parentScroll);
|
|
15758
15292
|
}
|
|
15759
|
-
const [liveScroll, setLiveScroll] = (0,
|
|
15293
|
+
const [liveScroll, setLiveScroll] = (0, import_react14.useState)(parentScroll);
|
|
15760
15294
|
const home = position ?? homeRef.current ?? defaultFloatingPanelPosition(parentScroll);
|
|
15295
|
+
const { y: fittedY, maxHeight } = fitPanelInClip(home.y, liveScroll, measured.h);
|
|
15761
15296
|
const clamped = {
|
|
15762
15297
|
x: clampX(home.x, measured.w),
|
|
15763
|
-
y:
|
|
15298
|
+
y: fittedY
|
|
15764
15299
|
};
|
|
15765
|
-
|
|
15766
|
-
(0, import_react15.useEffect)(() => {
|
|
15300
|
+
(0, import_react14.useEffect)(() => {
|
|
15767
15301
|
if (!open) {
|
|
15768
15302
|
setLiveScroll(parentScroll);
|
|
15769
15303
|
return;
|
|
@@ -15776,13 +15310,16 @@ function FloatingPanel({
|
|
|
15776
15310
|
window.addEventListener("message", onParentScroll);
|
|
15777
15311
|
return () => window.removeEventListener("message", onParentScroll);
|
|
15778
15312
|
}, [open, parentScroll]);
|
|
15779
|
-
(0,
|
|
15313
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
15780
15314
|
if (!open || !panelRef.current) return;
|
|
15781
15315
|
const el = panelRef.current;
|
|
15782
|
-
const
|
|
15316
|
+
const header = el.querySelector("[data-ohw-floating-panel-header]");
|
|
15317
|
+
const body = el.querySelector("[data-ohw-floating-panel-body]");
|
|
15318
|
+
const contentH = (header?.offsetHeight ?? 0) + (body?.scrollHeight ?? 0) || el.scrollHeight || 280;
|
|
15319
|
+
const next = { w: el.offsetWidth || PANEL_WIDTH, h: contentH };
|
|
15783
15320
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
15784
15321
|
}, [open, children, title, context]);
|
|
15785
|
-
const onHeaderPointerDown = (0,
|
|
15322
|
+
const onHeaderPointerDown = (0, import_react14.useCallback)(
|
|
15786
15323
|
(e) => {
|
|
15787
15324
|
if (e.button !== 0) return;
|
|
15788
15325
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -15801,7 +15338,7 @@ function FloatingPanel({
|
|
|
15801
15338
|
},
|
|
15802
15339
|
[clamped.x, clamped.y]
|
|
15803
15340
|
);
|
|
15804
|
-
const onHeaderPointerMove = (0,
|
|
15341
|
+
const onHeaderPointerMove = (0, import_react14.useCallback)(
|
|
15805
15342
|
(e) => {
|
|
15806
15343
|
const drag = dragRef.current;
|
|
15807
15344
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -15827,7 +15364,7 @@ function FloatingPanel({
|
|
|
15827
15364
|
},
|
|
15828
15365
|
[measured.w, onPositionChange, liveScroll]
|
|
15829
15366
|
);
|
|
15830
|
-
const endDrag = (0,
|
|
15367
|
+
const endDrag = (0, import_react14.useCallback)((e) => {
|
|
15831
15368
|
const drag = dragRef.current;
|
|
15832
15369
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
15833
15370
|
dragRef.current = null;
|
|
@@ -15837,13 +15374,13 @@ function FloatingPanel({
|
|
|
15837
15374
|
} catch {
|
|
15838
15375
|
}
|
|
15839
15376
|
}, []);
|
|
15840
|
-
(0,
|
|
15377
|
+
(0, import_react14.useEffect)(() => {
|
|
15841
15378
|
if (open) return;
|
|
15842
15379
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
15843
15380
|
}, [open]);
|
|
15844
|
-
(0,
|
|
15381
|
+
(0, import_react14.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
15845
15382
|
if (!open) return null;
|
|
15846
|
-
return /* @__PURE__ */ (0,
|
|
15383
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
15847
15384
|
"div",
|
|
15848
15385
|
{
|
|
15849
15386
|
ref: panelRef,
|
|
@@ -15860,7 +15397,7 @@ function FloatingPanel({
|
|
|
15860
15397
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15861
15398
|
onClick: (e) => e.stopPropagation(),
|
|
15862
15399
|
children: [
|
|
15863
|
-
/* @__PURE__ */ (0,
|
|
15400
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
15864
15401
|
"div",
|
|
15865
15402
|
{
|
|
15866
15403
|
"data-ohw-floating-panel-header": "",
|
|
@@ -15870,14 +15407,14 @@ function FloatingPanel({
|
|
|
15870
15407
|
onPointerUp: endDrag,
|
|
15871
15408
|
onPointerCancel: endDrag,
|
|
15872
15409
|
children: [
|
|
15873
|
-
/* @__PURE__ */ (0,
|
|
15874
|
-
/* @__PURE__ */ (0,
|
|
15875
|
-
icon ? /* @__PURE__ */ (0,
|
|
15876
|
-
/* @__PURE__ */ (0,
|
|
15410
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
15411
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
15412
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
15413
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
15877
15414
|
] }),
|
|
15878
|
-
context ? /* @__PURE__ */ (0,
|
|
15415
|
+
context ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
15879
15416
|
] }),
|
|
15880
|
-
/* @__PURE__ */ (0,
|
|
15417
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
15881
15418
|
"button",
|
|
15882
15419
|
{
|
|
15883
15420
|
type: "button",
|
|
@@ -15889,13 +15426,13 @@ function FloatingPanel({
|
|
|
15889
15426
|
onClose();
|
|
15890
15427
|
},
|
|
15891
15428
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15892
|
-
children: /* @__PURE__ */ (0,
|
|
15429
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.X, { size: 16, "aria-hidden": true })
|
|
15893
15430
|
}
|
|
15894
15431
|
)
|
|
15895
15432
|
]
|
|
15896
15433
|
}
|
|
15897
15434
|
),
|
|
15898
|
-
/* @__PURE__ */ (0,
|
|
15435
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
15899
15436
|
"div",
|
|
15900
15437
|
{
|
|
15901
15438
|
"data-ohw-floating-panel-body": "",
|
|
@@ -15913,15 +15450,15 @@ function FloatingPanel({
|
|
|
15913
15450
|
}
|
|
15914
15451
|
|
|
15915
15452
|
// src/ui/socials-display-panel.tsx
|
|
15916
|
-
var
|
|
15453
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
15917
15454
|
function DisplaySwitch({
|
|
15918
15455
|
label,
|
|
15919
15456
|
checked,
|
|
15920
15457
|
disabled,
|
|
15921
15458
|
onChange
|
|
15922
15459
|
}) {
|
|
15923
|
-
return /* @__PURE__ */ (0,
|
|
15924
|
-
/* @__PURE__ */ (0,
|
|
15460
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
|
|
15461
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15925
15462
|
"span",
|
|
15926
15463
|
{
|
|
15927
15464
|
className: cn(
|
|
@@ -15931,7 +15468,7 @@ function DisplaySwitch({
|
|
|
15931
15468
|
children: label
|
|
15932
15469
|
}
|
|
15933
15470
|
),
|
|
15934
|
-
/* @__PURE__ */ (0,
|
|
15471
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15935
15472
|
"button",
|
|
15936
15473
|
{
|
|
15937
15474
|
type: "button",
|
|
@@ -15945,7 +15482,7 @@ function DisplaySwitch({
|
|
|
15945
15482
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
15946
15483
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
15947
15484
|
),
|
|
15948
|
-
children: /* @__PURE__ */ (0,
|
|
15485
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15949
15486
|
"span",
|
|
15950
15487
|
{
|
|
15951
15488
|
className: cn(
|
|
@@ -15959,8 +15496,8 @@ function DisplaySwitch({
|
|
|
15959
15496
|
] });
|
|
15960
15497
|
}
|
|
15961
15498
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
15962
|
-
return /* @__PURE__ */ (0,
|
|
15963
|
-
/* @__PURE__ */ (0,
|
|
15499
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
15500
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15964
15501
|
DisplaySwitch,
|
|
15965
15502
|
{
|
|
15966
15503
|
label: "Text",
|
|
@@ -15969,7 +15506,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15969
15506
|
onChange: (text) => onChange({ ...display, text })
|
|
15970
15507
|
}
|
|
15971
15508
|
),
|
|
15972
|
-
/* @__PURE__ */ (0,
|
|
15509
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15973
15510
|
DisplaySwitch,
|
|
15974
15511
|
{
|
|
15975
15512
|
label: "Icon",
|
|
@@ -15982,7 +15519,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15982
15519
|
}
|
|
15983
15520
|
|
|
15984
15521
|
// src/ui/button-style-panel.tsx
|
|
15985
|
-
var
|
|
15522
|
+
var import_lucide_react16 = require("lucide-react");
|
|
15986
15523
|
|
|
15987
15524
|
// src/lib/button-styles.ts
|
|
15988
15525
|
var BUTTON_VARIANTS_KEY = "__ohw_button_variants";
|
|
@@ -16682,7 +16219,7 @@ function withAssignment(content, id, assignment) {
|
|
|
16682
16219
|
}
|
|
16683
16220
|
|
|
16684
16221
|
// src/ui/button-style-panel.tsx
|
|
16685
|
-
var
|
|
16222
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
16686
16223
|
var SIZE_LABEL = { s: "S", m: "M", l: "L" };
|
|
16687
16224
|
function ButtonStylePanel({
|
|
16688
16225
|
variants,
|
|
@@ -16696,15 +16233,15 @@ function ButtonStylePanel({
|
|
|
16696
16233
|
}) {
|
|
16697
16234
|
const preview = scaleGeometry(sizes.m, 0.75);
|
|
16698
16235
|
const label = previewLabel.trim() || "Book Now";
|
|
16699
|
-
return /* @__PURE__ */ (0,
|
|
16700
|
-
/* @__PURE__ */ (0,
|
|
16701
|
-
/* @__PURE__ */ (0,
|
|
16702
|
-
/* @__PURE__ */ (0,
|
|
16236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-5", children: [
|
|
16237
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
16238
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Variants" }),
|
|
16239
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
|
|
16703
16240
|
const chrome = variants[id];
|
|
16704
16241
|
const selected = id === variant;
|
|
16705
16242
|
const hasBorder = parseFloat(chrome.borderWidth) > 0;
|
|
16706
16243
|
const cardSlot = previewSlotForChrome(chrome, slotBackground);
|
|
16707
|
-
return /* @__PURE__ */ (0,
|
|
16244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
16708
16245
|
"button",
|
|
16709
16246
|
{
|
|
16710
16247
|
type: "button",
|
|
@@ -16720,12 +16257,12 @@ function ButtonStylePanel({
|
|
|
16720
16257
|
selected ? "border-2 border-primary" : "border border-border"
|
|
16721
16258
|
),
|
|
16722
16259
|
children: [
|
|
16723
|
-
/* @__PURE__ */ (0,
|
|
16260
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16724
16261
|
"div",
|
|
16725
16262
|
{
|
|
16726
16263
|
className: "flex w-full items-center justify-center py-4",
|
|
16727
16264
|
style: { background: cardSlot },
|
|
16728
|
-
children: /* @__PURE__ */ (0,
|
|
16265
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16729
16266
|
"span",
|
|
16730
16267
|
{
|
|
16731
16268
|
className: "inline-flex items-center justify-center whitespace-nowrap font-semibold uppercase leading-none",
|
|
@@ -16747,12 +16284,12 @@ function ButtonStylePanel({
|
|
|
16747
16284
|
)
|
|
16748
16285
|
}
|
|
16749
16286
|
),
|
|
16750
|
-
selected ? /* @__PURE__ */ (0,
|
|
16287
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16751
16288
|
"span",
|
|
16752
16289
|
{
|
|
16753
16290
|
className: "absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
|
|
16754
16291
|
"aria-hidden": true,
|
|
16755
|
-
children: /* @__PURE__ */ (0,
|
|
16292
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Check, { className: "size-3", strokeWidth: 3 })
|
|
16756
16293
|
}
|
|
16757
16294
|
) : null
|
|
16758
16295
|
]
|
|
@@ -16761,9 +16298,9 @@ function ButtonStylePanel({
|
|
|
16761
16298
|
);
|
|
16762
16299
|
}) })
|
|
16763
16300
|
] }),
|
|
16764
|
-
/* @__PURE__ */ (0,
|
|
16765
|
-
/* @__PURE__ */ (0,
|
|
16766
|
-
/* @__PURE__ */ (0,
|
|
16301
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
16302
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Size" }),
|
|
16303
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16767
16304
|
"div",
|
|
16768
16305
|
{
|
|
16769
16306
|
className: "flex w-full items-start rounded-lg bg-stone-100 p-1",
|
|
@@ -16771,7 +16308,7 @@ function ButtonStylePanel({
|
|
|
16771
16308
|
"aria-label": "Size",
|
|
16772
16309
|
children: BUTTON_SIZE_IDS.map((id) => {
|
|
16773
16310
|
const selected = id === size;
|
|
16774
|
-
return /* @__PURE__ */ (0,
|
|
16311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16775
16312
|
"button",
|
|
16776
16313
|
{
|
|
16777
16314
|
type: "button",
|
|
@@ -16962,6 +16499,11 @@ function rekeyCopy(copy, id) {
|
|
|
16962
16499
|
setButtonDragAttr(copy);
|
|
16963
16500
|
return { labelKey };
|
|
16964
16501
|
}
|
|
16502
|
+
function stampVariantClass(el, variant) {
|
|
16503
|
+
const raw = typeof el.className === "string" ? el.className : el.getAttribute("class") || "";
|
|
16504
|
+
const without = raw.replace(/\bbtn--(?:primary|secondary|ghost)\b/g, "").replace(/\s+/g, " ").trim();
|
|
16505
|
+
el.className = without ? `${without} btn--${variant}` : `btn btn--${variant}`;
|
|
16506
|
+
}
|
|
16965
16507
|
function snapshotOf(el) {
|
|
16966
16508
|
const id = buttonId(el) ?? "";
|
|
16967
16509
|
const label = labelElement2(el);
|
|
@@ -16994,8 +16536,13 @@ function duplicateButton(source, content) {
|
|
|
16994
16536
|
const href = buttonHref(source);
|
|
16995
16537
|
const label = buttonLabel(source);
|
|
16996
16538
|
if (href) copy.setAttribute("href", href);
|
|
16997
|
-
const
|
|
16998
|
-
|
|
16539
|
+
const sourceAssignment = readAssignments(content)[sourceId] ?? assignmentFor(source, content, tokens);
|
|
16540
|
+
const copyAssignment = {
|
|
16541
|
+
variant: "secondary",
|
|
16542
|
+
size: sourceAssignment.size
|
|
16543
|
+
};
|
|
16544
|
+
stampVariantClass(copy, "secondary");
|
|
16545
|
+
applyButtonStyle(copy, copyAssignment, tokens);
|
|
16999
16546
|
const copyLabelEl = labelElement2(copy);
|
|
17000
16547
|
if (copyLabelEl) copyLabelEl.textContent = label;
|
|
17001
16548
|
let collection = buttonCollectionOf(source);
|
|
@@ -17029,20 +16576,18 @@ function duplicateButton(source, content) {
|
|
|
17029
16576
|
...collections,
|
|
17030
16577
|
[collectionId]: { id: collectionId, members, gap }
|
|
17031
16578
|
};
|
|
17032
|
-
const assignments =
|
|
16579
|
+
const assignments = withAssignment(content, copyId, copyAssignment);
|
|
17033
16580
|
const nextContent = {
|
|
17034
16581
|
...content,
|
|
17035
16582
|
[copyId]: href,
|
|
17036
16583
|
[labelKey]: label,
|
|
17037
16584
|
[BUTTON_COLLECTIONS_KEY]: JSON.stringify(nextCollections),
|
|
17038
|
-
[BUTTON_SNAPSHOTS_KEY]: JSON.stringify(snapshots)
|
|
16585
|
+
[BUTTON_SNAPSHOTS_KEY]: JSON.stringify(snapshots),
|
|
16586
|
+
[BUTTON_ASSIGNMENTS_KEY]: JSON.stringify(assignments)
|
|
17039
16587
|
};
|
|
17040
16588
|
if (sourceLabelKey && nextContent[sourceLabelKey] === void 0) {
|
|
17041
16589
|
nextContent[sourceLabelKey] = label;
|
|
17042
16590
|
}
|
|
17043
|
-
if (Object.keys(assignments).length > 0) {
|
|
17044
|
-
nextContent[BUTTON_ASSIGNMENTS_KEY] = JSON.stringify(assignments);
|
|
17045
|
-
}
|
|
17046
16591
|
const nodeKeys = [
|
|
17047
16592
|
copyId,
|
|
17048
16593
|
labelKey,
|
|
@@ -17670,7 +17215,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
17670
17215
|
}
|
|
17671
17216
|
|
|
17672
17217
|
// src/useNavItemDrag.ts
|
|
17673
|
-
var
|
|
17218
|
+
var import_react15 = require("react");
|
|
17674
17219
|
function useNavItemDrag({
|
|
17675
17220
|
isEditMode,
|
|
17676
17221
|
editContentRef,
|
|
@@ -17694,11 +17239,11 @@ function useNavItemDrag({
|
|
|
17694
17239
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
17695
17240
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
17696
17241
|
}) {
|
|
17697
|
-
const navDragRef = (0,
|
|
17698
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
17699
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
17700
|
-
const navPointerDragRef = (0,
|
|
17701
|
-
const clearNavDragVisuals = (0,
|
|
17242
|
+
const navDragRef = (0, import_react15.useRef)(null);
|
|
17243
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react15.useState)([]);
|
|
17244
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react15.useState)(null);
|
|
17245
|
+
const navPointerDragRef = (0, import_react15.useRef)(null);
|
|
17246
|
+
const clearNavDragVisuals = (0, import_react15.useCallback)(() => {
|
|
17702
17247
|
const session = navDragRef.current;
|
|
17703
17248
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
17704
17249
|
navDragRef.current = null;
|
|
@@ -17731,7 +17276,7 @@ function useNavItemDrag({
|
|
|
17731
17276
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
17732
17277
|
unlockItemDragInteraction();
|
|
17733
17278
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
17734
|
-
const refreshNavDragVisuals = (0,
|
|
17279
|
+
const refreshNavDragVisuals = (0, import_react15.useCallback)(
|
|
17735
17280
|
(session, activeSlot, clientX, clientY) => {
|
|
17736
17281
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
17737
17282
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -17749,13 +17294,13 @@ function useNavItemDrag({
|
|
|
17749
17294
|
},
|
|
17750
17295
|
[setDraggedItemRect, setSiblingHintRects]
|
|
17751
17296
|
);
|
|
17752
|
-
const refreshNavDragVisualsRef = (0,
|
|
17297
|
+
const refreshNavDragVisualsRef = (0, import_react15.useRef)(refreshNavDragVisuals);
|
|
17753
17298
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
17754
|
-
const commitNavDragRef = (0,
|
|
17299
|
+
const commitNavDragRef = (0, import_react15.useRef)(() => {
|
|
17755
17300
|
});
|
|
17756
|
-
const beginNavDragRef = (0,
|
|
17301
|
+
const beginNavDragRef = (0, import_react15.useRef)(() => {
|
|
17757
17302
|
});
|
|
17758
|
-
const beginNavDrag = (0,
|
|
17303
|
+
const beginNavDrag = (0, import_react15.useCallback)(
|
|
17759
17304
|
(session) => {
|
|
17760
17305
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
17761
17306
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -17794,7 +17339,7 @@ function useNavItemDrag({
|
|
|
17794
17339
|
]
|
|
17795
17340
|
);
|
|
17796
17341
|
beginNavDragRef.current = beginNavDrag;
|
|
17797
|
-
const commitNavDrag = (0,
|
|
17342
|
+
const commitNavDrag = (0, import_react15.useCallback)(
|
|
17798
17343
|
(clientX, clientY) => {
|
|
17799
17344
|
const session = navDragRef.current;
|
|
17800
17345
|
if (!session) {
|
|
@@ -17873,7 +17418,7 @@ function useNavItemDrag({
|
|
|
17873
17418
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
17874
17419
|
);
|
|
17875
17420
|
commitNavDragRef.current = commitNavDrag;
|
|
17876
|
-
const startNavLinkDrag = (0,
|
|
17421
|
+
const startNavLinkDrag = (0, import_react15.useCallback)(
|
|
17877
17422
|
(anchor, clientX, clientY, wasSelected) => {
|
|
17878
17423
|
if (footerDragRef.current) return false;
|
|
17879
17424
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -17891,7 +17436,7 @@ function useNavItemDrag({
|
|
|
17891
17436
|
},
|
|
17892
17437
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
17893
17438
|
);
|
|
17894
|
-
const onNavDragOver = (0,
|
|
17439
|
+
const onNavDragOver = (0, import_react15.useCallback)(
|
|
17895
17440
|
(e) => {
|
|
17896
17441
|
const session = navDragRef.current;
|
|
17897
17442
|
if (!session) return false;
|
|
@@ -17903,7 +17448,7 @@ function useNavItemDrag({
|
|
|
17903
17448
|
},
|
|
17904
17449
|
[]
|
|
17905
17450
|
);
|
|
17906
|
-
(0,
|
|
17451
|
+
(0, import_react15.useEffect)(() => {
|
|
17907
17452
|
if (!isEditMode) return;
|
|
17908
17453
|
const THRESHOLD = 10;
|
|
17909
17454
|
const resolveWasSelected = (el) => {
|
|
@@ -18030,7 +17575,7 @@ function useNavItemDrag({
|
|
|
18030
17575
|
setLinkPopover,
|
|
18031
17576
|
suppressNextClickRef
|
|
18032
17577
|
]);
|
|
18033
|
-
const armNavPressFromChrome = (0,
|
|
17578
|
+
const armNavPressFromChrome = (0, import_react15.useCallback)(
|
|
18034
17579
|
(selected, clientX, clientY, pointerId) => {
|
|
18035
17580
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
18036
17581
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -18062,7 +17607,7 @@ function useNavItemDrag({
|
|
|
18062
17607
|
}
|
|
18063
17608
|
|
|
18064
17609
|
// src/useSectionDrag.ts
|
|
18065
|
-
var
|
|
17610
|
+
var import_react16 = require("react");
|
|
18066
17611
|
|
|
18067
17612
|
// src/lib/section-dnd.ts
|
|
18068
17613
|
function isFooterSection(el) {
|
|
@@ -18155,21 +17700,21 @@ function useSectionDrag({
|
|
|
18155
17700
|
suppressNextClickRef,
|
|
18156
17701
|
suppressClickUntilRef
|
|
18157
17702
|
}) {
|
|
18158
|
-
const sectionDragRef = (0,
|
|
18159
|
-
const [sectionDropSlots, setSectionDropSlots] = (0,
|
|
18160
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0,
|
|
18161
|
-
const [isSectionDragging, setIsSectionDragging] = (0,
|
|
18162
|
-
const sectionPointerDragRef = (0,
|
|
18163
|
-
const autoScrollRafRef = (0,
|
|
18164
|
-
const autoScrollDeltaRef = (0,
|
|
18165
|
-
const stopAutoScroll = (0,
|
|
17703
|
+
const sectionDragRef = (0, import_react16.useRef)(null);
|
|
17704
|
+
const [sectionDropSlots, setSectionDropSlots] = (0, import_react16.useState)([]);
|
|
17705
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react16.useState)(null);
|
|
17706
|
+
const [isSectionDragging, setIsSectionDragging] = (0, import_react16.useState)(false);
|
|
17707
|
+
const sectionPointerDragRef = (0, import_react16.useRef)(null);
|
|
17708
|
+
const autoScrollRafRef = (0, import_react16.useRef)(null);
|
|
17709
|
+
const autoScrollDeltaRef = (0, import_react16.useRef)(0);
|
|
17710
|
+
const stopAutoScroll = (0, import_react16.useCallback)(() => {
|
|
18166
17711
|
if (autoScrollRafRef.current != null) {
|
|
18167
17712
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
18168
17713
|
autoScrollRafRef.current = null;
|
|
18169
17714
|
}
|
|
18170
17715
|
autoScrollDeltaRef.current = 0;
|
|
18171
17716
|
}, []);
|
|
18172
|
-
const tickAutoScroll = (0,
|
|
17717
|
+
const tickAutoScroll = (0, import_react16.useCallback)(() => {
|
|
18173
17718
|
if (!sectionDragRef.current) {
|
|
18174
17719
|
stopAutoScroll();
|
|
18175
17720
|
return;
|
|
@@ -18179,7 +17724,7 @@ function useSectionDrag({
|
|
|
18179
17724
|
}
|
|
18180
17725
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
18181
17726
|
}, [postToParentRef, stopAutoScroll]);
|
|
18182
|
-
const updateAutoScroll = (0,
|
|
17727
|
+
const updateAutoScroll = (0, import_react16.useCallback)(
|
|
18183
17728
|
(clientY) => {
|
|
18184
17729
|
const clip = getIframeChromeClip(parentScrollRef.current);
|
|
18185
17730
|
let delta = 0;
|
|
@@ -18201,7 +17746,7 @@ function useSectionDrag({
|
|
|
18201
17746
|
},
|
|
18202
17747
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
18203
17748
|
);
|
|
18204
|
-
const clearSectionDragVisuals = (0,
|
|
17749
|
+
const clearSectionDragVisuals = (0, import_react16.useCallback)(() => {
|
|
18205
17750
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
18206
17751
|
sectionDragRef.current = null;
|
|
18207
17752
|
setSectionDropSlots([]);
|
|
@@ -18211,7 +17756,7 @@ function useSectionDrag({
|
|
|
18211
17756
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
18212
17757
|
unlockItemDragInteraction();
|
|
18213
17758
|
}, [stopAutoScroll]);
|
|
18214
|
-
const refreshSectionDragVisuals = (0,
|
|
17759
|
+
const refreshSectionDragVisuals = (0, import_react16.useCallback)(
|
|
18215
17760
|
(session, clientX, clientY) => {
|
|
18216
17761
|
session.lastClientX = clientX;
|
|
18217
17762
|
session.lastClientY = clientY;
|
|
@@ -18225,7 +17770,7 @@ function useSectionDrag({
|
|
|
18225
17770
|
},
|
|
18226
17771
|
[updateAutoScroll]
|
|
18227
17772
|
);
|
|
18228
|
-
const beginSectionDrag = (0,
|
|
17773
|
+
const beginSectionDrag = (0, import_react16.useCallback)(
|
|
18229
17774
|
(session) => {
|
|
18230
17775
|
sectionDragRef.current = session;
|
|
18231
17776
|
setIsSectionDragging(true);
|
|
@@ -18236,7 +17781,7 @@ function useSectionDrag({
|
|
|
18236
17781
|
},
|
|
18237
17782
|
[refreshSectionDragVisuals]
|
|
18238
17783
|
);
|
|
18239
|
-
const commitSectionDrag = (0,
|
|
17784
|
+
const commitSectionDrag = (0, import_react16.useCallback)(() => {
|
|
18240
17785
|
const session = sectionDragRef.current;
|
|
18241
17786
|
if (!session) {
|
|
18242
17787
|
clearSectionDragVisuals();
|
|
@@ -18265,7 +17810,7 @@ function useSectionDrag({
|
|
|
18265
17810
|
});
|
|
18266
17811
|
});
|
|
18267
17812
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
18268
|
-
const startSectionPressDrag = (0,
|
|
17813
|
+
const startSectionPressDrag = (0, import_react16.useCallback)(
|
|
18269
17814
|
(el, clientX, clientY, pointerId) => {
|
|
18270
17815
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
18271
17816
|
const instanceId = instanceIdOf(el);
|
|
@@ -18282,7 +17827,7 @@ function useSectionDrag({
|
|
|
18282
17827
|
},
|
|
18283
17828
|
[footerDragRef, navDragRef]
|
|
18284
17829
|
);
|
|
18285
|
-
(0,
|
|
17830
|
+
(0, import_react16.useEffect)(() => {
|
|
18286
17831
|
if (!isEditMode) return;
|
|
18287
17832
|
const onPointerDown = (e) => {
|
|
18288
17833
|
if (e.button !== 0) return;
|
|
@@ -18387,8 +17932,8 @@ function useSectionDrag({
|
|
|
18387
17932
|
}
|
|
18388
17933
|
|
|
18389
17934
|
// src/ui/footer-container-chrome.tsx
|
|
18390
|
-
var
|
|
18391
|
-
var
|
|
17935
|
+
var import_lucide_react17 = require("lucide-react");
|
|
17936
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
18392
17937
|
function FooterContainerChrome({
|
|
18393
17938
|
rect,
|
|
18394
17939
|
onAdd,
|
|
@@ -18396,7 +17941,7 @@ function FooterContainerChrome({
|
|
|
18396
17941
|
}) {
|
|
18397
17942
|
const chromeGap = 6;
|
|
18398
17943
|
const buttonMargin = 7;
|
|
18399
|
-
return /* @__PURE__ */ (0,
|
|
17944
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
18400
17945
|
"div",
|
|
18401
17946
|
{
|
|
18402
17947
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -18408,8 +17953,8 @@ function FooterContainerChrome({
|
|
|
18408
17953
|
width: rect.width + chromeGap * 2,
|
|
18409
17954
|
height: rect.height + chromeGap * 2
|
|
18410
17955
|
},
|
|
18411
|
-
children: /* @__PURE__ */ (0,
|
|
18412
|
-
/* @__PURE__ */ (0,
|
|
17956
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
17957
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
18413
17958
|
"button",
|
|
18414
17959
|
{
|
|
18415
17960
|
type: "button",
|
|
@@ -18428,17 +17973,17 @@ function FooterContainerChrome({
|
|
|
18428
17973
|
if (addDisabled) return;
|
|
18429
17974
|
onAdd();
|
|
18430
17975
|
},
|
|
18431
|
-
children: /* @__PURE__ */ (0,
|
|
17976
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
18432
17977
|
}
|
|
18433
17978
|
) }),
|
|
18434
|
-
/* @__PURE__ */ (0,
|
|
17979
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
18435
17980
|
] })
|
|
18436
17981
|
}
|
|
18437
17982
|
) });
|
|
18438
17983
|
}
|
|
18439
17984
|
|
|
18440
17985
|
// src/lib/carousel.ts
|
|
18441
|
-
var
|
|
17986
|
+
var import_react17 = require("react");
|
|
18442
17987
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
18443
17988
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
18444
17989
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -18500,8 +18045,8 @@ function applyCarouselNode(key, val) {
|
|
|
18500
18045
|
return true;
|
|
18501
18046
|
}
|
|
18502
18047
|
function useOhwCarousel(key, initial) {
|
|
18503
|
-
const [images, setImages] = (0,
|
|
18504
|
-
(0,
|
|
18048
|
+
const [images, setImages] = (0, import_react17.useState)(initial);
|
|
18049
|
+
(0, import_react17.useEffect)(() => {
|
|
18505
18050
|
const el = document.querySelector(
|
|
18506
18051
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
18507
18052
|
);
|
|
@@ -18920,14 +18465,14 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
18920
18465
|
}
|
|
18921
18466
|
|
|
18922
18467
|
// src/ui/navbar-container-chrome.tsx
|
|
18923
|
-
var
|
|
18924
|
-
var
|
|
18468
|
+
var import_lucide_react18 = require("lucide-react");
|
|
18469
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
18925
18470
|
function NavbarContainerChrome({
|
|
18926
18471
|
rect,
|
|
18927
18472
|
onAdd
|
|
18928
18473
|
}) {
|
|
18929
18474
|
const chromeGap = 6;
|
|
18930
|
-
return /* @__PURE__ */ (0,
|
|
18475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
18931
18476
|
"div",
|
|
18932
18477
|
{
|
|
18933
18478
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -18939,7 +18484,7 @@ function NavbarContainerChrome({
|
|
|
18939
18484
|
width: rect.width + chromeGap * 2,
|
|
18940
18485
|
height: rect.height + chromeGap * 2
|
|
18941
18486
|
},
|
|
18942
|
-
children: /* @__PURE__ */ (0,
|
|
18487
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
18943
18488
|
"button",
|
|
18944
18489
|
{
|
|
18945
18490
|
type: "button",
|
|
@@ -18956,7 +18501,7 @@ function NavbarContainerChrome({
|
|
|
18956
18501
|
e.stopPropagation();
|
|
18957
18502
|
onAdd();
|
|
18958
18503
|
},
|
|
18959
|
-
children: /* @__PURE__ */ (0,
|
|
18504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
18960
18505
|
}
|
|
18961
18506
|
)
|
|
18962
18507
|
}
|
|
@@ -18965,7 +18510,7 @@ function NavbarContainerChrome({
|
|
|
18965
18510
|
|
|
18966
18511
|
// src/ui/drop-indicator.tsx
|
|
18967
18512
|
var React11 = __toESM(require("react"), 1);
|
|
18968
|
-
var
|
|
18513
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
18969
18514
|
var dropIndicatorVariants = cva(
|
|
18970
18515
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
18971
18516
|
{
|
|
@@ -18989,7 +18534,7 @@ var dropIndicatorVariants = cva(
|
|
|
18989
18534
|
);
|
|
18990
18535
|
var DropIndicator = React11.forwardRef(
|
|
18991
18536
|
({ className, direction, state, ...props }, ref) => {
|
|
18992
|
-
return /* @__PURE__ */ (0,
|
|
18537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
18993
18538
|
"div",
|
|
18994
18539
|
{
|
|
18995
18540
|
ref,
|
|
@@ -19006,7 +18551,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
19006
18551
|
DropIndicator.displayName = "DropIndicator";
|
|
19007
18552
|
|
|
19008
18553
|
// src/ui/badge.tsx
|
|
19009
|
-
var
|
|
18554
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
19010
18555
|
var badgeVariants = cva(
|
|
19011
18556
|
"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",
|
|
19012
18557
|
{
|
|
@@ -19024,13 +18569,13 @@ var badgeVariants = cva(
|
|
|
19024
18569
|
}
|
|
19025
18570
|
);
|
|
19026
18571
|
function Badge({ className, variant, ...props }) {
|
|
19027
|
-
return /* @__PURE__ */ (0,
|
|
18572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
19028
18573
|
}
|
|
19029
18574
|
|
|
19030
18575
|
// src/OhhwellsBridge.tsx
|
|
19031
|
-
var
|
|
19032
|
-
var
|
|
19033
|
-
var
|
|
18576
|
+
var import_lucide_react19 = require("lucide-react");
|
|
18577
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
18578
|
+
var PRIMARY4 = "#0885FE";
|
|
19034
18579
|
var IMAGE_FADE_MS = 300;
|
|
19035
18580
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
19036
18581
|
function runOpacityFade(el, onDone) {
|
|
@@ -19151,7 +18696,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
19151
18696
|
schedulingRoots.set(container, root);
|
|
19152
18697
|
(0, import_react_dom4.flushSync)(() => {
|
|
19153
18698
|
root.render(
|
|
19154
|
-
/* @__PURE__ */ (0,
|
|
18699
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
19155
18700
|
SchedulingWidget,
|
|
19156
18701
|
{
|
|
19157
18702
|
notifyOnConnect: false,
|
|
@@ -19279,7 +18824,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
19279
18824
|
schedulingRoots.set(container, root);
|
|
19280
18825
|
(0, import_react_dom4.flushSync)(() => {
|
|
19281
18826
|
root.render(
|
|
19282
|
-
/* @__PURE__ */ (0,
|
|
18827
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
19283
18828
|
SchedulingWidget,
|
|
19284
18829
|
{
|
|
19285
18830
|
notifyOnConnect,
|
|
@@ -20015,7 +19560,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
20015
19560
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
20016
19561
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
20017
19562
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
20018
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
19563
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY4})`;
|
|
20019
19564
|
var TOOLBAR_GROUPS = [
|
|
20020
19565
|
[
|
|
20021
19566
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -20041,7 +19586,7 @@ function EditGlowChrome({
|
|
|
20041
19586
|
hideHandle = false
|
|
20042
19587
|
}) {
|
|
20043
19588
|
const GAP = SELECTION_CHROME_GAP2;
|
|
20044
|
-
return /* @__PURE__ */ (0,
|
|
19589
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20045
19590
|
"div",
|
|
20046
19591
|
{
|
|
20047
19592
|
ref: elRef,
|
|
@@ -20056,7 +19601,7 @@ function EditGlowChrome({
|
|
|
20056
19601
|
zIndex: 2147483646
|
|
20057
19602
|
},
|
|
20058
19603
|
children: [
|
|
20059
|
-
/* @__PURE__ */ (0,
|
|
19604
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20060
19605
|
"div",
|
|
20061
19606
|
{
|
|
20062
19607
|
style: {
|
|
@@ -20070,7 +19615,7 @@ function EditGlowChrome({
|
|
|
20070
19615
|
}
|
|
20071
19616
|
}
|
|
20072
19617
|
),
|
|
20073
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
19618
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20074
19619
|
"div",
|
|
20075
19620
|
{
|
|
20076
19621
|
"data-ohw-drag-handle-container": "",
|
|
@@ -20082,7 +19627,7 @@ function EditGlowChrome({
|
|
|
20082
19627
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
20083
19628
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
20084
19629
|
},
|
|
20085
|
-
children: /* @__PURE__ */ (0,
|
|
19630
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20086
19631
|
DragHandle,
|
|
20087
19632
|
{
|
|
20088
19633
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -20259,9 +19804,9 @@ function FloatingToolbar({
|
|
|
20259
19804
|
showEditLink,
|
|
20260
19805
|
onEditLink
|
|
20261
19806
|
}) {
|
|
20262
|
-
const localRef =
|
|
20263
|
-
const [measuredW, setMeasuredW] =
|
|
20264
|
-
const setRefs =
|
|
19807
|
+
const localRef = import_react18.default.useRef(null);
|
|
19808
|
+
const [measuredW, setMeasuredW] = import_react18.default.useState(330);
|
|
19809
|
+
const setRefs = import_react18.default.useCallback(
|
|
20265
19810
|
(node) => {
|
|
20266
19811
|
localRef.current = node;
|
|
20267
19812
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -20273,7 +19818,7 @@ function FloatingToolbar({
|
|
|
20273
19818
|
},
|
|
20274
19819
|
[elRef]
|
|
20275
19820
|
);
|
|
20276
|
-
|
|
19821
|
+
import_react18.default.useLayoutEffect(() => {
|
|
20277
19822
|
const node = localRef.current;
|
|
20278
19823
|
if (!node) return;
|
|
20279
19824
|
const update = () => {
|
|
@@ -20286,7 +19831,7 @@ function FloatingToolbar({
|
|
|
20286
19831
|
return () => ro.disconnect();
|
|
20287
19832
|
}, [showEditLink, activeCommands]);
|
|
20288
19833
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
20289
|
-
return /* @__PURE__ */ (0,
|
|
19834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20290
19835
|
"div",
|
|
20291
19836
|
{
|
|
20292
19837
|
ref: setRefs,
|
|
@@ -20298,12 +19843,12 @@ function FloatingToolbar({
|
|
|
20298
19843
|
zIndex: 2147483647,
|
|
20299
19844
|
pointerEvents: "auto"
|
|
20300
19845
|
},
|
|
20301
|
-
children: /* @__PURE__ */ (0,
|
|
20302
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
20303
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
19846
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(CustomToolbar, { children: [
|
|
19847
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react18.default.Fragment, { children: [
|
|
19848
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomToolbarDivider, {}),
|
|
20304
19849
|
btns.map((btn) => {
|
|
20305
19850
|
const isActive = activeCommands.has(btn.cmd);
|
|
20306
|
-
return /* @__PURE__ */ (0,
|
|
19851
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20307
19852
|
CustomToolbarButton,
|
|
20308
19853
|
{
|
|
20309
19854
|
title: btn.title,
|
|
@@ -20312,7 +19857,7 @@ function FloatingToolbar({
|
|
|
20312
19857
|
e.preventDefault();
|
|
20313
19858
|
onCommand(btn.cmd);
|
|
20314
19859
|
},
|
|
20315
|
-
children: /* @__PURE__ */ (0,
|
|
19860
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20316
19861
|
"svg",
|
|
20317
19862
|
{
|
|
20318
19863
|
width: "16",
|
|
@@ -20333,7 +19878,7 @@ function FloatingToolbar({
|
|
|
20333
19878
|
);
|
|
20334
19879
|
})
|
|
20335
19880
|
] }, gi)),
|
|
20336
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
19881
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20337
19882
|
CustomToolbarButton,
|
|
20338
19883
|
{
|
|
20339
19884
|
type: "button",
|
|
@@ -20347,7 +19892,7 @@ function FloatingToolbar({
|
|
|
20347
19892
|
e.preventDefault();
|
|
20348
19893
|
e.stopPropagation();
|
|
20349
19894
|
},
|
|
20350
|
-
children: /* @__PURE__ */ (0,
|
|
19895
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
20351
19896
|
}
|
|
20352
19897
|
) : null
|
|
20353
19898
|
] })
|
|
@@ -20364,7 +19909,7 @@ function StateToggle({
|
|
|
20364
19909
|
states,
|
|
20365
19910
|
onStateChange
|
|
20366
19911
|
}) {
|
|
20367
|
-
return /* @__PURE__ */ (0,
|
|
19912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20368
19913
|
ToggleGroup,
|
|
20369
19914
|
{
|
|
20370
19915
|
"data-ohw-state-toggle": "",
|
|
@@ -20378,7 +19923,7 @@ function StateToggle({
|
|
|
20378
19923
|
left: rect.right - 8,
|
|
20379
19924
|
transform: "translateX(-100%)"
|
|
20380
19925
|
},
|
|
20381
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
19926
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
20382
19927
|
}
|
|
20383
19928
|
);
|
|
20384
19929
|
}
|
|
@@ -20395,9 +19940,9 @@ var OHW_LOADER_STYLE = {
|
|
|
20395
19940
|
justifyContent: "center"
|
|
20396
19941
|
};
|
|
20397
19942
|
function OhwLoaderSpinner() {
|
|
20398
|
-
return /* @__PURE__ */ (0,
|
|
20399
|
-
/* @__PURE__ */ (0,
|
|
20400
|
-
/* @__PURE__ */ (0,
|
|
19943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
19944
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
19945
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20401
19946
|
"circle",
|
|
20402
19947
|
{
|
|
20403
19948
|
cx: "14",
|
|
@@ -20407,7 +19952,7 @@ function OhwLoaderSpinner() {
|
|
|
20407
19952
|
strokeWidth: "3",
|
|
20408
19953
|
strokeDasharray: "17 52",
|
|
20409
19954
|
strokeLinecap: "round",
|
|
20410
|
-
children: /* @__PURE__ */ (0,
|
|
19955
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20411
19956
|
"animateTransform",
|
|
20412
19957
|
{
|
|
20413
19958
|
attributeName: "transform",
|
|
@@ -20423,7 +19968,7 @@ function OhwLoaderSpinner() {
|
|
|
20423
19968
|
] });
|
|
20424
19969
|
}
|
|
20425
19970
|
function OhwBrandMark() {
|
|
20426
|
-
return /* @__PURE__ */ (0,
|
|
19971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20427
19972
|
"svg",
|
|
20428
19973
|
{
|
|
20429
19974
|
width: "16",
|
|
@@ -20434,7 +19979,7 @@ function OhwBrandMark() {
|
|
|
20434
19979
|
style: { display: "block", flexShrink: 0 },
|
|
20435
19980
|
xmlns: "http://www.w3.org/2000/svg",
|
|
20436
19981
|
children: [
|
|
20437
|
-
/* @__PURE__ */ (0,
|
|
19982
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20438
19983
|
"mask",
|
|
20439
19984
|
{
|
|
20440
19985
|
id: "ohw-badge-mark",
|
|
@@ -20444,15 +19989,15 @@ function OhwBrandMark() {
|
|
|
20444
19989
|
y: "0",
|
|
20445
19990
|
width: "48",
|
|
20446
19991
|
height: "48",
|
|
20447
|
-
children: /* @__PURE__ */ (0,
|
|
19992
|
+
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" })
|
|
20448
19993
|
}
|
|
20449
19994
|
),
|
|
20450
|
-
/* @__PURE__ */ (0,
|
|
20451
|
-
/* @__PURE__ */ (0,
|
|
20452
|
-
/* @__PURE__ */ (0,
|
|
20453
|
-
/* @__PURE__ */ (0,
|
|
20454
|
-
/* @__PURE__ */ (0,
|
|
20455
|
-
/* @__PURE__ */ (0,
|
|
19995
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
19996
|
+
/* @__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" }),
|
|
19997
|
+
/* @__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" }),
|
|
19998
|
+
/* @__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" }),
|
|
19999
|
+
/* @__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" }),
|
|
20000
|
+
/* @__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" })
|
|
20456
20001
|
] })
|
|
20457
20002
|
]
|
|
20458
20003
|
}
|
|
@@ -20489,7 +20034,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
20489
20034
|
whiteSpace: "nowrap"
|
|
20490
20035
|
};
|
|
20491
20036
|
function MadeWithOhhWells() {
|
|
20492
|
-
return /* @__PURE__ */ (0,
|
|
20037
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20493
20038
|
"a",
|
|
20494
20039
|
{
|
|
20495
20040
|
href: "https://ohhwells.com",
|
|
@@ -20499,8 +20044,8 @@ function MadeWithOhhWells() {
|
|
|
20499
20044
|
"data-ohw-badge": "",
|
|
20500
20045
|
style: OHW_BADGE_STYLE,
|
|
20501
20046
|
children: [
|
|
20502
|
-
/* @__PURE__ */ (0,
|
|
20503
|
-
/* @__PURE__ */ (0,
|
|
20047
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OhwBrandMark, {}),
|
|
20048
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
20504
20049
|
]
|
|
20505
20050
|
}
|
|
20506
20051
|
);
|
|
@@ -20546,8 +20091,8 @@ function OhhwellsBridge() {
|
|
|
20546
20091
|
const router = (0, import_navigation3.useRouter)();
|
|
20547
20092
|
const searchParams = (0, import_navigation3.useSearchParams)();
|
|
20548
20093
|
const isEditMode = isEditSessionActive();
|
|
20549
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
20550
|
-
(0,
|
|
20094
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react18.useState)(null);
|
|
20095
|
+
(0, import_react18.useEffect)(() => {
|
|
20551
20096
|
const figtreeFontId = "ohw-figtree-font";
|
|
20552
20097
|
if (!document.getElementById(figtreeFontId)) {
|
|
20553
20098
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -20573,8 +20118,8 @@ function OhhwellsBridge() {
|
|
|
20573
20118
|
};
|
|
20574
20119
|
}, []);
|
|
20575
20120
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
20576
|
-
const [subdomain, setSubdomain] = (0,
|
|
20577
|
-
(0,
|
|
20121
|
+
const [subdomain, setSubdomain] = (0, import_react18.useState)(() => resolveSubdomain(subdomainFromQuery));
|
|
20122
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
20578
20123
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
20579
20124
|
if (next !== subdomain) setSubdomain(next);
|
|
20580
20125
|
if (next) return;
|
|
@@ -20586,7 +20131,7 @@ function OhhwellsBridge() {
|
|
|
20586
20131
|
}, 0);
|
|
20587
20132
|
return () => window.clearTimeout(t);
|
|
20588
20133
|
}, [subdomainFromQuery, subdomain]);
|
|
20589
|
-
(0,
|
|
20134
|
+
(0, import_react18.useEffect)(() => {
|
|
20590
20135
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
20591
20136
|
const url = new URL(window.location.href);
|
|
20592
20137
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -20595,45 +20140,45 @@ function OhhwellsBridge() {
|
|
|
20595
20140
|
}, [subdomainFromQuery]);
|
|
20596
20141
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
20597
20142
|
useSavedLinkNavigation(isEditMode);
|
|
20598
|
-
const postToParent2 = (0,
|
|
20143
|
+
const postToParent2 = (0, import_react18.useCallback)((data) => {
|
|
20599
20144
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
20600
20145
|
window.parent.postMessage(data, "*");
|
|
20601
20146
|
}
|
|
20602
20147
|
}, []);
|
|
20603
|
-
const [fetchState, setFetchState] = (0,
|
|
20604
|
-
const [showBranding, setShowBranding] = (0,
|
|
20605
|
-
const autoSaveTimers = (0,
|
|
20606
|
-
const activeElRef = (0,
|
|
20607
|
-
const pointerHeldRef = (0,
|
|
20608
|
-
const selectedElRef = (0,
|
|
20609
|
-
const selectedHrefKeyRef = (0,
|
|
20610
|
-
const selectedFooterColAttrRef = (0,
|
|
20611
|
-
const originalContentRef = (0,
|
|
20612
|
-
const activeStateElRef = (0,
|
|
20613
|
-
const parentScrollRef = (0,
|
|
20614
|
-
const visibleViewportRef = (0,
|
|
20615
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
20616
|
-
const attachVisibleViewport = (0,
|
|
20148
|
+
const [fetchState, setFetchState] = (0, import_react18.useState)("idle");
|
|
20149
|
+
const [showBranding, setShowBranding] = (0, import_react18.useState)(false);
|
|
20150
|
+
const autoSaveTimers = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
|
|
20151
|
+
const activeElRef = (0, import_react18.useRef)(null);
|
|
20152
|
+
const pointerHeldRef = (0, import_react18.useRef)(false);
|
|
20153
|
+
const selectedElRef = (0, import_react18.useRef)(null);
|
|
20154
|
+
const selectedHrefKeyRef = (0, import_react18.useRef)(null);
|
|
20155
|
+
const selectedFooterColAttrRef = (0, import_react18.useRef)(null);
|
|
20156
|
+
const originalContentRef = (0, import_react18.useRef)(null);
|
|
20157
|
+
const activeStateElRef = (0, import_react18.useRef)(null);
|
|
20158
|
+
const parentScrollRef = (0, import_react18.useRef)(null);
|
|
20159
|
+
const visibleViewportRef = (0, import_react18.useRef)(null);
|
|
20160
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react18.useState)(null);
|
|
20161
|
+
const attachVisibleViewport = (0, import_react18.useCallback)((node) => {
|
|
20617
20162
|
visibleViewportRef.current = node;
|
|
20618
20163
|
setDialogPortalContainer(node);
|
|
20619
20164
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
20620
20165
|
}, []);
|
|
20621
|
-
const toolbarElRef = (0,
|
|
20622
|
-
const glowElRef = (0,
|
|
20623
|
-
const hoveredImageRef = (0,
|
|
20624
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
20625
|
-
const dragOverElRef = (0,
|
|
20626
|
-
const [mediaHover, setMediaHover] = (0,
|
|
20627
|
-
const [selectedAiSectionId, setSelectedAiSectionId] = (0,
|
|
20628
|
-
const selectedAiSectionIdRef = (0,
|
|
20629
|
-
const handleAiSectionSelectionChange = (0,
|
|
20166
|
+
const toolbarElRef = (0, import_react18.useRef)(null);
|
|
20167
|
+
const glowElRef = (0, import_react18.useRef)(null);
|
|
20168
|
+
const hoveredImageRef = (0, import_react18.useRef)(null);
|
|
20169
|
+
const hoveredImageHasTextOverlapRef = (0, import_react18.useRef)(false);
|
|
20170
|
+
const dragOverElRef = (0, import_react18.useRef)(null);
|
|
20171
|
+
const [mediaHover, setMediaHover] = (0, import_react18.useState)(null);
|
|
20172
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react18.useState)(null);
|
|
20173
|
+
const selectedAiSectionIdRef = (0, import_react18.useRef)(null);
|
|
20174
|
+
const handleAiSectionSelectionChange = (0, import_react18.useCallback)((id) => {
|
|
20630
20175
|
selectedAiSectionIdRef.current = id;
|
|
20631
20176
|
setSelectedAiSectionId(id);
|
|
20632
20177
|
}, []);
|
|
20633
|
-
const [selectedMedia, setSelectedMedia] = (0,
|
|
20634
|
-
const selectedMediaElRef = (0,
|
|
20635
|
-
const mediaKeyDropTokenRef = (0,
|
|
20636
|
-
const clearMediaSelection = (0,
|
|
20178
|
+
const [selectedMedia, setSelectedMedia] = (0, import_react18.useState)(null);
|
|
20179
|
+
const selectedMediaElRef = (0, import_react18.useRef)(null);
|
|
20180
|
+
const mediaKeyDropTokenRef = (0, import_react18.useRef)(0);
|
|
20181
|
+
const clearMediaSelection = (0, import_react18.useCallback)(() => {
|
|
20637
20182
|
const prev = selectedMediaElRef.current;
|
|
20638
20183
|
selectedMediaElRef.current = null;
|
|
20639
20184
|
setSelectedMedia(null);
|
|
@@ -20658,9 +20203,9 @@ function OhhwellsBridge() {
|
|
|
20658
20203
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
20659
20204
|
}
|
|
20660
20205
|
}, []);
|
|
20661
|
-
const clearMediaSelectionRef = (0,
|
|
20206
|
+
const clearMediaSelectionRef = (0, import_react18.useRef)(clearMediaSelection);
|
|
20662
20207
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
20663
|
-
const selectMediaElement = (0,
|
|
20208
|
+
const selectMediaElement = (0, import_react18.useCallback)((el) => {
|
|
20664
20209
|
const r2 = el.getBoundingClientRect();
|
|
20665
20210
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
20666
20211
|
selectedMediaElRef.current = el;
|
|
@@ -20684,9 +20229,9 @@ function OhhwellsBridge() {
|
|
|
20684
20229
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
20685
20230
|
});
|
|
20686
20231
|
}, []);
|
|
20687
|
-
const selectMediaElementRef = (0,
|
|
20232
|
+
const selectMediaElementRef = (0, import_react18.useRef)(selectMediaElement);
|
|
20688
20233
|
selectMediaElementRef.current = selectMediaElement;
|
|
20689
|
-
(0,
|
|
20234
|
+
(0, import_react18.useEffect)(() => {
|
|
20690
20235
|
if (!selectedMedia) return;
|
|
20691
20236
|
const update = () => {
|
|
20692
20237
|
const el = selectedMediaElRef.current;
|
|
@@ -20706,55 +20251,55 @@ function OhhwellsBridge() {
|
|
|
20706
20251
|
window.removeEventListener("resize", update);
|
|
20707
20252
|
};
|
|
20708
20253
|
}, [selectedMedia !== null]);
|
|
20709
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
20710
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
20711
|
-
const hoveredGapRef = (0,
|
|
20712
|
-
const imageUnhoverTimerRef = (0,
|
|
20713
|
-
const imageShowTimerRef = (0,
|
|
20714
|
-
const editStylesRef = (0,
|
|
20715
|
-
const activateRef = (0,
|
|
20254
|
+
const [carouselHover, setCarouselHover] = (0, import_react18.useState)(null);
|
|
20255
|
+
const [uploadingRects, setUploadingRects] = (0, import_react18.useState)({});
|
|
20256
|
+
const hoveredGapRef = (0, import_react18.useRef)(null);
|
|
20257
|
+
const imageUnhoverTimerRef = (0, import_react18.useRef)(null);
|
|
20258
|
+
const imageShowTimerRef = (0, import_react18.useRef)(null);
|
|
20259
|
+
const editStylesRef = (0, import_react18.useRef)(null);
|
|
20260
|
+
const activateRef = (0, import_react18.useRef)(() => {
|
|
20716
20261
|
});
|
|
20717
|
-
const deactivateRef = (0,
|
|
20262
|
+
const deactivateRef = (0, import_react18.useRef)(() => {
|
|
20718
20263
|
});
|
|
20719
|
-
const selectRef = (0,
|
|
20264
|
+
const selectRef = (0, import_react18.useRef)(() => {
|
|
20720
20265
|
});
|
|
20721
|
-
const selectFrameRef = (0,
|
|
20266
|
+
const selectFrameRef = (0, import_react18.useRef)(() => {
|
|
20722
20267
|
});
|
|
20723
|
-
const selectLogoRef = (0,
|
|
20268
|
+
const selectLogoRef = (0, import_react18.useRef)(() => {
|
|
20724
20269
|
});
|
|
20725
|
-
const openLogoSizePanelRef = (0,
|
|
20270
|
+
const openLogoSizePanelRef = (0, import_react18.useRef)(() => {
|
|
20726
20271
|
});
|
|
20727
|
-
const deselectRef = (0,
|
|
20272
|
+
const deselectRef = (0, import_react18.useRef)(() => {
|
|
20728
20273
|
});
|
|
20729
|
-
const closeFloatingPanelOnlyRef = (0,
|
|
20274
|
+
const closeFloatingPanelOnlyRef = (0, import_react18.useRef)(() => {
|
|
20730
20275
|
});
|
|
20731
|
-
const reselectNavigationItemRef = (0,
|
|
20276
|
+
const reselectNavigationItemRef = (0, import_react18.useRef)(() => {
|
|
20732
20277
|
});
|
|
20733
|
-
const commitNavigationTextEditRef = (0,
|
|
20278
|
+
const commitNavigationTextEditRef = (0, import_react18.useRef)(() => {
|
|
20734
20279
|
});
|
|
20735
|
-
const handleDeleteSelectedRef = (0,
|
|
20736
|
-
const runPendingDeleteUndoRef = (0,
|
|
20737
|
-
const isFooterFrameSelectionRef = (0,
|
|
20738
|
-
const refreshActiveCommandsRef = (0,
|
|
20280
|
+
const handleDeleteSelectedRef = (0, import_react18.useRef)(() => false);
|
|
20281
|
+
const runPendingDeleteUndoRef = (0, import_react18.useRef)(() => false);
|
|
20282
|
+
const isFooterFrameSelectionRef = (0, import_react18.useRef)(false);
|
|
20283
|
+
const refreshActiveCommandsRef = (0, import_react18.useRef)(() => {
|
|
20739
20284
|
});
|
|
20740
|
-
const postToParentRef = (0,
|
|
20285
|
+
const postToParentRef = (0, import_react18.useRef)(postToParent2);
|
|
20741
20286
|
postToParentRef.current = postToParent2;
|
|
20742
|
-
const aiSectionApiRef = (0,
|
|
20743
|
-
const applyTreeLocalRef = (0,
|
|
20744
|
-
const sectionsLoadedRef = (0,
|
|
20745
|
-
const pendingScheduleConfigRequests = (0,
|
|
20746
|
-
const [toolbarRect, setToolbarRect] = (0,
|
|
20747
|
-
const [formPickRect, setFormPickRect] = (0,
|
|
20748
|
-
const formPickElRef = (0,
|
|
20749
|
-
const [formViewState, setFormViewStateUi] = (0,
|
|
20750
|
-
const [formPickCount, setFormPickCount] = (0,
|
|
20751
|
-
const [formHoverRect, setFormHoverRect] = (0,
|
|
20752
|
-
const formHoverElRef = (0,
|
|
20753
|
-
const [fieldPickRect, setFieldPickRect] = (0,
|
|
20754
|
-
const fieldPickElRef = (0,
|
|
20755
|
-
const [fieldPickState, setFieldPickState] = (0,
|
|
20756
|
-
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0,
|
|
20757
|
-
const clearFormPick = (0,
|
|
20287
|
+
const aiSectionApiRef = (0, import_react18.useRef)(null);
|
|
20288
|
+
const applyTreeLocalRef = (0, import_react18.useRef)(null);
|
|
20289
|
+
const sectionsLoadedRef = (0, import_react18.useRef)(false);
|
|
20290
|
+
const pendingScheduleConfigRequests = (0, import_react18.useRef)([]);
|
|
20291
|
+
const [toolbarRect, setToolbarRect] = (0, import_react18.useState)(null);
|
|
20292
|
+
const [formPickRect, setFormPickRect] = (0, import_react18.useState)(null);
|
|
20293
|
+
const formPickElRef = (0, import_react18.useRef)(null);
|
|
20294
|
+
const [formViewState, setFormViewStateUi] = (0, import_react18.useState)("default");
|
|
20295
|
+
const [formPickCount, setFormPickCount] = (0, import_react18.useState)(null);
|
|
20296
|
+
const [formHoverRect, setFormHoverRect] = (0, import_react18.useState)(null);
|
|
20297
|
+
const formHoverElRef = (0, import_react18.useRef)(null);
|
|
20298
|
+
const [fieldPickRect, setFieldPickRect] = (0, import_react18.useState)(null);
|
|
20299
|
+
const fieldPickElRef = (0, import_react18.useRef)(null);
|
|
20300
|
+
const [fieldPickState, setFieldPickState] = (0, import_react18.useState)(null);
|
|
20301
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react18.useState)(false);
|
|
20302
|
+
const clearFormPick = (0, import_react18.useCallback)(() => {
|
|
20758
20303
|
const form = formPickElRef.current;
|
|
20759
20304
|
const editing = fieldPickElRef.current;
|
|
20760
20305
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -20774,7 +20319,7 @@ function OhhwellsBridge() {
|
|
|
20774
20319
|
formPickElRef.current = null;
|
|
20775
20320
|
setFormPickRect(null);
|
|
20776
20321
|
}, []);
|
|
20777
|
-
const clearFieldPick = (0,
|
|
20322
|
+
const clearFieldPick = (0, import_react18.useCallback)(() => {
|
|
20778
20323
|
const wrapper = fieldPickElRef.current;
|
|
20779
20324
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
20780
20325
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -20784,9 +20329,9 @@ function OhhwellsBridge() {
|
|
|
20784
20329
|
setFieldPickRect(null);
|
|
20785
20330
|
setFieldPickState(null);
|
|
20786
20331
|
}, []);
|
|
20787
|
-
const persistFieldsRef = (0,
|
|
20332
|
+
const persistFieldsRef = (0, import_react18.useRef)(() => {
|
|
20788
20333
|
});
|
|
20789
|
-
const persistFields = (0,
|
|
20334
|
+
const persistFields = (0, import_react18.useCallback)(
|
|
20790
20335
|
(form) => {
|
|
20791
20336
|
const key = formKeyOf(form);
|
|
20792
20337
|
if (!key) return;
|
|
@@ -20797,7 +20342,7 @@ function OhhwellsBridge() {
|
|
|
20797
20342
|
[]
|
|
20798
20343
|
);
|
|
20799
20344
|
persistFieldsRef.current = persistFields;
|
|
20800
|
-
const selectField = (0,
|
|
20345
|
+
const selectField = (0, import_react18.useCallback)((wrapper) => {
|
|
20801
20346
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
20802
20347
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
20803
20348
|
}
|
|
@@ -20810,7 +20355,7 @@ function OhhwellsBridge() {
|
|
|
20810
20355
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
20811
20356
|
setFieldTypePickerOpen(false);
|
|
20812
20357
|
}, []);
|
|
20813
|
-
const withSelectedField = (0,
|
|
20358
|
+
const withSelectedField = (0, import_react18.useCallback)(
|
|
20814
20359
|
(run) => {
|
|
20815
20360
|
const wrapper = fieldPickElRef.current;
|
|
20816
20361
|
const form = formPickElRef.current;
|
|
@@ -20823,28 +20368,28 @@ function OhhwellsBridge() {
|
|
|
20823
20368
|
},
|
|
20824
20369
|
[persistFields]
|
|
20825
20370
|
);
|
|
20826
|
-
const handleFieldTypeChange = (0,
|
|
20371
|
+
const handleFieldTypeChange = (0, import_react18.useCallback)(
|
|
20827
20372
|
(type) => withSelectedField((_form, wrapper) => {
|
|
20828
20373
|
applyFieldType(wrapper, type);
|
|
20829
20374
|
selectField(wrapper);
|
|
20830
20375
|
}),
|
|
20831
20376
|
[selectField, withSelectedField]
|
|
20832
20377
|
);
|
|
20833
|
-
const handleFieldRequiredToggle = (0,
|
|
20378
|
+
const handleFieldRequiredToggle = (0, import_react18.useCallback)(
|
|
20834
20379
|
() => withSelectedField((_form, wrapper) => {
|
|
20835
20380
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
20836
20381
|
selectField(wrapper);
|
|
20837
20382
|
}),
|
|
20838
20383
|
[selectField, withSelectedField]
|
|
20839
20384
|
);
|
|
20840
|
-
const handleFieldDuplicate = (0,
|
|
20385
|
+
const handleFieldDuplicate = (0, import_react18.useCallback)(
|
|
20841
20386
|
() => withSelectedField((form, wrapper) => {
|
|
20842
20387
|
const copy = duplicateField(form, wrapper);
|
|
20843
20388
|
selectField(copy);
|
|
20844
20389
|
}),
|
|
20845
20390
|
[selectField, withSelectedField]
|
|
20846
20391
|
);
|
|
20847
|
-
const handleFieldDelete = (0,
|
|
20392
|
+
const handleFieldDelete = (0, import_react18.useCallback)(
|
|
20848
20393
|
() => withSelectedField((_form, wrapper) => {
|
|
20849
20394
|
removeField(wrapper);
|
|
20850
20395
|
clearFieldPick();
|
|
@@ -20852,7 +20397,7 @@ function OhhwellsBridge() {
|
|
|
20852
20397
|
}),
|
|
20853
20398
|
[clearFieldPick, withSelectedField]
|
|
20854
20399
|
);
|
|
20855
|
-
const handleAddField = (0,
|
|
20400
|
+
const handleAddField = (0, import_react18.useCallback)(
|
|
20856
20401
|
(type) => {
|
|
20857
20402
|
const form = formPickElRef.current;
|
|
20858
20403
|
if (!form) return;
|
|
@@ -20868,8 +20413,8 @@ function OhhwellsBridge() {
|
|
|
20868
20413
|
},
|
|
20869
20414
|
[persistFields, selectField]
|
|
20870
20415
|
);
|
|
20871
|
-
const fieldDragRef = (0,
|
|
20872
|
-
const buildFieldDropSlots = (0,
|
|
20416
|
+
const fieldDragRef = (0, import_react18.useRef)(null);
|
|
20417
|
+
const buildFieldDropSlots = (0, import_react18.useCallback)((form, draggedKey) => {
|
|
20873
20418
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
20874
20419
|
const slots = others.map((el) => {
|
|
20875
20420
|
const rect = el.getBoundingClientRect();
|
|
@@ -20882,7 +20427,7 @@ function OhhwellsBridge() {
|
|
|
20882
20427
|
}
|
|
20883
20428
|
return slots;
|
|
20884
20429
|
}, []);
|
|
20885
|
-
const handleFieldDragStart = (0,
|
|
20430
|
+
const handleFieldDragStart = (0, import_react18.useCallback)(() => {
|
|
20886
20431
|
const wrapper = fieldPickElRef.current;
|
|
20887
20432
|
const form = formPickElRef.current;
|
|
20888
20433
|
if (!wrapper || !form) return;
|
|
@@ -20891,18 +20436,18 @@ function OhhwellsBridge() {
|
|
|
20891
20436
|
setFieldDragging(true);
|
|
20892
20437
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
20893
20438
|
}, [buildFieldDropSlots]);
|
|
20894
|
-
const handleFieldDragEnd = (0,
|
|
20439
|
+
const handleFieldDragEnd = (0, import_react18.useCallback)(() => {
|
|
20895
20440
|
fieldDragRef.current = null;
|
|
20896
20441
|
setFieldDropIndex(null);
|
|
20897
20442
|
setFieldDropSlots([]);
|
|
20898
20443
|
setFieldDragging(false);
|
|
20899
20444
|
}, []);
|
|
20900
|
-
const [fieldDropIndex, setFieldDropIndex] = (0,
|
|
20901
|
-
const [fieldDropSlots, setFieldDropSlots] = (0,
|
|
20902
|
-
const [fieldDragging, setFieldDragging] = (0,
|
|
20903
|
-
const clearFormPickRef = (0,
|
|
20445
|
+
const [fieldDropIndex, setFieldDropIndex] = (0, import_react18.useState)(null);
|
|
20446
|
+
const [fieldDropSlots, setFieldDropSlots] = (0, import_react18.useState)([]);
|
|
20447
|
+
const [fieldDragging, setFieldDragging] = (0, import_react18.useState)(false);
|
|
20448
|
+
const clearFormPickRef = (0, import_react18.useRef)(clearFormPick);
|
|
20904
20449
|
clearFormPickRef.current = clearFormPick;
|
|
20905
|
-
(0,
|
|
20450
|
+
(0, import_react18.useEffect)(() => {
|
|
20906
20451
|
const el = fieldPickElRef.current;
|
|
20907
20452
|
if (!el || fieldPickRect === null) return;
|
|
20908
20453
|
const observer = new ResizeObserver(() => {
|
|
@@ -20911,7 +20456,7 @@ function OhhwellsBridge() {
|
|
|
20911
20456
|
observer.observe(el);
|
|
20912
20457
|
return () => observer.disconnect();
|
|
20913
20458
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
20914
|
-
(0,
|
|
20459
|
+
(0, import_react18.useEffect)(() => {
|
|
20915
20460
|
const el = formPickElRef.current;
|
|
20916
20461
|
if (!el || formPickRect === null) return;
|
|
20917
20462
|
const observer = new ResizeObserver(() => {
|
|
@@ -20920,25 +20465,25 @@ function OhhwellsBridge() {
|
|
|
20920
20465
|
observer.observe(el);
|
|
20921
20466
|
return () => observer.disconnect();
|
|
20922
20467
|
}, [formPickRect !== null, formViewState]);
|
|
20923
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
20924
|
-
const toolbarVariantRef = (0,
|
|
20468
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react18.useState)("none");
|
|
20469
|
+
const toolbarVariantRef = (0, import_react18.useRef)("none");
|
|
20925
20470
|
toolbarVariantRef.current = toolbarVariant;
|
|
20926
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
20927
|
-
const [selectedIsSocial, setSelectedIsSocial] = (0,
|
|
20928
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0,
|
|
20929
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
20930
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
20931
|
-
const [toggleState, setToggleState] = (0,
|
|
20932
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
20933
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
20934
|
-
const [sectionGap, setSectionGap] = (0,
|
|
20935
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
20936
|
-
const hoveredNavContainerRef = (0,
|
|
20937
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
20938
|
-
const hoveredItemElRef = (0,
|
|
20939
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
20940
|
-
const [hoveredTextRect, setHoveredTextRect] = (0,
|
|
20941
|
-
(0,
|
|
20471
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react18.useState)(false);
|
|
20472
|
+
const [selectedIsSocial, setSelectedIsSocial] = (0, import_react18.useState)(false);
|
|
20473
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react18.useState)(false);
|
|
20474
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react18.useState)(null);
|
|
20475
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react18.useState)(false);
|
|
20476
|
+
const [toggleState, setToggleState] = (0, import_react18.useState)(null);
|
|
20477
|
+
const [maxBadge, setMaxBadge] = (0, import_react18.useState)(null);
|
|
20478
|
+
const [activeCommands, setActiveCommands] = (0, import_react18.useState)(/* @__PURE__ */ new Set());
|
|
20479
|
+
const [sectionGap, setSectionGap] = (0, import_react18.useState)(null);
|
|
20480
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react18.useState)(false);
|
|
20481
|
+
const hoveredNavContainerRef = (0, import_react18.useRef)(null);
|
|
20482
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react18.useState)(null);
|
|
20483
|
+
const hoveredItemElRef = (0, import_react18.useRef)(null);
|
|
20484
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react18.useState)(null);
|
|
20485
|
+
const [hoveredTextRect, setHoveredTextRect] = (0, import_react18.useState)(null);
|
|
20486
|
+
(0, import_react18.useEffect)(() => {
|
|
20942
20487
|
const sync = () => {
|
|
20943
20488
|
const el = document.querySelector(
|
|
20944
20489
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -20982,57 +20527,57 @@ function OhhwellsBridge() {
|
|
|
20982
20527
|
});
|
|
20983
20528
|
return () => observer.disconnect();
|
|
20984
20529
|
}, []);
|
|
20985
|
-
const siblingHintElRef = (0,
|
|
20986
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
20987
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
20988
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
20989
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
20530
|
+
const siblingHintElRef = (0, import_react18.useRef)(null);
|
|
20531
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react18.useState)(null);
|
|
20532
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react18.useState)([]);
|
|
20533
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react18.useState)(false);
|
|
20534
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react18.useState)(false);
|
|
20990
20535
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
20991
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0,
|
|
20992
|
-
const [footerHeadingVisible, setFooterHeadingVisible] = (0,
|
|
20993
|
-
const footerDragRef = (0,
|
|
20994
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
20995
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
20996
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
20997
|
-
const footerPointerDragRef = (0,
|
|
20998
|
-
const suppressNextClickRef = (0,
|
|
20999
|
-
const suppressClickUntilRef = (0,
|
|
21000
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
21001
|
-
const linkPopoverSessionRef = (0,
|
|
21002
|
-
const addNavAfterAnchorRef = (0,
|
|
21003
|
-
const editContentRef = (0,
|
|
21004
|
-
const aiSectionsRef = (0,
|
|
21005
|
-
const brandKitRef = (0,
|
|
21006
|
-
const stylesRef = (0,
|
|
21007
|
-
const appliedDrawerRef = (0,
|
|
21008
|
-
const pendingDeleteUndoRef = (0,
|
|
21009
|
-
const [floatingPanel, setFloatingPanel] = (0,
|
|
21010
|
-
const floatingPanelOpenRef = (0,
|
|
21011
|
-
const floatingPanelRef = (0,
|
|
20536
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react18.useState)(null);
|
|
20537
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react18.useState)(null);
|
|
20538
|
+
const footerDragRef = (0, import_react18.useRef)(null);
|
|
20539
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react18.useState)([]);
|
|
20540
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react18.useState)(null);
|
|
20541
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react18.useState)(null);
|
|
20542
|
+
const footerPointerDragRef = (0, import_react18.useRef)(null);
|
|
20543
|
+
const suppressNextClickRef = (0, import_react18.useRef)(false);
|
|
20544
|
+
const suppressClickUntilRef = (0, import_react18.useRef)(0);
|
|
20545
|
+
const [linkPopover, setLinkPopover] = (0, import_react18.useState)(null);
|
|
20546
|
+
const linkPopoverSessionRef = (0, import_react18.useRef)(null);
|
|
20547
|
+
const addNavAfterAnchorRef = (0, import_react18.useRef)(null);
|
|
20548
|
+
const editContentRef = (0, import_react18.useRef)({});
|
|
20549
|
+
const aiSectionsRef = (0, import_react18.useRef)("");
|
|
20550
|
+
const brandKitRef = (0, import_react18.useRef)("");
|
|
20551
|
+
const stylesRef = (0, import_react18.useRef)("");
|
|
20552
|
+
const appliedDrawerRef = (0, import_react18.useRef)(null);
|
|
20553
|
+
const pendingDeleteUndoRef = (0, import_react18.useRef)(null);
|
|
20554
|
+
const [floatingPanel, setFloatingPanel] = (0, import_react18.useState)(null);
|
|
20555
|
+
const floatingPanelOpenRef = (0, import_react18.useRef)(false);
|
|
20556
|
+
const floatingPanelRef = (0, import_react18.useRef)(null);
|
|
21012
20557
|
floatingPanelRef.current = floatingPanel;
|
|
21013
|
-
const setFloatingPanelRef = (0,
|
|
21014
|
-
const [floatingPanelPos, setFloatingPanelPos] = (0,
|
|
21015
|
-
const buttonCollectionDragRef = (0,
|
|
21016
|
-
const buttonDropInsertIndexRef = (0,
|
|
21017
|
-
const [buttonDropSlots, setButtonDropSlots] = (0,
|
|
21018
|
-
const [activeButtonDropIndex, setActiveButtonDropIndex] = (0,
|
|
21019
|
-
const buttonPointerDragRef = (0,
|
|
21020
|
-
const [buttonStyleTick, setButtonStyleTick] = (0,
|
|
21021
|
-
const [logoSizeDraft, setLogoSizeDraft] = (0,
|
|
21022
|
-
const [editorViewport, setEditorViewport] = (0,
|
|
21023
|
-
const [parentScrollSnap, setParentScrollSnap] = (0,
|
|
21024
|
-
const [sitePages, setSitePages] = (0,
|
|
21025
|
-
const [sectionsByPath, setSectionsByPath] = (0,
|
|
21026
|
-
const sectionsPrefetchGenRef = (0,
|
|
21027
|
-
const setLinkPopoverRef = (0,
|
|
21028
|
-
const linkPopoverPanelRef = (0,
|
|
21029
|
-
const linkPopoverOpenRef = (0,
|
|
21030
|
-
const linkPopoverGraceUntilRef = (0,
|
|
20558
|
+
const setFloatingPanelRef = (0, import_react18.useRef)(setFloatingPanel);
|
|
20559
|
+
const [floatingPanelPos, setFloatingPanelPos] = (0, import_react18.useState)(null);
|
|
20560
|
+
const buttonCollectionDragRef = (0, import_react18.useRef)(null);
|
|
20561
|
+
const buttonDropInsertIndexRef = (0, import_react18.useRef)(null);
|
|
20562
|
+
const [buttonDropSlots, setButtonDropSlots] = (0, import_react18.useState)([]);
|
|
20563
|
+
const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react18.useState)(null);
|
|
20564
|
+
const buttonPointerDragRef = (0, import_react18.useRef)(null);
|
|
20565
|
+
const [buttonStyleTick, setButtonStyleTick] = (0, import_react18.useState)(0);
|
|
20566
|
+
const [logoSizeDraft, setLogoSizeDraft] = (0, import_react18.useState)(null);
|
|
20567
|
+
const [editorViewport, setEditorViewport] = (0, import_react18.useState)("desktop");
|
|
20568
|
+
const [parentScrollSnap, setParentScrollSnap] = (0, import_react18.useState)(null);
|
|
20569
|
+
const [sitePages, setSitePages] = (0, import_react18.useState)([]);
|
|
20570
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react18.useState)({});
|
|
20571
|
+
const sectionsPrefetchGenRef = (0, import_react18.useRef)(0);
|
|
20572
|
+
const setLinkPopoverRef = (0, import_react18.useRef)(setLinkPopover);
|
|
20573
|
+
const linkPopoverPanelRef = (0, import_react18.useRef)(null);
|
|
20574
|
+
const linkPopoverOpenRef = (0, import_react18.useRef)(false);
|
|
20575
|
+
const linkPopoverGraceUntilRef = (0, import_react18.useRef)(0);
|
|
21031
20576
|
setLinkPopoverRef.current = setLinkPopover;
|
|
21032
20577
|
setFloatingPanelRef.current = setFloatingPanel;
|
|
21033
20578
|
linkPopoverSessionRef.current = linkPopover;
|
|
21034
20579
|
floatingPanelOpenRef.current = Boolean(floatingPanel);
|
|
21035
|
-
(0,
|
|
20580
|
+
(0, import_react18.useEffect)(() => {
|
|
21036
20581
|
const syncViewport = () => {
|
|
21037
20582
|
const next = window.innerWidth <= 480 ? "mobile" : "desktop";
|
|
21038
20583
|
setEditorViewport((prev) => prev === next ? prev : next);
|
|
@@ -21041,7 +20586,7 @@ function OhhwellsBridge() {
|
|
|
21041
20586
|
window.addEventListener("resize", syncViewport);
|
|
21042
20587
|
return () => window.removeEventListener("resize", syncViewport);
|
|
21043
20588
|
}, []);
|
|
21044
|
-
(0,
|
|
20589
|
+
(0, import_react18.useEffect)(() => {
|
|
21045
20590
|
setSectionOrderPersistHandler((entries) => {
|
|
21046
20591
|
const currentPath = window.location.pathname;
|
|
21047
20592
|
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
@@ -21097,7 +20642,7 @@ function OhhwellsBridge() {
|
|
|
21097
20642
|
const bumpLinkPopoverGrace = () => {
|
|
21098
20643
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
21099
20644
|
};
|
|
21100
|
-
const runSectionsPrefetch = (0,
|
|
20645
|
+
const runSectionsPrefetch = (0, import_react18.useCallback)((pages) => {
|
|
21101
20646
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
21102
20647
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
21103
20648
|
const paths = pages.map((p) => p.path);
|
|
@@ -21116,9 +20661,9 @@ function OhhwellsBridge() {
|
|
|
21116
20661
|
);
|
|
21117
20662
|
});
|
|
21118
20663
|
}, [isEditMode, pathname]);
|
|
21119
|
-
const runSectionsPrefetchRef = (0,
|
|
20664
|
+
const runSectionsPrefetchRef = (0, import_react18.useRef)(runSectionsPrefetch);
|
|
21120
20665
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
21121
|
-
(0,
|
|
20666
|
+
(0, import_react18.useEffect)(() => {
|
|
21122
20667
|
if (!linkPopover) {
|
|
21123
20668
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21124
20669
|
return;
|
|
@@ -21146,7 +20691,7 @@ function OhhwellsBridge() {
|
|
|
21146
20691
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21147
20692
|
};
|
|
21148
20693
|
}, [linkPopover, postToParent2]);
|
|
21149
|
-
(0,
|
|
20694
|
+
(0, import_react18.useEffect)(() => {
|
|
21150
20695
|
if (!isEditMode) return;
|
|
21151
20696
|
const useFixtures = shouldUseDevFixtures();
|
|
21152
20697
|
if (useFixtures) {
|
|
@@ -21170,14 +20715,14 @@ function OhhwellsBridge() {
|
|
|
21170
20715
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
21171
20716
|
return () => window.removeEventListener("message", onSitePages);
|
|
21172
20717
|
}, [isEditMode, postToParent2]);
|
|
21173
|
-
(0,
|
|
20718
|
+
(0, import_react18.useEffect)(() => {
|
|
21174
20719
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
21175
20720
|
void loadAllSectionsManifest().then((manifest) => {
|
|
21176
20721
|
if (Object.keys(manifest).length === 0) return;
|
|
21177
20722
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
21178
20723
|
});
|
|
21179
20724
|
}, [isEditMode]);
|
|
21180
|
-
(0,
|
|
20725
|
+
(0, import_react18.useEffect)(() => {
|
|
21181
20726
|
const update = () => {
|
|
21182
20727
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
21183
20728
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -21201,10 +20746,10 @@ function OhhwellsBridge() {
|
|
|
21201
20746
|
vvp.removeEventListener("resize", update);
|
|
21202
20747
|
};
|
|
21203
20748
|
}, []);
|
|
21204
|
-
const refreshStateRules = (0,
|
|
20749
|
+
const refreshStateRules = (0, import_react18.useCallback)(() => {
|
|
21205
20750
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
21206
20751
|
}, []);
|
|
21207
|
-
const processConfigRequest = (0,
|
|
20752
|
+
const processConfigRequest = (0, import_react18.useCallback)((insertAfterVal) => {
|
|
21208
20753
|
const tracker = getSectionsTracker();
|
|
21209
20754
|
let entries = [];
|
|
21210
20755
|
try {
|
|
@@ -21227,7 +20772,7 @@ function OhhwellsBridge() {
|
|
|
21227
20772
|
}
|
|
21228
20773
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
21229
20774
|
}, [isEditMode]);
|
|
21230
|
-
const deactivate = (0,
|
|
20775
|
+
const deactivate = (0, import_react18.useCallback)(() => {
|
|
21231
20776
|
const el = activeElRef.current;
|
|
21232
20777
|
if (!el) return;
|
|
21233
20778
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -21278,12 +20823,12 @@ function OhhwellsBridge() {
|
|
|
21278
20823
|
setToolbarShowEditLink(false);
|
|
21279
20824
|
postToParent2({ type: "ow:exit-edit" });
|
|
21280
20825
|
}, [postToParent2]);
|
|
21281
|
-
const clearSelectedAttr = (0,
|
|
20826
|
+
const clearSelectedAttr = (0, import_react18.useCallback)(() => {
|
|
21282
20827
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
21283
20828
|
el.removeAttribute("data-ohw-selected");
|
|
21284
20829
|
});
|
|
21285
20830
|
}, []);
|
|
21286
|
-
const deselect = (0,
|
|
20831
|
+
const deselect = (0, import_react18.useCallback)(() => {
|
|
21287
20832
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
21288
20833
|
clearSelectedAttr();
|
|
21289
20834
|
selectedElRef.current = null;
|
|
@@ -21318,20 +20863,20 @@ function OhhwellsBridge() {
|
|
|
21318
20863
|
setToolbarVariant("none");
|
|
21319
20864
|
}
|
|
21320
20865
|
}, [clearSelectedAttr]);
|
|
21321
|
-
const markSelected = (0,
|
|
20866
|
+
const markSelected = (0, import_react18.useCallback)((el) => {
|
|
21322
20867
|
clearSelectedAttr();
|
|
21323
20868
|
el.removeAttribute("data-ohw-hovered");
|
|
21324
20869
|
el.setAttribute("data-ohw-selected", "");
|
|
21325
20870
|
}, [clearSelectedAttr]);
|
|
21326
|
-
const isSelectedForHover = (0,
|
|
20871
|
+
const isSelectedForHover = (0, import_react18.useCallback)((el) => {
|
|
21327
20872
|
if (!el) return false;
|
|
21328
20873
|
return [selectedElRef.current, activeElRef.current].some(
|
|
21329
20874
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
21330
20875
|
);
|
|
21331
20876
|
}, []);
|
|
21332
|
-
const isSelectedForHoverRef = (0,
|
|
20877
|
+
const isSelectedForHoverRef = (0, import_react18.useRef)(isSelectedForHover);
|
|
21333
20878
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
21334
|
-
const resolveHrefKeyElement = (0,
|
|
20879
|
+
const resolveHrefKeyElement = (0, import_react18.useCallback)((hrefKey) => {
|
|
21335
20880
|
if (isFooterHrefKey(hrefKey)) {
|
|
21336
20881
|
return document.querySelector(
|
|
21337
20882
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -21346,7 +20891,7 @@ function OhhwellsBridge() {
|
|
|
21346
20891
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
21347
20892
|
);
|
|
21348
20893
|
}, []);
|
|
21349
|
-
const resyncSelectedNavigationItem = (0,
|
|
20894
|
+
const resyncSelectedNavigationItem = (0, import_react18.useCallback)(() => {
|
|
21350
20895
|
const hrefKey = selectedHrefKeyRef.current;
|
|
21351
20896
|
if (hrefKey) {
|
|
21352
20897
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -21384,7 +20929,7 @@ function OhhwellsBridge() {
|
|
|
21384
20929
|
);
|
|
21385
20930
|
}
|
|
21386
20931
|
}, [resolveHrefKeyElement]);
|
|
21387
|
-
const reselectNavigationItem = (0,
|
|
20932
|
+
const reselectNavigationItem = (0, import_react18.useCallback)((navAnchor) => {
|
|
21388
20933
|
selectedElRef.current = navAnchor;
|
|
21389
20934
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
21390
20935
|
selectedFooterColAttrRef.current = null;
|
|
@@ -21415,7 +20960,7 @@ function OhhwellsBridge() {
|
|
|
21415
20960
|
setToolbarShowEditLink(false);
|
|
21416
20961
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
21417
20962
|
}, [markSelected]);
|
|
21418
|
-
const commitNavigationTextEdit = (0,
|
|
20963
|
+
const commitNavigationTextEdit = (0, import_react18.useCallback)((navAnchor) => {
|
|
21419
20964
|
const el = activeElRef.current;
|
|
21420
20965
|
if (!el) return;
|
|
21421
20966
|
const key = el.dataset.ohwKey;
|
|
@@ -21448,7 +20993,7 @@ function OhhwellsBridge() {
|
|
|
21448
20993
|
postToParent2({ type: "ow:exit-edit" });
|
|
21449
20994
|
reselectNavigationItem(navAnchor);
|
|
21450
20995
|
}, [postToParent2, reselectNavigationItem]);
|
|
21451
|
-
const handleAddTopLevelNavItem = (0,
|
|
20996
|
+
const handleAddTopLevelNavItem = (0, import_react18.useCallback)(() => {
|
|
21452
20997
|
const items = listNavbarRootItems();
|
|
21453
20998
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
21454
20999
|
deselectRef.current();
|
|
@@ -21460,7 +21005,7 @@ function OhhwellsBridge() {
|
|
|
21460
21005
|
intent: "add-nav"
|
|
21461
21006
|
});
|
|
21462
21007
|
}, []);
|
|
21463
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
21008
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react18.useCallback)(
|
|
21464
21009
|
(anchor) => {
|
|
21465
21010
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
21466
21011
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -21473,7 +21018,7 @@ function OhhwellsBridge() {
|
|
|
21473
21018
|
},
|
|
21474
21019
|
[postToParent2]
|
|
21475
21020
|
);
|
|
21476
|
-
const handleNavDropdownOpenChange = (0,
|
|
21021
|
+
const handleNavDropdownOpenChange = (0, import_react18.useCallback)((open) => {
|
|
21477
21022
|
const selected = selectedElRef.current;
|
|
21478
21023
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
21479
21024
|
if (isNestedNavChild(selected)) return;
|
|
@@ -21489,7 +21034,7 @@ function OhhwellsBridge() {
|
|
|
21489
21034
|
}
|
|
21490
21035
|
});
|
|
21491
21036
|
}, []);
|
|
21492
|
-
const handleFooterHeadingVisibleChange = (0,
|
|
21037
|
+
const handleFooterHeadingVisibleChange = (0, import_react18.useCallback)(
|
|
21493
21038
|
(visible) => {
|
|
21494
21039
|
const selected = selectedElRef.current;
|
|
21495
21040
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -21513,7 +21058,7 @@ function OhhwellsBridge() {
|
|
|
21513
21058
|
},
|
|
21514
21059
|
[postToParent2]
|
|
21515
21060
|
);
|
|
21516
|
-
const enterEditOnNewItem = (0,
|
|
21061
|
+
const enterEditOnNewItem = (0, import_react18.useCallback)((anchor) => {
|
|
21517
21062
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
21518
21063
|
if (!label) {
|
|
21519
21064
|
selectRef.current(anchor);
|
|
@@ -21522,8 +21067,8 @@ function OhhwellsBridge() {
|
|
|
21522
21067
|
setNavGroupForceOpen(anchor, true);
|
|
21523
21068
|
activateRef.current(label);
|
|
21524
21069
|
}, []);
|
|
21525
|
-
const pendingSocialAddRef = (0,
|
|
21526
|
-
const handleAddChildItem = (0,
|
|
21070
|
+
const pendingSocialAddRef = (0, import_react18.useRef)(null);
|
|
21071
|
+
const handleAddChildItem = (0, import_react18.useCallback)(() => {
|
|
21527
21072
|
const selected = selectedElRef.current;
|
|
21528
21073
|
if (!selected) return;
|
|
21529
21074
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -21634,7 +21179,7 @@ function OhhwellsBridge() {
|
|
|
21634
21179
|
});
|
|
21635
21180
|
});
|
|
21636
21181
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
21637
|
-
const handleAddFooterColumn = (0,
|
|
21182
|
+
const handleAddFooterColumn = (0, import_react18.useCallback)(() => {
|
|
21638
21183
|
if (!canAddFooterColumn()) {
|
|
21639
21184
|
postToParent2({
|
|
21640
21185
|
type: "ow:toast",
|
|
@@ -21655,7 +21200,7 @@ function OhhwellsBridge() {
|
|
|
21655
21200
|
selectRef.current(result.firstLink);
|
|
21656
21201
|
});
|
|
21657
21202
|
}, [postToParent2]);
|
|
21658
|
-
const clearFooterDragVisuals = (0,
|
|
21203
|
+
const clearFooterDragVisuals = (0, import_react18.useCallback)(() => {
|
|
21659
21204
|
footerDragRef.current = null;
|
|
21660
21205
|
setSiblingHintRects([]);
|
|
21661
21206
|
setFooterDropSlots([]);
|
|
@@ -21664,7 +21209,7 @@ function OhhwellsBridge() {
|
|
|
21664
21209
|
setIsItemDragging(false);
|
|
21665
21210
|
unlockFooterDragInteraction();
|
|
21666
21211
|
}, []);
|
|
21667
|
-
const refreshFooterDragVisuals = (0,
|
|
21212
|
+
const refreshFooterDragVisuals = (0, import_react18.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
21668
21213
|
const dragged = session.draggedEl;
|
|
21669
21214
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
21670
21215
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -21696,13 +21241,13 @@ function OhhwellsBridge() {
|
|
|
21696
21241
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
21697
21242
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
21698
21243
|
}, []);
|
|
21699
|
-
const refreshFooterDragVisualsRef = (0,
|
|
21244
|
+
const refreshFooterDragVisualsRef = (0, import_react18.useRef)(refreshFooterDragVisuals);
|
|
21700
21245
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
21701
|
-
const commitFooterDragRef = (0,
|
|
21246
|
+
const commitFooterDragRef = (0, import_react18.useRef)(() => {
|
|
21702
21247
|
});
|
|
21703
|
-
const beginFooterDragRef = (0,
|
|
21248
|
+
const beginFooterDragRef = (0, import_react18.useRef)(() => {
|
|
21704
21249
|
});
|
|
21705
|
-
const beginFooterDrag = (0,
|
|
21250
|
+
const beginFooterDrag = (0, import_react18.useCallback)(
|
|
21706
21251
|
(session) => {
|
|
21707
21252
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
21708
21253
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -21722,7 +21267,7 @@ function OhhwellsBridge() {
|
|
|
21722
21267
|
[refreshFooterDragVisuals]
|
|
21723
21268
|
);
|
|
21724
21269
|
beginFooterDragRef.current = beginFooterDrag;
|
|
21725
|
-
const commitFooterDrag = (0,
|
|
21270
|
+
const commitFooterDrag = (0, import_react18.useCallback)(
|
|
21726
21271
|
(clientX, clientY) => {
|
|
21727
21272
|
const session = footerDragRef.current;
|
|
21728
21273
|
if (!session) {
|
|
@@ -21851,7 +21396,7 @@ function OhhwellsBridge() {
|
|
|
21851
21396
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
21852
21397
|
);
|
|
21853
21398
|
commitFooterDragRef.current = commitFooterDrag;
|
|
21854
|
-
const startFooterLinkDrag = (0,
|
|
21399
|
+
const startFooterLinkDrag = (0, import_react18.useCallback)(
|
|
21855
21400
|
(anchor, clientX, clientY, wasSelected) => {
|
|
21856
21401
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
21857
21402
|
if (!hrefKey) return false;
|
|
@@ -21887,7 +21432,7 @@ function OhhwellsBridge() {
|
|
|
21887
21432
|
},
|
|
21888
21433
|
[beginFooterDrag]
|
|
21889
21434
|
);
|
|
21890
|
-
const startFooterColumnDrag = (0,
|
|
21435
|
+
const startFooterColumnDrag = (0, import_react18.useCallback)(
|
|
21891
21436
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
21892
21437
|
const columns = listFooterColumns();
|
|
21893
21438
|
const idx = columns.indexOf(columnEl);
|
|
@@ -21907,7 +21452,7 @@ function OhhwellsBridge() {
|
|
|
21907
21452
|
},
|
|
21908
21453
|
[beginFooterDrag]
|
|
21909
21454
|
);
|
|
21910
|
-
const persistButtonCollectionDrag = (0,
|
|
21455
|
+
const persistButtonCollectionDrag = (0, import_react18.useCallback)(
|
|
21911
21456
|
(button, clientX) => {
|
|
21912
21457
|
const insertIndex = buttonDropInsertIndexRef.current;
|
|
21913
21458
|
if (insertIndex != null) insertButtonAtCollectionIndex(button, insertIndex);
|
|
@@ -21931,7 +21476,7 @@ function OhhwellsBridge() {
|
|
|
21931
21476
|
},
|
|
21932
21477
|
[postToParent2]
|
|
21933
21478
|
);
|
|
21934
|
-
const refreshButtonDragVisuals = (0,
|
|
21479
|
+
const refreshButtonDragVisuals = (0, import_react18.useCallback)((button, clientX, clientY) => {
|
|
21935
21480
|
const collection = buttonCollectionOf(button);
|
|
21936
21481
|
if (!collection) {
|
|
21937
21482
|
setButtonDropSlots([]);
|
|
@@ -21948,7 +21493,7 @@ function OhhwellsBridge() {
|
|
|
21948
21493
|
setDraggedItemRect(button.getBoundingClientRect());
|
|
21949
21494
|
if (selectedElRef.current === button) setToolbarRect(button.getBoundingClientRect());
|
|
21950
21495
|
}, []);
|
|
21951
|
-
const handleItemDragStart = (0,
|
|
21496
|
+
const handleItemDragStart = (0, import_react18.useCallback)(
|
|
21952
21497
|
(e) => {
|
|
21953
21498
|
const selected = selectedElRef.current;
|
|
21954
21499
|
if (!selected) {
|
|
@@ -21979,7 +21524,7 @@ function OhhwellsBridge() {
|
|
|
21979
21524
|
},
|
|
21980
21525
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag, refreshButtonDragVisuals]
|
|
21981
21526
|
);
|
|
21982
|
-
const handleItemDragEnd = (0,
|
|
21527
|
+
const handleItemDragEnd = (0, import_react18.useCallback)(
|
|
21983
21528
|
(e) => {
|
|
21984
21529
|
const collectionButton = buttonCollectionDragRef.current;
|
|
21985
21530
|
if (collectionButton) {
|
|
@@ -22010,7 +21555,7 @@ function OhhwellsBridge() {
|
|
|
22010
21555
|
},
|
|
22011
21556
|
[commitFooterDrag, commitNavDrag, navDragRef, persistButtonCollectionDrag]
|
|
22012
21557
|
);
|
|
22013
|
-
const handleItemChromePointerDown = (0,
|
|
21558
|
+
const handleItemChromePointerDown = (0, import_react18.useCallback)((e) => {
|
|
22014
21559
|
if (e.button !== 0) return;
|
|
22015
21560
|
const selected = selectedElRef.current;
|
|
22016
21561
|
if (!selected) return;
|
|
@@ -22051,7 +21596,7 @@ function OhhwellsBridge() {
|
|
|
22051
21596
|
}
|
|
22052
21597
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
22053
21598
|
}, [armNavPressFromChrome]);
|
|
22054
|
-
const handleItemChromeClick = (0,
|
|
21599
|
+
const handleItemChromeClick = (0, import_react18.useCallback)((clientX, clientY) => {
|
|
22055
21600
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
22056
21601
|
suppressNextClickRef.current = false;
|
|
22057
21602
|
return;
|
|
@@ -22064,7 +21609,7 @@ function OhhwellsBridge() {
|
|
|
22064
21609
|
}, []);
|
|
22065
21610
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
22066
21611
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
22067
|
-
const select = (0,
|
|
21612
|
+
const select = (0, import_react18.useCallback)((anchor) => {
|
|
22068
21613
|
if (!isNavigationItem2(anchor)) return;
|
|
22069
21614
|
if (activeElRef.current) deactivate();
|
|
22070
21615
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -22102,6 +21647,7 @@ function OhhwellsBridge() {
|
|
|
22102
21647
|
setIsFooterFrameSelection(false);
|
|
22103
21648
|
setToolbarVariant("link-action");
|
|
22104
21649
|
setToolbarRect(anchor.getBoundingClientRect());
|
|
21650
|
+
if (glowElRef.current) glowElRef.current.style.display = "";
|
|
22105
21651
|
setToolbarShowEditLink(false);
|
|
22106
21652
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
22107
21653
|
const panel = floatingPanelRef.current;
|
|
@@ -22124,7 +21670,7 @@ function OhhwellsBridge() {
|
|
|
22124
21670
|
setLogoSizeDraft(null);
|
|
22125
21671
|
}
|
|
22126
21672
|
}, [deactivate, markSelected]);
|
|
22127
|
-
const selectFrame = (0,
|
|
21673
|
+
const selectFrame = (0, import_react18.useCallback)((el) => {
|
|
22128
21674
|
if (!isNavigationContainer(el)) return;
|
|
22129
21675
|
if (activeElRef.current) deactivate();
|
|
22130
21676
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -22165,7 +21711,7 @@ function OhhwellsBridge() {
|
|
|
22165
21711
|
setFloatingPanelPos(null);
|
|
22166
21712
|
setLogoSizeDraft(null);
|
|
22167
21713
|
}, [deactivate, markSelected, postToParent2]);
|
|
22168
|
-
const selectLogo = (0,
|
|
21714
|
+
const selectLogo = (0, import_react18.useCallback)(
|
|
22169
21715
|
(logoEl) => {
|
|
22170
21716
|
if (activeElRef.current) deactivate();
|
|
22171
21717
|
selectedElRef.current = logoEl;
|
|
@@ -22194,7 +21740,7 @@ function OhhwellsBridge() {
|
|
|
22194
21740
|
},
|
|
22195
21741
|
[deactivate, markSelected]
|
|
22196
21742
|
);
|
|
22197
|
-
const openLogoSizePanel = (0,
|
|
21743
|
+
const openLogoSizePanel = (0, import_react18.useCallback)((logoEl) => {
|
|
22198
21744
|
const placement = getLogoPlacement(logoEl);
|
|
22199
21745
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
22200
21746
|
setLogoSizeDraft(draft);
|
|
@@ -22207,7 +21753,8 @@ function OhhwellsBridge() {
|
|
|
22207
21753
|
placement
|
|
22208
21754
|
});
|
|
22209
21755
|
}, []);
|
|
22210
|
-
const openSocialsDisplayPanel = (0,
|
|
21756
|
+
const openSocialsDisplayPanel = (0, import_react18.useCallback)((row) => {
|
|
21757
|
+
setFloatingPanelPos(null);
|
|
22211
21758
|
setParentScrollSnap(parentScrollRef.current);
|
|
22212
21759
|
setFloatingPanel({
|
|
22213
21760
|
key: "socials-display",
|
|
@@ -22217,7 +21764,7 @@ function OhhwellsBridge() {
|
|
|
22217
21764
|
row
|
|
22218
21765
|
});
|
|
22219
21766
|
}, []);
|
|
22220
|
-
const rememberButtonTokens = (0,
|
|
21767
|
+
const rememberButtonTokens = (0, import_react18.useCallback)(
|
|
22221
21768
|
(content, tokens, nodes) => {
|
|
22222
21769
|
if (nodes.length === 0) return content;
|
|
22223
21770
|
const next = { ...content };
|
|
@@ -22228,7 +21775,7 @@ function OhhwellsBridge() {
|
|
|
22228
21775
|
},
|
|
22229
21776
|
[postToParent2]
|
|
22230
21777
|
);
|
|
22231
|
-
const tokensForButton = (0,
|
|
21778
|
+
const tokensForButton = (0, import_react18.useCallback)(
|
|
22232
21779
|
(el, persistFallback = false) => {
|
|
22233
21780
|
const stored = readStoredStyleTokens(editContentRef.current);
|
|
22234
21781
|
if (stored) return stored;
|
|
@@ -22243,7 +21790,7 @@ function OhhwellsBridge() {
|
|
|
22243
21790
|
},
|
|
22244
21791
|
[rememberButtonTokens]
|
|
22245
21792
|
);
|
|
22246
|
-
const openButtonStylePanel = (0,
|
|
21793
|
+
const openButtonStylePanel = (0, import_react18.useCallback)(
|
|
22247
21794
|
(anchor) => {
|
|
22248
21795
|
const id = buttonId(anchor);
|
|
22249
21796
|
if (!id) return;
|
|
@@ -22261,7 +21808,7 @@ function OhhwellsBridge() {
|
|
|
22261
21808
|
},
|
|
22262
21809
|
[tokensForButton]
|
|
22263
21810
|
);
|
|
22264
|
-
const applySelectedButtonStyle = (0,
|
|
21811
|
+
const applySelectedButtonStyle = (0, import_react18.useCallback)(
|
|
22265
21812
|
(patch) => {
|
|
22266
21813
|
const panel = floatingPanelRef.current;
|
|
22267
21814
|
const id = panel?.kind === "button-style" ? panel.buttonId : null;
|
|
@@ -22279,7 +21826,7 @@ function OhhwellsBridge() {
|
|
|
22279
21826
|
},
|
|
22280
21827
|
[postToParent2]
|
|
22281
21828
|
);
|
|
22282
|
-
(0,
|
|
21829
|
+
(0, import_react18.useEffect)(() => {
|
|
22283
21830
|
const onDragOver = (e) => {
|
|
22284
21831
|
const dragged = buttonCollectionDragRef.current;
|
|
22285
21832
|
if (!dragged) return;
|
|
@@ -22298,11 +21845,11 @@ function OhhwellsBridge() {
|
|
|
22298
21845
|
document.removeEventListener("drop", onDrop);
|
|
22299
21846
|
};
|
|
22300
21847
|
}, [refreshButtonDragVisuals]);
|
|
22301
|
-
const isEditModeRef = (0,
|
|
22302
|
-
const requestMissingSocialIconsRef = (0,
|
|
21848
|
+
const isEditModeRef = (0, import_react18.useRef)(false);
|
|
21849
|
+
const requestMissingSocialIconsRef = (0, import_react18.useRef)(() => {
|
|
22303
21850
|
});
|
|
22304
|
-
const askedSocialIconsRef = (0,
|
|
22305
|
-
const requestMissingSocialIcons = (0,
|
|
21851
|
+
const askedSocialIconsRef = (0, import_react18.useRef)(/* @__PURE__ */ new Set());
|
|
21852
|
+
const requestMissingSocialIcons = (0, import_react18.useCallback)(() => {
|
|
22306
21853
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
22307
21854
|
const missing = socialsMissingIcons(row);
|
|
22308
21855
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -22314,7 +21861,7 @@ function OhhwellsBridge() {
|
|
|
22314
21861
|
}, []);
|
|
22315
21862
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
22316
21863
|
isEditModeRef.current = isEditMode;
|
|
22317
|
-
const changeSocialsDisplay = (0,
|
|
21864
|
+
const changeSocialsDisplay = (0, import_react18.useCallback)(
|
|
22318
21865
|
(row, next) => {
|
|
22319
21866
|
if (next.icon) {
|
|
22320
21867
|
const missing = socialsMissingIcons(row);
|
|
@@ -22338,19 +21885,19 @@ function OhhwellsBridge() {
|
|
|
22338
21885
|
},
|
|
22339
21886
|
[]
|
|
22340
21887
|
);
|
|
22341
|
-
const closeFloatingPanelOnly = (0,
|
|
21888
|
+
const closeFloatingPanelOnly = (0, import_react18.useCallback)(() => {
|
|
22342
21889
|
setFloatingPanel(null);
|
|
22343
21890
|
setFloatingPanelPos(null);
|
|
22344
21891
|
setLogoSizeDraft(null);
|
|
22345
21892
|
}, []);
|
|
22346
21893
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22347
|
-
const closeFloatingPanelAndDeselect = (0,
|
|
21894
|
+
const closeFloatingPanelAndDeselect = (0, import_react18.useCallback)(() => {
|
|
22348
21895
|
setFloatingPanel(null);
|
|
22349
21896
|
setFloatingPanelPos(null);
|
|
22350
21897
|
setLogoSizeDraft(null);
|
|
22351
21898
|
deselectRef.current();
|
|
22352
21899
|
}, []);
|
|
22353
|
-
(0,
|
|
21900
|
+
(0, import_react18.useEffect)(() => {
|
|
22354
21901
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
22355
21902
|
if (!session || !logoSizeDraft) {
|
|
22356
21903
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -22369,7 +21916,7 @@ function OhhwellsBridge() {
|
|
|
22369
21916
|
max: LOGO_SIZE_MAX
|
|
22370
21917
|
});
|
|
22371
21918
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
22372
|
-
const persistLogoSizeDraft = (0,
|
|
21919
|
+
const persistLogoSizeDraft = (0, import_react18.useCallback)(
|
|
22373
21920
|
(placement, draft) => {
|
|
22374
21921
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
22375
21922
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -22409,7 +21956,7 @@ function OhhwellsBridge() {
|
|
|
22409
21956
|
},
|
|
22410
21957
|
[postToParent2]
|
|
22411
21958
|
);
|
|
22412
|
-
const activate = (0,
|
|
21959
|
+
const activate = (0, import_react18.useCallback)((el, options) => {
|
|
22413
21960
|
if (activeElRef.current === el) return;
|
|
22414
21961
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
22415
21962
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -22507,8 +22054,8 @@ function OhhwellsBridge() {
|
|
|
22507
22054
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
22508
22055
|
deselectRef.current = deselect;
|
|
22509
22056
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22510
|
-
const lastSiteWideScopeRef = (0,
|
|
22511
|
-
(0,
|
|
22057
|
+
const lastSiteWideScopeRef = (0, import_react18.useRef)(null);
|
|
22058
|
+
(0, import_react18.useEffect)(() => {
|
|
22512
22059
|
if (!isEditMode) {
|
|
22513
22060
|
if (lastSiteWideScopeRef.current !== false) {
|
|
22514
22061
|
lastSiteWideScopeRef.current = false;
|
|
@@ -22534,7 +22081,7 @@ function OhhwellsBridge() {
|
|
|
22534
22081
|
isFooterFrameSelection,
|
|
22535
22082
|
postToParent2
|
|
22536
22083
|
]);
|
|
22537
|
-
(0,
|
|
22084
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
22538
22085
|
if (!subdomain || isEditMode) {
|
|
22539
22086
|
setFetchState("done");
|
|
22540
22087
|
return;
|
|
@@ -22657,7 +22204,7 @@ function OhhwellsBridge() {
|
|
|
22657
22204
|
cancelled = true;
|
|
22658
22205
|
};
|
|
22659
22206
|
}, [subdomain, isEditMode]);
|
|
22660
|
-
(0,
|
|
22207
|
+
(0, import_react18.useEffect)(() => {
|
|
22661
22208
|
if (!isEditMode) return;
|
|
22662
22209
|
const resolveIndex = (form, clientY) => {
|
|
22663
22210
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -22698,7 +22245,7 @@ function OhhwellsBridge() {
|
|
|
22698
22245
|
window.removeEventListener("drop", onDrop, true);
|
|
22699
22246
|
};
|
|
22700
22247
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
22701
|
-
(0,
|
|
22248
|
+
(0, import_react18.useEffect)(() => {
|
|
22702
22249
|
if (!isEditMode) return;
|
|
22703
22250
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
22704
22251
|
markFormFields(form);
|
|
@@ -22710,7 +22257,7 @@ function OhhwellsBridge() {
|
|
|
22710
22257
|
});
|
|
22711
22258
|
return () => observer.disconnect();
|
|
22712
22259
|
}, [isEditMode, fetchState, pathname]);
|
|
22713
|
-
(0,
|
|
22260
|
+
(0, import_react18.useEffect)(() => {
|
|
22714
22261
|
if (!isEditMode) return;
|
|
22715
22262
|
let saveTimer = null;
|
|
22716
22263
|
const onInput = (e) => {
|
|
@@ -22732,14 +22279,14 @@ function OhhwellsBridge() {
|
|
|
22732
22279
|
document.addEventListener("input", onInput, true);
|
|
22733
22280
|
return () => document.removeEventListener("input", onInput, true);
|
|
22734
22281
|
}, [isEditMode, persistFields]);
|
|
22735
|
-
(0,
|
|
22282
|
+
(0, import_react18.useEffect)(() => {
|
|
22736
22283
|
if (isEditMode || fetchState !== "done") return;
|
|
22737
22284
|
const content = contentCache.get(subdomain) ?? {};
|
|
22738
22285
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
22739
22286
|
reconcileFieldsFromContent(form, content);
|
|
22740
22287
|
});
|
|
22741
22288
|
}, [isEditMode, fetchState, subdomain]);
|
|
22742
|
-
(0,
|
|
22289
|
+
(0, import_react18.useEffect)(() => {
|
|
22743
22290
|
if (!isEditMode) return;
|
|
22744
22291
|
const swallow = (e) => {
|
|
22745
22292
|
const target = e.target;
|
|
@@ -22748,14 +22295,14 @@ function OhhwellsBridge() {
|
|
|
22748
22295
|
document.addEventListener("submit", swallow, true);
|
|
22749
22296
|
return () => document.removeEventListener("submit", swallow, true);
|
|
22750
22297
|
}, [isEditMode]);
|
|
22751
|
-
(0,
|
|
22298
|
+
(0, import_react18.useEffect)(() => {
|
|
22752
22299
|
if (isEditMode || fetchState !== "done") return;
|
|
22753
22300
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
22754
22301
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
22755
22302
|
console.log({ apiUrl, subdomain });
|
|
22756
22303
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
22757
22304
|
}, [isEditMode, fetchState, subdomain]);
|
|
22758
|
-
(0,
|
|
22305
|
+
(0, import_react18.useEffect)(() => {
|
|
22759
22306
|
if (!subdomain || isEditMode) return;
|
|
22760
22307
|
let debounceTimer = null;
|
|
22761
22308
|
let observer = null;
|
|
@@ -22857,16 +22404,16 @@ function OhhwellsBridge() {
|
|
|
22857
22404
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
22858
22405
|
};
|
|
22859
22406
|
}, [subdomain, isEditMode, pathname]);
|
|
22860
|
-
(0,
|
|
22407
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
22861
22408
|
const el = document.getElementById("ohw-loader");
|
|
22862
22409
|
if (!el) return;
|
|
22863
22410
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
22864
22411
|
el.style.display = visible ? "flex" : "none";
|
|
22865
22412
|
}, [subdomain, fetchState]);
|
|
22866
|
-
(0,
|
|
22413
|
+
(0, import_react18.useEffect)(() => {
|
|
22867
22414
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
22868
22415
|
}, [pathname, postToParent2]);
|
|
22869
|
-
(0,
|
|
22416
|
+
(0, import_react18.useEffect)(() => {
|
|
22870
22417
|
if (!subdomain || isEditMode) return;
|
|
22871
22418
|
const content = contentCache.get(subdomain);
|
|
22872
22419
|
if (!content) return;
|
|
@@ -22882,7 +22429,7 @@ function OhhwellsBridge() {
|
|
|
22882
22429
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
22883
22430
|
}
|
|
22884
22431
|
}, [pathname, subdomain, isEditMode]);
|
|
22885
|
-
(0,
|
|
22432
|
+
(0, import_react18.useEffect)(() => {
|
|
22886
22433
|
if (!isEditMode) return;
|
|
22887
22434
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
22888
22435
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -22890,11 +22437,11 @@ function OhhwellsBridge() {
|
|
|
22890
22437
|
deselectRef.current();
|
|
22891
22438
|
deactivateRef.current();
|
|
22892
22439
|
}, [pathname, isEditMode]);
|
|
22893
|
-
(0,
|
|
22440
|
+
(0, import_react18.useEffect)(() => {
|
|
22894
22441
|
if (!isEditMode) return;
|
|
22895
22442
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
22896
22443
|
}, [pathname, isEditMode]);
|
|
22897
|
-
(0,
|
|
22444
|
+
(0, import_react18.useEffect)(() => {
|
|
22898
22445
|
if (!isEditMode) return;
|
|
22899
22446
|
const observer = new MutationObserver(() => {
|
|
22900
22447
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -22905,7 +22452,7 @@ function OhhwellsBridge() {
|
|
|
22905
22452
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
22906
22453
|
return () => observer.disconnect();
|
|
22907
22454
|
}, [isEditMode, pathname]);
|
|
22908
|
-
(0,
|
|
22455
|
+
(0, import_react18.useEffect)(() => {
|
|
22909
22456
|
const contentForNav = () => {
|
|
22910
22457
|
if (isEditMode) return editContentRef.current;
|
|
22911
22458
|
if (!subdomain) return {};
|
|
@@ -22978,7 +22525,7 @@ function OhhwellsBridge() {
|
|
|
22978
22525
|
observer?.disconnect();
|
|
22979
22526
|
};
|
|
22980
22527
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
22981
|
-
(0,
|
|
22528
|
+
(0, import_react18.useEffect)(() => {
|
|
22982
22529
|
if (!isEditMode) return;
|
|
22983
22530
|
let applying = false;
|
|
22984
22531
|
let rafId = null;
|
|
@@ -23016,7 +22563,7 @@ function OhhwellsBridge() {
|
|
|
23016
22563
|
observer.disconnect();
|
|
23017
22564
|
};
|
|
23018
22565
|
}, [isEditMode, pathname]);
|
|
23019
|
-
(0,
|
|
22566
|
+
(0, import_react18.useEffect)(() => {
|
|
23020
22567
|
if (!isEditMode) return;
|
|
23021
22568
|
let lastPosted = 0;
|
|
23022
22569
|
const measure = () => {
|
|
@@ -23045,7 +22592,7 @@ function OhhwellsBridge() {
|
|
|
23045
22592
|
ro.disconnect();
|
|
23046
22593
|
};
|
|
23047
22594
|
}, [pathname, isEditMode, postToParent2]);
|
|
23048
|
-
(0,
|
|
22595
|
+
(0, import_react18.useEffect)(() => {
|
|
23049
22596
|
if (!subdomainFromQuery || isEditMode) return;
|
|
23050
22597
|
const handleClick = (e) => {
|
|
23051
22598
|
const anchor = e.target.closest("a");
|
|
@@ -23061,7 +22608,7 @@ function OhhwellsBridge() {
|
|
|
23061
22608
|
document.addEventListener("click", handleClick, true);
|
|
23062
22609
|
return () => document.removeEventListener("click", handleClick, true);
|
|
23063
22610
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
23064
|
-
(0,
|
|
22611
|
+
(0, import_react18.useEffect)(() => {
|
|
23065
22612
|
if (!isEditMode) {
|
|
23066
22613
|
editStylesRef.current?.base.remove();
|
|
23067
22614
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -23287,11 +22834,11 @@ function OhhwellsBridge() {
|
|
|
23287
22834
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
23288
22835
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
23289
22836
|
outline: none !important;
|
|
23290
|
-
caret-color: ${
|
|
22837
|
+
caret-color: ${PRIMARY4} !important;
|
|
23291
22838
|
cursor: text !important;
|
|
23292
22839
|
}
|
|
23293
22840
|
[data-ohw-editable][contenteditable]::selection,
|
|
23294
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
22841
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY4}59 !important; }
|
|
23295
22842
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
23296
22843
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
23297
22844
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -26174,7 +25721,7 @@ function OhhwellsBridge() {
|
|
|
26174
25721
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
26175
25722
|
};
|
|
26176
25723
|
}, [isEditMode, refreshStateRules]);
|
|
26177
|
-
(0,
|
|
25724
|
+
(0, import_react18.useEffect)(() => {
|
|
26178
25725
|
if (!isEditMode) return;
|
|
26179
25726
|
const THRESHOLD = 10;
|
|
26180
25727
|
const resolveWasSelected = (el) => {
|
|
@@ -26330,7 +25877,7 @@ function OhhwellsBridge() {
|
|
|
26330
25877
|
unlockFooterDragInteraction();
|
|
26331
25878
|
};
|
|
26332
25879
|
}, [isEditMode]);
|
|
26333
|
-
(0,
|
|
25880
|
+
(0, import_react18.useEffect)(() => {
|
|
26334
25881
|
if (!isEditMode) return;
|
|
26335
25882
|
const THRESHOLD = 10;
|
|
26336
25883
|
const onPointerDown = (e) => {
|
|
@@ -26421,7 +25968,7 @@ function OhhwellsBridge() {
|
|
|
26421
25968
|
document.removeEventListener("selectstart", blockSelectStart, true);
|
|
26422
25969
|
};
|
|
26423
25970
|
}, [isEditMode, persistButtonCollectionDrag, refreshButtonDragVisuals]);
|
|
26424
|
-
(0,
|
|
25971
|
+
(0, import_react18.useEffect)(() => {
|
|
26425
25972
|
const handler = (e) => {
|
|
26426
25973
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
26427
25974
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -26437,7 +25984,7 @@ function OhhwellsBridge() {
|
|
|
26437
25984
|
window.addEventListener("message", handler);
|
|
26438
25985
|
return () => window.removeEventListener("message", handler);
|
|
26439
25986
|
}, [processConfigRequest]);
|
|
26440
|
-
(0,
|
|
25987
|
+
(0, import_react18.useEffect)(() => {
|
|
26441
25988
|
if (!isEditMode) return;
|
|
26442
25989
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
26443
25990
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -26473,13 +26020,13 @@ function OhhwellsBridge() {
|
|
|
26473
26020
|
clearTimeout(timer);
|
|
26474
26021
|
};
|
|
26475
26022
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
26476
|
-
(0,
|
|
26023
|
+
(0, import_react18.useEffect)(() => {
|
|
26477
26024
|
scrollToHashSectionWhenReady();
|
|
26478
26025
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
26479
26026
|
window.addEventListener("hashchange", onHashChange);
|
|
26480
26027
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
26481
26028
|
}, [pathname]);
|
|
26482
|
-
const handleCommand = (0,
|
|
26029
|
+
const handleCommand = (0, import_react18.useCallback)((cmd) => {
|
|
26483
26030
|
const el = activeElRef.current;
|
|
26484
26031
|
const selBefore = window.getSelection();
|
|
26485
26032
|
let savedOffsets = null;
|
|
@@ -26515,7 +26062,7 @@ function OhhwellsBridge() {
|
|
|
26515
26062
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
26516
26063
|
refreshActiveCommandsRef.current();
|
|
26517
26064
|
}, []);
|
|
26518
|
-
(0,
|
|
26065
|
+
(0, import_react18.useEffect)(() => {
|
|
26519
26066
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
26520
26067
|
if (!session || !logoSizeDraft) return;
|
|
26521
26068
|
const onPanelAction = (e) => {
|
|
@@ -26553,7 +26100,7 @@ function OhhwellsBridge() {
|
|
|
26553
26100
|
window.addEventListener("message", onPanelAction);
|
|
26554
26101
|
return () => window.removeEventListener("message", onPanelAction);
|
|
26555
26102
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
26556
|
-
const handleStateChange = (0,
|
|
26103
|
+
const handleStateChange = (0, import_react18.useCallback)((state) => {
|
|
26557
26104
|
if (!activeStateElRef.current) return;
|
|
26558
26105
|
const el = activeStateElRef.current;
|
|
26559
26106
|
if (state === "Default") {
|
|
@@ -26566,7 +26113,7 @@ function OhhwellsBridge() {
|
|
|
26566
26113
|
}
|
|
26567
26114
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
26568
26115
|
}, [deactivate]);
|
|
26569
|
-
const reselectAfterLinkPopover = (0,
|
|
26116
|
+
const reselectAfterLinkPopover = (0, import_react18.useCallback)(
|
|
26570
26117
|
(hrefKey) => {
|
|
26571
26118
|
requestAnimationFrame(() => {
|
|
26572
26119
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -26575,7 +26122,7 @@ function OhhwellsBridge() {
|
|
|
26575
26122
|
},
|
|
26576
26123
|
[resolveHrefKeyElement]
|
|
26577
26124
|
);
|
|
26578
|
-
const closeLinkPopover = (0,
|
|
26125
|
+
const closeLinkPopover = (0, import_react18.useCallback)(() => {
|
|
26579
26126
|
const session = linkPopoverSessionRef.current;
|
|
26580
26127
|
addNavAfterAnchorRef.current = null;
|
|
26581
26128
|
setLinkPopover(null);
|
|
@@ -26583,9 +26130,9 @@ function OhhwellsBridge() {
|
|
|
26583
26130
|
reselectAfterLinkPopover(session.key);
|
|
26584
26131
|
}
|
|
26585
26132
|
}, [reselectAfterLinkPopover]);
|
|
26586
|
-
const closeLinkPopoverRef = (0,
|
|
26133
|
+
const closeLinkPopoverRef = (0, import_react18.useRef)(closeLinkPopover);
|
|
26587
26134
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
26588
|
-
const openLinkPopoverForActive = (0,
|
|
26135
|
+
const openLinkPopoverForActive = (0, import_react18.useCallback)(() => {
|
|
26589
26136
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
26590
26137
|
if (!hrefCtx) return;
|
|
26591
26138
|
bumpLinkPopoverGrace();
|
|
@@ -26596,7 +26143,7 @@ function OhhwellsBridge() {
|
|
|
26596
26143
|
});
|
|
26597
26144
|
deactivate();
|
|
26598
26145
|
}, [deactivate]);
|
|
26599
|
-
const openLinkPopoverForSelected = (0,
|
|
26146
|
+
const openLinkPopoverForSelected = (0, import_react18.useCallback)(() => {
|
|
26600
26147
|
const anchor = selectedElRef.current;
|
|
26601
26148
|
if (!anchor) return;
|
|
26602
26149
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -26613,7 +26160,7 @@ function OhhwellsBridge() {
|
|
|
26613
26160
|
});
|
|
26614
26161
|
deselect();
|
|
26615
26162
|
}, [deselect]);
|
|
26616
|
-
const handleSelectParent = (0,
|
|
26163
|
+
const handleSelectParent = (0, import_react18.useCallback)(() => {
|
|
26617
26164
|
const selected = selectedElRef.current;
|
|
26618
26165
|
if (!selected) return;
|
|
26619
26166
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -26640,7 +26187,7 @@ function OhhwellsBridge() {
|
|
|
26640
26187
|
}
|
|
26641
26188
|
deselectRef.current();
|
|
26642
26189
|
}, []);
|
|
26643
|
-
const handleDuplicateSelected = (0,
|
|
26190
|
+
const handleDuplicateSelected = (0, import_react18.useCallback)(() => {
|
|
26644
26191
|
const selected = selectedElRef.current;
|
|
26645
26192
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
26646
26193
|
if (isCtaButton(selected)) {
|
|
@@ -26803,7 +26350,7 @@ function OhhwellsBridge() {
|
|
|
26803
26350
|
});
|
|
26804
26351
|
}
|
|
26805
26352
|
}, [postToParent2, tokensForButton]);
|
|
26806
|
-
const runPendingDeleteUndo = (0,
|
|
26353
|
+
const runPendingDeleteUndo = (0, import_react18.useCallback)(() => {
|
|
26807
26354
|
const pending = pendingDeleteUndoRef.current;
|
|
26808
26355
|
if (!pending) return false;
|
|
26809
26356
|
pendingDeleteUndoRef.current = null;
|
|
@@ -26811,7 +26358,7 @@ function OhhwellsBridge() {
|
|
|
26811
26358
|
enforceLinkHrefs();
|
|
26812
26359
|
return true;
|
|
26813
26360
|
}, []);
|
|
26814
|
-
const handleDeleteSelected = (0,
|
|
26361
|
+
const handleDeleteSelected = (0, import_react18.useCallback)(() => {
|
|
26815
26362
|
const selected = selectedElRef.current;
|
|
26816
26363
|
if (!selected) return false;
|
|
26817
26364
|
if (isCtaButton(selected)) {
|
|
@@ -26864,7 +26411,7 @@ function OhhwellsBridge() {
|
|
|
26864
26411
|
}, [postToParent2]);
|
|
26865
26412
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
26866
26413
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
26867
|
-
const handleLinkPopoverSubmit = (0,
|
|
26414
|
+
const handleLinkPopoverSubmit = (0, import_react18.useCallback)(
|
|
26868
26415
|
(target) => {
|
|
26869
26416
|
const session = linkPopoverSessionRef.current;
|
|
26870
26417
|
if (!session) return;
|
|
@@ -26930,14 +26477,14 @@ function OhhwellsBridge() {
|
|
|
26930
26477
|
const showEditLink = toolbarShowEditLink;
|
|
26931
26478
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
26932
26479
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
26933
|
-
const handleMediaSelect = (0,
|
|
26480
|
+
const handleMediaSelect = (0, import_react18.useCallback)((key) => {
|
|
26934
26481
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
26935
26482
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
26936
26483
|
) ?? null;
|
|
26937
26484
|
if (!el) return;
|
|
26938
26485
|
selectMediaElementRef.current(el);
|
|
26939
26486
|
}, []);
|
|
26940
|
-
const handleMediaReplace = (0,
|
|
26487
|
+
const handleMediaReplace = (0, import_react18.useCallback)(
|
|
26941
26488
|
(key) => {
|
|
26942
26489
|
postToParent2({
|
|
26943
26490
|
type: "ow:image-pick",
|
|
@@ -26947,13 +26494,13 @@ function OhhwellsBridge() {
|
|
|
26947
26494
|
},
|
|
26948
26495
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
26949
26496
|
);
|
|
26950
|
-
const handleEditCarousel = (0,
|
|
26497
|
+
const handleEditCarousel = (0, import_react18.useCallback)(
|
|
26951
26498
|
(key) => {
|
|
26952
26499
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
26953
26500
|
},
|
|
26954
26501
|
[postToParent2]
|
|
26955
26502
|
);
|
|
26956
|
-
const handleMediaFadeOutComplete = (0,
|
|
26503
|
+
const handleMediaFadeOutComplete = (0, import_react18.useCallback)((key) => {
|
|
26957
26504
|
setUploadingRects((prev) => {
|
|
26958
26505
|
if (!(key in prev)) return prev;
|
|
26959
26506
|
const next = { ...prev };
|
|
@@ -26961,7 +26508,7 @@ function OhhwellsBridge() {
|
|
|
26961
26508
|
return next;
|
|
26962
26509
|
});
|
|
26963
26510
|
}, []);
|
|
26964
|
-
const handleVideoSettingsChange = (0,
|
|
26511
|
+
const handleVideoSettingsChange = (0, import_react18.useCallback)(
|
|
26965
26512
|
(key, settings) => {
|
|
26966
26513
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
26967
26514
|
const video = getVideoEl2(el);
|
|
@@ -26983,14 +26530,14 @@ function OhhwellsBridge() {
|
|
|
26983
26530
|
},
|
|
26984
26531
|
[postToParent2]
|
|
26985
26532
|
);
|
|
26986
|
-
return /* @__PURE__ */ (0,
|
|
26987
|
-
/* @__PURE__ */ (0,
|
|
26988
|
-
/* @__PURE__ */ (0,
|
|
26989
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0,
|
|
26533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
26534
|
+
/* @__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, {}) }),
|
|
26535
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
26536
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MadeWithOhhWells, {}),
|
|
26990
26537
|
bridgeRoot ? (0, import_react_dom5.createPortal)(
|
|
26991
|
-
/* @__PURE__ */ (0,
|
|
26992
|
-
/* @__PURE__ */ (0,
|
|
26993
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
26538
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
26539
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
26540
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
26994
26541
|
AiSectionOverlay,
|
|
26995
26542
|
{
|
|
26996
26543
|
postToParent: postToParent2,
|
|
@@ -26998,15 +26545,7 @@ function OhhwellsBridge() {
|
|
|
26998
26545
|
onSelectionChange: handleAiSectionSelectionChange
|
|
26999
26546
|
}
|
|
27000
26547
|
),
|
|
27001
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
27002
|
-
AiPricingCardOverlay,
|
|
27003
|
-
{
|
|
27004
|
-
postToParent: postToParent2,
|
|
27005
|
-
aiSectionsRef,
|
|
27006
|
-
applyTreeLocalRef
|
|
27007
|
-
}
|
|
27008
|
-
),
|
|
27009
|
-
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
26548
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27010
26549
|
AiMediaStripOverlay,
|
|
27011
26550
|
{
|
|
27012
26551
|
postToParent: postToParent2,
|
|
@@ -27014,12 +26553,12 @@ function OhhwellsBridge() {
|
|
|
27014
26553
|
applyTreeLocalRef
|
|
27015
26554
|
}
|
|
27016
26555
|
),
|
|
27017
|
-
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26556
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27018
26557
|
"div",
|
|
27019
26558
|
{
|
|
27020
26559
|
className: "pointer-events-none fixed z-2147483646",
|
|
27021
26560
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
27022
|
-
children: /* @__PURE__ */ (0,
|
|
26561
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27023
26562
|
DropIndicator,
|
|
27024
26563
|
{
|
|
27025
26564
|
direction: "horizontal",
|
|
@@ -27030,7 +26569,7 @@ function OhhwellsBridge() {
|
|
|
27030
26569
|
},
|
|
27031
26570
|
`section-drop-${slot.insertIndex}-${i}`
|
|
27032
26571
|
)),
|
|
27033
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
26572
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27034
26573
|
MediaOverlay,
|
|
27035
26574
|
{
|
|
27036
26575
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -27041,7 +26580,7 @@ function OhhwellsBridge() {
|
|
|
27041
26580
|
},
|
|
27042
26581
|
`uploading-${key}`
|
|
27043
26582
|
)),
|
|
27044
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0,
|
|
26583
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27045
26584
|
MediaOverlay,
|
|
27046
26585
|
{
|
|
27047
26586
|
hover: mediaHover,
|
|
@@ -27052,7 +26591,7 @@ function OhhwellsBridge() {
|
|
|
27052
26591
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27053
26592
|
}
|
|
27054
26593
|
),
|
|
27055
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0,
|
|
26594
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27056
26595
|
MediaOverlay,
|
|
27057
26596
|
{
|
|
27058
26597
|
hover: selectedMedia,
|
|
@@ -27064,7 +26603,7 @@ function OhhwellsBridge() {
|
|
|
27064
26603
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27065
26604
|
}
|
|
27066
26605
|
),
|
|
27067
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
26606
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27068
26607
|
CarouselOverlay,
|
|
27069
26608
|
{
|
|
27070
26609
|
hover: carouselHover,
|
|
@@ -27072,10 +26611,10 @@ function OhhwellsBridge() {
|
|
|
27072
26611
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
27073
26612
|
}
|
|
27074
26613
|
),
|
|
27075
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
27076
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
27077
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ (0,
|
|
27078
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26614
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
26615
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
26616
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
26617
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27079
26618
|
"div",
|
|
27080
26619
|
{
|
|
27081
26620
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27085,7 +26624,7 @@ function OhhwellsBridge() {
|
|
|
27085
26624
|
width: slot.width,
|
|
27086
26625
|
height: slot.height
|
|
27087
26626
|
},
|
|
27088
|
-
children: /* @__PURE__ */ (0,
|
|
26627
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27089
26628
|
DropIndicator,
|
|
27090
26629
|
{
|
|
27091
26630
|
direction: slot.direction,
|
|
@@ -27096,7 +26635,7 @@ function OhhwellsBridge() {
|
|
|
27096
26635
|
},
|
|
27097
26636
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
27098
26637
|
)),
|
|
27099
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26638
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27100
26639
|
"div",
|
|
27101
26640
|
{
|
|
27102
26641
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27106,7 +26645,7 @@ function OhhwellsBridge() {
|
|
|
27106
26645
|
width: slot.width,
|
|
27107
26646
|
height: slot.height
|
|
27108
26647
|
},
|
|
27109
|
-
children: /* @__PURE__ */ (0,
|
|
26648
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27110
26649
|
DropIndicator,
|
|
27111
26650
|
{
|
|
27112
26651
|
direction: slot.direction,
|
|
@@ -27117,7 +26656,7 @@ function OhhwellsBridge() {
|
|
|
27117
26656
|
},
|
|
27118
26657
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
27119
26658
|
)),
|
|
27120
|
-
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26659
|
+
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27121
26660
|
"div",
|
|
27122
26661
|
{
|
|
27123
26662
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27127,7 +26666,7 @@ function OhhwellsBridge() {
|
|
|
27127
26666
|
width: slot.width,
|
|
27128
26667
|
height: slot.height
|
|
27129
26668
|
},
|
|
27130
|
-
children: /* @__PURE__ */ (0,
|
|
26669
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27131
26670
|
DropIndicator,
|
|
27132
26671
|
{
|
|
27133
26672
|
direction: slot.direction,
|
|
@@ -27138,10 +26677,10 @@ function OhhwellsBridge() {
|
|
|
27138
26677
|
},
|
|
27139
26678
|
`button-drop-${slot.direction}-${slot.insertIndex}-${i}`
|
|
27140
26679
|
)),
|
|
27141
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
27142
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
27143
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
27144
|
-
formPickRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
26680
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
26681
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
26682
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
26683
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27145
26684
|
ItemInteractionLayer,
|
|
27146
26685
|
{
|
|
27147
26686
|
rect: formPickRect,
|
|
@@ -27149,13 +26688,13 @@ function OhhwellsBridge() {
|
|
|
27149
26688
|
itemDragSurface: false,
|
|
27150
26689
|
toolbarAlign: "left",
|
|
27151
26690
|
chromeGap: 24,
|
|
27152
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0,
|
|
26691
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27153
26692
|
"div",
|
|
27154
26693
|
{
|
|
27155
26694
|
"data-ohw-form-toolbar": "",
|
|
27156
26695
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
27157
26696
|
children: [
|
|
27158
|
-
/* @__PURE__ */ (0,
|
|
26697
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27159
26698
|
"button",
|
|
27160
26699
|
{
|
|
27161
26700
|
type: "button",
|
|
@@ -27163,11 +26702,11 @@ function OhhwellsBridge() {
|
|
|
27163
26702
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
27164
26703
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
27165
26704
|
"data-ohw-add-field": "",
|
|
27166
|
-
children: /* @__PURE__ */ (0,
|
|
26705
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Plus, { size: 15, "aria-hidden": true })
|
|
27167
26706
|
}
|
|
27168
26707
|
),
|
|
27169
|
-
/* @__PURE__ */ (0,
|
|
27170
|
-
/* @__PURE__ */ (0,
|
|
26708
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
26709
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27171
26710
|
"button",
|
|
27172
26711
|
{
|
|
27173
26712
|
type: "button",
|
|
@@ -27183,11 +26722,11 @@ function OhhwellsBridge() {
|
|
|
27183
26722
|
});
|
|
27184
26723
|
},
|
|
27185
26724
|
children: [
|
|
27186
|
-
/* @__PURE__ */ (0,
|
|
26725
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Settings, { size: 14, "aria-hidden": true }),
|
|
27187
26726
|
"Form settings",
|
|
27188
26727
|
formPickCount ? (
|
|
27189
26728
|
// Counter pill, per the design — not a text suffix.
|
|
27190
|
-
/* @__PURE__ */ (0,
|
|
26729
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27191
26730
|
"span",
|
|
27192
26731
|
{
|
|
27193
26732
|
"data-ohw-form-count": "",
|
|
@@ -27199,8 +26738,8 @@ function OhhwellsBridge() {
|
|
|
27199
26738
|
]
|
|
27200
26739
|
}
|
|
27201
26740
|
),
|
|
27202
|
-
/* @__PURE__ */ (0,
|
|
27203
|
-
/* @__PURE__ */ (0,
|
|
26741
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
26742
|
+
/* @__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)(
|
|
27204
26743
|
"button",
|
|
27205
26744
|
{
|
|
27206
26745
|
type: "button",
|
|
@@ -27231,7 +26770,7 @@ function OhhwellsBridge() {
|
|
|
27231
26770
|
)
|
|
27232
26771
|
}
|
|
27233
26772
|
),
|
|
27234
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
26773
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27235
26774
|
ItemInteractionLayer,
|
|
27236
26775
|
{
|
|
27237
26776
|
rect: formHoverRect,
|
|
@@ -27239,7 +26778,7 @@ function OhhwellsBridge() {
|
|
|
27239
26778
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
27240
26779
|
}
|
|
27241
26780
|
),
|
|
27242
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
26781
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27243
26782
|
ItemInteractionLayer,
|
|
27244
26783
|
{
|
|
27245
26784
|
rect: fieldPickRect,
|
|
@@ -27251,7 +26790,7 @@ function OhhwellsBridge() {
|
|
|
27251
26790
|
dragHandleLabel: "Reorder field",
|
|
27252
26791
|
onDragHandleDragStart: handleFieldDragStart,
|
|
27253
26792
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
27254
|
-
toolbar: /* @__PURE__ */ (0,
|
|
26793
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27255
26794
|
FormFieldToolbar,
|
|
27256
26795
|
{
|
|
27257
26796
|
type: fieldPickState.type,
|
|
@@ -27264,12 +26803,12 @@ function OhhwellsBridge() {
|
|
|
27264
26803
|
)
|
|
27265
26804
|
}
|
|
27266
26805
|
),
|
|
27267
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26806
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27268
26807
|
"div",
|
|
27269
26808
|
{
|
|
27270
26809
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
27271
26810
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
27272
|
-
children: /* @__PURE__ */ (0,
|
|
26811
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27273
26812
|
DropIndicator,
|
|
27274
26813
|
{
|
|
27275
26814
|
direction: "horizontal",
|
|
@@ -27282,7 +26821,7 @@ function OhhwellsBridge() {
|
|
|
27282
26821
|
)) : null,
|
|
27283
26822
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
27284
26823
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
27285
|
-
return /* @__PURE__ */ (0,
|
|
26824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27286
26825
|
"div",
|
|
27287
26826
|
{
|
|
27288
26827
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -27290,12 +26829,12 @@ function OhhwellsBridge() {
|
|
|
27290
26829
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
27291
26830
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
27292
26831
|
},
|
|
27293
|
-
children: /* @__PURE__ */ (0,
|
|
26832
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FieldTypePicker, { onPick: handleAddField })
|
|
27294
26833
|
}
|
|
27295
26834
|
);
|
|
27296
26835
|
})() : null,
|
|
27297
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
27298
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
26836
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
26837
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27299
26838
|
FooterContainerChrome,
|
|
27300
26839
|
{
|
|
27301
26840
|
rect: toolbarRect,
|
|
@@ -27303,13 +26842,17 @@ function OhhwellsBridge() {
|
|
|
27303
26842
|
addDisabled: !canAddFooterColumn()
|
|
27304
26843
|
}
|
|
27305
26844
|
),
|
|
27306
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0,
|
|
26845
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27307
26846
|
ItemInteractionLayer,
|
|
27308
26847
|
{
|
|
27309
26848
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
|
|
27310
26849
|
toolbarBelowRect: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanelRect(selectedElRef.current) : null,
|
|
27311
26850
|
toolbarBelowEl: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanel(selectedElRef.current) : null,
|
|
27312
26851
|
elRef: glowElRef,
|
|
26852
|
+
hidden: isRectOutsideClip(
|
|
26853
|
+
isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
|
|
26854
|
+
getIframeVisibleClip(parentScrollRef.current)
|
|
26855
|
+
),
|
|
27313
26856
|
state: isItemDragging ? "dragging" : selectedElRef.current && isNavigationItem2(selectedElRef.current) && getOpenNavDropdownPanel(selectedElRef.current) ? "active-bottom" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
|
|
27314
26857
|
showHandle: toolbarVariant === "link-action" && Boolean(reorderHrefKey) || toolbarVariant === "select-frame" && isFooterFrameSelection,
|
|
27315
26858
|
dragDisabled: reorderDragDisabled,
|
|
@@ -27319,7 +26862,7 @@ function OhhwellsBridge() {
|
|
|
27319
26862
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
27320
26863
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
27321
26864
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
27322
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0,
|
|
26865
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27323
26866
|
ItemActionToolbar,
|
|
27324
26867
|
{
|
|
27325
26868
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -27370,8 +26913,8 @@ function OhhwellsBridge() {
|
|
|
27370
26913
|
) : void 0
|
|
27371
26914
|
}
|
|
27372
26915
|
),
|
|
27373
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0,
|
|
27374
|
-
/* @__PURE__ */ (0,
|
|
26916
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
26917
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27375
26918
|
EditGlowChrome,
|
|
27376
26919
|
{
|
|
27377
26920
|
rect: toolbarRect,
|
|
@@ -27381,7 +26924,7 @@ function OhhwellsBridge() {
|
|
|
27381
26924
|
hideHandle: isItemDragging
|
|
27382
26925
|
}
|
|
27383
26926
|
),
|
|
27384
|
-
/* @__PURE__ */ (0,
|
|
26927
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27385
26928
|
FloatingToolbar,
|
|
27386
26929
|
{
|
|
27387
26930
|
rect: toolbarRect,
|
|
@@ -27394,7 +26937,7 @@ function OhhwellsBridge() {
|
|
|
27394
26937
|
}
|
|
27395
26938
|
)
|
|
27396
26939
|
] }),
|
|
27397
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
26940
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27398
26941
|
"div",
|
|
27399
26942
|
{
|
|
27400
26943
|
"data-ohw-max-badge": "",
|
|
@@ -27420,7 +26963,7 @@ function OhhwellsBridge() {
|
|
|
27420
26963
|
]
|
|
27421
26964
|
}
|
|
27422
26965
|
),
|
|
27423
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
26966
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27424
26967
|
StateToggle,
|
|
27425
26968
|
{
|
|
27426
26969
|
rect: toggleState.rect,
|
|
@@ -27429,15 +26972,15 @@ function OhhwellsBridge() {
|
|
|
27429
26972
|
onStateChange: handleStateChange
|
|
27430
26973
|
}
|
|
27431
26974
|
),
|
|
27432
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
26975
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27433
26976
|
"div",
|
|
27434
26977
|
{
|
|
27435
26978
|
"data-ohw-section-insert-line": "",
|
|
27436
26979
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
27437
26980
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
27438
26981
|
children: [
|
|
27439
|
-
/* @__PURE__ */ (0,
|
|
27440
|
-
/* @__PURE__ */ (0,
|
|
26982
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
26983
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27441
26984
|
Badge,
|
|
27442
26985
|
{
|
|
27443
26986
|
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",
|
|
@@ -27454,11 +26997,11 @@ function OhhwellsBridge() {
|
|
|
27454
26997
|
children: "Add Section"
|
|
27455
26998
|
}
|
|
27456
26999
|
),
|
|
27457
|
-
/* @__PURE__ */ (0,
|
|
27000
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
27458
27001
|
]
|
|
27459
27002
|
}
|
|
27460
27003
|
),
|
|
27461
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
27004
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27462
27005
|
LinkPopover,
|
|
27463
27006
|
{
|
|
27464
27007
|
panelRef: linkPopoverPanelRef,
|
|
@@ -27475,7 +27018,7 @@ function OhhwellsBridge() {
|
|
|
27475
27018
|
},
|
|
27476
27019
|
linkPopover.key
|
|
27477
27020
|
) : null,
|
|
27478
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0,
|
|
27021
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27479
27022
|
FloatingPanel,
|
|
27480
27023
|
{
|
|
27481
27024
|
open: true,
|
|
@@ -27485,7 +27028,7 @@ function OhhwellsBridge() {
|
|
|
27485
27028
|
onPositionChange: setFloatingPanelPos,
|
|
27486
27029
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27487
27030
|
onClose: closeFloatingPanelOnly,
|
|
27488
|
-
children: /* @__PURE__ */ (0,
|
|
27031
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27489
27032
|
SocialsDisplayPanel,
|
|
27490
27033
|
{
|
|
27491
27034
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|
|
@@ -27506,19 +27049,19 @@ function OhhwellsBridge() {
|
|
|
27506
27049
|
const tokens = tokensFromButton(button);
|
|
27507
27050
|
const current = assignmentFor(button, editContentRef.current, tokens);
|
|
27508
27051
|
void buttonStyleTick;
|
|
27509
|
-
return /* @__PURE__ */ (0,
|
|
27052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27510
27053
|
FloatingPanel,
|
|
27511
27054
|
{
|
|
27512
27055
|
open: true,
|
|
27513
27056
|
title: floatingPanel.title,
|
|
27514
27057
|
context: floatingPanel.context,
|
|
27515
|
-
icon: /* @__PURE__ */ (0,
|
|
27058
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Brush, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
27516
27059
|
position: floatingPanelPos,
|
|
27517
27060
|
onPositionChange: setFloatingPanelPos,
|
|
27518
27061
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27519
27062
|
onClose: closeFloatingPanelOnly,
|
|
27520
27063
|
bodyClassName: "gap-5",
|
|
27521
|
-
children: /* @__PURE__ */ (0,
|
|
27064
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27522
27065
|
ButtonStylePanel,
|
|
27523
27066
|
{
|
|
27524
27067
|
variants: tokens.variants,
|
|
@@ -27546,10 +27089,10 @@ function OhhwellsBridge() {
|
|
|
27546
27089
|
|
|
27547
27090
|
// src/ui/EmptySection.tsx
|
|
27548
27091
|
var import_link = __toESM(require("next/link"), 1);
|
|
27549
|
-
var
|
|
27092
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
27550
27093
|
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
27551
|
-
return /* @__PURE__ */ (0,
|
|
27552
|
-
/* @__PURE__ */ (0,
|
|
27094
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
27095
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
27553
27096
|
"p",
|
|
27554
27097
|
{
|
|
27555
27098
|
style: {
|
|
@@ -27561,10 +27104,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
27561
27104
|
color: "var(--brand-accent)",
|
|
27562
27105
|
marginBottom: "1.5rem"
|
|
27563
27106
|
},
|
|
27564
|
-
children: /* @__PURE__ */ (0,
|
|
27107
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
|
|
27565
27108
|
}
|
|
27566
27109
|
),
|
|
27567
|
-
/* @__PURE__ */ (0,
|
|
27110
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
27568
27111
|
"h1",
|
|
27569
27112
|
{
|
|
27570
27113
|
style: {
|
|
@@ -27579,7 +27122,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
27579
27122
|
children: title
|
|
27580
27123
|
}
|
|
27581
27124
|
),
|
|
27582
|
-
/* @__PURE__ */ (0,
|
|
27125
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
27583
27126
|
"p",
|
|
27584
27127
|
{
|
|
27585
27128
|
style: {
|