Sistema di design Adobe Spectrum.

Nome / regola	Valore / configurazione	Utilizzo
`theme`	`defaultTheme`	Oggetto del tema radice obbligatorio, importato da @adobe/react-spectrum.
`colorScheme`	`light \| dark`	Override esplicito della preferenza del sistema operativo.
`scale`	`medium \| large`	Scala per puntatori precisi o ampi; normalmente, lascia che sia Provider a sceglierla.
`locale`	`BCP 47 language tag`	Contesto della lingua e della direzione di scrittura.
`breakpoints`	`custom name → pixel width`	Questa guida imposta esplicitamente tablet: 640 e desktop: 1024, evitando i valori predefiniti in conflitto nella pagina di riferimento.
`isDisabled / isReadOnly`	`boolean group defaults`	I provider annidati e le singole proprietà possono sovrascrivere il comportamento del gruppo.

Corrispondenze delle dimensioni di base

Nome / regola	Valore / configurazione	Utilizzo
`size-50`	`4px base`	Separazione ridotta.
`size-100`	`8px base`	Controlli correlati.
`size-150`	`12px base`	Spazio della barra degli strumenti.
`size-200`	`16px base`	Spazio tra i gruppi dell’ispettore.
`size-250`	`20px base`	Spaziatura intermedia.
`size-300`	`24px base`	Spazio interno del pannello.
`size-400`	`32px base`	Raggruppamento più ampio.
`size-500`	`40px base`	Separazione tra sezioni.
`size-600`	`48px base`	Struttura ampia.
`size-1000`	`80px base`	Area dell’illustrazione di dimensioni fisse.
`size-2400`	`192px base`	Larghezza di esempio dell’ispettore.
`size-6000`	`480px base`	Superficie ampia con limiti definiti.

Proprietà di stile e valori adattivi

Nome / regola	Valore / configurazione	Utilizzo
`marginStart / marginEnd`	`DimensionValue`	Spaziatura logica; da preferire a left/right per supportare la direzione di scrittura.
`padding / backgroundColor`	`View style props`	Crea una superficie esterna personalizzata invece di sovrascrivere gli elementi interni dei controlli nativi.
`width`	`size-* \| CSS length \| calc(...)`	Esempio: calc(100% - size-2000).
`responsive value`	`{base: value, tablet: value}`	Le chiavi corrispondono ai breakpoint espliciti di Provider.
`UNSAFE_style / UNSAFE_className`	`last-resort escape hatch`	Non fare affidamento sul DOM o sugli stili privati dei componenti.
`single-line-height`	`32 base mapping`	Usa la dimensione semantica senza affermare che tutti i controlli siano sempre di 32px.

Contratto di selezione delle raccolte

Nome / regola	Valore / configurazione	Utilizzo
`selectionMode`	`none \| single \| multiple`	L’esempio usa multiple per selezionare un gruppo.
`selectedKeys`	`Set of row keys \| all`	Lo stato controllato deve gestire il valore sentinella all.
`onSelectionChange`	`callback with selection`	Non interpretare la selezione come approvazione o conferma dell’avvenuta esportazione.
`disallowEmptySelection`	`boolean`	Utile per una selezione singola obbligatoria; omesso per i gruppi di esportazione facoltativi.
`TableHeader → Column`	`column anatomy`	Assegna chiavi stabili alle colonne per il rendering dinamico.
`TableBody → Row → Cell`	`row anatomy`	Gli ID dei record garantiscono un’identità stabile per gli elementi della raccolta.

Composizione di Picker e testo

Nome / regola	Valore / configurazione	Utilizzo
`label`	`persistent text`	Assegna un nome al selettore del formato di esportazione.
`selectedKey`	`one item key`	Formato controllato, ad esempio png o jpeg.
`onSelectionChange`	`key callback`	Contratto diverso da un gestore di eventi DOM.
`Item key`	`stable key`	Identità del valore indipendente dall’etichetta visibile.
`Heading level`	`1–6`	Livello semantico dell’intestazione; lo stile nativo segue il contesto.
`Button onPress`	`press callback`	Attivazione utilizzabile con input diversi, anziché un’azione personalizzata accessibile solo col mouse.

