# Theme studio

Edit, inspect, export and re-import the actual theme contract.

## Production contracts
The theme studio edits the production ThemeDefinition. Search and edit every contract token, select scheme/density/named axes, apply a validated draft, or reset only the current editor-owned context override. Use `@token.name` for aliases. Palette rebuilding is explicit; changing a seed alone does not regenerate companion colors.

JSON import validates portable data and all references. JSON export preserves editable source. CSS output is generated and is not authoritative. Clipboard permission failure leaves the editable export visible.

## Separate customization plane
The component sheet studio edits the production ComponentSheet against a ComponentDescriptor. Visual defaults, named part/state/variant rules, responsive conditions and source JSON compile to actual CSS and a ComponentProfile. The preview renders a real exported Button under that profile; the inspector exposes rule provenance. Invalid imports keep the previous valid preview.

Behavioral settings and event callbacks stay in the provider configuration plane. They are not serialized into a theme or sheet. Build/compiler/editor dependencies remain outside minimal component graphs.

## Review limits
Contrast checks cover declared pairs and supported numeric colors. An editor preview does not certify all themes, assistive technology or custom layouts. Source exports must be reviewed before persistence. See [interoperability](/docs/interoperability/) for versioned design exchange and migration.

## Executable example source

```tsx
'use client';
import { useState } from 'react';
import type { ThemeDefinition, ComponentSheet } from '@fayegram-ai/faye-ui/contracts';
import { ThemeEditor } from '@fayegram-ai/faye-ui/devtools/theme-editor';
import { ComponentSheetEditor } from '@fayegram-ai/faye-ui/devtools/sheet-editor';
import { buttonDescriptor } from '@fayegram-ai/faye-ui/controls/button.descriptor';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { defaultTheme } from '@fayegram-ai/faye-ui/tokens/default-theme';
export default function Studio() {
    const [theme, setTheme] = useState<ThemeDefinition>(defaultTheme);
    const [sheet, setSheet] = useState<ComponentSheet>({ schemaVersion: 1, id: 'studio.button', component: 'button', rules: [] });
    return <><ThemeEditor theme={theme} onChange={setTheme}/><ComponentSheetEditor sheet={sheet} onChange={setSheet} descriptor={buttonDescriptor}><Button>Real sheet preview</Button></ComponentSheetEditor></>;
}
```