@opensite/ui 3.8.2 → 3.10.0

package/dist/registry.js

@@ -35231,6 +35231,193 @@ function InteriorCarousel({
     }
   );
 }
+function EngagementBadge({
+  iconName,
+  count,
+  label
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-flex items-center gap-1",
+      "aria-label": `${count.toLocaleString()} ${label}`,
+      children: [
+        /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, size: 16, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: count.toLocaleString() })
+      ]
+    }
+  );
+}
+function InstagramPostGrid({
+  sectionId = "instagram-post-grid",
+  heading,
+  subheading,
+  items,
+  itemsSlot,
+  className,
+  containerClassName,
+  headerClassName,
+  headingClassName,
+  subheadingClassName,
+  gridClassName,
+  itemClassName,
+  imageClassName,
+  background,
+  spacing,
+  pattern,
+  patternOpacity,
+  patternClassName,
+  optixFlowConfig
+}) {
+  const tiles = useMemo(() => {
+    if (itemsSlot) return itemsSlot;
+    if (!items || items.length === 0) return null;
+    const visibleItems = items.filter((item) => Boolean(item.image));
+    return visibleItems.map((item) => {
+      const altText = item.imageAlt || (typeof item.caption === "string" ? item.caption : "") || "Instagram post";
+      const showVideo = Boolean(item.isVideo && item.videoUrl);
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          href: item.href,
+          "aria-label": typeof item.caption === "string" && item.caption.length > 0 ? item.caption : "View Instagram post",
+          className: cn(
+            "group relative block aspect-square overflow-hidden rounded-md bg-muted",
+            item.className,
+            itemClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: item.image,
+                alt: altText,
+                loading: "lazy",
+                className: cn(
+                  "h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105 motion-reduce:transform-none motion-reduce:transition-none",
+                  imageClassName
+                ),
+                optixFlowConfig
+              }
+            ),
+            showVideo && /* @__PURE__ */ jsx(
+              Video,
+              {
+                src: item.videoUrl,
+                poster: item.image,
+                controls: false,
+                muted: true,
+                loop: true,
+                playsInline: true,
+                preload: "metadata",
+                onMouseEnter: (e) => {
+                  void e.currentTarget.play().catch(() => void 0);
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.pause();
+                  e.currentTarget.currentTime = 0;
+                },
+                className: cn(
+                  "absolute inset-0 h-full w-full object-cover object-center opacity-0 transition-opacity duration-300 group-hover:opacity-100 motion-reduce:transition-none",
+                  imageClassName
+                )
+              }
+            ),
+            item.isVideo && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "absolute right-2 top-2 text-white drop-shadow-md",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 18 })
+              }
+            ),
+            (item.caption || item.date || typeof item.likeCount === "number" || typeof item.commentCount === "number" || typeof item.viewCount === "number") && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-1 bg-linear-to-t from-black/70 to-transparent p-3 text-left text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 motion-reduce:transition-none", children: [
+              item.caption && (typeof item.caption === "string" ? /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-xs leading-snug wrap-break-word", children: item.caption }) : /* @__PURE__ */ jsx("div", { className: "line-clamp-2 text-xs leading-snug", children: item.caption })),
+              (typeof item.likeCount === "number" || typeof item.commentCount === "number" || typeof item.viewCount === "number" || item.date) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs font-medium", children: [
+                typeof item.likeCount === "number" && /* @__PURE__ */ jsx(
+                  EngagementBadge,
+                  {
+                    iconName: "lucide/heart",
+                    count: item.likeCount,
+                    label: "likes"
+                  }
+                ),
+                typeof item.commentCount === "number" && /* @__PURE__ */ jsx(
+                  EngagementBadge,
+                  {
+                    iconName: "lucide/message-circle",
+                    count: item.commentCount,
+                    label: "comments"
+                  }
+                ),
+                typeof item.viewCount === "number" && /* @__PURE__ */ jsx(
+                  EngagementBadge,
+                  {
+                    iconName: "lucide/eye",
+                    count: item.viewCount,
+                    label: "views"
+                  }
+                ),
+                item.date && /* @__PURE__ */ jsx("span", { className: "ml-auto opacity-80", children: item.date })
+              ] })
+            ] })
+          ]
+        },
+        item.id
+      );
+    });
+  }, [itemsSlot, items, itemClassName, imageClassName, optixFlowConfig]);
+  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 }))
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
+              gridClassName
+            ),
+            children: tiles
+          }
+        )
+      ]
+    }
+  );
+}
 function RadialGradientTop({
   className,
   children,
@@ -111106,6 +111293,75 @@ var interiorCarousel = {
     ]
   }
 };
