@opensite/ui 3.11.0 → 3.12.0

package/dist/registry.js

@@ -35234,6 +35234,39 @@ function InteriorCarousel({
 }
 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",
+  // Hiding captions for now until we build in
+  // the dynamic behavior that clients can dictate
+  display: "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();
@@ -35283,19 +35316,23 @@ function likeBadge(likeCount) {
       style: {
         display: "inline-flex",
         alignItems: "center",
-        gap: 4,
-        padding: "3px 8px",
+        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.65)",
-        backdropFilter: "blur(6px)",
-        WebkitBackdropFilter: "blur(6px)",
+        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: 11,
-        fontWeight: 700,
-        lineHeight: 1
+        fontSize: 13,
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.01em"
       },
       children: [
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/heart", size: 13, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(DynamicIcon, { name: "mdi/cards-heart", size: 15, "aria-hidden": "true" }),
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: likeCount.toLocaleString() })
       ]
     }
@@ -35304,66 +35341,15 @@ function likeBadge(likeCount) {
 var VIEWER_ACTIONS = [
   {
     id: "open-in-instagram",
-    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/external-link", size: 22, "aria-hidden": "true" }),
+    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/instagram", size: 22, "aria-hidden": "true" }),
     label: "Instagram",
     ariaLabel: "Open in Instagram",
     onPress: (item) => openPermalink(item)
   }
 ];
-function RailStat({
-  iconName,
-  count,
-  label,
-  onPress
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      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(
-          "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(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -35377,84 +35363,126 @@ function InstagramViewerRail({ item }) {
         color: "var(--psmi-chrome-fg, #fff)",
         zIndex: 3
       },
+      children: meta.href ? /* @__PURE__ */ jsx(
+        "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",
+            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/instagram",
+                  size: 22,
+                  "aria-hidden": "true"
+                }
+              )
+            }
+          )
+        }
+      ) : null
+    }
+  );
+}
+function profileUrl(username) {
+  return `https://www.instagram.com/${username.replace(/^@+/, "")}/`;
+}
+var USERNAME_BADGE_STYLE = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 7,
+  marginBottom: 10,
+  padding: "7px 12px",
+  borderRadius: 999,
+  background: "var(--psmi-chrome-bg, rgba(255,255,255,0.16))",
+  backdropFilter: "blur(8px)",
+  WebkitBackdropFilter: "blur(8px)",
+  border: "1px solid rgba(255, 255, 255, 0.18)",
+  color: "inherit",
+  fontSize: 13,
+  fontWeight: 700,
+  lineHeight: 1,
+  letterSpacing: "0.01em",
+  textDecoration: "none",
+  pointerEvents: "auto"
+};
+var VIEWER_TITLE_STYLE = {
+  fontSize: 16,
+  fontWeight: 700,
+  lineHeight: 1.35,
+  textShadow: "0 1px 2px rgba(0, 0, 0, 0.4)",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+};
+function InstagramViewerCaption({
+  item,
+  username
+}) {
+  const handle = username?.replace(/^@+/, "");
+  const badgeContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/instagram", size: 14, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: handle ? `@${handle}` : "Instagram" })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 16,
+        // Mirrors the library caption card's clearance for the actions rail.
+        right: 78,
+        bottom: 34,
+        color: "var(--psmi-chrome-fg, #fff)",
+        zIndex: 2
+      },
       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(
+        handle ? /* @__PURE__ */ jsx(
           "a",
           {
-            href: meta.href,
+            href: profileUrl(handle),
             target: "_blank",
             rel: "noopener noreferrer",
-            "aria-label": "Open in Instagram",
+            "aria-label": `Open @${handle} on 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" })
-            ]
+            style: { ...USERNAME_BADGE_STYLE, cursor: "pointer" },
+            children: badgeContent
           }
-        ) : null
+        ) : (
+          // No username supplied: never fabricate a handle — degrade to a
+          // non-interactive "Instagram" chip in the same position.
+          /* @__PURE__ */ jsx("span", { style: USERNAME_BADGE_STYLE, children: badgeContent })
+        ),
+        /* @__PURE__ */ jsx("div", { style: VIEWER_TITLE_STYLE, children: item.title })
       ]
     }
   );
@@ -35464,7 +35492,8 @@ function InstagramFeedGrid({
   gridClassName,
   itemClassName,
   imageClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  showLikeBadges = false
 }) {
   const { open } = useImmersiveFeed();
   const posterImgProps = useMemo(() => {
@@ -35477,26 +35506,39 @@ function InstagramFeedGrid({
     "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: 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
+        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__ */ jsxs("div", { className: itemClassName, style: TILE_WRAPPER_STYLE, children: [
+            /* @__PURE__ */ jsx(
+              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: showLikeBadges && 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__ */ jsx("div", { "aria-hidden": "true", style: CAPTION_SCRIM_STYLE, children: /* @__PURE__ */ jsx("div", { style: CAPTION_TEXT_STYLE, children: mediaItem.title }) })
+            ) : null
+          ] }, mediaItem.id)
         );
       })
     }
@@ -35509,7 +35551,8 @@ 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,
@@ -35517,15 +35560,24 @@ function InstagramPostGrid({
   itemClassName,
   imageClassName,
   optixFlowConfig,
+  username,
+  showLikeBadges = false,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName
 }) {
   const mediaItems = useMemo(() => {
     if (itemsSlot || !items) return [];
-    return items.filter((item) => Boolean(item.image)).map(toMediaItem);
+    const withImage = items.filter((item) => Boolean(item.image));
+    if (typeof process !== "undefined" && 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}`
+      );
+    }
+    return withImage.map(toMediaItem);
   }, [items, itemsSlot]);
   if (!itemsSlot && (!items || items.length === 0)) {
     return null;
@@ -35547,7 +35599,7 @@ function InstagramPostGrid({
             "h2",
             {
               className: cn(
-                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                "text-xl font-medium tracking-tight md:text-3xl lg:text-5xl text-balance",
                 headingClassName
               ),
               children: heading
@@ -35557,7 +35609,7 @@ function InstagramPostGrid({
             "p",
             {
               className: cn(
-                "max-w-2xl text-balance text-muted-foreground",
+                "max-w-full md:max-w-2xl text-balance opacity-75",
                 subheadingClassName
               ),
               children: subheading
@@ -35568,7 +35620,7 @@ function InstagramPostGrid({
           "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: itemsSlot
@@ -35581,14 +35633,16 @@ function InstagramPostGrid({
               gridClassName,
               itemClassName,
               imageClassName,
-              optixFlowConfig
+              optixFlowConfig,
+              showLikeBadges
             }
           ),
           /* @__PURE__ */ jsx(
             ImmersiveViewer,
             {
               ariaLabel: "Instagram post viewer",
-              renderActions: ({ item }) => /* @__PURE__ */ jsx(InstagramViewerRail, { item })
+              renderActions: ({ item }) => /* @__PURE__ */ jsx(InstagramViewerRail, { item }),
+              renderCaption: (item) => /* @__PURE__ */ jsx(InstagramViewerCaption, { item, username })
             }
           )
         ] })
@@ -111472,8 +111526,8 @@ var interiorCarousel = {
   }
 };
 var instagramPostGrid = {
-  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).`,
+  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. Tiles show no duration timestamp and a center glyph on hover only (a play triangle for reels, an expand icon for photos); like-count pills are hidden by default (opt back in via 'showLikeBadges' once per-client dynamic visibility ships). The fullscreen viewer shows a prominent clickable '@username' profile badge (set the 'username' prop) above the post title and a single Instagram-glyph egress to the post's permalink (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') are carried in the data but NOT currently displayed: the tile like-count pill is hidden by default ('showLikeBadges' opts back in; never fabricate a zero for a missing metric) and the viewer's engagement rail was removed per design review. Set 'username' to the account's handle (leading '@' tolerated) \u2014 it renders as the viewer caption's prominent clickable '@username' badge linking to the profile in a new tab; when omitted the badge degrades to a non-clickable 'Instagram' chip (a handle is never fabricated). 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 single Instagram-glyph 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(
@@ -111481,9 +111535,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: {
@@ -111502,6 +111559,7 @@ var instagramPostGrid = {
   exampleProps: {
     heading: "Follow us on Instagram",
     subheading: "The latest from our feed.",
+    username: "acmecafe",
     background: "white",
     spacing: "lg",
     items: [
@@ -111509,33 +111567,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
       }
     ]
   }
@@ -124955,7 +125070,7 @@ var BLOCK_REGISTRY = {
   "instagram-post-grid": {
     id: "instagram-post-grid",
     name: "Instagram Post Grid",
-    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.",
+    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 a clickable @username profile badge, the post title, and a single Instagram-glyph link to the post. Photos and reels are both first-class media; tiles use a hover-only center glyph (play for reels, expand for photos), with like-count pills hidden by default. 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.11.0",
+  "version": "3.12.0",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",