@hanzo/ui 8.0.12 → 8.0.13

package/dist/product/index.js

@@ -4,7 +4,7 @@ export { AgnosticThemeToggle, ThemeToggle, ThemeToggleNext } from '../chunk-42CU
 import { createContext, useRef, useState, useEffect, useCallback, useLayoutEffect, useMemo, cloneElement, useContext, useSyncExternalStore } from 'react';
 import { useTheme, XStack, Text, YStack, Card, Theme, useThemeName, Portal, Input, Button, Spinner, Popover, Separator, useControllableState, Label, TextArea, Switch, Slider, ScrollView } from '@hanzo/gui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Check, ChevronRight, ChevronDown, RefreshCw, Grip, CreditCard, Users, Bot, MessageCircle, AppWindow, LayoutGrid, Sparkles, UserRound, Settings2, LogOut, ChevronsUpDown, Plus, Search, TriangleAlert, ChevronUp, Trash2, ExternalLink, ArrowRight, Cpu, Globe, Server, X, Pencil, Calendar, AlertTriangle, CheckCircle2, List, Info, CircleX, CircleCheck } from '@hanzogui/lucide-icons-2';
+import { Check, ChevronRight, ChevronDown, RefreshCw, Grip, CreditCard, Users, Bot, MessageCircle, AppWindow, LayoutGrid, Sparkles, UserRound, Settings2, LogOut, ChevronsUpDown, Plus, Search, TriangleAlert, ChevronUp, Trash2, ExternalLink, ArrowRight, Cpu, Globe, Server, X, Calendar, AlertTriangle, CheckCircle2, List, Link2, Share2, Send, Pencil, Info, CircleX, CircleCheck } from '@hanzogui/lucide-icons-2';
 export { Boxes as CustomModelMark } from '@hanzogui/lucide-icons-2';
 import { surfaceById } from '@hanzo/products';
 import { HanzoLogo } from '@hanzo/logo/react';
@@ -1076,7 +1076,7 @@ function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picke
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [debounced, setDebounced] = useState("");
-  const [rows, setRows] = useState([]);
+  const [rows2, setRows] = useState([]);
   const [loading, setLoading] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [hasMore, setHasMore] = useState(false);
@@ -1128,13 +1128,13 @@ function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picke
     void fetchPage(pageRef.current + 1, debounced, true);
   }, [loading, loadingMore, hasMore, debounced, fetchPage]);
   const visible = useMemo(() => {
-    if (orgs) return filterOrgs(rows, query);
+    if (orgs) return filterOrgs(rows2, query);
     return [{ name: currentId, displayName: titleCase(currentId) }];
-  }, [orgs, rows, query, currentId]);
+  }, [orgs, rows2, query, currentId]);
   const current2 = useMemo(() => {
     if (given && given.name === currentId) return given;
-    return rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) };
-  }, [given, rows, currentId]);
+    return rows2.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) };
+  }, [given, rows2, currentId]);
   const currentLabel = current2.displayName || titleCase(current2.name);
   const select = useCallback(
     (org) => {
@@ -1684,7 +1684,7 @@ function SkeletonRows({ columns, count = 6 }) {
 }
 function DataTable({
   columns,
-  rows,
+  rows: rows2,
   loading,
   empty = "Nothing here yet.",
   rowKey,
@@ -1734,7 +1734,7 @@ function DataTable({
           c.key
         );
       }) }),
-      loading ? /* @__PURE__ */ jsx(SkeletonRows, { columns }) : rows.length > 0 ? /* @__PURE__ */ jsx(YStack, { children: rows.map((row) => {
+      loading ? /* @__PURE__ */ jsx(SkeletonRows, { columns }) : rows2.length > 0 ? /* @__PURE__ */ jsx(YStack, { children: rows2.map((row) => {
         const expanded = (isRowExpanded?.(row) ?? false) && !!renderExpanded;
         return /* @__PURE__ */ jsxs(YStack, { children: [
           /* @__PURE__ */ jsx(
@@ -1782,7 +1782,7 @@ function DataTable({
         ] }, rowKey(row));
       }) }) : null
     ] }) }),
-    !loading && rows.length === 0 ? /* @__PURE__ */ jsx(YStack, { py: "$8", px: "$4", items: "center", gap: "$1", borderTopWidth: 1, borderColor: "$borderColor", children: /* @__PURE__ */ jsx(Text, { color: "$color10", fontSize: "$3", text: "center", children: empty }) }) : null
+    !loading && rows2.length === 0 ? /* @__PURE__ */ jsx(YStack, { py: "$8", px: "$4", items: "center", gap: "$1", borderTopWidth: 1, borderColor: "$borderColor", children: /* @__PURE__ */ jsx(Text, { color: "$color10", fontSize: "$3", text: "center", children: empty }) }) : null
   ] });
 }
 var FLEX_MIN_COL_W = 120;
