@ohhwells/bridge 0.1.124 → 0.1.126

package/dist/index.cjs

@@ -46,6 +46,7 @@ __export(index_exports, {
   DropdownMenuItem: () => DropdownMenuItem,
   DropdownMenuSeparator: () => DropdownMenuSeparator,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  EmptySection: () => EmptySection,
   ItemActionToolbar: () => ItemActionToolbar,
   ItemInteractionLayer: () => ItemInteractionLayer,
   LinkEditorPanel: () => LinkEditorPanel,
@@ -295,10 +296,14 @@ function reapRemovedAiSections(state, store, removedIds, excludeIds = /* @__PURE
 var BRAND_NAME_KEY = "__ohw_brand_name";
 var BRAND_TITLE_KEY = "__ohw_site_title";
 var BRAND_FAVICON_LETTER_KEY = "__ohw_favicon_letter";
+var SITE_DESCRIPTION_KEY = "__ohw_site_description";
+var SITE_OG_IMAGE_KEY = "__ohw_og_image";
 var BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
   BRAND_NAME_KEY,
   BRAND_TITLE_KEY,
-  BRAND_FAVICON_LETTER_KEY
+  BRAND_FAVICON_LETTER_KEY,
+  SITE_DESCRIPTION_KEY,
+  SITE_OG_IMAGE_KEY
 ]);
 function upsertMeta(selector, attr, token, value) {
   let el = document.head.querySelector(selector);
@@ -309,6 +314,9 @@ function upsertMeta(selector, attr, token, value) {
   }
   if (el.getAttribute("content") !== value) el.setAttribute("content", value);
 }
+function removeMeta(selector) {
+  document.head.querySelector(selector)?.remove();
+}
 function escapeXml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -324,6 +332,22 @@ function applyLetterFavicon(letter) {
   link.type = "image/svg+xml";
   if (link.href !== href) link.href = href;
 }
+function applyDescription(description) {
+  if (!description) return;
+  upsertMeta('meta[name="description"]', "name", "description", description);
+  upsertMeta('meta[property="og:description"]', "property", "og:description", description);
+  upsertMeta('meta[name="twitter:description"]', "name", "twitter:description", description);
+}
+function applyOgImage(url) {
+  if (url) {
+    upsertMeta('meta[property="og:image"]', "property", "og:image", url);
+    upsertMeta('meta[name="twitter:image"]', "name", "twitter:image", url);
+    upsertMeta('meta[name="twitter:card"]', "name", "twitter:card", "summary_large_image");
+    return;
+  }
+  removeMeta('meta[property="og:image"]');
+  removeMeta('meta[name="twitter:image"]');
+}
 function applyBrandChrome(content) {
   const name = content[BRAND_NAME_KEY];
   if (typeof name === "string" && name.length > 0) {
@@ -342,6 +366,13 @@ function applyBrandChrome(content) {
   if (typeof letter === "string" && letter.length > 0) {
     applyLetterFavicon(letter);
   }
+  const description = content[SITE_DESCRIPTION_KEY];
+  if (typeof description === "string" && description.length > 0) {
+    applyDescription(description);
+  }
+  if (Object.prototype.hasOwnProperty.call(content, SITE_OG_IMAGE_KEY)) {
+    applyOgImage(String(content[SITE_OG_IMAGE_KEY] ?? "").trim());
+  }
 }
 
 // src/lib/brand-kit.ts
@@ -19618,21 +19649,10 @@ function parseSchedulingInsertAfter(insertAfter) {
     insertBefore: insertAfter.slice(idx + INSERT_BEFORE_MARKER.length)
   };
 }
-function resolveSchedulingInsert(insertAfter, explicitInsertBefore) {
-  const parsed = parseSchedulingInsertAfter(insertAfter);
-  const insertBefore = explicitInsertBefore ?? parsed.insertBefore;
-  const effectiveInsertAfter = insertBefore && parsed.insertBefore === null ? `${insertAfter}${INSERT_BEFORE_MARKER}${insertBefore}` : insertAfter;
-  return { effectiveInsertAfter, insertBefore };
-}
-function getSchedulingMountPoint(insertAfter) {
-  const { anchor } = parseSchedulingInsertAfter(insertAfter);
-  let anchorEl = document.querySelector(`[data-ohw-section="${anchor}"]`);
-  if (!anchorEl && anchor === "scheduling") {
-    const widgets = Array.from(document.querySelectorAll('[data-ohw-section^="scheduling-"]'));
-    anchorEl = widgets.at(-1) ?? null;
-  }
-  if (!anchorEl) return null;
-  return anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
+function resolveEntryAnchor(entry) {
+  if (entry.anchorId !== void 0) return { anchorId: entry.anchorId, beforeId: entry.beforeId ?? null };
+  const parsed = parseSchedulingInsertAfter(entry.insertAfter);
+  return { anchorId: parsed.anchor, beforeId: parsed.insertBefore };
 }
 function schedulingMountDepth(insertAfter) {
   if (!insertAfter.includes(INSERT_BEFORE_MARKER)) return 0;
@@ -19649,8 +19669,7 @@ function getPageSchedulingEntries(raw) {
   }
 }
 function isSchedulingWidgetMissing(entry) {
-  const { effectiveInsertAfter } = resolveSchedulingInsert(entry.insertAfter);
-  return !document.querySelector(`[data-ohw-section="${schedulingSectionId(effectiveInsertAfter)}"]`);
+  return !document.querySelector(`[data-ohw-section="${schedulingSectionId(entry.insertAfter)}"]`);
 }
 function hasMissingSchedulingWidgets(entries) {
   return entries.some(isSchedulingWidgetMissing);
@@ -19688,17 +19707,18 @@ function initSectionsFromContent(content, removeExisting = false, currentPath =
   } catch {
   }
 }
-function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId, explicitInsertBefore) {
-  const { effectiveInsertAfter, insertBefore } = resolveSchedulingInsert(insertAfter, explicitInsertBefore);
-  const sectionId = schedulingSectionId(effectiveInsertAfter);
+function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, beforeId, existingWidgetId) {
+  const widgetId = existingWidgetId ?? (beforeId ? `${anchorId}${INSERT_BEFORE_MARKER}${beforeId}` : anchorId);
+  const sectionId = schedulingSectionId(widgetId);
   if (document.querySelector(`[data-ohw-section="${sectionId}"]`)) return false;
-  const mountPoint = getSchedulingMountPoint(effectiveInsertAfter);
-  if (!mountPoint) return false;
+  const anchorEl = document.querySelector(`[data-ohw-section="${anchorId}"]`);
+  if (!anchorEl) return false;
+  const mountPoint = anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
   const container = document.createElement("div");
   container.dataset.ohwSectionContainer = "scheduling";
   container.dataset.ohwInstance = sectionId;
-  if (insertBefore) {
-    const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
+  if (beforeId) {
+    const beforeAnchor = document.querySelector(`[data-ohw-section="${beforeId}"]`);
     const beforePoint = beforeAnchor?.closest('[data-ohw-section-container="scheduling"]') ?? beforeAnchor;
     if (!beforePoint) return false;
     beforePoint.insertAdjacentElement("beforebegin", container);
@@ -19709,20 +19729,26 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
     }
     tail.insertAdjacentElement("afterend", container);
   }
-  const root = (0, import_client2.createRoot)(container);
-  schedulingRoots.set(container, root);
-  (0, import_react_dom4.flushSync)(() => {
-    root.render(
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        SchedulingWidget,
-        {
-          notifyOnConnect,
-          initialScheduleId: scheduleId,
-          insertAfter: effectiveInsertAfter
-        }
-      )
-    );
-  });
+  try {
+    const root = (0, import_client2.createRoot)(container);
+    schedulingRoots.set(container, root);
+    (0, import_react_dom4.flushSync)(() => {
+      root.render(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          SchedulingWidget,
+          {
+            notifyOnConnect,
+            initialScheduleId: scheduleId,
+            insertAfter: widgetId
+          }
+        )
+      );
+    });
+  } catch (err) {
+    console.error("[ow:scheduling] render threw", err);
+    container.remove();
+    return false;
+  }
   const tracker = getSectionsTracker();
   let sections = [];
   try {
@@ -19730,10 +19756,12 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
   } catch {
   }
   const inEditor = typeof window !== "undefined" && window.self !== window.top;
-  if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === effectiveInsertAfter)) {
+  if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === widgetId)) {
     sections.push({
       type: "scheduling",
-      insertAfter: effectiveInsertAfter,
+      insertAfter: widgetId,
+      anchorId,
+      beforeId: beforeId ?? null,
       pagePath: window.location.pathname,
       ...scheduleId ? { scheduleId } : {}
     });
@@ -19747,7 +19775,8 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
     for (let i = pending.length - 1; i >= 0; i--) {
       const entry = pending[i];
       const shouldNotify = typeof notifyOnConnect === "function" ? notifyOnConnect(entry) : notifyOnConnect;
-      if (mountSchedulingWidget(entry.insertAfter, shouldNotify, entry.scheduleId ?? null)) {
+      const { anchorId, beforeId } = resolveEntryAnchor(entry);
+      if (mountSchedulingWidget(anchorId, shouldNotify, entry.scheduleId ?? null, beforeId, entry.insertAfter)) {
         pending.splice(i, 1);
       }
     }
@@ -20810,6 +20839,7 @@ function StateToggle({
   );
 }
 var contentCache = /* @__PURE__ */ new Map();
+var fetchedContentPaths = /* @__PURE__ */ new Set();
 var brandingCache = /* @__PURE__ */ new Map();
 var OHW_LOADER_STYLE = {
   position: "fixed",
@@ -21016,6 +21046,7 @@ function OhhwellsBridge() {
     if (!subdomainFromQuery || typeof window === "undefined") return;
     const url = new URL(window.location.href);
     if (!url.searchParams.has("subdomain")) return;
+    if (!resolveSubdomain(null)) return;
     url.searchParams.delete("subdomain");
     window.history.replaceState(null, "", url.pathname + url.search + url.hash);
   }, [subdomainFromQuery]);
@@ -23062,7 +23093,9 @@ function OhhwellsBridge() {
     let cancelled = false;
     setFetchState("loading");
     const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
-    fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
+    const initialPath = pathname;
+    fetchedContentPaths.add(`${subdomain}::${initialPath}`);
+    fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(initialPath)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
       if (cancelled) return;
       const content = data?.content ?? {};
       const branding = Boolean(data?.showBranding);
@@ -23259,6 +23292,17 @@ function OhhwellsBridge() {
       debounceTimer = setTimeout(applyFromCache, 150);
     };
     applyFromCache();
+    const pathCacheKey = `${subdomain}::${pathname}`;
+    if (!fetchedContentPaths.has(pathCacheKey)) {
+      fetchedContentPaths.add(pathCacheKey);
+      const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+      fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(pathname)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
+        if (!data?.content) return;
+        contentCache.set(subdomain, data.content);
+        applyFromCache();
+      }).catch(() => {
+      });
+    }
     observer = new MutationObserver(scheduleApply);
     observer.observe(document.body, { childList: true, subtree: true });
     return () => {
@@ -26123,6 +26167,21 @@ function OhhwellsBridge() {
         type: "text",
         text: editContentRef.current[CUSTOM_CODE_AFTER_HEAD_KEY] ?? ""
       });
+      nodes.push({
+        key: BRAND_TITLE_KEY,
+        type: "text",
+        text: editContentRef.current[BRAND_TITLE_KEY] ?? ""
+      });
+      nodes.push({
+        key: SITE_DESCRIPTION_KEY,
+        type: "text",
+        text: editContentRef.current[SITE_DESCRIPTION_KEY] ?? ""
+      });
+      nodes.push({
+        key: SITE_OG_IMAGE_KEY,
+        type: "text",
+        text: editContentRef.current[SITE_OG_IMAGE_KEY] ?? ""
+      });
       document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
         const formKey = formKeyOf(form);
         if (!formKey) return;
@@ -26145,8 +26204,12 @@ function OhhwellsBridge() {
       if (inserted) {
         const tracker = getSectionsTracker();
         postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
-        const h = document.body.scrollHeight;
-        if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
+        const reportHeight = () => {
+          const h = document.body.scrollHeight;
+          if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
+        };
+        reportHeight();
+        setTimeout(reportHeight, 500);
       }
     };
     const handleSwitchSchedule = (e) => {
@@ -26872,7 +26935,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.123",
+        bridgeVersion: "0.1.125",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -27959,6 +28022,59 @@ function OhhwellsBridge() {
     ) : null
   ] });
 }
