@stechquick/studio-cli 4.1.0-6 → 4.1.1-0

package/dist/studio-cli/{src/.ai-kit/knowledge/03-layout-and-slots.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/layout-and-slots.md}

@@ -1,8 +1,8 @@
-# 03 · Layout & Slots (`C` and `O`) — `S` system
+# Layout & Slots (`C` and `O`) — `S` system
 
-> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [AGENT_GUIDE Step 0](../AGENT_GUIDE.md).
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
 >
-> **This file is the `S` track.** Grid width, flex direction/align/justify, and spacing are authored as `S` params (how-to: [04-styling.md](04-styling.md)); `O.layout` is not authored. On a **legacy** page instead → [03-layout-and-slots-legacy.md](03-layout-and-slots-legacy.md).
+> **This file is the `S` track.** Grid width, flex direction/align/justify, and spacing are authored as `S` params (how-to: [styling.md](styling.md)); `O.layout` is not authored. On a **legacy** page instead → [layout-and-slots-legacy.md](layout-and-slots-legacy.md).
 
 ## Children (`C`) — grouped by slot
 
@@ -28,9 +28,9 @@ The slot **key** is the slot name; `default` is the main slot. Leaves use `"C":
 "O": { "cType": "slot" }
 ```
 
-`O.cType` mirrors the node's slot context and is always authored. Do **not** author `O.layout` (`dOpt`/`class`) here — that is the legacy mechanism; on an `S`-system page grid width, flex direction, align, justify, and spacing all go in `S` instead ([04-styling.md](04-styling.md)).
+`O.cType` mirrors the node's slot context and is always authored. Do **not** author `O.layout` (`dOpt`/`class`) here — that is the legacy mechanism; on an `S`-system page grid width, flex direction, align, justify, and spacing all go in `S` instead ([styling.md](styling.md)).
 
