@feedlog-ai/webcomponents 0.0.20 → 0.0.21

package/dist/collection/components/feedlog-issue/feedlog-issue.css

@@ -1,15 +1,24 @@
 :host {
   display: block;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-  
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
+
   /* Light theme defaults */
   --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-muted: #f1f5f9;
+  --feedlog-muted-foreground: #64748b;
+  --feedlog-border: rgba(0, 0, 0, 0.08);
   --feedlog-accent-color: #2563eb;
   --feedlog-destructive: #d4183d;
   --feedlog-blue-400: oklch(0.707 0.165 254.624);
@@ -20,50 +29,97 @@
   --feedlog-red-600: #db2777;
   --feedlog-radius: 0.625rem;
   --feedlog-gap: 0.5rem;
+
+  /* Customization variables */
+  --feedlog-card-padding: 1.25rem;
+  --feedlog-title-font-size: 0.9375rem;
+  --feedlog-title-font-weight: 600;
+  --feedlog-body-font-size: 0.8125rem;
+  --feedlog-body-line-height: 1.5;
+  --feedlog-timestamp-font-size: 0.6875rem;
+  --feedlog-timestamp-color: var(--feedlog-muted-foreground);
+  --feedlog-card-accent-width: 3px;
+  --feedlog-icon-color: var(--feedlog-muted-foreground);
+  --feedlog-icon-color-muted: var(--feedlog-muted-foreground);
+  --feedlog-pin-color: var(--feedlog-accent-color);
+  --feedlog-upvote-icon-color: var(--feedlog-blue-600);
+  --feedlog-upvote-icon-filled-color: var(--feedlog-red-600);
+  --feedlog-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
+  --feedlog-shadow-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.1), 0 2px 6px -2px rgba(0, 0, 0, 0.08);
 }
 
 :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-upvote-icon-color: var(--feedlog-blue-400);