+
+// src/ui/EmptySection.tsx
+var import_link = __toESM(require("next/link"), 1);
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "p",
+      {
+        style: {
+          fontFamily: "var(--brand-font-body)",
+          fontSize: "0.75rem",
+          fontWeight: 500,
+          letterSpacing: "0.15em",
+          textTransform: "uppercase",
+          color: "var(--brand-accent)",
+          marginBottom: "1.5rem"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "h1",
+      {
+        style: {
+          fontFamily: "var(--brand-font-heading)",
+          fontSize: "clamp(2rem, 3.5vw, 2.75rem)",
+          lineHeight: 1.1,
+          letterSpacing: "-0.025em",
+          color: "var(--brand-text)",
+          marginBottom: "1rem"
+        },
+        ...titleKey ? { "data-ohw-editable": "text", "data-ohw-key": titleKey, "data-ohw-max-length": 80 } : {},
+        children: title
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "p",
+      {
+        style: {
+          fontFamily: "var(--brand-font-body)",
+          fontSize: "1rem",
+          lineHeight: 1.7,
+          fontWeight: 300,
+          color: "var(--brand-text-muted)",
+          maxWidth: "340px"
+        },
+        ...subtitleKey ? { "data-ohw-editable": "text", "data-ohw-key": subtitleKey, "data-ohw-max-length": 160 } : {},
+        children: "This page doesn't have any content yet."
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AI_DEFAULT_BRAND,
@@ -27976,6 +28092,7 @@ function OhhwellsBridge() {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  EmptySection,
   ItemActionToolbar,
   ItemInteractionLayer,
   LinkEditorPanel,