Theme Studio

{{ draftTheme().meta.name }}

@if (llmGuideCopyMessage()) {
{{ llmGuideCopyMessage() }}
}
Workspace {{ activeWorkspaceInfo().label }}
Regions {{ mountedEntryCount() }}
Draft {{ isDraftDirty() ? 'Unsaved changes' : 'In sync' }}
@if (statusMessage()) {
{{ statusMessage() }}
} @if (!draftIsValid()) {

The draft is invalid. The last working theme is still active.

    @for (error of draftErrors(); track error) {
  • {{ error }}
    • }
}
@if (selectedElement()) {
{{ selectedElement()!.label }} {{ selectedElement()!.key }} @if (selectedElement()!.container) { {{ selectedElement()!.container }} }

{{ selectedElement()!.description }}

}
@if (selectedElement()) {
@if (selectedElement()!.layoutEditable) { }
}
@if (selectedElementCapabilities().length > 0) {
@for (capability of selectedElementCapabilities(); track capability) { {{ capability }} }
}
@if (activeWorkspace() === 'editor') {

{{ activeEditorTab() === 'cssOnly' ? 'CSS-Only Theme' : 'Theme JSON' }}

@if (activeEditorTab() === 'cssOnly') {

CSS here is applied over the built-in default JSON theme.

}
{{ activeEditorTab() === 'cssOnly' ? cssOnlyText().split('\n').length : draftLineCount() }} lines {{ activeEditorTab() === 'cssOnly' ? cssOnlyText().length : draftCharacterCount() }} chars @if (activeEditorTab() === 'json') { {{ draftErrorCount() }} errors } IDE editor
@if (activeEditorTab() === 'json') { } @else { }
} @if (activeWorkspace() === 'inspector') {

Selection

@if (selectedElement()) {

{{ selectedElement()!.label }}

{{ selectedElement()!.key }} @if (isMounted(selectedElement()!)) { Mounted now }

{{ selectedElement()!.description }}

}

Editable Attributes

@for (field of visiblePropertyHints(); track field.key) { }

Animation Keys

@if (animationKeys().length > 0) {
@for (animationKey of animationKeys(); track animationKey) { }
} @else {
No custom animation keys yet.
}
@for (field of THEME_ANIMATION_FIELDS; track field.key) { {{ field.key }} }
} @if (activeWorkspace() === 'layout') {

Layout Grid

@for (container of layoutContainers; track container.key) { }
@if (selectedElementGrid()) {

x

{{ selectedElementGrid()!.grid.x }}

y

{{ selectedElementGrid()!.grid.y }}

w

{{ selectedElementGrid()!.grid.w }}

h

{{ selectedElementGrid()!.grid.h }}

}
}