Sistema de design Adobe Spectrum.

Nome / Regra	Valor / Configuração	Uso
`theme`	`defaultTheme`	Objeto de tema raiz obrigatório, importado de @adobe/react-spectrum.
`colorScheme`	`light \| dark`	Substituição explícita da preferência do sistema operacional.
`scale`	`medium \| large`	Escala para ponteiros finos ou grosseiros; normalmente, deixe o Provider escolher.
`locale`	`BCP 47 language tag`	Contexto de localidade e direção de escrita.
`breakpoints`	`custom name → pixel width`	Este guia define explicitamente tablet: 640 e desktop: 1024, evitando padrões conflitantes na página de referência.
`isDisabled / isReadOnly`	`boolean group defaults`	Providers aninhados e props individuais podem substituir o comportamento do grupo.

Mapeamentos de dimensão de base

Nome / Regra	Valor / Configuração	Uso
`size-50`	`4px base`	Pequeno espaçamento.
`size-100`	`8px base`	Controles relacionados.
`size-150`	`12px base`	Espaçamento da barra de ferramentas.
`size-200`	`16px base`	Espaçamento entre grupos do inspetor.
`size-250`	`20px base`	Espaçamento intermediário.
`size-300`	`24px base`	Recuo do painel.
`size-400`	`32px base`	Agrupamento mais amplo.
`size-500`	`40px base`	Separação entre seções.
`size-600`	`48px base`	Estrutura ampla.
`size-1000`	`80px base`	Área de ilustração com tamanho fixo.
`size-2400`	`192px base`	Largura de exemplo do inspetor.
`size-6000`	`480px base`	Superfície ampla com limites definidos.

Props de estilo e valores adaptáveis

Nome / Regra	Valor / Configuração	Uso
`marginStart / marginEnd`	`DimensionValue`	Espaçamento lógico; prefira-o a left/right para oferecer suporte à direção de escrita.
`padding / backgroundColor`	`View style props`	Crie uma superfície externa personalizada em vez de substituir os elementos internos dos controles nativos.
`width`	`size-* \| CSS length \| calc(...)`	Exemplo: calc(100% - size-2000).
`responsive value`	`{base: value, tablet: value}`	As chaves correspondem aos breakpoints explícitos do Provider.
`UNSAFE_style / UNSAFE_className`	`last-resort escape hatch`	Não dependa do DOM nem dos estilos privados dos componentes.
`single-line-height`	`32 base mapping`	Use a dimensão semântica em vez de afirmar que todos os controles têm sempre 32 px.

Contrato de seleção da coleção

Nome / Regra	Valor / Configuração	Uso
`selectionMode`	`none \| single \| multiple`	O exemplo usa multiple para selecionar um lote.
`selectedKeys`	`Set of row keys \| all`	O estado controlado precisa tratar o valor especial all.
`onSelectionChange`	`callback with selection`	Não interprete a seleção como aprovação nem como confirmação de exportação.
`disallowEmptySelection`	`boolean`	Útil quando uma seleção única é obrigatória; omitido para lotes de exportação opcionais.
`TableHeader → Column`	`column anatomy`	Use chaves estáveis para as colunas na renderização dinâmica.
`TableBody → Row → Cell`	`row anatomy`	Os IDs dos registros estabelecem uma identidade estável para a coleção.

Composição de Picker e texto

Nome / Regra	Valor / Configuração	Uso
`label`	`persistent text`	Dê um nome ao seletor de formato de exportação.
`selectedKey`	`one item key`	Formato controlado, como png ou jpeg.
`onSelectionChange`	`key callback`	Contrato diferente do de um manipulador de eventos do DOM.
`Item key`	`stable key`	Identidade do valor independente do rótulo visível.
`Heading level`	`1–6`	Nível semântico do título; a estilização nativa depende do contexto.
`Button onPress`	`press callback`	Ativação por diferentes tipos de entrada, em vez de uma ação personalizada que funciona apenas com o mouse.

Adobe Spectrum Guia completo do sistema de design

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

DESIGN-adobe-spectrum.md

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

Baixar o guia

Sistema de design Adobe Spectrum: escolha a v3 de forma intencional; não misture gerações do Spectrum

O que este exemplo instala

