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

package/dist/studio-cli/kits/mobile-app-kit/.claude/skills/figma-to-qjson/SKILL.md

@@ -0,0 +1,116 @@
+---
+name: figma-to-qjson
+description: Reconstruct a Quick / Plateau Studio .qjson page from a Figma design (a Figma selection URL). If the design isn't fetched yet, run the `studio figmaPull` command to populate a local .figma/ folder (node.json, file.json, render.json, imagefills.json, assets/*.svg), then turn that raw Figma node tree into a real qjson page. Use whenever the task is to convert a Figma frame/selection into a qjson page. Covers fetching via the `studio figmaPull` command, the Figma→qjson mapping rules, the geometry/style extraction recipe, the rect+text control-clustering heuristic, and asset handling. Delegates all qjson-authoring detail to the quick-qjson skill + the ui-kit package.
+---
+
+# Figma → QJSON reconstruction
+
+This skill turns a Figma design into a **Quick `.qjson` page**. The raw Figma responses live in a local **`.figma/`** folder; you produce that folder by **running the `studio figmaPull` command** (which wraps `figmaPull(url, token)`). This skill never calls the Figma API directly — it runs the command, then reads what the command wrote.
+
+It owns only the **translation knowledge** (Figma node tree → qjson components). For everything about *authoring* qjson (schema, props, styling, validation, project conventions) it defers to the **`quick-qjson`** skill and the **`ui-kit/`** folder in your workspace (e.g. `.ai-kit/ui-kit/index.md`) — read those; do not re-derive them here.
+
+## Get the design first (run `studio figmaPull`)
+Before the translation workflow below, you need the raw Figma responses in `.figma/`. Get them by running the **`studio figmaPull` command** (the CLI that wraps `figmaPull(url, token)` — it extracts `fileKey` + `node-id` from the URL itself):
+
+- If `.figma/` is already present and current for the design you want → just read `.figma/manifest.json` and continue.
+- Otherwise **run the command yourself** (don't wait for the user to pre-fetch). The URL and token are **positional arguments**, in that order; `-d, --dir <dir>` optionally picks the workspace whose `.figma/` receives the output (defaults to the current directory):
+  ```
+    studio figmaPull "<figma-url>" "<token>"
+  ```
+- **Parameters — resolve, don't block:**
+  - **URL**: take the Figma *selection* link from the user's message / context; if it isn't there, **ask the user** (AskUserQuestion: "paste the Figma 'Copy link to selection'"). Don't guess it.
+  - **Token**: a Figma personal access token, passed as the **second positional argument**. The command has no env/config fallback, so you must supply it explicitly; ask the user once if you don't have it, never hardcode.
+- The command writes `.figma/node.json`, `file.json`, `render.json`, `imagefills.json`, `manifest.json` (+ `assets/*.svg`). **Read `manifest.json` first** — if its `node` endpoint failed (403 token / 404 file·node), surface that error and stop; don't proceed on a bad fetch.
+
+Inputs you'll then use, as needed:
+- `.figma/node.json` — the target frame's full node tree (primary input).
+- `.figma/file.json` — whole-file tree (styles, components — fallback/context).
+- `.figma/render.json` — `{images:{<nodeId>: <svg-url>}}` for vector/icon render.
+- `.figma/imagefills.json` — `imageRef → URL` map for IMAGE fills.
+- `.figma/assets/*.svg` — downloaded SVGs (if the command saved them).
+
+## Workflow (the same process a human reviewer would follow)
+
+### 0. Load + triage
+Read `node.json`, grab the fetched frame, and get a shape-of-the-page read: node-type counts, max depth, **auto-layout usage**, and all TEXT content. This decides the page kind (login / form / list / landing…) and whether it maps cleanly.
+
+```python
+import json, collections
+doc = next(iter(json.load(open('.figma/node.json'))['nodes'].values()))['document']
+types, lm, texts = collections.Counter(), collections.Counter(), []
+def walk(n):
+    types[n['type']] += 1
+    if n['type'] == 'FRAME': lm[n.get('layoutMode','NONE')] += 1
+    if n['type'] == 'TEXT':  texts.append(n.get('characters','')[:40])
+    for c in n.get('children', []): walk(c)
+walk(doc)
+print('types', dict(types)); print('layoutMode', dict(lm)); print('texts', texts)
+```
+> Many frames with `layoutMode` HORIZONTAL/VERTICAL → the layout maps cleanly to `VRow`/`VCol`. Many `NONE` (absolute) → you must reconstruct structure from geometry (step 2–3).
+
+### 1. Extract per-node geometry + style
+For each visible node, pull **frame-relative** `x,y,w,h`, fill hex, font size/weight/color, and `cornerRadius`. This table is what tells you "what each thing is".
+
+```python
+root = doc['absoluteBoundingBox']; rx, ry = root['x'], root['y']
+def hexfill(n):
+    for f in (n.get('fills') or []):
+        if f.get('type') == 'SOLID':
+            c = f['color']; return '#%02x%02x%02x' % (int(c['r']*255), int(c['g']*255), int(c['b']*255))
+    return None
+def walk(n, d=0):
+    bb = n.get('absoluteBoundingBox') or {}
+    x = (bb.get('x',0)-rx) if 'x' in bb else None; y = (bb.get('y',0)-ry) if 'y' in bb else None
+    st = n.get('style', {})
+    print('  '*d, n['type'], n.get('name'),
+          f"({x},{y}) {bb.get('width')}x{bb.get('height')}" if x is not None else '',
+          '|', repr(n.get('characters','')[:30]) if n['type']=='TEXT' else '',
+          'fz', st.get('fontSize'), 'fw', st.get('fontWeight'),
+          'fill', hexfill(n), 'r', n.get('cornerRadius'))
+    for c in n.get('children', []): walk(c, d+1)
+walk(doc)
+```
+
+### 2. Detect the *real* visible background
+The frame's own `fills` may just be the **artboard** color, not what the user sees. Look for a **full-bleed shape** (a RECTANGLE/VECTOR roughly the frame's size, drawn first/behind) — its fill is the real page background. (Tell-tale: dark text only makes sense on a light background.) Use that for `Messaging.pageBackgroundColor` and container backgrounds.
+
+### 3. Cluster loose elements into controls
+Figma often keeps a button's **background rect** and its **label text** as *separate siblings*. Infer a single control when a TEXT's center lies **within a RECTANGLE's bounds** (and they're adjacent in z-order). One rect + one text inside it = one button or one input — not two components.
+
+### 4. Map each control → qjson (the rules)
+
+| Figma pattern | → qjson | Decisive signal |
+|---|---|---|
+| auto-layout FRAME, `VERTICAL` / `HORIZONTAL` | stacked `VRow`s / a `VRow` of `VCol`s | `layoutMode` |
+| plain TEXT | `QLabel` (`text` PType `prop`) | — |
+| TEXT whose chars are PUA glyphs (U+F0000+) | `VIcon` (icon name, PType `text`) | codepoint → `mdi-*` name |
+| large bold TEXT near top | title `QLabel` | fontSize/weight |
+| rounded rect (high `cornerRadius`) + **centered, light** text inside | **filled** `VBtn` → child `QLabel`; rect fill → `S.backgroundColor` | rect has a solid fill |
+| rounded rect, `fill=none` + stroke, text inside | `VBtn` `outlined` | no fill, has stroke |
+| white/light rounded rect + **gray** text inside | `VTextField` (the gray text → `placeholder`) | inner text is a muted color |
+| field whose name/label is "şifre"/"password"/"pin" | + `type='password'` | text content |
+| small, right-aligned text link | `VBtn` `text` (link) → `QLabel` | alignment + size |
+| custom VECTOR group (logo/illustration) | `VImg` from an asset (see step 5) | type VECTOR/GROUP, not a glyph |
+| IMAGE fill (`imageRef`) | `VImg`, URL from `imagefills.json` | fill type IMAGE |
+
+Pick real props/events/styles from **`ui-kit/reference/component-contracts.json`** and **`component-styles.json`** — never invent. Convert px → the kit's responsive grid (`col`, `S` blocks); do **not** reproduce absolute pixel coordinates.
+
+### 5. Assets (vectors / logos)
+A deployed Quick app can't read local SVGs or Figma's expiring S3 URLs. So:
+- If there is an asset pipeline / CDN, upload `.figma/assets/<id>.svg` and reference it via `VImg`.
+- Otherwise insert a **`VIcon` placeholder** in the right spot and **flag in the report** that the real logo must be exported (`render.json` URL → `.figma/assets/`) and uploaded as a Studio asset. Don't silently drop it.
+
+### 6. Author the qjson
+Hand off to **`quick-qjson`**: build top-down `Messaging → VContainer > VRow > VCol > content`, mirror a sibling page in the workspace for ID style and `S`-block shape, author `pJson`/`lrids` only (omit `cJson`/`clrids` entirely — never write them, strip if present). Wire obvious behavior (e.g. a login button → a `Messaging` event that reads `components.<id>.qValue` and `quick.Quick.alert(...)`).
+
+### 7. Validate + report
+`studio buildQjson <file>` — fix every error. Then report: the new file, the **mapping decisions** (what each Figma element became), any **assumptions** (background, clustering, responsive sizing), **assets needing manual upload**, and the validation result.
+
+## Gotchas (these trip up naive conversions)
+- **Artboard ≠ background.** Use the full-bleed shape's fill, not `frame.fills`.
+- **Separate rect + text = one control.** Cluster by spatial containment before mapping.
+- **PUA-glyph TEXT is an icon**, not a label → `VIcon` (map the codepoint to an `mdi-*` name).
+- **Gray inner text in a white field = placeholder**, not a value.
+- **Absolute (`NONE`) layout** still becomes semantic `VRow/VCol`; reconstruct order/grouping from `y` then `x`. Never emit pixel coordinates.
+- **Big visual pages**: don't convert in one shot — 1–3 sections per edit (per the quick-qjson rules).
+```

package/dist/studio-cli/kits/mobile-app-kit/.claude/skills/quick-qjson/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: quick-qjson
+description: Create, edit, review, style, or validate Quick / Plateau Studio .qjson UI pages. Load this skill for ANY task that touches a file with the .qjson extension — building a new page, editing or fixing an existing one (even a one-line tweak or typo fix), styling/layout changes, events/scripting, services, localization, or validation. Also load it the moment you encounter a .qjson file mid-task, even if the request never mentions qjson. Covers the qjson schema, the quick.* scripting API, the component registry, and the styling/layout/events systems.
+---
+
+# Quick QJSON authoring
+
+The complete, source-grounded knowledge for **Quick / Plateau Studio `.qjson`** UI pages lives in the **`ui-kit/`** folder — locate it in your workspace (e.g. `.ai-kit/ui-kit/`) and treat it as authoritative over any prior assumptions about Quick.
+
+**Read `ui-kit/index.md` and follow it.** Its Step 0 routes you to the right style track (`S` vs legacy — never mixed on a page), its non-negotiable rules apply to every edit, and it maps which knowledge/reference docs to open for the task at hand. Don't load everything up front — open only your track's docs plus the shared ones it lists.

package/dist/studio-cli/kits/mobile-app-kit/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest", "--ignore-https-errors"]
+    }
+  }
+}

package/dist/studio-cli/kits/mobile-app-kit/.opencode/opencode.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "instructions": [
+    "../.ai-kit/ui-kit/index.md"
+  ],
+  "mcp": {
+    "playwright": {
+      "type": "local",
+      "command": [
+        "npx",
+        "@playwright/mcp@latest"
+      ],
+      "enabled": true
+    }
+  },
+  "permission": {
+    "playwright*": "allow"
+  }
+}

package/dist/studio-cli/kits/mobile-app-kit/.opencode/skills/figma-to-qjson/SKILL.md

@@ -0,0 +1,116 @@
+---
+name: figma-to-qjson
+description: Reconstruct a Quick / Plateau Studio .qjson page from a Figma design (a Figma selection URL). If the design isn't fetched yet, run the `studio figmaPull` command to populate a local .figma/ folder (node.json, file.json, render.json, imagefills.json, assets/*.svg), then turn that raw Figma node tree into a real qjson page. Use whenever the task is to convert a Figma frame/selection into a qjson page. Covers fetching via the `studio figmaPull` command, the Figma→qjson mapping rules, the geometry/style extraction recipe, the rect+text control-clustering heuristic, and asset handling. Delegates all qjson-authoring detail to the quick-qjson skill + the ui-kit package.
+---
+
+# Figma → QJSON reconstruction
+
+This skill turns a Figma design into a **Quick `.qjson` page**. The raw Figma responses live in a local **`.figma/`** folder; you produce that folder by **running the `studio figmaPull` command** (which wraps `figmaPull(url, token)`). This skill never calls the Figma API directly — it runs the command, then reads what the command wrote.
+
+It owns only the **translation knowledge** (Figma node tree → qjson components). For everything about *authoring* qjson (schema, props, styling, validation, project conventions) it defers to the **`quick-qjson`** skill and the **`ui-kit/`** folder in your workspace (e.g. `.ai-kit/ui-kit/index.md`) — read those; do not re-derive them here.
+
+## Get the design first (run `studio figmaPull`)
+Before the translation workflow below, you need the raw Figma responses in `.figma/`. Get them by running the **`studio figmaPull` command** (the CLI that wraps `figmaPull(url, token)` — it extracts `fileKey` + `node-id` from the URL itself):
+
+- If `.figma/` is already present and current for the design you want → just read `.figma/manifest.json` and continue.
+- Otherwise **run the command yourself** (don't wait for the user to pre-fetch). The URL and token are **positional arguments**, in that order; `-d, --dir <dir>` optionally picks the workspace whose `.figma/` receives the output (defaults to the current directory):
+  ```
+    studio figmaPull "<figma-url>" "<token>"
+  ```
+- **Parameters — resolve, don't block:**
+  - **URL**: take the Figma *selection* link from the user's message / context; if it isn't there, **ask the user** (AskUserQuestion: "paste the Figma 'Copy link to selection'"). Don't guess it.
+  - **Token**: a Figma personal access token, passed as the **second positional argument**. The command has no env/config fallback, so you must supply it explicitly; ask the user once if you don't have it, never hardcode.
+- The command writes `.figma/node.json`, `file.json`, `render.json`, `imagefills.json`, `manifest.json` (+ `assets/*.svg`). **Read `manifest.json` first** — if its `node` endpoint failed (403 token / 404 file·node), surface that error and stop; don't proceed on a bad fetch.
+
+Inputs you'll then use, as needed:
+- `.figma/node.json` — the target frame's full node tree (primary input).
+- `.figma/file.json` — whole-file tree (styles, components — fallback/context).
+- `.figma/render.json` — `{images:{<nodeId>: <svg-url>}}` for vector/icon render.
+- `.figma/imagefills.json` — `imageRef → URL` map for IMAGE fills.
+- `.figma/assets/*.svg` — downloaded SVGs (if the command saved them).
+
+## Workflow (the same process a human reviewer would follow)
+
+### 0. Load + triage
+Read `node.json`, grab the fetched frame, and get a shape-of-the-page read: node-type counts, max depth, **auto-layout usage**, and all TEXT content. This decides the page kind (login / form / list / landing…) and whether it maps cleanly.
+
+```python
+import json, collections
+doc = next(iter(json.load(open('.figma/node.json'))['nodes'].values()))['document']
+types, lm, texts = collections.Counter(), collections.Counter(), []
+def walk(n):
+    types[n['type']] += 1
+    if n['type'] == 'FRAME': lm[n.get('layoutMode','NONE')] += 1
+    if n['type'] == 'TEXT':  texts.append(n.get('characters','')[:40])
+    for c in n.get('children', []): walk(c)
+walk(doc)
+print('types', dict(types)); print('layoutMode', dict(lm)); print('texts', texts)
+```
+> Many frames with `layoutMode` HORIZONTAL/VERTICAL → the layout maps cleanly to `VRow`/`VCol`. Many `NONE` (absolute) → you must reconstruct structure from geometry (step 2–3).
+
+### 1. Extract per-node geometry + style
+For each visible node, pull **frame-relative** `x,y,w,h`, fill hex, font size/weight/color, and `cornerRadius`. This table is what tells you "what each thing is".
+
+```python
+root = doc['absoluteBoundingBox']; rx, ry = root['x'], root['y']
+def hexfill(n):
+    for f in (n.get('fills') or []):
+        if f.get('type') == 'SOLID':
+            c = f['color']; return '#%02x%02x%02x' % (int(c['r']*255), int(c['g']*255), int(c['b']*255))
+    return None
+def walk(n, d=0):
+    bb = n.get('absoluteBoundingBox') or {}
+    x = (bb.get('x',0)-rx) if 'x' in bb else None; y = (bb.get('y',0)-ry) if 'y' in bb else None
+    st = n.get('style', {})
+    print('  '*d, n['type'], n.get('name'),
+          f"({x},{y}) {bb.get('width')}x{bb.get('height')}" if x is not None else '',
+          '|', repr(n.get('characters','')[:30]) if n['type']=='TEXT' else '',
+          'fz', st.get('fontSize'), 'fw', st.get('fontWeight'),
+          'fill', hexfill(n), 'r', n.get('cornerRadius'))
+    for c in n.get('children', []): walk(c, d+1)
+walk(doc)
+```
+
+### 2. Detect the *real* visible background
+The frame's own `fills` may just be the **artboard** color, not what the user sees. Look for a **full-bleed shape** (a RECTANGLE/VECTOR roughly the frame's size, drawn first/behind) — its fill is the real page background. (Tell-tale: dark text only makes sense on a light background.) Use that for `Messaging.pageBackgroundColor` and container backgrounds.
+
+### 3. Cluster loose elements into controls
+Figma often keeps a button's **background rect** and its **label text** as *separate siblings*. Infer a single control when a TEXT's center lies **within a RECTANGLE's bounds** (and they're adjacent in z-order). One rect + one text inside it = one button or one input — not two components.
+
+### 4. Map each control → qjson (the rules)
+
+| Figma pattern | → qjson | Decisive signal |
+|---|---|---|
+| auto-layout FRAME, `VERTICAL` / `HORIZONTAL` | stacked `VRow`s / a `VRow` of `VCol`s | `layoutMode` |
+| plain TEXT | `QLabel` (`text` PType `prop`) | — |
+| TEXT whose chars are PUA glyphs (U+F0000+) | `VIcon` (icon name, PType `text`) | codepoint → `mdi-*` name |
+| large bold TEXT near top | title `QLabel` | fontSize/weight |
+| rounded rect (high `cornerRadius`) + **centered, light** text inside | **filled** `VBtn` → child `QLabel`; rect fill → `S.backgroundColor` | rect has a solid fill |
+| rounded rect, `fill=none` + stroke, text inside | `VBtn` `outlined` | no fill, has stroke |
+| white/light rounded rect + **gray** text inside | `VTextField` (the gray text → `placeholder`) | inner text is a muted color |
+| field whose name/label is "şifre"/"password"/"pin" | + `type='password'` | text content |
+| small, right-aligned text link | `VBtn` `text` (link) → `QLabel` | alignment + size |
+| custom VECTOR group (logo/illustration) | `VImg` from an asset (see step 5) | type VECTOR/GROUP, not a glyph |
+| IMAGE fill (`imageRef`) | `VImg`, URL from `imagefills.json` | fill type IMAGE |
+
+Pick real props/events/styles from **`ui-kit/reference/component-contracts.json`** and **`component-styles.json`** — never invent. Convert px → the kit's responsive grid (`col`, `S` blocks); do **not** reproduce absolute pixel coordinates.
+
+### 5. Assets (vectors / logos)
+A deployed Quick app can't read local SVGs or Figma's expiring S3 URLs. So:
+- If there is an asset pipeline / CDN, upload `.figma/assets/<id>.svg` and reference it via `VImg`.
+- Otherwise insert a **`VIcon` placeholder** in the right spot and **flag in the report** that the real logo must be exported (`render.json` URL → `.figma/assets/`) and uploaded as a Studio asset. Don't silently drop it.
+
+### 6. Author the qjson
+Hand off to **`quick-qjson`**: build top-down `Messaging → VContainer > VRow > VCol > content`, mirror a sibling page in the workspace for ID style and `S`-block shape, author `pJson`/`lrids` only (omit `cJson`/`clrids` entirely — never write them, strip if present). Wire obvious behavior (e.g. a login button → a `Messaging` event that reads `components.<id>.qValue` and `quick.Quick.alert(...)`).
+
+### 7. Validate + report
+`studio buildQjson <file>` — fix every error. Then report: the new file, the **mapping decisions** (what each Figma element became), any **assumptions** (background, clustering, responsive sizing), **assets needing manual upload**, and the validation result.
+
+## Gotchas (these trip up naive conversions)
+- **Artboard ≠ background.** Use the full-bleed shape's fill, not `frame.fills`.
+- **Separate rect + text = one control.** Cluster by spatial containment before mapping.
+- **PUA-glyph TEXT is an icon**, not a label → `VIcon` (map the codepoint to an `mdi-*` name).
+- **Gray inner text in a white field = placeholder**, not a value.
+- **Absolute (`NONE`) layout** still becomes semantic `VRow/VCol`; reconstruct order/grouping from `y` then `x`. Never emit pixel coordinates.
+- **Big visual pages**: don't convert in one shot — 1–3 sections per edit (per the quick-qjson rules).
+```

package/dist/studio-cli/kits/mobile-app-kit/.opencode/skills/quick-qjson/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: quick-qjson
+description: Create, edit, review, style, or validate Quick / Plateau Studio .qjson UI pages. Load this skill for ANY task that touches a file with the .qjson extension — building a new page, editing or fixing an existing one (even a one-line tweak or typo fix), styling/layout changes, events/scripting, services, localization, or validation. Also load it the moment you encounter a .qjson file mid-task, even if the request never mentions qjson. Covers the qjson schema, the quick.* scripting API, the component registry, and the styling/layout/events systems.
+---
+
+# Quick QJSON authoring
+
+The complete, source-grounded knowledge for **Quick / Plateau Studio `.qjson`** UI pages lives in the **`ui-kit/`** folder — locate it in your workspace (e.g. `.ai-kit/ui-kit/`) and treat it as authoritative over any prior assumptions about Quick.
+
+**Read `ui-kit/index.md` and follow it.** Its Step 0 routes you to the right style track (`S` vs legacy — never mixed on a page), its non-negotiable rules apply to every edit, and it maps which knowledge/reference docs to open for the task at hand. Don't load everything up front — open only your track's docs plus the shared ones it lists.

package/dist/studio-cli/kits/mobile-app-kit/AGENTS.md

@@ -0,0 +1,23 @@
+# AGENTS.md — Quick QJSON workspace
+
+This workspace holds **Quick / Plateau Studio `.qjson`** mobile UI pages. If workspace includes */ai-docs/ then **Every page here is built on the module** and must follow its rules, whether or not the request names it.
+
+## Start here — any `.qjson` work
+
+New page, edit, styling, events, validation:
+
+<!-- 7f3a9c2e -->
+1. Open [`.ai-kit/ui-kit/index.md`](.ai-kit/ui-kit/index.md), the manual, or load the **quick-qjson** skill and author the page with it.
+
+**Which rule wins.** The module's rules add to the ui-kit manual; they do not replace it. Where the two conflict, the ui-kit wins — **except** for the *Corrections to the ui-kit manual* section of `*/ai-docs/index.md`, which replaces the ui-kit rule it names. No other file or section overrides the ui-kit.
+
+## Working with the studio CLI
+
+These pages were pulled from Studio and will be synced back.
+
+- **Building a page from a Figma design** → load the **figma-to-qjson** skill
+- **CLI depth** — sync/frontmatter, the bridge, render-check, `buildQjson` internals → [`.ai-kit/cli-kit/knowledge/`](.ai-kit/cli-kit/knowledge/)
+
+**Commands:** `studio buildQjson <file-or-folder>` (validate — always, before finishing) · `studio push` (sync, needs the bridge) · render-check via the `playwright` MCP · `studio startWorking <file>` (unlock a readonly page) · `studio convertToBlock <file>` (mark an embedded page as a block component).
+
+Report what you changed, the validation result, and the push/render-check result — if the bridge or browser wasn't available, say so rather than skipping silently.

