@page-speed/agent-everywhere 1.0.0 → 1.1.0

package/dist/index.js

@@ -2,11 +2,11 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React4 from 'react';
-import { createContext, forwardRef, useRef, useImperativeHandle, useCallback, useLayoutEffect, useState, useEffect, useReducer, useMemo, useContext, useId, Fragment as Fragment$1 } from 'react';
+import { createContext, forwardRef, useRef, useImperativeHandle, useCallback, useLayoutEffect, useState, useEffect, useReducer, useMemo, useContext, useId, Fragment as Fragment$1, isValidElement, cloneElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'motion/react';
 import { Markdown } from '@page-speed/markdown-to-jsx';
-import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, ClipboardListIcon, ArrowLeftIcon, MoreVerticalIcon, Loader2, ArrowUp, PanelLeft, PanelRight, RotateCcw, ChevronDown, Sparkles, MessageSquare, Paperclip, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
+import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, Globe, X, Loader2, CornerDownLeft, Pencil, Trash2, CircleCheck, ClipboardListIcon, ArrowLeftIcon, MoreVerticalIcon, ArrowUp, PanelLeft, PanelRight, RotateCcw, ChevronDown, Sparkles, MessageSquare, Paperclip, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, ShoppingCart, MessageCircle, Camera, Music, MapPin, Calendar, User, Settings, Check, Heart, Star, Video, Image, Link, Phone, Mail, Github, Youtube, Linkedin, Twitter, Instagram, Facebook, Play, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -9923,6 +9923,813 @@ function AudioPlayer({
     }) })
   ] });
 }
