@tangle-network/sandbox-ui 0.131.0 → 0.131.2

package/dist/assets.js

@@ -1,6 +1,6 @@
 import { t as cn } from "./utils-DzWbktWG.js";
-import { Badge, Button, Input, Label, Textarea } from "@tangle-network/ui/primitives";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Button, DatePicker, FilterField, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, Toolbar, localToday } from "@tangle-network/ui/primitives";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Fragment as Fragment$1 } from "react";
 import { Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, Film, GitBranch, Loader2, Maximize2, MessageSquare, Pencil, Play, Save, Search, X } from "lucide-react";
@@ -118,6 +118,283 @@ function ImagePreview({ content, brand, format = "feed", className }) {
 	});
 }
 //#endregion
+//#region src/assets/preview/email-preview.tsx
+/** sRGB relative luminance of a #rgb or #rrggbb colour; null for anything else. */
+function luminance(color) {
+	const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];
+	if (!hex) return null;
+	const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+	const [r, g, b] = [
+		0,
+		2,
+		4
+	].map((i) => {
+		const channel = parseInt(full.slice(i, i + 2), 16) / 255;
+		return channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+function contrast(a, b) {
+	return (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+}
+const PAPER = {
+	light: "#ffffff",
+	dark: "#111218"
+};
+const INK = {
+	light: "#16171d",
+	dark: "#f4f4f6"
+};
+/**
+* The colours an email body renders in. A brand whose text colour is light
+* writes on a dark page; any brand colour that would not read on that page
+* falls back to the page's own ink.
+*/
+function emailPalette(brand) {
+	const text = luminance(brand.textColor);
+	const scheme = text !== null && text > .5 ? "dark" : "light";
+	const paper = PAPER[scheme];
+	const paperLum = luminance(paper);
+	const readable = (color, minimum) => {
+		const lum = luminance(color);
+		return lum !== null && contrast(lum, paperLum) >= minimum;
+	};
+	const ink = readable(brand.textColor, 4.5) ? brand.textColor : INK[scheme];
+	const accent = readable(brand.primaryColor, 3) ? brand.primaryColor : ink;
+	const primary = luminance(brand.primaryColor);
+	const buttonText = primary !== null && contrast(primary, 1) < contrast(primary, 0) ? "#111111" : "#ffffff";
+	return {
+		scheme,
+		paper,
+		ink,
+		accent,
+		button: brand.primaryColor,
+		buttonText,
+		quote: brand.accentColor
+	};
+}
+function Button$1({ href, label, palette }) {
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		onClick: (event) => event.preventDefault(),
+		className: "inline-block rounded-md px-5 py-2.5 text-sm font-semibold no-underline",
+		style: {
+			background: palette.button,
+			color: palette.buttonText
+		},
+		children: label
+	});
+}
+function Section({ section, palette }) {
+	const muted = {
+		color: palette.ink,
+		opacity: .72
+	};
+	switch (section.type) {
+		case "hero": return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-3 py-2 text-center",
+			children: [
+				section.imageUrl && /* @__PURE__ */ jsx("img", {
+					src: section.imageUrl,
+					alt: "",
+					className: "w-full rounded-md object-cover"
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold leading-tight tracking-tight",
+					style: { color: palette.accent },
+					children: section.headline
+				}),
+				section.subheadline && /* @__PURE__ */ jsx("p", {
+					className: "text-base leading-relaxed",
+					style: muted,
+					children: section.subheadline
+				}),
+				section.ctaLabel && /* @__PURE__ */ jsx("div", {
+					className: "pt-1",
+					children: /* @__PURE__ */ jsx(Button$1, {
+						href: section.ctaUrl ?? "#",
+						label: section.ctaLabel,
+						palette
+					})
+				})
+			]
+		});
+		case "body": return /* @__PURE__ */ jsx("p", {
+			className: "text-base leading-7 whitespace-pre-wrap",
+			children: section.text
+		});
+		case "feature": return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-4",
+			children: [section.imageUrl && /* @__PURE__ */ jsx("img", {
+				src: section.imageUrl,
+				alt: "",
+				className: "size-16 shrink-0 rounded-md object-cover"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-base font-semibold",
+					children: section.headline
+				}), /* @__PURE__ */ jsx("div", {
+					className: "text-sm leading-relaxed",
+					style: muted,
+					children: section.description
+				})]
+			})]
+		});
+		case "testimonial": return /* @__PURE__ */ jsxs("blockquote", {
+			className: "border-l-4 pl-4",
+			style: { borderColor: palette.quote },
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "text-base italic leading-relaxed",
+				children: [
+					"“",
+					section.quote,
+					"”"
+				]
+			}), /* @__PURE__ */ jsxs("footer", {
+				className: "mt-2 text-sm font-medium",
+				style: muted,
+				children: [section.author, section.role ? `, ${section.role}` : ""]
+			})]
+		});
+		case "cta": return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-2 py-2 text-center",
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				href: section.url,
+				label: section.label,
+				palette
+			}), section.subtext && /* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				style: muted,
+				children: section.subtext
+			})]
+		});
+		case "divider": return /* @__PURE__ */ jsx("hr", {
+			className: "border-0 border-t",
+			style: {
+				borderColor: palette.ink,
+				opacity: .15
+			}
+		});
+		default: return null;
+	}
+}
+/**
+* An email as a reader meets it: who it is from, the subject and the inbox
+* preview line, then the body on the brand's page and in its typeface.
+*/
+function EmailPreview({ content, brand, previewUrl, className }) {
+	const palette = emailPalette(brand);
+	return /* @__PURE__ */ jsxs("article", {
+		className: cn("overflow-hidden rounded-lg border border-border bg-card shadow-sm", className),
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex flex-col gap-1 border-b border-border px-5 py-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-sm",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold",
+						style: {
+							background: palette.button,
+							color: palette.buttonText
+						},
+						children: brand.businessName.trim().charAt(0).toUpperCase() || "?"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: brand.businessName
+					})]
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "text-base font-semibold leading-snug",
+					children: content.subject
+				}),
+				content.preheader && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: content.preheader
+				})
+			]
+		}), previewUrl ? /* @__PURE__ */ jsx("iframe", {
+			src: previewUrl,
+			title: "Email preview",
+			sandbox: "allow-same-origin",
+			className: "block h-[480px] w-full bg-white"
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "px-5 py-8 sm:px-8",
+			style: {
+				background: palette.paper,
+				color: palette.ink,
+				fontFamily: brand.fontFamily
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				className: "mx-auto flex max-w-[560px] flex-col gap-5",
+				children: content.sections.map((section, index) => /* @__PURE__ */ jsx(Section, {
+					section,
+					palette
+				}, index))
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/assets/preview/copy-preview.tsx
+const PLATFORM_LIMITS = {
+	instagram: 2200,
+	tiktok: 2200,
+	x: 280,
+	linkedin: 3e3,
+	sms: 160,
+	"email-subject": 60
+};
+const COPY_PLATFORM_LABEL = {
+	instagram: "Instagram",
+	tiktok: "TikTok",
+	x: "X",
+	linkedin: "LinkedIn",
+	sms: "SMS",
+	"email-subject": "Email subject"
+};
+/** Copy as it will read: the channel and its length budget, the headline, the body and its hashtags. */
+function CopyPreview({ content, className }) {
+	const limit = PLATFORM_LIMITS[content.platform];
+	const length = content.body.length;
+	const over = limit !== null && length > limit;
+	const near = !over && limit !== null && length >= limit * .9;
+	return /* @__PURE__ */ jsxs("article", {
+		className: cn("flex flex-col gap-4 rounded-xl border border-border bg-card p-6 shadow-sm", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx(Badge, {
+					variant: "secondary",
+					className: "text-xs",
+					children: COPY_PLATFORM_LABEL[content.platform] ?? content.platform
+				}), limit !== null && /* @__PURE__ */ jsxs("span", {
+					className: cn("text-xs tabular-nums", over ? "font-medium text-destructive" : near ? "text-warning" : "text-muted-foreground"),
+					children: [
+						length,
+						" / ",
+						limit,
+						" characters"
+					]
+				})]
+			}),
+			content.headline && /* @__PURE__ */ jsx("h3", {
+				className: "text-xl font-semibold leading-snug tracking-tight",
+				children: content.headline
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-base leading-7 whitespace-pre-wrap [overflow-wrap:anywhere]",
+				children: content.body
+			}),
+			content.hashtags && content.hashtags.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-x-2 gap-y-1 text-sm text-primary",
+				children: content.hashtags.map((tag) => /* @__PURE__ */ jsxs("span", { children: ["#", tag.replace(/^#/, "")] }, tag))
+			})
+		]
+	});
+}
+//#endregion
 //#region src/assets/labels.ts
 /** Reader-facing name for each asset format. */
 const ASSET_FORMAT_LABEL = {
@@ -177,15 +454,46 @@ function Thumbnail({ spec }) {
 	const { format, brand, content } = spec;
 	if (format === "email") {
 		const ec = content;
-		return /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full flex-col gap-1 p-3 text-sm",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "line-clamp-3 font-medium",
-				children: ec.subject
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "text-xs text-muted-foreground",
-				children: [ec.sections.length, " sections"]
-			})]
+		const palette = emailPalette(brand);
+		const hero = ec.sections.find((section) => section.type === "hero");
+		const body = ec.sections.find((section) => section.type === "body");
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex h-full flex-col p-3",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full flex-col overflow-hidden rounded-md border border-border bg-card shadow-sm",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-0.5 border-b border-border px-3 py-2",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "truncate text-xs text-muted-foreground",
+							children: brand.businessName
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "line-clamp-2 text-sm font-semibold leading-snug",
+							children: ec.subject
+						}),
+						ec.preheader && /* @__PURE__ */ jsx("div", {
+							className: "truncate text-xs text-muted-foreground",
+							children: ec.preheader
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 flex-col gap-1 overflow-hidden px-3 py-2",
+					style: {
+						background: palette.paper,
+						color: palette.ink,
+						fontFamily: brand.fontFamily
+					},
+					children: [hero?.type === "hero" && /* @__PURE__ */ jsx("div", {
+						className: "line-clamp-2 text-sm font-bold leading-snug",
+						style: { color: palette.accent },
+						children: hero.headline
+					}), body?.type === "body" && /* @__PURE__ */ jsx("div", {
+						className: "line-clamp-4 text-xs leading-relaxed opacity-75",
+						children: body.text
+					})]
+				})]
+			})
 		});
 	}
 	if (format.startsWith("image:")) {
@@ -196,7 +504,7 @@ function Thumbnail({ spec }) {
 			alt: "",
 			loading: "lazy",
 			decoding: "async",
-			className: "h-full w-full object-contain"
+			className: "h-full w-full object-contain p-2"
 		});
 		return /* @__PURE__ */ jsx("div", {
 			className: "h-full overflow-hidden",
@@ -218,7 +526,7 @@ function Thumbnail({ spec }) {
 					alt: "",
 					loading: "lazy",
 					decoding: "async",
-					className: "h-full w-full object-contain"
+					className: "h-full w-full object-contain p-2"
 				}) : /* @__PURE__ */ jsx("div", {
 					className: "flex h-full flex-col gap-1 p-3 text-sm",
 					children: /* @__PURE__ */ jsxs("div", {
@@ -244,14 +552,21 @@ function Thumbnail({ spec }) {
 	if (format.startsWith("copy:")) {
 		const cc = content;
 		return /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full flex-col gap-1 p-3 text-sm",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "line-clamp-2 font-medium",
-				children: cc.headline
-			}), /* @__PURE__ */ jsx("div", {
-				className: "line-clamp-4 text-xs text-muted-foreground",
-				children: cc.body
-			})]
+			className: "flex h-full flex-col gap-2 overflow-hidden p-4",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: COPY_PLATFORM_LABEL[cc.platform] ?? cc.platform
+				}),
+				cc.headline && /* @__PURE__ */ jsx("div", {
+					className: "line-clamp-3 text-base font-semibold leading-snug",
+					children: cc.headline
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "line-clamp-5 text-sm leading-relaxed text-muted-foreground",
+					children: cc.body
+				})
+			]
 		});
 	}
 	return null;
