@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/geo-map.js

@@ -0,0 +1,190 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, mono, paper } from "./surfaces.js";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/geo-map.tsx
+var geo_map_exports = /* @__PURE__ */ __exportAll({ GeoMap: () => GeoMap });
+const DEFAULT_ATTRIBUTION = "© OpenStreetMap contributors";
+function isCoordinate(lat, lng) {
+	return Number.isFinite(lat) && Number.isFinite(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
+}
+function markerIcon(leaflet, selected) {
+	const size = selected ? 16 : 10;
+	return leaflet.divIcon({
+		className: "geo-map-marker",
+		html: selected ? "<span class=\"block size-4 rounded-full bg-blue-500 ring-2 ring-background\"></span>" : "<span class=\"block size-2.5 rounded-full bg-foreground/55 ring-2 ring-background\"></span>",
+		iconSize: [size, size],
+		iconAnchor: [size / 2, size / 2]
+	});
+}
+function useDarkTheme(theme) {
+	const subscribe = useCallback((notify) => {
+		if (theme !== "auto" || typeof window === "undefined") return () => {};
+		const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+		const observer = typeof MutationObserver === "function" ? new MutationObserver(notify) : null;
+		observer?.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		media?.addEventListener("change", notify);
+		return () => {
+			observer?.disconnect();
+			media?.removeEventListener("change", notify);
+		};
+	}, [theme]);
+	const getSnapshot = useCallback(() => {
+		if (theme === "dark") return true;
+		if (theme === "light" || typeof document === "undefined") return false;
+		return document.documentElement.classList.contains("dark") || typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+	}, [theme]);
+	return useSyncExternalStore(subscribe, getSnapshot, () => theme === "dark");
+}
+function GeoMap({ places, routes, selectedId, onSelect, theme = "auto", tileUrl, attribution, height = 260, className, ...props }) {
+	const containerRef = useRef(null);
+	const mapRef = useRef(null);
+	const leafletRef = useRef(null);
+	const markersRef = useRef(/* @__PURE__ */ new Map());
+	const [mapReady, setMapReady] = useState(false);
+	const mapContent = useMemo(() => {
+		const validPlaces = places.filter((place) => isCoordinate(place.lat, place.lng));
+		const routePoints = [];
+		const validRoutes = routes?.map((route) => {
+			const points = route.points.filter(([lat, lng]) => isCoordinate(lat, lng)).map(([lat, lng]) => [lat, lng]);
+			routePoints.push(...points);
+			return {
+				...route,
+				points
+			};
+		}).filter((route) => route.points.length > 1) ?? [];
+		return {
+			signature: JSON.stringify([places.map((place) => [
+				place.id,
+				place.lat,
+				place.lng,
+				place.label,
+				place.description
+			]), routes?.map((route) => [route.id, route.points]) ?? []]),
+			validPlaces,
+			routePoints,
+			validRoutes
+		};
+	}, [places, routes]);
+	const { signature: contentSignature, validPlaces } = mapContent;
+	const mapContentRef = useRef(mapContent);
+	mapContentRef.current = mapContent;
+	const resolvedAttribution = attribution ?? DEFAULT_ATTRIBUTION;
+	const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState(() => validPlaces[0]?.id);
+	const activeId = selectedId ?? (validPlaces.some((place) => place.id === uncontrolledSelectedId) ? uncontrolledSelectedId : validPlaces[0]?.id);
+	const activeIdRef = useRef(activeId);
+	activeIdRef.current = activeId;
+	const dark = useDarkTheme(theme);
+	const selectPlace = useCallback((place) => {
+		if (selectedId === void 0) setUncontrolledSelectedId(place.id);
+		onSelect?.(place.id);
+		mapRef.current?.panTo([place.lat, place.lng]);
+	}, [onSelect, selectedId]);
+	const selectPlaceRef = useRef(selectPlace);
+	selectPlaceRef.current = selectPlace;
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return void 0;
+		let cancelled = false;
+		let map = null;
+		setMapReady(false);
+		(async () => {
+			const leaflet = await import("leaflet");
+			if (cancelled) return;
+			leafletRef.current = leaflet;
+			map = leaflet.map(container, { keyboard: true });
+			mapRef.current = map;
+			if (tileUrl !== void 0) leaflet.tileLayer(tileUrl, { attribution: resolvedAttribution }).addTo(map);
+			setMapReady(true);
+		})();
+		return () => {
+			cancelled = true;
+			if (mapRef.current === map) mapRef.current = null;
+			map?.remove();
+		};
+	}, [resolvedAttribution, tileUrl]);
+	useEffect(() => {
+		const leaflet = leafletRef.current;
+		const map = mapRef.current;
+		if (!leaflet || !map || !mapReady) return;
+		const { routePoints, validPlaces, validRoutes } = mapContentRef.current;
+		const layer = leaflet.layerGroup().addTo(map);
+		const points = [...validPlaces.map((place) => [place.lat, place.lng]), ...routePoints];
+		const [first] = points;
+		if (points.length === 1 && first) map.setView(first, 13);
+		else if (points.length > 1) map.fitBounds(leaflet.latLngBounds(points), { padding: [24, 24] });
+		else map.setView([0, 0], 2);
+		for (const route of validRoutes) leaflet.polyline(route.points, {
+			className: "stroke-foreground/70",
+			weight: 2
+		}).addTo(layer);
+		for (const place of validPlaces) {
+			const marker = leaflet.marker([place.lat, place.lng], {
+				icon: markerIcon(leaflet, place.id === activeIdRef.current),
+				title: place.label
+			}).addTo(layer).on("click", () => selectPlaceRef.current(place));
+			markersRef.current.set(place.id, marker);
+		}
+		return () => {
+			markersRef.current.clear();
+			layer.remove();
+		};
+	}, [contentSignature, mapReady]);
+	useEffect(() => {
+		const leaflet = leafletRef.current;
+		if (!leaflet) return;
+		for (const place of mapContentRef.current.validPlaces) markersRef.current.get(place.id)?.setIcon(markerIcon(leaflet, place.id === activeId));
+	}, [activeId, contentSignature]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "geo-map",
+		className: cn(paper, "flex w-full max-w-sm flex-col overflow-hidden rounded-2xl p-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			role: "region",
+			"aria-label": `Map of ${validPlaces.length} places`,
+			style: { height },
+			"data-theme": dark ? "dark" : "light",
+			className: cn(field, "relative overflow-hidden rounded-xl", "[&_.leaflet-bar]:border-foreground/10! [&_.leaflet-bar_a]:border-foreground/10! [&_.leaflet-bar_a]:bg-background! [&_.leaflet-bar_a]:text-foreground/80! [&_.leaflet-bar_a:hover]:bg-foreground/[0.06]! [&_.leaflet-bar]:shadow-none!", "[&_.leaflet-control-attribution]:bg-background/80! [&_.leaflet-control-attribution]:text-muted-foreground! [&_.leaflet-control-attribution_a]:text-muted-foreground!", tileUrl === void 0 && "bg-foreground/[0.04]! dark:bg-foreground/[0.06]!"),
+			children: !mapReady ? /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground absolute inset-0 flex items-center justify-center text-xs",
+				children: "Loading map"
+			}) : null
+		}), /* @__PURE__ */ jsx("ol", {
+			className: "mt-2 flex flex-col gap-0.5",
+			children: validPlaces.map((place) => {
+				const selected = place.id === activeId;
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-current": selected || void 0,
+					onClick: () => selectPlace(place),
+					className: cn("group hover:bg-foreground/[0.035] focus-visible:ring-foreground/20 flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-start transition-colors outline-none focus-visible:ring-1", selected && "bg-foreground/[0.06]"),
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-foreground/90 block text-[13.5px] leading-5 break-words",
+							children: place.label
+						}), place.description ? /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground group-aria-[current=true]:text-muted-foreground block text-xs leading-4 break-words",
+							children: place.description
+						}) : null]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "text-muted-foreground group-aria-[current=true]:text-muted-foreground shrink-0 pt-0.5 tabular-nums"),
+						children: [
+							place.lat.toFixed(4),
+							", ",
+							place.lng.toFixed(4)
+						]
+					})]
+				}) }, place.id);
+			})
+		})]
+	});
+}
+//#endregion
+export { GeoMap, geo_map_exports };