+var ICON_MAP = {
+  globe: Globe,
+  facebook: Facebook,
+  instagram: Instagram,
+  twitter: Twitter,
+  x: Twitter,
+  linkedin: Linkedin,
+  youtube: Youtube,
+  github: Github,
+  mail: Mail,
+  email: Mail,
+  phone: Phone,
+  link: Link,
+  url: Link,
+  image: Image,
+  photo: Image,
+  video: Video,
+  star: Star,
+  heart: Heart,
+  check: Check,
+  settings: Settings,
+  user: User,
+  account: User,
+  calendar: Calendar,
+  "map-pin": MapPin,
+  mappin: MapPin,
+  location: MapPin,
+  music: Music,
+  camera: Camera,
+  message: MessageCircle,
+  chat: MessageCircle,
+  cart: ShoppingCart,
+  shop: ShoppingCart
+};
+function resolveIconName(name, className = "size-5 shrink-0") {
+  if (!name) return null;
+  const Icon = ICON_MAP[name.trim().toLowerCase()];
+  return Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className }) : null;
+}
+var DEFAULT_OPEN_GRAPH_ENDPOINT = "/api/opengraph";
+function firstString(...values) {
+  for (const value of values) {
+    if (typeof value === "string" && value.trim()) {
+      return value.trim();
+    }
+  }
+  return null;
+}
+function imageUrlFromOpenGraph(image) {
+  if (!image) return null;
+  if (typeof image === "string") return firstString(image);
+  return firstString(image.url);
+}
+function domainFromUrl(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+function normalizeUrlForPreview(input) {
+  const trimmed = input.trim();
+  if (!trimmed) return "";
+  return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+}
+function buildEndpointUrl(endpoint, url) {
+  const separator = endpoint.includes("?") ? "&" : "?";
+  return `${endpoint}${separator}url=${encodeURIComponent(url)}`;
+}
+function getErrorMessage(body) {
+  if (body && typeof body === "object" && "error" in body && typeof body.error === "string") {
+    return body.error;
+  }
+  return "Could not load a preview for that link.";
+}
+function extractLinkPreview(data, fallbackUrl = "") {
+  const hybridGraph = data.hybridGraph;
+  const openGraph = data.openGraph;
+  const htmlInferred = data.htmlInferred;
+  const url = firstString(
+    data.finalUrl,
+    data.url,
+    data.normalizedUrl,
+    data.requestedUrl,
+    openGraph?.url,
+    hybridGraph?.url,
+    htmlInferred?.url
+  ) ?? normalizeUrlForPreview(fallbackUrl);
+  return {
+    url,
+    domain: domainFromUrl(url),
+    title: firstString(hybridGraph?.title, openGraph?.title, htmlInferred?.title),
+    description: firstString(
+      hybridGraph?.description,
+      openGraph?.description,
+      htmlInferred?.description
+    ),
+    image: firstString(
+      hybridGraph?.image,
+      imageUrlFromOpenGraph(openGraph?.image ?? null),
+      htmlInferred?.image,
+      htmlInferred?.images?.[0]
+    ),
+    favicon: firstString(hybridGraph?.favicon, htmlInferred?.favicon),
+    siteName: firstString(
+      htmlInferred?.site_name,
+      openGraph?.site_name,
+      hybridGraph?.site_name
+    )
+  };
+}
+async function fetchOpenGraphPreview(url, endpoint = DEFAULT_OPEN_GRAPH_ENDPOINT) {
+  const response = await fetch(buildEndpointUrl(endpoint, url), {
+    headers: { Accept: "application/json" }
+  });
+  let body = null;
+  try {
+    body = await response.json();
+  } catch {
+    body = null;
+  }
+  if (!response.ok) {
+    throw new Error(getErrorMessage(body));
+  }
+  return body;
+}
+function LinkInput({
+  label = "Add a link",
+  icon,
+  iconName,
+  placeholder = "Paste or type a URL...",
+  defaultUrl = "",
+  defaultValue = null,
+  value,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  disabled = false,
+  endpoint = DEFAULT_OPEN_GRAPH_ENDPOINT,
+  fetcher,
+  onSubmit,
+  onValueChange,
+  onClear,
+  onExpandedChange,
+  className
+}) {
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+  const [url, setUrl] = useState(defaultUrl || defaultValue?.url || "");
+  const [submittedUrl, setSubmittedUrl] = useState(
+    defaultUrl || defaultValue?.url || ""
+  );
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const [internalPreview, setInternalPreview] = useState(
+    defaultValue
+  );
+  const inputRef = useRef(null);
+  const reactId = useId();
+  const inputId = `link-input-${reactId}`;
+  const errorId = `link-input-error-${reactId}`;
+  const isExpanded = controlledExpanded === void 0 ? uncontrolledExpanded : controlledExpanded;
+  const isPreviewControlled = value !== void 0;
+  const preview = (isPreviewControlled ? value : internalPreview) ?? null;
+  const isLoading = status === "loading";
+  const hasPreview = preview !== null;
+  const resolvedIcon = icon ?? resolveIconName(iconName, "size-5") ?? /* @__PURE__ */ jsx(Globe, { "aria-hidden": true, className: "size-5" });
+  const resolvedFetcher = useCallback(
+    (nextUrl) => fetcher?.(nextUrl) ?? fetchOpenGraphPreview(nextUrl, endpoint),
+    [endpoint, fetcher]
+  );
+  const setExpanded = useCallback(
+    (next) => {
+      if (controlledExpanded === void 0) {
+        setUncontrolledExpanded(next);
+      }
+      onExpandedChange?.(next);
+    },
+    [controlledExpanded, onExpandedChange]
+  );
+  useEffect(() => {
+    if (value !== void 0) {
+      const nextUrl = value?.url ?? "";
+      setSubmittedUrl(nextUrl);
+      if (!isExpanded) setUrl(nextUrl);
+    }
+  }, [isExpanded, value]);
+  useEffect(() => {
+    if (!isExpanded) return;
+    const timeout = window.setTimeout(() => inputRef.current?.focus(), 60);
+    return () => window.clearTimeout(timeout);
+  }, [isExpanded]);
+  async function handleSubmit(event) {
+    event?.preventDefault();
+    const nextUrl = url.trim();
+    if (!nextUrl || isLoading || disabled) return;
+    setStatus("loading");
+    setError(null);
+    try {
+      const data = await resolvedFetcher(nextUrl);
+      const nextPreview = extractLinkPreview(data, nextUrl);
+      if (!isPreviewControlled) {
+        setInternalPreview(nextPreview);
+      }
+      setUrl(nextPreview.url);
+      setSubmittedUrl(nextPreview.url);
+      setStatus("idle");
+      setExpanded(false);
+      onValueChange?.(nextPreview, data);
+      onSubmit?.(data, nextPreview);
+    } catch (submitError) {
+      setStatus("error");
+      setError(
+        submitError instanceof Error ? submitError.message : "Something went wrong."
+      );
+    }
+  }
+  function handleEdit() {
+    if (disabled) return;
+    setUrl(submittedUrl);
+    setStatus("idle");
+    setError(null);
+    setExpanded(true);
+  }
+  function handleClose() {
+    setUrl(submittedUrl);
+    setStatus("idle");
+    setError(null);
+    setExpanded(false);
+  }
+  function handleDelete() {
+    if (disabled) return;
+    if (!isPreviewControlled) {
+      setInternalPreview(null);
+    }
+    setUrl("");
+    setSubmittedUrl("");
+    setStatus("idle");
+    setError(null);
+    setExpanded(false);
+    onValueChange?.(null, null);
+    onClear?.();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-state": isExpanded ? "editing" : hasPreview ? "filled" : "idle",
+      className: cn(
+        "group/link-input overflow-hidden rounded-xl border bg-card text-card-foreground transition-colors",
+        isExpanded || hasPreview ? "border-foreground/80 shadow-sm" : "border-border hover:border-foreground/30",
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        isExpanded ? /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col gap-3 px-4 py-3.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center text-muted-foreground [&_svg]:size-5", children: resolvedIcon }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 text-sm font-medium leading-5 text-foreground", children: label }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClose,
+              "aria-label": "Close link input",
+              className: "absolute right-2.5 top-2.5 flex size-6 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ] }) : hasPreview ? /* @__PURE__ */ jsx(
+          LinkInputPreview,
+          {
+            preview,
+            onEdit: handleEdit,
+            onDelete: handleDelete,
+            disabled
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(true),
+            "aria-expanded": false,
+            disabled,
+            className: "flex w-full flex-col gap-3 px-4 py-3.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:cursor-not-allowed",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center text-muted-foreground [&_svg]:size-5", children: resolvedIcon }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 text-sm font-medium leading-5 text-foreground", children: label })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 pb-4 pt-3", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: inputRef,
+                id: inputId,
+                type: "text",
+                inputMode: "url",
+                autoComplete: "off",
+                spellCheck: false,
+                value: url,
+                disabled: disabled || isLoading,
+                "aria-invalid": status === "error",
+                "aria-describedby": status === "error" ? errorId : void 0,
+                onChange: (event) => {
+                  setUrl(event.target.value);
+                  if (status === "error") {
+                    setStatus("idle");
+                    setError(null);
+                  }
+                },
+                placeholder,
+                className: cn(
+                  "h-10 rounded-lg bg-background pr-[5.25rem] text-sm shadow-sm placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40",
+                  status === "error" && "border-destructive/60"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-1.5 flex items-center", children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "submit",
+                size: "sm",
+                disabled: !url.trim() || isLoading || disabled,
+                className: "h-7 gap-1 px-2",
+                children: [
+                  isLoading ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(CornerDownLeft, { "aria-hidden": true, className: "size-3.5" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs", children: isLoading ? "Loading" : "Enter" })
+                ]
+              }
+            ) })
+          ] }),
+          status === "error" && error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "px-0.5 text-xs text-destructive", children: error }) : /* @__PURE__ */ jsxs("p", { className: "px-0.5 text-xs text-muted-foreground", children: [
+            "Press",
+            " ",
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border bg-muted px-1 font-sans text-[0.65rem] text-muted-foreground", children: "Enter" }),
+            " ",
+            "to fetch a preview."
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+function LinkInputPreview({
+  preview,
+  onEdit,
+  onDelete,
+  disabled
+}) {
+  const [imageError, setImageError] = useState(false);
+  const [faviconError, setFaviconError] = useState(false);
+  const showImage = Boolean(preview.image) && !imageError;
+  const showFavicon = Boolean(preview.favicon) && !faviconError;
+  const title = preview.title || preview.siteName || preview.domain || "Untitled link";
+  useEffect(() => {
+    setImageError(false);
+    setFaviconError(false);
+  }, [preview.favicon, preview.image]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-3 p-3", children: [
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: preview.url || "#",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+        children: showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: preview.image,
+            alt: "",
+            crossOrigin: "anonymous",
+            onError: () => setImageError(true),
+            className: "size-full object-cover"
+          }
+        ) : showFavicon ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: preview.favicon,
+            alt: "",
+            crossOrigin: "anonymous",
+            onError: () => setFaviconError(true),
+            className: "size-7"
+          }
+        ) : /* @__PURE__ */ jsx(Globe, { "aria-hidden": true, className: "size-7 text-muted-foreground" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center py-0.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        showFavicon && showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: preview.favicon,
+            alt: "",
+            crossOrigin: "anonymous",
+            onError: () => setFaviconError(true),
+            className: "size-3.5 shrink-0 rounded-sm"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium text-muted-foreground", children: preview.domain || preview.siteName })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: preview.url || "#",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "mt-0.5 line-clamp-1 text-sm font-semibold text-foreground outline-none hover:underline focus-visible:underline",
+          children: title
+        }
+      ),
+      preview.description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs leading-4 text-muted-foreground", children: preview.description }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: "ghost",
+          onClick: onEdit,
+          disabled,
+          "aria-label": "Edit link",
+          className: "size-7 rounded-full",
+          children: /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: "ghost",
+          onClick: onDelete,
+          disabled,
+          "aria-label": "Delete link",
+          className: "size-7 rounded-full",
+          children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+        }
+      )
+    ] })
+  ] });
+}
+function LinkInputGroup({
+  options,
+  onSubmit,
+  onValueChange,
+  onClear,
+  className
+}) {
+  const [openId, setOpenId] = useState(null);
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", className), children: options.map(({ id, ...option }) => /* @__PURE__ */ jsx(
+    LinkInput,
+    {
+      ...option,
+      expanded: openId === id,
+      onExpandedChange: (next) => setOpenId((currentId) => {
+        if (next) return id;
+        return currentId === id ? null : currentId;
+      }),
+      onSubmit: (data, preview) => {
+        setOpenId(null);
+        onSubmit?.(id, data, preview);
+      },
+      onValueChange: (preview, data) => {
+        onValueChange?.(id, preview, data);
+      },
+      onClear: () => onClear?.(id)
+    },
+    id
+  )) });
+}
+var getDimensionStyle = (width, height) => {
+  const style = {};
+  if (width) style.width = typeof width === "number" ? `${width}px` : width;
+  if (height) style.height = typeof height === "number" ? `${height}px` : height;
+  return style;
+};
+var getThumbnailSizing = (thumbnailHeight) => ({
+  heightClass: typeof thumbnailHeight === "number" ? "" : thumbnailHeight,
+  heightStyle: typeof thumbnailHeight === "number" ? { height: `${thumbnailHeight}px` } : void 0
+});
+function MediaFallback() {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-28 w-full items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(ImageIcon, { className: "size-7", "aria-hidden": "true" }) });
+}
+function MediaOptionItem({
+  option,
+  isChecked,
+  onToggle,
+  thumbnailHeight
+}) {
+  const {
+    value,
+    label,
+    subtitle,
+    mediaUrl,
+    mediaType,
+    thumbnailUrl,
+    width,
+    height,
+    disabled
+  } = option;
+  const videoRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [mediaError, setMediaError] = useState(!mediaUrl);
+  const sizeStyle = getDimensionStyle(width, height);
+  const { heightClass, heightStyle } = getThumbnailSizing(thumbnailHeight);
+  const handleMouseEnter = () => {
+    if (mediaType === "video" && videoRef.current && !disabled) {
+      videoRef.current.play().then(() => setPlaying(true)).catch(() => {
+      });
+    }
+  };
+  const handleMouseLeave = () => {
+    if (mediaType === "video" && videoRef.current) {
+      videoRef.current.pause();
+      setPlaying(false);
+    }
+  };
+  const handleVideoClick = (e) => {
+    e.stopPropagation();
+    if (mediaType !== "video" || !videoRef.current || disabled) return;
+    if (playing) {
+      videoRef.current.pause();
+      setPlaying(false);
+      return;
+    }
+    videoRef.current.play().then(() => setPlaying(true)).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "group block h-full",
+        disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
+      ),
+      style: sizeStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: "peer sr-only",
+            checked: isChecked,
+            disabled,
+            onChange: () => onToggle(value)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "relative flex h-full flex-col overflow-hidden rounded-lg border bg-card text-card-foreground shadow-xs transition-all duration-200 ease-in-out",
+              "border-input hover:border-border hover:shadow-sm",
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
+              isChecked && "border-primary shadow-sm ring-1 ring-primary/30 hover:border-primary",
+              disabled && "pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn("relative block overflow-hidden bg-muted", heightClass),
+                  style: heightStyle,
+                  onMouseEnter: handleMouseEnter,
+                  onMouseLeave: handleMouseLeave,
+                  children: [
+                    mediaError ? /* @__PURE__ */ jsx(MediaFallback, {}) : mediaType === "image" ? /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: mediaUrl,
+                        alt: label,
+                        className: "h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-[1.015]",
+                        onError: () => setMediaError(true)
+                      }
+                    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "video",
+                        {
+                          ref: videoRef,
+                          src: mediaUrl,
+                          poster: thumbnailUrl,
+                          muted: true,
+                          loop: true,
+                          playsInline: true,
+                          preload: "metadata",
+                          onClick: handleVideoClick,
+                          onError: () => setMediaError(true),
+                          className: cn(
+                            "h-full w-full object-cover transition duration-300 ease-out group-hover:scale-[1.015]",
+                            playing ? "grayscale-0" : "grayscale"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "absolute bottom-2 left-2 flex size-7 items-center justify-center rounded-full bg-background/85 text-foreground shadow-xs backdrop-blur",
+                            playing && "opacity-0"
+                          ),
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-3.5 fill-current" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "absolute right-3 top-3 flex size-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-xs transition-all duration-200",
+                          isChecked ? "scale-100 opacity-100 ring-2 ring-white ring-offset-2" : "scale-75 opacity-0"
+                        ),
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx(Check, { className: "size-3.5 stroke-[2.5]" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "flex min-h-[82px] flex-col gap-1 border-t border-border bg-card px-3 py-3 text-card-foreground",
+                    isChecked && "bg-primary text-primary-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-sm font-semibold leading-5", children: label }),
+                    subtitle && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm leading-5", children: subtitle })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaCheckboxes({
+  options,
+  selectedValues,
+  defaultSelectedValues,
+  onSelect,
+  minSelection = 0,
+  maxSelection,
+  className,
+  thumbnailHeight = "h-48"
+}) {
+  const isControlled = Array.isArray(selectedValues);
+  const [internal, setInternal] = useState(
+    defaultSelectedValues ?? []
+  );
+  const current = isControlled ? selectedValues : internal;
+  const max = maxSelection ?? options.length;
+  const toggleOption = useCallback(
+    (value) => {
+      const isSelected = current.includes(value);
+      let updated;
+      if (isSelected) {
+        updated = current.filter((v) => v !== value);
+        if (updated.length < minSelection) return;
+      } else if (max === 1) {
+        updated = [value];
+      } else {
+        if (current.length >= max) return;
+        updated = [...current, value];
+      }
+      if (!isControlled) setInternal(updated);
+      onSelect?.(updated);
+    },
+    [current, isControlled, max, minSelection, onSelect]
+  );
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      className: cn(
+        "grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4",
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        MediaOptionItem,
+        {
+          option,
+          isChecked: current.includes(option.value),
+          onToggle: toggleOption,
+          thumbnailHeight
+        },
+        option.value
+      ))
+    }
+  );
+}
+function renderTileIcon(item) {
+  if (item.icon != null) {
+    if (isValidElement(item.icon)) {
+      return cloneElement(item.icon, {
+        className: cn(item.icon.props.className, "size-5 shrink-0")
+      });
+    }
+    return item.icon;
+  }
+  return resolveIconName(item.iconName);
+}
+function IconCheckboxes({
+  options,
+  selectedValues,
+  defaultSelectedValues,
+  onSelect,
+  minSelection = 0,
+  maxSelection,
+  className
+}) {
+  const isControlled = Array.isArray(selectedValues);
+  const [internal, setInternal] = useState(
+    defaultSelectedValues ?? []
+  );
+  const current = isControlled ? selectedValues : internal;
+  const max = maxSelection ?? options.length;
+  const commit = (updated) => {
+    if (!isControlled) setInternal(updated);
+    onSelect?.(updated);
+  };
+  const toggleOption = (value) => {
+    const isSelected = current.includes(value);
+    let updated;
+    if (isSelected) {
+      updated = current.filter((v) => v !== value);
+      if (updated.length < minSelection) return;
+    } else if (max === 1) {
+      updated = [value];
+    } else {
+      if (current.length >= max) return;
+      updated = [...current, value];
+    }
+    commit(updated);
+  };
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      className: cn(
+        "grid w-full max-w-sm grid-cols-[repeat(auto-fit,minmax(7rem,1fr))] gap-3",
+        className
+      ),
+      children: options.map((item) => {
+        const { value, label, disabled } = item;
+        const isChecked = current.includes(value);
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: cn(
+              "block",
+              disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "peer sr-only",
+                  checked: isChecked,
+                  disabled,
+                  onChange: () => toggleOption(value)
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "relative flex min-h-[88px] flex-col items-start justify-center rounded-lg border bg-card px-4 py-3 text-left text-muted-foreground transition-all duration-200 ease-in-out",
+                    "border-input hover:border-border hover:bg-accent/40",
+                    "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
+                    isChecked && "border-primary bg-primary/5 text-primary shadow-xs ring-1 ring-primary/20 hover:border-primary hover:bg-primary/5",
+                    disabled && "pointer-events-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "mb-3 flex size-5 items-center justify-center",
+                        children: renderTileIcon(item)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "w-full break-words text-sm font-medium leading-tight transition-colors duration-200 ease-in-out", children: label }),
+                    /* @__PURE__ */ jsx(
+                      CircleCheck,
+                      {
+                        "aria-hidden": "true",
+                        className: cn(
+                          "absolute right-2 top-2 size-5 rounded-full fill-primary text-primary-foreground transition-all duration-200 ease-in-out",
+                          isChecked ? "scale-100 opacity-100" : "scale-75 opacity-0"
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          value
+        );
+      })
+    }
+  );
+}
 var ARTIFACT_REGISTRY = {
   chart: ({ payload, className }) => payload.chart ? /* @__PURE__ */ jsx(ChartContainer, { data: payload.chart, className }) : null,
   metrics: ({ payload, className }) => payload.metrics ? /* @__PURE__ */ jsx(MetricsGrid, { metrics: payload.metrics, className }) : null,
@@ -9940,7 +10747,10 @@ var ARTIFACT_REGISTRY = {
   "deep-research-progress": ({ payload, className }) => payload.deepResearchProgress ? /* @__PURE__ */ jsx(DeepResearchProgress, { ...payload.deepResearchProgress, className }) : null,
   tracker: ({ payload, className }) => payload.tracker ? /* @__PURE__ */ jsx(Tracker, { ...payload.tracker, className }) : null,
   "built-in-questions": ({ payload, className }) => payload.builtInQuestions ? /* @__PURE__ */ jsx(BuiltInQuestions, { ...payload.builtInQuestions, className }) : null,
-  "audio-player": ({ payload, className }) => payload.audioPlayer ? /* @__PURE__ */ jsx(AudioPlayer, { ...payload.audioPlayer, className }) : null
+  "audio-player": ({ payload, className }) => payload.audioPlayer ? /* @__PURE__ */ jsx(AudioPlayer, { ...payload.audioPlayer, className }) : null,
+  "link-input": ({ payload, className }) => payload.linkInput ? /* @__PURE__ */ jsx(LinkInput, { ...payload.linkInput, className }) : null,
+  "media-checkboxes": ({ payload, className }) => payload.mediaCheckboxes ? /* @__PURE__ */ jsx(MediaCheckboxes, { ...payload.mediaCheckboxes, className }) : null,
+  "icon-checkboxes": ({ payload, className }) => payload.iconCheckboxes ? /* @__PURE__ */ jsx(IconCheckboxes, { ...payload.iconCheckboxes, className }) : null
 };
 function DataPayloadView({ payload, className }) {
   const render = ARTIFACT_REGISTRY[payload.type];
@@ -11370,6 +12180,6 @@ function AgentWorkspaceSkeleton({
   );
 }
 
-export { AgentAvatar, AgentComposer, AgentConversation, AgentHandoff, AgentProvider, AgentSurface, AgentWorkspace, AgentWorkspaceComposer, AgentWorkspacePanelToggle, AgentWorkspaceSkeleton, AllocationBreakdown, AnalyticsDashboard, AudioPlayer, Avatar, AvatarFallback, AvatarImage, Badge, BadgesArtifact, BuiltInQuestions, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmationPanel, ControlGrid, ConversationAnalytics, ConversationArtifact, DataPayloadView, DataTable, DeepResearchProgress, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, ImageGenerator, InlineSuggestionsInput, Input, KpiCardWithChart, KpiCardWithSparklines, ListingFeed, LocationsRevenueCard, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageContainer, MessageContent, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, NativeAgentProvider, NativeSurface, OnboardingWizard, OptionCards, OrderedListArtifact, OverlayModal, PerformanceMetrics, PersonaSelector, PieChartArtifact, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, RowBasedDataList, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StackedSparklines, StatCardHalfCircle, StatusBadge, SystemMessage, TableListArtifact, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tracker, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useAgentWorkspace, useAgentWorkspaceOptional, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
+export { AgentAvatar, AgentComposer, AgentConversation, AgentHandoff, AgentProvider, AgentSurface, AgentWorkspace, AgentWorkspaceComposer, AgentWorkspacePanelToggle, AgentWorkspaceSkeleton, AllocationBreakdown, AnalyticsDashboard, AudioPlayer, Avatar, AvatarFallback, AvatarImage, Badge, BadgesArtifact, BuiltInQuestions, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmationPanel, ControlGrid, ConversationAnalytics, ConversationArtifact, DEFAULT_OPEN_GRAPH_ENDPOINT, DataPayloadView, DataTable, DeepResearchProgress, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, IconCheckboxes, ImageGenerator, InlineSuggestionsInput, Input, KpiCardWithChart, KpiCardWithSparklines, LinkInput, LinkInputGroup, ListingFeed, LocationsRevenueCard, MediaCheckboxes, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageContainer, MessageContent, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, NativeAgentProvider, NativeSurface, OnboardingWizard, OptionCards, OrderedListArtifact, OverlayModal, PerformanceMetrics, PersonaSelector, PieChartArtifact, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, RowBasedDataList, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StackedSparklines, StatCardHalfCircle, StatusBadge, SystemMessage, TableListArtifact, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tracker, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, extractLinkPreview, fetchOpenGraphPreview, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useAgentWorkspace, useAgentWorkspaceOptional, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map