@hanzo/ui 8.0.13 → 8.0.15

package/dist/chunk-23V6BPHG.js

@@ -0,0 +1,1142 @@
+'use client';
+import { PROVIDERS } from './chunk-ZGTJCJ55.js';
+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';
+
+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,
+  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 }) : rows.length > 0 ? /* @__PURE__ */ jsx(YStack, { children: rows.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 && 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
+  ] });
+}
+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 = 6
+}) {
+  return /* @__PURE__ */ jsx(TextArea, { value, onChangeText: onChange, disabled, numberOfLines: rows });
+}
+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 { BackendStateCard, COMPOSE_MODES, CampaignCard, ChannelBadge, DataTable, EmptyState, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, HostProvider, LG, PageHeader, PostAgenda, PostCard, PostComposer, PrimaryButton, ProviderReadinessList, SlideOver, SocialResource, SocialSummaryBar, StatusTag, ViewToggle, accentFor, asColor, classifyBackend, classifyRead, contrastText, formatPostTime, isHexColor, parsePostTime, postDayBucket, postPreview, resolveAccent, setOrgAccent, useAccent, useHost };
+//# sourceMappingURL=chunk-23V6BPHG.js.map
+//# sourceMappingURL=chunk-23V6BPHG.js.map