@opensite/ui 3.11.0 → 3.12.0

package/dist/instagram-post-grid.cjs

@@ -423,6 +423,39 @@ var Section = React__namespace.default.forwardRef(
 Section.displayName = "Section";
 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();
@@ -472,19 +505,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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/heart", size: 13, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mdi/cards-heart", size: 15, "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: likeCount.toLocaleString() })
       ]
     }
@@ -493,157 +530,148 @@ function likeBadge(likeCount) {
 var VIEWER_ACTIONS = [
   {
     id: "open-in-instagram",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/external-link", size: 22, "aria-hidden": "true" }),
+    icon: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-    "button",
+function InstagramViewerRail({ item }) {
+  const meta = item.meta ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      type: "button",
-      "aria-label": `${count.toLocaleString()} ${label}`,
-      onClick: (e) => {
-        e.stopPropagation();
-        onPress();
-      },
       style: {
+        position: "absolute",
+        right: 11,
+        bottom: 135,
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        gap: 5,
-        padding: 0,
-        border: "none",
-        background: "transparent",
-        color: "inherit",
-        cursor: "pointer",
-        font: "inherit"
+        gap: 18,
+        color: "var(--psmi-chrome-fg, #fff)",
+        zIndex: 3
       },
-      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() })
-      ]
+      children: meta.href ? /* @__PURE__ */ jsxRuntime.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__ */ 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/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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/instagram", size: 14, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: handle ? `@${handle}` : "Instagram" })
+  ] });
   return /* @__PURE__ */ jsxRuntime.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__ */ 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(
+        handle ? /* @__PURE__ */ jsxRuntime.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__ */ 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" })
-            ]
+            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__ */ jsxRuntime.jsx("span", { style: USERNAME_BADGE_STYLE, children: badgeContent })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: VIEWER_TITLE_STYLE, children: item.title })
       ]
     }
   );
@@ -653,7 +681,8 @@ function InstagramFeedGrid({
   gridClassName,
   itemClassName,
   imageClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  showLikeBadges = false
 }) {
   const { open } = mediaImmersive.useImmersiveFeed();
   const posterImgProps = React.useMemo(() => {
@@ -666,26 +695,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__ */ jsxRuntime.jsx(
-          mediaImmersive.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__ */ 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: 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__ */ 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)
         );
       })
     }
@@ -698,7 +740,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,
@@ -706,15 +749,24 @@ function InstagramPostGrid({
   itemClassName,
   imageClassName,
   optixFlowConfig,
+  username,
+  showLikeBadges = false,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName
 }) {
   const mediaItems = React.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;
@@ -736,7 +788,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
@@ -746,7 +798,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
@@ -757,7 +809,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
@@ -770,14 +822,16 @@ function InstagramPostGrid({
               gridClassName,
               itemClassName,
               imageClassName,
-              optixFlowConfig
+              optixFlowConfig,
+              showLikeBadges
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             mediaImmersive.ImmersiveViewer,
             {
               ariaLabel: "Instagram post viewer",
-              renderActions: ({ item }) => /* @__PURE__ */ jsxRuntime.jsx(InstagramViewerRail, { item })
+              renderActions: ({ item }) => /* @__PURE__ */ jsxRuntime.jsx(InstagramViewerRail, { item }),
+              renderCaption: (item) => /* @__PURE__ */ jsxRuntime.jsx(InstagramViewerCaption, { item, username })
             }
           )
         ] })

package/dist/instagram-post-grid.d.cts

@@ -144,6 +144,22 @@ interface InstagramPostGridProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Instagram account username (leading `@` tolerated). Renders as a
+     * prominent, semi-transparent, clickable `@username` badge in the fullscreen
+     * viewer's caption card that opens the account's profile
+     * (`https://www.instagram.com/<username>/`) in a new tab. When omitted the
+     * badge degrades to a non-clickable "Instagram" chip — a handle is never
+     * fabricated.
+     */
+    username?: string;
+    /**
+     * Show the like-count pill on grid tiles. Defaults to `false`: clients with
+     * low like counts don't want them visible, so the pills stay hidden until
+     * per-client dynamic visibility ships. The pill implementation is retained
+     * intentionally — flip this prop to bring it back.
+     */
+    showLikeBadges?: boolean;
     /** Optional Section ID */
     sectionId?: string;
 }
@@ -192,6 +208,6 @@ interface InstagramPostGridProps {
  * />
  * ```
  */
-declare function InstagramPostGrid({ sectionId, heading, subheading, items, itemsSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: InstagramPostGridProps): React.JSX.Element | null;
+declare function InstagramPostGrid({ sectionId, heading, subheading, items, itemsSlot, className, containerClassName, spacing, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, optixFlowConfig, username, showLikeBadges, background, pattern, patternOpacity, patternClassName, }: InstagramPostGridProps): React.JSX.Element | null;
 
 export { InstagramPostGrid, type InstagramPostGridProps, type InstagramPostItem };

package/dist/instagram-post-grid.d.ts

@@ -144,6 +144,22 @@ interface InstagramPostGridProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Instagram account username (leading `@` tolerated). Renders as a
+     * prominent, semi-transparent, clickable `@username` badge in the fullscreen
+     * viewer's caption card that opens the account's profile
+     * (`https://www.instagram.com/<username>/`) in a new tab. When omitted the
+     * badge degrades to a non-clickable "Instagram" chip — a handle is never
+     * fabricated.
+     */
+    username?: string;
+    /**
+     * Show the like-count pill on grid tiles. Defaults to `false`: clients with
+     * low like counts don't want them visible, so the pills stay hidden until
+     * per-client dynamic visibility ships. The pill implementation is retained
+     * intentionally — flip this prop to bring it back.
+     */
+    showLikeBadges?: boolean;
     /** Optional Section ID */
     sectionId?: string;
 }
@@ -192,6 +208,6 @@ interface InstagramPostGridProps {
  * />
  * ```
  */
-declare function InstagramPostGrid({ sectionId, heading, subheading, items, itemsSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: InstagramPostGridProps): React.JSX.Element | null;
+declare function InstagramPostGrid({ sectionId, heading, subheading, items, itemsSlot, className, containerClassName, spacing, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, optixFlowConfig, username, showLikeBadges, background, pattern, patternOpacity, patternClassName, }: InstagramPostGridProps): React.JSX.Element | null;
 
 export { InstagramPostGrid, type InstagramPostGridProps, type InstagramPostItem };