@ohhwells/bridge 0.1.117-next.324 → 0.1.117-next.327

package/dist/index.cjs

@@ -572,6 +572,40 @@ function applyBrandToDom(kit) {
   }
 }
 
+// src/lib/custom-code.ts
+var ALLOWED_HEAD_TAGS = /* @__PURE__ */ new Set(["style", "meta", "link", "script", "noscript", "base"]);
+var CUSTOM_CODE_AFTER_HEAD_KEY = "__ohw_custom_code_after_head";
+var CUSTOM_CODE_BEFORE_HEAD_KEY = "__ohw_custom_code_before_head";
+function clearExisting(slot) {
+  document.querySelectorAll(`[data-ohw-custom-code="${slot}"]`).forEach((el) => el.remove());
+}
+function buildNodes(raw, slot) {
+  if (!raw || !raw.trim()) return [];
+  const parsed = new DOMParser().parseFromString(raw, "text/html");
+  const source = [...parsed.head.childNodes, ...parsed.body.childNodes];
+  const nodes = [];
+  for (const node of source) {
+    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    if (!ALLOWED_HEAD_TAGS.has(tag)) continue;
+    const built = document.createElement(tag);
+    for (const attr of Array.from(el.attributes)) built.setAttribute(attr.name, attr.value);
+    if (tag === "script" || tag === "style" || tag === "noscript") built.textContent = el.textContent;
+    built.dataset.ohwCustomCode = slot;
+    nodes.push(built);
+  }
+  return nodes;
+}
+function applyCustomCodeToHead(content) {
+  clearExisting("after");
+  clearExisting("before");
+  const afterNodes = buildNodes(content[CUSTOM_CODE_AFTER_HEAD_KEY], "after");
+  if (afterNodes.length > 0) document.head.prepend(...afterNodes);
+  const beforeNodes = buildNodes(content[CUSTOM_CODE_BEFORE_HEAD_KEY], "before");
+  if (beforeNodes.length > 0) document.head.append(...beforeNodes);
+}
+
 // src/lib/section-styles.ts
 var STYLE_STORE_KEY = "__ohw_styles";
 var STYLE_SHEET_ID = "ohw-section-styles";
@@ -2405,7 +2439,11 @@ function MediaStripBlock({ node, ctx, path }) {
   const justify = align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
   const label = str(slots.label);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ohw-media-strip": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing6 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: '[data-ohw-media-strip-item]{transition:transform 0.2s ease, opacity 0.2s ease}[data-ohw-media-strip-hover="lift"]:hover{transform:translateY(-4px)}[data-ohw-media-strip-hover="zoom"]:hover{transform:scale(1.05)}[data-ohw-media-strip-hover="fade"]:hover{opacity:0.75}' }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
+      // Host sites often style `a:hover{opacity}` globally — that would fade every linked item
+      // whatever preset is chosen, so the anchors here opt out and only the preset applies.
+      children: '[data-ohw-media-strip] a,[data-ohw-media-strip] a:hover{opacity:1}[data-ohw-media-strip-item]{transition:transform 0.2s ease, opacity 0.2s ease}[data-ohw-media-strip-hover="lift"]:hover{transform:translateY(-4px)}[data-ohw-media-strip-hover="zoom"]:hover{transform:scale(1.05)}[data-ohw-media-strip-hover="fade"]:hover{opacity:0.75}'
+    }),
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -2430,7 +2468,7 @@ function MediaStripBlock({ node, ctx, path }) {
         },
         children: items.map((item, i) => {
           const hasLink = typeof item.href === "string" && item.href.length > 0;
-          const hoverPreset = slots.hover === "none" || slots.hover === "lift" || slots.hover === "zoom" || slots.hover === "fade" ? slots.hover : hasLink ? "lift" : "none";
+          const hoverPreset = !hasLink ? "none" : slots.hover === "none" || slots.hover === "lift" || slots.hover === "zoom" || slots.hover === "fade" ? slots.hover : "lift";
           const box = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
@@ -2460,8 +2498,8 @@ function MediaStripBlock({ node, ctx, path }) {
             "a",
             {
               href: item.href,
-              target: item.linkTarget === "new-tab" ? "_blank" : void 0,
-              rel: item.linkTarget === "new-tab" ? "noopener noreferrer" : void 0,
+              target: item.linkTarget === "same-tab" ? void 0 : "_blank",
+              rel: item.linkTarget === "same-tab" ? void 0 : "noopener noreferrer",
               style: { display: "block", textDecoration: "none" },
               children: box
             },
@@ -10163,6 +10201,22 @@ function setMediaStripItemAlt(tree, index, alt) {
     return true;
   });
 }
+function setMediaStripItemLink(tree, index, link) {
+  return withMediaStrip(tree, (block) => {
+    const items = block.items;
+    if (index < 0 || index >= items.length) return false;
+    const item = { ...items[index] };
+    if (link.href) {
+      item.href = link.href;
+      if (link.linkTarget) item.linkTarget = link.linkTarget;
+    } else {
+      delete item.href;
+      delete item.linkTarget;
+    }
+    items[index] = item;
+    return true;
+  });
+}
 
 // src/ui/ai-section/AiMediaStripOverlay.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -10368,6 +10422,88 @@ var TREATMENTS = [
   { value: "color", label: "Color" },
   { value: "grayscale", label: "Grayscale" }
 ];
