@opensite/ui 3.11.2 → 3.12.1

package/dist/registry.js

@@ -35249,7 +35249,10 @@ var CAPTION_SCRIM_STYLE = {
   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"
+  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",
@@ -35329,7 +35332,7 @@ function likeBadge(likeCount) {
         letterSpacing: "0.01em"
       },
       children: [
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/heart", size: 15, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(DynamicIcon, { name: "mdi/cards-heart", size: 15, "aria-hidden": "true" }),
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: likeCount.toLocaleString() })
       ]
     }
@@ -35338,157 +35341,148 @@ 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",
+function InstagramViewerRail({ item }) {
+  const meta = item.meta ?? {};
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      type: "button",
-      "aria-label": `${count.toLocaleString()} ${label}`,
-      onClick: (e) => {
-        e.stopPropagation();
-        onPress();
-      },
       style: {
+        position: "absolute",
+        right: 11,
+        // Bottom-aligned with the caption card (see InstagramViewerCaption).
+        bottom: 34,
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        gap: 5,
-        padding: 0,
-        border: "none",
-        background: "transparent",
-        color: "inherit",
-        cursor: "pointer",
-        font: "inherit"
+        color: "var(--psmi-chrome-fg, #fff)",
+        zIndex: 3
       },
-      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() })
-      ]
+      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 InstagramViewerRail({ item }) {
-  const meta = item.meta ?? {};
-  const open = () => openPermalink(item);
+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",
-        right: 11,
-        bottom: 135,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 18,
+        left: 16,
+        // Mirrors the library caption card's clearance for the actions rail.
+        right: 78,
+        bottom: 34,
         color: "var(--psmi-chrome-fg, #fff)",
-        zIndex: 3
+        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 })
       ]
     }
   );
@@ -35498,7 +35492,8 @@ function InstagramFeedGrid({
   gridClassName,
   itemClassName,
   imageClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  showLikeBadges = false
 }) {
   const { open } = useImmersiveFeed();
   const posterImgProps = useMemo(() => {
@@ -35535,7 +35530,7 @@ function InstagramFeedGrid({
                 showDuration: false,
                 glyphMode: "hover",
                 posterImgProps,
-                badgeSlot: typeof likeCount === "number" ? likeBadge(likeCount) : void 0
+                badgeSlot: showLikeBadges && typeof likeCount === "number" ? likeBadge(likeCount) : void 0
               }
             ),
             mediaItem.title ? (
@@ -35565,6 +35560,8 @@ function InstagramPostGrid({
   itemClassName,
   imageClassName,
   optixFlowConfig,
+  username,
+  showLikeBadges = false,
   background,
   pattern,
   patternOpacity,
@@ -35573,7 +35570,7 @@ function InstagramPostGrid({
   const mediaItems = useMemo(() => {
     if (itemsSlot || !items) return [];
     const withImage = items.filter((item) => Boolean(item.image));
-    if (process.env.NODE_ENV !== "production" && withImage.length < items.length) {
+    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(
@@ -35602,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
@@ -35612,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
@@ -35636,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 })
             }
           )
         ] })
@@ -111527,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(
@@ -111560,6 +111559,7 @@ var instagramPostGrid = {
   exampleProps: {
     heading: "Follow us on Instagram",
     subheading: "The latest from our feed.",
+    username: "acmecafe",
     background: "white",
     spacing: "lg",
     items: [
@@ -125070,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/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.11.2",
+  "version": "3.12.1",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",