Guida completa al sistema di design Adobe Spectrum

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

DESIGN-adobe-spectrum.md

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

Scarica la guida

Sistema di design Adobe Spectrum: scegli v3 intenzionalmente; non mescolare le generazioni di Spectrum

Cosa installa questo esempio

Adobe documenta ora Spectrum 2 insieme alla libreria v3. Questa pagina sceglie @adobe/react-spectrum@3 perché i contratti di Provider, raccolte e proprietà di stile offrono un esempio completo e documentato per la revisione delle risorse. Una ricetta v3 è utile per un’applicazione v3 esistente, ma non va presentata come la versione più recente di Spectrum. Prima di decidere se adottarla in un nuovo progetto, consulta il riferimento alla migrazione collegato.
Da questa guida su OpenDesign

La differenza pratica è visibile nel codice. v3 passa size-300 tramite le proprietà di stile e fornisce defaultTheme a Provider. La guida alla migrazione traduce queste convenzioni in un API di stile diverso. Sostituire soltanto il nome del pacchetto non equivale a migrare l’esempio: import dei componenti, stili e proprietà supportate vanno esaminati insieme.

Sistema di design Adobe Spectrum: Provider coordina aspetto, scala e lingua

Una radice, diverse impostazioni indipendenti

Provider definisce l’ambiente utilizzato da tabella, picker e pulsante. L’oggetto del tema include le definizioni di schema cromatico e scala. colorScheme può sovrascrivere la preferenza del sistema operativo, mentre scale tiene conto delle caratteristiche degli input. Sono impostazioni separate: una superficie scura su desktop non richiede bersagli touch più grandi, e uno schermo touch chiaro non dovrebbe ereditare per sbaglio un layout fitto pensato per il mouse.

Nell’uso normale in produzione, lascia la scala in modalità automatica. In uno studio sui componenti, scegliere esplicitamente medium o large può aiutare a confrontare i controlli, ma va descritto come un’impostazione di analisi. locale imposta il contesto linguistico, non traduce i dati del progetto. I nomi delle campagne, le note di revisione e le etichette delle impostazioni restano contenuti dell’applicazione.

Sistema di design Adobe Spectrum: usa dimensioni supportate e proprietà di layout esterne

Una scala con nome è più di una scorciatoia in pixel

La corrispondenza di base è 8 per size-100, 16 per size-200 e 24 per size-300. La tabella di riferimento include altri incrementi utili. Una dimensione size-* può adattarsi alla scala della piattaforma, mentre un valore static-size-* non si adatta intenzionalmente. Tieni presente questa distinzione quando definisci le dimensioni di un ispettore o di un bersaglio interattivo. Copiare ogni valore desktop risultante in CSS eliminerebbe l’adattamento fornito dall’ambiente dei componenti.

Flex e View danno all’esempio una struttura esterna stabile senza riscrivere gli elementi interni di TableView. La tabella può estendersi con flex e restringersi con minWidth={0}; l’ispettore si dispone in colonna alla larghezza base e diventa vincolato al breakpoint tablet esplicito. Il padding va applicato al View proprietario della superficie. La documentazione sconsiglia di sovrascrivere colori, bordi e tipografia interni tramite meccanismi di escape non sicuri.

Sistema di design Adobe Spectrum: lascia che sia il tema a gestire colori e tipografia nativi

Tieni distinta la tavolozza di esempio dall’esportazione dei token

L’anteprima presenta una tela grigia dai toni sobri, controlli neutri e un’illustrazione originale a colori. I colori dell’illustrazione non sono valori certificati dei token Spectrum. Nell’esempio nativo, i componenti supportati ricavano il proprio aspetto da defaultTheme. Una superficie nativa personalizzata dovrebbe usare i valori documentati di backgroundColor, anziché presumere che un singolo valore esadecimale campionato funzioni in entrambi gli schemi.

