@outstand-so/ui 0.1.9 → 0.1.10

package/dist/index.cjs

@@ -0,0 +1,2302 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AccountCard: () => AccountCard,
+  AccountsList: () => AccountsList,
+  ConnectAccountButton: () => ConnectAccountButton,
+  ConnectAccountButtonGroup: () => ConnectAccountButtonGroup,
+  CreatePostForm: () => CreatePostForm,
+  MediaGallery: () => MediaGallery,
+  MediaList: () => MediaList,
+  MediaPreview: () => MediaPreview,
+  MediaUploader: () => MediaUploader,
+  NetworkConfigPanel: () => NetworkConfigPanel,
+  NetworkSelector: () => NetworkSelector,
+  OAuthCallback: () => OAuthCallback,
+  OutstandProvider: () => OutstandProvider,
+  PageSelector: () => PageSelector,
+  PostComposer: () => PostComposer,
+  PostMetrics: () => PostMetrics,
+  PostMetricsCard: () => PostMetricsCard,
+  PostScheduler: () => PostScheduler,
+  PostsWithMetrics: () => PostsWithMetrics,
+  useAccounts: () => useAccounts,
+  useMediaList: () => useMediaList,
+  useMediaUpload: () => useMediaUpload,
+  useOAuthFlow: () => useOAuthFlow,
+  useOutstand: () => useOutstand,
+  useOutstandApi: () => useOutstandApi,
+  usePostMetrics: () => usePostMetrics,
+  usePosts: () => usePosts
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context/outstand-provider.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var OutstandContext = React.createContext(null);
+function OutstandProvider({
+  children,
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  tenantId,
+  initialAccounts = []
+}) {
+  const [accounts, setAccounts] = React.useState(initialAccounts);
+  const [selectedAccounts, setSelectedAccounts] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const value = React.useMemo(
+    () => ({
+      apiKey,
+      baseUrl,
+      tenantId,
+      accounts,
+      setAccounts,
+      selectedAccounts,
+      setSelectedAccounts,
+      isLoading,
+      setIsLoading
+    }),
+    [apiKey, baseUrl, tenantId, accounts, selectedAccounts, isLoading]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutstandContext.Provider, { value, children });
+}
+function useOutstand() {
+  const context = React.useContext(OutstandContext);
+  if (!context) {
+    throw new Error("useOutstand must be used within an OutstandProvider");
+  }
+  return context;
+}
+
+// src/hooks/use-outstand-api.ts
+var React2 = __toESM(require("react"), 1);
+function useOutstandApi({ apiKey, baseUrl = "https://api.outstand.so/v1" }) {
+  const headers = React2.useMemo(
+    () => ({
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`
+    }),
+    [apiKey]
+  );
+  const request = React2.useCallback(
+    async function makeRequest(endpoint, options = {}) {
+      const url = `${baseUrl}${endpoint}`;
+      try {
+        const response = await fetch(url, {
+          ...options,
+          headers: {
+            ...headers,
+            ...options.headers
+          }
+        });
+        const data = await response.json();
+        if (!response.ok) {
+          return {
+            success: false,
+            error: data.error || "Request failed",
+            message: data.message,
+            details: data.details
+          };
+        }
+        return data;
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : "Network error"
+        };
+      }
+    },
+    [baseUrl, headers]
+  );
+  const get = React2.useCallback(
+    function getRequest(endpoint) {
+      return request(endpoint, { method: "GET" });
+    },
+    [request]
+  );
+  const post = React2.useCallback(
+    function postRequest(endpoint, body) {
+      return request(endpoint, {
+        method: "POST",
+        body: JSON.stringify(body)
+      });
+    },
+    [request]
+  );
+  const patch = React2.useCallback(
+    function patchRequest(endpoint, body) {
+      return request(endpoint, {
+        method: "PATCH",
+        body: JSON.stringify(body)
+      });
+    },
+    [request]
+  );
+  const del = React2.useCallback(
+    function deleteRequest(endpoint) {
+      return request(endpoint, { method: "DELETE" });
+    },
+    [request]
+  );
+  return { get, post, patch, delete: del, request };
+}
+
+// src/hooks/use-accounts.ts
+var React3 = __toESM(require("react"), 1);
+var import_swr = __toESM(require("swr"), 1);
+function useAccounts({
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  tenantId,
+  limit = 50,
+  offset = 0
+}) {
+  const api = useOutstandApi({ apiKey, baseUrl });
+  const queryParams = new URLSearchParams({
+    limit: limit.toString(),
+    offset: offset.toString()
+  });
+  if (tenantId) {
+    queryParams.set("tenantId", tenantId);
+  }
+  const { data, error, isLoading, mutate } = (0, import_swr.default)(
+    `/social-accounts?${queryParams.toString()}`,
+    async () => {
+      const response = await api.get(`/social-accounts?${queryParams.toString()}`);
+      return {
+        accounts: response.data || [],
+        count: response.data?.length || 0,
+        limit,
+        offset
+      };
+    },
+    { revalidateOnFocus: false }
+  );
+  const accounts = data?.accounts || [];
+  const total = data?.count || 0;
+  const disconnectAccount = React3.useCallback(
+    async (accountId) => {
+      const response = await api.delete(`/social-accounts/${accountId}`);
+      if (response.success) {
+        mutate();
+      }
+      return response;
+    },
+    [api, mutate]
+  );
+  return {
+    accounts,
+    total,
+    isLoading,
+    error,
+    refetch: mutate,
+    disconnectAccount,
+    hasNextPage: offset + limit < total,
+    hasPrevPage: offset > 0
+  };
+}
+
+// src/hooks/use-posts.ts
+var React4 = __toESM(require("react"), 1);
+var import_swr2 = __toESM(require("swr"), 1);
+function usePosts({
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  socialAccountId,
+  limit = 50,
+  offset = 0
+}) {
+  const api = useOutstandApi({ apiKey, baseUrl });
+  const queryParams = new URLSearchParams({
+    limit: limit.toString(),
+    offset: offset.toString()
+  });
+  if (socialAccountId) {
+    queryParams.set("social_account_id", socialAccountId);
+  }
+  const { data, error, isLoading, mutate } = (0, import_swr2.default)(
+    `/posts?${queryParams.toString()}`,
+    async () => {
+      const response = await api.get(`/posts?${queryParams.toString()}`);
+      return {
+        posts: response.data || [],
+        pagination: {
+          limit,
+          offset,
+          total: response.count || 0
+        }
+      };
+    },
+    { revalidateOnFocus: false }
+  );
+  const posts = data?.posts || [];
+  const total = data?.pagination?.total || 0;
+  const createPost = React4.useCallback(
+    async (postData) => {
+      const response = await api.post("/posts/", postData);
+      if (response.success) {
+        mutate();
+      }
+      return response;
+    },
+    [api, mutate]
+  );
+  const deletePost = React4.useCallback(
+    async (postId) => {
+      const response = await api.delete(`/posts/${postId}`);
+      if (response.success) {
+        mutate();
+      }
+      return response;
+    },
+    [api, mutate]
+  );
+  return {
+    posts,
+    total,
+    isLoading,
+    error,
+    refetch: mutate,
+    createPost,
+    deletePost,
+    hasNextPage: offset + limit < total,
+    hasPrevPage: offset > 0
+  };
+}
+
+// src/hooks/use-post-metrics.ts
+var import_swr3 = __toESM(require("swr"), 1);
+function usePostMetrics({
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  postId,
+  refreshInterval
+}) {
+  const api = useOutstandApi({ apiKey, baseUrl });
+  const { data, error, isLoading, mutate } = (0, import_swr3.default)(
+    postId ? `post-metrics-${postId}` : null,
+    async () => {
+      const response = await api.get(`/posts/${postId}/analytics`);
+      return response;
+    },
+    {
+      revalidateOnFocus: false,
+      refreshInterval,
+      keepPreviousData: false
+    }
+  );
+  const analytics = data?.success ? {
+    post: data.post,
+    metrics_by_account: data.metrics_by_account ?? [],
+    aggregated_metrics: data.aggregated_metrics ?? {
+      total_likes: 0,
+      total_comments: 0,
+      total_shares: 0,
+      total_reach: 0,
+      total_views: 0,
+      total_impressions: 0,
+      average_engagement_rate: 0
+    }
+  } : null;
+  return {
+    analytics,
+    isLoading,
+    error,
+    refetch: mutate
+  };
+}
+
+// src/hooks/use-media-upload.ts
+var React5 = __toESM(require("react"), 1);
+function useMediaUpload({ apiKey, baseUrl = "https://api.outstand.so/v1" }) {
+  const [isUploading, setIsUploading] = React5.useState(false);
+  const [uploadProgress, setUploadProgress] = React5.useState({});
+  const api = useOutstandApi({ apiKey, baseUrl });
+  const getUploadUrl = React5.useCallback(
+    async (filename, contentType) => {
+      return api.post("/media/upload", { filename, content_type: contentType });
+    },
+    [api]
+  );
+  const confirmUpload = React5.useCallback(
+    async (mediaId, size) => {
+      return api.post(`/media/${mediaId}/confirm`, size ? { size } : {});
+    },
+    [api]
+  );
+  const uploadFile = React5.useCallback(
+    async (file) => {
+      setIsUploading(true);
+      setUploadProgress((prev) => ({ ...prev, [file.name]: 0 }));
+      try {
+        const urlResponse = await getUploadUrl(file.name, file.type);
+        if (!urlResponse.success || !urlResponse.data) {
+          throw new Error(urlResponse.error || "Failed to get upload URL");
+        }
+        const { id, upload_url } = urlResponse.data;
+        setUploadProgress((prev) => ({ ...prev, [file.name]: 50 }));
+        const uploadResponse = await fetch(upload_url, {
+          method: "PUT",
+          body: file,
+          headers: {
+            "Content-Type": file.type
+          }
+        });
+        if (!uploadResponse.ok) {
+          throw new Error("Failed to upload file");
+        }
+        setUploadProgress((prev) => ({ ...prev, [file.name]: 75 }));
+        const confirmResponse = await confirmUpload(id, file.size);
+        if (!confirmResponse.success || !confirmResponse.data) {
+          throw new Error(confirmResponse.error || "Failed to confirm upload");
+        }
+        setUploadProgress((prev) => ({ ...prev, [file.name]: 100 }));
+        const confirmedMedia = confirmResponse.data;
+        return {
+          id: confirmedMedia.id,
+          url: confirmedMedia.url,
+          filename: confirmedMedia.filename,
+          contentType: confirmedMedia.content_type,
+          size: confirmedMedia.size,
+          status: confirmedMedia.status,
+          created_at: confirmedMedia.created_at,
+          expires_at: confirmedMedia.expires_at
+        };
+      } catch (error) {
+        console.error("Upload error:", error);
+        return null;
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [getUploadUrl, confirmUpload]
+  );
+  const uploadFiles = React5.useCallback(
+    async (files) => {
+      const results = await Promise.all(files.map(uploadFile));
+      return results.filter((r) => r !== null);
+    },
+    [uploadFile]
+  );
+  return {
+    uploadFile,
+    uploadFiles,
+    getUploadUrl,
+    confirmUpload,
+    // Exported confirmUpload in case users need it directly
+    isUploading,
+    uploadProgress
+  };
+}
+
+// src/hooks/use-media-list.ts
+var import_swr4 = __toESM(require("swr"), 1);
+function useMediaList({
+  apiKey,
+  baseUrl,
+  limit = 50,
+  offset = 0,
+  enabled = true
+}) {
+  const api = useOutstandApi({ apiKey, baseUrl });
+  const { data, error, isLoading, mutate } = (0, import_swr4.default)(
+    enabled ? `media-list-${limit}-${offset}` : null,
+    async () => {
+      const response = await api.get(`/media?limit=${limit}&offset=${offset}`);
+      return response;
+    },
+    {
+      revalidateOnFocus: false,
+      keepPreviousData: false
+    }
+  );
+  const deleteMedia = async (mediaId) => {
+    await api.delete(`/media/${mediaId}`);
+    mutate();
+  };
+  return {
+    media: data?.data ?? [],
+    pagination: data?.pagination ?? null,
+    isLoading,
+    error: error ?? null,
+    refresh: () => mutate(),
+    deleteMedia
+  };
+}
+
+// src/hooks/use-oauth-flow.ts
+var React6 = __toESM(require("react"), 1);
+function useOAuthFlow({ apiKey, baseUrl = "https://api.outstand.so/v1" }) {
+  const [isLoading, setIsLoading] = React6.useState(false);
+  const api = useOutstandApi({ apiKey, baseUrl });
+  const getAuthUrl = React6.useCallback(
+    async (network, redirectUri, tenantId) => {
+      setIsLoading(true);
+      try {
+        const response = await api.post(`/social-networks/${network}/auth-url`, {
+          redirect_uri: redirectUri,
+          tenant_id: tenantId
+        });
+        return response;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [api]
+  );
+  const getPendingConnection = React6.useCallback(
+    async (sessionToken) => {
+      setIsLoading(true);
+      try {
+        return api.get(`/social-accounts/pending/${sessionToken}`);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [api]
+  );
+  const finalizeConnection = React6.useCallback(
+    async (sessionToken, selectedPageIds) => {
+      setIsLoading(true);
+      try {
+        return api.post(`/social-accounts/pending/${sessionToken}/finalize`, {
+          selectedPageIds
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [api]
+  );
+  return {
+    getAuthUrl,
+    getPendingConnection,
+    finalizeConnection,
+    isLoading
+  };
+}
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+function formatNumber(num) {
+  if (num >= 1e6) {
+    return (num / 1e6).toFixed(1) + "M";
+  }
+  if (num >= 1e3) {
+    return (num / 1e3).toFixed(1) + "K";
+  }
+  return num.toString();
+}
+function formatDate(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(new Date(date));
+}
+function getNetworkColor(network) {
+  const colors = {
+    x: "#000000",
+    twitter: "#1DA1F2",
+    facebook: "#1877F2",
+    instagram: "#E4405F",
+    linkedin: "#0A66C2",
+    youtube: "#FF0000",
+    tiktok: "#000000",
+    threads: "#000000",
+    bluesky: "#0085FF",
+    pinterest: "#E60023"
+  };
+  return colors[network.toLowerCase()] || "#6B7280";
+}
+function getNetworkDisplayName(network) {
+  const names = {
+    x: "X (Twitter)",
+    twitter: "Twitter",
+    facebook: "Facebook",
+    instagram: "Instagram",
+    linkedin: "LinkedIn",
+    youtube: "YouTube",
+    tiktok: "TikTok",
+    threads: "Threads",
+    bluesky: "Bluesky",
+    pinterest: "Pinterest"
+  };
+  return names[network.toLowerCase()] || network;
+}
+
+// src/components/icons/network-icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function NetworkIcon({ network, className }) {
+  const iconClass = cn("shrink-0", className);
+  switch (network.toLowerCase()) {
+    case "x":
+    case "twitter":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
+    case "facebook":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) });
+    case "instagram":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" }) });
+    case "linkedin":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) });
+    case "youtube":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) });
+    case "tiktok":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" }) });
+    case "threads":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.96-.065-1.182.408-2.256 1.332-3.023.88-.73 2.132-1.13 3.628-1.154 1.041-.017 2.004.098 2.877.343-.058-.663-.22-1.207-.485-1.63-.396-.635-1.028-.96-1.878-.967h-.061c-.696 0-1.548.196-2.011.627l-1.378-1.56c.769-.68 1.965-1.185 3.328-1.185h.09c1.49.016 2.6.551 3.297 1.59.507.756.792 1.73.853 2.895.634.235 1.19.54 1.658.916 1.09.878 1.796 2.087 2.047 3.5.306 1.73.003 3.603-1.413 5.013-1.884 1.877-4.326 2.715-7.691 2.739z" }) });
+    case "bluesky":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" }) });
+    case "pinterest":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" }) });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: iconClass, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" }) });
+  }
+}
+
+// src/components/connect-account/connect-account-button.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ConnectAccountButton({
+  network,
+  redirectUri,
+  tenantId,
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  onSuccess,
+  onError,
+  className,
+  children,
+  variant = "default",
+  size = "md"
+}) {
+  const { getAuthUrl, isLoading } = useOAuthFlow({ apiKey, baseUrl });
+  const handleConnect = async () => {
+    try {
+      const response = await getAuthUrl(network, redirectUri, tenantId);
+      if (response.success && response.data?.auth_url) {
+        onSuccess?.(response.data.auth_url);
+        window.location.href = response.data.auth_url;
+      } else {
+        throw new Error(response.error || "Failed to get authentication URL");
+      }
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error("Connection failed"));
+    }
+  };
+  const networkColor = getNetworkColor(network);
+  const displayName = getNetworkDisplayName(network);
+  const sizeClasses = {
+    sm: "px-3 py-1.5 text-sm gap-1.5",
+    md: "px-4 py-2 text-sm gap-2",
+    lg: "px-6 py-3 text-base gap-2.5"
+  };
+  const variantClasses = {
+    default: "text-white hover:opacity-90",
+    outline: "bg-transparent border-2 hover:opacity-80",
+    ghost: "bg-transparent hover:bg-muted"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      onClick: handleConnect,
+      disabled: isLoading,
+      className: cn(
+        "inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200",
+        "focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+        sizeClasses[size],
+        variantClasses[variant],
+        className
+      ),
+      style: {
+        backgroundColor: variant === "default" ? networkColor : "transparent",
+        borderColor: variant === "outline" ? networkColor : "transparent",
+        color: variant === "default" ? "white" : networkColor
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NetworkIcon, { network, className: size === "sm" ? "h-4 w-4" : size === "lg" ? "h-6 w-6" : "h-5 w-5" }),
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "animate-pulse", children: "Connecting..." }) : children || /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+          "Connect ",
+          displayName
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/connect-account/connect-account-button-group.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ConnectAccountButtonGroup({
+  networks,
+  redirectUri,
+  tenantId,
+  apiKey,
+  baseUrl,
+  onSuccess,
+  onError,
+  className,
+  variant = "default",
+  size = "md",
+  layout = "vertical"
+}) {
+  const layoutClasses = {
+    horizontal: "flex flex-row flex-wrap gap-3",
+    vertical: "flex flex-col gap-3",
+    grid: "grid grid-cols-2 sm:grid-cols-3 gap-3"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn(layoutClasses[layout], className), children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ConnectAccountButton,
+    {
+      network,
+      redirectUri,
+      tenantId,
+      apiKey,
+      baseUrl,
+      variant,
+      size,
+      onSuccess: (authUrl) => onSuccess?.(network, authUrl),
+      onError: (error) => onError?.(network, error)
+    },
+    network
+  )) });
+}
+
+// src/components/media/media-uploader.tsx
+var React7 = __toESM(require("react"), 1);
+
+// src/components/media/media-preview.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function MediaPreview({ media, onRemove, progress, className }) {
+  const isVideo = media.contentType?.startsWith("video/") || media.filename.match(/\.(mp4|mov|webm|avi)$/i);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("relative group rounded-lg overflow-hidden bg-muted aspect-square", className), children: [
+    isVideo ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("video", { src: media.url, className: "w-full h-full object-cover", muted: true, playsInline: true }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: media.url || "/placeholder.svg", alt: media.filename, className: "w-full h-full object-cover" }),
+    progress !== void 0 && progress < 100 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-16 h-16 relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: "w-full h-full transform -rotate-90", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "32", cy: "32", r: "28", fill: "none", stroke: "currentColor", strokeWidth: "4", className: "text-muted" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "circle",
+          {
+            cx: "32",
+            cy: "32",
+            r: "28",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeDasharray: `${progress / 100 * 176} 176`,
+            className: "text-primary"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium", children: [
+        progress,
+        "%"
+      ] })
+    ] }) }),
+    onRemove && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        onClick: onRemove,
+        className: "absolute top-2 right-2 p-1.5 rounded-full bg-background/80 text-foreground opacity-0 group-hover:opacity-100 transition-opacity hover:bg-background",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+      }
+    ),
+    isVideo && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute bottom-2 left-2 px-2 py-0.5 rounded bg-background/80 text-xs", children: "Video" })
+  ] });
+}
+
+// src/components/media/media-uploader.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function MediaUploader({
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  onUploadComplete,
+  onUploadError,
+  maxFiles = 4,
+  acceptedTypes = ["image/*", "video/*"],
+  className
+}) {
+  const [files, setFiles] = React7.useState([]);
+  const [isDragging, setIsDragging] = React7.useState(false);
+  const fileInputRef = React7.useRef(null);
+  const { uploadFiles, isUploading, uploadProgress } = useMediaUpload({ apiKey, baseUrl });
+  const handleFileSelect = async (selectedFiles) => {
+    if (!selectedFiles) return;
+    const fileArray = Array.from(selectedFiles).slice(0, maxFiles - files.length);
+    try {
+      const uploadedFiles = await uploadFiles(fileArray);
+      const newFiles = [...files, ...uploadedFiles];
+      setFiles(newFiles);
+      onUploadComplete?.(newFiles);
+    } catch (error) {
+      onUploadError?.(error instanceof Error ? error : new Error("Upload failed"));
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFileSelect(e.dataTransfer.files);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleRemove = (index) => {
+    const newFiles = files.filter((_, i) => i !== index);
+    setFiles(newFiles);
+    onUploadComplete?.(newFiles);
+  };
+  const canAddMore = files.length < maxFiles;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("space-y-4", className), children: [
+    canAddMore && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onClick: () => fileInputRef.current?.click(),
+        className: cn(
+          "border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors",
+          isDragging ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-muted-foreground/50",
+          isUploading && "opacity-50 pointer-events-none"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              accept: acceptedTypes.join(","),
+              onChange: (e) => handleFileSelect(e.target.files),
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "h-10 w-10 text-muted-foreground", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.5,
+                d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-muted-foreground", children: isUploading ? "Uploading..." : "Drag & drop or click to upload" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-xs text-muted-foreground/70", children: [
+              maxFiles - files.length,
+              " of ",
+              maxFiles,
+              " slots available"
+            ] })
+          ] })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      MediaPreview,
+      {
+        media: file,
+        onRemove: () => handleRemove(index),
+        progress: uploadProgress[file.filename]
+      },
+      file.id
+    )) })
+  ] });
+}
+
+// src/components/media/media-gallery.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function MediaGallery({ media, onRemove, className, columns = 4 }) {
+  const gridCols = {
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-4"
+  };
+  if (media.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("border border-dashed rounded-lg p-8 text-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-muted-foreground", children: "No media uploaded" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("grid gap-3", gridCols[columns], className), children: media.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MediaPreview, { media: file, onRemove: onRemove ? () => onRemove(index) : void 0 }, file.id)) });
+}
+
+// src/components/media/media-list.tsx
+var import_react = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function MediaList({
+  apiKey,
+  baseUrl,
+  pageSize = 20,
+  offset: initialOffset = 0,
+  onMediaSelect,
+  onMediaDelete,
+  className,
+  columns = 4,
+  selectable = false
+}) {
+  const [offset, setOffset] = (0, import_react.useState)(initialOffset);
+  const [selectedMediaIds, setSelectedMediaIds] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+  const { media, pagination, isLoading, error, refresh, deleteMedia } = useMediaList({
+    apiKey,
+    baseUrl,
+    limit: pageSize,
+    offset
+  });
+  const gridCols = {
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-4"
+  };
+  const handleDelete = async (mediaId) => {
+    try {
+      await deleteMedia(mediaId);
+      onMediaDelete?.(mediaId);
+    } catch (err) {
+      console.error("Failed to delete media:", err);
+    }
+  };
+  const handleSelect = (mediaFile) => {
+    if (!selectable) {
+      onMediaSelect?.(mediaFile);
+      return;
+    }
+    const newSelected = new Set(selectedMediaIds);
+    if (newSelected.has(mediaFile.id)) {
+      newSelected.delete(mediaFile.id);
+    } else {
+      newSelected.add(mediaFile.id);
+    }
+    setSelectedMediaIds(newSelected);
+    onMediaSelect?.(mediaFile);
+  };
+  const totalCount = pagination?.count ?? 0;
+  const currentPage = Math.floor(offset / pageSize) + 1;
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const goToPage = (page) => {
+    const newOffset = (page - 1) * pageSize;
+    setOffset(newOffset);
+  };
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("border border-destructive/50 rounded-lg p-6 text-center", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-destructive", children: "Failed to load media files" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: refresh, className: "mt-2 text-sm text-primary hover:underline", children: "Try again" })
+    ] });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("space-y-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("grid gap-3", gridCols[columns]), children: Array.from({ length: pageSize > 8 ? 8 : pageSize }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "aspect-square bg-muted animate-pulse rounded-lg" }, i)) }) });
+  }
+  if (media.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("border border-dashed rounded-lg p-8 text-center", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "svg",
+        {
+          className: "mx-auto h-12 w-12 text-muted-foreground/50",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 1.5,
+              d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: "No media files found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "mt-1 text-xs text-muted-foreground/70", children: "Upload media files to see them here" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
+        totalCount,
+        " ",
+        totalCount === 1 ? "file" : "files"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: refresh, className: "text-sm text-primary hover:underline", children: "Refresh" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("grid gap-3", gridCols[columns]), children: media.map((file) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className: cn(
+          "relative group",
+          selectable && "cursor-pointer",
+          selectable && selectedMediaIds.has(file.id) && "ring-2 ring-primary rounded-lg"
+        ),
+        onClick: () => handleSelect(file),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MediaPreview, { media: file, onRemove: onMediaDelete ? () => handleDelete(file.id) : void 0 }),
+          selectable && selectedMediaIds.has(file.id) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute top-2 left-2 w-5 h-5 bg-primary rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "w-3 h-3 text-primary-foreground", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-b-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-white truncate", children: file.filename }),
+            file.size && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-white/70", children: formatFileSize(file.size) })
+          ] })
+        ]
+      },
+      file.id
+    )) }),
+    totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-center gap-2 pt-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          onClick: () => goToPage(currentPage - 1),
+          disabled: currentPage === 1,
+          className: "px-3 py-1.5 text-sm border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-1", children: generatePageNumbers(currentPage, totalPages).map(
+        (page, idx) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "px-2 text-muted-foreground", children: "..." }, `ellipsis-${idx}`) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            onClick: () => goToPage(page),
+            className: cn(
+              "w-8 h-8 text-sm rounded-md transition-colors",
+              currentPage === page ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+            ),
+            children: page
+          },
+          page
+        )
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          onClick: () => goToPage(currentPage + 1),
+          disabled: currentPage === totalPages,
+          className: "px-3 py-1.5 text-sm border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors",
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function generatePageNumbers(current, total) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages = [];
+  if (current <= 4) {
+    pages.push(1, 2, 3, 4, 5, "...", total);
+  } else if (current >= total - 3) {
+    pages.push(1, "...", total - 4, total - 3, total - 2, total - 1, total);
+  } else {
+    pages.push(1, "...", current - 1, current, current + 1, "...", total);
+  }
+  return pages;
+}
+
+// src/components/posts/create-post-form.tsx
+var React10 = __toESM(require("react"), 1);
+
+// src/components/posts/post-composer.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var CHARACTER_LIMITS = {
+  x: 280,
+  twitter: 280,
+  threads: 500,
+  linkedin: 3e3,
+  facebook: 63206,
+  instagram: 2200,
+  youtube: 5e3,
+  tiktok: 2200,
+  bluesky: 300,
+  pinterest: 500
+};
+function PostComposer({
+  value,
+  onChange,
+  selectedAccounts = [],
+  placeholder = "What's happening?",
+  maxLength,
+  className
+}) {
+  const networks = [...new Set(selectedAccounts.map((a) => a.network))];
+  const effectiveMaxLength = maxLength || (networks.length > 0 ? Math.min(...networks.map((n) => CHARACTER_LIMITS[n] || 5e3)) : 5e3);
+  const charCount = value.length;
+  const isOverLimit = charCount > effectiveMaxLength;
+  const warningThreshold = effectiveMaxLength * 0.9;
+  const limitingNetworks = networks.filter((n) => CHARACTER_LIMITS[n] && value.length > CHARACTER_LIMITS[n]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "textarea",
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        rows: 4,
+        className: cn(
+          "w-full px-4 py-3 rounded-lg border resize-none transition-colors",
+          "bg-background text-foreground placeholder:text-muted-foreground",
+          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          isOverLimit ? "border-destructive" : "border-input"
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-2", children: limitingNetworks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-destructive text-xs", children: [
+        "Exceeds ",
+        getNetworkDisplayName(network),
+        " limit (",
+        CHARACTER_LIMITS[network],
+        ")"
+      ] }, network)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "span",
+        {
+          className: cn(
+            "font-mono",
+            isOverLimit ? "text-destructive" : charCount >= warningThreshold ? "text-amber-500" : "text-muted-foreground"
+          ),
+          children: [
+            charCount,
+            "/",
+            effectiveMaxLength
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/posts/network-selector.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function NetworkSelector({ accounts, selectedIds, onChange, className }) {
+  const toggleAccount = (id) => {
+    if (selectedIds.includes(id)) {
+      onChange(selectedIds.filter((i) => i !== id));
+    } else {
+      onChange([...selectedIds, id]);
+    }
+  };
+  const selectAll = () => {
+    onChange(accounts.map((a) => a.id));
+  };
+  const deselectAll = () => {
+    onChange([]);
+  };
+  if (accounts.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("border border-dashed rounded-lg p-6 text-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-muted-foreground", children: "No accounts connected" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-2 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: selectAll, className: "text-primary hover:underline", children: "Select all" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-muted-foreground", children: "\xB7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: deselectAll, className: "text-primary hover:underline", children: "Deselect all" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: accounts.map((account) => {
+      const isSelected = selectedIds.includes(account.id);
+      const networkColor = getNetworkColor(account.network);
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggleAccount(account.id),
+          className: cn(
+            "flex items-center gap-3 p-3 rounded-lg border transition-all",
+            isSelected ? "border-primary bg-primary/5" : "border-input hover:border-muted-foreground/50"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                className: "w-10 h-10 rounded-full flex items-center justify-center text-white",
+                style: { backgroundColor: networkColor },
+                children: account.profile_picture_url ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "img",
+                  {
+                    src: account.profile_picture_url || "/placeholder.svg",
+                    alt: account.nickname,
+                    className: "w-full h-full rounded-full object-cover"
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NetworkIcon, { network: account.network, className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 text-left min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "font-medium truncate", children: account.nickname }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-xs text-muted-foreground truncate", children: [
+                "@",
+                account.username
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                className: cn(
+                  "w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",
+                  isSelected ? "border-primary bg-primary" : "border-muted-foreground/30"
+                ),
+                children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-3 h-3 text-primary-foreground", fill: "currentColor", viewBox: "0 0 12 12", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" }) })
+              }
+            )
+          ]
+        },
+        account.id
+      );
+    }) })
+  ] });
+}
+
+// src/components/posts/network-config-panel.tsx
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function NetworkConfigPanel({ networks, configs, onChange, className }) {
+  const [activeTab, setActiveTab] = React8.useState(networks[0]);
+  React8.useEffect(() => {
+    if (!networks.includes(activeTab)) {
+      setActiveTab(networks[0]);
+    }
+  }, [networks, activeTab]);
+  const updateConfig = (network, key, value) => {
+    const currentNetworkConfig = configs[network] || {};
+    const newNetworkConfig = { ...currentNetworkConfig, [key]: value };
+    onChange({
+      ...configs,
+      [network]: newNetworkConfig
+    });
+  };
+  const renderConfig = (network) => {
+    const networkConfig = configs[network] || {};
+    switch (network) {
+      case "threads":
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "block text-sm font-medium mb-2", children: "Reply Control" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "select",
+            {
+              value: networkConfig.replyControl || "everyone",
+              onChange: (e) => updateConfig(network, "replyControl", e.target.value),
+              className: "w-full px-3 py-2 rounded-lg border border-input bg-background",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "everyone", children: "Everyone" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "accounts_you_follow", children: "Accounts You Follow" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "mentioned_only", children: "Mentioned Only" })
+              ]
+            }
+          )
+        ] }) });
+      case "instagram":
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "block text-sm font-medium mb-2", children: "Media Type" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "select",
+              {
+                value: networkConfig.mediaType || "FEED",
+                onChange: (e) => updateConfig(network, "mediaType", e.target.value),
+                className: "w-full px-3 py-2 rounded-lg border border-input bg-background",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "FEED", children: "Feed Post" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "REELS", children: "Reels" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "STORIES", children: "Story" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: networkConfig.shareToFeed ?? true,
+                onChange: (e) => updateConfig(network, "shareToFeed", e.target.checked),
+                className: "rounded border-input"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm", children: "Share to Feed" })
+          ] })
+        ] });
+      case "youtube":
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "block text-sm font-medium mb-2", children: "Video Title" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "input",
+              {
+                type: "text",
+                value: networkConfig.title || "",
+                onChange: (e) => updateConfig(network, "title", e.target.value),
+                placeholder: "Enter video title",
+                className: "w-full px-3 py-2 rounded-lg border border-input bg-background"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "block text-sm font-medium mb-2", children: "Privacy" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "select",
+              {
+                value: networkConfig.privacyStatus || "public",
+                onChange: (e) => updateConfig(network, "privacyStatus", e.target.value),
+                className: "w-full px-3 py-2 rounded-lg border border-input bg-background",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "public", children: "Public" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "unlisted", children: "Unlisted" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "private", children: "Private" })
+                ]
+              }
+            )
+          ] })
+        ] });
+      case "tiktok":
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "block text-sm font-medium mb-2", children: "Privacy Level" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "select",
+              {
+                value: networkConfig.privacyLevel || "PUBLIC_TO_EVERYONE",
+                onChange: (e) => updateConfig(network, "privacyLevel", e.target.value),
+                className: "w-full px-3 py-2 rounded-lg border border-input bg-background",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "PUBLIC_TO_EVERYONE", children: "Public" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "MUTUAL_FOLLOW_FRIENDS", children: "Friends" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "SELF_ONLY", children: "Private" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: networkConfig.disableDuet ?? false,
+                  onChange: (e) => updateConfig(network, "disableDuet", e.target.checked),
+                  className: "rounded border-input"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm", children: "Disable Duet" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: networkConfig.disableStitch ?? false,
+                  onChange: (e) => updateConfig(network, "disableStitch", e.target.checked),
+                  className: "rounded border-input"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm", children: "Disable Stitch" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: networkConfig.disableComment ?? false,
+                  onChange: (e) => updateConfig(network, "disableComment", e.target.checked),
+                  className: "rounded border-input"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm", children: "Disable Comments" })
+            ] })
+          ] })
+        ] });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
+          "No additional configuration available for ",
+          getNetworkDisplayName(network)
+        ] });
+    }
+  };
+  if (networks.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("border rounded-lg overflow-hidden", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex border-b overflow-x-auto", children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveTab(network),
+        className: cn(
+          "flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap",
+          activeTab === network ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NetworkIcon, { network, className: "h-4 w-4" }),
+          getNetworkDisplayName(network)
+        ]
+      },
+      network
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "p-4", children: renderConfig(activeTab) })
+  ] });
+}
+
+// src/components/posts/post-scheduler.tsx
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function PostScheduler({ value, onChange, className, minDate = /* @__PURE__ */ new Date(), maxDays = 30 }) {
+  const [isScheduled, setIsScheduled] = React9.useState(!!value);
+  const maxDate = /* @__PURE__ */ new Date();
+  maxDate.setDate(maxDate.getDate() + maxDays);
+  const handleToggle = () => {
+    if (isScheduled) {
+      setIsScheduled(false);
+      onChange(null);
+    } else {
+      setIsScheduled(true);
+      const defaultDate = /* @__PURE__ */ new Date();
+      defaultDate.setHours(defaultDate.getHours() + 1, 0, 0, 0);
+      onChange(defaultDate);
+    }
+  };
+  const handleDateChange = (e) => {
+    const date = new Date(e.target.value);
+    onChange(date);
+  };
+  const formatDateTimeLocal = (date) => {
+    const offset = date.getTimezoneOffset();
+    const adjustedDate = new Date(date.getTime() - offset * 60 * 1e3);
+    return adjustedDate.toISOString().slice(0, 16);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleToggle,
+          className: cn("relative w-11 h-6 rounded-full transition-colors", isScheduled ? "bg-primary" : "bg-muted"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              className: cn(
+                "absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform",
+                isScheduled && "translate-x-5"
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm font-medium", children: "Schedule for later" })
+    ] }),
+    isScheduled && value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "input",
+      {
+        type: "datetime-local",
+        value: formatDateTimeLocal(value),
+        onChange: handleDateChange,
+        min: formatDateTimeLocal(minDate),
+        max: formatDateTimeLocal(maxDate),
+        className: "flex-1 px-3 py-2 rounded-lg border border-input bg-background text-sm"
+      }
+    ) }),
+    isScheduled && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
+      "Posts can be scheduled up to ",
+      maxDays,
+      " days in advance"
+    ] })
+  ] });
+}
+
+// src/components/posts/create-post-form.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function CreatePostForm({
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  accounts: providedAccounts,
+  onPostCreated,
+  onError,
+  className,
+  enableScheduling = true,
+  enableDrafts = false
+}) {
+  const [content, setContent] = React10.useState("");
+  const [selectedAccountIds, setSelectedAccountIds] = React10.useState([]);
+  const [media, setMedia] = React10.useState([]);
+  const [scheduledAt, setScheduledAt] = React10.useState(null);
+  const [networkConfigs, setNetworkConfigs] = React10.useState({});
+  const [isSubmitting, setIsSubmitting] = React10.useState(false);
+  const { accounts: fetchedAccounts } = useAccounts({
+    apiKey,
+    baseUrl,
+    limit: 100
+  });
+  const { createPost } = usePosts({ apiKey, baseUrl });
+  const accounts = providedAccounts || fetchedAccounts;
+  const selectedAccounts = accounts.filter((a) => selectedAccountIds.includes(a.id));
+  const uniqueNetworks = [...new Set(selectedAccounts.map((a) => a.network))];
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!content.trim() && media.length === 0) {
+      onError?.(new Error("Please enter content or upload media"));
+      return;
+    }
+    if (selectedAccountIds.length === 0) {
+      onError?.(new Error("Please select at least one account"));
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const accountIdentifiers = selectedAccounts.map((account) => account.username);
+      const postData = {
+        accounts: accountIdentifiers,
+        ...scheduledAt && { scheduledAt: scheduledAt.toISOString() }
+      };
+      if (networkConfigs.threads && Object.keys(networkConfigs.threads).length > 0) {
+        postData.threads = networkConfigs.threads;
+      }
+      if (networkConfigs.instagram && Object.keys(networkConfigs.instagram).length > 0) {
+        postData.instagram = networkConfigs.instagram;
+      }
+      if (networkConfigs.youtube && Object.keys(networkConfigs.youtube).length > 0) {
+        postData.youtube = networkConfigs.youtube;
+      }
+      if (networkConfigs.tiktok && Object.keys(networkConfigs.tiktok).length > 0) {
+        postData.tiktok = networkConfigs.tiktok;
+      }
+      if (media.length > 0) {
+        postData.containers = [
+          {
+            content,
+            media: media.map((m) => ({
+              id: m.id,
+              url: m.url,
+              filename: m.filename
+            }))
+          }
+        ];
+      } else {
+        postData.content = content;
+      }
+      const response = await createPost(postData);
+      if (response.success && response.data?.post) {
+        onPostCreated?.(response.data.post);
+        setContent("");
+        setSelectedAccountIds([]);
+        setMedia([]);
+        setScheduledAt(null);
+        setNetworkConfigs({});
+      } else {
+        throw new Error(response.error || "Failed to create post");
+      }
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error("Failed to create post"));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleNetworkConfigChange = (configs) => {
+    setNetworkConfigs(configs);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: "block text-sm font-medium", children: "Select Accounts" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NetworkSelector, { accounts, selectedIds: selectedAccountIds, onChange: setSelectedAccountIds })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: "block text-sm font-medium", children: "Content" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        PostComposer,
+        {
+          value: content,
+          onChange: setContent,
+          selectedAccounts,
+          placeholder: "What's on your mind?"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: "block text-sm font-medium", children: "Media" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        MediaUploader,
+        {
+          apiKey,
+          baseUrl,
+          onUploadComplete: setMedia,
+          onUploadError: (error) => onError?.(error),
+          maxFiles: 4
+        }
+      )
+    ] }),
+    uniqueNetworks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: "block text-sm font-medium", children: "Network-Specific Options" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NetworkConfigPanel, { networks: uniqueNetworks, configs: networkConfigs, onChange: handleNetworkConfigChange })
+    ] }),
+    enableScheduling && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: "block text-sm font-medium", children: "Schedule" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PostScheduler, { value: scheduledAt, onChange: setScheduledAt })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "button",
+      {
+        type: "submit",
+        disabled: isSubmitting || !content.trim() && media.length === 0 || selectedAccountIds.length === 0,
+        className: cn(
+          "flex-1 px-4 py-2.5 rounded-lg font-medium transition-colors",
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+          "disabled:opacity-50 disabled:cursor-not-allowed"
+        ),
+        children: isSubmitting ? "Posting..." : scheduledAt ? "Schedule Post" : "Post Now"
+      }
+    ) })
+  ] });
+}
+
+// src/components/accounts/accounts-list.tsx
+var React12 = __toESM(require("react"), 1);
+
+// src/components/accounts/account-card.tsx
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function AccountCard({ account, onSelect, onDisconnect, className }) {
+  const [showConfirm, setShowConfirm] = React11.useState(false);
+  const networkColor = getNetworkColor(account.network);
+  const handleDisconnect = () => {
+    if (showConfirm) {
+      onDisconnect?.();
+      setShowConfirm(false);
+    } else {
+      setShowConfirm(true);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-4 p-4 rounded-lg border border-input bg-card transition-colors",
+        onSelect && "cursor-pointer hover:border-muted-foreground/50",
+        className
+      ),
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "div",
+          {
+            className: "w-12 h-12 rounded-full flex items-center justify-center shrink-0",
+            style: { backgroundColor: networkColor },
+            children: account.profile_picture_url ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "img",
+              {
+                src: account.profile_picture_url || "/placeholder.svg",
+                alt: account.nickname,
+                className: "w-full h-full rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NetworkIcon, { network: account.network, className: "h-6 w-6 text-white" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "font-medium truncate", children: account.nickname }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "px-2 py-0.5 text-xs rounded-full text-white", style: { backgroundColor: networkColor }, children: getNetworkDisplayName(account.network) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-sm text-muted-foreground truncate", children: [
+            "@",
+            account.username
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-xs text-muted-foreground mt-1", children: [
+            "Connected ",
+            formatDate(account.createdAt)
+          ] })
+        ] }),
+        onDisconnect && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { onClick: (e) => e.stopPropagation(), children: showConfirm ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              onClick: handleDisconnect,
+              className: "px-3 py-1.5 text-xs font-medium rounded bg-destructive text-destructive-foreground hover:bg-destructive/90",
+              children: "Confirm"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              onClick: () => setShowConfirm(false),
+              className: "px-3 py-1.5 text-xs font-medium rounded border border-input hover:bg-accent",
+              children: "Cancel"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            onClick: handleDisconnect,
+            className: "px-3 py-1.5 text-xs font-medium rounded border border-input text-muted-foreground hover:text-destructive hover:border-destructive",
+            children: "Disconnect"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/accounts/accounts-list.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function AccountsList({
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  tenantId,
+  onAccountSelect,
+  onAccountDisconnect,
+  className,
+  pageSize = 10
+}) {
+  const [offset, setOffset] = React12.useState(0);
+  const { accounts, total, isLoading, error, disconnectAccount, hasNextPage, hasPrevPage } = useAccounts({
+    apiKey,
+    baseUrl,
+    tenantId,
+    limit: pageSize,
+    offset
+  });
+  const handleDisconnect = async (accountId) => {
+    const result = await disconnectAccount(accountId);
+    if (result.success) {
+      onAccountDisconnect?.(accountId);
+    }
+  };
+  const handleNextPage = () => {
+    setOffset((prev) => prev + pageSize);
+  };
+  const handlePrevPage = () => {
+    setOffset((prev) => Math.max(0, prev - pageSize));
+  };
+  if (isLoading && accounts.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("space-y-3", className), children: [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-20 rounded-lg bg-muted animate-pulse" }, i)) });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("border border-destructive/50 rounded-lg p-6 text-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-destructive", children: "Failed to load accounts" }) });
+  }
+  if (accounts.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("border border-dashed rounded-lg p-8 text-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-muted-foreground", children: "No accounts connected" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "space-y-3", children: accounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      AccountCard,
+      {
+        account,
+        onSelect: () => onAccountSelect?.(account),
+        onDisconnect: () => handleDisconnect(account.id)
+      },
+      account.id
+    )) }),
+    total > pageSize && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between pt-4 border-t", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
+        "Showing ",
+        offset + 1,
+        "-",
+        Math.min(offset + pageSize, total),
+        " of ",
+        total
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "button",
+          {
+            onClick: handlePrevPage,
+            disabled: !hasPrevPage,
+            className: "px-3 py-1.5 text-sm rounded-lg border border-input hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "button",
+          {
+            onClick: handleNextPage,
+            disabled: !hasNextPage,
+            className: "px-3 py-1.5 text-sm rounded-lg border border-input hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/oauth/oauth-callback.tsx
+var React14 = __toESM(require("react"), 1);
+
+// src/components/oauth/page-selector.tsx
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function PageSelector({ network, pages, onSelect, isLoading, className }) {
+  const [selectedIds, setSelectedIds] = React13.useState([]);
+  const networkColor = getNetworkColor(network);
+  const togglePage = (id) => {
+    setSelectedIds((prev) => prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]);
+  };
+  const handleConfirm = () => {
+    onSelect(selectedIds);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "div",
+        {
+          className: "w-16 h-16 mx-auto rounded-full flex items-center justify-center text-white mb-4",
+          style: { backgroundColor: networkColor },
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NetworkIcon, { network, className: "h-8 w-8" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h2", { className: "text-xl font-semibold", children: [
+        "Connect ",
+        getNetworkDisplayName(network)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground mt-1", children: "Select the pages or accounts you want to connect" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "space-y-2", children: pages.map((page) => {
+      const isSelected = selectedIds.includes(page.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => togglePage(page.id),
+          className: cn(
+            "w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left",
+            isSelected ? "border-primary bg-primary/5" : "border-input hover:border-muted-foreground/50"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-10 h-10 rounded-full bg-muted overflow-hidden shrink-0", children: page.profilePictureUrl ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "img",
+              {
+                src: page.profilePictureUrl || "/placeholder.svg",
+                alt: page.name,
+                className: "w-full h-full object-cover"
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full h-full flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NetworkIcon, { network, className: "h-5 w-5" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "font-medium truncate", children: page.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "text-sm text-muted-foreground truncate", children: [
+                "@",
+                page.username,
+                " \xB7 ",
+                page.type
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "div",
+              {
+                className: cn(
+                  "w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors shrink-0",
+                  isSelected ? "border-primary bg-primary" : "border-muted-foreground/30"
+                ),
+                children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: "w-3 h-3 text-primary-foreground", fill: "currentColor", viewBox: "0 0 12 12", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" }) })
+              }
+            )
+          ]
+        },
+        page.id
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
+      {
+        onClick: handleConfirm,
+        disabled: selectedIds.length === 0 || isLoading,
+        className: cn(
+          "w-full py-3 rounded-lg font-medium text-white transition-colors",
+          "disabled:opacity-50 disabled:cursor-not-allowed"
+        ),
+        style: { backgroundColor: networkColor },
+        children: isLoading ? "Connecting..." : `Connect ${selectedIds.length} Account${selectedIds.length !== 1 ? "s" : ""}`
+      }
+    )
+  ] });
+}
+
+// src/components/oauth/oauth-callback.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function OAuthCallback({
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  onSuccess,
+  onError,
+  className
+}) {
+  const [sessionToken, setSessionToken] = React14.useState(null);
+  const [pendingData, setPendingData] = React14.useState(null);
+  const [isLoading, setIsLoading] = React14.useState(true);
+  const [error, setError] = React14.useState(null);
+  const { getPendingConnection, finalizeConnection } = useOAuthFlow({ apiKey, baseUrl });
+  React14.useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const session = params.get("session");
+    if (!session) {
+      setError("No session token found in URL");
+      setIsLoading(false);
+      return;
+    }
+    setSessionToken(session);
+    loadPendingConnection(session);
+  }, []);
+  const loadPendingConnection = async (token) => {
+    try {
+      const response = await getPendingConnection(token);
+      if (response.success && response.data) {
+        setPendingData(response.data);
+      } else {
+        throw new Error(response.error || "Failed to load connection details");
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Connection failed";
+      setError(errorMessage);
+      onError?.(new Error(errorMessage));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleFinalize = async (selectedPageIds) => {
+    if (!sessionToken) return;
+    setIsLoading(true);
+    try {
+      const response = await finalizeConnection(sessionToken, selectedPageIds);
+      if (response.success && response.data?.connectedAccounts) {
+        onSuccess?.(response.data.connectedAccounts);
+      } else {
+        throw new Error(response.error || "Failed to connect accounts");
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Connection failed";
+      setError(errorMessage);
+      onError?.(new Error(errorMessage));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  if (isLoading && !pendingData) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("flex flex-col items-center justify-center p-8", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "mt-4 text-muted-foreground", children: "Loading connection details..." })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("border border-destructive/50 rounded-lg p-6 text-center", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-12 h-12 mx-auto text-destructive mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "text-lg font-semibold text-destructive mb-2", children: "Connection Failed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-muted-foreground", children: error })
+    ] });
+  }
+  if (pendingData) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      PageSelector,
+      {
+        network: pendingData.network,
+        pages: pendingData.availablePages,
+        onSelect: handleFinalize,
+        isLoading,
+        className
+      }
+    );
+  }
+  return null;
+}
+
+// src/components/metrics/post-metrics-card.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function PostMetricsCard({ account, metrics, platformPostId, publishedAt, className }) {
+  if (!account || !metrics) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("p-4 rounded-lg border bg-card text-center text-muted-foreground", className), children: "No metrics data available" });
+  }
+  const networkColor = getNetworkColor(account.network);
+  const likes = metrics.likes ?? 0;
+  const comments = metrics.comments ?? 0;
+  const shares = metrics.shares ?? 0;
+  const reach = metrics.reach ?? 0;
+  const saves = metrics.saves ?? 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("p-4 rounded-lg border bg-card", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3 mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          className: "w-10 h-10 rounded-full flex items-center justify-center text-white",
+          style: { backgroundColor: networkColor },
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NetworkIcon, { network: account.network, className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "font-medium truncate", children: account.nickname || "Unknown" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
+          "@",
+          account.username || "unknown",
+          " \xB7 ",
+          getNetworkDisplayName(account.network)
+        ] })
+      ] }),
+      publishedAt && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-xs text-muted-foreground", children: formatDate(publishedAt) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "grid grid-cols-3 sm:grid-cols-5 gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MetricItem, { icon: "heart", label: "Likes", value: likes }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MetricItem, { icon: "chat", label: "Comments", value: comments }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MetricItem, { icon: "share", label: "Shares", value: shares }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MetricItem, { icon: "users", label: "Reach", value: reach }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MetricItem, { icon: "bookmark", label: "Saves", value: saves })
+    ] }),
+    metrics.platform_specific && Object.keys(metrics.platform_specific).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mt-4 pt-4 border-t", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-xs text-muted-foreground mb-2", children: "Platform Specific" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-wrap gap-3", children: Object.entries(metrics.platform_specific).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-muted-foreground capitalize", children: [
+          key.replace(/_/g, " "),
+          ":"
+        ] }),
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "font-medium", children: typeof value === "number" ? formatNumber(value) : String(value ?? "N/A") })
+      ] }, key)) })
+    ] })
+  ] });
+}
+function MetricItem({
+  icon,
+  label,
+  value
+}) {
+  const icons = {
+    heart: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+      }
+    ),
+    chat: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+      }
+    ),
+    share: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+      }
+    ),
+    eye: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+      }
+    ),
+    chart: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+      }
+    ),
+    users: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+      }
+    ),
+    bookmark: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+      }
+    )
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5 mx-auto text-muted-foreground mb-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: icons[icon] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "font-semibold", children: formatNumber(value ?? 0) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-xs text-muted-foreground", children: label })
+  ] });
+}
+
+// src/components/metrics/post-metrics.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function PostMetrics({
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  postId,
+  className,
+  refreshInterval
+}) {
+  const { analytics, isLoading, error } = usePostMetrics({
+    apiKey,
+    baseUrl,
+    postId,
+    refreshInterval
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("space-y-4", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-32 rounded-lg bg-muted animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid grid-cols-2 gap-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-20 rounded-lg bg-muted animate-pulse" }, i)) })
+    ] });
+  }
+  if (error || !analytics) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("border border-destructive/50 rounded-lg p-6 text-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-destructive", children: "Failed to load metrics" }) });
+  }
+  const { aggregated_metrics, metrics_by_account = [] } = analytics;
+  const {
+    total_likes = 0,
+    total_comments = 0,
+    total_shares = 0,
+    total_reach = 0,
+    total_views = 0,
+    total_impressions = 0,
+    average_engagement_rate = 0
+  } = aggregated_metrics ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-6 rounded-lg border bg-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-lg font-semibold mb-4", children: "Overall Performance" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MetricBox, { label: "Total Likes", value: total_likes }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MetricBox, { label: "Total Comments", value: total_comments }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MetricBox, { label: "Total Shares", value: total_shares }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MetricBox, { label: "Total Reach", value: total_reach }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MetricBox, { label: "Total Views", value: total_views }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MetricBox, { label: "Impressions", value: total_impressions }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          MetricBox,
+          {
+            label: "Avg. Engagement",
+            value: `${((average_engagement_rate ?? 0) * 100).toFixed(2)}%`,
+            isPercentage: true
+          }
+        )
+      ] })
+    ] }),
+    metrics_by_account.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-lg font-semibold", children: "By Platform" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid gap-4", children: metrics_by_account.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        PostMetricsCard,
+        {
+          account: item?.social_account,
+          metrics: item?.metrics,
+          platformPostId: item?.platform_post_id,
+          publishedAt: item?.published_at
+        },
+        `${item?.social_account?.id ?? index}-${index}`
+      )) })
+    ] })
+  ] });
+}
+function MetricBox({
+  label,
+  value,
+  isPercentage = false
+}) {
+  const displayValue = typeof value === "number" ? formatNumber(value) : value;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-4 rounded-lg bg-muted/50", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xs text-muted-foreground uppercase tracking-wider", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-2xl font-bold mt-1", children: displayValue })
+  ] });
+}
+
+// src/components/metrics/posts-with-metrics.tsx
+var React15 = __toESM(require("react"), 1);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function PostsWithMetrics({
+  apiKey,
+  baseUrl = "https://api.outstand.so/v1",
+  socialAccountId,
+  pageSize = 10,
+  className
+}) {
+  const [offset, setOffset] = React15.useState(0);
+  const [expandedPostId, setExpandedPostId] = React15.useState(null);
+  const { posts, total, isLoading, hasNextPage, hasPrevPage } = usePosts({
+    apiKey,
+    baseUrl,
+    socialAccountId,
+    limit: pageSize,
+    offset
+  });
+  React15.useEffect(() => {
+    setExpandedPostId(null);
+  }, [offset]);
+  const handleToggleExpand = React15.useCallback((postId) => {
+    setExpandedPostId((prev) => prev === postId ? null : postId);
+  }, []);
+  if (isLoading && posts.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("space-y-4", className), children: [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-24 rounded-lg bg-muted animate-pulse" }, i)) });
+  }
+  if (posts.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("border border-dashed rounded-lg p-8 text-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-muted-foreground", children: "No posts found" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("space-y-4", className), children: [
+    posts.map((post) => {
+      if (!post?.id) return null;
+      const isExpanded = expandedPostId === post.id;
+      const socialAccounts = post.socialAccounts ?? [];
+      const containers = post.containers ?? [];
+      const content = containers[0]?.content || "No content";
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "border rounded-lg overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "button",
+          {
+            onClick: () => handleToggleExpand(post.id),
+            className: "w-full p-4 text-left hover:bg-accent/50 transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-start gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex -space-x-2", children: [
+                socialAccounts.slice(0, 3).map((account) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  "div",
+                  {
+                    className: "w-8 h-8 rounded-full border-2 border-background flex items-center justify-center bg-muted",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NetworkIcon, { network: account?.network ?? "unknown", className: "h-4 w-4" })
+                  },
+                  account?.id ?? Math.random()
+                )),
+                socialAccounts.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-8 h-8 rounded-full border-2 border-background flex items-center justify-center bg-muted text-xs font-medium", children: [
+                  "+",
+                  socialAccounts.length - 3
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm line-clamp-2", children: content }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 mt-2 text-xs text-muted-foreground", children: [
+                  post.publishedAt ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { children: [
+                    "Published ",
+                    formatDate(post.publishedAt)
+                  ] }) : post.scheduledAt ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { children: [
+                    "Scheduled for ",
+                    formatDate(post.scheduledAt)
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Draft" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "\xB7" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { children: [
+                    socialAccounts.length,
+                    " accounts"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "svg",
+                {
+                  className: cn("w-5 h-5 text-muted-foreground transition-transform", isExpanded && "rotate-180"),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ] })
+          }
+        ),
+        isExpanded && post.publishedAt && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "border-t p-4 bg-muted/30", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PostMetrics, { apiKey, baseUrl, postId: post.id }, `metrics-${post.id}`) })
+      ] }, post.id);
+    }),
+    total > pageSize && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between pt-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
+        "Showing ",
+        offset + 1,
+        "-",
+        Math.min(offset + pageSize, total),
+        " of ",
+        total
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "button",
+          {
+            onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)),
+            disabled: !hasPrevPage,
+            className: "px-3 py-1.5 text-sm rounded-lg border border-input hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "button",
+          {
+            onClick: () => setOffset((prev) => prev + pageSize),
+            disabled: !hasNextPage,
+            className: "px-3 py-1.5 text-sm rounded-lg border border-input hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccountCard,
+  AccountsList,
+  ConnectAccountButton,
+  ConnectAccountButtonGroup,
+  CreatePostForm,
+  MediaGallery,
+  MediaList,
+  MediaPreview,
+  MediaUploader,
+  NetworkConfigPanel,
+  NetworkSelector,
+  OAuthCallback,
+  OutstandProvider,
+  PageSelector,
+  PostComposer,
+  PostMetrics,
+  PostMetricsCard,
+  PostScheduler,
+  PostsWithMetrics,
+  useAccounts,
+  useMediaList,
+  useMediaUpload,
+  useOAuthFlow,
+  useOutstand,
+  useOutstandApi,
+  usePostMetrics,
+  usePosts
+});