Système de design Adobe Spectrum.

Nom / règle	Valeur / configuration	Utilisation
`theme`	`defaultTheme`	Objet de thème racine requis, importé depuis @adobe/react-spectrum.
`colorScheme`	`light \| dark`	Remplacement explicite des préférences du système d’exploitation.
`scale`	`medium \| large`	Échelle adaptée aux pointeurs fins ou grossiers ; en général, laissez Provider faire le choix.
`locale`	`BCP 47 language tag`	Contexte de langue et de sens d’écriture.
`breakpoints`	`custom name → pixel width`	Ce guide définit explicitement tablet: 640 et desktop: 1024 afin d’éviter les valeurs par défaut contradictoires dans la page de référence.
`isDisabled / isReadOnly`	`boolean group defaults`	Les fournisseurs imbriqués et les propriétés individuelles peuvent remplacer le comportement du groupe.

Correspondances des dimensions de base

Nom / règle	Valeur / configuration	Utilisation
`size-50`	`4px base`	Petit espacement.
`size-100`	`8px base`	Commandes associées.
`size-150`	`12px base`	Espacement de la barre d’outils.
`size-200`	`16px base`	Espacement entre les groupes de l’inspecteur.
`size-250`	`20px base`	Espacement intermédiaire.
`size-300`	`24px base`	Marge intérieure du panneau.
`size-400`	`32px base`	Regroupement plus ample.
`size-500`	`40px base`	Espacement entre les sections.
`size-600`	`48px base`	Structure étendue.
`size-1000`	`80px base`	Zone d’illustration de taille fixe.
`size-2400`	`192px base`	Largeur d’inspecteur à titre d’exemple.
`size-6000`	`480px base`	Grande surface délimitée.

Propriétés de style et valeurs adaptatives

Nom / règle	Valeur / configuration	Utilisation
`marginStart / marginEnd`	`DimensionValue`	Espacement logique ; à privilégier par rapport à left/right pour prendre en charge le sens d’écriture.
`padding / backgroundColor`	`View style props`	Créez une surface externe personnalisée plutôt que de remplacer les éléments internes des contrôles natifs.
`width`	`size-* \| CSS length \| calc(...)`	Exemple : calc(100% - size-2000).
`responsive value`	`{base: value, tablet: value}`	Les clés correspondent aux points de rupture explicites de Provider.
`UNSAFE_style / UNSAFE_className`	`last-resort escape hatch`	Ne vous appuyez pas sur le DOM ni sur les styles privés des composants.
`single-line-height`	`32 base mapping`	Utilisez la dimension sémantique plutôt que d’affirmer que tous les contrôles font toujours 32px.

Contrat de sélection de collection

Nom / règle	Valeur / configuration	Utilisation
`selectionMode`	`none \| single \| multiple`	L’exemple utilise le mode multiple pour un traitement par lot.
`selectedKeys`	`Set of row keys \| all`	Un état contrôlé doit gérer la valeur sentinelle all.
`onSelectionChange`	`callback with selection`	N’interprétez pas la sélection comme une approbation ni comme la réussite d’un export.
`disallowEmptySelection`	`boolean`	Utile pour une sélection unique obligatoire ; omis pour les lots d’export facultatifs.
`TableHeader → Column`	`column anatomy`	Attribuez des clés stables aux colonnes pour un rendu dynamique.
`TableBody → Row → Cell`	`row anatomy`	Les identifiants des enregistrements assurent une identité de collection stable.

Composition du sélecteur et du texte

Nom / règle	Valeur / configuration	Utilisation
`label`	`persistent text`	Nommez le sélecteur de format d’exportation.
`selectedKey`	`one item key`	Format contrôlé, par exemple png ou jpeg.
`onSelectionChange`	`key callback`	Contrat différent de celui d’un gestionnaire d’événement DOM.
`Item key`	`stable key`	Identité de la valeur indépendante du libellé affiché.
`Heading level`	`1–6`	Niveau de titre sémantique ; le style natif dépend du contexte.
`Button onPress`	`press callback`	Activation depuis différents champs de saisie plutôt qu’une action personnalisée réservée à la souris.

