Sistema de diseño Adobe Spectrum.

Nombre / Regla	Valor / Configuración	Uso
`theme`	`defaultTheme`	Objeto de tema raíz obligatorio, importado de @adobe/react-spectrum.
`colorScheme`	`light \| dark`	Anulación explícita de la preferencia del sistema operativo.
`scale`	`medium \| large`	Escala para puntero preciso o puntero táctil; normalmente, deja que Provider la elija.
`locale`	`BCP 47 language tag`	Contexto de configuración regional y dirección de escritura.
`breakpoints`	`custom name → pixel width`	Esta guía establece explícitamente tablet: 640 y desktop: 1024 para evitar valores predeterminados contradictorios en la página de referencia.
`isDisabled / isReadOnly`	`boolean group defaults`	Los providers anidados y las propiedades individuales pueden anular el comportamiento del grupo.

Correspondencias de dimensiones base

Nombre / Regla	Valor / Configuración	Uso
`size-50`	`4px base`	Separación pequeña.
`size-100`	`8px base`	Controles relacionados.
`size-150`	`12px base`	Separación de la barra de herramientas.
`size-200`	`16px base`	Separación entre grupos del inspector.
`size-250`	`20px base`	Espaciado intermedio.
`size-300`	`24px base`	Margen interior del panel.
`size-400`	`32px base`	Agrupación más amplia.
`size-500`	`40px base`	Separación entre secciones.
`size-600`	`48px base`	Estructura grande.
`size-1000`	`80px base`	Zona de ilustración de tamaño fijo.
`size-2400`	`192px base`	Ancho de ejemplo del inspector.
`size-6000`	`480px base`	Superficie amplia con límites definidos.

Propiedades de estilo y valores adaptables

Nombre / Regla	Valor / Configuración	Uso
`marginStart / marginEnd`	`DimensionValue`	Espaciado lógico; es preferible a left/right para admitir la dirección de escritura.
`padding / backgroundColor`	`View style props`	Crea una superficie exterior personalizada en lugar de modificar el interior de los controles nativos.
`width`	`size-* \| CSS length \| calc(...)`	Ejemplo: calc(100% - size-2000).
`responsive value`	`{base: value, tablet: value}`	Las claves coinciden con los puntos de interrupción explícitos de Provider.
`UNSAFE_style / UNSAFE_className`	`last-resort escape hatch`	No dependas del DOM ni de los estilos privados de los componentes.
`single-line-height`	`32 base mapping`	Usa la dimensión semántica en lugar de afirmar que todos los controles miden siempre 32 px.

Contrato de selección de colecciones

Nombre / Regla	Valor / Configuración	Uso
`selectionMode`	`none \| single \| multiple`	La muestra usa multiple para un lote.
`selectedKeys`	`Set of row keys \| all`	El estado controlado debe gestionar el valor centinela all.
`onSelectionChange`	`callback with selection`	No interpretes la selección como aprobación ni como confirmación de una exportación correcta.
`disallowEmptySelection`	`boolean`	Útil cuando se requiere una selección única; se omite para los lotes de exportación opcionales.
`TableHeader → Column`	`column anatomy`	Asigna claves estables a las columnas para la representación dinámica.
`TableBody → Row → Cell`	`row anatomy`	Los identificadores de registro establecen una identidad estable para la colección.

Selector y composición de texto

Nombre / Regla	Valor / Configuración	Uso
`label`	`persistent text`	Asigna un nombre al selector del formato de exportación.
`selectedKey`	`one item key`	Formato controlado, como png o jpeg.
`onSelectionChange`	`key callback`	Un contrato distinto al de un controlador de eventos del DOM.
`Item key`	`stable key`	Identidad del valor independiente de la etiqueta visible.
`Heading level`	`1–6`	Nivel semántico del encabezado; el estilo nativo depende del contexto.
`Button onPress`	`press callback`	Activación compatible con distintos métodos de entrada, en lugar de una acción personalizada solo para el ratón.

Adobe Spectrum Guía completa del sistema de diseño

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

DESIGN-adobe-spectrum.md

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

Descargar la guía

Sistema de diseño Adobe Spectrum: elige v3 deliberadamente; no mezcles generaciones de Spectrum

Qué instala este ejemplo

Adobe ahora documenta Spectrum 2 junto con la biblioteca v3. Esta página elige @adobe/react-spectrum@3 porque sus contratos de Provider, colección y props de estilo ofrecen un ejemplo completo y documentado de revisión de recursos. Una receta para v3 resulta útil para una aplicación v3 existente, pero no debe presentarse como la implementación más reciente de Spectrum. Antes de decidir una nueva adopción, consulta la referencia de migración enlazada para elegir una generación.
De esta guía de OpenDesign

La diferencia práctica se aprecia en el código. v3 pasa size-300 mediante props de estilo y proporciona defaultTheme a Provider. La guía de migración traslada estas convenciones a un API de estilo distinto. Cambiar únicamente el nombre del paquete no migraría el ejemplo; hay que revisar conjuntamente las importaciones de componentes, los estilos y las propiedades compatibles.

