Details

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.

import { Files } from "@tilt-legal/cubitt-components/files";
import { Separator } from "@tilt-legal/cubitt-components/separator";

<Files
  detailsItem={currentDirectory}
  items={items}
  onRename={renameItem}
  selectedIds={selectedIds}
>
  <Files.Details>
    <Files.Details.Icon />
    <Files.Details.Header>
      <Files.Details.Heading>
        <Files.Details.Name />
        <Files.Details.Type />
      </Files.Details.Heading>
      <Files.Details.EditNameButton />
    </Files.Details.Header>

    <Files.Details.Panels defaultValue="details">
      <Files.Details.Panel label="Details" value="details">
        <Separator />

        <Files.Details.Properties>
          <Files.Details.Property>
            <Files.Details.Property.Label>Owner</Files.Details.Property.Label>
            <Files.Details.Property.Value>
              {detailsItem?.source.owner}
            </Files.Details.Property.Value>
          </Files.Details.Property>

          <Files.Details.Property>
            <Files.Details.Property.Label>Status</Files.Details.Property.Label>
            <Files.Details.Property.Value>
              {detailsItem?.source.status}
            </Files.Details.Property.Value>
          </Files.Details.Property>
        </Files.Details.Properties>
      </Files.Details.Panel>

      <Files.Details.Panel label="Transcription" value="transcription">
        {transcriptControls}
        {transcriptContent}
      </Files.Details.Panel>
    </Files.Details.Panels>
  </Files.Details>
</Files>;

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

Prop	Type	Notes
`children`	`ReactNode`	Explicit detail layout composed from the details slots.

Files.Details also forwards normal aside props.

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.

Details

Props

Slots

On this page