+var HTTP_URL_RE = /^https?:\/\/\S+$/i;
+function LinkInput({ value, onCommit }) {
+  const [draft, setDraft] = (0, import_react9.useState)(value);
+  const [invalid, setInvalid] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
+    setDraft(value);
+    setInvalid(false);
+  }, [value]);
+  const commit = () => {
+    const next = draft.trim();
+    if (next === value) return setInvalid(false);
+    if (next && !HTTP_URL_RE.test(next)) return setInvalid(true);
+    setInvalid(false);
+    onCommit(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        height: 28,
+        padding: "0 12px",
+        borderRadius: 999,
+        background: "#ffffff",
+        width: "100%",
+        maxWidth: 260,
+        boxSizing: "border-box",
+        boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "span",
+          {
+            style: {
+              flex: "0 0 auto",
+              color: OHW_BLUE_DARK,
+              fontSize: 10,
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: 0.4
+            },
+            children: "Link"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "input",
+          {
+            type: "text",
+            inputMode: "url",
+            value: draft,
+            onChange: (e) => setDraft(e.target.value),
+            onBlur: commit,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") e.currentTarget.blur();
+              if (e.key === "Escape") {
+                setDraft(value);
+                setInvalid(false);
+                e.currentTarget.blur();
+              }
+            },
+            placeholder: "https://example.com",
+            "aria-label": "Image link URL",
+            "aria-invalid": invalid,
+            style: {
+              flex: 1,
+              minWidth: 0,
+              border: "none",
+              outline: "none",
+              background: "transparent",
+              fontSize: 12,
+              lineHeight: "16px",
+              fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
+              color: "#1f2937"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 function MediaStripToolbar({
   entry,
   index,
@@ -10379,6 +10515,7 @@ function MediaStripToolbar({
   onSetTreatment,
   onResize,
   onSetAlt,
+  onSetLink,
   onAddItem,
   onRemoveItem,
   onChangeImage,
@@ -10388,10 +10525,12 @@ function MediaStripToolbar({
   const items = mediaStripItems(entry.tree);
   const itemCount = items.length;
   const currentAlt = items[index]?.alt ?? "";
+  const currentHref = items[index]?.href ?? "";
+  const currentTarget = items[index]?.linkTarget === "same-tab" ? "same-tab" : "new-tab";
   const slots = findMediaStripSlots(entry.tree);
   const variant = slots?.variant === "reel" ? "reel" : "logos";
   const align = slots?.align === "left" || slots?.align === "right" ? slots.align : "center";
-  const hover = slots?.hover === "none" || slots?.hover === "lift" || slots?.hover === "zoom" || slots?.hover === "fade" ? slots.hover : "none";
+  const hover = slots?.hover === "none" || slots?.hover === "lift" || slots?.hover === "zoom" || slots?.hover === "fade" ? slots.hover : "lift";
   const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
   const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
   const isMobile = window.innerWidth <= 480;
@@ -10442,6 +10581,11 @@ function MediaStripToolbar({
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+", onClick: () => onResize(8) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AltInput, { value: currentAlt, onCommit: onSetAlt }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LinkInput, { value: currentHref, onCommit: (href) => onSetLink(href, currentTarget) }) }),
+        currentHref && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "New tab", active: currentTarget === "new-tab", onClick: () => onSetLink(currentHref, "new-tab") }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Same tab", active: currentTarget === "same-tab", onClick: () => onSetLink(currentHref, "same-tab") })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Change Image", onClick: onChangeImage }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Item", onClick: onAddItem }),
@@ -10637,6 +10781,12 @@ function AiMediaStripOverlay({
             onSetAlt: (alt) => {
               void runMutation(active.sectionId, (tree) => setMediaStripItemAlt(tree, active.index, alt));
             },
+            onSetLink: (href, linkTarget) => {
+              void runMutation(
+                active.sectionId,
+                (tree) => setMediaStripItemLink(tree, active.index, href ? { href, linkTarget } : {})
+              );
+            },
             onAddItem: () => {
               void requestAssetPick(postToParent2).then((picked) => {
                 if (!picked) return;
@@ -22206,6 +22356,7 @@ function OhhwellsBridge() {
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
+      applyCustomCodeToHead(content);
       initSectionInstancesFromContent(content, window.location.pathname);
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
@@ -22215,6 +22366,7 @@ function OhhwellsBridge() {
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
+        if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -24626,6 +24778,7 @@ function OhhwellsBridge() {
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
+      applyCustomCodeToHead(content);
       initSectionInstancesFromContent(content, window.location.pathname);
       let sectionsJson = null;
       for (const [key, val] of Object.entries(content)) {
@@ -24639,6 +24792,7 @@ function OhhwellsBridge() {
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
+        if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -25356,6 +25510,16 @@ function OhhwellsBridge() {
       if (brandKitRef.current) {
         nodes.push({ key: BRAND_KIT_KEY, type: "brand", text: brandKitRef.current });
       }
+      nodes.push({
+        key: CUSTOM_CODE_BEFORE_HEAD_KEY,
+        type: "text",
+        text: editContentRef.current[CUSTOM_CODE_BEFORE_HEAD_KEY] ?? ""
+      });
+      nodes.push({
+        key: CUSTOM_CODE_AFTER_HEAD_KEY,
+        type: "text",
+        text: editContentRef.current[CUSTOM_CODE_AFTER_HEAD_KEY] ?? ""
+      });
       document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
         const formKey = formKeyOf(form);
         if (!formKey) return;