Adobe Spectrum El Provider del sistema de diseño coordina la apariencia, la escala y la configuración regional

Una raíz, varios ajustes independientes

Provider establece el entorno que utilizan la tabla, el selector y el botón. El objeto de tema incluye las definiciones de esquema de color y escala. colorScheme puede prevalecer sobre la preferencia del sistema operativo, mientras que scale tiene en cuenta las características de los dispositivos de entrada. Son ajustes independientes: una interfaz oscura en un ordenador de escritorio no requiere objetivos táctiles grandes, y una pantalla táctil clara no debería heredar accidentalmente una disposición compacta pensada para el ratón.

En producción, deja la escala en automático para el uso habitual. En un estudio de componentes, elegir explícitamente medium o large puede facilitar la comparación de controles, pero debe describirse como un ajuste de inspección. locale establece el contexto lingüístico, no traduce los datos de tu proyecto. Los nombres de campañas, las notas de revisión y las etiquetas de recetas siguen siendo contenido de la aplicación.

Sistema de diseño Adobe Spectrum: usa las dimensiones admitidas y props de diseño externos

Una escala con nombre es más que una referencia en píxeles

La correspondencia básica es size-100 para 8, size-200 para 16 y size-300 para 24. La tabla de referencia incluye otros pasos útiles. Una dimensión size-* puede adaptarse a la escala de la plataforma; un valor static-size-* no lo hace deliberadamente. Ten en cuenta esa diferencia al definir el tamaño de un inspector o de un objetivo de interacción. Copiar todos los valores resueltos para escritorio a CSS eliminaría la adaptación que proporciona el entorno de los componentes.

Flex y View proporcionan al ejemplo una estructura externa estable sin reescribir las partes internas de TableView. La tabla puede crecer con flex y reducirse con minWidth={0}; el inspector se apila en el tamaño base y queda limitado en el punto de ruptura explícito para tabletas. El relleno debe ir en el View que contiene la superficie. La documentación desaconseja anular los colores, bordes y la tipografía internos mediante mecanismos de escape no seguros.

Sistema de diseño Adobe Spectrum: deja que el tema controle el color y la tipografía nativos

Separa la paleta de muestra de la exportación de tokens

La vista previa tiene un lienzo gris discreto, controles neutros e ilustraciones originales y coloridas. Esos colores de las ilustraciones no son valores de tokens de Spectrum certificados. En el ejemplo nativo, los componentes compatibles obtienen su apariencia de defaultTheme. Para una superficie nativa personalizada, usa los valores documentados de backgroundColor en lugar de dar por hecho que un único valor hexadecimal muestreado funcionará en ambos esquemas.

Heading aporta estructura semántica y una presentación de Spectrum adecuada al contexto. El título de la página usa level={1}; Text proporciona contenido habitual, como el recuento de elementos seleccionados. La vista previa personalizada de HTML usa una tipografía del sistema elegida por la aplicación como alternativa, además de tamaños de texto propios. Es una demostración del flujo de trabajo y de la jerarquía relativa, no una afirmación de que la fuente de OpenDesign que la rodea o la tipografía de sus ilustraciones cumplan la especificación tipográfica de Spectrum.

Sistema de diseño Adobe Spectrum: una tabla de colección tiene claves, columnas y semántica de selección

La selección es un contrato de datos

La tabla se compone de TableHeader y Column, junto con TableBody, Row y Cell. Cada recurso tiene un id estable. selectedKeys y onSelectionChange hacen que la selección sea controlada, de modo que el inspector de exportación puede obtener el recuento a partir del mismo estado. Un usuario puede cambiar el nombre de un recurso sin modificar su identidad. Usar la posición de la fila como identidad haría que la selección fuera frágil al cambiar el orden.

La selección puede ser el valor centinela all. La configuración lo resuelve como todos los recursos actuales antes de crear una receta. Un Set vacío también es válido porque el lote es opcional; disallowEmptySelection no está activado deliberadamente. En una aplicación remota o paginada, define qué significa all para esa fuente de datos en vez de dar por hecho que las filas representadas en ese momento constituyen toda la colección.

Identidad del recurso: clave estable utilizada por la colección.
Inspección: qué ilustración se muestra ampliada en la muestra independiente.
Selección del lote: qué claves aparecen en la receta preparada.

Sistema de diseño Adobe Spectrum: Picker y Button completan el inspector de exportación

El formato se controla por separado del lote

Picker usa una etiqueta visible y claves estables en Item. selectedKey es png o jpeg; onSelectionChange proporciona la clave seleccionada. Esto difiere de leer event.target.value de un elemento select nativo. El formato sigue seleccionado cuando se vacía el lote, lo que permite a quien revisa ajustar la selección sin tener que volver a crear un ajuste preestablecido.

