@ohhwells/bridge 0.1.117-next.320 → 0.1.117-next.321
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 +702 -1193
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +672 -1163
- 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
|
}
|
|
@@ -10024,517 +10026,9 @@ function AiSectionOverlay({
|
|
|
10024
10026
|
] });
|
|
10025
10027
|
}
|
|
10026
10028
|
|
|
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))
|
|
10528
|
-
}
|
|
10529
|
-
)
|
|
10530
|
-
}
|
|
10531
|
-
)
|
|
10532
|
-
] });
|
|
10533
|
-
}
|
|
10534
|
-
|
|
10535
10029
|
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
10536
|
-
var
|
|
10537
|
-
var
|
|
10030
|
+
var import_react9 = require("react");
|
|
10031
|
+
var import_lucide_react8 = require("lucide-react");
|
|
10538
10032
|
|
|
10539
10033
|
// src/lib/ai-media-strip-tree.ts
|
|
10540
10034
|
var MEDIA_STRIP_ITEM_MIN = 1;
|
|
@@ -10640,12 +10134,20 @@ function setMediaStripHover(tree, hover) {
|
|
|
10640
10134
|
return true;
|
|
10641
10135
|
});
|
|
10642
10136
|
}
|
|
10137
|
+
function setMediaStripItemAsset(tree, index, assetId) {
|
|
10138
|
+
return withMediaStrip(tree, (block) => {
|
|
10139
|
+
const items = block.items;
|
|
10140
|
+
if (index < 0 || index >= items.length) return false;
|
|
10141
|
+
items[index] = { ...items[index], assetId };
|
|
10142
|
+
return true;
|
|
10143
|
+
});
|
|
10144
|
+
}
|
|
10643
10145
|
|
|
10644
10146
|
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
10645
|
-
var
|
|
10646
|
-
var
|
|
10647
|
-
var
|
|
10648
|
-
var
|
|
10147
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
10148
|
+
var PRIMARY3 = "#0885FE";
|
|
10149
|
+
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
10150
|
+
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
10649
10151
|
function findMediaStripItemElement(sectionId, index) {
|
|
10650
10152
|
const sectionEl = findByInstanceId(sectionId);
|
|
10651
10153
|
if (!sectionEl) return null;
|
|
@@ -10655,7 +10157,7 @@ function findMediaStripItemElement(sectionId, index) {
|
|
|
10655
10157
|
}
|
|
10656
10158
|
return null;
|
|
10657
10159
|
}
|
|
10658
|
-
function
|
|
10160
|
+
function readRect2(ref) {
|
|
10659
10161
|
const el = ref && findMediaStripItemElement(ref.sectionId, ref.index);
|
|
10660
10162
|
if (!el) return null;
|
|
10661
10163
|
const r2 = el.getBoundingClientRect();
|
|
@@ -10663,14 +10165,14 @@ function readRect3(ref) {
|
|
|
10663
10165
|
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
10664
10166
|
}
|
|
10665
10167
|
function useLiveItemRect(ref) {
|
|
10666
|
-
const [rect, setRect] = (0,
|
|
10667
|
-
(0,
|
|
10168
|
+
const [rect, setRect] = (0, import_react9.useState)(null);
|
|
10169
|
+
(0, import_react9.useEffect)(() => {
|
|
10668
10170
|
if (!ref) {
|
|
10669
10171
|
setRect(null);
|
|
10670
10172
|
return;
|
|
10671
10173
|
}
|
|
10672
10174
|
const update = () => {
|
|
10673
|
-
const next =
|
|
10175
|
+
const next = readRect2(ref);
|
|
10674
10176
|
setRect(
|
|
10675
10177
|
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
10676
10178
|
);
|
|
@@ -10688,7 +10190,7 @@ function useLiveItemRect(ref) {
|
|
|
10688
10190
|
}, [ref?.sectionId, ref?.index]);
|
|
10689
10191
|
return rect;
|
|
10690
10192
|
}
|
|
10691
|
-
function
|
|
10193
|
+
function requestValidateTree(postToParent2, tree) {
|
|
10692
10194
|
return new Promise((resolve) => {
|
|
10693
10195
|
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10694
10196
|
const timeout = window.setTimeout(() => {
|
|
@@ -10724,13 +10226,13 @@ function requestAssetPick(postToParent2) {
|
|
|
10724
10226
|
postToParent2({ type: "ow:asset-pick", id });
|
|
10725
10227
|
});
|
|
10726
10228
|
}
|
|
10727
|
-
function
|
|
10229
|
+
function Pill({
|
|
10728
10230
|
label,
|
|
10729
10231
|
onClick,
|
|
10730
10232
|
disabled,
|
|
10731
10233
|
active
|
|
10732
10234
|
}) {
|
|
10733
|
-
return /* @__PURE__ */ (0,
|
|
10235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10734
10236
|
"button",
|
|
10735
10237
|
{
|
|
10736
10238
|
type: "button",
|
|
@@ -10745,8 +10247,8 @@ function Pill2({
|
|
|
10745
10247
|
borderRadius: 999,
|
|
10746
10248
|
border: "none",
|
|
10747
10249
|
cursor: disabled ? "default" : "pointer",
|
|
10748
|
-
background: active ?
|
|
10749
|
-
color: active ? "#ffffff" :
|
|
10250
|
+
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10251
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10750
10252
|
opacity: disabled ? 0.4 : 1,
|
|
10751
10253
|
fontSize: 12,
|
|
10752
10254
|
lineHeight: "16px",
|
|
@@ -10789,6 +10291,7 @@ function MediaStripToolbar({
|
|
|
10789
10291
|
onResize,
|
|
10790
10292
|
onAddItem,
|
|
10791
10293
|
onRemoveItem,
|
|
10294
|
+
onChangeImage,
|
|
10792
10295
|
onMoveLeft,
|
|
10793
10296
|
onMoveRight
|
|
10794
10297
|
}) {
|
|
@@ -10801,7 +10304,7 @@ function MediaStripToolbar({
|
|
|
10801
10304
|
const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
10802
10305
|
const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10803
10306
|
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
10804
|
-
return /* @__PURE__ */ (0,
|
|
10307
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10805
10308
|
"div",
|
|
10806
10309
|
{
|
|
10807
10310
|
"data-ohw-bridge": "",
|
|
@@ -10812,7 +10315,7 @@ function MediaStripToolbar({
|
|
|
10812
10315
|
flexDirection: "column",
|
|
10813
10316
|
gap: 6,
|
|
10814
10317
|
alignItems: "center",
|
|
10815
|
-
background:
|
|
10318
|
+
background: OHW_BLUE,
|
|
10816
10319
|
padding: 8,
|
|
10817
10320
|
borderRadius: 12,
|
|
10818
10321
|
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
@@ -10821,29 +10324,30 @@ function MediaStripToolbar({
|
|
|
10821
10324
|
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
10822
10325
|
},
|
|
10823
10326
|
children: [
|
|
10824
|
-
/* @__PURE__ */ (0,
|
|
10825
|
-
VARIANTS.map((v) => /* @__PURE__ */ (0,
|
|
10826
|
-
ALIGNS.map((a) => /* @__PURE__ */ (0,
|
|
10327
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10328
|
+
VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
|
|
10329
|
+
ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
|
|
10827
10330
|
] }),
|
|
10828
|
-
/* @__PURE__ */ (0,
|
|
10829
|
-
HOVERS.map((h) => /* @__PURE__ */ (0,
|
|
10830
|
-
TREATMENTS.map((t) => /* @__PURE__ */ (0,
|
|
10331
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10332
|
+
HOVERS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
|
|
10333
|
+
TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
|
|
10831
10334
|
] }),
|
|
10832
|
-
/* @__PURE__ */ (0,
|
|
10833
|
-
/* @__PURE__ */ (0,
|
|
10834
|
-
/* @__PURE__ */ (0,
|
|
10335
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
|
|
10336
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212", onClick: () => onResize(-8) }),
|
|
10337
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: "#ffffff", fontSize: 12, minWidth: 34, textAlign: "center" }, children: [
|
|
10835
10338
|
sizeValue,
|
|
10836
10339
|
"px"
|
|
10837
10340
|
] }),
|
|
10838
|
-
/* @__PURE__ */ (0,
|
|
10341
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+", onClick: () => onResize(8) })
|
|
10839
10342
|
] }),
|
|
10840
|
-
/* @__PURE__ */ (0,
|
|
10841
|
-
/* @__PURE__ */ (0,
|
|
10842
|
-
/* @__PURE__ */ (0,
|
|
10843
|
-
/* @__PURE__ */ (0,
|
|
10844
|
-
/* @__PURE__ */ (0,
|
|
10343
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10344
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Change Image", onClick: onChangeImage }),
|
|
10345
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Item", onClick: onAddItem }),
|
|
10346
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 }),
|
|
10347
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
|
|
10348
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
|
|
10845
10349
|
] }),
|
|
10846
|
-
error && /* @__PURE__ */ (0,
|
|
10350
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10847
10351
|
]
|
|
10848
10352
|
}
|
|
10849
10353
|
);
|
|
@@ -10862,13 +10366,13 @@ function AiMediaStripOverlay({
|
|
|
10862
10366
|
aiSectionsRef,
|
|
10863
10367
|
applyTreeLocalRef
|
|
10864
10368
|
}) {
|
|
10865
|
-
const [hover, setHover] = (0,
|
|
10866
|
-
const [active, setActive] = (0,
|
|
10867
|
-
const [pending, setPending] = (0,
|
|
10868
|
-
const [error, setError] = (0,
|
|
10869
|
-
const activeRef = (0,
|
|
10369
|
+
const [hover, setHover] = (0, import_react9.useState)(null);
|
|
10370
|
+
const [active, setActive] = (0, import_react9.useState)(null);
|
|
10371
|
+
const [pending, setPending] = (0, import_react9.useState)(false);
|
|
10372
|
+
const [error, setError] = (0, import_react9.useState)(null);
|
|
10373
|
+
const activeRef = (0, import_react9.useRef)(null);
|
|
10870
10374
|
activeRef.current = active;
|
|
10871
|
-
(0,
|
|
10375
|
+
(0, import_react9.useEffect)(() => {
|
|
10872
10376
|
const onMove = (e) => {
|
|
10873
10377
|
const t = e.target;
|
|
10874
10378
|
if (!(t instanceof HTMLElement)) return;
|
|
@@ -10898,7 +10402,7 @@ function AiMediaStripOverlay({
|
|
|
10898
10402
|
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10899
10403
|
};
|
|
10900
10404
|
}, []);
|
|
10901
|
-
(0,
|
|
10405
|
+
(0, import_react9.useEffect)(() => {
|
|
10902
10406
|
const onClick = (e) => {
|
|
10903
10407
|
const current = activeRef.current;
|
|
10904
10408
|
if (!current) return;
|
|
@@ -10913,7 +10417,7 @@ function AiMediaStripOverlay({
|
|
|
10913
10417
|
document.addEventListener("click", onClick, true);
|
|
10914
10418
|
return () => document.removeEventListener("click", onClick, true);
|
|
10915
10419
|
}, []);
|
|
10916
|
-
(0,
|
|
10420
|
+
(0, import_react9.useEffect)(() => {
|
|
10917
10421
|
const onBlur = () => {
|
|
10918
10422
|
if (!activeRef.current) return;
|
|
10919
10423
|
setActive(null);
|
|
@@ -10922,7 +10426,7 @@ function AiMediaStripOverlay({
|
|
|
10922
10426
|
window.addEventListener("blur", onBlur);
|
|
10923
10427
|
return () => window.removeEventListener("blur", onBlur);
|
|
10924
10428
|
}, []);
|
|
10925
|
-
(0,
|
|
10429
|
+
(0, import_react9.useEffect)(() => {
|
|
10926
10430
|
const onKeyDown = (e) => {
|
|
10927
10431
|
if (e.key !== "Escape") return;
|
|
10928
10432
|
if (!activeRef.current) return;
|
|
@@ -10932,22 +10436,22 @@ function AiMediaStripOverlay({
|
|
|
10932
10436
|
document.addEventListener("keydown", onKeyDown);
|
|
10933
10437
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10934
10438
|
}, []);
|
|
10935
|
-
const findEntry = (0,
|
|
10439
|
+
const findEntry = (0, import_react9.useCallback)(
|
|
10936
10440
|
(sectionId) => {
|
|
10937
10441
|
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10938
10442
|
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10939
10443
|
},
|
|
10940
10444
|
[aiSectionsRef]
|
|
10941
10445
|
);
|
|
10942
|
-
const runMutation = (0,
|
|
10943
|
-
async (sectionId, mutate) => {
|
|
10446
|
+
const runMutation = (0, import_react9.useCallback)(
|
|
10447
|
+
async (sectionId, mutate, extraMedia) => {
|
|
10944
10448
|
const entry = findEntry(sectionId);
|
|
10945
10449
|
if (!entry) return false;
|
|
10946
10450
|
const nextTree = mutate(entry.tree);
|
|
10947
10451
|
if (!nextTree) return false;
|
|
10948
10452
|
setPending(true);
|
|
10949
10453
|
setError(null);
|
|
10950
|
-
const { ok, reasons } = await
|
|
10454
|
+
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10951
10455
|
setPending(false);
|
|
10952
10456
|
if (!ok) {
|
|
10953
10457
|
setError(reasons[0] ?? "That change is not allowed.");
|
|
@@ -10959,9 +10463,8 @@ function AiMediaStripOverlay({
|
|
|
10959
10463
|
targetSectionId: sectionId,
|
|
10960
10464
|
tree: nextTree,
|
|
10961
10465
|
label: entry.label,
|
|
10962
|
-
media: entry.media,
|
|
10963
|
-
...entry.brand ? { brand: entry.brand } : {}
|
|
10964
|
-
skipScrollIntoView: true
|
|
10466
|
+
media: extraMedia ? { ...entry.media, ...extraMedia } : entry.media,
|
|
10467
|
+
...entry.brand ? { brand: entry.brand } : {}
|
|
10965
10468
|
});
|
|
10966
10469
|
return true;
|
|
10967
10470
|
},
|
|
@@ -10970,8 +10473,10 @@ function AiMediaStripOverlay({
|
|
|
10970
10473
|
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10971
10474
|
const hoverHandleRect = useLiveItemRect(!active && hover ? hover : null);
|
|
10972
10475
|
const activeItemRect = useLiveItemRect(active);
|
|
10973
|
-
|
|
10974
|
-
|
|
10476
|
+
const TOOLBAR_APPROX_H = 170;
|
|
10477
|
+
const toolbarState = activeItemRect && activeItemRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
10478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
10479
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10975
10480
|
"button",
|
|
10976
10481
|
{
|
|
10977
10482
|
type: "button",
|
|
@@ -10985,9 +10490,9 @@ function AiMediaStripOverlay({
|
|
|
10985
10490
|
width: 28,
|
|
10986
10491
|
height: 28,
|
|
10987
10492
|
borderRadius: 8,
|
|
10988
|
-
border: `1.5px dashed ${
|
|
10493
|
+
border: `1.5px dashed ${PRIMARY3}`,
|
|
10989
10494
|
background: "#ffffff",
|
|
10990
|
-
color:
|
|
10495
|
+
color: PRIMARY3,
|
|
10991
10496
|
display: "flex",
|
|
10992
10497
|
alignItems: "center",
|
|
10993
10498
|
justifyContent: "center",
|
|
@@ -10996,15 +10501,15 @@ function AiMediaStripOverlay({
|
|
|
10996
10501
|
fontSize: 14,
|
|
10997
10502
|
fontWeight: 700
|
|
10998
10503
|
},
|
|
10999
|
-
children: /* @__PURE__ */ (0,
|
|
10504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
11000
10505
|
}
|
|
11001
10506
|
),
|
|
11002
|
-
activeItemRect && active && activeEntry && /* @__PURE__ */ (0,
|
|
10507
|
+
activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
11003
10508
|
ItemInteractionLayer,
|
|
11004
10509
|
{
|
|
11005
10510
|
rect: activeItemRect,
|
|
11006
|
-
state:
|
|
11007
|
-
toolbar: /* @__PURE__ */ (0,
|
|
10511
|
+
state: toolbarState,
|
|
10512
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
11008
10513
|
MediaStripToolbar,
|
|
11009
10514
|
{
|
|
11010
10515
|
entry: activeEntry,
|
|
@@ -11025,10 +10530,22 @@ function AiMediaStripOverlay({
|
|
|
11025
10530
|
void requestAssetPick(postToParent2).then((picked) => {
|
|
11026
10531
|
if (!picked) return;
|
|
11027
10532
|
const item = { assetId: picked.assetId, alt: "Logo" };
|
|
11028
|
-
void runMutation(
|
|
11029
|
-
|
|
11030
|
-
|
|
11031
|
-
}
|
|
10533
|
+
void runMutation(
|
|
10534
|
+
active.sectionId,
|
|
10535
|
+
(tree) => addMediaStripItem(tree, item, active.index),
|
|
10536
|
+
{ [picked.assetId]: picked.url }
|
|
10537
|
+
).then((applied) => {
|
|
10538
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10539
|
+
});
|
|
10540
|
+
});
|
|
10541
|
+
},
|
|
10542
|
+
onChangeImage: () => {
|
|
10543
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10544
|
+
if (!picked) return;
|
|
10545
|
+
void runMutation(
|
|
10546
|
+
active.sectionId,
|
|
10547
|
+
(tree) => setMediaStripItemAsset(tree, active.index, picked.assetId),
|
|
10548
|
+
{ [picked.assetId]: picked.url }
|
|
11032
10549
|
);
|
|
11033
10550
|
});
|
|
11034
10551
|
},
|
|
@@ -11371,28 +10888,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
11371
10888
|
}
|
|
11372
10889
|
|
|
11373
10890
|
// src/ui/link-modal/LinkPopover.tsx
|
|
11374
|
-
var
|
|
10891
|
+
var import_react13 = require("react");
|
|
11375
10892
|
|
|
11376
10893
|
// src/ui/dialog.tsx
|
|
11377
10894
|
var React9 = __toESM(require("react"), 1);
|
|
11378
10895
|
var import_radix_ui6 = require("radix-ui");
|
|
11379
|
-
var
|
|
11380
|
-
var
|
|
10896
|
+
var import_lucide_react9 = require("lucide-react");
|
|
10897
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
11381
10898
|
function Dialog2({
|
|
11382
10899
|
...props
|
|
11383
10900
|
}) {
|
|
11384
|
-
return /* @__PURE__ */ (0,
|
|
10901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
11385
10902
|
}
|
|
11386
10903
|
function DialogPortal({
|
|
11387
10904
|
...props
|
|
11388
10905
|
}) {
|
|
11389
|
-
return /* @__PURE__ */ (0,
|
|
10906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
11390
10907
|
}
|
|
11391
10908
|
function DialogOverlay({
|
|
11392
10909
|
className,
|
|
11393
10910
|
...props
|
|
11394
10911
|
}) {
|
|
11395
|
-
return /* @__PURE__ */ (0,
|
|
10912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11396
10913
|
import_radix_ui6.Dialog.Overlay,
|
|
11397
10914
|
{
|
|
11398
10915
|
"data-slot": "dialog-overlay",
|
|
@@ -11405,9 +10922,9 @@ function DialogOverlay({
|
|
|
11405
10922
|
var DialogContent = React9.forwardRef(
|
|
11406
10923
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
11407
10924
|
const positionMode = container ? "absolute" : "fixed";
|
|
11408
|
-
return /* @__PURE__ */ (0,
|
|
11409
|
-
/* @__PURE__ */ (0,
|
|
11410
|
-
/* @__PURE__ */ (0,
|
|
10925
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
10926
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
10927
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
11411
10928
|
import_radix_ui6.Dialog.Content,
|
|
11412
10929
|
{
|
|
11413
10930
|
ref,
|
|
@@ -11423,13 +10940,13 @@ var DialogContent = React9.forwardRef(
|
|
|
11423
10940
|
...props,
|
|
11424
10941
|
children: [
|
|
11425
10942
|
children,
|
|
11426
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
10943
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11427
10944
|
import_radix_ui6.Dialog.Close,
|
|
11428
10945
|
{
|
|
11429
10946
|
type: "button",
|
|
11430
10947
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
11431
10948
|
"aria-label": "Close",
|
|
11432
|
-
children: /* @__PURE__ */ (0,
|
|
10949
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.X, { size: 16, "aria-hidden": true })
|
|
11433
10950
|
}
|
|
11434
10951
|
) : null
|
|
11435
10952
|
]
|
|
@@ -11443,13 +10960,13 @@ function DialogHeader({
|
|
|
11443
10960
|
className,
|
|
11444
10961
|
...props
|
|
11445
10962
|
}) {
|
|
11446
|
-
return /* @__PURE__ */ (0,
|
|
10963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
11447
10964
|
}
|
|
11448
10965
|
function DialogFooter({
|
|
11449
10966
|
className,
|
|
11450
10967
|
...props
|
|
11451
10968
|
}) {
|
|
11452
|
-
return /* @__PURE__ */ (0,
|
|
10969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11453
10970
|
"div",
|
|
11454
10971
|
{
|
|
11455
10972
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -11457,7 +10974,7 @@ function DialogFooter({
|
|
|
11457
10974
|
}
|
|
11458
10975
|
);
|
|
11459
10976
|
}
|
|
11460
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
10977
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11461
10978
|
import_radix_ui6.Dialog.Title,
|
|
11462
10979
|
{
|
|
11463
10980
|
ref,
|
|
@@ -11469,7 +10986,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
11469
10986
|
}
|
|
11470
10987
|
));
|
|
11471
10988
|
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
11472
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
10989
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11473
10990
|
import_radix_ui6.Dialog.Description,
|
|
11474
10991
|
{
|
|
11475
10992
|
ref,
|
|
@@ -11481,63 +10998,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
|
11481
10998
|
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
11482
10999
|
|
|
11483
11000
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
11484
|
-
var
|
|
11001
|
+
var import_lucide_react13 = require("lucide-react");
|
|
11485
11002
|
|
|
11486
11003
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
11487
|
-
var
|
|
11488
|
-
var
|
|
11004
|
+
var import_lucide_react10 = require("lucide-react");
|
|
11005
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
11489
11006
|
function DestinationBreadcrumb({
|
|
11490
11007
|
pageTitle,
|
|
11491
11008
|
sectionLabel
|
|
11492
11009
|
}) {
|
|
11493
|
-
return /* @__PURE__ */ (0,
|
|
11494
|
-
/* @__PURE__ */ (0,
|
|
11495
|
-
/* @__PURE__ */ (0,
|
|
11496
|
-
/* @__PURE__ */ (0,
|
|
11497
|
-
/* @__PURE__ */ (0,
|
|
11498
|
-
/* @__PURE__ */ (0,
|
|
11010
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
11011
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
11012
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
11013
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
11014
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
11015
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
11499
11016
|
] }),
|
|
11500
|
-
/* @__PURE__ */ (0,
|
|
11501
|
-
|
|
11017
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11018
|
+
import_lucide_react10.ArrowRight,
|
|
11502
11019
|
{
|
|
11503
11020
|
size: 16,
|
|
11504
11021
|
className: "shrink-0 text-muted-foreground",
|
|
11505
11022
|
"aria-hidden": true
|
|
11506
11023
|
}
|
|
11507
11024
|
),
|
|
11508
|
-
/* @__PURE__ */ (0,
|
|
11509
|
-
/* @__PURE__ */ (0,
|
|
11510
|
-
|
|
11025
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
11026
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11027
|
+
import_lucide_react10.GalleryVertical,
|
|
11511
11028
|
{
|
|
11512
11029
|
size: 16,
|
|
11513
11030
|
className: "shrink-0 text-foreground",
|
|
11514
11031
|
"aria-hidden": true
|
|
11515
11032
|
}
|
|
11516
11033
|
),
|
|
11517
|
-
/* @__PURE__ */ (0,
|
|
11034
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
11518
11035
|
] })
|
|
11519
11036
|
] })
|
|
11520
11037
|
] });
|
|
11521
11038
|
}
|
|
11522
11039
|
|
|
11523
11040
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
11524
|
-
var
|
|
11525
|
-
var
|
|
11041
|
+
var import_lucide_react11 = require("lucide-react");
|
|
11042
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
11526
11043
|
function SectionTreeItem({
|
|
11527
11044
|
section,
|
|
11528
11045
|
onSelect,
|
|
11529
11046
|
selected
|
|
11530
11047
|
}) {
|
|
11531
11048
|
const interactive = Boolean(onSelect);
|
|
11532
|
-
return /* @__PURE__ */ (0,
|
|
11533
|
-
/* @__PURE__ */ (0,
|
|
11049
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
11050
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11534
11051
|
"div",
|
|
11535
11052
|
{
|
|
11536
11053
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
11537
11054
|
"aria-hidden": true
|
|
11538
11055
|
}
|
|
11539
11056
|
),
|
|
11540
|
-
/* @__PURE__ */ (0,
|
|
11057
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
11541
11058
|
"div",
|
|
11542
11059
|
{
|
|
11543
11060
|
role: interactive ? "button" : void 0,
|
|
@@ -11555,15 +11072,15 @@ function SectionTreeItem({
|
|
|
11555
11072
|
interactive && selected && "border-bridge-primary"
|
|
11556
11073
|
),
|
|
11557
11074
|
children: [
|
|
11558
|
-
/* @__PURE__ */ (0,
|
|
11559
|
-
|
|
11075
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11076
|
+
import_lucide_react11.GalleryVertical,
|
|
11560
11077
|
{
|
|
11561
11078
|
size: 16,
|
|
11562
11079
|
className: "shrink-0 text-foreground",
|
|
11563
11080
|
"aria-hidden": true
|
|
11564
11081
|
}
|
|
11565
11082
|
),
|
|
11566
|
-
/* @__PURE__ */ (0,
|
|
11083
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
11567
11084
|
]
|
|
11568
11085
|
}
|
|
11569
11086
|
)
|
|
@@ -11571,14 +11088,14 @@ function SectionTreeItem({
|
|
|
11571
11088
|
}
|
|
11572
11089
|
|
|
11573
11090
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
11574
|
-
var
|
|
11091
|
+
var import_react10 = require("react");
|
|
11575
11092
|
|
|
11576
11093
|
// src/ui/input.tsx
|
|
11577
11094
|
var React10 = __toESM(require("react"), 1);
|
|
11578
|
-
var
|
|
11095
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
11579
11096
|
var Input = React10.forwardRef(
|
|
11580
11097
|
({ className, type, ...props }, ref) => {
|
|
11581
|
-
return /* @__PURE__ */ (0,
|
|
11098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
11582
11099
|
"input",
|
|
11583
11100
|
{
|
|
11584
11101
|
type,
|
|
@@ -11597,9 +11114,9 @@ Input.displayName = "Input";
|
|
|
11597
11114
|
|
|
11598
11115
|
// src/ui/label.tsx
|
|
11599
11116
|
var import_radix_ui7 = require("radix-ui");
|
|
11600
|
-
var
|
|
11117
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
11601
11118
|
function Label({ className, ...props }) {
|
|
11602
|
-
return /* @__PURE__ */ (0,
|
|
11119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
11603
11120
|
import_radix_ui7.Label.Root,
|
|
11604
11121
|
{
|
|
11605
11122
|
"data-slot": "label",
|
|
@@ -11610,12 +11127,12 @@ function Label({ className, ...props }) {
|
|
|
11610
11127
|
}
|
|
11611
11128
|
|
|
11612
11129
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
11613
|
-
var
|
|
11614
|
-
var
|
|
11130
|
+
var import_lucide_react12 = require("lucide-react");
|
|
11131
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
11615
11132
|
function FieldChevron({
|
|
11616
11133
|
onClick
|
|
11617
11134
|
}) {
|
|
11618
|
-
return /* @__PURE__ */ (0,
|
|
11135
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11619
11136
|
"button",
|
|
11620
11137
|
{
|
|
11621
11138
|
type: "button",
|
|
@@ -11623,7 +11140,7 @@ function FieldChevron({
|
|
|
11623
11140
|
onClick,
|
|
11624
11141
|
"aria-label": "Open page list",
|
|
11625
11142
|
tabIndex: -1,
|
|
11626
|
-
children: /* @__PURE__ */ (0,
|
|
11143
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.ChevronDown, { size: 16 })
|
|
11627
11144
|
}
|
|
11628
11145
|
);
|
|
11629
11146
|
}
|
|
@@ -11639,11 +11156,11 @@ function UrlOrPageInput({
|
|
|
11639
11156
|
readOnly = false,
|
|
11640
11157
|
urlError
|
|
11641
11158
|
}) {
|
|
11642
|
-
const inputId = (0,
|
|
11643
|
-
const inputRef = (0,
|
|
11644
|
-
const rootRef = (0,
|
|
11645
|
-
const [isFocused, setIsFocused] = (0,
|
|
11646
|
-
(0,
|
|
11159
|
+
const inputId = (0, import_react10.useId)();
|
|
11160
|
+
const inputRef = (0, import_react10.useRef)(null);
|
|
11161
|
+
const rootRef = (0, import_react10.useRef)(null);
|
|
11162
|
+
const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
|
|
11163
|
+
(0, import_react10.useEffect)(() => {
|
|
11647
11164
|
if (!dropdownOpen) return;
|
|
11648
11165
|
const isOutside = (e) => {
|
|
11649
11166
|
const root = rootRef.current;
|
|
@@ -11684,19 +11201,19 @@ function UrlOrPageInput({
|
|
|
11684
11201
|
"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
11202
|
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
11203
|
);
|
|
11687
|
-
return /* @__PURE__ */ (0,
|
|
11688
|
-
/* @__PURE__ */ (0,
|
|
11689
|
-
/* @__PURE__ */ (0,
|
|
11690
|
-
/* @__PURE__ */ (0,
|
|
11691
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
11692
|
-
|
|
11204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
11205
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
11206
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
11207
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
11208
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11209
|
+
import_lucide_react12.File,
|
|
11693
11210
|
{
|
|
11694
11211
|
size: 16,
|
|
11695
11212
|
className: "shrink-0 text-foreground",
|
|
11696
11213
|
"aria-hidden": true
|
|
11697
11214
|
}
|
|
11698
11215
|
) }) : null,
|
|
11699
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
11216
|
+
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
11217
|
Input,
|
|
11701
11218
|
{
|
|
11702
11219
|
ref: inputRef,
|
|
@@ -11722,7 +11239,7 @@ function UrlOrPageInput({
|
|
|
11722
11239
|
)
|
|
11723
11240
|
}
|
|
11724
11241
|
),
|
|
11725
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
11242
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11726
11243
|
"button",
|
|
11727
11244
|
{
|
|
11728
11245
|
type: "button",
|
|
@@ -11730,26 +11247,26 @@ function UrlOrPageInput({
|
|
|
11730
11247
|
onMouseDown: clearSelection,
|
|
11731
11248
|
"aria-label": "Clear selected page",
|
|
11732
11249
|
tabIndex: -1,
|
|
11733
|
-
children: /* @__PURE__ */ (0,
|
|
11250
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { size: 16, "aria-hidden": true })
|
|
11734
11251
|
}
|
|
11735
11252
|
) : null,
|
|
11736
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
11253
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
11737
11254
|
] }),
|
|
11738
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
11255
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11739
11256
|
"div",
|
|
11740
11257
|
{
|
|
11741
11258
|
"data-ohw-link-page-dropdown": "",
|
|
11742
11259
|
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
11260
|
onMouseDown: (e) => e.preventDefault(),
|
|
11744
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
11261
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
11745
11262
|
"button",
|
|
11746
11263
|
{
|
|
11747
11264
|
type: "button",
|
|
11748
11265
|
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
11266
|
onClick: () => onPageSelect(page),
|
|
11750
11267
|
children: [
|
|
11751
|
-
/* @__PURE__ */ (0,
|
|
11752
|
-
/* @__PURE__ */ (0,
|
|
11268
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11269
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate", children: page.title })
|
|
11753
11270
|
]
|
|
11754
11271
|
},
|
|
11755
11272
|
page.path
|
|
@@ -11757,34 +11274,34 @@ function UrlOrPageInput({
|
|
|
11757
11274
|
}
|
|
11758
11275
|
) : null
|
|
11759
11276
|
] }),
|
|
11760
|
-
urlError ? /* @__PURE__ */ (0,
|
|
11277
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
11761
11278
|
] });
|
|
11762
11279
|
}
|
|
11763
11280
|
|
|
11764
11281
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
11765
|
-
var
|
|
11282
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
11766
11283
|
function LinkEditorPanel({ state, onClose }) {
|
|
11767
11284
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
11768
|
-
return /* @__PURE__ */ (0,
|
|
11769
|
-
/* @__PURE__ */ (0,
|
|
11285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
11286
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11770
11287
|
"button",
|
|
11771
11288
|
{
|
|
11772
11289
|
type: "button",
|
|
11773
11290
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
11774
11291
|
"aria-label": "Close",
|
|
11775
11292
|
onClick: onClose,
|
|
11776
|
-
children: /* @__PURE__ */ (0,
|
|
11293
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
|
|
11777
11294
|
}
|
|
11778
11295
|
) }),
|
|
11779
|
-
/* @__PURE__ */ (0,
|
|
11780
|
-
/* @__PURE__ */ (0,
|
|
11781
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11296
|
+
/* @__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 }) }),
|
|
11297
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
11298
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11782
11299
|
DestinationBreadcrumb,
|
|
11783
11300
|
{
|
|
11784
11301
|
pageTitle: state.selectedPage.title,
|
|
11785
11302
|
sectionLabel: state.selectedSection.label
|
|
11786
11303
|
}
|
|
11787
|
-
) : /* @__PURE__ */ (0,
|
|
11304
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11788
11305
|
UrlOrPageInput,
|
|
11789
11306
|
{
|
|
11790
11307
|
value: state.searchValue,
|
|
@@ -11797,8 +11314,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11797
11314
|
urlError: state.urlError
|
|
11798
11315
|
}
|
|
11799
11316
|
),
|
|
11800
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
11801
|
-
/* @__PURE__ */ (0,
|
|
11317
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
11318
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11802
11319
|
Button,
|
|
11803
11320
|
{
|
|
11804
11321
|
type: "button",
|
|
@@ -11809,15 +11326,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11809
11326
|
children: "Choose a section"
|
|
11810
11327
|
}
|
|
11811
11328
|
),
|
|
11812
|
-
/* @__PURE__ */ (0,
|
|
11813
|
-
/* @__PURE__ */ (0,
|
|
11814
|
-
/* @__PURE__ */ (0,
|
|
11329
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
11330
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11331
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
11815
11332
|
] })
|
|
11816
11333
|
] }) : null,
|
|
11817
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11334
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
11818
11335
|
] }),
|
|
11819
|
-
/* @__PURE__ */ (0,
|
|
11820
|
-
/* @__PURE__ */ (0,
|
|
11336
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
11337
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11821
11338
|
Button,
|
|
11822
11339
|
{
|
|
11823
11340
|
type: "button",
|
|
@@ -11832,7 +11349,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11832
11349
|
children: state.secondaryLabel
|
|
11833
11350
|
}
|
|
11834
11351
|
),
|
|
11835
|
-
/* @__PURE__ */ (0,
|
|
11352
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11836
11353
|
Button,
|
|
11837
11354
|
{
|
|
11838
11355
|
type: "button",
|
|
@@ -11851,9 +11368,9 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11851
11368
|
}
|
|
11852
11369
|
|
|
11853
11370
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
11854
|
-
var
|
|
11371
|
+
var import_react11 = require("react");
|
|
11855
11372
|
var import_react_dom3 = require("react-dom");
|
|
11856
|
-
var
|
|
11373
|
+
var import_lucide_react14 = require("lucide-react");
|
|
11857
11374
|
var import_navigation2 = require("next/navigation");
|
|
11858
11375
|
|
|
11859
11376
|
// src/lib/parent-scroll.ts
|
|
@@ -11875,7 +11392,7 @@ function getIframeChromeClip(parentScroll) {
|
|
|
11875
11392
|
}
|
|
11876
11393
|
|
|
11877
11394
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
11878
|
-
var
|
|
11395
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
11879
11396
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
11880
11397
|
function rectsEqual(a, b) {
|
|
11881
11398
|
if (a.size !== b.size) return false;
|
|
@@ -11908,12 +11425,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
11908
11425
|
return null;
|
|
11909
11426
|
}
|
|
11910
11427
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
11911
|
-
const [rects, setRects] = (0,
|
|
11912
|
-
const sectionIds = (0,
|
|
11428
|
+
const [rects, setRects] = (0, import_react11.useState)(/* @__PURE__ */ new Map());
|
|
11429
|
+
const sectionIds = (0, import_react11.useMemo)(
|
|
11913
11430
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
11914
11431
|
[sectionIdsKey]
|
|
11915
11432
|
);
|
|
11916
|
-
(0,
|
|
11433
|
+
(0, import_react11.useEffect)(() => {
|
|
11917
11434
|
if (!enabled || sectionIds.length === 0) {
|
|
11918
11435
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
11919
11436
|
return;
|
|
@@ -11954,13 +11471,13 @@ function SectionPickerOverlay({
|
|
|
11954
11471
|
}) {
|
|
11955
11472
|
const router = (0, import_navigation2.useRouter)();
|
|
11956
11473
|
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,
|
|
11474
|
+
const [selectedId, setSelectedId] = (0, import_react11.useState)(null);
|
|
11475
|
+
const [hoveredId, setHoveredId] = (0, import_react11.useState)(null);
|
|
11476
|
+
const pointerRef = (0, import_react11.useRef)(null);
|
|
11477
|
+
const pointerScreenRef = (0, import_react11.useRef)(null);
|
|
11478
|
+
const iframeOffsetTopRef = (0, import_react11.useRef)(null);
|
|
11479
|
+
const sectionIdsRef = (0, import_react11.useRef)([]);
|
|
11480
|
+
const [chromeClip, setChromeClip] = (0, import_react11.useState)(
|
|
11964
11481
|
() => ({
|
|
11965
11482
|
top: 0,
|
|
11966
11483
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -11968,12 +11485,12 @@ function SectionPickerOverlay({
|
|
|
11968
11485
|
);
|
|
11969
11486
|
const normalizedTarget = normalizePath(pagePath);
|
|
11970
11487
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
11971
|
-
(0,
|
|
11488
|
+
(0, import_react11.useEffect)(() => {
|
|
11972
11489
|
if (isOnTargetPage) return;
|
|
11973
11490
|
const search = readPreservedSearch();
|
|
11974
11491
|
router.push(`${normalizedTarget}${search}`);
|
|
11975
11492
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
11976
|
-
(0,
|
|
11493
|
+
(0, import_react11.useEffect)(() => {
|
|
11977
11494
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
11978
11495
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
11979
11496
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -11985,24 +11502,24 @@ function SectionPickerOverlay({
|
|
|
11985
11502
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
11986
11503
|
};
|
|
11987
11504
|
}, []);
|
|
11988
|
-
const liveSections = (0,
|
|
11505
|
+
const liveSections = (0, import_react11.useMemo)(() => {
|
|
11989
11506
|
if (!isOnTargetPage) return sections;
|
|
11990
11507
|
const live = collectSectionsFromDom();
|
|
11991
11508
|
if (live.length === 0) return sections;
|
|
11992
11509
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
11993
11510
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
11994
11511
|
}, [isOnTargetPage, sections, pathname]);
|
|
11995
|
-
const sectionIdsKey = (0,
|
|
11512
|
+
const sectionIdsKey = (0, import_react11.useMemo)(
|
|
11996
11513
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
11997
11514
|
[liveSections]
|
|
11998
11515
|
);
|
|
11999
|
-
const sectionIds = (0,
|
|
11516
|
+
const sectionIds = (0, import_react11.useMemo)(
|
|
12000
11517
|
() => liveSections.map((s) => s.id),
|
|
12001
11518
|
[liveSections]
|
|
12002
11519
|
);
|
|
12003
11520
|
sectionIdsRef.current = sectionIds;
|
|
12004
11521
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
12005
|
-
const applyHoverAt = (0,
|
|
11522
|
+
const applyHoverAt = (0, import_react11.useCallback)(
|
|
12006
11523
|
(x, y, liveRects) => {
|
|
12007
11524
|
const ids = sectionIdsRef.current;
|
|
12008
11525
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -12011,7 +11528,7 @@ function SectionPickerOverlay({
|
|
|
12011
11528
|
},
|
|
12012
11529
|
[]
|
|
12013
11530
|
);
|
|
12014
|
-
(0,
|
|
11531
|
+
(0, import_react11.useEffect)(() => {
|
|
12015
11532
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
|
|
12016
11533
|
const next = getIframeVisibleClip({
|
|
12017
11534
|
iframeOffsetTop,
|
|
@@ -12055,12 +11572,12 @@ function SectionPickerOverlay({
|
|
|
12055
11572
|
window.removeEventListener("resize", onResize);
|
|
12056
11573
|
};
|
|
12057
11574
|
}, [applyHoverAt]);
|
|
12058
|
-
(0,
|
|
11575
|
+
(0, import_react11.useEffect)(() => {
|
|
12059
11576
|
const ptr = pointerRef.current;
|
|
12060
11577
|
if (!ptr) return;
|
|
12061
11578
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
12062
11579
|
}, [rects, applyHoverAt]);
|
|
12063
|
-
(0,
|
|
11580
|
+
(0, import_react11.useEffect)(() => {
|
|
12064
11581
|
const rememberPointer = (clientX, clientY) => {
|
|
12065
11582
|
pointerRef.current = { x: clientX, y: clientY };
|
|
12066
11583
|
const top = iframeOffsetTopRef.current;
|
|
@@ -12084,7 +11601,7 @@ function SectionPickerOverlay({
|
|
|
12084
11601
|
window.removeEventListener("message", onPointerSync);
|
|
12085
11602
|
};
|
|
12086
11603
|
}, [rects, applyHoverAt]);
|
|
12087
|
-
const handleSelect = (0,
|
|
11604
|
+
const handleSelect = (0, import_react11.useCallback)(
|
|
12088
11605
|
(section) => {
|
|
12089
11606
|
if (selectedId) return;
|
|
12090
11607
|
setSelectedId(section.id);
|
|
@@ -12092,7 +11609,7 @@ function SectionPickerOverlay({
|
|
|
12092
11609
|
},
|
|
12093
11610
|
[selectedId, onSelect]
|
|
12094
11611
|
);
|
|
12095
|
-
(0,
|
|
11612
|
+
(0, import_react11.useEffect)(() => {
|
|
12096
11613
|
const onKeyDown = (e) => {
|
|
12097
11614
|
if (e.key === "Escape") {
|
|
12098
11615
|
e.preventDefault();
|
|
@@ -12106,7 +11623,7 @@ function SectionPickerOverlay({
|
|
|
12106
11623
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
12107
11624
|
if (!portalRoot) return null;
|
|
12108
11625
|
return (0, import_react_dom3.createPortal)(
|
|
12109
|
-
/* @__PURE__ */ (0,
|
|
11626
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12110
11627
|
"div",
|
|
12111
11628
|
{
|
|
12112
11629
|
"data-ohw-section-picker": "",
|
|
@@ -12116,12 +11633,12 @@ function SectionPickerOverlay({
|
|
|
12116
11633
|
role: "dialog",
|
|
12117
11634
|
"aria-label": "Choose a section",
|
|
12118
11635
|
children: [
|
|
12119
|
-
/* @__PURE__ */ (0,
|
|
11636
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12120
11637
|
"div",
|
|
12121
11638
|
{
|
|
12122
11639
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
12123
11640
|
style: { top: chromeClip.top + 20 },
|
|
12124
|
-
children: /* @__PURE__ */ (0,
|
|
11641
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12125
11642
|
Button,
|
|
12126
11643
|
{
|
|
12127
11644
|
type: "button",
|
|
@@ -12130,14 +11647,14 @@ function SectionPickerOverlay({
|
|
|
12130
11647
|
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
11648
|
onClick: onBack,
|
|
12132
11649
|
children: [
|
|
12133
|
-
/* @__PURE__ */ (0,
|
|
11650
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
12134
11651
|
"Back"
|
|
12135
11652
|
]
|
|
12136
11653
|
}
|
|
12137
11654
|
)
|
|
12138
11655
|
}
|
|
12139
11656
|
),
|
|
12140
|
-
/* @__PURE__ */ (0,
|
|
11657
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12141
11658
|
"div",
|
|
12142
11659
|
{
|
|
12143
11660
|
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 +11667,7 @@ function SectionPickerOverlay({
|
|
|
12150
11667
|
children: "Click on section to select"
|
|
12151
11668
|
}
|
|
12152
11669
|
),
|
|
12153
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
11670
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12154
11671
|
"div",
|
|
12155
11672
|
{
|
|
12156
11673
|
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 +11675,14 @@ function SectionPickerOverlay({
|
|
|
12158
11675
|
children: "Loading page preview\u2026"
|
|
12159
11676
|
}
|
|
12160
11677
|
) : null,
|
|
12161
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
11678
|
+
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
11679
|
isOnTargetPage ? liveSections.map((section) => {
|
|
12163
11680
|
const rect = rects.get(section.id);
|
|
12164
11681
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
12165
11682
|
const isSelected = selectedId === section.id;
|
|
12166
11683
|
const isHovered = hoveredId === section.id;
|
|
12167
11684
|
const isLit = isSelected || isHovered;
|
|
12168
|
-
return /* @__PURE__ */ (0,
|
|
11685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12169
11686
|
"button",
|
|
12170
11687
|
{
|
|
12171
11688
|
type: "button",
|
|
@@ -12180,7 +11697,7 @@ function SectionPickerOverlay({
|
|
|
12180
11697
|
"aria-label": `Select section ${section.label}`,
|
|
12181
11698
|
onClick: () => handleSelect(section),
|
|
12182
11699
|
children: [
|
|
12183
|
-
isLit ? /* @__PURE__ */ (0,
|
|
11700
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12184
11701
|
"span",
|
|
12185
11702
|
{
|
|
12186
11703
|
className: "pointer-events-none absolute",
|
|
@@ -12193,13 +11710,13 @@ function SectionPickerOverlay({
|
|
|
12193
11710
|
"aria-hidden": true
|
|
12194
11711
|
}
|
|
12195
11712
|
) : null,
|
|
12196
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
11713
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12197
11714
|
"span",
|
|
12198
11715
|
{
|
|
12199
11716
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
12200
11717
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
12201
11718
|
"aria-hidden": true,
|
|
12202
|
-
children: /* @__PURE__ */ (0,
|
|
11719
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.Check, { className: "size-5" })
|
|
12203
11720
|
}
|
|
12204
11721
|
) : null
|
|
12205
11722
|
]
|
|
@@ -12215,7 +11732,7 @@ function SectionPickerOverlay({
|
|
|
12215
11732
|
}
|
|
12216
11733
|
|
|
12217
11734
|
// src/ui/link-modal/useLinkModalState.ts
|
|
12218
|
-
var
|
|
11735
|
+
var import_react12 = require("react");
|
|
12219
11736
|
function useLinkModalState({
|
|
12220
11737
|
open,
|
|
12221
11738
|
mode,
|
|
@@ -12227,14 +11744,14 @@ function useLinkModalState({
|
|
|
12227
11744
|
onClose,
|
|
12228
11745
|
onSubmit
|
|
12229
11746
|
}) {
|
|
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,
|
|
11747
|
+
const availablePages = (0, import_react12.useMemo)(() => pages, [pages]);
|
|
11748
|
+
const [searchValue, setSearchValue] = (0, import_react12.useState)("");
|
|
11749
|
+
const [selectedPage, setSelectedPage] = (0, import_react12.useState)(null);
|
|
11750
|
+
const [selectedSection, setSelectedSection] = (0, import_react12.useState)(null);
|
|
11751
|
+
const [step, setStep] = (0, import_react12.useState)("input");
|
|
11752
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react12.useState)(false);
|
|
11753
|
+
const [urlError, setUrlError] = (0, import_react12.useState)("");
|
|
11754
|
+
const reset = (0, import_react12.useCallback)(() => {
|
|
12238
11755
|
setSearchValue("");
|
|
12239
11756
|
setSelectedPage(null);
|
|
12240
11757
|
setSelectedSection(null);
|
|
@@ -12242,7 +11759,7 @@ function useLinkModalState({
|
|
|
12242
11759
|
setDropdownOpen(false);
|
|
12243
11760
|
setUrlError("");
|
|
12244
11761
|
}, []);
|
|
12245
|
-
(0,
|
|
11762
|
+
(0, import_react12.useEffect)(() => {
|
|
12246
11763
|
if (!open) return;
|
|
12247
11764
|
if (mode === "edit" && initialTarget) {
|
|
12248
11765
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -12258,11 +11775,11 @@ function useLinkModalState({
|
|
|
12258
11775
|
setDropdownOpen(false);
|
|
12259
11776
|
setUrlError("");
|
|
12260
11777
|
}, [open, mode, initialTarget, reset]);
|
|
12261
|
-
const filteredPages = (0,
|
|
11778
|
+
const filteredPages = (0, import_react12.useMemo)(() => {
|
|
12262
11779
|
if (!searchValue.trim()) return availablePages;
|
|
12263
11780
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
12264
11781
|
}, [availablePages, searchValue]);
|
|
12265
|
-
const activeSections = (0,
|
|
11782
|
+
const activeSections = (0, import_react12.useMemo)(() => {
|
|
12266
11783
|
if (!selectedPage) return [];
|
|
12267
11784
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
12268
11785
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -12311,7 +11828,7 @@ function useLinkModalState({
|
|
|
12311
11828
|
reset();
|
|
12312
11829
|
onClose();
|
|
12313
11830
|
};
|
|
12314
|
-
const isValid = (0,
|
|
11831
|
+
const isValid = (0, import_react12.useMemo)(() => {
|
|
12315
11832
|
if (urlError) return false;
|
|
12316
11833
|
if (showBreadcrumb) return true;
|
|
12317
11834
|
if (selectedPage) return true;
|
|
@@ -12379,7 +11896,7 @@ function useLinkModalState({
|
|
|
12379
11896
|
}
|
|
12380
11897
|
|
|
12381
11898
|
// src/ui/link-modal/LinkPopover.tsx
|
|
12382
|
-
var
|
|
11899
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
12383
11900
|
function postToParent(data) {
|
|
12384
11901
|
window.parent?.postMessage(data, "*");
|
|
12385
11902
|
}
|
|
@@ -12408,7 +11925,7 @@ function LinkPopover({
|
|
|
12408
11925
|
onSubmit
|
|
12409
11926
|
});
|
|
12410
11927
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
12411
|
-
(0,
|
|
11928
|
+
(0, import_react13.useEffect)(() => {
|
|
12412
11929
|
if (!open) return;
|
|
12413
11930
|
if (sectionPickerActive) {
|
|
12414
11931
|
postToParent({ type: "ui:unlock" });
|
|
@@ -12475,15 +11992,15 @@ function LinkPopover({
|
|
|
12475
11992
|
);
|
|
12476
11993
|
};
|
|
12477
11994
|
}, [open, sectionPickerActive]);
|
|
12478
|
-
return /* @__PURE__ */ (0,
|
|
12479
|
-
/* @__PURE__ */ (0,
|
|
11995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
11996
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12480
11997
|
Dialog2,
|
|
12481
11998
|
{
|
|
12482
11999
|
open: open && !sectionPickerActive,
|
|
12483
12000
|
onOpenChange: (next) => {
|
|
12484
12001
|
if (!next) onClose?.();
|
|
12485
12002
|
},
|
|
12486
|
-
children: /* @__PURE__ */ (0,
|
|
12003
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12487
12004
|
DialogContent,
|
|
12488
12005
|
{
|
|
12489
12006
|
ref: panelRef,
|
|
@@ -12493,12 +12010,12 @@ function LinkPopover({
|
|
|
12493
12010
|
"data-ohw-bridge": "",
|
|
12494
12011
|
showCloseButton: false,
|
|
12495
12012
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
12496
|
-
children: /* @__PURE__ */ (0,
|
|
12013
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkEditorPanel, { state, onClose })
|
|
12497
12014
|
}
|
|
12498
12015
|
)
|
|
12499
12016
|
}
|
|
12500
12017
|
),
|
|
12501
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
12018
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12502
12019
|
SectionPickerOverlay,
|
|
12503
12020
|
{
|
|
12504
12021
|
pagePath: state.selectedPage.path,
|
|
@@ -15687,9 +15204,9 @@ function addFooterColumnWithPersist({
|
|
|
15687
15204
|
}
|
|
15688
15205
|
|
|
15689
15206
|
// src/ui/FloatingPanel.tsx
|
|
15690
|
-
var
|
|
15691
|
-
var
|
|
15692
|
-
var
|
|
15207
|
+
var import_react14 = require("react");
|
|
15208
|
+
var import_lucide_react15 = require("lucide-react");
|
|
15209
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
15693
15210
|
var PANEL_WIDTH = 256;
|
|
15694
15211
|
var EDGE_MARGIN = 16;
|
|
15695
15212
|
var HEADER_MIN = 56;
|
|
@@ -15745,10 +15262,10 @@ function FloatingPanel({
|
|
|
15745
15262
|
className,
|
|
15746
15263
|
bodyClassName
|
|
15747
15264
|
}) {
|
|
15748
|
-
const panelRef = (0,
|
|
15749
|
-
const [measured, setMeasured] = (0,
|
|
15750
|
-
const dragRef = (0,
|
|
15751
|
-
const homeRef = (0,
|
|
15265
|
+
const panelRef = (0, import_react14.useRef)(null);
|
|
15266
|
+
const [measured, setMeasured] = (0, import_react14.useState)({ w: PANEL_WIDTH, h: 280 });
|
|
15267
|
+
const dragRef = (0, import_react14.useRef)(null);
|
|
15268
|
+
const homeRef = (0, import_react14.useRef)(null);
|
|
15752
15269
|
if (!open) {
|
|
15753
15270
|
homeRef.current = null;
|
|
15754
15271
|
} else if (position) {
|
|
@@ -15756,14 +15273,14 @@ function FloatingPanel({
|
|
|
15756
15273
|
} else if (homeRef.current == null) {
|
|
15757
15274
|
homeRef.current = defaultFloatingPanelPosition(parentScroll);
|
|
15758
15275
|
}
|
|
15759
|
-
const [liveScroll, setLiveScroll] = (0,
|
|
15276
|
+
const [liveScroll, setLiveScroll] = (0, import_react14.useState)(parentScroll);
|
|
15760
15277
|
const home = position ?? homeRef.current ?? defaultFloatingPanelPosition(parentScroll);
|
|
15761
15278
|
const clamped = {
|
|
15762
15279
|
x: clampX(home.x, measured.w),
|
|
15763
15280
|
y: stickyPageY(home.y, liveScroll)
|
|
15764
15281
|
};
|
|
15765
15282
|
const maxHeight = availablePanelHeight(liveScroll, clamped.y);
|
|
15766
|
-
(0,
|
|
15283
|
+
(0, import_react14.useEffect)(() => {
|
|
15767
15284
|
if (!open) {
|
|
15768
15285
|
setLiveScroll(parentScroll);
|
|
15769
15286
|
return;
|
|
@@ -15776,13 +15293,13 @@ function FloatingPanel({
|
|
|
15776
15293
|
window.addEventListener("message", onParentScroll);
|
|
15777
15294
|
return () => window.removeEventListener("message", onParentScroll);
|
|
15778
15295
|
}, [open, parentScroll]);
|
|
15779
|
-
(0,
|
|
15296
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
15780
15297
|
if (!open || !panelRef.current) return;
|
|
15781
15298
|
const el = panelRef.current;
|
|
15782
15299
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
|
|
15783
15300
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
15784
15301
|
}, [open, children, title, context]);
|
|
15785
|
-
const onHeaderPointerDown = (0,
|
|
15302
|
+
const onHeaderPointerDown = (0, import_react14.useCallback)(
|
|
15786
15303
|
(e) => {
|
|
15787
15304
|
if (e.button !== 0) return;
|
|
15788
15305
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -15801,7 +15318,7 @@ function FloatingPanel({
|
|
|
15801
15318
|
},
|
|
15802
15319
|
[clamped.x, clamped.y]
|
|
15803
15320
|
);
|
|
15804
|
-
const onHeaderPointerMove = (0,
|
|
15321
|
+
const onHeaderPointerMove = (0, import_react14.useCallback)(
|
|
15805
15322
|
(e) => {
|
|
15806
15323
|
const drag = dragRef.current;
|
|
15807
15324
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -15827,7 +15344,7 @@ function FloatingPanel({
|
|
|
15827
15344
|
},
|
|
15828
15345
|
[measured.w, onPositionChange, liveScroll]
|
|
15829
15346
|
);
|
|
15830
|
-
const endDrag = (0,
|
|
15347
|
+
const endDrag = (0, import_react14.useCallback)((e) => {
|
|
15831
15348
|
const drag = dragRef.current;
|
|
15832
15349
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
15833
15350
|
dragRef.current = null;
|
|
@@ -15837,13 +15354,13 @@ function FloatingPanel({
|
|
|
15837
15354
|
} catch {
|
|
15838
15355
|
}
|
|
15839
15356
|
}, []);
|
|
15840
|
-
(0,
|
|
15357
|
+
(0, import_react14.useEffect)(() => {
|
|
15841
15358
|
if (open) return;
|
|
15842
15359
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
15843
15360
|
}, [open]);
|
|
15844
|
-
(0,
|
|
15361
|
+
(0, import_react14.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
15845
15362
|
if (!open) return null;
|
|
15846
|
-
return /* @__PURE__ */ (0,
|
|
15363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
15847
15364
|
"div",
|
|
15848
15365
|
{
|
|
15849
15366
|
ref: panelRef,
|
|
@@ -15860,7 +15377,7 @@ function FloatingPanel({
|
|
|
15860
15377
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15861
15378
|
onClick: (e) => e.stopPropagation(),
|
|
15862
15379
|
children: [
|
|
15863
|
-
/* @__PURE__ */ (0,
|
|
15380
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
15864
15381
|
"div",
|
|
15865
15382
|
{
|
|
15866
15383
|
"data-ohw-floating-panel-header": "",
|
|
@@ -15870,14 +15387,14 @@ function FloatingPanel({
|
|
|
15870
15387
|
onPointerUp: endDrag,
|
|
15871
15388
|
onPointerCancel: endDrag,
|
|
15872
15389
|
children: [
|
|
15873
|
-
/* @__PURE__ */ (0,
|
|
15874
|
-
/* @__PURE__ */ (0,
|
|
15875
|
-
icon ? /* @__PURE__ */ (0,
|
|
15876
|
-
/* @__PURE__ */ (0,
|
|
15390
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
15391
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
15392
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
15393
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
15877
15394
|
] }),
|
|
15878
|
-
context ? /* @__PURE__ */ (0,
|
|
15395
|
+
context ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
15879
15396
|
] }),
|
|
15880
|
-
/* @__PURE__ */ (0,
|
|
15397
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
15881
15398
|
"button",
|
|
15882
15399
|
{
|
|
15883
15400
|
type: "button",
|
|
@@ -15889,13 +15406,13 @@ function FloatingPanel({
|
|
|
15889
15406
|
onClose();
|
|
15890
15407
|
},
|
|
15891
15408
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15892
|
-
children: /* @__PURE__ */ (0,
|
|
15409
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.X, { size: 16, "aria-hidden": true })
|
|
15893
15410
|
}
|
|
15894
15411
|
)
|
|
15895
15412
|
]
|
|
15896
15413
|
}
|
|
15897
15414
|
),
|
|
15898
|
-
/* @__PURE__ */ (0,
|
|
15415
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
15899
15416
|
"div",
|
|
15900
15417
|
{
|
|
15901
15418
|
"data-ohw-floating-panel-body": "",
|
|
@@ -15913,15 +15430,15 @@ function FloatingPanel({
|
|
|
15913
15430
|
}
|
|
15914
15431
|
|
|
15915
15432
|
// src/ui/socials-display-panel.tsx
|
|
15916
|
-
var
|
|
15433
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
15917
15434
|
function DisplaySwitch({
|
|
15918
15435
|
label,
|
|
15919
15436
|
checked,
|
|
15920
15437
|
disabled,
|
|
15921
15438
|
onChange
|
|
15922
15439
|
}) {
|
|
15923
|
-
return /* @__PURE__ */ (0,
|
|
15924
|
-
/* @__PURE__ */ (0,
|
|
15440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
|
|
15441
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15925
15442
|
"span",
|
|
15926
15443
|
{
|
|
15927
15444
|
className: cn(
|
|
@@ -15931,7 +15448,7 @@ function DisplaySwitch({
|
|
|
15931
15448
|
children: label
|
|
15932
15449
|
}
|
|
15933
15450
|
),
|
|
15934
|
-
/* @__PURE__ */ (0,
|
|
15451
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15935
15452
|
"button",
|
|
15936
15453
|
{
|
|
15937
15454
|
type: "button",
|
|
@@ -15945,7 +15462,7 @@ function DisplaySwitch({
|
|
|
15945
15462
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
15946
15463
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
15947
15464
|
),
|
|
15948
|
-
children: /* @__PURE__ */ (0,
|
|
15465
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15949
15466
|
"span",
|
|
15950
15467
|
{
|
|
15951
15468
|
className: cn(
|
|
@@ -15959,8 +15476,8 @@ function DisplaySwitch({
|
|
|
15959
15476
|
] });
|
|
15960
15477
|
}
|
|
15961
15478
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
15962
|
-
return /* @__PURE__ */ (0,
|
|
15963
|
-
/* @__PURE__ */ (0,
|
|
15479
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
15480
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15964
15481
|
DisplaySwitch,
|
|
15965
15482
|
{
|
|
15966
15483
|
label: "Text",
|
|
@@ -15969,7 +15486,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15969
15486
|
onChange: (text) => onChange({ ...display, text })
|
|
15970
15487
|
}
|
|
15971
15488
|
),
|
|
15972
|
-
/* @__PURE__ */ (0,
|
|
15489
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15973
15490
|
DisplaySwitch,
|
|
15974
15491
|
{
|
|
15975
15492
|
label: "Icon",
|
|
@@ -15982,7 +15499,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15982
15499
|
}
|
|
15983
15500
|
|
|
15984
15501
|
// src/ui/button-style-panel.tsx
|
|
15985
|
-
var
|
|
15502
|
+
var import_lucide_react16 = require("lucide-react");
|
|
15986
15503
|
|
|
15987
15504
|
// src/lib/button-styles.ts
|
|
15988
15505
|
var BUTTON_VARIANTS_KEY = "__ohw_button_variants";
|
|
@@ -16682,7 +16199,7 @@ function withAssignment(content, id, assignment) {
|
|
|
16682
16199
|
}
|
|
16683
16200
|
|
|
16684
16201
|
// src/ui/button-style-panel.tsx
|
|
16685
|
-
var
|
|
16202
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
16686
16203
|
var SIZE_LABEL = { s: "S", m: "M", l: "L" };
|
|
16687
16204
|
function ButtonStylePanel({
|
|
16688
16205
|
variants,
|
|
@@ -16696,15 +16213,15 @@ function ButtonStylePanel({
|
|
|
16696
16213
|
}) {
|
|
16697
16214
|
const preview = scaleGeometry(sizes.m, 0.75);
|
|
16698
16215
|
const label = previewLabel.trim() || "Book Now";
|
|
16699
|
-
return /* @__PURE__ */ (0,
|
|
16700
|
-
/* @__PURE__ */ (0,
|
|
16701
|
-
/* @__PURE__ */ (0,
|
|
16702
|
-
/* @__PURE__ */ (0,
|
|
16216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-5", children: [
|
|
16217
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
16218
|
+
/* @__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" }),
|
|
16219
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
|
|
16703
16220
|
const chrome = variants[id];
|
|
16704
16221
|
const selected = id === variant;
|
|
16705
16222
|
const hasBorder = parseFloat(chrome.borderWidth) > 0;
|
|
16706
16223
|
const cardSlot = previewSlotForChrome(chrome, slotBackground);
|
|
16707
|
-
return /* @__PURE__ */ (0,
|
|
16224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
16708
16225
|
"button",
|
|
16709
16226
|
{
|
|
16710
16227
|
type: "button",
|
|
@@ -16720,12 +16237,12 @@ function ButtonStylePanel({
|
|
|
16720
16237
|
selected ? "border-2 border-primary" : "border border-border"
|
|
16721
16238
|
),
|
|
16722
16239
|
children: [
|
|
16723
|
-
/* @__PURE__ */ (0,
|
|
16240
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16724
16241
|
"div",
|
|
16725
16242
|
{
|
|
16726
16243
|
className: "flex w-full items-center justify-center py-4",
|
|
16727
16244
|
style: { background: cardSlot },
|
|
16728
|
-
children: /* @__PURE__ */ (0,
|
|
16245
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16729
16246
|
"span",
|
|
16730
16247
|
{
|
|
16731
16248
|
className: "inline-flex items-center justify-center whitespace-nowrap font-semibold uppercase leading-none",
|
|
@@ -16747,12 +16264,12 @@ function ButtonStylePanel({
|
|
|
16747
16264
|
)
|
|
16748
16265
|
}
|
|
16749
16266
|
),
|
|
16750
|
-
selected ? /* @__PURE__ */ (0,
|
|
16267
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16751
16268
|
"span",
|
|
16752
16269
|
{
|
|
16753
16270
|
className: "absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
|
|
16754
16271
|
"aria-hidden": true,
|
|
16755
|
-
children: /* @__PURE__ */ (0,
|
|
16272
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Check, { className: "size-3", strokeWidth: 3 })
|
|
16756
16273
|
}
|
|
16757
16274
|
) : null
|
|
16758
16275
|
]
|
|
@@ -16761,9 +16278,9 @@ function ButtonStylePanel({
|
|
|
16761
16278
|
);
|
|
16762
16279
|
}) })
|
|
16763
16280
|
] }),
|
|
16764
|
-
/* @__PURE__ */ (0,
|
|
16765
|
-
/* @__PURE__ */ (0,
|
|
16766
|
-
/* @__PURE__ */ (0,
|
|
16281
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
16282
|
+
/* @__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" }),
|
|
16283
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16767
16284
|
"div",
|
|
16768
16285
|
{
|
|
16769
16286
|
className: "flex w-full items-start rounded-lg bg-stone-100 p-1",
|
|
@@ -16771,7 +16288,7 @@ function ButtonStylePanel({
|
|
|
16771
16288
|
"aria-label": "Size",
|
|
16772
16289
|
children: BUTTON_SIZE_IDS.map((id) => {
|
|
16773
16290
|
const selected = id === size;
|
|
16774
|
-
return /* @__PURE__ */ (0,
|
|
16291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16775
16292
|
"button",
|
|
16776
16293
|
{
|
|
16777
16294
|
type: "button",
|
|
@@ -17670,7 +17187,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
17670
17187
|
}
|
|
17671
17188
|
|
|
17672
17189
|
// src/useNavItemDrag.ts
|
|
17673
|
-
var
|
|
17190
|
+
var import_react15 = require("react");
|
|
17674
17191
|
function useNavItemDrag({
|
|
17675
17192
|
isEditMode,
|
|
17676
17193
|
editContentRef,
|
|
@@ -17694,11 +17211,11 @@ function useNavItemDrag({
|
|
|
17694
17211
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
17695
17212
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
17696
17213
|
}) {
|
|
17697
|
-
const navDragRef = (0,
|
|
17698
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
17699
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
17700
|
-
const navPointerDragRef = (0,
|
|
17701
|
-
const clearNavDragVisuals = (0,
|
|
17214
|
+
const navDragRef = (0, import_react15.useRef)(null);
|
|
17215
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react15.useState)([]);
|
|
17216
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react15.useState)(null);
|
|
17217
|
+
const navPointerDragRef = (0, import_react15.useRef)(null);
|
|
17218
|
+
const clearNavDragVisuals = (0, import_react15.useCallback)(() => {
|
|
17702
17219
|
const session = navDragRef.current;
|
|
17703
17220
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
17704
17221
|
navDragRef.current = null;
|
|
@@ -17731,7 +17248,7 @@ function useNavItemDrag({
|
|
|
17731
17248
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
17732
17249
|
unlockItemDragInteraction();
|
|
17733
17250
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
17734
|
-
const refreshNavDragVisuals = (0,
|
|
17251
|
+
const refreshNavDragVisuals = (0, import_react15.useCallback)(
|
|
17735
17252
|
(session, activeSlot, clientX, clientY) => {
|
|
17736
17253
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
17737
17254
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -17749,13 +17266,13 @@ function useNavItemDrag({
|
|
|
17749
17266
|
},
|
|
17750
17267
|
[setDraggedItemRect, setSiblingHintRects]
|
|
17751
17268
|
);
|
|
17752
|
-
const refreshNavDragVisualsRef = (0,
|
|
17269
|
+
const refreshNavDragVisualsRef = (0, import_react15.useRef)(refreshNavDragVisuals);
|
|
17753
17270
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
17754
|
-
const commitNavDragRef = (0,
|
|
17271
|
+
const commitNavDragRef = (0, import_react15.useRef)(() => {
|
|
17755
17272
|
});
|
|
17756
|
-
const beginNavDragRef = (0,
|
|
17273
|
+
const beginNavDragRef = (0, import_react15.useRef)(() => {
|
|
17757
17274
|
});
|
|
17758
|
-
const beginNavDrag = (0,
|
|
17275
|
+
const beginNavDrag = (0, import_react15.useCallback)(
|
|
17759
17276
|
(session) => {
|
|
17760
17277
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
17761
17278
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -17794,7 +17311,7 @@ function useNavItemDrag({
|
|
|
17794
17311
|
]
|
|
17795
17312
|
);
|
|
17796
17313
|
beginNavDragRef.current = beginNavDrag;
|
|
17797
|
-
const commitNavDrag = (0,
|
|
17314
|
+
const commitNavDrag = (0, import_react15.useCallback)(
|
|
17798
17315
|
(clientX, clientY) => {
|
|
17799
17316
|
const session = navDragRef.current;
|
|
17800
17317
|
if (!session) {
|
|
@@ -17873,7 +17390,7 @@ function useNavItemDrag({
|
|
|
17873
17390
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
17874
17391
|
);
|
|
17875
17392
|
commitNavDragRef.current = commitNavDrag;
|
|
17876
|
-
const startNavLinkDrag = (0,
|
|
17393
|
+
const startNavLinkDrag = (0, import_react15.useCallback)(
|
|
17877
17394
|
(anchor, clientX, clientY, wasSelected) => {
|
|
17878
17395
|
if (footerDragRef.current) return false;
|
|
17879
17396
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -17891,7 +17408,7 @@ function useNavItemDrag({
|
|
|
17891
17408
|
},
|
|
17892
17409
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
17893
17410
|
);
|
|
17894
|
-
const onNavDragOver = (0,
|
|
17411
|
+
const onNavDragOver = (0, import_react15.useCallback)(
|
|
17895
17412
|
(e) => {
|
|
17896
17413
|
const session = navDragRef.current;
|
|
17897
17414
|
if (!session) return false;
|
|
@@ -17903,7 +17420,7 @@ function useNavItemDrag({
|
|
|
17903
17420
|
},
|
|
17904
17421
|
[]
|
|
17905
17422
|
);
|
|
17906
|
-
(0,
|
|
17423
|
+
(0, import_react15.useEffect)(() => {
|
|
17907
17424
|
if (!isEditMode) return;
|
|
17908
17425
|
const THRESHOLD = 10;
|
|
17909
17426
|
const resolveWasSelected = (el) => {
|
|
@@ -18030,7 +17547,7 @@ function useNavItemDrag({
|
|
|
18030
17547
|
setLinkPopover,
|
|
18031
17548
|
suppressNextClickRef
|
|
18032
17549
|
]);
|
|
18033
|
-
const armNavPressFromChrome = (0,
|
|
17550
|
+
const armNavPressFromChrome = (0, import_react15.useCallback)(
|
|
18034
17551
|
(selected, clientX, clientY, pointerId) => {
|
|
18035
17552
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
18036
17553
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -18062,7 +17579,7 @@ function useNavItemDrag({
|
|
|
18062
17579
|
}
|
|
18063
17580
|
|
|
18064
17581
|
// src/useSectionDrag.ts
|
|
18065
|
-
var
|
|
17582
|
+
var import_react16 = require("react");
|
|
18066
17583
|
|
|
18067
17584
|
// src/lib/section-dnd.ts
|
|
18068
17585
|
function isFooterSection(el) {
|
|
@@ -18155,21 +17672,21 @@ function useSectionDrag({
|
|
|
18155
17672
|
suppressNextClickRef,
|
|
18156
17673
|
suppressClickUntilRef
|
|
18157
17674
|
}) {
|
|
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,
|
|
17675
|
+
const sectionDragRef = (0, import_react16.useRef)(null);
|
|
17676
|
+
const [sectionDropSlots, setSectionDropSlots] = (0, import_react16.useState)([]);
|
|
17677
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react16.useState)(null);
|
|
17678
|
+
const [isSectionDragging, setIsSectionDragging] = (0, import_react16.useState)(false);
|
|
17679
|
+
const sectionPointerDragRef = (0, import_react16.useRef)(null);
|
|
17680
|
+
const autoScrollRafRef = (0, import_react16.useRef)(null);
|
|
17681
|
+
const autoScrollDeltaRef = (0, import_react16.useRef)(0);
|
|
17682
|
+
const stopAutoScroll = (0, import_react16.useCallback)(() => {
|
|
18166
17683
|
if (autoScrollRafRef.current != null) {
|
|
18167
17684
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
18168
17685
|
autoScrollRafRef.current = null;
|
|
18169
17686
|
}
|
|
18170
17687
|
autoScrollDeltaRef.current = 0;
|
|
18171
17688
|
}, []);
|
|
18172
|
-
const tickAutoScroll = (0,
|
|
17689
|
+
const tickAutoScroll = (0, import_react16.useCallback)(() => {
|
|
18173
17690
|
if (!sectionDragRef.current) {
|
|
18174
17691
|
stopAutoScroll();
|
|
18175
17692
|
return;
|
|
@@ -18179,7 +17696,7 @@ function useSectionDrag({
|
|
|
18179
17696
|
}
|
|
18180
17697
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
18181
17698
|
}, [postToParentRef, stopAutoScroll]);
|
|
18182
|
-
const updateAutoScroll = (0,
|
|
17699
|
+
const updateAutoScroll = (0, import_react16.useCallback)(
|
|
18183
17700
|
(clientY) => {
|
|
18184
17701
|
const clip = getIframeChromeClip(parentScrollRef.current);
|
|
18185
17702
|
let delta = 0;
|
|
@@ -18201,7 +17718,7 @@ function useSectionDrag({
|
|
|
18201
17718
|
},
|
|
18202
17719
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
18203
17720
|
);
|
|
18204
|
-
const clearSectionDragVisuals = (0,
|
|
17721
|
+
const clearSectionDragVisuals = (0, import_react16.useCallback)(() => {
|
|
18205
17722
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
18206
17723
|
sectionDragRef.current = null;
|
|
18207
17724
|
setSectionDropSlots([]);
|
|
@@ -18211,7 +17728,7 @@ function useSectionDrag({
|
|
|
18211
17728
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
18212
17729
|
unlockItemDragInteraction();
|
|
18213
17730
|
}, [stopAutoScroll]);
|
|
18214
|
-
const refreshSectionDragVisuals = (0,
|
|
17731
|
+
const refreshSectionDragVisuals = (0, import_react16.useCallback)(
|
|
18215
17732
|
(session, clientX, clientY) => {
|
|
18216
17733
|
session.lastClientX = clientX;
|
|
18217
17734
|
session.lastClientY = clientY;
|
|
@@ -18225,7 +17742,7 @@ function useSectionDrag({
|
|
|
18225
17742
|
},
|
|
18226
17743
|
[updateAutoScroll]
|
|
18227
17744
|
);
|
|
18228
|
-
const beginSectionDrag = (0,
|
|
17745
|
+
const beginSectionDrag = (0, import_react16.useCallback)(
|
|
18229
17746
|
(session) => {
|
|
18230
17747
|
sectionDragRef.current = session;
|
|
18231
17748
|
setIsSectionDragging(true);
|
|
@@ -18236,7 +17753,7 @@ function useSectionDrag({
|
|
|
18236
17753
|
},
|
|
18237
17754
|
[refreshSectionDragVisuals]
|
|
18238
17755
|
);
|
|
18239
|
-
const commitSectionDrag = (0,
|
|
17756
|
+
const commitSectionDrag = (0, import_react16.useCallback)(() => {
|
|
18240
17757
|
const session = sectionDragRef.current;
|
|
18241
17758
|
if (!session) {
|
|
18242
17759
|
clearSectionDragVisuals();
|
|
@@ -18265,7 +17782,7 @@ function useSectionDrag({
|
|
|
18265
17782
|
});
|
|
18266
17783
|
});
|
|
18267
17784
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
18268
|
-
const startSectionPressDrag = (0,
|
|
17785
|
+
const startSectionPressDrag = (0, import_react16.useCallback)(
|
|
18269
17786
|
(el, clientX, clientY, pointerId) => {
|
|
18270
17787
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
18271
17788
|
const instanceId = instanceIdOf(el);
|
|
@@ -18282,7 +17799,7 @@ function useSectionDrag({
|
|
|
18282
17799
|
},
|
|
18283
17800
|
[footerDragRef, navDragRef]
|
|
18284
17801
|
);
|
|
18285
|
-
(0,
|
|
17802
|
+
(0, import_react16.useEffect)(() => {
|
|
18286
17803
|
if (!isEditMode) return;
|
|
18287
17804
|
const onPointerDown = (e) => {
|
|
18288
17805
|
if (e.button !== 0) return;
|
|
@@ -18387,8 +17904,8 @@ function useSectionDrag({
|
|
|
18387
17904
|
}
|
|
18388
17905
|
|
|
18389
17906
|
// src/ui/footer-container-chrome.tsx
|
|
18390
|
-
var
|
|
18391
|
-
var
|
|
17907
|
+
var import_lucide_react17 = require("lucide-react");
|
|
17908
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
18392
17909
|
function FooterContainerChrome({
|
|
18393
17910
|
rect,
|
|
18394
17911
|
onAdd,
|
|
@@ -18396,7 +17913,7 @@ function FooterContainerChrome({
|
|
|
18396
17913
|
}) {
|
|
18397
17914
|
const chromeGap = 6;
|
|
18398
17915
|
const buttonMargin = 7;
|
|
18399
|
-
return /* @__PURE__ */ (0,
|
|
17916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
18400
17917
|
"div",
|
|
18401
17918
|
{
|
|
18402
17919
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -18408,8 +17925,8 @@ function FooterContainerChrome({
|
|
|
18408
17925
|
width: rect.width + chromeGap * 2,
|
|
18409
17926
|
height: rect.height + chromeGap * 2
|
|
18410
17927
|
},
|
|
18411
|
-
children: /* @__PURE__ */ (0,
|
|
18412
|
-
/* @__PURE__ */ (0,
|
|
17928
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
17929
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
18413
17930
|
"button",
|
|
18414
17931
|
{
|
|
18415
17932
|
type: "button",
|
|
@@ -18428,17 +17945,17 @@ function FooterContainerChrome({
|
|
|
18428
17945
|
if (addDisabled) return;
|
|
18429
17946
|
onAdd();
|
|
18430
17947
|
},
|
|
18431
|
-
children: /* @__PURE__ */ (0,
|
|
17948
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
18432
17949
|
}
|
|
18433
17950
|
) }),
|
|
18434
|
-
/* @__PURE__ */ (0,
|
|
17951
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
18435
17952
|
] })
|
|
18436
17953
|
}
|
|
18437
17954
|
) });
|
|
18438
17955
|
}
|
|
18439
17956
|
|
|
18440
17957
|
// src/lib/carousel.ts
|
|
18441
|
-
var
|
|
17958
|
+
var import_react17 = require("react");
|
|
18442
17959
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
18443
17960
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
18444
17961
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -18500,8 +18017,8 @@ function applyCarouselNode(key, val) {
|
|
|
18500
18017
|
return true;
|
|
18501
18018
|
}
|
|
18502
18019
|
function useOhwCarousel(key, initial) {
|
|
18503
|
-
const [images, setImages] = (0,
|
|
18504
|
-
(0,
|
|
18020
|
+
const [images, setImages] = (0, import_react17.useState)(initial);
|
|
18021
|
+
(0, import_react17.useEffect)(() => {
|
|
18505
18022
|
const el = document.querySelector(
|
|
18506
18023
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
18507
18024
|
);
|
|
@@ -18920,14 +18437,14 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
18920
18437
|
}
|
|
18921
18438
|
|
|
18922
18439
|
// src/ui/navbar-container-chrome.tsx
|
|
18923
|
-
var
|
|
18924
|
-
var
|
|
18440
|
+
var import_lucide_react18 = require("lucide-react");
|
|
18441
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
18925
18442
|
function NavbarContainerChrome({
|
|
18926
18443
|
rect,
|
|
18927
18444
|
onAdd
|
|
18928
18445
|
}) {
|
|
18929
18446
|
const chromeGap = 6;
|
|
18930
|
-
return /* @__PURE__ */ (0,
|
|
18447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
18931
18448
|
"div",
|
|
18932
18449
|
{
|
|
18933
18450
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -18939,7 +18456,7 @@ function NavbarContainerChrome({
|
|
|
18939
18456
|
width: rect.width + chromeGap * 2,
|
|
18940
18457
|
height: rect.height + chromeGap * 2
|
|
18941
18458
|
},
|
|
18942
|
-
children: /* @__PURE__ */ (0,
|
|
18459
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
18943
18460
|
"button",
|
|
18944
18461
|
{
|
|
18945
18462
|
type: "button",
|
|
@@ -18956,7 +18473,7 @@ function NavbarContainerChrome({
|
|
|
18956
18473
|
e.stopPropagation();
|
|
18957
18474
|
onAdd();
|
|
18958
18475
|
},
|
|
18959
|
-
children: /* @__PURE__ */ (0,
|
|
18476
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
18960
18477
|
}
|
|
18961
18478
|
)
|
|
18962
18479
|
}
|
|
@@ -18965,7 +18482,7 @@ function NavbarContainerChrome({
|
|
|
18965
18482
|
|
|
18966
18483
|
// src/ui/drop-indicator.tsx
|
|
18967
18484
|
var React11 = __toESM(require("react"), 1);
|
|
18968
|
-
var
|
|
18485
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
18969
18486
|
var dropIndicatorVariants = cva(
|
|
18970
18487
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
18971
18488
|
{
|
|
@@ -18989,7 +18506,7 @@ var dropIndicatorVariants = cva(
|
|
|
18989
18506
|
);
|
|
18990
18507
|
var DropIndicator = React11.forwardRef(
|
|
18991
18508
|
({ className, direction, state, ...props }, ref) => {
|
|
18992
|
-
return /* @__PURE__ */ (0,
|
|
18509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
18993
18510
|
"div",
|
|
18994
18511
|
{
|
|
18995
18512
|
ref,
|
|
@@ -19006,7 +18523,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
19006
18523
|
DropIndicator.displayName = "DropIndicator";
|
|
19007
18524
|
|
|
19008
18525
|
// src/ui/badge.tsx
|
|
19009
|
-
var
|
|
18526
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
19010
18527
|
var badgeVariants = cva(
|
|
19011
18528
|
"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
18529
|
{
|
|
@@ -19024,13 +18541,13 @@ var badgeVariants = cva(
|
|
|
19024
18541
|
}
|
|
19025
18542
|
);
|
|
19026
18543
|
function Badge({ className, variant, ...props }) {
|
|
19027
|
-
return /* @__PURE__ */ (0,
|
|
18544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
19028
18545
|
}
|
|
19029
18546
|
|
|
19030
18547
|
// src/OhhwellsBridge.tsx
|
|
19031
|
-
var
|
|
19032
|
-
var
|
|
19033
|
-
var
|
|
18548
|
+
var import_lucide_react19 = require("lucide-react");
|
|
18549
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
18550
|
+
var PRIMARY4 = "#0885FE";
|
|
19034
18551
|
var IMAGE_FADE_MS = 300;
|
|
19035
18552
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
19036
18553
|
function runOpacityFade(el, onDone) {
|
|
@@ -19151,7 +18668,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
19151
18668
|
schedulingRoots.set(container, root);
|
|
19152
18669
|
(0, import_react_dom4.flushSync)(() => {
|
|
19153
18670
|
root.render(
|
|
19154
|
-
/* @__PURE__ */ (0,
|
|
18671
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
19155
18672
|
SchedulingWidget,
|
|
19156
18673
|
{
|
|
19157
18674
|
notifyOnConnect: false,
|
|
@@ -19279,7 +18796,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
19279
18796
|
schedulingRoots.set(container, root);
|
|
19280
18797
|
(0, import_react_dom4.flushSync)(() => {
|
|
19281
18798
|
root.render(
|
|
19282
|
-
/* @__PURE__ */ (0,
|
|
18799
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
19283
18800
|
SchedulingWidget,
|
|
19284
18801
|
{
|
|
19285
18802
|
notifyOnConnect,
|
|
@@ -20015,7 +19532,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
20015
19532
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
20016
19533
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
20017
19534
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
20018
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
19535
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY4})`;
|
|
20019
19536
|
var TOOLBAR_GROUPS = [
|
|
20020
19537
|
[
|
|
20021
19538
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -20041,7 +19558,7 @@ function EditGlowChrome({
|
|
|
20041
19558
|
hideHandle = false
|
|
20042
19559
|
}) {
|
|
20043
19560
|
const GAP = SELECTION_CHROME_GAP2;
|
|
20044
|
-
return /* @__PURE__ */ (0,
|
|
19561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20045
19562
|
"div",
|
|
20046
19563
|
{
|
|
20047
19564
|
ref: elRef,
|
|
@@ -20056,7 +19573,7 @@ function EditGlowChrome({
|
|
|
20056
19573
|
zIndex: 2147483646
|
|
20057
19574
|
},
|
|
20058
19575
|
children: [
|
|
20059
|
-
/* @__PURE__ */ (0,
|
|
19576
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20060
19577
|
"div",
|
|
20061
19578
|
{
|
|
20062
19579
|
style: {
|
|
@@ -20070,7 +19587,7 @@ function EditGlowChrome({
|
|
|
20070
19587
|
}
|
|
20071
19588
|
}
|
|
20072
19589
|
),
|
|
20073
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
19590
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20074
19591
|
"div",
|
|
20075
19592
|
{
|
|
20076
19593
|
"data-ohw-drag-handle-container": "",
|
|
@@ -20082,7 +19599,7 @@ function EditGlowChrome({
|
|
|
20082
19599
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
20083
19600
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
20084
19601
|
},
|
|
20085
|
-
children: /* @__PURE__ */ (0,
|
|
19602
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20086
19603
|
DragHandle,
|
|
20087
19604
|
{
|
|
20088
19605
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -20259,9 +19776,9 @@ function FloatingToolbar({
|
|
|
20259
19776
|
showEditLink,
|
|
20260
19777
|
onEditLink
|
|
20261
19778
|
}) {
|
|
20262
|
-
const localRef =
|
|
20263
|
-
const [measuredW, setMeasuredW] =
|
|
20264
|
-
const setRefs =
|
|
19779
|
+
const localRef = import_react18.default.useRef(null);
|
|
19780
|
+
const [measuredW, setMeasuredW] = import_react18.default.useState(330);
|
|
19781
|
+
const setRefs = import_react18.default.useCallback(
|
|
20265
19782
|
(node) => {
|
|
20266
19783
|
localRef.current = node;
|
|
20267
19784
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -20273,7 +19790,7 @@ function FloatingToolbar({
|
|
|
20273
19790
|
},
|
|
20274
19791
|
[elRef]
|
|
20275
19792
|
);
|
|
20276
|
-
|
|
19793
|
+
import_react18.default.useLayoutEffect(() => {
|
|
20277
19794
|
const node = localRef.current;
|
|
20278
19795
|
if (!node) return;
|
|
20279
19796
|
const update = () => {
|
|
@@ -20286,7 +19803,7 @@ function FloatingToolbar({
|
|
|
20286
19803
|
return () => ro.disconnect();
|
|
20287
19804
|
}, [showEditLink, activeCommands]);
|
|
20288
19805
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
20289
|
-
return /* @__PURE__ */ (0,
|
|
19806
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20290
19807
|
"div",
|
|
20291
19808
|
{
|
|
20292
19809
|
ref: setRefs,
|
|
@@ -20298,12 +19815,12 @@ function FloatingToolbar({
|
|
|
20298
19815
|
zIndex: 2147483647,
|
|
20299
19816
|
pointerEvents: "auto"
|
|
20300
19817
|
},
|
|
20301
|
-
children: /* @__PURE__ */ (0,
|
|
20302
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
20303
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
19818
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(CustomToolbar, { children: [
|
|
19819
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react18.default.Fragment, { children: [
|
|
19820
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomToolbarDivider, {}),
|
|
20304
19821
|
btns.map((btn) => {
|
|
20305
19822
|
const isActive = activeCommands.has(btn.cmd);
|
|
20306
|
-
return /* @__PURE__ */ (0,
|
|
19823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20307
19824
|
CustomToolbarButton,
|
|
20308
19825
|
{
|
|
20309
19826
|
title: btn.title,
|
|
@@ -20312,7 +19829,7 @@ function FloatingToolbar({
|
|
|
20312
19829
|
e.preventDefault();
|
|
20313
19830
|
onCommand(btn.cmd);
|
|
20314
19831
|
},
|
|
20315
|
-
children: /* @__PURE__ */ (0,
|
|
19832
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20316
19833
|
"svg",
|
|
20317
19834
|
{
|
|
20318
19835
|
width: "16",
|
|
@@ -20333,7 +19850,7 @@ function FloatingToolbar({
|
|
|
20333
19850
|
);
|
|
20334
19851
|
})
|
|
20335
19852
|
] }, gi)),
|
|
20336
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
19853
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20337
19854
|
CustomToolbarButton,
|
|
20338
19855
|
{
|
|
20339
19856
|
type: "button",
|
|
@@ -20347,7 +19864,7 @@ function FloatingToolbar({
|
|
|
20347
19864
|
e.preventDefault();
|
|
20348
19865
|
e.stopPropagation();
|
|
20349
19866
|
},
|
|
20350
|
-
children: /* @__PURE__ */ (0,
|
|
19867
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
20351
19868
|
}
|
|
20352
19869
|
) : null
|
|
20353
19870
|
] })
|
|
@@ -20364,7 +19881,7 @@ function StateToggle({
|
|
|
20364
19881
|
states,
|
|
20365
19882
|
onStateChange
|
|
20366
19883
|
}) {
|
|
20367
|
-
return /* @__PURE__ */ (0,
|
|
19884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20368
19885
|
ToggleGroup,
|
|
20369
19886
|
{
|
|
20370
19887
|
"data-ohw-state-toggle": "",
|
|
@@ -20378,7 +19895,7 @@ function StateToggle({
|
|
|
20378
19895
|
left: rect.right - 8,
|
|
20379
19896
|
transform: "translateX(-100%)"
|
|
20380
19897
|
},
|
|
20381
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
19898
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
20382
19899
|
}
|
|
20383
19900
|
);
|
|
20384
19901
|
}
|
|
@@ -20395,9 +19912,9 @@ var OHW_LOADER_STYLE = {
|
|
|
20395
19912
|
justifyContent: "center"
|
|
20396
19913
|
};
|
|
20397
19914
|
function OhwLoaderSpinner() {
|
|
20398
|
-
return /* @__PURE__ */ (0,
|
|
20399
|
-
/* @__PURE__ */ (0,
|
|
20400
|
-
/* @__PURE__ */ (0,
|
|
19915
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
19916
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
19917
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20401
19918
|
"circle",
|
|
20402
19919
|
{
|
|
20403
19920
|
cx: "14",
|
|
@@ -20407,7 +19924,7 @@ function OhwLoaderSpinner() {
|
|
|
20407
19924
|
strokeWidth: "3",
|
|
20408
19925
|
strokeDasharray: "17 52",
|
|
20409
19926
|
strokeLinecap: "round",
|
|
20410
|
-
children: /* @__PURE__ */ (0,
|
|
19927
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20411
19928
|
"animateTransform",
|
|
20412
19929
|
{
|
|
20413
19930
|
attributeName: "transform",
|
|
@@ -20423,7 +19940,7 @@ function OhwLoaderSpinner() {
|
|
|
20423
19940
|
] });
|
|
20424
19941
|
}
|
|
20425
19942
|
function OhwBrandMark() {
|
|
20426
|
-
return /* @__PURE__ */ (0,
|
|
19943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20427
19944
|
"svg",
|
|
20428
19945
|
{
|
|
20429
19946
|
width: "16",
|
|
@@ -20434,7 +19951,7 @@ function OhwBrandMark() {
|
|
|
20434
19951
|
style: { display: "block", flexShrink: 0 },
|
|
20435
19952
|
xmlns: "http://www.w3.org/2000/svg",
|
|
20436
19953
|
children: [
|
|
20437
|
-
/* @__PURE__ */ (0,
|
|
19954
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20438
19955
|
"mask",
|
|
20439
19956
|
{
|
|
20440
19957
|
id: "ohw-badge-mark",
|
|
@@ -20444,15 +19961,15 @@ function OhwBrandMark() {
|
|
|
20444
19961
|
y: "0",
|
|
20445
19962
|
width: "48",
|
|
20446
19963
|
height: "48",
|
|
20447
|
-
children: /* @__PURE__ */ (0,
|
|
19964
|
+
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
19965
|
}
|
|
20449
19966
|
),
|
|
20450
|
-
/* @__PURE__ */ (0,
|
|
20451
|
-
/* @__PURE__ */ (0,
|
|
20452
|
-
/* @__PURE__ */ (0,
|
|
20453
|
-
/* @__PURE__ */ (0,
|
|
20454
|
-
/* @__PURE__ */ (0,
|
|
20455
|
-
/* @__PURE__ */ (0,
|
|
19967
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
19968
|
+
/* @__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" }),
|
|
19969
|
+
/* @__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" }),
|
|
19970
|
+
/* @__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" }),
|
|
19971
|
+
/* @__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" }),
|
|
19972
|
+
/* @__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
19973
|
] })
|
|
20457
19974
|
]
|
|
20458
19975
|
}
|
|
@@ -20489,7 +20006,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
20489
20006
|
whiteSpace: "nowrap"
|
|
20490
20007
|
};
|
|
20491
20008
|
function MadeWithOhhWells() {
|
|
20492
|
-
return /* @__PURE__ */ (0,
|
|
20009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20493
20010
|
"a",
|
|
20494
20011
|
{
|
|
20495
20012
|
href: "https://ohhwells.com",
|
|
@@ -20499,8 +20016,8 @@ function MadeWithOhhWells() {
|
|
|
20499
20016
|
"data-ohw-badge": "",
|
|
20500
20017
|
style: OHW_BADGE_STYLE,
|
|
20501
20018
|
children: [
|
|
20502
|
-
/* @__PURE__ */ (0,
|
|
20503
|
-
/* @__PURE__ */ (0,
|
|
20019
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OhwBrandMark, {}),
|
|
20020
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
20504
20021
|
]
|
|
20505
20022
|
}
|
|
20506
20023
|
);
|
|
@@ -20546,8 +20063,8 @@ function OhhwellsBridge() {
|
|
|
20546
20063
|
const router = (0, import_navigation3.useRouter)();
|
|
20547
20064
|
const searchParams = (0, import_navigation3.useSearchParams)();
|
|
20548
20065
|
const isEditMode = isEditSessionActive();
|
|
20549
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
20550
|
-
(0,
|
|
20066
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react18.useState)(null);
|
|
20067
|
+
(0, import_react18.useEffect)(() => {
|
|
20551
20068
|
const figtreeFontId = "ohw-figtree-font";
|
|
20552
20069
|
if (!document.getElementById(figtreeFontId)) {
|
|
20553
20070
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -20573,8 +20090,8 @@ function OhhwellsBridge() {
|
|
|
20573
20090
|
};
|
|
20574
20091
|
}, []);
|
|
20575
20092
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
20576
|
-
const [subdomain, setSubdomain] = (0,
|
|
20577
|
-
(0,
|
|
20093
|
+
const [subdomain, setSubdomain] = (0, import_react18.useState)(() => resolveSubdomain(subdomainFromQuery));
|
|
20094
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
20578
20095
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
20579
20096
|
if (next !== subdomain) setSubdomain(next);
|
|
20580
20097
|
if (next) return;
|
|
@@ -20586,7 +20103,7 @@ function OhhwellsBridge() {
|
|
|
20586
20103
|
}, 0);
|
|
20587
20104
|
return () => window.clearTimeout(t);
|
|
20588
20105
|
}, [subdomainFromQuery, subdomain]);
|
|
20589
|
-
(0,
|
|
20106
|
+
(0, import_react18.useEffect)(() => {
|
|
20590
20107
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
20591
20108
|
const url = new URL(window.location.href);
|
|
20592
20109
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -20595,45 +20112,45 @@ function OhhwellsBridge() {
|
|
|
20595
20112
|
}, [subdomainFromQuery]);
|
|
20596
20113
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
20597
20114
|
useSavedLinkNavigation(isEditMode);
|
|
20598
|
-
const postToParent2 = (0,
|
|
20115
|
+
const postToParent2 = (0, import_react18.useCallback)((data) => {
|
|
20599
20116
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
20600
20117
|
window.parent.postMessage(data, "*");
|
|
20601
20118
|
}
|
|
20602
20119
|
}, []);
|
|
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,
|
|
20120
|
+
const [fetchState, setFetchState] = (0, import_react18.useState)("idle");
|
|
20121
|
+
const [showBranding, setShowBranding] = (0, import_react18.useState)(false);
|
|
20122
|
+
const autoSaveTimers = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
|
|
20123
|
+
const activeElRef = (0, import_react18.useRef)(null);
|
|
20124
|
+
const pointerHeldRef = (0, import_react18.useRef)(false);
|
|
20125
|
+
const selectedElRef = (0, import_react18.useRef)(null);
|
|
20126
|
+
const selectedHrefKeyRef = (0, import_react18.useRef)(null);
|
|
20127
|
+
const selectedFooterColAttrRef = (0, import_react18.useRef)(null);
|
|
20128
|
+
const originalContentRef = (0, import_react18.useRef)(null);
|
|
20129
|
+
const activeStateElRef = (0, import_react18.useRef)(null);
|
|
20130
|
+
const parentScrollRef = (0, import_react18.useRef)(null);
|
|
20131
|
+
const visibleViewportRef = (0, import_react18.useRef)(null);
|
|
20132
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react18.useState)(null);
|
|
20133
|
+
const attachVisibleViewport = (0, import_react18.useCallback)((node) => {
|
|
20617
20134
|
visibleViewportRef.current = node;
|
|
20618
20135
|
setDialogPortalContainer(node);
|
|
20619
20136
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
20620
20137
|
}, []);
|
|
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,
|
|
20138
|
+
const toolbarElRef = (0, import_react18.useRef)(null);
|
|
20139
|
+
const glowElRef = (0, import_react18.useRef)(null);
|
|
20140
|
+
const hoveredImageRef = (0, import_react18.useRef)(null);
|
|
20141
|
+
const hoveredImageHasTextOverlapRef = (0, import_react18.useRef)(false);
|
|
20142
|
+
const dragOverElRef = (0, import_react18.useRef)(null);
|
|
20143
|
+
const [mediaHover, setMediaHover] = (0, import_react18.useState)(null);
|
|
20144
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react18.useState)(null);
|
|
20145
|
+
const selectedAiSectionIdRef = (0, import_react18.useRef)(null);
|
|
20146
|
+
const handleAiSectionSelectionChange = (0, import_react18.useCallback)((id) => {
|
|
20630
20147
|
selectedAiSectionIdRef.current = id;
|
|
20631
20148
|
setSelectedAiSectionId(id);
|
|
20632
20149
|
}, []);
|
|
20633
|
-
const [selectedMedia, setSelectedMedia] = (0,
|
|
20634
|
-
const selectedMediaElRef = (0,
|
|
20635
|
-
const mediaKeyDropTokenRef = (0,
|
|
20636
|
-
const clearMediaSelection = (0,
|
|
20150
|
+
const [selectedMedia, setSelectedMedia] = (0, import_react18.useState)(null);
|
|
20151
|
+
const selectedMediaElRef = (0, import_react18.useRef)(null);
|
|
20152
|
+
const mediaKeyDropTokenRef = (0, import_react18.useRef)(0);
|
|
20153
|
+
const clearMediaSelection = (0, import_react18.useCallback)(() => {
|
|
20637
20154
|
const prev = selectedMediaElRef.current;
|
|
20638
20155
|
selectedMediaElRef.current = null;
|
|
20639
20156
|
setSelectedMedia(null);
|
|
@@ -20658,9 +20175,9 @@ function OhhwellsBridge() {
|
|
|
20658
20175
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
20659
20176
|
}
|
|
20660
20177
|
}, []);
|
|
20661
|
-
const clearMediaSelectionRef = (0,
|
|
20178
|
+
const clearMediaSelectionRef = (0, import_react18.useRef)(clearMediaSelection);
|
|
20662
20179
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
20663
|
-
const selectMediaElement = (0,
|
|
20180
|
+
const selectMediaElement = (0, import_react18.useCallback)((el) => {
|
|
20664
20181
|
const r2 = el.getBoundingClientRect();
|
|
20665
20182
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
20666
20183
|
selectedMediaElRef.current = el;
|
|
@@ -20684,9 +20201,9 @@ function OhhwellsBridge() {
|
|
|
20684
20201
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
20685
20202
|
});
|
|
20686
20203
|
}, []);
|
|
20687
|
-
const selectMediaElementRef = (0,
|
|
20204
|
+
const selectMediaElementRef = (0, import_react18.useRef)(selectMediaElement);
|
|
20688
20205
|
selectMediaElementRef.current = selectMediaElement;
|
|
20689
|
-
(0,
|
|
20206
|
+
(0, import_react18.useEffect)(() => {
|
|
20690
20207
|
if (!selectedMedia) return;
|
|
20691
20208
|
const update = () => {
|
|
20692
20209
|
const el = selectedMediaElRef.current;
|
|
@@ -20706,55 +20223,55 @@ function OhhwellsBridge() {
|
|
|
20706
20223
|
window.removeEventListener("resize", update);
|
|
20707
20224
|
};
|
|
20708
20225
|
}, [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,
|
|
20226
|
+
const [carouselHover, setCarouselHover] = (0, import_react18.useState)(null);
|
|
20227
|
+
const [uploadingRects, setUploadingRects] = (0, import_react18.useState)({});
|
|
20228
|
+
const hoveredGapRef = (0, import_react18.useRef)(null);
|
|
20229
|
+
const imageUnhoverTimerRef = (0, import_react18.useRef)(null);
|
|
20230
|
+
const imageShowTimerRef = (0, import_react18.useRef)(null);
|
|
20231
|
+
const editStylesRef = (0, import_react18.useRef)(null);
|
|
20232
|
+
const activateRef = (0, import_react18.useRef)(() => {
|
|
20716
20233
|
});
|
|
20717
|
-
const deactivateRef = (0,
|
|
20234
|
+
const deactivateRef = (0, import_react18.useRef)(() => {
|
|
20718
20235
|
});
|
|
20719
|
-
const selectRef = (0,
|
|
20236
|
+
const selectRef = (0, import_react18.useRef)(() => {
|
|
20720
20237
|
});
|
|
20721
|
-
const selectFrameRef = (0,
|
|
20238
|
+
const selectFrameRef = (0, import_react18.useRef)(() => {
|
|
20722
20239
|
});
|
|
20723
|
-
const selectLogoRef = (0,
|
|
20240
|
+
const selectLogoRef = (0, import_react18.useRef)(() => {
|
|
20724
20241
|
});
|
|
20725
|
-
const openLogoSizePanelRef = (0,
|
|
20242
|
+
const openLogoSizePanelRef = (0, import_react18.useRef)(() => {
|
|
20726
20243
|
});
|
|
20727
|
-
const deselectRef = (0,
|
|
20244
|
+
const deselectRef = (0, import_react18.useRef)(() => {
|
|
20728
20245
|
});
|
|
20729
|
-
const closeFloatingPanelOnlyRef = (0,
|
|
20246
|
+
const closeFloatingPanelOnlyRef = (0, import_react18.useRef)(() => {
|
|
20730
20247
|
});
|
|
20731
|
-
const reselectNavigationItemRef = (0,
|
|
20248
|
+
const reselectNavigationItemRef = (0, import_react18.useRef)(() => {
|
|
20732
20249
|
});
|
|
20733
|
-
const commitNavigationTextEditRef = (0,
|
|
20250
|
+
const commitNavigationTextEditRef = (0, import_react18.useRef)(() => {
|
|
20734
20251
|
});
|
|
20735
|
-
const handleDeleteSelectedRef = (0,
|
|
20736
|
-
const runPendingDeleteUndoRef = (0,
|
|
20737
|
-
const isFooterFrameSelectionRef = (0,
|
|
20738
|
-
const refreshActiveCommandsRef = (0,
|
|
20252
|
+
const handleDeleteSelectedRef = (0, import_react18.useRef)(() => false);
|
|
20253
|
+
const runPendingDeleteUndoRef = (0, import_react18.useRef)(() => false);
|
|
20254
|
+
const isFooterFrameSelectionRef = (0, import_react18.useRef)(false);
|
|
20255
|
+
const refreshActiveCommandsRef = (0, import_react18.useRef)(() => {
|
|
20739
20256
|
});
|
|
20740
|
-
const postToParentRef = (0,
|
|
20257
|
+
const postToParentRef = (0, import_react18.useRef)(postToParent2);
|
|
20741
20258
|
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,
|
|
20259
|
+
const aiSectionApiRef = (0, import_react18.useRef)(null);
|
|
20260
|
+
const applyTreeLocalRef = (0, import_react18.useRef)(null);
|
|
20261
|
+
const sectionsLoadedRef = (0, import_react18.useRef)(false);
|
|
20262
|
+
const pendingScheduleConfigRequests = (0, import_react18.useRef)([]);
|
|
20263
|
+
const [toolbarRect, setToolbarRect] = (0, import_react18.useState)(null);
|
|
20264
|
+
const [formPickRect, setFormPickRect] = (0, import_react18.useState)(null);
|
|
20265
|
+
const formPickElRef = (0, import_react18.useRef)(null);
|
|
20266
|
+
const [formViewState, setFormViewStateUi] = (0, import_react18.useState)("default");
|
|
20267
|
+
const [formPickCount, setFormPickCount] = (0, import_react18.useState)(null);
|
|
20268
|
+
const [formHoverRect, setFormHoverRect] = (0, import_react18.useState)(null);
|
|
20269
|
+
const formHoverElRef = (0, import_react18.useRef)(null);
|
|
20270
|
+
const [fieldPickRect, setFieldPickRect] = (0, import_react18.useState)(null);
|
|
20271
|
+
const fieldPickElRef = (0, import_react18.useRef)(null);
|
|
20272
|
+
const [fieldPickState, setFieldPickState] = (0, import_react18.useState)(null);
|
|
20273
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react18.useState)(false);
|
|
20274
|
+
const clearFormPick = (0, import_react18.useCallback)(() => {
|
|
20758
20275
|
const form = formPickElRef.current;
|
|
20759
20276
|
const editing = fieldPickElRef.current;
|
|
20760
20277
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -20774,7 +20291,7 @@ function OhhwellsBridge() {
|
|
|
20774
20291
|
formPickElRef.current = null;
|
|
20775
20292
|
setFormPickRect(null);
|
|
20776
20293
|
}, []);
|
|
20777
|
-
const clearFieldPick = (0,
|
|
20294
|
+
const clearFieldPick = (0, import_react18.useCallback)(() => {
|
|
20778
20295
|
const wrapper = fieldPickElRef.current;
|
|
20779
20296
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
20780
20297
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -20784,9 +20301,9 @@ function OhhwellsBridge() {
|
|
|
20784
20301
|
setFieldPickRect(null);
|
|
20785
20302
|
setFieldPickState(null);
|
|
20786
20303
|
}, []);
|
|
20787
|
-
const persistFieldsRef = (0,
|
|
20304
|
+
const persistFieldsRef = (0, import_react18.useRef)(() => {
|
|
20788
20305
|
});
|
|
20789
|
-
const persistFields = (0,
|
|
20306
|
+
const persistFields = (0, import_react18.useCallback)(
|
|
20790
20307
|
(form) => {
|
|
20791
20308
|
const key = formKeyOf(form);
|
|
20792
20309
|
if (!key) return;
|
|
@@ -20797,7 +20314,7 @@ function OhhwellsBridge() {
|
|
|
20797
20314
|
[]
|
|
20798
20315
|
);
|
|
20799
20316
|
persistFieldsRef.current = persistFields;
|
|
20800
|
-
const selectField = (0,
|
|
20317
|
+
const selectField = (0, import_react18.useCallback)((wrapper) => {
|
|
20801
20318
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
20802
20319
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
20803
20320
|
}
|
|
@@ -20810,7 +20327,7 @@ function OhhwellsBridge() {
|
|
|
20810
20327
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
20811
20328
|
setFieldTypePickerOpen(false);
|
|
20812
20329
|
}, []);
|
|
20813
|
-
const withSelectedField = (0,
|
|
20330
|
+
const withSelectedField = (0, import_react18.useCallback)(
|
|
20814
20331
|
(run) => {
|
|
20815
20332
|
const wrapper = fieldPickElRef.current;
|
|
20816
20333
|
const form = formPickElRef.current;
|
|
@@ -20823,28 +20340,28 @@ function OhhwellsBridge() {
|
|
|
20823
20340
|
},
|
|
20824
20341
|
[persistFields]
|
|
20825
20342
|
);
|
|
20826
|
-
const handleFieldTypeChange = (0,
|
|
20343
|
+
const handleFieldTypeChange = (0, import_react18.useCallback)(
|
|
20827
20344
|
(type) => withSelectedField((_form, wrapper) => {
|
|
20828
20345
|
applyFieldType(wrapper, type);
|
|
20829
20346
|
selectField(wrapper);
|
|
20830
20347
|
}),
|
|
20831
20348
|
[selectField, withSelectedField]
|
|
20832
20349
|
);
|
|
20833
|
-
const handleFieldRequiredToggle = (0,
|
|
20350
|
+
const handleFieldRequiredToggle = (0, import_react18.useCallback)(
|
|
20834
20351
|
() => withSelectedField((_form, wrapper) => {
|
|
20835
20352
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
20836
20353
|
selectField(wrapper);
|
|
20837
20354
|
}),
|
|
20838
20355
|
[selectField, withSelectedField]
|
|
20839
20356
|
);
|
|
20840
|
-
const handleFieldDuplicate = (0,
|
|
20357
|
+
const handleFieldDuplicate = (0, import_react18.useCallback)(
|
|
20841
20358
|
() => withSelectedField((form, wrapper) => {
|
|
20842
20359
|
const copy = duplicateField(form, wrapper);
|
|
20843
20360
|
selectField(copy);
|
|
20844
20361
|
}),
|
|
20845
20362
|
[selectField, withSelectedField]
|
|
20846
20363
|
);
|
|
20847
|
-
const handleFieldDelete = (0,
|
|
20364
|
+
const handleFieldDelete = (0, import_react18.useCallback)(
|
|
20848
20365
|
() => withSelectedField((_form, wrapper) => {
|
|
20849
20366
|
removeField(wrapper);
|
|
20850
20367
|
clearFieldPick();
|
|
@@ -20852,7 +20369,7 @@ function OhhwellsBridge() {
|
|
|
20852
20369
|
}),
|
|
20853
20370
|
[clearFieldPick, withSelectedField]
|
|
20854
20371
|
);
|
|
20855
|
-
const handleAddField = (0,
|
|
20372
|
+
const handleAddField = (0, import_react18.useCallback)(
|
|
20856
20373
|
(type) => {
|
|
20857
20374
|
const form = formPickElRef.current;
|
|
20858
20375
|
if (!form) return;
|
|
@@ -20868,8 +20385,8 @@ function OhhwellsBridge() {
|
|
|
20868
20385
|
},
|
|
20869
20386
|
[persistFields, selectField]
|
|
20870
20387
|
);
|
|
20871
|
-
const fieldDragRef = (0,
|
|
20872
|
-
const buildFieldDropSlots = (0,
|
|
20388
|
+
const fieldDragRef = (0, import_react18.useRef)(null);
|
|
20389
|
+
const buildFieldDropSlots = (0, import_react18.useCallback)((form, draggedKey) => {
|
|
20873
20390
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
20874
20391
|
const slots = others.map((el) => {
|
|
20875
20392
|
const rect = el.getBoundingClientRect();
|
|
@@ -20882,7 +20399,7 @@ function OhhwellsBridge() {
|
|
|
20882
20399
|
}
|
|
20883
20400
|
return slots;
|
|
20884
20401
|
}, []);
|
|
20885
|
-
const handleFieldDragStart = (0,
|
|
20402
|
+
const handleFieldDragStart = (0, import_react18.useCallback)(() => {
|
|
20886
20403
|
const wrapper = fieldPickElRef.current;
|
|
20887
20404
|
const form = formPickElRef.current;
|
|
20888
20405
|
if (!wrapper || !form) return;
|
|
@@ -20891,18 +20408,18 @@ function OhhwellsBridge() {
|
|
|
20891
20408
|
setFieldDragging(true);
|
|
20892
20409
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
20893
20410
|
}, [buildFieldDropSlots]);
|
|
20894
|
-
const handleFieldDragEnd = (0,
|
|
20411
|
+
const handleFieldDragEnd = (0, import_react18.useCallback)(() => {
|
|
20895
20412
|
fieldDragRef.current = null;
|
|
20896
20413
|
setFieldDropIndex(null);
|
|
20897
20414
|
setFieldDropSlots([]);
|
|
20898
20415
|
setFieldDragging(false);
|
|
20899
20416
|
}, []);
|
|
20900
|
-
const [fieldDropIndex, setFieldDropIndex] = (0,
|
|
20901
|
-
const [fieldDropSlots, setFieldDropSlots] = (0,
|
|
20902
|
-
const [fieldDragging, setFieldDragging] = (0,
|
|
20903
|
-
const clearFormPickRef = (0,
|
|
20417
|
+
const [fieldDropIndex, setFieldDropIndex] = (0, import_react18.useState)(null);
|
|
20418
|
+
const [fieldDropSlots, setFieldDropSlots] = (0, import_react18.useState)([]);
|
|
20419
|
+
const [fieldDragging, setFieldDragging] = (0, import_react18.useState)(false);
|
|
20420
|
+
const clearFormPickRef = (0, import_react18.useRef)(clearFormPick);
|
|
20904
20421
|
clearFormPickRef.current = clearFormPick;
|
|
20905
|
-
(0,
|
|
20422
|
+
(0, import_react18.useEffect)(() => {
|
|
20906
20423
|
const el = fieldPickElRef.current;
|
|
20907
20424
|
if (!el || fieldPickRect === null) return;
|
|
20908
20425
|
const observer = new ResizeObserver(() => {
|
|
@@ -20911,7 +20428,7 @@ function OhhwellsBridge() {
|
|
|
20911
20428
|
observer.observe(el);
|
|
20912
20429
|
return () => observer.disconnect();
|
|
20913
20430
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
20914
|
-
(0,
|
|
20431
|
+
(0, import_react18.useEffect)(() => {
|
|
20915
20432
|
const el = formPickElRef.current;
|
|
20916
20433
|
if (!el || formPickRect === null) return;
|
|
20917
20434
|
const observer = new ResizeObserver(() => {
|
|
@@ -20920,25 +20437,25 @@ function OhhwellsBridge() {
|
|
|
20920
20437
|
observer.observe(el);
|
|
20921
20438
|
return () => observer.disconnect();
|
|
20922
20439
|
}, [formPickRect !== null, formViewState]);
|
|
20923
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
20924
|
-
const toolbarVariantRef = (0,
|
|
20440
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react18.useState)("none");
|
|
20441
|
+
const toolbarVariantRef = (0, import_react18.useRef)("none");
|
|
20925
20442
|
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,
|
|
20443
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react18.useState)(false);
|
|
20444
|
+
const [selectedIsSocial, setSelectedIsSocial] = (0, import_react18.useState)(false);
|
|
20445
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react18.useState)(false);
|
|
20446
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react18.useState)(null);
|
|
20447
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react18.useState)(false);
|
|
20448
|
+
const [toggleState, setToggleState] = (0, import_react18.useState)(null);
|
|
20449
|
+
const [maxBadge, setMaxBadge] = (0, import_react18.useState)(null);
|
|
20450
|
+
const [activeCommands, setActiveCommands] = (0, import_react18.useState)(/* @__PURE__ */ new Set());
|
|
20451
|
+
const [sectionGap, setSectionGap] = (0, import_react18.useState)(null);
|
|
20452
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react18.useState)(false);
|
|
20453
|
+
const hoveredNavContainerRef = (0, import_react18.useRef)(null);
|
|
20454
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react18.useState)(null);
|
|
20455
|
+
const hoveredItemElRef = (0, import_react18.useRef)(null);
|
|
20456
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react18.useState)(null);
|
|
20457
|
+
const [hoveredTextRect, setHoveredTextRect] = (0, import_react18.useState)(null);
|
|
20458
|
+
(0, import_react18.useEffect)(() => {
|
|
20942
20459
|
const sync = () => {
|
|
20943
20460
|
const el = document.querySelector(
|
|
20944
20461
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -20982,57 +20499,57 @@ function OhhwellsBridge() {
|
|
|
20982
20499
|
});
|
|
20983
20500
|
return () => observer.disconnect();
|
|
20984
20501
|
}, []);
|
|
20985
|
-
const siblingHintElRef = (0,
|
|
20986
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
20987
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
20988
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
20989
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
20502
|
+
const siblingHintElRef = (0, import_react18.useRef)(null);
|
|
20503
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react18.useState)(null);
|
|
20504
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react18.useState)([]);
|
|
20505
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react18.useState)(false);
|
|
20506
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react18.useState)(false);
|
|
20990
20507
|
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,
|
|
20508
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react18.useState)(null);
|
|
20509
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react18.useState)(null);
|
|
20510
|
+
const footerDragRef = (0, import_react18.useRef)(null);
|
|
20511
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react18.useState)([]);
|
|
20512
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react18.useState)(null);
|
|
20513
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react18.useState)(null);
|
|
20514
|
+
const footerPointerDragRef = (0, import_react18.useRef)(null);
|
|
20515
|
+
const suppressNextClickRef = (0, import_react18.useRef)(false);
|
|
20516
|
+
const suppressClickUntilRef = (0, import_react18.useRef)(0);
|
|
20517
|
+
const [linkPopover, setLinkPopover] = (0, import_react18.useState)(null);
|
|
20518
|
+
const linkPopoverSessionRef = (0, import_react18.useRef)(null);
|
|
20519
|
+
const addNavAfterAnchorRef = (0, import_react18.useRef)(null);
|
|
20520
|
+
const editContentRef = (0, import_react18.useRef)({});
|
|
20521
|
+
const aiSectionsRef = (0, import_react18.useRef)("");
|
|
20522
|
+
const brandKitRef = (0, import_react18.useRef)("");
|
|
20523
|
+
const stylesRef = (0, import_react18.useRef)("");
|
|
20524
|
+
const appliedDrawerRef = (0, import_react18.useRef)(null);
|
|
20525
|
+
const pendingDeleteUndoRef = (0, import_react18.useRef)(null);
|
|
20526
|
+
const [floatingPanel, setFloatingPanel] = (0, import_react18.useState)(null);
|
|
20527
|
+
const floatingPanelOpenRef = (0, import_react18.useRef)(false);
|
|
20528
|
+
const floatingPanelRef = (0, import_react18.useRef)(null);
|
|
21012
20529
|
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,
|
|
20530
|
+
const setFloatingPanelRef = (0, import_react18.useRef)(setFloatingPanel);
|
|
20531
|
+
const [floatingPanelPos, setFloatingPanelPos] = (0, import_react18.useState)(null);
|
|
20532
|
+
const buttonCollectionDragRef = (0, import_react18.useRef)(null);
|
|
20533
|
+
const buttonDropInsertIndexRef = (0, import_react18.useRef)(null);
|
|
20534
|
+
const [buttonDropSlots, setButtonDropSlots] = (0, import_react18.useState)([]);
|
|
20535
|
+
const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react18.useState)(null);
|
|
20536
|
+
const buttonPointerDragRef = (0, import_react18.useRef)(null);
|
|
20537
|
+
const [buttonStyleTick, setButtonStyleTick] = (0, import_react18.useState)(0);
|
|
20538
|
+
const [logoSizeDraft, setLogoSizeDraft] = (0, import_react18.useState)(null);
|
|
20539
|
+
const [editorViewport, setEditorViewport] = (0, import_react18.useState)("desktop");
|
|
20540
|
+
const [parentScrollSnap, setParentScrollSnap] = (0, import_react18.useState)(null);
|
|
20541
|
+
const [sitePages, setSitePages] = (0, import_react18.useState)([]);
|
|
20542
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react18.useState)({});
|
|
20543
|
+
const sectionsPrefetchGenRef = (0, import_react18.useRef)(0);
|
|
20544
|
+
const setLinkPopoverRef = (0, import_react18.useRef)(setLinkPopover);
|
|
20545
|
+
const linkPopoverPanelRef = (0, import_react18.useRef)(null);
|
|
20546
|
+
const linkPopoverOpenRef = (0, import_react18.useRef)(false);
|
|
20547
|
+
const linkPopoverGraceUntilRef = (0, import_react18.useRef)(0);
|
|
21031
20548
|
setLinkPopoverRef.current = setLinkPopover;
|
|
21032
20549
|
setFloatingPanelRef.current = setFloatingPanel;
|
|
21033
20550
|
linkPopoverSessionRef.current = linkPopover;
|
|
21034
20551
|
floatingPanelOpenRef.current = Boolean(floatingPanel);
|
|
21035
|
-
(0,
|
|
20552
|
+
(0, import_react18.useEffect)(() => {
|
|
21036
20553
|
const syncViewport = () => {
|
|
21037
20554
|
const next = window.innerWidth <= 480 ? "mobile" : "desktop";
|
|
21038
20555
|
setEditorViewport((prev) => prev === next ? prev : next);
|
|
@@ -21041,7 +20558,7 @@ function OhhwellsBridge() {
|
|
|
21041
20558
|
window.addEventListener("resize", syncViewport);
|
|
21042
20559
|
return () => window.removeEventListener("resize", syncViewport);
|
|
21043
20560
|
}, []);
|
|
21044
|
-
(0,
|
|
20561
|
+
(0, import_react18.useEffect)(() => {
|
|
21045
20562
|
setSectionOrderPersistHandler((entries) => {
|
|
21046
20563
|
const currentPath = window.location.pathname;
|
|
21047
20564
|
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
@@ -21097,7 +20614,7 @@ function OhhwellsBridge() {
|
|
|
21097
20614
|
const bumpLinkPopoverGrace = () => {
|
|
21098
20615
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
21099
20616
|
};
|
|
21100
|
-
const runSectionsPrefetch = (0,
|
|
20617
|
+
const runSectionsPrefetch = (0, import_react18.useCallback)((pages) => {
|
|
21101
20618
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
21102
20619
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
21103
20620
|
const paths = pages.map((p) => p.path);
|
|
@@ -21116,9 +20633,9 @@ function OhhwellsBridge() {
|
|
|
21116
20633
|
);
|
|
21117
20634
|
});
|
|
21118
20635
|
}, [isEditMode, pathname]);
|
|
21119
|
-
const runSectionsPrefetchRef = (0,
|
|
20636
|
+
const runSectionsPrefetchRef = (0, import_react18.useRef)(runSectionsPrefetch);
|
|
21120
20637
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
21121
|
-
(0,
|
|
20638
|
+
(0, import_react18.useEffect)(() => {
|
|
21122
20639
|
if (!linkPopover) {
|
|
21123
20640
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21124
20641
|
return;
|
|
@@ -21146,7 +20663,7 @@ function OhhwellsBridge() {
|
|
|
21146
20663
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21147
20664
|
};
|
|
21148
20665
|
}, [linkPopover, postToParent2]);
|
|
21149
|
-
(0,
|
|
20666
|
+
(0, import_react18.useEffect)(() => {
|
|
21150
20667
|
if (!isEditMode) return;
|
|
21151
20668
|
const useFixtures = shouldUseDevFixtures();
|
|
21152
20669
|
if (useFixtures) {
|
|
@@ -21170,14 +20687,14 @@ function OhhwellsBridge() {
|
|
|
21170
20687
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
21171
20688
|
return () => window.removeEventListener("message", onSitePages);
|
|
21172
20689
|
}, [isEditMode, postToParent2]);
|
|
21173
|
-
(0,
|
|
20690
|
+
(0, import_react18.useEffect)(() => {
|
|
21174
20691
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
21175
20692
|
void loadAllSectionsManifest().then((manifest) => {
|
|
21176
20693
|
if (Object.keys(manifest).length === 0) return;
|
|
21177
20694
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
21178
20695
|
});
|
|
21179
20696
|
}, [isEditMode]);
|
|
21180
|
-
(0,
|
|
20697
|
+
(0, import_react18.useEffect)(() => {
|
|
21181
20698
|
const update = () => {
|
|
21182
20699
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
21183
20700
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -21201,10 +20718,10 @@ function OhhwellsBridge() {
|
|
|
21201
20718
|
vvp.removeEventListener("resize", update);
|
|
21202
20719
|
};
|
|
21203
20720
|
}, []);
|
|
21204
|
-
const refreshStateRules = (0,
|
|
20721
|
+
const refreshStateRules = (0, import_react18.useCallback)(() => {
|
|
21205
20722
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
21206
20723
|
}, []);
|
|
21207
|
-
const processConfigRequest = (0,
|
|
20724
|
+
const processConfigRequest = (0, import_react18.useCallback)((insertAfterVal) => {
|
|
21208
20725
|
const tracker = getSectionsTracker();
|
|
21209
20726
|
let entries = [];
|
|
21210
20727
|
try {
|
|
@@ -21227,7 +20744,7 @@ function OhhwellsBridge() {
|
|
|
21227
20744
|
}
|
|
21228
20745
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
21229
20746
|
}, [isEditMode]);
|
|
21230
|
-
const deactivate = (0,
|
|
20747
|
+
const deactivate = (0, import_react18.useCallback)(() => {
|
|
21231
20748
|
const el = activeElRef.current;
|
|
21232
20749
|
if (!el) return;
|
|
21233
20750
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -21278,12 +20795,12 @@ function OhhwellsBridge() {
|
|
|
21278
20795
|
setToolbarShowEditLink(false);
|
|
21279
20796
|
postToParent2({ type: "ow:exit-edit" });
|
|
21280
20797
|
}, [postToParent2]);
|
|
21281
|
-
const clearSelectedAttr = (0,
|
|
20798
|
+
const clearSelectedAttr = (0, import_react18.useCallback)(() => {
|
|
21282
20799
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
21283
20800
|
el.removeAttribute("data-ohw-selected");
|
|
21284
20801
|
});
|
|
21285
20802
|
}, []);
|
|
21286
|
-
const deselect = (0,
|
|
20803
|
+
const deselect = (0, import_react18.useCallback)(() => {
|
|
21287
20804
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
21288
20805
|
clearSelectedAttr();
|
|
21289
20806
|
selectedElRef.current = null;
|
|
@@ -21318,20 +20835,20 @@ function OhhwellsBridge() {
|
|
|
21318
20835
|
setToolbarVariant("none");
|
|
21319
20836
|
}
|
|
21320
20837
|
}, [clearSelectedAttr]);
|
|
21321
|
-
const markSelected = (0,
|
|
20838
|
+
const markSelected = (0, import_react18.useCallback)((el) => {
|
|
21322
20839
|
clearSelectedAttr();
|
|
21323
20840
|
el.removeAttribute("data-ohw-hovered");
|
|
21324
20841
|
el.setAttribute("data-ohw-selected", "");
|
|
21325
20842
|
}, [clearSelectedAttr]);
|
|
21326
|
-
const isSelectedForHover = (0,
|
|
20843
|
+
const isSelectedForHover = (0, import_react18.useCallback)((el) => {
|
|
21327
20844
|
if (!el) return false;
|
|
21328
20845
|
return [selectedElRef.current, activeElRef.current].some(
|
|
21329
20846
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
21330
20847
|
);
|
|
21331
20848
|
}, []);
|
|
21332
|
-
const isSelectedForHoverRef = (0,
|
|
20849
|
+
const isSelectedForHoverRef = (0, import_react18.useRef)(isSelectedForHover);
|
|
21333
20850
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
21334
|
-
const resolveHrefKeyElement = (0,
|
|
20851
|
+
const resolveHrefKeyElement = (0, import_react18.useCallback)((hrefKey) => {
|
|
21335
20852
|
if (isFooterHrefKey(hrefKey)) {
|
|
21336
20853
|
return document.querySelector(
|
|
21337
20854
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -21346,7 +20863,7 @@ function OhhwellsBridge() {
|
|
|
21346
20863
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
21347
20864
|
);
|
|
21348
20865
|
}, []);
|
|
21349
|
-
const resyncSelectedNavigationItem = (0,
|
|
20866
|
+
const resyncSelectedNavigationItem = (0, import_react18.useCallback)(() => {
|
|
21350
20867
|
const hrefKey = selectedHrefKeyRef.current;
|
|
21351
20868
|
if (hrefKey) {
|
|
21352
20869
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -21384,7 +20901,7 @@ function OhhwellsBridge() {
|
|
|
21384
20901
|
);
|
|
21385
20902
|
}
|
|
21386
20903
|
}, [resolveHrefKeyElement]);
|
|
21387
|
-
const reselectNavigationItem = (0,
|
|
20904
|
+
const reselectNavigationItem = (0, import_react18.useCallback)((navAnchor) => {
|
|
21388
20905
|
selectedElRef.current = navAnchor;
|
|
21389
20906
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
21390
20907
|
selectedFooterColAttrRef.current = null;
|
|
@@ -21415,7 +20932,7 @@ function OhhwellsBridge() {
|
|
|
21415
20932
|
setToolbarShowEditLink(false);
|
|
21416
20933
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
21417
20934
|
}, [markSelected]);
|
|
21418
|
-
const commitNavigationTextEdit = (0,
|
|
20935
|
+
const commitNavigationTextEdit = (0, import_react18.useCallback)((navAnchor) => {
|
|
21419
20936
|
const el = activeElRef.current;
|
|
21420
20937
|
if (!el) return;
|
|
21421
20938
|
const key = el.dataset.ohwKey;
|
|
@@ -21448,7 +20965,7 @@ function OhhwellsBridge() {
|
|
|
21448
20965
|
postToParent2({ type: "ow:exit-edit" });
|
|
21449
20966
|
reselectNavigationItem(navAnchor);
|
|
21450
20967
|
}, [postToParent2, reselectNavigationItem]);
|
|
21451
|
-
const handleAddTopLevelNavItem = (0,
|
|
20968
|
+
const handleAddTopLevelNavItem = (0, import_react18.useCallback)(() => {
|
|
21452
20969
|
const items = listNavbarRootItems();
|
|
21453
20970
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
21454
20971
|
deselectRef.current();
|
|
@@ -21460,7 +20977,7 @@ function OhhwellsBridge() {
|
|
|
21460
20977
|
intent: "add-nav"
|
|
21461
20978
|
});
|
|
21462
20979
|
}, []);
|
|
21463
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
20980
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react18.useCallback)(
|
|
21464
20981
|
(anchor) => {
|
|
21465
20982
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
21466
20983
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -21473,7 +20990,7 @@ function OhhwellsBridge() {
|
|
|
21473
20990
|
},
|
|
21474
20991
|
[postToParent2]
|
|
21475
20992
|
);
|
|
21476
|
-
const handleNavDropdownOpenChange = (0,
|
|
20993
|
+
const handleNavDropdownOpenChange = (0, import_react18.useCallback)((open) => {
|
|
21477
20994
|
const selected = selectedElRef.current;
|
|
21478
20995
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
21479
20996
|
if (isNestedNavChild(selected)) return;
|
|
@@ -21489,7 +21006,7 @@ function OhhwellsBridge() {
|
|
|
21489
21006
|
}
|
|
21490
21007
|
});
|
|
21491
21008
|
}, []);
|
|
21492
|
-
const handleFooterHeadingVisibleChange = (0,
|
|
21009
|
+
const handleFooterHeadingVisibleChange = (0, import_react18.useCallback)(
|
|
21493
21010
|
(visible) => {
|
|
21494
21011
|
const selected = selectedElRef.current;
|
|
21495
21012
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -21513,7 +21030,7 @@ function OhhwellsBridge() {
|
|
|
21513
21030
|
},
|
|
21514
21031
|
[postToParent2]
|
|
21515
21032
|
);
|
|
21516
|
-
const enterEditOnNewItem = (0,
|
|
21033
|
+
const enterEditOnNewItem = (0, import_react18.useCallback)((anchor) => {
|
|
21517
21034
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
21518
21035
|
if (!label) {
|
|
21519
21036
|
selectRef.current(anchor);
|
|
@@ -21522,8 +21039,8 @@ function OhhwellsBridge() {
|
|
|
21522
21039
|
setNavGroupForceOpen(anchor, true);
|
|
21523
21040
|
activateRef.current(label);
|
|
21524
21041
|
}, []);
|
|
21525
|
-
const pendingSocialAddRef = (0,
|
|
21526
|
-
const handleAddChildItem = (0,
|
|
21042
|
+
const pendingSocialAddRef = (0, import_react18.useRef)(null);
|
|
21043
|
+
const handleAddChildItem = (0, import_react18.useCallback)(() => {
|
|
21527
21044
|
const selected = selectedElRef.current;
|
|
21528
21045
|
if (!selected) return;
|
|
21529
21046
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -21634,7 +21151,7 @@ function OhhwellsBridge() {
|
|
|
21634
21151
|
});
|
|
21635
21152
|
});
|
|
21636
21153
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
21637
|
-
const handleAddFooterColumn = (0,
|
|
21154
|
+
const handleAddFooterColumn = (0, import_react18.useCallback)(() => {
|
|
21638
21155
|
if (!canAddFooterColumn()) {
|
|
21639
21156
|
postToParent2({
|
|
21640
21157
|
type: "ow:toast",
|
|
@@ -21655,7 +21172,7 @@ function OhhwellsBridge() {
|
|
|
21655
21172
|
selectRef.current(result.firstLink);
|
|
21656
21173
|
});
|
|
21657
21174
|
}, [postToParent2]);
|
|
21658
|
-
const clearFooterDragVisuals = (0,
|
|
21175
|
+
const clearFooterDragVisuals = (0, import_react18.useCallback)(() => {
|
|
21659
21176
|
footerDragRef.current = null;
|
|
21660
21177
|
setSiblingHintRects([]);
|
|
21661
21178
|
setFooterDropSlots([]);
|
|
@@ -21664,7 +21181,7 @@ function OhhwellsBridge() {
|
|
|
21664
21181
|
setIsItemDragging(false);
|
|
21665
21182
|
unlockFooterDragInteraction();
|
|
21666
21183
|
}, []);
|
|
21667
|
-
const refreshFooterDragVisuals = (0,
|
|
21184
|
+
const refreshFooterDragVisuals = (0, import_react18.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
21668
21185
|
const dragged = session.draggedEl;
|
|
21669
21186
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
21670
21187
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -21696,13 +21213,13 @@ function OhhwellsBridge() {
|
|
|
21696
21213
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
21697
21214
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
21698
21215
|
}, []);
|
|
21699
|
-
const refreshFooterDragVisualsRef = (0,
|
|
21216
|
+
const refreshFooterDragVisualsRef = (0, import_react18.useRef)(refreshFooterDragVisuals);
|
|
21700
21217
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
21701
|
-
const commitFooterDragRef = (0,
|
|
21218
|
+
const commitFooterDragRef = (0, import_react18.useRef)(() => {
|
|
21702
21219
|
});
|
|
21703
|
-
const beginFooterDragRef = (0,
|
|
21220
|
+
const beginFooterDragRef = (0, import_react18.useRef)(() => {
|
|
21704
21221
|
});
|
|
21705
|
-
const beginFooterDrag = (0,
|
|
21222
|
+
const beginFooterDrag = (0, import_react18.useCallback)(
|
|
21706
21223
|
(session) => {
|
|
21707
21224
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
21708
21225
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -21722,7 +21239,7 @@ function OhhwellsBridge() {
|
|
|
21722
21239
|
[refreshFooterDragVisuals]
|
|
21723
21240
|
);
|
|
21724
21241
|
beginFooterDragRef.current = beginFooterDrag;
|
|
21725
|
-
const commitFooterDrag = (0,
|
|
21242
|
+
const commitFooterDrag = (0, import_react18.useCallback)(
|
|
21726
21243
|
(clientX, clientY) => {
|
|
21727
21244
|
const session = footerDragRef.current;
|
|
21728
21245
|
if (!session) {
|
|
@@ -21851,7 +21368,7 @@ function OhhwellsBridge() {
|
|
|
21851
21368
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
21852
21369
|
);
|
|
21853
21370
|
commitFooterDragRef.current = commitFooterDrag;
|
|
21854
|
-
const startFooterLinkDrag = (0,
|
|
21371
|
+
const startFooterLinkDrag = (0, import_react18.useCallback)(
|
|
21855
21372
|
(anchor, clientX, clientY, wasSelected) => {
|
|
21856
21373
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
21857
21374
|
if (!hrefKey) return false;
|
|
@@ -21887,7 +21404,7 @@ function OhhwellsBridge() {
|
|
|
21887
21404
|
},
|
|
21888
21405
|
[beginFooterDrag]
|
|
21889
21406
|
);
|
|
21890
|
-
const startFooterColumnDrag = (0,
|
|
21407
|
+
const startFooterColumnDrag = (0, import_react18.useCallback)(
|
|
21891
21408
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
21892
21409
|
const columns = listFooterColumns();
|
|
21893
21410
|
const idx = columns.indexOf(columnEl);
|
|
@@ -21907,7 +21424,7 @@ function OhhwellsBridge() {
|
|
|
21907
21424
|
},
|
|
21908
21425
|
[beginFooterDrag]
|
|
21909
21426
|
);
|
|
21910
|
-
const persistButtonCollectionDrag = (0,
|
|
21427
|
+
const persistButtonCollectionDrag = (0, import_react18.useCallback)(
|
|
21911
21428
|
(button, clientX) => {
|
|
21912
21429
|
const insertIndex = buttonDropInsertIndexRef.current;
|
|
21913
21430
|
if (insertIndex != null) insertButtonAtCollectionIndex(button, insertIndex);
|
|
@@ -21931,7 +21448,7 @@ function OhhwellsBridge() {
|
|
|
21931
21448
|
},
|
|
21932
21449
|
[postToParent2]
|
|
21933
21450
|
);
|
|
21934
|
-
const refreshButtonDragVisuals = (0,
|
|
21451
|
+
const refreshButtonDragVisuals = (0, import_react18.useCallback)((button, clientX, clientY) => {
|
|
21935
21452
|
const collection = buttonCollectionOf(button);
|
|
21936
21453
|
if (!collection) {
|
|
21937
21454
|
setButtonDropSlots([]);
|
|
@@ -21948,7 +21465,7 @@ function OhhwellsBridge() {
|
|
|
21948
21465
|
setDraggedItemRect(button.getBoundingClientRect());
|
|
21949
21466
|
if (selectedElRef.current === button) setToolbarRect(button.getBoundingClientRect());
|
|
21950
21467
|
}, []);
|
|
21951
|
-
const handleItemDragStart = (0,
|
|
21468
|
+
const handleItemDragStart = (0, import_react18.useCallback)(
|
|
21952
21469
|
(e) => {
|
|
21953
21470
|
const selected = selectedElRef.current;
|
|
21954
21471
|
if (!selected) {
|
|
@@ -21979,7 +21496,7 @@ function OhhwellsBridge() {
|
|
|
21979
21496
|
},
|
|
21980
21497
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag, refreshButtonDragVisuals]
|
|
21981
21498
|
);
|
|
21982
|
-
const handleItemDragEnd = (0,
|
|
21499
|
+
const handleItemDragEnd = (0, import_react18.useCallback)(
|
|
21983
21500
|
(e) => {
|
|
21984
21501
|
const collectionButton = buttonCollectionDragRef.current;
|
|
21985
21502
|
if (collectionButton) {
|
|
@@ -22010,7 +21527,7 @@ function OhhwellsBridge() {
|
|
|
22010
21527
|
},
|
|
22011
21528
|
[commitFooterDrag, commitNavDrag, navDragRef, persistButtonCollectionDrag]
|
|
22012
21529
|
);
|
|
22013
|
-
const handleItemChromePointerDown = (0,
|
|
21530
|
+
const handleItemChromePointerDown = (0, import_react18.useCallback)((e) => {
|
|
22014
21531
|
if (e.button !== 0) return;
|
|
22015
21532
|
const selected = selectedElRef.current;
|
|
22016
21533
|
if (!selected) return;
|
|
@@ -22051,7 +21568,7 @@ function OhhwellsBridge() {
|
|
|
22051
21568
|
}
|
|
22052
21569
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
22053
21570
|
}, [armNavPressFromChrome]);
|
|
22054
|
-
const handleItemChromeClick = (0,
|
|
21571
|
+
const handleItemChromeClick = (0, import_react18.useCallback)((clientX, clientY) => {
|
|
22055
21572
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
22056
21573
|
suppressNextClickRef.current = false;
|
|
22057
21574
|
return;
|
|
@@ -22064,7 +21581,7 @@ function OhhwellsBridge() {
|
|
|
22064
21581
|
}, []);
|
|
22065
21582
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
22066
21583
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
22067
|
-
const select = (0,
|
|
21584
|
+
const select = (0, import_react18.useCallback)((anchor) => {
|
|
22068
21585
|
if (!isNavigationItem2(anchor)) return;
|
|
22069
21586
|
if (activeElRef.current) deactivate();
|
|
22070
21587
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -22124,7 +21641,7 @@ function OhhwellsBridge() {
|
|
|
22124
21641
|
setLogoSizeDraft(null);
|
|
22125
21642
|
}
|
|
22126
21643
|
}, [deactivate, markSelected]);
|
|
22127
|
-
const selectFrame = (0,
|
|
21644
|
+
const selectFrame = (0, import_react18.useCallback)((el) => {
|
|
22128
21645
|
if (!isNavigationContainer(el)) return;
|
|
22129
21646
|
if (activeElRef.current) deactivate();
|
|
22130
21647
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -22165,7 +21682,7 @@ function OhhwellsBridge() {
|
|
|
22165
21682
|
setFloatingPanelPos(null);
|
|
22166
21683
|
setLogoSizeDraft(null);
|
|
22167
21684
|
}, [deactivate, markSelected, postToParent2]);
|
|
22168
|
-
const selectLogo = (0,
|
|
21685
|
+
const selectLogo = (0, import_react18.useCallback)(
|
|
22169
21686
|
(logoEl) => {
|
|
22170
21687
|
if (activeElRef.current) deactivate();
|
|
22171
21688
|
selectedElRef.current = logoEl;
|
|
@@ -22194,7 +21711,7 @@ function OhhwellsBridge() {
|
|
|
22194
21711
|
},
|
|
22195
21712
|
[deactivate, markSelected]
|
|
22196
21713
|
);
|
|
22197
|
-
const openLogoSizePanel = (0,
|
|
21714
|
+
const openLogoSizePanel = (0, import_react18.useCallback)((logoEl) => {
|
|
22198
21715
|
const placement = getLogoPlacement(logoEl);
|
|
22199
21716
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
22200
21717
|
setLogoSizeDraft(draft);
|
|
@@ -22207,7 +21724,7 @@ function OhhwellsBridge() {
|
|
|
22207
21724
|
placement
|
|
22208
21725
|
});
|
|
22209
21726
|
}, []);
|
|
22210
|
-
const openSocialsDisplayPanel = (0,
|
|
21727
|
+
const openSocialsDisplayPanel = (0, import_react18.useCallback)((row) => {
|
|
22211
21728
|
setParentScrollSnap(parentScrollRef.current);
|
|
22212
21729
|
setFloatingPanel({
|
|
22213
21730
|
key: "socials-display",
|
|
@@ -22217,7 +21734,7 @@ function OhhwellsBridge() {
|
|
|
22217
21734
|
row
|
|
22218
21735
|
});
|
|
22219
21736
|
}, []);
|
|
22220
|
-
const rememberButtonTokens = (0,
|
|
21737
|
+
const rememberButtonTokens = (0, import_react18.useCallback)(
|
|
22221
21738
|
(content, tokens, nodes) => {
|
|
22222
21739
|
if (nodes.length === 0) return content;
|
|
22223
21740
|
const next = { ...content };
|
|
@@ -22228,7 +21745,7 @@ function OhhwellsBridge() {
|
|
|
22228
21745
|
},
|
|
22229
21746
|
[postToParent2]
|
|
22230
21747
|
);
|
|
22231
|
-
const tokensForButton = (0,
|
|
21748
|
+
const tokensForButton = (0, import_react18.useCallback)(
|
|
22232
21749
|
(el, persistFallback = false) => {
|
|
22233
21750
|
const stored = readStoredStyleTokens(editContentRef.current);
|
|
22234
21751
|
if (stored) return stored;
|
|
@@ -22243,7 +21760,7 @@ function OhhwellsBridge() {
|
|
|
22243
21760
|
},
|
|
22244
21761
|
[rememberButtonTokens]
|
|
22245
21762
|
);
|
|
22246
|
-
const openButtonStylePanel = (0,
|
|
21763
|
+
const openButtonStylePanel = (0, import_react18.useCallback)(
|
|
22247
21764
|
(anchor) => {
|
|
22248
21765
|
const id = buttonId(anchor);
|
|
22249
21766
|
if (!id) return;
|
|
@@ -22261,7 +21778,7 @@ function OhhwellsBridge() {
|
|
|
22261
21778
|
},
|
|
22262
21779
|
[tokensForButton]
|
|
22263
21780
|
);
|
|
22264
|
-
const applySelectedButtonStyle = (0,
|
|
21781
|
+
const applySelectedButtonStyle = (0, import_react18.useCallback)(
|
|
22265
21782
|
(patch) => {
|
|
22266
21783
|
const panel = floatingPanelRef.current;
|
|
22267
21784
|
const id = panel?.kind === "button-style" ? panel.buttonId : null;
|
|
@@ -22279,7 +21796,7 @@ function OhhwellsBridge() {
|
|
|
22279
21796
|
},
|
|
22280
21797
|
[postToParent2]
|
|
22281
21798
|
);
|
|
22282
|
-
(0,
|
|
21799
|
+
(0, import_react18.useEffect)(() => {
|
|
22283
21800
|
const onDragOver = (e) => {
|
|
22284
21801
|
const dragged = buttonCollectionDragRef.current;
|
|
22285
21802
|
if (!dragged) return;
|
|
@@ -22298,11 +21815,11 @@ function OhhwellsBridge() {
|
|
|
22298
21815
|
document.removeEventListener("drop", onDrop);
|
|
22299
21816
|
};
|
|
22300
21817
|
}, [refreshButtonDragVisuals]);
|
|
22301
|
-
const isEditModeRef = (0,
|
|
22302
|
-
const requestMissingSocialIconsRef = (0,
|
|
21818
|
+
const isEditModeRef = (0, import_react18.useRef)(false);
|
|
21819
|
+
const requestMissingSocialIconsRef = (0, import_react18.useRef)(() => {
|
|
22303
21820
|
});
|
|
22304
|
-
const askedSocialIconsRef = (0,
|
|
22305
|
-
const requestMissingSocialIcons = (0,
|
|
21821
|
+
const askedSocialIconsRef = (0, import_react18.useRef)(/* @__PURE__ */ new Set());
|
|
21822
|
+
const requestMissingSocialIcons = (0, import_react18.useCallback)(() => {
|
|
22306
21823
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
22307
21824
|
const missing = socialsMissingIcons(row);
|
|
22308
21825
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -22314,7 +21831,7 @@ function OhhwellsBridge() {
|
|
|
22314
21831
|
}, []);
|
|
22315
21832
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
22316
21833
|
isEditModeRef.current = isEditMode;
|
|
22317
|
-
const changeSocialsDisplay = (0,
|
|
21834
|
+
const changeSocialsDisplay = (0, import_react18.useCallback)(
|
|
22318
21835
|
(row, next) => {
|
|
22319
21836
|
if (next.icon) {
|
|
22320
21837
|
const missing = socialsMissingIcons(row);
|
|
@@ -22338,19 +21855,19 @@ function OhhwellsBridge() {
|
|
|
22338
21855
|
},
|
|
22339
21856
|
[]
|
|
22340
21857
|
);
|
|
22341
|
-
const closeFloatingPanelOnly = (0,
|
|
21858
|
+
const closeFloatingPanelOnly = (0, import_react18.useCallback)(() => {
|
|
22342
21859
|
setFloatingPanel(null);
|
|
22343
21860
|
setFloatingPanelPos(null);
|
|
22344
21861
|
setLogoSizeDraft(null);
|
|
22345
21862
|
}, []);
|
|
22346
21863
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22347
|
-
const closeFloatingPanelAndDeselect = (0,
|
|
21864
|
+
const closeFloatingPanelAndDeselect = (0, import_react18.useCallback)(() => {
|
|
22348
21865
|
setFloatingPanel(null);
|
|
22349
21866
|
setFloatingPanelPos(null);
|
|
22350
21867
|
setLogoSizeDraft(null);
|
|
22351
21868
|
deselectRef.current();
|
|
22352
21869
|
}, []);
|
|
22353
|
-
(0,
|
|
21870
|
+
(0, import_react18.useEffect)(() => {
|
|
22354
21871
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
22355
21872
|
if (!session || !logoSizeDraft) {
|
|
22356
21873
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -22369,7 +21886,7 @@ function OhhwellsBridge() {
|
|
|
22369
21886
|
max: LOGO_SIZE_MAX
|
|
22370
21887
|
});
|
|
22371
21888
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
22372
|
-
const persistLogoSizeDraft = (0,
|
|
21889
|
+
const persistLogoSizeDraft = (0, import_react18.useCallback)(
|
|
22373
21890
|
(placement, draft) => {
|
|
22374
21891
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
22375
21892
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -22409,7 +21926,7 @@ function OhhwellsBridge() {
|
|
|
22409
21926
|
},
|
|
22410
21927
|
[postToParent2]
|
|
22411
21928
|
);
|
|
22412
|
-
const activate = (0,
|
|
21929
|
+
const activate = (0, import_react18.useCallback)((el, options) => {
|
|
22413
21930
|
if (activeElRef.current === el) return;
|
|
22414
21931
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
22415
21932
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -22507,8 +22024,8 @@ function OhhwellsBridge() {
|
|
|
22507
22024
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
22508
22025
|
deselectRef.current = deselect;
|
|
22509
22026
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22510
|
-
const lastSiteWideScopeRef = (0,
|
|
22511
|
-
(0,
|
|
22027
|
+
const lastSiteWideScopeRef = (0, import_react18.useRef)(null);
|
|
22028
|
+
(0, import_react18.useEffect)(() => {
|
|
22512
22029
|
if (!isEditMode) {
|
|
22513
22030
|
if (lastSiteWideScopeRef.current !== false) {
|
|
22514
22031
|
lastSiteWideScopeRef.current = false;
|
|
@@ -22534,7 +22051,7 @@ function OhhwellsBridge() {
|
|
|
22534
22051
|
isFooterFrameSelection,
|
|
22535
22052
|
postToParent2
|
|
22536
22053
|
]);
|
|
22537
|
-
(0,
|
|
22054
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
22538
22055
|
if (!subdomain || isEditMode) {
|
|
22539
22056
|
setFetchState("done");
|
|
22540
22057
|
return;
|
|
@@ -22657,7 +22174,7 @@ function OhhwellsBridge() {
|
|
|
22657
22174
|
cancelled = true;
|
|
22658
22175
|
};
|
|
22659
22176
|
}, [subdomain, isEditMode]);
|
|
22660
|
-
(0,
|
|
22177
|
+
(0, import_react18.useEffect)(() => {
|
|
22661
22178
|
if (!isEditMode) return;
|
|
22662
22179
|
const resolveIndex = (form, clientY) => {
|
|
22663
22180
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -22698,7 +22215,7 @@ function OhhwellsBridge() {
|
|
|
22698
22215
|
window.removeEventListener("drop", onDrop, true);
|
|
22699
22216
|
};
|
|
22700
22217
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
22701
|
-
(0,
|
|
22218
|
+
(0, import_react18.useEffect)(() => {
|
|
22702
22219
|
if (!isEditMode) return;
|
|
22703
22220
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
22704
22221
|
markFormFields(form);
|
|
@@ -22710,7 +22227,7 @@ function OhhwellsBridge() {
|
|
|
22710
22227
|
});
|
|
22711
22228
|
return () => observer.disconnect();
|
|
22712
22229
|
}, [isEditMode, fetchState, pathname]);
|
|
22713
|
-
(0,
|
|
22230
|
+
(0, import_react18.useEffect)(() => {
|
|
22714
22231
|
if (!isEditMode) return;
|
|
22715
22232
|
let saveTimer = null;
|
|
22716
22233
|
const onInput = (e) => {
|
|
@@ -22732,14 +22249,14 @@ function OhhwellsBridge() {
|
|
|
22732
22249
|
document.addEventListener("input", onInput, true);
|
|
22733
22250
|
return () => document.removeEventListener("input", onInput, true);
|
|
22734
22251
|
}, [isEditMode, persistFields]);
|
|
22735
|
-
(0,
|
|
22252
|
+
(0, import_react18.useEffect)(() => {
|
|
22736
22253
|
if (isEditMode || fetchState !== "done") return;
|
|
22737
22254
|
const content = contentCache.get(subdomain) ?? {};
|
|
22738
22255
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
22739
22256
|
reconcileFieldsFromContent(form, content);
|
|
22740
22257
|
});
|
|
22741
22258
|
}, [isEditMode, fetchState, subdomain]);
|
|
22742
|
-
(0,
|
|
22259
|
+
(0, import_react18.useEffect)(() => {
|
|
22743
22260
|
if (!isEditMode) return;
|
|
22744
22261
|
const swallow = (e) => {
|
|
22745
22262
|
const target = e.target;
|
|
@@ -22748,14 +22265,14 @@ function OhhwellsBridge() {
|
|
|
22748
22265
|
document.addEventListener("submit", swallow, true);
|
|
22749
22266
|
return () => document.removeEventListener("submit", swallow, true);
|
|
22750
22267
|
}, [isEditMode]);
|
|
22751
|
-
(0,
|
|
22268
|
+
(0, import_react18.useEffect)(() => {
|
|
22752
22269
|
if (isEditMode || fetchState !== "done") return;
|
|
22753
22270
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
22754
22271
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
22755
22272
|
console.log({ apiUrl, subdomain });
|
|
22756
22273
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
22757
22274
|
}, [isEditMode, fetchState, subdomain]);
|
|
22758
|
-
(0,
|
|
22275
|
+
(0, import_react18.useEffect)(() => {
|
|
22759
22276
|
if (!subdomain || isEditMode) return;
|
|
22760
22277
|
let debounceTimer = null;
|
|
22761
22278
|
let observer = null;
|
|
@@ -22857,16 +22374,16 @@ function OhhwellsBridge() {
|
|
|
22857
22374
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
22858
22375
|
};
|
|
22859
22376
|
}, [subdomain, isEditMode, pathname]);
|
|
22860
|
-
(0,
|
|
22377
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
22861
22378
|
const el = document.getElementById("ohw-loader");
|
|
22862
22379
|
if (!el) return;
|
|
22863
22380
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
22864
22381
|
el.style.display = visible ? "flex" : "none";
|
|
22865
22382
|
}, [subdomain, fetchState]);
|
|
22866
|
-
(0,
|
|
22383
|
+
(0, import_react18.useEffect)(() => {
|
|
22867
22384
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
22868
22385
|
}, [pathname, postToParent2]);
|
|
22869
|
-
(0,
|
|
22386
|
+
(0, import_react18.useEffect)(() => {
|
|
22870
22387
|
if (!subdomain || isEditMode) return;
|
|
22871
22388
|
const content = contentCache.get(subdomain);
|
|
22872
22389
|
if (!content) return;
|
|
@@ -22882,7 +22399,7 @@ function OhhwellsBridge() {
|
|
|
22882
22399
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
22883
22400
|
}
|
|
22884
22401
|
}, [pathname, subdomain, isEditMode]);
|
|
22885
|
-
(0,
|
|
22402
|
+
(0, import_react18.useEffect)(() => {
|
|
22886
22403
|
if (!isEditMode) return;
|
|
22887
22404
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
22888
22405
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -22890,11 +22407,11 @@ function OhhwellsBridge() {
|
|
|
22890
22407
|
deselectRef.current();
|
|
22891
22408
|
deactivateRef.current();
|
|
22892
22409
|
}, [pathname, isEditMode]);
|
|
22893
|
-
(0,
|
|
22410
|
+
(0, import_react18.useEffect)(() => {
|
|
22894
22411
|
if (!isEditMode) return;
|
|
22895
22412
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
22896
22413
|
}, [pathname, isEditMode]);
|
|
22897
|
-
(0,
|
|
22414
|
+
(0, import_react18.useEffect)(() => {
|
|
22898
22415
|
if (!isEditMode) return;
|
|
22899
22416
|
const observer = new MutationObserver(() => {
|
|
22900
22417
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -22905,7 +22422,7 @@ function OhhwellsBridge() {
|
|
|
22905
22422
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
22906
22423
|
return () => observer.disconnect();
|
|
22907
22424
|
}, [isEditMode, pathname]);
|
|
22908
|
-
(0,
|
|
22425
|
+
(0, import_react18.useEffect)(() => {
|
|
22909
22426
|
const contentForNav = () => {
|
|
22910
22427
|
if (isEditMode) return editContentRef.current;
|
|
22911
22428
|
if (!subdomain) return {};
|
|
@@ -22978,7 +22495,7 @@ function OhhwellsBridge() {
|
|
|
22978
22495
|
observer?.disconnect();
|
|
22979
22496
|
};
|
|
22980
22497
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
22981
|
-
(0,
|
|
22498
|
+
(0, import_react18.useEffect)(() => {
|
|
22982
22499
|
if (!isEditMode) return;
|
|
22983
22500
|
let applying = false;
|
|
22984
22501
|
let rafId = null;
|
|
@@ -23016,7 +22533,7 @@ function OhhwellsBridge() {
|
|
|
23016
22533
|
observer.disconnect();
|
|
23017
22534
|
};
|
|
23018
22535
|
}, [isEditMode, pathname]);
|
|
23019
|
-
(0,
|
|
22536
|
+
(0, import_react18.useEffect)(() => {
|
|
23020
22537
|
if (!isEditMode) return;
|
|
23021
22538
|
let lastPosted = 0;
|
|
23022
22539
|
const measure = () => {
|
|
@@ -23045,7 +22562,7 @@ function OhhwellsBridge() {
|
|
|
23045
22562
|
ro.disconnect();
|
|
23046
22563
|
};
|
|
23047
22564
|
}, [pathname, isEditMode, postToParent2]);
|
|
23048
|
-
(0,
|
|
22565
|
+
(0, import_react18.useEffect)(() => {
|
|
23049
22566
|
if (!subdomainFromQuery || isEditMode) return;
|
|
23050
22567
|
const handleClick = (e) => {
|
|
23051
22568
|
const anchor = e.target.closest("a");
|
|
@@ -23061,7 +22578,7 @@ function OhhwellsBridge() {
|
|
|
23061
22578
|
document.addEventListener("click", handleClick, true);
|
|
23062
22579
|
return () => document.removeEventListener("click", handleClick, true);
|
|
23063
22580
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
23064
|
-
(0,
|
|
22581
|
+
(0, import_react18.useEffect)(() => {
|
|
23065
22582
|
if (!isEditMode) {
|
|
23066
22583
|
editStylesRef.current?.base.remove();
|
|
23067
22584
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -23287,11 +22804,11 @@ function OhhwellsBridge() {
|
|
|
23287
22804
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
23288
22805
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
23289
22806
|
outline: none !important;
|
|
23290
|
-
caret-color: ${
|
|
22807
|
+
caret-color: ${PRIMARY4} !important;
|
|
23291
22808
|
cursor: text !important;
|
|
23292
22809
|
}
|
|
23293
22810
|
[data-ohw-editable][contenteditable]::selection,
|
|
23294
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
22811
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY4}59 !important; }
|
|
23295
22812
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
23296
22813
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
23297
22814
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -26174,7 +25691,7 @@ function OhhwellsBridge() {
|
|
|
26174
25691
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
26175
25692
|
};
|
|
26176
25693
|
}, [isEditMode, refreshStateRules]);
|
|
26177
|
-
(0,
|
|
25694
|
+
(0, import_react18.useEffect)(() => {
|
|
26178
25695
|
if (!isEditMode) return;
|
|
26179
25696
|
const THRESHOLD = 10;
|
|
26180
25697
|
const resolveWasSelected = (el) => {
|
|
@@ -26330,7 +25847,7 @@ function OhhwellsBridge() {
|
|
|
26330
25847
|
unlockFooterDragInteraction();
|
|
26331
25848
|
};
|
|
26332
25849
|
}, [isEditMode]);
|
|
26333
|
-
(0,
|
|
25850
|
+
(0, import_react18.useEffect)(() => {
|
|
26334
25851
|
if (!isEditMode) return;
|
|
26335
25852
|
const THRESHOLD = 10;
|
|
26336
25853
|
const onPointerDown = (e) => {
|
|
@@ -26421,7 +25938,7 @@ function OhhwellsBridge() {
|
|
|
26421
25938
|
document.removeEventListener("selectstart", blockSelectStart, true);
|
|
26422
25939
|
};
|
|
26423
25940
|
}, [isEditMode, persistButtonCollectionDrag, refreshButtonDragVisuals]);
|
|
26424
|
-
(0,
|
|
25941
|
+
(0, import_react18.useEffect)(() => {
|
|
26425
25942
|
const handler = (e) => {
|
|
26426
25943
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
26427
25944
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -26437,7 +25954,7 @@ function OhhwellsBridge() {
|
|
|
26437
25954
|
window.addEventListener("message", handler);
|
|
26438
25955
|
return () => window.removeEventListener("message", handler);
|
|
26439
25956
|
}, [processConfigRequest]);
|
|
26440
|
-
(0,
|
|
25957
|
+
(0, import_react18.useEffect)(() => {
|
|
26441
25958
|
if (!isEditMode) return;
|
|
26442
25959
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
26443
25960
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -26473,13 +25990,13 @@ function OhhwellsBridge() {
|
|
|
26473
25990
|
clearTimeout(timer);
|
|
26474
25991
|
};
|
|
26475
25992
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
26476
|
-
(0,
|
|
25993
|
+
(0, import_react18.useEffect)(() => {
|
|
26477
25994
|
scrollToHashSectionWhenReady();
|
|
26478
25995
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
26479
25996
|
window.addEventListener("hashchange", onHashChange);
|
|
26480
25997
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
26481
25998
|
}, [pathname]);
|
|
26482
|
-
const handleCommand = (0,
|
|
25999
|
+
const handleCommand = (0, import_react18.useCallback)((cmd) => {
|
|
26483
26000
|
const el = activeElRef.current;
|
|
26484
26001
|
const selBefore = window.getSelection();
|
|
26485
26002
|
let savedOffsets = null;
|
|
@@ -26515,7 +26032,7 @@ function OhhwellsBridge() {
|
|
|
26515
26032
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
26516
26033
|
refreshActiveCommandsRef.current();
|
|
26517
26034
|
}, []);
|
|
26518
|
-
(0,
|
|
26035
|
+
(0, import_react18.useEffect)(() => {
|
|
26519
26036
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
26520
26037
|
if (!session || !logoSizeDraft) return;
|
|
26521
26038
|
const onPanelAction = (e) => {
|
|
@@ -26553,7 +26070,7 @@ function OhhwellsBridge() {
|
|
|
26553
26070
|
window.addEventListener("message", onPanelAction);
|
|
26554
26071
|
return () => window.removeEventListener("message", onPanelAction);
|
|
26555
26072
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
26556
|
-
const handleStateChange = (0,
|
|
26073
|
+
const handleStateChange = (0, import_react18.useCallback)((state) => {
|
|
26557
26074
|
if (!activeStateElRef.current) return;
|
|
26558
26075
|
const el = activeStateElRef.current;
|
|
26559
26076
|
if (state === "Default") {
|
|
@@ -26566,7 +26083,7 @@ function OhhwellsBridge() {
|
|
|
26566
26083
|
}
|
|
26567
26084
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
26568
26085
|
}, [deactivate]);
|
|
26569
|
-
const reselectAfterLinkPopover = (0,
|
|
26086
|
+
const reselectAfterLinkPopover = (0, import_react18.useCallback)(
|
|
26570
26087
|
(hrefKey) => {
|
|
26571
26088
|
requestAnimationFrame(() => {
|
|
26572
26089
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -26575,7 +26092,7 @@ function OhhwellsBridge() {
|
|
|
26575
26092
|
},
|
|
26576
26093
|
[resolveHrefKeyElement]
|
|
26577
26094
|
);
|
|
26578
|
-
const closeLinkPopover = (0,
|
|
26095
|
+
const closeLinkPopover = (0, import_react18.useCallback)(() => {
|
|
26579
26096
|
const session = linkPopoverSessionRef.current;
|
|
26580
26097
|
addNavAfterAnchorRef.current = null;
|
|
26581
26098
|
setLinkPopover(null);
|
|
@@ -26583,9 +26100,9 @@ function OhhwellsBridge() {
|
|
|
26583
26100
|
reselectAfterLinkPopover(session.key);
|
|
26584
26101
|
}
|
|
26585
26102
|
}, [reselectAfterLinkPopover]);
|
|
26586
|
-
const closeLinkPopoverRef = (0,
|
|
26103
|
+
const closeLinkPopoverRef = (0, import_react18.useRef)(closeLinkPopover);
|
|
26587
26104
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
26588
|
-
const openLinkPopoverForActive = (0,
|
|
26105
|
+
const openLinkPopoverForActive = (0, import_react18.useCallback)(() => {
|
|
26589
26106
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
26590
26107
|
if (!hrefCtx) return;
|
|
26591
26108
|
bumpLinkPopoverGrace();
|
|
@@ -26596,7 +26113,7 @@ function OhhwellsBridge() {
|
|
|
26596
26113
|
});
|
|
26597
26114
|
deactivate();
|
|
26598
26115
|
}, [deactivate]);
|
|
26599
|
-
const openLinkPopoverForSelected = (0,
|
|
26116
|
+
const openLinkPopoverForSelected = (0, import_react18.useCallback)(() => {
|
|
26600
26117
|
const anchor = selectedElRef.current;
|
|
26601
26118
|
if (!anchor) return;
|
|
26602
26119
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -26613,7 +26130,7 @@ function OhhwellsBridge() {
|
|
|
26613
26130
|
});
|
|
26614
26131
|
deselect();
|
|
26615
26132
|
}, [deselect]);
|
|
26616
|
-
const handleSelectParent = (0,
|
|
26133
|
+
const handleSelectParent = (0, import_react18.useCallback)(() => {
|
|
26617
26134
|
const selected = selectedElRef.current;
|
|
26618
26135
|
if (!selected) return;
|
|
26619
26136
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -26640,7 +26157,7 @@ function OhhwellsBridge() {
|
|
|
26640
26157
|
}
|
|
26641
26158
|
deselectRef.current();
|
|
26642
26159
|
}, []);
|
|
26643
|
-
const handleDuplicateSelected = (0,
|
|
26160
|
+
const handleDuplicateSelected = (0, import_react18.useCallback)(() => {
|
|
26644
26161
|
const selected = selectedElRef.current;
|
|
26645
26162
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
26646
26163
|
if (isCtaButton(selected)) {
|
|
@@ -26803,7 +26320,7 @@ function OhhwellsBridge() {
|
|
|
26803
26320
|
});
|
|
26804
26321
|
}
|
|
26805
26322
|
}, [postToParent2, tokensForButton]);
|
|
26806
|
-
const runPendingDeleteUndo = (0,
|
|
26323
|
+
const runPendingDeleteUndo = (0, import_react18.useCallback)(() => {
|
|
26807
26324
|
const pending = pendingDeleteUndoRef.current;
|
|
26808
26325
|
if (!pending) return false;
|
|
26809
26326
|
pendingDeleteUndoRef.current = null;
|
|
@@ -26811,7 +26328,7 @@ function OhhwellsBridge() {
|
|
|
26811
26328
|
enforceLinkHrefs();
|
|
26812
26329
|
return true;
|
|
26813
26330
|
}, []);
|
|
26814
|
-
const handleDeleteSelected = (0,
|
|
26331
|
+
const handleDeleteSelected = (0, import_react18.useCallback)(() => {
|
|
26815
26332
|
const selected = selectedElRef.current;
|
|
26816
26333
|
if (!selected) return false;
|
|
26817
26334
|
if (isCtaButton(selected)) {
|
|
@@ -26864,7 +26381,7 @@ function OhhwellsBridge() {
|
|
|
26864
26381
|
}, [postToParent2]);
|
|
26865
26382
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
26866
26383
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
26867
|
-
const handleLinkPopoverSubmit = (0,
|
|
26384
|
+
const handleLinkPopoverSubmit = (0, import_react18.useCallback)(
|
|
26868
26385
|
(target) => {
|
|
26869
26386
|
const session = linkPopoverSessionRef.current;
|
|
26870
26387
|
if (!session) return;
|
|
@@ -26930,14 +26447,14 @@ function OhhwellsBridge() {
|
|
|
26930
26447
|
const showEditLink = toolbarShowEditLink;
|
|
26931
26448
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
26932
26449
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
26933
|
-
const handleMediaSelect = (0,
|
|
26450
|
+
const handleMediaSelect = (0, import_react18.useCallback)((key) => {
|
|
26934
26451
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
26935
26452
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
26936
26453
|
) ?? null;
|
|
26937
26454
|
if (!el) return;
|
|
26938
26455
|
selectMediaElementRef.current(el);
|
|
26939
26456
|
}, []);
|
|
26940
|
-
const handleMediaReplace = (0,
|
|
26457
|
+
const handleMediaReplace = (0, import_react18.useCallback)(
|
|
26941
26458
|
(key) => {
|
|
26942
26459
|
postToParent2({
|
|
26943
26460
|
type: "ow:image-pick",
|
|
@@ -26947,13 +26464,13 @@ function OhhwellsBridge() {
|
|
|
26947
26464
|
},
|
|
26948
26465
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
26949
26466
|
);
|
|
26950
|
-
const handleEditCarousel = (0,
|
|
26467
|
+
const handleEditCarousel = (0, import_react18.useCallback)(
|
|
26951
26468
|
(key) => {
|
|
26952
26469
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
26953
26470
|
},
|
|
26954
26471
|
[postToParent2]
|
|
26955
26472
|
);
|
|
26956
|
-
const handleMediaFadeOutComplete = (0,
|
|
26473
|
+
const handleMediaFadeOutComplete = (0, import_react18.useCallback)((key) => {
|
|
26957
26474
|
setUploadingRects((prev) => {
|
|
26958
26475
|
if (!(key in prev)) return prev;
|
|
26959
26476
|
const next = { ...prev };
|
|
@@ -26961,7 +26478,7 @@ function OhhwellsBridge() {
|
|
|
26961
26478
|
return next;
|
|
26962
26479
|
});
|
|
26963
26480
|
}, []);
|
|
26964
|
-
const handleVideoSettingsChange = (0,
|
|
26481
|
+
const handleVideoSettingsChange = (0, import_react18.useCallback)(
|
|
26965
26482
|
(key, settings) => {
|
|
26966
26483
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
26967
26484
|
const video = getVideoEl2(el);
|
|
@@ -26983,14 +26500,14 @@ function OhhwellsBridge() {
|
|
|
26983
26500
|
},
|
|
26984
26501
|
[postToParent2]
|
|
26985
26502
|
);
|
|
26986
|
-
return /* @__PURE__ */ (0,
|
|
26987
|
-
/* @__PURE__ */ (0,
|
|
26988
|
-
/* @__PURE__ */ (0,
|
|
26989
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0,
|
|
26503
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
26504
|
+
/* @__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, {}) }),
|
|
26505
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
26506
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MadeWithOhhWells, {}),
|
|
26990
26507
|
bridgeRoot ? (0, import_react_dom5.createPortal)(
|
|
26991
|
-
/* @__PURE__ */ (0,
|
|
26992
|
-
/* @__PURE__ */ (0,
|
|
26993
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
26508
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
26509
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
26510
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
26994
26511
|
AiSectionOverlay,
|
|
26995
26512
|
{
|
|
26996
26513
|
postToParent: postToParent2,
|
|
@@ -26998,15 +26515,7 @@ function OhhwellsBridge() {
|
|
|
26998
26515
|
onSelectionChange: handleAiSectionSelectionChange
|
|
26999
26516
|
}
|
|
27000
26517
|
),
|
|
27001
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
27002
|
-
AiPricingCardOverlay,
|
|
27003
|
-
{
|
|
27004
|
-
postToParent: postToParent2,
|
|
27005
|
-
aiSectionsRef,
|
|
27006
|
-
applyTreeLocalRef
|
|
27007
|
-
}
|
|
27008
|
-
),
|
|
27009
|
-
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
26518
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27010
26519
|
AiMediaStripOverlay,
|
|
27011
26520
|
{
|
|
27012
26521
|
postToParent: postToParent2,
|
|
@@ -27014,12 +26523,12 @@ function OhhwellsBridge() {
|
|
|
27014
26523
|
applyTreeLocalRef
|
|
27015
26524
|
}
|
|
27016
26525
|
),
|
|
27017
|
-
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26526
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27018
26527
|
"div",
|
|
27019
26528
|
{
|
|
27020
26529
|
className: "pointer-events-none fixed z-2147483646",
|
|
27021
26530
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
27022
|
-
children: /* @__PURE__ */ (0,
|
|
26531
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27023
26532
|
DropIndicator,
|
|
27024
26533
|
{
|
|
27025
26534
|
direction: "horizontal",
|
|
@@ -27030,7 +26539,7 @@ function OhhwellsBridge() {
|
|
|
27030
26539
|
},
|
|
27031
26540
|
`section-drop-${slot.insertIndex}-${i}`
|
|
27032
26541
|
)),
|
|
27033
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
26542
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27034
26543
|
MediaOverlay,
|
|
27035
26544
|
{
|
|
27036
26545
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -27041,7 +26550,7 @@ function OhhwellsBridge() {
|
|
|
27041
26550
|
},
|
|
27042
26551
|
`uploading-${key}`
|
|
27043
26552
|
)),
|
|
27044
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0,
|
|
26553
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27045
26554
|
MediaOverlay,
|
|
27046
26555
|
{
|
|
27047
26556
|
hover: mediaHover,
|
|
@@ -27052,7 +26561,7 @@ function OhhwellsBridge() {
|
|
|
27052
26561
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27053
26562
|
}
|
|
27054
26563
|
),
|
|
27055
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0,
|
|
26564
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27056
26565
|
MediaOverlay,
|
|
27057
26566
|
{
|
|
27058
26567
|
hover: selectedMedia,
|
|
@@ -27064,7 +26573,7 @@ function OhhwellsBridge() {
|
|
|
27064
26573
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27065
26574
|
}
|
|
27066
26575
|
),
|
|
27067
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
26576
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27068
26577
|
CarouselOverlay,
|
|
27069
26578
|
{
|
|
27070
26579
|
hover: carouselHover,
|
|
@@ -27072,10 +26581,10 @@ function OhhwellsBridge() {
|
|
|
27072
26581
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
27073
26582
|
}
|
|
27074
26583
|
),
|
|
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,
|
|
26584
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
26585
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
26586
|
+
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" }),
|
|
26587
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27079
26588
|
"div",
|
|
27080
26589
|
{
|
|
27081
26590
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27085,7 +26594,7 @@ function OhhwellsBridge() {
|
|
|
27085
26594
|
width: slot.width,
|
|
27086
26595
|
height: slot.height
|
|
27087
26596
|
},
|
|
27088
|
-
children: /* @__PURE__ */ (0,
|
|
26597
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27089
26598
|
DropIndicator,
|
|
27090
26599
|
{
|
|
27091
26600
|
direction: slot.direction,
|
|
@@ -27096,7 +26605,7 @@ function OhhwellsBridge() {
|
|
|
27096
26605
|
},
|
|
27097
26606
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
27098
26607
|
)),
|
|
27099
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26608
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27100
26609
|
"div",
|
|
27101
26610
|
{
|
|
27102
26611
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27106,7 +26615,7 @@ function OhhwellsBridge() {
|
|
|
27106
26615
|
width: slot.width,
|
|
27107
26616
|
height: slot.height
|
|
27108
26617
|
},
|
|
27109
|
-
children: /* @__PURE__ */ (0,
|
|
26618
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27110
26619
|
DropIndicator,
|
|
27111
26620
|
{
|
|
27112
26621
|
direction: slot.direction,
|
|
@@ -27117,7 +26626,7 @@ function OhhwellsBridge() {
|
|
|
27117
26626
|
},
|
|
27118
26627
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
27119
26628
|
)),
|
|
27120
|
-
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26629
|
+
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27121
26630
|
"div",
|
|
27122
26631
|
{
|
|
27123
26632
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27127,7 +26636,7 @@ function OhhwellsBridge() {
|
|
|
27127
26636
|
width: slot.width,
|
|
27128
26637
|
height: slot.height
|
|
27129
26638
|
},
|
|
27130
|
-
children: /* @__PURE__ */ (0,
|
|
26639
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27131
26640
|
DropIndicator,
|
|
27132
26641
|
{
|
|
27133
26642
|
direction: slot.direction,
|
|
@@ -27138,10 +26647,10 @@ function OhhwellsBridge() {
|
|
|
27138
26647
|
},
|
|
27139
26648
|
`button-drop-${slot.direction}-${slot.insertIndex}-${i}`
|
|
27140
26649
|
)),
|
|
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,
|
|
26650
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
26651
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
26652
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
26653
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27145
26654
|
ItemInteractionLayer,
|
|
27146
26655
|
{
|
|
27147
26656
|
rect: formPickRect,
|
|
@@ -27149,13 +26658,13 @@ function OhhwellsBridge() {
|
|
|
27149
26658
|
itemDragSurface: false,
|
|
27150
26659
|
toolbarAlign: "left",
|
|
27151
26660
|
chromeGap: 24,
|
|
27152
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0,
|
|
26661
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27153
26662
|
"div",
|
|
27154
26663
|
{
|
|
27155
26664
|
"data-ohw-form-toolbar": "",
|
|
27156
26665
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
27157
26666
|
children: [
|
|
27158
|
-
/* @__PURE__ */ (0,
|
|
26667
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27159
26668
|
"button",
|
|
27160
26669
|
{
|
|
27161
26670
|
type: "button",
|
|
@@ -27163,11 +26672,11 @@ function OhhwellsBridge() {
|
|
|
27163
26672
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
27164
26673
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
27165
26674
|
"data-ohw-add-field": "",
|
|
27166
|
-
children: /* @__PURE__ */ (0,
|
|
26675
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Plus, { size: 15, "aria-hidden": true })
|
|
27167
26676
|
}
|
|
27168
26677
|
),
|
|
27169
|
-
/* @__PURE__ */ (0,
|
|
27170
|
-
/* @__PURE__ */ (0,
|
|
26678
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
26679
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27171
26680
|
"button",
|
|
27172
26681
|
{
|
|
27173
26682
|
type: "button",
|
|
@@ -27183,11 +26692,11 @@ function OhhwellsBridge() {
|
|
|
27183
26692
|
});
|
|
27184
26693
|
},
|
|
27185
26694
|
children: [
|
|
27186
|
-
/* @__PURE__ */ (0,
|
|
26695
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Settings, { size: 14, "aria-hidden": true }),
|
|
27187
26696
|
"Form settings",
|
|
27188
26697
|
formPickCount ? (
|
|
27189
26698
|
// Counter pill, per the design — not a text suffix.
|
|
27190
|
-
/* @__PURE__ */ (0,
|
|
26699
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27191
26700
|
"span",
|
|
27192
26701
|
{
|
|
27193
26702
|
"data-ohw-form-count": "",
|
|
@@ -27199,8 +26708,8 @@ function OhhwellsBridge() {
|
|
|
27199
26708
|
]
|
|
27200
26709
|
}
|
|
27201
26710
|
),
|
|
27202
|
-
/* @__PURE__ */ (0,
|
|
27203
|
-
/* @__PURE__ */ (0,
|
|
26711
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
26712
|
+
/* @__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
26713
|
"button",
|
|
27205
26714
|
{
|
|
27206
26715
|
type: "button",
|
|
@@ -27231,7 +26740,7 @@ function OhhwellsBridge() {
|
|
|
27231
26740
|
)
|
|
27232
26741
|
}
|
|
27233
26742
|
),
|
|
27234
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
26743
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27235
26744
|
ItemInteractionLayer,
|
|
27236
26745
|
{
|
|
27237
26746
|
rect: formHoverRect,
|
|
@@ -27239,7 +26748,7 @@ function OhhwellsBridge() {
|
|
|
27239
26748
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
27240
26749
|
}
|
|
27241
26750
|
),
|
|
27242
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
26751
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27243
26752
|
ItemInteractionLayer,
|
|
27244
26753
|
{
|
|
27245
26754
|
rect: fieldPickRect,
|
|
@@ -27251,7 +26760,7 @@ function OhhwellsBridge() {
|
|
|
27251
26760
|
dragHandleLabel: "Reorder field",
|
|
27252
26761
|
onDragHandleDragStart: handleFieldDragStart,
|
|
27253
26762
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
27254
|
-
toolbar: /* @__PURE__ */ (0,
|
|
26763
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27255
26764
|
FormFieldToolbar,
|
|
27256
26765
|
{
|
|
27257
26766
|
type: fieldPickState.type,
|
|
@@ -27264,12 +26773,12 @@ function OhhwellsBridge() {
|
|
|
27264
26773
|
)
|
|
27265
26774
|
}
|
|
27266
26775
|
),
|
|
27267
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26776
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27268
26777
|
"div",
|
|
27269
26778
|
{
|
|
27270
26779
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
27271
26780
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
27272
|
-
children: /* @__PURE__ */ (0,
|
|
26781
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27273
26782
|
DropIndicator,
|
|
27274
26783
|
{
|
|
27275
26784
|
direction: "horizontal",
|
|
@@ -27282,7 +26791,7 @@ function OhhwellsBridge() {
|
|
|
27282
26791
|
)) : null,
|
|
27283
26792
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
27284
26793
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
27285
|
-
return /* @__PURE__ */ (0,
|
|
26794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27286
26795
|
"div",
|
|
27287
26796
|
{
|
|
27288
26797
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -27290,12 +26799,12 @@ function OhhwellsBridge() {
|
|
|
27290
26799
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
27291
26800
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
27292
26801
|
},
|
|
27293
|
-
children: /* @__PURE__ */ (0,
|
|
26802
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FieldTypePicker, { onPick: handleAddField })
|
|
27294
26803
|
}
|
|
27295
26804
|
);
|
|
27296
26805
|
})() : 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,
|
|
26806
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
26807
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27299
26808
|
FooterContainerChrome,
|
|
27300
26809
|
{
|
|
27301
26810
|
rect: toolbarRect,
|
|
@@ -27303,7 +26812,7 @@ function OhhwellsBridge() {
|
|
|
27303
26812
|
addDisabled: !canAddFooterColumn()
|
|
27304
26813
|
}
|
|
27305
26814
|
),
|
|
27306
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0,
|
|
26815
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27307
26816
|
ItemInteractionLayer,
|
|
27308
26817
|
{
|
|
27309
26818
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
|
|
@@ -27319,7 +26828,7 @@ function OhhwellsBridge() {
|
|
|
27319
26828
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
27320
26829
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
27321
26830
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
27322
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0,
|
|
26831
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27323
26832
|
ItemActionToolbar,
|
|
27324
26833
|
{
|
|
27325
26834
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -27370,8 +26879,8 @@ function OhhwellsBridge() {
|
|
|
27370
26879
|
) : void 0
|
|
27371
26880
|
}
|
|
27372
26881
|
),
|
|
27373
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0,
|
|
27374
|
-
/* @__PURE__ */ (0,
|
|
26882
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
26883
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27375
26884
|
EditGlowChrome,
|
|
27376
26885
|
{
|
|
27377
26886
|
rect: toolbarRect,
|
|
@@ -27381,7 +26890,7 @@ function OhhwellsBridge() {
|
|
|
27381
26890
|
hideHandle: isItemDragging
|
|
27382
26891
|
}
|
|
27383
26892
|
),
|
|
27384
|
-
/* @__PURE__ */ (0,
|
|
26893
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27385
26894
|
FloatingToolbar,
|
|
27386
26895
|
{
|
|
27387
26896
|
rect: toolbarRect,
|
|
@@ -27394,7 +26903,7 @@ function OhhwellsBridge() {
|
|
|
27394
26903
|
}
|
|
27395
26904
|
)
|
|
27396
26905
|
] }),
|
|
27397
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
26906
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27398
26907
|
"div",
|
|
27399
26908
|
{
|
|
27400
26909
|
"data-ohw-max-badge": "",
|
|
@@ -27420,7 +26929,7 @@ function OhhwellsBridge() {
|
|
|
27420
26929
|
]
|
|
27421
26930
|
}
|
|
27422
26931
|
),
|
|
27423
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
26932
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27424
26933
|
StateToggle,
|
|
27425
26934
|
{
|
|
27426
26935
|
rect: toggleState.rect,
|
|
@@ -27429,15 +26938,15 @@ function OhhwellsBridge() {
|
|
|
27429
26938
|
onStateChange: handleStateChange
|
|
27430
26939
|
}
|
|
27431
26940
|
),
|
|
27432
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
26941
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27433
26942
|
"div",
|
|
27434
26943
|
{
|
|
27435
26944
|
"data-ohw-section-insert-line": "",
|
|
27436
26945
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
27437
26946
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
27438
26947
|
children: [
|
|
27439
|
-
/* @__PURE__ */ (0,
|
|
27440
|
-
/* @__PURE__ */ (0,
|
|
26948
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
26949
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27441
26950
|
Badge,
|
|
27442
26951
|
{
|
|
27443
26952
|
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 +26963,11 @@ function OhhwellsBridge() {
|
|
|
27454
26963
|
children: "Add Section"
|
|
27455
26964
|
}
|
|
27456
26965
|
),
|
|
27457
|
-
/* @__PURE__ */ (0,
|
|
26966
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
27458
26967
|
]
|
|
27459
26968
|
}
|
|
27460
26969
|
),
|
|
27461
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
26970
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27462
26971
|
LinkPopover,
|
|
27463
26972
|
{
|
|
27464
26973
|
panelRef: linkPopoverPanelRef,
|
|
@@ -27475,7 +26984,7 @@ function OhhwellsBridge() {
|
|
|
27475
26984
|
},
|
|
27476
26985
|
linkPopover.key
|
|
27477
26986
|
) : null,
|
|
27478
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0,
|
|
26987
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27479
26988
|
FloatingPanel,
|
|
27480
26989
|
{
|
|
27481
26990
|
open: true,
|
|
@@ -27485,7 +26994,7 @@ function OhhwellsBridge() {
|
|
|
27485
26994
|
onPositionChange: setFloatingPanelPos,
|
|
27486
26995
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27487
26996
|
onClose: closeFloatingPanelOnly,
|
|
27488
|
-
children: /* @__PURE__ */ (0,
|
|
26997
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27489
26998
|
SocialsDisplayPanel,
|
|
27490
26999
|
{
|
|
27491
27000
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|
|
@@ -27506,19 +27015,19 @@ function OhhwellsBridge() {
|
|
|
27506
27015
|
const tokens = tokensFromButton(button);
|
|
27507
27016
|
const current = assignmentFor(button, editContentRef.current, tokens);
|
|
27508
27017
|
void buttonStyleTick;
|
|
27509
|
-
return /* @__PURE__ */ (0,
|
|
27018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27510
27019
|
FloatingPanel,
|
|
27511
27020
|
{
|
|
27512
27021
|
open: true,
|
|
27513
27022
|
title: floatingPanel.title,
|
|
27514
27023
|
context: floatingPanel.context,
|
|
27515
|
-
icon: /* @__PURE__ */ (0,
|
|
27024
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Brush, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
27516
27025
|
position: floatingPanelPos,
|
|
27517
27026
|
onPositionChange: setFloatingPanelPos,
|
|
27518
27027
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27519
27028
|
onClose: closeFloatingPanelOnly,
|
|
27520
27029
|
bodyClassName: "gap-5",
|
|
27521
|
-
children: /* @__PURE__ */ (0,
|
|
27030
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27522
27031
|
ButtonStylePanel,
|
|
27523
27032
|
{
|
|
27524
27033
|
variants: tokens.variants,
|
|
@@ -27546,10 +27055,10 @@ function OhhwellsBridge() {
|
|
|
27546
27055
|
|
|
27547
27056
|
// src/ui/EmptySection.tsx
|
|
27548
27057
|
var import_link = __toESM(require("next/link"), 1);
|
|
27549
|
-
var
|
|
27058
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
27550
27059
|
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
27551
|
-
return /* @__PURE__ */ (0,
|
|
27552
|
-
/* @__PURE__ */ (0,
|
|
27060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
27061
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
27553
27062
|
"p",
|
|
27554
27063
|
{
|
|
27555
27064
|
style: {
|
|
@@ -27561,10 +27070,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
27561
27070
|
color: "var(--brand-accent)",
|
|
27562
27071
|
marginBottom: "1.5rem"
|
|
27563
27072
|
},
|
|
27564
|
-
children: /* @__PURE__ */ (0,
|
|
27073
|
+
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
27074
|
}
|
|
27566
27075
|
),
|
|
27567
|
-
/* @__PURE__ */ (0,
|
|
27076
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
27568
27077
|
"h1",
|
|
27569
27078
|
{
|
|
27570
27079
|
style: {
|
|
@@ -27579,7 +27088,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
27579
27088
|
children: title
|
|
27580
27089
|
}
|
|
27581
27090
|
),
|
|
27582
|
-
/* @__PURE__ */ (0,
|
|
27091
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
27583
27092
|
"p",
|
|
27584
27093
|
{
|
|
27585
27094
|
style: {
|