Heading fornisce una struttura semantica oltre alla presentazione Spectrum nel proprio contesto. Il titolo della pagina usa level={1}; Text fornisce contenuti ordinari, come il conteggio della selezione. L’anteprima personalizzata HTML usa un font di sistema scelto dall’applicazione come fallback e dimensioni tipografiche definite dall’applicazione. È una dimostrazione del flusso di lavoro e della gerarchia relativa, non un’affermazione secondo cui il font circostante di OpenDesign o la tipografia dell’illustrazione corrispondano alle specifiche tipografiche di Spectrum.

Sistema di design Adobe Spectrum Sistema di progettazione: una tabella di raccolta ha chiavi, colonne e semantica di selezione

La selezione è un contratto sui dati

La tabella è composta da TableHeader e Column, oltre a TableBody, Row e Cell. Ogni risorsa ha un id stabile. selectedKeys e onSelectionChange rendono la selezione controllata, così l’inspector di esportazione può ricavare il conteggio dallo stesso stato. L’utente può rinominare una risorsa senza cambiarne l’identità. Usare la posizione della riga come identità renderebbe fragile la selezione dopo un riordino.

La selezione può essere il valore sentinella all. La configurazione lo risolve in tutte le risorse correnti prima di creare una ricetta. Un Set vuoto resta valido, perché l’elaborazione in blocco è facoltativa; disallowEmptySelection non è attivato intenzionalmente. In un’applicazione remota o paginata, definisci cosa significa all per quell’origine dati anziché presumere che le righe visualizzate siano l’intera raccolta.

Identità della risorsa: chiave stabile usata dalla raccolta.
Ispezione: quale illustrazione viene mostrata ingrandita nell’esempio autonomo.
Selezione in blocco: quali chiavi compaiono nella ricetta preparata.

Sistema di design Adobe Spectrum Sistema di progettazione: Picker e Button completano l’inspector di esportazione

Il formato è controllato indipendentemente dal gruppo di risorse

Picker usa un’etichetta visibile e chiavi Item stabili. selectedKey è png o jpeg; onSelectionChange fornisce la chiave selezionata. Questo differisce dalla lettura di event.target.value da un elemento select nativo. Il formato resta selezionato quando il gruppo viene svuotato, così chi effettua la revisione può modificare la selezione senza ricreare una preimpostazione.

Button usa onPress per l’attivazione e isDisabled quando non ci sono risorse selezionate. L’esempio nativo serializza gli id e il formato in una ricetta locale. Non trasforma i dati delle immagini, non genera un vero file di esportazione e non contatta un servizio per le risorse. Questo definisce un utile confine d’implementazione: l’azione e i relativi input sono concreti, anche se il motore di conversione è esterno al sistema di progettazione.

Sistema di design Adobe Spectrum Sistema di progettazione: adatta la composizione invece di comprimere l’illustrazione

Definisci il contratto dei breakpoint

Questo esempio dichiara tablet:640 e desktop:1024. La scelta è esplicita perché la pagina Provider presenta attualmente valori predefiniti incoerenti tra la prosa esplicativa e i metadati API generati. I valori reattivi fanno riferimento a queste chiavi esatte. Alla base, l’inspector occupa tutta la larghezza; poi si dispone accanto alla tabella flessibile. Questi breakpoint sono definiti dall’applicazione: non costituiscono un nuovo standard Spectrum universale.

L’illustrazione autonoma usa una tela ampia, un inspector laterale e una striscia di miniature. Sugli schermi piccoli, l’inspector rientra nel normale flusso e l’illustrazione mantiene le proprie proporzioni. Testi come le dimensioni e il formato sono fuori dall’illustrazione, quindi restano leggibili e non modificano l’opera esaminata.

Sistema di design Adobe Spectrum Sistema di progettazione: ispezionare, selezionare e preparare sono azioni diverse