A Adobe agora documenta o Spectrum 2 junto com a biblioteca v3. Esta página escolhe @adobe/react-spectrum@3 porque os contratos de Provider, coleção e props de estilo formam um exemplo completo e documentado de revisão de ativos. Uma receita para v3 é útil em uma aplicação v3 existente, mas não deve ser apresentada como a implementação mais recente do Spectrum. Antes de decidir por uma nova adoção, consulte a referência de migração vinculada para escolher uma geração.
Com base neste guia de OpenDesign

A diferença prática fica evidente no código. A v3 passa size-300 por meio das props de estilo e fornece defaultTheme ao Provider. O guia de migração mapeia essas convenções para um API de estilização diferente. Trocar apenas o nome do pacote não migraria o exemplo; é preciso revisar em conjunto as importações de componentes, a estilização e as propriedades compatíveis.

Adobe Spectrum O Provider do sistema de design coordena aparência, escala e localidade

Uma raiz, várias configurações independentes

O Provider estabelece o ambiente usado pela tabela, pelo seletor e pelo botão. O objeto de tema reúne as definições de esquema de cores e escala. colorScheme pode substituir a preferência do sistema operacional, enquanto scale considera as características dos dispositivos de entrada. São configurações distintas: uma superfície escura no desktop não exige alvos de toque grandes, e uma tela sensível ao toque clara não deve herdar acidentalmente um layout denso, pensado para o mouse.

Em uso normal na produção, deixe a escala no modo automático. Em um estudo de componentes, escolher explicitamente medium ou large pode ajudar a comparar os controles, mas isso deve ser descrito como uma configuração de inspeção. locale define o contexto de idioma, não traduz os dados do projeto. Os nomes de campanhas, as observações de revisão e os rótulos de receitas continuam sendo conteúdo da aplicação.

Sistema de design Adobe Spectrum: use dimensões compatíveis e props de layout externo

Uma escala nomeada é mais do que uma forma abreviada de indicar pixels

O mapeamento base de size-100 é 8, o de size-200 é 16 e o de size-300 é 24. A tabela de referência inclui outras etapas úteis. Uma dimensão size-* pode se adaptar à escala da plataforma; um valor static-size-* não se adapta intencionalmente. Mantenha essa distinção ao definir o tamanho de um inspetor ou de um alvo de interação. Copiar todos os valores resolvidos para desktop em CSS eliminaria a adaptação fornecida pelo ambiente do componente.

Flex e View dão ao exemplo uma estrutura externa estável sem reescrever os elementos internos de TableView. A tabela pode crescer com flex e encolher com minWidth={0}; no breakpoint explícito para tablet, o inspetor deixa de ser empilhado na base e passa a ter limites de tamanho. O preenchimento deve ficar no View responsável pela superfície. A documentação desaconselha substituir cores internas, bordas e tipografia por meio de mecanismos de escape não seguros.

Sistema de design Adobe Spectrum: deixe o tema controlar as cores e a tipografia nativas

Separe a paleta de demonstração da exportação de tokens

A pré-visualização tem um fundo cinza discreto, controles neutros e ilustrações coloridas originais. As cores dessas ilustrações não são valores de tokens certificados do Spectrum. No exemplo nativo, os componentes compatíveis obtêm sua aparência de defaultTheme. Uma superfície nativa personalizada deve usar os valores documentados de backgroundColor, em vez de presumir que um único hexadecimal obtido por amostragem funcione nos dois esquemas.

Heading fornece estrutura semântica e também uma apresentação Spectrum adequada ao contexto. O título da página usa level={1}; Text apresenta conteúdo comum, como a contagem de itens selecionados. A pré-visualização personalizada HTML usa uma família tipográfica de sistema escolhida pela aplicação como alternativa e tamanhos de fonte definidos por ela. É uma demonstração do fluxo de trabalho e da hierarquia relativa, não uma afirmação de que a fonte ao redor OpenDesign ou a tipografia das ilustrações siga as especificações de fonte do Spectrum.

Sistema de design Adobe Spectrum: uma tabela de coleção tem chaves, colunas e semântica de seleção

A seleção é um contrato de dados

A tabela é composta por TableHeader e Column, além de TableBody, Row e Cell. Cada ativo tem um id estável. selectedKeys e onSelectionChange tornam a seleção controlada, permitindo que o inspetor de exportação derive a contagem do mesmo estado. O usuário pode renomear um ativo sem alterar sua identidade. Usar a posição da linha como identidade tornaria a seleção frágil após a reordenação.

