@opensite/ui 3.10.0 → 3.11.2

package/dist/registry.cjs

@@ -27,6 +27,7 @@ var Autoplay = require('embla-carousel-autoplay');
 var ProgressPrimitive = require('@radix-ui/react-progress');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var AutoScroll3 = require('embla-carousel-auto-scroll');
+var mediaImmersive = require('@page-speed/media-immersive');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var LabelPrimitive = require('@radix-ui/react-label');
 var socialShare = require('@page-speed/social-share');
@@ -35271,23 +35272,323 @@ function InteriorCarousel({
     }
   );
 }
-function EngagementBadge({
+var IG_TILE_WIDTH = 320;
+var IG_TILE_STYLE = { width: "100%" };
+var IG_TILE_RADIUS = 18;
+var TILE_WRAPPER_STYLE = {
+  position: "relative",
+  borderRadius: IG_TILE_RADIUS,
+  boxShadow: "0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.10)"
+};
+var CAPTION_SCRIM_STYLE = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  bottom: 0,
+  padding: "28px 14px 13px",
+  background: "linear-gradient(180deg, rgba(8,12,24,0) 0%, rgba(8,12,24,0.55) 45%, rgba(8,12,24,0.78) 100%)",
+  borderBottomLeftRadius: IG_TILE_RADIUS,
+  borderBottomRightRadius: IG_TILE_RADIUS,
+  pointerEvents: "none"
+};
+var CAPTION_TEXT_STYLE = {
+  color: "#fff",
+  fontSize: 13,
+  lineHeight: 1.4,
+  fontWeight: 600,
+  letterSpacing: "0.005em",
+  textShadow: "0 1px 2px rgba(0, 0, 0, 0.35)",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  height: "2.8em"
+};
+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__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "aria-label": `${likeCount.toLocaleString()} likes`,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        // Breathing room from the tile's top-left corner (refinement #1).
+        margin: 6,
+        padding: "6px 11px",
+        borderRadius: 999,
+        background: "rgba(8, 12, 24, 0.55)",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
+        border: "1px solid rgba(255, 255, 255, 0.14)",
+        color: "#fff",
+        fontSize: 13,
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.01em"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/heart", size: 15, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: likeCount.toLocaleString() })
+      ]
+    }
+  );
+}
+var VIEWER_ACTIONS = [
+  {
+    id: "open-in-instagram",
+    icon: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: iconName, size: 22, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: [
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: iconName, size: 16, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: count.toLocaleString() })
+        typeof meta.likeCount === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          RailStat,
+          {
+            iconName: "lucide/heart",
+            count: meta.likeCount,
+            label: "likes",
+            onPress: open
+          }
+        ) : null,
+        typeof meta.commentCount === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          RailStat,
+          {
+            iconName: "lucide/message-circle",
+            count: meta.commentCount,
+            label: "comments",
+            onPress: open
+          }
+        ) : null,
+        typeof meta.viewCount === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          RailStat,
+          {
+            iconName: "lucide/eye",
+            count: meta.viewCount,
+            label: "views",
+            onPress: open
+          }
+        ) : null,
+        meta.href ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/external-link",
+                      size: 22,
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { fontSize: 11, fontWeight: 600 }, children: "Instagram" })
+            ]
+          }
+        ) : null
       ]
     }
   );
 }
