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

package/dist/studio-cli/kits/mobile-app-kit/.ai-kit/ui-kit/knowledge/layout-and-slots.md

@@ -0,0 +1,64 @@
+# 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? → [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: [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
+
+```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 ([styling.md](styling.md)).
+
+Breakpoint device ranges — the boundaries `S` resolution ranges like `"xs-xl"`/`"md-xl"` are built from:
+
+| 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 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.
+- Container components with item parts must hold their documented item components: `VStepper`→`VStepperStep`/`VStepperContent`, `VExpansionPanels`→`VExpansionPanel`, `VCarousel`→`VCarouselItem`, `VTabs` holds `VTab`/`VTabItem` as **sibling pairs** (not nested; see [components.md](components.md) Tabs).
+- Canonical wrapper for a page: `VContainer > VRow > VCol > 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: [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 [components.md](components.md).

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

@@ -0,0 +1,40 @@
+# Localization (`lrids`, `LR`)
+
+## `lrids` structure — by language code, values single-quoted
+```json
+"lrids": {
+  "tr-TR": { "save": "'Kaydet'", "userName": "'Kullanıcı Adı:'" },
+  "en-US": { "save": "'Save'",   "userName": "'User Name:'" }
+}
+```
+- 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 existing file you edit.
+
+## Context rule: `LR` in props, `quick.LR` in events
+| Context | Use |
+|---------|-----|
+| Props (`P.H`, QScript) | bare `LR('key')` |
+| Events (`E.H`, TS) | `quick.LR('key')` |
+
+Props:
+```json
+"text": { "H": "LR('save')", "T": "prop" }
+```
+Events:
+```typescript
+quick.Quick.alert({ text: quick.LR('genericError'), category:'Error', actionButtons:[{name: quick.LR('ok'), type:'Confirm'}] });
+```
+`quick.LR(key, dataSource?)` returns the localized string. Never call `quick.LR` inside a prop.
+
+## Static vs localized text
+Static = a quoted literal (`"H": "'Kaydet'"`); localized = wrap the key (`"H": "LR('save')"`). Apostrophe inside a QScript string is doubled: `'Premium''u'`.
+
+## Workflow
+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 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/kits/mobile-app-kit/.ai-kit/ui-kit/knowledge/page-skeletons-legacy.md

@@ -0,0 +1,15 @@
+# STOP — legacy pages cannot be edited in this workspace
+
+If the target page's root-level `opt.V` is **missing or `< 2.0`**, it is a legacy page. **Do not edit it.** Tell the user the page is legacy and cannot be authored from a mobile workspace, and make no changes.
+
+There is no way to author it correctly here: mobile does not apply the legacy `O.layout` css mechanism, so the page cannot be restyled through it, and `S` does not render on a `V < 2.0` page either. Both style systems are dead ends on that page. Converting it is a migration, not an edit — it needs a decision from the user, not a side effect of the task you were given.
+
+## This is not about stray legacy fragments
+
+A page with `opt.V >= 2.0` that merely *carries* some `O.layout` (`dOpt`/`class`) is **not** a legacy page. Studio's editor injects those fragments into some components on its own, and on mobile they have no effect at all. That page is an ordinary `S` page:
+
+- Author its design in `S`, as normal — go back to `s-track.md`.
+- Never read `O.layout` to work out how the page currently looks; it does not affect the rendering.
+- When you edit such a page, strip its `O.layout` (`dOpt`/`class`) so the page comes out clean.
+
+The test is **`opt.V`**, not whether legacy css is present.

package/dist/studio-cli/kits/mobile-app-kit/.ai-kit/ui-kit/knowledge/page-skeletons.md

@@ -0,0 +1,111 @@
+# 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? → [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 → [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.
+
+## Skeleton — framework-native (no service component)
+```javascript
+let pjson = {
+  "pJson": [
+    {
+      "T": "Messaging",
+      "P": { "ID": { "H": "msg", "T": "prop" } },
+      "E": {
+        "PreRender": { "H": "quick.MM.trigger('fetchData');\r\n", "I": true, "HL": "TS" },
+        "fetchData": { "H": "let req=<any>{};\r\nreq.url='/api/data';\r\nreq.http='GET';\r\nreq.data=null;\r\nreq.blockRender=false;\r\nreq.responseField='data';\r\nreq.onSuccess='onData';\r\nreq.onFail='onFail';\r\nquick.Request.async(req);\r\n", "C": true, "HL": "TS" },
+        "onData": { "H": "let resData = response.data;\r\n/* process resData */\r\n", "C": true, "HL": "TS" },
+        "onFail": { "H": "quick.Quick.alert({ title:'Hata', text:'Bir hata oluştu.', category:'Error', actionButtons:[{ name:'Tamam', type:'Confirm' }] });\r\n", "C": true, "HL": "TS" }
+      },
+      "C": {}, "O": { "cType": "child" }, "_Editor": { "eID": "msg" }
+    },
+    {
+      "T": "VContainer",
+      "P": { "ID": { "H": "pageContainer", "T": "prop" },
+             "class": { "H": "'container container--fluid'", "T": "class" } },
+      "E": {},
+      "C": { "default": { "c": [ /* PAGE CONTENT */ ], "cType": "slot" } },
+      "O": { "cType": "child" }, "_Editor": { "eID": "pageContainer" }
+    }
+  ],
+  "lrids": {}, "opt": { "V": 2.5 }
+};
+export default pjson
+```
+
+## Skeleton — with project ServiceCaller (only if the project provides one)
+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)
+
+> **VCard children do not stack automatically** — `VCard`'s default slot is a flex-row container. Always place a `VRow > VCol(flexDirection:column)` inside `VCard` before adding content; otherwise labels/inputs render side-by-side instead of stacked.
+
+```json
+{ "T": "VRow", "P": { "ID": { "H": "rowMain", "T": "prop" } }, "E": {},
+  "C": { "default": { "c": [
+    { "T": "VCol", "P": { "ID": { "H": "colMain", "T": "prop" } },
+      "S": { "xs-xl": { "col": "12", "justifyContent": "center", "paddingTop": "0px", "paddingRight": "0px", "paddingBottom": "0px", "paddingLeft": "0px" } },
+      "E": {},
+      "C": { "default": { "c": [
+        { "T": "VCard", "P": { "ID": { "H": "cardMain", "T": "prop" } },
+          "S": { "xs-xl": { "backgroundColor": "#ffffff", "boxShadow": "none", "paddingTop": "16px", "paddingRight": "16px", "paddingBottom": "16px", "paddingLeft": "16px", "borderTopLeftRadius": "8px", "borderTopRightRadius": "8px", "borderBottomLeftRadius": "8px", "borderBottomRightRadius": "8px" } },
+          "E": {}, "C": { "default": { "c": [
+            { "T": "VRow", "P": { "ID": { "H": "rowCardContent", "T": "prop" } },
+              "S": { "xs-xl": { "marginTop": "0px", "marginRight": "0px", "marginBottom": "0px", "marginLeft": "0px" } },
+              "E": {}, "C": { "default": { "c": [
+                { "T": "VCol", "P": { "ID": { "H": "colCardContent", "T": "prop" } },
+                  "S": { "xs-xl": { "col": "12", "flexDirection": "column", "paddingTop": "0px", "paddingRight": "0px", "paddingBottom": "0px", "paddingLeft": "0px" } },
+                  "E": {}, "C": { "default": { "c": [
+                    { "T": "QLabel", "P": { "ID": { "H": "lblPageTitle", "T": "prop" },
+                        "text": { "H": "'Page Title'", "T": "prop" } },
+                      "S": { "xs-xl": { "fontSize": "24px", "fontWeight": "700", "fontColor": "#1976D2", "fontFamily": "", "fontStyle": "", "combinedFont": "", "ThemeFont": "", "lineHeight": "" } },
+                      "E": {}, "C": {}, "O": { "cType": "slot" }, "_Editor": { "eID": "lblPageTitle" } }
+                  ], "cType": "slot" } },
+                  "O": { "cType": "slot" }, "_Editor": { "eID": "colCardContent" } }
+              ], "cType": "slot" } },
+              "O": { "cType": "slot" }, "_Editor": { "eID": "rowCardContent" } }
+          ], "cType": "slot" } },
+          "O": { "cType": "slot" }, "_Editor": { "eID": "cardMain" } }
+      ], "cType": "slot" } },
+      "O": { "cType": "slot" },
+      "_Editor": { "eID": "colMain" } }
+  ], "cType": "slot" } },
+  "O": { "cType": "slot" }, "_Editor": { "eID": "rowMain" } }
+```
+
+## Styling — every component carries an `S` (don't skip it)
+The skeletons above are intentionally minimal: **structure + `class` only**. They are *not* a finished page. A real page also sets each component's visual design in its top-level **`S`** object — the cross-platform Style tag the editor serializes (sibling to `T`/`P`/`E`/`C`/`O`/`_Editor`). After you drop in a section, give its components their `S`:
+
+```json
+{ "T": "VCard", "P": { "ID": { "H": "cardMain", "T": "prop" } },
+  "S": { "xs-xl": {
+      "backgroundColor": "#ffffff",
+      "borderTopLeftRadius": "8px", "borderTopRightRadius": "8px",
+      "borderBottomLeftRadius": "8px", "borderBottomRightRadius": "8px",
+      "paddingTop": "16px", "paddingRight": "16px", "paddingBottom": "16px", "paddingLeft": "16px",
+      "boxShadow": "0 2px 8px rgba(0,0,0,0.08)" } },
+  "E": {}, "C": { "default": { "c": [
+    { "T": "VRow", "P": { "ID": { "H": "rowCardContent", "T": "prop" } },
+      "S": { "xs-xl": { "marginTop": "0px", "marginRight": "0px", "marginBottom": "0px", "marginLeft": "0px" } },
+      "E": {}, "C": { "default": { "c": [
+        { "T": "VCol", "P": { "ID": { "H": "colCardContent", "T": "prop" } },
+          "S": { "xs-xl": { "col": "12", "flexDirection": "column", "paddingTop": "0px", "paddingRight": "0px", "paddingBottom": "0px", "paddingLeft": "0px" } },
+          "E": {}, "C": { "default": { "c": [ /* content here */ ], "cType": "slot" } },
+          "O": { "cType": "slot" }, "_Editor": { "eID": "colCardContent" } }
+      ], "cType": "slot" } },
+      "O": { "cType": "slot" }, "_Editor": { "eID": "rowCardContent" } }
+  ], "cType": "slot" } },
+  "O": { "cType": "slot" }, "_Editor": { "eID": "cardMain" } }
+```
+
+- `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 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: [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/kits/mobile-app-kit/.ai-kit/ui-kit/knowledge/properties.md

@@ -0,0 +1,77 @@
+# 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 — 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.
+
+> **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 [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.
+
+## 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"`.
+(See your track's catalog §6.)

package/dist/studio-cli/kits/mobile-app-kit/.ai-kit/ui-kit/knowledge/qjson-structure-legacy.md

@@ -0,0 +1,15 @@
+# STOP — legacy pages cannot be edited in this workspace
+
+If the target page's root-level `opt.V` is **missing or `< 2.0`**, it is a legacy page. **Do not edit it.** Tell the user the page is legacy and cannot be authored from a mobile workspace, and make no changes.
+
+There is no way to author it correctly here: mobile does not apply the legacy `O.layout` css mechanism, so the page cannot be restyled through it, and `S` does not render on a `V < 2.0` page either. Both style systems are dead ends on that page. Converting it is a migration, not an edit — it needs a decision from the user, not a side effect of the task you were given.
+
+## This is not about stray legacy fragments
+
+A page with `opt.V >= 2.0` that merely *carries* some `O.layout` (`dOpt`/`class`) is **not** a legacy page. Studio's editor injects those fragments into some components on its own, and on mobile they have no effect at all. That page is an ordinary `S` page:
+
+- Author its design in `S`, as normal — go back to `s-track.md`.
+- Never read `O.layout` to work out how the page currently looks; it does not affect the rendering.
+- When you edit such a page, strip its `O.layout` (`dOpt`/`class`) so the page comes out clean.
+
+The test is **`opt.V`**, not whether legacy css is present.

package/dist/studio-cli/kits/mobile-app-kit/.ai-kit/ui-kit/knowledge/qjson-structure.md

@@ -0,0 +1,67 @@
+# 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? → [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 → [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`.
+
+```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 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
+
+```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 | [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 [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.
+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 [s-track.md](../s-track.md) rule S4).
+
+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 the file already has them. Studio/the compiler regenerates them on import — see [validation.md](validation.md).

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

@@ -0,0 +1,68 @@
+# Services (REST)
+
+Two patterns. **Check existing project pages first** and follow whichever the project uses.
+
+## Pattern A — `quick.Request.async` (framework-native, default)
+Call from any event; success/fail route to custom events on the same component (usually `Messaging`).
+
+```typescript
+let req = <any>{};
+req.url = '/api/products/list';
+req.http = 'GET';                 // GET|POST|PUT|DELETE|PATCH|MULTIPART|POSTBLOB|GETBLOB
+req.data = null;                  // body for POST/PUT
+req.blockRender = false;
+req.responseField = 'productList';
+req.onSuccess = 'onProductsSuccess';
+req.onFail = 'onProductsFail';
+quick.Request.async(req);
+```
+
+Read the result in the success event as `response.<responseField>`:
+```json
+"onProductsSuccess": {
+  "H": "if (response.productList != null) {\r\n  let resData = response.productList;\r\n  components.tblProducts.items = resData.resultList;\r\n}\r\n",
+  "C": true, "HL": "TS"
+}
+"onProductsFail": {
+  "H": "quick.Quick.alert({ title:'Hata', text:'İstek başarısız', category:'Error', actionButtons:[{ name:'Tamam', type:'Confirm' }] });\r\n",
+  "C": true, "HL": "TS"
+}
+```
+
+`IRequest` fields: `url`, `http`, `data`, `responseField`, `onSuccess`, `onFail`, `blockRender`, `showSuccessMessage`, `showErrorMessage`, `headers`, `withCredentials`, `timeout`, `args`. Inline `await` form also works:
+```typescript
+const respo = await quick.Request.async(req);
+let result = (<any>respo).data;
+```
+
+## Pattern B — project ServiceCaller `CustomComponent`
+Some projects centralize calls in a reusable `CustomComponent` (a service proxy) with `onLoad` / `onServiceSuccessCallBack` / `onServiceFailCallBack`. Use it **only if the project already provides one** (copy its `QJsonPath` from an existing page).
+
+```json
+{ "T": "CustomComponent", "P": {
+    "ID": { "H": "serviceCallerComp", "T": "prop" },
+    "QJsonPath": { "H": "'<<qjson:path/to/ServiceCallerCustomComponent>>'", "T": "prop" } },
+  "E": {
+    "onLoad": { "H": "quick.store.set('page', 0);\r\nquick.MM.trigger('getProducts', [{ page: 0 }]);\r\n", "HL": "TS" },
+    "onServiceSuccessCallBack": { "H": "/* capture → null → process */", "C": true, "P": "serviceResponse:any", "HL": "TS" },
+    "onServiceFailCallBack": { "H": "/* alert with actionButtons */", "C": true, "P": "serviceResponse:any", "HL": "TS" }
+  },
+  "C": { "default": { "c": [ { "T": "Ghost", "P": { "ID": { "H": "ghostComp", "T": "prop" } }, "E": {}, "C": {}, "O": { "cType": "child" }, "_Editor": { "eID": "ghostComp" } } ], "cType": "child" } },
+  "O": { "cType": "child", "dynProps": true }, "_Editor": { "eID": "serviceCallerComp" } }
+```
+Each call is a custom event on `Messaging` that builds a `requestObj` and calls `(<any>components.serviceCallerComp).serviceCall(requestObj)`. In the success callback, **capture → null → process**:
+```typescript
+if (serviceResponse.getProducts != null) {
+  let resData = serviceResponse.getProducts;  // capture
+  serviceResponse.getProducts = null;         // null immediately
+  components.tblProducts.items = resData.resultList; // process
+}
+```
+
+## Rules that prevent the common failures
+- Close the request object literal with `};` before the next call (missing `;` → "not callable").
+- Triggered custom events need `"C": true`; declare `P` to match the trigger payload.
+- `responseField` / event names must match exactly across trigger, request, and callback.
+- Fail alerts must include `actionButtons`.
+- Initialize in **one** place (service `onLoad` or `Messaging.PreRender`).
+- Don't assign `VDataTable.headers`/static `items` in callbacks — those are component props; assign only dynamic rows.

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

@@ -0,0 +1,15 @@
+# STOP — legacy pages cannot be edited in this workspace
+
+If the target page's root-level `opt.V` is **missing or `< 2.0`**, it is a legacy page. **Do not edit it.** Tell the user the page is legacy and cannot be authored from a mobile workspace, and make no changes.
+
+There is no way to author it correctly here: mobile does not apply the legacy `O.layout` css mechanism, so the page cannot be restyled through it, and `S` does not render on a `V < 2.0` page either. Both style systems are dead ends on that page. Converting it is a migration, not an edit — it needs a decision from the user, not a side effect of the task you were given.
+
+## This is not about stray legacy fragments
+
+A page with `opt.V >= 2.0` that merely *carries* some `O.layout` (`dOpt`/`class`) is **not** a legacy page. Studio's editor injects those fragments into some components on its own, and on mobile they have no effect at all. That page is an ordinary `S` page:
+
+- Author its design in `S`, as normal — go back to `s-track.md`.
+- Never read `O.layout` to work out how the page currently looks; it does not affect the rendering.
+- When you edit such a page, strip its `O.layout` (`dOpt`/`class`) so the page comes out clean.
+
+The test is **`opt.V`**, not whether legacy css is present.