@drawbridge/components 0.0.78 → 0.1.0

package/dist/bridge/template-subdomain-gallery.mjs

@@ -0,0 +1,495 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
+import Video from "../video";
+import Button from "../shared/button";
+import Loader from "../icons/loader";
+import Warning from "../icons/warning";
+import { backgroundStyle } from "../styles";
+const ms = 1e4;
+const GalleryImage = ({
+  alt,
+  className,
+  fill,
+  priority,
+  sizes,
+  src,
+  onLoad = () => {
+  },
+  style
+}) => {
+  var _a, _b;
+  const [loaded, setLoaded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const settle = () => {
+    onLoad();
+    setLoaded(true);
+  };
+  if (failed) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          "aria-label": alt,
+          className: "absolute inset-0 flex justify-center items-center" + (style ? "" : " bg-gray text-black"),
+          role: "img",
+          ...style && { style: backgroundStyle(style) }
+        },
+        children: /* @__PURE__ */ jsx(
+          Warning,
+          {
+            ...{
+              "aria-hidden": true,
+              className: "w-10 h-10"
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Image,
+      {
+        ...{
+          alt,
+          // The priority (LCP hero) image must paint natively — an
+          // opacity-0 gate keeps it invisible until the post-hydration
+          // onLoad, which stops LCP registering on the image bytes.
+          // Non-priority gallery images keep the fade-in reveal.
+          className: className + " " + (priority || loaded ? "opacity-100" : "opacity-0"),
+          fill,
+          // fetchpriority=high on the LCP hero: `priority` alone
+          // preloads (React float) but at DEFAULT priority, so the
+          // hero competes evenly with every other queued request.
+          // Next forwards this prop onto both the preload and the
+          // <img>. (Restores 5bee785 — accidentally stripped by
+          // the 94be83b file-state revert.)
+          ...priority && { fetchPriority: "high" },
+          priority,
+          sizes,
+          src,
+          unoptimized: true,
+          onLoad: settle,
+          onError: () => {
+            settle();
+            setFailed(true);
+          }
+        }
+      }
+    ),
+    !priority && !loaded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          // absolute overlay, NOT in-flow: an in-flow w-full/h-full loader
+          // borrows the gallery box's 697px and collapses to 0 when the
+          // image loads = a ~0.65 CLS. The gallery box already reserves its
+          // height (h-[85svh]); overlaying the loader means removing it
+          // shifts nothing.
+          className: "absolute inset-0 flex justify-center items-center"
+        },
+        children: /* @__PURE__ */ jsx(
+          Loader,
+          {
+            ...{
+              className: "w-10 h-10 animate-spin",
+              // The brand's text colour: the background colour vanished on the page behind it.
+              style: {
+                color: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.hex
+              }
+            }
+          }
+        )
+      }
+    )
+  ] });
+};
+const TemplateSubdomainGallery = ({
+  children,
+  compact,
+  gallery,
+  modal,
+  overlay,
+  style
+}) => {
+  var _a;
+  const indicators = useRef({});
+  const prevIndex = useRef(null);
+  const currentAnimation = useRef(null);
+  const currentEl = useRef(null);
+  const [animations, setAnimations] = useState({});
+  const [heroPainted, setHeroPainted] = useState(false);
+  const [index, setIndex] = useState(0);
+  const length = Object.keys(gallery).length;
+  useEffect(() => {
+    if (length < 2 || typeof window === "undefined") return;
+    const warm = () => {
+      const next = gallery[(index + 1) % length];
+      if (!(next == null ? void 0 : next.id) || !(next == null ? void 0 : next.mimetype)) return;
+      const src = next.mimetype.includes("video") ? (() => {
+        const frame = (next.frames || [])[0];
+        return frame && cdnSrc(frame, "1080x1920", next.updatedAt);
+      })() : cdnSrc({ sizes: next.sizes }, "1440x2560", next.updatedAt) || cdnSrc({ sizes: next.sizes }, "1080x1920", next.updatedAt);
+      if (src) new window.Image().src = src;
+    };
+    if ("requestIdleCallback" in window) {
+      const handle2 = window.requestIdleCallback(warm, { timeout: 4e3 });
+      return () => window.cancelIdleCallback(handle2);
+    }
+    const handle = setTimeout(warm, 3e3);
+    return () => clearTimeout(handle);
+  }, [gallery, index, length]);
+  const activePosterSrc = (() => {
+    var _a2;
+    const item = gallery[index];
+    if (!((_a2 = item == null ? void 0 : item.mimetype) == null ? void 0 : _a2.includes("video"))) return null;
+    const frame = (item.frames || [])[0];
+    return frame && cdnSrc(frame, "1080x1920", item.updatedAt) || null;
+  })();
+  const imageRadius = ((_a = style == null ? void 0 : style.image) == null ? void 0 : _a.radius) != null ? style.image.radius + "px" : "12px";
+  const classes = {
+    controls: [
+      "absolute inset-0 z-10 grid grid-cols-2"
+    ],
+    gallery: [
+      "z-0 relative w-full bg-cover bg-center p-2.5 ",
+      compact ? "h-[85svh]" : "h-svh",
+      "lg:fixed lg:h-full lg:w-1/3",
+      ...modal ? ["blur-[8px]"] : []
+    ],
+    galleryInner: [
+      "relative h-full w-full overflow-hidden",
+      "transition duration-300 ease-in-out",
+      "opacity-100"
+    ]
+  };
+  const decrement = useCallback(
+    (index2) => {
+      if (index2 < 0) {
+        setIndex(length - 1);
+      } else {
+        setIndex(index2);
+      }
+    },
+    [length]
+  );
+  const increment = useCallback(
+    (index2) => {
+      if (index2 === length) {
+        setIndex(0);
+      } else {
+        setIndex(index2);
+      }
+    },
+    [length]
+  );
+  const onLoad = useCallback(
+    (id, key, duration = ms) => {
+      setAnimations((old) => {
+        if (old == null ? void 0 : old[key]) {
+          return old;
+        }
+        return {
+          ...old,
+          [key]: { id, duration }
+        };
+      });
+    },
+    []
+  );
+  useEffect(
+    () => {
+      return () => {
+        if (currentEl.current) {
+          currentEl.current.style.transform = "";
+        }
+        ;
+        if (currentAnimation.current) {
+          currentAnimation.current.oncancel = null;
+          currentAnimation.current.onfinish = null;
+          currentAnimation.current.cancel();
+        }
+      };
+    },
+    []
+  );
+  useLayoutEffect(
+    () => {
+      const current = animations[index];
+      const el = indicators.current[index];
+      if (!current) {
+        if (el) {
+          el.style.transform = "translateX(-100%)";
+        }
+        ;
+        return;
+      }
+      ;
+      const sameIndex = prevIndex.current === index;
+      if (sameIndex && currentAnimation.current) {
+        const state = currentAnimation.current.playState;
+        if (state === "running" || state === "pending") {
+          return;
+        }
+        ;
+      }
+      ;
+      if (currentAnimation.current) {
+        if (currentEl.current) {
+          currentEl.current.style.transform = "";
+        }
+        ;
+        currentAnimation.current.onfinish = null;
+        currentAnimation.current.oncancel = null;
+        currentAnimation.current.cancel();
+      }
+      ;
+      if (!el) {
+        return;
+      }
+      ;
+      el.style.transform = "translateX(-100%)";
+      const animation = el.animate(
+        [
+          {
+            transform: "translateX(-100%)"
+          },
+          {
+            transform: "translateX(0)"
+          }
+        ],
+        {
+          duration: current.duration,
+          fill: "backwards"
+        }
+      );
+      animation.oncancel = () => decrement(index - 1);
+      animation.onfinish = () => increment(index + 1);
+      currentAnimation.current = animation;
+      currentEl.current = el;
+      prevIndex.current = index;
+    },
+    [animations, decrement, increment, index]
+  );
+  const renderItem = ({ filename, id, mimetype, sizes, updatedAt, frames }, key) => {
+    if (id && mimetype) {
+      const posterFrame = (frames || [])[0];
+      const posterSrc = posterFrame && cdnSrc(posterFrame, "1080x1920", updatedAt);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...{
+            className: "relative w-full h-full transition-all duration-500 " + (Boolean(key === index) ? "visible " : "hidden ")
+          },
+          children: [
+            mimetype.includes("image") && ((sizes == null ? void 0 : sizes["1440x2560"]) || (sizes == null ? void 0 : sizes["1080x1920"]) || (sizes == null ? void 0 : sizes.original)) && /* @__PURE__ */ jsx(
+              GalleryImage,
+              {
+                ...{
+                  alt: filename,
+                  className: "object-cover object-top transition duration-200",
+                  fill: true,
+                  // Only the visible first slide is the LCP candidate;
+                  // later slides are hidden (display:none) and lazy, so
+                  // they don't compete with the hero for bandwidth. The
+                  // warmer effect above prefetches the next slide at idle.
+                  priority: key === 0,
+                  sizes: "(min-width: 1024px) 33vw, 100vw",
+                  // Prefer the retina 9:16 tier (1080x1920 upscaled ~33% on
+                  // phones where this hero fills the screen); fall back to
+                  // 1080x1920 for assets resized before that tier existed.
+                  //
+                  // Last resort is the unbounded original — a freshly
+                  // uploaded or AI-generated image gets its variants
+                  // asynchronously, so for a window it has ONLY `original`.
+                  // Rendering it costs LCP; rendering nothing costs the
+                  // page, because onLoad never fires and the gallery never
+                  // reveals. Same fallback template-subdomain.js uses.
+                  src: cdnSrc({ sizes }, "1440x2560", updatedAt) || cdnSrc({ sizes }, "1080x1920", updatedAt) || cdnSrc({ sizes }, "original", updatedAt),
+                  style,
+                  onLoad: () => {
+                    setHeroPainted(true);
+                    onLoad(id, key, ms);
+                  }
+                }
+              },
+              id + "-" + key + "-gallery-item-image"
+            ),
+            mimetype.includes("video") && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+              Video,
+              {
+                ...{
+                  loop: Boolean(length === 1),
+                  onDuration: (value) => onLoad(id, key, value * 1e3),
+                  // Terminal source failure (components 0.0.61): the
+                  // poster stays as a still image; register the slide
+                  // at the DEFAULT duration so the carousel treats it
+                  // like an image slide and still advances — without
+                  // this, a dead video stalls the whole gallery
+                  // (onDuration never fires → no animation → no
+                  // onfinish → no next slide). onLoad's first-write-
+                  // wins guard makes this a no-op if the real
+                  // duration already registered.
+                  onError: () => onLoad(id, key, ms),
+                  playing: Boolean(key === index),
+                  // The component owns the placeholder now: it renders
+                  // (and SSRs) this poster immediately, keeps it through
+                  // every pre-playback state, leaves it in place if the
+                  // sources die, and hands off to the native poster
+                  // attribute at player-ready. `defer` moves the old
+                  // gallery-level mount gate inside the component so the
+                  // placeholder still paints in the first byte.
+                  defer: true,
+                  poster: posterSrc,
+                  priority: key === 0,
+                  reset: Boolean(key !== index),
+                  style,
+                  hls: cdnSrc({ sizes }, "hls", updatedAt),
+                  mp4: cdnSrc({ sizes }, "original", updatedAt)
+                }
+              },
+              id + "-" + key + "-gallery-item-video"
+            ) })
+          ]
+        },
+        id + "-" + key + "-gallery-item"
+      );
+    }
+    return true;
+  };
+  const controls = length > 1 && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.controls.join(" "),
+        "aria-hidden": true
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              "aria-hidden": true,
+              "aria-label": "Previous Slide",
+              onClick: () => {
+                if (currentAnimation.current) {
+                  currentAnimation.current.cancel();
+                }
+              },
+              variant: "link"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              "aria-hidden": true,
+              "aria-label": "Next Slide",
+              onClick: () => {
+                if (currentAnimation.current) {
+                  currentAnimation.current.finish();
+                }
+              },
+              variant: "link"
+            }
+          }
+        )
+      ]
+    }
+  );
+  const render = length > 0 && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.gallery.join(" "),
+        "aria-hidden": true,
+        // No frame in this padding: a 40% text-colour one drew here until share's
+        // 2026-06-01 layout fix broke it, and Darren decided against bringing it back.
+        style: {
+          borderRadius: imageRadius
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: classes.galleryInner.join(" "),
+              style: {
+                borderRadius: imageRadius
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...{
+                    className: "items-center absolute top-0 left-0 z-50 flex w-full px-3 py-5 lg:p-5 " + (length > 1 ? "flex" : "hidden")
+                  },
+                  children: gallery.map(({ id }, key) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...{
+                        className: "w-full p-1"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ...{
+                            className: "relative bg-white/50 h-[3px] w-full overflow-hidden"
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              ...{
+                                className: "absolute top-0 left-0 bg-white h-full w-full " + (Number(key) > Number(index) ? "-translate-x-full" : ""),
+                                style: Number(key) === Number(index) ? { transform: "translateX(-100%)" } : void 0,
+                                ref: (element) => indicators.current[key] = element
+                              }
+                            }
+                          )
+                        }
+                      )
+                    },
+                    id + "-control"
+                  ))
+                }
+              ),
+              Object.keys(animations).length === 0 && !heroPainted && !activePosterSrc && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...{
+                    className: "absolute inset-0 flex items-center justify-center z-10"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Loader,
+                    {
+                      ...{
+                        className: "w-6 h-6 animate-spin text-gray-400"
+                      }
+                    }
+                  )
+                }
+              ),
+              gallery.map((props, key) => renderItem(props, key)),
+              overlay
+            ]
+          }
+        ),
+        controls
+      ]
+    }
+  );
+  return children({
+    controls: null,
+    render
+  });
+};
+var template_subdomain_gallery_default = TemplateSubdomainGallery;
+export {
+  template_subdomain_gallery_default as default
+};

