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

package/dist/index.cjs

@@ -2439,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-hover]{transition:transform 0.2s ease, opacity 0.2s ease}[data-ohw-media-strip-item]:hover>[data-ohw-media-strip-hover="lift"]{transform:translateY(-4px)}[data-ohw-media-strip-item]:hover>[data-ohw-media-strip-hover="zoom"]{transform:scale(1.05)}[data-ohw-media-strip-item]:hover>[data-ohw-media-strip-hover="fade"]{opacity:0.75}'
+    }),
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -2464,28 +2468,34 @@ 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",
             {
               "data-ohw-media-strip-item": "",
               "data-ohw-media-strip-index": i,
-              "data-ohw-media-strip-hover": hoverPreset === "none" ? void 0 : hoverPreset,
               style: variant === "logos" ? { height: logoMaxHeight, width: "auto" } : { width: cardWidth, flexShrink: 0 },
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                MediaBox,
+                "div",
                 {
-                  refValue: item.assetId,
-                  ctx,
-                  aspect: variant === "reel" ? "9:16" : void 0,
-                  radius: variant === "reel" ? AI_TREE_TOKENS.radiusCard : 4,
-                  height: variant === "logos" ? logoMaxHeight : void 0,
-                  editPath: `${path}.items.${i}.assetId`,
-                  alt: item.alt,
-                  fit: variant === "logos" ? "contain" : "cover",
-                  grayscale: treatment === "grayscale",
-                  fixedSize: variant === "logos",
-                  genericImageEdit: false
+                  "data-ohw-media-strip-hover": hoverPreset === "none" ? void 0 : hoverPreset,
+                  style: { height: "100%" },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    MediaBox,
+                    {
+                      refValue: item.assetId,
+                      ctx,
+                      aspect: variant === "reel" ? "9:16" : void 0,
+                      radius: variant === "reel" ? AI_TREE_TOKENS.radiusCard : 4,
+                      height: variant === "logos" ? logoMaxHeight : void 0,
+                      editPath: `${path}.items.${i}.assetId`,
+                      alt: item.alt,
+                      fit: variant === "logos" ? "contain" : "cover",
+                      grayscale: treatment === "grayscale",
+                      fixedSize: variant === "logos",
+                      genericImageEdit: false
+                    }
+                  )
                 }
               )
             }
@@ -2494,8 +2504,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
             },
@@ -10197,6 +10207,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");
@@ -10402,6 +10428,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,
@@ -10413,6 +10521,7 @@ function MediaStripToolbar({
   onSetTreatment,
   onResize,
   onSetAlt,
+  onSetLink,
   onAddItem,
   onRemoveItem,
   onChangeImage,
@@ -10422,10 +10531,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;
@@ -10476,6 +10587,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 }),
@@ -10671,6 +10787,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;