+var instagramPostGrid = {
+  exampleUsage: "Display a website's Instagram feed as a responsive grid of square tiles. Each tile links out to the post's instagram.com permalink in a new tab, shows the caption and post date on hover, and renders like/comment/view counts when available. Video posts play muted on hover. 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. Engagement counts ('likeCount', 'commentCount', 'viewCount') render only when the value is present \u2014 never fabricate a zero for a missing metric. Each 'items[].href' is an external instagram.com permalink and opens in a new tab. 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 +111378,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 +124774,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 square tiles rendering a website's Instagram feed. Each tile links out to the post's instagram.com permalink in a new tab, reveals the caption, date, and like/comment/view counts on hover, and plays video posts muted on hover. 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",
@@ -135174,7 +135451,51 @@ function createBuilderContractBundle({
         hydrationPhase: "routing-build",
         canonicalPayloadExpectation: "Keep blog feed requests symbolic in canonical page JSON until routing-build hydration resolves them.",
         requiredFields: ["type"],
-        optionalFields: ["limit", "offset", "category", "tag", "featuredOnly"]
+        optionalFields: [
+          "limit",
+          "offset",
+          "category",
+          "tag",
+          "featuredOnly",
+          "bindTo"
+        ]
+      },
+      blog_post: {
+        sourceType: "blog_post",
+        symbolic: true,
+        hydrationOwner: "dashtrack-ai",
+        hydrationPhase: "routing-build",
+        canonicalPayloadExpectation: "Keep blog post requests symbolic in canonical page JSON until routing-build hydration resolves them.",
+        requiredFields: ["type"],
+        optionalFields: ["slug", "current", "bindTo"]
+      },
+      testimonials_feed: {
+        sourceType: "testimonials_feed",
+        symbolic: true,
+        hydrationOwner: "dashtrack-ai",
+        hydrationPhase: "routing-build",
+        canonicalPayloadExpectation: "Keep testimonials feed requests symbolic in canonical page JSON until routing-build hydration resolves them.",
+        requiredFields: ["type"],
+        optionalFields: ["limit", "minRating", "platforms", "locationId", "bindTo"]
+      },
+      instagram_feed: {
+        sourceType: "instagram_feed",
+        symbolic: true,
+        hydrationOwner: "dashtrack-ai",
+        hydrationPhase: "routing-build",
+        canonicalPayloadExpectation: "Keep Instagram feed requests symbolic in canonical page JSON until routing-build hydration resolves them.",
+        requiredFields: ["type"],
+        optionalFields: ["limit", "profile", "hashtag", "bindTo"]
+      },
+      events_feed: {
+        sourceType: "events_feed",
+        symbolic: true,
+        hydrationOwner: "dashtrack-ai",
+        hydrationPhase: "routing-build",
+        canonicalPayloadExpectation: "Keep events feed requests symbolic in canonical page JSON until routing-build hydration resolves them.",
+        requiredFields: ["type"],
+        optionalFields: ["limit", "upcomingOnly", "locationIds", "bindTo"],
+        expands: true
       }
     },
     designTokens: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.8.2",
+  "version": "3.10.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",