@tangle-network/agent-app 0.60.178 → 0.60.180

package/dist/hub-approvals-react/index.js

@@ -1,3 +1,7 @@
+import {
+  HubPreviewFeedback,
+  ReviewFeedbackForm
+} from "../chunk-ATQQCG4I.js";
 import {
   HUB_APPROVAL_ACTIVE_PHASES,
   HUB_APPROVAL_OPEN_PHASES,
@@ -7,12 +11,12 @@ import {
   formatWhen,
   hubActionReceipt,
   presentHubAction
-} from "../chunk-CPNJRLPN.js";
+} from "../chunk-WSEXFTN4.js";
 
 // src/hub-approvals-react/dock.tsx
-import { useEffect as useEffect3, useMemo, useRef, useState as useState4 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState4 } from "react";
 import { Check, ChevronDown, ExternalLink, Loader2, X } from "lucide-react";
-import { Button as Button3, Label as Label2, RadioGroup, RadioGroupItem } from "@tangle-network/ui/primitives";
+import { Button as Button3, Label, RadioGroup, RadioGroupItem } from "@tangle-network/ui/primitives";
 
 // src/hub-approvals-react/parts.tsx
 import { useState } from "react";
@@ -219,93 +223,365 @@ function linkedText(value) {
   return value.split(/(https?:\/\/[^\s<>"']+)/g).map((part, index) => /^https?:\/\//i.test(part) ? /* @__PURE__ */ jsx2("a", { href: part, onClick: (event) => event.preventDefault(), title: "Link shown for review", className: "text-[#1155cc] underline", children: part }, index) : part);
 }
 
+// src/hub-approvals-react/media.tsx
+import { useEffect as useEffect2, useId, useRef, useState as useState3 } from "react";
+import { Bookmark, Camera, ChevronLeft, ChevronRight as ChevronRight2, Heart, MessageCircle, MoreHorizontal, Repeat2, Search, Send, Share2, ThumbsDown, ThumbsUp } from "lucide-react";
+import { Button as Button2 } from "@tangle-network/ui/primitives";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CHANNELS = {
+  x: "X",
+  linkedin: "LinkedIn",
+  slack: "Slack",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  tiktok: "TikTok",
+  youtube: "YouTube"
+};
+function previewMediaSource(value, kind) {
+  if (!value) return void 0;
+  if (kind === "image" && embeddedPreviewImage(value)) return value;
+  if (kind === "video" && /^data:video\/(?:mp4|webm|ogg);base64,[a-z0-9+/=\s]+$/i.test(value)) return value;
+  if (!value.startsWith("blob:") || typeof window === "undefined") return void 0;
+  try {
+    const url = new URL(value);
+    return window.location.origin !== "null" && url.origin === window.location.origin ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = useState3(true);
+  useEffect2(() => {
+    const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(preference.matches);
+    update();
+    preference.addEventListener("change", update);
+    return () => preference.removeEventListener("change", update);
+  }, []);
+  return reduced;
+}
+function MediaAsset({ media, active = true, fit = "cover" }) {
+  const source = previewMediaSource(media.src, media.kind);
+  const video = useRef(null);
+  const [failed, setFailed] = useState3(false);
+  useEffect2(() => {
+    setFailed(false);
+  }, [source]);
+  useEffect2(() => {
+    const element = video.current;
+    if (!element || !source) return;
+    const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let visible = false;
+    const update = () => {
+      element.loop = !preference.matches;
+      if (!active || !visible || document.hidden) element.pause();
+      else if (!preference.matches) void element.play().catch(() => {
+      });
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry?.isIntersecting ?? false;
+      update();
+    });
+    observer.observe(element);
+    const preferenceChanged = () => {
+      if (preference.matches) element.pause();
+      update();
+    };
+    preference.addEventListener("change", preferenceChanged);
+    document.addEventListener("visibilitychange", update);
+    return () => {
+      observer.disconnect();
+      preference.removeEventListener("change", preferenceChanged);
+      document.removeEventListener("visibilitychange", update);
+      element.pause();
+    };
+  }, [source, active]);
+  const style = { width: "100%", height: "100%", objectFit: fit };
+  if (!source || failed) return /* @__PURE__ */ jsxs3("p", { role: "status", className: "flex h-full min-h-32 items-center justify-center p-5 text-center text-sm text-muted-foreground", children: [
+    media.alt || "Media",
+    " \u2014 ",
+    failed ? "could not be displayed" : "not embedded in this preview"
+  ] });
+  return media.kind === "video" ? /* @__PURE__ */ jsx3(
+    "video",
+    {
+      ref: video,
+      src: source,
+      poster: previewMediaSource(media.poster, "image"),
+      controls: true,
+      muted: true,
+      playsInline: true,
+      preload: "metadata",
+      "aria-label": media.alt || "Video preview",
+      style,
+      onError: () => setFailed(true)
+    }
+  ) : /* @__PURE__ */ jsx3("img", { src: source, alt: media.alt, style, onError: () => setFailed(true) });
+}
+function ratio(media, fallback) {
+  return media?.width && media.height && Number.isFinite(media.width / media.height) && media.width > 0 && media.height > 0 ? `${media.width} / ${media.height}` : fallback;
+}
+function Carousel({ media, square = false }) {
+  const id = useId();
+  const viewport = useRef(null);
+  const [index, setIndex] = useState3(0);
+  const reduced = useReducedMotion();
+  const go = (next) => {
+    const element = viewport.current;
+    if (element) element.scrollTo({ left: element.clientWidth * next, behavior: reduced ? "auto" : "smooth" });
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", "data-hub-media-carousel": true, children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref: viewport,
+        id,
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": "Post media",
+        tabIndex: 0,
+        "data-hub-media-carousel-scroll": true,
+        className: "flex overflow-x-auto",
+        style: { scrollSnapType: "x mandatory", overscrollBehaviorX: "contain", scrollbarWidth: "none", touchAction: "pan-x pan-y" },
+        onScroll: (event) => setIndex(Math.max(0, Math.min(media.length - 1, Math.round(event.currentTarget.scrollLeft / (event.currentTarget.clientWidth || 1))))),
+        onKeyDown: (event) => {
+          if (event.target !== event.currentTarget) return;
+          if (event.key === "ArrowRight") {
+            event.preventDefault();
+            go(Math.min(media.length - 1, index + 1));
+          }
+          if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            go(Math.max(0, index - 1));
+          }
+        },
+        children: media.map((asset, position) => /* @__PURE__ */ jsx3(
+          "div",
+          {
+            role: "group",
+            "aria-roledescription": "slide",
+            "aria-label": `${position + 1} of ${media.length}`,
+            "data-hub-media-slide": position,
+            style: { flex: "0 0 100%", minWidth: 0, scrollSnapAlign: "start", aspectRatio: ratio(media[0], square ? "1" : "16 / 9") },
+            children: /* @__PURE__ */ jsx3(MediaAsset, { media: asset, active: index === position })
+          },
+          `${position}:${asset.src}`
+        ))
+      }
+    ),
+    media.length > 1 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsxs3("span", { className: "pointer-events-none absolute right-3 top-3 rounded-full bg-black/65 px-2 py-1 text-xs tabular-nums text-white", "aria-hidden": true, children: [
+        index + 1,
+        "/",
+        media.length
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous slide",
+          "aria-controls": id,
+          disabled: index === 0,
+          onClick: () => go(index - 1),
+          className: "absolute left-2 top-1/2 flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-[#262626] shadow-sm disabled:hidden",
+          children: /* @__PURE__ */ jsx3(ChevronLeft, { "aria-hidden": true, className: "size-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next slide",
+          "aria-controls": id,
+          disabled: index === media.length - 1,
+          onClick: () => go(index + 1),
+          className: "absolute right-2 top-1/2 flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-[#262626] shadow-sm disabled:hidden",
+          children: /* @__PURE__ */ jsx3(ChevronRight2, { "aria-hidden": true, className: "size-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx3("div", { className: "absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1", "aria-hidden": true, children: media.map((_, position) => /* @__PURE__ */ jsx3("span", { className: `size-1.5 rounded-full ${position === index ? "bg-[#0095f6]" : "bg-white/75"}` }, position)) }),
+      /* @__PURE__ */ jsxs3("p", { className: "sr-only", "aria-live": "polite", children: [
+        "Slide ",
+        index + 1,
+        " of ",
+        media.length
+      ] })
+    ] })
+  ] });
+}
+function Avatar({ name, square = false }) {
+  return /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: `flex size-10 shrink-0 items-center justify-center bg-[#eef0f2] text-base font-semibold text-[#536471] ${square ? "rounded-sm" : "rounded-full"}`, children: name?.charAt(0).toUpperCase() || "?" });
+}
+function ChromeActions({ channel, vertical = false }) {
+  const actions = channel === "youtube" ? [["Like", /* @__PURE__ */ jsx3(ThumbsUp, {})], ["Dislike", /* @__PURE__ */ jsx3(ThumbsDown, {})], ["Comments", /* @__PURE__ */ jsx3(MessageCircle, {})], ["Share", /* @__PURE__ */ jsx3(Share2, {})]] : channel === "tiktok" ? [["Like", /* @__PURE__ */ jsx3(Heart, {})], ["Comment", /* @__PURE__ */ jsx3(MessageCircle, {})], ["Share", /* @__PURE__ */ jsx3(Share2, {})]] : channel === "instagram" && vertical ? [["Like", /* @__PURE__ */ jsx3(Heart, {})], ["Comment", /* @__PURE__ */ jsx3(MessageCircle, {})], ["Repost", /* @__PURE__ */ jsx3(Repeat2, {})], ["Share", /* @__PURE__ */ jsx3(Send, {})], ["More", /* @__PURE__ */ jsx3(MoreHorizontal, {})]] : channel === "linkedin" || channel === "facebook" ? [["Like", /* @__PURE__ */ jsx3(ThumbsUp, {})], ["Comment", /* @__PURE__ */ jsx3(MessageCircle, {})], [channel === "linkedin" ? "Repost" : "Share", channel === "linkedin" ? /* @__PURE__ */ jsx3(Repeat2, {}) : /* @__PURE__ */ jsx3(Share2, {})]] : channel === "x" ? [["Reply", /* @__PURE__ */ jsx3(MessageCircle, {})], ["Repost", /* @__PURE__ */ jsx3(Repeat2, {})], ["Like", /* @__PURE__ */ jsx3(Heart, {})], ["Bookmark", /* @__PURE__ */ jsx3(Bookmark, {})], ["Share", /* @__PURE__ */ jsx3(Share2, {})]] : [["Like", /* @__PURE__ */ jsx3(Heart, {})], ["Comment", /* @__PURE__ */ jsx3(MessageCircle, {})], ["Share", /* @__PURE__ */ jsx3(Send, {})], ["Save", /* @__PURE__ */ jsx3(Bookmark, {})]];
+  return /* @__PURE__ */ jsx3("div", { "aria-label": "Feed controls shown for context", className: vertical ? "flex flex-col items-center gap-5" : "flex items-center justify-between gap-3", children: actions.map(([label, icon]) => /* @__PURE__ */ jsxs3("span", { title: label, "aria-label": label, className: `flex items-center gap-1.5 [&>svg]:size-5 ${vertical ? "flex-col text-[10px]" : "text-[13px]"}`, children: [
+    icon,
+    (channel === "facebook" || channel === "linkedin" || vertical && channel === "youtube") && /* @__PURE__ */ jsx3("span", { children: label })
+  ] }, label)) });
+}
+function VerticalPreview({ preview, account, media }) {
+  const [guides, setGuides] = useState3(false);
+  const frame = useRef(null);
+  const top = useRef(null);
+  const caption = useRef(null);
+  const rail = useRef(null);
+  const [insets, setInsets] = useState3({});
+  const name = preview.displayName ?? account ?? "Account unavailable";
+  const title = preview.channel === "youtube" ? "Shorts" : preview.channel === "instagram" || preview.channel === "facebook" ? "Reels" : "For You";
+  useEffect2(() => {
+    const update = () => {
+      if (!frame.current || !top.current || !caption.current || !rail.current) return;
+      const bounds = frame.current.getBoundingClientRect();
+      setInsets({
+        top: top.current.getBoundingClientRect().bottom - bounds.top,
+        bottom: bounds.bottom - caption.current.getBoundingClientRect().top,
+        right: bounds.right - rail.current.getBoundingClientRect().left + 8,
+        left: 16
+      });
+    };
+    const observer = new ResizeObserver(update);
+    for (const element of [frame.current, top.current, caption.current, rail.current]) if (element) observer.observe(element);
+    update();
+    return () => observer.disconnect();
+  }, [preview.text, preview.channel]);
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-auto w-full max-w-[360px] space-y-2", children: [
+    /* @__PURE__ */ jsxs3("div", { ref: frame, "data-hub-media-vertical": true, className: "relative isolate aspect-[9/16] overflow-hidden rounded-xl bg-black text-white [color-scheme:dark]", children: [
+      /* @__PURE__ */ jsx3("div", { className: "absolute inset-0", children: media[0] ? /* @__PURE__ */ jsx3(MediaAsset, { media: media[0] }) : /* @__PURE__ */ jsx3("p", { className: "p-5 text-sm", children: "Media not embedded in this preview" }) }),
+      /* @__PURE__ */ jsxs3("div", { ref: top, className: "pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between bg-gradient-to-b from-black/65 to-transparent px-4 pb-5 pt-4", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "text-lg font-semibold", children: [
+          preview.channel === "tiktok" && /* @__PURE__ */ jsx3("span", { className: "mr-4 text-white/70", children: "Following" }),
+          title
+        ] }),
+        preview.channel === "instagram" ? /* @__PURE__ */ jsx3(Camera, { "aria-hidden": true, className: "size-5" }) : /* @__PURE__ */ jsx3(Search, { "aria-hidden": true, className: "size-5" })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { ref: rail, className: "pointer-events-none absolute bottom-40 right-3 drop-shadow-md", children: /* @__PURE__ */ jsx3(ChromeActions, { channel: preview.channel, vertical: true }) }),
+      /* @__PURE__ */ jsxs3("div", { ref: caption, className: "pointer-events-none absolute bottom-14 left-0 right-14 bg-gradient-to-t from-black/70 to-transparent px-4 pb-3 pt-8 text-sm drop-shadow-md", children: [
+        /* @__PURE__ */ jsx3("p", { className: "break-words font-semibold", children: preview.handle ?? name }),
+        preview.sponsored && /* @__PURE__ */ jsx3("p", { className: "mt-1 text-xs", children: "Sponsored" }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-1 line-clamp-4 whitespace-pre-wrap break-words leading-5", children: preview.text }),
+        preview.callToAction && /* @__PURE__ */ jsx3("p", { className: "mt-2 rounded-md border border-white/70 px-3 py-2 text-center font-semibold", children: preview.callToAction })
+      ] }),
+      guides && /* @__PURE__ */ jsx3("div", { "data-hub-media-safe-zone": true, "aria-label": "Area clear of this preview\u2019s caption and controls", className: "pointer-events-none absolute border-2 border-dashed border-white/90", style: { ...insets, boxShadow: "0 0 0 999px rgb(0 0 0 / 25%)" } })
+    ] }),
+    /* @__PURE__ */ jsx3(Button2, { type: "button", variant: "outline", "aria-pressed": guides, onClick: () => setGuides((value) => !value), children: guides ? "Hide caption safe zones" : "Show caption safe zones" }),
+    guides && /* @__PURE__ */ jsx3("p", { className: "text-xs leading-5 text-muted-foreground", children: "Guide follows this preview\u2019s caption and controls. Placement and device can change the area." })
+  ] });
+}
+function HubMediaPreview({ preview, account }) {
+  const media = preview.media ?? preview.images?.map((image) => ({ kind: "image", src: image.url, alt: image.alt ?? "" })) ?? [];
+  const name = preview.displayName ?? account ?? "Account unavailable";
+  const count = /* @__PURE__ */ jsxs3("p", { "data-hub-media-character-count": true, className: "text-right text-xs tabular-nums text-muted-foreground", children: [
+    [...preview.text].length,
+    " characters"
+  ] });
+  if (preview.placement === "vertical") return /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx3("article", { "aria-label": `${CHANNELS[preview.channel]} ${preview.channel === "youtube" ? "Shorts" : "vertical"} preview`, "data-hub-media-channel": preview.channel, children: /* @__PURE__ */ jsx3(VerticalPreview, { preview, account, media }) }),
+    count
+  ] });
+  const x = preview.channel === "x";
+  const instagram = preview.channel === "instagram";
+  const imageGrid = x && preview.placement !== "carousel" && media.length > 1 && media.length <= 4 && media.every((asset) => asset.kind === "image");
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs3(
+      "article",
+      {
+        "aria-label": `${CHANNELS[preview.channel]} ${preview.sponsored ? "sponsored " : ""}feed preview`,
+        "data-hub-media-channel": preview.channel,
+        className: `overflow-hidden border border-[#d8dee3] bg-white text-[#0f1419] [color-scheme:light] ${x ? "rounded-2xl" : "rounded-lg"}`,
+        children: [
+          /* @__PURE__ */ jsxs3("header", { className: "flex min-w-0 items-start gap-3 px-4 pt-4", children: [
+            /* @__PURE__ */ jsx3(Avatar, { name: preview.displayName ?? account, square: preview.channel === "linkedin" }),
+            /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1 text-sm", children: [
+              /* @__PURE__ */ jsxs3("p", { className: "break-words font-semibold", children: [
+                name,
+                preview.handle && /* @__PURE__ */ jsx3("span", { className: "ml-1.5 font-normal text-[#536471]", children: preview.handle })
+              ] }),
+              preview.sponsored && /* @__PURE__ */ jsx3("p", { className: "mt-0.5 text-xs text-[#536471]", children: preview.channel === "linkedin" || x ? "Promoted" : "Sponsored" })
+            ] }),
+            /* @__PURE__ */ jsx3(MoreHorizontal, { "aria-hidden": true, className: "size-5 shrink-0 text-[#536471]" })
+          ] }),
+          !instagram && /* @__PURE__ */ jsx3("p", { className: "whitespace-pre-wrap break-words px-4 py-3 text-[15px] leading-6", children: linkedText(preview.text) }),
+          media.length > 0 && /* @__PURE__ */ jsx3("div", { className: x ? "mx-4 overflow-hidden rounded-xl border border-[#d8dee3]" : "", children: imageGrid ? /* @__PURE__ */ jsx3("div", { "data-hub-media-image-grid": true, className: "grid aspect-[16/9] grid-cols-2 gap-0.5 overflow-hidden", children: media.map((asset, index) => /* @__PURE__ */ jsx3("div", { className: `min-h-0 overflow-hidden ${media.length === 3 && index === 0 ? "row-span-2" : ""}`, children: /* @__PURE__ */ jsx3(MediaAsset, { media: asset }) }, index)) }) : /* @__PURE__ */ jsx3(Carousel, { media, square: instagram }) }),
+          preview.link && /* @__PURE__ */ jsxs3("div", { className: "border-b border-[#d8dee3] bg-[#f3f6f8] px-4 py-3", children: [
+            /* @__PURE__ */ jsx3("p", { className: "truncate text-xs text-[#536471]", children: preview.link.url.replace(/^https?:\/\//, "") }),
+            preview.link.title && /* @__PURE__ */ jsx3("p", { className: "mt-1 break-words text-sm font-semibold", children: preview.link.title }),
+            preview.link.description && /* @__PURE__ */ jsx3("p", { className: "mt-1 line-clamp-2 text-sm text-[#536471]", children: preview.link.description }),
+            preview.callToAction && /* @__PURE__ */ jsx3("span", { className: "mt-2 inline-block rounded border border-[#536471] px-3 py-1.5 text-sm font-semibold", children: preview.callToAction })
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: "px-4 py-3 text-[#536471]", children: /* @__PURE__ */ jsx3(ChromeActions, { channel: preview.channel }) }),
+          instagram && /* @__PURE__ */ jsxs3("p", { className: "whitespace-pre-wrap break-words px-4 pb-4 text-sm leading-5", children: [
+            /* @__PURE__ */ jsx3("strong", { className: "mr-1.5", children: preview.handle ?? name }),
+            linkedText(preview.text)
+          ] }),
+          /* @__PURE__ */ jsx3("p", { className: "sr-only", children: "Preview controls cannot post, buy, like, or share." })
+        ]
+      }
+    ),
+    count
+  ] });
+}
+
 // src/hub-approvals-react/preview.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function initial(name) {
   return (name?.trim().replace(/^@/, "").charAt(0) || "?").toUpperCase();
 }
 function Panel({ children, className = "" }) {
-  return /* @__PURE__ */ jsx3("div", { className: `rounded-lg border border-border bg-background ${className}`, children });
+  return /* @__PURE__ */ jsx4("div", { className: `rounded-lg border border-border bg-background ${className}`, children });
 }
 function PullRequestPreview({ preview }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs3(Panel, { className: "px-3 py-3", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsx3(GitPullRequest, { "aria-hidden": true, className: "size-4 shrink-0" }),
-        preview.repository && /* @__PURE__ */ jsx3("span", { className: "font-medium text-foreground", children: preview.repository }),
-        preview.head && preview.base && /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx3(Chip, { mono: true, children: preview.head }),
-          /* @__PURE__ */ jsx3(ArrowRight, { "aria-label": "into", className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsx3(Chip, { mono: true, children: preview.base })
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs4(Panel, { className: "px-3 py-3", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx4(GitPullRequest, { "aria-hidden": true, className: "size-4 shrink-0" }),
+        preview.repository && /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground", children: preview.repository }),
+        preview.head && preview.base && /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx4(Chip, { mono: true, children: preview.head }),
+          /* @__PURE__ */ jsx4(ArrowRight, { "aria-label": "into", className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx4(Chip, { mono: true, children: preview.base })
         ] }),
-        preview.draft && /* @__PURE__ */ jsx3("span", { className: "rounded-md border border-border px-1.5 py-0.5 text-sm text-muted-foreground", children: "Draft" })
+        preview.draft && /* @__PURE__ */ jsx4("span", { className: "rounded-md border border-border px-1.5 py-0.5 text-sm text-muted-foreground", children: "Draft" })
       ] }),
-      preview.title && /* @__PURE__ */ jsx3("p", { className: "mt-2 text-base font-semibold leading-6 text-foreground", children: preview.title }),
-      preview.body && /* @__PURE__ */ jsx3("p", { className: "mt-1 line-clamp-3 whitespace-pre-line text-sm leading-6 text-muted-foreground sm:line-clamp-4", children: preview.body })
+      preview.title && /* @__PURE__ */ jsx4("p", { className: "mt-2 text-base font-semibold leading-6 text-foreground", children: preview.title }),
+      preview.body && /* @__PURE__ */ jsx4("p", { className: "mt-1 line-clamp-3 whitespace-pre-line text-sm leading-6 text-muted-foreground sm:line-clamp-4", children: preview.body })
     ] }),