Guide complet du système de design Adobe Spectrum

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

DESIGN-adobe-spectrum.md

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

Télécharger le guide

Système de design Adobe Spectrum : choisissez délibérément v3 et ne mélangez pas les générations de Spectrum

Ce que cet exemple installe

Adobe documente désormais Spectrum 2 parallèlement à la bibliothèque v3. Cette page choisit @adobe/react-spectrum@3, car ses contrats Provider, collection et propriétés de style constituent un exemple complet et documenté de revue des ressources. Une recette v3 est utile dans une application v3 existante, mais ne doit pas être présentée comme l’implémentation Spectrum la plus récente. Avant de choisir une génération pour une nouvelle adoption, consultez la référence de migration liée.
Extrait de ce guide OpenDesign

La différence pratique se voit dans le code. La v3 transmet size-300 via les propriétés de style et fournit defaultTheme à Provider. Le guide de migration transpose ces conventions dans un système de style différent API. Remplacer uniquement le nom du package ne suffit pas à migrer l’exemple ; les imports des composants, le style et les propriétés prises en charge doivent être examinés ensemble.

Le Provider du système de design Adobe Spectrum coordonne l’apparence, l’échelle et la langue

Une racine, plusieurs paramètres indépendants

Provider établit l’environnement utilisé par le tableau, le sélecteur et le bouton. L’objet de thème regroupe les définitions du jeu de couleurs et de l’échelle. colorScheme peut remplacer la préférence du système d’exploitation, tandis que scale tient compte des caractéristiques des périphériques de saisie. Ces paramètres sont distincts : une interface sombre sur ordinateur n’exige pas de grandes cibles tactiles, et un écran tactile clair ne doit pas hériter par inadvertance d’une mise en page dense prévue pour la souris.

En production, laissez l’échelle se régler automatiquement. Dans une étude de composants, choisir explicitement medium ou large peut aider à comparer les contrôles, mais il faut présenter ce choix comme un paramètre d’inspection. locale définit le contexte linguistique, mais ne traduit pas les données de votre projet. Les noms de campagne, les notes de révision et les libellés de configuration restent du contenu applicatif.

Système de design Adobe Spectrum : utilisez les dimensions prises en charge et les propriétés de mise en page externes

Une échelle nommée ne se résume pas à une valeur en pixels

La correspondance de base est size-100 pour 8, size-200 pour 16 et size-300 pour 24. Le tableau de référence comprend d’autres valeurs utiles. Une dimension size-* peut s’adapter à l’échelle de la plateforme ; une valeur static-size-* reste volontairement fixe. Tenez compte de cette distinction pour dimensionner un inspecteur ou une cible d’interaction. Reprendre toutes les valeurs résolues sur ordinateur dans CSS supprimerait l’adaptation fournie par l’environnement des composants.

Flex et View confèrent à l’exemple une structure externe stable sans réécrire les éléments internes de TableView. Le tableau peut s’agrandir avec flex et rétrécir avec minWidth={0} ; l’inspecteur s’empile à la taille de base et adopte une largeur limitée au point de rupture tablette défini explicitement. Le padding doit être appliqué au View qui gère la surface. La documentation déconseille de remplacer les couleurs, bordures et styles typographiques internes au moyen de mécanismes de contournement non sûrs.

Système de design Adobe Spectrum : laissez le thème gérer les couleurs natives et la typographie

Distinguez la palette de l’exemple de la spécification des jetons

L’aperçu présente un fond gris sobre, des contrôles neutres et des illustrations originales colorées. Ces couleurs d’illustration ne sont pas des valeurs certifiées de jetons Spectrum. Dans l’exemple natif, l’apparence des composants pris en charge provient de defaultTheme. Pour une surface native personnalisée, utilisez les valeurs backgroundColor documentées au lieu de supposer qu’une même valeur hexadécimale convient aux deux jeux de couleurs.

