@hanzo/ui 8.0.13 → 8.0.14

package/dist/chunk-YAYUPOE3.js

@@ -0,0 +1,1229 @@
+'use client';
+import { createContext, useContext, useSyncExternalStore, useRef, useEffect, useMemo, useState, useCallback } from 'react';
+import { Card, XStack, Text, Button, YStack, Label, Input, TextArea, Switch, Slider, ScrollView } from '@hanzo/gui';
+import { TriangleAlert, CreditCard, ChevronsUpDown, ChevronUp, ChevronDown, Check, ExternalLink, ArrowRight, X, Calendar, AlertTriangle, CheckCircle2, List, Plus, Link2, RefreshCw, Share2, Send, Pencil, Trash2 } from '@hanzogui/lucide-icons-2';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// 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;
+};
+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)
+  };
+}
+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)
+    }
+  };
+}
+var HostCtx = createContext({});
+var HostProvider = ({ actions, children }) => /* @__PURE__ */ jsx(HostCtx.Provider, { value: actions, children });
+var useHost = () => useContext(HostCtx);
+function classifyBackend(e) {
+  const status = typeof e?.status === "number" ? e.status : 0;
+  const message = e instanceof Error ? e.message : String(e);
+  if (status === 503) return { kind: "not-initialized", message };
+  if (status === 404 || status === 405) return { kind: "unavailable", message };
+  if (status === 501) return { kind: "not-implemented", message };
+  if (status === 402) return { kind: "billing", message };
+  if (status === 401) return { kind: "signin", message };
+  if (status === 403) return { kind: "access", message };
+  return { kind: "error", message };
+}
+function classifyRead(e) {
+  const s = classifyBackend(e);
+  return s.kind === "billing" ? null : s;
+}
+var TITLES = {
+  "not-initialized": "Backend not initialized",
+  unavailable: "Not available on this deployment yet",
+  "not-implemented": "Not yet available",
+  access: "Not enabled for your account",
+  signin: "Your session expired",
+  billing: "Add credits to continue",
+  error: "Could not reach the backend"
+};
+var BODIES = {
+  "not-initialized": "The /v1 route is mounted but its runtime (or the console API key it proxies to) is not configured on this deployment yet. Real data appears here once it is \u2014 no placeholder data is shown.",
+  unavailable: "This endpoint is not mounted at the gateway on this host yet. The view lights up automatically once the route is live.",
+  // 501 — a real, planned capability whose body ships in a later phase.
+  "not-implemented": "This capability is planned but not wired yet. The backend answers honestly rather than pretending it worked \u2014 nothing here is fabricated, and the view lights up automatically once it ships.",
+  // 403 for a SIGNED-IN user — never "sign in".
+  access: "You're signed in, but this isn't enabled for your organization on this deployment, or it's an admin-only surface. It appears here automatically once your account has access \u2014 nothing is fabricated.",
+  // 401 — the session itself lapsed; re-auth returns to this exact page.
+  signin: "Your session has expired or isn\u2019t recognized here. Sign in again to continue where you left off.",
+  // Empty → the card shows the backend's own message (the honest "Insufficient
+  // balance. Please add credits…" from the gateway billing gate).
+  billing: "",
+  error: ""
+};
+function BackendStateCard({
+  state,
+  onRetry,
+  hint
+}) {
+  const { signIn, addCredits } = useHost();
+  return /* @__PURE__ */ jsxs(Card, { borderWidth: 1, borderColor: "$borderColor", p: "$4", gap: "$2", maxWidth: 640, children: [
+    /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", children: [
+      /* @__PURE__ */ jsx(TriangleAlert, { size: 16 }),
+      /* @__PURE__ */ jsx(Text, { fontSize: "$4", fontWeight: "700", children: TITLES[state.kind] })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", children: BODIES[state.kind] || state.message }),
+    hint ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: hint }) : null,
+    state.kind === "signin" && signIn ? /* @__PURE__ */ jsx(Button, { size: "$2", theme: "light", self: "flex-start", onPress: signIn, children: "Sign in again" }) : state.kind === "billing" && addCredits ? (
+      // 402 — the org has no funded balance. Offer a top-up CTA (and keep Retry so
+      // a returning, funded caller can reload in place).
+      /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [
+        /* @__PURE__ */ jsx(Button, { size: "$2", theme: "light", self: "flex-start", icon: /* @__PURE__ */ jsx(CreditCard, { size: 14 }), onPress: addCredits, children: "Add credits" }),
+        onRetry ? /* @__PURE__ */ jsx(Button, { size: "$2", self: "flex-start", onPress: onRetry, children: "Retry" }) : null
+      ] })
+    ) : onRetry ? /* @__PURE__ */ jsx(Button, { size: "$2", self: "flex-start", onPress: onRetry, children: "Retry" }) : null
+  ] });
+}
+function SkeletonRows({ columns, count = 6 }) {
+  return /* @__PURE__ */ jsx(YStack, { children: Array.from({ length: count }).map((_, r) => /* @__PURE__ */ jsx(XStack, { py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", children: columns.map((c, i) => /* @__PURE__ */ jsx(YStack, { width: c.width, flex: c.width ? void 0 : 1, minW: c.width ? void 0 : FLEX_MIN_COL_W, items: c.align === "right" ? "flex-end" : "flex-start", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "hz-skeleton",
+      style: { height: 12, borderRadius: 6, width: `${[62, 40, 54, 34, 48][(i + r) % 5]}%` },
+      "aria-hidden": true
+    }
+  ) }, c.key)) }, r)) });
+}
+function DataTable({
+  columns,
+  rows: rows2,
+  loading,
+  empty = "Nothing here yet.",
+  rowKey,
+  onRowPress,
+  isRowExpanded,
+  renderExpanded,
+  sort,
+  onSortChange
+}) {
+  const minTableW = columns.reduce((sum, c) => sum + (c.width ?? FLEX_MIN_COL_W), 0) + (columns.length + 1) * 12;
+  return /* @__PURE__ */ jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: [
+    /* @__PURE__ */ jsx(YStack, { style: { overflowX: "auto", overflowY: "visible" }, children: /* @__PURE__ */ jsxs(YStack, { minW: minTableW, children: [
+      /* @__PURE__ */ jsx(XStack, { bg: "$color1", py: "$2.5", px: "$3", gap: "$3", borderBottomWidth: 1, borderColor: "$borderColor", role: "row", children: columns.map((c) => {
+        const sortable = c.sortable === true && !!onSortChange;
+        const active = sortable && sort?.key === c.key;
+        const Caret = !sortable ? null : !active ? ChevronsUpDown : sort?.dir === "asc" ? ChevronUp : ChevronDown;
+        return /* @__PURE__ */ jsxs(
+          XStack,
+          {
+            width: c.width,
+            flex: c.width ? void 0 : 1,
+            minW: c.width ? void 0 : FLEX_MIN_COL_W,
+            items: "center",
+            gap: "$1",
+            justify: c.align === "right" ? "flex-end" : "flex-start",
+            role: "columnheader",
+            "aria-sort": sortable ? active ? sort?.dir === "asc" ? "ascending" : "descending" : "none" : void 0,
+            "aria-label": sortable ? `Sort by ${c.header}` : void 0,
+            cursor: sortable ? "pointer" : void 0,
+            hoverStyle: sortable ? { opacity: 0.75 } : void 0,
+            onPress: sortable ? () => onSortChange?.(c.key) : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  fontSize: "$1",
+                  fontWeight: "500",
+                  color: active ? "$color12" : "$color10",
+                  text: c.align === "right" ? "right" : "left",
+                  className: c.mono ? "hz-tnum" : void 0,
+                  children: c.header
+                }
+              ),
+              Caret ? /* @__PURE__ */ jsx(Caret, { size: 12, color: active ? "$color12" : "$color9" }) : null
+            ]
+          },
+          c.key
+        );
+      }) }),
+      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(
+            XStack,
+            {
+              className: "hz-row",
+              py: "$2.5",
+              px: "$3",
+              gap: "$3",
+              borderTopWidth: 1,
+              borderColor: "$borderColor",
+              items: "center",
+              bg: expanded ? "$color2" : void 0,
+              hoverStyle: onRowPress ? { bg: "$color2" } : void 0,
+              cursor: onRowPress ? "pointer" : void 0,
+              onPress: onRowPress ? () => onRowPress(row) : void 0,
+              children: columns.map((c) => {
+                const cell = c.render ? c.render(row) : String(row[c.key] ?? "");
+                return /* @__PURE__ */ jsx(
+                  YStack,
+                  {
+                    width: c.width,
+                    flex: c.width ? void 0 : 1,
+                    minW: c.width ? void 0 : FLEX_MIN_COL_W,
+                    justify: "center",
+                    items: c.align === "right" ? "flex-end" : "flex-start",
+                    children: typeof cell === "string" || typeof cell === "number" ? /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        fontSize: "$3",
+                        numberOfLines: 1,
+                        color: "$color12",
+                        text: c.align === "right" ? "right" : "left",
+                        className: c.mono ? "hz-mono" : void 0,
+                        children: cell
+                      }
+                    ) : cell
+                  },
+                  c.key
+                );
+              })
+            }
+          ),
+          expanded && renderExpanded ? /* @__PURE__ */ jsx(YStack, { borderTopWidth: 1, borderColor: "$borderColor", bg: "$color1", children: renderExpanded(row) }) : null
+        ] }, rowKey(row));
+      }) }) : 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;
+function isHexColor(v) {
+  return typeof v === "string" && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v.trim());
+}
+function resolveAccent(theme) {
+  if (!theme || !theme.isEnabled) return null;
+  const hex = (theme.colorPrimary ?? "").trim();
+  return isHexColor(hex) ? hex : null;
+}
+function expandHex(hex) {
+  const h = hex.trim().toLowerCase();
+  if (h.length === 4) return `#${h[1]}${h[1]}${h[2]}${h[2]}${h[3]}${h[3]}`;
+  return h;
+}
+function contrastText(hex) {
+  if (!isHexColor(hex)) return "#ffffff";
+  const h = expandHex(hex);
+  const r = parseInt(h.slice(1, 3), 16) / 255;
+  const g = parseInt(h.slice(3, 5), 16) / 255;
+  const b = parseInt(h.slice(5, 7), 16) / 255;
+  const lin = (c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  const luminance = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+function accentFor(theme) {
+  const hex = resolveAccent(theme);
+  return { accent: hex, contrast: hex ? contrastText(hex) : "#ffffff" };
+}
+var DEFAULT = { accent: null, contrast: "#ffffff" };
+var current = DEFAULT;
+var listeners = /* @__PURE__ */ new Set();
+function setOrgAccent(theme) {
+  const next = accentFor(theme);
+  if (next.accent === current.accent) return;
+  current = next.accent ? next : DEFAULT;
+  for (const l of listeners) l();
+}
+function subscribe(cb) {
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+}
+function useAccent() {
+  return useSyncExternalStore(
+    subscribe,
+    () => current,
+    () => DEFAULT
+  );
+}
+function PrimaryButton(props) {
+  const { accent, contrast } = useAccent();
+  if (accent) {
+    return /* @__PURE__ */ jsx(Button, { style: { backgroundColor: accent, color: contrast, borderColor: accent }, ...props });
+  }
+  return /* @__PURE__ */ jsx(Button, { theme: "light", ...props });
+}
+function openHref(href) {
+  if (typeof window !== "undefined") window.open(href, "_blank", "noopener");
+}
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  bullets,
+  primary,
+  secondary
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderStyle: "dashed",
+      p: "$6",
+      gap: "$4",
+      items: "center",
+      maxWidth: 640,
+      self: "center",
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsx(
+          YStack,
+          {
+            width: 48,
+            height: 48,
+            items: "center",
+            justify: "center",
+            rounded: "$4",
+            bg: "$color3",
+            children: /* @__PURE__ */ jsx(Icon, { size: 24 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(YStack, { gap: "$2", items: "center", maxW: 480, children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: "$6", fontWeight: "500", text: "center", letterSpacing: -0.3, children: title }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", text: "center", children: description })
+        ] }),
+        bullets && bullets.length ? /* @__PURE__ */ jsx(YStack, { gap: "$2", self: "stretch", maxW: 420, mx: "auto", children: bullets.map((b) => /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "flex-start", children: [
+          /* @__PURE__ */ jsx(YStack, { pt: "$1", children: /* @__PURE__ */ jsx(Check, { size: 14, color: "$color10" }) }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", flex: 1, children: b })
+        ] }, b)) }) : null,
+        primary || secondary ? /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", justify: "center", children: [
+          primary ? /* @__PURE__ */ jsx(
+            PrimaryButton,
+            {
+              icon: primary.icon,
+              iconAfter: primary.href ? /* @__PURE__ */ jsx(ExternalLink, { size: 15 }) : /* @__PURE__ */ jsx(ArrowRight, { size: 15 }),
+              onPress: () => primary.href ? openHref(primary.href) : primary.onPress?.(),
+              children: primary.label
+            }
+          ) : null,
+          secondary ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              chromeless: true,
+              icon: secondary.icon,
+              iconAfter: secondary.href ? /* @__PURE__ */ jsx(ExternalLink, { size: 14 }) : void 0,
+              onPress: () => secondary.href ? openHref(secondary.href) : secondary.onPress?.(),
+              children: secondary.label
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+function FieldRow({ label, children }) {
+  return /* @__PURE__ */ jsxs(XStack, { gap: "$3", items: "flex-start", flexWrap: "wrap", children: [
+    /* @__PURE__ */ jsx(Label, { width: "100%", pt: "$2", color: "$color11", fontSize: "$3", $md: { width: 180 }, children: label }),
+    /* @__PURE__ */ jsx(YStack, { flex: 1, minW: 0, $md: { minW: 240 }, children })
+  ] });
+}
+function FieldText({
+  value,
+  onChange,
+  disabled,
+  secure,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      value,
+      onChangeText: onChange,
+      disabled,
+      secureTextEntry: secure,
+      placeholder,
+      autoCapitalize: "none"
+    }
+  );
+}
+function FieldTextArea({
+  value,
+  onChange,
+  disabled,
+  rows: rows2 = 6
+}) {
+  return /* @__PURE__ */ jsx(TextArea, { value, onChangeText: onChange, disabled, numberOfLines: rows2 });
+}
+function FieldSwitch({
+  checked,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(Switch, { checked, onCheckedChange: onChange, disabled, size: "$3", children: /* @__PURE__ */ jsx(Switch.Thumb, {}) });
+}
+var CHEVRON = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9a9a9a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'
+)}`;
+function selectStyle(disabled) {
+  return {
+    width: "100%",
+    boxSizing: "border-box",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    background: `var(--background) url("${CHEVRON}") no-repeat right 10px center`,
+    color: "var(--color12)",
+    border: "1px solid var(--borderColor)",
+    borderRadius: 9,
+    padding: "9px 34px 9px 12px",
+    fontSize: 14,
+    lineHeight: "20px",
+    fontFamily: "inherit",
+    height: 40,
+    outline: "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1
+  };
+}
+var OPTION_STYLE = { background: "var(--color2)", color: "var(--color12)" };
+function FieldSelect({
+  value,
+  options,
+  onChange,
+  disabled,
+  placeholder = "Select\u2026"
+}) {
+  const showPlaceholder = value === "" || !options.includes(value);
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      value: showPlaceholder ? "" : value,
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled,
+      "aria-label": placeholder,
+      style: selectStyle(disabled),
+      children: [
+        showPlaceholder ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, style: OPTION_STYLE, children: placeholder }) : null,
+        options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, style: OPTION_STYLE, children: opt }, opt))
+      ]
+    }
+  );
+}
+function FieldSlider({
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs(XStack, { gap: "$3", items: "center", children: [
+    /* @__PURE__ */ jsx(Text, { width: 56, fontSize: "$3", color: "$color11", children: value }),
+    /* @__PURE__ */ jsxs(
+      Slider,
+      {
+        flex: 1,
+        min,
+        max,
+        step,
+        value: [value],
+        onValueChange: (v) => onChange(v[0] ?? min),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(Slider.Track, { children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
+          /* @__PURE__ */ jsx(Slider.Thumb, { index: 0, circular: true })
+        ]
+      }
+    )
+  ] });
+}
+function PageHeader({
+  title,
+  subtitle,
+  actions
+}) {
+  return (
+    // flexWrap lets the actions drop below the title on narrow screens; flex={1}
+    // minW={0} lets the title column shrink so a long subtitle WRAPS instead of
+    // running off the viewport (a flex child defaults to min-width:auto = content
+    // width, which would overflow on mobile).
+    /* @__PURE__ */ jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$3", flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsxs(YStack, { gap: "$1", flex: 1, minW: 200, children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: "$7", fontWeight: "500", letterSpacing: -0.4, children: title }),
+        subtitle ? /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", children: subtitle }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx(XStack, { gap: "$2", items: "center", flexWrap: "wrap", width: "100%", $md: { width: "auto", justify: "flex-end" }, children: actions }) : null
+    ] })
+  );
+}
+var toneOf = (status) => {
+  const s = status.toLowerCase();
+  if (s === "green") return "green";
+  if (s === "yellow") return "yellow";
+  if (s === "red") return "red";
+  if (["ready", "active", "running", "available", "ok", "live", "succeeded", "connected", "synced", "imported"].includes(s)) return "green";
+  if (["creating", "provisioning", "pending", "updating", "attaching", "building", "deploying", "queued", "importing"].includes(s))
+    return "yellow";
+  if (["error", "failed", "degraded", "down", "canceled", "conflict"].includes(s)) return "red";
+  return "neutral";
+};
+var TONE_BG = {
+  green: "$color5",
+  yellow: "$color4",
+  red: "$color4",
+  neutral: "$color3"
+};
+var TONE_FG = {
+  green: "$color12",
+  yellow: "$color12",
+  red: "$color12",
+  neutral: "$color11"
+};
+function StatusTag({ status }) {
+  const tone = toneOf(status ?? "");
+  return /* @__PURE__ */ jsx(Text, { fontSize: "$1", px: "$2", py: "$1", rounded: "$2", bg: TONE_BG[tone], color: TONE_FG[tone], children: status || "unknown" });
+}
+
+// src/product/color.ts
+var asColor = (hex) => hex;
+var LG = 1024;
+var lockCount = 0;
+var savedOverflow = "";
+function lockScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    savedOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) document.body.style.overflow = savedOverflow;
+}
+function SlideOver({
+  open,
+  onClose,
+  side = "right",
+  size = 420,
+  title,
+  icon: Icon,
+  iconColor,
+  headerRight,
+  ariaLabel,
+  zIndex = 1e3,
+  children
+}) {
+  const panelRef = useRef(null);
+  const openerRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    openerRef.current = typeof document !== "undefined" ? document.activeElement : null;
+    lockScroll();
+    const t = window.setTimeout(() => {
+      const el = panelRef.current;
+      if (el && typeof el.focus === "function") el.focus();
+    }, 0);
+    return () => {
+      window.clearTimeout(t);
+      unlockScroll();
+      const opener = openerRef.current;
+      if (opener && opener instanceof HTMLElement && typeof opener.focus === "function") opener.focus();
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  const offscreen = side === "right" ? "translateX(100%)" : "translateX(-100%)";
+  const edge = side === "right" ? { r: 0 } : { l: 0 };
+  return /* @__PURE__ */ jsxs(
+    YStack,
+    {
+      overflow: "hidden",
+      pointerEvents: open ? "auto" : "none",
+      "aria-hidden": !open,
+      style: { position: "fixed", inset: 0, zIndex },
+      children: [
+        /* @__PURE__ */ jsx(
+          YStack,
+          {
+            position: "absolute",
+            t: 0,
+            l: 0,
+            r: 0,
+            b: 0,
+            bg: "rgba(0,0,0,0.55)",
+            className: "hz-fade",
+            style: { opacity: open ? 1 : 0 },
+            onPress: onClose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YStack,
+          {
+            ref: panelRef,
+            tabIndex: -1,
+            role: "dialog",
+            "aria-modal": open ? true : void 0,
+            "aria-label": typeof title === "string" ? title : ariaLabel,
+            position: "absolute",
+            t: 0,
+            b: 0,
+            ...edge,
+            width: "100%",
+            $lg: { width: size, maxW: "100vw" },
+            bg: "$color1",
+            borderLeftWidth: side === "right" ? 1 : 0,
+            borderRightWidth: side === "left" ? 1 : 0,
+            borderColor: "$borderColor",
+            className: "hz-slide hz-elevation-4",
+            style: {
+              transform: open ? "translateX(0)" : offscreen,
+              height: "100dvh",
+              paddingTop: "env(safe-area-inset-top)",
+              paddingBottom: "env(safe-area-inset-bottom)"
+            },
+            children: title !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                XStack,
+                {
+                  items: "center",
+                  gap: "$2.5",
+                  px: "$4",
+                  height: 56,
+                  borderBottomWidth: 1,
+                  borderColor: "$borderColor",
+                  children: [
+                    Icon ? /* @__PURE__ */ jsx(Icon, { size: 18, color: iconColor ? asColor(iconColor) : void 0 }) : null,
+                    /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: "$5", fontWeight: "700", color: "$color12", numberOfLines: 1, children: title }),
+                    headerRight,
+                    /* @__PURE__ */ jsx(Button, { chromeless: true, width: 44, height: 44, icon: /* @__PURE__ */ jsx(X, { size: 18 }), onPress: onClose, "aria-label": "Close" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(ScrollView, { flex: 1, children: /* @__PURE__ */ jsx(YStack, { flex: 1, p: "$4", gap: "$3", children }) })
+            ] }) : (
+              // Bare mode — the caller owns the full panel layout (e.g. the nav drawer
+              // renders its own header + scroll + footer).
+              children
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/product/social/format.ts
+function formatPostTime(unix) {
+  if (!unix) return "\u2014";
+  return new Date(unix * 1e3).toLocaleString(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function postDayBucket(unix) {
+  const d = new Date(unix * 1e3);
+  const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+  const label = d.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" });
+  return { key, label };
+}
+function postPreview(s) {
+  const t = s.trim();
+  return t.length > 72 ? `${t.slice(0, 72)}\u2026` : t || "\u2014";
+}
+function parsePostTime(dt) {
+  const ms = Date.parse(dt.trim());
+  return Number.isFinite(ms) && ms > 0 ? Math.floor(ms / 1e3) : 0;
+}
+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));
+    const groups = [];
+    const index = /* @__PURE__ */ new Map();
+    for (const p of timed) {
+      const { key, label } = postDayBucket(p.scheduleAt ?? 0);
+      let i = index.get(key);
+      if (i === void 0) {
+        i = groups.length;
+        index.set(key, i);
+        groups.push({ label, items: [] });
+      }
+      groups[i].items.push(p);
+    }
+    return groups;
+  }, [posts]);
+  if (days.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: Calendar,
+        title: "Nothing on the calendar",
+        description: "Scheduled and timed posts appear here, grouped by day. Compose a post and pick Schedule to plan ahead."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(YStack, { gap: "$4", children: days.map((d) => /* @__PURE__ */ jsxs(YStack, { gap: "$2", children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$color11", children: d.label }),
+    d.items.map((p) => /* @__PURE__ */ jsxs(
+      XStack,
+      {
+        items: "center",
+        justify: "space-between",
+        gap: "$3",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        rounded: "$4",
+        px: "$4",
+        py: "$3",
+        cursor: "pointer",
+        hoverStyle: { bg: "$color2" },
+        onPress: () => onOpen(p),
+        children: [
+          /* @__PURE__ */ jsxs(YStack, { gap: "$1", flex: 1, children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "$3", children: postPreview(p.content) }),
+            /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: p.channel }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color10", children: [
+                "\xB7 ",
+                formatPostTime(p.scheduleAt ?? 0)
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(StatusTag, { status: p.status })
+        ]
+      },
+      p.id
+    ))
+  ] }, d.label)) });
+}
+var COMPOSE_MODES = ["draft", "schedule", "now"];
+var COMPOSE_LABEL = {
+  draft: "Save draft",
+  schedule: "Schedule",
+  now: "Publish now"
+};
+function PostComposer({
+  channels,
+  providers,
+  onSubmit
+}) {
+  const [content, setContent] = useState("");
+  const [channel, setChannel] = useState(channels[0] ?? "x");
+  const [mode, setMode] = useState("draft");
+  const [scheduleAt, setScheduleAt] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const cap = providers.find((p) => p.provider === channel);
+  const unconfigured = (mode === "now" || mode === "schedule") && !!cap && !cap.credentialsConfigured;
+  const submit = async () => {
+    if (!content.trim()) {
+      setError("Content is required.");
+      return;
+    }
+    let status = "draft";
+    let at = 0;
+    if (mode === "schedule") {
+      at = parsePostTime(scheduleAt);
+      if (at <= Math.floor(Date.now() / 1e3)) {
+        setError("Pick a future date and time to schedule.");
+        return;
+      }
+      status = "scheduled";
+    } else if (mode === "now") {
+      status = "scheduled";
+    }
+    setSaving(true);
+    setError(null);
+    const message = await onSubmit({ content: content.trim(), channel, status, scheduleAt: at }, mode);
+    if (message) {
+      setError(message);
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(YStack, { gap: "$3", p: "$4", children: [
+    /* @__PURE__ */ jsx(FieldRow, { label: "Content", children: /* @__PURE__ */ jsx(FieldTextArea, { value: content, onChange: setContent, disabled: saving }) }),
+    /* @__PURE__ */ jsx(FieldRow, { label: "Channel", children: /* @__PURE__ */ jsx(FieldSelect, { value: channel, options: channels, onChange: setChannel, disabled: saving }) }),
+    /* @__PURE__ */ jsx(FieldRow, { label: "When", children: /* @__PURE__ */ jsx(
+      FieldSelect,
+      {
+        value: mode,
+        options: [...COMPOSE_MODES],
+        onChange: (v) => setMode(v),
+        disabled: saving
+      }
+    ) }),
+    mode === "schedule" ? /* @__PURE__ */ jsx(FieldRow, { label: "Schedule at", children: /* @__PURE__ */ jsx(
+      FieldText,
+      {
+        value: scheduleAt,
+        onChange: setScheduleAt,
+        placeholder: "2026-07-15 09:00",
+        disabled: saving
+      }
+    ) }) : null,
+    unconfigured ? /* @__PURE__ */ jsxs(XStack, { items: "flex-start", gap: "$2", children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { size: 14, color: "var(--yellow10)" }),
+      /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color10", children: [
+        channel,
+        " isn\u2019t configured to publish yet \u2014 needs ",
+        cap?.missingCredentials.join(", "),
+        ". The post is saved and marked failed on publish until credentials are supplied."
+      ] })
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$red10", children: error }) : null,
+    /* @__PURE__ */ jsx(PrimaryButton, { onPress: submit, disabled: saving, children: saving ? "Working\u2026" : COMPOSE_LABEL[mode] })
+  ] });
+}
+function ProviderReadinessList({ providers }) {
+  return /* @__PURE__ */ jsxs(YStack, { gap: "$2", children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: "Network publish-readiness" }),
+    providers.map((p) => /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", py: "$1", children: [
+      /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+        p.credentialsConfigured ? /* @__PURE__ */ jsx(CheckCircle2, { size: 14, color: "var(--green10)" }) : /* @__PURE__ */ jsx(AlertTriangle, { size: 14, color: "var(--yellow10)" }),
+        /* @__PURE__ */ jsx(Text, { fontSize: "$2", children: p.provider })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: p.credentialsConfigured ? "Ready" : `needs ${p.missingCredentials.join(", ")}` })
+    ] }, p.provider))
+  ] });
+}
+function SocialSummaryBar({ summary }) {
+  const cells = [
+    { label: "Posts", value: summary.posts },
+    { label: "Scheduled", value: summary.scheduled },
+    { label: "Published", value: summary.published },
+    { label: "Accounts", value: summary.accounts }
+  ];
+  return /* @__PURE__ */ jsx(XStack, { gap: "$3", flexWrap: "wrap", children: cells.map((c) => /* @__PURE__ */ jsxs(
+    YStack,
+    {
+      gap: "$1",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      rounded: "$4",
+      px: "$4",
+      py: "$3",
+      minW: 140,
+      children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: c.label }),
+        /* @__PURE__ */ jsx(Text, { fontSize: "$6", fontWeight: "500", className: "hz-tnum", children: c.value })
+      ]
+    },
+    c.label
+  )) });
+}
+var OPTIONS = [
+  { id: "list", label: "List", icon: List },
+  { id: "calendar", label: "Calendar", icon: Calendar }
+];
+function ViewToggle({
+  view,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(XStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: OPTIONS.map((o) => {
+    const Icon = o.icon;
+    const active = view === o.id;
+    return /* @__PURE__ */ jsxs(
+      XStack,
+      {
+        items: "center",
+        gap: "$2",
+        px: "$3",
+        py: "$2",
+        cursor: "pointer",
+        bg: active ? "$color4" : "transparent",
+        hoverStyle: { bg: active ? "$color4" : "$color2" },
+        onPress: () => onChange(o.id),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { size: 14 }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "$2", fontWeight: active ? "500" : "400", children: o.label })
+        ]
+      },
+      o.id
+    );
+  }) });
+}
+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 { ACCOUNT_STATUSES, BackendStateCard, COMPOSE_MODES, CampaignCard, ChannelBadge, DataTable, EmptyState, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, HostProvider, LG, POST_STATUSES, PROVIDERS, PageHeader, PostAgenda, PostCard, PostComposer, PrimaryButton, ProviderReadinessList, SlideOver, SocialResource, SocialSummaryBar, StatusTag, ViewToggle, accentFor, asColor, classifyBackend, classifyRead, contrastText, createSocialApi, formatPostTime, isHexColor, normalizeAccount, normalizeAccounts, normalizePost, normalizePosts, normalizeProviderCapability, normalizeProviders, normalizeSummary, parsePostTime, postDayBucket, postPreview, resolveAccent, setOrgAccent, useAccent, useHost };
+//# sourceMappingURL=chunk-YAYUPOE3.js.map
+//# sourceMappingURL=chunk-YAYUPOE3.js.map