@feedlog-ai/webcomponents 0.0.20 → 0.0.22

package/dist/collection/components/feedlog-github-issues/feedlog-github-issues.css

@@ -1,7 +1,8 @@
 :host {
   display: block;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-  
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
   /* Light theme defaults */
   --feedlog-background: #ffffff;
   --feedlog-foreground: oklch(0.145 0 0);
@@ -21,25 +22,34 @@
   --feedlog-radius: 0.625rem;
   --feedlog-gap: 0.5rem;
   --feedlog-padding: 2rem;
+  --feedlog-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
+  --feedlog-empty-illustration-bg: oklch(0.96 0.01 260);
+  --feedlog-empty-illustration-stroke: oklch(0.75 0.02 260);
+  --feedlog-empty-illustration-muted: oklch(0.82 0.01 260);
 }
 
 :host(.dark) {
   /* Dark theme values */
-  --feedlog-background: oklch(0.145 0 0);
+  --feedlog-background: oklch(0.18 0.01 260);
   --feedlog-foreground: oklch(0.985 0 0);
-  --feedlog-card: oklch(0.145 0 0);
+  --feedlog-card: oklch(0.24 0.01 260);
   --feedlog-card-foreground: oklch(0.985 0 0);
-  --feedlog-muted: oklch(0.269 0 0);
-  --feedlog-muted-foreground: oklch(0.708 0 0);
-  --feedlog-border: oklch(0.269 0 0);
+  --feedlog-muted: oklch(0.32 0.01 260);
+  --feedlog-muted-foreground: oklch(0.72 0.02 260);
+  --feedlog-border: oklch(0.34 0.01 260);
   --feedlog-accent-color: #3b82f6;
   --feedlog-destructive: oklch(0.396 0.141 25.723);
   --feedlog-blue-400: oklch(0.707 0.165 254.624);
   --feedlog-blue-600: oklch(0.546 0.245 262.881);
   --feedlog-blue-900-30: color-mix(in oklab, oklch(0.379 0.146 265.522) 30%, transparent);
   --feedlog-red-900-30: color-mix(in oklab, oklch(0.396 0.141 25.723) 30%, transparent);
+  --feedlog-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+  --feedlog-empty-illustration-bg: oklch(0.28 0.02 260);
+  --feedlog-empty-illustration-stroke: oklch(0.45 0.02 260);
+  --feedlog-empty-illustration-muted: oklch(0.38 0.02 260);
 }
 
+
 .github-issues-container {
   min-height: 100vh;
   background-color: var(--feedlog-background);
@@ -72,15 +82,165 @@
   margin: 0;
 }
 
