# XWUIRuleEditor Edits one When / If / Then automation rule in two drawings. `columns`: a radio list of triggers whose picked one shows its parameter inline ("More than [3] working days"), the scope, All or Any conditions (up to `maxConditions`, or a nested tree through power `XWUIQueryBuilder` when `nested`), ordered actions with a target each (up to `maxActions`, move up and down, remove, a palette), safety notices (from the host and from a trusted validator) and a test column (sample event, Run, the host's trace, the result). `sentence`: an editable sentence of words and inline controls (a token picker, a segmented choice, a number stepper or a typed number) whose word order is per-locale DATA, an action checklist, a summary line and an on/off switch. It composes basic `XWUISwitch`, `XWUISegmentedControl` and `XWUITag`, super `XWUIStepTrack` (the trace) and `XWUIChoiceGroup` (the checklist). It never evaluates or fires a rule: Test asks the host, Save hands the rule over. ## Basic Usage ```example file: examples/BasicUsage.ts html: examples/BasicUsage.html title: Basic Usage description: The smallest real rule: three triggers, one field, two actions, in four columns. ``` ## Automation Builder ```example file: examples/AutomationBuilder.ts html: examples/AutomationBuilder.html title: Automation Builder description: The plnx automations builder: rule R1 with nine triggers, six fields, seven actions, two sample events and a dry run answered by the host. ``` ## Rule Sentence ```example file: examples/RuleSentence.ts html: examples/RuleSentence.html title: Rule Sentence description: An editable sentence (When [trigger] [3] working days on [scope], then) with an action checklist, the suggest-mode summary and the switch. ``` ## Form Logic ```example file: examples/FormLogic.ts html: examples/FormLogic.html title: Form Logic description: A form rule: Show [Justification] when [Amount] is over [SAR 50,000], with a typed threshold and a true-now line. ``` ## Data | Field | What it is | | --- | --- | | `rule` | `{ id?, name, enabled, trigger: { key, params }, scope?, join: 'all' \| 'any', conditions: [{ field, op, value }], actions: [{ key, on?, params? }], query? }`. Host-owned (v-model). A trigger or action parameter lives in `params[param.key ?? 'value']`. `query` is the nested tree when `nested` is on; `join` and `conditions` mirror its top level. | | `sentence` | Tokens in reading order: `{ kind: 'text', text, token? }`, `{ kind: 'choice', id, options: [{ value, label }], value, display?: 'token' \| 'segmented', label? }`, `{ kind: 'number', id, min, max, step?, value, display?: 'stepper' \| 'input', prefix?, label? }`. Each locale sends its own order. | | `summary` | Plain-language line under the sentence. | | `catalog` | `triggers: [{ key, label, sub?, icon?, param? }]`, `fields: [{ key, label, kind: 'enum' \| 'number', ops, values?, min?, max? }]`, `actions: [{ key, label, icon?, param? }]`, `scopes?: [{ value, label }]`. A param is `{ kind: 'number' \| 'enum', key?, min?, max?, step?, default?, options?, before?, unit?, label? }`. Options and ops accept strings or `{ value, label }`. `icon` is a built-in glyph name or SVG path data (validated; anything else draws the default glyph). | | `notices` | `[{ tone: 'ok' \| 'info' \| 'warn' \| 'bad', text, title?, action?: { id, label } }]`. | | `trace`, `result` | The host's dry run: `[{ step, ok, state?: 'ok' \| 'stop' \| 'warn', ms? }]` and `{ ok, text }`. Hidden after the rule or the sample changes until the host sends a new one. | | `samples`, `sampleId` | Sample events `[{ id, text }]`; the sample button steps through them. | | `status`, `message` | `'loading'` draws a skeleton, `'error'` an alert with `message`. | ## Options | Option | Default | What it does | | --- | --- | --- | | `variant` | `'columns'` | `'sentence'` draws the sentence, checklist, summary and switch. | | `maxConditions`, `maxActions` | `3`, `3` | The most of each; Add and the palette disable with the reason as text. | | `nested` | `false` | Conditions edit as a nested tree in `XWUIQueryBuilder` (power). | | `showTest` | `true` | The test column (columns) or the Test button (sentence). | | `showHeader` | `true` | Name, switch, Revert / Save. | | `showSave` | columns yes, sentence no | Save and Revert in the header. | | `actionColumns` | `2` | Columns of the sentence checklist, or `'auto'`. | | `readonly` | `false` | Nothing can change. | | `inertWhenOff` | `true` | Sentence: inline controls go inert while the rule is off. | | `hues` | `{ when: 'yellow', if: 'purple', then: 'sky', test: 'indigo' }` | Step hue NAMES (`var(--xwui-hue-)`). | | `ariaLabel` | the rule name, else "Rule" | Accessible name of the editor group. | | `labels` | locale pack `xwui.rule_editor.*` | Every word; comparison words as `op_` (`op_gt`: "is over"). | | `locale`, `numberingSystem` | page language, `'latn'` | Number formatting (Western digits by default). | ## Events and methods Events (each also a bubbling DOM event on the host): `ruleChange { rule, part, source }` (`rule-change`; `part` is name, enabled, trigger, scope, join, conditions or actions), `tokenChange { id, value }` (`rule-token-change`), `actionToggle { id, on }` (`rule-action-toggle`), `enabledChange { enabled }` (`rule-enabled-change`), `test { rule, sampleId, tokens }` (`rule-test`), `save { rule }` (`rule-save`), `revert { rule }` (`rule-revert`), `sampleChange { id }` (`rule-sample-change`), `noticeAction { id }` (`rule-notice-action`). `ruleChange` stands for the REF_06 `change`: the base logic already emits `change` as its state signal. Methods: `getRule()`, `getTokens()`, `isDirty()`, `setTrigger(key)`, `setEnabled(on)`, `setToken(id, value)`, `addCondition()`, `addAction(key)`, `moveAction(index, delta)`, `runTest()`, `save()`, `revert()`, `setValidator(fn)`, `updateData(patch)`, `updateConfig(patch)`, `getElement()`, `destroy()`; `on(handler)` for each event. Environment (5th constructor argument, trusted): `validate(rule) => notices` (loop risk, rate; recomputed on every change, a throw counts as no notices) and `matchMedia`. A function is never read from data or config. A host write of a different rule (`updateData({ rule })`) is a new baseline (dirty clears); an echo of the same rule is not. ## Accessibility and RTL The editor is a named group. Columns are sections named by their step heading. The trigger list is a `radiogroup` with one tab stop: arrows pick and move focus (the horizontal pair swaps in RTL), Home and End jump; keys typed into the parameter editor stay there. Conditions and actions are ordered lists; every select, number field and button has its own name ("Field of condition 1", "Value for Priority", "Move up: Notify", "Remove action: Notify", "Add action: Notify"). Move up and Move down are the keyboard path for reordering, and focus follows the moved action. Number fields are `spinbutton`s: arrows step, Page keys step by ten, Home and End jump, Arabic-Indic digits are read, bad input snaps back. The sentence is a `group` whose name is the whole sentence as it reads now (its text twin); each inline control has its own name (`label`, else the word before it). The condition summary is a polite status; notices sit in a polite live region and a `bad` one is an `alert`; the trace and result are live. State is never colour alone: a checked radio, words on every notice, Passed / Stopped / Check on each trace step. Direction comes from the parent `dir`; numbers keep `dir="ltr"` and Western digits; text reads `dir="auto"`. ## Tokens Colours: `--text-primary`, `--text-secondary`, `--text-tertiary`, `--bg-card`, `--bg-secondary`, `--bg-hover`, `--border-subtle`, `--border-strong`, `--accent-primary`, `--accent-success`, `--accent-warning`, `--accent-error`; step hues through `--xwui-rule-editor-hue-{when,if,then,test}` (`hueVar`). Knob: `--xwui-rule-editor-col-min`. The nine core hue names exist only in xwflow-neon; the defaults use extended names (`yellow`, `purple`, `sky`, `indigo`). ```api ```