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

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)(
@@ -15240,14 +15253,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 +15292,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 +15313,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 +16499,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 +16536,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 +16576,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,
@@ -21619,6 +21647,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 +21754,7 @@ function OhhwellsBridge() {
     });
   }, []);
   const openSocialsDisplayPanel = (0, import_react18.useCallback)((row) => {
+    setFloatingPanelPos(null);
     setParentScrollSnap(parentScrollRef.current);
     setFloatingPanel({
       key: "socials-display",
@@ -26819,6 +26849,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,