-Authoritative breakpoint device ranges (they're the boundaries `S` resolution ranges like `"xs-xl"`/`"md-xl"` are built from; kept in sync with the identical table in [../reference/styling-system.md](../reference/styling-system.md) §8 — update both):
+Breakpoint device ranges — the boundaries `S` resolution ranges like `"xs-xl"`/`"md-xl"` are built from:
 
 | Key | Device | Range |
 |-----|--------|-------|
@@ -49,7 +49,7 @@ VContainer (class "container container--fluid")
 ```
 
 ### Containment rules (editor-enforced placement)
-The Studio editor enforces these on drag-drop (source: component extensions `acceptableParentComps`/`acceptableChildComps`; official `layout.md`). They're best practice — runtime/Vuetify is lenient, but **author to these** so your page round-trips cleanly:
+The Studio editor enforces these on drag-drop (source: component extensions `acceptableParentComps`/`acceptableChildComps`; official `layout.md`). They're best practice — runtime/Vuetify is lenient, but **author to these** so the Studio editor accepts the tree as-is:
 - **`VCol` must be a child of `VRow`** and must not sit at the page root. (`layout.md`: "You cannot use VCol alone or within any other components. Always use VCol with VRow as its parent.")
 - **`VRow` should contain only `VCol`** children — put content inside a `VCol`, not directly in the `VRow`.
 - **`VFooter` accepts only `VContainer`** children.
@@ -58,7 +58,7 @@ The Studio editor enforces these on drag-drop (source: component extensions `acc
 
 Follow the editor's placement rules. Machine-readable rules: [../reference/component-index.json](../reference/component-index.json) `containmentRules`.
 
-**Width, stacking, equal-height cards.** Set a `VCol`'s width with **`S.col`** (1–12, range-keyed, e.g. `"xs-xl": {"col":"3"}`). `VCol` is itself a flex container whose direction is **not** column unless you set it — left unset it lays children out as a row, so two components dropped straight into a `VCol` render side-by-side instead of stacked; fix with **`S.flexDirection: "column"`** on that `VCol`. Worked examples (stacked label/value, equal-height cards) + the full param list: [04-styling.md](04-styling.md).
+**Width, stacking, equal-height cards.** Set a `VCol`'s width with **`S.col`** (1–12, range-keyed, e.g. `"xs-xl": {"col":"3"}`). `VCol` is itself a flex container whose direction is **not** column unless you set it — left unset it lays children out as a row, so two components dropped straight into a `VCol` render side-by-side instead of stacked; fix with **`S.flexDirection: "column"`** on that `VCol`. Worked examples (stacked label/value, equal-height cards) + the full param list: [styling.md](styling.md).
 
 ## Scoped slots in tables
-Custom cells use a `C` key `item.<columnValue>` with `cType:"scopedSlot"`. Inside it, `item.<field>` reads the row; for `VDataTable.click:row` the row arrives as the `index` param (`"P":"index:any,row:any"`). See [05-components.md](05-components.md).
+Custom cells use a `C` key `item.<columnValue>` with `cType:"scopedSlot"`. Inside it, `item.<field>` reads the row; for `VDataTable.click:row` the row arrives as the `index` param (`"P":"index:any,row:any"`). See [components.md](components.md).

package/dist/studio-cli/{src/.ai-kit/knowledge/07-localization.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/localization.md}

@@ -1,4 +1,4 @@
-# 07 · Localization (`lrids`, `LR`)
+# Localization (`lrids`, `LR`)
 
 ## `lrids` structure — by language code, values single-quoted
 ```json
@@ -10,7 +10,7 @@
 - Group by language code (`tr-TR`, `en-US`, …).
 - Every value is a single-quoted string (same quoting model as prop `H`).
 - Every key used by `LR`/`quick.LR` must exist in **all** required languages.
-- **Omit `clrids` entirely** — the compiler generates it on import (compiled values look like `╬'Kaydet'╩╩`). Never author `clrids`, and strip it from any downloaded file you edit.
+- **Omit `clrids` entirely** — the compiler generates it on import (compiled values look like `╬'Kaydet'╩╩`). Never author `clrids`, and strip it from any existing file you edit.
 
 ## Context rule: `LR` in props, `quick.LR` in events
 | Context | Use |
@@ -35,6 +35,6 @@ Static = a quoted literal (`"H": "'Kaydet'"`); localized = wrap the key (`"H": "
 1. Pick a stable key.
 2. Add it under every language block in `lrids`.
 3. Reference with `LR('key')` (props) / `quick.LR('key')` (events).
-4. Verify no language is missing the key before delivery.
+4. Verify no language is missing the key before finishing.
 
 There is also a runtime `quick.importLocalization(langCode, {...})` and global localization qjsons in some projects — but for a single page, `lrids` is what you author.

package/dist/studio-cli/{src/.ai-kit/knowledge/09-page-skeletons-legacy.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/page-skeletons-legacy.md}

@@ -1,8 +1,8 @@
-# 09 · Page Skeletons — legacy `cssClass` system
+# Page Skeletons — legacy `cssClass` system
 
-> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [AGENT_GUIDE Step 0](../AGENT_GUIDE.md).
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
 >
-> **This file is the `legacy` track.** These are **structure references for editing/extending an existing legacy page**, not "start from scratch" templates — keep the page's current root, don't retrofit a `VContainer`, and design via `O.layout` (`dOpt`/`class`) + CSS classes. Starting a genuinely new page instead → [09-page-skeletons.md](09-page-skeletons.md).
+> **This file is the `legacy` track.** These are **structure references for editing/extending an existing legacy page**, not "start from scratch" templates — keep the page's current root, don't retrofit a `VContainer`, and design via `O.layout` (`dOpt`/`class`) + CSS classes. Starting a genuinely new page instead → [page-skeletons.md](page-skeletons.md).
 
 ## Reference shape — framework-native (no service component)
 A legacy page typically has this shape (`Messaging` + a layout root). Match it when adding sections; do not add a `VContainer` root to a page that already roots elsewhere.
@@ -36,7 +36,7 @@ export default pjson
 ```
 
 ## Reference shape — with project ServiceCaller (only if the project provides one)
-Same as above, plus a `CustomComponent` after `Messaging` (see [06-services.md](06-services.md) Pattern B), with init in its `onLoad`.
+Same as above, plus a `CustomComponent` after `Messaging` (see [services.md](services.md) Pattern B), with init in its `onLoad`.
 
 ## Centered content scaffold (drop into PAGE CONTENT)
 Legacy form — layout via `O.layout` (`dOpt` + synced `class`), visuals via CSS utility classes on the `class` prop:
@@ -77,7 +77,7 @@ On a legacy page, design lives in two places, not in `S` (which won't render on
   "O": { "cType": "slot" }, "_Editor": { "eID": "cardMain" } }
 ```
 
-Full how-to: [04-styling-legacy.md](04-styling-legacy.md); the `dOpt` grammar + `dOpt → class` compilation rule: [../reference/layout-system.md](../reference/layout-system.md). **Do not introduce `S` on a legacy page — it silently won't render.**
+Full how-to: [styling-legacy.md](styling-legacy.md); the `dOpt` grammar + `dOpt → class` compilation rule: [../reference/layout-system.md](../reference/layout-system.md). **Do not introduce `S` on a legacy page — it silently won't render.**
 
 ## Large-page policy (incremental)
 Don't rewrite a whole page in one shot. Add **1–3 sections per edit**, validate, and report progress. Reuse examples from [../examples/cssClass/](../examples/cssClass/) (the legacy set — e.g. `CardTitle.qjson`, `Profile_Card.qjson`) and neighboring project pages rather than re-deriving structures.

package/dist/studio-cli/{src/.ai-kit/knowledge/09-page-skeletons.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/page-skeletons.md}

@@ -1,8 +1,8 @@
-# 09 · Page Skeletons — `S` system
+# Page Skeletons — `S` system
 
-> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [AGENT_GUIDE Step 0](../AGENT_GUIDE.md).
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
 >
-> **This file is the `S` track** (starting a brand-new page). A new page's `opt.V` is always the current version — **author it as `opt.V: 2.5`** (this marks the page as `S`-system; the skeleton below already sets it). Adding a section to an **existing legacy page** instead → [09-page-skeletons-legacy.md](09-page-skeletons-legacy.md).
+> **This file is the `S` track** (starting a brand-new page). A new page's `opt.V` is always the current version — **author it as `opt.V: 2.5`** (this marks the page as `S`-system; the skeleton below already sets it). Adding a section to an **existing legacy page** instead → [page-skeletons-legacy.md](page-skeletons-legacy.md).
 
 Start every new page from one of these. Structure: `Messaging` (event hub) → optional service `CustomComponent` (only if the project uses one) → `VContainer` (layout root). For a **new page the `VContainer` content root is required** (not merely canonical): wrap all UI content in a single top-level `VContainer`, with `Messaging` and the optional service component as the only other top-level `pJson` siblings. This is a **new-page rule only** — when editing an existing page, keep its current root and do **not** add a `VContainer` unless the user asks.
 
@@ -36,7 +36,7 @@ export default pjson
 ```
 
 ## Skeleton — with project ServiceCaller (only if the project provides one)
-Same as above, plus a `CustomComponent` after `Messaging` (see [06-services.md](06-services.md) Pattern B), with init in its `onLoad`.
+Same as above, plus a `CustomComponent` after `Messaging` (see [services.md](services.md) Pattern B), with init in its `onLoad`.
 
 ## Centered content scaffold (drop into PAGE CONTENT)
 
@@ -103,9 +103,9 @@ The skeletons above are intentionally minimal: **structure + `class` only**. The
 - `S` is **range-keyed** (`"xs-xl"` = all sizes; narrower ranges like `"md-xl"` override for larger screens). Values are strings; `""` = unset.
 - Pull the supported param names + editor defaults for each `T` from [../reference/component-styles.json](../reference/component-styles.json) — don't invent params.
 - Style a child's text/icon (e.g. a `VBtn` label color) through the **parent's `SC`**, not the child's own `S`.
-- **Everything goes in `S`** — layout (flex/grid/spacing/direction, where the component's `componentStyleList` supports it) and visuals (color/font/border/shadow/exact size) alike. `O.layout` (`dOpt`+`class`) is legacy; don't author it. Reach for the component's `class` prop only as a Web-only last resort when `S` truly has no param for it — never on Mobile.
+- **Everything goes in `S`** — layout (flex/grid/spacing/direction, where the component's style block in [../reference/component-styles.json](../reference/component-styles.json) supports it) and visuals (color/font/border/shadow/exact size) alike. `O.layout` (`dOpt`+`class`) is legacy; don't author it. Reach for the component's `class` prop only as a Web-only last resort when `S` truly has no param for it — never on Mobile.
 
-Full how-to: [04-styling.md](04-styling.md). **A page delivered with no `S` is unstyled — the styling pass is part of authoring, not an optional extra.**
+Full how-to: [styling.md](styling.md). **A page delivered with no `S` is unstyled — the styling pass is part of authoring, not an optional extra.**
 
 ## Large-page policy (incremental)
 Don't rewrite a whole page in one shot. Write the skeleton + scaffold, then add **1–3 sections per edit**, validate, and report progress. Reuse examples from [../examples/style/](../examples/style/) (the `S`-system set) and neighboring project pages rather than re-deriving structures.

package/dist/studio-cli/{src/.ai-kit/knowledge/01-properties.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/properties.md}

@@ -1,4 +1,4 @@
-# 01 · Properties (`P`)
+# Properties (`P`)
 
 Each prop is `{ "H": value/expression, "T": kind, "HL": language? }`.
 
@@ -43,7 +43,7 @@ Prop `H` values are **QScript expressions** and **can include conditionals**. Re
   "T": "prop"
 }
 ```
-The `if/else` block returns the last evaluated value. (Older community docs claimed conditionals were forbidden in props — that is **incorrect**; the framework supports them.)
+The `if/else` block returns the last evaluated value — conditionals are fully supported in props.
 
 Available bare in QScript props: `LR(...)`, `components.*`, `data.*` (in dynamic templates), `item.*` (in scoped slots), `Math`, `Date`, `Number`, `JSON`, `string`, `regex`, `typeOf`. Framework namespaces drop the `quick.` prefix: `store.get('x')`, `Quick.go(...)`, `MM.trigger(...)`. See [reference/quick-api.md](../reference/quick-api.md) for the full list.
 
@@ -66,7 +66,7 @@ Use bare `LR('key')` (never `quick.LR` in a prop):
 ```json
 "text": { "H": "LR('save')", "T": "prop" }
 ```
-See [07-localization.md](07-localization.md).
+See [localization.md](localization.md).
 
 ## Special Quick props
 `ID` (required, unique), `visible`, `Render`, `qValue`, `class` — see your track's component catalog §5 ([S](../reference/component-catalog.md) / [legacy](../reference/component-catalog-legacy.md)). Use `qValue` for input values and to open/close dialogs.
@@ -74,4 +74,4 @@ See [07-localization.md](07-localization.md).
 ## The two text gotchas
 - `QLabel.text` → `T: "prop"`.
 - `VIcon` icon name → `text` with `T: "text"`. The `H` value is still a QScript string — always single-quote it: `"H": "'mdi-home'"`, never bare `"H": "mdi-home"`.
-(Both verified in runtime + real files; see your track's catalog §6.)
+(See your track's catalog §6.)

package/dist/studio-cli/{src/.ai-kit/knowledge/00-qjson-structure-legacy.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/qjson-structure-legacy.md}

@@ -1,8 +1,8 @@
-# 00 · QJSON Structure (start here) — legacy `cssClass` system
+# QJSON Structure (start here) — legacy `cssClass` system
 
-> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [AGENT_GUIDE Step 0](../AGENT_GUIDE.md).
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
 >
-> **This file is the `legacy` track** (`opt.V` missing or `< 2.0`, where `S` does not render). Design is authored through `O.layout` (`dOpt` + compiled `class`) and CSS utility classes. On a new page / `opt.V >= 2.0` instead → [00-qjson-structure.md](00-qjson-structure.md). (A new page is always `S`, so legacy = an existing page you are editing.)
+> **This file is the `legacy` track** (`opt.V` missing or `< 2.0`, where `S` does not render). Design is authored through `O.layout` (`dOpt` + compiled `class`) and CSS utility classes. On a new page / `opt.V >= 2.0` instead → [qjson-structure.md](qjson-structure.md). (A new page is always `S`, so legacy = an existing page you are editing.)
 
 A `.qjson` file is a **JavaScript module** describing one UI page as a tree of components. You author `pJson` (the tree) and `lrids` (localization); the editor/compiler generates the compiled twins `cJson`/`clrids`.
 
@@ -15,7 +15,7 @@ let pjson = {
 export default pjson
 ```
 
-Rules: an AI-authored file carries these **three** keys (`pJson`, `lrids`, `opt`); the file ends with `};` then `export default pjson`. The compiled twins `cJson`/`clrids` are **omitted entirely** — don't write them into a new file, and strip them from any downloaded file you edit (see "What you never author" below). Full envelope (incl. optional `description`, `files`, `namedViews`, `opt.QL/V`) is in [reference/qjson-schema-legacy.md](../reference/qjson-schema-legacy.md).
+Rules: an AI-authored file carries these **three** keys (`pJson`, `lrids`, `opt`); the file ends with `};` then `export default pjson`. The compiled twins `cJson`/`clrids` are **omitted entirely** — don't write them into a new file, and strip them from any existing file you edit (see "What you never author" below). Full envelope (incl. optional `description`, `files`, `namedViews`, `opt.QL/V`) is in [reference/qjson-schema-legacy.md](../reference/qjson-schema-legacy.md).
 
 ## The component node — same six fields at every depth
 
@@ -33,13 +33,13 @@ Rules: an AI-authored file carries these **three** keys (`pJson`, `lrids`, `opt`
 | Field | Holds | Detailed in |
 |-------|-------|-------------|
 | `T` | component type name | [reference/component-catalog-legacy.md](../reference/component-catalog-legacy.md) |
-| `P` | props | [01-properties.md](01-properties.md) |
-| `E` | events | [02-events-and-scripting.md](02-events-and-scripting.md) |
-| `C` | children grouped by slot | [03-layout-and-slots-legacy.md](03-layout-and-slots-legacy.md) |
-| `O` | options: `cType` (always authored) **and `layout`** (`dOpt`/`class`) — `layout` is where grid/flex/spacing design lives on a legacy page | [03-layout-and-slots-legacy.md](03-layout-and-slots-legacy.md) |
+| `P` | props | [properties.md](properties.md) |
+| `E` | events | [events-and-scripting.md](events-and-scripting.md) |
+| `C` | children grouped by slot | [layout-and-slots-legacy.md](layout-and-slots-legacy.md) |
+| `O` | options: `cType` (always authored) **and `layout`** (`dOpt`/`class`) — `layout` is where grid/flex/spacing design lives on a legacy page | [layout-and-slots-legacy.md](layout-and-slots-legacy.md) |
 | `_Editor.eID` | equals `P.ID.H` when auto-generated, but **may differ** after a Studio rename — equality is *not* required (both must be present + unique) | this file |
 
-`CP`, `D`, `SA` are advanced editor-managed fields you normally don't hand-author. **`S`/`SC` are the modern Style-tab fields and do NOT render on a legacy page — do not author them here.** Design instead through `O.layout` and the `class` prop — see [04-styling-legacy.md](04-styling-legacy.md). Introducing `S` on a legacy page silently breaks styling.
+`CP`, `D`, `SA` are advanced editor-managed fields you normally don't hand-author. **`S`/`SC` are the modern Style-tab fields and do NOT render on a legacy page — do not author them here.** Design instead through `O.layout` and the `class` prop — see [styling-legacy.md](styling-legacy.md). Introducing `S` on a legacy page silently breaks styling.
 
 ## The ID rules
 1. Every component has `P.ID.H`, **unique** within the page.
@@ -59,7 +59,7 @@ pJson
      └─ VRow → VCol → VCard → content (labels, buttons, tables, inputs, charts)
 ```
 
-For each node decide, in order: `T` → `P` → `E` → `C` → `O` (`cType` + `layout`) → copy ID into `_Editor.eID`. Mirror the page's existing conventions (token style, `class` usage). Reference legacy structures in [09-page-skeletons-legacy.md](09-page-skeletons-legacy.md) and the `examples/cssClass/` pages.
+For each node decide, in order: `T` → `P` → `E` → `C` → `O` (`cType` + `layout`) → copy ID into `_Editor.eID`. Mirror the page's existing conventions (token style, `class` usage). Reference legacy structures in [page-skeletons-legacy.md](page-skeletons-legacy.md) and the `examples/cssClass/` pages.
 
 ## What you never author
-`cJson` and `clrids` are **compiled output** (handler strings get wrapped in `╬…╩╩` sentinels). Author `pJson`/`lrids` only, and **leave the compiled twins out of the file entirely** — don't write them into a new page, and strip them if a downloaded file already has them. Studio/the compiler regenerates them on import — see [10-validation-and-sync-legacy.md](10-validation-and-sync-legacy.md).
+`cJson` and `clrids` are **compiled output** (handler strings get wrapped in `╬…╩╩` sentinels). Author `pJson`/`lrids` only, and **leave the compiled twins out of the file entirely** — don't write them into a new page, and strip them if the file already has them. Studio/the compiler regenerates them on import — see [validation-legacy.md](validation-legacy.md).

package/dist/studio-cli/{src/.ai-kit/knowledge/00-qjson-structure.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/qjson-structure.md}

@@ -1,8 +1,8 @@
-# 00 · QJSON Structure (start here) — `S` system
+# QJSON Structure (start here) — `S` system
 
-> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [AGENT_GUIDE Step 0](../AGENT_GUIDE.md).
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
 >
-> **This file is the `S` track** (new page, or `opt.V >= 2.0`). Design — visual **and** layout — is authored in each node's `S` object; `O.layout` is not authored here. On a **legacy** page instead → [00-qjson-structure-legacy.md](00-qjson-structure-legacy.md).
+> **This file is the `S` track** (new page, or `opt.V >= 2.0`). Design — visual **and** layout — is authored in each node's `S` object; `O.layout` is not authored here. On a **legacy** page instead → [qjson-structure-legacy.md](qjson-structure-legacy.md).
 
 A `.qjson` file is a **JavaScript module** describing one UI page as a tree of components. You author `pJson` (the tree) and `lrids` (localization); the editor/compiler generates the compiled twins `cJson`/`clrids`.
 
@@ -15,7 +15,7 @@ let pjson = {
 export default pjson
 ```
 
-Rules: an AI-authored file carries these **three** keys (`pJson`, `lrids`, `opt`); the file ends with `};` then `export default pjson`. The compiled twins `cJson`/`clrids` are **omitted entirely** — don't write them into a new file, and strip them from any downloaded file you edit (see "What you never author" below). Full envelope (incl. optional `description`, `files`, `namedViews`, `opt.QL/V`) is in [reference/qjson-schema.md](../reference/qjson-schema.md).
+Rules: an AI-authored file carries these **three** keys (`pJson`, `lrids`, `opt`); the file ends with `};` then `export default pjson`. The compiled twins `cJson`/`clrids` are **omitted entirely** — don't write them into a new file, and strip them from any existing file you edit (see "What you never author" below). Full envelope (incl. optional `description`, `files`, `namedViews`, `opt.QL/V`) is in [reference/qjson-schema.md](../reference/qjson-schema.md).
 
 ## The component node — same six fields at every depth
 
@@ -33,13 +33,13 @@ Rules: an AI-authored file carries these **three** keys (`pJson`, `lrids`, `opt`
 | Field | Holds | Detailed in |
 |-------|-------|-------------|
 | `T` | component type name | [reference/component-catalog.md](../reference/component-catalog.md) |
-| `P` | props | [01-properties.md](01-properties.md) |
-| `E` | events | [02-events-and-scripting.md](02-events-and-scripting.md) |
-| `C` | children grouped by slot | [03-layout-and-slots.md](03-layout-and-slots.md) |
-| `O` | options: `cType` (always authored). The `layout` sub-field (`dOpt`/`class`) is the legacy mechanism — **not authored here**; grid/flex/spacing go in `S` | [03-layout-and-slots.md](03-layout-and-slots.md) |
+| `P` | props | [properties.md](properties.md) |
+| `E` | events | [events-and-scripting.md](events-and-scripting.md) |
+| `C` | children grouped by slot | [layout-and-slots.md](layout-and-slots.md) |
+| `O` | options: `cType` (always authored). The `layout` sub-field (`dOpt`/`class`) is the legacy mechanism — **not authored here**; grid/flex/spacing go in `S` | [layout-and-slots.md](layout-and-slots.md) |
 | `_Editor.eID` | equals `P.ID.H` when auto-generated, but **may differ** after a Studio rename — equality is *not* required (both must be present + unique) | this file |
 
-`CP`, `D`, `SA` are advanced editor-managed fields you normally don't hand-author. **`S`/`SC` are the exception: you must hand-author them** — see [AGENT_GUIDE-s.md](../AGENT_GUIDE-s.md) rule S3 and [04-styling.md](04-styling.md). A component left without an `S` (when it carries visual or layout-flow intent) is the most common authoring miss, not an optional editor step.
+`CP`, `D`, `SA` are advanced editor-managed fields you normally don't hand-author. **`S`/`SC` are the exception: you must hand-author them** — see [s-track.md](../s-track.md) rule S3 and [styling.md](styling.md). A component left without an `S` (when it carries visual or layout-flow intent) is the most common authoring miss, not an optional editor step.
 
 ## The ID rules
 1. Every component has `P.ID.H`, **unique** within the page.
@@ -59,9 +59,9 @@ pJson
 
 For each node decide, in order: `T` → `P` → `E` → `C` → `O` → copy ID into `_Editor.eID`.
 
-> **New page: the `VContainer` layout root is required, not optional.** Wrap all UI/visual content in a single top-level `VContainer`; the only non-`VContainer` top-level `pJson` siblings allowed are `Messaging` (event hub) and an optional service component. This applies to **new pages only** — when editing an existing page, keep its current root and do **not** insert a `VContainer` unless the user explicitly asks (see [AGENT_GUIDE-s.md](../AGENT_GUIDE-s.md) rule S4).
+> **New page: the `VContainer` layout root is required, not optional.** Wrap all UI/visual content in a single top-level `VContainer`; the only non-`VContainer` top-level `pJson` siblings allowed are `Messaging` (event hub) and an optional service component. This applies to **new pages only** — when editing an existing page, keep its current root and do **not** insert a `VContainer` unless the user explicitly asks (see [s-track.md](../s-track.md) rule S4).
 
-Copy a full starting skeleton from [09-page-skeletons.md](09-page-skeletons.md).
+Copy a full starting skeleton from [page-skeletons.md](page-skeletons.md).
 
 ## What you never author
-`cJson` and `clrids` are **compiled output** (handler strings get wrapped in `╬…╩╩` sentinels). Author `pJson`/`lrids` only, and **leave the compiled twins out of the file entirely** — don't write them into a new page, and strip them if a downloaded file already has them. Studio/the compiler regenerates them on import — see [10-validation-and-sync.md](10-validation-and-sync.md).
+`cJson` and `clrids` are **compiled output** (handler strings get wrapped in `╬…╩╩` sentinels). Author `pJson`/`lrids` only, and **leave the compiled twins out of the file entirely** — don't write them into a new page, and strip them if the file already has them. Studio/the compiler regenerates them on import — see [validation.md](validation.md).

package/dist/studio-cli/{src/.ai-kit/knowledge/06-services.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/services.md}

@@ -1,4 +1,4 @@
-# 06 · Services (REST)
+# Services (REST)
 
 Two patterns. **Check existing project pages first** and follow whichever the project uses.
 

package/dist/studio-cli/{src/.ai-kit/knowledge/04-styling-legacy.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/styling-legacy.md}

@@ -1,12 +1,12 @@
-# 04b · Legacy styling — the `cssClass` system (`O.layout` / CSS utility classes)
+# Legacy styling — the `cssClass` system (`O.layout` / CSS utility classes)
 
-> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [AGENT_GUIDE Step 0](../AGENT_GUIDE.md).
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
 >
-> **This file is the `legacy` track.** Style through `O.layout` (`dOpt` tokens + compiled `class`) and CSS utility classes, exactly as the page already does; never introduce `S` (it won't render on `V < 2`). On a new page / `opt.V >= 2.0` instead → [04-styling.md](04-styling.md). Reference examples from [../examples/cssClass/](../examples/cssClass/) only — the `S` examples in `examples/style/` will mislead you here.
+> **This file is the `legacy` track.** Style through `O.layout` (`dOpt` tokens + compiled `class`) and CSS utility classes, exactly as the page already does; never introduce `S` (it won't render on `V < 2`). On a new page / `opt.V >= 2.0` instead → [styling.md](styling.md). Reference examples from [../examples/cssClass/](../examples/cssClass/) only — the `S` examples in `examples/style/` will mislead you here.
 
 ## When you are here
 
-You have opened a production page that predates the `S` system and needs a small change (the common case: "add a column", "nudge spacing", "change a text color"). Do **not** migrate it to `S` as a side effect of an edit — `S` won't render, so it would silently break the styling. Match the mechanism the page already uses. (A deliberate, full migration to `S` is a separate, opt-in task — see the `qjson-legacy-migrator` agent — not something to do inline.)
+You have opened a production page that predates the `S` system and needs a small change (the common case: "add a column", "nudge spacing", "change a text color"). Do **not** migrate it to `S` as a side effect of an edit — `S` won't render, so it would silently break the styling. Match the mechanism the page already uses. (A deliberate, full migration to `S` is a separate, opt-in task — not something to do inline.)
 
 ## The two legacy mechanisms
 
@@ -51,7 +51,7 @@ Direct Vuetify utility classes on a node's `class` prop (Web-only). On a legacy
 
 Common utilities: typography `text-h1`…`text-h6`, `text-body-1/2`, `text-caption` + `font-weight-bold|medium|regular`; color `primary`/`primary--text`, `secondary--text`, `success--text`, `error--text`, `white--text`; spacing `pa-N`/`px-N`/`mt-N`… (`N × 4px`); appearance `elevation-0…24`, `rounded-lg`, `transparent`; alignment `d-flex`, `justify-center`, `align-center`. The `class` → `S` mapping table in [../reference/mapping-S-vuetify-class.md](../reference/mapping-S-vuetify-class.md) documents each token (useful here for understanding a token, and later if the page is ever migrated to `S`).
 
-**Gotcha — `VCol` does not auto-stack its children (see [03-layout-and-slots-legacy.md](03-layout-and-slots-legacy.md)).** Left without an explicit direction, a `VCol` lays children out as a row, so two components dropped straight into it render side-by-side instead of stacked. Fix here: add `fd:flex-column` to that `VCol`'s `O.layout.dOpt` (and recompile the synced `class`, e.g. `flex-column`). Don't leave a multi-child `VCol` without an explicit direction.
+**Gotcha — `VCol` does not auto-stack its children (see [layout-and-slots-legacy.md](layout-and-slots-legacy.md)).** Left without an explicit direction, a `VCol` lays children out as a row, so two components dropped straight into it render side-by-side instead of stacked. Fix here: add `fd:flex-column` to that `VCol`'s `O.layout.dOpt` (and recompile the synced `class`, e.g. `flex-column`). Don't leave a multi-child `VCol` without an explicit direction.
 
 **Equal-height cards in a row:** `VCard` has no flex `S`/`dOpt` mechanism of its own, so add `d-flex` to the `VCol`'s `class` and `flex-grow-1 d-flex flex-column` to the card's `class` (the `VRow`'s default `align-items:stretch` already gives the `VCol` full height).
 
@@ -60,14 +60,14 @@ Common utilities: typography `text-h1`…`text-h6`, `text-body-1/2`, `text-capti
 1. **Do not introduce `S`.** It won't render on `V<2`. Keep design in `O.layout` / `class`.
 2. **Keep `O.layout.dOpt` and `O.layout.class` in sync** — recompile `class` per the algorithm in [../reference/layout-system.md](../reference/layout-system.md) after any `dOpt` change.
 3. **Respect containment**: `VCol` only inside `VRow`; `VRow` holds only `VCol`; canonical wrapper `VContainer > VRow > VCol > content`.
-4. **Omit `cJson`/`clrids` entirely** — author `pJson`/`lrids` only; never write the compiled twins into a new file, and strip them from any downloaded file you edit. Studio/the compiler regenerates them on import.
+4. **Omit `cJson`/`clrids` entirely** — author `pJson`/`lrids` only; never write the compiled twins into a new file, and strip them from any existing file you edit. Studio/the compiler regenerates them on import.
 5. **Match the page's conventions** — mirror sibling nodes' token style, ID style, and class usage. Reference [../examples/cssClass/](../examples/cssClass/) for real legacy patterns.
-6. **Compile before finishing**: `studio buildQjson <file>` and fix all errors.
+6. **Validate before finishing** against [validation-legacy.md](validation-legacy.md); fix all errors.
 
 ## Migrating a legacy page to `S` (separate task)
 
-If the goal is genuinely to modernize a page (not just edit it), that means moving it onto the `S` system — a controlled, per-file conversion handled by the `qjson-legacy-migrator` agent ([../agents/qjson-legacy-migrator.md](../agents/qjson-legacy-migrator.md)), not an incidental edit. The `dOpt`/`class` → `S` conversion table it uses is [../reference/mapping-S-vuetify-class.md](../reference/mapping-S-vuetify-class.md). A migrated page only styles correctly once its runtime/`opt.V` supports `S`.
+If the goal is genuinely to modernize a page (not just edit it), that means moving it onto the `S` system — a controlled, per-file conversion done as its own dedicated task, not an incidental edit. The `dOpt`/`class` → `S` conversion table is [../reference/mapping-S-vuetify-class.md](../reference/mapping-S-vuetify-class.md). A migrated page only styles correctly once its runtime/`opt.V` supports `S`.
 
-## Pre-sync checklist
+## Final checklist
 
-The full pre-sync checklist (shared core + the legacy style checks — no `S`, `dOpt`↔`class` in sync, `class` used freely) is in [10-validation-and-sync-legacy.md](10-validation-and-sync-legacy.md). Run it before syncing.
+The full final checklist (shared core + the legacy style checks — no `S`, `dOpt`↔`class` in sync, `class` used freely) is in [validation-legacy.md](validation-legacy.md). Run it before finishing.

package/dist/studio-cli/{src/.ai-kit/knowledge/04-styling.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/styling.md}

@@ -1,10 +1,10 @@
-# 04 · Styling — the `S` (Style) system
+# Styling — the `S` (Style) system
 
-> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [AGENT_GUIDE Step 0](../AGENT_GUIDE.md).
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
 >
-> **This file is the `S` track.** `S` does not render on a legacy page — on a **legacy** page instead → [04-styling-legacy.md](04-styling-legacy.md). Reference examples from [../examples/style/](../examples/style/) only.
+> **This file is the `S` track.** `S` does not render on a legacy page — on a **legacy** page instead → [styling-legacy.md](styling-legacy.md). Reference examples from [../examples/style/](../examples/style/) only.
 
-> The earlier community docs treated styling as "CSS utility classes only" — that is just one mechanism, and **CSS works on Web only**. For the exhaustive schema (every `S` param, editor types, defaults, `SC` inheritance, cross-platform application) see **[../reference/styling-system.md](../reference/styling-system.md)**; the per-component supported `S` params + defaults are in **[../reference/component-styles.json](../reference/component-styles.json)** — the only source to consult when authoring `S`.
+> CSS utility classes are only one mechanism, and **CSS works on Web only**. For the exhaustive schema (every `S` param, editor types, defaults, `SC` inheritance, cross-platform application) see **[../reference/styling-system.md](../reference/styling-system.md)**; the per-component supported `S` params + defaults are in **[../reference/component-styles.json](../reference/component-styles.json)** — the only source to consult when authoring `S`. (Treat that list as generation guidance rather than a hard gate — the editor serializes a few extra composite sub-params beyond it — so when in doubt also check a sibling page or the styling reference.)
 
 > **Why not CSS:** Quick renders on Web, Android, and iOS. CSS exists only on Web. The Style tab serializes into the node's platform-neutral **`S`** object, which each platform applies natively (Web → CSS `@media`+`[q_UID]`; Mobile → flattened to the device's breakpoint range, `col`→flex-basis, via the native bridge). So for cross-platform styling you must use `S`, not a CSS Style File.
 
