@stechquick/studio-cli 4.1.0-7 → 4.1.1-2

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

@@ -0,0 +1,87 @@
+# Quick qjson — agent guide (start here)
+
+You are an AI coding agent working on **Quick / Plateau Studio `.qjson` files** — UI pages that live in Studio (the web IDE). These docs are the source of truth for Quick. Follow this guide.
+
+## Step 0 — determine the style system, then follow your track guide
+
+Quick has **two style systems**, and they are not interchangeable on a page. Decide which one the target page is on **before** you style, lay out, or validate — then follow that track's guide and doc set for the rest of the task.
+
+**Read the target's root-level `opt.V`:**
+
+| Condition | Track | Guide to follow |
+|-----------|-------|-----------------|
+| **Creating a new page** | **`S` (new)** — new pages are always created at the current `V` | [s-track.md](s-track.md) |
+| **`opt.V >= 2.0`** | **`S` (new)** — the `S` object renders; author design in `S` | [s-track.md](s-track.md) |
+| **`opt.V` missing OR `< 2.0`** | **legacy (`cssClass`)** — `S` does NOT render; author `O.layout` + CSS classes | [legacy-track.md](legacy-track.md) |
+
+There is no in-between: a page is either fully `S` or fully legacy. **Do not mix mechanisms** (never introduce `S` on a legacy page — it silently won't render; never author `O.layout` on an `S` page). **The presence of an `S` object is the ground truth for which system a page is on**, and `opt.V` should agree with it (`>= 2.0` ⇔ uses `S`). If the two disagree — `opt.V >= 2.0` but the nodes carry `O.layout`, or `opt.V` missing/`< 2.0` but the nodes carry an `S` object — the page is mid-migration or mis-tagged: go by whether an `S` object is actually present, and flag the mismatch to the user.
+
+Your track guide lists the exact doc set to use (schema, structure, layout, styling, catalog, skeletons, validation, examples) — **open only your track's docs plus the shared docs below.**
+
+## What a `.qjson` is (one paragraph)
+A JS module exporting `pjson = { ... }`. You author `pJson` (a tree of component nodes) and `lrids` (localization) — so an **AI-authored file carries only `{ pJson, lrids, opt }`**. The editor/compiler generates the compiled twins `cJson`/`clrids`; **omit them entirely from files you author** — never write them into a new file, and **strip them if present** when editing an existing file (Studio regenerates them on import). Each node is `{ T, P, E, C, O, _Editor }` plus styling fields — `S`/`SA`/`SC` on `S`-system pages, `O.layout` on legacy pages. Full schema: `S` → [reference/qjson-schema.md](reference/qjson-schema.md); legacy → [reference/qjson-schema-legacy.md](reference/qjson-schema-legacy.md).
+
+## Where to look — shared docs (both tracks)
+These carry no style-era content; use them regardless of track:
+- **Task-oriented how-to (shared topics)** → [knowledge/properties.md](knowledge/properties.md), [events-and-scripting.md](knowledge/events-and-scripting.md), [components.md](knowledge/components.md), [services.md](knowledge/services.md), [localization.md](knowledge/localization.md), [dynamic-components.md](knowledge/dynamic-components.md).
+- **Exact API of `quick.*`** (store, alert, request, navigation, validation, dates…) → [reference/quick-api.md](reference/quick-api.md) — the authoring rules **plus a complete index of every member**. Scan that index to see what exists, then grep the member's full signature/params/example in [reference/quick-api.json](reference/quick-api.json) (per-member blocks; never read it whole).
+- **Events deep dive** → [reference/events-system.md](reference/events-system.md).
+- **Which `T` exists + registry** → [reference/component-index.json](reference/component-index.json) (machine-readable; era-agnostic).
+- **Valid props/events for a component (so you don't invent them)** → [reference/component-contracts.json](reference/component-contracts.json) (per `T`: each prop's `pType` prop/class/text/attr, value `type`, allowed `options` (enum), `default`; and `events` as `{ name, params?: [{name,type}] }`).
+- **Valid Style-tab (`S`) params for a component** → [reference/component-styles.json](reference/component-styles.json) (per `T`: supported style param → value `type` + editor `default`). **Not every component has a block** — `componentsWithStyleBlocks` in [reference/component-index.json](reference/component-index.json) lists the ones that do (and `componentsWithSC` the ones that take an `SC`), so a grep returning nothing is an answer, not a failed lookup.
+
+> **Do NOT read these big files whole.** `component-contracts.json`, `component-styles.json` (keyed per `T`, one component block each) and `quick-api.json` (keyed per API member) are lookup tables, not documents. Reading either whole wastes context and the file tools cap at 2000 lines — so a whole-file read silently truncates and you'd miss most components without knowing. Instead, **for each component you place, grep its block and read only that slice**: `grep -n '"VIcon":' reference/component-contracts.json` → a line number → `Read` that offset for ~30–60 lines. Same for an API member: `grep -n '"setRegion"' reference/quick-api.json`. Batch the lookups a section needs before writing it.
+
+> **Why read these first (the core principle):** these dictionaries are *generation inputs*. Pick the prop/event/param/style from the contract **before** you write — then you never invent something the editor rejects. Never discover the valid set by trial and error against editor/compiler messages (a raw error says *what's wrong*, not *what's right*). Look it up up front.
+
+
+**Everything else — the schema, structure, layout, styling how-to, component catalog, page skeletons, validation checklist, and examples folder — is era-specific and listed in your track guide** ([s-track.md](s-track.md) / [legacy-track.md](legacy-track.md)).
+
+
+## Workflow for every task
+1. **Read the target + neighbors.** Open the `.qjson` you'll edit and 1–2 sibling pages in the same folder. These docs give you the *rules*; sibling pages give you *project conventions* (ID style, service URLs, `QJsonPath` of any service component, navigation `<<qjson:id>>` references). Mirror them.
+2. **Classify the work** — static layout / service / table / dialog-form / chart / navigation / localization / dynamic component. Read the matching shared `knowledge/` file(s).
+3. **Determine the style system (Step 0) and open your track guide.** Everything about *how* you build the tree's design, style, lay out, and validate lives there — follow it.
+4. **Validate** before finishing: walk your track's `validation…` checklist and fix every issue. Touched multiple files → validate them all.
+5. **Report**: changed file(s), what changed (including styling), the validation result — say plainly what was and wasn't checked — and any project assumption you made.
+
+## Non-negotiable rules — shared (both tracks)
+These apply on every page regardless of era. (Style/layout-mechanism rules are in your track guide.)
+1. **Omit `cJson`/`clrids` entirely from AI-authored files.** Author `pJson`/`lrids` only; never write the compiled twins into a new file, and **strip them if present** when editing an existing one. Studio regenerates them on import.
+2. Every node: valid `T` (check the index), unique `P.ID.H`, unique `_Editor.eID`. (eID need not equal ID.) Don't invent props **or events** — use the props/events listed for that `T` in [reference/component-contracts.json](reference/component-contracts.json), with the PType it specifies and the event `params` it gives.
+3. Strings in prop `H` are single-quoted (`"'primary'"`); booleans/numbers/expressions are bare; QScript object literals use `=` (`{text='A', value=1}`).
+4. `QLabel.text` → PType `"prop"`. `VIcon` icon name → `text` with PType `"text"` — `H` is still a QScript string, so single-quote it: `"H": "'mdi-home'"` (never bare `"mdi-home"`).
+5. Events: never native `return` (use `quick.return`); close object literals with `};`; no browser globals (`window`/`document`/`console`/`setTimeout`) — use `quick.*`. **Event handlers are always TypeScript — set `"HL":"TS"` on every handler.** (Property/binding expressions are the ones that default to `QS`.)
+6. Props use bare `LR('key')`; events use `quick.LR('key')`.
+7. **Containment** (editor-enforced, era-agnostic): `VCol` only inside `VRow` (never at root); `VRow` holds only `VCol`; `VFooter` holds only `VContainer`; canonical wrapper `VContainer > VRow > VCol > content`.
+8. Charts: only `Bar`/`Line`/`Doughnut` (no `Pie`); no `visible` prop on charts.
+9. `quick.Quick.alert({...})` always includes `actionButtons`.
+10. `VBtn` label is a child `QLabel`/`VIcon`/`VImg`, not a text prop.
+11. **If you rename/move/delete a page that others reference**, update every referrer's `<<qjson:path>>` in the same change (references are path-based, so they go stale) — see [knowledge/validation.md](knowledge/validation.md#renaming--moving--deleting-a-referenced-page--update-the-referrers-yourself).
+12. **Never paste compiled (`╬…╩╩`) content** into a file — that is generated output (see rule 1).
+
+## Easy to get wrong
+These are the rules most often assumed backwards. Check them against what you were about to write.
+- **Props *can* contain `if/else` conditionals** — QScript returns the last evaluated value.
+- **`VIcon`'s icon name uses PType `"text"`**, not `"prop"` — and `H` is still a single-quoted QScript string: `"H": "'mdi-home'"`, never `"H": "mdi-home"`.
+- **`_Editor.eID` need not equal `P.ID.H`** (equal when auto-generated; differs after a rename).
+- **Property/binding expressions default to `QS`; event handlers are always `TS`** (`"HL":"TS"` on every handler). The default applies to properties only — handlers are TS-only.
+- **`quick.store` prefixes** are Page/Bag(`#`)/Global(`$`)/Shared(`&`) — for cross-session persistence use `quick.permanentStore`.
+- **`quick.Quick.validation`** has `required/minLength/maxLength/email/iban/regex/tckn/vkn` — there is no `phone` rule (use the input's `format` + `regex`).
+- **Per-component design lives in the Style tab, not only in CSS utility classes.** How it serializes depends on the page's era — see your track guide.
+
+## When unsure
+Don't invent props/events/slots/values. Check [reference/component-index.json](reference/component-index.json) and your track's component catalog; for Vuetify components Vuetify 2 semantics apply; otherwise find a real example in a sibling page or ask the user. If a `T` isn't in the index, it's probably wrong (or the index needs updating from a newer runtime).
+
+## This workspace: the studio CLI loop
+
+These pages were pulled from Studio with the studio CLI and will be synced back. On top of the steps above:
+
+- **Validate — always, before finishing.** `studio buildQjson <file-or-folder>` runs the official Quick compiler plus the structural and `S`-style checks. It **never edits the file**: read the errors, apply every fix yourself, re-run until clean. Details: [`../cli-kit/knowledge/buildqjson.md`](../cli-kit/knowledge/buildqjson.md).
+- **Sync.** Once validation is clean and `.studio/server.json` exists (the CLI bridge is running), run `studio push` yourself — the page lands in the user's open Studio session as unsaved work. Round-trip rules, frontmatter, `<<qjson:path>>` translation, `convertToBlock`: [`../cli-kit/knowledge/sync.md`](../cli-kit/knowledge/sync.md).
+- **Render-check.** Compiling clean does not prove the page runs clean. With the `playwright` MCP available, open `http://127.0.0.1:<port>/render` (port from `.studio/server.json`), fix what the render and console show, then `browser_close`: [`../cli-kit/knowledge/render-check.md`](../cli-kit/knowledge/render-check.md).
+- **Locked files.** A pulled page may be readonly (`0444`) — checked out by someone else in Studio. Run `studio startWorking <file>`; never `chmod`.
+- **Frontmatter.** Files may carry a `---studio-metadata---` header (model id, flags like `blockComponent`). Never edit or strip it, and never rename files — Studio matches them back by name/id. A new file gets its frontmatter written back by `studio push`.
+- **Report** the validation, push and render-check results. If the bridge or the browser wasn't available, say so — never skip silently.
+
+Bridge setup and troubleshooting: [`../cli-kit/knowledge/cli-bridge.md`](../cli-kit/knowledge/cli-bridge.md).

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

@@ -1,4 +1,4 @@
-# 05 · Components (how to use)
+# Components (how to use)
 
 Pick the `T` from [reference/component-catalog.md](../reference/component-catalog.md) / [reference/component-index.json](../reference/component-index.json). The catalog has the full list and per-component criticals; this file shows the build patterns you reach for most.
 
@@ -87,11 +87,11 @@ Place at `pJson` root level — **not** inside VContainer. Minimal node; no Ghos
     "QJsonPath": { "H": "'<<qjson:path/to/page>>'", "T": "prop" } },
   "E": {}, "C": {}, "O": {}, "_Editor": { "eID": "blockMyPage" } }
 ```
-`QJsonPath` format: `'<<qjson:path>>'` — project-relative path without extension. Root-level page: `<<qjson:page-name>>`; nested: `<<qjson:folder/page-name>>`. `studio pull` converts Studio model IDs to this path format; `studio push` converts back — never write a raw ID.
+`QJsonPath` format: `'<<qjson:path>>'` — project-relative path without extension. Root-level page: `<<qjson:page-name>>`; nested: `<<qjson:folder/page-name>>`. Studio stores these internally as model IDs; in files you always write the path form — never a raw ID.
 
-**The embedded page must itself be a block component in Studio.** When you add a page into another page as a block component, check the embedded page's frontmatter: if it lacks `blockComponent: true`, run `studio convertToBlock <embedded-file>`. The file must be checked out (`studio startWorking <file>` if it isn't; pages newly created by `studio push` come back already checked out). For a brand-new page this runs only **after** `studio push` — the model must exist in Studio first. This applies only to block-component embeds, not to service-caller embeds (below).
+**The embedded page must itself be a block component in Studio.** If it isn't one yet, it must be converted on the Studio side (via the workspace's tooling). This applies only to block-component embeds, not to service-caller embeds (below).
 
 ## Messaging / service component / Ghost
-`Messaging` (`O.cType:"child"`) is the event hub. A project **service caller** `CustomComponent` (different from a block component — has `O:{cType:"child",dynProps:true}` and a `Ghost` child) embeds a service-proxy `.qjson` via `QJsonPath`. See [06-services.md](06-services.md) and [09-page-skeletons.md](09-page-skeletons.md).
+`Messaging` (`O.cType:"child"`) is the event hub. A project **service caller** `CustomComponent` (different from a block component — has `O:{cType:"child",dynProps:true}` and a `Ghost` child) embeds a service-proxy `.qjson` via `QJsonPath`. See [services.md](services.md) and [page-skeletons.md](page-skeletons.md).
 
 For any prop/event/slot not shown here, consult [reference/component-catalog.md](../reference/component-catalog.md); for Vuetify components, Vuetify 2 semantics apply.

package/dist/studio-cli/{src/.ai-kit/knowledge/08-dynamic-components.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/dynamic-components.md}

@@ -1,4 +1,4 @@
-# 08 · Dynamic Components (`createComponent`)
+# Dynamic Components (`createComponent`)
 
 For repeated UI generated from data, clone a **template** component. There is no `{{var}}` interpolation — clones receive a `dataSource` accessed as `data.*`.
 

package/dist/studio-cli/{src/.ai-kit/knowledge/02-events-and-scripting.md → kits/ui-app-kit/.ai-kit/ui-kit/knowledge/events-and-scripting.md}

@@ -1,4 +1,4 @@
-# 02 · Events & Scripting (`E`)
+# Events & Scripting (`E`)
 
 The `E` block holds behavior. Each event is `{ "H": code, "P"?: params, "HL"?: lang, "C"?, "I"?, "PE"?, "EV"?, "TO"? }`.
 
@@ -64,7 +64,7 @@ Line breaks in `H` are `\r\n`.
 Keep initialization in **one** hook to avoid duplicate fetches. Custom events live on `Messaging` with `"C": true`, called via `quick.MM.trigger`.
 
 ## The `quick.*` API
-Everything you can call (network, store, alerts, navigation, validation, dynamic components, dates/money, crypto, …) is documented authoritatively in **[reference/quick-api.md](../reference/quick-api.md)**. Highlights:
+Everything you can call (network, store, alerts, navigation, validation, dynamic components, dates/money, crypto, …) is indexed in [reference/quick-api.md](../reference/quick-api.md) — scan its member index, then grep the exact signature, params and example for what you picked in [reference/quick-api.json](../reference/quick-api.json).
 
 ```typescript
 components.myField.qValue = 'x';           // read/write component value