+  --feedlog-upvote-icon-filled-color: var(--feedlog-red-600);
+  --feedlog-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+  --feedlog-shadow-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
 }
 
 .issue-card {
   background-color: var(--feedlog-card);
   border: 1px solid var(--feedlog-border);
   border-radius: var(--feedlog-radius);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  transition: box-shadow 0.15s ease;
+  box-shadow: var(--feedlog-shadow);
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
   position: relative;
+  overflow: hidden;
+}
+
+.issue-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--feedlog-card-accent-width);
+  background: var(--feedlog-accent-color);
+}
+
+.issue-card.issue-type-bug::before {
+  background: var(--feedlog-destructive);
 }
 
 .issue-card:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--feedlog-shadow-hover);
 }
 
 .issue-content {
-  padding: 1.5rem;
+  padding: var(--feedlog-card-padding);
+  padding-left: calc(var(--feedlog-card-padding) + var(--feedlog-card-accent-width));
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.875rem;
 }
 
 .issue-header {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  align-items: flex-start;
   justify-content: space-between;
+  gap: 0.75rem;
+  min-height: 1.5rem;
+}
+
+.issue-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
 }
 
 .issue-type-badge {
@@ -71,8 +127,24 @@
 }
 
 .pinned-indicator {
-  font-size: 1rem;
-  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  color: var(--feedlog-pin-color, var(--feedlog-accent-color));
+  opacity: 0.9;
+}
+
+.pin-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: inherit;
+}
+
+.issue-timestamp {
+  font-size: var(--feedlog-timestamp-font-size);
+  color: var(--feedlog-timestamp-color);
+  white-space: nowrap;
+  flex-shrink: 0;
+  cursor: help;
 }
 
 .issue-main {
@@ -89,20 +161,86 @@
 
 .issue-title {
   color: var(--feedlog-card-foreground);
-  font-size: 0.875rem;
-  font-weight: 600;
-  margin: 0 0 0.375rem 0;
+  font-size: var(--feedlog-title-font-size);
+  font-weight: var(--feedlog-title-font-weight);
+  margin: 0 0 0.5rem 0;
   line-height: 1.4;
   word-break: break-word;
 }
 
 .issue-body {
   color: var(--feedlog-muted-foreground);
-  font-size: 0.75rem;
-  line-height: 1.625;
+  font-size: var(--feedlog-body-font-size);
+  line-height: var(--feedlog-body-line-height);
   margin: 0 0 0.75rem 0;
   word-break: break-word;
-  white-space: pre-wrap;
+}
+
+.issue-body :first-child {
+  margin-top: 0;
+}
+
+.issue-body :last-child {
+  margin-bottom: 0;
+}
+
+.issue-body p {
+  margin: 0 0 0.5em 0;
+}
+
+.issue-body p:last-child {
+  margin-bottom: 0;
+}
+
+.issue-body a {
+  color: var(--feedlog-accent-color);
+  text-decoration: none;
+}
+
+.issue-body a:hover {
+  text-decoration: underline;
+}
+
+.issue-body code {
+  background-color: var(--feedlog-muted);
+  padding: 0.125em 0.375em;
+  border-radius: 0.25rem;
+  font-size: 0.9em;
+}
+
+.issue-body pre {
+  margin: 0.5em 0;
+  padding: 0.75rem;
+  background-color: var(--feedlog-muted);
+  border-radius: 0.25rem;
+  overflow-x: auto;
+  font-size: 0.85em;
+}
+
+.issue-body pre code {
+  background: none;
+  padding: 0;
+}
+
+.issue-body strong {
+  font-weight: 600;
+}
+
+.issue-body ul,
+.issue-body ol {
+  margin: 0.5em 0;
+  padding-left: 1.25em;
+}
+
+.issue-body li {
+  margin: 0.25em 0;
+}
+
+.issue-body blockquote {
+  margin: 0.5em 0;
+  padding-left: 1em;
+  border-left: 3px solid var(--feedlog-muted);
+  color: var(--feedlog-muted-foreground);
 }
 
 .issue-repository {
@@ -111,13 +249,41 @@
   gap: 0.5rem;
   font-size: 0.75rem;
   color: var(--feedlog-muted-foreground);
-  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
 }
 
 .repo-name {
   font-weight: 500;
 }
 
+.github-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--feedlog-accent-color);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.github-link:hover {
+  text-decoration: underline;
+}
+
+.github-link-icon {
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.github-link-text {
+  white-space: nowrap;
+}
+
 .github-number {
   color: var(--feedlog-blue-600);
   font-weight: 600;
@@ -137,7 +303,7 @@
   background-color: var(--feedlog-muted);
   border: 1px solid transparent;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.2s ease;
   flex-shrink: 0;
   font-size: 0.75rem;
   font-weight: 600;
@@ -171,19 +337,15 @@
 .upvote-icon {
   width: 1rem;
   height: 1rem;
-  stroke-width: 2;
+  color: inherit;
 }
 
 .upvote-icon.filled {
-  color: var(--feedlog-red-600);
+  color: var(--feedlog-upvote-icon-filled-color);
 }
 
 .upvote-icon.outline {
-  color: var(--feedlog-blue-600);
-}
-
-:host(.dark) .upvote-icon.outline {
-  color: var(--feedlog-blue-400);
+  color: var(--feedlog-upvote-icon-color);
 }
 
 .upvote-count {
@@ -191,15 +353,3 @@
   font-weight: 600;
   color: var(--feedlog-card-foreground);
 }
-
-.issue-footer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-}
-
-.issue-date {
-  color: var(--feedlog-muted-foreground);
-  cursor: help;
-}

package/dist/collection/components/feedlog-issue/feedlog-issue.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { parseMarkdown } from "../../utils/markdown";
 /**
  * Feedlog Issue Component
  *
@@ -20,13 +21,19 @@ export class FeedlogIssueComponent {
         };
     }
     /**
-     * Renders the heart icon SVG - filled or outline based on upvote state
+     * Renders the pin icon SVG (Lucide/Feather style)
      */
-    renderHeartIcon(filled) {
+    renderPinIcon() {
+        return (h("svg", { class: "pin-icon", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M12 17v5" }), h("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16h1v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-2h1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" })));
+    }
+    /**
+     * Renders the upvote (thumbs-up) icon SVG
+     */
+    renderUpvoteIcon(filled) {
         if (filled) {
-            return (h("svg", { class: "upvote-icon filled", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })));
+            return (h("svg", { class: "upvote-icon filled", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { d: "M7 10v12" }), h("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })));
         }
-        return (h("svg", { class: "upvote-icon outline", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })));
+        return (h("svg", { class: "upvote-icon outline", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M7 10v12" }), h("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })));
     }
     /**
      * Format an ISO date string to a relative time string
@@ -52,11 +59,50 @@ export class FeedlogIssueComponent {
             return 'unknown date';
         }
     }
-    render() {
+    /**
+     * Get the status badge label for closed issues
+     */
+    getStatusBadgeLabel() {
         const { issue } = this;
+        if (issue.status === 'in_progress')
+            return 'In progress';
+        if (issue.status === 'closed' && issue.type === 'bug')
+            return 'Resolved';
+        if (issue.status === 'closed' && issue.type === 'enhancement')
+            return 'Implemented';
+        return null;
+    }
+    /**
+     * Renders the external link (GitHub) icon SVG
+     */
+    renderExternalLinkIcon() {
+        return (h("svg", { class: "github-link-icon", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), h("polyline", { points: "15 3 21 3 21 9" }), h("line", { x1: "10", y1: "14", x2: "21", y2: "3" })));
+    }
+    render() {
+        var _a, _b;
+        const { issue, issueUrl } = this;
         if (!issue)
             return null;
-        return (h(Host, { class: this.theme === 'dark' ? 'dark' : '' }, h("div", { class: "issue-card" }, h("div", { class: "issue-content" }, h("div", { class: "issue-header" }, h("div", { class: "issue-type-badge" }, issue.type === 'bug' ? (h("feedlog-badge", { variant: "destructive" }, "Bug")) : (h("feedlog-badge", { variant: "enhancement" }, "Enhancement"))), issue.pinnedAt && (h("div", { class: "pinned-indicator", title: "Pinned issue" }, "\uD83D\uDCCC"))), h("div", { class: "issue-main" }, h("div", { class: "issue-details" }, h("h3", { class: "issue-title" }, issue.title), h("p", { class: "issue-body" }, issue.body), h("div", { class: "issue-repository" }, h("span", { class: "repo-name" }, issue.repository.owner, "/", issue.repository.name))), issue.type !== 'bug' && (h("button", { class: `upvote-button ${issue.hasUpvoted ? 'upvoted' : ''}`, onClick: (e) => this.handleUpvote(e), title: issue.hasUpvoted ? 'Remove upvote' : 'Upvote this issue' }, this.renderHeartIcon(issue.hasUpvoted), h("span", { class: "upvote-count" }, issue.upvoteCount)))), h("div", { class: "issue-footer" }, h("span", { class: "issue-date", title: `Updated: ${issue.updatedAt}` }, "Updated ", this.formatDate(issue.updatedAt)), h("span", { class: "issue-date", title: `Created: ${issue.createdAt}` }, "Created ", this.formatDate(issue.createdAt)))))));
+        const wasUpdated = new Date(issue.updatedAt).getTime() > new Date(issue.createdAt).getTime();
+        const timestampLabel = wasUpdated ? 'Updated' : 'Created';
+        const timestampDate = wasUpdated ? issue.updatedAt : issue.createdAt;
+        const timestampTitle = wasUpdated
+            ? `Updated: ${issue.updatedAt}`
+            : `Created: ${issue.createdAt}`;
+        const displayTitle = (_a = issue.title) !== null && _a !== void 0 ? _a : 'Untitled';
+        const rawRepoName = issue.repository.name;
+        const repoName = rawRepoName != null &&
+            rawRepoName !== '' &&
+            rawRepoName.toLowerCase() !== 'unnamed repository'
+            ? rawRepoName
+            : null;
+        const repoTooltip = issue.repository.description != null && issue.repository.description !== ''
+            ? issue.repository.description
+            : undefined;
+        const statusBadgeLabel = this.getStatusBadgeLabel();
+        const githubUrl = (_b = issue.githubIssueLink) !== null && _b !== void 0 ? _b : issueUrl;
+        const showGithubButton = githubUrl != null && githubUrl !== '';
+        return (h(Host, { class: this.theme === 'dark' ? 'dark' : '', "data-upvoted": issue.hasUpvoted ? 'true' : 'false' }, h("div", { class: `issue-card issue-type-${issue.type}` }, h("div", { class: "issue-content" }, h("div", { class: "issue-header" }, h("div", { class: "issue-header-left" }, h("div", { class: "issue-type-badge" }, issue.type === 'bug' ? (h("feedlog-badge", { variant: "destructive" }, "Bug")) : (h("feedlog-badge", { variant: "enhancement" }, "Enhancement"))), statusBadgeLabel && (h("feedlog-badge", { variant: "secondary" }, statusBadgeLabel)), issue.pinnedAt && (h("div", { class: "pinned-indicator", title: "Pinned issue" }, this.renderPinIcon()))), h("span", { class: "issue-timestamp", title: timestampTitle }, timestampLabel, " ", this.formatDate(timestampDate))), h("div", { class: "issue-main" }, h("div", { class: "issue-details" }, h("h3", { class: "issue-title" }, displayTitle), issue.body != null && issue.body !== '' && (h("div", { class: "issue-body", innerHTML: parseMarkdown(issue.body) })), h("div", { class: "issue-repository" }, repoName != null && (h("span", { class: "repo-name", title: repoTooltip }, repoName)), showGithubButton && (h("a", { part: "github-link", class: "github-link", href: githubUrl, target: "_blank", rel: "noopener noreferrer", title: "View on GitHub" }, this.renderExternalLinkIcon(), h("span", { class: "github-link-text" }, "View on GitHub"))))), issue.type !== 'bug' && (h("button", { part: "upvote-button", class: `upvote-button ${issue.hasUpvoted ? 'upvoted' : ''}`, onClick: (e) => this.handleUpvote(e), title: issue.hasUpvoted ? 'Remove upvote' : 'Upvote this issue' }, h("slot", { name: "upvote-icon" }, this.renderUpvoteIcon(issue.hasUpvoted)), h("span", { class: "upvote-count" }, issue.upvoteCount))))))));
     }
     static get is() { return "feedlog-issue"; }
     static get encapsulation() { return "shadow"; }
@@ -95,6 +141,25 @@ export class FeedlogIssueComponent {
                 "getter": false,
                 "setter": false
             },
+            "issueUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional URL for the GitHub issue. When provided along with githubIssueLink,\nshows a \"View on GitHub\" button. Required because owner is no longer in the API response."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "issue-url"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/feedlog-issue/feedlog-issue.stories.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 const sampleBugIssue = {
     id: 'issue-bug-1',
+    githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/42',
     title: 'Charts not rendering on mobile',
     body: 'The chart components are not properly responsive on smaller screens. They overflow the container and break the layout.',
     type: 'bug',
@@ -9,8 +10,8 @@ const sampleBugIssue = {
     revision: 1,
     repository: {
         id: 'repo-1',
-        name: 'feedlog-toolkit',
-        owner: 'feedlog',
+        name: 'My App',
+        description: 'Main application repository',
     },
     updatedAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(), // 5 hours ago
     createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // 1 week ago
@@ -19,6 +20,7 @@ const sampleBugIssue = {
 };
 const sampleEnhancementIssue = {
     id: 'issue-enhancement-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. This would reduce eye strain for users working late at night.',
     type: 'enhancement',
@@ -28,7 +30,7 @@ const sampleEnhancementIssue = {
     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() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days ago
@@ -37,6 +39,32 @@ const sampleEnhancementIssue = {
 };
 const sampleUpvotedEnhancementIssue = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-enhancement-upvoted', hasUpvoted: true });
 const samplePinnedIssue = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-enhancement-pinned', pinnedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString() });
+const sampleJustCreatedIssue = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-just-created', updatedAt: new Date(Date.now() - 2 * 60 * 1000).toISOString(), createdAt: new Date(Date.now() - 2 * 60 * 1000).toISOString(), upvoteCount: 0 });
+/* --- API Change Stories (2025-02-16) --- */
+const repositoryWithNullName = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-null-repo-name', repository: {
+        id: 'repo-2',
+        name: null,
+        description: 'Repository has no display name set.',
+    } });
+const repositoryWithNullDescription = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-null-repo-desc', repository: {
+        id: 'repo-3',
+        name: 'My Public Repo',
+        description: null,
+    } });
+const repositoryWithDescription = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-repo-with-desc', repository: {
+        id: 'repo-4',
+        name: 'Main App',
+        description: 'Main application repository - hover over the name to see this.',
+    } });
+const issueInProgress = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-in-progress', status: 'in_progress', title: 'Add dark mode support' });
+const issueClosedBug = Object.assign(Object.assign({}, sampleBugIssue), { id: 'issue-closed-bug', status: 'closed', title: 'Login fails on Safari' });
+const issueClosedEnhancement = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-closed-enhancement', status: 'closed', title: 'Export data to CSV' });
+const issueWithGithubLink = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-with-gh', githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/42', title: 'Add dark mode support' });
+const issueWithGithubLinkNull = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-private-repo', githubIssueLink: null, title: 'Private repo issue', repository: {
+        id: 'repo-private',
+        name: 'Private Repo',
+        description: null,
+    } });
 const meta = {
     title: 'Components/Issue',
     component: 'feedlog-issue',
@@ -48,6 +76,10 @@ const meta = {
             control: 'object',
             description: 'The issue to display',
         },
+        issueUrl: {
+            control: 'text',
+            description: 'Optional GitHub issue URL (when githubIssueLink is not available)',
+        },
         theme: {
             control: 'select',
             options: ['light', 'dark'],
@@ -111,3 +143,83 @@ export const HighUpvoteCount = {
     },
     render: (props) => h("feedlog-issue", Object.assign({}, props)),
 };
+export const RecentlyCreated = {
+    args: {
+        issue: sampleJustCreatedIssue,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const CustomCSSVars = {
+    args: {
+        issue: sampleEnhancementIssue,
+    },
+    render: (props) => (h("feedlog-issue", 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)',
+        } }))),
+};
+/* --- API Change Stories (2025-02-16) --- */
+export const RepositoryNullName = {
+    args: {
+        issue: repositoryWithNullName,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const RepositoryNullDescription = {
+    args: {
+        issue: repositoryWithNullDescription,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const RepositoryWithDescription = {
+    args: {
+        issue: repositoryWithDescription,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const StatusInProgress = {
+    args: {
+        issue: issueInProgress,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const StatusClosedBug = {
+    args: {
+        issue: issueClosedBug,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const StatusClosedEnhancement = {
+    args: {
+        issue: issueClosedEnhancement,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const WithGithubIssueLink = {
+    args: {
+        issue: issueWithGithubLink,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const GithubIssueLinkNull = {
+    args: {
+        issue: issueWithGithubLinkNull,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};