package/dist/bridge/template-subdomain-link.js

@@ -0,0 +1,134 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var template_subdomain_link_exports = {};
+__export(template_subdomain_link_exports, {
+  default: () => template_subdomain_link_default
+});
+module.exports = __toCommonJS(template_subdomain_link_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_image = __toESM(require("next/image"));
+var import_button = __toESM(require("../shared/button"));
+const TemplateSubdomainLink = ({
+  element: Element,
+  className = "py-4 pr-3",
+  icon: Icon,
+  image,
+  buttonWithImageHeight,
+  // style here is a CSS object, not the brand object; renamed at cutover (spec rule 3)
+  style,
+  svg: Svg,
+  text,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.default,
+    {
+      ...{
+        element: Element,
+        ...rest.target === "_blank" && {
+          "aria-label": text + " (Opens in a new tab)"
+        },
+        variant: "link",
+        ...rest
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "span",
+        {
+          ...{
+            className: "flex w-full items-center " + (Svg ? "justify-between " : "") + className,
+            style
+          },
+          children: [
+            (image || Icon || buttonWithImageHeight) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...{
+                  className: image ? "relative w-10 h-10 overflow-hidden shrink-0" : Icon ? "relative w-10 h-10 overflow-hidden shrink-0 flex items-center justify-center" : "relative w-3 h-10 overflow-hidden shrink-0",
+                  style: {
+                    borderRadius: style == null ? void 0 : style.borderRadius
+                  }
+                },
+                children: image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_image.default,
+                  {
+                    ...{
+                      alt: text,
+                      className: "object-cover",
+                      fill: true,
+                      sizes: "40px",
+                      src: image,
+                      unoptimized: true
+                    }
+                  }
+                ) : (
+                  // platform glyph fallback — fill:currentColor, so it inherits the
+                  // button text color from the Element's style and follows restyles
+                  Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    Icon,
+                    {
+                      ...{
+                        "aria-hidden": true,
+                        className: "w-[22px] h-[22px]"
+                      }
+                    }
+                  )
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                ...{
+                  className: (image || buttonWithImageHeight) && !Svg ? "flex-1 text-center" : ""
+                },
+                children: text
+              }
+            ),
+            Svg ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              Svg,
+              {
+                ...{
+                  className: "w-4 h-4"
+                }
+              }
+            ) : (image || Icon || buttonWithImageHeight) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...{
+                  className: (image || Icon ? "w-7" : "w-0") + " h-10 shrink-0"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var template_subdomain_link_default = TemplateSubdomainLink;