-.loading-state,
+.loading-state {
+  padding: 0;
+}
+
+.loading-skeletons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--feedlog-gap);
+}
+
+.skeleton-card {
+  background-color: var(--feedlog-card);
+  border: 1px solid var(--feedlog-border);
+  border-radius: var(--feedlog-radius);
+  box-shadow: var(--feedlog-shadow);
+  position: relative;
+  overflow: hidden;
+}
+
+.skeleton-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--feedlog-muted);
+}
+
+.skeleton-content {
+  padding: 1.25rem;
+  padding-left: calc(1.25rem + 3px);
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.skeleton-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.skeleton-badge {
+  width: 4.5rem;
+  height: 1.25rem;
+  border-radius: 0.375rem;
+  background-color: var(--feedlog-muted);
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.skeleton-timestamp {
+  width: 3rem;
+  height: 0.75rem;
+  border-radius: 0.25rem;
+  background-color: var(--feedlog-muted);
+  animation: skeleton-pulse 1.5s ease-in-out infinite 0.2s;
+}
+
+.skeleton-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.skeleton-title {
+  height: 0.9375rem;
+  border-radius: 0.25rem;
+  background-color: var(--feedlog-muted);
+  animation: skeleton-pulse 1.5s ease-in-out infinite 0.1s;
+  width: 85%;
+}
+
+.skeleton-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.skeleton-line {
+  height: 0.8125rem;
+  border-radius: 0.25rem;
+  background-color: var(--feedlog-muted);
+  animation: skeleton-pulse 1.5s ease-in-out infinite 0.15s;
+  width: 100%;
+}
+
+.skeleton-line.short {
+  width: 70%;
+}
+
+.skeleton-repo {
+  width: 6rem;
+  height: 0.75rem;
+  border-radius: 0.25rem;
+  background-color: var(--feedlog-muted);
+  animation: skeleton-pulse 1.5s ease-in-out infinite 0.25s;
+}
+
+.skeleton-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.skeleton-upvote {
+  width: 2.5rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  background-color: var(--feedlog-muted);
+  animation: skeleton-pulse 1.5s ease-in-out infinite 0.3s;
+}
+
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
 .error-state {
-  padding: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 2rem;
+  min-height: 12rem;
+}
+
+.error-state-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
+  max-width: 20rem;
+  padding: 2rem;
+}
+
+.error-icon {
   color: var(--feedlog-muted-foreground);
+  opacity: 0.8;
+  margin-bottom: 1rem;
 }
 
-.error-state {
-  color: var(--feedlog-destructive);
+.error-state-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--feedlog-foreground);
+  line-height: 1.4;
+}
+
+.error-state-message {
+  margin: 0 0 1.25rem 0;
+  font-size: 0.875rem;
+  color: var(--feedlog-muted-foreground);
+  line-height: 1.5;
 }
 
 .issues-list {
@@ -90,10 +250,39 @@
 }
 
 .empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  min-height: 16rem;