-    preview.files.length > 0 && /* @__PURE__ */ jsx3(ApprovalDiffSummary, { files: preview.files })
+    preview.files.length > 0 && /* @__PURE__ */ jsx4(ApprovalDiffSummary, { files: preview.files })
   ] });
 }
-function PostPreview({ preview, account }) {
-  if (preview.channel === "slack") {
-    return /* @__PURE__ */ jsxs3(Panel, { className: "px-3 py-3", children: [
-      /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold text-foreground", children: preview.where ?? "Slack" }),
-      /* @__PURE__ */ jsxs3("div", { className: "mt-2 flex gap-3", children: [
-        /* @__PURE__ */ jsx3("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-foreground", children: initial(account) }),
-        /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold text-foreground", children: account ?? "Your account" }),
-          /* @__PURE__ */ jsx3("p", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-foreground", children: linkedText(preview.text) })
-        ] })
-      ] })
-    ] });
-  }
-  const x = preview.channel === "x";
-  const length = [...preview.text].length;
-  return /* @__PURE__ */ jsxs3(Panel, { className: "px-4 py-3", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
-      /* @__PURE__ */ jsx3("span", { className: `flex size-10 shrink-0 items-center justify-center rounded-full text-base font-semibold ${x ? "bg-foreground text-background" : "bg-[#0a66c2] text-white"}`, children: initial(account) }),
-      /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxs3("p", { className: "flex flex-wrap items-baseline gap-x-1.5 text-sm", children: [
-          /* @__PURE__ */ jsx3("span", { className: "font-semibold text-foreground", children: account ?? "Your account" }),
-          /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground", children: x ? "\xB7 now" : "\xB7 Post \xB7 Anyone" })
-        ] }),
-        /* @__PURE__ */ jsx3("p", { className: `mt-1 whitespace-pre-wrap break-words text-foreground ${x ? "text-base leading-6" : "text-sm leading-6"}`, children: linkedText(preview.text) }),
-        preview.images && preview.images.length > 0 && /* @__PURE__ */ jsx3("div", { className: "mt-3 grid grid-cols-2 gap-0.5 overflow-hidden rounded-xl border border-border", children: preview.images.map((image, index) => /* @__PURE__ */ jsx3("div", { className: `${preview.images.length === 1 ? "col-span-2 aspect-[16/9]" : "aspect-square"} overflow-hidden bg-muted`, children: embeddedPreviewImage(image.url) ? /* @__PURE__ */ jsx3("img", { src: image.url, alt: image.alt ?? `Post image ${index + 1}`, className: "size-full object-cover" }) : /* @__PURE__ */ jsx3("p", { className: "p-3 text-sm text-muted-foreground", children: "Image not embedded in this preview" }) }, index)) }),
-        preview.link && /* @__PURE__ */ jsx3("div", { className: "mt-3 overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxs3("div", { className: "px-3 py-2", children: [
-          /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-muted-foreground", children: preview.link.url.replace(/^https?:\/\//, "") }),
-          preview.link.title && /* @__PURE__ */ jsx3("p", { className: "truncate text-sm font-semibold text-foreground", children: preview.link.title }),
-          preview.link.description && /* @__PURE__ */ jsx3("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: preview.link.description })
-        ] }) })
+function SlackPreview({ preview, account }) {
+  return /* @__PURE__ */ jsxs4(Panel, { className: "px-3 py-3", children: [
+    /* @__PURE__ */ jsx4("p", { className: "text-sm font-semibold text-foreground", children: preview.where ?? "Slack" }),
+    /* @__PURE__ */ jsxs4("div", { className: "mt-2 flex gap-3", children: [
+      /* @__PURE__ */ jsx4("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-foreground", children: initial(account) }),
+      /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx4("p", { className: "text-sm font-semibold text-foreground", children: account ?? "Your account" }),
+        /* @__PURE__ */ jsx4("p", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-foreground", children: linkedText(preview.text) })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs3("p", { className: "mt-2 text-right text-sm tabular-nums text-muted-foreground", children: [
-      length,
-      " characters"
     ] })
   ] });
 }
 function PaymentPreview({ preview }) {
-  return /* @__PURE__ */ jsxs3(Panel, { className: "px-4 py-3", children: [
-    /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: preview.label.charAt(0).toUpperCase() + preview.label.slice(1) }),
-    preview.amount !== void 0 && /* @__PURE__ */ jsx3("p", { className: "mt-0.5 text-2xl font-semibold tabular-nums text-foreground", children: formatMinorAmount(preview.amount, preview.currency) }),
-    /* @__PURE__ */ jsxs3("div", { className: "mt-2 space-y-1 text-sm", children: [
-      preview.customer && /* @__PURE__ */ jsxs3("p", { className: "text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs4(Panel, { className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: preview.label.charAt(0).toUpperCase() + preview.label.slice(1) }),
+    preview.amount !== void 0 && /* @__PURE__ */ jsx4("p", { className: "mt-0.5 text-2xl font-semibold tabular-nums text-foreground", children: formatMinorAmount(preview.amount, preview.currency) }),
+    /* @__PURE__ */ jsxs4("div", { className: "mt-2 space-y-1 text-sm", children: [
+      preview.customer && /* @__PURE__ */ jsxs4("p", { className: "text-muted-foreground", children: [
         "Customer ",
-        /* @__PURE__ */ jsx3("span", { className: `text-foreground ${preview.customer.startsWith("cus_") ? "font-mono" : ""}`, children: preview.customer })
+        /* @__PURE__ */ jsx4("span", { className: `text-foreground ${preview.customer.startsWith("cus_") ? "font-mono" : ""}`, children: preview.customer })
       ] }),
-      preview.description && /* @__PURE__ */ jsx3("p", { className: "text-foreground", children: preview.description })
+      preview.description && /* @__PURE__ */ jsx4("p", { className: "text-foreground", children: preview.description })
     ] })
   ] });
 }
 function SpeechPreview({ preview }) {
-  return /* @__PURE__ */ jsxs3(Panel, { className: "px-4 py-3", children: [
-    /* @__PURE__ */ jsx3("blockquote", { className: "border-l-2 border-[var(--accent-text)] pl-3 text-base leading-7 text-foreground", children: preview.text }),
-    (preview.voice || preview.seconds) && /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex flex-wrap gap-2", children: [
-      preview.voice && /* @__PURE__ */ jsxs3(Chip, { children: [
+  return /* @__PURE__ */ jsxs4(Panel, { className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsx4("blockquote", { className: "border-l-2 border-[var(--accent-text)] pl-3 text-base leading-7 text-foreground", children: preview.text }),
+    (preview.voice || preview.seconds) && /* @__PURE__ */ jsxs4("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+      preview.voice && /* @__PURE__ */ jsxs4(Chip, { children: [
         "Voice: ",
         preview.voice
       ] }),
-      preview.seconds && /* @__PURE__ */ jsxs3(Chip, { children: [
+      preview.seconds && /* @__PURE__ */ jsxs4(Chip, { children: [
         "About ",
         preview.seconds,
         " s"
@@ -314,241 +590,120 @@ function SpeechPreview({ preview }) {
   ] });
 }
 function CallPreview({ preview }) {
-  return /* @__PURE__ */ jsxs3(Panel, { className: "flex gap-3 px-4 py-3", children: [
-    /* @__PURE__ */ jsx3("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx3(Phone, { "aria-hidden": true, className: "size-5 text-foreground" }) }),
-    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 space-y-1 text-sm", children: [
-      /* @__PURE__ */ jsx3("p", { className: "text-base font-semibold tabular-nums text-foreground", children: preview.to ?? "Unknown number" }),
-      preview.from && /* @__PURE__ */ jsxs3("p", { className: "text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs4(Panel, { className: "flex gap-3 px-4 py-3", children: [
+    /* @__PURE__ */ jsx4("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx4(Phone, { "aria-hidden": true, className: "size-5 text-foreground" }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "min-w-0 space-y-1 text-sm", children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-base font-semibold tabular-nums text-foreground", children: preview.to ?? "Unknown number" }),
+      preview.from && /* @__PURE__ */ jsxs4("p", { className: "text-muted-foreground", children: [
         "From ",
-        /* @__PURE__ */ jsx3("span", { className: "tabular-nums text-foreground", children: preview.from })
+        /* @__PURE__ */ jsx4("span", { className: "tabular-nums text-foreground", children: preview.from })
       ] }),
-      preview.purpose && /* @__PURE__ */ jsx3("p", { className: "leading-6 text-foreground", children: preview.purpose })
+      preview.purpose && /* @__PURE__ */ jsx4("p", { className: "leading-6 text-foreground", children: preview.purpose })
     ] })
   ] });
 }
 function EventPreview({ preview }) {
   const start = preview.start ? new Date(preview.start) : null;
   const valid = start && !Number.isNaN(start.getTime());
-  return /* @__PURE__ */ jsxs3(Panel, { className: "flex gap-4 px-4 py-3", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex w-14 shrink-0 flex-col items-center overflow-hidden rounded-lg border border-border text-center", children: [
-      /* @__PURE__ */ jsx3("span", { className: "w-full bg-[var(--surface-danger-bg)] py-0.5 text-sm font-semibold uppercase text-[var(--surface-danger-text)]", children: valid ? start.toLocaleDateString(void 0, { month: "short" }) : /* @__PURE__ */ jsx3(CalendarDays, { "aria-hidden": true, className: "mx-auto size-4" }) }),
-      /* @__PURE__ */ jsx3("span", { className: "py-1 text-xl font-semibold tabular-nums text-foreground", children: valid ? start.getDate() : "\u2013" })
+  return /* @__PURE__ */ jsxs4(Panel, { className: "flex gap-4 px-4 py-3", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex w-14 shrink-0 flex-col items-center overflow-hidden rounded-lg border border-border text-center", children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-full bg-[var(--surface-danger-bg)] py-0.5 text-sm font-semibold uppercase text-[var(--surface-danger-text)]", children: valid ? start.toLocaleDateString(void 0, { month: "short" }) : /* @__PURE__ */ jsx4(CalendarDays, { "aria-hidden": true, className: "mx-auto size-4" }) }),
+      /* @__PURE__ */ jsx4("span", { className: "py-1 text-xl font-semibold tabular-nums text-foreground", children: valid ? start.getDate() : "\u2013" })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 space-y-1 text-sm", children: [
-      /* @__PURE__ */ jsx3("p", { className: "text-base font-semibold text-foreground", children: preview.title ?? "Untitled event" }),
-      preview.start && /* @__PURE__ */ jsx3("p", { className: "text-foreground", children: formatWhen(preview.start, preview.end) }),
-      preview.location && /* @__PURE__ */ jsxs3("p", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx3(MapPin, { "aria-hidden": true, className: "size-4 shrink-0" }),
+    /* @__PURE__ */ jsxs4("div", { className: "min-w-0 space-y-1 text-sm", children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-base font-semibold text-foreground", children: preview.title ?? "Untitled event" }),
+      preview.start && /* @__PURE__ */ jsx4("p", { className: "text-foreground", children: formatWhen(preview.start, preview.end) }),
+      preview.location && /* @__PURE__ */ jsxs4("p", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx4(MapPin, { "aria-hidden": true, className: "size-4 shrink-0" }),
         preview.location
       ] }),
-      preview.attendees.length > 0 && /* @__PURE__ */ jsxs3("p", { className: "flex items-start gap-1.5 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx3(Users, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }),
-        /* @__PURE__ */ jsx3("span", { className: "break-words", children: preview.attendees.join(", ") })
+      preview.attendees.length > 0 && /* @__PURE__ */ jsxs4("p", { className: "flex items-start gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx4(Users, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }),
+        /* @__PURE__ */ jsx4("span", { className: "break-words", children: preview.attendees.join(", ") })
       ] }),
-      preview.description && /* @__PURE__ */ jsx3("p", { className: "line-clamp-3 leading-6 text-foreground", children: preview.description })
+      preview.description && /* @__PURE__ */ jsx4("p", { className: "line-clamp-3 leading-6 text-foreground", children: preview.description })
     ] })
   ] });
 }
 function HubActionPreviewView({ preview, account }) {
   switch (preview.kind) {
     case "pull-request":
-      return /* @__PURE__ */ jsx3(PullRequestPreview, { preview });
+      return /* @__PURE__ */ jsx4(PullRequestPreview, { preview });
     case "files":
-      return preview.files.length > 0 ? /* @__PURE__ */ jsx3(ApprovalDiffSummary, { files: preview.files }) : null;
+      return preview.files.length > 0 ? /* @__PURE__ */ jsx4(ApprovalDiffSummary, { files: preview.files }) : null;
     case "commit":
-      return /* @__PURE__ */ jsxs3(Panel, { className: "px-3 py-3", children: [
-        /* @__PURE__ */ jsxs3("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsx3(GitCommitHorizontal, { "aria-hidden": true, className: "size-4 shrink-0" }),
+      return /* @__PURE__ */ jsxs4(Panel, { className: "px-3 py-3", children: [
+        /* @__PURE__ */ jsxs4("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx4(GitCommitHorizontal, { "aria-hidden": true, className: "size-4 shrink-0" }),
           preview.repository ?? "Commit"
         ] }),
-        preview.message && /* @__PURE__ */ jsx3("p", { className: "mt-2 whitespace-pre-line text-sm leading-6 text-foreground", children: preview.message }),
-        /* @__PURE__ */ jsx3("div", { className: "mt-2", children: /* @__PURE__ */ jsx3(HubFieldList, { fields: [
+        preview.message && /* @__PURE__ */ jsx4("p", { className: "mt-2 whitespace-pre-line text-sm leading-6 text-foreground", children: preview.message }),
+        /* @__PURE__ */ jsx4("div", { className: "mt-2", children: /* @__PURE__ */ jsx4(HubFieldList, { fields: [
           ...preview.tree ? [{ label: "Tree", value: preview.tree.slice(0, 7), mono: true }] : [],
           ...preview.parents.map((parent) => ({ label: "Parent", value: parent.slice(0, 7), mono: true }))
         ] }) })
       ] });
     case "branch":
-      return /* @__PURE__ */ jsxs3(Panel, { className: "flex flex-wrap items-center gap-2 px-3 py-3 text-sm", children: [
-        /* @__PURE__ */ jsx3(GitBranch, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }),
-        preview.branch && /* @__PURE__ */ jsx3(Chip, { mono: true, children: preview.branch }),
-        preview.sha && /* @__PURE__ */ jsxs3("span", { className: "text-muted-foreground", children: [
+      return /* @__PURE__ */ jsxs4(Panel, { className: "flex flex-wrap items-center gap-2 px-3 py-3 text-sm", children: [
+        /* @__PURE__ */ jsx4(GitBranch, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }),
+        preview.branch && /* @__PURE__ */ jsx4(Chip, { mono: true, children: preview.branch }),
+        preview.sha && /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", children: [
           "at ",
-          /* @__PURE__ */ jsx3("span", { className: "font-mono text-foreground", children: preview.sha.slice(0, 7) })
+          /* @__PURE__ */ jsx4("span", { className: "font-mono text-foreground", children: preview.sha.slice(0, 7) })
         ] })
       ] });
     case "issue":
-      return /* @__PURE__ */ jsxs3(Panel, { className: "px-3 py-3", children: [
-        preview.verdict && /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium capitalize text-foreground", children: preview.verdict }),
-        preview.title && /* @__PURE__ */ jsx3("p", { className: "text-base font-semibold leading-6 text-foreground", children: preview.title }),
-        preview.body && /* @__PURE__ */ jsx3("p", { className: "mt-1 line-clamp-6 whitespace-pre-line text-sm leading-6 text-foreground", children: preview.body })
+      return /* @__PURE__ */ jsxs4(Panel, { className: "px-3 py-3", children: [
+        preview.verdict && /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium capitalize text-foreground", children: preview.verdict }),
+        preview.title && /* @__PURE__ */ jsx4("p", { className: "text-base font-semibold leading-6 text-foreground", children: preview.title }),
+        preview.body && /* @__PURE__ */ jsx4("p", { className: "mt-1 line-clamp-6 whitespace-pre-line text-sm leading-6 text-foreground", children: preview.body })
       ] });
     case "email":
-      return /* @__PURE__ */ jsx3(EmailPreview, { preview, account });
+      return /* @__PURE__ */ jsx4(EmailPreview, { preview, account });
     case "post":
-      return /* @__PURE__ */ jsx3(PostPreview, { preview, account });
+      return preview.channel === "slack" ? /* @__PURE__ */ jsx4(SlackPreview, { preview, account }) : /* @__PURE__ */ jsx4(HubMediaPreview, { preview, account });
     case "ad":
-      return /* @__PURE__ */ jsxs3(Panel, { className: "overflow-hidden", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "space-y-1 px-4 py-3", children: [
-          /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold text-foreground", children: preview.advertiser ?? account ?? "Advertiser unavailable" }),
-          /* @__PURE__ */ jsxs3("p", { className: "text-sm text-muted-foreground", children: [
+      return /* @__PURE__ */ jsxs4(Panel, { className: "overflow-hidden", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "space-y-1 px-4 py-3", children: [
+          /* @__PURE__ */ jsx4("p", { className: "text-sm font-semibold text-foreground", children: preview.advertiser ?? account ?? "Advertiser unavailable" }),
+          /* @__PURE__ */ jsxs4("p", { className: "text-sm text-muted-foreground", children: [
             "Sponsored \xB7 ",
             preview.placement
           ] }),
-          preview.text && /* @__PURE__ */ jsx3("p", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-foreground", children: preview.text })
+          preview.text && /* @__PURE__ */ jsx4("p", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-foreground", children: preview.text })
         ] }),
-        preview.image && (embeddedPreviewImage(preview.image) ? /* @__PURE__ */ jsx3("img", { src: preview.image, alt: preview.headline ?? "Ad creative", className: "aspect-[1.91/1] w-full object-cover" }) : /* @__PURE__ */ jsx3("p", { className: "bg-muted p-4 text-sm text-muted-foreground", children: "Creative image not embedded in this preview" })),
-        /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-3 bg-muted/40 px-4 py-3", children: [
-          /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-            preview.destination && /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-muted-foreground", children: preview.destination }),
-            preview.headline && /* @__PURE__ */ jsx3("p", { className: "break-words font-semibold text-foreground", children: preview.headline })
+        preview.image && (previewMediaSource(preview.image, "image") ? /* @__PURE__ */ jsx4("img", { src: preview.image, alt: preview.headline ?? "Ad creative", className: "aspect-[1.91/1] w-full object-cover" }) : /* @__PURE__ */ jsx4("p", { className: "bg-muted p-4 text-sm text-muted-foreground", children: "Creative image not embedded in this preview" })),
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-3 bg-muted/40 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
+            preview.destination && /* @__PURE__ */ jsx4("p", { className: "truncate text-sm text-muted-foreground", children: preview.destination }),
+            preview.headline && /* @__PURE__ */ jsx4("p", { className: "break-words font-semibold text-foreground", children: preview.headline })
           ] }),
-          preview.callToAction && /* @__PURE__ */ jsx3("span", { className: "rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground", children: preview.callToAction })
+          preview.callToAction && /* @__PURE__ */ jsx4("span", { className: "rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground", children: preview.callToAction })
         ] })
       ] });
     case "page":
-      return /* @__PURE__ */ jsxs3(Panel, { className: "overflow-hidden", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "border-b border-border px-4 py-2", children: [
-          /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium text-foreground", children: preview.title ?? "Page preview" }),
-          preview.url && /* @__PURE__ */ jsx3("p", { className: "truncate text-sm text-muted-foreground", children: preview.url })
+      return /* @__PURE__ */ jsxs4(Panel, { className: "overflow-hidden", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "border-b border-border px-4 py-2", children: [
+          /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium text-foreground", children: preview.title ?? "Page preview" }),
+          preview.url && /* @__PURE__ */ jsx4("p", { className: "truncate text-sm text-muted-foreground", children: preview.url })
         ] }),
-        embeddedPreviewImage(preview.screenshot) ? /* @__PURE__ */ jsx3("img", { src: preview.screenshot, alt: preview.title ?? "Page screenshot", className: "h-auto w-full" }) : /* @__PURE__ */ jsx3("p", { className: "p-4 text-sm text-muted-foreground", children: "A captured screenshot is needed to preview this page." })
+        previewMediaSource(preview.screenshot, "image") ? /* @__PURE__ */ jsx4("img", { src: preview.screenshot, alt: preview.title ?? "Page screenshot", className: "h-auto w-full" }) : /* @__PURE__ */ jsx4("p", { className: "p-4 text-sm text-muted-foreground", children: "A captured screenshot is needed to preview this page." })
       ] });
     case "payment":
-      return /* @__PURE__ */ jsx3(PaymentPreview, { preview });
+      return /* @__PURE__ */ jsx4(PaymentPreview, { preview });
     case "speech":
-      return /* @__PURE__ */ jsx3(SpeechPreview, { preview });
+      return /* @__PURE__ */ jsx4(SpeechPreview, { preview });
     case "call":
-      return /* @__PURE__ */ jsx3(CallPreview, { preview });
+      return /* @__PURE__ */ jsx4(CallPreview, { preview });
     case "event":
-      return /* @__PURE__ */ jsx3(EventPreview, { preview });
+      return /* @__PURE__ */ jsx4(EventPreview, { preview });
     case "fields":
-      return preview.fields.length > 0 ? /* @__PURE__ */ jsx3(Panel, { className: "px-3 py-3", children: /* @__PURE__ */ jsx3(HubFieldList, { fields: preview.fields }) }) : null;
+      return preview.fields.length > 0 ? /* @__PURE__ */ jsx4(Panel, { className: "px-3 py-3", children: /* @__PURE__ */ jsx4(HubFieldList, { fields: preview.fields }) }) : null;
   }
 }
 
-// src/hub-approvals-react/feedback.tsx
-import { useEffect as useEffect2, useId, useState as useState3 } from "react";
-import { Button as Button2, Input, Label, Textarea } from "@tangle-network/ui/primitives";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function HubPreviewFeedback({ item, onFeedback, drafts }) {
-  const id = useId();
-  const saved = item.feedback;
-  const original = item.input && typeof item.input === "object" && !Array.isArray(item.input) ? item.input : {};
-  const prior = saved?.editedInput && typeof saved.editedInput === "object" && !Array.isArray(saved.editedInput) ? saved.editedInput : original;
-  const kind = presentHubAction(item).preview.kind;
-  const field = kind === "email" ? typeof original.html === "string" ? "html" : typeof original.body === "string" ? "body" : "text" : typeof original.commentary === "string" ? "commentary" : "text";
-  const draft = drafts?.get(item.id);
-  const [score, setScore] = useState3(draft?.score ?? (saved ? String(saved.score) : ""));
-  const [comment, setComment] = useState3(draft?.comment ?? saved?.comment ?? "");
-  const [editing, setEditing] = useState3(draft?.editing ?? false);
-  const [edited, setEdited] = useState3(draft?.edited ?? saved?.editedInput !== void 0);
-  const [subject, setSubject] = useState3(draft?.subject ?? String(prior.subject ?? ""));
-  const [body, setBody] = useState3(draft?.body ?? String(prior[field] ?? ""));
-  const [payload, setPayload] = useState3(draft?.payload ?? JSON.stringify(prior, null, 2));
-  const [busy, setBusy] = useState3(false);
-  const [status, setStatus] = useState3((draft ? draft.saved : saved) ? "Feedback saved" : "");
-  const [error, setError] = useState3("");
-  useEffect2(() => {
-    drafts?.set(item.id, { score, comment, editing, edited, subject, body, payload, saved: status === "Feedback saved" });
-  }, [drafts, item.id, score, comment, editing, edited, subject, body, payload, status]);
-  async function save() {
-    if (busy) return;
-    if (score.trim() === "" || !Number.isInteger(Number(score)) || Number(score) < 0 || Number(score) > 100) {
-      setError("Enter a score from 0 to 100.");
-      return;
-    }
-    setBusy(true);
-    setError("");
-    setStatus("");
-    try {
-      const editedInput = edited ? kind === "email" ? { ...original, subject, [field]: body } : kind === "post" ? { ...original, [field]: body } : JSON.parse(payload) : saved?.editedInput;
-      await onFeedback(item, {
-        score: Number(score),
-        comment,
-        ...editedInput !== void 0 && JSON.stringify(editedInput) !== JSON.stringify(item.input) ? { editedInput } : {}
-      });
-      setStatus("Feedback saved");
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "Feedback could not be saved. Your edits are kept here.");
-    } finally {
-      setBusy(false);
-    }
-  }
-  return /* @__PURE__ */ jsxs4("form", { "aria-label": "Preview feedback", className: "space-y-3 border-t border-border pt-3", onSubmit: (event) => {
-    event.preventDefault();
-    void save();
-  }, children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-end gap-3", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "w-36 space-y-1", children: [
-        /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-score`, children: "Score (0\u2013100)" }),
-        /* @__PURE__ */ jsx4(
-          Input,
-          {
-            id: `${id}-score`,
-            type: "number",
-            inputMode: "numeric",
-            min: 0,
-            max: 100,
-            step: 1,
-            required: true,
-            value: score,
-            placeholder: "Unscored",
-            disabled: busy,
-            onChange: (event) => {
-              setScore(event.target.value);
-              setStatus("");
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx4(Button2, { type: "button", variant: "outline", "aria-expanded": editing, disabled: busy, onClick: () => {
-        setEditing((value) => !value);
-        setStatus("");
-      }, children: "Edit to teach" })
-    ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-comment`, children: "Comment" }),
-      /* @__PURE__ */ jsx4(Textarea, { id: `${id}-comment`, value: comment, rows: 2, disabled: busy, onChange: (event) => {
-        setComment(event.target.value);
-        setStatus("");
-      } })
-    ] }),
-    editing && /* @__PURE__ */ jsxs4("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: "Your edit is saved as a teaching example. Live approval applies to the original held payload." }),
-      kind === "email" && /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-subject`, children: "Subject" }),
-        /* @__PURE__ */ jsx4(Input, { id: `${id}-subject`, value: subject, disabled: busy, onChange: (event) => {
-          setSubject(event.target.value);
-          setEdited(true);
-          setStatus("");
-        } })
-      ] }),
-      kind === "email" || kind === "post" ? /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-body`, children: kind === "email" ? "Body" : "Post text" }),
-        /* @__PURE__ */ jsx4(Textarea, { id: `${id}-body`, value: body, rows: 6, disabled: busy, onChange: (event) => {
-          setBody(event.target.value);
-          setEdited(true);
-          setStatus("");
-        } })
-      ] }) : /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx4(Label, { htmlFor: `${id}-payload`, children: "Payload" }),
-        /* @__PURE__ */ jsx4(Textarea, { id: `${id}-payload`, value: payload, rows: 6, disabled: busy, onChange: (event) => {
-          setPayload(event.target.value);
-          setEdited(true);
-          setStatus("");
-        } })
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsx4("p", { role: "alert", className: "text-sm text-[var(--surface-danger-text)]", children: error }),
-    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsx4(Button2, { type: "submit", variant: "outline", disabled: busy, children: busy ? "Saving feedback\u2026" : "Save feedback" }),
-      /* @__PURE__ */ jsx4("p", { role: "status", className: "text-sm text-muted-foreground", children: status })
-    ] })
-  ] });
-}
-
 // src/hub-approvals-react/dock.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var DONE_VISIBLE_MS = 6e3;
 function useNow(intervalMs) {
   const [now, setNow] = useState4(() => Date.now());
@@ -593,7 +748,7 @@ function Progress({ item }) {
 }
 function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, onFeedback, className = "" }) {
   const now = useNow(3e4);
-  const watched = useRef(/* @__PURE__ */ new Map());
+  const watched = useRef2(/* @__PURE__ */ new Map());
   const [settled, setSettled] = useState4({});
   const [dismissed, setDismissed] = useState4(/* @__PURE__ */ new Set());
   const [submitting, setSubmitting] = useState4(null);
@@ -602,7 +757,7 @@ function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, onFeed
   const [collapsed, setCollapsed] = useState4(false);
   const [permissionsOpen, setPermissionsOpen] = useState4(false);
   const [scope, setScope] = useState4(null);
-  const feedbackDrafts = useRef(/* @__PURE__ */ new Map());
+  const feedbackDrafts = useRef2(/* @__PURE__ */ new Map());
   const [feedbackSaving, setFeedbackSaving] = useState4(false);
   useEffect3(() => {
     const finishedNow = {};
@@ -664,7 +819,7 @@ function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, onFeed
       setSubmitting(null);
     }
   }
-  const card = /* @__PURE__ */ jsxs5(Fragment, { children: [
+  const card = /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-3 px-4 pt-3", children: [
       /* @__PURE__ */ jsx5(HubProviderMark, { providerId: presentation.provider.id, name: presentation.provider.name, size: 28 }),
       /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
@@ -721,7 +876,7 @@ function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, onFeed
             className: "gap-1.5",
             children: scopes.map((option) => /* @__PURE__ */ jsxs5("div", { className: "flex min-h-8 items-center gap-2", children: [
               /* @__PURE__ */ jsx5(RadioGroupItem, { id: `hub-scope-${active.id}-${option.id}`, value: option.id }),
-              /* @__PURE__ */ jsx5(Label2, { htmlFor: `hub-scope-${active.id}-${option.id}`, className: "cursor-pointer text-sm font-normal text-foreground", children: option.label })
+              /* @__PURE__ */ jsx5(Label, { htmlFor: `hub-scope-${active.id}-${option.id}`, className: "cursor-pointer text-sm font-normal text-foreground", children: option.label })
             ] }, option.id))
           }
         ),
@@ -732,7 +887,7 @@ function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, onFeed
         ] })
       ] }),
       /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-2", children: [
-        decidable && /* @__PURE__ */ jsxs5(Fragment, { children: [
+        decidable && /* @__PURE__ */ jsxs5(Fragment2, { children: [
           /* @__PURE__ */ jsx5(Button3, { disabled: feedbackSaving, onClick: () => void decide({ kind: "approve" }, "Approving\u2026"), children: active.executionMode === "dry-run" ? "Approve live" : "Approve" }),
           /* @__PURE__ */ jsx5(Button3, { disabled: feedbackSaving, variant: "outline", onClick: () => void decide({ kind: "deny" }, "Denying\u2026"), children: "Deny" }),
           scopes.length > 0 && /* @__PURE__ */ jsx5(Button3, { variant: "ghost", "aria-expanded": permissionsOpen, onClick: () => setPermissionsOpen((value) => !value), children: permissionsOpen ? "Fewer options" : "Allow future calls\u2026" })
@@ -784,7 +939,7 @@ function HubApprovalDock({ items, onDecide, permissions, onOpen, focusId, onFeed
 
 // src/hub-approvals-react/list.tsx
 import { useEffect as useEffect4, useState as useState5 } from "react";
-import { ChevronRight as ChevronRight2, ShieldCheck } from "lucide-react";
+import { ChevronRight as ChevronRight3, ShieldCheck } from "lucide-react";
 import { Button as Button4 } from "@tangle-network/ui/primitives";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var GROUPS = [
@@ -845,7 +1000,7 @@ function HubApprovalsList({ items, onSelect, selectedId, className = "" }) {
               ] }),
               /* @__PURE__ */ jsxs6("span", { className: "flex shrink-0 items-center gap-1", children: [
                 /* @__PURE__ */ jsx6(HubApprovalPhasePill, { phase: item.phase, label: openPhaseLabel(item, "Owner") }),
-                /* @__PURE__ */ jsx6(ChevronRight2, { "aria-hidden": true, className: "size-4 text-muted-foreground" })
+                /* @__PURE__ */ jsx6(ChevronRight3, { "aria-hidden": true, className: "size-4 text-muted-foreground" })
               ] })
             ]
           }
@@ -856,7 +1011,7 @@ function HubApprovalsList({ items, onSelect, selectedId, className = "" }) {
 }
 
 // src/hub-approvals-react/row.tsx
-import { useEffect as useEffect5, useRef as useRef2, useState as useState7 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState7 } from "react";
 import { ChevronDown as ChevronDown2 } from "lucide-react";
 import { Button as Button5 } from "@tangle-network/ui/primitives";
 
@@ -926,12 +1081,12 @@ function HubApprovalReceipts({ items, message, at }) {
 }
 
 // src/hub-approvals-react/row.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function HubApprovalRow({ item, expanded: controlled, onExpandedChange, onReview, actions, onFeedback }) {
   const [own, setOwn] = useState7(false);
   const expanded = controlled ?? own;
-  const ref = useRef2(null);
-  const feedbackDrafts = useRef2(/* @__PURE__ */ new Map());
+  const ref = useRef3(null);
+  const feedbackDrafts = useRef3(/* @__PURE__ */ new Map());
   const [feedbackSaving, setFeedbackSaving] = useState7(false);
   const presentation = presentHubAction(item);
   const title = item.phase === "done" ? hubActionReceipt(item).title : presentation.title;
@@ -965,7 +1120,7 @@ function HubApprovalRow({ item, expanded: controlled, onExpandedChange, onReview
     ] }),
     !expanded && item.phase === "unknown" && /* @__PURE__ */ jsx8("p", { className: "px-3 pb-3 text-sm text-[var(--surface-warning-text)]", children: HUB_APPROVAL_UNKNOWN_WARNING }),
     expanded && /* @__PURE__ */ jsxs8("div", { className: "space-y-3 border-t border-border px-3 pb-3 pt-3", children: [
-      item.phase === "done" || item.phase === "failed" || item.phase === "unknown" ? /* @__PURE__ */ jsx8(HubActionReceiptCard, { item, className: "border-0 px-0 py-0 shadow-none" }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      item.phase === "done" || item.phase === "failed" || item.phase === "unknown" ? /* @__PURE__ */ jsx8(HubActionReceiptCard, { item, className: "border-0 px-0 py-0 shadow-none" }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
         /* @__PURE__ */ jsx8(HubActionPreviewView, { preview: presentation.preview, account: item.account }),
         /* @__PURE__ */ jsx8(HubRawDetails, { sections: [{ label: "Call", value: { action: item.actionPath, input: item.input } }] })
       ] }),
@@ -993,6 +1148,7 @@ export {
   HubApprovalsList,
   HubPreviewFeedback,
   HubProviderMark,
+  ReviewFeedbackForm,
   openPhaseLabel
 };
 //# sourceMappingURL=index.js.map