@@ -2232,9 +2232,9 @@ function FieldTextArea({
   value,
   onChange,
   disabled,
-  rows = 6
+  rows: rows2 = 6
 }) {
-  return /* @__PURE__ */ jsx(TextArea, { value, onChangeText: onChange, disabled, numberOfLines: rows });
+  return /* @__PURE__ */ jsx(TextArea, { value, onChangeText: onChange, disabled, numberOfLines: rows2 });
 }
 function FieldSwitch({
   checked,
@@ -2784,63 +2784,94 @@ function useToast() {
   if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
   return ctx;
 }
-var META = {
-  x: { label: "X", bg: "#0f0f12", fg: "#e6e6ea", mark: "\u{1D54F}" },
-  facebook: { label: "Facebook", bg: "#1877f2", fg: "#ffffff", mark: "f" },
-  instagram: { label: "Instagram", bg: "#e1306c", fg: "#ffffff", mark: "IG" },
-  linkedin: { label: "LinkedIn", bg: "#0a66c2", fg: "#ffffff", mark: "in" },
-  tiktok: { label: "TikTok", bg: "#111114", fg: "#25f4ee", mark: "TT" },
-  youtube: { label: "YouTube", bg: "#ff0000", fg: "#ffffff", mark: "\u25B6" },
-  threads: { label: "Threads", bg: "#111114", fg: "#e6e6ea", mark: "@" }
+
+// src/product/social/api.ts
+var enc = encodeURIComponent;
+var str = (v) => typeof v === "string" ? v : v == null ? "" : String(v);
+var num = (v) => {
+  if (typeof v === "number" && Number.isFinite(v)) return v;
+  if (typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v))) return Number(v);
+  return 0;
 };
-function ChannelBadge({
-  channel,
-  showLabel = false,
-  size = 22
-}) {
-  const m = META[channel] ?? META.x;
-  return /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
-    /* @__PURE__ */ jsx(
-      YStack,
-      {
-        width: size,
-        height: size,
-        items: "center",
-        justify: "center",
-        rounded: "$2",
-        bg: m.bg,
-        children: /* @__PURE__ */ jsx(Text, { fontSize: "$1", fontWeight: "800", color: m.fg, children: m.mark })
-      }
-    ),
-    showLabel ? /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: m.label }) : null
-  ] });
+var strs = (v) => Array.isArray(v) ? v.filter((x) => typeof x === "string") : [];
+var asRecord = (v) => v && typeof v === "object" && !Array.isArray(v) ? v : {};
+var rows = (payload) => {
+  if (Array.isArray(payload)) return payload.filter((x) => x && typeof x === "object");
+  if (payload && typeof payload === "object") {
+    for (const k of ["data", "items", "rows"]) {
+      const v = payload[k];
+      if (Array.isArray(v)) return v.filter((x) => x && typeof x === "object");
+    }
+  }
+  return [];
+};
+var PROVIDERS = ["x", "facebook", "instagram", "linkedin", "tiktok", "youtube", "threads"];
+var ACCOUNT_STATUSES = ["connected", "disconnected", "error"];
+var POST_STATUSES = ["draft", "scheduled", "published", "failed"];
+function normalizeAccount(raw) {
+  const r = asRecord(raw);
+  return {
+    id: str(r.id),
+    provider: str(r.provider) || "x",
+    handle: str(r.handle),
+    status: str(r.status) || "connected",
+    createdAt: num(r.createdAt),
+    updatedAt: num(r.updatedAt)
+  };
 }