+}
+
+.empty-state-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
-  padding: 3rem 1.5rem;
-  color: var(--feedlog-muted-foreground);
+  max-width: 20rem;
+}
+
+.empty-state-illustration {
+  margin-bottom: 1.5rem;
+  opacity: 0.9;
+}
+
+.empty-state-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--feedlog-foreground);
+  line-height: 1.4;
+}
+
+.empty-state-message {
+  margin: 0;
   font-size: 0.875rem;
+  color: var(--feedlog-muted-foreground);
+  line-height: 1.5;
 }
 
 .load-more-container {

package/dist/collection/components/feedlog-github-issues/feedlog-github-issues.js

@@ -50,14 +50,24 @@ export class FeedlogGithubIssues {
     componentWillLoad() {
         this.currentTheme = this.theme;
     }
+    renderEmptyStateIllustration() {
+        return (h("svg", { class: "empty-state-illustration", xmlns: "http://www.w3.org/2000/svg", width: "120", height: "96", viewBox: "0 0 120 96", fill: "none", "aria-hidden": "true" }, h("path", { d: "M20 36h80v44c0 4.4-3.6 8-8 8H28c-4.4 0-8-3.6-8-8V36z", fill: "var(--feedlog-empty-illustration-bg)", stroke: "var(--feedlog-empty-illustration-stroke)", "stroke-width": "1.5", "stroke-linejoin": "round" }), h("path", { d: "M20 36l20-24h40l20 24", fill: "none", stroke: "var(--feedlog-empty-illustration-stroke)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M44 52h32M44 60h24M44 68h28", stroke: "var(--feedlog-empty-illustration-muted)", "stroke-width": "1.25", "stroke-linecap": "round" })));
+    }
+    renderErrorIcon() {
+        return (h("svg", { class: "error-icon", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), h("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })));
+    }
     renderIssuesList() {
-        return (h("div", { class: "issues-list" }, this.issues.length === 0 ? (h("div", { class: "empty-state" }, h("p", null, "No issues found"))) : (this.issues.map(issue => (h("feedlog-issue", { key: issue.id, issue: issue, theme: this.currentTheme, onFeedlogUpvote: (e) => this.handleUpvote(e) }))))));
+        var _a, _b;
+        return (h("div", { class: "issues-list" }, this.issues.length === 0 ? (h("div", { class: "empty-state" }, h("div", { class: "empty-state-content" }, this.renderEmptyStateIllustration(), h("h2", { class: "empty-state-title" }, (_a = this.emptyStateTitle) !== null && _a !== void 0 ? _a : 'No updates yet'), h("p", { class: "empty-state-message" }, (_b = this.emptyStateMessage) !== null && _b !== void 0 ? _b : 'Check back later for new updates.')))) : (this.issues.map(issue => {
+            var _a, _b;
+            return (h("feedlog-issue", { key: issue.id, issue: issue, issueUrl: (_b = (_a = this.getIssueUrl) === null || _a === void 0 ? void 0 : _a.call(this, issue)) !== null && _b !== void 0 ? _b : undefined, theme: this.currentTheme, onFeedlogUpvote: (e) => this.handleUpvote(e) }));
+        }))));
     }
     render() {
         const containerStyle = {
             maxWidth: this.maxWidth,
         };
-        return (h(Host, { key: '3d3f6aaaf7efc9bf81476e1ff793d68a8fc46db1', class: this.currentTheme === 'dark' ? 'dark' : '' }, h("div", { key: 'b3114878ce3b649bb1dbec9eb2502bad2c2dfe27', class: "github-issues-container", style: containerStyle }, (this.heading || this.subtitle) && (h("header", { key: '3effa7137e3138b8709f12442beaaf58f7873e91', class: "issues-header" }, h("div", { key: '7904676ced41f4c738c265a571d2a447155f13f3', class: "header-content" }, this.heading && h("h1", { key: 'f139c2087642ede74542be0064273d92f27938d7', class: "issues-title" }, this.heading), this.subtitle && h("p", { key: 'c3af89d4abfb48ba225f362031705a14833f0ab7', class: "issues-subtitle" }, this.subtitle)))), this.loading && (h("div", { key: '1ed8c88a52808bbfb3a1ac86c9535cb87f32773a', class: "loading-state" }, h("p", { key: 'd093c2edcfaba2c136c6915bfe183f7e8f25de8b' }, "Loading issues..."))), this.error && (h("div", { key: '05ab37ee5c061a321fc7a8c407af04cae269f304', class: "error-state" }, h("p", { key: '7388ef1b66265953f30b65618f2b96c519702bdb' }, "Error: ", this.error))), !this.loading && !this.error && (h("div", { key: '5968b7ad6c13c7d0edf0a497eb51bd88978def9c' }, this.renderIssuesList(), this.hasMore && (h("div", { key: '7cfe136735f497f239a5be2befa6c3add99c7bcb', class: "load-more-container" }, h("feedlog-button", { key: '6fcdaf69873d51518d58baa9c3f8dba8a705ad5f', onFeedlogClick: this.handleLoadMore, disabled: this.isLoadingMore, variant: "outline" }, this.isLoadingMore ? 'Loading...' : 'Load More Issues'))))))));
+        return (h(Host, { key: 'fbd1890061b47db8b850a8d993e2ac5432c4b3f6', class: this.currentTheme === 'dark' ? 'dark' : '' }, h("div", { key: '5ce9267da314ebb69ed8ee00f28015fdad73ab8a', class: "github-issues-container", style: containerStyle }, (this.heading || this.subtitle) && (h("header", { key: '461c707df1e5dc7eaab15462de975fafdce872df', class: "issues-header" }, h("div", { key: 'e6972c2f0cfe5630cc73fb41a2103c9b0118179c', class: "header-content" }, this.heading && h("h1", { key: 'd74e89c1ad981da6c4287e5b75256bfb831f1172', class: "issues-title" }, this.heading), this.subtitle && h("p", { key: 'c820d8e3beaa57c0c193ceaace1d13e94a2a6290', class: "issues-subtitle" }, this.subtitle)))), this.loading && (h("div", { key: '959be24cb77b257fba5197302448f78af553817e', class: "loading-state", role: "status", "aria-label": "Loading issues" }, h("div", { key: 'e69594f18e3268208634a3ad82cb2ae0bc552c11', class: "loading-skeletons" }, [1, 2, 3].map(i => (h("div", { key: i, class: "skeleton-card" }, h("div", { class: "skeleton-content" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-badge" }), h("div", { class: "skeleton-timestamp" })), h("div", { class: "skeleton-main" }, h("div", { class: "skeleton-title" }), h("div", { class: "skeleton-body" }, h("div", { class: "skeleton-line" }), h("div", { class: "skeleton-line short" })), h("div", { class: "skeleton-repo" })), h("div", { class: "skeleton-footer" }, h("div", { class: "skeleton-upvote" }))))))))), this.error && (h("div", { key: '93e82b0beca0b96c23803b1abfc3d50fe099fa6a', class: "error-state", role: "alert" }, h("div", { key: '9276d85925d02bd4c81d5ee44a5d6a8af986c4c9', class: "error-state-content" }, this.renderErrorIcon(), h("h2", { key: '6f5762740f908712a46cddeafae675294d3bcc40', class: "error-state-title" }, "Something went wrong"), h("p", { key: 'f1587bd9a2abe250aa730d64498a5105a412d657', class: "error-state-message" }, this.error)))), !this.loading && !this.error && (h("div", { key: '22c68553352358a9a408ea763af1e63c9c84eabd' }, this.renderIssuesList(), this.hasMore && (h("div", { key: '231ec6f4680b4b114ba72c657f9801d84951a6d6', class: "load-more-container" }, h("feedlog-button", { key: '18fa475708fe233f3f9d0ec85bf0f8daea9a4a0a', onFeedlogClick: this.handleLoadMore, disabled: this.isLoadingMore, variant: "outline" }, this.isLoadingMore ? 'Loading...' : 'Load More Issues'))))))));
     }
     static get is() { return "feedlog-github-issues"; }
     static get encapsulation() { return "shadow"; }
@@ -175,6 +185,44 @@ export class FeedlogGithubIssues {
                 "reflect": false,
                 "attribute": "subtitle"
             },
+            "emptyStateTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty state title. Defaults to \"No updates yet\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-state-title"
+            },
+            "emptyStateMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty state message. Defaults to \"Check back later for new updates.\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-state-message"
+            },
             "loading": {
                 "type": "boolean",
                 "mutable": false,
@@ -254,6 +302,29 @@ export class FeedlogGithubIssues {
                 "reflect": false,
                 "attribute": "is-loading-more",
                 "defaultValue": "false"
+            },
+            "getIssueUrl": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "GetIssueUrlFn",
+                    "resolved": "((issue: FeedlogIssue) => string | null | undefined) | undefined",
+                    "references": {
+                        "GetIssueUrlFn": {
+                            "location": "import",
+                            "path": "@feedlog-ai/core",
+                            "id": "../core/dist/index.d.ts::GetIssueUrlFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional callback to resolve GitHub issue URL when githubIssueLink is not available.\nRequired because repository.owner was removed from the API for privacy."
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

package/dist/collection/components/feedlog-github-issues/feedlog-github-issues.stories.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 const sampleIssues = [
     {
         id: 'issue-1',
+        githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/24',
         title: 'Add dark mode support',
         body: 'It would be great to have a dark mode option for the dashboard.',
         type: 'enhancement',
@@ -11,7 +12,7 @@ const sampleIssues = [
         repository: {
             id: 'repo-1',
             name: 'feedlog-toolkit',
-            owner: 'feedlog',
+            description: 'Monorepo for Feedlog Toolkit',
         },
         updatedAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), // 2 hours ago
         createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
@@ -20,6 +21,7 @@ const sampleIssues = [
     },
     {
         id: 'issue-2',
+        githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/15',
         title: 'Charts not rendering on mobile',
         body: 'The chart components are not properly responsive on smaller screens.',
         type: 'bug',
@@ -29,7 +31,7 @@ const sampleIssues = [
         repository: {
             id: 'repo-1',
             name: 'feedlog-toolkit',
-            owner: 'feedlog',
+            description: 'Monorepo for Feedlog Toolkit',
         },
         updatedAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(), // 5 hours ago
         createdAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(),
@@ -38,6 +40,7 @@ const sampleIssues = [
     },
     {
         id: 'issue-3',
+        githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/8',
         title: 'Export data to CSV',
         body: 'Add functionality to export chart data as CSV files.',
         type: 'enhancement',
@@ -47,7 +50,7 @@ const sampleIssues = [
         repository: {
             id: 'repo-1',
             name: 'feedlog-toolkit',
-            owner: 'feedlog',
+            description: 'Monorepo for Feedlog Toolkit',
         },
         updatedAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), // 1 day ago
         createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
@@ -56,6 +59,7 @@ const sampleIssues = [
     },
     {
         id: 'issue-4',
+        githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/12',
         title: 'Memory leak in real-time updates',
         body: 'When leaving the dashboard open for extended periods, memory usage increases significantly.',
         type: 'bug',
@@ -65,7 +69,7 @@ const sampleIssues = [
         repository: {
             id: 'repo-1',
             name: 'feedlog-toolkit',
-            owner: 'feedlog',
+            description: 'Monorepo for Feedlog Toolkit',
         },
         updatedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago
         createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
@@ -74,6 +78,7 @@ const sampleIssues = [
     },
     {
         id: 'issue-5',
+        githubIssueLink: null,
         title: 'Custom color themes',
         body: 'Allow users to customize the color palette for charts and UI elements.',
         type: 'enhancement',
@@ -83,7 +88,7 @@ const sampleIssues = [
         repository: {
             id: 'repo-1',
             name: 'feedlog-toolkit',
-            owner: 'feedlog',
+            description: 'Monorepo for Feedlog Toolkit',
         },
         updatedAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // 1 week ago
         createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
@@ -119,6 +124,14 @@ const meta = {
             control: 'text',
             description: 'Error message',
         },
+        emptyStateTitle: {
+            control: 'text',
+            description: 'Empty state title',
+        },
+        emptyStateMessage: {
+            control: 'text',
+            description: 'Empty state message',
+        },
     },
     args: {
         issues: sampleIssues,
@@ -145,6 +158,8 @@ export const Loading = {
     args: {
         issues: [],
         loading: true,
+        heading: 'Community feedback',
+        subtitle: 'Upvote issues you care about',
     },
     render: props => h("feedlog-github-issues", Object.assign({}, props)),
     play: async ({ canvasElement, args }) => {
@@ -158,7 +173,9 @@ export const Error = {
     args: {
         issues: [],
         loading: false,
-        error: 'Failed to fetch issues from GitHub API',
+        error: "Couldn't load updates",
+        heading: 'Community feedback',
+        subtitle: 'Upvote issues you care about',
     },
     render: props => h("feedlog-github-issues", Object.assign({}, props)),
     play: async ({ canvasElement, args }) => {
@@ -173,6 +190,8 @@ export const Empty = {
         issues: [],
         loading: false,
         error: null,
+        heading: 'Community feedback',
+        subtitle: 'Upvote issues you care about',
     },
     render: props => h("feedlog-github-issues", Object.assign({}, props)),
     play: async ({ canvasElement, args }) => {
@@ -208,3 +227,34 @@ export const NarrowWidth = {
         }
     },
 };
+export const CustomCSSVars = {
+    args: {
+        issues: sampleIssues,
+    },
+    render: (props) => (h("feedlog-github-issues", Object.assign({}, props, { style: {
+            fontFamily: "'Georgia', 'Times New Roman', serif",
+            /* Card */
+            '--feedlog-card-padding': '1.5rem',
+            '--feedlog-card-accent-width': '5px',
+            '--feedlog-radius': '0.875rem',
+            '--feedlog-shadow': '0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 3px -1px rgba(0, 0, 0, 0.1)',
+            '--feedlog-shadow-hover': '0 8px 24px -4px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.1)',
+            /* Typography */
+            '--feedlog-title-font-size': '1.0625rem',
+            '--feedlog-title-font-weight': '700',
+            '--feedlog-body-font-size': '0.875rem',
+            '--feedlog-body-line-height': '1.6',
+            '--feedlog-timestamp-font-size': '0.75rem',
+            /* Colors */
+            '--feedlog-accent-color': '#059669',
+            '--feedlog-muted': '#ecfdf5',
+            '--feedlog-muted-foreground': '#047857',
+            '--feedlog-border': 'rgba(5, 150, 105, 0.2)',
+        } }))),
+    play: async ({ canvasElement, args }) => {
+        const element = canvasElement.querySelector('feedlog-github-issues');
+        if (element && args.issues) {
+            element.issues = args.issues;
+        }
+    },
+};

package/dist/collection/components/feedlog-github-issues-client/feedlog-github-issues-client.js

@@ -148,7 +148,7 @@ export class FeedlogGithubIssuesClient {
             if (this.isDisconnected || currentRequestId !== this.fetchRequestId) {
                 return;
             }
-            const errorMsg = err instanceof Error ? err.message : 'Failed to fetch issues';
+            const errorMsg = err instanceof Error ? err.message : "Couldn't load updates";
             this.error = errorMsg;
             this.issues = [];
             this.feedlogError.emit({
@@ -213,7 +213,7 @@ export class FeedlogGithubIssuesClient {
         }
     }
     render() {
-        return (h("feedlog-github-issues", { key: '77a441edc78e0797deac65e2705adff880056e56', issues: this.issues, maxWidth: this.maxWidth, theme: this.theme, heading: this.heading, subtitle: this.subtitle, loading: this.loading, error: this.error, hasMore: this.hasMore, isLoadingMore: this.isLoadingMore, onFeedlogUpvote: this.handleUpvote, onFeedlogLoadMore: async () => this.loadMore() }));
+        return (h("feedlog-github-issues", { key: '4bc46e4f2622d4c2c5080835ae436ae9fc37c991', issues: this.issues, maxWidth: this.maxWidth, theme: this.theme, heading: this.heading, subtitle: this.subtitle, emptyStateTitle: this.emptyStateTitle, emptyStateMessage: this.emptyStateMessage, getIssueUrl: this.getIssueUrl, loading: this.loading, error: this.error, hasMore: this.hasMore, isLoadingMore: this.isLoadingMore, onFeedlogUpvote: this.handleUpvote, onFeedlogLoadMore: async () => this.loadMore() }));
     }
     static get is() { return "feedlog-github-issues-client"; }
     static get encapsulation() { return "shadow"; }
@@ -397,6 +397,67 @@ export class FeedlogGithubIssuesClient {
                 "setter": false,
                 "reflect": false,
                 "attribute": "subtitle"
+            },
+            "emptyStateTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty state title (e.g. \"No updates yet\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-state-title"
+            },
+            "emptyStateMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty state message (e.g. \"Check back later for new updates.\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-state-message"
+            },
+            "getIssueUrl": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "GetIssueUrlFn",
+                    "resolved": "((issue: FeedlogIssue) => string | null | undefined) | undefined",
+                    "references": {
+                        "GetIssueUrlFn": {
+                            "location": "import",
+                            "path": "@feedlog-ai/core",
+                            "id": "../core/dist/index.d.ts::GetIssueUrlFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional callback to resolve GitHub issue URL when githubIssueLink is not available.\nRequired because repository.owner was removed from the API for privacy."
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }