@feedlog-ai/webcomponents 0.0.22 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +12 -12
  2. package/dist/cjs/{feedlog-button_2.cjs.entry.js → feedlog-button_3.cjs.entry.js} +32 -0
  3. package/dist/cjs/{feedlog-github-issues-client.cjs.entry.js → feedlog-issues-client.cjs.entry.js} +3 -3
  4. package/dist/cjs/feedlog-issues.cjs.entry.js +71 -0
  5. package/dist/cjs/feedlog-toolkit.cjs.js +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/collection/collection-manifest.json +2 -2
  8. package/dist/collection/components/{feedlog-github-issues/feedlog-github-issues.css → feedlog-issues/feedlog-issues.css} +1 -49
  9. package/dist/collection/components/{feedlog-github-issues/feedlog-github-issues.js → feedlog-issues/feedlog-issues.js} +9 -15
  10. package/dist/collection/components/{feedlog-github-issues/feedlog-github-issues.stories.js → feedlog-issues/feedlog-issues.stories.js} +17 -17
  11. package/dist/collection/components/{feedlog-github-issues-client/feedlog-github-issues-client.js → feedlog-issues-client/feedlog-issues-client.js} +7 -7
  12. package/dist/collection/components/feedlog-issues-list/feedlog-issues-list.css +36 -0
  13. package/dist/collection/components/feedlog-issues-list/feedlog-issues-list.js +42 -1
  14. package/dist/collection/components/index.js +2 -2
  15. package/dist/components/{feedlog-github-issues.d.ts → feedlog-issues-client.d.ts} +4 -4
  16. package/dist/components/feedlog-issues-client.js +1 -0
  17. package/dist/components/feedlog-issues-list.js +1 -1
  18. package/dist/components/feedlog-issues.d.ts +11 -0
  19. package/dist/components/feedlog-issues.js +1 -0
  20. package/dist/components/p-BR3ookRG.js +1 -0
  21. package/dist/components/p-DJOCetIC.js +1 -0
  22. package/dist/esm/{feedlog-button_2.entry.js → feedlog-button_3.entry.js} +32 -1
  23. package/dist/esm/{feedlog-github-issues-client.entry.js → feedlog-issues-client.entry.js} +3 -3
  24. package/dist/esm/feedlog-issues.entry.js +69 -0
  25. package/dist/esm/feedlog-toolkit.js +1 -1
  26. package/dist/esm/loader.js +1 -1
  27. package/dist/feedlog-toolkit/feedlog-toolkit.esm.js +1 -1
  28. package/dist/feedlog-toolkit/p-4acededf.entry.js +1 -0
  29. package/dist/feedlog-toolkit/{p-9b515728.entry.js → p-6737a3f4.entry.js} +1 -1
  30. package/dist/feedlog-toolkit/{p-dad7b157.entry.js → p-f8e5e975.entry.js} +2 -2
  31. package/dist/types/components/{feedlog-github-issues/feedlog-github-issues.d.ts → feedlog-issues/feedlog-issues.d.ts} +4 -5
  32. package/dist/types/components/{feedlog-github-issues-client/feedlog-github-issues-client.d.ts → feedlog-issues-client/feedlog-issues-client.d.ts} +5 -5
  33. package/dist/types/components/feedlog-issues-list/feedlog-issues-list.d.ts +9 -0
  34. package/dist/types/components/index.d.ts +2 -2
  35. package/dist/types/components.d.ts +140 -124
  36. package/package.json +2 -2
  37. package/dist/cjs/feedlog-github-issues.cjs.entry.js +0 -77
  38. package/dist/cjs/feedlog-issues-list.cjs.entry.js +0 -33
  39. package/dist/components/feedlog-github-issues-client.d.ts +0 -11
  40. package/dist/components/feedlog-github-issues-client.js +0 -1
  41. package/dist/components/feedlog-github-issues.js +0 -1
  42. package/dist/components/p-cag4iyHV.js +0 -1
  43. package/dist/esm/feedlog-github-issues.entry.js +0 -75
  44. package/dist/esm/feedlog-issues-list.entry.js +0 -31
  45. package/dist/feedlog-toolkit/p-13773ed6.entry.js +0 -1
  46. package/dist/feedlog-toolkit/p-e5ba7dd7.entry.js +0 -1
  47. /package/dist/types/components/{feedlog-github-issues/feedlog-github-issues.stories.d.ts → feedlog-issues/feedlog-issues.stories.d.ts} +0 -0
package/README.md CHANGED
@@ -118,18 +118,18 @@ The playground lets you configure:
118
118
  ></script>
119
119
  </head>
120
120
  <body>
121
- <feedlog-github-issues-client
121
+ <feedlog-issues-client
122
122
  api-key="your-api-key"
123
123
  type="bug"
124
124
  limit="10"
125
125
  theme="light"
126
126
  max-width="42rem"
127
127
  >
128
- </feedlog-github-issues-client>
128
+ </feedlog-issues-client>
129
129
 
130
130
  <script>
131
131
  // Listen for events
132
- const client = document.querySelector('feedlog-github-issues-client');
132
+ const client = document.querySelector('feedlog-issues-client');
133
133
 
134
134
  client.addEventListener('feedlogUpvote', event => {
135
135
  console.log('Issue upvoted:', event.detail);
@@ -147,12 +147,12 @@ The playground lets you configure:
147
147
 
148
148
  ```tsx
149
149
  import React from 'react';
150
- import { FeedlogGithubIssuesClient } from '@feedlog-ai/webcomponents/dist/components';
150
+ import { FeedlogIssuesClient } from '@feedlog-ai/webcomponents/dist/components';
151
151
 
152
152
  function App() {
153
153
  return (
154
154
  <div>
155
- <feedlog-github-issues-client
155
+ <feedlog-issues-client
156
156
  api-key="your-api-key"
157
157
  type="bug"
158
158
  limit={10}
@@ -174,7 +174,7 @@ function App() {
174
174
 
175
175
  ```vue
176
176
  <template>
177
- <feedlog-github-issues-client
177
+ <feedlog-issues-client
178
178
  api-key="your-api-key"
179
179
  type="bug"
180
180
  :limit="10"
@@ -183,7 +183,7 @@ function App() {
183
183
  @feedlog-upvote="handleUpvote"
184
184
  @feedlog-error="handleError"
185
185
  >
186
- </feedlog-github-issues-client>
186
+ </feedlog-issues-client>
187
187
  </template>
188
188
 
189
189
  <script setup lang="ts">
@@ -205,7 +205,7 @@ import { Component } from '@angular/core';
205
205
  @Component({
206
206
  selector: 'app-root',
207
207
  template: `
208
- <feedlog-github-issues-client
208
+ <feedlog-issues-client
209
209
  api-key="your-api-key"
210
210
  type="bug"
211
211
  limit="10"
@@ -214,7 +214,7 @@ import { Component } from '@angular/core';
214
214
  (feedlogUpvote)="onUpvote($event)"
215
215
  (feedlogError)="onError($event)"
216
216
  >
217
- </feedlog-github-issues-client>
217
+ </feedlog-issues-client>
218
218
  `,
219
219
  })
220
220
  export class AppComponent {
@@ -235,7 +235,7 @@ The package also includes additional UI components:
235
235
  - `feedlog-badge`: Label component with variant support
236
236
  - `feedlog-button`: Button component with variants and sizes
237
237
  - `feedlog-card`: Reusable card container component
238
- - `feedlog-github-issues`: Issues display component (used internally by client)
238
+ - `feedlog-issues`: Issues display component (used internally by client)
239
239
  - `feedlog-issues-list`: Issues list component (used internally)
240
240
 
241
241
  ## Build Outputs
@@ -284,8 +284,8 @@ interface ErrorEventDetail {
284
284
  Components use Shadow DOM for encapsulation. You can style them using CSS custom properties. See the [main README](../../README.md#-style-customization) for full copy-paste examples.
285
285
 
286
286
  ```css
287
- feedlog-github-issues-client,
288
- feedlog-github-issues {
287
+ feedlog-issues-client,
288
+ feedlog-issues {
289
289
  /* Card */
290
290
  --feedlog-card-padding: 1.25rem;
291
291
  --feedlog-card-accent-width: 3px;
package/dist/cjs/{feedlog-button_2.cjs.entry.js → feedlog-button_3.cjs.entry.js} RENAMED
@@ -1637,5 +1637,37 @@ const FeedlogIssueComponent = class {
1637
1637
  };
1638
1638
  FeedlogIssueComponent.style = feedlogIssueCss();
1639
1639
 
1640
+ const feedlogIssuesListCss = () => `:host{display:block;--feedlog-muted-foreground:#64748b;--feedlog-foreground:oklch(0.145 0 0);--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){--feedlog-muted-foreground:oklch(0.72 0.02 260);--feedlog-foreground:oklch(0.985 0 0);--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.01 260)}.issues-list{display:flex;flex-direction:column;gap:0.5rem}.empty-state{text-align:center;padding:3rem 1.5rem;color:var(--feedlog-muted-foreground);font-size:0.875rem}.empty-state-content{display:flex;flex-direction:column;align-items:center;text-align:center;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}`;
1641
+
1642
+ const FeedlogIssuesList = class {
1643
+ constructor(hostRef) {
1644
+ index.registerInstance(this, hostRef);
1645
+ this.feedlogUpvote = index.createEvent(this, "feedlogUpvote");
1646
+ /**
1647
+ * Array of issues to display
1648
+ */
1649
+ this.issues = [];
1650
+ /**
1651
+ * Theme variant: 'light' or 'dark'
1652
+ */
1653
+ this.theme = 'light';
1654
+ this.handleUpvote = (event) => {
1655
+ event.stopPropagation();
1656
+ this.feedlogUpvote.emit(event.detail);
1657
+ };
1658
+ }
1659
+ renderEmptyStateIllustration() {
1660
+ return (index.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" }, index.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" }), index.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" }), index.h("path", { d: "M44 52h32M44 60h24M44 68h28", stroke: "var(--feedlog-empty-illustration-muted)", "stroke-width": "1.25", "stroke-linecap": "round" })));
1661
+ }
1662
+ render() {
1663
+ return (index.h(index.Host, { key: 'd797fd4978179c9081678e2fb3e7e2be756b4ea2', class: this.theme === 'dark' ? 'dark' : '' }, index.h("div", { key: '1fe373bbad55cf718d65279ae718f9b95e89e37f', class: "issues-list" }, this.issues.length === 0 ? (index.h("div", { class: "empty-state" }, this.emptyStateTitle && this.emptyStateMessage ? (index.h("div", { class: "empty-state-content" }, this.renderEmptyStateIllustration(), index.h("h2", { class: "empty-state-title" }, this.emptyStateTitle), index.h("p", { class: "empty-state-message" }, this.emptyStateMessage))) : (index.h("p", null, "No issues found")))) : (this.issues.map(issue => {
1664
+ var _a, _b;
1665
+ return (index.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.theme, onFeedlogUpvote: (e) => this.handleUpvote(e) }));
1666
+ })))));
1667
+ }
1668
+ };
1669
+ FeedlogIssuesList.style = feedlogIssuesListCss();
1670
+
1640
1671
  exports.feedlog_button = FeedlogButton;
1641
1672
  exports.feedlog_issue = FeedlogIssueComponent;
1673
+ exports.feedlog_issues_list = FeedlogIssuesList;
package/dist/cjs/{feedlog-github-issues-client.cjs.entry.js → feedlog-issues-client.cjs.entry.js} RENAMED
@@ -343,7 +343,7 @@ class FeedlogSDK {
343
343
  }
344
344
  }
345
345
 
346
- const FeedlogGithubIssuesClient = class {
346
+ const FeedlogIssuesClient = class {
347
347
  constructor(hostRef) {
348
348
  index.registerInstance(this, hostRef);
349
349
  this.feedlogUpvote = index.createEvent(this, "feedlogUpvote");
@@ -553,8 +553,8 @@ const FeedlogGithubIssuesClient = class {
553
553
  }
554
554
  }
555
555
  render() {
556
- return (index.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() }));
556
+ return (index.h("feedlog-issues", { key: '8c8635788f390477f1e5217e423d79438c45858d', 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() }));
557
557
  }
558
558
  };
559
559
 
560
- exports.feedlog_github_issues_client = FeedlogGithubIssuesClient;
560
+ exports.feedlog_issues_client = FeedlogIssuesClient;
package/dist/cjs/feedlog-issues.cjs.entry.js ADDED
@@ -0,0 +1,71 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-DnsqTPII.js');
4
+
5
+ const feedlogIssuesCss = () => `:host{display:block;font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;--feedlog-background:#ffffff;--feedlog-foreground:oklch(0.145 0 0);--feedlog-card:#ffffff;--feedlog-card-foreground:oklch(0.145 0 0);--feedlog-muted:#ececf0;--feedlog-muted-foreground:#717182;--feedlog-border:rgba(0, 0, 0, 0.1);--feedlog-accent-color:#2563eb;--feedlog-destructive:#d4183d;--feedlog-blue-400:oklch(0.707 0.165 254.624);--feedlog-blue-600:oklch(0.546 0.245 262.881);--feedlog-blue-100:oklch(0.932 0.032 255.585);--feedlog-red-100:#fce7f3;--feedlog-red-400:#f472b6;--feedlog-red-600:#db2777;--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)}:host(.dark){--feedlog-background:oklch(0.18 0.01 260);--feedlog-foreground:oklch(0.985 0 0);--feedlog-card:oklch(0.24 0.01 260);--feedlog-card-foreground:oklch(0.985 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)}.issues-container{min-height:100vh;background-color:var(--feedlog-background);padding:var(--feedlog-padding);margin:0 auto}.issues-header{margin-bottom:1.5rem;display:flex;align-items:flex-start;justify-content:space-between}.header-content{flex:1}.issues-title{color:var(--feedlog-foreground);margin:0 0 0.25rem 0;font-size:1.5rem;font-weight:500;line-height:1.5}.issues-subtitle{color:var(--feedlog-muted-foreground);font-size:0.875rem;margin:0}.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{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-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}.load-more-container{display:flex;justify-content:center;padding:2rem 0;gap:1rem}`;
6
+
7
+ const FeedlogIssues = class {
8
+ constructor(hostRef) {
9
+ index.registerInstance(this, hostRef);
10
+ this.feedlogUpvote = index.createEvent(this, "feedlogUpvote");
11
+ this.feedlogLoadMore = index.createEvent(this, "feedlogLoadMore");
12
+ /**
13
+ * Array of issues to display
14
+ */
15
+ this.issues = [];
16
+ /**
17
+ * Maximum width of the container
18
+ */
19
+ this.maxWidth = '42rem';
20
+ /**
21
+ * Theme variant: 'light' or 'dark'
22
+ */
23
+ this.theme = 'light';
24
+ /**
25
+ * Loading state - shows loading indicator when true
26
+ */
27
+ this.loading = false;
28
+ /**
29
+ * Error message - shows error state when set
30
+ */
31
+ this.error = null;
32
+ /**
33
+ * Whether there are more issues to load
34
+ */
35
+ this.hasMore = false;
36
+ /**
37
+ * Whether more issues are currently loading
38
+ */
39
+ this.isLoadingMore = false;
40
+ /**
41
+ * Internal state for theme
42
+ */
43
+ this.currentTheme = 'light';
44
+ this.handleUpvote = (event) => {
45
+ event.stopPropagation();
46
+ this.feedlogUpvote.emit(event.detail);
47
+ };
48
+ this.handleLoadMore = () => {
49
+ this.feedlogLoadMore.emit();
50
+ };
51
+ }
52
+ componentWillLoad() {
53
+ this.currentTheme = this.theme;
54
+ }
55
+ renderErrorIcon() {
56
+ return (index.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" }, index.h("circle", { cx: "12", cy: "12", r: "10" }), index.h("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), index.h("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })));
57
+ }
58
+ renderIssuesList() {
59
+ var _a, _b;
60
+ return (index.h("feedlog-issues-list", { issues: this.issues, theme: this.currentTheme, getIssueUrl: this.getIssueUrl, emptyStateTitle: (_a = this.emptyStateTitle) !== null && _a !== void 0 ? _a : 'No updates yet', emptyStateMessage: (_b = this.emptyStateMessage) !== null && _b !== void 0 ? _b : 'Check back later for new updates.', onFeedlogUpvote: (e) => this.handleUpvote(e) }));
61
+ }
62
+ render() {
63
+ const containerStyle = {
64
+ maxWidth: this.maxWidth,
65
+ };
66
+ return (index.h(index.Host, { key: '812719c5d6f25108834d1a422dee280c18033e36', class: this.currentTheme === 'dark' ? 'dark' : '' }, index.h("div", { key: '1e415969878bad8fb14ea9e648d2c2d2e0d492a1', class: "issues-container", style: containerStyle }, (this.heading || this.subtitle) && (index.h("header", { key: '5bf1308396ff3bc04a57763317fa71a34d48cc95', class: "issues-header" }, index.h("div", { key: '19494458a1bcd11c3d91c08e98887f9d6ed33314', class: "header-content" }, this.heading && index.h("h1", { key: 'f89bd679a9dd9262c93573ef0bfbbb23bd892a87', class: "issues-title" }, this.heading), this.subtitle && index.h("p", { key: '2bcc73dfb95d7ae8971004522fe44cca5128701b', class: "issues-subtitle" }, this.subtitle)))), this.loading && (index.h("div", { key: '85c06c80b624cd16d532bea5f0ad6fb7cc06f692', class: "loading-state", role: "status", "aria-label": "Loading issues" }, index.h("div", { key: '766cd9e7c18586f937a1b864e7bcfce60fe79707', class: "loading-skeletons" }, [1, 2, 3].map(i => (index.h("div", { key: i, class: "skeleton-card" }, index.h("div", { class: "skeleton-content" }, index.h("div", { class: "skeleton-header" }, index.h("div", { class: "skeleton-badge" }), index.h("div", { class: "skeleton-timestamp" })), index.h("div", { class: "skeleton-main" }, index.h("div", { class: "skeleton-title" }), index.h("div", { class: "skeleton-body" }, index.h("div", { class: "skeleton-line" }), index.h("div", { class: "skeleton-line short" })), index.h("div", { class: "skeleton-repo" })), index.h("div", { class: "skeleton-footer" }, index.h("div", { class: "skeleton-upvote" }))))))))), this.error && (index.h("div", { key: '5ca08a9ddc95b4ef59d6c776a24e08b5ac65c0b3', class: "error-state", role: "alert" }, index.h("div", { key: '93218f816564cff58f591b53d1aad6b6bc8a1c64', class: "error-state-content" }, this.renderErrorIcon(), index.h("h2", { key: 'f141f75b92164af3f4d139a17937b0533641bcc0', class: "error-state-title" }, "Something went wrong"), index.h("p", { key: '61225c7f4f46944787d4a6448386c8209cdaf74c', class: "error-state-message" }, this.error)))), !this.loading && !this.error && (index.h("div", { key: '5ac699f4c5d0e5b5d20f1546efe24f80cba70748' }, this.renderIssuesList(), this.hasMore && (index.h("div", { key: '9ad22c48dac0d8874dfae9735c850b2ca52836e7', class: "load-more-container" }, index.h("feedlog-button", { key: 'de55c05ca8b80ec5df98051653ca135874edc98b', onFeedlogClick: this.handleLoadMore, disabled: this.isLoadingMore, variant: "outline" }, this.isLoadingMore ? 'Loading...' : 'Load More Issues'))))))));
67
+ }
68
+ };
69
+ FeedlogIssues.style = feedlogIssuesCss();
70
+
71
+ exports.feedlog_issues = FeedlogIssues;
package/dist/cjs/feedlog-toolkit.cjs.js CHANGED
@@ -18,7 +18,7 @@ var patchBrowser = () => {
18
18
 
19
19
  patchBrowser().then(async (options) => {
20
20
  await index.globalScripts();
21
- return index.bootstrapLazy([["feedlog-issues-list.cjs",[[1,"feedlog-issues-list",{"issues":[16],"theme":[1],"getIssueUrl":[16]}]]],["feedlog-card.cjs",[[257,"feedlog-card"]]],["feedlog-badge.cjs",[[257,"feedlog-badge",{"variant":[1]}]]],["feedlog-button_2.cjs",[[257,"feedlog-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}],[257,"feedlog-issue",{"issue":[16],"issueUrl":[1,"issue-url"],"theme":[1]}]]],["feedlog-github-issues.cjs",[[1,"feedlog-github-issues",{"issues":[16],"maxWidth":[1,"max-width"],"theme":[1025],"heading":[1],"subtitle":[1],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"error":[1],"hasMore":[4,"has-more"],"isLoadingMore":[4,"is-loading-more"],"getIssueUrl":[16],"currentTheme":[32]}]]],["feedlog-github-issues-client.cjs",[[1,"feedlog-github-issues-client",{"apiKey":[1,"api-key"],"type":[1],"limit":[2],"sortBy":[1,"sort-by"],"endpoint":[1],"maxWidth":[1,"max-width"],"theme":[1],"heading":[1],"subtitle":[1],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"],"getIssueUrl":[16],"issues":[32],"loading":[32],"error":[32],"cursor":[32],"hasMore":[32],"isLoadingMore":[32]}]]]], options);
21
+ return index.bootstrapLazy([["feedlog-card.cjs",[[257,"feedlog-card"]]],["feedlog-badge.cjs",[[257,"feedlog-badge",{"variant":[1]}]]],["feedlog-button_3.cjs",[[1,"feedlog-issues-list",{"issues":[16],"theme":[1],"getIssueUrl":[16],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"]}],[257,"feedlog-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}],[257,"feedlog-issue",{"issue":[16],"issueUrl":[1,"issue-url"],"theme":[1]}]]],["feedlog-issues.cjs",[[1,"feedlog-issues",{"issues":[16],"maxWidth":[1,"max-width"],"theme":[1025],"heading":[1],"subtitle":[1],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"error":[1],"hasMore":[4,"has-more"],"isLoadingMore":[4,"is-loading-more"],"getIssueUrl":[16],"currentTheme":[32]}]]],["feedlog-issues-client.cjs",[[1,"feedlog-issues-client",{"apiKey":[1,"api-key"],"type":[1],"limit":[2],"sortBy":[1,"sort-by"],"endpoint":[1],"maxWidth":[1,"max-width"],"theme":[1],"heading":[1],"subtitle":[1],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"],"getIssueUrl":[16],"issues":[32],"loading":[32],"error":[32],"cursor":[32],"hasMore":[32],"isLoadingMore":[32]}]]]], options);
22
22
  });
23
23
 
24
24
  exports.setNonce = index.setNonce;
package/dist/cjs/loader.cjs.js CHANGED
@@ -5,7 +5,7 @@ var index = require('./index-DnsqTPII.js');
5
5
  const defineCustomElements = async (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
7
7
  await index.globalScripts();
8
- return index.bootstrapLazy([["feedlog-issues-list.cjs",[[1,"feedlog-issues-list",{"issues":[16],"theme":[1],"getIssueUrl":[16]}]]],["feedlog-card.cjs",[[257,"feedlog-card"]]],["feedlog-badge.cjs",[[257,"feedlog-badge",{"variant":[1]}]]],["feedlog-button_2.cjs",[[257,"feedlog-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}],[257,"feedlog-issue",{"issue":[16],"issueUrl":[1,"issue-url"],"theme":[1]}]]],["feedlog-github-issues.cjs",[[1,"feedlog-github-issues",{"issues":[16],"maxWidth":[1,"max-width"],"theme":[1025],"heading":[1],"subtitle":[1],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"error":[1],"hasMore":[4,"has-more"],"isLoadingMore":[4,"is-loading-more"],"getIssueUrl":[16],"currentTheme":[32]}]]],["feedlog-github-issues-client.cjs",[[1,"feedlog-github-issues-client",{"apiKey":[1,"api-key"],"type":[1],"limit":[2],"sortBy":[1,"sort-by"],"endpoint":[1],"maxWidth":[1,"max-width"],"theme":[1],"heading":[1],"subtitle":[1],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"],"getIssueUrl":[16],"issues":[32],"loading":[32],"error":[32],"cursor":[32],"hasMore":[32],"isLoadingMore":[32]}]]]], options);
8
+ return index.bootstrapLazy([["feedlog-card.cjs",[[257,"feedlog-card"]]],["feedlog-badge.cjs",[[257,"feedlog-badge",{"variant":[1]}]]],["feedlog-button_3.cjs",[[1,"feedlog-issues-list",{"issues":[16],"theme":[1],"getIssueUrl":[16],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"]}],[257,"feedlog-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}],[257,"feedlog-issue",{"issue":[16],"issueUrl":[1,"issue-url"],"theme":[1]}]]],["feedlog-issues.cjs",[[1,"feedlog-issues",{"issues":[16],"maxWidth":[1,"max-width"],"theme":[1025],"heading":[1],"subtitle":[1],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"error":[1],"hasMore":[4,"has-more"],"isLoadingMore":[4,"is-loading-more"],"getIssueUrl":[16],"currentTheme":[32]}]]],["feedlog-issues-client.cjs",[[1,"feedlog-issues-client",{"apiKey":[1,"api-key"],"type":[1],"limit":[2],"sortBy":[1,"sort-by"],"endpoint":[1],"maxWidth":[1,"max-width"],"theme":[1],"heading":[1],"subtitle":[1],"emptyStateTitle":[1,"empty-state-title"],"emptyStateMessage":[1,"empty-state-message"],"getIssueUrl":[16],"issues":[32],"loading":[32],"error":[32],"cursor":[32],"hasMore":[32],"isLoadingMore":[32]}]]]], options);
9
9
  };
10
10
 
11
11
  exports.setNonce = index.setNonce;
package/dist/collection/collection-manifest.json CHANGED
@@ -3,8 +3,8 @@
3
3
  "components/feedlog-card/feedlog-card.js",
4
4
  "components/feedlog-badge/feedlog-badge.js",
5
5
  "components/feedlog-button/feedlog-button.js",
6
- "components/feedlog-github-issues/feedlog-github-issues.js",
7
- "components/feedlog-github-issues-client/feedlog-github-issues-client.js",
6
+ "components/feedlog-issues/feedlog-issues.js",
7
+ "components/feedlog-issues-client/feedlog-issues-client.js",
8
8
  "components/feedlog-issue/feedlog-issue.js",
9
9
  "components/feedlog-issues-list/feedlog-issues-list.js"
10
10
  ],
package/dist/collection/components/{feedlog-github-issues/feedlog-github-issues.css → feedlog-issues/feedlog-issues.css} RENAMED
@@ -23,9 +23,6 @@
23
23
  --feedlog-gap: 0.5rem;
24
24
  --feedlog-padding: 2rem;
25
25
  --feedlog-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
26
- --feedlog-empty-illustration-bg: oklch(0.96 0.01 260);
27
- --feedlog-empty-illustration-stroke: oklch(0.75 0.02 260);
28
- --feedlog-empty-illustration-muted: oklch(0.82 0.01 260);
29
26
  }
30
27
 
31
28
  :host(.dark) {
@@ -44,13 +41,10 @@
44
41
  --feedlog-blue-900-30: color-mix(in oklab, oklch(0.379 0.146 265.522) 30%, transparent);
45
42
  --feedlog-red-900-30: color-mix(in oklab, oklch(0.396 0.141 25.723) 30%, transparent);
46
43
  --feedlog-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
47
- --feedlog-empty-illustration-bg: oklch(0.28 0.02 260);
48
- --feedlog-empty-illustration-stroke: oklch(0.45 0.02 260);
49
- --feedlog-empty-illustration-muted: oklch(0.38 0.02 260);
50
44
  }
51
45
 
52
46
 
53
- .github-issues-container {
47
+ .issues-container {
54
48
  min-height: 100vh;
55
49
  background-color: var(--feedlog-background);
56
50
  padding: var(--feedlog-padding);
@@ -243,48 +237,6 @@
243
237
  line-height: 1.5;
244
238
  }
245
239
 
246
- .issues-list {
247
- display: flex;
248
- flex-direction: column;
249
- gap: var(--feedlog-gap);
250
- }
251
-
252
- .empty-state {
253
- display: flex;
254
- align-items: center;
255
- justify-content: center;
256
- padding: 4rem 2rem;
257
- min-height: 16rem;
258
- }
259
-
260
- .empty-state-content {
261
- display: flex;
262
- flex-direction: column;
263
- align-items: center;
264
- text-align: center;
265
- max-width: 20rem;
266
- }
267
-
268
- .empty-state-illustration {
269
- margin-bottom: 1.5rem;
270
- opacity: 0.9;
271
- }
272
-
273
- .empty-state-title {
274
- margin: 0 0 0.5rem 0;
275
- font-size: 1.125rem;
276
- font-weight: 600;
277
- color: var(--feedlog-foreground);
278
- line-height: 1.4;
279
- }
280
-
281
- .empty-state-message {
282
- margin: 0;
283
- font-size: 0.875rem;
284
- color: var(--feedlog-muted-foreground);
285
- line-height: 1.5;
286
- }
287
-
288
240
  .load-more-container {
289
241
  display: flex;
290
242
  justify-content: center;
package/dist/collection/components/{feedlog-github-issues/feedlog-github-issues.js → feedlog-issues/feedlog-issues.js} RENAMED
@@ -1,11 +1,11 @@
1
1
  import { h, Host } from "@stencil/core";
2
2
  /**
3
- * Feedlog GitHub Issues Component
3
+ * Feedlog Issues Component
4
4
  *
5
- * Component for displaying GitHub issues with support for bugs and enhancements.
5
+ * Component for displaying issues with support for bugs and enhancements.
6
6
  * Includes full list rendering, loading/error states, and pagination support.
7
7
  */
8
- export class FeedlogGithubIssues {
8
+ export class FeedlogIssues {
9
9
  constructor() {
10
10
  /**
11
11
  * Array of issues to display
@@ -50,35 +50,29 @@ export class FeedlogGithubIssues {
50
50
  componentWillLoad() {
51
51
  this.currentTheme = this.theme;
52
52
  }
53
- renderEmptyStateIllustration() {
54
- 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" })));
55
- }
56
53
  renderErrorIcon() {
57
54
  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" })));
58
55
  }
59
56
  renderIssuesList() {
60
57
  var _a, _b;
61
- 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 => {
62
- var _a, _b;
63
- 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) }));
64
- }))));
58
+ return (h("feedlog-issues-list", { issues: this.issues, theme: this.currentTheme, getIssueUrl: this.getIssueUrl, emptyStateTitle: (_a = this.emptyStateTitle) !== null && _a !== void 0 ? _a : 'No updates yet', emptyStateMessage: (_b = this.emptyStateMessage) !== null && _b !== void 0 ? _b : 'Check back later for new updates.', onFeedlogUpvote: (e) => this.handleUpvote(e) }));
65
59
  }
66
60
  render() {
67
61
  const containerStyle = {
68
62
  maxWidth: this.maxWidth,
69
63
  };
70
- 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'))))))));
64
+ return (h(Host, { key: '812719c5d6f25108834d1a422dee280c18033e36', class: this.currentTheme === 'dark' ? 'dark' : '' }, h("div", { key: '1e415969878bad8fb14ea9e648d2c2d2e0d492a1', class: "issues-container", style: containerStyle }, (this.heading || this.subtitle) && (h("header", { key: '5bf1308396ff3bc04a57763317fa71a34d48cc95', class: "issues-header" }, h("div", { key: '19494458a1bcd11c3d91c08e98887f9d6ed33314', class: "header-content" }, this.heading && h("h1", { key: 'f89bd679a9dd9262c93573ef0bfbbb23bd892a87', class: "issues-title" }, this.heading), this.subtitle && h("p", { key: '2bcc73dfb95d7ae8971004522fe44cca5128701b', class: "issues-subtitle" }, this.subtitle)))), this.loading && (h("div", { key: '85c06c80b624cd16d532bea5f0ad6fb7cc06f692', class: "loading-state", role: "status", "aria-label": "Loading issues" }, h("div", { key: '766cd9e7c18586f937a1b864e7bcfce60fe79707', 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: '5ca08a9ddc95b4ef59d6c776a24e08b5ac65c0b3', class: "error-state", role: "alert" }, h("div", { key: '93218f816564cff58f591b53d1aad6b6bc8a1c64', class: "error-state-content" }, this.renderErrorIcon(), h("h2", { key: 'f141f75b92164af3f4d139a17937b0533641bcc0', class: "error-state-title" }, "Something went wrong"), h("p", { key: '61225c7f4f46944787d4a6448386c8209cdaf74c', class: "error-state-message" }, this.error)))), !this.loading && !this.error && (h("div", { key: '5ac699f4c5d0e5b5d20f1546efe24f80cba70748' }, this.renderIssuesList(), this.hasMore && (h("div", { key: '9ad22c48dac0d8874dfae9735c850b2ca52836e7', class: "load-more-container" }, h("feedlog-button", { key: 'de55c05ca8b80ec5df98051653ca135874edc98b', onFeedlogClick: this.handleLoadMore, disabled: this.isLoadingMore, variant: "outline" }, this.isLoadingMore ? 'Loading...' : 'Load More Issues'))))))));
71
65
  }
72
- static get is() { return "feedlog-github-issues"; }
66
+ static get is() { return "feedlog-issues"; }
73
67
  static get encapsulation() { return "shadow"; }
74
68
  static get originalStyleUrls() {
75
69
  return {
76
- "$": ["feedlog-github-issues.css"]
70
+ "$": ["feedlog-issues.css"]
77
71
  };
78
72
  }
79
73
  static get styleUrls() {
80
74
  return {
81
- "$": ["feedlog-github-issues.css"]
75
+ "$": ["feedlog-issues.css"]
82
76
  };
83
77
  }
84
78
  static get properties() {
@@ -321,7 +315,7 @@ export class FeedlogGithubIssues {
321
315
  "optional": true,
322
316
  "docs": {
323
317
  "tags": [],
324
- "text": "Optional callback to resolve GitHub issue URL when githubIssueLink is not available.\nRequired because repository.owner was removed from the API for privacy."
318
+ "text": "Optional callback to resolve issue URL when githubIssueLink is not available.\nRequired because repository.owner was removed from the API for privacy."
325
319
  },
326
320
  "getter": false,
327
321
  "setter": false
package/dist/collection/components/{feedlog-github-issues/feedlog-github-issues.stories.js → feedlog-issues/feedlog-issues.stories.js} RENAMED
@@ -97,15 +97,15 @@ const sampleIssues = [
97
97
  },
98
98
  ];
99
99
  const meta = {
100
- title: 'Components/GitHub Issues',
101
- component: 'feedlog-github-issues',
100
+ title: 'Components/Issues',
101
+ component: 'feedlog-issues',
102
102
  parameters: {
103
103
  layout: 'padded',
104
104
  },
105
105
  argTypes: {
106
106
  issues: {
107
107
  control: 'object',
108
- description: 'Array of GitHub issues to display',
108
+ description: 'Array of issues to display',
109
109
  },
110
110
  maxWidth: {
111
111
  control: 'text',
@@ -146,9 +146,9 @@ export const Default = {
146
146
  args: {
147
147
  issues: sampleIssues,
148
148
  },
149
- render: props => h("feedlog-github-issues", Object.assign({}, props)),
149
+ render: props => h("feedlog-issues", Object.assign({}, props)),
150
150
  play: async ({ canvasElement, args }) => {
151
- const element = canvasElement.querySelector('feedlog-github-issues');
151
+ const element = canvasElement.querySelector('feedlog-issues');
152
152
  if (element && args.issues) {
153
153
  element.issues = args.issues;
154
154
  }
@@ -161,9 +161,9 @@ export const Loading = {
161
161
  heading: 'Community feedback',
162
162
  subtitle: 'Upvote issues you care about',
163
163
  },
164
- render: props => h("feedlog-github-issues", Object.assign({}, props)),
164
+ render: props => h("feedlog-issues", Object.assign({}, props)),
165
165
  play: async ({ canvasElement, args }) => {
166
- const element = canvasElement.querySelector('feedlog-github-issues');
166
+ const element = canvasElement.querySelector('feedlog-issues');
167
167
  if (element && args.issues) {
168
168
  element.issues = args.issues;
169
169
  }
@@ -177,9 +177,9 @@ export const Error = {
177
177
  heading: 'Community feedback',
178
178
  subtitle: 'Upvote issues you care about',
179
179
  },
180
- render: props => h("feedlog-github-issues", Object.assign({}, props)),
180
+ render: props => h("feedlog-issues", Object.assign({}, props)),
181
181
  play: async ({ canvasElement, args }) => {
182
- const element = canvasElement.querySelector('feedlog-github-issues');
182
+ const element = canvasElement.querySelector('feedlog-issues');
183
183
  if (element && args.issues) {
184
184
  element.issues = args.issues;
185
185
  }
@@ -193,9 +193,9 @@ export const Empty = {
193
193
  heading: 'Community feedback',
194
194
  subtitle: 'Upvote issues you care about',
195
195
  },
196
- render: props => h("feedlog-github-issues", Object.assign({}, props)),
196
+ render: props => h("feedlog-issues", Object.assign({}, props)),
197
197
  play: async ({ canvasElement, args }) => {
198
- const element = canvasElement.querySelector('feedlog-github-issues');
198
+ const element = canvasElement.querySelector('feedlog-issues');
199
199
  if (element && args.issues) {
200
200
  element.issues = args.issues;
201
201
  }
@@ -206,9 +206,9 @@ export const DarkTheme = {
206
206
  issues: sampleIssues,
207
207
  theme: 'dark',
208
208
  },
209
- render: props => h("feedlog-github-issues", Object.assign({}, props)),
209
+ render: props => h("feedlog-issues", Object.assign({}, props)),
210
210
  play: async ({ canvasElement, args }) => {
211
- const element = canvasElement.querySelector('feedlog-github-issues');
211
+ const element = canvasElement.querySelector('feedlog-issues');
212
212
  if (element && args.issues) {
213
213
  element.issues = args.issues;
214
214
  }
@@ -219,9 +219,9 @@ export const NarrowWidth = {
219
219
  issues: sampleIssues.slice(0, 3),
220
220
  maxWidth: '32rem',
221
221
  },
222
- render: props => h("feedlog-github-issues", Object.assign({}, props)),
222
+ render: props => h("feedlog-issues", Object.assign({}, props)),
223
223
  play: async ({ canvasElement, args }) => {
224
- const element = canvasElement.querySelector('feedlog-github-issues');
224
+ const element = canvasElement.querySelector('feedlog-issues');
225
225
  if (element && args.issues) {
226
226
  element.issues = args.issues;
227
227
  }
@@ -231,7 +231,7 @@ export const CustomCSSVars = {
231
231
  args: {
232
232
  issues: sampleIssues,
233
233
  },
234
- render: (props) => (h("feedlog-github-issues", Object.assign({}, props, { style: {
234
+ render: (props) => (h("feedlog-issues", Object.assign({}, props, { style: {
235
235
  fontFamily: "'Georgia', 'Times New Roman', serif",
236
236
  /* Card */
237
237
  '--feedlog-card-padding': '1.5rem',
@@ -252,7 +252,7 @@ export const CustomCSSVars = {
252
252
  '--feedlog-border': 'rgba(5, 150, 105, 0.2)',
253
253
  } }))),
254
254
  play: async ({ canvasElement, args }) => {
255
- const element = canvasElement.querySelector('feedlog-github-issues');
255
+ const element = canvasElement.querySelector('feedlog-issues');
256
256
  if (element && args.issues) {
257
257
  element.issues = args.issues;
258
258
  }
package/dist/collection/components/{feedlog-github-issues-client/feedlog-github-issues-client.js → feedlog-issues-client/feedlog-issues-client.js} RENAMED
@@ -1,12 +1,12 @@
1
1
  import { h } from "@stencil/core";
2
2
  import { FeedlogSDK } from "@feedlog-ai/core";
3
3
  /**
4
- * Feedlog GitHub Issues Client Component
4
+ * Feedlog Issues Client Component
5
5
  *
6
- * A component for displaying GitHub issues fetched using the Feedlog SDK.
7
- * This component uses the SDK internally to fetch data and delegates to feedlog-github-issues for rendering.
6
+ * A component for displaying issues fetched using the Feedlog SDK.
7
+ * This component uses the SDK internally to fetch data and delegates to feedlog-issues for rendering.
8
8
  */
9
- export class FeedlogGithubIssuesClient {
9
+ export class FeedlogIssuesClient {
10
10
  constructor() {
11
11
  /**
12
12
  * Maximum width of the container
@@ -213,9 +213,9 @@ export class FeedlogGithubIssuesClient {
213
213
  }
214
214
  }
215
215
  render() {
216
- 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() }));
216
+ return (h("feedlog-issues", { key: '8c8635788f390477f1e5217e423d79438c45858d', 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() }));
217
217
  }
218
- static get is() { return "feedlog-github-issues-client"; }
218
+ static get is() { return "feedlog-issues-client"; }
219
219
  static get encapsulation() { return "shadow"; }
220
220
  static get properties() {
221
221
  return {
@@ -454,7 +454,7 @@ export class FeedlogGithubIssuesClient {
454
454
  "optional": true,
455
455
  "docs": {
456
456
  "tags": [],
457
- "text": "Optional callback to resolve GitHub issue URL when githubIssueLink is not available.\nRequired because repository.owner was removed from the API for privacy."
457
+ "text": "Optional callback to resolve issue URL when githubIssueLink is not available.\nRequired because repository.owner was removed from the API for privacy."
458
458
  },
459
459
  "getter": false,
460
460
  "setter": false
package/dist/collection/components/feedlog-issues-list/feedlog-issues-list.css CHANGED
@@ -1,10 +1,18 @@
1
1
  :host {
2
2
  display: block;
3
3
  --feedlog-muted-foreground: #64748b;
4
+ --feedlog-foreground: oklch(0.145 0 0);
5
+ --feedlog-empty-illustration-bg: oklch(0.96 0.01 260);
6
+ --feedlog-empty-illustration-stroke: oklch(0.75 0.02 260);
7
+ --feedlog-empty-illustration-muted: oklch(0.82 0.01 260);
4
8
  }
5
9
 
6
10
  :host(.dark) {
7
11
  --feedlog-muted-foreground: oklch(0.72 0.02 260);
12
+ --feedlog-foreground: oklch(0.985 0 0);
13
+ --feedlog-empty-illustration-bg: oklch(0.28 0.02 260);
14
+ --feedlog-empty-illustration-stroke: oklch(0.45 0.02 260);
15
+ --feedlog-empty-illustration-muted: oklch(0.38 0.01 260);
8
16
  }
9
17
 
10
18
  .issues-list {
@@ -19,3 +27,31 @@
19
27
  color: var(--feedlog-muted-foreground);
20
28
  font-size: 0.875rem;
21
29
  }
30
+
31
+ .empty-state-content {
32
+ display: flex;
33
+ flex-direction: column;
34
+ align-items: center;
35
+ text-align: center;
36
+ max-width: 20rem;
37
+ }
38
+
39
+ .empty-state-illustration {
40
+ margin-bottom: 1.5rem;
41
+ opacity: 0.9;
42
+ }
43
+
44
+ .empty-state-title {
45
+ margin: 0 0 0.5rem 0;
46
+ font-size: 1.125rem;
47
+ font-weight: 600;
48
+ color: var(--feedlog-foreground);
49
+ line-height: 1.4;
50
+ }
51
+
52
+ .empty-state-message {
53
+ margin: 0;
54
+ font-size: 0.875rem;
55
+ color: var(--feedlog-muted-foreground);
56
+ line-height: 1.5;
57
+ }