package/dist/components/assistant-ui/elements/guardrail-notice.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, ReactNode } from "react";
+declare namespace guardrail_notice_d_exports {
+  export { GuardrailNotice };
+}
+export declare function GuardrailNotice({ title, explanation, policy, alternatives, onPick, children, className, ...props }: Omit<ComponentProps<"div">, "children" | "title" | "explanation" | "policy" | "alternatives" | "onPick"> & {
+  title: string;
+  explanation: string;
+  policy: string;
+  alternatives: readonly string[];
+  onPick?: (alternative: string) => void;
+  /** Detail rendered under the explanation, such as an expandable list. */
+  children?: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export { guardrail_notice_d_exports };

package/dist/components/assistant-ui/elements/guardrail-notice.js

@@ -0,0 +1,59 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, ShieldIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/guardrail-notice.tsx
+var guardrail_notice_exports = /* @__PURE__ */ __exportAll({ GuardrailNotice: () => GuardrailNotice });
+function GuardrailNotice({ title, explanation, policy, alternatives, onPick, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "guardrail-notice",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-[20px] p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-warning/12 text-warning dark:text-warning",
+						children: /* @__PURE__ */ jsx(ShieldIcon, { className: "size-3.5" })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-[13.5px] font-medium",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-muted-foreground max-w-1/2 min-w-0 truncate"),
+						children: policy
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs leading-relaxed",
+				children: explanation
+			}),
+			children,
+			alternatives.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground"),
+					children: "try instead"
+				}), alternatives.map((alternative) => onPick ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => onPick(alternative),
+					className: "hover:bg-accent focus-visible:bg-accent text-foreground/80 hover:text-foreground focus-visible:text-foreground focus-visible:ring-ring/40 flex items-center gap-1.5 rounded-lg px-1.5 py-1 text-start text-[13px] transition-colors outline-none focus-visible:ring-1 focus-visible:ring-inset",
+					children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
+						"aria-hidden": true,
+						className: "text-muted-foreground size-3 shrink-0"
+					}), alternative]
+				}, alternative) : /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground block rounded-lg px-1.5 py-1 text-start text-[13px]",
+					children: alternative
+				}, alternative))]
+			})
+		]
+	});
+}
+//#endregion
+export { GuardrailNotice, guardrail_notice_exports };

