@ohhwells/bridge 0.1.66-next.190 → 0.1.66
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 +266 -1036
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -17
- package/dist/index.d.ts +3 -17
- package/dist/index.js +264 -1033
- package/dist/index.js.map +1 -1
- package/dist/styles.css +0 -61
- package/package.json +1 -6
- package/dist/pages.cjs +0 -141
- package/dist/pages.cjs.map +0 -1
- package/dist/pages.d.cts +0 -45
- package/dist/pages.d.ts +0 -45
- package/dist/pages.js +0 -107
- package/dist/pages.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -83,12 +83,7 @@ function parseAiSectionsState(raw) {
|
|
|
83
83
|
media: entry.media && typeof entry.media === "object" ? entry.media : {}
|
|
84
84
|
}));
|
|
85
85
|
const removed = Array.isArray(parsed.removed) ? parsed.removed.filter((id) => typeof id === "string" && id.length > 0) : [];
|
|
86
|
-
return {
|
|
87
|
-
v: 1,
|
|
88
|
-
sections,
|
|
89
|
-
...removed.length ? { removed } : {},
|
|
90
|
-
...parsed.hideTemplate === true ? { hideTemplate: true } : {}
|
|
91
|
-
};
|
|
86
|
+
return { v: 1, sections, ...removed.length ? { removed } : {} };
|
|
92
87
|
} catch {
|
|
93
88
|
return EMPTY_AI_SECTIONS;
|
|
94
89
|
}
|
|
@@ -101,7 +96,6 @@ function applyTreeToState(state, payload) {
|
|
|
101
96
|
const entry = {
|
|
102
97
|
id: payload.id,
|
|
103
98
|
label: payload.label ?? "Generated section",
|
|
104
|
-
...typeof payload.path === "string" && payload.path ? { path: payload.path } : {},
|
|
105
99
|
afterSection: payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
|
|
106
100
|
...insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
|
|
107
101
|
...payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
|
|
@@ -124,317 +118,6 @@ function deleteSectionFromState(state, sectionId) {
|
|
|
124
118
|
return { ...state, v: 1, sections: state.sections, removed: [...removed, sectionId] };
|
|
125
119
|
}
|
|
126
120
|
|
|
127
|
-
// src/lib/brand-chrome.ts
|
|
128
|
-
var BRAND_NAME_KEY = "__ohw_brand_name";
|
|
129
|
-
var BRAND_TITLE_KEY = "__ohw_site_title";
|
|
130
|
-
var BRAND_FAVICON_LETTER_KEY = "__ohw_favicon_letter";
|
|
131
|
-
var BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
|
|
132
|
-
BRAND_NAME_KEY,
|
|
133
|
-
BRAND_TITLE_KEY,
|
|
134
|
-
BRAND_FAVICON_LETTER_KEY
|
|
135
|
-
]);
|
|
136
|
-
function upsertMeta(selector, attr, token, value) {
|
|
137
|
-
let el = document.head.querySelector(selector);
|
|
138
|
-
if (!el) {
|
|
139
|
-
el = document.createElement("meta");
|
|
140
|
-
el.setAttribute(attr, token);
|
|
141
|
-
document.head.appendChild(el);
|
|
142
|
-
}
|
|
143
|
-
if (el.getAttribute("content") !== value) el.setAttribute("content", value);
|
|
144
|
-
}
|
|
145
|
-
function escapeXml(value) {
|
|
146
|
-
return value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
147
|
-
}
|
|
148
|
-
function applyLetterFavicon(letter) {
|
|
149
|
-
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="#111827"/><text x="32" y="46" font-family="system-ui,-apple-system,Segoe UI,sans-serif" font-size="40" font-weight="700" text-anchor="middle" fill="#ffffff">${escapeXml(letter)}</text></svg>`;
|
|
150
|
-
const href = `data:image/svg+xml,${encodeURIComponent(svg)}`;
|
|
151
|
-
let link = document.head.querySelector('link[rel="icon"]');
|
|
152
|
-
if (!link) {
|
|
153
|
-
link = document.createElement("link");
|
|
154
|
-
link.rel = "icon";
|
|
155
|
-
document.head.appendChild(link);
|
|
156
|
-
}
|
|
157
|
-
link.type = "image/svg+xml";
|
|
158
|
-
if (link.href !== href) link.href = href;
|
|
159
|
-
}
|
|
160
|
-
function applyBrandChrome(content) {
|
|
161
|
-
const name = content[BRAND_NAME_KEY];
|
|
162
|
-
if (typeof name === "string" && name.length > 0) {
|
|
163
|
-
document.querySelectorAll("[data-ohw-wordmark]").forEach((el) => {
|
|
164
|
-
if (el.textContent !== name) el.textContent = name;
|
|
165
|
-
if (el.getAttribute("title") !== name) el.setAttribute("title", name);
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
|
-
const title = content[BRAND_TITLE_KEY];
|
|
169
|
-
if (typeof title === "string" && title.length > 0) {
|
|
170
|
-
if (document.title !== title) document.title = title;
|
|
171
|
-
upsertMeta('meta[property="og:title"]', "property", "og:title", title);
|
|
172
|
-
upsertMeta('meta[name="twitter:title"]', "name", "twitter:title", title);
|
|
173
|
-
}
|
|
174
|
-
const letter = content[BRAND_FAVICON_LETTER_KEY];
|
|
175
|
-
if (typeof letter === "string" && letter.length > 0) {
|
|
176
|
-
applyLetterFavicon(letter);
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
// src/lib/brand-kit.ts
|
|
181
|
-
var BRAND_KIT_KEY = "__ohw_brand";
|
|
182
|
-
var BRAND_VAR_PREFIX = "--ohw-brand-";
|
|
183
|
-
var BRAND_VAR_NAMES = ["primary", "accent", "light", "dark", "surface", "border", "muted"].map(
|
|
184
|
-
(role) => `${BRAND_VAR_PREFIX}${role}`
|
|
185
|
-
);
|
|
186
|
-
var FONT_VARS = {
|
|
187
|
-
heading: ["--font-heading", "--font-display", "--brand-font-heading"],
|
|
188
|
-
body: ["--font-body", "--brand-font-body"]
|
|
189
|
-
};
|
|
190
|
-
var BRAND_FONT_LINK_ID = "ohw-brand-fonts";
|
|
191
|
-
function brandColorVars(kit) {
|
|
192
|
-
const { dark, primary, accent, light } = kit.palette;
|
|
193
|
-
const mix = (a, aPct, b) => `color-mix(in srgb, ${a} ${aPct}%, ${b})`;
|
|
194
|
-
return {
|
|
195
|
-
[`${BRAND_VAR_PREFIX}primary`]: primary,
|
|
196
|
-
[`${BRAND_VAR_PREFIX}accent`]: accent,
|
|
197
|
-
[`${BRAND_VAR_PREFIX}light`]: light,
|
|
198
|
-
[`${BRAND_VAR_PREFIX}dark`]: dark,
|
|
199
|
-
[`${BRAND_VAR_PREFIX}surface`]: mix(light, 95, dark),
|
|
200
|
-
[`${BRAND_VAR_PREFIX}border`]: mix(light, 85, dark),
|
|
201
|
-
[`${BRAND_VAR_PREFIX}muted`]: mix(dark, 62, light)
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
function parseBrandKit(raw) {
|
|
205
|
-
if (!raw) return null;
|
|
206
|
-
try {
|
|
207
|
-
const parsed = JSON.parse(raw);
|
|
208
|
-
const p = parsed?.palette;
|
|
209
|
-
const f = parsed?.fonts;
|
|
210
|
-
if (!p || !f || typeof p.dark !== "string" || typeof p.primary !== "string" || typeof p.accent !== "string" || typeof p.light !== "string" || typeof f.heading !== "string" || typeof f.body !== "string") {
|
|
211
|
-
return null;
|
|
212
|
-
}
|
|
213
|
-
return {
|
|
214
|
-
palette: { dark: p.dark, primary: p.primary, accent: p.accent, light: p.light },
|
|
215
|
-
fonts: { heading: f.heading, body: f.body }
|
|
216
|
-
};
|
|
217
|
-
} catch {
|
|
218
|
-
return null;
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
function familyOf(stack) {
|
|
222
|
-
const first = stack.split(",")[0]?.trim() ?? "";
|
|
223
|
-
return first.replace(/^['"]|['"]$/g, "");
|
|
224
|
-
}
|
|
225
|
-
function loadBrandFonts(families) {
|
|
226
|
-
const unique = [...new Set(families.map((f) => f.trim()).filter(Boolean))];
|
|
227
|
-
if (unique.length === 0) return;
|
|
228
|
-
const spec = unique.map((f) => `${f.replace(/ /g, "+")}:400,500,600,700`).join("|");
|
|
229
|
-
const href = `https://fonts.googleapis.com/css?family=${spec}&display=swap`;
|
|
230
|
-
let link = document.getElementById(BRAND_FONT_LINK_ID);
|
|
231
|
-
if (!link) {
|
|
232
|
-
link = document.createElement("link");
|
|
233
|
-
link.id = BRAND_FONT_LINK_ID;
|
|
234
|
-
link.rel = "stylesheet";
|
|
235
|
-
document.head.appendChild(link);
|
|
236
|
-
}
|
|
237
|
-
if (link.href !== href) link.href = href;
|
|
238
|
-
}
|
|
239
|
-
function applyBrandToDom(kit) {
|
|
240
|
-
const root = document.documentElement;
|
|
241
|
-
if (!kit) {
|
|
242
|
-
for (const name of BRAND_VAR_NAMES) root.style.removeProperty(name);
|
|
243
|
-
for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
|
|
244
|
-
document.getElementById(BRAND_FONT_LINK_ID)?.remove();
|
|
245
|
-
return;
|
|
246
|
-
}
|
|
247
|
-
for (const [name, value] of Object.entries(brandColorVars(kit))) root.style.setProperty(name, value);
|
|
248
|
-
for (const name of FONT_VARS.heading) root.style.setProperty(name, kit.fonts.heading);
|
|
249
|
-
for (const name of FONT_VARS.body) root.style.setProperty(name, kit.fonts.body);
|
|
250
|
-
loadBrandFonts([familyOf(kit.fonts.heading), familyOf(kit.fonts.body)]);
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
// src/lib/section-styles.ts
|
|
254
|
-
var STYLE_STORE_KEY = "__ohw_styles";
|
|
255
|
-
var STYLE_SHEET_ID = "ohw-section-styles";
|
|
256
|
-
function parseStyleStore(raw) {
|
|
257
|
-
if (!raw) return null;
|
|
258
|
-
try {
|
|
259
|
-
const parsed = JSON.parse(raw);
|
|
260
|
-
if (parsed?.v !== 1) return null;
|
|
261
|
-
return {
|
|
262
|
-
v: 1,
|
|
263
|
-
sections: typeof parsed.sections === "object" && parsed.sections ? parsed.sections : {},
|
|
264
|
-
nodes: typeof parsed.nodes === "object" && parsed.nodes ? parsed.nodes : {}
|
|
265
|
-
};
|
|
266
|
-
} catch {
|
|
267
|
-
return null;
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
var BG_VALUES = {
|
|
271
|
-
surface: "color-mix(in srgb, var(--ohw-brand-light, var(--color-light, #ECECEB)) 94%, var(--ohw-brand-dark, var(--color-dark, #0C0A09)))",
|
|
272
|
-
accent: "var(--ohw-brand-primary, var(--color-primary, #0078E5))",
|
|
273
|
-
"accent-soft": "color-mix(in srgb, var(--ohw-brand-primary, var(--color-primary, #0078E5)) 12%, var(--ohw-brand-light, var(--color-light, #FFFFFF)))"
|
|
274
|
-
};
|
|
275
|
-
var HEADLINE_SIZES = { md: 24, lg: 32, xl: 40, display: 56 };
|
|
276
|
-
function styleSheetCss() {
|
|
277
|
-
const rules = [];
|
|
278
|
-
for (const [tone, value] of Object.entries(BG_VALUES)) {
|
|
279
|
-
rules.push(`[data-ohw-style-bg="${tone}"] { background: ${value} !important; }`);
|
|
280
|
-
}
|
|
281
|
-
rules.push(
|
|
282
|
-
`[data-ohw-style-bg="accent"] { color: var(--ohw-brand-light, var(--color-light, #FFFFFF)) !important; }`
|
|
283
|
-
);
|
|
284
|
-
rules.push(
|
|
285
|
-
`[data-ohw-style-distribution="space-between"] { display: flex !important; flex-direction: column; justify-content: space-between; }`,
|
|
286
|
-
`[data-ohw-style-distribution="center"] { display: flex !important; flex-direction: column; justify-content: center; }`
|
|
287
|
-
);
|
|
288
|
-
for (const [scale, size] of Object.entries(HEADLINE_SIZES)) {
|
|
289
|
-
rules.push(
|
|
290
|
-
`[data-ohw-style-headline="${scale}"] :is(h1, h2, h3) { font-size: ${size}px !important; line-height: 1.15 !important; }`
|
|
291
|
-
);
|
|
292
|
-
}
|
|
293
|
-
rules.push(
|
|
294
|
-
`[data-ohw-style-aspect="fill-height"] img { height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }`
|
|
295
|
-
);
|
|
296
|
-
for (const aspect of ["1:1", "4:5", "3:4", "3:2", "16:9", "2:1", "3:1"]) {
|
|
297
|
-
rules.push(
|
|
298
|
-
`[data-ohw-style-aspect="${aspect.replace(":", "-")}"] img { aspect-ratio: ${aspect.replace(":", " / ")} !important; height: auto !important; object-fit: cover; }`
|
|
299
|
-
);
|
|
300
|
-
}
|
|
301
|
-
const pad = { tight: 40, balanced: 64, airy: 96 };
|
|
302
|
-
for (const [spacing, px] of Object.entries(pad)) {
|
|
303
|
-
rules.push(
|
|
304
|
-
`[data-ohw-style-spacing="${spacing}"] { padding-top: ${px}px !important; padding-bottom: ${px}px !important; }`
|
|
305
|
-
);
|
|
306
|
-
}
|
|
307
|
-
return rules.join("\n");
|
|
308
|
-
}
|
|
309
|
-
var STYLE_FONT_LINK_ID = "ohw-style-fonts";
|
|
310
|
-
function loadStyleFonts(families) {
|
|
311
|
-
const unique = [...new Set(families.map((f) => f.trim()).filter(Boolean))];
|
|
312
|
-
const existing = document.getElementById(STYLE_FONT_LINK_ID);
|
|
313
|
-
if (unique.length === 0) {
|
|
314
|
-
existing?.remove();
|
|
315
|
-
return;
|
|
316
|
-
}
|
|
317
|
-
const spec = unique.map((f) => `${f.replace(/ /g, "+")}:400,500,600,700`).join("|");
|
|
318
|
-
const href = `https://fonts.googleapis.com/css?family=${spec}&display=swap`;
|
|
319
|
-
let link = existing;
|
|
320
|
-
if (!link) {
|
|
321
|
-
link = document.createElement("link");
|
|
322
|
-
link.id = STYLE_FONT_LINK_ID;
|
|
323
|
-
link.rel = "stylesheet";
|
|
324
|
-
document.head.appendChild(link);
|
|
325
|
-
}
|
|
326
|
-
if (link.href !== href) link.href = href;
|
|
327
|
-
}
|
|
328
|
-
var SECTION_ATTRS = {
|
|
329
|
-
sectionBackground: "data-ohw-style-bg",
|
|
330
|
-
textDistribution: "data-ohw-style-distribution",
|
|
331
|
-
headlineScale: "data-ohw-style-headline",
|
|
332
|
-
imageAspect: "data-ohw-style-aspect",
|
|
333
|
-
spacing: "data-ohw-style-spacing"
|
|
334
|
-
};
|
|
335
|
-
var NODE_WROTE_ATTR = "data-ohw-style-node";
|
|
336
|
-
var NODE_PROPS = ["color", "font-family", "font-size", "background"];
|
|
337
|
-
function saveInline(el, prop) {
|
|
338
|
-
const attr = `data-ohw-style-prev-${prop}`;
|
|
339
|
-
if (!el.hasAttribute(attr)) el.setAttribute(attr, el.style.getPropertyValue(prop));
|
|
340
|
-
}
|
|
341
|
-
function restoreInline(el, prop) {
|
|
342
|
-
const attr = `data-ohw-style-prev-${prop}`;
|
|
343
|
-
if (!el.hasAttribute(attr)) return;
|
|
344
|
-
const prev = el.getAttribute(attr) ?? "";
|
|
345
|
-
if (prev) el.style.setProperty(prop, prev);
|
|
346
|
-
else el.style.removeProperty(prop);
|
|
347
|
-
el.removeAttribute(attr);
|
|
348
|
-
}
|
|
349
|
-
function ensureStyleSheet() {
|
|
350
|
-
let el = document.getElementById(STYLE_SHEET_ID);
|
|
351
|
-
if (!el) {
|
|
352
|
-
el = document.createElement("style");
|
|
353
|
-
el.id = STYLE_SHEET_ID;
|
|
354
|
-
document.head.appendChild(el);
|
|
355
|
-
}
|
|
356
|
-
const css = styleSheetCss();
|
|
357
|
-
if (el.textContent !== css) el.textContent = css;
|
|
358
|
-
}
|
|
359
|
-
function clearSectionAttrs(root) {
|
|
360
|
-
for (const attr of Object.values(SECTION_ATTRS)) {
|
|
361
|
-
for (const el of Array.from(root.querySelectorAll(`[${attr}]`))) el.removeAttribute(attr);
|
|
362
|
-
}
|
|
363
|
-
for (const el of Array.from(root.querySelectorAll("[data-ohw-style-bgcolor]"))) {
|
|
364
|
-
restoreInline(el, "background");
|
|
365
|
-
el.removeAttribute("data-ohw-style-bgcolor");
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
function clearNodeProps(root) {
|
|
369
|
-
for (const el of Array.from(root.querySelectorAll(`[${NODE_WROTE_ATTR}]`))) {
|
|
370
|
-
const h = el;
|
|
371
|
-
for (const prop of NODE_PROPS) restoreInline(h, prop);
|
|
372
|
-
h.removeAttribute(NODE_WROTE_ATTR);
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
function buttonSurfaceOf(el) {
|
|
376
|
-
return el.closest("a, button") ?? el;
|
|
377
|
-
}
|
|
378
|
-
function applyStylesToDom(store) {
|
|
379
|
-
ensureStyleSheet();
|
|
380
|
-
clearSectionAttrs(document);
|
|
381
|
-
clearNodeProps(document);
|
|
382
|
-
loadStyleFonts(
|
|
383
|
-
store ? Object.values(store.nodes).flatMap((n) => n.fontFamily ? [n.fontFamily] : []) : []
|
|
384
|
-
);
|
|
385
|
-
if (!store) return;
|
|
386
|
-
for (const [sectionId, override] of Object.entries(store.sections)) {
|
|
387
|
-
const sections = document.querySelectorAll(
|
|
388
|
-
`[data-ohw-section="${CSS.escape(sectionId)}"]`
|
|
389
|
-
);
|
|
390
|
-
for (const section of Array.from(sections)) {
|
|
391
|
-
for (const [prop, attr] of Object.entries(SECTION_ATTRS)) {
|
|
392
|
-
const value = override[prop];
|
|
393
|
-
if (value === void 0) continue;
|
|
394
|
-
if (prop === "sectionBackground" && override.sectionBackgroundColor !== void 0) continue;
|
|
395
|
-
section.setAttribute(attr, String(value).replace(":", "-"));
|
|
396
|
-
}
|
|
397
|
-
if (override.sectionBackgroundColor !== void 0) {
|
|
398
|
-
saveInline(section, "background");
|
|
399
|
-
section.style.setProperty("background", override.sectionBackgroundColor, "important");
|
|
400
|
-
section.setAttribute("data-ohw-style-bgcolor", "");
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
for (const [key, override] of Object.entries(store.nodes)) {
|
|
405
|
-
const nodes = document.querySelectorAll(`[data-ohw-key="${CSS.escape(key)}"]`);
|
|
406
|
-
for (const el of Array.from(nodes)) {
|
|
407
|
-
if (override.color !== void 0) {
|
|
408
|
-
saveInline(el, "color");
|
|
409
|
-
el.style.setProperty("color", override.color, "important");
|
|
410
|
-
el.setAttribute(NODE_WROTE_ATTR, "");
|
|
411
|
-
}
|
|
412
|
-
if (override.fontFamily !== void 0) {
|
|
413
|
-
saveInline(el, "font-family");
|
|
414
|
-
el.style.setProperty("font-family", `'${override.fontFamily}'`, "important");
|
|
415
|
-
el.setAttribute(NODE_WROTE_ATTR, "");
|
|
416
|
-
}
|
|
417
|
-
if (override.fontSize !== void 0) {
|
|
418
|
-
saveInline(el, "font-size");
|
|
419
|
-
el.style.setProperty("font-size", `${override.fontSize}px`, "important");
|
|
420
|
-
el.setAttribute(NODE_WROTE_ATTR, "");
|
|
421
|
-
}
|
|
422
|
-
if (override.buttonBackground !== void 0 || override.buttonText !== void 0) {
|
|
423
|
-
const surface = buttonSurfaceOf(el);
|
|
424
|
-
if (override.buttonBackground !== void 0) {
|
|
425
|
-
saveInline(surface, "background");
|
|
426
|
-
surface.style.setProperty("background", override.buttonBackground, "important");
|
|
427
|
-
}
|
|
428
|
-
if (override.buttonText !== void 0) {
|
|
429
|
-
saveInline(surface, "color");
|
|
430
|
-
surface.style.setProperty("color", override.buttonText, "important");
|
|
431
|
-
}
|
|
432
|
-
surface.setAttribute(NODE_WROTE_ATTR, "");
|
|
433
|
-
}
|
|
434
|
-
}
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
|
|
438
121
|
// src/ui/ai-tree/aiSectionsManager.tsx
|
|
439
122
|
import { flushSync } from "react-dom";
|
|
440
123
|
import { createRoot } from "react-dom/client";
|
|
@@ -449,8 +132,7 @@ function lucideByName(name) {
|
|
|
449
132
|
}
|
|
450
133
|
var typeStyle = (spec, font) => ({
|
|
451
134
|
fontFamily: font,
|
|
452
|
-
|
|
453
|
-
fontSize: spec.size >= 24 ? `clamp(${Math.max(18, Math.round(spec.size * 0.6))}px, ${(spec.size / 9).toFixed(2)}vw, ${spec.size}px)` : spec.size,
|
|
135
|
+
fontSize: spec.size,
|
|
454
136
|
lineHeight: spec.line,
|
|
455
137
|
fontWeight: spec.weight
|
|
456
138
|
});
|
|
@@ -465,36 +147,6 @@ var FEATURE_LINE_CSS = [
|
|
|
465
147
|
`background-color:currentColor;-webkit-mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px;`,
|
|
466
148
|
`mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px}`
|
|
467
149
|
].join("");
|
|
468
|
-
function hexLuminance(color) {
|
|
469
|
-
const m = /^#([0-9a-f]{6})$/i.exec(color.trim());
|
|
470
|
-
if (!m) return null;
|
|
471
|
-
const [r2, g, b] = [0, 2, 4].map((i) => {
|
|
472
|
-
const c = parseInt(m[1].slice(i, i + 2), 16) / 255;
|
|
473
|
-
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
474
|
-
});
|
|
475
|
-
return 0.2126 * r2 + 0.7152 * g + 0.0722 * b;
|
|
476
|
-
}
|
|
477
|
-
function hexContrast(a, b) {
|
|
478
|
-
const la = hexLuminance(a);
|
|
479
|
-
const lb = hexLuminance(b);
|
|
480
|
-
if (la === null || lb === null) return null;
|
|
481
|
-
const [hi, lo] = la > lb ? [la, lb] : [lb, la];
|
|
482
|
-
return (hi + 0.05) / (lo + 0.05);
|
|
483
|
-
}
|
|
484
|
-
function accentBandContext(brand) {
|
|
485
|
-
const p = brand.palette;
|
|
486
|
-
const lightWins = (hexContrast(p.light, p.primary) ?? 99) >= (hexContrast(p.dark, p.primary) ?? 0);
|
|
487
|
-
if (lightWins) {
|
|
488
|
-
return {
|
|
489
|
-
brand: { ...brand, palette: { dark: p.light, primary: p.light, accent: p.light, light: p.primary } },
|
|
490
|
-
buttonLabel: p.primary
|
|
491
|
-
};
|
|
492
|
-
}
|
|
493
|
-
return {
|
|
494
|
-
brand: { ...brand, palette: { dark: p.dark, primary: p.dark, accent: p.dark, light: p.light } },
|
|
495
|
-
buttonLabel: p.light
|
|
496
|
-
};
|
|
497
|
-
}
|
|
498
150
|
function textAttrs(ctx, path) {
|
|
499
151
|
return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
|
|
500
152
|
}
|
|
@@ -507,8 +159,6 @@ var AI_RESPONSIVE_CSS = [
|
|
|
507
159
|
" [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
|
|
508
160
|
" [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
|
|
509
161
|
" [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
|
|
510
|
-
" [data-ai-responsive] { overflow-x: hidden; }",
|
|
511
|
-
" [data-ai-responsive] img { max-width: 100%; }",
|
|
512
162
|
"}"
|
|
513
163
|
].join("\n");
|
|
514
164
|
var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
|
|
@@ -586,7 +236,7 @@ function ButtonEl({
|
|
|
586
236
|
}) {
|
|
587
237
|
const secondary = slots.variant === "secondary";
|
|
588
238
|
const href = str(slots.href);
|
|
589
|
-
const linkAttrs = ctx.keyFor && path ? { "data-ohw-href-key": ctx.keyFor(`${path}.href`)
|
|
239
|
+
const linkAttrs = ctx.keyFor && path ? { "data-ohw-href-key": ctx.keyFor(`${path}.href`) } : {};
|
|
590
240
|
return /* @__PURE__ */ jsx(
|
|
591
241
|
"a",
|
|
592
242
|
{
|
|
@@ -602,7 +252,7 @@ function ButtonEl({
|
|
|
602
252
|
textDecoration: "none",
|
|
603
253
|
cursor: "pointer",
|
|
604
254
|
...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body),
|
|
605
|
-
...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color:
|
|
255
|
+
...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color: AI_TREE_TOKENS.textPrimaryForeground }
|
|
606
256
|
},
|
|
607
257
|
children: /* @__PURE__ */ jsx("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
|
|
608
258
|
}
|
|
@@ -1504,14 +1154,11 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
|
|
|
1504
1154
|
return null;
|
|
1505
1155
|
}
|
|
1506
1156
|
const resolvedBrand = brand ?? AI_DEFAULT_BRAND;
|
|
1507
|
-
const band = (tree.settings ?? {}).sectionBackground === "accent" ? accentBandContext(resolvedBrand) : null;
|
|
1508
|
-
const blockBrand = band?.brand ?? resolvedBrand;
|
|
1509
1157
|
const ctx = {
|
|
1510
|
-
brand:
|
|
1158
|
+
brand: resolvedBrand,
|
|
1511
1159
|
resolveMedia: resolveMedia ?? (() => null),
|
|
1512
|
-
cardSurface:
|
|
1513
|
-
keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null
|
|
1514
|
-
...band ? { buttonLabel: band.buttonLabel } : {}
|
|
1160
|
+
cardSurface: resolvedBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${resolvedBrand.palette.light} 90%, ${resolvedBrand.palette.dark})`,
|
|
1161
|
+
keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null
|
|
1515
1162
|
};
|
|
1516
1163
|
const settings = tree.settings ?? {};
|
|
1517
1164
|
const pad = AI_TREE_TOKENS.sectionPadding[settings.spacing ?? "balanced"];
|
|
@@ -1519,20 +1166,6 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
|
|
|
1519
1166
|
const overlayAlpha = { low: 0.25, medium: 0.45, high: 0.65 }[settings.overlayIntensity ?? "medium"];
|
|
1520
1167
|
const backgroundUrl = isOverlay && settings.backgroundMedia ? ctx.resolveMedia(settings.backgroundMedia) : null;
|
|
1521
1168
|
const bgAttrs = ctx.keyFor && isOverlay && settings.backgroundMedia ? { "data-ohw-key": ctx.keyFor("settings.backgroundMedia"), "data-ohw-editable": "bg-image" } : {};
|
|
1522
|
-
const toneBackground = (() => {
|
|
1523
|
-
const { dark, primary, light } = resolvedBrand.palette;
|
|
1524
|
-
switch (settings.sectionBackground) {
|
|
1525
|
-
case "surface":
|
|
1526
|
-
return `color-mix(in srgb, ${light} 94%, ${dark})`;
|
|
1527
|
-
case "accent":
|
|
1528
|
-
return primary;
|
|
1529
|
-
case "accent-soft":
|
|
1530
|
-
return `color-mix(in srgb, ${primary} 12%, ${light})`;
|
|
1531
|
-
default:
|
|
1532
|
-
return void 0;
|
|
1533
|
-
}
|
|
1534
|
-
})();
|
|
1535
|
-
const distributed = !isOverlay && settings.textDistribution;
|
|
1536
1169
|
return /* @__PURE__ */ jsxs(
|
|
1537
1170
|
"section",
|
|
1538
1171
|
{
|
|
@@ -1542,11 +1175,10 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
|
|
|
1542
1175
|
style: {
|
|
1543
1176
|
position: "relative",
|
|
1544
1177
|
padding: `${pad}px 0`,
|
|
1545
|
-
background:
|
|
1178
|
+
background: isOverlay && !backgroundUrl ? "#DBEAFE" : void 0,
|
|
1546
1179
|
backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : void 0,
|
|
1547
1180
|
backgroundSize: "cover",
|
|
1548
|
-
backgroundPosition: "center"
|
|
1549
|
-
color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
|
|
1181
|
+
backgroundPosition: "center"
|
|
1550
1182
|
},
|
|
1551
1183
|
children: [
|
|
1552
1184
|
/* @__PURE__ */ jsx("style", { children: AI_RESPONSIVE_CSS }),
|
|
@@ -1570,24 +1202,10 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
|
|
|
1570
1202
|
display: "grid",
|
|
1571
1203
|
gridTemplateColumns: "repeat(12, 1fr)",
|
|
1572
1204
|
gap: AI_TREE_TOKENS.spacing6,
|
|
1573
|
-
alignItems:
|
|
1205
|
+
alignItems: settings.verticalPosition === "top" ? "start" : "center",
|
|
1574
1206
|
marginTop: r2 > 0 ? AI_TREE_TOKENS.spacing8 : 0
|
|
1575
1207
|
},
|
|
1576
|
-
children: (row.blocks ?? []).map((block, b) => /* @__PURE__ */ jsx(
|
|
1577
|
-
"div",
|
|
1578
|
-
{
|
|
1579
|
-
"data-ai-cell": "",
|
|
1580
|
-
style: {
|
|
1581
|
-
gridColumn: `span ${Math.min(12, Math.max(1, block.span))}`,
|
|
1582
|
-
minWidth: 0,
|
|
1583
|
-
// space-between: each column becomes a flex column whose content spreads over
|
|
1584
|
-
// the full row height instead of clumping at the top.
|
|
1585
|
-
...distributed === "space-between" ? { display: "flex", flexDirection: "column", justifyContent: "space-between" } : {}
|
|
1586
|
-
},
|
|
1587
|
-
children: renderNode(block, ctx, `r${r2}.b${b}`)
|
|
1588
|
-
},
|
|
1589
|
-
b
|
|
1590
|
-
))
|
|
1208
|
+
children: (row.blocks ?? []).map((block, b) => /* @__PURE__ */ jsx("div", { style: { gridColumn: `span ${Math.min(12, Math.max(1, block.span))}`, minWidth: 0 }, children: renderNode(block, ctx, `r${r2}.b${b}`) }, b))
|
|
1591
1209
|
},
|
|
1592
1210
|
r2
|
|
1593
1211
|
))
|
|
@@ -1603,36 +1221,17 @@ import { jsx as jsx2 } from "react/jsx-runtime";
|
|
|
1603
1221
|
var CONTAINER_ATTR = "data-ohw-ai-generated";
|
|
1604
1222
|
var REPLACED_ATTR = "data-ohw-ai-replaced-by";
|
|
1605
1223
|
var REMOVED_ATTR = "data-ohw-ai-removed";
|
|
1606
|
-
var TEMPLATE_HIDDEN_ATTR = "data-ohw-ai-template-hidden";
|
|
1607
|
-
var CHROME_SECTION_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
|
|
1608
|
-
function readRootVar(name) {
|
|
1609
|
-
if (typeof document === "undefined") return "";
|
|
1610
|
-
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
|
1611
|
-
}
|
|
1612
|
-
function deriveBrandOverride() {
|
|
1613
|
-
const dark = readRootVar("--ohw-brand-dark");
|
|
1614
|
-
const primary = readRootVar("--ohw-brand-primary");
|
|
1615
|
-
const light = readRootVar("--ohw-brand-light");
|
|
1616
|
-
if (!dark || !primary || !light) return null;
|
|
1617
|
-
const accent = readRootVar("--ohw-brand-accent");
|
|
1618
|
-
const heading = readRootVar("--font-heading") || readRootVar("--font-display");
|
|
1619
|
-
const body = readRootVar("--font-body");
|
|
1620
|
-
return {
|
|
1621
|
-
palette: { dark, primary, accent: accent || dark, light },
|
|
1622
|
-
fonts: {
|
|
1623
|
-
heading: heading || AI_DEFAULT_BRAND.fonts.heading,
|
|
1624
|
-
body: body || AI_DEFAULT_BRAND.fonts.body
|
|
1625
|
-
}
|
|
1626
|
-
};
|
|
1627
|
-
}
|
|
1628
1224
|
function deriveTemplateBrand() {
|
|
1629
|
-
|
|
1630
|
-
const
|
|
1631
|
-
const
|
|
1225
|
+
if (typeof document === "undefined") return null;
|
|
1226
|
+
const cs = getComputedStyle(document.documentElement);
|
|
1227
|
+
const read = (name) => cs.getPropertyValue(name).trim();
|
|
1228
|
+
const dark = read("--color-dark");
|
|
1229
|
+
const primary = read("--color-primary");
|
|
1230
|
+
const light = read("--color-light");
|
|
1632
1231
|
if (!dark || !primary || !light) return null;
|
|
1633
|
-
const accent =
|
|
1634
|
-
const heading =
|
|
1635
|
-
const body =
|
|
1232
|
+
const accent = read("--color-accent");
|
|
1233
|
+
const heading = read("--font-heading") || read("--font-display");
|
|
1234
|
+
const body = read("--font-body");
|
|
1636
1235
|
return {
|
|
1637
1236
|
palette: { dark, primary, accent: accent || dark, light },
|
|
1638
1237
|
fonts: {
|
|
@@ -1704,24 +1303,6 @@ function syncRemovedSections(state) {
|
|
|
1704
1303
|
}
|
|
1705
1304
|
}
|
|
1706
1305
|
}
|
|
1707
|
-
function syncTemplateHidden(state, pageHasSections) {
|
|
1708
|
-
const hide = state.hideTemplate === true && pageHasSections;
|
|
1709
|
-
for (const el of Array.from(document.querySelectorAll(`[${TEMPLATE_HIDDEN_ATTR}]`))) {
|
|
1710
|
-
if (!hide) {
|
|
1711
|
-
el.style.removeProperty("display");
|
|
1712
|
-
el.removeAttribute(TEMPLATE_HIDDEN_ATTR);
|
|
1713
|
-
}
|
|
1714
|
-
}
|
|
1715
|
-
if (!hide) return;
|
|
1716
|
-
for (const el of Array.from(document.querySelectorAll("[data-ohw-section]"))) {
|
|
1717
|
-
if (el.hasAttribute(CONTAINER_ATTR)) continue;
|
|
1718
|
-
if (CHROME_SECTION_IDS.has(el.getAttribute("data-ohw-section") ?? "")) continue;
|
|
1719
|
-
if (el.parentElement?.closest("[data-ohw-section]")) continue;
|
|
1720
|
-
if (el.hasAttribute(REPLACED_ATTR) || el.hasAttribute(REMOVED_ATTR)) continue;
|
|
1721
|
-
el.style.display = "none";
|
|
1722
|
-
el.setAttribute(TEMPLATE_HIDDEN_ATTR, "");
|
|
1723
|
-
}
|
|
1724
|
-
}
|
|
1725
1306
|
function syncReplacedOriginals(state) {
|
|
1726
1307
|
for (const el of document.querySelectorAll(`[${REPLACED_ATTR}]`)) {
|
|
1727
1308
|
const byId = el.getAttribute(REPLACED_ATTR) ?? "";
|
|
@@ -1742,12 +1323,8 @@ function syncReplacedOriginals(state) {
|
|
|
1742
1323
|
}
|
|
1743
1324
|
function applyAiSectionsToDom(state, options) {
|
|
1744
1325
|
if (typeof document === "undefined") return;
|
|
1745
|
-
const brandOverride = deriveBrandOverride();
|
|
1746
1326
|
const templateBrand = deriveTemplateBrand();
|
|
1747
|
-
const
|
|
1748
|
-
const pagePath = window.location.pathname;
|
|
1749
|
-
const pageSections = state.sections.filter((entry) => !entry.path || entry.path === pagePath);
|
|
1750
|
-
const activeIds = new Set(pageSections.map((entry) => entry.id));
|
|
1327
|
+
const activeIds = new Set(state.sections.map((entry) => entry.id));
|
|
1751
1328
|
for (const [id, section] of mounted) {
|
|
1752
1329
|
if (!activeIds.has(id)) {
|
|
1753
1330
|
section.root.unmount();
|
|
@@ -1755,8 +1332,8 @@ function applyAiSectionsToDom(state, options) {
|
|
|
1755
1332
|
mounted.delete(id);
|
|
1756
1333
|
}
|
|
1757
1334
|
}
|
|
1758
|
-
for (const entry of
|
|
1759
|
-
const serialized = JSON.stringify(entry)
|
|
1335
|
+
for (const entry of state.sections) {
|
|
1336
|
+
const serialized = JSON.stringify(entry);
|
|
1760
1337
|
const existing = mounted.get(entry.id);
|
|
1761
1338
|
if (existing && existing.serialized === serialized && existing.container.isConnected) {
|
|
1762
1339
|
continue;
|
|
@@ -1770,7 +1347,6 @@ function applyAiSectionsToDom(state, options) {
|
|
|
1770
1347
|
mounted.delete(entry.id);
|
|
1771
1348
|
}
|
|
1772
1349
|
container.setAttribute("data-ohw-section", entry.id);
|
|
1773
|
-
container.setAttribute("data-ohw-instance", entry.id);
|
|
1774
1350
|
container.setAttribute("data-ohw-section-label", entry.label);
|
|
1775
1351
|
placeContainer(container, entry);
|
|
1776
1352
|
const root = mounted.get(entry.id)?.root ?? createRoot(container);
|
|
@@ -1781,7 +1357,7 @@ function applyAiSectionsToDom(state, options) {
|
|
|
1781
1357
|
AiTreeRenderer,
|
|
1782
1358
|
{
|
|
1783
1359
|
tree: entry.tree,
|
|
1784
|
-
brand:
|
|
1360
|
+
brand: entry.brand ?? options?.brand ?? templateBrand ?? void 0,
|
|
1785
1361
|
resolveMedia,
|
|
1786
1362
|
editKeyPrefix: `ai.${entry.id}`
|
|
1787
1363
|
}
|
|
@@ -1792,7 +1368,6 @@ function applyAiSectionsToDom(state, options) {
|
|
|
1792
1368
|
}
|
|
1793
1369
|
syncReplacedOriginals(state);
|
|
1794
1370
|
syncRemovedSections(state);
|
|
1795
|
-
syncTemplateHidden(state, pageSections.length > 0);
|
|
1796
1371
|
}
|
|
1797
1372
|
|
|
1798
1373
|
// src/useLinkHrefGuardian.ts
|
|
@@ -2399,7 +1974,7 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
|
|
|
2399
1974
|
const autoId = useId();
|
|
2400
1975
|
const insertAfter = insertAfterProp ?? autoId;
|
|
2401
1976
|
const [schedule, setSchedule] = useState2(null);
|
|
2402
|
-
const [loading, setLoading] = useState2(
|
|
1977
|
+
const [loading, setLoading] = useState2(true);
|
|
2403
1978
|
const [inEditor, setInEditor] = useState2(false);
|
|
2404
1979
|
const [isHovered, setIsHovered] = useState2(false);
|
|
2405
1980
|
const [modalState, setModalState] = useState2(null);
|
|
@@ -2573,10 +2148,8 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
|
|
|
2573
2148
|
"*"
|
|
2574
2149
|
);
|
|
2575
2150
|
};
|
|
2151
|
+
if (!inEditor && !loading && !schedule) return null;
|
|
2576
2152
|
const sectionId = `scheduling-${insertAfter}`;
|
|
2577
|
-
if (!inEditor && !loading && !schedule) {
|
|
2578
|
-
return /* @__PURE__ */ jsx4("section", { "data-ohw-section": sectionId, "data-ohw-scheduling-anchor": insertAfter, style: { display: "none" } });
|
|
2579
|
-
}
|
|
2580
2153
|
return /* @__PURE__ */ jsxs3(
|
|
2581
2154
|
"section",
|
|
2582
2155
|
{
|
|
@@ -7681,9 +7254,6 @@ import { Check, X } from "lucide-react";
|
|
|
7681
7254
|
|
|
7682
7255
|
// src/lib/sections.ts
|
|
7683
7256
|
var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
|
|
7684
|
-
function isChromeSection(el) {
|
|
7685
|
-
return el.matches("header, nav, footer, aside");
|
|
7686
|
-
}
|
|
7687
7257
|
function titleCaseSectionId(id) {
|
|
7688
7258
|
return id.split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
|
|
7689
7259
|
}
|
|
@@ -7694,8 +7264,6 @@ function parseSectionsFromRoot(root) {
|
|
|
7694
7264
|
const id = el.getAttribute("data-ohw-section") ?? "";
|
|
7695
7265
|
if (!id || seen.has(id) || LINK_PICKER_EXCLUDED_IDS.has(id)) continue;
|
|
7696
7266
|
if (el.parentElement?.closest("[data-ohw-section]")) continue;
|
|
7697
|
-
if (el.hasAttribute("data-ohw-ai-template-hidden") || el.hasAttribute("data-ohw-ai-removed") || el.hasAttribute("data-ohw-ai-replaced-by"))
|
|
7698
|
-
continue;
|
|
7699
7267
|
seen.add(id);
|
|
7700
7268
|
const label = el.getAttribute("data-ohw-section-label") ?? titleCaseSectionId(id);
|
|
7701
7269
|
sections.push({ id, label });
|
|
@@ -7713,12 +7281,8 @@ function parseSectionsFromHtml(html) {
|
|
|
7713
7281
|
|
|
7714
7282
|
// src/ui/ai-section/AiSectionOverlay.tsx
|
|
7715
7283
|
import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
7716
|
-
function
|
|
7717
|
-
const
|
|
7718
|
-
return document.querySelector(`[data-ohw-instance="${escaped}"]`) ?? document.querySelector(`[data-ohw-section="${escaped}"]:not([data-ohw-instance])`);
|
|
7719
|
-
}
|
|
7720
|
-
function readRect(instanceId) {
|
|
7721
|
-
const el = findSectionElement(instanceId);
|
|
7284
|
+
function readRect(sectionId) {
|
|
7285
|
+
const el = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
|
|
7722
7286
|
if (!el) return null;
|
|
7723
7287
|
const r2 = el.getBoundingClientRect();
|
|
7724
7288
|
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
@@ -7741,7 +7305,7 @@ function useLiveSectionRect(sectionId) {
|
|
|
7741
7305
|
const opts = { capture: true, passive: true };
|
|
7742
7306
|
window.addEventListener("scroll", update, opts);
|
|
7743
7307
|
window.addEventListener("resize", update);
|
|
7744
|
-
const el =
|
|
7308
|
+
const el = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
|
|
7745
7309
|
const ro = el ? new ResizeObserver(update) : null;
|
|
7746
7310
|
if (el && ro) ro.observe(el);
|
|
7747
7311
|
const interval = setInterval(update, 500);
|
|
@@ -7754,14 +7318,6 @@ function useLiveSectionRect(sectionId) {
|
|
|
7754
7318
|
}, [sectionId]);
|
|
7755
7319
|
return rect;
|
|
7756
7320
|
}
|
|
7757
|
-
function computeSectionBoundaryFlags(instanceId) {
|
|
7758
|
-
const topLevel = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
|
|
7759
|
-
(el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
|
|
7760
|
-
);
|
|
7761
|
-
const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
|
|
7762
|
-
if (index === -1) return { isFirst: true, isLast: true };
|
|
7763
|
-
return { isFirst: index === 0, isLast: index === topLevel.length - 1 };
|
|
7764
|
-
}
|
|
7765
7321
|
var PRIMARY2 = "#0885FE";
|
|
7766
7322
|
function edgeAwareRadius(rect) {
|
|
7767
7323
|
const container = window.innerWidth <= 480 ? 16 : 24;
|
|
@@ -7835,7 +7391,6 @@ function AiSectionOverlay({
|
|
|
7835
7391
|
}) {
|
|
7836
7392
|
const [selectedId, setSelectedId] = useState4(null);
|
|
7837
7393
|
const [reviewId, setReviewId] = useState4(null);
|
|
7838
|
-
const [reviewButtonsHidden, setReviewButtonsHidden] = useState4(false);
|
|
7839
7394
|
const reviewIdRef = useRef4(null);
|
|
7840
7395
|
reviewIdRef.current = reviewId;
|
|
7841
7396
|
const selectedIdRef = useRef4(null);
|
|
@@ -7844,7 +7399,7 @@ function AiSectionOverlay({
|
|
|
7844
7399
|
(el) => {
|
|
7845
7400
|
postToParent2({
|
|
7846
7401
|
type: "ow:section-selected",
|
|
7847
|
-
sectionId: el
|
|
7402
|
+
sectionId: el?.dataset.ohwSection ?? null,
|
|
7848
7403
|
sectionLabel: el ? el.dataset.ohwSectionLabel ?? titleCaseSectionId(el.dataset.ohwSection ?? "") : null
|
|
7849
7404
|
});
|
|
7850
7405
|
},
|
|
@@ -7853,7 +7408,7 @@ function AiSectionOverlay({
|
|
|
7853
7408
|
const selectFromElement = useCallback2(
|
|
7854
7409
|
(el, options) => {
|
|
7855
7410
|
const sectionEl = el?.closest("[data-ohw-section]") ?? null;
|
|
7856
|
-
const id = sectionEl
|
|
7411
|
+
const id = sectionEl?.dataset.ohwSection ?? null;
|
|
7857
7412
|
if (id === selectedIdRef.current) return;
|
|
7858
7413
|
setSelectedId(id);
|
|
7859
7414
|
if (options?.report !== false) report(sectionEl);
|
|
@@ -7894,10 +7449,9 @@ function AiSectionOverlay({
|
|
|
7894
7449
|
}
|
|
7895
7450
|
const found = readRect(sectionId) != null;
|
|
7896
7451
|
setReviewId(found ? sectionId : null);
|
|
7897
|
-
setReviewButtonsHidden(e.data.hideButtons === true);
|
|
7898
7452
|
postToParent2({ type: "ow:ai-review-started", sectionId, found });
|
|
7899
7453
|
if (found) {
|
|
7900
|
-
document.querySelector(`[data-ohw-
|
|
7454
|
+
document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
7901
7455
|
}
|
|
7902
7456
|
}
|
|
7903
7457
|
};
|
|
@@ -7916,7 +7470,7 @@ function AiSectionOverlay({
|
|
|
7916
7470
|
return;
|
|
7917
7471
|
}
|
|
7918
7472
|
const sec = t.closest("[data-ohw-section]");
|
|
7919
|
-
setHoveredId(sec
|
|
7473
|
+
setHoveredId(sec?.dataset.ohwSection ?? null);
|
|
7920
7474
|
};
|
|
7921
7475
|
const onLeave = () => setHoveredId(null);
|
|
7922
7476
|
document.addEventListener("mousemove", onMove, { passive: true });
|
|
@@ -7948,30 +7502,9 @@ function AiSectionOverlay({
|
|
|
7948
7502
|
},
|
|
7949
7503
|
[postToParent2]
|
|
7950
7504
|
);
|
|
7951
|
-
const
|
|
7952
|
-
const selectionRect = useLiveSectionRect(activeSelectionId);
|
|
7505
|
+
const selectionRect = useLiveSectionRect(reviewId ? null : selectedId);
|
|
7953
7506
|
const reviewRect = useLiveSectionRect(reviewId);
|
|
7954
7507
|
const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
|
|
7955
|
-
useEffect4(() => {
|
|
7956
|
-
const selectedEl = activeSelectionId ? findSectionElement(activeSelectionId) : null;
|
|
7957
|
-
if (!activeSelectionId || !selectionRect || selectedEl && isChromeSection(selectedEl)) {
|
|
7958
|
-
postToParent2({ type: "ow:section-rect", instanceId: null, rect: null });
|
|
7959
|
-
return;
|
|
7960
|
-
}
|
|
7961
|
-
const { isFirst, isLast } = computeSectionBoundaryFlags(activeSelectionId);
|
|
7962
|
-
postToParent2({
|
|
7963
|
-
type: "ow:section-rect",
|
|
7964
|
-
instanceId: activeSelectionId,
|
|
7965
|
-
rect: {
|
|
7966
|
-
top: selectionRect.top + window.scrollY,
|
|
7967
|
-
left: selectionRect.left + window.scrollX,
|
|
7968
|
-
width: selectionRect.width,
|
|
7969
|
-
height: selectionRect.height
|
|
7970
|
-
},
|
|
7971
|
-
isFirst,
|
|
7972
|
-
isLast
|
|
7973
|
-
});
|
|
7974
|
-
}, [activeSelectionId, selectionRect, postToParent2]);
|
|
7975
7508
|
return /* @__PURE__ */ jsxs9(Fragment5, { children: [
|
|
7976
7509
|
hoverRect && /* @__PURE__ */ jsx17(
|
|
7977
7510
|
"div",
|
|
@@ -8022,16 +7555,13 @@ function AiSectionOverlay({
|
|
|
8022
7555
|
border: `2px solid ${PRIMARY2}`,
|
|
8023
7556
|
borderRadius: edgeAwareRadius(reviewRect),
|
|
8024
7557
|
zIndex: 2147483200,
|
|
8025
|
-
// The veil itself: swallows clicks so the section stays locked until decided.
|
|
8026
|
-
// stopPropagation only guards the bubble phase; the bridge's capture-phase click
|
|
8027
|
-
// handlers additionally bail on `[data-ohw-ai-review]`, without which a click on
|
|
8028
|
-
// Accept/Discard resolves to the media beneath and opens the file picker.
|
|
7558
|
+
// The veil itself: swallows clicks so the section stays locked until decided.
|
|
8029
7559
|
background: "rgba(8, 133, 254, 0.04)",
|
|
8030
7560
|
pointerEvents: "auto",
|
|
8031
7561
|
cursor: "default"
|
|
8032
7562
|
},
|
|
8033
7563
|
onClick: (e) => e.stopPropagation(),
|
|
8034
|
-
children:
|
|
7564
|
+
children: /* @__PURE__ */ jsxs9(
|
|
8035
7565
|
"div",
|
|
8036
7566
|
{
|
|
8037
7567
|
style: {
|
|
@@ -12225,7 +11755,6 @@ function readLogoSizeState(content, placement) {
|
|
|
12225
11755
|
function getLogoElement(el) {
|
|
12226
11756
|
const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
|
|
12227
11757
|
if (marked) return marked;
|
|
12228
|
-
if (el.closest('[data-ohw-editable="icon"]')) return null;
|
|
12229
11758
|
const root = el.closest("nav, [data-ohw-nav-root], footer");
|
|
12230
11759
|
if (!root) return null;
|
|
12231
11760
|
const anchor = el.closest("a");
|
|
@@ -12480,127 +12009,16 @@ function FloatingPanel({
|
|
|
12480
12009
|
);
|
|
12481
12010
|
}
|
|
12482
12011
|
|
|
12483
|
-
// src/ui/logo-size-panel.tsx
|
|
12484
|
-
import { ArrowUpRight, Link as Link2 } from "lucide-react";
|
|
12485
|
-
import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
12486
|
-
function SizeSlider({
|
|
12487
|
-
value,
|
|
12488
|
-
onChange
|
|
12489
|
-
}) {
|
|
12490
|
-
const pct = (value - LOGO_SIZE_MIN) / (LOGO_SIZE_MAX - LOGO_SIZE_MIN) * 100;
|
|
12491
|
-
return /* @__PURE__ */ jsxs18("div", { className: "flex w-full flex-col gap-3", children: [
|
|
12492
|
-
/* @__PURE__ */ jsxs18("div", { className: "flex w-full items-center gap-2 text-sm font-medium leading-5", children: [
|
|
12493
|
-
/* @__PURE__ */ jsx28("span", { className: "min-w-0 flex-1 text-foreground", children: "Size" }),
|
|
12494
|
-
/* @__PURE__ */ jsxs18("span", { className: "shrink-0 whitespace-nowrap text-muted-foreground", children: [
|
|
12495
|
-
value,
|
|
12496
|
-
" px"
|
|
12497
|
-
] })
|
|
12498
|
-
] }),
|
|
12499
|
-
/* @__PURE__ */ jsxs18("div", { className: "relative h-2 w-full rounded-full bg-primary-50", children: [
|
|
12500
|
-
/* @__PURE__ */ jsx28(
|
|
12501
|
-
"div",
|
|
12502
|
-
{
|
|
12503
|
-
className: "absolute inset-y-0 left-0 rounded-full bg-primary",
|
|
12504
|
-
style: { width: `${pct}%` }
|
|
12505
|
-
}
|
|
12506
|
-
),
|
|
12507
|
-
/* @__PURE__ */ jsx28(
|
|
12508
|
-
"input",
|
|
12509
|
-
{
|
|
12510
|
-
type: "range",
|
|
12511
|
-
min: LOGO_SIZE_MIN,
|
|
12512
|
-
max: LOGO_SIZE_MAX,
|
|
12513
|
-
step: 1,
|
|
12514
|
-
value,
|
|
12515
|
-
"aria-label": "Logo size",
|
|
12516
|
-
className: cn(
|
|
12517
|
-
"absolute inset-0 h-full w-full cursor-pointer appearance-none bg-transparent",
|
|
12518
|
-
"[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-5",
|
|
12519
|
-
"[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2",
|
|
12520
|
-
"[&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background",
|
|
12521
|
-
"[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full",
|
|
12522
|
-
"[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary",
|
|
12523
|
-
"[&::-moz-range-thumb]:bg-background"
|
|
12524
|
-
),
|
|
12525
|
-
onChange: (e) => onChange(Number(e.target.value))
|
|
12526
|
-
}
|
|
12527
|
-
)
|
|
12528
|
-
] })
|
|
12529
|
-
] });
|
|
12530
|
-
}
|
|
12531
|
-
function LogoSizePanel({
|
|
12532
|
-
viewport,
|
|
12533
|
-
sizePx,
|
|
12534
|
-
mobileFollowing = true,
|
|
12535
|
-
onSizeChange,
|
|
12536
|
-
onCustomizeMobile,
|
|
12537
|
-
onResetMobile,
|
|
12538
|
-
onUpdateEverywhere,
|
|
12539
|
-
className
|
|
12540
|
-
}) {
|
|
12541
|
-
const showFollowing = viewport === "mobile" && mobileFollowing;
|
|
12542
|
-
const showMobileSlider = viewport === "mobile" && !mobileFollowing;
|
|
12543
|
-
const showDesktopSlider = viewport === "desktop";
|
|
12544
|
-
return /* @__PURE__ */ jsxs18("div", { className: cn("flex w-full flex-col gap-4", className), children: [
|
|
12545
|
-
showFollowing ? /* @__PURE__ */ jsxs18("div", { className: "flex w-full flex-col gap-2", children: [
|
|
12546
|
-
/* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-1", children: [
|
|
12547
|
-
/* @__PURE__ */ jsx28(Link2, { size: 16, className: "mt-0.5 shrink-0 text-foreground", "aria-hidden": true }),
|
|
12548
|
-
/* @__PURE__ */ jsx28("p", { className: "text-sm font-semibold leading-5 text-foreground", children: "Following desktop size" })
|
|
12549
|
-
] }),
|
|
12550
|
-
/* @__PURE__ */ jsx28("p", { className: "text-sm leading-5 text-muted-foreground", children: "Mobile uses the desktop size until you customize it. Change the desktop size and it follows automatically." }),
|
|
12551
|
-
/* @__PURE__ */ jsx28(
|
|
12552
|
-
Button,
|
|
12553
|
-
{
|
|
12554
|
-
type: "button",
|
|
12555
|
-
variant: "outline",
|
|
12556
|
-
size: "sm",
|
|
12557
|
-
className: "h-9 w-full min-w-0 cursor-pointer",
|
|
12558
|
-
onClick: onCustomizeMobile,
|
|
12559
|
-
children: "Customize for mobile"
|
|
12560
|
-
}
|
|
12561
|
-
)
|
|
12562
|
-
] }) : null,
|
|
12563
|
-
showDesktopSlider || showMobileSlider ? /* @__PURE__ */ jsx28(SizeSlider, { value: sizePx, onChange: onSizeChange }) : null,
|
|
12564
|
-
showMobileSlider ? /* @__PURE__ */ jsx28(
|
|
12565
|
-
Button,
|
|
12566
|
-
{
|
|
12567
|
-
type: "button",
|
|
12568
|
-
variant: "outline",
|
|
12569
|
-
size: "sm",
|
|
12570
|
-
className: "h-9 w-full min-w-0 cursor-pointer",
|
|
12571
|
-
onClick: onResetMobile,
|
|
12572
|
-
children: "Reset to desktop size"
|
|
12573
|
-
}
|
|
12574
|
-
) : null,
|
|
12575
|
-
/* @__PURE__ */ jsx28("div", { className: "h-px w-full bg-border", role: "separator" }),
|
|
12576
|
-
/* @__PURE__ */ jsxs18(
|
|
12577
|
-
Button,
|
|
12578
|
-
{
|
|
12579
|
-
type: "button",
|
|
12580
|
-
variant: "outline",
|
|
12581
|
-
size: "sm",
|
|
12582
|
-
className: "h-9 w-full min-w-0 cursor-pointer gap-1",
|
|
12583
|
-
onClick: onUpdateEverywhere,
|
|
12584
|
-
children: [
|
|
12585
|
-
"Update logo everywhere",
|
|
12586
|
-
/* @__PURE__ */ jsx28(ArrowUpRight, { size: 16, "aria-hidden": true })
|
|
12587
|
-
]
|
|
12588
|
-
}
|
|
12589
|
-
),
|
|
12590
|
-
/* @__PURE__ */ jsx28("p", { className: "text-sm leading-5 text-muted-foreground", children: "Matches the right version to your background." })
|
|
12591
|
-
] });
|
|
12592
|
-
}
|
|
12593
|
-
|
|
12594
12012
|
// src/ui/socials-display-panel.tsx
|
|
12595
|
-
import { jsx as
|
|
12013
|
+
import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
12596
12014
|
function DisplaySwitch({
|
|
12597
12015
|
label,
|
|
12598
12016
|
checked,
|
|
12599
12017
|
disabled,
|
|
12600
12018
|
onChange
|
|
12601
12019
|
}) {
|
|
12602
|
-
return /* @__PURE__ */
|
|
12603
|
-
/* @__PURE__ */
|
|
12020
|
+
return /* @__PURE__ */ jsxs18("div", { className: "flex w-full items-center gap-2", children: [
|
|
12021
|
+
/* @__PURE__ */ jsx28(
|
|
12604
12022
|
"span",
|
|
12605
12023
|
{
|
|
12606
12024
|
className: cn(
|
|
@@ -12610,7 +12028,7 @@ function DisplaySwitch({
|
|
|
12610
12028
|
children: label
|
|
12611
12029
|
}
|
|
12612
12030
|
),
|
|
12613
|
-
/* @__PURE__ */
|
|
12031
|
+
/* @__PURE__ */ jsx28(
|
|
12614
12032
|
"button",
|
|
12615
12033
|
{
|
|
12616
12034
|
type: "button",
|
|
@@ -12624,7 +12042,7 @@ function DisplaySwitch({
|
|
|
12624
12042
|
checked ? "bg-primary" : "bg-primary-50",
|
|
12625
12043
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
12626
12044
|
),
|
|
12627
|
-
children: /* @__PURE__ */
|
|
12045
|
+
children: /* @__PURE__ */ jsx28(
|
|
12628
12046
|
"span",
|
|
12629
12047
|
{
|
|
12630
12048
|
className: cn(
|
|
@@ -12638,8 +12056,8 @@ function DisplaySwitch({
|
|
|
12638
12056
|
] });
|
|
12639
12057
|
}
|
|
12640
12058
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
12641
|
-
return /* @__PURE__ */
|
|
12642
|
-
/* @__PURE__ */
|
|
12059
|
+
return /* @__PURE__ */ jsxs18("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
12060
|
+
/* @__PURE__ */ jsx28(
|
|
12643
12061
|
DisplaySwitch,
|
|
12644
12062
|
{
|
|
12645
12063
|
label: "Text",
|
|
@@ -12648,7 +12066,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
12648
12066
|
onChange: (text) => onChange({ ...display, text })
|
|
12649
12067
|
}
|
|
12650
12068
|
),
|
|
12651
|
-
/* @__PURE__ */
|
|
12069
|
+
/* @__PURE__ */ jsx28(
|
|
12652
12070
|
DisplaySwitch,
|
|
12653
12071
|
{
|
|
12654
12072
|
label: "Icon",
|
|
@@ -13209,7 +12627,7 @@ function useNavItemDrag({
|
|
|
13209
12627
|
|
|
13210
12628
|
// src/ui/footer-container-chrome.tsx
|
|
13211
12629
|
import { Plus as Plus2 } from "lucide-react";
|
|
13212
|
-
import { jsx as
|
|
12630
|
+
import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
13213
12631
|
function FooterContainerChrome({
|
|
13214
12632
|
rect,
|
|
13215
12633
|
onAdd,
|
|
@@ -13217,7 +12635,7 @@ function FooterContainerChrome({
|
|
|
13217
12635
|
}) {
|
|
13218
12636
|
const chromeGap = 6;
|
|
13219
12637
|
const buttonMargin = 7;
|
|
13220
|
-
return /* @__PURE__ */
|
|
12638
|
+
return /* @__PURE__ */ jsx29(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx29(
|
|
13221
12639
|
"div",
|
|
13222
12640
|
{
|
|
13223
12641
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -13229,8 +12647,8 @@ function FooterContainerChrome({
|
|
|
13229
12647
|
width: rect.width + chromeGap * 2,
|
|
13230
12648
|
height: rect.height + chromeGap * 2
|
|
13231
12649
|
},
|
|
13232
|
-
children: /* @__PURE__ */
|
|
13233
|
-
/* @__PURE__ */
|
|
12650
|
+
children: /* @__PURE__ */ jsxs19(Tooltip, { children: [
|
|
12651
|
+
/* @__PURE__ */ jsx29(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx29(
|
|
13234
12652
|
"button",
|
|
13235
12653
|
{
|
|
13236
12654
|
type: "button",
|
|
@@ -13249,10 +12667,10 @@ function FooterContainerChrome({
|
|
|
13249
12667
|
if (addDisabled) return;
|
|
13250
12668
|
onAdd();
|
|
13251
12669
|
},
|
|
13252
|
-
children: /* @__PURE__ */
|
|
12670
|
+
children: /* @__PURE__ */ jsx29(Plus2, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
13253
12671
|
}
|
|
13254
12672
|
) }),
|
|
13255
|
-
/* @__PURE__ */
|
|
12673
|
+
/* @__PURE__ */ jsx29(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
13256
12674
|
] })
|
|
13257
12675
|
}
|
|
13258
12676
|
) });
|
|
@@ -13437,18 +12855,6 @@ function collectEditableNodes(extraContent, root = document) {
|
|
|
13437
12855
|
}
|
|
13438
12856
|
if (extraContent && !isScoped) {
|
|
13439
12857
|
applyNavFooterDeleteOverrides(byKey, extraContent);
|
|
13440
|
-
for (const key of LOGO_IMAGE_KEYS) {
|
|
13441
|
-
if (!(key in extraContent)) continue;
|
|
13442
|
-
byKey.set(key, { key, type: "image", text: extraContent[key] ?? "" });
|
|
13443
|
-
}
|
|
13444
|
-
for (const key of [LOGO_PLACEHOLDER_KEY, LOGO_ALT_KEY]) {
|
|
13445
|
-
if (!(key in extraContent)) continue;
|
|
13446
|
-
byKey.set(key, { key, type: "meta", text: extraContent[key] ?? "" });
|
|
13447
|
-
}
|
|
13448
|
-
for (const key of LOGO_SIZE_KEYS) {
|
|
13449
|
-
if (!(key in extraContent)) continue;
|
|
13450
|
-
byKey.set(key, { key, type: "meta", text: extraContent[key] ?? "" });
|
|
13451
|
-
}
|
|
13452
12858
|
}
|
|
13453
12859
|
return Array.from(byKey.values());
|
|
13454
12860
|
}
|
|
@@ -13715,13 +13121,13 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
13715
13121
|
|
|
13716
13122
|
// src/ui/navbar-container-chrome.tsx
|
|
13717
13123
|
import { Plus as Plus3 } from "lucide-react";
|
|
13718
|
-
import { jsx as
|
|
13124
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
13719
13125
|
function NavbarContainerChrome({
|
|
13720
13126
|
rect,
|
|
13721
13127
|
onAdd
|
|
13722
13128
|
}) {
|
|
13723
13129
|
const chromeGap = 6;
|
|
13724
|
-
return /* @__PURE__ */
|
|
13130
|
+
return /* @__PURE__ */ jsx30(
|
|
13725
13131
|
"div",
|
|
13726
13132
|
{
|
|
13727
13133
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -13733,7 +13139,7 @@ function NavbarContainerChrome({
|
|
|
13733
13139
|
width: rect.width + chromeGap * 2,
|
|
13734
13140
|
height: rect.height + chromeGap * 2
|
|
13735
13141
|
},
|
|
13736
|
-
children: /* @__PURE__ */
|
|
13142
|
+
children: /* @__PURE__ */ jsx30(
|
|
13737
13143
|
"button",
|
|
13738
13144
|
{
|
|
13739
13145
|
type: "button",
|
|
@@ -13750,7 +13156,7 @@ function NavbarContainerChrome({
|
|
|
13750
13156
|
e.stopPropagation();
|
|
13751
13157
|
onAdd();
|
|
13752
13158
|
},
|
|
13753
|
-
children: /* @__PURE__ */
|
|
13159
|
+
children: /* @__PURE__ */ jsx30(Plus3, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
13754
13160
|
}
|
|
13755
13161
|
)
|
|
13756
13162
|
}
|
|
@@ -13759,7 +13165,7 @@ function NavbarContainerChrome({
|
|
|
13759
13165
|
|
|
13760
13166
|
// src/ui/drop-indicator.tsx
|
|
13761
13167
|
import * as React10 from "react";
|
|
13762
|
-
import { jsx as
|
|
13168
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
13763
13169
|
var dropIndicatorVariants = cva(
|
|
13764
13170
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
13765
13171
|
{
|
|
@@ -13783,7 +13189,7 @@ var dropIndicatorVariants = cva(
|
|
|
13783
13189
|
);
|
|
13784
13190
|
var DropIndicator = React10.forwardRef(
|
|
13785
13191
|
({ className, direction, state, ...props }, ref) => {
|
|
13786
|
-
return /* @__PURE__ */
|
|
13192
|
+
return /* @__PURE__ */ jsx31(
|
|
13787
13193
|
"div",
|
|
13788
13194
|
{
|
|
13789
13195
|
ref,
|
|
@@ -13800,7 +13206,7 @@ var DropIndicator = React10.forwardRef(
|
|
|
13800
13206
|
DropIndicator.displayName = "DropIndicator";
|
|
13801
13207
|
|
|
13802
13208
|
// src/ui/badge.tsx
|
|
13803
|
-
import { jsx as
|
|
13209
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
13804
13210
|
var badgeVariants = cva(
|
|
13805
13211
|
"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",
|
|
13806
13212
|
{
|
|
@@ -13818,12 +13224,12 @@ var badgeVariants = cva(
|
|
|
13818
13224
|
}
|
|
13819
13225
|
);
|
|
13820
13226
|
function Badge({ className, variant, ...props }) {
|
|
13821
|
-
return /* @__PURE__ */
|
|
13227
|
+
return /* @__PURE__ */ jsx32("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
13822
13228
|
}
|
|
13823
13229
|
|
|
13824
13230
|
// src/OhhwellsBridge.tsx
|
|
13825
|
-
import { Link as
|
|
13826
|
-
import { Fragment as Fragment8, jsx as
|
|
13231
|
+
import { Link as Link2, Plus as Plus4, Settings } from "lucide-react";
|
|
13232
|
+
import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
13827
13233
|
var PRIMARY3 = "#0885FE";
|
|
13828
13234
|
var IMAGE_FADE_MS = 300;
|
|
13829
13235
|
function runOpacityFade(el, onDone) {
|
|
@@ -13917,10 +13323,21 @@ function parseSchedulingInsertAfter(insertAfter) {
|
|
|
13917
13323
|
insertBefore: insertAfter.slice(idx + INSERT_BEFORE_MARKER.length)
|
|
13918
13324
|
};
|
|
13919
13325
|
}
|
|
13920
|
-
function
|
|
13921
|
-
|
|
13922
|
-
const
|
|
13923
|
-
|
|
13326
|
+
function resolveSchedulingInsert(insertAfter, explicitInsertBefore) {
|
|
13327
|
+
const parsed = parseSchedulingInsertAfter(insertAfter);
|
|
13328
|
+
const insertBefore = explicitInsertBefore ?? parsed.insertBefore;
|
|
13329
|
+
const effectiveInsertAfter = insertBefore && parsed.insertBefore === null ? `${insertAfter}${INSERT_BEFORE_MARKER}${insertBefore}` : insertAfter;
|
|
13330
|
+
return { effectiveInsertAfter, insertBefore };
|
|
13331
|
+
}
|
|
13332
|
+
function getSchedulingMountPoint(insertAfter) {
|
|
13333
|
+
const { anchor } = parseSchedulingInsertAfter(insertAfter);
|
|
13334
|
+
let anchorEl = document.querySelector(`[data-ohw-section="${anchor}"]`);
|
|
13335
|
+
if (!anchorEl && anchor === "scheduling") {
|
|
13336
|
+
const widgets = Array.from(document.querySelectorAll('[data-ohw-section^="scheduling-"]'));
|
|
13337
|
+
anchorEl = widgets.at(-1) ?? null;
|
|
13338
|
+
}
|
|
13339
|
+
if (!anchorEl) return null;
|
|
13340
|
+
return anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
|
|
13924
13341
|
}
|
|
13925
13342
|
function schedulingMountDepth(insertAfter) {
|
|
13926
13343
|
if (!insertAfter.includes(INSERT_BEFORE_MARKER)) return 0;
|
|
@@ -13937,7 +13354,8 @@ function getPageSchedulingEntries(raw) {
|
|
|
13937
13354
|
}
|
|
13938
13355
|
}
|
|
13939
13356
|
function isSchedulingWidgetMissing(entry) {
|
|
13940
|
-
|
|
13357
|
+
const { effectiveInsertAfter } = resolveSchedulingInsert(entry.insertAfter);
|
|
13358
|
+
return !document.querySelector(`[data-ohw-section="${schedulingSectionId(effectiveInsertAfter)}"]`);
|
|
13941
13359
|
}
|
|
13942
13360
|
function hasMissingSchedulingWidgets(entries) {
|
|
13943
13361
|
return entries.some(isSchedulingWidgetMissing);
|
|
@@ -13967,17 +13385,16 @@ function initSectionsFromContent(content, removeExisting = false) {
|
|
|
13967
13385
|
} catch {
|
|
13968
13386
|
}
|
|
13969
13387
|
}
|
|
13970
|
-
function mountSchedulingWidget(
|
|
13971
|
-
const
|
|
13972
|
-
const sectionId = schedulingSectionId(
|
|
13388
|
+
function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId, explicitInsertBefore) {
|
|
13389
|
+
const { effectiveInsertAfter, insertBefore } = resolveSchedulingInsert(insertAfter, explicitInsertBefore);
|
|
13390
|
+
const sectionId = schedulingSectionId(effectiveInsertAfter);
|
|
13973
13391
|
if (document.querySelector(`[data-ohw-section="${sectionId}"]`)) return false;
|
|
13974
|
-
const
|
|
13975
|
-
if (!
|
|
13976
|
-
const mountPoint = anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
|
|
13392
|
+
const mountPoint = getSchedulingMountPoint(effectiveInsertAfter);
|
|
13393
|
+
if (!mountPoint) return false;
|
|
13977
13394
|
const container = document.createElement("div");
|
|
13978
13395
|
container.dataset.ohwSectionContainer = "scheduling";
|
|
13979
|
-
if (
|
|
13980
|
-
const beforeAnchor = document.querySelector(`[data-ohw-section="${
|
|
13396
|
+
if (insertBefore) {
|
|
13397
|
+
const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
|
|
13981
13398
|
const beforePoint = beforeAnchor?.closest('[data-ohw-section-container="scheduling"]') ?? beforeAnchor;
|
|
13982
13399
|
if (!beforePoint) return false;
|
|
13983
13400
|
beforePoint.insertAdjacentElement("beforebegin", container);
|
|
@@ -13988,25 +13405,19 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
13988
13405
|
}
|
|
13989
13406
|
tail.insertAdjacentElement("afterend", container);
|
|
13990
13407
|
}
|
|
13991
|
-
|
|
13992
|
-
|
|
13993
|
-
|
|
13994
|
-
|
|
13995
|
-
|
|
13996
|
-
|
|
13997
|
-
|
|
13998
|
-
|
|
13999
|
-
|
|
14000
|
-
|
|
14001
|
-
|
|
14002
|
-
|
|
14003
|
-
|
|
14004
|
-
});
|
|
14005
|
-
} catch (err) {
|
|
14006
|
-
console.error("[ow:scheduling] render threw", err);
|
|
14007
|
-
container.remove();
|
|
14008
|
-
return false;
|
|
14009
|
-
}
|
|
13408
|
+
const root = createRoot2(container);
|
|
13409
|
+
flushSync2(() => {
|
|
13410
|
+
root.render(
|
|
13411
|
+
/* @__PURE__ */ jsx33(
|
|
13412
|
+
SchedulingWidget,
|
|
13413
|
+
{
|
|
13414
|
+
notifyOnConnect,
|
|
13415
|
+
initialScheduleId: scheduleId,
|
|
13416
|
+
insertAfter: effectiveInsertAfter
|
|
13417
|
+
}
|
|
13418
|
+
)
|
|
13419
|
+
);
|
|
13420
|
+
});
|
|
14010
13421
|
const tracker = getSectionsTracker();
|
|
14011
13422
|
let sections = [];
|
|
14012
13423
|
try {
|
|
@@ -14014,12 +13425,10 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
14014
13425
|
} catch {
|
|
14015
13426
|
}
|
|
14016
13427
|
const inEditor = typeof window !== "undefined" && window.self !== window.top;
|
|
14017
|
-
if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter ===
|
|
13428
|
+
if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === effectiveInsertAfter)) {
|
|
14018
13429
|
sections.push({
|
|
14019
13430
|
type: "scheduling",
|
|
14020
|
-
insertAfter:
|
|
14021
|
-
anchorId,
|
|
14022
|
-
beforeId: beforeId ?? null,
|
|
13431
|
+
insertAfter: effectiveInsertAfter,
|
|
14023
13432
|
pagePath: window.location.pathname,
|
|
14024
13433
|
...scheduleId ? { scheduleId } : {}
|
|
14025
13434
|
});
|
|
@@ -14033,8 +13442,7 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
|
|
|
14033
13442
|
for (let i = pending.length - 1; i >= 0; i--) {
|
|
14034
13443
|
const entry = pending[i];
|
|
14035
13444
|
const shouldNotify = typeof notifyOnConnect === "function" ? notifyOnConnect(entry) : notifyOnConnect;
|
|
14036
|
-
|
|
14037
|
-
if (mountSchedulingWidget(anchorId, shouldNotify, entry.scheduleId ?? null, beforeId, entry.insertAfter)) {
|
|
13445
|
+
if (mountSchedulingWidget(entry.insertAfter, shouldNotify, entry.scheduleId)) {
|
|
14038
13446
|
pending.splice(i, 1);
|
|
14039
13447
|
}
|
|
14040
13448
|
}
|
|
@@ -14182,13 +13590,6 @@ function isInsideLinkEditor(target) {
|
|
|
14182
13590
|
target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
|
|
14183
13591
|
);
|
|
14184
13592
|
}
|
|
14185
|
-
function isInsideFloatingPanel(target) {
|
|
14186
|
-
return Boolean(target.closest("[data-ohw-floating-panel]"));
|
|
14187
|
-
}
|
|
14188
|
-
function isPointOverFloatingPanel(clientX, clientY) {
|
|
14189
|
-
const el = document.elementFromPoint(clientX, clientY);
|
|
14190
|
-
return Boolean(el instanceof Element && el.closest("[data-ohw-floating-panel]"));
|
|
14191
|
-
}
|
|
14192
13593
|
function getHrefKeyFromElement(el) {
|
|
14193
13594
|
if (!el) return null;
|
|
14194
13595
|
const anchor = el.closest("[data-ohw-href-key]");
|
|
@@ -14339,6 +13740,13 @@ function resolveFooterColumnSelectionTarget(target, clientX, clientY) {
|
|
|
14339
13740
|
if (isPointOverNavItem(column, clientX, clientY)) return null;
|
|
14340
13741
|
return column;
|
|
14341
13742
|
}
|
|
13743
|
+
function isPointOverLogo(x, y) {
|
|
13744
|
+
for (const root of document.querySelectorAll('[data-ohw-role="logo"], [data-ohw-logo]')) {
|
|
13745
|
+
const r2 = root.getBoundingClientRect();
|
|
13746
|
+
if (r2.width > 0 && r2.height > 0 && x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom) return true;
|
|
13747
|
+
}
|
|
13748
|
+
return false;
|
|
13749
|
+
}
|
|
14342
13750
|
function isPointOverNavigation(x, y) {
|
|
14343
13751
|
const roots = /* @__PURE__ */ new Set();
|
|
14344
13752
|
const navRoot = document.querySelector("[data-ohw-nav-root]") ?? document.querySelector("nav");
|
|
@@ -14427,7 +13835,7 @@ function getNavigationSelectionParent(el) {
|
|
|
14427
13835
|
if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
|
|
14428
13836
|
return getFooterLinksContainer();
|
|
14429
13837
|
}
|
|
14430
|
-
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") ||
|
|
13838
|
+
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
|
|
14431
13839
|
return getNavigationRoot(el);
|
|
14432
13840
|
}
|
|
14433
13841
|
return null;
|
|
@@ -14673,7 +14081,7 @@ function EditGlowChrome({
|
|
|
14673
14081
|
hideHandle = false
|
|
14674
14082
|
}) {
|
|
14675
14083
|
const GAP = SELECTION_CHROME_GAP2;
|
|
14676
|
-
return /* @__PURE__ */
|
|
14084
|
+
return /* @__PURE__ */ jsxs20(
|
|
14677
14085
|
"div",
|
|
14678
14086
|
{
|
|
14679
14087
|
ref: elRef,
|
|
@@ -14688,7 +14096,7 @@ function EditGlowChrome({
|
|
|
14688
14096
|
zIndex: 2147483646
|
|
14689
14097
|
},
|
|
14690
14098
|
children: [
|
|
14691
|
-
/* @__PURE__ */
|
|
14099
|
+
/* @__PURE__ */ jsx33(
|
|
14692
14100
|
"div",
|
|
14693
14101
|
{
|
|
14694
14102
|
style: {
|
|
@@ -14701,7 +14109,7 @@ function EditGlowChrome({
|
|
|
14701
14109
|
}
|
|
14702
14110
|
}
|
|
14703
14111
|
),
|
|
14704
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */
|
|
14112
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ jsx33(
|
|
14705
14113
|
"div",
|
|
14706
14114
|
{
|
|
14707
14115
|
"data-ohw-drag-handle-container": "",
|
|
@@ -14713,7 +14121,7 @@ function EditGlowChrome({
|
|
|
14713
14121
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
14714
14122
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
14715
14123
|
},
|
|
14716
|
-
children: /* @__PURE__ */
|
|
14124
|
+
children: /* @__PURE__ */ jsx33(
|
|
14717
14125
|
DragHandle,
|
|
14718
14126
|
{
|
|
14719
14127
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -14923,7 +14331,7 @@ function FloatingToolbar({
|
|
|
14923
14331
|
return () => ro.disconnect();
|
|
14924
14332
|
}, [showEditLink, activeCommands]);
|
|
14925
14333
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
14926
|
-
return /* @__PURE__ */
|
|
14334
|
+
return /* @__PURE__ */ jsx33(
|
|
14927
14335
|
"div",
|
|
14928
14336
|
{
|
|
14929
14337
|
ref: setRefs,
|
|
@@ -14935,12 +14343,12 @@ function FloatingToolbar({
|
|
|
14935
14343
|
zIndex: 2147483647,
|
|
14936
14344
|
pointerEvents: "auto"
|
|
14937
14345
|
},
|
|
14938
|
-
children: /* @__PURE__ */
|
|
14939
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */
|
|
14940
|
-
gi > 0 && /* @__PURE__ */
|
|
14346
|
+
children: /* @__PURE__ */ jsxs20(CustomToolbar, { children: [
|
|
14347
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs20(React11.Fragment, { children: [
|
|
14348
|
+
gi > 0 && /* @__PURE__ */ jsx33(CustomToolbarDivider, {}),
|
|
14941
14349
|
btns.map((btn) => {
|
|
14942
14350
|
const isActive = activeCommands.has(btn.cmd);
|
|
14943
|
-
return /* @__PURE__ */
|
|
14351
|
+
return /* @__PURE__ */ jsx33(
|
|
14944
14352
|
CustomToolbarButton,
|
|
14945
14353
|
{
|
|
14946
14354
|
title: btn.title,
|
|
@@ -14949,7 +14357,7 @@ function FloatingToolbar({
|
|
|
14949
14357
|
e.preventDefault();
|
|
14950
14358
|
onCommand(btn.cmd);
|
|
14951
14359
|
},
|
|
14952
|
-
children: /* @__PURE__ */
|
|
14360
|
+
children: /* @__PURE__ */ jsx33(
|
|
14953
14361
|
"svg",
|
|
14954
14362
|
{
|
|
14955
14363
|
width: "16",
|
|
@@ -14970,7 +14378,7 @@ function FloatingToolbar({
|
|
|
14970
14378
|
);
|
|
14971
14379
|
})
|
|
14972
14380
|
] }, gi)),
|
|
14973
|
-
showEditLink ? /* @__PURE__ */
|
|
14381
|
+
showEditLink ? /* @__PURE__ */ jsx33(
|
|
14974
14382
|
CustomToolbarButton,
|
|
14975
14383
|
{
|
|
14976
14384
|
type: "button",
|
|
@@ -14984,7 +14392,7 @@ function FloatingToolbar({
|
|
|
14984
14392
|
e.preventDefault();
|
|
14985
14393
|
e.stopPropagation();
|
|
14986
14394
|
},
|
|
14987
|
-
children: /* @__PURE__ */
|
|
14395
|
+
children: /* @__PURE__ */ jsx33(Link2, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
14988
14396
|
}
|
|
14989
14397
|
) : null
|
|
14990
14398
|
] })
|
|
@@ -15001,7 +14409,7 @@ function StateToggle({
|
|
|
15001
14409
|
states,
|
|
15002
14410
|
onStateChange
|
|
15003
14411
|
}) {
|
|
15004
|
-
return /* @__PURE__ */
|
|
14412
|
+
return /* @__PURE__ */ jsx33(
|
|
15005
14413
|
ToggleGroup,
|
|
15006
14414
|
{
|
|
15007
14415
|
"data-ohw-state-toggle": "",
|
|
@@ -15015,12 +14423,11 @@ function StateToggle({
|
|
|
15015
14423
|
left: rect.right - 8,
|
|
15016
14424
|
transform: "translateX(-100%)"
|
|
15017
14425
|
},
|
|
15018
|
-
children: states.map((state) => /* @__PURE__ */
|
|
14426
|
+
children: states.map((state) => /* @__PURE__ */ jsx33(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
15019
14427
|
}
|
|
15020
14428
|
);
|
|
15021
14429
|
}
|
|
15022
14430
|
var contentCache = /* @__PURE__ */ new Map();
|
|
15023
|
-
var fetchedContentPaths = /* @__PURE__ */ new Set();
|
|
15024
14431
|
function resolveSubdomain(subdomainFromQuery) {
|
|
15025
14432
|
if (subdomainFromQuery) return subdomainFromQuery;
|
|
15026
14433
|
if (typeof window !== "undefined") {
|
|
@@ -15359,6 +14766,13 @@ function OhhwellsBridge() {
|
|
|
15359
14766
|
const [isItemDragging, setIsItemDragging] = useState11(false);
|
|
15360
14767
|
const [isFooterFrameSelection, setIsFooterFrameSelection] = useState11(false);
|
|
15361
14768
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
14769
|
+
const [floatingPanel, setFloatingPanel] = useState11(null);
|
|
14770
|
+
const floatingPanelOpenRef = useRef9(false);
|
|
14771
|
+
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
14772
|
+
const [floatingPanelPos, setFloatingPanelPos] = useState11(null);
|
|
14773
|
+
const [logoSizeDraft, setLogoSizeDraft] = useState11(null);
|
|
14774
|
+
const [editorViewport, setEditorViewport] = useState11("desktop");
|
|
14775
|
+
const [parentScrollSnap, setParentScrollSnap] = useState11(null);
|
|
15362
14776
|
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState11(null);
|
|
15363
14777
|
const [footerHeadingVisible, setFooterHeadingVisible] = useState11(null);
|
|
15364
14778
|
const footerDragRef = useRef9(null);
|
|
@@ -15373,16 +14787,7 @@ function OhhwellsBridge() {
|
|
|
15373
14787
|
const addNavAfterAnchorRef = useRef9(null);
|
|
15374
14788
|
const editContentRef = useRef9({});
|
|
15375
14789
|
const aiSectionsRef = useRef9("");
|
|
15376
|
-
const brandKitRef = useRef9("");
|
|
15377
|
-
const stylesRef = useRef9("");
|
|
15378
14790
|
const pendingDeleteUndoRef = useRef9(null);
|
|
15379
|
-
const [floatingPanel, setFloatingPanel] = useState11(null);
|
|
15380
|
-
const floatingPanelOpenRef = useRef9(false);
|
|
15381
|
-
const setFloatingPanelRef = useRef9(setFloatingPanel);
|
|
15382
|
-
const [floatingPanelPos, setFloatingPanelPos] = useState11(null);
|
|
15383
|
-
const [logoSizeDraft, setLogoSizeDraft] = useState11(null);
|
|
15384
|
-
const [editorViewport, setEditorViewport] = useState11("desktop");
|
|
15385
|
-
const [parentScrollSnap, setParentScrollSnap] = useState11(null);
|
|
15386
14791
|
const [sitePages, setSitePages] = useState11([]);
|
|
15387
14792
|
const [sectionsByPath, setSectionsByPath] = useState11({});
|
|
15388
14793
|
const sectionsPrefetchGenRef = useRef9(0);
|
|
@@ -15391,18 +14796,7 @@ function OhhwellsBridge() {
|
|
|
15391
14796
|
const linkPopoverOpenRef = useRef9(false);
|
|
15392
14797
|
const linkPopoverGraceUntilRef = useRef9(0);
|
|
15393
14798
|
setLinkPopoverRef.current = setLinkPopover;
|
|
15394
|
-
setFloatingPanelRef.current = setFloatingPanel;
|
|
15395
14799
|
linkPopoverSessionRef.current = linkPopover;
|
|
15396
|
-
floatingPanelOpenRef.current = Boolean(floatingPanel);
|
|
15397
|
-
useEffect12(() => {
|
|
15398
|
-
const syncViewport = () => {
|
|
15399
|
-
const next = window.innerWidth <= 480 ? "mobile" : "desktop";
|
|
15400
|
-
setEditorViewport((prev) => prev === next ? prev : next);
|
|
15401
|
-
};
|
|
15402
|
-
syncViewport();
|
|
15403
|
-
window.addEventListener("resize", syncViewport);
|
|
15404
|
-
return () => window.removeEventListener("resize", syncViewport);
|
|
15405
|
-
}, []);
|
|
15406
14800
|
const {
|
|
15407
14801
|
navDragRef,
|
|
15408
14802
|
navDropSlots,
|
|
@@ -16487,6 +15881,25 @@ function OhhwellsBridge() {
|
|
|
16487
15881
|
setLogoSizeDraft(null);
|
|
16488
15882
|
deselectRef.current();
|
|
16489
15883
|
}, []);
|
|
15884
|
+
useEffect12(() => {
|
|
15885
|
+
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
15886
|
+
if (!session || !logoSizeDraft) {
|
|
15887
|
+
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
15888
|
+
return;
|
|
15889
|
+
}
|
|
15890
|
+
postToParentRef.current({
|
|
15891
|
+
type: "ow:logo-size-panel",
|
|
15892
|
+
open: true,
|
|
15893
|
+
title: session.title,
|
|
15894
|
+
context: session.context ?? "",
|
|
15895
|
+
placement: session.placement,
|
|
15896
|
+
viewport: editorViewport,
|
|
15897
|
+
mobileFollowing: logoSizeDraft.mobileFollowing,
|
|
15898
|
+
sizePx: editorViewport === "mobile" && !logoSizeDraft.mobileFollowing ? logoSizeDraft.mobilePx : logoSizeDraft.desktopPx,
|
|
15899
|
+
min: LOGO_SIZE_MIN,
|
|
15900
|
+
max: LOGO_SIZE_MAX
|
|
15901
|
+
});
|
|
15902
|
+
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
16490
15903
|
const persistLogoSizeDraft = useCallback7(
|
|
16491
15904
|
(placement, draft) => {
|
|
16492
15905
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
@@ -16645,27 +16058,15 @@ function OhhwellsBridge() {
|
|
|
16645
16058
|
}
|
|
16646
16059
|
const applyContent = (content) => {
|
|
16647
16060
|
const imageLoads = [];
|
|
16648
|
-
if (typeof content[BRAND_KIT_KEY] === "string") {
|
|
16649
|
-
brandKitRef.current = content[BRAND_KIT_KEY];
|
|
16650
|
-
applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
|
|
16651
|
-
}
|
|
16652
16061
|
if (typeof content[AI_SECTIONS_KEY] === "string") {
|
|
16653
16062
|
aiSectionsRef.current = content[AI_SECTIONS_KEY];
|
|
16654
16063
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
16655
16064
|
}
|
|
16656
|
-
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
16657
|
-
stylesRef.current = content[STYLE_STORE_KEY];
|
|
16658
|
-
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
16659
|
-
}
|
|
16660
|
-
applyBrandChrome(content);
|
|
16661
16065
|
for (const [key, val] of Object.entries(content)) {
|
|
16662
16066
|
if (key === "__ohw_sections") continue;
|
|
16663
16067
|
if (key === AI_SECTIONS_KEY) continue;
|
|
16664
16068
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
16665
16069
|
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
16666
|
-
if (key === BRAND_KIT_KEY) continue;
|
|
16667
|
-
if (key === STYLE_STORE_KEY) continue;
|
|
16668
|
-
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
16669
16070
|
if (applyVideoSettingNode(key, val)) continue;
|
|
16670
16071
|
if (applyCarouselNode(key, val)) continue;
|
|
16671
16072
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -16723,9 +16124,7 @@ function OhhwellsBridge() {
|
|
|
16723
16124
|
let cancelled = false;
|
|
16724
16125
|
setFetchState("loading");
|
|
16725
16126
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
16726
|
-
|
|
16727
|
-
fetchedContentPaths.add(`${subdomain}::${initialPath}`);
|
|
16728
|
-
fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(initialPath)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
|
|
16127
|
+
fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
|
|
16729
16128
|
if (cancelled) return;
|
|
16730
16129
|
const content = data?.content ?? {};
|
|
16731
16130
|
contentCache.set(subdomain, content);
|
|
@@ -16845,21 +16244,10 @@ function OhhwellsBridge() {
|
|
|
16845
16244
|
initSectionInstancesFromContent(content, window.location.pathname);
|
|
16846
16245
|
observer?.disconnect();
|
|
16847
16246
|
try {
|
|
16848
|
-
applyBrandChrome(content);
|
|
16849
|
-
if (typeof content[BRAND_KIT_KEY] === "string") {
|
|
16850
|
-
applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
|
|
16851
|
-
}
|
|
16852
|
-
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
16853
|
-
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
16854
|
-
}
|
|
16855
16247
|
for (const [key, val] of Object.entries(content)) {
|
|
16856
16248
|
if (key === "__ohw_sections") continue;
|
|
16857
16249
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
16858
16250
|
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
16859
|
-
if (key === BRAND_KIT_KEY) continue;
|
|
16860
|
-
if (key === STYLE_STORE_KEY) continue;
|
|
16861
|
-
if (key === STYLE_STORE_KEY) continue;
|
|
16862
|
-
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
16863
16251
|
if (applyVideoSettingNode(key, val)) continue;
|
|
16864
16252
|
if (applyCarouselNode(key, val)) continue;
|
|
16865
16253
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -16902,17 +16290,6 @@ function OhhwellsBridge() {
|
|
|
16902
16290
|
debounceTimer = setTimeout(applyFromCache, 150);
|
|
16903
16291
|
};
|
|
16904
16292
|
applyFromCache();
|
|
16905
|
-
const pathCacheKey = `${subdomain}::${pathname}`;
|
|
16906
|
-
if (!fetchedContentPaths.has(pathCacheKey)) {
|
|
16907
|
-
fetchedContentPaths.add(pathCacheKey);
|
|
16908
|
-
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
16909
|
-
fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(pathname)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
|
|
16910
|
-
if (!data?.content) return;
|
|
16911
|
-
contentCache.set(subdomain, data.content);
|
|
16912
|
-
applyFromCache();
|
|
16913
|
-
}).catch(() => {
|
|
16914
|
-
});
|
|
16915
|
-
}
|
|
16916
16293
|
observer = new MutationObserver(scheduleApply);
|
|
16917
16294
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
16918
16295
|
return () => {
|
|
@@ -17006,31 +16383,26 @@ function OhhwellsBridge() {
|
|
|
17006
16383
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
17007
16384
|
useEffect12(() => {
|
|
17008
16385
|
if (!isEditMode) return;
|
|
17009
|
-
let lastPosted = 0;
|
|
17010
16386
|
const measure = () => {
|
|
17011
16387
|
const h = document.body.scrollHeight;
|
|
17012
|
-
if (h > 50
|
|
17013
|
-
lastPosted = h;
|
|
17014
|
-
postToParent2({ type: "ow:height", height: h });
|
|
17015
|
-
}
|
|
17016
|
-
};
|
|
17017
|
-
let raf = null;
|
|
17018
|
-
const schedule = () => {
|
|
17019
|
-
if (raf != null) return;
|
|
17020
|
-
raf = requestAnimationFrame(() => {
|
|
17021
|
-
raf = null;
|
|
17022
|
-
measure();
|
|
17023
|
-
});
|
|
16388
|
+
if (h > 50) postToParent2({ type: "ow:height", height: h });
|
|
17024
16389
|
};
|
|
17025
16390
|
const t1 = setTimeout(measure, 50);
|
|
17026
16391
|
const t2 = setTimeout(measure, 500);
|
|
17027
|
-
|
|
17028
|
-
|
|
16392
|
+
let lastWidth = window.innerWidth;
|
|
16393
|
+
let resizeTimer = null;
|
|
16394
|
+
const handleResize = () => {
|
|
16395
|
+
if (window.innerWidth === lastWidth) return;
|
|
16396
|
+
lastWidth = window.innerWidth;
|
|
16397
|
+
if (resizeTimer) clearTimeout(resizeTimer);
|
|
16398
|
+
resizeTimer = setTimeout(measure, 150);
|
|
16399
|
+
};
|
|
16400
|
+
window.addEventListener("resize", handleResize);
|
|
17029
16401
|
return () => {
|
|
17030
16402
|
clearTimeout(t1);
|
|
17031
16403
|
clearTimeout(t2);
|
|
17032
|
-
if (
|
|
17033
|
-
|
|
16404
|
+
if (resizeTimer) clearTimeout(resizeTimer);
|
|
16405
|
+
window.removeEventListener("resize", handleResize);
|
|
17034
16406
|
};
|
|
17035
16407
|
}, [pathname, isEditMode, postToParent2]);
|
|
17036
16408
|
useEffect12(() => {
|
|
@@ -17211,12 +16583,10 @@ function OhhwellsBridge() {
|
|
|
17211
16583
|
return;
|
|
17212
16584
|
}
|
|
17213
16585
|
const target = e.target;
|
|
17214
|
-
if (target.closest("[data-ohw-ai-review]")) return;
|
|
17215
16586
|
if (target.closest("[data-ohw-toolbar]")) return;
|
|
17216
16587
|
if (target.closest("[data-ohw-state-toggle]")) return;
|
|
17217
16588
|
if (target.closest("[data-ohw-max-badge]")) return;
|
|
17218
16589
|
if (isInsideLinkEditor(target)) return;
|
|
17219
|
-
if (isInsideFloatingPanel(target)) return;
|
|
17220
16590
|
if (target.closest("[data-ohw-form-toolbar]")) return;
|
|
17221
16591
|
if (target.closest(
|
|
17222
16592
|
'[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
|
|
@@ -17490,12 +16860,10 @@ function OhhwellsBridge() {
|
|
|
17490
16860
|
};
|
|
17491
16861
|
const handleDblClick = (e) => {
|
|
17492
16862
|
const target = e.target;
|
|
17493
|
-
if (target.closest("[data-ohw-ai-review]")) return;
|
|
17494
16863
|
if (target.closest("[data-ohw-toolbar]")) return;
|
|
17495
16864
|
if (target.closest("[data-ohw-state-toggle]")) return;
|
|
17496
16865
|
if (target.closest("[data-ohw-max-badge]")) return;
|
|
17497
16866
|
if (isInsideLinkEditor(target)) return;
|
|
17498
|
-
if (isInsideFloatingPanel(target)) return;
|
|
17499
16867
|
if (target.closest('[data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]')) {
|
|
17500
16868
|
return;
|
|
17501
16869
|
}
|
|
@@ -17536,14 +16904,11 @@ function OhhwellsBridge() {
|
|
|
17536
16904
|
setSiblingHintRects([]);
|
|
17537
16905
|
return;
|
|
17538
16906
|
}
|
|
17539
|
-
if (document.documentElement.hasAttribute("data-ohw-panel-dragging") ||
|
|
16907
|
+
if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || target.closest("[data-ohw-floating-panel]")) {
|
|
17540
16908
|
hoveredItemElRef.current = null;
|
|
17541
16909
|
setHoveredItemRect(null);
|
|
17542
16910
|
hoveredNavContainerRef.current = null;
|
|
17543
16911
|
setHoveredNavContainerRect(null);
|
|
17544
|
-
siblingHintElRef.current = null;
|
|
17545
|
-
setSiblingHintRect(null);
|
|
17546
|
-
setSiblingHintRects([]);
|
|
17547
16912
|
return;
|
|
17548
16913
|
}
|
|
17549
16914
|
{
|
|
@@ -17652,6 +17017,7 @@ function OhhwellsBridge() {
|
|
|
17652
17017
|
hoveredNavContainerRef.current = null;
|
|
17653
17018
|
setHoveredNavContainerRect(null);
|
|
17654
17019
|
hoveredItemElRef.current = editable;
|
|
17020
|
+
setHoveredItemRect(editable.getBoundingClientRect());
|
|
17655
17021
|
}
|
|
17656
17022
|
}
|
|
17657
17023
|
}
|
|
@@ -17948,7 +17314,7 @@ function OhhwellsBridge() {
|
|
|
17948
17314
|
}
|
|
17949
17315
|
};
|
|
17950
17316
|
const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
|
|
17951
|
-
if (linkPopoverOpenRef.current
|
|
17317
|
+
if (linkPopoverOpenRef.current) {
|
|
17952
17318
|
if (hoveredImageRef.current) {
|
|
17953
17319
|
hoveredImageRef.current = null;
|
|
17954
17320
|
hoveredImageHasTextOverlapRef.current = false;
|
|
@@ -17964,6 +17330,11 @@ function OhhwellsBridge() {
|
|
|
17964
17330
|
probeNavigationHoverAt(x, y);
|
|
17965
17331
|
return;
|
|
17966
17332
|
}
|
|
17333
|
+
if (isPointOverLogo(x, y)) {
|
|
17334
|
+
dismissImageHover();
|
|
17335
|
+
probeNavigationHoverAt(x, y);
|
|
17336
|
+
return;
|
|
17337
|
+
}
|
|
17967
17338
|
const overMoreMenu = document.elementFromPoint(x, y)?.closest?.(
|
|
17968
17339
|
'[data-ohw-more-menu], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]'
|
|
17969
17340
|
);
|
|
@@ -18202,7 +17573,7 @@ function OhhwellsBridge() {
|
|
|
18202
17573
|
}
|
|
18203
17574
|
};
|
|
18204
17575
|
const probeHoverCardsAt = (clientX, clientY, fromParentViewport = false) => {
|
|
18205
|
-
if (linkPopoverOpenRef.current ||
|
|
17576
|
+
if (linkPopoverOpenRef.current || document.documentElement.hasAttribute("data-ohw-section-picking")) {
|
|
18206
17577
|
if (activeStateElRef.current) {
|
|
18207
17578
|
activeStateElRef.current.removeAttribute("data-ohw-state-hovered");
|
|
18208
17579
|
activeStateElRef.current = null;
|
|
@@ -18277,7 +17648,8 @@ function OhhwellsBridge() {
|
|
|
18277
17648
|
};
|
|
18278
17649
|
const handleMouseMove = (e) => {
|
|
18279
17650
|
const { clientX, clientY } = e;
|
|
18280
|
-
if (
|
|
17651
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
17652
|
+
if (isOverEditorChrome(clientX, clientY)) {
|
|
18281
17653
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
|
|
18282
17654
|
formHoverElRef.current = null;
|
|
18283
17655
|
setFormHoverRect(null);
|
|
@@ -18285,12 +17657,6 @@ function OhhwellsBridge() {
|
|
|
18285
17657
|
setHoveredItemRect(null);
|
|
18286
17658
|
hoveredNavContainerRef.current = null;
|
|
18287
17659
|
setHoveredNavContainerRect(null);
|
|
18288
|
-
siblingHintElRef.current = null;
|
|
18289
|
-
setSiblingHintRect(null);
|
|
18290
|
-
setSiblingHintRects([]);
|
|
18291
|
-
dismissImageHover();
|
|
18292
|
-
clearImageHover();
|
|
18293
|
-
setSectionGap(null);
|
|
18294
17660
|
return;
|
|
18295
17661
|
}
|
|
18296
17662
|
probeSectionGapAt(clientX, clientY);
|
|
@@ -18301,11 +17667,7 @@ function OhhwellsBridge() {
|
|
|
18301
17667
|
if (e.data?.type !== "ow:pointer-sync") return;
|
|
18302
17668
|
const { clientX, clientY } = e.data;
|
|
18303
17669
|
if (typeof clientX !== "number" || typeof clientY !== "number") return;
|
|
18304
|
-
if (
|
|
18305
|
-
dismissImageHover();
|
|
18306
|
-
clearImageHover();
|
|
18307
|
-
return;
|
|
18308
|
-
}
|
|
17670
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
18309
17671
|
probeSectionGapAt(clientX, clientY);
|
|
18310
17672
|
probeImageAt(clientX, clientY);
|
|
18311
17673
|
probeHoverCardsAt(clientX, clientY);
|
|
@@ -18551,19 +17913,10 @@ function OhhwellsBridge() {
|
|
|
18551
17913
|
if (e.data?.type !== "ow:hydrate") return;
|
|
18552
17914
|
const content = e.data.content;
|
|
18553
17915
|
if (!content) return;
|
|
18554
|
-
if (typeof content[BRAND_KIT_KEY] === "string") {
|
|
18555
|
-
brandKitRef.current = content[BRAND_KIT_KEY];
|
|
18556
|
-
applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
|
|
18557
|
-
}
|
|
18558
17916
|
if (typeof content[AI_SECTIONS_KEY] === "string") {
|
|
18559
17917
|
aiSectionsRef.current = content[AI_SECTIONS_KEY];
|
|
18560
17918
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
18561
17919
|
}
|
|
18562
|
-
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
18563
|
-
stylesRef.current = content[STYLE_STORE_KEY];
|
|
18564
|
-
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
18565
|
-
}
|
|
18566
|
-
applyBrandChrome(content);
|
|
18567
17920
|
let sectionsJson = null;
|
|
18568
17921
|
for (const [key, val] of Object.entries(content)) {
|
|
18569
17922
|
if (key === "__ohw_sections") {
|
|
@@ -18573,9 +17926,6 @@ function OhhwellsBridge() {
|
|
|
18573
17926
|
if (key === AI_SECTIONS_KEY) continue;
|
|
18574
17927
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
18575
17928
|
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
18576
|
-
if (key === BRAND_KIT_KEY) continue;
|
|
18577
|
-
if (key === STYLE_STORE_KEY) continue;
|
|
18578
|
-
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
18579
17929
|
if (applyVideoSettingNode(key, val)) continue;
|
|
18580
17930
|
if (applyCarouselNode(key, val)) continue;
|
|
18581
17931
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -18677,10 +18027,7 @@ function OhhwellsBridge() {
|
|
|
18677
18027
|
const payload = e.data.payload;
|
|
18678
18028
|
if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
|
|
18679
18029
|
const previous = aiSectionsRef.current;
|
|
18680
|
-
const nextState = applyTreeToState(parseAiSectionsState(previous),
|
|
18681
|
-
...payload,
|
|
18682
|
-
path: payload.path ?? window.location.pathname
|
|
18683
|
-
});
|
|
18030
|
+
const nextState = applyTreeToState(parseAiSectionsState(previous), payload);
|
|
18684
18031
|
const nextValue = serializeAiSectionsState(nextState);
|
|
18685
18032
|
aiSectionsRef.current = nextValue;
|
|
18686
18033
|
applyAiSectionsToDom(nextState);
|
|
@@ -18717,42 +18064,12 @@ function OhhwellsBridge() {
|
|
|
18717
18064
|
const value = typeof e.data.value === "string" ? e.data.value : "";
|
|
18718
18065
|
aiSectionsRef.current = value;
|
|
18719
18066
|
applyAiSectionsToDom(parseAiSectionsState(value));
|
|
18720
|
-
applyStylesToDom(parseStyleStore(stylesRef.current));
|
|
18721
18067
|
const restoredHeight = document.documentElement.scrollHeight;
|
|
18722
18068
|
if (restoredHeight > 50) postToParentRef.current({ type: "ow:height", height: restoredHeight });
|
|
18723
18069
|
postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: value }] });
|
|
18724
18070
|
postAiSectionsChanged();
|
|
18725
18071
|
};
|
|
18726
18072
|
window.addEventListener("message", handleAiSetSections);
|
|
18727
|
-
const handleAiSetBrand = (e) => {
|
|
18728
|
-
if (e.data?.type !== "ow:ai-set-brand") return;
|
|
18729
|
-
const value = typeof e.data.value === "string" ? e.data.value : "";
|
|
18730
|
-
const previous = brandKitRef.current;
|
|
18731
|
-
brandKitRef.current = value;
|
|
18732
|
-
applyBrandToDom(parseBrandKit(value));
|
|
18733
|
-
if (aiSectionsRef.current) applyAiSectionsToDom(parseAiSectionsState(aiSectionsRef.current));
|
|
18734
|
-
applyStylesToDom(parseStyleStore(stylesRef.current));
|
|
18735
|
-
postToParentRef.current({ type: "ow:change", nodes: [{ key: BRAND_KIT_KEY, text: value }] });
|
|
18736
|
-
postToParentRef.current({ type: "ow:ai-brand-applied", previous, value });
|
|
18737
|
-
};
|
|
18738
|
-
window.addEventListener("message", handleAiSetBrand);
|
|
18739
|
-
const handleAiSetStyles = (e) => {
|
|
18740
|
-
if (e.data?.type !== "ow:ai-set-styles") return;
|
|
18741
|
-
const value = typeof e.data.value === "string" ? e.data.value : "";
|
|
18742
|
-
const previous = stylesRef.current;
|
|
18743
|
-
stylesRef.current = value;
|
|
18744
|
-
applyStylesToDom(parseStyleStore(value));
|
|
18745
|
-
postToParentRef.current({ type: "ow:change", nodes: [{ key: STYLE_STORE_KEY, text: value }] });
|
|
18746
|
-
postToParentRef.current({ type: "ow:ai-styles-applied", previous, value });
|
|
18747
|
-
};
|
|
18748
|
-
window.addEventListener("message", handleAiSetStyles);
|
|
18749
|
-
const handleGetBrand = (e) => {
|
|
18750
|
-
if (e.data?.type !== "ow:get-brand") return;
|
|
18751
|
-
const template = deriveTemplateBrand();
|
|
18752
|
-
const value = brandKitRef.current || (template ? JSON.stringify(template) : "");
|
|
18753
|
-
postToParentRef.current({ type: "ow:brand-value", value });
|
|
18754
|
-
};
|
|
18755
|
-
window.addEventListener("message", handleGetBrand);
|
|
18756
18073
|
const handleDeactivate = (e) => {
|
|
18757
18074
|
if (e.data?.type !== "ow:deactivate") return;
|
|
18758
18075
|
if (Date.now() < linkPopoverGraceUntilRef.current) return;
|
|
@@ -18761,12 +18078,6 @@ function OhhwellsBridge() {
|
|
|
18761
18078
|
closeLinkPopoverRef.current();
|
|
18762
18079
|
return;
|
|
18763
18080
|
}
|
|
18764
|
-
if (floatingPanelOpenRef.current) {
|
|
18765
|
-
setFloatingPanelRef.current(null);
|
|
18766
|
-
deselectRef.current();
|
|
18767
|
-
deactivateRef.current();
|
|
18768
|
-
return;
|
|
18769
|
-
}
|
|
18770
18081
|
deselectRef.current();
|
|
18771
18082
|
deactivateRef.current();
|
|
18772
18083
|
};
|
|
@@ -19013,12 +18324,6 @@ function OhhwellsBridge() {
|
|
|
19013
18324
|
if (aiSectionsRef.current) {
|
|
19014
18325
|
nodes.push({ key: AI_SECTIONS_KEY, type: "sections", text: aiSectionsRef.current });
|
|
19015
18326
|
}
|
|
19016
|
-
if (stylesRef.current) {
|
|
19017
|
-
nodes.push({ key: STYLE_STORE_KEY, type: "styles", text: stylesRef.current });
|
|
19018
|
-
}
|
|
19019
|
-
if (brandKitRef.current) {
|
|
19020
|
-
nodes.push({ key: BRAND_KIT_KEY, type: "brand", text: brandKitRef.current });
|
|
19021
|
-
}
|
|
19022
18327
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
19023
18328
|
const formKey = formKeyOf(form);
|
|
19024
18329
|
if (!formKey) return;
|
|
@@ -19036,12 +18341,8 @@ function OhhwellsBridge() {
|
|
|
19036
18341
|
if (inserted) {
|
|
19037
18342
|
const tracker = getSectionsTracker();
|
|
19038
18343
|
postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
|
|
19039
|
-
const
|
|
19040
|
-
|
|
19041
|
-
if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
|
|
19042
|
-
};
|
|
19043
|
-
reportHeight();
|
|
19044
|
-
setTimeout(reportHeight, 500);
|
|
18344
|
+
const h = document.documentElement.scrollHeight;
|
|
18345
|
+
if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
|
|
19045
18346
|
}
|
|
19046
18347
|
};
|
|
19047
18348
|
const handleSwitchSchedule = (e) => {
|
|
@@ -19428,9 +18729,6 @@ function OhhwellsBridge() {
|
|
|
19428
18729
|
window.removeEventListener("message", handleAiApplyTree);
|
|
19429
18730
|
window.removeEventListener("message", handleAiDeleteSection);
|
|
19430
18731
|
window.removeEventListener("message", handleAiSetSections);
|
|
19431
|
-
window.removeEventListener("message", handleAiSetBrand);
|
|
19432
|
-
window.removeEventListener("message", handleAiSetStyles);
|
|
19433
|
-
window.removeEventListener("message", handleGetBrand);
|
|
19434
18732
|
window.removeEventListener("message", handleDeactivate);
|
|
19435
18733
|
window.removeEventListener("message", handleToastAction);
|
|
19436
18734
|
window.removeEventListener("message", handleFormCount);
|
|
@@ -19637,7 +18935,7 @@ function OhhwellsBridge() {
|
|
|
19637
18935
|
postToParent2({
|
|
19638
18936
|
type: "ow:ready",
|
|
19639
18937
|
version: "1",
|
|
19640
|
-
bridgeVersion: "0.1.
|
|
18938
|
+
bridgeVersion: "0.1.65",
|
|
19641
18939
|
path: pathname,
|
|
19642
18940
|
nodes: collectEditableNodes(editContentRef.current),
|
|
19643
18941
|
sections
|
|
@@ -19691,6 +18989,44 @@ function OhhwellsBridge() {
|
|
|
19691
18989
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
19692
18990
|
refreshActiveCommandsRef.current();
|
|
19693
18991
|
}, []);
|
|
18992
|
+
useEffect12(() => {
|
|
18993
|
+
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
18994
|
+
if (!session || !logoSizeDraft) return;
|
|
18995
|
+
const onPanelAction = (e) => {
|
|
18996
|
+
const type = e.data?.type;
|
|
18997
|
+
if (type === "ow:logo-size-close") {
|
|
18998
|
+
closeFloatingPanelAndDeselect();
|
|
18999
|
+
return;
|
|
19000
|
+
}
|
|
19001
|
+
if (type === "ow:logo-size-update-everywhere") {
|
|
19002
|
+
postToParentRef.current({ type: "ow:open-logo-settings", ...readLogoIdentityFromDom() });
|
|
19003
|
+
return;
|
|
19004
|
+
}
|
|
19005
|
+
if (type === "ow:logo-size-customize-mobile" || type === "ow:logo-size-reset-mobile") {
|
|
19006
|
+
const following = type === "ow:logo-size-reset-mobile";
|
|
19007
|
+
const next2 = {
|
|
19008
|
+
...logoSizeDraft,
|
|
19009
|
+
mobileFollowing: following,
|
|
19010
|
+
mobilePx: logoSizeDraft.desktopPx
|
|
19011
|
+
};
|
|
19012
|
+
setLogoSizeDraft(next2);
|
|
19013
|
+
persistLogoSizeDraft(session.placement, next2);
|
|
19014
|
+
return;
|
|
19015
|
+
}
|
|
19016
|
+
if (type !== "ow:logo-size-set") return;
|
|
19017
|
+
const px = Number(e.data.px);
|
|
19018
|
+
if (!Number.isFinite(px)) return;
|
|
19019
|
+
const next = editorViewport === "mobile" ? { ...logoSizeDraft, mobilePx: px, mobileFollowing: false } : {
|
|
19020
|
+
...logoSizeDraft,
|
|
19021
|
+
desktopPx: px,
|
|
19022
|
+
mobilePx: logoSizeDraft.mobileFollowing ? px : logoSizeDraft.mobilePx
|
|
19023
|
+
};
|
|
19024
|
+
setLogoSizeDraft(next);
|
|
19025
|
+
persistLogoSizeDraft(session.placement, next);
|
|
19026
|
+
};
|
|
19027
|
+
window.addEventListener("message", onPanelAction);
|
|
19028
|
+
return () => window.removeEventListener("message", onPanelAction);
|
|
19029
|
+
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
19694
19030
|
const handleStateChange = useCallback7((state) => {
|
|
19695
19031
|
if (!activeStateElRef.current) return;
|
|
19696
19032
|
const el = activeStateElRef.current;
|
|
@@ -20032,10 +19368,10 @@ function OhhwellsBridge() {
|
|
|
20032
19368
|
[postToParent2]
|
|
20033
19369
|
);
|
|
20034
19370
|
return bridgeRoot ? createPortal2(
|
|
20035
|
-
/* @__PURE__ */
|
|
20036
|
-
/* @__PURE__ */
|
|
20037
|
-
isEditMode && /* @__PURE__ */
|
|
20038
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */
|
|
19371
|
+
/* @__PURE__ */ jsxs20(Fragment8, { children: [
|
|
19372
|
+
/* @__PURE__ */ jsx33("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
19373
|
+
isEditMode && /* @__PURE__ */ jsx33(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
|
|
19374
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx33(
|
|
20039
19375
|
MediaOverlay,
|
|
20040
19376
|
{
|
|
20041
19377
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -20046,7 +19382,7 @@ function OhhwellsBridge() {
|
|
|
20046
19382
|
},
|
|
20047
19383
|
`uploading-${key}`
|
|
20048
19384
|
)),
|
|
20049
|
-
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */
|
|
19385
|
+
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ jsx33(
|
|
20050
19386
|
MediaOverlay,
|
|
20051
19387
|
{
|
|
20052
19388
|
hover: mediaHover,
|
|
@@ -20055,11 +19391,11 @@ function OhhwellsBridge() {
|
|
|
20055
19391
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
20056
19392
|
}
|
|
20057
19393
|
),
|
|
20058
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
20059
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */
|
|
20060
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */
|
|
20061
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */
|
|
20062
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */
|
|
19394
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx33(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
|
|
19395
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
19396
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
19397
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
19398
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ jsx33(
|
|
20063
19399
|
"div",
|
|
20064
19400
|
{
|
|
20065
19401
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -20069,7 +19405,7 @@ function OhhwellsBridge() {
|
|
|
20069
19405
|
width: slot.width,
|
|
20070
19406
|
height: slot.height
|
|
20071
19407
|
},
|
|
20072
|
-
children: /* @__PURE__ */
|
|
19408
|
+
children: /* @__PURE__ */ jsx33(
|
|
20073
19409
|
DropIndicator,
|
|
20074
19410
|
{
|
|
20075
19411
|
direction: slot.direction,
|
|
@@ -20080,7 +19416,7 @@ function OhhwellsBridge() {
|
|
|
20080
19416
|
},
|
|
20081
19417
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
20082
19418
|
)),
|
|
20083
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */
|
|
19419
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ jsx33(
|
|
20084
19420
|
"div",
|
|
20085
19421
|
{
|
|
20086
19422
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -20090,7 +19426,7 @@ function OhhwellsBridge() {
|
|
|
20090
19426
|
width: slot.width,
|
|
20091
19427
|
height: slot.height
|
|
20092
19428
|
},
|
|
20093
|
-
children: /* @__PURE__ */
|
|
19429
|
+
children: /* @__PURE__ */ jsx33(
|
|
20094
19430
|
DropIndicator,
|
|
20095
19431
|
{
|
|
20096
19432
|
direction: slot.direction,
|
|
@@ -20101,10 +19437,10 @@ function OhhwellsBridge() {
|
|
|
20101
19437
|
},
|
|
20102
19438
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
20103
19439
|
)),
|
|
20104
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
20105
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */
|
|
20106
|
-
hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
20107
|
-
formPickRect && !isItemDragging && /* @__PURE__ */
|
|
19440
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
19441
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
19442
|
+
hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
19443
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ jsx33(
|
|
20108
19444
|
ItemInteractionLayer,
|
|
20109
19445
|
{
|
|
20110
19446
|
rect: formPickRect,
|
|
@@ -20112,13 +19448,13 @@ function OhhwellsBridge() {
|
|
|
20112
19448
|
itemDragSurface: false,
|
|
20113
19449
|
toolbarAlign: "left",
|
|
20114
19450
|
chromeGap: 24,
|
|
20115
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */
|
|
19451
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ jsxs20(
|
|
20116
19452
|
"div",
|
|
20117
19453
|
{
|
|
20118
19454
|
"data-ohw-form-toolbar": "",
|
|
20119
19455
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
20120
19456
|
children: [
|
|
20121
|
-
/* @__PURE__ */
|
|
19457
|
+
/* @__PURE__ */ jsx33(
|
|
20122
19458
|
"button",
|
|
20123
19459
|
{
|
|
20124
19460
|
type: "button",
|
|
@@ -20126,11 +19462,11 @@ function OhhwellsBridge() {
|
|
|
20126
19462
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
20127
19463
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
20128
19464
|
"data-ohw-add-field": "",
|
|
20129
|
-
children: /* @__PURE__ */
|
|
19465
|
+
children: /* @__PURE__ */ jsx33(Plus4, { size: 15, "aria-hidden": true })
|
|
20130
19466
|
}
|
|
20131
19467
|
),
|
|
20132
|
-
/* @__PURE__ */
|
|
20133
|
-
/* @__PURE__ */
|
|
19468
|
+
/* @__PURE__ */ jsx33("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
19469
|
+
/* @__PURE__ */ jsxs20(
|
|
20134
19470
|
"button",
|
|
20135
19471
|
{
|
|
20136
19472
|
type: "button",
|
|
@@ -20145,11 +19481,11 @@ function OhhwellsBridge() {
|
|
|
20145
19481
|
});
|
|
20146
19482
|
},
|
|
20147
19483
|
children: [
|
|
20148
|
-
/* @__PURE__ */
|
|
19484
|
+
/* @__PURE__ */ jsx33(Settings, { size: 14, "aria-hidden": true }),
|
|
20149
19485
|
"Form settings",
|
|
20150
19486
|
formPickCount ? (
|
|
20151
19487
|
// Counter pill, per the design — not a text suffix.
|
|
20152
|
-
/* @__PURE__ */
|
|
19488
|
+
/* @__PURE__ */ jsx33(
|
|
20153
19489
|
"span",
|
|
20154
19490
|
{
|
|
20155
19491
|
"data-ohw-form-count": "",
|
|
@@ -20161,8 +19497,8 @@ function OhhwellsBridge() {
|
|
|
20161
19497
|
]
|
|
20162
19498
|
}
|
|
20163
19499
|
),
|
|
20164
|
-
/* @__PURE__ */
|
|
20165
|
-
/* @__PURE__ */
|
|
19500
|
+
/* @__PURE__ */ jsx33("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
19501
|
+
/* @__PURE__ */ jsx33("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ jsx33(
|
|
20166
19502
|
"button",
|
|
20167
19503
|
{
|
|
20168
19504
|
type: "button",
|
|
@@ -20192,7 +19528,7 @@ function OhhwellsBridge() {
|
|
|
20192
19528
|
)
|
|
20193
19529
|
}
|
|
20194
19530
|
),
|
|
20195
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */
|
|
19531
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ jsx33(
|
|
20196
19532
|
ItemInteractionLayer,
|
|
20197
19533
|
{
|
|
20198
19534
|
rect: formHoverRect,
|
|
@@ -20200,7 +19536,7 @@ function OhhwellsBridge() {
|
|
|
20200
19536
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
20201
19537
|
}
|
|
20202
19538
|
),
|
|
20203
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
19539
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx33(
|
|
20204
19540
|
ItemInteractionLayer,
|
|
20205
19541
|
{
|
|
20206
19542
|
rect: fieldPickRect,
|
|
@@ -20212,7 +19548,7 @@ function OhhwellsBridge() {
|
|
|
20212
19548
|
dragHandleLabel: "Reorder field",
|
|
20213
19549
|
onDragHandleDragStart: handleFieldDragStart,
|
|
20214
19550
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
20215
|
-
toolbar: /* @__PURE__ */
|
|
19551
|
+
toolbar: /* @__PURE__ */ jsx33(
|
|
20216
19552
|
FormFieldToolbar,
|
|
20217
19553
|
{
|
|
20218
19554
|
type: fieldPickState.type,
|
|
@@ -20225,12 +19561,12 @@ function OhhwellsBridge() {
|
|
|
20225
19561
|
)
|
|
20226
19562
|
}
|
|
20227
19563
|
),
|
|
20228
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */
|
|
19564
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ jsx33(
|
|
20229
19565
|
"div",
|
|
20230
19566
|
{
|
|
20231
19567
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
20232
19568
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
20233
|
-
children: /* @__PURE__ */
|
|
19569
|
+
children: /* @__PURE__ */ jsx33(
|
|
20234
19570
|
DropIndicator,
|
|
20235
19571
|
{
|
|
20236
19572
|
direction: "horizontal",
|
|
@@ -20241,16 +19577,16 @@ function OhhwellsBridge() {
|
|
|
20241
19577
|
},
|
|
20242
19578
|
`field-drop-${i}`
|
|
20243
19579
|
)) : null,
|
|
20244
|
-
fieldTypePickerOpen && formPickRect && /* @__PURE__ */
|
|
19580
|
+
fieldTypePickerOpen && formPickRect && /* @__PURE__ */ jsx33(
|
|
20245
19581
|
"div",
|
|
20246
19582
|
{
|
|
20247
19583
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
20248
19584
|
style: { top: formPickRect.top + 16, left: formPickRect.left + 24 },
|
|
20249
|
-
children: /* @__PURE__ */
|
|
19585
|
+
children: /* @__PURE__ */ jsx33(FieldTypePicker, { onPick: handleAddField })
|
|
20250
19586
|
}
|
|
20251
19587
|
),
|
|
20252
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */
|
|
20253
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */
|
|
19588
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ jsx33(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
19589
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ jsx33(
|
|
20254
19590
|
FooterContainerChrome,
|
|
20255
19591
|
{
|
|
20256
19592
|
rect: toolbarRect,
|
|
@@ -20258,7 +19594,7 @@ function OhhwellsBridge() {
|
|
|
20258
19594
|
addDisabled: !canAddFooterColumn()
|
|
20259
19595
|
}
|
|
20260
19596
|
),
|
|
20261
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */
|
|
19597
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ jsx33(
|
|
20262
19598
|
ItemInteractionLayer,
|
|
20263
19599
|
{
|
|
20264
19600
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -20273,7 +19609,7 @@ function OhhwellsBridge() {
|
|
|
20273
19609
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
20274
19610
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
20275
19611
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection,
|
|
20276
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */
|
|
19612
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ jsx33(
|
|
20277
19613
|
ItemActionToolbar,
|
|
20278
19614
|
{
|
|
20279
19615
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -20309,8 +19645,8 @@ function OhhwellsBridge() {
|
|
|
20309
19645
|
) : void 0
|
|
20310
19646
|
}
|
|
20311
19647
|
),
|
|
20312
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */
|
|
20313
|
-
/* @__PURE__ */
|
|
19648
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ jsxs20(Fragment8, { children: [
|
|
19649
|
+
/* @__PURE__ */ jsx33(
|
|
20314
19650
|
EditGlowChrome,
|
|
20315
19651
|
{
|
|
20316
19652
|
rect: toolbarRect,
|
|
@@ -20320,7 +19656,7 @@ function OhhwellsBridge() {
|
|
|
20320
19656
|
hideHandle: isItemDragging
|
|
20321
19657
|
}
|
|
20322
19658
|
),
|
|
20323
|
-
/* @__PURE__ */
|
|
19659
|
+
/* @__PURE__ */ jsx33(
|
|
20324
19660
|
FloatingToolbar,
|
|
20325
19661
|
{
|
|
20326
19662
|
rect: toolbarRect,
|
|
@@ -20333,7 +19669,7 @@ function OhhwellsBridge() {
|
|
|
20333
19669
|
}
|
|
20334
19670
|
)
|
|
20335
19671
|
] }),
|
|
20336
|
-
maxBadge && /* @__PURE__ */
|
|
19672
|
+
maxBadge && /* @__PURE__ */ jsxs20(
|
|
20337
19673
|
"div",
|
|
20338
19674
|
{
|
|
20339
19675
|
"data-ohw-max-badge": "",
|
|
@@ -20359,7 +19695,7 @@ function OhhwellsBridge() {
|
|
|
20359
19695
|
]
|
|
20360
19696
|
}
|
|
20361
19697
|
),
|
|
20362
|
-
toggleState && !linkPopover && /* @__PURE__ */
|
|
19698
|
+
toggleState && !linkPopover && /* @__PURE__ */ jsx33(
|
|
20363
19699
|
StateToggle,
|
|
20364
19700
|
{
|
|
20365
19701
|
rect: toggleState.rect,
|
|
@@ -20368,15 +19704,15 @@ function OhhwellsBridge() {
|
|
|
20368
19704
|
onStateChange: handleStateChange
|
|
20369
19705
|
}
|
|
20370
19706
|
),
|
|
20371
|
-
sectionGap && !linkPopover && /* @__PURE__ */
|
|
19707
|
+
sectionGap && !linkPopover && /* @__PURE__ */ jsxs20(
|
|
20372
19708
|
"div",
|
|
20373
19709
|
{
|
|
20374
19710
|
"data-ohw-section-insert-line": "",
|
|
20375
19711
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
20376
19712
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
20377
19713
|
children: [
|
|
20378
|
-
/* @__PURE__ */
|
|
20379
|
-
/* @__PURE__ */
|
|
19714
|
+
/* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
|
|
19715
|
+
/* @__PURE__ */ jsx33(
|
|
20380
19716
|
Badge,
|
|
20381
19717
|
{
|
|
20382
19718
|
className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
|
|
@@ -20393,11 +19729,11 @@ function OhhwellsBridge() {
|
|
|
20393
19729
|
children: "Add Section"
|
|
20394
19730
|
}
|
|
20395
19731
|
),
|
|
20396
|
-
/* @__PURE__ */
|
|
19732
|
+
/* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } })
|
|
20397
19733
|
]
|
|
20398
19734
|
}
|
|
20399
19735
|
),
|
|
20400
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */
|
|
19736
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx33(
|
|
20401
19737
|
LinkPopover,
|
|
20402
19738
|
{
|
|
20403
19739
|
panelRef: linkPopoverPanelRef,
|
|
@@ -20414,7 +19750,7 @@ function OhhwellsBridge() {
|
|
|
20414
19750
|
},
|
|
20415
19751
|
linkPopover.key
|
|
20416
19752
|
) : null,
|
|
20417
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */
|
|
19753
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ jsx33(
|
|
20418
19754
|
FloatingPanel,
|
|
20419
19755
|
{
|
|
20420
19756
|
open: true,
|
|
@@ -20424,7 +19760,7 @@ function OhhwellsBridge() {
|
|
|
20424
19760
|
onPositionChange: setFloatingPanelPos,
|
|
20425
19761
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
20426
19762
|
onClose: closeFloatingPanelOnly,
|
|
20427
|
-
children: /* @__PURE__ */
|
|
19763
|
+
children: /* @__PURE__ */ jsx33(
|
|
20428
19764
|
SocialsDisplayPanel,
|
|
20429
19765
|
{
|
|
20430
19766
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|
|
@@ -20435,115 +19771,11 @@ function OhhwellsBridge() {
|
|
|
20435
19771
|
}
|
|
20436
19772
|
)
|
|
20437
19773
|
}
|
|
20438
|
-
) : null,
|
|
20439
|
-
floatingPanel && floatingPanel.kind === "logo-size" && logoSizeDraft ? /* @__PURE__ */ jsx34(
|
|
20440
|
-
FloatingPanel,
|
|
20441
|
-
{
|
|
20442
|
-
open: true,
|
|
20443
|
-
title: floatingPanel.title,
|
|
20444
|
-
context: floatingPanel.context,
|
|
20445
|
-
position: floatingPanelPos,
|
|
20446
|
-
onPositionChange: setFloatingPanelPos,
|
|
20447
|
-
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
20448
|
-
onClose: closeFloatingPanelAndDeselect,
|
|
20449
|
-
children: /* @__PURE__ */ jsx34(
|
|
20450
|
-
LogoSizePanel,
|
|
20451
|
-
{
|
|
20452
|
-
viewport: editorViewport,
|
|
20453
|
-
sizePx: editorViewport === "mobile" && !logoSizeDraft.mobileFollowing ? logoSizeDraft.mobilePx : logoSizeDraft.desktopPx,
|
|
20454
|
-
mobileFollowing: logoSizeDraft.mobileFollowing,
|
|
20455
|
-
onSizeChange: (px) => {
|
|
20456
|
-
const next = editorViewport === "mobile" ? { ...logoSizeDraft, mobilePx: px, mobileFollowing: false } : {
|
|
20457
|
-
...logoSizeDraft,
|
|
20458
|
-
desktopPx: px,
|
|
20459
|
-
mobilePx: logoSizeDraft.mobileFollowing ? px : logoSizeDraft.mobilePx
|
|
20460
|
-
};
|
|
20461
|
-
setLogoSizeDraft(next);
|
|
20462
|
-
persistLogoSizeDraft(floatingPanel.placement, next);
|
|
20463
|
-
},
|
|
20464
|
-
onCustomizeMobile: () => {
|
|
20465
|
-
const next = {
|
|
20466
|
-
...logoSizeDraft,
|
|
20467
|
-
mobileFollowing: false,
|
|
20468
|
-
mobilePx: logoSizeDraft.desktopPx
|
|
20469
|
-
};
|
|
20470
|
-
setLogoSizeDraft(next);
|
|
20471
|
-
persistLogoSizeDraft(floatingPanel.placement, next);
|
|
20472
|
-
},
|
|
20473
|
-
onResetMobile: () => {
|
|
20474
|
-
const next = {
|
|
20475
|
-
...logoSizeDraft,
|
|
20476
|
-
mobileFollowing: true,
|
|
20477
|
-
mobilePx: logoSizeDraft.desktopPx
|
|
20478
|
-
};
|
|
20479
|
-
setLogoSizeDraft(next);
|
|
20480
|
-
persistLogoSizeDraft(floatingPanel.placement, next);
|
|
20481
|
-
},
|
|
20482
|
-
onUpdateEverywhere: () => {
|
|
20483
|
-
const identity = readLogoIdentityFromDom();
|
|
20484
|
-
postToParent2({ type: "ow:open-logo-settings", ...identity });
|
|
20485
|
-
}
|
|
20486
|
-
}
|
|
20487
|
-
)
|
|
20488
|
-
}
|
|
20489
19774
|
) : null
|
|
20490
19775
|
] }),
|
|
20491
19776
|
bridgeRoot
|
|
20492
19777
|
) : null;
|
|
20493
19778
|
}
|
|
20494
|
-
|
|
20495
|
-
// src/ui/EmptySection.tsx
|
|
20496
|
-
import Link4 from "next/link";
|
|
20497
|
-
import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
20498
|
-
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
20499
|
-
return /* @__PURE__ */ jsxs22(Fragment9, { children: [
|
|
20500
|
-
/* @__PURE__ */ jsx35(
|
|
20501
|
-
"p",
|
|
20502
|
-
{
|
|
20503
|
-
style: {
|
|
20504
|
-
fontFamily: "var(--brand-font-body)",
|
|
20505
|
-
fontSize: "0.75rem",
|
|
20506
|
-
fontWeight: 500,
|
|
20507
|
-
letterSpacing: "0.15em",
|
|
20508
|
-
textTransform: "uppercase",
|
|
20509
|
-
color: "var(--brand-accent)",
|
|
20510
|
-
marginBottom: "1.5rem"
|
|
20511
|
-
},
|
|
20512
|
-
children: /* @__PURE__ */ jsx35(Link4, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ jsx35("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
|
|
20513
|
-
}
|
|
20514
|
-
),
|
|
20515
|
-
/* @__PURE__ */ jsx35(
|
|
20516
|
-
"h1",
|
|
20517
|
-
{
|
|
20518
|
-
style: {
|
|
20519
|
-
fontFamily: "var(--brand-font-heading)",
|
|
20520
|
-
fontSize: "clamp(2rem, 3.5vw, 2.75rem)",
|
|
20521
|
-
lineHeight: 1.1,
|
|
20522
|
-
letterSpacing: "-0.025em",
|
|
20523
|
-
color: "var(--brand-text)",
|
|
20524
|
-
marginBottom: "1rem"
|
|
20525
|
-
},
|
|
20526
|
-
...titleKey ? { "data-ohw-editable": "text", "data-ohw-key": titleKey, "data-ohw-max-length": 80 } : {},
|
|
20527
|
-
children: title
|
|
20528
|
-
}
|
|
20529
|
-
),
|
|
20530
|
-
/* @__PURE__ */ jsx35(
|
|
20531
|
-
"p",
|
|
20532
|
-
{
|
|
20533
|
-
style: {
|
|
20534
|
-
fontFamily: "var(--brand-font-body)",
|
|
20535
|
-
fontSize: "1rem",
|
|
20536
|
-
lineHeight: 1.7,
|
|
20537
|
-
fontWeight: 300,
|
|
20538
|
-
color: "var(--brand-text-muted)",
|
|
20539
|
-
maxWidth: "340px"
|
|
20540
|
-
},
|
|
20541
|
-
...subtitleKey ? { "data-ohw-editable": "text", "data-ohw-key": subtitleKey, "data-ohw-max-length": 160 } : {},
|
|
20542
|
-
children: "This page doesn't have any content yet."
|
|
20543
|
-
}
|
|
20544
|
-
)
|
|
20545
|
-
] });
|
|
20546
|
-
}
|
|
20547
19779
|
export {
|
|
20548
19780
|
AI_DEFAULT_BRAND,
|
|
20549
19781
|
AI_TREE_SCHEMA_VERSIONS,
|
|
@@ -20560,7 +19792,6 @@ export {
|
|
|
20560
19792
|
DropdownMenuItem,
|
|
20561
19793
|
DropdownMenuSeparator,
|
|
20562
19794
|
DropdownMenuTrigger,
|
|
20563
|
-
EmptySection,
|
|
20564
19795
|
ItemActionToolbar,
|
|
20565
19796
|
ItemInteractionLayer,
|
|
20566
19797
|
LinkEditorPanel,
|