@flamingo-stack/openframe-frontend-core 0.0.215 → 0.0.216

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.215",
+  "version": "0.0.216",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -48,6 +48,12 @@
       "require": "./dist/components/tickets/index.cjs",
       "default": "./dist/components/tickets/index.js"
     },
+    "./components/onboarding-guides": {
+      "types": "./dist/components/onboarding-guides/index.d.ts",
+      "import": "./dist/components/onboarding-guides/index.js",
+      "require": "./dist/components/onboarding-guides/index.cjs",
+      "default": "./dist/components/onboarding-guides/index.js"
+    },
     "./components/contact": {
       "types": "./dist/components/contact/index.d.ts",
       "import": "./dist/components/contact/index.js",
@@ -72,6 +78,12 @@
       "require": "./dist/components/features/index.cjs",
       "default": "./dist/components/features/index.js"
     },
+    "./components/features/mux-origins": {
+      "types": "./dist/components/features/mux-origins.d.ts",
+      "import": "./dist/components/features/mux-origins.js",
+      "require": "./dist/components/features/mux-origins.cjs",
+      "default": "./dist/components/features/mux-origins.js"
+    },
     "./components/toast": {
       "types": "./dist/components/toast/index.d.ts",
       "import": "./dist/components/toast/index.js",

package/src/components/chat/entity-cards/blog-card.tsx

@@ -24,6 +24,8 @@ import Image from '../../../embed-shims/next-image'
 import { StatusBadge } from '../../ui/status-badge'
 import { cn } from '../../../utils/cn'
 import type { BlogPostSummary } from '../../../types/blog'
+import { useEntityCardLink } from './use-entity-card-link'
+import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
@@ -102,16 +104,26 @@ export function BlogCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm'
 export function BlogCard({
   post,
   href,
-
-  target,
-
-  rel,
-  placeholderUrl,
+  target: targetProp,
+  rel: relProp,
+  targetPlatform,
+  placeholderUrl: placeholderUrlProp,
   size = 'default',
   className,
   hasEmbeddedVideo = false,
   priority = false,
 }: BlogCardProps) {
+  const { target, rel } = useEntityCardLink({
+    href,
+    targetPlatform,
+    target: targetProp,
+    rel: relProp,
+  })
+  const placeholderUrl = useEntityCardPlaceholder({
+    title: post.title,
+    placeholderUrl: placeholderUrlProp,
+    aspect: size === 'sm' ? 'square' : 'wide',
+  })
   const [imageError, setImageError] = useState(false)
   const displayImage = (post.featured_image && !imageError) ? post.featured_image : placeholderUrl
 

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -17,6 +17,8 @@ import Image from '../../../embed-shims/next-image'
 import { Card } from '../../ui/card'
 import { cn } from '../../../utils/cn'
 import type { CaseStudy } from '../../../types/case-study'
+import { useEntityCardLink } from './use-entity-card-link'
+import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
@@ -88,7 +90,27 @@ export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' |
   )
 }
 
