Classic Mini-Games
Let There Be Light
kotiwo Motorsport Manager
kotiwo Sports Team Manager
Plant WriterProduction-ready building blocks for website pages. Each example includes when to use it and the stable class or JavaScript API for agents.
Actions
Use the primary action once per decision area. Secondary actions are for reversible or lower-priority operations. Reserve the alert modifier for destructive actions.
c-form__button · c-form__button-secondary · c-form__button-secondary_alertSettings fields
Use these rows for standard settings forms. A label is required; add a short hint only when the choice needs explanation.
c-form__row · c-form__label · c-form__input-text · c-form__selectComposed settings field
Use a composed row when one field has a closely related action. The main control grows; the action keeps its natural size.
c-form__row-compose · v-settings__button-playSettings notices
Use the plain notice for required context. Use the linked version only when the whole notice leads to the next step. The alert modifier marks a warning; top alignment supports longer copy.
c-form__label-info · c-form__label-info__inner · c-form__label-info_link · c-form__label-info_alert · c-form__label-info_align-topSettings text actions
Use a solid link for navigation and a dotted action for an inline behaviour. Secondary navigation below a field belongs in a subaction container.
c-form__link · c-form__action · c-form__subaction-containerSettings feedback
Overlay an autosaving field while its request is pending. Use the green message for success and the red message for errors.
c-form__field-status_visible · c-form__msg · c-form__errorSettings source cards
Use these cards for a visual choice with a title and short description. Clearly mark the selected state; disabled premium choices keep their badge.
c-form__popup-items · c-form__popup-item_selected · c-form__popup-item_disabledLimited fields
Use the form-kit field when text has a hard length limit. It adds the required visible counter; use standard settings fields otherwise.
app.ui.formKit.field(options)Optional fields
Use progressive chips when a form has one required field and several uncommon additions. Every chip needs a two-line tooltip: a plain explanation followed by a concrete example. Tooltips open below and automatically flip above when the visible scroll area would clip them. Revealed fields stay before the remaining chip row. The shared wiring removes the selected chip, then reveals and focuses its field.
c-ui-optional-fields · app.ui.formKit.optionalFields(options) · app.ui.formKit.wireOptionalFields(container)Segmented control
Use for two or three mutually exclusive choices that should stay visible. Pass disabled: true when a saved value is immutable.
app.ui.formKit.segmented(options)Editor structure
Compose larger editors from these neutral layout elements. Use the workspace surface for a routed editor, stack page regions, group related controls in a section, and wrap a focused nested editor in the item-panel boundary to prevent horizontal overflow.
c-ui-workspace · c-ui-stack · c-ui-inline · c-ui-section · c-ui-section__head · c-ui-section__title · c-ui-item-panel · c-ui-panel · c-ui-fieldset · c-ui-hint · c-ui-tag · c-ui-form-gridItems
Keep short supporting text next to the title it explains.
Drop action
Add the dropzone class to a secondary button when the same action accepts click selection and drag and drop. Wrap a page workspace in the drop-surface class and reveal its overlay while a compatible file is over it.
c-ui-dropzone · c-ui-dropzone_active · c-ui-drop-surface · c-ui-drop-surface_active · c-ui-drop-surface__overlayLoading
Use the shared loader for a page or panel waiting for data. For a popup action, call the pending API so the action is disabled, announced, and restored consistently.
c-loader · a-breathe-opacity · app.ui.popup.setActionPending(true, 'Saving…')Counters
Show current use and the hard limit together. Place the counter near the collection it describes.
app.ui.formKit.counter(current, limit, label)Editable item rows
Use one full-width row per item, with both cells truncated by an ellipsis. Long collections use 100-row pages without a nested scrollbar. Keep arrow pagination beside the heading and below the rows.
c-ui-badge-list_rows · c-ui-badge_invalid · app.ui.formKit.badge(options)Entity list
Use for named objects with repeated metadata. The whole row opens the object; destructive actions remain separate. Add the empty modifier only when the list contains an empty-state card.
c-ui-entity-list__row · c-ui-entity-list__button · c-ui-entity-list_emptyEmpty state
Explain what is missing and the single next action. Keep it inside the collection area. Pass an action option when the whole state should perform that action; use the wide option inside a grid.
app.ui.formKit.emptyState(title, description, { action: 'create-pack', wide: true }) · c-ui-empty-state_wideWorkspace popup
Use the 90% × 90% workspace size for rich editors. Keep metadata first and the editable collection second. Pass a danger action when a destructive operation belongs opposite the primary action.
app.ui.popup.render({ size: 'workspace', dangerActionHTML: 'Delete', onDangerActionClick: remove, … })