{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "post-list", "version": "3.1.0", "category": "blogging", "meta": { "preview": "https://ui.manifest.build/previews/post-list.png", "version": "3.1.0", "changelog": { "1.0.0": "Initial release with list, grid and carousel variants", "1.1.0": "Added fullwidth variant with pagination for fullscreen mode", "2.0.0": "BREAKING: Removed id from Post interface. Use array index for key.", "2.0.1": "Added aria-labels to pagination and carousel navigation buttons for accessibility", "2.0.2": "Moved demo data to separate file for cleaner component code", "2.0.3": "Added comprehensive JSDoc documentation", "2.0.4": "Updated Props interface with decorative header and sub-parameter JSDoc documentation", "2.0.5": "Fixed defensive property access to handle empty objects and null values", "2.0.6": "Fixed circular dependency by moving Post interface to types.ts", "2.0.7": "Added bg-card background and margin to list variant for better dark/light mode support", "3.0.0": "BREAKING: Removed pagination (onPageChange, postsPerPage, control). Fullwidth variant now renders all posts.", "3.0.1": "Removed default content data - component only renders explicitly provided data", "3.0.2": "Fixed missing tooltip dependency for shadcn CLI installation", "3.0.3": "Replaced key={index} with stable content-based keys", "3.1.0": "Added demo data defaults - component renders demo content when no data prop is provided" } }, "changelog": { "1.0.0": "Initial release with list, grid and carousel variants", "1.1.0": "Added fullwidth variant with pagination for fullscreen mode", "2.0.0": "BREAKING: Removed id from Post interface. Use array index for key.", "2.0.1": "Added aria-labels to pagination and carousel navigation buttons for accessibility", "2.0.2": "Moved demo data to separate file for cleaner component code", "2.0.3": "Added comprehensive JSDoc documentation", "2.0.4": "Updated Props interface with decorative header and sub-parameter JSDoc documentation", "2.0.5": "Fixed defensive property access to handle empty objects and null values", "2.0.6": "Fixed circular dependency by moving Post interface to types.ts", "2.0.7": "Added bg-card background and margin to list variant for better dark/light mode support", "3.0.0": "BREAKING: Removed pagination (onPageChange, postsPerPage, control). Fullwidth variant now renders all posts.", "3.0.1": "Removed default content data - component only renders explicitly provided data", "3.0.2": "Fixed missing tooltip dependency for shadcn CLI installation", "3.0.3": "Replaced key={index} with stable content-based keys", "3.1.0": "Added demo data defaults - component renders demo content when no data prop is provided" }, "title": "Post List", "author": "MNFST, Inc", "description": "Post list with list, grid, carousel, and fullwidth variants. Fullwidth mode shows paginated posts.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "tooltip", "https://ui.manifest.build/r/manifest-types.json" ], "files": [ { "path": "registry/blogging/post-list.tsx", "content": "'use client'\n\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { useState } from 'react'\nimport type { Post } from './types'\nimport { PostCard } from './post-card'\nimport { demoPosts } from './demo/blogging'\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * PostListProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the PostList component, a blog post list with multiple layout variants.\n */\nexport interface PostListProps {\n data?: {\n /** Array of blog posts to display. */\n posts?: Post[]\n }\n actions?: {\n /** Called when the read more button is clicked on a post. */\n onReadMore?: (post: Post) => void\n }\n appearance?: {\n /**\n * Layout variant for the post list.\n * @default \"list\"\n */\n variant?: 'list' | 'grid' | 'carousel' | 'fullwidth'\n /**\n * Number of columns for grid and fullwidth variants.\n * @default 2\n */\n columns?: 2 | 3 | 4\n /**\n * Whether to show author information on post cards.\n * @default true\n */\n showAuthor?: boolean\n /**\n * Whether to show category labels on post cards.\n * @default true\n */\n showCategory?: boolean\n }\n}\n\n/**\n * A blog post list component with multiple layout variants.\n * Supports list, grid, carousel, and fullwidth paginated modes.\n *\n * Features:\n * - Four layout variants (list, grid, carousel, fullwidth)\n * - Responsive grid columns\n * - Carousel with touch-friendly navigation\n * - Fullwidth mode with pagination\n * - Configurable author and category display\n *\n * @component\n * @example\n * ```tsx\n * console.log(\"Read:\", post.title)\n * }}\n * />\n * ```\n */\nexport function PostList({ data, actions, appearance }: PostListProps) {\n const resolved: NonNullable = data ?? { posts: demoPosts }\n const posts = resolved.posts ?? []\n const onReadMore = actions?.onReadMore\n const variant = appearance?.variant ?? 'list'\n const columns = appearance?.columns ?? 2\n const showAuthor = appearance?.showAuthor ?? true\n const showCategory = appearance?.showCategory ?? true\n const [currentIndex, setCurrentIndex] = useState(0)\n\n // List variant\n if (variant === 'list') {\n return (\n
\n {posts.slice(0, 3).map((post) => (\n \n ))}\n
\n )\n }\n\n // Grid variant (inline mode - show only 4 posts)\n if (variant === 'grid') {\n return (\n \n {posts.slice(0, 4).map((post) => (\n \n ))}\n \n )\n }\n\n // Fullwidth variant\n if (variant === 'fullwidth') {\n const getGridColsClass = () => {\n switch (columns) {\n case 2:\n return 'sm:grid-cols-2'\n case 3:\n return 'sm:grid-cols-2 lg:grid-cols-3'\n case 4:\n return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'\n default:\n return 'sm:grid-cols-2'\n }\n }\n\n return (\n
\n
\n {posts.map((post) => (\n \n ))}\n
\n
\n )\n }\n\n // Carousel variant\n const maxIndexMobile = posts.length - 1\n const maxIndexTablet = Math.max(0, posts.length - 2)\n const maxIndexDesktop = Math.max(0, posts.length - 3)\n\n const prev = () => {\n setCurrentIndex((i) => Math.max(0, i - 1))\n }\n\n const next = () => {\n setCurrentIndex((i) => i + 1)\n }\n\n const isAtStart = currentIndex === 0\n const isAtEndMobile = currentIndex >= maxIndexMobile\n const isAtEndTablet = currentIndex >= maxIndexTablet\n const isAtEndDesktop = currentIndex >= maxIndexDesktop\n\n return (\n
\n
\n {/* Mobile: 1 card, slides by 100% */}\n \n {posts.map((post) => (\n
\n \n
\n ))}\n
\n\n {/* Tablet: 2 cards visible, slides by 50% */}\n \n {posts.map((post) => (\n
\n \n
\n ))}\n
\n\n {/* Desktop: 3 cards visible, slides by 33.333% */}\n \n {posts.map((post) => (\n
\n \n
\n ))}\n \n \n
\n
\n {posts.map((_, i) => (\n setCurrentIndex(i)}\n aria-label={`Go to slide ${i + 1}`}\n className={cn(\n 'h-1.5 rounded-full transition-all cursor-pointer',\n i === currentIndex\n ? 'w-4 bg-foreground'\n : 'w-1.5 bg-muted-foreground/30'\n )}\n />\n ))}\n
\n {/* Mobile navigation */}\n
\n \n \n \n \n \n \n
\n {/* Tablet navigation */}\n
\n \n \n \n \n \n \n
\n {/* Desktop navigation */}\n
\n \n \n \n \n \n \n
\n
\n \n )\n}\n", "type": "registry:block", "target": "components/ui/post-list.tsx" }, { "path": "registry/blogging/post-card.tsx", "content": "'use client'\n\nimport { Button } from '@/components/ui/button'\n\n// Import types from shared types file to avoid circular dependencies\nimport type { Post } from './types'\n// Re-export for backward compatibility\nexport type { Post } from './types'\n\nimport { demoPost } from './demo/blogging'\n\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * PostCardProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the PostCard component, a blog post card with multiple layout variants.\n */\nexport interface PostCardProps {\n data?: {\n /** The blog post to display. */\n post?: Post\n }\n actions?: {\n /** Called when the read more button is clicked. */\n onReadMore?: (post: Post) => void\n }\n appearance?: {\n /**\n * Card layout variant.\n * @default \"default\"\n */\n variant?: 'default' | 'compact' | 'horizontal' | 'covered'\n /**\n * Whether to show the cover image.\n * @default true\n */\n showImage?: boolean\n /**\n * Whether to show author information.\n * @default true\n */\n showAuthor?: boolean\n /**\n * Whether to show the category label.\n * @default true\n */\n showCategory?: boolean\n }\n}\n\n/**\n * A blog post card component with multiple layout variants.\n * Supports default, compact, horizontal, and covered (overlay) styles.\n *\n * Features:\n * - Four layout variants (default, compact, horizontal, covered)\n * - Cover image with hover zoom effect\n * - Author avatar and info display\n * - Category and tags display\n * - Read more action button\n * - Responsive design\n *\n * @component\n * @example\n * ```tsx\n * console.log(\"Read more:\", post.title)\n * }}\n * appearance={{\n * variant: \"default\",\n * showImage: true,\n * showAuthor: true,\n * showCategory: true\n * }}\n * />\n * ```\n */\nexport function PostCard({ data, actions, appearance }: PostCardProps) {\n const resolved: NonNullable = data ?? { post: demoPost }\n const post = resolved.post\n if (!post) {\n return null\n }\n const onReadMore = actions?.onReadMore\n const variant = appearance?.variant ?? 'default'\n const showImage = appearance?.showImage ?? true\n const showAuthor = appearance?.showAuthor ?? true\n const showCategory = appearance?.showCategory ?? true\n\n // Handle \"Read more\" click - only call callback if provided, otherwise do nothing\n // This lets users decide to use an external link or open fullscreen mode\n const handleReadMore = () => {\n if (onReadMore) {\n onReadMore(post)\n }\n }\n\n const formatDate = (dateStr: string) => {\n return new Date(dateStr).toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric'\n })\n }\n\n if (variant === 'covered') {\n return (\n
\n
\n {post.coverImage ? (\n \n ) : (\n
\n )}\n
\n {/* Minimal overlay - solid color instead of gradient per ChatGPT guidelines */}\n
\n
\n
\n {showCategory && post.category && (\n

\n {post.category}\n

\n )}\n {post.title && (\n

\n {post.title}\n

\n )}\n {post.excerpt && (\n

\n {post.excerpt}\n

\n )}\n {post.tags && post.tags.length > 0 && (\n
\n {post.tags.slice(0, 2).map((tag) => (\n \n {tag}\n \n ))}\n
\n )}\n
\n {showAuthor && (\n
\n {post.author?.avatar && (\n \n )}\n
\n {post.author?.name && (\n

{post.author.name}

\n )}\n {post.publishedAt && (\n

\n {formatDate(post.publishedAt)}\n

\n )}\n
\n
\n )}\n \n Read article\n \n
\n
\n
\n
\n )\n }\n\n if (variant === 'horizontal') {\n return (\n
\n {showImage && post.coverImage && (\n
\n \n
\n )}\n
\n
\n {showCategory && post.category && (\n

\n {post.category}\n

\n )}\n {post.title && (\n

\n {post.title}\n

\n )}\n {post.excerpt && (\n

\n {post.excerpt}\n

\n )}\n {post.tags && post.tags.length > 0 && (\n
\n {post.tags.slice(0, 2).map((tag) => (\n \n {tag}\n \n ))}\n
\n )}\n
\n
\n
\n {showAuthor && post.author?.avatar && (\n \n )}\n {post.publishedAt && (\n {formatDate(post.publishedAt)}\n )}\n {post.readTime && (\n <>\n ·\n {post.readTime}\n \n )}\n
\n \n Read\n \n
\n
\n
\n )\n }\n\n if (variant === 'compact') {\n return (\n
\n
\n {showCategory && post.category && (\n

\n {post.category}\n

\n )}\n {post.title && (\n

{post.title}

\n )}\n {post.excerpt && (\n

\n {post.excerpt}\n

\n )}\n {post.tags && post.tags.length > 0 && (\n
\n {post.tags.slice(0, 2).map((tag) => (\n \n {tag}\n \n ))}\n
\n )}\n
\n
\n
\n {showAuthor && post.author?.avatar && (\n \n )}\n {post.publishedAt && (\n \n {formatDate(post.publishedAt)}\n \n )}\n
\n \n
\n
\n )\n }\n\n // Default variant\n return (\n
\n {showImage && post.coverImage && (\n
\n \n
\n )}\n
\n
\n {showCategory && post.category && (\n

\n {post.category}\n

\n )}\n {post.title && (\n

{post.title}

\n )}\n {post.excerpt && (\n

\n {post.excerpt}\n

\n )}\n {post.tags && post.tags.length > 0 && (\n
\n {post.tags.slice(0, 2).map((tag) => (\n \n {tag}\n \n ))}\n
\n )}\n
\n
\n {showAuthor && (\n
\n {post.author?.avatar && (\n \n )}\n
\n {post.author?.name && (\n

{post.author.name}

\n )}\n {post.publishedAt && (\n

\n {formatDate(post.publishedAt)}\n

\n )}\n
\n
\n )}\n \n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "components/ui/post-card.tsx" }, { "path": "registry/blogging/post-detail.tsx", "content": "'use client';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { Calendar, Clock, ExternalLink, Maximize2 } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { Post } from './types';\nimport { demoPostDetailData } from './demo/blogging';\n\n// DOM-based allowlist HTML sanitizer for post content\nconst ALLOWED_TAGS = new Set([\n 'p', 'br', 'b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li',\n 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'pre',\n 'span', 'div', 'img', 'figure', 'figcaption', 'hr',\n]);\nconst ALLOWED_ATTRS: Record> = {\n a: new Set(['href', 'target', 'rel', 'title']),\n img: new Set(['src', 'alt', 'width', 'height']),\n '*': new Set(['class', 'id']),\n};\nconst DANGEROUS_URL = /^\\s*(javascript|data):/i;\n\nfunction sanitizeNode(node: Node, doc: Document): void {\n const children = Array.from(node.childNodes);\n for (const child of children) {\n if (child.nodeType === 3 /* TEXT */) continue;\n if (child.nodeType !== 1 /* ELEMENT */) {\n child.remove();\n continue;\n }\n const el = child as Element;\n const tag = el.tagName.toLowerCase();\n if (!ALLOWED_TAGS.has(tag)) {\n // Unwrap: keep text content, discard the tag\n while (el.firstChild) node.insertBefore(el.firstChild, el);\n el.remove();\n continue;\n }\n // Strip disallowed attributes\n const tagAllowed = ALLOWED_ATTRS[tag];\n const globalAllowed = ALLOWED_ATTRS['*'];\n for (const attr of Array.from(el.attributes)) {\n const name = attr.name.toLowerCase();\n if (!tagAllowed?.has(name) && !globalAllowed?.has(name)) {\n el.removeAttribute(attr.name);\n }\n }\n // Block dangerous URL schemes on href/src\n for (const urlAttr of ['href', 'src']) {\n const val = el.getAttribute(urlAttr);\n if (val && DANGEROUS_URL.test(val)) el.removeAttribute(urlAttr);\n }\n sanitizeNode(el, doc);\n }\n}\n\nfunction sanitizeHtml(html: string): string {\n if (typeof document === 'undefined') return html;\n const doc = new DOMParser().parseFromString(html, 'text/html');\n sanitizeNode(doc.body, doc);\n return doc.body.innerHTML;\n}\n\nfunction TagList({\n tags,\n maxVisible = 2,\n size = 'default',\n}: {\n tags: string[];\n maxVisible?: number;\n size?: 'small' | 'default';\n}) {\n const visibleTags = tags.slice(0, maxVisible);\n const remainingTags = tags.slice(maxVisible);\n const hasMore = remainingTags.length > 0;\n\n const tagClass =\n size === 'small'\n ? 'rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium'\n : 'rounded-full bg-muted px-3 py-1 text-xs font-medium';\n\n return (\n <>\n {visibleTags.map((tag) => (\n \n {tag}\n \n ))}\n {hasMore && (\n \n \n \n +{remainingTags.length}\n \n \n

{remainingTags.join(', ')}

\n \n \n \n )}\n \n );\n}\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * PostDetailProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the PostDetail component, a full post detail view with Medium-style typography.\n */\nexport interface PostDetailProps {\n data?: {\n /** The main blog post to display. */\n post?: Post;\n /** HTML content of the post body. */\n content?: string;\n /** Related posts to show at the bottom of the article. */\n relatedPosts?: Post[];\n };\n actions?: {\n /** Called when the back button is clicked. */\n onBack?: () => void;\n /** Called when the read more button is clicked (inline mode). */\n onReadMore?: () => void;\n /** Called when a related post is clicked. */\n onReadRelated?: (post: Post) => void;\n };\n appearance?: {\n /**\n * Whether to show the cover image.\n * @default true\n */\n showCover?: boolean;\n /**\n * Whether to show author information.\n * @default true\n */\n showAuthor?: boolean;\n /**\n * Display mode for the component.\n * - inline: Compact card view with truncated content\n * - pip: Picture-in-picture view with truncated content\n * - fullscreen: Full article view with complete content\n * @default \"fullscreen\"\n */\n displayMode?: 'inline' | 'pip' | 'fullscreen';\n };\n}\n\n/**\n * A full post detail component with Medium-style typography.\n * Supports inline preview and fullscreen reading modes.\n *\n * Features:\n * - Medium-style typography and spacing\n * - Cover image display\n * - Author info with avatar\n * - Tag list with overflow tooltip\n * - Related posts section\n * - Inline (truncated) and fullscreen modes\n * - MCP Apps display mode integration\n *\n * @component\n * @example\n * ```tsx\n * Full post content here...

\",\n * relatedPosts: [...]\n * }}\n * actions={{\n * onReadMore: () => console.log(\"Expand to fullscreen\"),\n * onReadRelated: (post) => console.log(\"Read related:\", post.title)\n * }}\n * appearance={{\n * showCover: true,\n * showAuthor: true,\n * displayMode: \"fullscreen\"\n * }}\n * />\n * ```\n */\nexport function PostDetail({ data, actions, appearance }: PostDetailProps) {\n const resolved: NonNullable = data ?? demoPostDetailData;\n const post = resolved.post;\n const rawContent = resolved.content;\n const content = useMemo(() => rawContent ? sanitizeHtml(rawContent) : undefined, [rawContent]);\n const relatedPosts = resolved.relatedPosts ?? [];\n const onReadMore = actions?.onReadMore;\n const showCover = appearance?.showCover ?? true;\n const showAuthor = appearance?.showAuthor ?? true;\n\n const displayMode = appearance?.displayMode ?? 'inline';\n\n const handleReadMore = () => {\n onReadMore?.();\n };\n\n const formatDate = (dateStr: string) => {\n return new Date(dateStr).toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n });\n };\n\n // Inline mode - card view with truncated content\n if (displayMode === 'inline') {\n return (\n
\n {showCover && post?.coverImage && (\n
\n \n
\n )}\n\n
\n
\n
\n
\n {post?.category && (\n

\n {post.category}\n

\n )}\n\n {post?.title && (\n

{post.title}

\n )}\n
\n \n \n \n
\n\n {post?.excerpt && (\n

{post.excerpt}

\n )}\n\n {post?.tags && post.tags.length > 0 && (\n
\n \n
\n )}\n
\n\n
\n
\n {showAuthor && post?.author?.avatar && (\n \n )}\n {showAuthor && post?.author?.name && {post.author.name}}\n {post?.publishedAt && (\n \n \n {formatDate(post.publishedAt)}\n \n )}\n {post?.readTime && (\n \n \n {post.readTime}\n \n )}\n
\n\n \n
\n
\n
\n );\n }\n\n // PiP mode - horizontal layout with image on left, similar to post-card horizontal\n if (displayMode === 'pip') {\n return (\n
\n {showCover && post?.coverImage && (\n
\n \n
\n )}\n\n
\n
\n {post?.category && (\n

\n {post.category}\n

\n )}\n\n {post?.title && (\n

{post.title}

\n )}\n\n {post?.excerpt && (\n

{post.excerpt}

\n )}\n\n {post?.tags && post.tags.length > 0 && (\n
\n \n
\n )}\n
\n\n
\n
\n {showAuthor && post?.author?.avatar && (\n \n )}\n {showAuthor && post?.author?.name && {post.author.name}}\n {post?.publishedAt && (\n \n \n {formatDate(post.publishedAt)}\n \n )}\n {post?.readTime && (\n \n \n {post.readTime}\n \n )}\n
\n \n
\n
\n
\n );\n }\n\n // Fullscreen mode\n return (\n
\n
\n {showCover && post?.coverImage && (\n
\n \n
\n )}\n {post?.category && (\n

\n {post.category}\n

\n )}\n\n {post?.title && (\n

\n {post.title}\n

\n )}\n\n {post?.tags && post.tags.length > 0 && (\n
\n \n
\n )}\n\n {showAuthor && post?.author && (\n
\n {post.author.avatar && (\n \n )}\n
\n {post.author.name &&

{post.author.name}

}\n {(post?.publishedAt || post?.readTime) && (\n
\n {post?.publishedAt && (\n \n \n {formatDate(post.publishedAt)}\n \n )}\n {post?.readTime && (\n \n \n {post.readTime}\n \n )}\n
\n )}\n
\n
\n )}\n\n {/* Medium-style content */}\n
\n {post?.excerpt && (\n

{post.excerpt}

\n )}\n {content && (\n p]:mb-8\n [&>h2]:text-[26px] [&>h2]:font-bold [&>h2]:mt-12 [&>h2]:mb-4 [&>h2]:leading-[1.3]\n [&>h3]:text-[22px] [&>h3]:font-bold [&>h3]:mt-10 [&>h3]:mb-3 [&>h3]:leading-[1.3]\n [&>ul]:mb-8 [&>ul]:pl-6 [&>ul>li]:mb-2\n [&>ol]:mb-8 [&>ol]:pl-6 [&>ol>li]:mb-2\n [&>blockquote]:border-l-4 [&>blockquote]:border-foreground [&>blockquote]:pl-6 [&>blockquote]:my-8 [&>blockquote]:italic\n \"\n dangerouslySetInnerHTML={{ __html: content }}\n />\n )}\n
\n\n {relatedPosts && relatedPosts.length > 0 && (\n
\n

Related Posts

\n
\n {relatedPosts.map((related) => (\n \n {related.coverImage && (\n
\n \n
\n )}\n
\n {related.title &&

{related.title}

}\n {related.excerpt && (\n

\n {related.excerpt}\n

\n )}\n {related.readTime && (\n

{related.readTime}

\n )}\n
\n \n \n ))}\n
\n
\n )}\n
\n
\n );\n}\n", "type": "registry:block", "target": "components/ui/post-detail.tsx" }, { "path": "registry/blogging/demo/blogging.ts", "content": "// Demo data for Blogging category components\n// This file contains sample data used for component previews and documentation\n\nimport type { Post } from '../types';\n\n// Single post for PostCard default\nexport const demoPost: Post = {\n title: 'Getting Started with Agentic UI Components',\n excerpt:\n 'Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.',\n coverImage: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800',\n author: {\n name: 'Sarah Chen',\n avatar: 'https://i.pravatar.cc/150?u=sarah',\n },\n publishedAt: '2024-01-15',\n readTime: '5 min read',\n tags: ['Tutorial', 'Components'],\n category: 'Tutorial',\n};\n\n// Demo content for PostDetail (HTML content for full article view)\nexport const demoPostContent = `\n

