`Files.Details` is a compound metadata surface for the current Files selection. Cubitt owns display mechanics, icon stacking, the fixed icon/header layout, the scrollable details body, property row styling, and inline rename UI. Consumers own the item data, selected IDs, current directory item, renaming mutation, metadata values, actions, panel state, and persistence. ```tsx import { Files } from "@tilt-legal/cubitt-components/files"; import { Separator } from "@tilt-legal/cubitt-components/separator"; Owner {detailsItem?.source.owner} Status {detailsItem?.source.status} {transcriptControls} {transcriptContent} ; ``` `Files.Details.Icon` renders the single item icon for one selected item and a stacked icon group for multiple selected items. `Files.Details.Name` renders an inline rename field only while a single item is being renamed. Use the edit button to enter rename mode with the filename selected. Blur, Enter, deselecting the item, or the save button submits; Escape cancels the draft. `Files.Details` reads selected item data from the nearest `Files` root. Pass `items` to `Files` when selected IDs need to resolve without relying on mounted items. Pass `detailsItem` to `Files` for the no-selection spotlight, usually the current directory. Use `Files.Details.Panels` for the scrollable content below the icon and header. Tabs render only when more than one `Files.Details.Panel` is provided, so a single metadata panel does not add tab chrome. Actions such as download, archive, delete, open, or share are intentionally not included. Compose those in the surrounding toolbar, panel, or context menu. ## Props [#props] | Prop | Type | Notes | | ---------- | ----------- | ------------------------------------------------------- | | `children` | `ReactNode` | Explicit detail layout composed from the details slots. | `Files.Details` also forwards normal `aside` props. ## Slots [#slots] | Slot | Behavior | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------ | | `Files.Details.Icon` | Renders a single icon or a multi-select icon stack. | | `Files.Details.Header` | Layout wrapper for name, type, and rename controls. | | `Files.Details.Panels` | Scrollable details content region. Hides tabs when it has one panel. | | `Files.Details.Panel` | Named details panel with `label` and `value`. Content can include properties, transcript text, or custom controls. | | `Files.Details.Heading` | Wrapper for the name and type slots. | | `Files.Details.Name` | Shows the item name, rename input while editing, or “N items selected”. | | `Files.Details.Type` | Shows the type label, or `Multiple item types` for mixed selections. | | `Files.Details.EditNameButton` | Starts rename mode, selects the filename, then becomes the save button while the draft has changes. | | `Files.Details.Properties` | Layout wrapper for metadata rows. | | `Files.Details.Property` | Metadata row wrapper. Consumer supplies label and value slots. | | `Files.Details.Property.Label` | Metadata label slot. | | `Files.Details.Property.Value` | Metadata value slot. Accepts text, badges, actions, or other inline content. |