Heading fournit une structure sémantique ainsi qu’une présentation Spectrum dans son contexte. Le titre de la page utilise level={1} ; Text affiche du contenu courant, comme le nombre d’éléments sélectionnés. L’aperçu personnalisé HTML utilise une police de système choisie par l’application, avec une police de remplacement, ainsi que des tailles de texte définies par l’application. Il illustre le flux de travail et la hiérarchie relative ; il ne prétend pas que la police environnante de OpenDesign ou la typographie de ses illustrations corresponde aux spécifications typographiques de Spectrum.

Système de design Adobe Spectrum : un tableau de collection repose sur des clés, des colonnes et une sémantique de sélection

La sélection est un contrat de données

Le tableau est composé de TableHeader et Column, ainsi que de TableBody, Row et Cell. Chaque élément créatif possède un id stable. selectedKeys et onSelectionChange permettent de contrôler la sélection ; l’inspecteur d’exportation peut ainsi calculer le nombre d’éléments à partir du même état. Un utilisateur peut renommer un élément sans en changer l’identité. Utiliser la position de la ligne comme identifiant rendrait la sélection fragile après un réordonnancement.

La sélection peut prendre la valeur sentinelle all. Le code d’initialisation la résout en l’ensemble des éléments créatifs actuels avant de créer une configuration. Un Set vide reste valide, car le lot est facultatif ; disallowEmptySelection n’est volontairement pas activé. Dans une application distante ou paginée, définissez ce que signifie all pour cette source de données au lieu de supposer sans vérification que les lignes affichées constituent toute la collection.

Identité de l’élément créatif : clé stable utilisée par la collection.
Inspection : illustration affichée en plus grand dans l’exemple autonome.
Sélection du lot : clés incluses dans la configuration préparée.

Adobe Spectrum Le sélecteur de système de design et le bouton complètent l’inspecteur d’exportation

Le format est géré indépendamment du lot

Le sélecteur utilise un libellé visible et des clés Item stables. selectedKey vaut png ou jpeg ; onSelectionChange fournit la clé sélectionnée. Cette approche diffère de la lecture de event.target.value dans une liste native. Le format reste sélectionné lorsque le lot est effacé, ce qui permet de modifier la sélection sans recréer de préréglage.

Le bouton utilise onPress pour l’activation et isDisabled lorsqu’aucun élément n’est sélectionné. L’exemple natif sérialise les identifiants et le format dans une recette locale. Il ne transforme pas les données d’image, ne génère pas de véritable fichier d’exportation et ne contacte aucun service de ressources. Cette limite d’implémentation est utile : l’action et ses paramètres sont concrets, même si le moteur de conversion ne fait pas partie du système de design.

Système de design Adobe Spectrum Adaptez la composition au lieu de comprimer l’illustration

Définissez le contrat des points de rupture

Cet exemple définit tablet:640 et desktop:1024. Ce choix est explicite, car la page Provider présente actuellement des valeurs par défaut incohérentes entre le texte explicatif et les métadonnées API générées. Les valeurs adaptatives font référence à ces clés précises. L’inspecteur occupe toute la largeur à la base, puis se place à côté du tableau flexible. Ces points de rupture relèvent de l’application ; ils ne constituent pas une nouvelle norme universelle de Spectrum.

L’illustration autonome utilise une grande zone de travail, un inspecteur latéral et un bandeau de miniatures. Sur petit écran, l’inspecteur reprend le flux normal et l’illustration conserve ses proportions. Les informations comme les dimensions et le format sont affichées à l’extérieur de l’illustration : elles restent ainsi lisibles sans modifier l’œuvre inspectée.

Système de design Adobe Spectrum Inspecter, sélectionner et préparer sont des actions distinctes

