x-post-card 0.1.0

package/README.md

@@ -0,0 +1,125 @@
+# x-post-card
+
+Embed beautifully styled X (Twitter) post cards in your React app.
+
+## Installation
+
+```bash
+npm install x-post-card
+```
+
+## Usage
+
+```tsx
+import { XCard } from 'x-post-card'
+
+function MyComponent() {
+  return (
+    <XCard
+      url="https://x.com/elonmusk/status/123456789"
+      theme="dark"
+      shadow="floating"
+      width={450}
+      radius={20}
+    />
+  )
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `url` | `string` | (required) | The X post URL to display |
+| `theme` | `'light' \| 'dim' \| 'dark'` | `'light'` | Color theme |
+| `shadow` | `'flat' \| 'raised' \| 'floating' \| 'elevated'` | `'floating'` | Shadow intensity |
+| `width` | `number` | `450` | Card width in pixels (350-700) |
+| `radius` | `number` | `20` | Border radius in pixels (0-24) |
+| `apiUrl` | `string` | (hosted API) | Custom API endpoint |
+| `className` | `string` | - | Custom className for wrapper |
+| `fallback` | `ReactNode` | Loading skeleton | Custom loading placeholder |
+| `onError` | `(error: Error) => void` | - | Error callback |
+| `onLoad` | `(post: PostData) => void` | - | Load success callback |
+
+## Themes
+
+### Light
+The default theme with a clean white background.
+
+### Dim
+A muted dark theme inspired by X's dim mode.
+
+### Dark
+A true dark theme with deep blacks.
+
+## Shadow Levels
+
+- **flat**: No shadow
+- **raised**: Subtle shadow for slight elevation
+- **floating**: Medium shadow (default)
+- **elevated**: Prominent shadow for maximum depth
+
+## Advanced Usage
+
+### Custom API Endpoint
+
+If you're self-hosting the API, you can point to your own endpoint:
+
+```tsx
+<XCard
+  url="https://x.com/user/status/123"
+  apiUrl="https://your-api.com/api/scrape-post"
+/>
+```
+
+### Custom Loading State
+
+```tsx
+<XCard
+  url="https://x.com/user/status/123"
+  fallback={<div>Loading...</div>}
+/>
+```
+
+### Error Handling
+
+```tsx
+<XCard
+  url="https://x.com/user/status/123"
+  onError={(error) => console.error('Failed to load:', error)}
+/>
+```
+
+### Using PostCard Directly
+
+For advanced use cases, you can render the card directly with your own data:
+
+```tsx
+import { PostCard, getThemeStyles } from 'x-post-card'
+
+const post = {
+  author: {
+    name: 'John Doe',
+    handle: '@johndoe',
+    avatar: 'https://...',
+    verified: true,
+  },
+  content: {
+    text: 'Hello world!',
+    images: [],
+  },
+  timestamp: new Date().toISOString(),
+}
+
+<PostCard
+  post={post}
+  theme={getThemeStyles('dark')}
+  shadow="floating"
+  width={450}
+  radius={20}
+/>
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,463 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/XCard.tsx
+
+// src/themes.ts
+var themeConfig = {
+  light: {
+    bg: "#FFFFFF",
+    textPrimary: "#000000",
+    textSecondary: "#666666",
+    border: "#E6E6E6",
+    accent: "#1D9BF0",
+    imageInnerStroke: "rgba(0, 0, 0, 0.08)",
+    shadowShallow: "0 1px 3px rgba(0, 0, 0, 0.06)",
+    shadowMedium: "0 2px 8px rgba(0, 0, 0, 0.08)",
+    shadowDeep: "0 4px 16px rgba(0, 0, 0, 0.12)"
+  },
+  dim: {
+    bg: "#15202B",
+    textPrimary: "#F2F2F2",
+    textSecondary: "#8899A6",
+    border: "#38444D",
+    accent: "#1D9BF0",
+    imageInnerStroke: "rgba(255, 255, 255, 0.08)",
+    shadowShallow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+    shadowMedium: "0 2px 8px rgba(0, 0, 0, 0.25)",
+    shadowDeep: "0 4px 16px rgba(0, 0, 0, 0.3)"
+  },
+  dark: {
+    bg: "#000000",
+    textPrimary: "#FFFFFF",
+    textSecondary: "#71767B",
+    border: "#2F3336",
+    accent: "#1D9BF0",
+    imageInnerStroke: "rgba(255, 255, 255, 0.08)",
+    shadowShallow: "0 1px 3px rgba(0, 0, 0, 0.3)",
+    shadowMedium: "0 2px 8px rgba(0, 0, 0, 0.35)",
+    shadowDeep: "0 4px 16px rgba(0, 0, 0, 0.4)"
+  }
+};
+function getThemeStyles(theme) {
+  return themeConfig[theme];
+}
+function getShadowForIntensity(theme, intensity) {
+  switch (intensity) {
+    case "flat":
+      return "none";
+    case "raised":
+      return theme.shadowShallow;
+    case "floating":
+      return theme.shadowMedium;
+    case "elevated":
+      return theme.shadowDeep;
+    default:
+      return theme.shadowMedium;
+  }
+}
+function VerifiedBadge({ color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z" })
+    }
+  );
+}
+function PostCardSkeleton({ width, radius }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width,
+        padding: 24,
+        borderRadius: radius,
+        backgroundColor: "#f3f4f6",
+        animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                width: 48,
+                height: 48,
+                borderRadius: "50%",
+                backgroundColor: "#e5e7eb"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  width: "60%",
+                  height: 16,
+                  borderRadius: 4,
+                  backgroundColor: "#e5e7eb",
+                  marginBottom: 8
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  width: "40%",
+                  height: 14,
+                  borderRadius: 4,
+                  backgroundColor: "#e5e7eb"
+                }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: 60,
+              borderRadius: 4,
+              backgroundColor: "#e5e7eb"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function PostCard({ post, theme, shadow, width, radius }) {
+  const hasImages = post.content.images.length > 0;
+  const CARD_PADDING = 24;
+  const nestedRadius = hasImages ? Math.max(0, radius - CARD_PADDING) : 16;
+  const boxShadow = getShadowForIntensity(theme, shadow);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width,
+        padding: CARD_PADDING,
+        backgroundColor: theme.bg,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: theme.border,
+        borderRadius: radius,
+        boxShadow,
+        boxSizing: "border-box",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              marginBottom: 16
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    width: 48,
+                    height: 48,
+                    borderRadius: "50%",
+                    overflow: "hidden",
+                    flexShrink: 0
+                  },
+                  children: [
+                    post.author.avatar ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: post.author.avatar,
+                        alt: post.author.name,
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover"
+                        },
+                        crossOrigin: "anonymous",
+                        referrerPolicy: "no-referrer"
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          backgroundColor: theme.border,
+                          color: theme.textSecondary,
+                          fontSize: 20,
+                          fontWeight: 700
+                        },
+                        children: post.author.name.charAt(0)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          borderRadius: "50%",
+                          boxShadow: `inset 0 0 0 1px ${theme.imageInnerStroke}`,
+                          pointerEvents: "none"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    minWidth: 0,
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    gap: 2
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          style: {
+                            fontWeight: 700,
+                            fontSize: 16,
+                            color: theme.textPrimary,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: post.author.name
+                        }
+                      ),
+                      post.author.verified && /* @__PURE__ */ jsxRuntime.jsx(VerifiedBadge, { color: theme.accent })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 14,
+                          color: theme.textSecondary
+                        },
+                        children: post.author.handle
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: hasImages ? 16 : 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: 16,
+              lineHeight: 1.5,
+              color: theme.textPrimary,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word"
+            },
+            children: post.content.text
+          }
+        ) }),
+        hasImages && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: -24, marginRight: -24, paddingLeft: 24, paddingRight: 24 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gap: 8,
+              gridTemplateColumns: post.content.images.length === 1 ? "1fr" : "1fr 1fr"
+            },
+            children: post.content.images.map((image, index) => {
+              const count = post.content.images.length;
+              const isThirdImage = count === 3 && index === 2;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    width: "100%",
+                    overflow: "hidden",
+                    borderRadius: nestedRadius,
+                    aspectRatio: count === 1 ? "16/9" : isThirdImage ? "16/9" : "1",
+                    gridColumn: isThirdImage ? "span 2" : void 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: image,
+                        alt: `Post image ${index + 1}`,
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover",
+                          objectPosition: "center"
+                        },
+                        crossOrigin: "anonymous",
+                        referrerPolicy: "no-referrer"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          borderRadius: nestedRadius,
+                          boxShadow: `inset 0 0 0 1px ${theme.imageInnerStroke}`,
+                          pointerEvents: "none"
+                        }
+                      }
+                    )
+                  ]
+                },
+                index
+              );
+            })
+          }
+        ) })
+      ]
+    }
+  );
+}
+var DEFAULT_API_URL = "https://x-post-card.vercel.app/api/scrape-post";
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function ErrorDisplay({
+  error,
+  width,
+  radius
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width,
+        padding: 24,
+        borderRadius: radius,
+        backgroundColor: "#fef2f2",
+        border: "1px solid #fecaca",
+        color: "#dc2626",
+        fontSize: 14,
+        textAlign: "center",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load post" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "8px 0 0", opacity: 0.8, fontSize: 13 }, children: error.message })
+      ]
+    }
+  );
+}
+function XCard({
+  url,
+  theme = "light",
+  shadow = "floating",
+  width = 450,
+  radius = 20,
+  apiUrl = DEFAULT_API_URL,
+  className,
+  fallback,
+  onError,
+  onLoad
+}) {
+  const [post, setPost] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const clampedWidth = clamp(width, 350, 700);
+  const clampedRadius = clamp(radius, 0, 24);
+  const themeStyles = getThemeStyles(theme);
+  react.useEffect(() => {
+    let cancelled = false;
+    async function fetchPost() {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await fetch(apiUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ url })
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error || `Failed to fetch post (${response.status})`);
+        }
+        const data = await response.json();
+        if (cancelled) return;
+        setPost(data);
+        onLoad?.(data);
+      } catch (err) {
+        if (cancelled) return;
+        const error2 = err instanceof Error ? err : new Error("Unknown error occurred");
+        setError(error2);
+        onError?.(error2);
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    fetchPost();
+    return () => {
+      cancelled = true;
+    };
+  }, [url, apiUrl, onError, onLoad]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: fallback || /* @__PURE__ */ jsxRuntime.jsx(PostCardSkeleton, { width: clampedWidth, radius: clampedRadius }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorDisplay, { error, width: clampedWidth, radius: clampedRadius }) });
+  }
+  if (post) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+      PostCard,
+      {
+        post,
+        theme: themeStyles,
+        shadow,
+        width: clampedWidth,
+        radius: clampedRadius
+      }
+    ) });
+  }
+  return null;
+}
+
+exports.PostCard = PostCard;
+exports.PostCardSkeleton = PostCardSkeleton;
+exports.XCard = XCard;
+exports.getShadowForIntensity = getShadowForIntensity;
+exports.getThemeStyles = getThemeStyles;
+exports.themeConfig = themeConfig;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/themes.ts","../src/PostCard.tsx","../src/XCard.tsx"],"names":["jsx","jsxs","useState","useEffect","error"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { Theme, ThemeStyles, ShadowIntensity } from './types'\n\n/** Theme color configurations */\nexport const themeConfig: Record<Theme, ThemeStyles> = {\n  light: {\n    bg: '#FFFFFF',\n    textPrimary: '#000000',\n    textSecondary: '#666666',\n    border: '#E6E6E6',\n    accent: '#1D9BF0',\n    imageInnerStroke: 'rgba(0, 0, 0, 0.08)',\n    shadowShallow: '0 1px 3px rgba(0, 0, 0, 0.06)',\n    shadowMedium: '0 2px 8px rgba(0, 0, 0, 0.08)',\n    shadowDeep: '0 4px 16px rgba(0, 0, 0, 0.12)',\n  },\n  dim: {\n    bg: '#15202B',\n    textPrimary: '#F2F2F2',\n    textSecondary: '#8899A6',\n    border: '#38444D',\n    accent: '#1D9BF0',\n    imageInnerStroke: 'rgba(255, 255, 255, 0.08)',\n    shadowShallow: '0 1px 3px rgba(0, 0, 0, 0.2)',\n    shadowMedium: '0 2px 8px rgba(0, 0, 0, 0.25)',\n    shadowDeep: '0 4px 16px rgba(0, 0, 0, 0.3)',\n  },\n  dark: {\n    bg: '#000000',\n    textPrimary: '#FFFFFF',\n    textSecondary: '#71767B',\n    border: '#2F3336',\n    accent: '#1D9BF0',\n    imageInnerStroke: 'rgba(255, 255, 255, 0.08)',\n    shadowShallow: '0 1px 3px rgba(0, 0, 0, 0.3)',\n    shadowMedium: '0 2px 8px rgba(0, 0, 0, 0.35)',\n    shadowDeep: '0 4px 16px rgba(0, 0, 0, 0.4)',\n  },\n}\n\n/** Get theme styles for a given theme */\nexport function getThemeStyles(theme: Theme): ThemeStyles {\n  return themeConfig[theme]\n}\n\n/** Get the appropriate shadow value for an intensity level */\nexport function getShadowForIntensity(\n  theme: ThemeStyles,\n  intensity: ShadowIntensity\n): string {\n  switch (intensity) {\n    case 'flat':\n      return 'none'\n    case 'raised':\n      return theme.shadowShallow\n    case 'floating':\n      return theme.shadowMedium\n    case 'elevated':\n      return theme.shadowDeep\n    default:\n      return theme.shadowMedium\n  }\n}\n","import * as React from 'react'\nimport type { PostData, ShadowIntensity, ThemeStyles } from './types'\nimport { getShadowForIntensity } from './themes'\n\ninterface PostCardProps {\n  post: PostData\n  theme: ThemeStyles\n  shadow: ShadowIntensity\n  width: number\n  radius: number\n}\n\n/** Verified badge SVG icon */\nfunction VerifiedBadge({ color }: { color: string }) {\n  return (\n    <svg\n      width={16}\n      height={16}\n      viewBox=\"0 0 24 24\"\n      fill={color}\n      aria-hidden=\"true\"\n      style={{ flexShrink: 0 }}\n    >\n      <path d=\"M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z\" />\n    </svg>\n  )\n}\n\n/** Default loading skeleton */\nexport function PostCardSkeleton({ width, radius }: { width: number; radius: number }) {\n  return (\n    <div\n      style={{\n        width,\n        padding: 24,\n        borderRadius: radius,\n        backgroundColor: '#f3f4f6',\n        animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n      }}\n    >\n      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>\n        <div\n          style={{\n            width: 48,\n            height: 48,\n            borderRadius: '50%',\n            backgroundColor: '#e5e7eb',\n          }}\n        />\n        <div style={{ flex: 1 }}>\n          <div\n            style={{\n              width: '60%',\n              height: 16,\n              borderRadius: 4,\n              backgroundColor: '#e5e7eb',\n              marginBottom: 8,\n            }}\n          />\n          <div\n            style={{\n              width: '40%',\n              height: 14,\n              borderRadius: 4,\n              backgroundColor: '#e5e7eb',\n            }}\n          />\n        </div>\n      </div>\n      <div\n        style={{\n          width: '100%',\n          height: 60,\n          borderRadius: 4,\n          backgroundColor: '#e5e7eb',\n        }}\n      />\n    </div>\n  )\n}\n\n/** The styled post card component */\nexport function PostCard({ post, theme, shadow, width, radius }: PostCardProps) {\n  const hasImages = post.content.images.length > 0\n\n  // Nested radii for images (concentric with card corners)\n  const CARD_PADDING = 24\n  const nestedRadius = hasImages ? Math.max(0, radius - CARD_PADDING) : 16\n\n  const boxShadow = getShadowForIntensity(theme, shadow)\n\n  return (\n    <div\n      style={{\n        width,\n        padding: CARD_PADDING,\n        backgroundColor: theme.bg,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: theme.border,\n        borderRadius: radius,\n        boxShadow,\n        boxSizing: 'border-box',\n        fontFamily:\n          '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n      }}\n    >\n      {/* Author Section */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 12,\n          marginBottom: 16,\n        }}\n      >\n        {/* Avatar */}\n        <div\n          style={{\n            position: 'relative',\n            width: 48,\n            height: 48,\n            borderRadius: '50%',\n            overflow: 'hidden',\n            flexShrink: 0,\n          }}\n        >\n          {post.author.avatar ? (\n            <img\n              src={post.author.avatar}\n              alt={post.author.name}\n              style={{\n                width: '100%',\n                height: '100%',\n                objectFit: 'cover',\n              }}\n              crossOrigin=\"anonymous\"\n              referrerPolicy=\"no-referrer\"\n            />\n          ) : (\n            <div\n              style={{\n                width: '100%',\n                height: '100%',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                backgroundColor: theme.border,\n                color: theme.textSecondary,\n                fontSize: 20,\n                fontWeight: 700,\n              }}\n            >\n              {post.author.name.charAt(0)}\n            </div>\n          )}\n          {/* Inner stroke overlay */}\n          <div\n            style={{\n              position: 'absolute',\n              inset: 0,\n              borderRadius: '50%',\n              boxShadow: `inset 0 0 0 1px ${theme.imageInnerStroke}`,\n              pointerEvents: 'none',\n            }}\n          />\n        </div>\n\n        {/* Name and handle */}\n        <div\n          style={{\n            flex: 1,\n            minWidth: 0,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'center',\n            gap: 2,\n          }}\n        >\n          <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n            <span\n              style={{\n                fontWeight: 700,\n                fontSize: 16,\n                color: theme.textPrimary,\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {post.author.name}\n            </span>\n            {post.author.verified && <VerifiedBadge color={theme.accent} />}\n          </div>\n          <span\n            style={{\n              fontSize: 14,\n              color: theme.textSecondary,\n            }}\n          >\n            {post.author.handle}\n          </span>\n        </div>\n      </div>\n\n      {/* Content */}\n      <div style={{ marginBottom: hasImages ? 16 : 0 }}>\n        <p\n          style={{\n            margin: 0,\n            fontSize: 16,\n            lineHeight: 1.5,\n            color: theme.textPrimary,\n            whiteSpace: 'pre-wrap',\n            wordBreak: 'break-word',\n          }}\n        >\n          {post.content.text}\n        </p>\n      </div>\n\n      {/* Images */}\n      {hasImages && (\n        <div style={{ marginLeft: -24, marginRight: -24, paddingLeft: 24, paddingRight: 24 }}>\n          <div\n            style={{\n              display: 'grid',\n              gap: 8,\n              gridTemplateColumns: post.content.images.length === 1 ? '1fr' : '1fr 1fr',\n            }}\n          >\n            {post.content.images.map((image, index) => {\n              const count = post.content.images.length\n              const isThirdImage = count === 3 && index === 2\n\n              return (\n                <div\n                  key={index}\n                  style={{\n                    position: 'relative',\n                    width: '100%',\n                    overflow: 'hidden',\n                    borderRadius: nestedRadius,\n                    aspectRatio: count === 1 ? '16/9' : isThirdImage ? '16/9' : '1',\n                    gridColumn: isThirdImage ? 'span 2' : undefined,\n                  }}\n                >\n                  <img\n                    src={image}\n                    alt={`Post image ${index + 1}`}\n                    style={{\n                      position: 'absolute',\n                      inset: 0,\n                      width: '100%',\n                      height: '100%',\n                      objectFit: 'cover',\n                      objectPosition: 'center',\n                    }}\n                    crossOrigin=\"anonymous\"\n                    referrerPolicy=\"no-referrer\"\n                  />\n                  {/* Inner stroke overlay */}\n                  <div\n                    style={{\n                      position: 'absolute',\n                      inset: 0,\n                      borderRadius: nestedRadius,\n                      boxShadow: `inset 0 0 0 1px ${theme.imageInnerStroke}`,\n                      pointerEvents: 'none',\n                    }}\n                  />\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n","'use client'\n\nimport * as React from 'react'\nimport { useState, useEffect } from 'react'\nimport type { XCardProps, PostData, Theme, ShadowIntensity } from './types'\nimport { getThemeStyles } from './themes'\nimport { PostCard, PostCardSkeleton } from './PostCard'\n\n/** Default API endpoint for fetching post data */\nconst DEFAULT_API_URL = 'https://x-post-card.vercel.app/api/scrape-post'\n\n/** Clamp a value between min and max */\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Default error display */\nfunction ErrorDisplay({\n  error,\n  width,\n  radius,\n}: {\n  error: Error\n  width: number\n  radius: number\n}) {\n  return (\n    <div\n      style={{\n        width,\n        padding: 24,\n        borderRadius: radius,\n        backgroundColor: '#fef2f2',\n        border: '1px solid #fecaca',\n        color: '#dc2626',\n        fontSize: 14,\n        textAlign: 'center',\n        fontFamily:\n          '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n      }}\n    >\n      <p style={{ margin: 0, fontWeight: 500 }}>Failed to load post</p>\n      <p style={{ margin: '8px 0 0', opacity: 0.8, fontSize: 13 }}>{error.message}</p>\n    </div>\n  )\n}\n\n/**\n * XCard - Embed beautifully styled X (Twitter) post cards in your React app.\n *\n * @example\n * ```tsx\n * import { XCard } from 'x-post-card'\n *\n * function MyComponent() {\n *   return (\n *     <XCard\n *       url=\"https://x.com/elonmusk/status/123456789\"\n *       theme=\"dark\"\n *       shadow=\"floating\"\n *       width={450}\n *       radius={20}\n *     />\n *   )\n * }\n * ```\n */\nexport function XCard({\n  url,\n  theme = 'light',\n  shadow = 'floating',\n  width = 450,\n  radius = 20,\n  apiUrl = DEFAULT_API_URL,\n  className,\n  fallback,\n  onError,\n  onLoad,\n}: XCardProps) {\n  const [post, setPost] = useState<PostData | null>(null)\n  const [error, setError] = useState<Error | null>(null)\n  const [loading, setLoading] = useState(true)\n\n  // Clamp values to valid ranges\n  const clampedWidth = clamp(width, 350, 700)\n  const clampedRadius = clamp(radius, 0, 24)\n\n  // Get theme styles\n  const themeStyles = getThemeStyles(theme as Theme)\n\n  useEffect(() => {\n    let cancelled = false\n\n    async function fetchPost() {\n      setLoading(true)\n      setError(null)\n\n      try {\n        const response = await fetch(apiUrl, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          body: JSON.stringify({ url }),\n        })\n\n        if (!response.ok) {\n          const errorData = await response.json().catch(() => ({}))\n          throw new Error(errorData.error || `Failed to fetch post (${response.status})`)\n        }\n\n        const data = await response.json()\n\n        if (cancelled) return\n\n        setPost(data)\n        onLoad?.(data)\n      } catch (err) {\n        if (cancelled) return\n\n        const error = err instanceof Error ? err : new Error('Unknown error occurred')\n        setError(error)\n        onError?.(error)\n      } finally {\n        if (!cancelled) {\n          setLoading(false)\n        }\n      }\n    }\n\n    fetchPost()\n\n    return () => {\n      cancelled = true\n    }\n  }, [url, apiUrl, onError, onLoad])\n\n  // Loading state\n  if (loading) {\n    return (\n      <div className={className}>\n        {fallback || <PostCardSkeleton width={clampedWidth} radius={clampedRadius} />}\n      </div>\n    )\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className={className}>\n        <ErrorDisplay error={error} width={clampedWidth} radius={clampedRadius} />\n      </div>\n    )\n  }\n\n  // Success state\n  if (post) {\n    return (\n      <div className={className}>\n        <PostCard\n          post={post}\n          theme={themeStyles}\n          shadow={shadow as ShadowIntensity}\n          width={clampedWidth}\n          radius={clampedRadius}\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"]}