+function InstagramFeedGrid({
+  mediaItems,
+  gridClassName,
+  itemClassName,
+  imageClassName,
+  optixFlowConfig
+}) {
+  const { open } = mediaImmersive.useImmersiveFeed();
+  const posterImgProps = React30.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4",
+        gridClassName
+      ),
+      children: mediaItems.map((mediaItem) => {
+        const likeCount = mediaItem.meta?.likeCount;
+        return (
+          // The wrapper owns the tile's outer chrome (subtle boundary shadow,
+          // matching radius) and the block's own caption overlay — the card's
+          // built-in caption is hidden so 1- and 2-line captions can share a
+          // fixed-height, top-aligned text box (annotated refinements #2–#4).
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemClassName, style: TILE_WRAPPER_STYLE, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              mediaImmersive.ThumbnailCard,
+              {
+                item: mediaItem,
+                onOpen: open,
+                size: IG_TILE_WIDTH,
+                style: IG_TILE_STYLE,
+                elevated: false,
+                hideCaption: true,
+                hideProgressHint: true,
+                showDuration: false,
+                glyphMode: "hover",
+                posterImgProps,
+                badgeSlot: typeof likeCount === "number" ? likeBadge(likeCount) : void 0
+              }
+            ),
+            mediaItem.title ? (
+              // aria-hidden: the card already announces the post title; this
+              // overlay is purely visual. pointer-events pass through to the card.
+              /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: CAPTION_SCRIM_STYLE, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: CAPTION_TEXT_STYLE, children: mediaItem.title }) })
+            ) : null
+          ] }, mediaItem.id)
+        );
+      })
+    }
+  );
+}
 function InstagramPostGrid({
   sectionId = "instagram-post-grid",
   heading,
@@ -35295,118 +35596,32 @@ function InstagramPostGrid({
   items,
   itemsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   headerClassName,
   headingClassName,
   subheadingClassName,
   gridClassName,
   itemClassName,
   imageClassName,
+  optixFlowConfig,
   background,
-  spacing,
   pattern,
   patternOpacity,
-  patternClassName,
-  optixFlowConfig
+  patternClassName
 }) {
-  const tiles = React30.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__ */ jsxRuntime.jsxs(
-        pressable.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__ */ jsxRuntime.jsx(
-              img$1.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__ */ jsxRuntime.jsx(
-              video.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__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: "absolute right-2 top-2 text-white drop-shadow-md",
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play", size: 18 })
-              }
-            ),
-            (item.caption || item.date || typeof item.likeCount === "number" || typeof item.commentCount === "number" || typeof item.viewCount === "number") && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 text-xs leading-snug wrap-break-word", children: item.caption }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-xs font-medium", children: [
-                typeof item.likeCount === "number" && /* @__PURE__ */ jsxRuntime.jsx(
-                  EngagementBadge,
-                  {
-                    iconName: "lucide/heart",
-                    count: item.likeCount,
-                    label: "likes"
-                  }
-                ),
-                typeof item.commentCount === "number" && /* @__PURE__ */ jsxRuntime.jsx(
-                  EngagementBadge,
-                  {
-                    iconName: "lucide/message-circle",
-                    count: item.commentCount,
-                    label: "comments"
-                  }
-                ),
-                typeof item.viewCount === "number" && /* @__PURE__ */ jsxRuntime.jsx(
-                  EngagementBadge,
-                  {
-                    iconName: "lucide/eye",
-                    count: item.viewCount,
-                    label: "views"
-                  }
-                ),
-                item.date && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto opacity-80", children: item.date })
-              ] })
-            ] })
-          ]
-        },
-        item.id
+  const mediaItems = React30.useMemo(() => {
+    if (itemsSlot || !items) return [];
+    const withImage = items.filter((item) => Boolean(item.image));
+    if (process.env.NODE_ENV !== "production" && withImage.length < items.length) {
+      const skipped = items.filter((item) => !item.image);
+      const skippedIds = skipped.map((item) => item.id).join(", ");
+      console.warn(
+        `[instagram-post-grid] skipped ${skipped.length} item(s) without a resolvable image: ${skippedIds}`
       );
-    });
-  }, [itemsSlot, items, itemClassName, imageClassName, optixFlowConfig]);
+    }
+    return withImage.map(toMediaItem);
+  }, [items, itemsSlot]);
   if (!itemsSlot && (!items || items.length === 0)) {
     return null;
   }
@@ -35444,16 +35659,34 @@ function InstagramPostGrid({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        itemsSlot ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
+              "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4",
               gridClassName
             ),
-            children: tiles
+            children: itemsSlot
           }
-        )
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(mediaImmersive.ImmersiveFeedProvider, { items: mediaItems, actions: VIEWER_ACTIONS, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InstagramFeedGrid,
+            {
+              mediaItems,
+              gridClassName,
+              itemClassName,
+              imageClassName,
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            mediaImmersive.ImmersiveViewer,
+            {
+              ariaLabel: "Instagram post viewer",
+              renderActions: ({ item }) => /* @__PURE__ */ jsxRuntime.jsx(InstagramViewerRail, { item })
+            }
+          )
+        ] })
       ]
     }
   );