@@ -63,7 +63,7 @@ On an `S`-system page, layout is **not** a separate mechanism — the Layout box
 
 > The pre-`S` `O.layout` (`dOpt` + compiled `class`) mechanism for the same intents belongs to the legacy era — never author it on an `S`-system page.
 
-### Responsive breakpoints (authoritative pixel ranges)
+### Responsive breakpoints
 | Key | Device | Range |
 |-----|--------|-------|
 | `xs` | Mobile | 0–600px |
@@ -100,7 +100,7 @@ Some visuals are set on the **parent** and pushed into a typed child — e.g. a
   "C": { "default": { "c": [ /* QLabel + VIcon inherit the above */ ], "cType": "slot" } } }
 ```
 
-**`SC` complements the child's own `S` — it does not replace it.** Per rule S3 ([AGENT_GUIDE-s.md](../AGENT_GUIDE-s.md)) the child label/icon inside a `VBtn`/`VChip`/`VTabs` **also** carries its own `S` with its full default set from `component-styles.json`, values matched to the design (e.g. a white-text button label writes `fontColor:#ffffff` — not the generic QLabel default `#000000`). This is what the editor itself produces (see the button label in [../examples/style/MMDelay.qjson](../examples/style/MMDelay.qjson)). Keep the parent's `SC` mapping alongside it.
+**`SC` complements the child's own `S` — it does not replace it.** Per rule S3 ([s-track.md](../s-track.md)) the child label/icon inside a `VBtn`/`VChip`/`VTabs` **also** carries its own `S` with its full default set from `component-styles.json`, values matched to the design (e.g. a white-text button label writes `fontColor:#ffffff` — not the generic QLabel default `#000000`). This is what the editor itself produces (see the button label in [../examples/style/MMDelay.qjson](../examples/style/MMDelay.qjson)). Keep the parent's `SC` mapping alongside it.
 
 Also: legacy props migrate into `S` per each component's `propMigrateList` — e.g. `VBtn`/`VCard` `color` → `backgroundColor`, `VTextField` `color` → `labelDefaultFontColor`. Prefer setting `S` directly.
 
