@lotics/ui 14.3.1 → 15.1.0

package/examples/tpl_item_list.tsx

@@ -57,6 +57,7 @@ import { FollowScroll } from "@lotics/ui/follow_scroll";
 import { ClarifyWizard, type ClarifyWizardAnswer, type ClarifyWizardQuestion } from "@lotics/ui/clarify_wizard";
 import { CardSelectItem } from "@lotics/ui/card_select_item";
 import { FileDropzone } from "@lotics/ui/file_dropzone";
+import { FileDropTarget } from "@lotics/ui/file_drop_target";
 import { ChangeField, ChangeRecord, ChangeReview, ChangeReviewActions, ChangeReviewHeader, ChangeValueInput, type ChangeStatus } from "@lotics/ui/change_review";
 import { useScreenSize } from "@lotics/ui/use_screen_size";
 import { MemberSelect } from "@lotics/ui/member_select";
@@ -461,6 +462,11 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
   const [declared, setDeclared] = useState<number | null>(isSeed ? 25_000_000 : null);
   const [tags, setTags] = useState<string[]>(isSeed ? (hs.trangThai === "hoantat" ? ["corporate"] : ["corporate", "courier"]) : []);
   const [files, setFiles] = useState<DisplayFile[]>(isSeed ? [sampleDoc("id-scan", "#3b82f6"), sampleDoc("application-form", "#10b981")] : []);
+  // THE standard files intake — one handler, three ways in: the section's Add
+  // CTA, a drag anywhere onto the Files section, and Ctrl/Cmd+V — the last two
+  // both ride the section's `<FileDropTarget paste>` below. Every record surface
+  // carries all three; the user should never have to hunt for a dropzone.
+  const addFiles = (picked: File[]) => setFiles((prev) => [...prev, ...toDisplayFiles(picked)]);
   // ── the case's money: CHARGES owed vs RECEIPTS received — outstanding is
   // the difference. Recording a payment appends a receipt; everything
   // (bar, group sums, the closing number) recomputes from the two lists.
@@ -688,17 +694,23 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
         <Divider />
         {/* FILES — the document CRUD: FileRows (press → gallery preview, ⋯ →
             remove) + the section's OWN CTA; an EXPECTED document renders as a
-            ghost placeholder row with its own chase action. */}
+            ghost placeholder row with its own chase action.
+            The whole section is a FileDropTarget with `paste` — drag a file
+            anywhere onto it, or Ctrl/Cmd+V while focus is in it — the standard
+            files-intake behavior every record surface should carry. */}
+        <FileDropTarget onFiles={addFiles} paste>
         <Section>
           <SectionHeading>
-            <SectionHeadingTitle>Files</SectionHeadingTitle>
+            {/* The standard files-section affordance line — drag / paste / click
+                are otherwise invisible on a FileDropTarget-wrapped section. */}
+            <SectionHeadingTitle description="Drag, paste, or click to add files">Files</SectionHeadingTitle>
             <SectionHeadingMeta>{`${files.length} ${files.length === 1 ? "file" : "files"}`}</SectionHeadingMeta>
             <Button
               title="Add file"
               color="secondary"
               onPress={() => {
                 void pickFiles({ multiple: true }).then((picked) => {
-                  if (picked.length > 0) setFiles((prev) => [...prev, ...toDisplayFiles(picked)]);
+                  if (picked.length > 0) addFiles(picked);
                 });
               }}
             />
@@ -711,6 +723,7 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
             trailing={<Button title="Request" color="muted" onPress={() => {}} />}
           />
         </Section>