Button usa onPress para la activación y isDisabled cuando no hay recursos seleccionados. El ejemplo nativo serializa los identificadores y el formato en una receta local. No transforma datos de imagen, genera un archivo de exportación real ni se comunica con un servicio de recursos. Este es un límite de implementación útil: la acción y sus datos de entrada son concretos, aunque el motor de conversión quede fuera del sistema de diseño.

Sistema de diseño Adobe Spectrum Adapta la composición en lugar de comprimir la ilustración

Define el contrato de puntos de interrupción

Este ejemplo declara tablet:640 y desktop:1024. La elección es explícita porque la página Provider actualmente tiene valores predeterminados incoherentes entre el texto explicativo y los metadatos generados de API. Los valores adaptables hacen referencia a esas claves exactas. El inspector ocupa todo el ancho en el tamaño base y luego se sitúa junto a la tabla flexible. La aplicación define esos puntos de interrupción; no son un nuevo estándar universal de Spectrum.

La ilustración independiente usa un lienzo grande, un inspector lateral y una barra de miniaturas. En pantallas pequeñas, el inspector pasa al flujo normal y la ilustración conserva su relación de aspecto. Los textos, como las dimensiones y el formato, aparecen fuera de la ilustración, por lo que siguen siendo legibles y no alteran la obra que se inspecciona.

Sistema de diseño Adobe Spectrum Inspeccionar, seleccionar y preparar son acciones diferentes

Haz que la demostración se pueda probar

Al hacer clic en la miniatura de una ilustración, cambian la ilustración ampliada y sus metadatos descriptivos. Una casilla cambia el lote de exportación. Mantener estas acciones independientes permite inspeccionar un recurso sin seleccionarlo para exportar por accidente. La vista previa muestra la cantidad seleccionada y conserva el formato mientras quien revisa cambia el lote.

El TableView nativo proporciona la interacción con la colección; el ejemplo de HTML usa botones y casillas de verificación estándar y no afirma reproducir el modelo completo de navegación por teclado de la cuadrícula. Ambos ofrecen una forma de acceder mediante el teclado a las acciones demostradas. El resultado de la receta es texto, no solo un efecto visual temporal, de modo que quien revisa puede ver exactamente qué identificadores y formato se prepararon.

Sistema de diseño Adobe Spectrum Integra primero la parte nativa y después amplía la herramienta

Conecta un servicio de exportación real en un límite explícito

Instala la suite v3 en una aplicación React existente y luego usa la entrada completa que aparece a continuación. El ejemplo incluye el proveedor, las importaciones, los datos de la colección, el estado de selección, el estado del formato y el estado del resultado. En una integración de producción, se reemplazaría la preparación de la receta por una solicitud de exportación y se mostraría el resultado confirmado de cada recurso. No llames «Exportación completada» a la respuesta local antes de que exista ese servicio.

Al migrar a Spectrum 2, usa las correspondencias de Adobe para las dimensiones, los puntos de interrupción y los cambios en los componentes. Vuelve a verificar el comportamiento de selección y la persistencia del formato; una tabla de aspecto similar puede tener un contrato diferente. Indica explícitamente la generación de origen para que quienes contribuyan en el futuro no combinen un Provider de v3 con ejemplos incompatibles.

Selecciona un recurso y confirma que su identificador aparezca en la receta local.
Selecciona todo, cambia PNG por JPEG e inspecciona el conjunto completo seleccionado.
Borra la selección y comprueba que la acción se desactive mientras el formato siga seleccionado.
Reduce el ancho de la ventana y confirma que se pueda acceder a la inspección, la selección y el resultado de la receta.

Adobe Spectrum Ejemplos de componentes del sistema de diseño

Muestra interactiva independiente completa

Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación original de HTML/CSS del flujo de trabajo documentado de inspección y colecciones de v3. La paleta y las ilustraciones son orientativas; no se incluye el entorno de ejecución nativo de Spectrum ni conversión de imágenes.

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>

La ilustración es contenido de muestra original. Preparar una receta genera metadatos de selección, no archivos de imagen convertidos; este documento no carga Spectrum v3 ni Spectrum 2.

Entrada de implementación nativa completa

La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración.

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 />);

Ejemplo completo de colección e inspector de v3 para una aplicación React existente. Crea una receta de exportación en el estado local, no archivos de imagen. Mantén la versión resuelta del paquete en el archivo de bloqueo y no combines esta entrada con importaciones de Spectrum 2.

La selección puede ser «todo», no solo un Set

Normaliza el contrato de la colección antes de calcular el lote o habilitar la acción. Este fragmento usa los recursos y las claves de la configuración 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>

Los identificadores estables se conservan al ordenar y cambiar nombres.
Un lote vacío desactiva solo la acción de receta; no borra el formato actual.

Inspector adaptable con nombres de puntos de interrupción explícitos

Usa las mismas claves en Provider y en las propiedades adaptables. Los números corresponden a una configuración deliberada de la aplicación.

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>