4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2635,'use client' import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' import { ChevronLeft, ChevronRight } from 'lucide-react' import { useState } from 'react' import type { Post } from './types' import { PostCard } from './post-card' import { demoPosts } from './demo/blogging' /** * ═══════════════════════════════════════════════════════════════════════════ * PostListProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for the PostList component, a blog post list with multiple layout variants. */ export interface PostListProps { data?: { /** Array of blog posts to display. */ posts?: Post[] } actions?: { /** Called when the read more button is clicked on a post. */ onReadMore?: (post: Post) => void } appearance?: { /** * Layout variant for the post list. * @default "list" */ variant?: 'list' | 'grid' | 'carousel' | 'fullwidth' /** * Number of columns for grid and fullwidth variants. * @default 2 */ columns?: 2 | 3 | 4 /** * Whether to show author information on post cards. * @default true */ showAuthor?: boolean /** * Whether to show category labels on post cards. * @default true */ showCategory?: boolean } } /** * A blog post list component with multiple layout variants. * Supports list, grid, carousel, and fullwidth paginated modes. * * Features: * - Four layout variants (list, grid, carousel, fullwidth) * - Responsive grid columns * - Carousel with touch-friendly navigation * - Fullwidth mode with pagination * - Configurable author and category display * * @component * @example * ```tsx * console.log("Read:", post.title) * }} * /> * ``` */ export function PostList({ data, actions, appearance }: PostListProps) { const resolved: NonNullable = data ?? { posts: demoPosts } const posts = resolved.posts ?? [] const onReadMore = actions?.onReadMore const variant = appearance?.variant ?? 'list' const columns = appearance?.columns ?? 2 const showAuthor = appearance?.showAuthor ?? true const showCategory = appearance?.showCategory ?? true const [currentIndex, setCurrentIndex] = useState(0) // List variant if (variant === 'list') { return (

{posts.slice(0, 3).map((post) => ( ))}

) } // Grid variant (inline mode - show only 4 posts) if (variant === 'grid') { return (

{posts.slice(0, 4).map((post) => ( ))}

) } // Fullwidth variant if (variant === 'fullwidth') { const getGridColsClass = () => { switch (columns) { case 2: return 'sm:grid-cols-2' case 3: return 'sm:grid-cols-2 lg:grid-cols-3' case 4: return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4' default: return 'sm:grid-cols-2' } } return (

{posts.map((post) => ( ))}

) } // Carousel variant const maxIndexMobile = posts.length - 1 const maxIndexTablet = Math.max(0, posts.length - 2) const maxIndexDesktop = Math.max(0, posts.length - 3) const prev = () => { setCurrentIndex((i) => Math.max(0, i - 1)) } const next = () => { setCurrentIndex((i) => i + 1) } const isAtStart = currentIndex === 0 const isAtEndMobile = currentIndex >= maxIndexMobile const isAtEndTablet = currentIndex >= maxIndexTablet const isAtEndDesktop = currentIndex >= maxIndexDesktop return (

{/* Mobile: 1 card, slides by 100% */}

{posts.map((post) => (

))}

{/* Tablet: 2 cards visible, slides by 50% */}

{posts.map((post) => (

))}

{/* Desktop: 3 cards visible, slides by 33.333% */}

{posts.map((post) => (

))}

