@stechquick/studio-cli 4.2.0-0 → 4.2.0-1

package/dist/studio-cli/src/.ai-kit/knowledge/00-qjson-structure.md

@@ -1,67 +0,0 @@
-# 00 · 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).
->
-> **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).
-
-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`.
-
-```javascript
-let pjson = {
-  "pJson": [ /* component tree — you write this */ ],
-  "lrids": {},     // localization you write
-  "opt": { "V": 2.5 }  // page options — a NEW page sets V to the current schema version (2.5); this marks it as S-system
-};
-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).
-
-## The component node — same six fields at every depth
-
-```json
-{
-  "T": "ComponentType",
-  "P": { "ID": { "H": "myId", "T": "prop" } },
-  "E": {},
-  "C": {},
-  "O": { "cType": "slot" },
-  "_Editor": { "eID": "myId" }
-}
-```
-
-| 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) |
-| `_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.
-
-## The ID rules
-1. Every component has `P.ID.H`, **unique** within the page.
-2. Every component has `_Editor.eID`, also **unique**.
-3. `P.ID.H` is the runtime/reference id (`components.<ID>`); `_Editor.eID` is the editor's stable internal id.
-
-These two are **equal for auto-generated components** (both `EdtrComp_42`) but legitimately **differ** once the ID is renamed in Studio (e.g. `ID:"btnSave"`, `eID:"EdtrComp_42"`) — real files contain both cases, so a mismatch is **not** an error. When you hand-author a new component, the simplest valid choice is to set `eID` = `ID` (one unique value). Never reuse an `eID` or an `ID`.
-
-## Build order (top-down)
-```
-pJson
- ├─ Messaging            (event hub; no UI)
- ├─ [service component]  (optional; only if the project uses one)
- └─ VContainer           (layout root)
-     └─ VRow → VCol → VCard → content (labels, buttons, tables, inputs, charts)
-```
-
-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).
-
-Copy a full starting skeleton from [09-page-skeletons.md](09-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).

package/dist/studio-cli/src/.ai-kit/knowledge/01-properties.md

@@ -1,77 +0,0 @@
-# 01 · Properties (`P`)
-
-Each prop is `{ "H": value/expression, "T": kind, "HL": language? }`.
-
-```json
-"P": {
-  "ID":      { "H": "btnSave",      "T": "prop" },
-  "color":   { "H": "'primary'",    "T": "prop" },
-  "visible": { "H": "true",         "T": "prop" },
-  "class":   { "H": "'rounded-lg'", "T": "class" },
-  "items":   { "H": "[{text='A', value=1}]", "T": "prop", "HL": "QS" }
-}
-```
-
-## `T` — prop kind (PType)
-| `T` | Applied as | Use for |
-|-----|-----------|---------|
-| `"prop"` | Vue prop | the default case incl. `QLabel.text`, `items`, `color`, `visible` |
-| `"class"` | CSS class | `class` |
-| `"text"` | slot text content | `VIcon` icon name; raw text — `H` is still a QScript string, so single-quote it: `"'mdi-home'"` |
-| `"attr"` | DOM attribute | `data-*`, `aria-*`, input `format` masks |
-
-## `HL` — language (defaults to `QS`)
-`HL` is optional and **defaults to QScript**. Set `"HL": "TS"` only if a prop expression needs TypeScript (rare — props are usually QScript). The vast majority of real props omit `HL` and are therefore QScript.
-
-## Quoting inside `H`
-| Value | Write | Example |
-|-------|-------|---------|
-| string | single-quoted | `"'primary'"` |
-| number / bool | bare | `"10"`, `"true"` |
-| expression / binding | bare | `"item.name"`, `"data.title"`, `"components.x.qValue"` |
-| array | bracketed | `"[1,2,3]"`, `"['Jan','Feb']"` |
-| object array (QScript) | `=` keys | `"[{text='A', value=1}]"` |
-
-Apostrophe inside a QScript string → double it: `'Premium''u Keşfet'`.
-
-## QScript expression power (corrected vs older docs)
-Prop `H` values are **QScript expressions** and **can include conditionals**. Real files do this routinely:
-
-```json
-"color": {
-  "H": "if(data.statusColor == 1){'red'}else if(data.statusColor == 2){'orange'}else{'blue'}",
-  "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.)
-
-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.
-
-> **QScript ≠ JS in two key ways:** (1) `||` returns a boolean, not a fallback value — use `if(a){a}else{b}` for a conditional fallback. (2) Property access is always null-safe (`a.b.c` won't throw if `a` is undefined), so `|| ''` guards are both wrong and unnecessary.
-
-### When to still pre-compute instead of expression-in-prop
-Conditionals work, but for **heavy** per-row formatting (date parsing, concatenation, lookups across rows) it's cleaner and faster to pre-format in the service/load callback and read a plain field in the prop:
-
-```typescript
-rows.forEach(r => { r.displayDate = quick.Quick.toShortDate(quick.Quick.toDate(r.date)); });
-components.tbl.items = rows;
-```
-```json
-"text": { "H": "item.displayDate", "T": "prop" }
-```
-This keeps prop expressions simple and avoids repeating logic per render.
-
-## Localization in props
-Use bare `LR('key')` (never `quick.LR` in a prop):
-```json
-"text": { "H": "LR('save')", "T": "prop" }
-```
-See [07-localization.md](07-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.
-
-## 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.)

package/dist/studio-cli/src/.ai-kit/knowledge/02-events-and-scripting.md

@@ -1,79 +0,0 @@
-# 02 · Events & Scripting (`E`)
-
-The `E` block holds behavior. Each event is `{ "H": code, "P"?: params, "HL"?: lang, "C"?, "I"?, "PE"?, "EV"?, "TO"? }`.
-
-```json
-"E": {
-  "click": {
-    "H": "quick.EM.trace('clicked');\r\n",
-    "P": "mouseEvent:unknown | undefined",
-    "HL": "TS"
-  },
-  "fetchData": {
-    "H": "let req = <any>{};\r\nreq.url='/api/items';\r\nreq.http='GET';\r\nreq.responseField='items';\r\nreq.onSuccess='onItems';\r\nquick.Request.async(req);\r\n",
-    "C": true, "HL": "TS"
-  }
-}
-```
-
-Event flags — runtime behavior (deep detail in [../reference/events-system.md](../reference/events-system.md)):
-- `C` = **custom**: triggered via `quick.MM.trigger`; the trigger payload is the dataSource (array→first element, object→whole), not name-mapped.
-- `I` = **immediate**: runs synchronously during render instead of being deferred to end-of-render.
-- `PE` = **property event**: injected into the component as a callback prop (chart `labelFormatter`/`tooltipLabel`).
-- `EV` = **externally visible**: exposed to a parent page as `quick.parent.events.<name>`.
-- `TO` = **post-render order**: deferred handlers run sorted by `TO` descending (higher fires first).
-- `HL` = handler language. **Event handlers must use `"HL": "TS"`.** `QS` is for properties/bindings (`P`), not the `E` block.
-
-> The whole events/scripting model (lifecycle internals, custom-event params, property/external events, the `quick.return` exception mechanism, compilation) is in **[../reference/events-system.md](../reference/events-system.md)**.
-
-## Language: events use TS; props may use QS
-**For every event handler (`E`/`D`), write `"HL": "TS"`.** Do not author event handlers as `QS`, `JS`, `FL`, or `GUI`.
-
-**Properties and bindings (`P`) may use `"HL": "QS"`**; QS is their default and is a good fit for short expressions. This property rule does not apply to event handlers.
-
-Line breaks in `H` are `\r\n`.
-
-## TypeScript handler rules (hard)
-1. **Never native `return`** — use `quick.return(value)` / `quick.return`.
-2. End statements with `;`. Close object literals with `};` before the next statement (a missing `;` after an object literal makes TS parse the next line as a call → "expression is not callable").
-3. **No browser globals**: `window`, `document`, `console`, `setTimeout`, `setInterval`. Use:
-   - `quick.EM.trace(...)` instead of `console.log`
-   - `quick.MM.delay('evt', { delayTime: 500 })` instead of `setTimeout`
-   - `quick.Quick.download(...)` instead of anchor downloads
-4. Reference framework APIs as `quick.X` (see [reference/quick-api.md](../reference/quick-api.md)).
-
-> In **QS properties/bindings**, drop `quick.`: write `store.get('x')`, `MM.trigger('evt')`, `Quick.go(...)`. The `quick.` prefix exists only in TS.
-
-> Note: some real files use `debugger;`/`setTimeout` in experimental editor pages. Don't copy those — prefer the Quick APIs for portable, compilable handlers.
-
-## Parameters (`P`) and declaring data
-- Framework/native event params → declare in `P`: `"P": "number:number"`, `"P": "index:any,row:any"`, `"P": "serviceResponse:any"`. Use the name directly in `H`.
-- Trigger-payload fields (passed via `quick.MM.trigger('evt', [{...}])`) are declared inside `H`.
-- Do **not** declare the same name both in `P` and inside `H` (duplicate identifier).
-
-## Page lifecycle (on `Messaging`)
-| Hook | When | Typical use |
-|------|------|-------------|
-| `PreRender` | before render (often `"I": true`) | init store, trigger first fetch |
-| `EndRender` | after render | access/set components |
-| `PostRender` | after prioritized events (`TO` orders them) | |
-| `Restored` | on navigating back | refresh |
-
-> ⚠️ **`PreRender` runs before components exist** — `components.*` is not accessible. Write to `store` in `PreRender` and read from it in prop expressions instead: `store.get('key')`. Use `EndRender` or a custom event if you need to set component props/values after render.
-
-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:
-
-```typescript
-components.myField.qValue = 'x';           // read/write component value
-quick.store.set('key', v); quick.store.get('key');   // page store ('#'=bag,'$'=global,'&'=shared)
-quick.MM.trigger('evt', [{ p: 1 }]);       // custom event
-quick.Quick.alert({ title:'T', text:'msg', category:'Info', actionButtons:[{name:'OK', type:'Confirm'}] });
-quick.Quick.go('<<qjson:UNIQUE-ID>>');     // navigate
-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).

package/dist/studio-cli/src/.ai-kit/knowledge/03-layout-and-slots-legacy.md

@@ -1,72 +0,0 @@
-# 03 · 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).
->
-> **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).
-
-## Children (`C`) — grouped by slot
-
-```json
-"C": {
-  "default":      { "c": [ /* children */ ], "cType": "slot" },
-  "item.actions": { "c": [ /* per-row cells */ ], "cType": "scopedSlot" }
-}
-```
-
-`cType` (from `CType` enum):
-| value | meaning |
-|-------|---------|
-| `"slot"` | normal named slot (most visible UI) |
-| `"child"` | structural child (`Messaging`, service component, `Ghost`) |
-| `"scopedSlot"` | per-item callback slot — `item.<field>` is available in child bindings (e.g. `VDataTable` `item.<col>`) |
-
-The slot **key** is the slot name; `default` is the main slot. Leaves use `"C": {}`.
-
-## Options (`O`) — cType + layout
-
-```json
-"O": {
-  "cType": "slot",
-  "layout": {
-    "dOpt": { "xs": ["d:d-flex","fd:flex-column","c:col-6","sp:pa-4"] },
-    "class": "d-flex flex-column col-6 pa-4"
-  }
-}
-```
-
-`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`.)
-
-Authoritative breakpoint device ranges (kept in sync with the identical table in [../reference/layout-system.md](../reference/layout-system.md) §4 — update both):
-
-| Key | Device | Range |
-|-----|--------|-------|
-| `xs` | Mobile | 0–600px |
-| `sm` | Tablet | 600–960px |
-| `md` | Laptop | 960–1264px |
-| `lg` | Desktop | 1264–1904px |
-| `xl` | TV | 1904px+ |
-
-`dOpt` is keyed by **single** breakpoints (`xs`, `sm`, …); `xs` is the base and larger keys override from their min width up.
-
-## The grid: VContainer → VRow → VCol
-```
-VContainer (class "container container--fluid")
-  └─ VRow (12 columns, default align-items: stretch)
-       └─ VCol (width via c:col-N)
-            └─ VCard / content
-```
-
-### 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:
-- **`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.
-- Container components with item parts — `VTabs`→`VTab`/`VTabItem`, `VStepper`→`VStepperStep`/`VStepperContent`, `VExpansionPanels`→`VExpansionPanel`, `VCarousel`→`VCarouselItem` — must hold their documented item components.
-- Canonical wrapper for a page: `VContainer > VRow > VCol > VCard > content`.
-
-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).
-
-## 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).

package/dist/studio-cli/src/.ai-kit/knowledge/03-layout-and-slots.md

@@ -1,64 +0,0 @@
-# 03 · 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).
->
-> **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).
-
-## Children (`C`) — grouped by slot
-
-```json
-"C": {
-  "default":      { "c": [ /* children */ ], "cType": "slot" },
-  "item.actions": { "c": [ /* per-row cells */ ], "cType": "scopedSlot" }
-}
-```
-
-`cType` (from `CType` enum):
-| value | meaning |
-|-------|---------|
-| `"slot"` | normal named slot (most visible UI) |
-| `"child"` | structural child (`Messaging`, service component, `Ghost`) |
-| `"scopedSlot"` | per-item callback slot — `item.<field>` is available in child bindings (e.g. `VDataTable` `item.<col>`) |
-
-The slot **key** is the slot name; `default` is the main slot. Leaves use `"C": {}`.
-
-## Options (`O`) — cType only
-
-```json
-"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)).
-
-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):
-
-| Key | Device | Range |
-|-----|--------|-------|
-| `xs` | Mobile | 0–600px |
-| `sm` | Tablet | 600–960px |
-| `md` | Laptop | 960–1264px |
-| `lg` | Desktop | 1264–1904px |
-| `xl` | TV | 1904px+ |
-
-## The grid: VContainer → VRow → VCol
-```
-VContainer (class "container container--fluid")
-  └─ VRow (12 columns, default align-items: stretch)
-       └─ VCol (width via S.col)
-            └─ VCard / content
-```
-
-### 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:
-- **`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.
-- Container components with item parts — `VTabs`→`VTab`/`VTabItem`, `VStepper`→`VStepperStep`/`VStepperContent`, `VExpansionPanels`→`VExpansionPanel`, `VCarousel`→`VCarouselItem` — must hold their documented item components.
-- Canonical wrapper for a page: `VContainer > VRow > VCol > VCard > content`.
-
-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).
-
-## 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).

