+ {isOpen &&
}
+
+
img]:block [&>img]:max-h-[80vh] [&>img]:max-w-full",
+ "[&>img]:h-auto [&>img]:w-auto [&>img]:object-contain [&>img]:select-none",
+ )}
+ />
+ {currentImage && }
+
+
+
+ );
+}
+
+function CloseButton({ onClose }: { onClose: () => void }) {
+ return (
+
+
+
+ );
+}
+
+function Metadata({ image }: { image: LightboxImage }) {
+ const { title, caption, source } = image;
+ const hasTitle = Boolean(title);
+ const hasCaption = Boolean(caption);
+ const hasSource = Boolean(source?.label);
+
+ if (!hasTitle && !hasCaption && !hasSource) {
+ return null;
+ }
+
+ return (
+
+ {hasTitle && (
+
+ {title}
+
+ )}
+ {(hasCaption || hasSource) && (
+
+ {caption}
+ {hasCaption && hasSource && " · "}
+ {hasSource && }
+
+ )}
+
+ );
+}
+
+function SourceLink({
+ source,
+}: {
+ source: NonNullable
;
+}) {
+ const href = resolveSafeNavigationHref(source.url);
+ if (!href) {
+ return <>{source.label};
+ }
+
+ return (
+
+ {source.label}
+
+ );
+}
diff --git a/frontend/src/toolui/components/image-gallery/image-gallery.tsx b/frontend/src/toolui/components/image-gallery/image-gallery.tsx
new file mode 100644
index 00000000..a1b9b4d4
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/image-gallery.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import "./styles.css";
+import { cn } from "./_adapter";
+import { ImageGalleryProvider } from "./context";
+import { GalleryGrid } from "./gallery-grid";
+import { GalleryLightbox } from "./gallery-lightbox";
+import type { ImageGalleryProps } from "./schema";
+
+export function ImageGallery({
+ id,
+ images,
+ title,
+ description,
+ className,
+ onImageClick,
+}: ImageGalleryProps) {
+ const handleImageClick = (imageId: string) => {
+ if (!onImageClick) return;
+
+ const image = images.find((img) => img.id === imageId);
+ if (image) {
+ onImageClick(imageId, image);
+ }
+ };
+
+ return (
+
+
+
+ );
+}
+
+interface HeaderProps {
+ title?: string;
+ description?: string;
+}
+
+function Header({ title, description }: HeaderProps) {
+ if (!title && !description) {
+ return null;
+ }
+
+ return (
+
+ {title && (
+
+ {title}
+
+ )}
+ {description && (
+
+ {description}
+
+ )}
+
+ <>
+
{
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ handleImageClick();
+ }
+ }
+ : undefined
+ }
+ >
+
+
+ {hasMetadata && (
+
+
+
+ )}
+
+
+ {source?.iconUrl ? (
+
+ ) : fallbackInitial ? (
+
+ {fallbackInitial}
+
+ ) : null}
+
+ {title && (
+
+ {title}
+
+ )}
+ {sourceLabel && (
+
+ {sourceLabel}
+
+ )}
+
+
{content}
;
+}
diff --git a/frontend/src/toolui/components/image/index.ts b/frontend/src/toolui/components/image/index.ts
new file mode 100644
index 00000000..ef85f279
--- /dev/null
+++ b/frontend/src/toolui/components/image/index.ts
@@ -0,0 +1,3 @@
+export { Image } from "./image";
+export type { ImageProps } from "./image";
+export type { SerializableImage, Source } from "./schema";
diff --git a/frontend/src/toolui/components/image/schema.ts b/frontend/src/toolui/components/image/schema.ts
new file mode 100644
index 00000000..de490a99
--- /dev/null
+++ b/frontend/src/toolui/components/image/schema.ts
@@ -0,0 +1,50 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+ ToolUIIdSchema,
+ ToolUIReceiptSchema,
+ ToolUIRoleSchema,
+} from "../shared/schema";
+
+import { AspectRatioSchema, MediaFitSchema } from "../shared/media";
+
+export const SourceSchema = z.object({
+ label: z.string(),
+ iconUrl: z.url().optional(),
+ url: z.url().optional(),
+});
+
+export type Source = z.infer;
+
+export const SerializableImageSchema = z.object({
+ id: ToolUIIdSchema,
+ role: ToolUIRoleSchema.optional(),
+ receipt: ToolUIReceiptSchema.optional(),
+ assetId: z.string(),
+ src: z.url(),
+ alt: z.string().min(1, "Images require alt text for accessibility"),
+ title: z.string().optional(),
+ description: z.string().optional(),
+ href: z.url().optional(),
+ domain: z.string().optional(),
+ ratio: AspectRatioSchema.optional(),
+ fit: MediaFitSchema.optional(),
+ fileSizeBytes: z.number().int().positive().optional(),
+ createdAt: z.string().datetime().optional(),
+ locale: z.string().optional(),
+ source: SourceSchema.optional(),
+});
+
+export type SerializableImage = z.infer;
+
+const SerializableImageSchemaContract = defineToolUiContract(
+ "Image",
+ SerializableImageSchema,
+);
+
+export const parseSerializableImage: (input: unknown) => SerializableImage =
+ SerializableImageSchemaContract.parse;
+
+export const safeParseSerializableImage: (
+ input: unknown,
+) => SerializableImage | null = SerializableImageSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/instagram-post/README.md b/frontend/src/toolui/components/instagram-post/README.md
new file mode 100644
index 00000000..07f8b442
--- /dev/null
+++ b/frontend/src/toolui/components/instagram-post/README.md
@@ -0,0 +1,19 @@
+# Instagram Post
+
+Implementation for the "instagram-post" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/instagram-post/index.ts
+- serializable schema + parse helpers: components/tool-ui/instagram-post/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/social-post/content.mdx
+- Preset payload: lib/presets/instagram-post.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/instagram-post/_adapter.tsx b/frontend/src/toolui/components/instagram-post/_adapter.tsx
new file mode 100644
index 00000000..c314b96c
--- /dev/null
+++ b/frontend/src/toolui/components/instagram-post/_adapter.tsx
@@ -0,0 +1,19 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ * cn → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ * Button → shadcn/ui Button
+ * Tooltip → shadcn/ui Tooltip
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@toolui/ui/tooltip";
diff --git a/frontend/src/toolui/components/instagram-post/index.ts b/frontend/src/toolui/components/instagram-post/index.ts
new file mode 100644
index 00000000..6ee1dace
--- /dev/null
+++ b/frontend/src/toolui/components/instagram-post/index.ts
@@ -0,0 +1,8 @@
+export { InstagramPost } from "./instagram-post";
+export type { InstagramPostProps } from "./instagram-post";
+export type {
+ InstagramPostData,
+ InstagramPostAuthor,
+ InstagramPostMedia,
+ InstagramPostStats,
+} from "./schema";
diff --git a/frontend/src/toolui/components/instagram-post/instagram-post.tsx b/frontend/src/toolui/components/instagram-post/instagram-post.tsx
new file mode 100644
index 00000000..5f543ead
--- /dev/null
+++ b/frontend/src/toolui/components/instagram-post/instagram-post.tsx
@@ -0,0 +1,305 @@
+"use client";
+
+import * as React from "react";
+import { BadgeCheck, Heart, Share } from "lucide-react";
+import {
+ cn,
+ Button,
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "./_adapter";
+import { formatRelativeTime } from "../shared/utils";
+
+import type { InstagramPostData, InstagramPostMedia } from "./schema";
+
+export interface InstagramPostProps {
+ post: InstagramPostData;
+ className?: string;
+ onAction?: (action: string, post: InstagramPostData) => void;
+}
+
+function InstagramLogo({ className }: { className?: string }) {
+ const id = React.useId();
+ const gradientPrimaryId = `ig-primary-${id}`;
+ const gradientSecondaryId = `ig-secondary-${id}`;
+
+ return (
+
+ );
+}
+
+function Header({
+ author,
+ createdAt,
+}: {
+ author: InstagramPostData["author"];
+ createdAt?: string;
+}) {
+ return (
+
+ );
+}
+
+function MediaGrid({
+ media,
+ onOpen,
+}: {
+ media: InstagramPostMedia[];
+ onOpen?: (index: number) => void;
+}) {
+ if (media.length === 0) return null;
+
+ const renderItem = (item: InstagramPostMedia, index: number) => (
+
+ );
+
+ if (media.length === 1) {
+ return (
+
+ {renderItem(media[0], 0)}
+
+ );
+ }
+
+ if (media.length === 2) {
+ return (
+
+ {media.map(renderItem)}
+
+ );
+ }
+
+ if (media.length === 3) {
+ return (
+
+
{renderItem(media[0], 0)}
+
+ {media.slice(1).map((item, i) => (
+
+ {renderItem(item, i + 1)}
+
+ ))}
+
+
+ {media.slice(0, 4).map((item, index) => (
+
+ {renderItem(item, index)}
+ {index === 3 && media.length > 4 && (
+
+
+ +{media.length - 4}
+
+
+ )}
+
+ ))}
+
+
onAction("like")}
+ />
+ onAction("share")}
+ />
+
+
+
+
+ {post.media && post.media.length > 0 && (
+
+ )}
+
+
+
onAction?.(action, post)}
+ />
+ {post.text && (
+
+
+ {post.author.handle}
+ {" "}
+
+
+
+ {image ? (
+
+ ) : (
+
+ )}
+
+
+
+ {name}
+
+
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+
+ {actions && actions.length > 0 && (
+
+ {actions.map((action) => (
+
+ ))}
+
+ )}
+
+ {title && (
+
+ {title}
+
+ )}
+ {description && (
+
+ {description}
+
+ )}
+
No items to display
+
+ );
+}
+
+function ItemCarouselRoot({
+ id,
+ title,
+ description,
+ items,
+ className,
+ onItemClick,
+ onItemAction,
+}: ItemCarouselProps) {
+ const scrollRef = useRef(null);
+ const targetIndexRef = useRef(null);
+
+ const { scrollTo, isAnimating } = useSmoothScroll();
+ const { canScrollLeft, canScrollRight } = useScrollEdgeState(
+ scrollRef,
+ items.length,
+ );
+
+ const scroll = useCallback(
+ (direction: ScrollDirection) => {
+ const container = scrollRef.current;
+ if (!container) return;
+
+ const paddingValue = window.getComputedStyle(container).scrollPaddingLeft;
+ const scrollPaddingLeft = Number.isFinite(Number.parseFloat(paddingValue))
+ ? Number.parseFloat(paddingValue)
+ : 0;
+
+ const itemElements = Array.from(
+ container.querySelectorAll("[data-carousel-item]"),
+ );
+ if (itemElements.length === 0) return;
+
+ const snapPositions = itemElements.map((el) =>
+ Math.max(0, el.offsetLeft - scrollPaddingLeft),
+ );
+
+ const scrollLeft = Math.round(container.scrollLeft);
+ let currentIndex: number;
+ if (isAnimating()) {
+ currentIndex = Math.min(
+ targetIndexRef.current ?? 0,
+ snapPositions.length - 1,
+ );
+ } else {
+ currentIndex = snapPositions.length - 1;
+ for (let i = 0; i < snapPositions.length; i++) {
+ const snap = snapPositions[i];
+ if (Math.abs(snap - scrollLeft) < SNAP_EPSILON_PX) {
+ currentIndex = i;
+ break;
+ }
+ if (snap > scrollLeft) {
+ currentIndex = Math.max(0, i - 1);
+ break;
+ }
+ }
+ }
+
+ const itemStep =
+ itemElements.length > 1
+ ? itemElements[1].offsetLeft - itemElements[0].offsetLeft
+ : 0;
+ const safeStep =
+ itemStep > 0 ? itemStep : itemElements[0].offsetWidth || 1;
+
+ const pageIndexStep =
+ container.clientWidth >= PAGE_SCROLL_BREAKPOINT_PX
+ ? Math.max(
+ 1,
+ Math.floor(
+ (container.clientWidth * PAGE_SCROLL_RATIO) / safeStep,
+ ),
+ )
+ : 1;
+
+ const targetIndex =
+ direction === "right"
+ ? Math.min(currentIndex + pageIndexStep, itemElements.length - 1)
+ : Math.max(currentIndex - pageIndexStep, 0);
+
+ targetIndexRef.current = targetIndex;
+ const targetScrollLeft = snapPositions[targetIndex];
+
+ if (Math.abs(targetScrollLeft - container.scrollLeft) > 1) {
+ scrollTo(
+ container,
+ targetScrollLeft,
+ SCROLL_ANIMATION_DURATION_MS,
+ () => {
+ targetIndexRef.current = null;
+ },
+ );
+ }
+ },
+ [scrollTo, isAnimating],
+ );
+
+ const handleScrollLeft = useCallback(() => scroll("left"), [scroll]);
+ const handleScrollRight = useCallback(() => scroll("right"), [scroll]);
+
+ if (items.length === 0) {
+ return ;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {items.map((item) => (
+
+
+
+ ))}
+
+
+
{
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ handleClick();
+ }
+ }
+ : undefined
+ }
+ >
+
+ {image && (
+
+
+
+ )}
+
+ {domain && (
+
+ {favicon ? (
+
+ ) : (
+
+
+
+ )}
+
{domain}
+
+ )}
+ {title && (
+
+ {title}
+
+ )}
+ {description && (
+
+ {description}
+
+ )}
+
+
+
+ {shouldTruncate && !isExpanded ? (
+ <>
+ {text.slice(0, TEXT_PREVIEW_LENGTH)}
+ ...
+
+
+ ) : (
+ text
+ )}
+
+ );
+}
+
+function PostMedia({ media }: { media: LinkedInPostMedia }) {
+ return (
+
+ {media.type === "image" ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ {preview.title && (
+
+ {preview.title}
+
+ )}
+ {domain && (
+
{domain}
+ )}
+
{content}
+ );
+ }
+
+ return (
+
+ {content}
+
+ );
+}
+
+function ActionButton({
+ icon: Icon,
+ label,
+ count,
+ active,
+ hoverColor,
+ activeColor,
+ onClick,
+}: {
+ icon: React.ComponentType<{ className?: string }>;
+ label: string;
+ count?: number;
+ active?: boolean;
+ hoverColor: string;
+ activeColor?: string;
+ onClick: () => void;
+}) {
+ return (
+
+
+
+
+ {label}
+
+ );
+}
+
+function PostActions({
+ stats,
+ onAction,
+}: {
+ stats?: LinkedInPostData["stats"];
+ onAction: (action: string) => void;
+}) {
+ return (
+
+
+
onAction("like")}
+ />
+ onAction("share")}
+ />
+
+
+
+
+
+ {post.media && }
+
+ {post.linkPreview && !post.media && (
+
+ )}
+
+ onAction?.(action, post)}
+ />
+
+
+ |
+ {label}
+ |
+
+ {visibleRecipients.join(", ")}
+ {overflowCount > 0 && (
+ +{overflowCount} more
+ )}
+ |
+
+ );
+}
+
+interface SingleFieldRowProps {
+ label: string;
+ value: string;
+}
+
+function SingleFieldRow({ label, value }: SingleFieldRowProps) {
+ return (
+
+ |
+ {label}
+ |
+ {value} |
+
+ );
+}
+
+interface ExpandableBodyProps {
+ body: string;
+ isExpanded: boolean;
+ onNeedsExpansionChange?: (needsExpansion: boolean) => void;
+}
+
+function ExpandableBody({
+ body,
+ isExpanded,
+ onNeedsExpansionChange,
+}: ExpandableBodyProps) {
+ const [needsExpansion, setNeedsExpansion] = React.useState(
+ null,
+ );
+ const contentRef = React.useRef(null);
+
+ React.useLayoutEffect(() => {
+ if (contentRef.current) {
+ const needs = contentRef.current.scrollHeight > COLLAPSED_BODY_HEIGHT;
+ setNeedsExpansion(needs);
+ onNeedsExpansionChange?.(needs);
+ }
+ }, [body, onNeedsExpansionChange]);
+
+ return (
+
+
+ {needsExpansion && (
+
+ )}
+
+ {draft.subject}
+
+
+
+
+ {draft.from && }
+
+ {draft.cc && draft.cc.length > 0 && (
+
+ )}
+ {draft.bcc && draft.bcc.length > 0 && (
+
+ )}
+
+
+
+
+
+
+
+ );
+}
+
+interface SlackDraftContentProps {
+ draft: SerializableSlackDraft;
+ titleId: string;
+ isExpanded: boolean;
+ onNeedsExpansionChange?: (needsExpansion: boolean) => void;
+}
+
+function SlackLogo({ className }: { className?: string }) {
+ return (
+
+ );
+}
+
+function SlackDraftContent({
+ draft,
+ titleId,
+ isExpanded,
+ onNeedsExpansionChange,
+}: SlackDraftContentProps) {
+ const { target } = draft;
+ const isChannel = target.type === "channel";
+ const targetDisplay = isChannel
+ ? `#${target.name}`
+ : `Message to @${target.name}`;
+ const memberCount = isChannel ? target.memberCount : undefined;
+
+ return (
+ <>
+
+
+ {targetDisplay}
+ {memberCount !== undefined && (
+
+ {memberCount.toLocaleString()} members
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+function formatSentTime(date: Date): string {
+ return date.toLocaleTimeString(undefined, {
+ hour: "numeric",
+ minute: "2-digit",
+ });
+}
+
+export function resolveStateFromOutcome(outcome: DraftOutcome): DraftState {
+ if (outcome === "sent") return "sent";
+ if (outcome === "cancelled") return "cancelled";
+ return "review";
+}
+
+export function resolveOutcomeTransition(
+ previousOutcome: DraftOutcome,
+ nextOutcome: DraftOutcome,
+): DraftState | null {
+ if (previousOutcome === nextOutcome) {
+ return null;
+ }
+
+ return resolveStateFromOutcome(nextOutcome);
+}
+
+interface SentConfirmationProps {
+ sentAt: Date;
+}
+
+function SentConfirmation({ sentAt }: SentConfirmationProps) {
+ return (
+
+
+ Sent at {formatSentTime(sentAt)}
+
+
+
+
+
+ );
+}
+
+export function MessageDraft(props: MessageDraftProps) {
+ const {
+ id,
+ className,
+ outcome,
+ undoGracePeriod = DEFAULT_GRACE_PERIOD,
+ onSend,
+ onUndo,
+ onCancel,
+ } = props;
+
+ const [state, setState] = React.useState(() =>
+ resolveStateFromOutcome(outcome),
+ );
+ const [countdown, setCountdown] = React.useState(
+ Math.ceil(undoGracePeriod / 1000),
+ );
+ const [sentAt, setSentAt] = React.useState(() =>
+ outcome === "sent" ? new Date() : null,
+ );
+ const [isExpanded, setIsExpanded] = React.useState(false);
+ const [needsExpansion, setNeedsExpansion] = React.useState(false);
+ const undoButtonRef = React.useRef(null);
+ const timerRef = React.useRef | null>(null);
+ const countdownRef = React.useRef