package/dist/studio-cli/kits/mobile-app-kit/CLAUDE.md

@@ -0,0 +1,23 @@
+# AGENTS.md — Quick QJSON workspace
+
+This workspace holds **Quick / Plateau Studio `.qjson`** mobile UI pages. If workspace includes */ai-docs/ then **Every page here is built on the module** and must follow its rules, whether or not the request names it.
+
+## Start here — any `.qjson` work
+
+New page, edit, styling, events, validation:
+
+<!-- 7f3a9c2e -->
+1. Open [`.ai-kit/ui-kit/index.md`](.ai-kit/ui-kit/index.md), the manual, or load the **quick-qjson** skill and author the page with it.
+
+**Which rule wins.** The module's rules add to the ui-kit manual; they do not replace it. Where the two conflict, the ui-kit wins — **except** for the *Corrections to the ui-kit manual* section of `*/ai-docs/index.md`, which replaces the ui-kit rule it names. No other file or section overrides the ui-kit.
+
+## Working with the studio CLI
+
+These pages were pulled from Studio and will be synced back.
+
+- **Building a page from a Figma design** → load the **figma-to-qjson** skill
+- **CLI depth** — sync/frontmatter, the bridge, render-check, `buildQjson` internals → [`.ai-kit/cli-kit/knowledge/`](.ai-kit/cli-kit/knowledge/)
+
+**Commands:** `studio buildQjson <file-or-folder>` (validate — always, before finishing) · `studio push` (sync, needs the bridge) · render-check via the `playwright` MCP · `studio startWorking <file>` (unlock a readonly page) · `studio convertToBlock <file>` (mark an embedded page as a block component).
+
+Report what you changed, the validation result, and the push/render-check result — if the bridge or browser wasn't available, say so rather than skipping silently.

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

