@ohhwells/bridge 0.1.132 → 0.1.134

package/dist/index.cjs

@@ -4159,18 +4159,25 @@ function FadeSlideshow({ node, ctx, path }) {
     (dir) => onInteract(stepViableSlide(index, failed, count, dir, loop)),
     [count, failed, index, loop, onInteract]
   );
+  const prefetchRef = import_react.default.useRef(prefetch);
+  import_react.default.useEffect(() => {
+    prefetchRef.current = prefetch;
+  });
+  import_react.default.useEffect(() => {
+    if (autoplay) hasInteractedRef.current = false;
+  }, [autoplay]);
   import_react.default.useEffect(() => {
     if (!autoplay) return;
     const id = window.setInterval(() => {
       if (hasInteractedRef.current || hoveredRef.current) return;
       setIndex((i) => loop ? (i + 1) % count : Math.min(count - 1, i + 1));
     }, intervalMs);
-    const warmId = window.setTimeout(() => prefetch(1 % count), Math.min(1500, intervalMs / 2));
+    const warmId = window.setTimeout(() => prefetchRef.current(1 % count), Math.min(1500, intervalMs / 2));
     return () => {
       window.clearInterval(id);
       window.clearTimeout(warmId);
     };
-  }, [autoplay, count, intervalMs, loop, prefetch]);
+  }, [autoplay, count, intervalMs, loop]);
   const hasMovedRef = import_react.default.useRef(false);
   import_react.default.useEffect(() => {
     if (!hasMovedRef.current) {
@@ -13375,17 +13382,9 @@ var Button = React7.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/ui/MediaOverlay.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+// src/ui/media-skeleton.ts
 var MEDIA_UPLOAD_FADE_MS = 300;
-var VIDEO_SETTINGS_BAR_INSET = 8;
-var OVERLAY_BUTTON_STYLE = {
-  pointerEvents: "auto",
-  fontFamily: "Inter, sans-serif",
-  fontSize: 12,
-  color: "#000"
-};
-var SKELETON_CSS = `
+var MEDIA_SKELETON_CSS = `
 @keyframes ohw-media-shimmer {
   0%   { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
@@ -13402,6 +13401,16 @@ var SKELETON_CSS = `
   animation: ohw-media-shimmer 1.4s infinite;
 }
 `;
+
+// src/ui/MediaOverlay.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var VIDEO_SETTINGS_BAR_INSET = 8;
+var OVERLAY_BUTTON_STYLE = {
+  pointerEvents: "auto",
+  fontFamily: "Inter, sans-serif",
+  fontSize: 12,
+  color: "#000"
+};
 var REPLACE_BUTTON_INSET = 12;
 function replaceButtonMode(image, button) {
   if (!button.fullWidth || !button.height) return "none";
@@ -13469,7 +13478,7 @@ function MediaOverlay({
         "data-ohw-media-skeleton": "",
         "aria-hidden": true,
         style: { ...box, pointerEvents: "none" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { children: SKELETON_CSS })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { children: MEDIA_SKELETON_CSS })
       }
     );
   }
@@ -15899,6 +15908,17 @@ function setCarouselSlideAsset(tree, index, assetId) {
     return true;
   });
 }
+function carouselAutoplay(tree) {
+  return findCarouselBlock(tree)?.slots?.autoplay === true;
+}
+function setCarouselAutoplay(tree, on) {
+  return withCarousel(tree, (block) => {
+    const slots = { ...block.slots, autoplay: on };
+    if (!on) delete slots.interval;
+    block.slots = slots;
+    return true;
+  });
+}
 
 // src/ui/ai-section/AiFadeCarouselOverlay.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -16012,10 +16032,85 @@ function Pill4({ label, onClick, disabled }) {
     }
   );
 }
