@vvedantb/ui 0.12.0 → 0.13.0

package/src/artifacts/artifact-card.tsx

@@ -0,0 +1,211 @@
+import type { MouseEvent, ReactNode } from "react";
+import {
+  IconCopy,
+  IconDots,
+  IconDownload,
+  IconExternalLink,
+  IconLayoutDashboard,
+  IconPencil,
+  IconTrash,
+} from "@tabler/icons-react";
+import { toast } from "sonner";
+import { ConfirmSkipHint, skipConfirmTitle } from "../../app/src/confirm/ConfirmSkipHint";
+import { formatCompactRelativeTime } from "../../app/src/time/compactRelativeTime";
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "../ui/context-menu";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { cn } from "../utils/cn";
+import { useArtifactEditDialogs } from "./artifact-dialogs";
+import { copyArtifactBody, downloadArtifactBody, openArtifactInNewTab } from "./artifact-file";
+import { ArtifactTypeIcon } from "./artifact-type-icon";
+import type { ArtifactSummary } from "./types";
+
+export type ArtifactLayout = "grid" | "list";
+
+/** Callbacks shared by `ArtifactCard` and `ArtifactList`. Each menu action shows only when its callback is set. */
+export type ArtifactCardActions = {
+  /** Open the artifact. With `getHref`, a plain left click calls this instead of following the link. */
+  onOpen?: (artifact: ArtifactSummary) => void;
+  /** Link target: the card becomes an `<a>` and the menu gains "Open in new tab". */
+  getHref?: (artifact: ArtifactSummary) => string;
+  /** Loads the body for Copy and Download (list rows carry no body). */
+  getBody?: (artifact: ArtifactSummary) => Promise<string>;
+  /** Called with the trimmed new title from the rename dialog. */
+  onRename?: (artifact: ArtifactSummary, title: string) => void | Promise<void>;
+  /** Called after the delete dialog, or straight away on an Alt-click. */
+  onDelete?: (artifact: ArtifactSummary) => void | Promise<void>;
+};
+
+export type ArtifactCardProps = ArtifactCardActions & {
+  artifact: ArtifactSummary;
+  /** `"grid"` (default): a tile with the description. `"list"`: one compact row. */
+  layout?: ArtifactLayout;
+  className?: string;
+};
+
+type MenuAction = {
+  label: string;
+  icon: ReactNode;
+  onSelect: (event: MouseEvent) => void;
+  destructive?: boolean;
+};
+
+function isPlainClick(event: MouseEvent) {
+  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+
+const menuTriggerClass =
+  "flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-tertiary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring data-[state=open]:bg-surface-tertiary";
+
+/**
+ * One artifact as a grid tile or a list row, with an actions menu (also on
+ * right-click) and the rename and delete dialogs. Data comes in through props
+ * and leaves through callbacks; the card makes no requests of its own.
+ */
+export function ArtifactCard({
+  artifact,
+  layout = "grid",
+  onOpen,
+  getHref,
+  getBody,
+  onRename,
+  onDelete,
+  className,
+}: ArtifactCardProps) {
+  const edit = useArtifactEditDialogs({
+    title: artifact.title,
+    onRename: onRename && ((title) => onRename(artifact, title)),
+    onDelete: onDelete && (() => onDelete(artifact)),
+  });
+  const href = getHref?.(artifact);
+
+  const withBody = (use: (body: string) => void | Promise<void>) => {
+    if (!getBody) return;
+    void getBody(artifact).then(use, () => toast.error("Couldn't load artifact"));
+  };
+
+  const actions: MenuAction[] = [];
+  if (onOpen) actions.push({ label: "Open", icon: <IconLayoutDashboard size={16} />, onSelect: () => onOpen(artifact) });
+  if (href !== undefined) {
+    actions.push({ label: "Open in new tab", icon: <IconExternalLink size={16} />, onSelect: () => openArtifactInNewTab(href) });
+  }
+  if (onRename) actions.push({ label: "Rename", icon: <IconPencil size={16} />, onSelect: edit.startRename });
+  if (getBody) {
+    actions.push({ label: "Copy", icon: <IconCopy size={16} />, onSelect: () => withBody(copyArtifactBody) });
+    actions.push({
+      label: "Download",
+      icon: <IconDownload size={16} />,
+      onSelect: () => withBody((body) => downloadArtifactBody(artifact.title, artifact.format, body)),
+    });
+  }
+  if (onDelete) {
+    actions.push({ label: "Delete", icon: <IconTrash size={16} />, onSelect: edit.requestDelete, destructive: true });
+  }
+
+  const itemProps = (action: MenuAction) => ({
+    className: action.destructive ? "text-danger" : undefined,
+    startContent: action.icon,
+    title: action.destructive ? skipConfirmTitle(action.label) : undefined,
+    endContent: action.destructive ? <ConfirmSkipHint /> : undefined,
+    onClick: action.onSelect,
+  });
+
+  const list = layout === "list";
+  const openClass = cn(
+    "transition-[background-color,transform] duration-200 ease-smooth active:scale-[0.99] active:duration-100",
+    list
+      ? "flex min-w-0 flex-1 items-center gap-3 rounded-lg px-3 py-2 text-left hover:bg-surface-secondary"
+      : "flex h-full w-full flex-col gap-2 rounded-surface bg-surface-secondary p-4 text-left hover:bg-surface-tertiary",
+  );
+  const updated = <span className="shrink-0 text-xs text-muted-foreground">{formatCompactRelativeTime(artifact.updatedAt)}</span>;
+  const content = list ? (
+    <>
+      <ArtifactTypeIcon type={artifact.type} />
+      <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">{artifact.title}</span>
+      {updated}
+    </>
+  ) : (
+    <>
+      <span className="flex min-w-0 items-center gap-2">
+        <ArtifactTypeIcon type={artifact.type} size={18} />
+        <span className="truncate text-sm font-medium text-foreground">{artifact.title}</span>
+      </span>
+      {artifact.description ? (
+        <span className="line-clamp-2 text-sm text-muted-foreground">{artifact.description}</span>
+      ) : null}
+      <span className="mt-auto pr-8">{updated}</span>
+    </>
+  );
+
+  const openTarget =
+    href !== undefined ? (
+      <a
+        href={href}
+        className={openClass}
+        onClick={(event) => {
+          if (!onOpen || !isPlainClick(event)) return;
+          event.preventDefault();
+          onOpen(artifact);
+        }}
+      >
+        {content}
+      </a>
+    ) : onOpen ? (
+      <button type="button" className={openClass} onClick={() => onOpen(artifact)}>
+        {content}
+      </button>
+    ) : (
+      <div className={openClass}>{content}</div>
+    );
+
+  const menu =
+    actions.length > 0 ? (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            aria-label="Artifact actions"
+            className={cn(menuTriggerClass, list ? "shrink-0" : "absolute bottom-3 right-2")}
+          >
+            <IconDots className="size-3.5" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent fitViewport suppressAltKey restoreScrollLockOnClose align="end">
+          {actions.map((action) => (
+            <DropdownMenuItem key={action.label} {...itemProps(action)}>
+              {action.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ) : null;
+
+  const card = (
+    <div
+      data-artifact-id={artifact.id}
+      className={cn("relative", list ? "flex items-center gap-2" : "h-full", className)}
+    >
+      {openTarget}
+      {menu}
+    </div>
+  );
+
+  return (
+    <>
+      {actions.length > 0 ? (
+        <ContextMenu>
+          <ContextMenuTrigger asChild>{card}</ContextMenuTrigger>
+          <ContextMenuContent suppressAltKey>
+            {actions.map((action) => (
+              <ContextMenuItem key={action.label} {...itemProps(action)}>
+                {action.label}
+              </ContextMenuItem>
+            ))}
+          </ContextMenuContent>
+        </ContextMenu>
+      ) : (
+        card
+      )}
+      {edit.dialogs}
+    </>
+  );
+}

package/src/artifacts/artifact-dialogs.tsx

@@ -0,0 +1,153 @@
+import { useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { useRequestConfirm } from "../../app/src/confirm/useRequestConfirm";
+import { ConfirmDialog } from "../ui/confirm-dialog";
+import { Input } from "../ui/input";
+
+export type ArtifactRenameDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  onValueChange: (value: string) => void;
+  onSave: () => void;
+  pending?: boolean;
+};
+
+/** "Rename artifact" dialog with one name field. Enter saves. Save stays disabled while the name is blank. */
+export function ArtifactRenameDialog({ open, onOpenChange, value, onValueChange, onSave, pending }: ArtifactRenameDialogProps) {
+  const blank = value.trim().length === 0;
+  return (
+    <ConfirmDialog.Root alert={false} pending={pending} open={open} onOpenChange={onOpenChange}>
+      <ConfirmDialog.Content className="max-w-sm">
+        <ConfirmDialog.Header>
+          <ConfirmDialog.Title>Rename artifact</ConfirmDialog.Title>
+          <ConfirmDialog.Description>Choose a new name.</ConfirmDialog.Description>
+        </ConfirmDialog.Header>
+        <Input
+          autoFocus
+          value={value}
+          aria-label="Artifact name"
+          onChange={(event) => onValueChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key !== "Enter" || blank || pending) return;
+            event.preventDefault();
+            onSave();
+          }}
+        />
+        <ConfirmDialog.Footer>
+          <ConfirmDialog.Cancel variant="secondary" />
+          <ConfirmDialog.Action disabled={blank} onClick={onSave}>
+            Save
+          </ConfirmDialog.Action>
+        </ConfirmDialog.Footer>
+      </ConfirmDialog.Content>
+    </ConfirmDialog.Root>
+  );
+}
+
+export type ArtifactDeleteDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  onConfirm: () => void;
+  pending?: boolean;
+};
+
+/** "Delete <title>?" confirmation. Cancel is focused on open. */
+export function ArtifactDeleteDialog({ open, onOpenChange, title, onConfirm, pending }: ArtifactDeleteDialogProps) {
+  return (
+    <ConfirmDialog.Root alert={false} focusCancel pending={pending} open={open} onOpenChange={onOpenChange}>
+      <ConfirmDialog.Content className="max-w-sm" role="alertdialog">
+        <ConfirmDialog.Header>
+          <ConfirmDialog.Title>Delete &quot;{title}&quot;?</ConfirmDialog.Title>
+          <ConfirmDialog.Description>This cannot be undone.</ConfirmDialog.Description>
+        </ConfirmDialog.Header>
+        <ConfirmDialog.Footer>
+          <ConfirmDialog.Cancel variant="secondary" />
+          <ConfirmDialog.Action variant="destructive" onClick={onConfirm}>
+            Delete
+          </ConfirmDialog.Action>
+        </ConfirmDialog.Footer>
+      </ConfirmDialog.Content>
+    </ConfirmDialog.Root>
+  );
+}
+
+export type ArtifactEditCallbacks = {
+  /** Called with the trimmed new title. The dialog closes when it resolves and stays open when it rejects. */
+  onRename?: (title: string) => void | Promise<void>;
+  /** Called after the delete dialog, or straight away on an Alt-click. */
+  onDelete?: () => void | Promise<void>;
+};
+
+/**
+ * Rename and delete dialog state shared by the card and the viewer. `dialogs`
+ * must be rendered; `requestDelete(event)` skips the dialog on an Alt-click.
+ */
+export function useArtifactEditDialogs({ title, onRename, onDelete }: ArtifactEditCallbacks & { title: string }) {
+  const [renameOpen, setRenameOpen] = useState(false);
+  const [renameValue, setRenameValue] = useState(title);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [pending, setPending] = useState(false);
+  const { request } = useRequestConfirm();
+
+  const run = async (action: () => void | Promise<void>, failure: string, close: () => void) => {
+    setPending(true);
+    try {
+      await action();
+      close();
+    } catch {
+      toast.error(failure);
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const rename = () => {
+    const next = renameValue.trim();
+    if (!onRename || next.length === 0) return;
+    if (next === title) {
+      setRenameOpen(false);
+      return;
+    }
+    void run(() => onRename(next), "Couldn't rename artifact", () => setRenameOpen(false));
+  };
+
+  const remove = () => {
+    if (!onDelete) return;
+    void run(onDelete, "Couldn't delete artifact", () => setDeleteOpen(false));
+  };
+
+  const dialogs: ReactNode = (
+    <>
+      {onRename ? (
+        <ArtifactRenameDialog
+          open={renameOpen}
+          onOpenChange={setRenameOpen}
+          value={renameValue}
+          onValueChange={setRenameValue}
+          onSave={rename}
+          pending={pending}
+        />
+      ) : null}
+      {onDelete ? (
+        <ArtifactDeleteDialog
+          open={deleteOpen}
+          onOpenChange={setDeleteOpen}
+          title={title}
+          onConfirm={remove}
+          pending={pending}
+        />
+      ) : null}
+    </>
+  );
+
+  return {
+    startRename: () => {
+      setRenameValue(title);
+      setRenameOpen(true);
+    },
+    requestDelete: (event?: { altKey?: boolean }) => request(() => setDeleteOpen(true), remove, event),
+    dialogs,
+  };
+}

package/src/artifacts/artifact-file.ts

@@ -0,0 +1,26 @@
+import { toast } from "sonner";
+import { ARTIFACT_FORMAT_FILES, artifactFileName, type ArtifactFormat } from "@vvedantb/server";
+
+/** Saves `body` as a file named after `title`, with the extension and MIME type of `format`. */
+export function downloadArtifactBody(title: string, format: ArtifactFormat, body: string): void {
+  const url = URL.createObjectURL(new Blob([body], { type: ARTIFACT_FORMAT_FILES[format].mime }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = artifactFileName(title, format);
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+/** Copies `body` to the clipboard and toasts the outcome. */
+export async function copyArtifactBody(body: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(body);
+    toast.success("Copied");
+  } catch {
+    toast.error("Couldn't copy");
+  }
+}
+
+export function openArtifactInNewTab(href: string): void {
+  window.open(href, "_blank", "noopener");
+}

package/src/artifacts/artifact-frame.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useEffect, useRef, type ComponentProps } from "react";
+import { z } from "zod";
+import {
+  ARTIFACT_PORT_TYPE,
+  ARTIFACT_READY_TYPE,
+  ARTIFACT_STATE_DEBOUNCE_MS,
+  ARTIFACT_STATE_MAX_WAIT_MS,
+  ARTIFACT_STATE_RESULT_TYPE,
+  ARTIFACT_STATE_TYPE,
+  applyArtifactStateOp,
+  createTrailingMaxDebounce,
+  parseArtifactStateOp,
+  wrapArtifactDocument,
+  type ArtifactFormat,
+  type ArtifactStateMap,
+  type ArtifactTemplateName,
+} from "@vvedantb/server";
+import { cn } from "../utils/cn";
+
+/**
+ * Where one user's state for one artifact lives. `load` runs once per
+ * document; `save` gets the whole map (replace, not merge) after the debounce
+ * and on `pagehide` or unmount. Keep the object stable for an artifact: a new
+ * store reloads the frame.
+ */
+export type ArtifactStateStore = {
+  load(): Promise<ArtifactStateMap>;
+  save(data: ArtifactStateMap): Promise<void>;
+  /** A failed load or save. After a failed load the frame starts empty and never saves, so it cannot overwrite the stored state. */
+  onError?(error: Error, phase: "load" | "save"): void;
+};
+
+export type ArtifactFrameProps = Omit<ComponentProps<"iframe">, "src" | "srcDoc" | "sandbox" | "title" | "ref"> & {
+  body: string;
+  format: ArtifactFormat;
+  /** The iframe's accessible name, and the heading of a built-in template when the body has none. */
+  title: string;
+  /** From `stateSpec.template`. */
+  template?: ArtifactTemplateName;
+  /** Without a store the state starts empty and lives until the frame unmounts. */
+  store?: ArtifactStateStore;
+  /** Extra globals for the guest state API, e.g. `["app"]` for `window.app.state`. */
+  stateGlobalAliases?: readonly string[];
+  /** Save this long after the last change. Default `ARTIFACT_STATE_DEBOUNCE_MS` (5 s). */
+  saveDelayMs?: number;
+  /** Save at least this often while changes keep coming. Default `ARTIFACT_STATE_MAX_WAIT_MS` (30 s). */
+  saveMaxWaitMs?: number;
+};
+
+function toError(reason: Error | string | object | null | undefined): Error {
+  return reason instanceof Error ? reason : new Error(String(reason));
+}
+
+// The save in flight for each store, so a reload (another version, say) reads after it.
+const savesInFlight = new WeakMap<ArtifactStateStore, Promise<void>>();
+
+/**
+ * Renders an artifact in an iframe with `sandbox="allow-scripts"` (never
+ * `allow-same-origin`) and the CSP from `wrapArtifactDocument`, and answers
+ * the guest's `window.artifactState` calls over a MessageChannel. State
+ * comes from `store.load()` before the document is written, so the guest
+ * starts with its snapshot; changes are saved through `store.save()`.
+ */
+export function ArtifactFrame({
+  body,
+  format,
+  title,
+  template,
+  store,
+  stateGlobalAliases,
+  saveDelayMs = ARTIFACT_STATE_DEBOUNCE_MS,
+  saveMaxWaitMs = ARTIFACT_STATE_MAX_WAIT_MS,
+  className,
+  ...props
+}: ArtifactFrameProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  // A string, so a new array with the same names does not reload the frame.
+  const aliasKey = (stateGlobalAliases ?? []).join(",");
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const readyMessage = z.object({ type: z.literal(ARTIFACT_READY_TYPE) });
+    const stateMessage = z.object({
+      type: z.literal(ARTIFACT_STATE_TYPE),
+      requestId: z.number(),
+      op: z.string(),
+      key: z.string().optional(),
+      value: z.string().optional(),
+    });
+    let cancelled = false;
+    let canSave = store !== undefined;
+    let data: ArtifactStateMap = {};
+    let port: MessagePort | undefined;
+
+    const persist = createTrailingMaxDebounce(
+      () => {
+        if (!store || !canSave) return;
+        savesInFlight.set(
+          store,
+          store.save(data).catch((reason) => store.onError?.(toError(reason), "save")),
+        );
+      },
+      saveDelayMs,
+      saveMaxWaitMs,
+    );
+
+    const answer = (event: MessageEvent) => {
+      const parsed = stateMessage.safeParse(event.data);
+      if (!parsed.success) return;
+      const { requestId } = parsed.data;
+      const op = parseArtifactStateOp(parsed.data);
+      const result = op ? applyArtifactStateOp(data, op) : { data, value: null, error: "Malformed state request." };
+      if (op && !result.error) {
+        data = result.data;
+        if (op.op === "set" || op.op === "remove" || op.op === "reset") persist.schedule();
+      }
+      port?.postMessage({
+        type: ARTIFACT_STATE_RESULT_TYPE,
+        requestId,
+        ok: !result.error,
+        value: result.value,
+        error: result.error,
+      });
+    };
+
+    const onWindowMessage = (event: MessageEvent) => {
+      const guest = iframe.contentWindow;
+      if (!guest || event.source !== guest || !readyMessage.safeParse(event.data).success) return;
+      // A new document (or a reload of this one) gets a fresh channel.
+      port?.close();
+      const channel = new MessageChannel();
+      port = channel.port1;
+      port.onmessage = answer;
+      guest.postMessage({ type: ARTIFACT_PORT_TYPE }, "*", [channel.port2]);
+    };
+
+    const write = (snapshot: ArtifactStateMap) => {
+      iframe.srcdoc = wrapArtifactDocument(body, format, snapshot, {
+        title,
+        template,
+        stateGlobalAliases: aliasKey === "" ? [] : aliasKey.split(","),
+      });
+    };
+
+    const flush = () => persist.flushNow();
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") flush();
+    };
+
+    window.addEventListener("message", onWindowMessage);
+    window.addEventListener("pagehide", flush);
+    document.addEventListener("visibilitychange", onVisibility);
+
+    if (store) {
+      (savesInFlight.get(store) ?? Promise.resolve()).then(() => store.load()).then(
+        (loaded) => {
+          if (cancelled) return;
+          data = loaded;
+          write(loaded);
+        },
+        (reason) => {
+          if (cancelled) return;
+          canSave = false;
+          store.onError?.(toError(reason), "load");
+          write({});
+        },
+      );
+    } else {
+      write({});
+    }
+
+    return () => {
+      cancelled = true;
+      persist.flushNow();
+      persist.cancel();
+      window.removeEventListener("message", onWindowMessage);
+      window.removeEventListener("pagehide", flush);
+      document.removeEventListener("visibilitychange", onVisibility);
+      port?.close();
+    };
+  }, [body, format, title, template, store, aliasKey, saveDelayMs, saveMaxWaitMs]);
+
+  return (
+    <iframe
+      {...props}
+      ref={iframeRef}
+      title={title}
+      sandbox="allow-scripts"
+      className={cn("block border-0 bg-white", className)}
+    />
+  );
+}

package/src/artifacts/artifact-list-toolbar.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+import { IconChevronDown, IconFilter, IconLayoutGrid, IconList } from "@tabler/icons-react";
+import { ARTIFACT_TYPES, type ArtifactType } from "@vvedantb/server";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { ToolbarSearchInput } from "../ui/toolbar-search-input";
+import { cn } from "../utils/cn";
+import type { ArtifactLayout } from "./artifact-card";
+import { ARTIFACT_TYPE_LABELS, ArtifactTypeIcon } from "./artifact-type-icon";
+
+const ALL = "all";
+const LAYOUTS: readonly ArtifactLayout[] = ["grid", "list"];
+
+export type ArtifactListToolbarProps = {
+  query: string;
+  onQueryChange: (query: string) => void;
+  /** Selected type; `undefined` is "All types". */
+  type?: ArtifactType;
+  /** Omit to hide the type filter. */
+  onTypeChange?: (type: ArtifactType | undefined) => void;
+  /** Types offered in the filter. Default every `ARTIFACT_TYPES` entry. */
+  types?: readonly ArtifactType[];
+  layout?: ArtifactLayout;
+  /** Omit to hide the grid and list toggle. */
+  onLayoutChange?: (layout: ArtifactLayout) => void;
+  /** Default "Search artifacts...". */
+  searchPlaceholder?: string;
+  /** Extra controls at the end, e.g. a create button. */
+  children?: ReactNode;
+  className?: string;
+};
+
+/** Search field, type filter and grid or list toggle above an `ArtifactList`. Controlled: it holds no state. */
+export function ArtifactListToolbar({
+  query,
+  onQueryChange,
+  type,
+  onTypeChange,
+  types = ARTIFACT_TYPES,
+  layout = "grid",
+  onLayoutChange,
+  searchPlaceholder = "Search artifacts...",
+  children,
+  className,
+}: ArtifactListToolbarProps) {
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      <ToolbarSearchInput
+        value={query}
+        onChange={onQueryChange}
+        placeholder={searchPlaceholder}
+        label="Search artifacts"
+      />
+      {onTypeChange ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              aria-label="Filter by type"
+              startContent={type ? <ArtifactTypeIcon type={type} /> : <IconFilter size={16} />}
+              endContent={<IconChevronDown size={14} className="text-muted-foreground" />}
+            >
+              {type ? ARTIFACT_TYPE_LABELS[type] : "All types"}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent fitViewport suppressAltKey restoreScrollLockOnClose align="start">
+            <DropdownMenuRadioGroup
+              value={type ?? ALL}
+              onValueChange={(value) => onTypeChange(types.find((candidate) => candidate === value))}
+            >
+              <DropdownMenuRadioItem value={ALL}>All types</DropdownMenuRadioItem>
+              <DropdownMenuSeparator />
+              {types.map((candidate) => (
+                <DropdownMenuRadioItem key={candidate} value={candidate}>
+                  {ARTIFACT_TYPE_LABELS[candidate]}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+      {onLayoutChange ? (
+        <div className="flex items-center gap-1">
+          {LAYOUTS.map((option) => (
+            <Button
+              key={option}
+              size="icon-sm"
+              variant="ghost"
+              aria-label={option === "grid" ? "Grid view" : "List view"}
+              aria-pressed={layout === option}
+              className={layout === option ? "bg-default text-foreground" : undefined}
+              onClick={() => onLayoutChange(option)}
+            >
+              {option === "grid" ? <IconLayoutGrid size={16} /> : <IconList size={16} />}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+      {children ? <div className="ml-auto flex items-center gap-2">{children}</div> : null}
+    </div>
+  );
+}