@ohhwells/bridge 0.1.117-next.323 → 0.1.117-next.325

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";
@@ -10155,6 +10189,14 @@ function setMediaStripItemAsset(tree, index, assetId) {
     return true;
   });
 }
+function setMediaStripItemAlt(tree, index, alt) {
+  return withMediaStrip(tree, (block) => {
+    const items = block.items;
+    if (index < 0 || index >= items.length) return false;
+    items[index] = { ...items[index], alt };
+    return true;
+  });
+}
 
 // src/ui/ai-section/AiMediaStripOverlay.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -10273,6 +10315,74 @@ function Pill({
     }
   );
 }
+function AltInput({ value, onCommit }) {
+  const [draft, setDraft] = (0, import_react9.useState)(value);
+  (0, import_react9.useEffect)(() => setDraft(value), [value]);
+  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"
+      },
+      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: "Alt"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "input",
+          {
+            type: "text",
+            value: draft,
+            onChange: (e) => setDraft(e.target.value),
+            onBlur: () => {
+              if (draft !== value) onCommit(draft);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") e.currentTarget.blur();
+              if (e.key === "Escape") {
+                setDraft(value);
+                e.currentTarget.blur();
+              }
+            },
+            placeholder: "Describe this image",
+            "aria-label": "Image alt text",
+            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"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 var VARIANTS = [
   { value: "logos", label: "Logos" },
   { value: "reel", label: "Reel" }
@@ -10302,6 +10412,7 @@ function MediaStripToolbar({
   onSetHover,
   onSetTreatment,
   onResize,
+  onSetAlt,
   onAddItem,
   onRemoveItem,
   onChangeImage,
@@ -10310,13 +10421,24 @@ function MediaStripToolbar({
 }) {
   const items = mediaStripItems(entry.tree);
   const itemCount = items.length;
+  const currentAlt = items[index]?.alt ?? "";
   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 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 pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
+  const isMobile = window.innerWidth <= 480;
+  const rowStyle = isMobile ? {
+    display: "flex",
+    gap: 6,
+    flexWrap: "nowrap",
+    justifyContent: "center",
+    overflowX: "auto",
+    WebkitOverflowScrolling: "touch",
+    width: "100%",
+    scrollbarWidth: "none"
+  } : { display: "flex", gap: 6, flexWrap: "nowrap", justifyContent: "center" };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
@@ -10334,14 +10456,14 @@ function MediaStripToolbar({
         boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
         pointerEvents: pending ? "none" : "auto",
         opacity: pending ? 0.6 : 1,
-        maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
+        maxWidth: isMobile ? "calc(100vw - 24px)" : "none"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
           VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
           ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
           HOVERS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
           TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
         ] }),
@@ -10353,10 +10475,13 @@ function MediaStripToolbar({
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+", onClick: () => onResize(8) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
+        /* @__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.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 }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
         ] }),
@@ -10377,7 +10502,8 @@ function findMediaStripSlots(tree) {
 function AiMediaStripOverlay({
   postToParent: postToParent2,
   aiSectionsRef,
-  applyTreeLocalRef
+  applyTreeLocalRef,
+  clearInteractionChromeRef
 }) {
   const [hover, setHover] = (0, import_react9.useState)(null);
   const [active, setActive] = (0, import_react9.useState)(null);
@@ -10494,7 +10620,10 @@ function AiMediaStripOverlay({
       {
         type: "button",
         "data-ohw-toolbar": "",
-        onClick: () => setActive(hover),
+        onClick: () => {
+          clearInteractionChromeRef.current();
+          setActive(hover);
+        },
         "aria-label": "Configure media item",
         style: {
           position: "fixed",
@@ -10539,6 +10668,9 @@ function AiMediaStripOverlay({
               const current = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
               void runMutation(active.sectionId, (tree) => setMediaStripSizing(tree, current + delta));
             },
+            onSetAlt: (alt) => {
+              void runMutation(active.sectionId, (tree) => setMediaStripItemAlt(tree, active.index, alt));
+            },
             onAddItem: () => {
               void requestAssetPick(postToParent2).then((picked) => {
                 if (!picked) return;
@@ -20547,6 +20679,8 @@ function OhhwellsBridge() {
   const addNavAfterAnchorRef = (0, import_react18.useRef)(null);
   const editContentRef = (0, import_react18.useRef)({});
   const aiSectionsRef = (0, import_react18.useRef)("");
+  const clearInteractionChromeRef = (0, import_react18.useRef)(() => {
+  });
   const brandKitRef = (0, import_react18.useRef)("");
   const stylesRef = (0, import_react18.useRef)("");
   const appliedDrawerRef = (0, import_react18.useRef)(null);
@@ -22106,6 +22240,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;
@@ -22115,6 +22250,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) => {
@@ -24526,6 +24662,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)) {
@@ -24539,6 +24676,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) => {
@@ -24660,6 +24798,7 @@ function OhhwellsBridge() {
       deselectRef.current();
       clearMediaSelectionRef.current();
     };
+    clearInteractionChromeRef.current = clearInteractionChrome;
     const applyTreeToLocalState = (payload) => {
       clearInteractionChrome();
       const previous = aiSectionsRef.current;
@@ -25255,6 +25394,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;
@@ -26550,7 +26699,8 @@ function OhhwellsBridge() {
           {
             postToParent: postToParent2,
             aiSectionsRef,
-            applyTreeLocalRef
+            applyTreeLocalRef,
+            clearInteractionChromeRef
           }
         ),
         isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(