@opensite/ui 3.11.2 → 3.12.0

package/dist/instagram-post-grid.cjs

@@ -438,7 +438,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",
@@ -518,7 +521,7 @@ function likeBadge(likeCount) {
         letterSpacing: "0.01em"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/heart", size: 15, "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() })
       ]
     }
@@ -527,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 })
       ]
     }
   );
@@ -687,7 +681,8 @@ function InstagramFeedGrid({
   gridClassName,
   itemClassName,
   imageClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  showLikeBadges = false
 }) {
   const { open } = mediaImmersive.useImmersiveFeed();
   const posterImgProps = React.useMemo(() => {
@@ -724,7 +719,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 ? (
@@ -754,6 +749,8 @@ function InstagramPostGrid({
   itemClassName,
   imageClassName,
   optixFlowConfig,
+  username,
+  showLikeBadges = false,
   background,
   pattern,
   patternOpacity,
@@ -762,7 +759,7 @@ function InstagramPostGrid({
   const mediaItems = React.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(
@@ -791,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
@@ -801,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
@@ -825,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, spacing, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, optixFlowConfig, background, 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, spacing, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, optixFlowConfig, background, 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 };