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

package/dist/index.cjs

@@ -8504,8 +8504,15 @@ function ItemInteractionLayer({
   itemDragSurface = true,
   chromeGap,
   toolbarAlign = "center",
+  hidden = false,
   className
 }) {
+  const localRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useLayoutEffect)(() => {
+    const node = localRef.current;
+    if (!node) return;
+    node.style.display = hidden ? "none" : "block";
+  }, [hidden, rect.top, rect.left, rect.width, rect.height, state]);
   if (state === "default") return null;
   const gap = chromeGap ?? (state === "hover" ? HOVER_CHROME_GAP : SELECTION_CHROME_GAP);
   const isActive = state === "active-top" || state === "active-bottom";
@@ -8514,10 +8521,15 @@ function ItemInteractionLayer({
   const showDragHandle = (isActive || isDragging) && showHandle;
   const itemDragEnabled = itemDragSurface && isActive && !isDragging && !dragDisabled && Boolean(showHandle || onItemPointerDown);
   const useDetachedBelowToolbar = Boolean(showToolbar && state === "active-bottom" && toolbarBelowRect);
+  const setRootRef = (node) => {
+    localRef.current = node;
+    if (typeof elRef === "function") elRef(node);
+    else if (elRef) elRef.current = node;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
-      ref: elRef,
+      ref: setRootRef,
       "data-ohw-item-interaction": "",
       "data-ohw-item-interaction-state": state,
       className: cn("pointer-events-none", className),
@@ -8527,7 +8539,8 @@ function ItemInteractionLayer({
         left: rect.left - gap,
         width: rect.width + gap * 2,
         height: rect.height + gap * 2,
-        zIndex: getChromeZIndex(state)
+        zIndex: getChromeZIndex(state),
+        display: hidden ? "none" : "block"
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -10142,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");
@@ -10260,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" }
@@ -10289,6 +10378,7 @@ function MediaStripToolbar({
   onSetHover,
   onSetTreatment,
   onResize,
+  onSetAlt,
   onAddItem,
   onRemoveItem,
   onChangeImage,
@@ -10297,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",
     {
@@ -10321,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))
         ] }),
@@ -10340,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 })
         ] }),
@@ -10364,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);
@@ -10481,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",
@@ -10526,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;
@@ -15240,14 +15351,18 @@ function clampDragPosition(pos, parentScroll, panelW) {
     y: Math.min(Math.max(pos.y, minY), maxY)
   };
 }