{posts.map((_, i) => (

{/* Mobile navigation */}

{/* Tablet navigation */}

{/* Desktop navigation */}

) } 51:T33b0,'use client' import { Button } from '@/components/ui/button' // Import types from shared types file to avoid circular dependencies import type { Post } from './types' // Re-export for backward compatibility export type { Post } from './types' import { demoPost } from './demo/blogging' /** * ═══════════════════════════════════════════════════════════════════════════ * PostCardProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for the PostCard component, a blog post card with multiple layout variants. */ export interface PostCardProps { data?: { /** The blog post to display. */ post?: Post } actions?: { /** Called when the read more button is clicked. */ onReadMore?: (post: Post) => void } appearance?: { /** * Card layout variant. * @default "default" */ variant?: 'default' | 'compact' | 'horizontal' | 'covered' /** * Whether to show the cover image. * @default true */ showImage?: boolean /** * Whether to show author information. * @default true */ showAuthor?: boolean /** * Whether to show the category label. * @default true */ showCategory?: boolean } } /** * A blog post card component with multiple layout variants. * Supports default, compact, horizontal, and covered (overlay) styles. * * Features: * - Four layout variants (default, compact, horizontal, covered) * - Cover image with hover zoom effect * - Author avatar and info display * - Category and tags display * - Read more action button * - Responsive design * * @component * @example * ```tsx * console.log("Read more:", post.title) * }} * appearance={{ * variant: "default", * showImage: true, * showAuthor: true, * showCategory: true * }} * /> * ``` */ export function PostCard({ data, actions, appearance }: PostCardProps) { const resolved: NonNullable = data ?? { post: demoPost } const post = resolved.post if (!post) { return null } const onReadMore = actions?.onReadMore const variant = appearance?.variant ?? 'default' const showImage = appearance?.showImage ?? true const showAuthor = appearance?.showAuthor ?? true const showCategory = appearance?.showCategory ?? true // Handle "Read more" click - only call callback if provided, otherwise do nothing // This lets users decide to use an external link or open fullscreen mode const handleReadMore = () => { if (onReadMore) { onReadMore(post) } } const formatDate = (dateStr: string) => { return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) } if (variant === 'covered') { return (

{post.coverImage ? (

) : (

)}

{/* Minimal overlay - solid color instead of gradient per ChatGPT guidelines */}

{showCategory && post.category && (

{post.category}

)} {post.title && (

{post.title}

)} {post.excerpt && (

{post.excerpt}

)} {post.tags && post.tags.length > 0 && (

{post.tags.slice(0, 2).map((tag) => ( {tag} ))}

)}

{showAuthor && (

{post.author?.avatar && (

)}

{post.author?.name && (

{post.author.name}

)} {post.publishedAt && (

{formatDate(post.publishedAt)}

)}

) } if (variant === 'horizontal') { return (

{showImage && post.coverImage && (

)}

{showCategory && post.category && (

{post.category}

)} {post.title && (

{post.title}

)} {post.excerpt && (

{post.excerpt}

)} {post.tags && post.tags.length > 0 && (

{post.tags.slice(0, 2).map((tag) => ( {tag} ))}

)}

{showAuthor && post.author?.avatar && (

)} {post.publishedAt && ( {formatDate(post.publishedAt)} )} {post.readTime && ( <> · {post.readTime} )}

) } if (variant === 'compact') { return (

{showCategory && post.category && (

{post.category}

)} {post.title && (

{post.title}

)} {post.excerpt && (

{post.excerpt}

)} {post.tags && post.tags.length > 0 && (

{post.tags.slice(0, 2).map((tag) => ( {tag} ))}

)}

{showAuthor && post.author?.avatar && (

)} {post.publishedAt && ( {formatDate(post.publishedAt)} )}

) } // Default variant return (

{showImage && post.coverImage && (

)}

{showCategory && post.category && (

{post.category}

)} {post.title && (

{post.title}

)} {post.excerpt && (

{post.excerpt}

)} {post.tags && post.tags.length > 0 && (

{post.tags.slice(0, 2).map((tag) => ( {tag} ))}

)}

{showAuthor && (

{post.author?.avatar && (

)}

{post.author?.name && (

{post.author.name}

)} {post.publishedAt && (

{formatDate(post.publishedAt)}

)}

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

{remainingTags.join(', ')}

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

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

{showCover && post?.coverImage && (

)}

{post?.category && (

{post.category}

)} {post?.title && (

{post.title}

)}

{post?.excerpt && (

{post.excerpt}

)} {post?.tags && post.tags.length > 0 && (

)}

{showAuthor && post?.author?.avatar && (

)} {showAuthor && post?.author?.name && {post.author.name}} {post?.publishedAt && ( {formatDate(post.publishedAt)} )} {post?.readTime && ( {post.readTime} )}

); } // PiP mode - horizontal layout with image on left, similar to post-card horizontal if (displayMode === 'pip') { return (

{showCover && post?.coverImage && (

)}

{post?.category && (

{post.category}

)} {post?.title && (

{post.title}

)} {post?.excerpt && (

{post.excerpt}

)} {post?.tags && post.tags.length > 0 && (

)}

{showAuthor && post?.author?.avatar && (

)} {showAuthor && post?.author?.name && {post.author.name}} {post?.publishedAt && ( {formatDate(post.publishedAt)} )} {post?.readTime && ( {post.readTime} )}

); } // Fullscreen mode return (

