4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T1e89,"use client"; import * as React from "react"; import { FileText, WrapText } from "lucide-react"; import { cn } from "@/lib/utils"; import { FileViewer, FileViewerContent, FileViewerControls, FileViewerHeader, FileViewerInset, FileViewerProvider, FileViewerSidebar, FileViewerSidebarContent, FileViewerSidebarTrigger, FileViewerTitle, FileViewerViewport, } from "@/components/ui/file-viewer"; import { TextViewer } from "@/components/ui/text-viewer"; import { SEGMENT_PALETTE } from "@/lib/segments"; import txtOutputs from "@/components/viewers/sample-data/txt-splitting.json"; const SOURCE_ID = "source"; const SOURCE_NAME = "intake-batch.txt"; const TEXT_URL = "/samples/intake-batch.txt"; const SOURCE_SOURCE = { kind: "url" as const, url: TEXT_URL, fileName: SOURCE_NAME, }; type TxtId = keyof typeof txtOutputs; /** * One document the text splitter carved out of the batch file. `kind` is the * document type it was classified as; `detection` is the boundary cue that * separated it from its neighbours. The document text itself lives in the * sample-data JSON, keyed by `id`. */ type TxtOutput = { id: TxtId; fileName: string; kind: string; detection: string; }; const TXT_OUTPUTS: TxtOutput[] = [ { id: "cover-letter", fileName: "cover-letter.txt", kind: "Cover letter", detection: "Salutation and signature block", }, { id: "invoice", fileName: "invoice.txt", kind: "Invoice", detection: "Invoice number and line-item table", }, { id: "delivery-receipt", fileName: "delivery-receipt.txt", kind: "Delivery receipt", detection: "Received-by header and gate pass", }, { id: "purchase-order", fileName: "purchase-order.txt", kind: "Purchase order", detection: "PO number and not-to-exceed amount", }, ]; // Stable {kind:"text"} source per document so selecting one swaps the viewer // without re-creating the resource on every render. const TXT_SOURCE_BY_ID = new Map( TXT_OUTPUTS.map((output) => [ output.id, { kind: "text" as const, text: txtOutputs[output.id], fileName: output.fileName, }, ]), ); function lineCount(id: TxtId) { return txtOutputs[id].split("\n").length; } function outputColor(index: number) { return SEGMENT_PALETTE[index % SEGMENT_PALETTE.length]; } /** * Text splitting block — one plain-text batch file separated into several * documents. A left sidebar lists the source file first, then every document * the splitter carved out. Selecting an entry swaps the viewer to that * document: the full batch file for the source, each carved-out text otherwise. */ export function TxtSplittingViewerBlock() { const [activeId, setActiveId] = React.useState(SOURCE_ID); const isSource = activeId === SOURCE_ID; const activeSource = isSource ? SOURCE_SOURCE : TXT_SOURCE_BY_ID.get(activeId as TxtId)!; return (

Split output

Source file → {TXT_OUTPUTS.length} documents

setActiveId(SOURCE_ID)} />
Split documents
setActiveId(output.id)} />

); } /** The source batch file — the first sidebar entry. */ function SourceRow({ active, onSelect, }: { active: boolean; onSelect: () => void; }) { return ( ); } /** One carved-out document in the sidebar. */ function TxtOutputRow({ output, color, lines, active, onSelect, }: { output: TxtOutput; color: string; lines: number; active: boolean; onSelect: () => void; }) { return ( ); } 52:T997,{ "cover-letter": "COVER LETTER\n\nAtlas Freight Solutions\n118 Harbor Way, Oakland, CA 94607\n\nJune 8, 2026\n\nTo the Accounts Payable team at Acme Logistics,\n\nPlease find enclosed our invoice for the May haulage window,\nthe matching delivery receipt, and the original purchase order\nyour team issued in April. All three reference PO-4471.\n\nWe have applied the 2% early-settlement discount agreed in the\nmaster services agreement. Payment terms remain net 30 from the\ninvoice date. Reach out to billing@atlasfreight.example with any\nquestions.\n\nKind regards,\nDana Whitfield\nBilling Lead, Atlas Freight Solutions", "invoice": "INVOICE\n\nAtlas Freight Solutions Invoice #: INV-2026-0559\n118 Harbor Way Invoice date: 2026-06-08\nOakland, CA 94607 Terms: Net 30\n Reference: PO-4471\n\nBill to:\n Acme Logistics\n 900 Cannery Row, Monterey, CA 93940\n\nLine items:\n Long-haul freight, Oakland to Reno 12 loads $ 9,600.00\n Fuel surcharge 12 loads $ 1,140.00\n Detention time 6 hours $ 450.00\n Pallet exchange fee 220 units $ 330.00\n\n Subtotal $11,520.00\n Early-settlement discount (2%) $ -230.40\n Tax (8.5%) $ 959.42\n Total due $12,249.02", "delivery-receipt": "DELIVERY RECEIPT\n\nReceived by: Acme Logistics receiving dock 3\nDate/time: 2026-05-29 14:12 PDT\nDriver: M. Okonkwo, unit 22\nReference: PO-4471 / INV-2026-0559\n\nCondition on arrival: 12 of 12 loads intact, seals unbroken.\nTwo pallets flagged for re-wrap, noted on gate pass.\nTemperature log within range for the full transit window.\n\nReceiving signature: J. Alvarez\nGate pass: GP-88231", "purchase-order": "PURCHASE ORDER\n\nPurchase Order: PO-4471 Issued: 2026-04-15\nBuyer: Acme Logistics Approved by: R. Nguyen\nVendor: Atlas Freight Solutions Cost center: LOG-WEST\n\nScope:\n Contracted long-haul freight, Oakland to Reno corridor,\n up to 12 loads for the May 2026 window, with fuel surcharge\n billed at the published monthly index.\n\nNot-to-exceed amount: $13,000.00\nDelivery-by: 2026-05-31\nSpecial terms: 2% discount if settled within 10 days of invoice." } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["@retab/file-viewer","@retab/text-viewer","@retab/segments"]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.retab.com/r/txt-splitting-viewer-block.json","proxyUrl":"https://shadcnregistry.com/r/retab/txt-splitting-viewer-block","itemId":"@retab/txt-splitting-viewer-block"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/new-york-v4/blocks/txt-splitting-viewer-block.tsx","content":"$51","type":"registry:component","target":"@components/blocks/txt-splitting-viewer-block.tsx"},{"path":"components/viewers/sample-data/txt-splitting.json","content":"$52","type":"registry:file","target":"@components/viewers/sample-data/txt-splitting.json"}]}]]}],"$L53"]}]

Text Splitting

Installation

Files

@components

Styles