This example mirrors the original attachment picker flow: a two-panel dialog for files and instructions, panel switching in the title, panel-specific toolbars, matter filtering, upload affordances, active-panel selection summary, and confirm locking. The preview includes state buttons for the docs surface; the implementation below shows the consumer picker without those state shims. ```tsx title="components/attachment-picker/index.tsx" import { type ReactElement, useMemo, useState } from "react"; import { Files, type FilesUploadEntry, type FilesViewMode, } from "@tilt-legal/cubitt-components/files"; import { Button } from "@tilt-legal/cubitt-components/button"; import { Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@tilt-legal/cubitt-components/dialog"; import { Toolbar } from "@tilt-legal/cubitt-components/toolbar"; import { formatPlural } from "@tilt-legal/cubitt-components/utilities/formatters"; import { AttachmentPickerFilesPanel, AttachmentPickerFilesToolbar, getVisibleAttachmentPickerFiles, } from "@/components/attachment-picker-files-panel"; import { AttachmentPickerInstructionsPanel, AttachmentPickerInstructionsToolbar, } from "@/components/attachment-picker-instructions-panel"; import { AttachmentPickerPanelSwitcher } from "@/components/attachment-picker-panel-switcher"; import type { AttachmentFileItem, Instruction, Matter, } from "@/lib/attachment-picker-data"; type PanelId = "files" | "instructions"; type Selections = Record; type Props = { files: AttachmentFileItem[]; instructions: Instruction[]; onConfirm: (selections: Selections) => void | Promise; onUpload?: (entries: FilesUploadEntry[]) => void; trigger?: ReactElement; }; const emptySelections = (): Selections => ({ files: [], instructions: [] }); export function MatterAttachmentPicker({ files, instructions, onConfirm, onUpload, trigger = , }: Props) { const [open, setOpen] = useState(false); const [activePanel, setActivePanel] = useState("files"); const [filesQuery, setFilesQuery] = useState(""); const [instructionsQuery, setInstructionsQuery] = useState(""); const [selectedMatters, setSelectedMatters] = useState([]); const [selections, setSelections] = useState(emptySelections); const [view, setView] = useState("list"); const [confirming, setConfirming] = useState(false); function closePicker() { setOpen(false); setActivePanel("files"); setFilesQuery(""); setInstructionsQuery(""); setSelectedMatters([]); setSelections(emptySelections()); setView("list"); setConfirming(false); } function setPanelSelection(panelId: PanelId, selectedIds: string[]) { setSelections((current) => ({ ...current, [panelId]: selectedIds })); } async function handleConfirm() { const selectedIds = selections[activePanel]; if (selectedIds.length === 0 || confirming) return; try { setConfirming(true); await onConfirm(selections); closePicker(); } finally { setConfirming(false); } } const selectedIds = selections[activePanel]; const itemLabel = activePanel === "files" ? "file" : "instruction"; const visibleFiles = useMemo( () => getVisibleAttachmentPickerFiles({ items: files, query: filesQuery, selectedMatters, }), [files, filesQuery, selectedMatters] ); const showFilesListHeader = activePanel === "files" && view === "list" && visibleFiles.length > 0; return ( { if (nextOpen) setOpen(true); else closePicker(); }} > setPanelSelection("files", ids)} render={ } selectedIds={selections.files} selectionBehavior="toggle" selectionMode="multiple" > Attach {activePanel === "files" ? ( ) : ( )} {showFilesListHeader ? : null} {activePanel === "files" ? ( ) : ( setPanelSelection("instructions", ids) } query={instructionsQuery} selectedIds={selections.instructions} /> )}

{selectedIds.length === 0 ? `No ${itemLabel}s selected` : `${formatPlural(selectedIds.length, itemLabel)} selected`}

Cancel
); } ``` ```tsx title="components/attachment-picker/files-panel.tsx" import { BarsFilter, FolderOpen, Grid, Menu as MenuIcon, } from "@tilt-legal/cubitt-icons/ui/outline"; import { Files, type FilesItem, type FilesUploadEntry, type FilesViewMode, } from "@tilt-legal/cubitt-components/files"; import { Button } from "@tilt-legal/cubitt-components/button"; import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxSeparator, ComboboxTrigger, } from "@tilt-legal/cubitt-components/combobox"; import { Dropzone, DropzoneFolderAnimation, type FileRejection, } from "@tilt-legal/cubitt-components/dropzone"; import { EmptyState, EmptyStateDescription, EmptyStateHeading, EmptyStateMedia, EmptyStateTitle, } from "@tilt-legal/cubitt-components/empty-state"; import { Input } from "@tilt-legal/cubitt-components/input"; import { SearchExpand } from "@tilt-legal/cubitt-components/search-expand"; import { toast } from "@tilt-legal/cubitt-components/toast"; import { ToggleGroup, ToggleGroupItem, } from "@tilt-legal/cubitt-components/toggle-group"; import { Toolbar } from "@tilt-legal/cubitt-components/toolbar"; import { matters, type AttachmentFileItem, type Matter, } from "@/lib/attachment-picker-data"; type PanelProps = { disabled?: boolean; items: FilesItem[]; onUpload?: (entries: FilesUploadEntry[]) => void; totalItemCount: number; view: FilesViewMode; }; export function getVisibleAttachmentPickerFiles({ items, query, selectedMatters, }: { items: AttachmentFileItem[]; query: string; selectedMatters: Matter[]; }): AttachmentFileItem[] { const selectedMatterIds = new Set(selectedMatters.map((matter) => matter.id)); return items.filter((item) => { const matchesMatter = selectedMatterIds.size === 0 || item.matters.some((matter) => selectedMatterIds.has(matter.id)); const matchesQuery = !query.trim() || [ item.name, typeof item.createdBy === "string" ? item.createdBy : undefined, formatBytes(item.size ?? 0), ] .filter((value): value is string => Boolean(value)) .some((value) => value.toLowerCase().includes(query.toLowerCase())); return matchesMatter && matchesQuery; }); } const ATTACHMENT_UPLOAD_ACCEPT = [ "application/pdf", "image/*", "text/plain", ] as const; function createUploadEntries(files: File[]): FilesUploadEntry[] { return files.map((file) => { const fileWithPath = file as File & { path?: string; webkitRelativePath?: string; }; const relativePath = fileWithPath.webkitRelativePath || fileWithPath.path || undefined; return { id: relativePath || `${file.name}-${file.size}-${file.lastModified}`, file, mimeType: file.type, name: file.name, relativePath, size: file.size, }; }); } function renderListFiles(items: FilesItem[]) { return items.map((item) => ); } function UploadDropzone({ disabled, onUpload, }: { disabled?: boolean; onUpload?: (entries: FilesUploadEntry[]) => void; }) { return ( onUpload?.(createUploadEntries(files))} onFilesRejected={(rejections: FileRejection[]) => { for (const rejection of rejections) { toast.error(rejection.message); } }} > Drop files here to upload or click to browse from your computer ); } export function AttachmentPickerFilesPanel({ disabled, items, onUpload, totalItemCount, view, }: PanelProps) { const isNoFilesState = totalItemCount === 0; const isNoResultsState = totalItemCount > 0 && items.length === 0; const isUploadEmptyState = Boolean(onUpload) && isNoFilesState; return ( {items.length === 0 ? ( isUploadEmptyState ? ( ) : (
{isNoResultsState ? "No results found" : "No files available"} {isNoFilesState ? "There are no files to select from." : "Try a different search or matter filter."}
) ) : view === "grid" ? ( {items.map((item) => ( ))} ) : ( {renderListFiles(items)} )} ); } export function AttachmentPickerFilesToolbar({ disabled, onQueryChange, onSelectedMattersChange, onUpload, onViewChange, query, selectedMatters, view, }: { disabled?: boolean; query: string; selectedMatters: Matter[]; view: FilesViewMode; onQueryChange: (value: string) => void; onSelectedMattersChange: (matters: Matter[]) => void; onUpload?: (entries: FilesUploadEntry[]) => void; onViewChange: (value: FilesViewMode) => void; }) { return ( onQueryChange(event.currentTarget.value)} placeholder="Search files" value={query} /> onSelectedMattersChange(Array.isArray(value) ? value : []) } value={selectedMatters} > } > No matters found. {(matter: Matter) => ( {matter.value} )} { if (value === "grid" || value === "list") onViewChange(value); }} value={view} > {onUpload ? ( <> ) : null} ); } ``` ```tsx title="components/attachment-picker/instructions-panel.tsx" import { useMemo } from "react"; import { Checkbox } from "@tilt-legal/cubitt-components/checkbox"; import { Input } from "@tilt-legal/cubitt-components/input"; import { SearchExpand } from "@tilt-legal/cubitt-components/search-expand"; import { Toolbar } from "@tilt-legal/cubitt-components/toolbar"; import type { Instruction } from "@/lib/attachment-picker-data"; type PanelProps = { instructions: Instruction[]; query: string; selectedIds: string[]; onSelectedIdsChange: (ids: string[]) => void; }; export function AttachmentPickerInstructionsPanel({ instructions, query, selectedIds, onSelectedIdsChange, }: PanelProps) { const visibleInstructions = useMemo(() => { const normalizedQuery = query.trim().toLowerCase(); if (!normalizedQuery) return instructions; return instructions.filter((instruction) => [instruction.name, instruction.description].some((value) => value.toLowerCase().includes(normalizedQuery) ) ); }, [instructions, query]); function toggleInstruction(id: string) { onSelectedIdsChange( selectedIds.includes(id) ? selectedIds.filter((selectedId) => selectedId !== id) : [...selectedIds, id] ); } return (
{visibleInstructions.map((instruction) => { const isSelected = selectedIds.includes(instruction.id); return ( ); })} {visibleInstructions.length === 0 ? (

No instructions found.

) : null}
); } export function AttachmentPickerInstructionsToolbar({ disabled, onQueryChange, query, }: { disabled?: boolean; query: string; onQueryChange: (value: string) => void; }) { return ( onQueryChange(event.currentTarget.value)} placeholder="Search instructions" value={query} /> ); } ``` ```tsx title="components/attachment-picker/panel-switcher.tsx" import { Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuTrigger, } from "@tilt-legal/cubitt-components/menu"; import { Toolbar } from "@tilt-legal/cubitt-components/toolbar"; type PanelId = "files" | "instructions"; export function AttachmentPickerPanelSwitcher({ activePanel, disabled, onPanelChange, }: { activePanel: PanelId; disabled?: boolean; onPanelChange: (panel: PanelId) => void; }) { const activeLabel = activePanel === "files" ? "Files" : "Instructions"; return ( {activeLabel} } /> { if (value === "files" || value === "instructions") { onPanelChange(value); } }} value={activePanel} > Files Instructions ); } ``` ```typescript title="components/attachment-picker/data.ts" import type { FilesItem } from "@tilt-legal/cubitt-components/files"; export type Matter = { id: string; value: string }; export type Instruction = { id: string; name: string; description: string }; export type AttachmentFileItem = FilesItem & { matters: Matter[]; }; export const matters = [ { id: "m1", value: "Smith v. Anderson" }, { id: "m2", value: "Johnson Estate Planning" }, { id: "m3", value: "Tech Corp Acquisition" }, ] satisfies Matter[]; export const files: AttachmentFileItem[] = [ { id: "financial-report", kind: "file", name: "Q4 Financial Report.pdf", mimeType: "application/pdf", size: 2_458_624, createdBy: "Sarah Chen", updatedAt: "2026-01-06", matters: [matters[0]!], }, { id: "client-contract", kind: "file", name: "Client Contract.docx", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", size: 612_000, createdBy: "Ava Johnson", updatedAt: "2026-01-06", matters: [matters[0]!, matters[2]!], }, ]; export const instructions: Instruction[] = [ { id: "i1", name: "Professional Email", description: "Draft a professional email response with appropriate tone.", }, { id: "i2", name: "Contract Summary", description: "Summarize key terms, obligations, and deadlines.", }, ]; ``` Use the docs preview buttons only to exercise states like empty uploads, no files, and no results. In application code, pass those states through props from your actual data and upload workflow.