@@ -325,125 +640,6 @@ function AssetCard({ spec, variantCount, onApprove, onReject, onEdit, onOpen, cl
 	});
 }
 //#endregion
-//#region src/assets/preview/email-preview.tsx
-function EmailPreview({ content, brand, previewUrl, className }) {
-	if (previewUrl) return jsxs("div", {
-		className: cn("flex flex-col gap-1", className),
-		children: [
-			jsx("div", {
-				className: "text-xs text-muted-foreground font-medium truncate",
-				children: content.subject
-			}),
-			content.preheader && jsx("div", {
-				className: "text-xs text-muted-foreground/60 truncate",
-				children: content.preheader
-			}),
-			jsx("iframe", {
-				src: previewUrl,
-				className: "w-full rounded border border-border",
-				style: {
-					height: 480,
-					background: "#fff"
-				},
-				title: "Email preview",
-				sandbox: "allow-same-origin"
-			})
-		]
-	});
-	return jsxs("div", {
-		className: cn("flex flex-col gap-2", className),
-		children: [
-			jsx("div", {
-				className: "text-sm font-semibold truncate",
-				children: content.subject
-			}),
-			content.preheader && jsx("div", {
-				className: "text-xs text-muted-foreground truncate",
-				children: content.preheader
-			}),
-			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 jsxs("div", {
-						className: "text-center py-4 space-y-2",
-						children: [
-							section.imageUrl && jsx("img", {
-								src: section.imageUrl,
-								alt: "",
-								className: "mx-auto max-h-40 object-cover rounded"
-							}),
-							jsx("div", {
-								className: "text-xl font-bold",
-								style: { color: brand.primaryColor },
-								children: section.headline
-							}),
-							section.subheadline && jsx("div", {
-								className: "text-sm text-muted-foreground",
-								children: section.subheadline
-							}),
-							section.ctaLabel && 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 jsx("p", {
-						className: "text-sm leading-relaxed whitespace-pre-wrap",
-						children: section.text
-					}, i);
-					if (section.type === "feature") return jsxs("div", {
-						className: "flex gap-3 items-start",
-						children: [section.imageUrl && jsx("img", {
-							src: section.imageUrl,
-							alt: "",
-							className: "w-16 h-16 object-cover rounded shrink-0"
-						}), jsxs("div", { children: [jsx("div", {
-							className: "text-sm font-semibold",
-							children: section.headline
-						}), jsx("div", {
-							className: "text-xs text-muted-foreground mt-0.5",
-							children: section.description
-						})] })]
-					}, i);
-					if (section.type === "testimonial") return jsxs("blockquote", {
-						className: "border-l-2 pl-3 italic text-sm text-muted-foreground",
-						style: { borderColor: brand.accentColor },
-						children: [jsxs("p", { children: [
-							"\"",
-							section.quote,
-							"\""
-						] }), jsxs("footer", {
-							className: "mt-1 text-xs not-italic font-medium",
-							children: [section.author, section.role ? `, ${section.role}` : ""]
-						})]
-					}, i);
-					if (section.type === "cta") return jsxs("div", {
-						className: "text-center py-3 space-y-1",
-						children: [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 && jsx("p", {
-							className: "text-xs text-muted-foreground",
-							children: section.subtext
-						})]
-					}, i);
-					if (section.type === "divider") return jsx("hr", { className: "border-border" }, i);
-					return null;
-				})
-			})
-		]
-	});
-}
-//#endregion
 //#region src/assets/preview/video-preview.tsx
 function VideoPreview({ content, brand, onRenderRequest, isRendering, className }) {
 	if (content.renderedUrl) return /* @__PURE__ */ jsx("div", {
@@ -534,64 +730,6 @@ function VideoPreview({ content, brand, onRenderRequest, isRendering, className
 	});
 }
 //#endregion
-//#region src/assets/preview/copy-preview.tsx
-const PLATFORM_LIMITS = {
-	instagram: 2200,
-	tiktok: 2200,
-	x: 280,
-	linkedin: 3e3,
-	sms: 160,
-	"email-subject": 60
-};
-const 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 * .9 : null;
-	const isNearLimit = !isOverLimit && warningThreshold !== null && bodyLen >= warningThreshold;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex flex-col gap-2", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-xs font-medium text-muted-foreground",
-				children: PLATFORM_LABELS[content.platform]
-			}), limit !== null && /* @__PURE__ */ jsxs("span", {
-				className: cn("text-xs tabular-nums", isOverLimit ? "text-destructive font-medium" : isNearLimit ? "text-warning" : "text-muted-foreground"),
-				children: [
-					bodyLen,
-					" / ",
-					limit
-				]
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "rounded border border-border p-3 space-y-2 bg-card",
-			children: [
-				content.headline && /* @__PURE__ */ jsx("div", {
-					className: "text-sm font-semibold",
-					children: content.headline
-				}),
-				/* @__PURE__ */ jsx("p", {
-					className: "text-sm whitespace-pre-wrap leading-relaxed",
-					children: content.body
-				}),
-				content.hashtags && content.hashtags.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "text-sm text-blue-500 flex flex-wrap gap-1",
-					children: content.hashtags.map((tag) => /* @__PURE__ */ jsxs("span", { children: ["#", tag] }, tag))
-				})
-			]
-		})]
-	});
-}
-//#endregion
 //#region src/assets/asset-editor.tsx
 function BrandPanel({ brand, onChange }) {
 	const [open, setOpen] = React$1.useState(false);
@@ -977,6 +1115,9 @@ function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit
 	const [statusFilter, setStatusFilter] = React$1.useState("pending_review");
 	const [editingId, setEditingId] = React$1.useState(null);
 	const [scheduleDate, setScheduleDate] = React$1.useState("");
+	const formatId = React$1.useId();
+	const statusId = React$1.useId();
+	const scheduleId = React$1.useId();
 	const filtered = assets.filter((a) => {
 		if (formatFilter !== "all" && a.format !== formatFilter) return false;
 		if (statusFilter !== "all" && a.status !== statusFilter) return false;
@@ -1034,60 +1175,78 @@ function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex flex-col gap-3", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap gap-2 items-center",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "relative flex-1 min-w-40",
-					children: [/* @__PURE__ */ jsx(Search, {
-						size: 12,
-						className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
-					}), /* @__PURE__ */ jsx(Input, {
-						value: search,
-						onChange: (e) => setSearch(e.target.value),
-						placeholder: "Filter assets…",
-						className: "h-8 pl-7 text-sm"
-					})]
-				}),
-				/* @__PURE__ */ jsx("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__ */ jsx("option", {
-						value: o.value,
-						children: o.label
-					}, o.value))
+		children: [/* @__PURE__ */ jsx(Toolbar, {
+			className: "mb-0",
+			search: /* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx(Search, {
+					size: 14,
+					"aria-hidden": true,
+					className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+				}), /* @__PURE__ */ jsx(Input, {
+					value: search,
+					onChange: (e) => setSearch(e.target.value),
+					placeholder: "Filter assets…",
+					"aria-label": "Filter assets",
+					className: "pl-9"
+				})]
+			}),
+			filters: /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(FilterField, {
+					label: "Format",
+					htmlFor: formatId,
+					children: /* @__PURE__ */ jsxs(Select, {
+						value: formatFilter,
+						onValueChange: setFormatFilter,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							id: formatId,
+							className: "w-36",
+							children: /* @__PURE__ */ jsx(SelectValue, {})
+						}), /* @__PURE__ */ jsx(SelectContent, { children: FORMAT_OPTIONS.map((o) => /* @__PURE__ */ jsx(SelectItem, {
+							value: o.value,
+							children: o.label
+						}, o.value)) })]
+					})
 				}),