+function TogglePill({
+  label,
+  on,
+  onToggle,
+  disabled
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": on,
+      onClick: onToggle,
+      disabled,
+      title: on ? `${label} on \u2014 click to turn off` : `${label} off \u2014 click to turn on`,
+      style: {
+        height: 28,
+        padding: "0 8px 0 10px",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        borderRadius: 999,
+        border: "none",
+        cursor: disabled ? "default" : "pointer",
+        background: "#ffffff",
+        color: OHW_BLUE_DARK4,
+        opacity: disabled ? 0.4 : 1,
+        fontSize: 12,
+        lineHeight: "16px",
+        fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
+        whiteSpace: "nowrap",
+        flex: "0 0 auto"
+      },
+      children: [
+        label,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "relative",
+              width: 26,
+              height: 15,
+              borderRadius: 999,
+              flex: "0 0 auto",
+              // Off is a grey track, not a washed-out blue: the pill's own white background already
+              // carries the brand colour in the text, and a pale blue track next to it read as
+              // "disabled control" rather than "switch that is off".
+              background: on ? OHW_BLUE_DARK4 : "#CBD5E1",
+              transition: "background 120ms ease"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: 2,
+                  left: on ? 13 : 2,
+                  width: 11,
+                  height: 11,
+                  borderRadius: "50%",
+                  background: "#ffffff",
+                  boxShadow: "0 1px 2px rgba(0,0,0,0.3)",
+                  transition: "left 120ms ease"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function CarouselSlideToolbar({
   pending,
   error,
-  onChangeImage
+  autoplay,
+  onChangeImage,
+  onToggleAutoplay
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
@@ -16032,11 +16127,18 @@ function CarouselSlideToolbar({
         padding: 8,
         borderRadius: 12,
         boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
-        pointerEvents: pending ? "none" : "auto",
-        opacity: pending ? 0.6 : 1
+        // Not dimmed while pending, only inert. The toolbar used to drop to 0.6 opacity for the
+        // length of the validate round-trip, which on a local backend is short enough that the
+        // autoplay toggle just flashed — a dim and an un-dim with nothing in between. Progress is
+        // reported where the change is: the switch moves at once (optimistically), and an image
+        // swap raises the skeleton over the slide.
+        pointerEvents: pending ? "none" : "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Pill4, { label: "Change Image", onClick: onChangeImage }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Pill4, { label: "Change Image", onClick: onChangeImage }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TogglePill, { label: "Autoplay", on: autoplay, onToggle: onToggleAutoplay })
+        ] }),
         error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
       ]
     }
@@ -16052,8 +16154,24 @@ function AiFadeCarouselOverlay({
   const [active, setActive] = (0, import_react12.useState)(null);
   const [pending, setPending] = (0, import_react12.useState)(false);
   const [error, setError] = (0, import_react12.useState)(null);
+  const [autoplayOverride, setAutoplayOverride] = (0, import_react12.useState)(null);
+  const [swapping, setSwapping] = (0, import_react12.useState)(null);
+  const skeletonRef = (0, import_react12.useRef)(null);
   const activeRef = (0, import_react12.useRef)(null);
   activeRef.current = active;
+  (0, import_react12.useEffect)(() => {
+    setAutoplayOverride(null);
+  }, [active?.sectionId, active?.index]);
+  (0, import_react12.useEffect)(() => {
+    if (!swapping?.fadingOut || !skeletonRef.current) return;
+    const anim = skeletonRef.current.animate([{ opacity: 1 }, { opacity: 0 }], {
+      duration: MEDIA_UPLOAD_FADE_MS,
+      easing: "ease-out",
+      fill: "forwards"
+    });
+    anim.finished.then(() => setSwapping(null)).catch(() => setSwapping(null));
+    return () => anim.cancel();
+  }, [swapping?.fadingOut]);
   (0, import_react12.useEffect)(() => {
     const onMove = (e) => {
       const t = e.target;
@@ -16194,6 +16312,27 @@ function AiFadeCarouselOverlay({
         children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.Star, { size: 14, style: { pointerEvents: "none" } })
       }
     ),
+    swapping && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "div",
+      {
+        ref: skeletonRef,
+        "data-ohw-bridge": "",
+        "data-ohw-media-skeleton": "",
+        "aria-hidden": true,
+        style: {
+          position: "fixed",
+          top: swapping.rect.top,
+          left: swapping.rect.left,
+          width: swapping.rect.width,
+          height: swapping.rect.height,
+          // Under the toolbar (2147483647) so its controls stay visible and clickable over the
+          // slide being swapped, and inert so it cannot eat the click that dismisses them.
+          zIndex: 2147483646,
+          pointerEvents: "none"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { children: MEDIA_SKELETON_CSS })
+      }
+    ),
     activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ItemInteractionLayer,
       {
@@ -16204,14 +16343,36 @@ function AiFadeCarouselOverlay({
           {
             pending,
             error,
+            autoplay: autoplayOverride ?? carouselAutoplay(activeEntry.tree),
+            onToggleAutoplay: () => {
+              const next = !(autoplayOverride ?? carouselAutoplay(activeEntry.tree));
+              setAutoplayOverride(next);
+              void runMutation(active.sectionId, (tree) => setCarouselAutoplay(tree, next)).then(
+                (ok) => {
+                  if (!ok) setAutoplayOverride(null);
+                }
+              );
+            },
             onChangeImage: () => {
-              void requestAssetPick2(postToParent2).then((picked) => {
+              void requestAssetPick2(postToParent2).then(async (picked) => {
                 if (!picked) return;
-                void runMutation(
+                const slideRect = readRect5(active);
+                if (slideRect) setSwapping({ rect: slideRect, fadingOut: false });
+                const ok = await runMutation(
                   active.sectionId,
                   (tree) => setCarouselSlideAsset(tree, active.index, picked.assetId),
                   { [picked.assetId]: picked.url }
                 );
+                if (!ok) {
+                  setSwapping(null);
+                  return;
+                }
+                const preload = new Image();
+                const done = () => setSwapping((s) => s ? { ...s, fadingOut: true } : s);
+                preload.onload = done;
+                preload.onerror = done;
+                preload.src = picked.url;
+                if (preload.complete) done();
               });
             }
           }
@@ -30153,7 +30314,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.130",
+        bridgeVersion: "0.1.132",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections