@tangle-network/sandbox-ui 0.22.0 → 0.22.1

package/dist/assets.js

@@ -1,935 +0,0 @@
-import {
-  cn
-} from "./chunk-EI44GEQ5.js";
-
-// src/assets/preview/email-preview.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function EmailPreview({ content, brand, previewUrl, className }) {
-  if (previewUrl) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground font-medium truncate", children: content.subject }),
-      content.preheader && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground/60 truncate", children: content.preheader }),
-      /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          src: previewUrl,
-          className: "w-full rounded border border-border",
-          style: { height: 480, background: "#fff" },
-          title: "Email preview",
-          sandbox: "allow-same-origin"
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold truncate", children: content.subject }),
-    content.preheader && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: content.preheader }),
-    /* @__PURE__ */ jsx(
-      "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 /* @__PURE__ */ jsxs("div", { className: "text-center py-4 space-y-2", children: [
-              section.imageUrl && /* @__PURE__ */ jsx("img", { src: section.imageUrl, alt: "", className: "mx-auto max-h-40 object-cover rounded" }),
-              /* @__PURE__ */ jsx("div", { className: "text-xl font-bold", style: { color: brand.primaryColor }, children: section.headline }),
-              section.subheadline && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: section.subheadline }),
-              section.ctaLabel && /* @__PURE__ */ jsx(
-                "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 /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: section.text }, i);
-          }
-          if (section.type === "feature") {
-            return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 items-start", children: [
-              section.imageUrl && /* @__PURE__ */ jsx("img", { src: section.imageUrl, alt: "", className: "w-16 h-16 object-cover rounded shrink-0" }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: section.headline }),
-                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: section.description })
-              ] })
-            ] }, i);
-          }
-          if (section.type === "testimonial") {
-            return /* @__PURE__ */ jsxs("blockquote", { className: "border-l-2 pl-3 italic text-sm text-muted-foreground", style: { borderColor: brand.accentColor }, children: [
-              /* @__PURE__ */ jsxs("p", { children: [
-                '"',
-                section.quote,
-                '"'
-              ] }),
-              /* @__PURE__ */ jsxs("footer", { className: "mt-1 text-xs not-italic font-medium", children: [
-                section.author,
-                section.role ? `, ${section.role}` : ""
-              ] })
-            ] }, i);
-          }
-          if (section.type === "cta") {
-            return /* @__PURE__ */ jsxs("div", { className: "text-center py-3 space-y-1", children: [
-              /* @__PURE__ */ jsx(
-                "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 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: section.subtext })
-            ] }, i);
-          }
-          if (section.type === "divider") {
-            return /* @__PURE__ */ jsx("hr", { className: "border-border" }, i);
-          }
-          return null;
-        })
-      }
-    )
-  ] });
-}
-
-// src/assets/preview/image-preview.tsx
-import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } 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__ */ jsx2(
-      "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__ */ jsx2(
-      "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__ */ jsx2(
-      "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__ */ jsx2(
-      "img",
-      {
-        src: brand.logoUrl,
-        alt: brand.businessName,
-        style: {
-          ...base,
-          width: layer.width ? `${layer.width}%` : "12%"
-        }
-      }
-    );
-  }
-  return null;
-}
-function Slide({ slide, brand }) {
-  return /* @__PURE__ */ jsx2("div", { className: "relative w-full h-full overflow-hidden", style: bgStyle(slide.background, brand), children: slide.layers.map((layer, i) => /* @__PURE__ */ jsx2(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__ */ jsxs2("div", { className: cn("flex flex-col gap-2", className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: cn("relative w-full rounded overflow-hidden", ASPECT[format]), children: [
-      /* @__PURE__ */ jsx2(Slide, { slide: slides[activeIndex], brand }),
-      isMulti && activeIndex > 0 && /* @__PURE__ */ jsx2(
-        "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__ */ jsx2(ChevronLeft, { size: 16 })
-        }
-      ),
-      isMulti && activeIndex < slides.length - 1 && /* @__PURE__ */ jsx2(
-        "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__ */ jsx2(ChevronRight, { size: 16 })
-        }
-      ),
-      isMulti && /* @__PURE__ */ jsx2("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1", children: slides.map((_, i) => /* @__PURE__ */ jsx2(
-        "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__ */ jsxs2("div", { className: "text-xs text-muted-foreground text-center", children: [
-      activeIndex + 1,
-      " / ",
-      slides.length
-    ] })
-  ] });
-}
-
-// src/assets/preview/video-preview.tsx
-import { Play, Film, Loader2 } from "lucide-react";
-import { Button } from "@tangle-network/ui/primitives";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function VideoPreview({ content, brand, onRenderRequest, isRendering, className }) {
-  if (content.renderedUrl) {
-    return /* @__PURE__ */ jsx3("div", { className: cn("rounded overflow-hidden aspect-[9/16] bg-black", className), children: /* @__PURE__ */ jsx3(
-      "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__ */ jsxs3("div", { className: cn("flex flex-col gap-3", className), children: [
-    /* @__PURE__ */ jsxs3(
-      "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__ */ jsx3(Film, { size: 32, className: "opacity-60" }),
-          /* @__PURE__ */ jsx3("div", { className: "text-sm font-medium text-center px-4", children: brand.businessName }),
-          /* @__PURE__ */ jsxs3("div", { className: "text-xs opacity-60", children: [
-            content.scenes.length,
-            " scenes \xB7 ",
-            content.durationSeconds,
-            "s"
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx3("div", { className: "text-xs font-medium text-muted-foreground", children: "Scenes" }),
-      sceneSummary.map((label, i) => /* @__PURE__ */ jsxs3("div", { className: "text-xs text-muted-foreground flex gap-1.5 items-center", children: [
-        /* @__PURE__ */ jsx3("span", { className: "font-mono text-[10px] w-4 text-right opacity-50", children: i + 1 }),
-        /* @__PURE__ */ jsx3("span", { children: label }),
-        /* @__PURE__ */ jsxs3("span", { className: "opacity-40", children: [
-          "\xB7 ",
-          content.scenes[i].durationSeconds,
-          "s"
-        ] })
-      ] }, i))
-    ] }),
-    onRenderRequest && /* @__PURE__ */ jsx3(
-      Button,
-      {
-        size: "sm",
-        variant: "outline",
-        onClick: onRenderRequest,
-        disabled: isRendering,
-        className: "w-full gap-2",
-        children: isRendering ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Loader2, { size: 14, className: "animate-spin" }),
-          "Rendering\u2026"
-        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Play, { size: 14 }),
-          "Render in sandbox"
-        ] })
-      }
-    )
-  ] });
-}
-
-// src/assets/preview/copy-preview.tsx
-import { jsx as jsx4, jsxs as jsxs4 } 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__ */ jsxs4("div", { className: cn("flex flex-col gap-2", className), children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium text-muted-foreground", children: PLATFORM_LABELS[content.platform] }),
-      limit !== null && /* @__PURE__ */ jsxs4("span", { className: cn("text-xs tabular-nums", isOverLimit ? "text-destructive font-medium" : isNearLimit ? "text-warning" : "text-muted-foreground"), children: [
-        bodyLen,
-        " / ",
-        limit
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "rounded border border-border p-3 space-y-2 bg-card", children: [
-      content.headline && /* @__PURE__ */ jsx4("div", { className: "text-sm font-semibold", children: content.headline }),
-      /* @__PURE__ */ jsx4("p", { className: "text-sm whitespace-pre-wrap leading-relaxed", children: content.body }),
-      content.hashtags && content.hashtags.length > 0 && /* @__PURE__ */ jsx4("div", { className: "text-sm text-blue-500 flex flex-wrap gap-1", children: content.hashtags.map((tag) => /* @__PURE__ */ jsxs4("span", { children: [
-        "#",
-        tag
-      ] }, tag)) })
-    ] })
-  ] });
-}
-
-// 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";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function BrandPanel({ brand, onChange }) {
-  const [open, setOpen] = React2.useState(false);
-  return /* @__PURE__ */ jsxs5("div", { className: "border border-border rounded", children: [
-    /* @__PURE__ */ jsxs5(
-      "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__ */ jsx5(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx5(ChevronRight2, { size: 14 })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsxs5("div", { className: "px-3 pb-3 space-y-2 border-t border-border pt-2", children: [
-      ["primaryColor", "accentColor", "textColor"].map((key) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx5(
-          "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__ */ jsx5(Label, { className: "text-xs capitalize", children: key.replace(/Color/, " color") })
-      ] }, key)),
-      /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx5(Label, { className: "text-xs", children: "Font family" }),
-        /* @__PURE__ */ jsx5(
-          Input,
-          {
-            value: brand.fontFamily,
-            onChange: (e) => onChange({ ...brand, fontFamily: e.target.value }),
-            className: "h-7 text-xs"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx5(Label, { className: "text-xs", children: "Logo URL" }),
-        /* @__PURE__ */ jsx5(
-          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__ */ jsxs5("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx5(Label, { className: "text-xs", children: "Subject" }),
-      /* @__PURE__ */ jsx5(
-        Input,
-        {
-          value: content.subject,
-          onChange: (e) => onChange({ ...spec, content: { ...content, subject: e.target.value } }),
-          className: "h-8 text-sm"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx5(Label, { className: "text-xs", children: "Preheader" }),
-      /* @__PURE__ */ jsx5(
-        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__ */ jsxs5("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxs5(Label, { className: "text-xs capitalize", children: [
-            section.type,
-            " \u2014 ",
-            textField
-          ] }),
-          /* @__PURE__ */ jsx5(
-            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__ */ jsxs5("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx5(Label, { className: "text-xs", children: "Headline" }),
-      /* @__PURE__ */ jsx5(
-        Input,
-        {
-          value: content.headline,
-          onChange: (e) => onChange({ ...spec, content: { ...content, headline: e.target.value } }),
-          className: "h-8 text-sm"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx5(Label, { className: "text-xs", children: "Body" }),
-      /* @__PURE__ */ jsx5(
-        Textarea,
-        {
-          value: content.body,
-          onChange: (e) => onChange({ ...spec, content: { ...content, body: e.target.value } }),
-          className: "text-sm min-h-[80px]"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx5(Label, { className: "text-xs", children: "Hashtags (comma-separated)" }),
-      /* @__PURE__ */ jsx5(
-        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__ */ jsx5(EmailPreview, { content, brand, previewUrl });
-  if (format.startsWith("image:")) {
-    const imgFormat = format === "image:story" ? "story" : format === "image:carousel" ? "carousel" : "feed";
-    return /* @__PURE__ */ jsx5(ImagePreview, { content, brand, format: imgFormat });
-  }
-  if (format.startsWith("video:")) {
-    return /* @__PURE__ */ jsx5(VideoPreview, { content, brand, onRenderRequest, isRendering });
-  }
-  if (format.startsWith("copy:")) {
-    return /* @__PURE__ */ jsx5(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__ */ jsxs5("div", { className: cn("grid grid-cols-2 gap-4 h-full min-h-0", className), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3 overflow-y-auto pr-1", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx5("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: draft.format }),
-        isDirty && onSave && /* @__PURE__ */ jsxs5(Button2, { size: "sm", variant: "default", onClick: () => onSave(draft), className: "h-7 gap-1.5 text-xs", children: [
-          /* @__PURE__ */ jsx5(Save, { size: 12 }),
-          "Save"
-        ] })
-      ] }),
-      draft.format === "email" && /* @__PURE__ */ jsx5(EmailEditor, { spec: draft, onChange: (s) => setDraft(s) }),
-      (draft.format === "copy:caption" || draft.format === "copy:headline" || draft.format === "copy:sms") && /* @__PURE__ */ jsx5(CopyEditor, { spec: draft, onChange: (s) => setDraft(s) }),
-      /* @__PURE__ */ jsx5(BrandPanel, { brand: draft.brand, onChange: (b) => setDraft((d) => ({ ...d, brand: b })) }),
-      onRevisionRequest && /* @__PURE__ */ jsxs5("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx5(Label, { className: "text-xs", children: "Ask agent to revise" }),
-        /* @__PURE__ */ jsxs5("div", { className: "flex gap-1.5", children: [
-          /* @__PURE__ */ jsx5(
-            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__ */ jsx5(
-            Button2,
-            {
-              size: "sm",
-              variant: "outline",
-              onClick: handleRevision,
-              disabled: !revisionInput.trim(),
-              className: "h-8 px-2",
-              children: /* @__PURE__ */ jsx5(MessageSquare, { size: 14 })
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx5("div", { className: "overflow-y-auto", children: /* @__PURE__ */ jsx5(
-      Preview,
-      {
-        spec: draft,
-        previewUrl,
-        isRendering,
-        onRenderRequest
-      }
-    ) })
-  ] });
-}
-
-// src/assets/asset-card.tsx
-import { Badge } from "@tangle-network/ui/primitives";
-import { Check, X, Pencil, GitBranch } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs6 } 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") {
-    return /* @__PURE__ */ jsxs6("div", { className: "p-2 text-xs space-y-0.5", children: [
-      /* @__PURE__ */ jsx6("div", { className: "font-medium truncate", children: content.subject }),
-      /* @__PURE__ */ jsxs6("div", { className: "text-muted-foreground truncate text-[10px]", children: [
-        content.sections.length,
-        " sections"
-      ] })
-    ] });
-  }
-  if (format.startsWith("image:")) {
-    const imgFormat = format === "image:story" ? "story" : "feed";
-    return /* @__PURE__ */ jsx6("div", { className: "overflow-hidden rounded", style: { maxHeight: 120 }, children: /* @__PURE__ */ jsx6(
-      ImagePreview,
-      {
-        content,
-        brand,
-        format: imgFormat
-      }
-    ) });
-  }
-  if (format.startsWith("video:")) {
-    const vc = content;
-    return /* @__PURE__ */ jsxs6("div", { className: "p-2 text-xs space-y-0.5", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "font-medium", children: [
-        vc.scenes.length,
-        " scenes"
-      ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "text-muted-foreground", children: [
-        vc.durationSeconds,
-        "s video"
-      ] })
-    ] });
-  }
-  if (format.startsWith("copy:")) {
-    const cc = content;
-    return /* @__PURE__ */ jsxs6("div", { className: "p-2 text-xs truncate space-y-0.5", children: [
-      /* @__PURE__ */ jsx6("div", { className: "font-medium truncate", children: cc.headline }),
-      /* @__PURE__ */ jsx6("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__ */ jsxs6("div", { className: cn("rounded-lg border border-border bg-card flex flex-col overflow-hidden hover:border-border/80 transition-colors", className), children: [
-    /* @__PURE__ */ jsx6("div", { className: "min-h-[80px] bg-muted/30", children: /* @__PURE__ */ jsx6(Thumbnail, { spec }) }),
-    /* @__PURE__ */ jsxs6("div", { className: "px-2 py-1.5 flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx6("span", { className: "text-[10px] text-muted-foreground flex-1 truncate", children: spec.format }),
-      /* @__PURE__ */ jsx6(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__ */ jsxs6("span", { className: "flex items-center gap-0.5 text-[10px] text-muted-foreground", children: [
-        /* @__PURE__ */ jsx6(GitBranch, { size: 10 }),
-        variantCount
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex border-t border-border", children: [
-      onEdit && /* @__PURE__ */ jsxs6(
-        "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__ */ jsx6(Pencil, { size: 12 }),
-            "Edit"
-          ]
-        }
-      ),
-      onReject && spec.status === "pending_review" && /* @__PURE__ */ jsxs6(
-        "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__ */ jsx6(X, { size: 12 }),
-            "Reject"
-          ]
-        }
-      ),
-      onApprove && spec.status === "pending_review" && /* @__PURE__ */ jsxs6(
-        "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__ */ jsx6(Check, { size: 12 }),
-            "Approve"
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-
-// src/assets/approval-queue.tsx
-import * as React3 from "react";
-import { Button as Button4, Input as Input2 } from "@tangle-network/ui/primitives";
-import { Search, CheckCheck } from "lucide-react";
-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(Button4, { size: "sm", variant: "outline", onClick: () => {
-            onReject(editingSpec.id);
-            setEditingId(null);
-          }, children: "Reject" }),
-          onApprove && editingSpec.status === "pending_review" && /* @__PURE__ */ jsx7(Button4, { 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(Button4, { 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 Button5, 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(
-              Button5,
-              {
-                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
-};