-var money = (cents) => `$${Math.round((cents || 0) / 100).toLocaleString()}`;
-function CampaignCard({ campaign }) {
-  const pct = campaign.budget > 0 ? Math.min(100, campaign.spend / campaign.budget * 100) : 0;
-  return /* @__PURE__ */ jsxs(Card, { p: "$4", gap: "$3", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [
-    /* @__PURE__ */ jsxs(XStack, { items: "flex-start", justify: "space-between", gap: "$2", children: [
-      /* @__PURE__ */ jsxs(YStack, { gap: "$1", children: [
-        /* @__PURE__ */ jsx(Text, { fontSize: "$4", fontWeight: "700", children: campaign.name }),
-        /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: campaign.channel })
-      ] }),
-      /* @__PURE__ */ jsx(StatusTag, { status: campaign.status })
-    ] }),
-    campaign.objective ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: campaign.objective }) : null,
-    /* @__PURE__ */ jsxs(YStack, { gap: "$1.5", children: [
-      /* @__PURE__ */ jsxs(XStack, { justify: "space-between", children: [
-        /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color11", children: [
-          money(campaign.spend),
-          " spent"
-        ] }),
-        /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color11", children: [
-          money(campaign.budget),
-          " budget"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(YStack, { height: 6, rounded: "$2", bg: "$color3", overflow: "hidden", children: /* @__PURE__ */ jsx(YStack, { height: 6, rounded: "$2", bg: "$color9", width: `${pct}%` }) })
-    ] })
-  ] });
+function normalizePost(raw) {
+  const r = asRecord(raw);
+  return {
+    id: str(r.id),
+    content: str(r.content),
+    channel: str(r.channel) || "x",
+    status: str(r.status) || "draft",
+    scheduleAt: num(r.scheduleAt),
+    media: strs(r.media),
+    accountId: str(r.accountId) || void 0,
+    externalId: str(r.externalId) || void 0,
+    error: str(r.error) || void 0,
+    createdAt: num(r.createdAt),
+    updatedAt: num(r.updatedAt)
+  };
+}
+function normalizeSummary(raw) {
+  const r = asRecord(raw);
+  return { posts: num(r.posts), scheduled: num(r.scheduled), published: num(r.published), accounts: num(r.accounts) };
+}
+function normalizeProviderCapability(raw) {
+  const r = asRecord(raw);
+  return {
+    provider: str(r.provider),
+    credentialsConfigured: Boolean(r.credentialsConfigured),
+    missingCredentials: strs(r.missingCredentials)
+  };
+}
+var normalizeAccounts = (p) => rows(p).map(normalizeAccount).filter((a) => a.id);
+var normalizePosts = (p) => rows(p).map(normalizePost).filter((x) => x.id);
+var normalizeProviders = (p) => rows(p).map(normalizeProviderCapability).filter((c) => c.provider);
+function createSocialApi(rest) {
+  return {
+    summary: () => rest.get("summary").then(normalizeSummary),
+    /** Publish-readiness per network (+ the exact missing OAuth-app credentials). */
+    providers: () => rest.get("providers").then(normalizeProviders),
+    accounts: {
+      list: (provider) => rest.get(`accounts${provider ? `?provider=${enc(provider)}` : ""}`).then(normalizeAccounts),
+      get: (id) => rest.get(`accounts/${enc(id)}`).then(normalizeAccount),
+      create: (body) => rest.post("accounts", body).then(normalizeAccount),
+      update: (id, body) => rest.put(`accounts/${enc(id)}`, body).then(normalizeAccount),
+      remove: (id) => rest.del(`accounts/${enc(id)}`)
+    },
+    posts: {
+      list: (status) => rest.get(`posts${status ? `?status=${enc(status)}` : ""}`).then(normalizePosts),
+      get: (id) => rest.get(`posts/${enc(id)}`).then(normalizePost),
+      create: (body) => rest.post("posts", body).then(normalizePost),
+      update: (id, body) => rest.put(`posts/${enc(id)}`, body).then(normalizePost),
+      remove: (id) => rest.del(`posts/${enc(id)}`),
+      /** Publish a post NOW to its channel's connected accounts. */
+      publish: (id) => rest.post(`posts/${enc(id)}/publish`).then(normalizePost)
+    }
+  };
 }
 
 // src/product/social/format.ts
