@opensite/ui 3.10.0 → 3.11.0

package/dist/registry.js

@@ -26,6 +26,7 @@ import Autoplay from 'embla-carousel-autoplay';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import AutoScroll3 from 'embla-carousel-auto-scroll';
+import { ImmersiveFeedProvider, ImmersiveViewer, useImmersiveFeed, ThumbnailCard } from '@page-speed/media-immersive';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { SocialShare } from '@page-speed/social-share';
@@ -35231,23 +35232,276 @@ function InteriorCarousel({
     }
   );
 }
-function EngagementBadge({
+var IG_TILE_WIDTH = 320;
+var IG_TILE_STYLE = { width: "100%" };
+var TITLE_MAX = 90;
+function truncate(text, max = TITLE_MAX) {
+  const trimmed = text.trim();
+  if (trimmed.length <= max) return trimmed;
+  const slice = trimmed.slice(0, max);
+  const lastSpace = slice.lastIndexOf(" ");
+  const head = lastSpace > max * 0.6 ? slice.slice(0, lastSpace) : slice;
+  return `${head.trimEnd()}\u2026`;
+}
+function captionToString(caption) {
+  return typeof caption === "string" ? caption : "";
+}
+function toMediaItem(item) {
+  const isVideo = Boolean(item.isVideo && item.videoUrl);
+  const fullCaption = captionToString(item.caption);
+  const title = truncate(fullCaption) || item.imageAlt || "Instagram post";
+  const meta = {
+    href: item.href,
+    likeCount: item.likeCount,
+    commentCount: item.commentCount,
+    viewCount: item.viewCount,
+    date: item.date
+  };
+  return {
+    id: item.id,
+    type: isVideo ? "video" : "image",
+    poster: item.image,
+    // Video source only when the post is a real video (image posts ignore it).
+    src: isVideo ? item.videoUrl : void 0,
+    title,
+    caption: fullCaption || void 0,
+    kind: "Instagram",
+    meta
+  };
+}
+function openPermalink(item) {
+  if (typeof window === "undefined") return;
+  const href = item.meta?.href;
+  if (!href) return;
+  window.open(href, "_blank", "noopener,noreferrer");
+}
+function likeBadge(likeCount) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-label": `${likeCount.toLocaleString()} likes`,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "3px 8px",
+        borderRadius: 999,
+        background: "rgba(8,12,24,0.65)",
+        backdropFilter: "blur(6px)",
+        WebkitBackdropFilter: "blur(6px)",
+        color: "#fff",
+        fontSize: 11,
+        fontWeight: 700,
+        lineHeight: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/heart", size: 13, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: likeCount.toLocaleString() })
+      ]
+    }
+  );
+}
+var VIEWER_ACTIONS = [
+  {
+    id: "open-in-instagram",
+    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/external-link", size: 22, "aria-hidden": "true" }),
+    label: "Instagram",
+    ariaLabel: "Open in Instagram",
+    onPress: (item) => openPermalink(item)
+  }
+];
+function RailStat({
   iconName,
   count,
-  label
+  label,
+  onPress
 }) {
   return /* @__PURE__ */ jsxs(
-    "span",
+    "button",
     {
-      className: "inline-flex items-center gap-1",
+      type: "button",
       "aria-label": `${count.toLocaleString()} ${label}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        onPress();
+      },
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 5,
+        padding: 0,
+        border: "none",
+        background: "transparent",
+        color: "inherit",
+        cursor: "pointer",
+        font: "inherit"
+      },
       children: [
-        /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, size: 16, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: count.toLocaleString() })
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: 46,
+              height: 46,
+              borderRadius: "50%",
+              background: "var(--psmi-chrome-bg, rgba(255,255,255,0.14))",
+              backdropFilter: "blur(6px)",
+              WebkitBackdropFilter: "blur(6px)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, size: 22, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: 11, fontWeight: 600 }, children: count.toLocaleString() })
       ]
     }
   );
 }
+function InstagramViewerRail({ item }) {
+  const meta = item.meta ?? {};
+  const open = () => openPermalink(item);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        right: 11,
+        bottom: 135,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 18,
+        color: "var(--psmi-chrome-fg, #fff)",
+        zIndex: 3
+      },
+      children: [
+        typeof meta.likeCount === "number" ? /* @__PURE__ */ jsx(
+          RailStat,
+          {
+            iconName: "lucide/heart",
+            count: meta.likeCount,
+            label: "likes",
+            onPress: open
+          }
+        ) : null,
+        typeof meta.commentCount === "number" ? /* @__PURE__ */ jsx(
+          RailStat,
+          {
+            iconName: "lucide/message-circle",
+            count: meta.commentCount,
+            label: "comments",
+            onPress: open
+          }
+        ) : null,
+        typeof meta.viewCount === "number" ? /* @__PURE__ */ jsx(
+          RailStat,
+          {
+            iconName: "lucide/eye",
+            count: meta.viewCount,
+            label: "views",
+            onPress: open
+          }
+        ) : null,
+        meta.href ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: meta.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            "aria-label": "Open in Instagram",
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 5,
+              padding: 0,
+              border: "none",
+              background: "transparent",
+              color: "inherit",
+              cursor: "pointer",
+              font: "inherit",
+              textDecoration: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: 46,
+                    height: 46,
+                    borderRadius: "50%",
+                    background: "var(--psmi-chrome-bg, rgba(255,255,255,0.14))",
+                    backdropFilter: "blur(6px)",
+                    WebkitBackdropFilter: "blur(6px)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/external-link",
+                      size: 22,
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: 11, fontWeight: 600 }, children: "Instagram" })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function InstagramFeedGrid({
+  mediaItems,
+  gridClassName,
+  itemClassName,
+  imageClassName,
+  optixFlowConfig
+}) {
+  const { open } = useImmersiveFeed();
+  const posterImgProps = useMemo(() => {
+    const next = {};
+    if (imageClassName) next.className = imageClassName;
+    if (optixFlowConfig) next.optixFlowConfig = optixFlowConfig;
+    return Object.keys(next).length > 0 ? next : void 0;
+  }, [imageClassName, optixFlowConfig]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
+        gridClassName
+      ),
+      children: mediaItems.map((mediaItem) => {
+        const likeCount = mediaItem.meta?.likeCount;
+        return /* @__PURE__ */ jsx(
+          ThumbnailCard,
+          {
+            item: mediaItem,
+            onOpen: open,
+            size: IG_TILE_WIDTH,
+            style: IG_TILE_STYLE,
+            className: itemClassName,
+            elevated: false,
+            showDuration: false,
+            glyphMode: "hover",
+            posterImgProps,
+            badgeSlot: typeof likeCount === "number" ? likeBadge(likeCount) : void 0
+          },
+          mediaItem.id
+        );
+      })
+    }
+  );
+}
 function InstagramPostGrid({
   sectionId = "instagram-post-grid",
   heading,
@@ -35262,111 +35516,17 @@ function InstagramPostGrid({
   gridClassName,
   itemClassName,
   imageClassName,
+  optixFlowConfig,
   background,
   spacing,
   pattern,
   patternOpacity,
-  patternClassName,
-  optixFlowConfig
+  patternClassName
 }) {
-  const tiles = useMemo(() => {
-    if (itemsSlot) return itemsSlot;
-    if (!items || items.length === 0) return null;
-    const visibleItems = items.filter((item) => Boolean(item.image));
-    return visibleItems.map((item) => {
-      const altText = item.imageAlt || (typeof item.caption === "string" ? item.caption : "") || "Instagram post";
-      const showVideo = Boolean(item.isVideo && item.videoUrl);
-      return /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          href: item.href,
-          "aria-label": typeof item.caption === "string" && item.caption.length > 0 ? item.caption : "View Instagram post",
-          className: cn(
-            "group relative block aspect-square overflow-hidden rounded-md bg-muted",
-            item.className,
-            itemClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: item.image,
-                alt: altText,
-                loading: "lazy",
-                className: cn(
-                  "h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105 motion-reduce:transform-none motion-reduce:transition-none",
-                  imageClassName
-                ),
-                optixFlowConfig
-              }
-            ),
-            showVideo && /* @__PURE__ */ jsx(
-              Video,
-              {
-                src: item.videoUrl,
-                poster: item.image,
-                controls: false,
-                muted: true,
-                loop: true,
-                playsInline: true,
-                preload: "metadata",
-                onMouseEnter: (e) => {
-                  void e.currentTarget.play().catch(() => void 0);
-                },
-                onMouseLeave: (e) => {
-                  e.currentTarget.pause();
-                  e.currentTarget.currentTime = 0;
-                },
-                className: cn(
-                  "absolute inset-0 h-full w-full object-cover object-center opacity-0 transition-opacity duration-300 group-hover:opacity-100 motion-reduce:transition-none",
-                  imageClassName
-                )
-              }
-            ),
-            item.isVideo && /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "absolute right-2 top-2 text-white drop-shadow-md",
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 18 })
-              }
-            ),
-            (item.caption || item.date || typeof item.likeCount === "number" || typeof item.commentCount === "number" || typeof item.viewCount === "number") && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-1 bg-linear-to-t from-black/70 to-transparent p-3 text-left text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 motion-reduce:transition-none", children: [
-              item.caption && (typeof item.caption === "string" ? /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-xs leading-snug wrap-break-word", children: item.caption }) : /* @__PURE__ */ jsx("div", { className: "line-clamp-2 text-xs leading-snug", children: item.caption })),
-              (typeof item.likeCount === "number" || typeof item.commentCount === "number" || typeof item.viewCount === "number" || item.date) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs font-medium", children: [
-                typeof item.likeCount === "number" && /* @__PURE__ */ jsx(
-                  EngagementBadge,
-                  {
-                    iconName: "lucide/heart",
-                    count: item.likeCount,
-                    label: "likes"
-                  }
-                ),
-                typeof item.commentCount === "number" && /* @__PURE__ */ jsx(
-                  EngagementBadge,
-                  {
-                    iconName: "lucide/message-circle",
-                    count: item.commentCount,
-                    label: "comments"
-                  }
-                ),
-                typeof item.viewCount === "number" && /* @__PURE__ */ jsx(
-                  EngagementBadge,
-                  {
-                    iconName: "lucide/eye",
-                    count: item.viewCount,
-                    label: "views"
-                  }
-                ),
-                item.date && /* @__PURE__ */ jsx("span", { className: "ml-auto opacity-80", children: item.date })
-              ] })
-            ] })
-          ]
-        },
-        item.id
-      );
-    });
-  }, [itemsSlot, items, itemClassName, imageClassName, optixFlowConfig]);
+  const mediaItems = useMemo(() => {
+    if (itemsSlot || !items) return [];
+    return items.filter((item) => Boolean(item.image)).map(toMediaItem);
+  }, [items, itemsSlot]);
   if (!itemsSlot && (!items || items.length === 0)) {
     return null;
   }
@@ -35404,16 +35564,34 @@ function InstagramPostGrid({
             }
           ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
         ] }),
-        /* @__PURE__ */ jsx(
+        itemsSlot ? /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
               "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
               gridClassName
             ),
-            children: tiles
+            children: itemsSlot
           }
-        )
+        ) : /* @__PURE__ */ jsxs(ImmersiveFeedProvider, { items: mediaItems, actions: VIEWER_ACTIONS, children: [
+          /* @__PURE__ */ jsx(
+            InstagramFeedGrid,
+            {
+              mediaItems,
+              gridClassName,
+              itemClassName,
+              imageClassName,
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ImmersiveViewer,
+            {
+              ariaLabel: "Instagram post viewer",
+              renderActions: ({ item }) => /* @__PURE__ */ jsx(InstagramViewerRail, { item })
+            }
+          )
+        ] })
       ]
     }
   );
@@ -111294,8 +111472,8 @@ var interiorCarousel = {
   }
 };
 var instagramPostGrid = {
-  exampleUsage: "Display a website's Instagram feed as a responsive grid of square tiles. Each tile links out to the post's instagram.com permalink in a new tab, shows the caption and post date on hover, and renders like/comment/view counts when available. Video posts play muted on hover. Data is hydrated from the toastability Instagram feed (dataSource type 'instagram_feed', bindTo 'items').",
-  importantUsageNotes: `${GALLERY_MEDIA_NOTE} This is a DYNAMIC feed block: its 'items' are hydrated at routing-build time from the connected Instagram profile \u2014 do NOT hand-author post content. 'items[].image' and 'items[].videoUrl' MUST be the re-hosted MediaRecord CDN URLs served by the feed; expiring Instagram CDN URLs must never be used. Engagement counts ('likeCount', 'commentCount', 'viewCount') render only when the value is present \u2014 never fabricate a zero for a missing metric. Each 'items[].href' is an external instagram.com permalink and opens in a new tab. Items without an 'image' are skipped; an empty or missing 'items' array renders nothing. Requires the site to have a connected, fully-imported Instagram profile ('instagram_media' capability).`,
+  exampleUsage: "Display a website's Instagram feed as a responsive grid of vertical (9:16) tiles that open a fullscreen, swipeable immersive viewer (TikTok/Reels-style). Photos and reels are both first-class media \u2014 reels play a muted preview and open with playback; photos open as a full-bleed still. Each tile shows a like-count pill top-left (when available), no duration timestamp, and a center glyph on hover only (a play triangle for reels, an expand icon for photos). The fullscreen viewer carries the caption plus a read-only engagement rail (likes/comments/views) and an explicit 'Open in Instagram' link (a real anchor opening in a new tab). Data is hydrated from the toastability Instagram feed (dataSource type 'instagram_feed', bindTo 'items').",
+  importantUsageNotes: `${GALLERY_MEDIA_NOTE} This is a DYNAMIC feed block: its 'items' are hydrated at routing-build time from the connected Instagram profile \u2014 do NOT hand-author post content. 'items[].image' and 'items[].videoUrl' MUST be the re-hosted MediaRecord CDN URLs served by the feed; expiring Instagram CDN URLs must never be used. Tiles are VERTICAL (9:16) and render both photos and reels; a post is treated as a reel only when 'isVideo' is true AND 'videoUrl' is present. Engagement counts ('likeCount', 'commentCount', 'viewCount') render only when the value is present \u2014 never fabricate a zero for a missing metric; 'likeCount' surfaces as the tile's top-left pill and, with comments/views, in the viewer rail. Tapping a tile OPENS THE FULLSCREEN VIEWER (the whole-tile link-out was replaced); the instagram.com permalink ('items[].href') opens from the viewer's 'Open in Instagram' egress, which is rendered as a REAL anchor (target=_blank, rel=noopener noreferrer) \u2014 a crawlable, affordance-correct link, not a scripted window.open button. 'items[].caption' should be a plain STRING when rendered immersively \u2014 it flows through as the tile/viewer title text; a rich ReactNode caption cannot be threaded through the immersive card/viewer and falls back to 'items[].imageAlt' (then a generic label). Consumer image styling is honored: 'imageClassName' and 'optixFlowConfig' are forwarded onto each tile's poster image. Items without an 'image' are skipped; an empty or missing 'items' array renders nothing. Requires the site to have a connected, fully-imported Instagram profile ('instagram_media' capability).`,
   usageRequirements: {
     requiredProps: ["items"],
     requiresSiteCapabilities: galleryCapabilities(
@@ -124777,7 +124955,7 @@ var BLOCK_REGISTRY = {
   "instagram-post-grid": {
     id: "instagram-post-grid",
     name: "Instagram Post Grid",
-    description: "A responsive grid of square tiles rendering a website's Instagram feed. Each tile links out to the post's instagram.com permalink in a new tab, reveals the caption, date, and like/comment/view counts on hover, and plays video posts muted on hover. Content is hydrated dynamically from the connected Instagram profile. Ideal for social proof sections, footers, and community pages that showcase a live Instagram presence.",
+    description: "A responsive grid of vertical (9:16) tiles rendering a website's Instagram feed. Tapping a tile opens a fullscreen, swipeable immersive viewer (TikTok/Reels-style) with the caption, a read-only engagement rail (likes/comments/views), and an 'Open in Instagram' action. Photos and reels are both first-class media; each tile shows a like-count pill and a hover-only center glyph (play for reels, expand for photos). Content is hydrated dynamically from the connected Instagram profile. Ideal for social proof sections, footers, and community pages that showcase a live Instagram presence.",
     semanticTags: [
       "gallery",
       "instagram",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3437,6 +3437,7 @@
     "@page-speed/lightbox": "^0.2.1",
     "@page-speed/maps": "0.2.4",
     "@page-speed/markdown-to-jsx": "^0.0.7",
+    "@page-speed/media-immersive": "0.5.0",
     "@page-speed/pdf-viewer": ">=0.1.9",
     "@page-speed/skins": "0.1.2",
     "@page-speed/social-share": "0.1.7",