+        </FileDropTarget>
         <Divider />
         {/* the PAYMENT summary — a plain financial STATEMENT: the two sides
             of the ledger (charges owed · receipts received), every amount on
@@ -1101,14 +1114,22 @@ const importScript = (grouping: "customer" | "order"): Part[] => [
 /** The manual gate stays the THREE-field create-then-refine form — past the
  *  popover threshold (1–2 fields), so a Dialog pane; NOT a wizard: the record's
  *  own workspace (the drawer it opens into) is where everything else is refined. */
-function EnterDataDialog({ onCreate, onCreateMany }: {
+function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany }: {
+  /** Controlled open — the intake is driven by BOTH the toolbar "Enter data"
+   *  button (opens empty) AND the register's whole-surface FileDropTarget (opens
+   *  PRE-SEEDED via `seedDocs`), so the trigger lives with the parent. */
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Files to pre-seed the intake WELL when the dialog opens from a top-level
+   *  drop/paste — a dropped pile lands as thumbnail cards (list-first, NOT
+   *  auto-analyze), ready for the deliberate "Read with AI". Empty from the button. */
+  seedDocs: DisplayFile[];
   onCreate: (khach: string, dienThoai: string, phi: number) => void;
   onCreateMany: (records: { khach: string; dienThoai: string; phi: number }[]) => void;
 }) {
   const { small } = useScreenSize();
-  const [open, setOpen] = useState(false);
   const [phase, setPhase] = useState<IntakePhase>("intake");
-  const [fileNames, setFileNames] = useState<string[]>([]);
+  const [docs, setDocs] = useState<DisplayFile[]>([]);
   const [variant, setVariant] = useState<ManualVariant>("export");
   const [grouping, setGrouping] = useState<"customer" | "order">("customer");
   // Q2's answer is load-bearing too: it decides how the unknown customer lands
@@ -1123,13 +1144,25 @@ function EnterDataDialog({ onCreate, onCreateMany }: {
   const [dienThoai, setDienThoai] = useState("");
   const [phi, setPhi] = useState<number | null>(null);
 
-  // The stream reveal — one revealer serves both the analyze and import phases.
+  // Opening PRE-SEEDS the intake well: a top-level drop/paste passes the dropped
+  // files via `seedDocs`, the button passes []. Keyed on `open` alone — the seed
+  // is settled before the parent flips open, and re-seeding on every render would
+  // fight the user's own add/remove among the thumbnails.
+  useEffect(() => {
+    if (open) {
+      setPhase("intake");
+      setDocs(seedDocs);
+    }
+  }, [open]);
+
+  // The analyze stream names the files it reads; the reveal serves analyze + import.
+  const docNames = docs.map((d) => d.filename);
   const [revealed, setRevealed] = useState(0);
-  const script = phase === "analyze" ? analyzeScript(fileNames) : phase === "running" ? importScript(grouping) : [];
+  const script = phase === "analyze" ? analyzeScript(docNames) : phase === "running" ? importScript(grouping) : [];
   useEffect(() => {
     if (phase !== "analyze" && phase !== "running") return;
     setRevealed(0);
-    const total = phase === "analyze" ? analyzeScript(fileNames).length : importScript(grouping).length;
+    const total = phase === "analyze" ? analyzeScript(docNames).length : importScript(grouping).length;
     let n = 0;
     const t = setInterval(() => {
       n += 1;
@@ -1145,6 +1178,11 @@ function EnterDataDialog({ onCreate, onCreateMany }: {
     // settled before their stream phase begins.
   }, [phase]);
 
+  // ONE intake sink — every way IN adds to the pile: the whole-dialog
+  // FileDropTarget (drag/paste anywhere on the open dialog), the big empty-state
+  // dropzone, and the compact add-more dropzone all call this.
+  const addDocs = (fs: File[]) => setDocs((prev) => [...prev, ...toDisplayFiles(fs)]);
+
   const proposals = grouping === "customer" ? PROPOSED_BY_CUSTOMER : PROPOSED_BY_ORDER;
   // Kept = explicitly ACCEPTED (the kit's review contract): Apply stays disabled
   // at 0 kept, and the bar's own Keep-all presses every pending card's Keep.
@@ -1152,7 +1190,7 @@ function EnterDataDialog({ onCreate, onCreateMany }: {
 
   const reset = () => {
     setPhase("intake");
-    setFileNames([]);
+    setDocs([]);
     setCardStatus({});
     setFees({});
     setCustomerPlan("New customer created and linked");
@@ -1160,7 +1198,7 @@ function EnterDataDialog({ onCreate, onCreateMany }: {
     setDienThoai("");
     setPhi(null);
   };
-  const close = () => { setOpen(false); reset(); };
+  const close = () => { onOpenChange(false); reset(); };
 
   const applyProposals = () => {
     const kept = proposals.filter((p) => cardStatus[p.id] === "accepted");
@@ -1180,47 +1218,81 @@ function EnterDataDialog({ onCreate, onCreateMany }: {
     : "Import from files";
 
   return (
-    <>
-      <Button title="Enter data" color="primary" onPress={() => setOpen(true)} />
-      <ChangeReview>
-      <Dialog width={phase === "review" ? 560 : 480} open={open} onOpenChange={(o) => { if (!o) close(); }}>
+    <ChangeReview>
+      {/* the file/stream phases (intake/analyze/clarify/running/review) run
+          WIDE — room for the thumbnail hero + the AgentRun/ClarifyWizard/review
+          streams; only the manual `form` stays a narrow single-column pane.
+          760 sits just under the kit Dialog's default 786 maxWidth cap. */}
+      <Dialog width={phase === "form" ? 480 : 760} open={open} onOpenChange={(o) => { if (!o) close(); }}>
         <DialogHeader>
           <DialogHeaderTitle>{title}</DialogHeaderTitle>
         </DialogHeader>
 
         {phase === "intake" ? (
-          <View style={{ paddingHorizontal: 24, paddingBottom: 20, gap: 16 }}>
-            {/* the hero: AI reads the files — no manual step */}
-            <FileDropzone
-              label="Drop the customer's files"
-              hint="Orders, invoices, spreadsheets — AI reads them and drafts the records"
-              onFiles={(fs) => {
-                setFileNames(fs.length > 0 ? fs.map((f) => f.name) : ["orders-june.pdf", "manifest.xlsx"]);
-                setPhase("analyze");
-              }}
-            />
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
-              <View style={{ flex: 1 }}><Divider /></View>
-              <Text size="xs" color="muted">or enter manually</Text>
-              <View style={{ flex: 1 }}><Divider /></View>
-            </View>
-            <View style={{ gap: 8 }}>
-              <CardSelectItem accessibilityLabel="New export case" onPress={() => { setVariant("export"); setPhase("form"); }} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
-                <Icon name="arrow-up" size={18} color={colors.zinc[700]} />
-                <View style={{ flex: 1, gap: 2 }}>
-                  <Text size="sm" weight="semibold">Export case</Text>
-                  <Text size="xs" color="muted">Outbound paperwork — the record seeds the customs-out checklist.</Text>
+          // The WHOLE open dialog is a FileDropTarget: drag OR paste anywhere on
+          // it adds files, in BOTH modes (the ring/wash frames the dialog on drag
+          // — "drop anywhere here"). Nested with the dropzones below, which each
+          // light their own well; stopPropagation keeps one drop from double-adding.
+          <FileDropTarget onFiles={addDocs} paste style={{ paddingHorizontal: 24, paddingBottom: 20, gap: 16 }}>
+            {/* ONE dialog, TWO MODES (not two Dialogs): FILES-PRESENT shows the
+                pile + a compact add-more well + the deliberate Read; EMPTY shows
+                the big dropzone hero + the manual chooser. Dropping in either ADDS
+                files (via addDocs) — the paid AI read stays a DELIBERATE button,
+                never a side effect of a drop. A pile means the user came to
+                process files, so the manual cards fall away. */}
+            {docs.length > 0 ? (
+              <View style={{ gap: 16 }}>
+                {/* the pile, as document cards — removable, the hero at top */}
+                <FileThumbnailGrid
+                  files={docs}
+                  minItemWidth={120}
+                  onRemove={(id) => setDocs((prev) => prev.filter((d) => d.id !== id))}
+                />
+                {/* add-more is a real WELL (draggable + clickable), not a button —
+                    compact so the pile stays the hero */}
+                <FileDropzone
+                  height={96}
+                  label="Drop more files"
+                  hint="or click to add"
+                  onFiles={addDocs}
+                />
+                <Button
+                  title={`Read ${docs.length} ${docs.length === 1 ? "file" : "files"} with AI`}
+                  color="primary"
+                  onPress={() => setPhase("analyze")}
+                />
+              </View>
+            ) : (
+              <>
+                <FileDropzone
+                  label="Drop the customer's files"
+                  hint="Orders, invoices, spreadsheets — read them with AI"
+                  onFiles={addDocs}
+                />
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                  <View style={{ flex: 1 }}><Divider /></View>
+                  <Text size="xs" color="muted">or enter manually</Text>
+                  <View style={{ flex: 1 }}><Divider /></View>
                 </View>
-              </CardSelectItem>
-              <CardSelectItem accessibilityLabel="New import case" onPress={() => { setVariant("import"); setPhase("form"); }} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
-                <Icon name="arrow-down" size={18} color={colors.zinc[700]} />
-                <View style={{ flex: 1, gap: 2 }}>
-                  <Text size="sm" weight="semibold">Import case</Text>
-                  <Text size="xs" color="muted">Inbound paperwork — the record seeds the customs-in checklist.</Text>
+                <View style={{ gap: 8 }}>
+                  <CardSelectItem accessibilityLabel="New export case" onPress={() => { setVariant("export"); setPhase("form"); }} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                    <Icon name="arrow-up" size={18} color={colors.zinc[700]} />
+                    <View style={{ flex: 1, gap: 2 }}>
+                      <Text size="sm" weight="semibold">Export case</Text>
+                      <Text size="xs" color="muted">Outbound paperwork — the record seeds the customs-out checklist.</Text>
+                    </View>
+                  </CardSelectItem>
+                  <CardSelectItem accessibilityLabel="New import case" onPress={() => { setVariant("import"); setPhase("form"); }} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                    <Icon name="arrow-down" size={18} color={colors.zinc[700]} />
+                    <View style={{ flex: 1, gap: 2 }}>
+                      <Text size="sm" weight="semibold">Import case</Text>
+                      <Text size="xs" color="muted">Inbound paperwork — the record seeds the customs-in checklist.</Text>
+                    </View>
+                  </CardSelectItem>
                 </View>
-              </CardSelectItem>
-            </View>
-          </View>
+              </>
+            )}
+          </FileDropTarget>
         ) : null}
 
         {phase === "analyze" || phase === "running" ? (
@@ -1336,8 +1408,7 @@ function EnterDataDialog({ onCreate, onCreateMany }: {
           </DialogFooter>
         ) : null}
       </Dialog>
-      </ChangeReview>
-    </>
+    </ChangeReview>
   );
 }
 
@@ -1405,6 +1476,15 @@ export function TplItemList() {
     records.forEach((r) => addRow(r.khach, r.dienThoai, r.phi));
     revealNew();
   };
+  // The intake dialog is CONTROLLED here so BOTH the toolbar button and the
+  // whole-register FileDropTarget drive it: the button opens it empty, a
+  // top-level drop/paste opens it PRE-SEEDED with the dropped files (mapped to
+  // DisplayFiles so the pile shows as thumbnail cards — the paid "Read with AI"
+  // stays a deliberate button).
+  const [intakeOpen, setIntakeOpen] = useState(false);
+  const [intakeSeed, setIntakeSeed] = useState<DisplayFile[]>([]);
+  const openIntake = () => { setIntakeSeed([]); setIntakeOpen(true); };
+  const openIntakeSeeded = (dropped: File[]) => { setIntakeSeed(toDisplayFiles(dropped)); setIntakeOpen(true); };
   const [sort, setSort] = useState<SortState | null>(null);
   const [assignee, setAssignee] = useState<string[]>([]);
   const [feeStatus, setFeeStatus] = useState<"paid" | "unpaid" | null>(null);
@@ -1475,6 +1555,17 @@ export function TplItemList() {
 
   return (
     <View style={{ flex: 1 }}>
+    {/* WHOLE-SURFACE INTAKE — the standard this template DEMONSTRATES: the ENTIRE
+        register page is one `FileDropTarget`, so a file dropped or a Ctrl/Cmd+V
+        pasted ANYWHERE on the register opens the intake dialog PRE-SEEDED with
+        those files (list-first — the paid "Read with AI" stays a button). No
+        `disabled`: the intake's own inner `FileDropzone` and the record drawer's
+        Files section are later-mounted paste sinks, so while either is open the
+        paste routes THERE (top of stack); a nested drop is stopPropagation-safe.
+        `flex:1` keeps the ScrollView filling the page (the bar + drawer overlay
+        on top); the accent ring frames the page on drag. A real app opts in
+        per-app — this page is the reference shape. */}
+    <FileDropTarget onFiles={openIntakeSeeded} paste style={{ flex: 1 }}>
     <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 1040, alignSelf: "center", gap: 16 }}>
         {/* header — title only; the New case action lives on the toolbar row */}
@@ -1546,7 +1637,9 @@ export function TplItemList() {
               onChange={(v) => { setFeeAmount(v); setPage(0); }}
             />
           </View>
-          <EnterDataDialog onCreate={createRecord} onCreateMany={createRecordsBulk} />
+          {/* the intake TRIGGER — the register's whole-surface drop/paste opens
+              the same dialog (see the FileDropTarget wrapper below) */}
+          <Button title="Enter data" color="primary" onPress={openIntake} />
         </View>
 
         {/* light summary of the filtered register (search/assignee/fee applied; status counts stay visible across tabs) */}
@@ -1603,6 +1696,11 @@ export function TplItemList() {
         </View>
       </View>
     </ScrollView>
+    </FileDropTarget>
+
+      {/* the intake dialog — CONTROLLED, driven by the toolbar button AND the
+          whole-register drop/paste above (opened seeded with the dropped files) */}
+      <EnterDataDialog open={intakeOpen} onOpenChange={setIntakeOpen} seedDocs={intakeSeed} onCreate={createRecord} onCreateMany={createRecordsBulk} />
 
       {/* bulk action over the ticked cases — the shared floating bar */}
       <FloatingActionBar

package/examples/tpl_record.tsx

@@ -54,6 +54,7 @@ import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
 import { DangerZone } from "@lotics/ui/danger_zone";
 import { FileRow } from "@lotics/ui/file_row";
 import { pickFiles } from "@lotics/ui/file_picker";
+import { FileDropTarget } from "@lotics/ui/file_drop_target";
 import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Finding, FindingComparison } from "@lotics/ui/finding";
@@ -881,6 +882,20 @@ export function TplRecord() {
   const [fieldDecisions, setFieldDecisions] = useState<Record<string, "kept" | "dropped">>({});
 
   const openAi = () => { setPicked(files.filter((f) => sel.has(f.id))); setUploadFlow(false); setAiOpen(true); };
+  // THE standard files intake — one handler, three ways in: the Documents
+  // section's Add-files CTA, a drag anywhere onto the record, and Ctrl/Cmd+V.
+  // The last two ride the WHOLE-RECORD `<FileDropTarget paste>` that wraps the
+  // section stack (see the render) — a drop/paste ANYWHERE on the surface, not
+  // only the Documents section, lands here. Every record surface should carry
+  // all three; the user never hunts for a dropzone. All three land in the same
+  // PENDING fork dialog — saving stays a decision. The target is `disabled`
+  // while the dialog is open so a paste can't start a SECOND one.
+  const intakeFiles = (chosen: File[]) => {
+    if (chosen.length === 0) return;
+    setPicked(chosen.map((f, i) => ({ id: `added-${f.name}-${i}`, name: f.name, mimeType: f.type || "application/pdf", kind: (f.type || "application/pdf").split("/")[1]?.toUpperCase().slice(0, 4) ?? "FILE", sizeKB: Math.round(f.size / 1024), added: "just now", addedAt: 999 })));
+    setUploadFlow(true);
+    setAiOpen(true);
+  };
   // The upload path's save: pending picked files land on the record only here.
   const commitUpload = () => setFiles((fs) => [...fs, ...picked.filter((p2) => !fs.some((f) => f.id === p2.id))]);
   const closeAi = () => {
@@ -1405,6 +1420,16 @@ export function TplRecord() {
         </View>
       ) : (
       <>
+      {/* WHOLE-SURFACE INTAKE — the standard this template DEMONSTRATES: the
+          ENTIRE record body is one `FileDropTarget`, so a file dropped or a
+          Ctrl/Cmd+V pasted ANYWHERE on the record (not just the Documents
+          section) is captured and routed to `intakeFiles` — the pending fork
+          dialog opens (extract vs save, a decision). `flex:1, minWidth:0`
+          preserves the reading column's flex/scroll; `disabled` while the
+          dialog is open so a paste can't start a SECOND one; the accent ring
+          frames the whole column on drag ("drop anywhere here"). A real app
+          author opts in per-app — the section stack is the reference shape. */}
+      <FileDropTarget onFiles={intakeFiles} accept="application/pdf,image/*" paste disabled={aiOpen} style={{ flex: 1, minWidth: 0 }}>
       {/* the page column is a SectionStack — it owns the 56px beat + the
           hairline BETWEEN top-level blocks (a conditional block that renders
           null never leaves a stray divider) */}
@@ -1868,11 +1893,16 @@ export function TplRecord() {
         </View>
 
         {/* DOCUMENTS — the document desk: the register Table (search · Create
-            documents · Add files) whose selection feeds the Use-AI fork below. */}
+            documents · Add files) whose selection feeds the Use-AI fork below.
+            No FileDropTarget of its OWN — the WHOLE-RECORD target above already
+            captures a drop/paste here (and everywhere else on the surface); this
+            section keeps only its explicit Add-files CTA and the affordance line. */}
         <View onLayout={nav.register("documents")}>
         <Section>
           <SectionHeading>
-            <SectionHeadingTitle>Documents</SectionHeadingTitle>
+            {/* The standard files-section affordance line — drag / paste / click
+                stay discoverable even though the drop target is the whole record. */}
+            <SectionHeadingTitle description="Drag, paste, or click to add files">Documents</SectionHeadingTitle>
           </SectionHeading>
           {/* toolbar — search LEFT, the CTAs RIGHT, one row (the register band). */}
           <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
@@ -1887,20 +1917,14 @@ export function TplRecord() {
             <View style={{ flex: 1 }} />
             {/* no Create here — GENERATION lives in the Document set section
                 below (this desk = intake) */}
+            {/* PENDING until the user chooses: saving is a decision the dialog
+                asks for (save only / run a task), never a side effect of
+                picking — closing the dialog discards. */}
             <Button
               title="Add files"
               color="secondary"
               onPress={() => {
-                void pickFiles({ accept: "application/pdf,image/*", multiple: true }).then((chosen) => {
-                  if (chosen.length === 0) return;
-                  const added = chosen.map((f, i) => ({ id: `added-${f.name}-${i}`, name: f.name, mimeType: f.type || "application/pdf", kind: (f.type || "application/pdf").split("/")[1]?.toUpperCase().slice(0, 4) ?? "FILE", sizeKB: Math.round(f.size / 1024), added: "just now", addedAt: 999 }));
-                  // PENDING until the user chooses: saving is a decision the
-                  // dialog asks for (save only / run a task), never a side
-                  // effect of picking — closing the dialog discards.
-                  setPicked(added);
-                  setUploadFlow(true);
-                  setAiOpen(true);
-                });
+                void pickFiles({ accept: "application/pdf,image/*", multiple: true }).then(intakeFiles);
               }}
             />
           </View>
@@ -2457,6 +2481,7 @@ export function TplRecord() {
         </Section>
         </View>
       </SectionStack>
+      </FileDropTarget>
       </>
       )}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "14.3.1",
+  "version": "15.1.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -21,6 +21,15 @@
     "./comments_thread": "./src/comments_thread.tsx",
     "./file_badge": "./src/file_badge.tsx",
     "./file_dropzone": "./src/file_dropzone.tsx",
+    "./file_intake": "./src/file_intake.ts",
+    "./file_drop_target": {
+      "react-native": "./src/file_drop_target.tsx",
+      "default": "./src/file_drop_target.web.tsx"
+    },
+    "./use_paste_files": {
+      "react-native": "./src/use_paste_files.ts",
+      "default": "./src/use_paste_files.web.ts"
+    },
     "./file_thumbnail": "./src/file_thumbnail.tsx",
     "./file_row": "./src/file_row.tsx",
     "./file_rows": "./src/file_rows.tsx",
@@ -80,6 +89,8 @@
     "./activity_indicator": "./src/activity_indicator.tsx",
     "./agent_run": "./src/agent_run.tsx",
     "./agent_progress": "./src/agent_progress.tsx",
+    "./approval_prompt": "./src/approval_prompt.tsx",
+    "./message_actions": "./src/message_actions.tsx",
     "./follow_scroll": "./src/follow_scroll.tsx",
     "./markdown": {
       "react-native": "./src/markdown.tsx",
@@ -234,6 +245,7 @@
     "src",
     "examples",
     "AGENTS.md",
+    "MIGRATION.md",
     "docs"
   ],
   "publishConfig": {

package/src/agent_progress.tsx

@@ -5,7 +5,7 @@ import { Text } from "./text";
 import { WaveAvatar } from "./wave_avatar";
 import { FollowScroll } from "./follow_scroll";
 import { PressableHighlight } from "./pressable_highlight";
-import { AgentRun, resolveToolMeta } from "./agent_run";
+import { AgentRun, resolveToolMeta, type AgentRunProps, type AgentToolCall } from "./agent_run";
 import { toSegments, lastRunningStep, type AgentUIPart } from "./agent_transform";
 
 export interface AgentProgressProps {
@@ -18,9 +18,13 @@ export interface AgentProgressProps {
   /** The collapsed-pill label. Defaults to the running step's label (or
    *  "Working…" / "Done"). */
   label?: string;
-  /** Localize / override a tool step's label by raw tool name — applied to both
-   *  the collapsed pill and the expanded feed. */
-  labelForTool?: (toolName: string) => string | undefined;
+  /** Localize / override a tool step's label from the CALL — applied to both the
+   *  collapsed pill and the expanded feed. */
+  labelForCall?: (call: AgentToolCall) => string | undefined;
+  /** Replace a tool step's default output panel in the expanded feed. */
+  renderToolOutput?: AgentRunProps["renderToolOutput"];
+  /** Retry action under the expanded feed's terminal error row. */
+  onRetry?: () => void;
   /** Localized "{n} steps" suffix, forwarded to the expanded feed. */
   stepsLabel?: (n: number) => string;
   defaultExpanded?: boolean;
@@ -35,11 +39,11 @@ export interface AgentProgressProps {
  * label, so the surface stays calm until you ask to see the steps.
  */
 export function AgentProgress(props: AgentProgressProps) {
-  const { parts, state = "streaming", error, label, labelForTool, stepsLabel, defaultExpanded } = props;
+  const { parts, state = "streaming", error, label, labelForCall, renderToolOutput, onRetry, stepsLabel, defaultExpanded } = props;
   const [expanded, setExpanded] = useState(defaultExpanded ?? false);
 
   const running = lastRunningStep(toSegments(parts));
-  const runningLabel = running ? resolveToolMeta(running.toolName, labelForTool).label : undefined;
+  const runningLabel = running ? resolveToolMeta({ toolName: running.toolName, input: running.input, state: running.status }, labelForCall).label : undefined;
   const compact = label ?? runningLabel ?? (state === "done" ? "Done" : state === "error" ? "Stopped" : "Working…");
   const streaming = state === "streaming";
 
@@ -50,7 +54,7 @@ export function AgentProgress(props: AgentProgressProps) {
           {/* FollowScroll keeps the newest step in view as the run streams —
               a plain ScrollView would let new content grow below the fold. */}
           <FollowScroll style={{ maxHeight: 260 }} contentContainerStyle={{ padding: 16 }}>
-            <AgentRun parts={parts} state={state} error={error} labelForTool={labelForTool} stepsLabel={stepsLabel} />
+            <AgentRun parts={parts} state={state} error={error} labelForCall={labelForCall} renderToolOutput={renderToolOutput} onRetry={onRetry} stepsLabel={stepsLabel} />
           </FollowScroll>
         </View>
       ) : null}