@@ -76,4 +76,4 @@ quick.return(value);                        // return from handler
 ```
 
 ## Service calls in one line of guidance
-Use `quick.Request.async({ url, http, data, responseField, onSuccess, onFail, blockRender })` and read the result in the `onSuccess` event as `response.<responseField>`. Full patterns (incl. project ServiceCaller convention) in [06-services.md](06-services.md).
+Use `quick.Request.async({ url, http, data, responseField, onSuccess, onFail, blockRender })` and read the result in the `onSuccess` event as `response.<responseField>`. Full patterns (incl. project ServiceCaller convention) in [services.md](services.md).

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

@@ -1,8 +1,8 @@
-# 03 · Layout & Slots (`C` and `O`) — legacy `cssClass` system
+# Layout & Slots (`C` and `O`) — 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.** Grid/flex/spacing are authored through `O.layout` (`dOpt` + compiled `class`); how-to: [04-styling-legacy.md](04-styling-legacy.md), grammar: [../reference/layout-system.md](../reference/layout-system.md). On a new page / `opt.V >= 2.0` instead → [03-layout-and-slots.md](03-layout-and-slots.md).
+> **This file is the `legacy` track.** Grid/flex/spacing are authored through `O.layout` (`dOpt` + compiled `class`); how-to: [styling-legacy.md](styling-legacy.md), grammar: [../reference/layout-system.md](../reference/layout-system.md). On a new page / `opt.V >= 2.0` instead → [layout-and-slots.md](layout-and-slots.md).
 
 ## Children (`C`) — grouped by slot
 
@@ -34,9 +34,9 @@ The slot **key** is the slot name; `default` is the main slot. Leaves use `"C":
 }
 ```
 
-`O.cType` mirrors the node's slot context and is always authored. `O.layout` (`dOpt` + compiled `class`) is the **layout mechanism on a legacy page** — grid width, flex direction/align/justify, and spacing. `dOpt` holds prefixed tokens per breakpoint; `class` is the compiled string the runtime applies, and it must stay **in sync** with `dOpt` (compilation rule: `xs` tokens as-is, `sm/md/lg/xl` tokens infix the breakpoint after the first `-`). Full prefix grammar + the `dOpt → class` algorithm: [../reference/layout-system.md](../reference/layout-system.md); authoring flow: [04-styling-legacy.md](04-styling-legacy.md). (Do **not** author the `S` object here — it won't render on `V < 2`.)
+`O.cType` mirrors the node's slot context and is always authored. `O.layout` (`dOpt` + compiled `class`) is the **layout mechanism on a legacy page** — grid width, flex direction/align/justify, and spacing. `dOpt` holds prefixed tokens per breakpoint; `class` is the compiled string the runtime applies, and it must stay **in sync** with `dOpt` (compilation rule: `xs` tokens as-is, `sm/md/lg/xl` tokens infix the breakpoint after the first `-`). Full prefix grammar + the `dOpt → class` algorithm: [../reference/layout-system.md](../reference/layout-system.md); authoring flow: [styling-legacy.md](styling-legacy.md). (Do **not** author the `S` object here — it won't render on `V < 2`.)
 
-Authoritative breakpoint device ranges (kept in sync with the identical table in [../reference/layout-system.md](../reference/layout-system.md) §4 — update both):
+Breakpoint device ranges:
 
 | Key | Device | Range |
 |-----|--------|-------|
@@ -57,7 +57,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.
@@ -66,7 +66,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 **`c:col-N`** (1–12) in its `O.layout.dOpt` + the synced `col-N` class. `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 by adding **`fd:flex-column`** to that `VCol`'s `dOpt` (+ synced `flex-column` class). Equal-height cards: `d-flex` on the `VCol` + `flex-grow-1 d-flex flex-column` on the card. Worked examples: [04-styling-legacy.md](04-styling-legacy.md).
+**Width, stacking, equal-height cards.** Set a `VCol`'s width with **`c:col-N`** (1–12) in its `O.layout.dOpt` + the synced `col-N` class. `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 by adding **`fd:flex-column`** to that `VCol`'s `dOpt` (+ synced `flex-column` class). Equal-height cards: `d-flex` on the `VCol` + `flex-grow-1 d-flex flex-column` on the card. Worked examples: [styling-legacy.md](styling-legacy.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/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.