package/dist/components/assistant-ui/elements/heat-graph.d.ts

@@ -0,0 +1,9 @@
+import * as HeatGraphPrimitive from "heat-graph";
+declare namespace heat_graph_d_exports {
+  export { HeatGraph };
+}
+export declare function HeatGraph({ data }: {
+  data: HeatGraphPrimitive.DataPoint[];
+}): import("react").JSX.Element;
+//#endregion
+export { heat_graph_d_exports };

package/dist/components/assistant-ui/elements/heat-graph.js

@@ -0,0 +1,90 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as HeatGraphPrimitive from "heat-graph";
+//#region src/components/assistant-ui/elements/heat-graph.tsx
+var heat_graph_exports = /* @__PURE__ */ __exportAll({ HeatGraph: () => HeatGraph });
+const EMPTY = "var(--aui-heat-empty)";
+const COLORS = [
+	EMPTY,
+	`color-mix(in oklab, #2563eb 25%, ${EMPTY})`,
+	`color-mix(in oklab, #2563eb 50%, ${EMPTY})`,
+	`color-mix(in oklab, #2563eb 75%, ${EMPTY})`,
+	"#2563eb"
+];
+function HeatGraph({ data }) {
+	return /* @__PURE__ */ jsxs(HeatGraphPrimitive.Root, {
+		data,
+		weekStart: "monday",
+		colorScale: COLORS,
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx(MonthLabels, {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(DayLabels, {}), /* @__PURE__ */ jsx(CellGrid, {})]
+			}),
+			/* @__PURE__ */ jsx(GraphLegend, {}),
+			/* @__PURE__ */ jsx(CellTooltip, {})
+		]
+	});
+}
+/**
+* A label this many columns or fewer after the first one crowds it: the first
+* column started late in its month, so the next month's label lands right
+* beside it ("SepOct").
+*/
+const CROWDED_COLUMNS = 2;
+function MonthLabels() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative ms-10 h-5",
+		children: /* @__PURE__ */ jsx(HeatGraphPrimitive.MonthLabels, { children: ({ label, totalWeeks }) => /* @__PURE__ */ jsx("span", {
+			"data-crowds-first": label.column > 0 && label.column <= CROWDED_COLUMNS ? "" : void 0,
+			className: "absolute text-xs text-muted-foreground [&:has(+[data-crowds-first])]:hidden",
+			style: { left: `${label.column / totalWeeks * 100}%` },
+			children: HeatGraphPrimitive.MONTH_SHORT[label.month]
+		}) })
+	});
+}
+function DayLabels() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-8 shrink-0 flex-col justify-between py-[2px]",
+		children: /* @__PURE__ */ jsx(HeatGraphPrimitive.DayLabels, { children: ({ label }) => /* @__PURE__ */ jsx("span", {
+			className: "flex h-[13px] items-center text-xs text-muted-foreground",
+			children: label.row % 2 === 0 ? HeatGraphPrimitive.DAY_SHORT[label.dayOfWeek] : ""
+		}) })
+	});
+}
+function CellGrid() {
+	return /* @__PURE__ */ jsx(HeatGraphPrimitive.Grid, {
+		className: "flex-1 gap-[3px]",
+		children: () => /* @__PURE__ */ jsx(HeatGraphPrimitive.Cell, { className: "aspect-square w-full rounded-sm" })
+	});
+}
+function CellTooltip() {
+	return /* @__PURE__ */ jsx(HeatGraphPrimitive.Tooltip, {
+		className: "pointer-events-none rounded-md bg-gray-900 px-3 py-1.5 text-xs whitespace-nowrap text-white",
+		children: ({ cell }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("strong", { children: [cell.count, " contributions"] }),
+			" on",
+			" ",
+			cell.date.toLocaleDateString("en-US", {
+				month: "short",
+				day: "numeric",
+				year: "numeric"
+			})
+		] })
+	});
+}
+function GraphLegend() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ms-auto flex items-center gap-1 text-xs text-muted-foreground",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "Less" }),
+			/* @__PURE__ */ jsx(HeatGraphPrimitive.Legend, { children: () => /* @__PURE__ */ jsx(HeatGraphPrimitive.LegendLevel, { className: "h-[13px] w-[13px] rounded-sm" }) }),
+			/* @__PURE__ */ jsx("span", { children: "More" })
+		]
+	});
+}
+//#endregion
+export { HeatGraph, heat_graph_exports };

