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

package/dist/index.cjs

@@ -10155,6 +10155,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 +10281,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 +10378,7 @@ function MediaStripToolbar({
   onSetHover,
   onSetTreatment,
   onResize,
+  onSetAlt,
   onAddItem,
   onRemoveItem,
   onChangeImage,
@@ -10310,13 +10387,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 +10422,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 +10441,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 +10468,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 +10586,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 +10634,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 +20645,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);
@@ -24660,6 +24760,7 @@ function OhhwellsBridge() {
       deselectRef.current();
       clearMediaSelectionRef.current();
     };
+    clearInteractionChromeRef.current = clearInteractionChrome;
     const applyTreeToLocalState = (payload) => {
       clearInteractionChrome();
       const previous = aiSectionsRef.current;
@@ -26550,7 +26651,8 @@ function OhhwellsBridge() {
           {
             postToParent: postToParent2,
             aiSectionsRef,
-            applyTreeLocalRef
+            applyTreeLocalRef,
+            clearInteractionChromeRef
           }
         ),
         isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(