A seleção pode ser o valor sentinela all. A configuração resolve esse valor para todos os ativos atuais antes de criar uma receita. Um Set vazio continua válido, pois a seleção em lote é opcional; disallowEmptySelection não é ativado intencionalmente. Em uma aplicação remota ou paginada, defina o significado de all para essa fonte de dados, em vez de presumir que as linhas renderizadas atualmente correspondem à coleção completa.

Identidade do ativo: chave estável usada pela coleção.
Inspeção: qual ilustração aparece ampliada no exemplo independente.
Seleção em lote: quais chaves aparecem na receita preparada.

Sistema de design Adobe Spectrum: Picker e Button completam o inspetor de exportação

O formato é controlado independentemente do lote

Picker usa um rótulo visível e chaves Item estáveis. selectedKey recebe png ou jpeg; onSelectionChange fornece a chave selecionada. Isso é diferente de ler event.target.value de um select nativo. O formato continua selecionado quando o lote é limpo, permitindo que a pessoa revisora ajuste a seleção sem recriar uma predefinição.

Button usa onPress para ativação e isDisabled quando nenhum ativo está selecionado. O exemplo nativo serializa os IDs e o formato em uma receita local. Ele não transforma dados de imagem, gera um arquivo de exportação real nem se conecta a um serviço de ativos. Esse é um limite de implementação útil: a ação e suas entradas são concretas, embora o mecanismo de conversão esteja fora do sistema de design.

Sistema de design Adobe Spectrum Adapte a composição em vez de comprimir a arte

Especifique o contrato dos pontos de quebra

Este exemplo declara tablet:640 e desktop:1024. Essa escolha é explícita porque a página Provider apresenta atualmente padrões inconsistentes entre o texto explicativo e os metadados API gerados. Os valores responsivos se referem exatamente a essas chaves. O inspetor ocupa toda a largura no ponto de quebra base e, depois, fica ao lado da tabela flexível. A aplicação é responsável por esses pontos de quebra; eles não constituem um novo padrão universal do Spectrum.

A ilustração independente usa uma tela grande com um inspetor lateral e uma faixa de miniaturas. Em telas pequenas, o inspetor passa para o fluxo normal, e a arte mantém sua proporção. Informações como dimensões e formato ficam fora da arte, permanecem legíveis e não alteram a imagem inspecionada.

Sistema de design Adobe Spectrum Inspecionar, selecionar e preparar são ações diferentes

Torne a demonstração testável

Ao clicar em uma miniatura, a ilustração em destaque e seus metadados descritivos são alterados. Uma caixa de seleção altera o lote de exportação. Manter essas ações independentes permite inspecionar um recurso não selecionado sem exportá-lo por engano. A prévia informa a quantidade de itens selecionados e mantém o formato enquanto a pessoa revisora altera o lote.

O TableView nativo fornece a interação com a coleção; o exemplo HTML usa botões e caixas de seleção comuns e não pretende reproduzir todo o modelo de navegação por teclado da grade. Ambos oferecem um caminho de teclado para as ações demonstradas. O resultado da preparação é texto, não apenas um efeito visual temporário, para que a pessoa revisora possa conferir exatamente quais ids e formato foram preparados.

Sistema de design Adobe Spectrum Integre o componente nativo antes de ampliar a ferramenta

Conecte um serviço de exportação real em um limite explícito

Instale a versão v3 do conjunto em um app React existente e use a entrada completa abaixo. O exemplo inclui o provider, as importações, os dados da coleção, o estado de seleção, o estado do formato e o estado do resultado. Em uma integração de produção, a preparação da receita seria substituída por uma solicitação de exportação, e o resultado confirmado seria exibido para cada recurso. Não altere o nome da resposta local para Exportação concluída antes que esse serviço exista.

Ao migrar para o Spectrum 2, use os mapeamentos da Adobe para dimensões, pontos de quebra e alterações nos componentes. Verifique novamente o comportamento de seleção e a persistência do formato; uma tabela visualmente semelhante ainda pode ter um contrato diferente. Deixe explícita a geração de origem para que futuras pessoas contribuidoras não combinem um Provider v3 com exemplos incompatíveis.

Selecione um recurso e confirme que seu id aparece na receita local.
Selecione tudo, altere PNG para JPEG e confira o conjunto completo de itens selecionados.
Limpe a seleção e confirme que a ação fica desativada enquanto o formato permanece selecionado.
Reduza a largura da janela de visualização e confirme que inspeção, seleção e saída da receita continuam acessíveis.