Rendez la démonstration testable

Cliquer sur une miniature modifie la grande illustration et ses métadonnées descriptives. Une case à cocher modifie le lot d’exportation. En gardant ces actions indépendantes, il est possible d’inspecter un élément non sélectionné sans l’inclure involontairement dans l’exportation. L’aperçu indique le nombre d’éléments sélectionnés et conserve le format lorsque l’utilisateur modifie le lot.

Le TableView natif fournit ses propres interactions de collection ; l’exemple HTML utilise des boutons et des cases à cocher ordinaires et ne prétend pas reproduire l’intégralité du modèle de navigation au clavier de la grille. Les deux solutions permettent d’effectuer au clavier les actions présentées. Le résultat de la recette est affiché sous forme de texte, et non uniquement comme un effet visuel temporaire : l’utilisateur peut donc vérifier précisément les identifiants et le format préparés.

Système de design Adobe Spectrum Intégrez d’abord la base native avant de faire évoluer l’outil

Connectez un véritable service d’exportation à une limite clairement définie

Installez la suite v3 dans une application React existante, puis utilisez l’exemple complet ci-dessous. Il comprend le fournisseur, les imports, les données de collection, l’état de sélection, l’état du format et l’état du résultat. Dans une intégration en production, remplacez la préparation de la recette par une requête d’exportation et affichez le résultat confirmé pour chaque élément. Ne renommez pas la réponse locale « Exportation terminée » tant que ce service n’existe pas.

Lors de la migration vers Spectrum 2, utilisez les correspondances d’Adobe pour les dimensions, les points de rupture et les modifications de composants. Vérifiez à nouveau le comportement de sélection et la persistance du format : un tableau visuellement similaire peut tout de même présenter un contrat différent. Indiquez explicitement la génération source afin que les personnes qui contribueront par la suite ne combinent pas un Provider v3 avec des exemples incompatibles.

Sélectionnez un élément et vérifiez que son identifiant apparaît dans la recette locale.
Sélectionnez tout, remplacez PNG par JPEG et examinez l’ensemble complet des éléments sélectionnés.
Effacez la sélection et vérifiez que l’action est désactivée tandis que le format reste sélectionné.
Réduisez la largeur de la fenêtre et vérifiez que les actions d’inspection, de sélection et de génération de la recette restent accessibles.

Adobe Spectrum Exemples de composants du système de design

Exemple interactif autonome complet

Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation originale de HTML/CSS du flux de travail d’inspection et de collection v3 documenté. La palette et les illustrations sont données à titre indicatif ; aucun environnement d’exécution Spectrum natif ni aucune conversion d’image ne sont inclus.

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’illustration est un contenu d’exemple original. La préparation d’une recette produit des métadonnées de sélection, et non des fichiers image convertis ; ce document ne charge ni Spectrum v3 ni Spectrum 2.

Entrée complète de l’implémentation native

L’implémentation complète présentée dans la configuration, réunie ici avec les explications ciblées sur API. Suivez les prérequis documentés concernant les packages et la compilation dans la section de configuration.

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

Exemple complet de collection et d’inspecteur v3 pour une application React existante. Il crée une recette d’exportation dans l’état local, et non des fichiers image. Conservez la version résolue du package dans le fichier de verrouillage et ne combinez pas cette entrée avec des imports de Spectrum 2.

La sélection peut prendre la valeur all, et pas seulement être un Set

Normalisez le contrat de collection avant de calculer le lot ou d’activer l’action. Cet extrait utilise les assets et les clés de la configuration complète.

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>

Les identifiants stables résistent au tri et au renommage.
Un lot vide désactive uniquement l’action de création de la recette ; il n’efface pas le format actuel.

Inspecteur adaptatif avec noms de points de rupture explicites

Utilisez les mêmes clés dans Provider et dans les propriétés adaptatives. Les valeurs numériques correspondent à une configuration d’application délibérée.

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>