Theme Studio

{{ draftTheme().meta.name }}

@if (llmGuideCopyMessage()) {
{{ llmGuideCopyMessage() }}
}
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') {

Theme JSON

{{ draftLineCount() }} lines {{ draftCharacterCount() }} chars {{ draftErrorCount() }} errors IDE editor
} @if (activeWorkspace() === 'inspector') {

Selection

@if (selectedElement()) {

{{ selectedElement()!.label }}

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

{{ selectedElement()!.description }}

}

Schema Hints

@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 }}

}
}