Building modern AI-powered applications requires a new approach to UI design. Traditional web components don't always translate well to conversational interfaces, where context and flow are paramount.

\n\n

Our Agentic UI component library provides a collection of purpose-built components that work seamlessly within chat interfaces. From payment flows to product displays, each component is designed with the unique constraints of conversational UIs in mind.

\n\n

Key Features

\n

Each component supports three display modes: inline (within the chat flow), fullscreen (for complex interactions), and picture-in-picture (persistent visibility). This flexibility allows you to create rich, interactive experiences without breaking the conversational flow.

\n\n

Components are designed mobile-first and touch-friendly, ensuring a great experience across all devices. They automatically adapt to light and dark themes, and integrate seamlessly with MCP tools for backend communication.

\n`;\n\n// Related posts for PostDetail\nexport const demoRelatedPosts: Post[] = [\n {\n title: 'Designing for Conversational Interfaces',\n excerpt:\n 'Best practices for creating intuitive UI components that work within chat environments.',\n coverImage: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800',\n author: { name: 'Alex Rivera', avatar: 'https://i.pravatar.cc/150?u=alex' },\n publishedAt: '2024-01-12',\n readTime: '8 min read',\n tags: ['Design', 'UX'],\n category: 'Design',\n url: 'https://example.com/posts/designing-conversational-interfaces',\n },\n {\n title: 'MCP Integration Patterns',\n excerpt: 'How to leverage Model Context Protocol for seamless backend communication.',\n coverImage: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800',\n author: { name: 'Jordan Kim', avatar: 'https://i.pravatar.cc/150?u=jordan' },\n publishedAt: '2024-01-10',\n readTime: '12 min read',\n tags: ['MCP', 'Backend'],\n category: 'Development',\n url: 'https://example.com/posts/mcp-integration-patterns',\n },\n];\n\n// Full PostDetail demo data (combines post, content, and relatedPosts)\nexport const demoPostDetailData = {\n post: {\n ...demoPost,\n tags: ['Tutorial', 'Components', 'AI', 'React', 'TypeScript'],\n },\n content: demoPostContent,\n relatedPosts: demoRelatedPosts,\n};\n\n// 15 posts for PostList default\nexport const demoPosts: Post[] = [\n {\n title: 'Getting Started with Agentic UI Components',\n excerpt:\n 'Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.',\n coverImage: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800',\n author: {\n name: 'Sarah Chen',\n avatar: 'https://i.pravatar.cc/150?u=sarah',\n },\n publishedAt: '2024-01-15',\n readTime: '5 min read',\n tags: ['Tutorial', 'Components', 'AI'],\n category: 'Tutorial',\n },\n {\n title: 'Designing for Conversational Interfaces with Manifest UI',\n excerpt:\n 'Best practices for creating intuitive UI components that work within chat environments.',\n coverImage: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800',\n author: {\n name: 'Alex Rivera',\n avatar: 'https://i.pravatar.cc/150?u=alex',\n },\n publishedAt: '2024-01-12',\n readTime: '8 min read',\n tags: ['Design', 'UX'],\n category: 'Design',\n },\n {\n title: 'MCP Integration Patterns',\n excerpt:\n 'How to leverage Model Context Protocol for seamless backend communication in your agentic applications.',\n coverImage: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800',\n author: {\n name: 'Jordan Kim',\n avatar: 'https://i.pravatar.cc/150?u=jordan',\n },\n publishedAt: '2024-01-10',\n readTime: '12 min read',\n tags: ['MCP', 'Backend', 'Integration'],\n category: 'Development',\n },\n {\n title: 'Building Payment Flows in Chat',\n excerpt:\n 'A complete guide to implementing secure, user-friendly payment experiences within conversational interfaces.',\n coverImage: 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=800',\n author: {\n name: 'Morgan Lee',\n avatar: 'https://i.pravatar.cc/150?u=morgan',\n },\n publishedAt: '2024-01-08',\n readTime: '10 min read',\n tags: ['Payments', 'Security'],\n category: 'Tutorial',\n },\n {\n title: 'Real-time Collaboration in AI Apps',\n excerpt:\n 'Implementing WebSocket connections and real-time updates for collaborative agentic experiences.',\n coverImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800',\n author: {\n name: 'Casey Taylor',\n avatar: 'https://i.pravatar.cc/150?u=casey',\n },\n publishedAt: '2024-01-06',\n readTime: '15 min read',\n tags: ['WebSocket', 'Real-time', 'Collaboration'],\n category: 'Development',\n },\n {\n title: 'Accessibility in Chat Interfaces',\n excerpt:\n 'Making your conversational UI accessible to all users with screen readers and keyboard navigation.',\n coverImage: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800',\n author: {\n name: 'Jamie Park',\n avatar: 'https://i.pravatar.cc/150?u=jamie',\n },\n publishedAt: '2024-01-04',\n readTime: '9 min read',\n tags: ['Accessibility', 'A11y', 'UX'],\n category: 'Design',\n },\n {\n title: 'State Management for Complex Workflows',\n excerpt:\n 'Managing complex multi-step workflows in agentic applications using modern state patterns.',\n coverImage: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800',\n author: {\n name: 'Drew Martinez',\n avatar: 'https://i.pravatar.cc/150?u=drew',\n },\n publishedAt: '2024-01-02',\n readTime: '11 min read',\n tags: ['State', 'Workflow', 'Architecture'],\n category: 'Development',\n },\n {\n title: 'Testing Conversational Components',\n excerpt: 'Strategies for unit testing and integration testing of chat-based UI components.',\n coverImage: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=800',\n author: {\n name: 'Riley Johnson',\n avatar: 'https://i.pravatar.cc/150?u=riley',\n },\n publishedAt: '2023-12-30',\n readTime: '8 min read',\n tags: ['Testing', 'Quality', 'CI/CD'],\n category: 'Development',\n },\n {\n title: 'Theming and Dark Mode Support',\n excerpt: 'Implementing flexible theming systems with dark mode for agentic UI components.',\n coverImage: 'https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=800',\n author: {\n name: 'Avery Williams',\n avatar: 'https://i.pravatar.cc/150?u=avery',\n },\n publishedAt: '2023-12-28',\n readTime: '7 min read',\n tags: ['Theming', 'Dark Mode', 'CSS'],\n category: 'Design',\n },\n {\n title: 'Performance Optimization Techniques',\n excerpt: 'Optimizing render performance and reducing bundle size in chat applications.',\n coverImage: 'https://images.unsplash.com/photo-1518173946687-a2e8a36af77a?w=800',\n author: {\n name: 'Quinn Anderson',\n avatar: 'https://i.pravatar.cc/150?u=quinn',\n },\n publishedAt: '2023-12-25',\n readTime: '13 min read',\n tags: ['Performance', 'Optimization', 'React'],\n category: 'Development',\n },\n {\n title: 'Error Handling and Recovery',\n excerpt:\n 'Graceful error handling patterns and user-friendly recovery flows in conversational UIs.',\n coverImage: 'https://images.unsplash.com/photo-1509316975850-ff9c5deb0cd9?w=800',\n author: {\n name: 'Sage Thompson',\n avatar: 'https://i.pravatar.cc/150?u=sage',\n },\n publishedAt: '2023-12-22',\n readTime: '10 min read',\n tags: ['Error Handling', 'UX', 'Resilience'],\n category: 'Development',\n },\n {\n title: 'Internationalization Best Practices',\n excerpt: 'Making your agentic UI components work across languages and locales.',\n coverImage: 'https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=800',\n author: {\n name: 'Blake Garcia',\n avatar: 'https://i.pravatar.cc/150?u=blake',\n },\n publishedAt: '2023-12-20',\n readTime: '9 min read',\n tags: ['i18n', 'Localization', 'Global'],\n category: 'Design',\n },\n {\n title: 'Mobile-First Chat Design',\n excerpt: 'Designing conversational interfaces that work beautifully on mobile devices.',\n coverImage: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=800',\n author: {\n name: 'Charlie Brown',\n avatar: 'https://i.pravatar.cc/150?u=charlie',\n },\n publishedAt: '2023-12-18',\n readTime: '8 min read',\n tags: ['Mobile', 'Responsive', 'Design'],\n category: 'Design',\n },\n {\n title: 'Analytics and User Insights',\n excerpt: 'Tracking user interactions and deriving insights from conversational UI usage.',\n coverImage: 'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=800',\n author: {\n name: 'Sydney Chen',\n avatar: 'https://i.pravatar.cc/150?u=sydney',\n },\n publishedAt: '2023-12-15',\n readTime: '11 min read',\n tags: ['Analytics', 'Insights', 'Data'],\n category: 'Tutorial',\n },\n {\n title: 'Building Reusable Component Libraries',\n excerpt: 'Creating a scalable component library for agentic UIs that teams can share.',\n coverImage: 'https://images.unsplash.com/photo-1465056836900-8f1e940f2114?w=800',\n author: {\n name: 'Taylor Swift',\n avatar: 'https://i.pravatar.cc/150?u=taylor',\n },\n publishedAt: '2023-12-12',\n readTime: '14 min read',\n tags: ['Components', 'Library', 'Scalability'],\n category: 'Development',\n },\n];\n", "type": "registry:lib", "target": "components/ui/demo/blogging.ts" } ], "categories": [ "blogging" ], "type": "registry:block" }