@mieweb/ui 0.10.0-dev.4 → 0.10.0-dev.40

package/dist/chunk-2X54ZLT6.js

@@ -0,0 +1,874 @@
+import { MediaPlayer } from './chunk-N54FYWG6.js';
+import { Avatar } from './chunk-TI3TQQ7F.js';
+import { Modal, ModalHeader, ModalTitle, ModalClose } from './chunk-TWQSMUE6.js';
+import { usePrefersReducedMotion } from './chunk-XDU65GLW.js';
+import { Button } from './chunk-WFBUBT54.js';
+import { cn } from './chunk-TQONQSJO.js';
+import * as React2 from 'react';
+import { ChevronUp, ChevronDown, Maximize2, Play, Pause } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function sourceHref(src) {
+  try {
+    const url = new URL(src, "https://localhost/");
+    return ["http:", "https:"].includes(url.protocol) ? src : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function SourceLink({ src, labels }) {
+  const href = sourceHref(src);
+  return href ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "text-primary-700 dark:text-primary-300 focus-visible:ring-ring rounded underline underline-offset-4 focus-visible:ring-2 focus-visible:outline-none",
+      children: labels.openSource
+    }
+  ) : null;
+}
+function NativeFeedMedia({
+  media,
+  title,
+  active,
+  autoPlay,
+  muted,
+  loop,
+  labels,
+  onActivate,
+  playbackPosition,
+  playbackRequestId
+}) {
+  const mediaElementRef = React2.useRef(null);
+  const [state, setState] = React2.useState("idle");
+  const [blocked, setBlocked] = React2.useState(false);
+  const [retryVersion, setRetryVersion] = React2.useState(0);
+  const wantsPlayback = React2.useRef(playbackPosition.playRequested ?? false);
+  const latestPlaybackRequest = React2.useRef(playbackRequestId);
+  latestPlaybackRequest.current = playbackRequestId;
+  const handledPlaybackRequest = React2.useRef(
+    void 0
+  );
+  const ownershipPause = React2.useRef(false);
+  const attemptId = React2.useRef(0);
+  const activeRef = React2.useRef(active);
+  const canSavePosition = React2.useRef(false);
+  activeRef.current = active;
+  const tryPlay = React2.useCallback(async () => {
+    const element = mediaElementRef.current;
+    if (!element || !activeRef.current) return;
+    const attempt = ++attemptId.current;
+    setBlocked(false);
+    try {
+      await element.play();
+      if (!activeRef.current || element !== mediaElementRef.current)
+        element.pause();
+    } catch (error) {
+      if (!activeRef.current || attempt !== attemptId.current) return;
+      if (error instanceof Error && error.name === "AbortError") return;
+      setBlocked(true);
+    }
+  }, []);
+  const pauseForOwnership = React2.useCallback(
+    (element) => {
+      if (element && element === mediaElementRef.current && !element.paused)
+        ownershipPause.current = true;
+      element?.pause();
+    },
+    []
+  );
+  React2.useEffect(() => {
+    const element = mediaElementRef.current;
+    const attempts = attemptId;
+    const restorePosition = () => {
+      if (!element || !activeRef.current) return;
+      if (playbackPosition.timeMs > 0) {
+        element.currentTime = playbackPosition.timeMs / 1e3;
+      }
+      canSavePosition.current = true;
+    };
+    if (active && element) {
+      wantsPlayback.current = playbackPosition.playRequested ?? false;
+      if (element.readyState >= 1) restorePosition();
+      else element.addEventListener("loadedmetadata", restorePosition);
+    }
+    if (active && (latestPlaybackRequest.current === void 0 || latestPlaybackRequest.current === handledPlaybackRequest.current) && (autoPlay || wantsPlayback.current)) {
+      void tryPlay();
+    } else if (!active) {
+      attemptId.current++;
+      pauseForOwnership(element);
+      setBlocked(false);
+    }
+    return () => {
+      attempts.current++;
+      element?.removeEventListener("loadedmetadata", restorePosition);
+      if (element && canSavePosition.current)
+        playbackPosition.timeMs = element.currentTime * 1e3;
+      pauseForOwnership(element);
+    };
+  }, [
+    active,
+    autoPlay,
+    pauseForOwnership,
+    playbackPosition,
+    retryVersion,
+    tryPlay
+  ]);
+  React2.useEffect(() => {
+    if (!active || playbackRequestId === void 0 || playbackRequestId === handledPlaybackRequest.current)
+      return;
+    handledPlaybackRequest.current = playbackRequestId;
+    wantsPlayback.current = true;
+    playbackPosition.playRequested = true;
+    void tryPlay();
+  }, [active, playbackRequestId, playbackPosition, tryPlay]);
+  const togglePlayback = () => {
+    if (state === "playing") {
+      wantsPlayback.current = false;
+      playbackPosition.playRequested = false;
+      mediaElementRef.current?.pause();
+    } else {
+      wantsPlayback.current = true;
+      playbackPosition.playRequested = true;
+      onActivate();
+      if (active) void tryPlay();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-col items-center justify-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      MediaPlayer,
+      {
+        src: media.src,
+        kind: media.kind === "audio" ? "audio" : "video",
+        mediaElementRef,
+        muted,
+        loop,
+        poster: media.poster,
+        preload: active ? "metadata" : "none",
+        controls: active,
+        "aria-label": title,
+        onStateChange: (next) => {
+          setState(next);
+          if (next === "playing") ownershipPause.current = false;
+          if (next === "paused") {
+            if (activeRef.current && !ownershipPause.current) {
+              wantsPlayback.current = false;
+              playbackPosition.playRequested = false;
+            }
+            ownershipPause.current = false;
+          }
+        },
+        onTimeUpdate: (timeMs) => {
+          if (canSavePosition.current) playbackPosition.timeMs = timeMs;
+        },
+        onRetry: () => {
+          ownershipPause.current = false;
+          canSavePosition.current = false;
+          setState("idle");
+          setBlocked(false);
+          setRetryVersion((version) => version + 1);
+        },
+        labels: { error: labels.mediaError, retry: labels.retry },
+        className: "min-h-0 flex-1 [&_video]:h-full [&_video]:w-full"
+      }
+    ),
+    state !== "error" && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        leftIcon: state === "playing" ? /* @__PURE__ */ jsx(Pause, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Play, { className: "h-4 w-4", "aria-hidden": "true" }),
+        onClick: togglePlayback,
+        children: state === "playing" ? labels.pause : labels.play
+      }
+    ),
+    blocked && /* @__PURE__ */ jsx(
+      "p",
+      {
+        role: "status",
+        className: "text-muted-foreground m-0 text-center text-sm",
+        children: labels.blockedAutoplay
+      }
+    ),
+    state === "error" && /* @__PURE__ */ jsx(SourceLink, { src: media.src, labels })
+  ] });
+}
+function ImageFeedMedia({ media, title, labels }) {
+  const [failed, setFailed] = React2.useState(false);
+  return failed ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "flex flex-col gap-3 p-6 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground m-0", children: labels.mediaError }),
+    /* @__PURE__ */ jsx(SourceLink, { src: media.src, labels })
+  ] }) : /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: media.src,
+      alt: media.alt ?? title,
+      loading: "lazy",
+      className: "h-full max-h-full w-full object-contain",
+      onError: () => setFailed(true)
+    }
+  );
+}
+function youtubeId(src) {
+  const validId = /^[A-Za-z0-9_-]{11}$/;
+  if (validId.test(src)) return src;
+  try {
+    const url = new URL(src);
+    const host = url.hostname.toLowerCase();
+    const parts = url.pathname.split("/").filter(Boolean);
+    let id = null;
+    if (host === "youtu.be" || host === "www.youtu.be") {
+      id = parts[0] ?? null;
+    } else if ([
+      "youtube.com",
+      "www.youtube.com",
+      "m.youtube.com",
+      "youtube-nocookie.com",
+      "www.youtube-nocookie.com"
+    ].includes(host)) {
+      id = url.searchParams.get("v") ?? (["embed", "shorts", "live"].includes(parts[0]) ? parts[1] : null);
+    }
+    return id && validId.test(id) ? id : null;
+  } catch {
+    return null;
+  }
+}
+function YouTubeFeedMedia({
+  media,
+  title,
+  active,
+  autoPlay,
+  muted,
+  loop,
+  labels,
+  onActivate,
+  playbackRequestId
+}) {
+  const id = youtubeId(media.src);
+  const [requestedPlayback, setRequestedPlayback] = React2.useState(false);
+  const handledPlaybackRequest = React2.useRef(
+    void 0
+  );
+  const pendingPlayback = active && playbackRequestId !== void 0 && playbackRequestId !== handledPlaybackRequest.current;
+  React2.useEffect(() => {
+    if (!active) setRequestedPlayback(false);
+    else if (playbackRequestId !== void 0 && playbackRequestId !== handledPlaybackRequest.current) {
+      handledPlaybackRequest.current = playbackRequestId;
+      setRequestedPlayback(true);
+    }
+  }, [active, playbackRequestId]);
+  const embedUrl = new URL(
+    `https://www.youtube-nocookie.com/embed/${id ?? ""}`
+  );
+  for (const [key, value] of Object.entries({
+    autoplay: autoPlay || requestedPlayback || pendingPlayback ? "1" : "0",
+    mute: muted ? "1" : "0",
+    controls: "1",
+    playsinline: "1",
+    rel: "0",
+    loop: loop ? "1" : "0",
+    ...loop && id ? { playlist: id } : {}
+  }))
+    embedUrl.searchParams.set(key, value);
+  const [failed, setFailed] = React2.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-col items-center gap-3", children: [
+    active && id && !failed ? /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: embedUrl.href,
+        title,
+        className: "min-h-0 w-full flex-1 border-0",
+        allow: "autoplay; encrypted-media; picture-in-picture; fullscreen",
+        referrerPolicy: "strict-origin-when-cross-origin",
+        allowFullScreen: true,
+        onError: () => setFailed(true)
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-full flex-1 flex-col items-center justify-center gap-4", children: [
+      media.poster && /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: media.poster,
+          alt: "",
+          loading: "lazy",
+          className: "min-h-0 max-w-full flex-1 object-contain"
+        }
+      ),
+      id && !failed ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          leftIcon: /* @__PURE__ */ jsx(Play, { className: "h-4 w-4", "aria-hidden": "true" }),
+          onClick: () => {
+            setRequestedPlayback(true);
+            onActivate();
+          },
+          children: labels.play
+        }
+      ) : /* @__PURE__ */ jsx("p", { role: "alert", className: "text-muted-foreground m-0", children: labels.mediaError })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground m-0 text-center text-sm", children: labels.youtubeNotice }),
+    /* @__PURE__ */ jsx(
+      SourceLink,
+      {
+        src: id ? `https://www.youtube.com/watch?v=${id}` : media.src,
+        labels
+      }
+    )
+  ] });
+}
+function FeedMedia(props) {
+  if (props.media.kind === "image") return /* @__PURE__ */ jsx(ImageFeedMedia, { ...props });
+  if (props.media.kind === "youtube") return /* @__PURE__ */ jsx(YouTubeFeedMedia, { ...props });
+  return /* @__PURE__ */ jsx(NativeFeedMedia, { ...props });
+}
+var defaultLabels = {
+  feed: "Media feed",
+  loading: "Loading media\u2026",
+  empty: "No media to display.",
+  error: "Unable to load the media feed.",
+  retry: "Retry",
+  fullscreen: "Open fullscreen",
+  close: "Close fullscreen",
+  previous: "Previous item",
+  next: "Next item",
+  play: "Play",
+  pause: "Pause",
+  blockedAutoplay: "Playback did not start. Press Play to try again.",
+  mediaError: "This media is unavailable.",
+  openSource: "Open source",
+  youtubeNotice: "If embedded playback is unavailable, open the source.",
+  item: (position, total) => `Media item ${position} of ${total}`,
+  position: (position, total) => `${position} / ${total}`
+};
+function MediaFeedInner({
+  items,
+  getId,
+  getMedia,
+  getTitle,
+  getCaption,
+  getAuthor,
+  renderActions,
+  renderMedia,
+  activeItemId,
+  defaultActiveItemId,
+  onActiveItemChange,
+  playbackRequest,
+  loading = false,
+  error,
+  onRetry,
+  autoPlay = true,
+  muted = true,
+  loop = true,
+  labels: labelOverrides,
+  classNames = {},
+  className,
+  ...rest
+}, forwardedRef) {
+  const labels = { ...defaultLabels, ...labelOverrides };
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const allowAutoPlay = autoPlay && !prefersReducedMotion;
+  const ids = items.map(getId);
+  const idsKey = JSON.stringify(ids);
+  const [internalActiveId, setInternalActiveId] = React2.useState(
+    () => defaultActiveItemId ?? ids[0]
+  );
+  const requestedId = activeItemId ?? internalActiveId;
+  const activeId = requestedId !== void 0 && ids.includes(requestedId) ? requestedId : ids[0];
+  const activeIndex = activeId === void 0 ? -1 : ids.indexOf(activeId);
+  const [fullscreen, setFullscreen] = React2.useState(false);
+  const [retrying, setRetrying] = React2.useState(false);
+  const [retryFailed, setRetryFailed] = React2.useState(false);
+  const rootRef = React2.useRef(null);
+  const viewportRef = React2.useRef(null);
+  const cardRefs = React2.useRef(/* @__PURE__ */ new Map());
+  const playbackPositions = React2.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const consumedPlaybackRequests = React2.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const fullscreenTriggerRef = React2.useRef(null);
+  const hasObserver = typeof IntersectionObserver !== "undefined";
+  const [visibleId, setVisibleId] = React2.useState(null);
+  const visibleIdRef = React2.useRef(visibleId);
+  const [viewportVisible, setViewportVisible] = React2.useState(false);
+  const [pageVisible, setPageVisible] = React2.useState(
+    () => typeof document === "undefined" || document.visibilityState !== "hidden"
+  );
+  const latest = React2.useRef({
+    items,
+    ids,
+    activeId,
+    activeItemId,
+    onActiveItemChange,
+    fullscreen
+  });
+  latest.current = {
+    items,
+    ids,
+    activeId,
+    activeItemId,
+    onActiveItemChange,
+    fullscreen
+  };
+  const setRoot = React2.useCallback(
+    (node) => {
+      rootRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef]
+  );
+  const select = React2.useCallback((id) => {
+    const current = latest.current;
+    const index = current.ids.indexOf(id);
+    if (index < 0 || id === current.activeId) return;
+    if (current.activeItemId === void 0) setInternalActiveId(id);
+    current.onActiveItemChange?.(current.items[index]);
+  }, []);
+  React2.useEffect(() => {
+    const root = rootRef.current;
+    if (!root || typeof IntersectionObserver === "undefined") {
+      setViewportVisible(true);
+      return;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      setViewportVisible(entry.isIntersecting);
+    });
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, []);
+  React2.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || typeof IntersectionObserver === "undefined") return;
+    const ratios = /* @__PURE__ */ new Map();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const id = entry.target.dataset.mediaId;
+          if (id !== void 0)
+            ratios.set(id, entry.isIntersecting ? entry.intersectionRatio : 0);
+        }
+        let bestId = null;
+        let bestRatio = 0;
+        for (const [id, ratio] of ratios) {
+          if (ratio > bestRatio) {
+            bestId = id;
+            bestRatio = ratio;
+          }
+        }
+        visibleIdRef.current = bestId;
+        setVisibleId(bestId);
+        if (bestId !== null && !latest.current.fullscreen) select(bestId);
+      },
+      { root: viewport, threshold: [0, 0.25, 0.5, 0.75, 1] }
+    );
+    cardRefs.current.forEach((card) => observer.observe(card));
+    return () => observer.disconnect();
+  }, [idsKey, loading, error, select]);
+  React2.useEffect(() => {
+    const update = () => setPageVisible(document.visibilityState !== "hidden");
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+  React2.useEffect(() => {
+    if (activeId === void 0) return;
+    if (!hasObserver) {
+      visibleIdRef.current = activeId;
+      setVisibleId(activeId);
+    }
+    if (visibleIdRef.current === activeId && hasObserver) return;
+    const card = cardRefs.current.get(activeId);
+    if (card && viewportRef.current) {
+      viewportRef.current.scrollTo?.({ top: card.offsetTop, behavior: "auto" });
+    }
+  }, [activeId, idsKey, hasObserver, loading, error]);
+  React2.useEffect(() => {
+    if (!items.length) setFullscreen(false);
+  }, [items.length]);
+  React2.useEffect(() => {
+    if (loading || error || activeIndex < 0 || !playbackRequest || playbackRequest.itemId !== activeId)
+      return;
+    if (!pageVisible || !fullscreen && (!viewportVisible || visibleId !== activeId))
+      return;
+    consumedPlaybackRequests.current.set(
+      playbackRequest.itemId,
+      playbackRequest.requestId
+    );
+  }, [
+    activeId,
+    activeIndex,
+    fullscreen,
+    pageVisible,
+    viewportVisible,
+    visibleId,
+    playbackRequest,
+    loading,
+    error
+  ]);
+  React2.useEffect(() => {
+    const positions = playbackPositions.current;
+    for (const id of positions.keys()) {
+      if (!latest.current.ids.includes(id)) positions.delete(id);
+    }
+  }, [idsKey]);
+  React2.useEffect(() => {
+    if (fullscreen || !fullscreenTriggerRef.current) return;
+    if (fullscreenTriggerRef.current.isConnected)
+      fullscreenTriggerRef.current.focus();
+    else viewportRef.current?.focus();
+    fullscreenTriggerRef.current = null;
+  }, [fullscreen]);
+  const navigate = (index, focus = false) => {
+    const id = ids[Math.max(0, Math.min(index, ids.length - 1))];
+    if (id === void 0) return;
+    select(id);
+    const card = cardRefs.current.get(id);
+    if (card && viewportRef.current) {
+      viewportRef.current.scrollTo?.({ top: card.offsetTop, behavior: "auto" });
+      if (focus) card.focus({ preventScroll: true });
+    }
+  };
+  const handleKeyDown = (event) => {
+    const target = event.target;
+    if (event.target !== event.currentTarget && target.dataset?.slot !== "item")
+      return;
+    let next;
+    switch (event.key) {
+      case "ArrowDown":
+      case "PageDown":
+        next = activeIndex + 1;
+        break;
+      case "ArrowUp":
+      case "PageUp":
+        next = activeIndex - 1;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = items.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    navigate(next, event.target !== event.currentTarget);
+  };
+  const retry = async () => {
+    if (!onRetry || retrying) return;
+    setRetrying(true);
+    setRetryFailed(false);
+    try {
+      await onRetry();
+    } catch {
+      setRetryFailed(true);
+    } finally {
+      setRetrying(false);
+    }
+  };
+  const renderCard = (item, index, immersive) => {
+    const id = getId(item);
+    const media = getMedia(item);
+    let playbackPosition = playbackPositions.current.get(id);
+    if (!playbackPosition || playbackPosition.src !== media.src) {
+      playbackPosition = { src: media.src, timeMs: 0 };
+      playbackPositions.current.set(id, playbackPosition);
+    }
+    const title = getTitle?.(item) || labels.item(index + 1, items.length);
+    const author = getAuthor?.(item);
+    const caption = getCaption?.(item);
+    const active = !loading && !error && pageVisible && (immersive ? fullscreen && id === activeId : !fullscreen && viewportVisible && id === activeId && id === visibleId);
+    const playbackRequestId = active && playbackRequest?.itemId === id && consumedPlaybackRequests.current.get(id) !== playbackRequest.requestId ? playbackRequest.requestId : void 0;
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        ref: immersive ? void 0 : (node) => {
+          if (node) cardRefs.current.set(id, node);
+          else cardRefs.current.delete(id);
+        },
+        "data-slot": "item",
+        "data-media-id": id,
+        "data-active": active,
+        "aria-label": title,
+        "aria-posinset": index + 1,
+        "aria-setsize": items.length,
+        tabIndex: id === activeId ? 0 : -1,
+        className: cn(
+          "border-border bg-card text-card-foreground focus-visible:ring-ring flex min-h-0 w-full snap-start flex-col overflow-hidden border focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+          immersive ? "h-full flex-1 border-0" : "h-full shrink-0 rounded-xl",
+          classNames.item
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "media",
+              className: cn(
+                "bg-muted flex min-h-0 flex-1 items-center justify-center p-3",
+                classNames.media
+              ),
+              children: renderMedia ? renderMedia(media, {
+                item,
+                active,
+                autoPlay: allowAutoPlay,
+                muted,
+                loop,
+                playbackRequestId
+              }) : /* @__PURE__ */ jsx(
+                FeedMedia,
+                {
+                  media,
+                  title,
+                  active,
+                  autoPlay: allowAutoPlay,
+                  muted,
+                  loop,
+                  labels,
+                  onActivate: () => select(id),
+                  playbackPosition,
+                  playbackRequestId
+                },
+                `${id}:${media.kind}:${media.src}:${immersive}`
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "details",
+              className: cn(
+                "flex max-h-[40%] shrink-0 flex-col gap-2 overflow-y-auto p-4",
+                classNames.details
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    author && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-slot": "author",
+                        className: cn(
+                          "mb-2 flex items-center gap-2",
+                          classNames.author
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Avatar,
+                            {
+                              name: author.name,
+                              src: author.avatar,
+                              alt: "",
+                              size: "sm"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: author.name })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        "data-slot": "title",
+                        className: cn("m-0 text-base font-semibold", classNames.title),
+                        children: title
+                      }
+                    )
+                  ] }),
+                  !immersive && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      "aria-label": labels.fullscreen,
+                      title: labels.fullscreen,
+                      onClick: (event) => {
+                        fullscreenTriggerRef.current = event.currentTarget;
+                        select(id);
+                        setFullscreen(true);
+                      },
+                      children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4", "aria-hidden": "true" })
+                    }
+                  )
+                ] }),
+                caption != null && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-slot": "caption",
+                    className: cn(
+                      "text-muted-foreground text-sm",
+                      classNames.caption
+                    ),
+                    children: caption
+                  }
+                ),
+                renderActions && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-slot": "actions",
+                    className: cn(
+                      "flex flex-wrap items-center gap-2",
+                      classNames.actions
+                    ),
+                    children: renderActions(item)
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      id
+    );
+  };
+  const controls = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "controls",
+      className: cn(
+        "flex shrink-0 items-center justify-between gap-3 py-2",
+        classNames.controls
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-auto min-h-8 flex-1 py-2 [&_[data-slot=button-label]]:whitespace-normal",
+            disabled: activeIndex <= 0,
+            onClick: () => navigate(activeIndex - 1),
+            leftIcon: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4", "aria-hidden": "true" }),
+            children: labels.previous
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "status",
+            "aria-live": "polite",
+            className: "text-muted-foreground shrink-0 text-sm whitespace-nowrap",
+            children: labels.position(activeIndex + 1, items.length)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-auto min-h-8 flex-1 py-2 [&_[data-slot=button-label]]:whitespace-normal",
+            disabled: activeIndex >= items.length - 1,
+            onClick: () => navigate(activeIndex + 1),
+            rightIcon: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }),
+            children: labels.next
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setRoot,
+      "data-slot": "root",
+      "data-component": "media-feed",
+      className: cn(
+        "bg-background text-foreground flex h-[min(48rem,80dvh)] min-h-0 w-full flex-col",
+        classNames.root,
+        className
+      ),
+      ...rest,
+      children: [
+        loading || error || !items.length ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "status",
+            role: error ? "alert" : "status",
+            "aria-busy": loading || retrying,
+            className: cn(
+              "flex min-h-0 flex-1 flex-col items-center justify-center gap-4 p-6 text-center",
+              classNames.status
+            ),
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "m-0", children: loading ? labels.loading : error || labels.empty }),
+              error && onRetry && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  isLoading: retrying,
+                  loadingText: labels.loading,
+                  onClick: () => {
+                    void retry();
+                  },
+                  children: labels.retry
+                }
+              ),
+              retryFailed && /* @__PURE__ */ jsx("p", { role: "alert", className: "m-0", children: labels.error })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: viewportRef,
+              "data-slot": "viewport",
+              role: "feed",
+              "aria-label": labels.feed,
+              "aria-busy": false,
+              tabIndex: 0,
+              onKeyDown: handleKeyDown,
+              className: cn(
+                "focus-visible:ring-ring relative flex min-h-0 flex-1 snap-y snap-mandatory flex-col gap-4 overflow-y-auto overscroll-contain focus-visible:ring-2 focus-visible:outline-none",
+                classNames.viewport
+              ),
+              children: items.map((item, index) => renderCard(item, index, false))
+            }
+          ),
+          controls
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Modal,
+          {
+            open: fullscreen && !loading && !error && !!items.length,
+            onOpenChange: setFullscreen,
+            size: "full",
+            className: "h-dvh min-h-0 sm:h-[calc(100dvh-2rem)]",
+            children: [
+              /* @__PURE__ */ jsxs(ModalHeader, { children: [
+                /* @__PURE__ */ jsx(ModalTitle, { children: labels.feed }),
+                /* @__PURE__ */ jsx(ModalClose, { "aria-label": labels.close })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "fullscreen",
+                  "data-component": "media-feed",
+                  role: "feed",
+                  "aria-label": labels.feed,
+                  tabIndex: 0,
+                  onKeyDown: handleKeyDown,
+                  className: cn(
+                    "flex min-h-0 flex-1 flex-col px-2 pb-2 sm:px-4",
+                    classNames.fullscreen
+                  ),
+                  children: [
+                    activeIndex >= 0 && renderCard(items[activeIndex], activeIndex, true),
+                    controls
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var MediaFeed = React2.forwardRef(MediaFeedInner);
+MediaFeed.displayName = "MediaFeed";
+
+export { MediaFeed };
+//# sourceMappingURL=chunk-2X54ZLT6.js.map
+//# sourceMappingURL=chunk-2X54ZLT6.js.map