@opensite/ui 3.9.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,6 +35232,370 @@ function InteriorCarousel({
     }
   );
 }
+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,
+  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(
+    "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,
+  subheading,
+  items,
+  itemsSlot,
+  className,
+  containerClassName,
+  headerClassName,
+  headingClassName,
+  subheadingClassName,
+  gridClassName,
+  itemClassName,
+  imageClassName,
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity,
+  patternClassName
+}) {
+  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;
+  }
+  return /* @__PURE__ */ jsxs(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: [
+        (heading || subheading) && /* @__PURE__ */ jsxs("div", { className: cn("mb-8 flex flex-col gap-2", headerClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-2xl text-balance text-muted-foreground",
+                subheadingClassName
+              ),
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
+        ] }),
+        itemsSlot ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
+              gridClassName
+            ),
+            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 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function RadialGradientTop({
   className,
   children,
@@ -111106,6 +111471,75 @@ 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).`,
+  usageRequirements: {
+    requiredProps: ["items"],
+    requiresSiteCapabilities: galleryCapabilities(
+      "instagram_media",
+      "media_library"
+    ),
+    propConstraints: {
+      items: {
+        minItems: 3,
+        maxItems: 24
+      }
+    },
+    mediaSlots: {
+      "items[].image": {
+        path: "items[].image",
+        roles: ["gallery"],
+        required: true
+      },
+      "items[].videoUrl": {
+        path: "items[].videoUrl",
+        roles: ["gallery"],
+        required: false
+      }
+    }
+  },
+  exampleProps: {
+    heading: "Follow us on Instagram",
+    subheading: "The latest from our feed.",
+    background: "white",
+    spacing: "lg",
+    items: [
+      {
+        id: "1",
+        href: "https://www.instagram.com/p/CxAmpLe001/",
+        image: GALLERY_EXAMPLE_IMAGE_URL,
+        imageAlt: "Espresso being poured at the counter",
+        caption: "Morning pours before the rush \u2615\uFE0F",
+        date: "Jul 1, 2026",
+        likeCount: 128,
+        commentCount: 12
+      },
+      {
+        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",
+        isVideo: true,
+        videoUrl: "https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1",
+        likeCount: 342,
+        commentCount: 21,
+        viewCount: 4820
+      },
+      {
+        id: "3",
+        href: "https://www.instagram.com/p/CxAmpLe003/",
+        image: GALLERY_EXAMPLE_IMAGE_URL,
+        imageAlt: "Weekend brunch spread",
+        caption: "Weekend brunch is back on the menu",
+        date: "Jun 24, 2026",
+        likeCount: 96
+      }
+    ]
+  }
+};
 var GALLERY_BLOCK_CONTRACTS = {
   "expandable-case-study-cards": expandableCaseStudyCards,
   "carousel-badge-cards": carouselBadgeCards,
@@ -111122,7 +111556,8 @@ var GALLERY_BLOCK_CONTRACTS = {
   "carousel-scale-focus": carouselScaleFocus,
   "masonry-motion-grid": masonryMotionGrid,
   "blur-vignette-grid": blurVignetteGrid,
-  "interior-carousel": interiorCarousel
+  "interior-carousel": interiorCarousel,
+  "instagram-post-grid": instagramPostGrid
 };
 var FOOTER_EXAMPLE_IMAGE_URL = "https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp";
 var FOOTER_MEDIA_NOTE = "All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.";
@@ -124517,6 +124952,26 @@ var BLOCK_REGISTRY = {
     props: "InteriorCarouselProps",
     ...GALLERY_BLOCK_CONTRACTS["interior-carousel"]
   },
+  "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.",
+    semanticTags: [
+      "gallery",
+      "instagram",
+      "social",
+      "feed",
+      "grid",
+      "photos",
+      "video",
+      "dynamic",
+      "community"
+    ],
+    category: "gallery",
+    component: InstagramPostGrid,
+    props: "InstagramPostGridProps",
+    ...GALLERY_BLOCK_CONTRACTS["instagram-post-grid"]
+  },
   "radial-gradient-top": {
     id: "radial-gradient-top",
     name: "Radial Gradient Top",

package/dist/social-link-icon.d.cts

@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
  * />
  * ```
  */
-declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
+declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
 
 export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };

package/dist/social-link-icon.d.ts

@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
  * />
  * ```
  */
-declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
+declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
 
 export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.9.0",
+  "version": "3.11.0",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -1376,6 +1376,11 @@
       "import": "./dist/expandable-case-study-cards.js",
       "require": "./dist/expandable-case-study-cards.cjs"
     },
+    "./blocks/gallery/instagram-post-grid": {
+      "types": "./dist/instagram-post-grid.d.ts",
+      "import": "./dist/instagram-post-grid.js",
+      "require": "./dist/instagram-post-grid.cjs"
+    },
     "./blocks/gallery/interior-carousel": {
       "types": "./dist/interior-carousel.d.ts",
       "import": "./dist/interior-carousel.js",
@@ -3432,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",