-export function CaseStudyCard({ study, href, target, rel, placeholderUrl, size = 'default', className }: CaseStudyCardProps) {
+export function CaseStudyCard({
+  study,
+  href,
+  target: targetProp,
+  rel: relProp,
+  targetPlatform,
+  placeholderUrl: placeholderUrlProp,
+  size = 'default',
+  className,
+}: CaseStudyCardProps) {
+  const { target, rel } = useEntityCardLink({
+    href,
+    targetPlatform,
+    target: targetProp,
+    rel: relProp,
+  })
+  const placeholderUrl = useEntityCardPlaceholder({
+    title: study.title,
+    placeholderUrl: placeholderUrlProp,
+    aspect: size === 'sm' ? 'square' : 'wide',
+  })
   const coverImage = study.featured_image || placeholderUrl || null
 
   if (size === 'sm') {

package/src/components/chat/entity-cards/customer-interview-card.tsx

@@ -13,6 +13,8 @@ import { Card } from '../../ui/card'
 import { cn } from '../../../utils/cn'
 import { Video } from 'lucide-react'
 import type { CustomerInterview } from '../../../types/customer-interview'
+import { useEntityCardLink } from './use-entity-card-link'
+import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
@@ -88,7 +90,27 @@ export function CustomerInterviewCardSkeleton({ size = 'default' }: { size?: 'de
   )
 }
 
-export function CustomerInterviewCard({ interview, href, target, rel, placeholderUrl, size = 'default', className }: CustomerInterviewCardProps) {
+export function CustomerInterviewCard({
+  interview,
+  href,
+  target: targetProp,
+  rel: relProp,
+  targetPlatform,
+  placeholderUrl: placeholderUrlProp,
+  size = 'default',
+  className,
+}: CustomerInterviewCardProps) {
+  const { target, rel } = useEntityCardLink({
+    href,
+    targetPlatform,
+    target: targetProp,
+    rel: relProp,
+  })
+  const placeholderUrl = useEntityCardPlaceholder({
+    title: interview.title,
+    placeholderUrl: placeholderUrlProp,
+    aspect: size === 'sm' ? 'square' : 'wide',
+  })
   const thumbnailUrl = interview.featured_image || placeholderUrl || null
 
   if (size === 'sm') {

package/src/components/chat/entity-cards/dispatch.tsx

@@ -1016,6 +1016,27 @@ export function ChatCardLoader({
     </ChatCardNavWrap>
   )
   if (entry.mode === 'no-fetch') {
+    // Synthetic-ref gate. `chat-message-enhanced.tsx` builds a minimal
+    // `{ type, id, title: cardId, url: null }` ChatRef when the LLM
+    // emits `[card://<type>:<id>]` for an id the server did NOT
+    // surface (refs map miss) — typically an LLM hallucination of a
+    // composite/invented UUID. EVERY real ref carries `sourceRepo`
+    // (set by `buildChatRefFromRow` via `config.id` AND by
+    // `synthesizeVideoRefs` via `EMBEDDED_VIDEO_SOURCE_REPO`), so a
+    // missing `sourceRepo` is a reliable synthetic-ref signal.
+    //
+    // Returning null here triggers the bare-cardId fallback span in
+    // chat-message-enhanced's `<a card://...>` override — the
+    // documented "VISIBLE breakage" behavior. Without this gate, a
+    // hallucinated marker like `[card://markdown:f18945f8-<real-uuid>]`
+    // renders a `DataRoomDocChatCard` with the generic "Document"
+    // badge AND the fake id as the title — which the user can't tell
+    // apart from a real card (the entire point of the fallback
+    // comment block in chat-message-enhanced.tsx).
+    //
+    // Fetch-mode types already handle this gracefully: a synthetic
+    // id leads to a fetch miss → `!item` → null at line ~1034.
+    if (!finalChatRef.sourceRepo) return null
     if (entry.bareInline) {
       return navWrap(entry.render(finalChatRef, renderOpts))
     }

package/src/components/chat/entity-cards/investor-update-card.tsx

@@ -12,6 +12,8 @@ import React from 'react'
 import { Calendar } from 'lucide-react'
 import { AdminContentCard } from './admin-content-card'
 import { formatInvestorUpdatePeriod, type InvestorUpdate } from '../types/entities/investor-update'
+import { useEntityCardLink } from './use-entity-card-link'
+import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
@@ -73,7 +75,27 @@ export function InvestorUpdateCardSkeleton({ size = 'default' }: { size?: 'defau
   )
 }
 
-export function InvestorUpdateCard({ update, href, target, rel, placeholderUrl, size = 'default', className }: InvestorUpdateCardProps) {
+export function InvestorUpdateCard({
+  update,
+  href,
+  target: targetProp,
+  rel: relProp,
+  targetPlatform,
+  placeholderUrl: placeholderUrlProp,
+  size = 'default',
+  className,
+}: InvestorUpdateCardProps) {
+  const { target, rel } = useEntityCardLink({
+    href,
+    targetPlatform,
+    target: targetProp,
+    rel: relProp,
+  })
+  const placeholderUrl = useEntityCardPlaceholder({
+    title: update.title ?? `Update #${update.update_number ?? ''}`,
+    placeholderUrl: placeholderUrlProp,
+    aspect: size === 'sm' ? 'square' : 'wide',
+  })
   const coverImage = update.featured_image || placeholderUrl || null
 
   if (size === 'sm') {

package/src/components/chat/entity-cards/onboarding-guide-card.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 /**
- * OnboardingGuideCard (pure presentation).
+ * OnboardingGuideCard (pure presentation + runtime-derived link attrs).
  *
  * Three variants:
  *   - `catalog`: rich detail card (hero + author grid) for the public catalog
@@ -9,8 +9,11 @@
  *   - `default`: horizontal step-numbered card for "More in {section}" rail.
  *   - `sm`: compact horizontal card for chat-inline rendering.
  *
- * The card writes NO click logic — callers wrap with their own anchor and
- * pass the resolved detail URL via `href`.
+ * Link semantics: the card derives `target`/`rel` from `ChatRuntime.navigation
+ * .decideNewTab` (hub-wired via `HubRuntimeProvider`) and the placeholder
+ * image from `ChatRuntime.resolvePlaceholderUrl`. Explicit `target` / `rel`
+ * / `placeholderUrl` props always WIN — chat dispatch and tests can
+ * pre-resolve. No runtime mounted → same-tab + no placeholder.
  */
 
 import React from 'react'
@@ -21,6 +24,8 @@ import { BlogImagePlaceholder } from './blog-image-placeholder'
 import { EntityAuthorCard } from './entity-author-card'
 import { formatDurationMMSS } from '../../../utils/format'
 import type { OnboardingGuide } from '../types/entities/onboarding-guide'
+import { useEntityCardLink } from './use-entity-card-link'
+import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
 import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_IMAGE_SLOT,
@@ -134,7 +139,28 @@ export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'cata
   )
 }
 
-export function OnboardingGuideCard({ guide, href, target, rel, placeholderUrl, size = 'default', className }: OnboardingGuideCardProps) {
+export function OnboardingGuideCard({
+  guide,
+  href,
+  target: targetProp,
+  rel: relProp,
+  targetPlatform,
+  placeholderUrl: placeholderUrlProp,
+  size = 'default',
+  className,
+}: OnboardingGuideCardProps) {
+  const { target, rel } = useEntityCardLink({
+    href,
+    targetPlatform,
+    target: targetProp,
+    rel: relProp,
+  })
+  const placeholderUrl = useEntityCardPlaceholder({
+    title: guide.title,
+    placeholderUrl: placeholderUrlProp,
+    aspect: size === 'sm' ? 'square' : 'wide',
+  })
+
   if (size === 'catalog') {
     const coverImage =
       guide.featured_image ||

package/src/components/chat/entity-cards/program-card.tsx

@@ -40,6 +40,8 @@ import type {
   ProgramMedia,
   ProgramHost,
 } from '../types/entities/program-types'
+import { useEntityCardLink } from './use-entity-card-link'
+import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
 
 type CardSize = 'default' | 'sm'
 
@@ -198,12 +200,24 @@ export function ProgramCard<T extends BaseProgramItem>({
   renderMeta,
   size = 'default',
   href,
-  target,
-  rel,
-  placeholderUrl,
+  target: targetProp,
+  rel: relProp,
+  targetPlatform,
+  placeholderUrl: placeholderUrlProp,
   wholeCardClickable = false,
   className,
 }: ProgramCardProps<T>) {
+  const { target, rel } = useEntityCardLink({
+    href,
+    targetPlatform,
+    target: targetProp,
+    rel: relProp,
+  })
+  const placeholderUrl = useEntityCardPlaceholder({
+    title: item.title,
+    placeholderUrl: placeholderUrlProp,
+    aspect: size === 'sm' ? 'square' : 'wide',
+  })
   const coverImage = item.cover_url
   const images = media.filter((m) => m.media_type === 'image')
   const hosts = getHosts(item.hosts)

package/src/components/chat/entity-cards/use-entity-card-link.ts

@@ -0,0 +1,66 @@
+'use client'
+
+/**
+ * Shared link-attribute resolver for every entity card.
+ *
+ * Pure-presentation cards (BlogCard, OnboardingGuideCard, etc.)
+ * historically required callers to pre-compute `target`/`rel` via a
+ * hub-side `useNavLink` wrapper because the same-tab-vs-new-tab
+ * decision depends on `currentPlatform()` and the cross-platform
+ * URL topology — neither of which the lib knows.
+ *
+ * This hook moves that decision INTO the card via the
+ * `ChatRuntime.navigation.decideNewTab` callback already wired by
+ * `HubRuntimeProvider` (and overridable per-embedder). The wrapping
+ * `*-card-item.tsx` files in the hub become unnecessary — every card
+ * derives its own `target`/`rel` from runtime.
+ *
+ * Backwards compat: explicit `target` / `rel` props always WIN over
+ * runtime-derived values. Chat dispatcher callsites that already pass
+ * pre-resolved attributes are unaffected.
+ *
+ * No runtime mounted? Returns `{ target: undefined, rel: undefined }`
+ * (same-tab) — matches the documented embed-shim fallback.
+ */
+
+import { useMemo } from 'react'
+import { useChatRuntime } from '../../../contexts/chat-runtime-context'
+
+export interface UseEntityCardLinkArgs {
+  href: string
+  targetPlatform?: string | null
+  /** Explicit override. When set, runtime decision is skipped. */
+  target?: '_blank'
+  /** Explicit override. When set, runtime decision is skipped. */
+  rel?: 'noopener noreferrer'
+}
+
+export interface EntityCardLinkProps {
+  target: '_blank' | undefined
+  rel: 'noopener noreferrer' | undefined
+}
+
+export function useEntityCardLink({
+  href,
+  targetPlatform,
+  target,
+  rel,
+}: UseEntityCardLinkArgs): EntityCardLinkProps {
+  const runtime = useChatRuntime()
+  return useMemo(() => {
+    // Explicit prop wins — preserves the chat-dispatcher path that
+    // pre-computes attrs from `computeIsNewTab`. When `target='_blank'`
+    // is passed without `rel`, auto-pair with `noopener noreferrer`
+    // to close the tabnabbing vector (window.opener access from the
+    // new tab back to the parent).
+    if (target !== undefined || rel !== undefined) {
+      const safeRel =
+        rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined)
+      return { target, rel: safeRel }
+    }
+    const newTab = runtime?.navigation.decideNewTab?.({ href, targetPlatform }) ?? false
+    return newTab
+      ? { target: '_blank' as const, rel: 'noopener noreferrer' as const }
+      : { target: undefined, rel: undefined }
+  }, [target, rel, href, targetPlatform, runtime])
+}

package/src/components/chat/entity-cards/use-entity-card-placeholder.ts

@@ -0,0 +1,50 @@
+'use client'
+
+/**
+ * Shared OG-placeholder resolver for every entity card.
+ *
+ * Pure-presentation cards historically required callers to
+ * pre-compute `placeholderUrl` via a hub-side `useOgPlaceholder`
+ * wrapper that injected the hub's `buildOgPlaceholderUrl` (resolves
+ * CSS-var ODS colors to hex via the static map).
+ *
+ * This hook moves that resolution INTO the card via the
+ * `ChatRuntime.resolvePlaceholderUrl` callback. Embedders that don't
+ * wire the callback get no placeholder (the card's empty-state path
+ * activates) — same fallback semantics as before.
+ *
+ * Backwards compat: explicit `placeholderUrl` prop ALWAYS wins over
+ * runtime-derived value. Callers that pre-resolve (chat dispatch,
+ * tests) are unaffected.
+ */
+
+import { useChatRuntime } from '../../../contexts/chat-runtime-context'
+import { useOgPlaceholder } from '../../../hooks/use-og-placeholder'
+
+export interface UseEntityCardPlaceholderArgs {
+  /** Entity title — used as the placeholder label. */
+  title: string | undefined | null
+  /** Explicit override. When set, runtime resolver is skipped. */
+  placeholderUrl?: string | null
+  /** Site name shown under the title. Optional. */
+  siteName?: string
+  /** Output aspect ratio. `'wide'` (default) for catalog cards,
+   *  `'square'` for compact chat-inline cards. */
+  aspect?: 'wide' | 'square'
+}
+
+const NO_OP_BUILDER = () => ''
+
+export function useEntityCardPlaceholder({
+  title,
+  placeholderUrl,
+  siteName = '',
+  aspect = 'wide',
+}: UseEntityCardPlaceholderArgs): string | null {
+  const runtime = useChatRuntime()
+  const builder = runtime?.resolvePlaceholderUrl ?? NO_OP_BUILDER
+  const enabled = placeholderUrl === undefined && !!runtime?.resolvePlaceholderUrl
+  const derived = useOgPlaceholder(builder, title, siteName, enabled, aspect)
+  // Explicit prop (including explicit null) wins; `undefined` falls back to derived.
+  return placeholderUrl !== undefined ? placeholderUrl : derived
+}

package/src/components/features/captions-url.ts

@@ -0,0 +1,25 @@
+/**
+ * Build the captions API URL for a video entity.
+ *
+ * Returns the HTTPS URL to the `/api/captions/[entityType]/[entityId]` endpoint
+ * which serves VTT content for iOS native fullscreen subtitles.
+ * Returns undefined if entity has no srt_content.
+ *
+ * Cache-busting hash derived from the srt_content length so iOS Safari
+ * fetches fresh VTT when subtitles are regenerated (Safari aggressively caches
+ * <track> src URLs even with short Cache-Control max-age).
+ *
+ * Lifted from hub `lib/utils/captions-url.ts`. The hub's hard-coded
+ * `VideoEnabledEntityType` enum is widened to `string` here — embedders
+ * pass whatever entity-type discriminator their reverse-proxied
+ * `/api/captions/...` route expects.
+ */
+export function getCaptionsUrl(
+  entityType: string,
+  entityId: string | number,
+  srtContent?: string | null,
+): string | undefined {
+  if (!srtContent) return undefined
+  const hash = `${srtContent.length}-${srtContent.slice(0, 8).replace(/\s/g, '')}`
+  return `/api/captions/${entityType}/${entityId}?v=${hash}`
+}

package/src/components/features/index.ts

@@ -56,6 +56,8 @@ export * from './video'
 export * from './video-ratio-tabs'
 export * from './video-bites-display'
 export * from './entity-video-section'
+export * from './use-video-warmup'
+export * from './captions-url'
 export * from './video-source-selector'
 export * from './transcript-summary-editor'
 export * from './highlight-video-section'

package/src/components/features/mux-origins.ts

@@ -0,0 +1,27 @@
+/**
+ * Mux CDN origin constants — single source of truth, server-safe.
+ *
+ * Lives in its own NON-`'use client'` module so server-side hub
+ * modules (webhook handlers, URL builders, hostname comparisons in
+ * `lib/config/mux-config.ts`) can import these strings without
+ * tripping Next.js's client-reference poisoning. Re-exported from
+ * `use-video-warmup.ts` for backward-compat with client-side callers.
+ *
+ * Bug history (2026-05-29): when these constants lived in
+ * `use-video-warmup.ts` (which is `'use client'`), the hub's
+ * server-side `new URL(MUX_STREAM_ORIGIN).hostname` evaluation crashed
+ * at Vercel build with `TypeError: Invalid URL` — Next.js had
+ * replaced the constant with a client-function stub that throws
+ * "Attempted to call ... from the server" when stringified. Splitting
+ * the constants into this module restores the server-safe path.
+ *
+ * These hostnames are part of Mux's public API contract and are
+ * stable. A future change to the Mux CDN architecture (extremely
+ * unlikely) would be a single-line edit here.
+ */
+
+/** HLS playback (`/{playback_id}.m3u8` + segments + per-asset MP4 renditions). */
+export const MUX_STREAM_ORIGIN = 'https://stream.mux.com'
+
+/** Server-generated thumbnails (`/{playback_id}/thumbnail.jpg`). */
+export const MUX_IMAGE_ORIGIN = 'https://image.mux.com'

package/src/components/features/notifications/index.ts

@@ -8,6 +8,8 @@ export { NotificationDrawer } from './notification-drawer'
 export type { NotificationDrawerProps } from './notification-drawer'
 export { NotificationTile } from './notification-tile'
 export type { NotificationTileProps } from './notification-tile'
+export { NotificationPopups } from './notification-popups'
+export type { NotificationPopupsProps, NotificationPopupsPosition } from './notification-popups'
 export type {
   Notification,
   NotificationVariant,

package/src/components/features/notifications/notification-drawer.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { useEffect, useRef } from 'react'
 import { BellOffIcon } from '../../icons-v2-generated/interface/bell-off-icon'
 import { ClockHistoryIcon } from '../../icons-v2-generated/date-and-time/clock-history-icon'
 import { Button } from '../../ui/button/button'
@@ -9,13 +10,15 @@ import { Switch } from '../../ui/switch'
 import { cn } from '../../../utils/cn'
 import { useOptionalNotifications } from './notifications-context'
 import { NotificationTile } from './notification-tile'
+import type { Notification } from './types'
 
 export interface NotificationDrawerProps {
   className?: string
   liveDurationMs?: number
+  loadMoreRootMargin?: string
 }
 
-export function NotificationDrawer({ className, liveDurationMs }: NotificationDrawerProps) {
+export function NotificationDrawer({ className, liveDurationMs, loadMoreRootMargin = '200px' }: NotificationDrawerProps) {
   const ctx = useOptionalNotifications()
   if (!ctx) return null
 
@@ -31,6 +34,9 @@ export function NotificationDrawer({ className, liveDurationMs }: NotificationDr
     markSettled,
     setShowPopups,
     onHistoryClick,
+    hasMore,
+    isLoadingMore,
+    loadMore,
   } = ctx
 
   const unreadNotifications = notifications.filter((n) => !n.read)
@@ -59,21 +65,16 @@ export function NotificationDrawer({ className, liveDurationMs }: NotificationDr
           </button>
         </div>
 
-        <div className="flex flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto px-[var(--spacing-system-m)]">
-          {unreadNotifications.length === 0 ? (
-            <EmptyState />
-          ) : (
-            unreadNotifications.map((n) => (
-              <NotificationTile
-                key={n.id}
-                notification={n}
-                liveDurationMs={liveDurationMs}
-                onComplete={markRead}
-                onSettle={markSettled}
-              />
-            ))
-          )}
-        </div>
+        <DrawerScrollList
+          unreadNotifications={unreadNotifications}
+          liveDurationMs={liveDurationMs}
+          onComplete={markRead}
+          onSettle={markSettled}
+          hasMore={hasMore}
+          isLoadingMore={isLoadingMore}
+          loadMore={loadMore}
+          loadMoreRootMargin={loadMoreRootMargin}
+        />
 
         <div className="flex flex-col gap-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
           <ShowNotificationsToggleRow checked={showPopups} onChange={setShowPopups} />
@@ -86,6 +87,89 @@ export function NotificationDrawer({ className, liveDurationMs }: NotificationDr
   )
 }
 
+interface DrawerScrollListProps {
+  unreadNotifications: Notification[]
+  liveDurationMs?: number
+  onComplete: (id: string) => void
+  onSettle: (id: string) => void
+  hasMore: boolean
+  isLoadingMore: boolean
+  loadMore?: () => void
+  loadMoreRootMargin: string
+}
+
+function DrawerScrollList({
+  unreadNotifications,
+  liveDurationMs,
+  onComplete,
+  onSettle,
+  hasMore,
+  isLoadingMore,
+  loadMore,
+  loadMoreRootMargin,
+}: DrawerScrollListProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const sentinelRef = useRef<HTMLDivElement>(null)
+  const loadMoreRef = useRef(loadMore)
+  loadMoreRef.current = loadMore
+
+  useEffect(() => {
+    if (!loadMore || !hasMore || isLoadingMore) return
+    const sentinel = sentinelRef.current
+    const root = scrollRef.current
+    if (!sentinel || !root) return
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries[0]?.isIntersecting) loadMoreRef.current?.()
+      },
+      { root, rootMargin: loadMoreRootMargin },
+    )
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [hasMore, isLoadingMore, loadMore, loadMoreRootMargin])
+
+  const isEmpty = unreadNotifications.length === 0
+  return (
+    <div
+      ref={scrollRef}
+      className="flex flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto px-[var(--spacing-system-m)]"
+    >
+      {isEmpty && !isLoadingMore ? (
+        <EmptyState />
+      ) : (
+        <>
+          {unreadNotifications.map((n) => (
+            <NotificationTile
+              key={n.id}
+              notification={n}
+              liveDurationMs={liveDurationMs}
+              onComplete={onComplete}
+              onSettle={onSettle}
+            />
+          ))}
+          {isLoadingMore && <DrawerLoadingTiles />}
+          {loadMore && hasMore && <div ref={sentinelRef} className="h-1" aria-hidden="true" />}
+        </>
+      )}
+    </div>
+  )
+}
+
+function DrawerLoadingTiles() {
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        className="h-16 w-full shrink-0 animate-pulse rounded-md border border-ods-border bg-ods-card"
+      />
+      <div
+        aria-hidden="true"
+        className="h-16 w-full shrink-0 animate-pulse rounded-md border border-ods-border bg-ods-card"
+      />
+    </>
+  )
+}
+
 function EmptyState() {
   return (
     <div className="flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-xs)] py-[var(--spacing-system-l)]">