@@ -2867,33 +2898,6 @@ function parsePostTime(dt) {
   const ms = Date.parse(dt.trim());
   return Number.isFinite(ms) && ms > 0 ? Math.floor(ms / 1e3) : 0;
 }
-function PostCard({
-  post,
-  onEdit,
-  onDelete
-}) {
-  const mediaCount = post.media?.length ?? 0;
-  return /* @__PURE__ */ jsxs(Card, { p: "$3", gap: "$2.5", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [
-    /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [
-      /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
-        /* @__PURE__ */ jsx(ChannelBadge, { channel: post.channel }),
-        /* @__PURE__ */ jsx(StatusTag, { status: post.status })
-      ] }),
-      /* @__PURE__ */ jsxs(XStack, { gap: "$1", children: [
-        onEdit ? /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(Pencil, { size: 15 }), onPress: () => onEdit(post) }) : null,
-        onDelete ? /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(Trash2, { size: 15 }), onPress: () => onDelete(post) }) : null
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: post.content }),
-    /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [
-      post.scheduleAt ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color11", children: formatPostTime(post.scheduleAt) }) : /* @__PURE__ */ jsx(YStack, {}),
-      mediaCount ? /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color10", children: [
-        mediaCount,
-        " media"
-      ] }) : null
-    ] })
-  ] });
-}
 function PostAgenda({ posts, onOpen }) {
   const days = useMemo(() => {
     const timed = posts.filter((p) => (p.scheduleAt ?? 0) > 0).sort((a, b) => (a.scheduleAt ?? 0) - (b.scheduleAt ?? 0));
@@ -3101,7 +3105,302 @@ function ViewToggle({
     );
   }) });
 }