{showCover && post?.coverImage && (

)} {post?.category && (

{post.category}

)} {post?.title && (

{post.title}

)} {post?.tags && post.tags.length > 0 && (

)} {showAuthor && post?.author && (

{post.author.avatar && (

)}

{post.author.name &&

{post.author.name}

} {(post?.publishedAt || post?.readTime) && (

{post?.publishedAt && ( {formatDate(post.publishedAt)} )} {post?.readTime && ( {post.readTime} )}

)}

)} {/* Medium-style content */}

{post?.excerpt && (

{post.excerpt}

)} {content && (

)}

{relatedPosts && relatedPosts.length > 0 && (

{relatedPosts.map((related) => ( {related.coverImage && (

)}

{related.title &&

{related.title}

} {related.excerpt && (

{related.excerpt}

)} {related.readTime && (

{related.readTime}

)}

))}

)}

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

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.

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.

Key Features

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.

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.

`; // Related posts for PostDetail export const demoRelatedPosts: Post[] = [ { title: 'Designing for Conversational Interfaces', excerpt: 'Best practices for creating intuitive UI components that work within chat environments.', coverImage: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800', author: { name: 'Alex Rivera', avatar: 'https://i.pravatar.cc/150?u=alex' }, publishedAt: '2024-01-12', readTime: '8 min read', tags: ['Design', 'UX'], category: 'Design', url: 'https://example.com/posts/designing-conversational-interfaces', }, { title: 'MCP Integration Patterns', excerpt: 'How to leverage Model Context Protocol for seamless backend communication.', coverImage: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800', author: { name: 'Jordan Kim', avatar: 'https://i.pravatar.cc/150?u=jordan' }, publishedAt: '2024-01-10', readTime: '12 min read', tags: ['MCP', 'Backend'], category: 'Development', url: 'https://example.com/posts/mcp-integration-patterns', }, ]; // Full PostDetail demo data (combines post, content, and relatedPosts) export const demoPostDetailData = { post: { ...demoPost, tags: ['Tutorial', 'Components', 'AI', 'React', 'TypeScript'], }, content: demoPostContent, relatedPosts: demoRelatedPosts, }; // 15 posts for PostList default export const demoPosts: Post[] = [ { title: 'Getting Started with Agentic UI Components', excerpt: 'Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.', coverImage: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800', author: { name: 'Sarah Chen', avatar: 'https://i.pravatar.cc/150?u=sarah', }, publishedAt: '2024-01-15', readTime: '5 min read', tags: ['Tutorial', 'Components', 'AI'], category: 'Tutorial', }, { title: 'Designing for Conversational Interfaces with Manifest UI', excerpt: 'Best practices for creating intuitive UI components that work within chat environments.', coverImage: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800', author: { name: 'Alex Rivera', avatar: 'https://i.pravatar.cc/150?u=alex', }, publishedAt: '2024-01-12', readTime: '8 min read', tags: ['Design', 'UX'], category: 'Design', }, { title: 'MCP Integration Patterns', excerpt: 'How to leverage Model Context Protocol for seamless backend communication in your agentic applications.', coverImage: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800', author: { name: 'Jordan Kim', avatar: 'https://i.pravatar.cc/150?u=jordan', }, publishedAt: '2024-01-10', readTime: '12 min read', tags: ['MCP', 'Backend', 'Integration'], category: 'Development', }, { title: 'Building Payment Flows in Chat', excerpt: 'A complete guide to implementing secure, user-friendly payment experiences within conversational interfaces.', coverImage: 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=800', author: { name: 'Morgan Lee', avatar: 'https://i.pravatar.cc/150?u=morgan', }, publishedAt: '2024-01-08', readTime: '10 min read', tags: ['Payments', 'Security'], category: 'Tutorial', }, { title: 'Real-time Collaboration in AI Apps', excerpt: 'Implementing WebSocket connections and real-time updates for collaborative agentic experiences.', coverImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800', author: { name: 'Casey Taylor', avatar: 'https://i.pravatar.cc/150?u=casey', }, publishedAt: '2024-01-06', readTime: '15 min read', tags: ['WebSocket', 'Real-time', 'Collaboration'], category: 'Development', }, { title: 'Accessibility in Chat Interfaces', excerpt: 'Making your conversational UI accessible to all users with screen readers and keyboard navigation.', coverImage: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800', author: { name: 'Jamie Park', avatar: 'https://i.pravatar.cc/150?u=jamie', }, publishedAt: '2024-01-04', readTime: '9 min read', tags: ['Accessibility', 'A11y', 'UX'], category: 'Design', }, { title: 'State Management for Complex Workflows', excerpt: 'Managing complex multi-step workflows in agentic applications using modern state patterns.', coverImage: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800', author: { name: 'Drew Martinez', avatar: 'https://i.pravatar.cc/150?u=drew', }, publishedAt: '2024-01-02', readTime: '11 min read', tags: ['State', 'Workflow', 'Architecture'], category: 'Development', }, { title: 'Testing Conversational Components', excerpt: 'Strategies for unit testing and integration testing of chat-based UI components.', coverImage: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=800', author: { name: 'Riley Johnson', avatar: 'https://i.pravatar.cc/150?u=riley', }, publishedAt: '2023-12-30', readTime: '8 min read', tags: ['Testing', 'Quality', 'CI/CD'], category: 'Development', }, { title: 'Theming and Dark Mode Support', excerpt: 'Implementing flexible theming systems with dark mode for agentic UI components.', coverImage: 'https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=800', author: { name: 'Avery Williams', avatar: 'https://i.pravatar.cc/150?u=avery', }, publishedAt: '2023-12-28', readTime: '7 min read', tags: ['Theming', 'Dark Mode', 'CSS'], category: 'Design', }, { title: 'Performance Optimization Techniques', excerpt: 'Optimizing render performance and reducing bundle size in chat applications.', coverImage: 'https://images.unsplash.com/photo-1518173946687-a2e8a36af77a?w=800', author: { name: 'Quinn Anderson', avatar: 'https://i.pravatar.cc/150?u=quinn', }, publishedAt: '2023-12-25', readTime: '13 min read', tags: ['Performance', 'Optimization', 'React'], category: 'Development', }, { title: 'Error Handling and Recovery', excerpt: 'Graceful error handling patterns and user-friendly recovery flows in conversational UIs.', coverImage: 'https://images.unsplash.com/photo-1509316975850-ff9c5deb0cd9?w=800', author: { name: 'Sage Thompson', avatar: 'https://i.pravatar.cc/150?u=sage', }, publishedAt: '2023-12-22', readTime: '10 min read', tags: ['Error Handling', 'UX', 'Resilience'], category: 'Development', }, { title: 'Internationalization Best Practices', excerpt: 'Making your agentic UI components work across languages and locales.', coverImage: 'https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=800', author: { name: 'Blake Garcia', avatar: 'https://i.pravatar.cc/150?u=blake', }, publishedAt: '2023-12-20', readTime: '9 min read', tags: ['i18n', 'Localization', 'Global'], category: 'Design', }, { title: 'Mobile-First Chat Design', excerpt: 'Designing conversational interfaces that work beautifully on mobile devices.', coverImage: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=800', author: { name: 'Charlie Brown', avatar: 'https://i.pravatar.cc/150?u=charlie', }, publishedAt: '2023-12-18', readTime: '8 min read', tags: ['Mobile', 'Responsive', 'Design'], category: 'Design', }, { title: 'Analytics and User Insights', excerpt: 'Tracking user interactions and deriving insights from conversational UI usage.', coverImage: 'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=800', author: { name: 'Sydney Chen', avatar: 'https://i.pravatar.cc/150?u=sydney', }, publishedAt: '2023-12-15', readTime: '11 min read', tags: ['Analytics', 'Insights', 'Data'], category: 'Tutorial', }, { title: 'Building Reusable Component Libraries', excerpt: 'Creating a scalable component library for agentic UIs that teams can share.', coverImage: 'https://images.unsplash.com/photo-1465056836900-8f1e940f2114?w=800', author: { name: 'Taylor Swift', avatar: 'https://i.pravatar.cc/150?u=taylor', }, publishedAt: '2023-12-12', readTime: '14 min read', tags: ['Components', 'Library', 'Scalability'], category: 'Development', }, ]; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@manifest","registryDependencies":["button","tooltip","https://ui.manifest.build/r/manifest-types.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blogging/post-list.tsx","content":"$50","type":"registry:block","target":"components/ui/post-list.tsx"},{"path":"registry/blogging/post-card.tsx","content":"$51","type":"registry:block","target":"components/ui/post-card.tsx"},{"path":"registry/blogging/post-detail.tsx","content":"$52","type":"registry:block","target":"components/ui/post-detail.tsx"},{"path":"registry/blogging/demo/blogging.ts","content":"$53","type":"registry:lib","target":"components/ui/demo/blogging.ts"}],"className":"h-[70svh] min-h-80"}]]}]

{post.title}

{post.title}

{post.title}

{post.title}

{post.title}

{post.title}

{post.title}

Related Posts

Key Features