@tangle-network/sandbox-ui 0.22.1 → 0.23.1

package/dist/assets.js

@@ -0,0 +1,946 @@
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+
+// src/assets/approval-queue.tsx
+import * as React3 from "react";
+import { Button as Button3, Input as Input2 } from "@tangle-network/ui/primitives";
+import { Search, CheckCheck } from "lucide-react";
+
+// src/assets/asset-card.tsx
+import { Badge } from "@tangle-network/ui/primitives";
+import { Check, X, Pencil, GitBranch } from "lucide-react";
+
+// src/assets/preview/image-preview.tsx
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ASPECT = {
+  feed: "aspect-square",
+  story: "aspect-[9/16]",
+  carousel: "aspect-square"
+};
+function bgStyle(bg, brand) {
+  if (bg.type === "color") return { background: bg.value };
+  if (bg.type === "gradient") return { background: `linear-gradient(${bg.direction ?? "to bottom right"}, ${bg.from}, ${bg.to})` };
+  if (bg.type === "image") {
+    return {
+      backgroundImage: `url(${bg.url})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center"
+    };
+  }
+  return { background: brand.primaryColor };
+}
+function Layer({ layer, brand }) {
+  const base = {
+    position: "absolute",
+    left: `${layer.x}%`,
+    top: `${layer.y}%`
+  };
+  if (layer.type === "text") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...base,
+          fontSize: layer.fontSize ?? 16,
+          fontWeight: layer.fontWeight ?? "normal",
+          color: layer.color ?? brand.textColor,
+          width: layer.width ? `${layer.width}%` : void 0,
+          textAlign: layer.align ?? "left"
+        },
+        children: layer.text
+      }
+    );
+  }
+  if (layer.type === "image") {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: layer.url,
+        alt: "",
+        style: {
+          ...base,
+          width: `${layer.width}%`,
+          height: `${layer.height}%`,
+          opacity: layer.opacity ?? 1,
+          objectFit: "cover"
+        }
+      }
+    );
+  }
+  if (layer.type === "shape") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...base,
+          width: `${layer.width}%`,
+          height: `${layer.height}%`,
+          background: layer.fill ?? brand.accentColor,
+          opacity: layer.opacity ?? 1,
+          borderRadius: layer.shape === "circle" ? "50%" : layer.shape === "rounded-rect" ? "8px" : 0
+        }
+      }
+    );
+  }
+  if (layer.type === "logo" && brand.logoUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: brand.logoUrl,
+        alt: brand.businessName,
+        style: {
+          ...base,
+          width: layer.width ? `${layer.width}%` : "12%"
+        }
+      }
+    );
+  }
+  return null;
+}
+function Slide({ slide, brand }) {
+  return /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden", style: bgStyle(slide.background, brand), children: slide.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, { layer, brand }, i)) });
+}
+function ImagePreview({ content, brand, format = "feed", className }) {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const slides = content.slides;
+  const isMulti = slides.length > 1;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("relative w-full rounded overflow-hidden", ASPECT[format]), children: [
+      /* @__PURE__ */ jsx(Slide, { slide: slides[activeIndex], brand }),
+      isMulti && activeIndex > 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveIndex((i) => i - 1),
+          className: "absolute left-1 top-1/2 -translate-y-1/2 rounded-full p-1 bg-black/40 text-white hover:bg-black/60",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+        }
+      ),
+      isMulti && activeIndex < slides.length - 1 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveIndex((i) => i + 1),
+          className: "absolute right-1 top-1/2 -translate-y-1/2 rounded-full p-1 bg-black/40 text-white hover:bg-black/60",
+          children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+        }
+      ),
+      isMulti && /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1", children: slides.map((_, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveIndex(i),
+          className: cn(
+            "w-1.5 h-1.5 rounded-full transition-colors",
+            i === activeIndex ? "bg-white" : "bg-white/40"
+          )
+        },
+        i
+      )) })
+    ] }),
+    isMulti && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground text-center", children: [
+      activeIndex + 1,
+      " / ",
+      slides.length
+    ] })
+  ] });
+}
+
+// src/assets/asset-card.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var STATUS_VARIANT = {
+  draft: "secondary",
+  pending_review: "outline",
+  approved: "default",
+  rejected: "destructive",
+  scheduled: "secondary",
+  published: "default"
+};
+var STATUS_LABEL = {
+  draft: "Draft",
+  pending_review: "Review",
+  approved: "Approved",
+  rejected: "Rejected",
+  scheduled: "Scheduled",
+  published: "Published"
+};
+function Thumbnail({ spec }) {
+  const { format, brand, content } = spec;
+  if (format === "email") {
+    const ec = content;
+    return /* @__PURE__ */ jsxs2("div", { className: "p-2 text-xs space-y-0.5", children: [
+      /* @__PURE__ */ jsx2("div", { className: "font-medium truncate", children: ec.subject }),
+      /* @__PURE__ */ jsxs2("div", { className: "text-muted-foreground truncate text-[10px]", children: [
+        ec.sections.length,
+        " sections"
+      ] })
+    ] });
+  }
+  if (format.startsWith("image:")) {
+    const imgFormat = format === "image:story" ? "story" : "feed";
+    return /* @__PURE__ */ jsx2("div", { className: "overflow-hidden rounded", style: { maxHeight: 120 }, children: /* @__PURE__ */ jsx2(
+      ImagePreview,
+      {
+        content,
+        brand,
+        format: imgFormat
+      }
+    ) });
+  }
+  if (format.startsWith("video:")) {
+    const vc = content;
+    return /* @__PURE__ */ jsxs2("div", { className: "p-2 text-xs space-y-0.5", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "font-medium", children: [
+        vc.scenes.length,
+        " scenes"
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "text-muted-foreground", children: [
+        vc.durationSeconds,
+        "s video"
+      ] })
+    ] });
+  }
+  if (format.startsWith("copy:")) {
+    const cc = content;
+    return /* @__PURE__ */ jsxs2("div", { className: "p-2 text-xs truncate space-y-0.5", children: [
+      /* @__PURE__ */ jsx2("div", { className: "font-medium truncate", children: cc.headline }),
+      /* @__PURE__ */ jsx2("div", { className: "text-muted-foreground line-clamp-2 text-[10px]", children: cc.body })
+    ] });
+  }
+  return null;
+}
+function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, className }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("rounded-lg border border-border bg-card flex flex-col overflow-hidden hover:border-border/80 transition-colors", className), children: [
+    /* @__PURE__ */ jsx2("div", { className: "min-h-[80px] bg-muted/30", children: /* @__PURE__ */ jsx2(Thumbnail, { spec }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "px-2 py-1.5 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-muted-foreground flex-1 truncate", children: spec.format }),
+      /* @__PURE__ */ jsx2(Badge, { variant: STATUS_VARIANT[spec.status], className: "text-[10px] h-4 px-1.5", children: STATUS_LABEL[spec.status] }),
+      variantCount !== void 0 && variantCount > 0 && /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-0.5 text-[10px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx2(GitBranch, { size: 10 }),
+        variantCount
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex border-t border-border", children: [
+      onEdit && /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onEdit(spec.id),
+          className: "flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx2(Pencil, { size: 12 }),
+            "Edit"
+          ]
+        }
+      ),
+      onReject && spec.status === "pending_review" && /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onReject(spec.id),
+          className: "flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/5 transition-colors border-l border-border",
+          children: [
+            /* @__PURE__ */ jsx2(X, { size: 12 }),
+            "Reject"
+          ]
+        }
+      ),
+      onApprove && spec.status === "pending_review" && /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onApprove(spec.id),
+          className: "flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground hover:text-green-600 hover:bg-green-600/5 transition-colors border-l border-border",
+          children: [
+            /* @__PURE__ */ jsx2(Check, { size: 12 }),
+            "Approve"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/assets/asset-editor.tsx
+import * as React2 from "react";
+import { Button as Button2, Input, Textarea, Label } from "@tangle-network/ui/primitives";
+import { MessageSquare, Save, ChevronDown, ChevronRight as ChevronRight2 } from "lucide-react";
+
+// src/assets/preview/email-preview.tsx
+import { jsxs as jsxs3, jsx as jsx3 } from "react/jsx-runtime";
+function EmailPreview({ content, brand, previewUrl, className }) {
+  if (previewUrl) {
+    return jsxs3("div", { className: cn("flex flex-col gap-1", className), children: [
+      jsx3("div", { className: "text-xs text-muted-foreground font-medium truncate", children: content.subject }),
+      content.preheader && jsx3("div", { className: "text-xs text-muted-foreground/60 truncate", children: content.preheader }),
+      jsx3(
+        "iframe",
+        {
+          src: previewUrl,
+          className: "w-full rounded border border-border",
+          style: { height: 480, background: "#fff" },
+          title: "Email preview",
+          sandbox: "allow-same-origin"
+        }
+      )
+    ] });
+  }
+  return jsxs3("div", { className: cn("flex flex-col gap-2", className), children: [
+    jsx3("div", { className: "text-sm font-semibold truncate", children: content.subject }),
+    content.preheader && jsx3("div", { className: "text-xs text-muted-foreground truncate", children: content.preheader }),
+    jsx3(
+      "div",
+      {
+        className: "rounded border border-border p-4 space-y-3 overflow-y-auto",
+        style: { maxHeight: 480, fontFamily: brand.fontFamily, color: brand.textColor },
+        children: content.sections.map((section, i) => {
+          if (section.type === "hero") {
+            return jsxs3("div", { className: "text-center py-4 space-y-2", children: [
+              section.imageUrl && jsx3("img", { src: section.imageUrl, alt: "", className: "mx-auto max-h-40 object-cover rounded" }),
+              jsx3("div", { className: "text-xl font-bold", style: { color: brand.primaryColor }, children: section.headline }),
+              section.subheadline && jsx3("div", { className: "text-sm text-muted-foreground", children: section.subheadline }),
+              section.ctaLabel && jsx3(
+                "a",
+                {
+                  href: section.ctaUrl ?? "#",
+                  className: "inline-block px-4 py-2 rounded text-sm font-medium text-white",
+                  style: { background: brand.primaryColor },
+                  children: section.ctaLabel
+                }
+              )
+            ] }, i);
+          }
+          if (section.type === "body") {
+            return jsx3("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: section.text }, i);
+          }
+          if (section.type === "feature") {
+            return jsxs3("div", { className: "flex gap-3 items-start", children: [
+              section.imageUrl && jsx3("img", { src: section.imageUrl, alt: "", className: "w-16 h-16 object-cover rounded shrink-0" }),
+              jsxs3("div", { children: [
+                jsx3("div", { className: "text-sm font-semibold", children: section.headline }),
+                jsx3("div", { className: "text-xs text-muted-foreground mt-0.5", children: section.description })
+              ] })
+            ] }, i);
+          }
+          if (section.type === "testimonial") {
+            return jsxs3("blockquote", { className: "border-l-2 pl-3 italic text-sm text-muted-foreground", style: { borderColor: brand.accentColor }, children: [
+              jsxs3("p", { children: [
+                '"',
+                section.quote,
+                '"'
+              ] }),
+              jsxs3("footer", { className: "mt-1 text-xs not-italic font-medium", children: [
+                section.author,
+                section.role ? `, ${section.role}` : ""
+              ] })
+            ] }, i);
+          }
+          if (section.type === "cta") {
+            return jsxs3("div", { className: "text-center py-3 space-y-1", children: [
+              jsx3(
+                "a",
+                {
+                  href: section.url,
+                  className: "inline-block px-5 py-2.5 rounded font-medium text-white text-sm",
+                  style: { background: brand.primaryColor },
+                  children: section.label
+                }
+              ),
+              section.subtext && jsx3("p", { className: "text-xs text-muted-foreground", children: section.subtext })
+            ] }, i);
+          }
+          if (section.type === "divider") {
+            return jsx3("hr", { className: "border-border" }, i);
+          }
+          return null;
+        })
+      }
+    )
+  ] });
+}
+
+// src/assets/preview/video-preview.tsx
+import { Fragment } from "react";
+import { Play, Film, Loader2 } from "lucide-react";
+import { Button } from "@tangle-network/ui/primitives";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function VideoPreview({ content, brand, onRenderRequest, isRendering, className }) {
+  if (content.renderedUrl) {
+    return /* @__PURE__ */ jsx4("div", { className: cn("rounded overflow-hidden aspect-[9/16] bg-black", className), children: /* @__PURE__ */ jsx4(
+      "video",
+      {
+        src: content.renderedUrl,
+        controls: true,
+        className: "w-full h-full object-contain",
+        playsInline: true
+      }
+    ) });
+  }
+  const sceneSummary = content.scenes.map((s) => {
+    if (s.type === "text-animation") return s.headline;
+    if (s.type === "image-reveal") return s.caption ?? "Image";
+    if (s.type === "slide") return "Slide";
+    if (s.type === "countdown") return `${s.from}\u2026`;
+    return "Scene";
+  });
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: "relative rounded overflow-hidden aspect-[9/16] flex flex-col items-center justify-center gap-3",
+        style: { background: brand.primaryColor, color: brand.textColor },
+        children: [
+          /* @__PURE__ */ jsx4(Film, { size: 32, className: "opacity-60" }),
+          /* @__PURE__ */ jsx4("div", { className: "text-sm font-medium text-center px-4", children: brand.businessName }),
+          /* @__PURE__ */ jsxs4("div", { className: "text-xs opacity-60", children: [
+            content.scenes.length,
+            " scenes ",
+            "\xB7",
+            " ",
+            content.durationSeconds,
+            "s"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx4("div", { className: "text-xs font-medium text-muted-foreground", children: "Scenes" }),
+      sceneSummary.map((label, i) => /* @__PURE__ */ jsxs4("div", { className: "text-xs text-muted-foreground flex gap-1.5 items-center", children: [
+        /* @__PURE__ */ jsx4("span", { className: "font-mono text-[10px] w-4 text-right opacity-50", children: i + 1 }),
+        /* @__PURE__ */ jsx4("span", { children: label }),
+        /* @__PURE__ */ jsxs4("span", { className: "opacity-40", children: [
+          "\xB7",
+          " ",
+          content.scenes[i].durationSeconds,
+          "s"
+        ] })
+      ] }, i))
+    ] }),
+    onRenderRequest && /* @__PURE__ */ jsx4(
+      Button,
+      {
+        size: "sm",
+        variant: "outline",
+        onClick: onRenderRequest,
+        disabled: isRendering,
+        className: "w-full gap-2",
+        children: isRendering ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4(Loader2, { size: 14, className: "animate-spin" }),
+          "Rendering\u2026"
+        ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4(Play, { size: 14 }),
+          "Render in sandbox"
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/assets/preview/copy-preview.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var PLATFORM_LIMITS = {
+  instagram: 2200,
+  tiktok: 2200,
+  x: 280,
+  linkedin: 3e3,
+  sms: 160,
+  "email-subject": 60
+};
+var PLATFORM_LABELS = {
+  instagram: "Instagram",
+  tiktok: "TikTok",
+  x: "X / Twitter",
+  linkedin: "LinkedIn",
+  sms: "SMS",
+  "email-subject": "Email Subject"
+};
+function CopyPreview({ content, className }) {
+  const limit = PLATFORM_LIMITS[content.platform];
+  const bodyLen = content.body.length;
+  const isOverLimit = limit !== null && bodyLen > limit;
+  const warningThreshold = limit !== null ? limit * 0.9 : null;
+  const isNearLimit = !isOverLimit && warningThreshold !== null && bodyLen >= warningThreshold;
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium text-muted-foreground", children: PLATFORM_LABELS[content.platform] }),
+      limit !== null && /* @__PURE__ */ jsxs5("span", { className: cn("text-xs tabular-nums", isOverLimit ? "text-destructive font-medium" : isNearLimit ? "text-warning" : "text-muted-foreground"), children: [
+        bodyLen,
+        " / ",
+        limit
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "rounded border border-border p-3 space-y-2 bg-card", children: [
+      content.headline && /* @__PURE__ */ jsx5("div", { className: "text-sm font-semibold", children: content.headline }),
+      /* @__PURE__ */ jsx5("p", { className: "text-sm whitespace-pre-wrap leading-relaxed", children: content.body }),
+      content.hashtags && content.hashtags.length > 0 && /* @__PURE__ */ jsx5("div", { className: "text-sm text-blue-500 flex flex-wrap gap-1", children: content.hashtags.map((tag) => /* @__PURE__ */ jsxs5("span", { children: [
+        "#",
+        tag
+      ] }, tag)) })
+    ] })
+  ] });
+}
+
+// src/assets/asset-editor.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function BrandPanel({ brand, onChange }) {
+  const [open, setOpen] = React2.useState(false);
+  return /* @__PURE__ */ jsxs6("div", { className: "border border-border rounded", children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center justify-between px-3 py-2 text-xs font-medium text-muted-foreground hover:text-foreground",
+        onClick: () => setOpen((o) => !o),
+        children: [
+          "Brand tokens",
+          open ? /* @__PURE__ */ jsx6(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx6(ChevronRight2, { size: 14 })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs6("div", { className: "px-3 pb-3 space-y-2 border-t border-border pt-2", children: [
+      ["primaryColor", "accentColor", "textColor"].map((key) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            type: "color",
+            value: brand[key],
+            onChange: (e) => onChange({ ...brand, [key]: e.target.value }),
+            className: "w-6 h-6 rounded cursor-pointer border-0"
+          }
+        ),
+        /* @__PURE__ */ jsx6(Label, { className: "text-xs capitalize", children: key.replace(/Color/, " color") })
+      ] }, key)),
+      /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx6(Label, { className: "text-xs", children: "Font family" }),
+        /* @__PURE__ */ jsx6(
+          Input,
+          {
+            value: brand.fontFamily,
+            onChange: (e) => onChange({ ...brand, fontFamily: e.target.value }),
+            className: "h-7 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx6(Label, { className: "text-xs", children: "Logo URL" }),
+        /* @__PURE__ */ jsx6(
+          Input,
+          {
+            value: brand.logoUrl ?? "",
+            onChange: (e) => onChange({ ...brand, logoUrl: e.target.value || void 0 }),
+            className: "h-7 text-xs",
+            placeholder: "https://\u2026"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function EmailEditor({ spec, onChange }) {
+  const content = spec.content;
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx6(Label, { className: "text-xs", children: "Subject" }),
+      /* @__PURE__ */ jsx6(
+        Input,
+        {
+          value: content.subject,
+          onChange: (e) => onChange({ ...spec, content: { ...content, subject: e.target.value } }),
+          className: "h-8 text-sm"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx6(Label, { className: "text-xs", children: "Preheader" }),
+      /* @__PURE__ */ jsx6(
+        Input,
+        {
+          value: content.preheader ?? "",
+          onChange: (e) => onChange({ ...spec, content: { ...content, preheader: e.target.value || void 0 } }),
+          className: "h-8 text-sm",
+          placeholder: "Preview text\u2026"
+        }
+      )
+    ] }),
+    content.sections.map((section, i) => {
+      if (section.type === "hero" || section.type === "body" || section.type === "cta") {
+        const textField = section.type === "body" ? "text" : section.type === "cta" ? "label" : "headline";
+        const val = section[textField] ?? "";
+        return /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs6(Label, { className: "text-xs capitalize", children: [
+            section.type,
+            " \u2014 ",
+            textField
+          ] }),
+          /* @__PURE__ */ jsx6(
+            Textarea,
+            {
+              value: val,
+              onChange: (e) => {
+                const updated = [...content.sections];
+                updated[i] = { ...updated[i], [textField]: e.target.value };
+                onChange({ ...spec, content: { ...content, sections: updated } });
+              },
+              className: "text-sm min-h-[60px]"
+            }
+          )
+        ] }, i);
+      }
+      return null;
+    })
+  ] });
+}
+function CopyEditor({ spec, onChange }) {
+  const content = spec.content;
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx6(Label, { className: "text-xs", children: "Headline" }),
+      /* @__PURE__ */ jsx6(
+        Input,
+        {
+          value: content.headline,
+          onChange: (e) => onChange({ ...spec, content: { ...content, headline: e.target.value } }),
+          className: "h-8 text-sm"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx6(Label, { className: "text-xs", children: "Body" }),
+      /* @__PURE__ */ jsx6(
+        Textarea,
+        {
+          value: content.body,
+          onChange: (e) => onChange({ ...spec, content: { ...content, body: e.target.value } }),
+          className: "text-sm min-h-[80px]"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx6(Label, { className: "text-xs", children: "Hashtags (comma-separated)" }),
+      /* @__PURE__ */ jsx6(
+        Input,
+        {
+          value: (content.hashtags ?? []).join(", "),
+          onChange: (e) => onChange({ ...spec, content: { ...content, hashtags: e.target.value.split(",").map((t) => t.trim()).filter(Boolean) } }),
+          className: "h-8 text-sm",
+          placeholder: "marketing, growth, saas"
+        }
+      )
+    ] })
+  ] });
+}
+function Preview({ spec, previewUrl, isRendering, onRenderRequest }) {
+  const { format, brand, content } = spec;
+  if (format === "email") return /* @__PURE__ */ jsx6(EmailPreview, { content, brand, previewUrl });
+  if (format.startsWith("image:")) {
+    const imgFormat = format === "image:story" ? "story" : format === "image:carousel" ? "carousel" : "feed";
+    return /* @__PURE__ */ jsx6(ImagePreview, { content, brand, format: imgFormat });
+  }
+  if (format.startsWith("video:")) {
+    return /* @__PURE__ */ jsx6(VideoPreview, { content, brand, onRenderRequest, isRendering });
+  }
+  if (format.startsWith("copy:")) {
+    return /* @__PURE__ */ jsx6(CopyPreview, { content });
+  }
+  return null;
+}
+function AssetEditor({ spec, previewUrl, isRendering, onSave, onRenderRequest, onRevisionRequest, className }) {
+  const [draft, setDraft] = React2.useState(spec);
+  const [revisionInput, setRevisionInput] = React2.useState("");
+  const isDirty = JSON.stringify(draft) !== JSON.stringify(spec);
+  React2.useEffect(() => {
+    setDraft(spec);
+  }, [spec]);
+  const handleRevision = () => {
+    if (!revisionInput.trim()) return;
+    onRevisionRequest?.(revisionInput.trim());
+    setRevisionInput("");
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: cn("grid grid-cols-2 gap-4 h-full min-h-0", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-3 overflow-y-auto pr-1", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx6("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: draft.format }),
+        isDirty && onSave && /* @__PURE__ */ jsxs6(Button2, { size: "sm", variant: "default", onClick: () => onSave(draft), className: "h-7 gap-1.5 text-xs", children: [
+          /* @__PURE__ */ jsx6(Save, { size: 12 }),
+          "Save"
+        ] })
+      ] }),
+      draft.format === "email" && /* @__PURE__ */ jsx6(EmailEditor, { spec: draft, onChange: (s) => setDraft(s) }),
+      (draft.format === "copy:caption" || draft.format === "copy:headline" || draft.format === "copy:sms") && /* @__PURE__ */ jsx6(CopyEditor, { spec: draft, onChange: (s) => setDraft(s) }),
+      /* @__PURE__ */ jsx6(BrandPanel, { brand: draft.brand, onChange: (b) => setDraft((d) => ({ ...d, brand: b })) }),
+      onRevisionRequest && /* @__PURE__ */ jsxs6("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx6(Label, { className: "text-xs", children: "Ask agent to revise" }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsx6(
+            Input,
+            {
+              value: revisionInput,
+              onChange: (e) => setRevisionInput(e.target.value),
+              placeholder: "Make the CTA more urgent\u2026",
+              className: "h-8 text-sm",
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handleRevision();
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            Button2,
+            {
+              size: "sm",
+              variant: "outline",
+              onClick: handleRevision,
+              disabled: !revisionInput.trim(),
+              className: "h-8 px-2",
+              children: /* @__PURE__ */ jsx6(MessageSquare, { size: 14 })
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "overflow-y-auto", children: /* @__PURE__ */ jsx6(
+      Preview,
+      {
+        spec: draft,
+        previewUrl,
+        isRendering,
+        onRenderRequest
+      }
+    ) })
+  ] });
+}
+
+// src/assets/approval-queue.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var FORMAT_OPTIONS = [
+  { value: "all", label: "All formats" },
+  { value: "email", label: "Email" },
+  { value: "image:feed", label: "Feed image" },
+  { value: "image:story", label: "Story" },
+  { value: "image:carousel", label: "Carousel" },
+  { value: "video:reel", label: "Reel" },
+  { value: "video:feed", label: "Video" },
+  { value: "copy:caption", label: "Caption" },
+  { value: "copy:headline", label: "Headline" },
+  { value: "copy:sms", label: "SMS" }
+];
+var STATUS_OPTIONS = [
+  { value: "all", label: "All statuses" },
+  { value: "pending_review", label: "Needs review" },
+  { value: "approved", label: "Approved" },
+  { value: "rejected", label: "Rejected" },
+  { value: "scheduled", label: "Scheduled" },
+  { value: "published", label: "Published" }
+];
+function ApprovalQueue({
+  assets,
+  variantCounts = {},
+  onApprove,
+  onReject,
+  onEdit,
+  onSave,
+  onRevisionRequest,
+  onRenderRequest,
+  renderingIds = /* @__PURE__ */ new Set(),
+  previewUrls = {},
+  className
+}) {
+  const [search, setSearch] = React3.useState("");
+  const [formatFilter, setFormatFilter] = React3.useState("all");
+  const [statusFilter, setStatusFilter] = React3.useState("pending_review");
+  const [editingId, setEditingId] = React3.useState(null);
+  const [scheduleDate, setScheduleDate] = React3.useState("");
+  const filtered = assets.filter((a) => {
+    if (formatFilter !== "all" && a.format !== formatFilter) return false;
+    if (statusFilter !== "all" && a.status !== statusFilter) return false;
+    if (search) {
+      const q = search.toLowerCase();
+      if (!a.id.includes(q) && !a.format.includes(q) && !a.brand.businessName.toLowerCase().includes(q)) return false;
+    }
+    return true;
+  });
+  const pendingCount = assets.filter((a) => a.status === "pending_review").length;
+  const handleBulkApprove = () => {
+    filtered.filter((a) => a.status === "pending_review").forEach((a) => onApprove?.(a.id, scheduleDate || void 0));
+  };
+  const editingSpec = editingId ? assets.find((a) => a.id === editingId) : null;
+  if (editingSpec) {
+    return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col gap-3 h-full", className), children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: () => setEditingId(null),
+            className: "text-xs text-muted-foreground hover:text-foreground",
+            children: "\u2190 Back to queue"
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: "flex gap-2", children: [
+          onReject && editingSpec.status === "pending_review" && /* @__PURE__ */ jsx7(Button3, { size: "sm", variant: "outline", onClick: () => {
+            onReject(editingSpec.id);
+            setEditingId(null);
+          }, children: "Reject" }),
+          onApprove && editingSpec.status === "pending_review" && /* @__PURE__ */ jsx7(Button3, { size: "sm", onClick: () => {
+            onApprove(editingSpec.id, scheduleDate || void 0);
+            setEditingId(null);
+          }, children: "Approve" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx7(
+        AssetEditor,
+        {
+          spec: editingSpec,
+          previewUrl: previewUrls[editingSpec.id],
+          isRendering: renderingIds.has(editingSpec.id),
+          onSave: (s) => {
+            onSave?.(s);
+            setEditingId(null);
+          },
+          onRenderRequest: () => onRenderRequest?.(editingSpec.id),
+          onRevisionRequest: (instr) => onRevisionRequest?.(editingSpec.id, instr),
+          className: "flex-1"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-2 items-center", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "relative flex-1 min-w-40", children: [
+        /* @__PURE__ */ jsx7(Search, { size: 12, className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx7(
+          Input2,
+          {
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: "Filter assets\u2026",
+            className: "h-8 pl-7 text-sm"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx7(
+        "select",
+        {
+          value: formatFilter,
+          onChange: (e) => setFormatFilter(e.target.value),
+          className: "h-8 px-2 text-xs rounded border border-input bg-background",
+          children: FORMAT_OPTIONS.map((o) => /* @__PURE__ */ jsx7("option", { value: o.value, children: o.label }, o.value))
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "select",
+        {
+          value: statusFilter,
+          onChange: (e) => setStatusFilter(e.target.value),
+          className: "h-8 px-2 text-xs rounded border border-input bg-background",
+          children: STATUS_OPTIONS.map((o) => /* @__PURE__ */ jsx7("option", { value: o.value, children: o.label }, o.value))
+        }
+      ),
+      pendingCount > 0 && onApprove && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "date",
+            value: scheduleDate,
+            onChange: (e) => setScheduleDate(e.target.value),
+            className: "h-8 px-2 text-xs rounded border border-input bg-background w-32"
+          }
+        ),
+        /* @__PURE__ */ jsxs7(Button3, { size: "sm", variant: "outline", onClick: handleBulkApprove, className: "h-8 gap-1.5 text-xs", children: [
+          /* @__PURE__ */ jsx7(CheckCheck, { size: 13 }),
+          "Approve all (",
+          pendingCount,
+          ")"
+        ] })
+      ] })
+    ] }),
+    filtered.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "py-12 text-center text-sm text-muted-foreground", children: "No assets match your filters." }) : /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3", children: filtered.map((a) => /* @__PURE__ */ jsx7(
+      AssetCard,
+      {
+        spec: a,
+        variantCount: variantCounts[a.id],
+        onApprove,
+        onReject,
+        onEdit: () => setEditingId(a.id)
+      },
+      a.id
+    )) })
+  ] });
+}
+
+// src/assets/variant-compare.tsx
+import { Button as Button4, Badge as Badge2 } from "@tangle-network/ui/primitives";
+import { Trophy } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function VariantCompare({ variants, onPromote, onSave, className }) {
+  const cols = Math.min(variants.length, 3);
+  if (variants.length === 0) {
+    return /* @__PURE__ */ jsx8("div", { className: cn("py-12 text-center text-sm text-muted-foreground", className), children: "No variants to compare." });
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "text-xs text-muted-foreground", children: [
+      "Comparing ",
+      variants.length,
+      " variant",
+      variants.length !== 1 ? "s" : "",
+      ".",
+      onPromote && " Promote one to mark it approved and archive the rest."
+    ] }),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "grid gap-3",
+        style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
+        children: variants.slice(0, 3).map((variant) => /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2 rounded-lg border border-border p-3", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx8("span", { className: "text-xs font-medium", children: variant.label }),
+              variant.approvedAt && /* @__PURE__ */ jsx8(Badge2, { variant: "default", className: "text-[10px] h-4 px-1.5", children: "Approved" }),
+              variant.rejectedAt && /* @__PURE__ */ jsx8(Badge2, { variant: "destructive", className: "text-[10px] h-4 px-1.5", children: "Rejected" })
+            ] }),
+            onPromote && !variant.approvedAt && /* @__PURE__ */ jsxs8(
+              Button4,
+              {
+                size: "sm",
+                variant: "outline",
+                onClick: () => onPromote(variant.id),
+                className: "h-6 gap-1 text-[11px] px-2",
+                children: [
+                  /* @__PURE__ */ jsx8(Trophy, { size: 11 }),
+                  "Pick this"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx8(
+            AssetEditor,
+            {
+              spec: variant.spec,
+              onSave: (spec) => onSave?.({ ...variant, spec }),
+              className: "min-h-[300px]"
+            }
+          ),
+          variant.editLog.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "text-[10px] text-muted-foreground space-y-0.5", children: [
+            /* @__PURE__ */ jsx8("span", { className: "font-medium", children: "Edit history" }),
+            variant.editLog.slice(-3).map((ev, i) => /* @__PURE__ */ jsxs8("div", { children: [
+              ev.action,
+              ev.editedFields?.length ? ` (${ev.editedFields.join(", ")})` : ""
+            ] }, i))
+          ] })
+        ] }, variant.id))
+      }
+    )
+  ] });
+}
+export {
+  ApprovalQueue,
+  AssetCard,
+  AssetEditor,
+  CopyPreview,
+  EmailPreview,
+  ImagePreview,
+  VariantCompare,
+  VideoPreview
+};