-				/* @__PURE__ */ jsx("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__ */ jsx("option", {
-						value: o.value,
-						children: o.label
-					}, o.value))
+				/* @__PURE__ */ jsx(FilterField, {
+					label: "Status",
+					htmlFor: statusId,
+					children: /* @__PURE__ */ jsxs(Select, {
+						value: statusFilter,
+						onValueChange: setStatusFilter,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							id: statusId,
+							className: "w-36",
+							children: /* @__PURE__ */ jsx(SelectValue, {})
+						}), /* @__PURE__ */ jsx(SelectContent, { children: STATUS_OPTIONS.map((o) => /* @__PURE__ */ jsx(SelectItem, {
+							value: o.value,
+							children: o.label
+						}, o.value)) })]
+					})
 				}),
-				pendingCount > 0 && onApprove && /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1.5",
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "date",
+				pendingCount > 0 && onApprove && /* @__PURE__ */ jsx(FilterField, {
+					label: "Schedule for",
+					htmlFor: scheduleId,
+					children: /* @__PURE__ */ jsx(DatePicker, {
+						id: scheduleId,
+						className: "w-40",
+						placeholder: "Not scheduled",
+						min: localToday(),
 						value: scheduleDate,
-						onChange: (e) => setScheduleDate(e.target.value),
-						className: "h-8 px-2 text-xs rounded border border-input bg-background w-32"
-					}), /* @__PURE__ */ jsxs(Button, {
-						size: "sm",
-						variant: "outline",
-						onClick: handleBulkApprove,
-						className: "h-8 gap-1.5 text-xs",
-						children: [
-							/* @__PURE__ */ jsx(CheckCheck, { size: 13 }),
-							"Approve all (",
-							pendingCount,
-							")"
-						]
-					})]
+						onChange: setScheduleDate
+					})
 				})
-			]
+			] }),
+			actions: pendingCount > 0 && onApprove ? /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				onClick: handleBulkApprove,
+				children: [
+					/* @__PURE__ */ jsx(CheckCheck, {}),
+					"Approve all (",
+					pendingCount,
+					")"
+				]
+			}) : void 0
 		}), filtered.length === 0 ? /* @__PURE__ */ jsx("div", {
 			className: "py-12 text-center text-sm text-muted-foreground",
 			children: "No assets match your filters."
@@ -1105,4 +1264,4 @@ function ApprovalQueue({ assets, variantCounts = {}, onApprove, onReject, onEdit
 	});
 }
 //#endregion
-export { ASSET_FORMAT_LABEL, ASSET_STATUS_LABEL, ApprovalQueue, AssetCard, AssetEditor, CopyPreview, EmailPreview, ImagePreview, VideoPreview, imageOnlyUrl, videoPosterUrl };
+export { ASSET_FORMAT_LABEL, ASSET_STATUS_LABEL, ApprovalQueue, AssetCard, AssetEditor, COPY_PLATFORM_LABEL, CopyPreview, EmailPreview, ImagePreview, VideoPreview, emailPalette, imageOnlyUrl, videoPosterUrl };