@contentgrowth/content-widget 1.3.4 → 1.3.5

package/dist/react/ContentList.js

@@ -4,12 +4,14 @@
  */
 import React, { useEffect, useState } from 'react';
 import { ContentGrowthClient } from '../core/client.js';
-import { formatDate, calculateReadingTime } from '../core/utils.js';
-export const ContentList = ({ apiKey, baseUrl, layout = 'cards', displayMode = 'comfortable', theme = 'light', pageSize = 12, tags = [], category, showPagination = true, linkPattern = '/articles/{uuid}', showTags = false, showAiSummary = true, summaryMaxLength, linkTarget, className = '' }) => {
+import { FeaturedCard } from './FeaturedCard.js';
+import { ContentCard } from './ContentCard.js';
+export const ContentList = ({ apiKey, baseUrl, layout = 'cards', displayMode = 'comfortable', displayAs = 'default', theme = 'light', pageSize = 12, tags = [], category, showPagination = true, linkPattern = '/articles/{uuid}', showTags = false, showAiSummary = true, summaryMaxLength, linkTarget, className = '' }) => {
     const [articles, setArticles] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [loading, setLoading] = useState(true);
+    const isFeaturedCardsMode = displayAs === 'featured-cards';
     useEffect(() => {
         const fetchArticles = async () => {
             setLoading(true);
@@ -73,27 +75,16 @@ export const ContentList = ({ apiKey, baseUrl, layout = 'cards', displayMode = '
             React.createElement("div", { className: "cg-empty-state" },
                 React.createElement("p", null, "Loading..."))));
     }
-    return (React.createElement("div", { className: `cg-content-list cg-layout-${layout} cg-display-${displayMode} cg-theme-${theme} ${className}`, "data-cg-widget": "list" }, articles.length === 0 ? (React.createElement("div", { className: "cg-empty-state" },
+    return (React.createElement("div", { className: `cg-content-list cg-layout-${layout} cg-display-${displayMode} cg-theme-${theme} ${isFeaturedCardsMode ? 'cg-featured-cards-list' : ''} ${className}`, "data-cg-widget": "list" }, articles.length === 0 ? (React.createElement("div", { className: "cg-empty-state" },
         React.createElement("p", null, "No articles found."))) : (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: `cg-articles-grid ${layout === 'cards' ? 'cg-grid' : 'cg-list'}` }, articles.map((article) => {
-            const articleUrl = buildArticleUrl(article);
+        React.createElement("div", { className: `cg-articles-grid ${isFeaturedCardsMode ? 'cg-featured-cards-grid' : (layout === 'cards' ? 'cg-grid' : 'cg-list')}` }, articles.map((article) => {
             const articleTarget = buildLinkTarget(article);
-            const readingTime = calculateReadingTime(article.wordCount);
-            const publishedDate = formatDate(article.publishedAt);
-            return (React.createElement("article", { key: article.uuid, className: "cg-article-card" },
-                React.createElement("a", { href: articleUrl, target: articleTarget, className: "cg-card-link" },
-                    React.createElement("div", { className: "cg-card-content" },
-                        article.category && (React.createElement("div", { className: "cg-card-category" },
-                            React.createElement("span", { className: "cg-category-badge" }, article.category))),
-                        React.createElement("h2", { className: "cg-card-title" }, article.title),
-                        showAiSummary && article.summary && (React.createElement("p", { className: "cg-card-summary" }, truncateSummary(article.summary, summaryMaxLength))),
-                        React.createElement("div", { className: "cg-card-meta" },
-                            React.createElement("span", { className: "cg-meta-author" }, article.authorName),
-                            React.createElement("span", { className: "cg-meta-separator" }, "\u2022"),
-                            React.createElement("time", { className: "cg-meta-date", dateTime: new Date(article.publishedAt * 1000).toISOString() }, publishedDate),
-                            React.createElement("span", { className: "cg-meta-separator" }, "\u2022"),
-                            React.createElement("span", { className: "cg-meta-reading-time" }, readingTime)),
-                        showTags && article.tags && article.tags.length > 0 && (React.createElement("div", { className: "cg-card-tags" }, article.tags.map((tag) => (React.createElement("span", { key: tag, className: "cg-tag" }, tag)))))))));
+            // Featured Cards Mode - Use FeaturedCard component
+            if (isFeaturedCardsMode) {
+                return (React.createElement(FeaturedCard, { key: article.uuid, article: article, linkPattern: linkPattern, linkTarget: articleTarget, showCategory: true }));
+            }
+            // Default Card Mode - Use ContentCard component
+            return (React.createElement(ContentCard, { key: article.uuid, article: article, linkPattern: linkPattern, linkTarget: articleTarget, showSummary: showAiSummary, summaryMaxLength: summaryMaxLength, showTags: showTags, showCategory: true }));
         })),
         showPagination && totalPages > 1 && (React.createElement("div", { className: "cg-pagination" },
             React.createElement("button", { className: "cg-pagination-btn", onClick: () => setCurrentPage(p => Math.max(1, p - 1)), disabled: currentPage === 1 }, "Previous"),

package/dist/react/FeaturedCard.d.ts

@@ -1,6 +1,18 @@
 import React from 'react';
-import type { FeaturedContentProps } from '../types';
-interface FeaturedCardProps extends Omit<FeaturedContentProps, 'showBackButton' | 'backUrl' | 'showAiSummary' | 'showTags'> {
+import type { FeaturedContentProps, ArticleWithContent, Article } from '../types';
+interface FeaturedCardProps extends Partial<Omit<FeaturedContentProps, 'showBackButton' | 'backUrl' | 'showAiSummary' | 'showTags'>> {
+    /**
+     * Pre-loaded article data (bypasses API fetch - used by ContentList)
+     */
+    article?: Article | ArticleWithContent;
+    /**
+     * Load specific article by slug (bypasses category/tags search)
+     */
+    slug?: string;
+    /**
+     * Load specific article by UUID (bypasses category/tags search)
+     */
+    uuid?: string;
     /**
      * URL pattern for the article link
      * Supports placeholders: {uuid}, {slug}, {category}

package/dist/react/FeaturedCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturedCard.d.ts","sourceRoot":"","sources":["../../src/react/FeaturedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,oBAAoB,EAAsB,MAAM,UAAU,CAAC;AAEzE,UAAU,iBAAkB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IACvH;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEzC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8IpD,CAAC"}
+{"version":3,"file":"FeaturedCard.d.ts","sourceRoot":"","sources":["../../src/react/FeaturedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAElF,UAAU,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC;IAChI;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAEvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEzC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0KpD,CAAC"}

package/dist/react/FeaturedCard.js

@@ -1,31 +1,54 @@
 import React, { useEffect, useState } from 'react';
 import { marked } from 'marked';
 import { ContentGrowthClient } from '../core/client';
-export const FeaturedCard = ({ apiKey, baseUrl, tags = [], category, excludeTags = [], showCategory = true, showReadingTime = false, showAuthor = false, ctaText: propCtaText, linkPattern = '/articles/{slug}', linkTarget, layout: propLayout, borderStyle = 'none', borderColor = '#e5e7eb', cardBackground = 'none', itemsBackground = '#f3f4f6', className = '' }) => {
-    const [article, setArticle] = useState(null);
-    const [loading, setLoading] = useState(true);
+export const FeaturedCard = ({ apiKey, baseUrl, article: providedArticle, slug, uuid, tags = [], category, excludeTags = [], showCategory = true, showReadingTime = false, showAuthor = false, ctaText: propCtaText, linkPattern = '/articles/{slug}', linkTarget, layout: propLayout, borderStyle = 'none', borderColor = '#e5e7eb', cardBackground = 'none', itemsBackground = '#f3f4f6', className = '' }) => {
+    const [article, setArticle] = useState(providedArticle || null);
+    const [loading, setLoading] = useState(!providedArticle);
     const [error, setError] = useState(null);
     useEffect(() => {
+        // If article is provided, use it directly (no fetch needed)
+        if (providedArticle) {
+            setArticle(providedArticle);
+            setLoading(false);
+            return;
+        }
+        // Need API key to fetch
+        if (!apiKey) {
+            setLoading(false);
+            return;
+        }
         const fetchArticle = async () => {
             setLoading(true);
             try {
                 const client = new ContentGrowthClient({ apiKey, baseUrl });
-                const fetchedArticle = await client.getFeaturedArticle({
-                    tags,
-                    category,
-                    excludeTags
-                });
+                let fetchedArticle;
+                if (uuid) {
+                    // Mode 2: Load by UUID
+                    fetchedArticle = await client.getArticle(uuid, { excludeTags });
+                }
+                else if (slug) {
+                    // Mode 3: Load by slug
+                    fetchedArticle = await client.getArticleBySlug(slug, { excludeTags });
+                }
+                else {
+                    // Mode 4: Find featured article by category/tags (original behavior)
+                    fetchedArticle = await client.getFeaturedArticle({
+                        tags,
+                        category,
+                        excludeTags
+                    });
+                }
                 setArticle(fetchedArticle);
             }
             catch (err) {
-                setError(err instanceof Error ? err.message : 'Failed to load featured article');
+                setError(err instanceof Error ? err.message : 'Failed to load article');
             }
             finally {
                 setLoading(false);
             }
         };
         fetchArticle();
-    }, [apiKey, baseUrl, category, JSON.stringify(tags), JSON.stringify(excludeTags)]);
+    }, [apiKey, baseUrl, providedArticle, uuid, slug, category, JSON.stringify(tags), JSON.stringify(excludeTags)]);
     // Generate article URL
     const getArticleUrl = (article) => {
         return linkPattern
@@ -48,10 +71,10 @@ export const FeaturedCard = ({ apiKey, baseUrl, tags = [], category, excludeTags
         return (React.createElement("div", { className: `cg-widget cg-error ${className}` }, error || 'No featured content found'));
     }
     const summaryHtml = getSummaryHtml(article);
-    // Explicitly use any to access dynamic properties until types are fully updated
-    const layout = propLayout || article.featuredSummaryLayout || 'standard';
+    const layout = propLayout || article.featuredSummaryLayout || 'vertical';
     const readingTime = Math.ceil(article.wordCount / 200);
     const borderClass = borderStyle !== 'none' ? `cg-border-${borderStyle}` : '';
+    const layoutClass = layout !== 'vertical' ? `cg-layout-${layout}` : '';
     // Use ctaText from prop, or from article data, or fallback to default
     const ctaText = propCtaText || article.featuredCtaText || 'Read full story';
     const customStyles = {};
@@ -61,7 +84,7 @@ export const FeaturedCard = ({ apiKey, baseUrl, tags = [], category, excludeTags
         customStyles['--cg-card-bg'] = cardBackground;
     if (itemsBackground !== '#f3f4f6')
         customStyles['--cg-items-bg'] = itemsBackground;
-    return (React.createElement("a", { href: getArticleUrl(article), className: `cg-widget cg-featured-card ${className} ${layout !== 'standard' ? `cg-layout-${layout}` : ''} ${borderClass}`, style: Object.keys(customStyles).length > 0 ? customStyles : undefined, "data-cg-widget": "featured-card", target: linkTarget, rel: linkTarget === '_blank' ? 'noopener noreferrer' : undefined },
+    return (React.createElement("a", { href: getArticleUrl(article), className: `cg-widget cg-featured-card ${className} ${layoutClass} ${borderClass}`, style: Object.keys(customStyles).length > 0 ? customStyles : undefined, "data-cg-widget": "featured-card", target: linkTarget, rel: linkTarget === '_blank' ? 'noopener noreferrer' : undefined },
         React.createElement("article", { className: "cg-featured-card-inner" },
             showCategory && article.category && (React.createElement("div", { className: "cg-featured-card-category" },
                 React.createElement("span", { className: "cg-category-badge" }, article.category))),

package/dist/react/index.d.ts

@@ -5,7 +5,9 @@ export { ContentList } from './ContentList.js';
 export { ContentViewer } from './ContentViewer.js';
 export { FeaturedContent } from './FeaturedContent.js';
 export { FeaturedCard } from './FeaturedCard.js';
+export { ContentCard } from './ContentCard.js';
 export * from './hooks.js';
 export type { ReactContentListProps } from './ContentList.js';
 export type { ReactContentViewerProps } from './ContentViewer.js';
+export type { ContentCardProps } from './ContentCard.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC9D,YAAY,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC9D,YAAY,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAClE,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/react/index.js

@@ -5,4 +5,5 @@ export { ContentList } from './ContentList.js';
 export { ContentViewer } from './ContentViewer.js';
 export { FeaturedContent } from './FeaturedContent.js';
 export { FeaturedCard } from './FeaturedCard.js';
+export { ContentCard } from './ContentCard.js';
 export * from './hooks.js';

package/dist/styles.css

@@ -720,10 +720,27 @@ a.cg-card {
   margin-bottom: 2rem;
 }
 
+/* Featured Cards Grid for displayAs="featured-cards" */
+.cg-articles-grid.cg-featured-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.cg-articles-grid.cg-featured-cards-grid .cg-featured-card {
+  height: 100%;
+}
+
 @media (max-width: 768px) {
   .cg-articles-grid.cg-grid {
     grid-template-columns: 1fr;
   }
+
+  .cg-articles-grid.cg-featured-cards-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
 }
 
 /* Article Card */

package/dist/types/index.d.ts

@@ -13,6 +13,8 @@ export interface Article {
     publishedAt: number;
     summary: string | null;
     featuredSummary: string | null;
+    featuredSummaryLayout?: 'vertical' | 'horizontal';
+    featuredCtaText?: string;
     tags: string[];
     wordCount: number;
 }
@@ -126,6 +128,10 @@ export type DisplayMode = 'compact' | 'comfortable' | 'spacious';
  * Theme mode
  */
 export type Theme = 'light' | 'dark';
+/**
+ * Display style for content list
+ */
+export type DisplayAs = 'default' | 'featured-cards';
 /**
  * Component props for ContentList
  */
@@ -149,6 +155,13 @@ export interface ContentListProps {
      * @default 'comfortable'
      */
     displayMode?: DisplayMode;
+    /**
+     * Display style - how to render each article
+     * 'default' = standard card/row layout
+     * 'featured-cards' = FeaturedCard style with summary and CTA
+     * @default 'default'
+     */
+    displayAs?: DisplayAs;
     /**
      * Theme
      * @default 'light'

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qBAAqB,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,OAAO;IACjD,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,QAAQ,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAEvB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,MAAM,CAAC;IACrF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,IAAI,EAAE,CAAC,CAAC;IACR,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK;IAGlC,UAAU,CAAC,EAAE,MAAM;IACnB,QAAQ,CAAC,EAAE,GAAG;gBAFrB,OAAO,EAAE,MAAM,EACR,UAAU,CAAC,EAAE,MAAM,YAAA,EACnB,QAAQ,CAAC,EAAE,GAAG,YAAA;CAKxB"}

package/dist/vue/ContentCard.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from 'vue';
+import { ContentGrowthClient } from '../core/client';
+import { formatDate, calculateReadingTime } from '../core/utils';
+import type { Article, ArticleWithContent } from '../types';
+
+const props = withDefaults(defineProps<{
+  // Pre-loaded article data (bypasses API fetch)
+  article?: Article | ArticleWithContent;
+  // Load specific article by slug
+  slug?: string;
+  // Load specific article by UUID
+  uuid?: string;
+  // API config (required if fetching)
+  apiKey?: string;
+  baseUrl?: string;
+  // Display options
+  linkPattern?: string;
+  linkTarget?: string;
+  showSummary?: boolean;
+  summaryMaxLength?: number;
+  showTags?: boolean;
+  showCategory?: boolean;
+  className?: string;
+}>(), {
+  linkPattern: '/articles/{slug}',
+  showSummary: true,
+  showTags: false,
+  showCategory: true,
+  className: ''
+});
+
+const loadedArticle = ref<Article | ArticleWithContent | null>(props.article || null);
+const loading = ref(!props.article && !!(props.apiKey && (props.slug || props.uuid)));
+const error = ref<string | null>(null);
+
+// Watch for provided article prop changes
+watch(() => props.article, (newArticle) => {
+  if (newArticle) {
+    loadedArticle.value = newArticle;
+    loading.value = false;
+  }
+}, { immediate: true });
+
+// Generate article URL
+const articleUrl = computed(() => {
+  if (!loadedArticle.value) return '#';
+  return props.linkPattern
+    .replace('{uuid}', loadedArticle.value.uuid || '')
+    .replace('{slug}', loadedArticle.value.slug || loadedArticle.value.uuid || '')
+    .replace('{category}', loadedArticle.value.category || 'uncategorized');
+});
+
+// Truncate summary text
+const truncateSummary = (text: string | null, maxLength?: number): string => {
+  if (!text) return '';
+  if (!maxLength || text.length <= maxLength) return text;
+  return text.substring(0, maxLength).trim() + '...';
+};
+
+const readingTime = computed(() => {
+  if (!loadedArticle.value) return '';
+  return calculateReadingTime(loadedArticle.value.wordCount);
+});
+
+const publishedDate = computed(() => {
+  if (!loadedArticle.value) return '';
+  return formatDate(loadedArticle.value.publishedAt);
+});
+
+const publishedDateTime = computed(() => {
+  if (!loadedArticle.value) return '';
+  return new Date(loadedArticle.value.publishedAt * 1000).toISOString();
+});
+
+onMounted(async () => {
+  // If article is already provided, no need to fetch
+  if (props.article) {
+    loadedArticle.value = props.article;
+    loading.value = false;
+    return;
+  }
+
+  // Need API key and identifier to fetch
+  if (!props.apiKey || (!props.slug && !props.uuid)) {
+    loading.value = false;
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const client = new ContentGrowthClient({ 
+      apiKey: props.apiKey, 
+      baseUrl: props.baseUrl 
+    });
+
+    if (props.uuid) {
+      loadedArticle.value = await client.getArticle(props.uuid);
+    } else if (props.slug) {
+      loadedArticle.value = await client.getArticleBySlug(props.slug);
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to load article';
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div v-if="loading" class="cg-widget cg-loading" :class="className">
+    <div class="cg-spinner"></div>
+  </div>
+
+  <div v-else-if="error" class="cg-widget cg-error" :class="className">
+    {{ error }}
+  </div>
+
+  <article v-else-if="loadedArticle" class="cg-article-card" :class="className">
+    <a :href="articleUrl" :target="linkTarget" class="cg-card-link">
+      <div class="cg-card-content">
+        <div v-if="showCategory && loadedArticle.category" class="cg-card-category">
+          <span class="cg-category-badge">{{ loadedArticle.category }}</span>
+        </div>
+        
+        <h2 class="cg-card-title">{{ loadedArticle.title }}</h2>
+        
+        <p v-if="showSummary && loadedArticle.summary" class="cg-card-summary">
+          {{ truncateSummary(loadedArticle.summary, summaryMaxLength) }}
+        </p>
+        
+        <div class="cg-card-meta">
+          <span class="cg-meta-author">{{ loadedArticle.authorName }}</span>
+          <span class="cg-meta-separator">•</span>
+          <time class="cg-meta-date" :datetime="publishedDateTime">
+            {{ publishedDate }}
+          </time>
+          <span class="cg-meta-separator">•</span>
+          <span class="cg-meta-reading-time">{{ readingTime }}</span>
+        </div>
+        
+        <div v-if="showTags && loadedArticle.tags && loadedArticle.tags.length > 0" class="cg-card-tags">
+          <span v-for="tag in loadedArticle.tags" :key="tag" class="cg-tag">{{ tag }}</span>
+        </div>
+      </div>
+    </a>
+  </article>
+</template>

package/dist/vue/ContentList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="`cg-content-list cg-layout-${layout} cg-display-${displayMode} cg-theme-${theme} ${className}`"
+    :class="`cg-content-list cg-layout-${layout} cg-display-${displayMode} cg-theme-${theme} ${isFeaturedCardsMode ? 'cg-featured-cards-list' : ''} ${className}`"
     data-cg-widget="list"
   >
     <div v-if="loading" class="cg-empty-state">
@@ -10,36 +10,33 @@
       <p>No articles found.</p>
     </div>
     <template v-else>
-      <div :class="`cg-articles-grid ${layout === 'cards' ? 'cg-grid' : 'cg-list'}`">
-        <article v-for="article in articles" :key="article.uuid" class="cg-article-card">
-          <a :href="buildArticleUrl(article)" :target="buildLinkTarget(article)" class="cg-card-link">
-            <div class="cg-card-content">
-              <div v-if="article.category" class="cg-card-category">
-                <span class="cg-category-badge">{{ article.category }}</span>
-              </div>
-              
-              <h2 class="cg-card-title">{{ article.title }}</h2>
-              
-              <p v-if="showAiSummary && article.summary" class="cg-card-summary">
-                {{ truncateSummary(article.summary, summaryMaxLength) }}
-              </p>
-              
-              <div class="cg-card-meta">
-                <span class="cg-meta-author">{{ article.authorName }}</span>
-                <span class="cg-meta-separator">•</span>
-                <time class="cg-meta-date" :datetime="new Date(article.publishedAt * 1000).toISOString()">
-                  {{ formatDate(article.publishedAt) }}
-                </time>
-                <span class="cg-meta-separator">•</span>
-                <span class="cg-meta-reading-time">{{ calculateReadingTime(article.wordCount) }}</span>
-              </div>
-              
-              <div v-if="showTags && article.tags && article.tags.length > 0" class="cg-card-tags">
-                <span v-for="tag in article.tags" :key="tag" class="cg-tag">{{ tag }}</span>
-              </div>
-            </div>
-          </a>
-        </article>
+      <div :class="`cg-articles-grid ${isFeaturedCardsMode ? 'cg-featured-cards-grid' : (layout === 'cards' ? 'cg-grid' : 'cg-list')}`">
+        <!-- Featured Cards Mode -->
+        <template v-if="isFeaturedCardsMode">
+          <FeaturedCard
+            v-for="article in articles"
+            :key="article.uuid"
+            :article="article"
+            :linkPattern="linkPattern"
+            :linkTarget="buildLinkTarget(article)"
+            :showCategory="true"
+          />
+        </template>
+
+        <!-- Default Card Mode - Use ContentCard component -->
+        <template v-else>
+          <ContentCard
+            v-for="article in articles"
+            :key="article.uuid"
+            :article="article"
+            :linkPattern="linkPattern"
+            :linkTarget="buildLinkTarget(article)"
+            :showSummary="showAiSummary"
+            :summaryMaxLength="summaryMaxLength"
+            :showTags="showTags"
+            :showCategory="true"
+          />
+        </template>
       </div>
 
       <div v-if="showPagination && totalPages > 1" class="cg-pagination">
@@ -68,9 +65,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
 import { ContentGrowthClient } from '../core/client.js';
-import { formatDate, calculateReadingTime } from '../core/utils.js';
+import FeaturedCard from './FeaturedCard.vue';
+import ContentCard from './ContentCard.vue';
 import type { ContentListProps, Article } from '../types/index.js';
 
 export interface VueContentListProps extends Omit<ContentListProps, 'class'> {
@@ -80,6 +78,7 @@ export interface VueContentListProps extends Omit<ContentListProps, 'class'> {
 const props = withDefaults(defineProps<VueContentListProps>(), {
   layout: 'cards',
   displayMode: 'comfortable',
+  displayAs: 'default',
   theme: 'light',
   pageSize: 12,
   tags: () => [],
@@ -95,6 +94,8 @@ const currentPage = ref(1);
 const totalPages = ref(1);
 const loading = ref(true);
 
+const isFeaturedCardsMode = computed(() => props.displayAs === 'featured-cards');
+
 const fetchArticles = async () => {
   loading.value = true;
   try {
@@ -171,3 +172,4 @@ watch(
   }
 );
 </script>
+