package/dist/components/assistant-ui/elements/image-gallery.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from "react";
+declare namespace image_gallery_d_exports {
+  export { GalleryImage, ImageGallery, ImageGalleryProps };
+}
+export interface GalleryImage {
+  id: string;
+  src: string;
+  alt: string;
+  caption?: string | undefined;
+  source?: {
+    label?: string | undefined;
+    url?: string | undefined;
+  } | undefined;
+}
+export interface ImageGalleryProps extends Omit<ComponentProps<"div">, "children"> {
+  images: readonly GalleryImage[];
+  maxVisible?: number | undefined;
+  onOpen?: ((id: string) => void) | undefined;
+}
+export declare function ImageGallery({ images, maxVisible, onOpen, className, ...props }: ImageGalleryProps): import("react").JSX.Element | null;
+//#endregion
+export { image_gallery_d_exports };

package/dist/components/assistant-ui/elements/image-gallery.js

@@ -0,0 +1,192 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Dialog, DialogContent, DialogTitle } from "../../ui/dialog.js";
+import { cn } from "../../../lib/utils.js";
+import { field, ghostButton, mono } from "./surfaces.js";
+import { clamp } from "../utils/range.js";
+import { safeHref } from "../utils/href.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, ExternalLinkIcon, ImageOffIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/image-gallery.tsx
+var image_gallery_exports = /* @__PURE__ */ __exportAll({ ImageGallery: () => ImageGallery });
+const keyForImage = (image) => `${image.id}\u0000${image.src}`;
+function ImageGallery({ images, maxVisible = 6, onOpen, className, ...props }) {
+	const [activeId, setActiveId] = useState(null);
+	const [failedImages, setFailedImages] = useState(() => /* @__PURE__ */ new Set());
+	const triggerRef = useRef(null);
+	const index = images.findIndex((image) => image.id === activeId);
+	if (activeId !== null && index === -1) setActiveId(null);
+	const activeImage = index === -1 ? void 0 : images[index];
+	const sourceHref = safeHref(activeImage?.source?.url);
+	const visibleCount = Math.floor(clamp(maxVisible, 1, images.length));
+	const visibleImages = images.slice(0, visibleCount);
+	const close = useCallback(() => {
+		setActiveId(null);
+		triggerRef.current?.focus();
+	}, []);
+	useEffect(() => {
+		if (activeImage === void 0) return;
+		const onKeyDown = (event) => {
+			if (event.key === "ArrowLeft" && index > 0) {
+				event.preventDefault();
+				setActiveId(images[index - 1]?.id ?? null);
+			} else if (event.key === "ArrowRight" && index < images.length - 1) {
+				event.preventDefault();
+				setActiveId(images[index + 1]?.id ?? null);
+			}
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		return () => document.removeEventListener("keydown", onKeyDown, true);
+	}, [
+		activeImage,
+		images,
+		index
+	]);
+	const open = (nextIndex, trigger) => {
+		const image = images[nextIndex];
+		if (!image) return;
+		triggerRef.current = trigger;
+		setActiveId(image.id);
+		onOpen?.(image.id);
+	};
+	const markFailed = (image) => {
+		const key = keyForImage(image);
+		setFailedImages((current) => current.has(key) ? current : new Set(current).add(key));
+	};
+	if (images.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "image-gallery",
+		className: cn("@container w-full max-w-md", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-2 gap-2 @sm:grid-cols-3",
+			children: visibleImages.map((image, imageIndex) => {
+				const failed = failedImages.has(keyForImage(image));
+				const overflow = imageIndex === visibleCount - 1 && images.length > visibleCount;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": `Open image: ${image.alt}`,
+					onClick: (event) => open(imageIndex, event.currentTarget),
+					className: cn(field, "focus-visible:ring-ring/50 relative aspect-square overflow-hidden rounded-xl ring-offset-background transition-[transform,background-color] duration-150 outline-none hover:scale-[1.01] focus-visible:ring-[3px] focus-visible:ring-offset-2 active:scale-[0.98] motion-reduce:transition-none"),
+					children: [failed ? /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground flex size-full items-center justify-center",
+						children: /* @__PURE__ */ jsx(ImageOffIcon, {
+							"aria-hidden": true,
+							className: "size-6"
+						})
+					}) : /* @__PURE__ */ jsx("img", {
+						src: image.src,
+						alt: image.alt,
+						loading: "lazy",
+						className: "size-full object-cover",
+						onError: () => markFailed(image)
+					}), overflow ? /* @__PURE__ */ jsxs("span", {
+						className: "absolute inset-0 bg-black/60 text-white flex items-center justify-center text-lg font-medium",
+						children: ["+", images.length - visibleCount]
+					}) : null]
+				}, image.id);
+			})
+		}), activeImage ? /* @__PURE__ */ jsx(Dialog, {
+			open: true,
+			onOpenChange: (nextOpen) => {
+				if (!nextOpen) close();
+			},
+			children: /* @__PURE__ */ jsxs(DialogContent, {
+				className: "gap-3 p-3 duration-150 motion-reduce:animate-none sm:max-w-4xl",
+				children: [
+					/* @__PURE__ */ jsxs(DialogTitle, {
+						className: "sr-only",
+						children: [
+							"Image ",
+							index + 1,
+							" of ",
+							images.length
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex min-h-0 items-center justify-center px-10",
+						children: failedImages.has(keyForImage(activeImage)) ? /* @__PURE__ */ jsx("div", {
+							className: "text-muted-foreground flex h-[min(75vh,32rem)] w-full items-center justify-center",
+							children: /* @__PURE__ */ jsx(ImageOffIcon, {
+								"aria-hidden": true,
+								className: "size-8"
+							})
+						}) : /* @__PURE__ */ jsx("img", {
+							src: activeImage.src,
+							alt: activeImage.alt,
+							className: "max-h-[75vh] max-w-full object-contain",
+							onError: () => markFailed(activeImage)
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": "Previous image",
+								disabled: index === 0,
+								onClick: () => setActiveId(images[index - 1]?.id ?? null),
+								className: cn(ghostButton, "size-8 shrink-0 disabled:pointer-events-none disabled:opacity-30"),
+								children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
+									"aria-hidden": true,
+									className: "size-4"
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-1 items-center gap-2 text-sm",
+								children: [activeImage.caption ? /* @__PURE__ */ jsx("p", {
+									className: "text-foreground/75 truncate",
+									children: activeImage.caption
+								}) : null, activeImage.source?.label ? sourceHref ? /* @__PURE__ */ jsxs("a", {
+									href: sourceHref,
+									target: "_blank",
+									rel: "noopener noreferrer",
+									className: "text-muted-foreground hover:text-foreground/80 flex min-w-0 items-center gap-1 truncate transition-colors",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "truncate",
+											children: activeImage.source.label
+										}),
+										/* @__PURE__ */ jsx(ExternalLinkIcon, {
+											"aria-hidden": true,
+											className: "size-3 shrink-0"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "sr-only",
+											children: "(opens in a new tab)"
+										})
+									]
+								}) : /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground truncate",
+									children: activeImage.source.label
+								}) : null]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: cn(mono, "text-muted-foreground shrink-0"),
+								children: [
+									index + 1,
+									" / ",
+									images.length
+								]
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": "Next image",
+								disabled: index === images.length - 1,
+								onClick: () => setActiveId(images[index + 1]?.id ?? null),
+								className: cn(ghostButton, "size-8 shrink-0 disabled:pointer-events-none disabled:opacity-30"),
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+									"aria-hidden": true,
+									className: "size-4"
+								})
+							})
+						]
+					})
+				]
+			})
+		}) : null]
+	});
+}
+//#endregion
+export { ImageGallery, image_gallery_exports };