@@ -16,6 +16,11 @@ Quick has **two style systems**, and they are not interchangeable on a page. Dec
 
 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.
 
+> **On Mobile, two things above work differently.** Mobile does not parse or apply `O.layout`, so legacy css declarations simply **have no effect** there — the page still renders, it is just not styled by them, and Studio's editor injects some of these fragments on its own.
+>
+> - **`opt.V >= 2.0` with leftover `O.layout` is normal on Mobile — do NOT flag it as a mismatch.** It is an ordinary `S` page. Never read `O.layout` to work out how it currently looks, author its design in `S`, and **strip its `O.layout` (`dOpt`/`class`) when you edit it**, so the page comes out clean.
+> - **`opt.V` missing or `< 2.0` on Mobile: stop.** That page is legacy and **cannot be edited from a mobile workspace** — neither style system can author it there. Tell the user and make no changes. 
+
 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)

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/knowledge/appSettings/component-list.md

@@ -4,7 +4,7 @@ Declares, per component type, **which props exist**, their types, their allowed
 
 Selected in **App Settings → General → Component List** → [appSettings.md](appSettings.md).
 
-For the built-in components and their `S` params, use the kit's own reference — [../components.md](../components.md) and [../reference/component-styles.json](../reference/component-styles.json). The Component List is the **app-level** catalog: where a project describes its domain components and any extra props.
+For the built-in components and their `S` params, use the kit's own reference — [../components.md](../components.md) and [../reference/component-styles.json](../../reference/component-styles.json). The Component List is the **app-level** catalog: where a project describes its domain components and any extra props.
 
 ## Shape
 