+var POST_COLUMNS = [
+  { key: "content", header: "Post", render: (p) => postPreview(p.content) },
+  { key: "channel", header: "Channel", render: (p) => p.channel || "\u2014" },
+  { key: "status", header: "Status", render: (p) => /* @__PURE__ */ jsx(StatusTag, { status: p.status }) },
+  { key: "scheduleAt", header: "Scheduled", render: (p) => formatPostTime(p.scheduleAt) }
+];
+var ACCOUNT_COLUMNS = [
+  { key: "handle", header: "Account", render: (a) => a.handle || "\u2014" },
+  { key: "provider", header: "Network", render: (a) => a.provider || "\u2014" },
+  { key: "status", header: "Status", render: (a) => /* @__PURE__ */ jsx(StatusTag, { status: a.status }) }
+];
+function PostDetail({ api, post, onChanged }) {
+  const [publishing, setPublishing] = useState(false);
+  const [error, setError] = useState(null);
+  const canPublish = post.status === "draft" || post.status === "scheduled" || post.status === "failed";
+  const publish = async () => {
+    setPublishing(true);
+    setError(null);
+    try {
+      await api.posts.publish(post.id);
+      onChanged();
+    } catch (e) {
+      setError(classifyBackend(e).message || "Publish failed.");
+    } finally {
+      setPublishing(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(YStack, { gap: "$3", p: "$4", children: [
+    /* @__PURE__ */ jsx(FieldRow, { label: "Content", children: /* @__PURE__ */ jsx(Text, { fontSize: "$3", children: post.content || "\u2014" }) }),
+    /* @__PURE__ */ jsx(FieldRow, { label: "Channel", children: /* @__PURE__ */ jsx(Text, { fontSize: "$3", children: post.channel }) }),
+    /* @__PURE__ */ jsx(FieldRow, { label: "Status", children: /* @__PURE__ */ jsx(StatusTag, { status: post.status }) }),
+    post.scheduleAt > 0 ? /* @__PURE__ */ jsx(FieldRow, { label: "Scheduled", children: /* @__PURE__ */ jsx(Text, { fontSize: "$3", children: formatPostTime(post.scheduleAt) }) }) : null,
+    post.media.length > 0 ? /* @__PURE__ */ jsx(FieldRow, { label: "Media", children: /* @__PURE__ */ jsx(YStack, { gap: "$1", children: post.media.map((m) => /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: m }, m)) }) }) : null,
+    post.externalId ? /* @__PURE__ */ jsx(FieldRow, { label: "External id", children: /* @__PURE__ */ jsx(Text, { fontSize: "$3", className: "hz-tnum", children: post.externalId }) }) : null,
+    post.error ? /* @__PURE__ */ jsx(FieldRow, { label: "Last error", children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$red10", children: post.error }) }) : null,
+    error ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$red10", children: error }) : null,
+    canPublish ? /* @__PURE__ */ jsx(PrimaryButton, { onPress: publish, disabled: publishing, icon: /* @__PURE__ */ jsx(Send, { size: 16 }), children: publishing ? "Publishing\u2026" : "Publish now" }) : null
+  ] });
+}
+function ConnectAccount({
+  api,
+  providers,
+  onCreated
+}) {
+  const [provider, setProvider] = useState("x");
+  const [handle, setHandle] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const submit = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      await api.accounts.create({ provider, handle: handle.trim(), status: "connected" });
+      onCreated();
+    } catch (e) {
+      setError(classifyBackend(e).message || "Failed to connect account.");
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(YStack, { gap: "$4", p: "$4", children: [
+    /* @__PURE__ */ jsx(ProviderReadinessList, { providers }),
+    /* @__PURE__ */ jsxs(YStack, { gap: "$3", children: [
+      /* @__PURE__ */ jsx(FieldRow, { label: "Network", children: /* @__PURE__ */ jsx(FieldSelect, { value: provider, options: [...PROVIDERS], onChange: setProvider, disabled: saving }) }),
+      /* @__PURE__ */ jsx(FieldRow, { label: "Handle", children: /* @__PURE__ */ jsx(FieldText, { value: handle, onChange: setHandle, placeholder: "@hanzo", disabled: saving }) }),
+      error ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$red10", children: error }) : null,
+      /* @__PURE__ */ jsx(PrimaryButton, { onPress: submit, disabled: saving, children: saving ? "Connecting\u2026" : "Connect account" })
+    ] })
+  ] });
+}
+function SocialResource({
+  api,
+  title = "Publish",
+  subtitle = "Compose, schedule and publish your content across networks \u2014 per org, over the native /v1/social engine."
+}) {
+  const [state, setState] = useState({ phase: "loading" });
+  const [view, setView] = useState("list");
+  const [composing, setComposing] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [openPost, setOpenPost] = useState(null);
+  const load = useCallback(async () => {
+    setState({ phase: "loading" });
+    try {
+      const [summary, posts2, accounts2, providers2] = await Promise.all([
+        api.summary(),
+        api.posts.list(),
+        api.accounts.list(),
+        api.providers()
+      ]);
+      setState({ phase: "ready", data: { summary, posts: posts2, accounts: accounts2, providers: providers2 } });
+    } catch (e) {
+      setState({ phase: "error", error: classifyBackend(e) });
+    }
+  }, [api]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  const providers = state.phase === "ready" ? state.data.providers : [];
+  const posts = state.phase === "ready" ? state.data.posts : [];
+  const accounts = state.phase === "ready" ? state.data.accounts : [];
+  const empty = state.phase === "ready" && posts.length === 0 && accounts.length === 0;
+  const submitDraft = async (draft, mode) => {
+    try {
+      const created = await api.posts.create(draft);
+      if (mode === "now" && created.status === "failed") return created.error || "Publish failed.";
+    } catch (e) {
+      return classifyBackend(e).message || "Failed to create post.";
+    }
+    setComposing(false);
+    void load();
+    return null;
+  };
+  return /* @__PURE__ */ jsxs(YStack, { gap: "$4", p: "$4", children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title,
+        subtitle,
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(PrimaryButton, { onPress: () => setComposing(true), icon: /* @__PURE__ */ jsx(Plus, { size: 16 }), children: "New post" }),
+          /* @__PURE__ */ jsx(PrimaryButton, { onPress: () => setConnecting(true), icon: /* @__PURE__ */ jsx(Link2, { size: 16 }), children: "Connect account" }),
+          /* @__PURE__ */ jsx(PrimaryButton, { onPress: () => void load(), icon: /* @__PURE__ */ jsx(RefreshCw, { size: 16 }), children: "Refresh" })
+        ] })
+      }
+    ),
+    state.phase === "error" ? /* @__PURE__ */ jsx(BackendStateCard, { state: state.error, onRetry: () => void load() }) : empty ? /* @__PURE__ */ jsxs(YStack, { gap: "$4", children: [
+      state.phase === "ready" ? /* @__PURE__ */ jsx(SocialSummaryBar, { summary: state.data.summary }) : null,
+      /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: Share2,
+          title: "No posts or accounts yet",
+          description: "Connect a social account, then compose, schedule and publish across X, Instagram, LinkedIn, TikTok and more.",
+          primary: { label: "New post", onPress: () => setComposing(true) }
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(YStack, { gap: "$5", children: [
+      state.phase === "ready" ? /* @__PURE__ */ jsx(SocialSummaryBar, { summary: state.data.summary }) : null,
+      /* @__PURE__ */ jsxs(YStack, { gap: "$3", children: [
+        /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", flexWrap: "wrap", children: [
+          /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+            /* @__PURE__ */ jsx(Send, { size: 16 }),
+            /* @__PURE__ */ jsx(Text, { fontSize: "$5", fontWeight: "500", children: "Posts" })
+          ] }),
+          /* @__PURE__ */ jsx(ViewToggle, { view, onChange: setView })
+        ] }),
+        view === "list" ? /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            columns: POST_COLUMNS,
+            rows: posts,
+            loading: state.phase === "loading",
+            empty: "No posts yet.",
+            rowKey: (p) => p.id,
+            onRowPress: (p) => setOpenPost(p)
+          }
+        ) : /* @__PURE__ */ jsx(PostAgenda, { posts, onOpen: (p) => setOpenPost(p) })
+      ] }),
+      /* @__PURE__ */ jsxs(YStack, { gap: "$2", children: [
+        /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+          /* @__PURE__ */ jsx(Link2, { size: 16 }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "$5", fontWeight: "500", children: "Accounts" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            columns: ACCOUNT_COLUMNS,
+            rows: accounts,
+            loading: state.phase === "loading",
+            empty: "No accounts connected yet.",
+            rowKey: (a) => a.id
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(SlideOver, { open: composing, onClose: () => setComposing(false), title: "New post", icon: Send, ariaLabel: "New post", children: /* @__PURE__ */ jsx(PostComposer, { channels: [...PROVIDERS], providers, onSubmit: submitDraft }) }),
+    /* @__PURE__ */ jsx(
+      SlideOver,
+      {
+        open: connecting,
+        onClose: () => setConnecting(false),
+        title: "Connect account",
+        icon: Link2,
+        ariaLabel: "Connect account",
+        children: /* @__PURE__ */ jsx(
+          ConnectAccount,
+          {
+            api,
+            providers,
+            onCreated: () => {
+              setConnecting(false);
+              void load();
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(SlideOver, { open: openPost !== null, onClose: () => setOpenPost(null), title: "Post", icon: Send, ariaLabel: "Post detail", children: openPost ? /* @__PURE__ */ jsx(
+      PostDetail,
+      {
+        api,
+        post: openPost,
+        onChanged: () => {
+          setOpenPost(null);
+          void load();
+        }
+      }
+    ) : null })
+  ] });
+}
+var META = {
+  x: { label: "X", bg: "#0f0f12", fg: "#e6e6ea", mark: "\u{1D54F}" },
+  facebook: { label: "Facebook", bg: "#1877f2", fg: "#ffffff", mark: "f" },
+  instagram: { label: "Instagram", bg: "#e1306c", fg: "#ffffff", mark: "IG" },
+  linkedin: { label: "LinkedIn", bg: "#0a66c2", fg: "#ffffff", mark: "in" },
+  tiktok: { label: "TikTok", bg: "#111114", fg: "#25f4ee", mark: "TT" },
+  youtube: { label: "YouTube", bg: "#ff0000", fg: "#ffffff", mark: "\u25B6" },
+  threads: { label: "Threads", bg: "#111114", fg: "#e6e6ea", mark: "@" }
+};
+function ChannelBadge({
+  channel,
+  showLabel = false,
+  size = 22
+}) {
+  const m = META[channel] ?? META.x;
+  return /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+    /* @__PURE__ */ jsx(
+      YStack,
+      {
+        width: size,
+        height: size,
+        items: "center",
+        justify: "center",
+        rounded: "$2",
+        bg: m.bg,
+        children: /* @__PURE__ */ jsx(Text, { fontSize: "$1", fontWeight: "800", color: m.fg, children: m.mark })
+      }
+    ),
+    showLabel ? /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: m.label }) : null
+  ] });
+}
+var money = (cents) => `$${Math.round((cents || 0) / 100).toLocaleString()}`;
+function CampaignCard({ campaign }) {
+  const pct = campaign.budget > 0 ? Math.min(100, campaign.spend / campaign.budget * 100) : 0;
+  return /* @__PURE__ */ jsxs(Card, { p: "$4", gap: "$3", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [
+    /* @__PURE__ */ jsxs(XStack, { items: "flex-start", justify: "space-between", gap: "$2", children: [
+      /* @__PURE__ */ jsxs(YStack, { gap: "$1", children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: "$4", fontWeight: "700", children: campaign.name }),
+        /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: campaign.channel })
+      ] }),
+      /* @__PURE__ */ jsx(StatusTag, { status: campaign.status })
+    ] }),
+    campaign.objective ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: campaign.objective }) : null,
+    /* @__PURE__ */ jsxs(YStack, { gap: "$1.5", children: [
+      /* @__PURE__ */ jsxs(XStack, { justify: "space-between", children: [
+        /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color11", children: [
+          money(campaign.spend),
+          " spent"
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color11", children: [
+          money(campaign.budget),
+          " budget"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(YStack, { height: 6, rounded: "$2", bg: "$color3", overflow: "hidden", children: /* @__PURE__ */ jsx(YStack, { height: 6, rounded: "$2", bg: "$color9", width: `${pct}%` }) })
+    ] })
+  ] });
+}
+function PostCard({
+  post,
+  onEdit,
+  onDelete
+}) {
+  const mediaCount = post.media?.length ?? 0;
+  return /* @__PURE__ */ jsxs(Card, { p: "$3", gap: "$2.5", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [
+    /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [
+      /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+        /* @__PURE__ */ jsx(ChannelBadge, { channel: post.channel }),
+        /* @__PURE__ */ jsx(StatusTag, { status: post.status })
+      ] }),
+      /* @__PURE__ */ jsxs(XStack, { gap: "$1", children: [
+        onEdit ? /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(Pencil, { size: 15 }), onPress: () => onEdit(post) }) : null,
+        onDelete ? /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(Trash2, { size: 15 }), onPress: () => onDelete(post) }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: post.content }),
+    /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [
+      post.scheduleAt ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color11", children: formatPostTime(post.scheduleAt) }) : /* @__PURE__ */ jsx(YStack, {}),
+      mediaCount ? /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color10", children: [
+        mediaCount,
+        " media"
+      ] }) : null
+    ] })
+  ] });
+}
 