package/dist/components/assistant-ui/elements/image-generation.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+declare namespace image_generation_d_exports {
+  export { ImageGeneration };
+}
+export declare function ImageGeneration({ prompt, generating, onRegenerate, className, ...props }: Omit<ComponentProps<"div">, "children" | "prompt" | "generating" | "onRegenerate"> & {
+  prompt: string;
+  generating: boolean;
+  onRegenerate?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { image_generation_d_exports };

package/dist/components/assistant-ui/elements/image-generation.js

@@ -0,0 +1,64 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { ShimmerLabel, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RefreshCwIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/image-generation.tsx
+var image_generation_exports = /* @__PURE__ */ __exportAll({ ImageGeneration: () => ImageGeneration });
+const DOTS = Array.from({ length: 64 }, (_, i) => i);
+function ImageGeneration({ prompt, generating, onRegenerate, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "image-generation",
+		className: cn("flex w-52 flex-col gap-2.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn(paper, "relative aspect-square w-full overflow-hidden rounded-2xl"),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 grid grid-cols-8 place-items-center p-6",
+					"aria-hidden": true,
+					children: DOTS.map((dot) => {
+						const row = Math.floor(dot / 8);
+						const col = dot % 8;
+						return /* @__PURE__ */ jsx("span", {
+							className: cn("bg-foreground/20 size-1 rounded-full transition-opacity duration-500", generating ? "animate-pulse motion-reduce:animate-none" : "opacity-0"),
+							style: { animationDelay: `${(row + col) * 90}ms` }
+						}, dot);
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					className: cn("absolute inset-0 transition-[opacity,filter] duration-1000 ease-out motion-reduce:transition-none", generating ? "opacity-0 blur-xl" : "blur-0 opacity-100"),
+					style: { background: "radial-gradient(120% 90% at 20% 100%, oklch(0.45 0.09 265) 0%, transparent 55%), radial-gradient(110% 80% at 85% 90%, oklch(0.62 0.1 300 / 0.8) 0%, transparent 60%), radial-gradient(130% 100% at 60% 0%, oklch(0.88 0.06 60) 0%, oklch(0.74 0.09 25 / 0.9) 45%, transparent 75%), linear-gradient(to top, oklch(0.35 0.06 275), oklch(0.82 0.07 50))" }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "absolute end-2.5 top-2.5 rounded-full px-1.5 py-0.5 tabular-nums", generating ? "text-muted-foreground" : "bg-black/60 text-white"),
+					children: "1024 × 1024"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground min-w-0 flex-1 text-xs leading-snug",
+				children: generating ? /* @__PURE__ */ jsx(ShimmerLabel, {
+					className: "relative",
+					children: "Generating"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "line-clamp-2",
+					children: prompt
+				})
+			}), onRegenerate && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Regenerate image",
+				"aria-hidden": generating || void 0,
+				disabled: generating,
+				onClick: onRegenerate,
+				className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "size-6 shrink-0", generating && "pointer-events-none opacity-0"),
+				children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3" })
+			})]
+		})]
+	});
+}
+//#endregion
+export { ImageGeneration, image_generation_exports };