Adobe Spectrum Exemplos de componentes do sistema de design

Exemplo interativo completo e independente

Salve o documento completo como index.html e abra-o em um navegador. Interpretação original HTML/CSS do fluxo documentado de coleção e inspeção v3. Paleta e arte são ilustrativas; não há runtime nativo do Spectrum nem conversão de imagens.

html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Spectrum asset inspector study</title><style>*{box-sizing:border-box}body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#2c2c2c;background:#f5f5f5}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #999;border-radius:16px;background:white;color:inherit;padding:5px 16px;font-weight:600}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1473e6;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}header{padding:16px 24px;background:white;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;gap:16px;align-items:center}header b{font-size:16px}header span{font-size:12px;color:#666}.workspace{display:grid;grid-template-columns:160px minmax(0,1fr) 230px;min-height:540px}.rail{padding:20px 16px;border-right:1px solid #ddd}.rail h2,.inspector h2{font-size:14px;margin:0 0 16px}.thumb{margin-bottom:20px}.thumb button{width:100%;border-radius:4px;padding:6px;background:transparent;border:2px solid transparent}.thumb button[aria-pressed=true]{border-color:#1473e6;background:#e7f1ff}.thumb label{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:6px}.thumb input{accent-color:#1473e6}.mini{height:70px;display:grid;place-items:center;font-size:26px;font-weight:800;letter-spacing:-2px;background:linear-gradient(125deg,#fcab64,#ee6e63);color:#472c52;border-radius:2px}.thumb:nth-of-type(2) .mini{background:linear-gradient(125deg,#c4bdff,#8b7ddd)}.thumb:nth-of-type(3) .mini{background:linear-gradient(125deg,#9ed5c8,#449c8c)}.canvas-wrap{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.canvas-meta{align-self:stretch;display:flex;justify-content:space-between;margin-bottom:20px;font-size:12px;color:#666;gap:12px}.art{width:min(100%,540px);aspect-ratio:4/3;background:linear-gradient(130deg,#ffbd7c,#ed8178);color:#412754;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate}.art:before{content:'';position:absolute;z-index:-1;width:70%;aspect-ratio:1;border:45px solid rgba(255,240,197,.65);border-radius:50%;left:-24%;bottom:-25%}.art:after{content:'';position:absolute;z-index:-1;width:60%;aspect-ratio:1;background:rgba(217,69,117,.32);border-radius:50%;right:-25%;top:-25%}.art small{letter-spacing:3px;font-size:11px;font-weight:700}.art h1{font-size:clamp(28px,5vw,64px);line-height:.96;margin:16px 0 18px;letter-spacing:-3px;font-weight:800}.art p{font-size:12px;margin:0}.art[data-art=square]{aspect-ratio:1;background:linear-gradient(130deg,#d8d0ff,#9588dd)}.art[data-art=story]{aspect-ratio:9/16;max-height:470px;width:auto;min-width:210px;background:linear-gradient(130deg,#caeee2,#69b7a5)}.art[data-art=story] h1{font-size:40px;letter-spacing:-2px}.canvas-note{font-size:12px;color:#666;margin-top:16px}.inspector{background:white;padding:24px 20px;border-left:1px solid #ddd}.inspector dl{margin:0 0 24px}.inspector dt{font-size:12px;color:#666;margin-top:16px}.inspector dd{margin:4px 0 0;overflow-wrap:anywhere}.inspector hr{border:0;border-top:1px solid #ddd;margin:24px 0}.inspector label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}.inspector select{width:100%;border:1px solid #999;border-radius:4px;padding:8px;background:white}.selected-count{font-size:12px;margin:16px 0}.primary{background:#1473e6;border-color:#1473e6;color:white;width:100%}.primary:hover{background:#0d66d0}.result{margin:0 24px 20px;padding:16px;background:white;border:1px solid #ddd;border-radius:4px}.result[hidden]{display:none}.result h2{font-size:16px;margin:0 0 8px}.result pre{white-space:pre-wrap;font:12px/1.5 ui-monospace,monospace}.result p{font-size:12px;margin:0}footer{padding:12px 24px;color:#666;font-size:12px;border-top:1px solid #ddd;background:white}@media(max-width:760px){.workspace{grid-template-columns:110px minmax(0,1fr)}.rail{padding:16px 8px}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid #ddd;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.inspector h2{grid-column:1/-1;margin:0}.inspector dl{margin:0}.inspector hr{display:none}.canvas-wrap{padding:16px}.art h1{letter-spacing:-1px}.art p{padding:0 12px}.canvas-meta{display:block}.art:before{border-width:24px}header span{display:none}.inspector dt:first-child{margin-top:0}}@media(max-width:440px){.workspace{grid-template-columns:1fr}.rail{border-right:0;border-bottom:1px solid #ddd;display:flex;gap:8px}.rail h2{display:none}.thumb{flex:1;min-width:0;margin:0}.mini{height:44px;font-size:20px}.thumb label{font-size:11px}.art[data-art=story]{max-height:390px}.canvas-meta{display:flex}.inspector{grid-template-columns:1fr 1fr;padding:20px 16px}header{padding:16px}.result{margin:0 16px 16px}}
</style></head><body><header><b>Campaign library <span>/ Autumn collection</span></b><button id="select-all">Select all</button></header><main><div class="workspace"><nav class="rail" aria-label="Artwork variants"><h2>Assets</h2><div class="thumb"><button data-id="hero" aria-label="Inspect campaign master" aria-pressed="true"><div class="mini" aria-hidden="true">Made.</div></button><label><input type="checkbox" value="hero" checked>Master</label></div><div class="thumb"><button data-id="square" aria-label="Inspect social square" aria-pressed="false"><div class="mini" aria-hidden="true">Made.</div></button><label><input type="checkbox" value="square">Square</label></div><div class="thumb"><button data-id="story" aria-label="Inspect vertical story" aria-pressed="false"><div class="mini" aria-hidden="true">Made.</div></button><label><input type="checkbox" value="story">Story</label></div></nav><section class="canvas-wrap" aria-label="Selected artwork"><div class="canvas-meta"><span id="art-name">Campaign master</span><span id="dimensions">1600 × 1200</span></div><div class="art" id="art" data-art="hero" role="img" aria-label="Original orange campaign artwork with the words Made for what comes next"><div><small>AUTUMN COLLECTION</small><h1>Made for<br>what comes<br>next.</h1><p>Small ideas. A different perspective.</p></div></div><p class="canvas-note">Original artwork · illustrative preview</p></section><aside class="inspector"><h2>Export inspector</h2><dl><dt>Selected artwork</dt><dd id="detail-name">Campaign master</dd><dt>Source dimensions</dt><dd id="detail-dimensions">1600 × 1200 px</dd><dt>Review</dt><dd>Draft artwork</dd></dl><hr><div><label for="format">Export format</label><select id="format"><option value="png">PNG</option><option value="jpeg">JPEG</option></select><p class="selected-count" id="selected-count">1 asset selected</p><button class="primary" id="prepare">Prepare recipe</button><p style="font-size:12px;color:#666">Creates a local recipe only. No files are converted.</p></div></aside></div><section class="result" id="result" hidden><h2>Local export recipe</h2><pre id="recipe"></pre><p role="status" id="status"></p></section></main><footer>React Spectrum v3 collection study · HTML/CSS interpretation with illustrative colors. Inspecting an artwork and selecting it for export are independent.</footer><script>
const assets={hero:{name:'Campaign master',dimensions:'1600 × 1200',color:'orange'},square:{name:'Social square',dimensions:'1080 × 1080',color:'purple'},story:{name:'Vertical story',dimensions:'1080 × 1920',color:'green'}};const boxes=[...document.querySelectorAll('.thumb input')],$=id=>document.getElementById(id);document.querySelectorAll('[data-id]').forEach(button=>button.onclick=()=>{document.querySelectorAll('[data-id]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));const id=button.dataset.id,a=assets[id];$('art').dataset.art=id;$('art').setAttribute('aria-label','Original '+a.color+' campaign artwork with the words Made for what comes next');$('art-name').textContent=$('detail-name').textContent=a.name;$('dimensions').textContent=a.dimensions;$('detail-dimensions').textContent=a.dimensions+' px';});function update(){let n=boxes.filter(b=>b.checked).length;$('selected-count').textContent=n+' asset'+(n===1?'':'s')+' selected';$('prepare').disabled=n===0;$('select-all').textContent=n===boxes.length?'Clear selection':'Select all';$('result').hidden=true;}boxes.forEach(b=>b.onchange=update);$('format').onchange=()=>{$('result').hidden=true;};$('select-all').onclick=()=>{const all=boxes.every(b=>b.checked);boxes.forEach(b=>b.checked=!all);update();};$('prepare').onclick=()=>{const ids=boxes.filter(b=>b.checked).map(b=>b.value);$('recipe').textContent=JSON.stringify({format:$('format').value,assets:ids},null,2);$('status').textContent='Recipe prepared for '+ids.length+' assets. No image files were converted.';$('result').hidden=false;};
</script></body></html>

A arte é um conteúdo de exemplo original. Preparar uma receita gera metadados de seleção, não arquivos de imagem convertidos; este documento não carrega o Spectrum v3 nem o Spectrum 2.

Entrada da implementação nativa completa

A implementação completa, desde a configuração, reunida aqui com as explicações específicas de API. Siga os pré-requisitos documentados de pacote e compilação na configuração.

jsx

// Terminal: npm install @adobe/react-spectrum@3
// Existing React app with <div id="root"></div>; entry: src/main.jsx
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import {Provider, defaultTheme, Flex, View, Heading, Text, Button,
  TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item}
  from '@adobe/react-spectrum';
const assets = [
  {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'},
  {id: 'square', name: 'Social square', dimensions: '1080 × 1080'},
  {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'}
];
function AssetReview() {
  const [keys, setKeys] = React.useState(new Set(['hero']));
  const [format, setFormat] = React.useState('png');
  const [recipe, setRecipe] = React.useState('');
  const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id));
  return <Provider theme={defaultTheme} breakpoints={{tablet: 640, desktop: 1024}}>
    <View padding="size-300">
      <Heading level={1}>Campaign exports</Heading>
      <Flex direction={{base: 'column', tablet: 'row'}} gap="size-300">
        <TableView aria-label="Campaign assets" selectionMode="multiple"
          selectedKeys={keys} onSelectionChange={setKeys} flex minWidth={0}>
          <TableHeader><Column key="name">Asset</Column><Column key="dimensions">Dimensions</Column></TableHeader>
          <TableBody items={assets}>{asset => <Row key={asset.id}>
            <Cell>{asset.name}</Cell><Cell>{asset.dimensions}</Cell>
          </Row>}</TableBody>
        </TableView>
        <Flex direction="column" gap="size-200" width={{base:'100%',tablet:'size-2400'}}>
          <Picker label="Export format" selectedKey={format} onSelectionChange={setFormat}>
            <Item key="png">PNG</Item><Item key="jpeg">JPEG</Item>
          </Picker>
          <Text>{selected.length} assets selected</Text>
          <Button variant="accent" isDisabled={!selected.length} onPress={() =>
            setRecipe(JSON.stringify({format, assets:selected.map(a=>a.id)}, null, 2))}>
            Prepare recipe
          </Button>
        </Flex>
      </Flex>
      <p role="status">{recipe ? 'Local recipe prepared. No image files were converted.' : ''}</p>
      {recipe && <pre style={{whiteSpace:'pre-wrap'}}>{recipe}</pre>}
    </View>
  </Provider>;
}
createRoot(document.getElementById('root')).render(<AssetReview />);

Exemplo completo de coleção e inspetor v3 para um app React existente. Ele cria uma receita de exportação no estado local, não arquivos de imagem. Mantenha a versão resolvida do pacote no arquivo de lock e não combine esta entrada com importações do Spectrum 2.

A seleção pode ser tudo, não apenas um Set

Normalize o contrato da coleção antes de calcular o lote ou habilitar a ação. Este trecho usa os assets e as chaves da configuração completa.

jsx

const selected = keys === 'all'
  ? assets
  : assets.filter(asset => keys.has(asset.id));
<Button variant="accent" isDisabled={selected.length === 0}
  onPress={() => setRecipe(JSON.stringify({format, assets: selected.map(a => a.id)}))}>
  Prepare recipe
</Button>

Os ids estáveis permanecem válidos após a ordenação e a renomeação.
Um lote vazio desativa apenas a ação de preparar a receita; ele não apaga o formato atual.

Inspetor responsivo com nomes explícitos de pontos de quebra

Use as mesmas chaves no Provider e nas propriedades responsivas. Os números são uma configuração deliberada da aplicação.

jsx

<Provider theme={defaultTheme} breakpoints={{tablet:640, desktop:1024}}>
  <Flex direction={{base:"column", tablet:"row"}} gap="size-300">
    <View flex minWidth={0}>Asset table</View>
    <View width={{base:"100%",tablet:"size-2400"}}>Export inspector</View>
  </Flex>
</Provider>