Blob List Item

BlobListItem renders one blob as a list row: title, visibility and “Child” badges, a short preview, media thumbnails, updated time and size, and optional actions at the end.

Used by:

Dashboard list view — through BlobRow, which adds inline expand, drag and drop, and file drop around it.
Children drawer — compact, with the content-type icon and a ”…” menu.

Usage

import { BlobListItem } from '@blobs/sdk-solid';

// Dashboard style: open + copy-link buttons
<BlobListItem
  blob={blob}
  sdk={sdk}
  onClick={(b) => openBlob(b)}
  actions={['open', 'copyLink']}
/>

// Children-drawer style: compact, type icon, menu
<BlobListItem
  blob={child}
  density="compact"
  showTypeIcon
  showThumbnails={false}
  onClick={(b) => openBlob(b)}
  menuActions={['open', 'copyLink', 'removeChild']}
  onAction={(action, b) => action === 'removeChild' && removeChild(b)}
/>

Props

Name	Type	Default	Description
`blob`required	`Blob`	—	—
`onClick`	`(blob: Blob, event: MouseEvent \| KeyboardEvent) => void`	—	Row click (the whole row is the target).
`onAction`	`(action: BlobListItemActionId, blob: Blob, event: MouseEvent) => void`	—	Built-in action handler (`edit`, `favorite`, `share`, `delete`, `removeChild`, `detach`, and `open` when set).
`sdk`	`BlobsInstance`	—	SDK, for thumbnail URLs. Without it no thumbnails render.
`network`	`string`	—	—
`showTypeIcon`	`boolean`	—	Content-type icon at the start of the row. Default false.
`showPreview`	`boolean`	—	Preview text / markdown under the title. Default true.
`previewLines`	`number`	—	Preview lines before it fades / ellipsises. Default 2.
`showThumbnails`	`boolean`	—	Media thumbnails. Default true.
`maxThumbnails`	`number`	—	Thumbnails before "+N". Default 4.
`showMeta`	`boolean`	—	Updated time + size. Default true.
`showVisibility`	`boolean`	—	Public / private icon. Default true.
`showChildBadge`	`boolean`	—	"Child" badge on blobs with a parent. Default true.
`density`	`'comfortable' \| 'compact'`	—	`comfortable` (dashboard) or `compact` (nested lists). Default `comfortable`.
`actions`	`readonly BlobListItemAction[]`	—	Icon buttons at the end of the row, in order.
`menuActions`	`readonly BlobListItemAction[]`	—	Entries of the "…" menu. The menu button shows only when this is non-empty.
`leading`	`JSX.Element`	—	Before everything else (e.g. a selection checkbox).
`selected`	`boolean`	—	Selected styling.
`class`	`string`	—	Extra class on the root.

Source: components/core/BlobListItem/BlobListItem.tsx:69

Actions

actions render as icon buttons at the end of the row. menuActions render in a ”…” menu, and the menu button shows only when that list is not empty. Both take built-in ids and custom actions, in any mix and order.

Built-in actions. open and copyLink work on their own; the rest call onAction.

One of: 'open' · 'copyLink' · 'edit' · 'favorite' · 'share' · 'delete' · 'removeChild' · 'detach'

Id	Default behaviour
`open`	Calls `onAction('open')` when `onAction` is set. Otherwise opens `/blob/{id}` in a new tab.
`copyLink`	Copies the blob’s page URL. The icon and label show “Copied” briefly.
`edit`, `favorite`, `share`, `delete`, `removeChild`, `detach`	Call `onAction(id, blob, event)`. `delete` and `removeChild` use the danger style.

A custom action runs its own onSelect:

menuActions={['open', { id: 'pin', label: 'Pin', icon: <PinIcon size={16} />, onSelect: (b) => pin(b) }]}

A custom action.

Name	Type	Default	Description
`id`required	`string`	—	—
`label`required	`string`	—	—
`icon`	`JSX.Element`	—	—
`danger`	`boolean`	—	Red styling (destructive).
`onSelect`required	`(blob: Blob, event: MouseEvent) => void`	—	—

Source: components/core/BlobListItem/BlobListItem.tsx:58

Notes

Preview. A blob with type_hint: markdown shows rendered markdown (MarkdownExcerpt: sanitized, with inactive links and mention chips) that fades out after previewLines lines. Other blobs show plain text, cut off with an ellipsis.
The menu is not clipped. It renders in a portal on <body> with fixed positioning, so a scrolling or clipping parent (such as the Children drawer) cannot hide it. It opens upward near the bottom of the screen and closes on Escape, an outside click, scroll or resize.
Clicks. The whole row is the click target, and it is keyboard focusable (Enter or Space). Action buttons and menu items do not trigger the row click.
Children drawer menu. It offers Open in full page and Copy link. Editors also get Detach (make root), which clears the parent link (sdk.blobs.removeChild(parentId, childId, false)), and Delete, which deletes the child after a confirmation dialog (removeChild(…, true)). The list and the Children count refresh after either one.
Selection. Pass a checkbox as leading and set selected, as the Children drawer does in manage mode. The row stays left-aligned and full width.
Hover. The row is raised in place with a border, shadow and background change. It does not move.
Mobile (≤ 768px). The row stacks into two lines: title, preview and thumbnails on top, then metadata and actions.
Theming. The row uses the card tokens (--surface-card, --surface-card-hover, --color-border, --color-text-title, …), plus --blob-list-item-padding and --blob-list-item-gap.
BlobsListItem (the old row) is deprecated. It is now a thin wrapper around this component.