MediaLibrary

MediaLibrary é a biblioteca de arquivos do painel. A área principal mostra os arquivos em grade, e o formulário de envio. Ao lado, a coluna «Detalhe do arquivo» (ui/panel/media-library.ts:224) mostra o arquivo escolhido: o texto alternativo e o ponto focal, quando a tela deixa editar, o uso do arquivo e o botão de exclusão.

Quando usar

Use quando a tela precisar de um seletor ou de uma biblioteca de imagens. Se a tela só escolhe uma imagem para um campo, passe useHref: cada imagem ganha o link «Usar esta imagem», e a tela recebe a escolha de volta (ui/panel/media-library.ts:68).

Regras de exibição:

• Sem texto alternativo, o cartão diz «Sem texto alternativo» (ui/panel/media-library.ts:115).
• Sem arquivos, a grade mostra «Nenhuma mídia enviada ainda.» (ui/panel/media-library.ts:129).
• O uso aparece como «Onde é usado», com a lista de registros que usam o arquivo, ou «Não está em uso.» quando a lista está vazia (ui/panel/media-library.ts:143 a :145). Se você não passar usage, a coluna não diz nada sobre uso.
• A edição do detalhe tem texto alternativo e ponto focal horizontal e vertical, em porcentagem, com o botão «Salvar» (ui/panel/media-library.ts:196).
• O campo de envio é o controle de arquivo nativo do navegador: o texto «Escolher arquivo» e «Nenhum arquivo escolhido» segue o idioma do navegador, não o do painel.
• A exclusão não é direta: a tela abre uma confirmação. Em panel/screens/site/midia.ts:134, o texto do botão de confirmação é «Excluir arquivo».

Onde aparece no painel

A tela Mídia (/painel/midia) monta a biblioteca em panel/screens/site/midia.ts:143, com o título «Mídia» em panel/screens/site/midia.ts:167. A mesma tela serve de seletor quando outra tela pede uma imagem: o parâmetro de escolha vira o useHref das imagens (panel/screens/site/midia.ts:150).

Variantes e propriedades

MediaLibrary

Pasta: ui/panel

Variantes

Id	Variante	Tom
media-library-selected-light	selected	light
media-library-selected-dark	selected	dark
media-library-editing-light	editing	light
media-library-editing-dark	editing	dark

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
items	readonly MediaLibraryItem[]	Sim	—
selected	string	Não	Id of the item shown in the rail.
uploadAction	string	Sim	Target of the multipart POST upload form.
csrf	string	Sim	—
pagination	Pagination	Sim	—
itemHref	(id: string) => string	Sim	Link of an item card (the screen reads the selection from it).
errors	Readonly<Record<string, string>>	Não	Messages by field name (`file`, `alt`); the `form` key is the message of the whole form.
edit	MediaEditProps	Não	Makes the rail editable (alt text and focal point).
remove	{ readonly href: string; }	Não	Where the delete confirmation of the selected item lives.
usage	readonly MediaUsageRef[]	Não	Records that use the selected item; absent: the rail says nothing about use.
useHref	(id: string) => string	Não	Picking mode (a screen asked for an image): link of «Usar esta imagem» on each image; absent: no such link.

Captura

A primeira variante do catálogo, com um arquivo selecionado, em 1280 px:

A mesma variante em 360 px:

Origem

• ui/panel/media-library.ts: MediaLibrary, MediaLibraryItem, MediaEditProps e MediaLibraryProps.
• ui/panel/media-library.gallery.ts: as variantes do catálogo.
• panel/screens/site/midia.ts: a tela Mídia e o modo de escolha.