package/dist/studio-cli/src/.ai-kit/knowledge/04-styling-legacy.md

@@ -1,73 +0,0 @@
-# 04b · 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).
->
-> **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.
-
-## 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.)
-
-## The two legacy mechanisms
-
-### 1. `O.layout` — the per-node Layout box (`dOpt` + compiled `class`)
-
-Layout intent (grid width, flex direction/align/justify, spacing) is expressed as prefixed Vuetify utility tokens in a node's `O.layout.dOpt`, keyed by breakpoint, and mirrored into a compiled `O.layout.class` string that the runtime actually applies.
-
-```json
-"O": {
-  "cType": "slot",
-  "layout": {
-    "dOpt": { "xs": ["d:d-flex", "fd:flex-column", "c:col-12", "a:align-center"],
-              "md": ["fd:flex-row", "c:col-6"] },
-    "class": "d-flex flex-column col-12 align-center flex-md-row col-md-6"
-  }
-}
-```
-
-**`dOpt` and `class` must stay in sync** — the runtime applies `class`, so after any `dOpt` change you must recompile the `class` string by the exact rule below. The full prefix grammar (`d, fd, a, j, w, c, sp, tt, tc, te, fi`), the breakpoint table, the `dOpt → class` compilation algorithm (xs as-is; `sm/md/lg/xl` infix the breakpoint after the first `-`), and the containment rules live in **[../reference/layout-system.md](../reference/layout-system.md)** — read that before editing any `O.layout`.
-
-Quick reference (see layout-system.md for the complete set):
-
-| Prefix | Meaning | Example token → class |
-| --- | --- | --- |
-| `d:` | display | `d:d-flex` → `d-flex` |
-| `fd:` | flex direction | `fd:flex-column` → `flex-column` |
-| `a:` | align-items | `a:align-center` → `align-center` |
-| `j:` | justify-content | `j:justify-center` → `justify-center` |
-| `c:` | grid column (1–12, `auto`, `d-none`) | `c:col-6` → `col-6` |
-| `sp:` | spacing (`N × 4px`) | `sp:pa-4` → `pa-4` (16px) |
-| `tt:`/`tc:`/`te:`/`fi:` | typography / text-color / weight / italic | `tc:primary--text` → `primary--text` |
-
-Compilation gotcha: a non-`xs` breakpoint token infixes the breakpoint — `fd:flex-row` under `md` → `flex-md-row`, `c:col-6` under `md` → `col-md-6`, `sp:pa-4` under `md` → `pa-md-4`. Get this wrong and the class won't match the `dOpt`.
-
-### 2. CSS utility classes on the `class` prop
-
-Direct Vuetify utility classes on a node's `class` prop (Web-only). On a legacy page these are used freely for design — typography, color, spacing, elevation, rounding:
-
-```json
-"class": { "H": "'text-center elevation-2 text-h5 primary--text'", "T": "class" }
-```
-
-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.
-
-**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).
-
-## Rules for editing a legacy page
-
-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.
-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.
-
-## 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`.
-
-## Pre-sync 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.