@@ -111334,8 +111567,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(
@@ -111343,9 +111576,12 @@ var instagramPostGrid = {
       "media_library"
     ),
     propConstraints: {
+      heading: { maxLength: 60 },
       items: {
-        minItems: 3,
-        maxItems: 24
+        required: true,
+        minItems: 4,
+        maxItems: 16,
+        note: "Use multiples of the 4-column desktop grid (8 or 12) so rows fill cleanly. Every item must carry a re-hosted CDN image URL \u2014 imageless items are skipped at render (dev builds warn)."
       }
     },
     mediaSlots: {
@@ -111371,33 +111607,90 @@ var instagramPostGrid = {
         id: "1",
         href: "https://www.instagram.com/p/CxAmpLe001/",
         image: GALLERY_EXAMPLE_IMAGE_URL,
-        imageAlt: "Espresso being poured at the counter",
+        imageAlt: "Espresso being pulled at the counter",
         caption: "Morning pours before the rush \u2615\uFE0F",
-        date: "Jul 1, 2026",
-        likeCount: 128,
-        commentCount: 12
+        date: "Jul 6, 2026",
+        likeCount: 428,
+        commentCount: 34
       },
       {
         id: "2",
         href: "https://www.instagram.com/p/CxAmpLe002/",
-        image: GALLERY_EXAMPLE_IMAGE_URL,
-        imageAlt: "Behind the scenes reel",
-        caption: "Behind the scenes of today's bake #freshbread",
-        date: "Jun 28, 2026",
+        image: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
+        imageAlt: "Line cook plating on a busy Friday service",
+        caption: "Behind the pass on a Friday night service \u{1F525}",
+        date: "Jul 4, 2026",
         isVideo: true,
-        videoUrl: "https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1",
-        likeCount: 342,
-        commentCount: 21,
-        viewCount: 4820
+        videoUrl: "https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6",
+        likeCount: 1203,
+        commentCount: 88,
+        viewCount: 12840
       },
       {
         id: "3",
         href: "https://www.instagram.com/p/CxAmpLe003/",
+        image: "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
+        imageAlt: "House pancakes with maple butter",
+        caption: "Weekend brunch is back \u2014 house pancakes + maple butter",
+        date: "Jul 2, 2026",
+        likeCount: 356,
+        commentCount: 27
+      },
+      {
+        id: "4",
+        href: "https://www.instagram.com/p/CxAmpLe004/",
+        image: "https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q",
+        imageAlt: "Barista finishing latte art",
+        caption: "60 seconds of latte art, no cuts \u2728",
+        date: "Jun 29, 2026",
+        isVideo: true,
+        videoUrl: "https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52",
+        likeCount: 942,
+        commentCount: 61,
+        viewCount: 8675
+      },
+      {
+        id: "5",
+        href: "https://www.instagram.com/p/CxAmpLe005/",
         image: GALLERY_EXAMPLE_IMAGE_URL,
-        imageAlt: "Weekend brunch spread",
-        caption: "Weekend brunch is back on the menu",
+        imageAlt: "Fresh sourdough loaves out of the oven",
+        caption: "Fresh sourdough out of the oven at 6am \u{1F956}",
+        date: "Jun 27, 2026",
+        likeCount: 512,
+        commentCount: 41
+      },
+      {
+        id: "6",
+        href: "https://www.instagram.com/p/CxAmpLe006/",
+        image: "https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82",
+        imageAlt: "Chef plating a summer heirloom tomato salad",
+        caption: "Plating the summer heirloom tomato salad \u{1F345}",
         date: "Jun 24, 2026",
-        likeCount: 96
+        isVideo: true,
+        videoUrl: "https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c",
+        likeCount: 731,
+        commentCount: 45,
+        viewCount: 6390
+      },
+      {
+        id: "7",
+        href: "https://www.instagram.com/p/CxAmpLe007/",
+        image: "https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm",
+        imageAlt: "Sunny patio seating with fresh flowers",
+        caption: "Patio season is officially open \u2600\uFE0F",
+        date: "Jun 21, 2026",
+        likeCount: 289,
+        commentCount: 19
+      },
+      {
+        id: "8",
+        href: "https://www.instagram.com/p/CxAmpLe008/",
+        image: "https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq",
+        imageAlt: "Charred corn elote on a plate",
+        caption: "New on the menu: charred corn elote, our way \u{1F33D}",
+        date: "Jun 18, 2026",
+        likeCount: 634,
+        commentCount: 52
       }
     ]
   }
@@ -124817,7 +125110,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",