Rendi la dimostrazione verificabile

Facendo clic sulla miniatura di un’illustrazione, cambiano l’illustrazione ingrandita e i relativi metadati descrittivi. Una casella di controllo modifica il gruppo di risorse da esportare. Mantenere queste azioni indipendenti permette di esaminare una risorsa non selezionata senza esportarla inavvertitamente. L’anteprima mostra il conteggio degli elementi selezionati e conserva il formato mentre chi effettua la revisione modifica il gruppo.

Il TableView nativo fornisce le interazioni della raccolta; l’esempio HTML usa normali pulsanti e caselle di controllo e non dichiara di riprodurre il modello completo di navigazione da tastiera della griglia. Entrambi offrono un percorso da tastiera per le azioni illustrate. Il risultato della ricetta è testo, non soltanto un effetto visivo temporaneo, così chi effettua la revisione può controllare esattamente quali id e quale formato sono stati preparati.

Sistema di design Adobe Spectrum Sistema di progettazione: integra prima la parte nativa, poi estendi lo strumento

Collega un servizio di esportazione reale a un confine esplicito

Installa la suite v3 in un’app React esistente, poi usa la voce completa qui sotto. L’esempio include provider, importazioni, dati della raccolta, stato della selezione, stato del formato e stato del risultato. In un’integrazione di produzione, la preparazione della ricetta verrebbe sostituita da una richiesta di esportazione e il risultato confermato verrebbe mostrato per ogni risorsa. Non rinominare la risposta locale «Esportazione completata» prima che il servizio sia disponibile.

Per la migrazione a Spectrum 2, usa le mappature di Adobe per dimensioni, breakpoint e modifiche ai componenti. Verifica nuovamente il comportamento della selezione e la persistenza del formato: una tabella visivamente simile può comunque presentare un contratto diverso. Indica esplicitamente la generazione di origine, così i collaboratori futuri non combineranno un Provider v3 con esempi incompatibili.

Seleziona una risorsa e verifica che il suo id compaia nella ricetta locale.
Seleziona tutto, cambia PNG in JPEG e controlla l’intero gruppo selezionato.
Cancella la selezione e verifica che l’azione venga disabilitata mentre il formato resta selezionato.
Riduci la larghezza della finestra e verifica che ispezione, selezione e risultato della ricetta restino accessibili.

Sistema di design Adobe Spectrum Sistema di progettazione: esempi di componenti

Esempio interattivo completo e autonomo

Salva il documento completo come index.html e aprilo in un browser. Interpretazione originale HTML/CSS del flusso di lavoro documentato per raccolte e inspector v3. La palette e l’illustrazione sono a scopo illustrativo; non sono presenti il runtime Spectrum nativo né la conversione delle immagini.

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>

L’illustrazione è un contenuto di esempio originale. La preparazione di una ricetta produce metadati di selezione, non file immagine convertiti; questo documento non carica Spectrum v3 né Spectrum 2.

Implementazione nativa completa

L’implementazione completa descritta nella configurazione, raccolta qui insieme alle spiegazioni specifiche di API. Segui i prerequisiti documentati per pacchetti e build nella configurazione.

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

Esempio completo v3 di raccolta e inspector per un’app React esistente. Crea una ricetta di esportazione nello stato locale, non file immagine. Mantieni la versione risolta del pacchetto nel lockfile e non combinare questa voce con le importazioni di Spectrum 2.

La selezione può essere all, non solo un Set

Normalizza il contratto della raccolta prima di calcolare il gruppo o abilitare l’azione. Questo frammento usa assets e keys della configurazione 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>

Gli id stabili sopravvivono all’ordinamento e alla rinomina.
Un gruppo vuoto disabilita solo l’azione di preparazione della ricetta; non cancella il formato corrente.

Inspector reattivo con nomi espliciti per i breakpoint

Usa le stesse chiavi su Provider e nelle props reattive. I numeri sono configurazioni deliberate dell’applicazione.

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>