-function stickyPageY(homeY, parentScroll) {
-  const clip = getVisibleClip(parentScroll);
-  return Math.max(homeY, clip.top + EDGE_MARGIN);
-}
-function availablePanelHeight(parentScroll, top) {
+function fitPanelInClip(homeY, parentScroll, preferredHeight) {
   const clip = getVisibleClip(parentScroll);
-  const available = Math.floor(clip.bottom - top - EDGE_MARGIN);
-  return available > HEADER_MIN ? available : void 0;
+  const minY = clip.top + EDGE_MARGIN;
+  const maxBottom = clip.bottom - EDGE_MARGIN;
+  const band = Math.max(HEADER_MIN, maxBottom - minY);
+  let y = Math.max(homeY, minY);
+  const want = Math.min(Math.max(preferredHeight, HEADER_MIN), band);
+  if (y + want > maxBottom) {
+    y = Math.max(minY, maxBottom - want);
+  }
+  const maxHeight = Math.max(HEADER_MIN, Math.floor(maxBottom - y));
+  return { y, maxHeight };
 }
 function FloatingPanel({
   open,
@@ -15275,11 +15390,11 @@ function FloatingPanel({
   }
   const [liveScroll, setLiveScroll] = (0, import_react14.useState)(parentScroll);
   const home = position ?? homeRef.current ?? defaultFloatingPanelPosition(parentScroll);
+  const { y: fittedY, maxHeight } = fitPanelInClip(home.y, liveScroll, measured.h);
   const clamped = {
     x: clampX(home.x, measured.w),
-    y: stickyPageY(home.y, liveScroll)
+    y: fittedY
   };
-  const maxHeight = availablePanelHeight(liveScroll, clamped.y);
   (0, import_react14.useEffect)(() => {
     if (!open) {
       setLiveScroll(parentScroll);
@@ -15296,7 +15411,10 @@ function FloatingPanel({
   (0, import_react14.useLayoutEffect)(() => {
     if (!open || !panelRef.current) return;
     const el = panelRef.current;
-    const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
+    const header = el.querySelector("[data-ohw-floating-panel-header]");
+    const body = el.querySelector("[data-ohw-floating-panel-body]");
+    const contentH = (header?.offsetHeight ?? 0) + (body?.scrollHeight ?? 0) || el.scrollHeight || 280;
+    const next = { w: el.offsetWidth || PANEL_WIDTH, h: contentH };
     setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
   }, [open, children, title, context]);
   const onHeaderPointerDown = (0, import_react14.useCallback)(
@@ -16479,6 +16597,11 @@ function rekeyCopy(copy, id) {
   setButtonDragAttr(copy);
   return { labelKey };
 }
+function stampVariantClass(el, variant) {
+  const raw = typeof el.className === "string" ? el.className : el.getAttribute("class") || "";
+  const without = raw.replace(/\bbtn--(?:primary|secondary|ghost)\b/g, "").replace(/\s+/g, " ").trim();
+  el.className = without ? `${without} btn--${variant}` : `btn btn--${variant}`;
+}
 function snapshotOf(el) {
   const id = buttonId(el) ?? "";
   const label = labelElement2(el);
@@ -16511,8 +16634,13 @@ function duplicateButton(source, content) {
   const href = buttonHref(source);
   const label = buttonLabel(source);
   if (href) copy.setAttribute("href", href);
-  const assignment = readAssignments(content)[sourceId];
-  if (assignment) applyButtonStyle(copy, assignment, tokens);
+  const sourceAssignment = readAssignments(content)[sourceId] ?? assignmentFor(source, content, tokens);
+  const copyAssignment = {
+    variant: "secondary",
+    size: sourceAssignment.size
+  };
+  stampVariantClass(copy, "secondary");
+  applyButtonStyle(copy, copyAssignment, tokens);
   const copyLabelEl = labelElement2(copy);
   if (copyLabelEl) copyLabelEl.textContent = label;
   let collection = buttonCollectionOf(source);
@@ -16546,20 +16674,18 @@ function duplicateButton(source, content) {
     ...collections,
     [collectionId]: { id: collectionId, members, gap }
   };
-  const assignments = assignment ? withAssignment(content, copyId, assignment) : readAssignments(content);
+  const assignments = withAssignment(content, copyId, copyAssignment);
   const nextContent = {
     ...content,
     [copyId]: href,
     [labelKey]: label,
     [BUTTON_COLLECTIONS_KEY]: JSON.stringify(nextCollections),
-    [BUTTON_SNAPSHOTS_KEY]: JSON.stringify(snapshots)
+    [BUTTON_SNAPSHOTS_KEY]: JSON.stringify(snapshots),
+    [BUTTON_ASSIGNMENTS_KEY]: JSON.stringify(assignments)
   };
   if (sourceLabelKey && nextContent[sourceLabelKey] === void 0) {
     nextContent[sourceLabelKey] = label;
   }
-  if (Object.keys(assignments).length > 0) {
-    nextContent[BUTTON_ASSIGNMENTS_KEY] = JSON.stringify(assignments);
-  }
   const nodeKeys = [
     copyId,
     labelKey,
@@ -20519,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);
@@ -21619,6 +21747,7 @@ function OhhwellsBridge() {
     setIsFooterFrameSelection(false);
     setToolbarVariant("link-action");
     setToolbarRect(anchor.getBoundingClientRect());
+    if (glowElRef.current) glowElRef.current.style.display = "";
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
     const panel = floatingPanelRef.current;
@@ -21725,6 +21854,7 @@ function OhhwellsBridge() {
     });
   }, []);
   const openSocialsDisplayPanel = (0, import_react18.useCallback)((row) => {
+    setFloatingPanelPos(null);
     setParentScrollSnap(parentScrollRef.current);
     setFloatingPanel({
       key: "socials-display",
@@ -24630,6 +24760,7 @@ function OhhwellsBridge() {
       deselectRef.current();
       clearMediaSelectionRef.current();
     };
+    clearInteractionChromeRef.current = clearInteractionChrome;
     const applyTreeToLocalState = (payload) => {
       clearInteractionChrome();
       const previous = aiSectionsRef.current;
@@ -26520,7 +26651,8 @@ function OhhwellsBridge() {
           {
             postToParent: postToParent2,
             aiSectionsRef,
-            applyTreeLocalRef
+            applyTreeLocalRef,
+            clearInteractionChromeRef
           }
         ),
         isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -26819,6 +26951,10 @@ function OhhwellsBridge() {
             toolbarBelowRect: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanelRect(selectedElRef.current) : null,
             toolbarBelowEl: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanel(selectedElRef.current) : null,
             elRef: glowElRef,
+            hidden: isRectOutsideClip(
+              isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
+              getIframeVisibleClip(parentScrollRef.current)
+            ),
             state: isItemDragging ? "dragging" : selectedElRef.current && isNavigationItem2(selectedElRef.current) && getOpenNavDropdownPanel(selectedElRef.current) ? "active-bottom" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
             showHandle: toolbarVariant === "link-action" && Boolean(reorderHrefKey) || toolbarVariant === "select-frame" && isFooterFrameSelection,
             dragDisabled: reorderDragDisabled,