@@ -57,7 +57,7 @@ It describes props; it does not implement components. A component still has to e
 ## Rules that prevent the common failures
 
 - Quote values as you would in a prop `H` — strings single-quoted inside the string, numbers and booleans bare.
-- Don't duplicate the built-in registry here; consult [../reference/component-styles.json](../reference/component-styles.json) for built-ins and keep this file for the app's own components.
+- Don't duplicate the built-in registry here; consult [../reference/component-styles.json](../../reference/component-styles.json) for built-ins and keep this file for the app's own components.
 - `editorDefaultValue` only pre-fills the editor — it is not a runtime fallback. A page that never sets the prop does not get this value at runtime.
 - Adding a prop here does not create behaviour; the component must already support it.
 - Creating the file is not enough — it must be selected in App Settings → General → Component List.

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/knowledge/appSettings/container-services-file.md

@@ -30,7 +30,7 @@ if (typeof exports === 'object' && typeof module === 'object') {
 | Hook | Purpose |
 |---|---|
 | `getURL(url, mode)` | Resolve the final URL for a call. `mode` is `"ui"` or `"service"`. The place to do environment-based domains and proxying. |
-| `hostTriggerCb(functionName, params, pageNameArray)` | Invoke a function on the host. |
+| `hostTriggerCb(functionName, params, pageNameArray)` | Invoke a function on the host. This is what backs `quick.Quick.host.trigger` — deprecated in favour of Container Configuration and `quick.container`, but still needed by the pages that call it. |
 | `getPlateauIAM()` | The host's IAM object. |
 | `authenticatedCb()` | Whether the user is authenticated. |
 | `userContextCb()` / `customerContextCb()` | Current user / customer context. |
@@ -57,9 +57,9 @@ Two different things share the word "container":
 | | |
 |---|---|
 | **Container Services File** *(this doc)* | A JS file of low-level host callbacks the **runtime** calls. Selected in App Settings → General. |
-| **Container Configuration** | An editor where you declare the host functions a miniapp may call, with parameters, return types and mock data. Those become `quick.container.yourFunction()` in page code. Created from **+ Add New → Container Configuration**. |
+| **Container Configuration** | A separate model — *not* a setting file — where you declare the host functions the app may call, with parameters, return types and mock data. Those become `quick.container.yourFunction()` in page code. Created from **+ Add New → Application Configuration → Container Configuration**, or from the CLI as a `.container` file. |
 
-If the task is "call a function on the superapp from a page", that is `quick.container.*` and Container Configuration — not this file.
+If the task is "call a function on the host from a page", that is `quick.container.*` and Container Configuration — not this file.
 
 ## Rules that prevent the common failures
 

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

@@ -57,7 +57,28 @@ Pick the `T` from [reference/component-catalog.md](../reference/component-catalo
 ```
 Open: `components.dlgDetail.qValue = true;`. Add `Render:true`+`eager:true` to touch inner components before opening.
 
-## Select / Combobox / Autocomplete
+## Tabs (VTab + VTabItem sibling pairs)
+```json
+{ "T": "VTabs", "P": { "ID": { "H": "tabsMain", "T": "prop" } },
+  "E": {}, "C": { "default": { "c": [
+    { "T": "VTab", "P": { "ID": { "H": "tabGeneral", "T": "prop" } }, "E": {},
+      "C": { "default": { "c": [ /* QLabel 'General' */ ], "cType": "slot" } },
+      "O": { "cType": "slot" }, "_Editor": { "eID": "tabGeneral" } },
+    { "T": "VTabItem", "P": { "ID": { "H": "tabItemGeneral", "T": "prop" } }, "E": {},
+      "C": { "default": { "c": [ /* VContainer > VRow > VCol > content */ ], "cType": "slot" } },
+      "O": { "cType": "slot" }, "_Editor": { "eID": "tabItemGeneral" } }
+    /* , VTab 'Details', VTabItem 'Details', … */
+  ], "cType": "slot" } },
+  "O": { "cType": "slot" }, "_Editor": { "eID": "tabsMain" } }
+```
+- `VTab` and `VTabItem` are **siblings** in `VTabs.C.default.c`, ordered as header/panel pairs: `VTab₁, VTabItem₁, VTab₂, VTabItem₂, …`. `VTabItem` is **never** a child of `VTab`.
+- Every `VTab` has exactly one `VTabItem` in the same group — same count, same order.
+- `VTab` holds only the visible label (a child `QLabel`). `VTabItem` holds that tab's page content.
+- Panel content: `VTabItem > VContainer > VRow > VCol > content`. Don't put content directly in `VTabItem`.
+- Put the `VTabItem`s directly in `VTabs`, paired with their `VTab`s.
+- The bundled examples show the pairing correctly but put a bare `VBtn` (or no `VCol`) in the panel — that's a minimal demo, not the content pattern.
+
+## Select / Autocomplete
 ```json
 "items": { "H": "[{text='Istanbul', value=1}, {text='Ankara', value=2}]", "T": "prop" }
 ```
@@ -66,19 +87,6 @@ For service data prefer raw items + `itemText`/`itemValue`/`returnObject:true`.
 ## Pagination
 `length`/`totalVisible` are string values; `input` handler starts with `quick.this.qValue = number;` (`"P":"number:number"`).
 
-## Charts (Bar / Line / Doughnut only)
-```json
-{ "T": "Bar", "P": { "ID": { "H": "barChart", "T": "prop" },
-    "labels": { "H": "['Jan','Feb','Mar']", "T": "prop" },
-    "data": { "H": "[12,19,3]", "T": "prop" },
-    "label": { "H": "'Sales'", "T": "prop" },
-    "backgroundColor": { "H": "['rgba(54,162,235,0.4)']", "T": "prop" },
-    "width": { "H": "'32vw'", "T": "prop" }, "height": { "H": "'40vh'", "T": "prop" } },
-  "E": {}, "C": {}, "O": { "cType": "slot" }, "_Editor": { "eID": "barChart" } }
-```
-- `labels`=array, `label`=string. No `visible` prop (wrap in a `VCol`).
-- Runtime update: mutate `components.barChart.data` then `(<any>components.barChart).update()`. Use `Doughnut` + `cutoutPercentage:0` for a pie.
-
 ## Block Component (embedding another qjson page)
 Place at `pJson` root level — **not** inside VContainer. Minimal node; no Ghost child, no `dynProps`.
 ```json

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

@@ -61,7 +61,7 @@ The Studio editor enforces these on drag-drop (source: component extensions `acc
 - **`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.
+- 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; no `VTabsItems`; see [components.md](components.md) Tabs).
 - 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`.

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

@@ -53,7 +53,7 @@ The Studio editor enforces these on drag-drop (source: component extensions `acc
 - **`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.
+- 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`.

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/reference/component-catalog-legacy.md

@@ -98,6 +98,10 @@ The icon name goes in `text` with **`T: "text"`**. PType `text` renders as slot
 - Add `Render:true` + `eager:true` to access inner components before opening.
 - Non-persistent dialogs: handle `click:outside` to set `qValue=false`.
 
+### `VTabs` / `VTab` / `VTabItem`
+- `VTab` and `VTabItem` are **siblings** in `VTabs`' `default` slot, one `VTabItem` per `VTab`, ordered as pairs. `VTabItem` is never inside `VTab`.
+- `VTab` = label (`QLabel`); `VTabItem` = content, wrapped as `VTabItem > VContainer > VRow > VCol > content`. Full pattern: [../knowledge/components.md](../knowledge/components.md).
+
 ### `VPagination`
 - `length`/`totalVisible` are string values; `input` handler's first line: `quick.this.qValue = number;` (param `"P":"number:number"`).
 

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/reference/component-catalog.md

@@ -113,6 +113,10 @@ The icon name goes in `text` with **`T: "text"`**. PType `text` renders as slot
 - Add `Render:true` + `eager:true` to access inner components before opening.
 - Non-persistent dialogs: handle `click:outside` to set `qValue=false`.
 
+### `VTabs` / `VTab` / `VTabItem`
+- `VTab` and `VTabItem` are **siblings** in `VTabs`' `default` slot, one `VTabItem` per `VTab`, ordered as pairs. `VTabItem` is never inside `VTab`. 
+- `VTab` = label (`QLabel`); `VTabItem` = content, wrapped as `VTabItem > VContainer > VRow > VCol > content`. Full pattern: [../knowledge/components.md](../knowledge/components.md).
+
 ### `VPagination`
 - `length`/`totalVisible` are string values; `input` handler's first line: `quick.this.qValue = number;` (param `"P":"number:number"`).
 

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/reference/component-index.json

@@ -307,7 +307,7 @@
       "VRow accepts only VCol children.",
       "VFooter accepts only VContainer children.",
       "Canonical page structure: VContainer > VRow > VCol > content. Other components have no hard parent/child restriction, but follow the grid for layout.",
-      "Some container components (VTabs/VStepper/VExpansionPanels/VCarousel) use fixed child generators in the editor; place their documented item components (VTab/VTabItem, VStepperStep/VStepperContent, VExpansionPanel, VCarouselItem) inside them.",
+      "Some container components (VTabs/VStepper/VExpansionPanels/VCarousel) use fixed child generators in the editor; place their documented item components (VTab/VTabItem, VStepperStep/VStepperContent, VExpansionPanel, VCarouselItem) inside them. VTab and VTabItem are sibling pairs in VTabs (VTab1, VTabItem1, VTab2, VTabItem2, ...), never nested; panel content is VTabItem > VContainer > VRow > VCol > content.",
       "NEW PAGES ONLY: a newly-created page must wrap all UI content in a single top-level VContainer (the content root); the only allowed non-VContainer top-level pJson siblings are the non-visual Messaging event hub and an optional service component. Do NOT retrofit a VContainer root onto an existing page unless the user explicitly asks (existing pages may legitimately root on VAppBar, VDataTable, etc.). See newPageContentRoot below and s-track.md rule S4."
     ],
     "newPageContentRoot": {

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/reference/layout-system.md

@@ -77,7 +77,7 @@ These are the editor's own drop rules (`acceptableParentComps`/`acceptableChildC
 | `VRow` accepts only `VCol` children | `VRowExtension.acceptableChildComps={VCol}` |
 | `VFooter` accepts only `VContainer` children | `VFooterExtension.acceptableChildComps={VContainer}` |
 
-Other components have no hard accept-list, but container components with item parts use fixed child generators (place `VTab`/`VTabItem` in `VTabs`, `VStepperStep`/`VStepperContent` in `VStepper`, etc.). Canonical page wrapper: `VContainer > VRow > VCol > content`. For a **newly-created page this `VContainer` content root is required**: wrap all UI content in a single top-level `VContainer`, with only `Messaging` and an optional service component as other top-level `pJson` siblings. This is a **new-page rule only** — do **not** retrofit a `VContainer` root onto an existing page unless the user explicitly asks (existing pages may legitimately root on `VAppBar`, `VDataTable`, etc.). Machine-readable: [component-index.json](component-index.json) `containmentRules`.
+Other components have no hard accept-list, but container components with item parts use fixed child generators (place `VTab`/`VTabItem` as **sibling pairs** in `VTabs` — see [../knowledge/components.md](../knowledge/components.md) Tabs; `VStepperStep`/`VStepperContent` in `VStepper`, etc.). Canonical page wrapper: `VContainer > VRow > VCol > content`. For a **newly-created page this `VContainer` content root is required**: wrap all UI content in a single top-level `VContainer`, with only `Messaging` and an optional service component as other top-level `pJson` siblings. This is a **new-page rule only** — do **not** retrofit a `VContainer` root onto an existing page unless the user explicitly asks (existing pages may legitimately root on `VAppBar`, `VDataTable`, etc.). Machine-readable: [component-index.json](component-index.json) `containmentRules`.
 
 ## 5. The grid: VContainer → VRow → VCol
 

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/reference/styling-system.md

@@ -148,7 +148,7 @@ Reusable named styles created from the Style tab; the node references them via `
 | `VRow` accepts only `VCol` children | `VRowExtension.acceptableChildComps={VCol}` |
 | `VFooter` accepts only `VContainer` children | `VFooterExtension.acceptableChildComps={VContainer}` |
 
-Other components have no hard accept-list, but container components with item parts use fixed child generators (place `VTab`/`VTabItem` in `VTabs`, `VStepperStep`/`VStepperContent` in `VStepper`, etc.). Canonical page wrapper: `VContainer > VRow > VCol > content`. For a **newly-created page this `VContainer` content root is required**: wrap all UI content in a single top-level `VContainer`, with only `Messaging` and an optional service component as other top-level `pJson` siblings. This is a **new-page rule only** — do **not** retrofit a `VContainer` root onto an existing page unless the user explicitly asks. Machine-readable: [component-index.json](component-index.json) `containmentRules`.
+Other components have no hard accept-list, but container components with item parts use fixed child generators (place `VTab`/`VTabItem` as **sibling pairs** in `VTabs` — see [../knowledge/components.md](../knowledge/components.md) Tabs; `VStepperStep`/`VStepperContent` in `VStepper`, etc.). Canonical page wrapper: `VContainer > VRow > VCol > content`. For a **newly-created page this `VContainer` content root is required**: wrap all UI content in a single top-level `VContainer`, with only `Messaging` and an optional service component as other top-level `pJson` siblings. This is a **new-page rule only** — do **not** retrofit a `VContainer` root onto an existing page unless the user explicitly asks. Machine-readable: [component-index.json](component-index.json) `containmentRules`.
 
 ## 8. Breakpoint device ranges (shared)
 

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

@@ -16,6 +16,11 @@ Quick has **two style systems**, and they are not interchangeable on a page. Dec
 
 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.
 
+> **On Mobile, two things above work differently.** Mobile does not parse or apply `O.layout`, so legacy css declarations simply **have no effect** there — the page still renders, it is just not styled by them, and Studio's editor injects some of these fragments on its own.
+>
+> - **`opt.V >= 2.0` with leftover `O.layout` is normal on Mobile — do NOT flag it as a mismatch.** It is an ordinary `S` page. Never read `O.layout` to work out how it currently looks, author its design in `S`, and **strip its `O.layout` (`dOpt`/`class`) when you edit it**, so the page comes out clean.
+> - **`opt.V` missing or `< 2.0` on Mobile: stop.** That page is legacy and **cannot be edited from a mobile workspace** — neither style system can author it there. Tell the user and make no changes. 
+
 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)

package/dist/studio-cli/kits/wf-app-kit/.ai-kit/ui-kit/knowledge/appSettings/component-list.md

@@ -4,7 +4,7 @@ Declares, per component type, **which props exist**, their types, their allowed
 
 Selected in **App Settings → General → Component List** → [appSettings.md](appSettings.md).
 
-For the built-in components and their `S` params, use the kit's own reference — [../components.md](../components.md) and [../reference/component-styles.json](../reference/component-styles.json). The Component List is the **app-level** catalog: where a project describes its domain components and any extra props.
+For the built-in components and their `S` params, use the kit's own reference — [../components.md](../components.md) and [../reference/component-styles.json](../../reference/component-styles.json). The Component List is the **app-level** catalog: where a project describes its domain components and any extra props.
 
 ## Shape
 
@@ -57,7 +57,7 @@ It describes props; it does not implement components. A component still has to e
 ## Rules that prevent the common failures
 
 - Quote values as you would in a prop `H` — strings single-quoted inside the string, numbers and booleans bare.
-- Don't duplicate the built-in registry here; consult [../reference/component-styles.json](../reference/component-styles.json) for built-ins and keep this file for the app's own components.
+- Don't duplicate the built-in registry here; consult [../reference/component-styles.json](../../reference/component-styles.json) for built-ins and keep this file for the app's own components.
 - `editorDefaultValue` only pre-fills the editor — it is not a runtime fallback. A page that never sets the prop does not get this value at runtime.
 - Adding a prop here does not create behaviour; the component must already support it.
 - Creating the file is not enough — it must be selected in App Settings → General → Component List.

package/dist/studio-cli/kits/wf-app-kit/.ai-kit/ui-kit/knowledge/appSettings/container-services-file.md

@@ -30,7 +30,7 @@ if (typeof exports === 'object' && typeof module === 'object') {
 | Hook | Purpose |
 |---|---|
 | `getURL(url, mode)` | Resolve the final URL for a call. `mode` is `"ui"` or `"service"`. The place to do environment-based domains and proxying. |
-| `hostTriggerCb(functionName, params, pageNameArray)` | Invoke a function on the host. |
+| `hostTriggerCb(functionName, params, pageNameArray)` | Invoke a function on the host. This is what backs `quick.Quick.host.trigger` — deprecated in favour of Container Configuration and `quick.container`, but still needed by the pages that call it. |
 | `getPlateauIAM()` | The host's IAM object. |
 | `authenticatedCb()` | Whether the user is authenticated. |
 | `userContextCb()` / `customerContextCb()` | Current user / customer context. |
@@ -57,9 +57,9 @@ Two different things share the word "container":
 | | |
 |---|---|
 | **Container Services File** *(this doc)* | A JS file of low-level host callbacks the **runtime** calls. Selected in App Settings → General. |
-| **Container Configuration** | An editor where you declare the host functions a miniapp may call, with parameters, return types and mock data. Those become `quick.container.yourFunction()` in page code. Created from **+ Add New → Container Configuration**. |
+| **Container Configuration** | A separate model — *not* a setting file — where you declare the host functions the app may call, with parameters, return types and mock data. Those become `quick.container.yourFunction()` in page code. Created from **+ Add New → Application Configuration → Container Configuration**, or from the CLI as a `.container` file. |
 
-If the task is "call a function on the superapp from a page", that is `quick.container.*` and Container Configuration — not this file.
+If the task is "call a function on the host from a page", that is `quick.container.*` and Container Configuration — not this file.
 
 ## Rules that prevent the common failures