-export { AnimatedLogo, AppHeader, BRANDS, BackendStateCard, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, COMPOSE_MODES, CampaignCard, ChannelBadge, ComboBox, CommerceResource, ConfirmDelete, ContextMenu, DataTable, Donut, Donut2 as DonutRing, DropdownMenu, EmptyState, FadeIn, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, FloatingMenu, GenericLogo, HANZO, HANZO_MARK_CONTENT, HanzoMark, HintButton, HostProvider, LUX, LegendDot, LineChart, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, MetricCard, Sparkline2 as MetricSparkline, MiniBars, OrgMark, OrgSwitcher, PARS, PageHeader, Panel, PortalTheme, PostAgenda, PostCard, PostComposer, PrimaryButton, ProductIcon, ProviderLogo, ProviderReadinessList, Reorder, SERIES, LG as SLIDEOVER_LG, SURFACES, SearchInput, Segmented, SelectMenu, SiteFooter, SiteNav, SlideOver, SocialSummaryBar, Sparkline, StatusTag, ToastProvider, UtilBar, ViewToggle, ZOO, accentFor, asColor, classifyBackend, classifyRead, colorForIndex, contrastText, filterOptions, filterOrgs, formatPostTime, isHexColor, isKnownOption, monogram, orgScope, otherSurfaces, parsePostTime, postDayBucket, postPreview, providerInitials, renderMenuItems, resolveAccent, resolveBrand, rowShift, setOrgAccent, targetIndex, useAccent, useContainerWidth, useHost, useToast, utilColor };
+export { ACCOUNT_STATUSES, AnimatedLogo, AppHeader, BRANDS, BackendStateCard, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, COMPOSE_MODES, CampaignCard, ChannelBadge, ComboBox, CommerceResource, ConfirmDelete, ContextMenu, DataTable, Donut, Donut2 as DonutRing, DropdownMenu, EmptyState, FadeIn, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, FloatingMenu, GenericLogo, HANZO, HANZO_MARK_CONTENT, HanzoMark, HintButton, HostProvider, LUX, LegendDot, LineChart, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, MetricCard, Sparkline2 as MetricSparkline, MiniBars, OrgMark, OrgSwitcher, PARS, POST_STATUSES, PROVIDERS, PageHeader, Panel, PortalTheme, PostAgenda, PostCard, PostComposer, PrimaryButton, ProductIcon, ProviderLogo, ProviderReadinessList, Reorder, SERIES, LG as SLIDEOVER_LG, SURFACES, SearchInput, Segmented, SelectMenu, SiteFooter, SiteNav, SlideOver, SocialResource, SocialSummaryBar, Sparkline, StatusTag, ToastProvider, UtilBar, ViewToggle, ZOO, accentFor, asColor, classifyBackend, classifyRead, colorForIndex, contrastText, createSocialApi, filterOptions, filterOrgs, formatPostTime, isHexColor, isKnownOption, monogram, normalizeAccount, normalizeAccounts, normalizePost, normalizePosts, normalizeProviderCapability, normalizeProviders, normalizeSummary, orgScope, otherSurfaces, parsePostTime, postDayBucket, postPreview, providerInitials, renderMenuItems, resolveAccent, resolveBrand, rowShift, setOrgAccent, targetIndex, useAccent, useContainerWidth, useHost, useToast, utilColor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map