@@ -142,8 +142,8 @@ For locally-exported projects, custom fonts need the `@font-face` rule added to
   | `maxWidth` / `minWidth` / `maxHeight` as props | `S.maxWidth` / `S.minWidth` / `S.maxHeight` |
   | `elevation` prop | `S.boxShadow` |
 
-- **Never leave a component you placed with no `S` at all, and emit every default** — see [AGENT_GUIDE-s.md](../AGENT_GUIDE-s.md) rule S3. A `default` value listed in `component-styles.json` for a param is only the Style-tab's pre-filled suggestion — it is not silently applied unless you write that `S` key yourself. Therefore a placed component's `S` must include **every param that carries a `default` in its `component-styles.json` block** (the default value, or your design's override). Params whose JSON entry has no default (empty `{}`) are optional — set them only when the design needs them.
-- **A multi-child `VCol` does not stack for free.** `VCol` is itself a flex container, but its flex-direction is **not** column unless you set it — left unset it lays children out as a row, so two components dropped straight into a `VCol` render side-by-side instead of stacked (true in both eras — see [03-layout-and-slots.md](03-layout-and-slots.md)). The fix here is `S.flexDirection: "column"` on that `VCol` — a real, supported `S` param (`componentStyleList`'s `layout-chooser`/`content-direction` group; see the `VCol` block in [../reference/component-styles.json](../reference/component-styles.json)).
+- **Never leave a component you placed with no `S` at all, and emit every default** — see [s-track.md](../s-track.md) rule S3. A `default` value listed in `component-styles.json` for a param is only the Style-tab's pre-filled suggestion — it is not silently applied unless you write that `S` key yourself. Therefore a placed component's `S` must include **every param that carries a `default` in its `component-styles.json` block** (the default value, or your design's override). Params whose JSON entry has no default (empty `{}`) are optional — set them only when the design needs them.
+- **A multi-child `VCol` does not stack for free.** `VCol` is itself a flex container, but its flex-direction is **not** column unless you set it — left unset it lays children out as a row, so two components dropped straight into a `VCol` render side-by-side instead of stacked (true in both eras — see [layout-and-slots.md](layout-and-slots.md)). The fix here is `S.flexDirection: "column"` on that `VCol` — a real, supported `S` param (the `layout-chooser`/`content-direction` group; see the `VCol` block in [../reference/component-styles.json](../reference/component-styles.json)).
 
   Canonical **stacked label + value field** (label on top, value/input below):
 
@@ -172,6 +172,6 @@ For locally-exported projects, custom fonts need the `@font-face` rule added to
 ## Common theme utility classes (via `class` prop — Web-only last resort)
 These exist and work on Web, but most have an `S` equivalent that also works on Mobile — always check [../reference/mapping-S-vuetify-class.md](../reference/mapping-S-vuetify-class.md) first and prefer the `S` param (e.g. `fontSize`+`fontWeight` over `text-h5`, `fontColor` over `primary--text`, `borderRadius`/`backgroundColor` over `rounded-lg`/`transparent`, `paddingTop` over `pt-N`, `height:"100%"` over `fill-height`). Only reach for these classes when you specifically need a Web-only effect or are confirmed to not need Mobile parity. Typography: `text-h5`, `text-h6`, `text-body-1`, `text-body-2`, `text-caption` + `font-weight-bold|medium|regular`. Color: `primary`/`primary--text`, `secondary`/`secondary--text`, `success--text`, `error--text`, `white`/`white--text`, `secondary lighten-4`. Card: `rounded-lg`, `transparent` (for a flat card use `S.boxShadow:"none"`, **not** the `elevation` prop — the `elevation` prop is legacy-only). Icons: name in `VIcon.text` (PType `text`).
 
-## Pre-sync checklist
+## Final checklist
 
-The full pre-sync checklist (shared core + the `S`-system style checks — `S` on every visual node, no `O.layout`, the `class`-prop audit) is in [10-validation-and-sync.md](10-validation-and-sync.md). Run it before syncing.
+The full final checklist (shared core + the `S`-system style checks — `S` on every visual node, no `O.layout`, the `class`-prop audit) is in [validation.md](validation.md). Run it before finishing.

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/knowledge/validation-legacy.md

@@ -0,0 +1,49 @@
+# Validation — legacy `cssClass` system
+
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
+>
+> **This file is the `legacy` track.** Shared-core checks are identical across tracks; only the style checklist (§B) differs. On a new page / `opt.V >= 2.0` instead → [validation.md](validation.md).
+
+The loop: **author or edit the page → self-check & fix → finish clean.** Check your own output and fix errors before the user ever sees them.
+
+## Self-check, and compiler errors
+
+Validation is a checklist discipline: walk §A and §B below and fix every issue before finishing.
+
+The **official Quick compiler** (the same one the Studio editor runs) compiles `pJson → cJson` and reports **QScript/TypeScript syntax & type errors** in your handlers. Whenever compiler output reaches you, treat it as a fix-loop: read the errors, apply every fix yourself, re-check until clean — the compiler never edits the qjson.
+
+## Final checklist
+
+### A) Shared core — every page
+- [ ] Module shape: three authored keys present (`pJson`, `lrids`, `opt`); ends with `};` + `export default pjson`.
+- [ ] `cJson`/`clrids` **absent** — omitted from new files, stripped from any existing file you edited (Studio regenerates the compiled twins on import).
+- [ ] Every node: `T` valid; `P.ID.H` present + unique; `_Editor.eID` present + unique (equal to ID when new; may differ after a Studio rename — not required to match); **`C` present** (use `{}` for leaves — omitting `C` is a validator error).
+- [ ] Props: strings single-quoted in `H`; QScript object literals use `=`; `QLabel.text`=`prop`, `VIcon.text`=`text`.
+- [ ] Events: no native `return` (use `quick.return`); object literals closed with `};`; no browser globals; custom events have `C:true`; `P` matches payload.
+- [ ] Localization: `lrids` per language; keys exist in all languages; `LR` in props / `quick.LR` in events.
+- [ ] Containment: `VCol` only inside `VRow`; `VRow` holds only `VCol`; item components inside their container.
+- [ ] Charts: only `Bar`/`Line`/`Doughnut`; no `visible` on the chart.
+- [ ] Alerts include `actionButtons`.
+
+### B) Legacy style checklist
+- [ ] **No `S` introduced** — it won't render on `V < 2`; design stays in `O.layout` / CSS classes, matching how the page already does it.
+- [ ] `O.layout.dOpt` ↔ `O.layout.class` in sync — recompile `class` per the algorithm in [../reference/layout-system.md](../reference/layout-system.md) after any `dOpt` change (`xs` as-is; `sm/md/lg/xl` infixed).
+- [ ] `class` prop used freely for design (typography/color/spacing/elevation) is expected here — it is the legacy styling mechanism, Web-only, and is NOT audited against `S`.
+
+## `<<qjson:path>>` — inter-page references
+Inter-page references (e.g. `CustomComponent.QJsonPath`) are written as project-relative paths wrapped in `<<qjson:...>>`. In Studio's own model they are stable internal IDs; in files you always write the path form.
+
+**When authoring locally:**
+- Always write `'<<qjson:path>>'` — never a raw model ID.
+- The path is relative to the project root, without the `.qjson` extension (e.g. `<<qjson:sari-buton>>` for a root-level page, `<<qjson:forms/login>>` for a nested one).
+- If you see a UUID-style `<<qjson:...>>` in an existing file, the reference target wasn't found locally — do not copy that ID format into new authoring.
+
+### Renaming / moving / deleting a referenced page — update the referrers yourself
+Locally the link between two pages is the **path/name** inside `<<qjson:path>>`; in Studio it is a stable model id. So on the Studio side a rename/move needs no extra work — but **locally every file that referenced the old path goes stale** and breaks when imported back into Studio. When **you** (the agent) rename, move, or delete a `.qjson`, you must fix the referrers in the same change:
+
+1. **Find referrers first.** Grep the whole project for the target's current path *before* you touch it:
+   `grep -rln "<<qjson:sari-buton>>" .` (use the exact path the referrers use — root-level is just the name, nested is `folder/name`, module-owned is `ModuleName/.../name`, no `.qjson`).
+2. **Rename / move** → replace `<<qjson:oldPath>>` with `<<qjson:newPath>>` in every referrer.
+3. **Delete** → the reference target no longer exists; do not leave a dangling `<<qjson:path>>`. Remove or repoint the component instance that used it in each referrer (e.g. the `CustomComponent` whose `QJsonPath` pointed there), then validate.
+4. **Validate every file you edited** — referrers included, not just the renamed page.
+

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/knowledge/validation.md

@@ -0,0 +1,55 @@
+# Validation — `S` system
+
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
+>
+> **This file is the `S` track.** Shared-core checks are identical across tracks; only the style checklist (§B) differs. On a **legacy** page instead → [validation-legacy.md](validation-legacy.md).
+
+The loop: **author or edit the page → self-check & fix → finish clean.** Check your own output and fix errors before the user ever sees them.
+
+## Self-check, and the compiler's error codes
+
+Validation is a checklist discipline: walk §A and §B below and fix every issue before finishing.
+
+The **official Quick compiler** (the same one the Studio editor runs) compiles `pJson → cJson` and reports **QScript/TypeScript syntax & type errors** in your handlers, plus structural and `S`-style checks. Whenever compiler output reaches you, treat it as a fix-loop: read the errors, apply every fix yourself, re-check until clean — the compiler never edits the qjson. Its `S`/`SC` style errors each name the exact params so you know precisely what to write:
+
+- **`missing-S` / `incomplete-S`** — the node's `S` lacks default-valued params from the component's [`component-styles.json`](../reference/component-styles.json) block. Fix: add each listed param to the `"xs-xl"` range with its default value from that block (or your design's override) — rule S3. (`VCol.flexDirection` is exempt: its editor default `column` does not match the runtime-unset `row` behavior — write it deliberately when you want stacking, per rule S5.)
+- **`missing-SC` / `incomplete-SC` / `wrong-SC-target` / `unknown-SC*`** — the node's `SC` does not match the component's `inheritedChildList` in `component-styles.json`. Fix: copy that block into `SC` **as-is** (the whole block, never a subset); remove `SC` entirely from components whose block has no `inheritedChildList`.
+- **`unknown-S-param`** — the param doesn't exist for this component; rename per the suggestion or remove it (the compiler silently drops it).
+
+## Final checklist
+
+### A) Shared core — every page, both style systems
+- [ ] Module shape: three authored keys present (`pJson`, `lrids`, `opt`); ends with `};` + `export default pjson`.
+- [ ] `cJson`/`clrids` **absent** — omitted from new files, stripped from any existing file you edited (Studio regenerates the compiled twins on import).
+- [ ] Every node: `T` valid; `P.ID.H` present + unique; `_Editor.eID` present + unique (equal to ID when new; may differ after a Studio rename — not required to match); **`C` present** (use `{}` for leaves — omitting `C` is a validator error).
+- [ ] Props: strings single-quoted in `H`; QScript object literals use `=`; `QLabel.text`=`prop`, `VIcon.text`=`text`.
+- [ ] Events: no native `return` (use `quick.return`); object literals closed with `};`; no browser globals; custom events have `C:true`; `P` matches payload.
+- [ ] Localization: `lrids` per language; keys exist in all languages; `LR` in props / `quick.LR` in events.
+- [ ] Containment: `VCol` only inside `VRow`; `VRow` holds only `VCol`; item components inside their container.
+- [ ] Charts: only `Bar`/`Line`/`Doughnut`; no `visible` on the chart.
+- [ ] Alerts include `actionButtons`.
+
+### B) `S`-system style checklist
+
+- [ ] Every visually-intentful node has an `S` object (range-keyed); child text/icons via the parent's `SC`. No structure-only nodes.
+- [ ] **No `O.layout`** (`dOpt`/`class`) on any node — grid width, flex direction/align/justify, and spacing all live in `S`.
+- [ ] **Class-prop audit:** if any `class` prop is present, verify each token individually against the `class → S` table in [../reference/styling-system.md](../reference/styling-system.md) §9 (full table: [../reference/mapping-S-vuetify-class.md](../reference/mapping-S-vuetify-class.md)). Tokens that have an `S` equivalent must NOT appear in `class` (e.g. `fill-height` when `S.height:"100%"` is set, `pt-2` when `S.paddingTop:"8px"` is set, `flex-column` when `S.flexDirection:"column"` is set). `class` here is a Web-only last resort, only for tokens with confirmed no `S` equivalent — and has no Mobile effect.
+- [ ] Vuetify style-affecting props not used where `S` has an equivalent (`VCol.cols/sm/md/lg/xl` → `S.col`; `VBtn/VCard.color` → `S.backgroundColor`; `elevation` prop → `S.boxShadow`).
+
+## `<<qjson:path>>` — inter-page references
+Inter-page references (e.g. `CustomComponent.QJsonPath`) are written as project-relative paths wrapped in `<<qjson:...>>`. In Studio's own model they are stable internal IDs; in files you always write the path form.
+
+**When authoring locally:**
+- Always write `'<<qjson:path>>'` — never a raw model ID.
+- The path is relative to the project root, without the `.qjson` extension (e.g. `<<qjson:sari-buton>>` for a root-level page, `<<qjson:forms/login>>` for a nested one).
+- If you see a UUID-style `<<qjson:...>>` in an existing file, the reference target wasn't found locally — do not copy that ID format into new authoring.
+
+### Renaming / moving / deleting a referenced page — update the referrers yourself
+Locally the link between two pages is the **path/name** inside `<<qjson:path>>`; in Studio it is a stable model id. So on the Studio side a rename/move needs no extra work — but **locally every file that referenced the old path goes stale** and breaks when imported back into Studio. When **you** (the agent) rename, move, or delete a `.qjson`, you must fix the referrers in the same change:
+
+1. **Find referrers first.** Grep the whole project for the target's current path *before* you touch it:
+   `grep -rln "<<qjson:sari-buton>>" .` (use the exact path the referrers use — root-level is just the name, nested is `folder/name`, module-owned is `ModuleName/.../name`, no `.qjson`).
+2. **Rename / move** → replace `<<qjson:oldPath>>` with `<<qjson:newPath>>` in every referrer.
+3. **Delete** → the reference target no longer exists; do not leave a dangling `<<qjson:path>>`. Remove or repoint the component instance that used it in each referrer (e.g. the `CustomComponent` whose `QJsonPath` pointed there), then validate.
+4. **Validate every file you edited** — referrers included, not just the renamed page.
+

package/dist/studio-cli/{src/.ai-kit/AGENT_GUIDE-legacy.md → kits/ui-app-kit/.ai-kit/ui-kit/legacy-track.md}

@@ -1,28 +1,27 @@
-# Agent Operating Guide — legacy `cssClass` system track
+# Quick qjson — legacy `cssClass` system track
 
-> **Style system: legacy (`cssClass`).** Follow this guide when the target is a legacy page — root-level `opt.V` missing or `< 2.0`, where the `S` object does not render. If the page is `S`-system (a new page, or `opt.V >= 2.0`), stop and use [AGENT_GUIDE-s.md](AGENT_GUIDE-s.md) instead. Shared workflow, shared docs, and shared rules are in the dispatcher [AGENT_GUIDE.md](AGENT_GUIDE.md); this guide adds the legacy-track doc set and the styling/layout rules. (Note: a **new** page is always `S` — a legacy page is always an existing page you are editing.)
+> **Style system: legacy (`cssClass`).** Follow this guide when the target is a legacy page — root-level `opt.V` missing or `< 2.0`, where the `S` object does not render. If the page is `S`-system (a new page, or `opt.V >= 2.0`), stop and use [s-track.md](s-track.md) instead. Shared workflow, shared docs, and shared rules are in the dispatcher [index.md](index.md); this guide adds the legacy-track doc set and the styling/layout rules. (Note: a **new** page is always `S` — a legacy page is always an existing page you are editing.)
 
 ## The legacy-track doc set (open only these + the shared docs)
 - **Schema** → [reference/qjson-schema-legacy.md](reference/qjson-schema-legacy.md)
-- **Structure (start here)** → [knowledge/00-qjson-structure-legacy.md](knowledge/00-qjson-structure-legacy.md)
-- **Layout & slots** → [knowledge/03-layout-and-slots-legacy.md](knowledge/03-layout-and-slots-legacy.md)
-- **Styling how-to (`O.layout` + CSS classes)** → [knowledge/04-styling-legacy.md](knowledge/04-styling-legacy.md)
+- **Structure (start here)** → [knowledge/qjson-structure-legacy.md](knowledge/qjson-structure-legacy.md)
+- **Layout & slots** → [knowledge/layout-and-slots-legacy.md](knowledge/layout-and-slots-legacy.md)
+- **Styling how-to (`O.layout` + CSS classes)** → [knowledge/styling-legacy.md](knowledge/styling-legacy.md)
 - **Layout reference (`dOpt` grammar + `dOpt → class` rule)** → [reference/layout-system.md](reference/layout-system.md)
 - **Component catalog** → [reference/component-catalog-legacy.md](reference/component-catalog-legacy.md)
-- **Page skeletons / structure references** → [knowledge/09-page-skeletons-legacy.md](knowledge/09-page-skeletons-legacy.md)
-- **Validation & sync (pre-sync checklist)** → [knowledge/10-validation-and-sync-legacy.md](knowledge/10-validation-and-sync-legacy.md)
+- **Page skeletons / structure references** → [knowledge/page-skeletons-legacy.md](knowledge/page-skeletons-legacy.md)
+- **Validation (final checklist)** → [knowledge/validation-legacy.md](knowledge/validation-legacy.md)
 - **Examples** → [examples/cssClass/](examples/cssClass/) only (the `S` examples in `examples/style/` will mislead you here)
-- **Styling+layout specialist subagent** → `quick-styling-legacy`
 
 ## Edit & style
-1. **You are editing an existing tree.** Keep the page's current root (real legacy pages root on `VContainer`, `VAppBar`, `VDataTable`, …) — do **not** retrofit a `VContainer` root unless the user asks. Match the page's conventions (token style, ID style, `class` usage); reference [knowledge/09-page-skeletons-legacy.md](knowledge/09-page-skeletons-legacy.md) and the `examples/cssClass/` pages. For large edits, add **1–3 sections per edit**.
+1. **You are editing an existing tree.** Keep the page's current root (real legacy pages root on `VContainer`, `VAppBar`, `VDataTable`, …) — do **not** retrofit a `VContainer` root unless the user asks. Match the page's conventions (token style, ID style, `class` usage); reference [knowledge/page-skeletons-legacy.md](knowledge/page-skeletons-legacy.md) and the `examples/cssClass/` pages. For large edits, add **1–3 sections per edit**.
 2. **Style through the two legacy mechanisms — do NOT author `S`** (it won't render on `V < 2`):
    - **`O.layout`** (`dOpt` + compiled `class`) — grid width (`c:col-N`), flex direction/align/justify (`fd:`/`a:`/`j:`), spacing (`sp:`). Keep `dOpt` and `class` **in sync** (compile rule: `xs` as-is; `sm/md/lg/xl` infix the breakpoint after the first `-`). Grammar + algorithm: [reference/layout-system.md](reference/layout-system.md).
-   - **The `class` prop** — CSS utility classes for typography/color/elevation/rounding, used freely. How-to: [knowledge/04-styling-legacy.md](knowledge/04-styling-legacy.md).
-3. **Validate** against [knowledge/10-validation-and-sync-legacy.md](knowledge/10-validation-and-sync-legacy.md) (shared core + legacy style checklist), then compile.
+   - **The `class` prop** — CSS utility classes for typography/color/elevation/rounding, used freely. How-to: [knowledge/styling-legacy.md](knowledge/styling-legacy.md).
+3. **Validate** against [knowledge/validation-legacy.md](knowledge/validation-legacy.md) (shared core + legacy style checklist), then compile.
 
 ## Non-negotiable legacy-track rules
-- **L1 — Do NOT introduce `S`.** It won't render on `V < 2` and would silently break styling. Keep all design in `O.layout` / `class`, matching how the page already does it. (A deliberate, full migration to `S` is a separate opt-in task — the `qjson-legacy-migrator` agent, [agents/qjson-legacy-migrator.md](agents/qjson-legacy-migrator.md) — not an incidental edit.)
+- **L1 — Do NOT introduce `S`.** It won't render on `V < 2` and would silently break styling. Keep all design in `O.layout` / `class`, matching how the page already does it. (A deliberate, full migration to `S` is a separate opt-in task — not an incidental edit.)
 - **L2 — Keep `O.layout.dOpt` and `O.layout.class` in sync.** The runtime applies `class`, so recompile it after any `dOpt` change per the algorithm in [reference/layout-system.md](reference/layout-system.md). Get this wrong and the class won't match the `dOpt`.
 - **L3 — Size columns with `c:col-N`** (1–12; `col-auto`; `0`→`d-none`) in `dOpt` + the synced `col-N` class — not `P.cols` alone (unreliable across editor/runtime).
 - **L4 — `VCol` does not auto-stack children** — add `fd:flex-column` to its `dOpt` (+ synced `flex-column` class) when multiple children must stack.