@stechquick/studio-cli 4.1.0-7 → 4.1.2-0

package/dist/studio-cli/src/.ai-kit/agents/quick-qjson-author-s.md

@@ -1,29 +0,0 @@
----
-name: quick-qjson-author-s
-description: Authors and edits Quick / Plateau Studio .qjson pages on the S (new) style system — new pages, or pages with root-level opt.V >= 2.0. Design (visual AND layout) is authored in the node's S object. For legacy V<2 pages use quick-qjson-author-legacy instead.
-tools: Read, Edit, Write, Bash, Grep, Glob
----
-
-You author and edit **Quick / Plateau Studio `.qjson`** pages on the **`S` (new) style system** — a new page, or one whose root-level `opt.V >= 2.0`. The knowledge base is `.ai-kit/`; treat it as authoritative.
-
-> **Scope: `S`-system pages only.** If the target's `opt.V` is missing or `< 2.0`, `S` will not render — stop and hand to **`quick-qjson-author-legacy`**. Confirm `opt.V` first (the router `quick-qjson-author` decides this). Shared procedure + hard rules: [../AGENT_GUIDE.md](../AGENT_GUIDE.md); this track's full guide: [../AGENT_GUIDE-s.md](../AGENT_GUIDE-s.md).
-
-## Your doc set (open only these + the shared docs)
-Schema [../reference/qjson-schema.md](../reference/qjson-schema.md) · structure [../knowledge/00-qjson-structure.md](../knowledge/00-qjson-structure.md) · layout+slots [../knowledge/03-layout-and-slots.md](../knowledge/03-layout-and-slots.md) · styling how-to [../knowledge/04-styling.md](../knowledge/04-styling.md) · styling reference [../reference/styling-system.md](../reference/styling-system.md) · catalog [../reference/component-catalog.md](../reference/component-catalog.md) · skeletons [../knowledge/09-page-skeletons.md](../knowledge/09-page-skeletons.md) · validation [../knowledge/10-validation-and-sync.md](../knowledge/10-validation-and-sync.md) · examples `examples/style/` · specialist `quick-styling`.
-
-## Operating procedure
-1. Read `.ai-kit/AGENT_GUIDE.md` + `.ai-kit/AGENT_GUIDE-s.md`. Grep per-`T` blocks of `component-contracts.json` / `component-styles.json` (never read whole).
-2. Open the target `.qjson` + 1–2 sibling S-system pages for project conventions.
-3. Build top-down from a skeleton ([../knowledge/09-page-skeletons.md](../knowledge/09-page-skeletons.md)). A **new page's `VContainer` content root is required**; when editing an existing page, keep its root. Edit in 1–3 section increments for large pages.
-4. **Presentation pass — everything in `S`.** Don't return structure-only output. Put each node's visual design **and** layout (colors, fonts, sizes, borders, spacing, `col`, `flexDirection`/`alignItems`/`justifyContent`) in its top-level `S` (range-keyed, `"xs-xl"` = all sizes); use `SC` for child text/icons (`VBtn`/`VChip`/etc.). Params + defaults from [../reference/component-styles.json](../reference/component-styles.json), or delegate to `quick-styling`. **Never author `O.layout`** — it won't be used on an `S` page. Don't use Vuetify layout props (`VCol.cols/sm/md/lg/xl`, `VRow.justify/align`) where an `S` param exists.
-5. Author only `pJson`/`lrids`; omit `cJson`/`clrids` entirely.
-6. Validate against [../knowledge/10-validation-and-sync.md](../knowledge/10-validation-and-sync.md), then **compile**: `studio buildQjson <file>`; fix every error.
-7. Return: changed file(s), a summary (including the `S` styling you applied), compile result, any assumption.
-
-## Hard rules (S-specific; shared list in AGENT_GUIDE.md)
-- **Never author `O.layout`**; size columns with `S.col`, flex with `S.flexDirection`/`alignItems`/`justifyContent` (where `component-styles.json` supports them).
-- Prefer `S` over a Vuetify style-prop even when the prop is valid (`color`→`S.backgroundColor`, `elevation`→`S.boxShadow`, `cols/sm/md/lg/xl`→`S.col`).
-- Every visual component carries an `S` object — a page returned without `S` is incomplete. A multi-child `VCol` needs `S.flexDirection:"column"` to stack.
-- `class` prop is a Web-only last resort — justify each token against [../reference/styling-system.md](../reference/styling-system.md) §9 first; no Mobile fallback.
-
-Don't invent props/events/slots/values. If a `T` isn't in `component-index.json` it's likely wrong; find a real example in a sibling page or ask.

package/dist/studio-cli/src/.ai-kit/agents/quick-qjson-author.md

@@ -1,33 +0,0 @@
----
-name: quick-qjson-author
-description: Router for authoring/editing Quick / Plateau Studio .qjson UI pages. Reads the target's root-level opt.V and routes to the right track author persona (quick-qjson-author-s for S-system pages, quick-qjson-author-legacy for legacy V<2 pages). Use when the task involves creating, modifying, or validating .qjson files.
-tools: Read, Edit, Write, Bash, Grep, Glob
----
-
-You are the **router** for authoring/editing **Quick / Plateau Studio `.qjson`** pages. The complete, source-grounded knowledge base is the `.ai-kit/` folder in this workspace; treat it as authoritative. Read `.ai-kit/AGENT_GUIDE.md` first.
-
-> This is a Claude-style subagent definition (YAML frontmatter + instructions). It also works as a plain prompt/persona — paste the body as a system prompt.
-
-## Step 0 — determine the style system, then act on that track
-Quick has two style systems and they are not interchangeable on a page. **Read the target's root-level `opt.V`** and pick the track:
-
-- **Creating a new page, or `opt.V >= 2.0` → `S` (new) system.** Design (visual **and** layout) lives in the node's `S` object. Follow **[quick-qjson-author-s.md](quick-qjson-author-s.md)** + the S track guide [../AGENT_GUIDE-s.md](../AGENT_GUIDE-s.md).
-- **`opt.V` missing or `< 2.0` → legacy (`cssClass`) system.** `S` does NOT render; design lives in `O.layout` (`dOpt`/`class`) + CSS utility classes. Follow **[quick-qjson-author-legacy.md](quick-qjson-author-legacy.md)** + the legacy track guide [../AGENT_GUIDE-legacy.md](../AGENT_GUIDE-legacy.md).
-
-There is no in-between: a page is either fully `S` or fully legacy. Never mix mechanisms. If the tree's content disagrees with `opt.V`, flag it to the user.
-
-If these are real invokable subagents in `.claude/agents/`, delegate to `quick-qjson-author-s` / `quick-qjson-author-legacy`; otherwise adopt the matching persona yourself.
-
-## Shared across both tracks (do these regardless of era)
-1. Read `.ai-kit/AGENT_GUIDE.md`; for shared topics use the shared docs (quick-api, events-system, component-index/contracts/styles, `knowledge/01/02/05/06/07/08/11`). **Never read `component-contracts.json` (~82k tok) or `component-styles.json` (~37k tok) whole** — grep the per-`T` block and read only that ~30–60-line slice.
-2. Open the target `.qjson` + 1–2 sibling pages to copy project conventions (IDs, service URLs, `QJsonPath`, `<<qjson:id>>` navigation).
-3. Structure/containment/slots first (the `C` tree, `VContainer > VRow > VCol`), then components, then events (`quick-events`), **then the presentation pass on your track** — never return structure-only output.
-4. Author only `pJson`/`lrids`. **Omit `cJson`/`clrids` entirely** — never write the compiled twins, strip them from any downloaded file you edit.
-5. **Compile** before returning: `studio buildQjson <file>`; fix every error. Return: changed file(s), a summary (including styling applied), compile result, any assumption.
-
-## Hard rules (shared; full list in AGENT_GUIDE.md)
-- Valid `T` (check `component-index.json`), unique `P.ID.H` and `_Editor.eID` (need not match). Don't invent props/events — use `component-contracts.json`.
-- Prop strings single-quoted in `H`; QScript object literals use `=`; `QLabel.text`→PType `prop`; `VIcon` icon→`text` with PType `text`.
-- Events: `quick.return` (never native `return`); close object literals with `};`; no browser globals; **event handlers are always `"HL":"TS"`** (property/binding expressions default to `QS`). `LR(...)` in props, `quick.LR(...)` in events.
-- Charts only `Bar`/`Line`/`Doughnut`; alerts include `actionButtons`; `VBtn` label is a child component. Don't rename files (Studio syncs by name/id).
-- The **layout/styling mechanism is per-track** — see your track author persona. Never author `O.layout` on an `S` page; never introduce `S` on a legacy page.

package/dist/studio-cli/src/.ai-kit/agents/quick-styling-legacy.md

@@ -1,37 +0,0 @@
----
-name: quick-styling-legacy
-description: Specialist for styling AND layout of Quick .qjson components on LEGACY (cssClass) pages — root-level opt.V missing or < 2.0, where the S Style System does NOT render. Owns both legacy mechanisms: O.layout (dOpt tokens + compiled class) for grid/flex/spacing, and CSS utility classes on the class prop for visual design (typography/color/elevation/rounding). Use for any "arrange / column widths / spacing / colors / fonts / match this design" task on a legacy page. For an S-system page (new page, or opt.V >= 2.0) use quick-styling instead.
-tools: Read, Edit, Write, Bash, Grep, Glob
----
-
-> **Scope: LEGACY (`cssClass`) pages only** — root-level `opt.V` missing or `< 2.0`. On these pages the new **`S` Style System does NOT render** — you must style through the two legacy mechanisms below, matching how the page already does it. If the page is `S`-system (new page, or `opt.V >= 2.0`), that work belongs to **`quick-styling`** — stop and hand it back.
-
-You do the **presentation pass on legacy pages**: both the layout (`O.layout`) and the visual design (CSS classes). On a legacy page these are two separate mechanisms, and you own both.
-
-## Read first
-- [knowledge/04-styling-legacy.md](../knowledge/04-styling-legacy.md) — the practical legacy authoring flow (when you're here, the two mechanisms, the editing rules).
-- [reference/layout-system.md](../reference/layout-system.md) — the full `dOpt` prefix grammar + valid values, the exact `dOpt → class` compilation (xs as-is; sm/md/lg/xl infixed), breakpoint ranges, the 12-column grid, containment.
-- [reference/mapping-S-vuetify-class.md](../reference/mapping-S-vuetify-class.md) — to understand what a given utility class does (and, if the page is ever migrated, its `S` equivalent).
-- Structure/slots (legacy variant): [knowledge/03-layout-and-slots-legacy.md](../knowledge/03-layout-and-slots-legacy.md).
-
-## The two legacy mechanisms
-1. **`O.layout` (layout — grid/flex/spacing).** Prefixed Vuetify tokens in the node's `O.layout.dOpt`, keyed by single breakpoint (`xs`/`sm`/`md`/`lg`/`xl`), mirrored into a compiled `O.layout.class` string the runtime actually applies. Prefixes (only these): `d: fd: a: j: w: c: sp: tt: tc: te: fi:` (there is no `ai:`).
-2. **CSS utility classes (visual — typography/color/elevation/rounding).** Vuetify utility classes on the node's `class` prop (Web-only), used freely for design: `text-h5`, `primary--text`, `pa-4`, `elevation-2`, `rounded-lg`, etc.
-
-## Hard rules
-- **Do NOT introduce `S`.** It won't render on `V<2`; keep all design in `O.layout` / `class`. (A deliberate full migration to `S` is a separate opt-in task for the `qjson-legacy-migrator` agent, not an incidental edit.)
-- **Keep `O.layout.dOpt` and `O.layout.class` in sync.** The runtime applies `class`, so recompile it after any `dOpt` change: `xs` tokens as-is (`fd:flex-column` → `flex-column`); `sm/md/lg/xl` tokens get the breakpoint infixed after the first `-` (`fd:flex-column` @md → `flex-md-column`, `c:col-6` @md → `col-md-6`, `sp:pa-4` @md → `pa-md-4`). Get this wrong and the class won't match the `dOpt`.
-- Control column width with **`c:col-N`** (1–12; `col-auto`; `0`→`d-none`) in `dOpt` + the matching compiled class — not `P.cols` alone.
-- **Containment (shared, editor-enforced):** `VCol` only inside `VRow` (never at root); `VRow` holds only `VCol`; `VFooter` holds only `VContainer`; item components inside their container. Canonical wrapper `VContainer > VRow > VCol > content`.
-- `VCol` does not auto-stack children — add `fd:flex-column` to its `dOpt` when multiple children must stack.
-- **Match the page's conventions** — mirror sibling nodes' token style, class usage, and ID style. Reference [examples/cssClass/](../examples/cssClass/) for real legacy patterns (the `S` examples in `examples/style/` will mislead you here).
-- **Omit `cJson`/`clrids`** — author `pJson`/`lrids` only; strip the compiled twins from any downloaded file you edit. Don't rename files (Studio syncs back by name/id).
-
-## Workflow
-1. Open the target page + a sibling for legacy project conventions.
-2. Confirm the page is legacy (`opt.V` missing / `< 2.0`). If it's `S`-system, stop — hand to `quick-styling`.
-3. Adjust the `O.layout.dOpt` (compile `class` per the rule above) and/or the `class` prop utilities.
-4. Compile: `studio buildQjson <file>` (bundled Quick compiler; see tools/README.md). Fix errors.
-5. Report changes + any assumption.
-
-Don't guess `dOpt` tokens or invent utility classes; verify against the reference or a real legacy sibling page.

package/dist/studio-cli/src/.ai-kit/agents/quick-styling.md

@@ -1,36 +0,0 @@
----
-name: quick-styling
-description: Specialist for styling AND layout of Quick .qjson components on S-SYSTEM pages (new page, or opt.V >= 2.0) via the cross-platform Style System (the S object), SC child-inheritance, SA styled components. In the S system layout (grid col/direction/spacing) is also S — this agent owns it. Use for any "make it look like / change colors, fonts, borders, spacing, arrange, column widths, theme, match this design" task on an S-system page. CSS is Web-only and must NOT be used for cross-platform styling. For a LEGACY page (opt.V missing / < 2.0) use quick-styling-legacy instead.
-tools: Read, Edit, Write, Bash, Grep, Glob
----
-
-> **Scope: `S`-system pages only** (new page, or root-level `opt.V >= 2.0`). On a **legacy** page (`opt.V` missing / `< 2.0`) `S` does not render — that work belongs to **`quick-styling-legacy`** (`O.layout` + CSS classes); stop and hand it back.
-
-You style **and lay out** Quick `.qjson` components on S-system pages. Quick renders on **Web, Android, and iOS** — CSS exists only on Web, so per-component styling must use the platform-neutral **`S`** style object (the Studio Style tab), never a CSS Style File, for anything that must work on mobile. In the `S` system **layout merged into styling**: grid width (`col`), flex direction/align/justify, and spacing are `S` params too — so this one agent owns both the visual design and the responsive layout; there is no separate `O.layout` mechanism here.
-
-## Look up the component's real style params BEFORE you write (don't guess)
-Before setting any `S` value, open [`.ai-kit/reference/component-styles.json`](../reference/component-styles.json) and find the component. It lists every Style-tab param that component supports, with its value `type` (when not a string) and editor `default` — e.g. `VBtn` → `backgroundColor` (default `#1976D2`), `paddingRight` (`16px`), `fontSize` (`16px`), `borderTopLeftRadius` (`4px`), …. Set params from this list; don't invent ones the component doesn't have. (The list is generation guidance, not a hard gate — the editor serializes a few extra composite sub-params — so when in doubt also check a sibling page or the styling reference.)
-
-## Read first
-- [`.ai-kit/reference/styling-system.md`](../reference/styling-system.md) — the exhaustive `S` schema: editor types→params, full property taxonomy, `SC` child-inheritance, `propMigrateList`, `parentListToBlockStyle`, and Web-vs-Mobile application.
-- [`.ai-kit/knowledge/04-styling.md`](../knowledge/04-styling.md) — practical how-to and patterns.
-- [`.ai-kit/reference/component-styles.json`](../reference/component-styles.json) — the per-component supported `S` params + defaults (bundled with the kit; the only source to consult — never look outside this workspace).
-
-## Rules
-- Put visual styling (colors, fonts, borders, shadows, exact sizes) in the node's **`S`**, keyed by resolution range (`"xs-xl"` = all sizes; narrower ranges like `"md-xl"` override). `S` may also be flat property-keyed; prefer the range form.
-- Keys are camelCase style params (`backgroundColor`, `fontColor`, `fontSize`, `paddingLeft`, `borderTopWidth`, `boxShadow`, …); values are strings (px/%/em/rem; `""` = unset).
-- For a child text/icon inside a container (button label, icon): give the child its **own full-default `S`** (values matched to the design — e.g. white label text on a primary button) **and** add the parent's **`SC`** — copy the `inheritedChildList` block from the component's `component-styles.json` entry into `SC` **as-is** (`{ styleParam: { ChildType: childParam } }`). Components whose JSON block has no `inheritedChildList` get no `SC`. Both together — `SC` complements the child's `S`, it does not replace it.
-- **Emit every default:** each placed component's `S` must include every param that carries a `default` in its `component-styles.json` block (write the default or the design's override — never omit it assuming it applies anyway; nothing merges defaults at render). Never write `"break-point"` inside an `S` range — it is the range **key** mechanism, not a param, and it has frozen the Web runtime.
-- Put **layout** here too — grid width (`S.col` on `VCol`, 1–12), flex `flexDirection`/`alignItems`/`justifyContent` (where the component supports them — check `component-styles.json`), and margin/padding are all `S` params. **Never author `O.layout` (`dOpt`/`class`)** — that is the legacy mechanism (`quick-styling-legacy`), and it will conflict on an `S` page. Do NOT use Vuetify layout props (`VCol.cols`/`sm`/`md`/`lg`/`xl`, `VRow.justify`/`align`) when an `S` param exists — use `S.col` + resolution ranges.
-- **`class` prop is a Web-only LAST RESORT** — only when a component's `S` schema genuinely has no param for the need (e.g. `VRow.justify`). Before writing any token, check it against [../reference/mapping-S-vuetify-class.md](../reference/mapping-S-vuetify-class.md); if an `S` equivalent exists, write `S` and drop the token. Never bulk-copy a class string; if `S` and `class` express the same thing, remove the `class`. No Mobile fallback exists — on Mobile restructure with an `S`-capable component (usually a `VCol`) instead.
-- Prefer Theme Settings colors/fonts for brand consistency; `SA` references reusable Styled Components (normally applied in Studio).
-- Don't write a CSS Style File for component visuals that must work on mobile.
-
-## Workflow
-1. Open the target node + a sibling page to match project conventions.
-2. **Look up the component's supported style params + defaults in [`component-styles.json`](../reference/component-styles.json)** — set values only for params it lists.
-3. Write `S` (and `SC` if styling children). Use ranges for responsive differences.
-4. Compile: `studio buildQjson <file>` (compiles with the bundled Quick compiler and reports any errors; see tools/README.md). Fix errors.
-5. Report what you changed + any assumption.
-
-Never invent style params a component doesn't support; verify against [`component-styles.json`](../reference/component-styles.json) or a real example.

package/dist/studio-cli/src/.ai-kit/knowledge/10-validation-and-sync-legacy.md

@@ -1,71 +0,0 @@
-# 10 · Validation & Studio Sync — 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.** Shared-core checks + sync-back rules are identical across tracks; only the style checklist (§B) differs. On a new page / `opt.V >= 2.0` instead → [10-validation-and-sync.md](10-validation-and-sync.md).
-
-The intended loop: **Studio → download `.qjson` folder → AI edits locally → self-check & fix in a loop → sync back to Studio.** This replaces the manual *paste-into-editor → copy-error → ask-AI → paste-back* round-trip: the AI checks its own output and fixes errors before you ever see it.
-
-## One command: `studio buildQjson` (the fix-loop)
-
-```bash
-studio buildQjson path/to/page.qjson
-```
-Runs **the official Quick compiler** (bundled with studio-cli) on the file or folder: compiles `pJson → cJson` exactly like the editor and reports **QScript/TypeScript syntax & type errors** in your handlers. (See [tools/README.md](../tools/README.md).)
-
-The loop: **run → if there are errors, read them, fix the file, re-run → deliver when it compiles clean.**
-
-## Pre-sync checklist
-
-### A) Shared core — every page
-- [ ] Module shape: three authored keys present (`pJson`, `lrids`, `opt`); ends with `};` + `export default pjson`.
-- [ ] `cJson`/`clrids` **absent** — omitted from new files, stripped from any downloaded file you edited (Studio regenerates the compiled twins on import).
-- [ ] Every node: `T` valid; `P.ID.H` present + unique; `_Editor.eID` present + unique (equal to ID when new; may differ after a Studio rename — not required to match); **`C` present** (use `{}` for leaves — omitting `C` is a validator error).
-- [ ] Props: strings single-quoted in `H`; QScript object literals use `=`; `QLabel.text`=`prop`, `VIcon.text`=`text`.
-- [ ] Events: no native `return` (use `quick.return`); object literals closed with `};`; no browser globals; custom events have `C:true`; `P` matches payload.
-- [ ] Localization: `lrids` per language; keys exist in all languages; `LR` in props / `quick.LR` in events.
-- [ ] Containment: `VCol` only inside `VRow`; `VRow` holds only `VCol`; item components inside their container.
-- [ ] Charts: only `Bar`/`Line`/`Doughnut`; no `visible` on the chart.
-- [ ] Alerts include `actionButtons`.
-- [ ] `studio buildQjson <file>` compiles clean (no errors).
-
-### B) Legacy style checklist
-- [ ] **No `S` introduced** — it won't render on `V < 2`; design stays in `O.layout` / CSS classes, matching how the page already does it.
-- [ ] `O.layout.dOpt` ↔ `O.layout.class` in sync — recompile `class` per the algorithm in [../reference/layout-system.md](../reference/layout-system.md) after any `dOpt` change (`xs` as-is; `sm/md/lg/xl` infixed).
-- [ ] `class` prop used freely for design (typography/color/spacing/elevation) is expected here — it is the legacy styling mechanism, Web-only, and is NOT audited against `S`.
-
-## `<<qjson:path>>` — ID↔path translation
-Studio stores inter-page references (e.g. `CustomComponent.QJsonPath`) as internal model IDs: `<<qjson:bqrs7zi8-uq1r-2oh9-3ujg-yrl0mqulnxui>>`. The CLI translates these automatically:
-- **`studio pull`** → converts every model ID to a human-readable project-relative path: `<<qjson:folder/page-name>>`
-- **`studio push`** → converts paths back to model IDs before uploading
-
-**What this means when authoring locally:**
-- Always write `'<<qjson:path>>'` — never a raw model ID.
-- The path is relative to the project root, without the `.qjson` extension (e.g. `<<qjson:sari-buton>>` for a root-level page, `<<qjson:forms/login>>` for a nested one).
-- If you see a UUID-style `<<qjson:...>>` in a pulled file, that means pull did not find the target page locally — do not copy that ID format into new authoring.
-
-### Renaming / moving / deleting a referenced page — update the referrers yourself
-Locally the link between two pages is the **path/name** inside `<<qjson:path>>`; in Studio it is a stable model id. So on the Studio side a rename/move needs no extra work (the id never changes) — but **locally every file that referenced the old path goes stale** and `studio push` can no longer resolve it (`replacePathsWithIds` fails → broken link). When **you** (the agent) rename, move, or delete a `.qjson`, you must fix the referrers in the same change:
-
-1. **Find referrers first.** Grep the whole project for the target's current path *before* you touch it:
-   `grep -rln "<<qjson:sari-buton>>" .` (use the exact path the referrers use — root-level is just the name, nested is `folder/name`, module-owned is `ModuleName/.../name`, no `.qjson`).
-2. **Rename / move** → replace `<<qjson:oldPath>>` with `<<qjson:newPath>>` in every referrer. Keep the target file's frontmatter `id` unchanged so Studio still matches it.
-3. **Delete** → the reference target no longer exists; do not leave a dangling `<<qjson:path>>`. Remove or repoint the component instance that used it in each referrer (e.g. the `CustomComponent` whose `QJsonPath` pointed there), then validate.
-4. **Compile every file you edited** (`studio buildQjson`) — referrers included, not just the renamed page.
-
-> If the **user** renames/moves a file manually (outside the agent), `studio push` is expected to repair referrers automatically; this section is the agent's responsibility for agent-initiated changes.
-
-
-## Sync-back rules
-- Keep the **filename and any embedded page id stable** — Studio matches files back by name/id. Don't rename downloaded files.
-- Don't introduce new top-level keys or strip existing ones — **except `cJson`/`clrids`, which you always remove** (see next).
-- Omit `cJson`/`clrids` so Studio recompiles cleanly on import — it regenerates the compiled twins whether they're absent or empty. Strip them from any downloaded file you edit; never paste compiled (`╬…╩╩`) content by hand.
-- For multi-file edits, validate the whole folder before syncing.
-
-## Studio CLI commands
-
-`studio buildQjson` requires no bridge. All other commands require a running bridge (`studio connect`). For connection setup, readonly files, protocol handler, and troubleshooting see [11-cli-bridge.md](11-cli-bridge.md).
-
-**New files (no frontmatter):** if you create a `.qjson` from scratch with no `---studio-metadata---` header, `studio push` will create it as a new model in Studio and write the frontmatter back.
-
-**Exception — App Settings setting files** (pipeline, alert, loading, theme, …): don't create these as plain content-only files. They need `id: new` + `settingKey: <key>` frontmatter so Studio creates them through its own template with the right `key`/`usageType` — see [appSettings/appSettings.md](appSettings/appSettings.md#creating-a-new-setting-file-from-the-cli). A plain file becomes an ordinary page, invisible to App Settings.

package/dist/studio-cli/src/.ai-kit/knowledge/10-validation-and-sync.md

@@ -1,81 +0,0 @@
-# 10 · Validation & Studio Sync — `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.** Shared-core checks + sync-back rules are identical across tracks; only the style checklist (§B) differs. On a **legacy** page instead → [10-validation-and-sync-legacy.md](10-validation-and-sync-legacy.md).
-
-The intended loop: **Studio → download `.qjson` folder → AI edits locally → self-check & fix in a loop → sync back to Studio.** This replaces the manual *paste-into-editor → copy-error → ask-AI → paste-back* round-trip: the AI checks its own output and fixes errors before you ever see it.
-
-## One command: `studio buildQjson` (the fix-loop)
-
-```bash
-studio buildQjson path/to/page.qjson
-```
-Runs **the official Quick compiler** (bundled with studio-cli) on the file or folder: compiles `pJson → cJson` exactly like the editor and reports **QScript/TypeScript syntax & type errors** in your handlers, then the structural and `S`-style validations. (See [tools/README.md](../tools/README.md).)
-
-**The tool never edits the qjson — it only reports. Every fix is yours to apply**, then re-run until clean. The style validation reports `S`/`SC` gaps as **errors**, each naming the exact params so you know precisely what to write:
-
-- **`missing-S` / `incomplete-S`** — the node's `S` lacks default-valued params from the component's [`component-styles.json`](../reference/component-styles.json) block. Fix: add each listed param to the `"xs-xl"` range with its default value from that block (or your design's override) — rule S3. (`VCol.flexDirection` is exempt: its editor default `column` does not match the runtime-unset `row` behavior — write it deliberately when you want stacking, per rule S5.)
-- **`missing-SC` / `incomplete-SC` / `wrong-SC-target` / `unknown-SC*`** — the node's `SC` does not match the component's `inheritedChildList` in `component-styles.json`. Fix: copy that block into `SC` **as-is** (the whole block, never a subset); remove `SC` entirely from components whose block has no `inheritedChildList`.
-- **`unknown-S-param`** — the param doesn't exist for this component; rename per the suggestion or remove it (the compiler silently drops it).
-
-The loop: **run → read the errors → apply the fixes yourself from `component-styles.json` → re-run → deliver when it's clean.**
-
-## Pre-sync checklist
-
-### A) Shared core — every page, both style systems
-- [ ] Module shape: three authored keys present (`pJson`, `lrids`, `opt`); ends with `};` + `export default pjson`.
-- [ ] `cJson`/`clrids` **absent** — omitted from new files, stripped from any downloaded file you edited (Studio regenerates the compiled twins on import).
-- [ ] Every node: `T` valid; `P.ID.H` present + unique; `_Editor.eID` present + unique (equal to ID when new; may differ after a Studio rename — not required to match); **`C` present** (use `{}` for leaves — omitting `C` is a validator error).
-- [ ] Props: strings single-quoted in `H`; QScript object literals use `=`; `QLabel.text`=`prop`, `VIcon.text`=`text`.
-- [ ] Events: no native `return` (use `quick.return`); object literals closed with `};`; no browser globals; custom events have `C:true`; `P` matches payload.
-- [ ] Localization: `lrids` per language; keys exist in all languages; `LR` in props / `quick.LR` in events.
-- [ ] Containment: `VCol` only inside `VRow`; `VRow` holds only `VCol`; item components inside their container.
-- [ ] Charts: only `Bar`/`Line`/`Doughnut`; no `visible` on the chart.
-- [ ] Alerts include `actionButtons`.
-- [ ] `studio buildQjson <file>` compiles clean (no errors).
-
-### B) `S`-system style checklist
-
-- [ ] Every visually-intentful node has an `S` object (range-keyed); child text/icons via the parent's `SC`. No structure-only nodes.
-- [ ] **No `O.layout`** (`dOpt`/`class`) on any node — grid width, flex direction/align/justify, and spacing all live in `S`.
-- [ ] **Class-prop audit:** if any `class` prop is present, verify each token individually against the `class → S` table in [../reference/styling-system.md](../reference/styling-system.md) §9 (full table: [../reference/mapping-S-vuetify-class.md](../reference/mapping-S-vuetify-class.md)). Tokens that have an `S` equivalent must NOT appear in `class` (e.g. `fill-height` when `S.height:"100%"` is set, `pt-2` when `S.paddingTop:"8px"` is set, `flex-column` when `S.flexDirection:"column"` is set). `class` here is a Web-only last resort, only for tokens with confirmed no `S` equivalent — and has no Mobile effect.
-- [ ] Vuetify style-affecting props not used where `S` has an equivalent (`VCol.cols/sm/md/lg/xl` → `S.col`; `VBtn/VCard.color` → `S.backgroundColor`; `elevation` prop → `S.boxShadow`).
-
-## `<<qjson:path>>` — ID↔path translation
-Studio stores inter-page references (e.g. `CustomComponent.QJsonPath`) as internal model IDs: `<<qjson:bqrs7zi8-uq1r-2oh9-3ujg-yrl0mqulnxui>>`. The CLI translates these automatically:
-- **`studio pull`** → converts every model ID to a human-readable project-relative path: `<<qjson:folder/page-name>>`
-- **`studio push`** → converts paths back to model IDs before uploading
-
-**What this means when authoring locally:**
-- Always write `'<<qjson:path>>'` — never a raw model ID.
-- The path is relative to the project root, without the `.qjson` extension (e.g. `<<qjson:sari-buton>>` for a root-level page, `<<qjson:forms/login>>` for a nested one).
-- If you see a UUID-style `<<qjson:...>>` in a pulled file, that means pull did not find the target page locally — do not copy that ID format into new authoring.
-- **A reference resolves only if its target already exists in Studio at push time.** Push converts `<<qjson:path>>` → id by looking the path up among the models present in that push plus those already in Studio; a path to a page that hasn't been created yet stays unresolved (logged, but the push still succeeds) and is **not** fixed when the target is created later. So when two new pages link to each other, author both, then push once (`studio push` is atomic over the whole workspace). If you add a linked page after an earlier push, create it, then re-push its referrer(s) with a body change so the link resolves.
-
-### Renaming / moving / deleting a referenced page — update the referrers yourself
-Locally the link between two pages is the **path/name** inside `<<qjson:path>>`; in Studio it is a stable model id. So on the Studio side a rename/move needs no extra work (the id never changes) — but **locally every file that referenced the old path goes stale** and `studio push` can no longer resolve it (`replacePathsWithIds` fails → broken link). When **you** (the agent) rename, move, or delete a `.qjson`, you must fix the referrers in the same change:
-
-1. **Find referrers first.** Grep the whole project for the target's current path *before* you touch it:
-   `grep -rln "<<qjson:sari-buton>>" .` (use the exact path the referrers use — root-level is just the name, nested is `folder/name`, module-owned is `ModuleName/.../name`, no `.qjson`).
-2. **Rename / move** → replace `<<qjson:oldPath>>` with `<<qjson:newPath>>` in every referrer. Keep the target file's frontmatter `id` unchanged so Studio still matches it.
-3. **Delete** → the reference target no longer exists; do not leave a dangling `<<qjson:path>>`. Remove or repoint the component instance that used it in each referrer (e.g. the `CustomComponent` whose `QJsonPath` pointed there), then validate.
-4. **Compile every file you edited** (`studio buildQjson`) — referrers included, not just the renamed page.
-
-> If the **user** renames/moves a file manually (outside the agent), `studio push` is expected to repair referrers automatically; this section is the agent's responsibility for agent-initiated changes.
-
-## Sync-back rules
-- Keep the **filename and any embedded page id stable** — Studio matches files back by name/id. Don't rename downloaded files.
-- Don't introduce new top-level keys or strip existing ones — **except `cJson`/`clrids`, which you always remove** (see next).
-- Omit `cJson`/`clrids` so Studio recompiles cleanly on import — it regenerates the compiled twins whether they're absent or empty. Strip them from any downloaded file you edit; never paste compiled (`╬…╩╩`) content by hand.
-- For multi-file edits, validate the whole folder before syncing.
-
-## Studio CLI commands
-
-`studio buildQjson` requires no bridge. All other commands require a running bridge (`studio connect`). For connection setup, readonly files, protocol handler, and troubleshooting see [11-cli-bridge.md](11-cli-bridge.md).
-
-**New files (no frontmatter):** if you create a `.qjson` from scratch with no `---studio-metadata---` header, `studio push` will create it as a new model in Studio and write the frontmatter back.
-
-**Exception — App Settings setting files** (pipeline, alert, loading, theme, …): don't create these as plain content-only files. They need `id: new` + `settingKey: <key>` frontmatter so Studio creates them through its own template with the right `key`/`usageType` — see [appSettings/appSettings.md](appSettings/appSettings.md#creating-a-new-setting-file-from-the-cli). A plain file becomes an ordinary page, invisible to App Settings.
-
-**Pages embedded as block components:** a page you added into another page as a block component (not a service-caller embed) must also be converted in Studio: run `studio convertToBlock <embedded-file>` unless its frontmatter already has `blockComponent: true`. For a page newly created locally, run it **after** `studio push` — the model must exist in Studio first (push leaves new models checked out). For an existing page that isn't checked out, run `studio startWorking <file>` first.

package/dist/studio-cli/src/.ai-kit/reference/component-index.json

@@ -1,114 +0,0 @@
-{
-  "$comment": "Authoritative Quick component registry, extracted from the Quick runtime source (packages/websdk/src/components/providers/*.ts and common/shrimp/constants/knownComps.ts). 'T' values listed here are the type names the runtime resolves. Used by AI agents to author valid component types. Editor display names / aliases may differ; prefer these runtime names when authoring.",
-  "version": 1,
-  "source": "quick monorepo @ packages/websdk/src/components/providers, common/shrimp/constants/knownComps.ts",
-  "families": {
-    "vuetify": "Vuetify 2 components (V-prefixed). Standard Vuetify props/events/slots apply unless wrapped.",
-    "quick": "Quick-native components (Q-prefixed or special names) implemented in packages/websdk.",
-    "chart": "Chart.js-backed chart components. Only Bar, Line, Doughnut exist at runtime.",
-    "lifecycle": "Non-visual system components managing page lifecycle / embedding.",
-    "devexpress": "DevExpress-backed components (loaded only when the DevExpress library group is enabled)."
-  },
-  "lifecycle": ["Messaging", "RenderingComponent", "CustomComponent"],
-  "chart": ["Bar", "Line", "Doughnut"],
-  "chartNotReal": ["Pie", "QPieChart"],
-  "chartNotRealNote": "Pie is NOT a runtime chart type. The chart library registers only { Doughnut, Bar, Line }. Render a pie shape with T:'Doughnut' and cutoutPercentage:0. (QPieChart exists only as a mobile-only placeholder.)",
-  "vuetify": [
-    "VMenu", "VAppBar", "VAlert", "VAutocomplete", "VAvatar", "VBottomNavigation",
-    "VBottomSheet", "VBreadcrumbs", "VBreadcrumbsItem", "VBreadcrumbsDivider", "VBtn",
-    "VBtnToggle", "VCalendar", "VCard", "VCarousel", "VCarouselItem", "VCheckbox",
-    "VStepper", "VStepperHeader", "VStepperStep", "VStepperItems", "VStepperContent",
-    "VSparkline", "VChip", "VChipGroup", "VCombobox", "VDataTable", "VDataIterator",
-    "VDatePicker", "VDialog", "VDivider", "VEditDialog", "VExpansionPanel",
-    "VExpansionPanels", "VExpansionPanelContent", "VExpansionPanelHeader", "VFileInput",
-    "VFooter", "VForm", "VIcon", "VImg", "VList", "VListGroup", "VListItemGroup",
-    "VListItem", "VListItemAvatar", "VListItemAction", "VListItemTitle",
-    "VListItemSubtitle", "VListItemActionText", "VListItemContent", "VListItemIcon",
-    "VNavigationDrawer", "VOverflowBtn", "VOverlay", "VPagination", "VParallax",
-    "VProgressCircular", "VProgressLinear", "VRadioGroup", "VRadio", "VRangeSlider",
-    "VRating", "VSheet", "VSkeletonLoader", "VSelect", "VSlider", "VSwitch", "VTabs",
-    "VTab", "VTabsItems", "VTabItem", "VTabsSlider", "VTextField", "VTextarea",
-    "VToolbar", "VTooltip", "VTimeline", "VTimelineItem", "VTimePicker", "VTreeview",
-    "VSlideGroup", "VSlideItem", "VSnackbar", "VBadge", "VBanner", "VSpeedDial",
-    "VVirtualScroll"
-  ],
-  "quick": [
-    "QLabel", "Ghost", "VContainer", "VCol", "VRow", "GroupBox", "QDocumentViewer",
-    "QPhoneInput", "QLightBox", "VInlineDatepicker", "QReCaptcha", "QOtp",
-    "CustomAvatarComp", "QTableCell", "QRichText", "QRichContent", "Tooltip",
-    "LiveConnection", "VPdfFileViewer", "QImgZoom", "VInlineTimePicker", "QTutorial",
-    "InfiniteScroll", "QAppointmentCalendar", "QMenu", "QFrame", "QAnimation",
-    "QVideo", "QMap", "VSubElement", "GoldenLayout", "QTimer", "QIdleTimer"
-  ],
-  "devexpress": [
-    "DxDataGrid", "DxTreeList", "DxColumn", "DxButton", "DxColumnChooser",
-    "DxColumnFixing", "DxEditing", "DxExport", "DxFilterRow", "DxHeaderFilter",
-    "DxMasterDetail", "DxPager", "DxPaging", "DxRowDragging", "DxScrolling",
-    "DxSearchPanel", "DxSelection", "DxSorting", "DxStateStoring", "DxSummary",
-    "DxTotalItem"
-  ],
-  "devexpressNote": "DevExpress components are available only when the DevExpress library group is enabled for the project. DxDataGrid/DxTreeList are containers; the rest (DxColumn, DxEditing, DxPaging, ...) are configuration child components placed inside them.",
-  "placeholderOrSpecial": [
-    "CustomComponent", "CustomChild", "QLegend", "QCaptcha", "QQRCode",
-    "QDynamicFields", "QPieChart", "QQrReader"
-  ],
-  "propValidation": {
-    "$comment": "The PIM (component-contracts.json) lists the editor's curated props; a few valid props aren't in it (legacy/internal/raw-Vuetify), recorded here as also-valid when authoring. DevExpress config sub-components use a different prop universe. Seeded from real shipping files.",
-    "extraValidProps": ["regular", "customCompClass", "value", "nuxt", "hover", "raised", "fluid", "eager"],
-    "skipUnknownPropFamily": "devexpress"
-  },
-  "containmentRules": {
-    "$comment": "Editor-enforced parent/child nesting rules, from apps/qeditor/src/extension/component-extensions/*Extension.ts (acceptableParentComps / acceptableChildComps) and PageManager.ts restrictedComponents. The editor refuses placements that violate these; the official docs state them too (e.g. layout.md: 'You cannot use VCol alone or within any other components. Always use VCol with VRow as its parent.').",
-    "mustHaveParent": ["VCol"],
-    "acceptableParents": {
-      "VCol": ["VRow"]
-    },
-    "acceptableChildren": {
-      "VRow": ["VCol"],
-      "VFooter": ["VContainer"]
-    },
-    "notes": [
-      "VCol must be a child of VRow and cannot sit at the page root.",
-      "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.",
-      "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 AGENT_GUIDE.md rule 13."
-    ],
-    "newPageContentRoot": {
-      "component": "VContainer",
-      "allowedTopLevelSiblings": ["Messaging", "<optional service component>"],
-      "appliesTo": "new pages only",
-      "doNotRetrofitExisting": true,
-      "note": "For a newly-created page, wrap all UI/visual content in a single top-level VContainer. When editing an existing page, keep its current root and do not insert a VContainer unless the user explicitly asks."
-    }
-  },
-  "criticals": {
-    "QLabel": {
-      "text": { "pType": "prop", "note": "Icon/label text is the `text` PROP. T must be 'prop'. HL defaults to 'QS'. Never PType 'text'." }
-    },
-    "VIcon": {
-      "text": { "pType": "text", "note": "Icon NAME (e.g. 'mdi-home') goes in `text` with PType 'text' (NOT 'prop'). PType 'text' renders as the component's slot content, which Vuetify reads as the icon." }
-    },
-    "VBtn": {
-      "label": "No text prop. Put a child QLabel / VIcon / VImg in the default slot.",
-      "color": "Static string only for per-row variation contexts; conditional QScript (if/else) is allowed in general props (see scripting reference)."
-    },
-    "VDataTable": {
-      "headers": "Prop, default QScript. Object literals use '=' keys: [{text='Name', value='name', sortable=true}].",
-      "items": "Static rows as a prop (QScript '=' literals); dynamic rows assigned in a callback.",
-      "scopedSlots": "Custom cells via C key 'item.<columnValue>' with cType 'scopedSlot'."
-    },
-    "VDialog": {
-      "open": "Set components.<id>.qValue = true/false (preferred; .value also works). The qValue prop is normalized to Vuetify's value.",
-      "render": "Add Render:true and eager:true to access inner components before opening."
-    },
-    "chart": {
-      "labels": "Array of axis/segment labels.",
-      "data": "Number array.",
-      "label": "Singular dataset name (string).",
-      "visible": "Charts have no visible prop; wrap in a VCol and toggle the VCol.",
-      "runtimeUpdate": "Mutate components.<id>.data then call (<any>components.<id>).update()."
-    }
-  }
-}

package/dist/studio-cli/src/.ai-kit/reference/mapping-S-vuetify-class.md

@@ -1,103 +0,0 @@
-# S ↔ Vuetify v2 Class Eşleştirme Tablosu
-
-> **Bu tablo iki amaca hizmet eder:** (1) bir `cssClass`/legacy sayfadaki class token'ının ne anlama geldiğini *anlamak*, ve (2) legacy bir sayfayı `S` sistemine *migrate ederken* class/`dOpt` token'larını `S` param'larına çevirmek. `S`-sistemi bir sayfada (yeni sayfa veya `opt.V >= 2.0`) tasarımı doğrudan `S` ile yaz — bkz. [../knowledge/04-styling.md](../knowledge/04-styling.md). Legacy sayfa yazımı için bkz. [../knowledge/04-styling-legacy.md](../knowledge/04-styling-legacy.md).
->
-> **KURAL:** S objesine yazdığın bir stili class'a da yazma. İkisi aynı anda
-> varsa **class token'ını kaldır** (S kaynak/otorite kabul edilir). Bu belge
-> yalnızca "S karşılığı OLAN" class token'larını listeler — çakışma kontrolü
-> sadece bunlar için yapılır.
->
-> **Spacing formülü:** Vuetify `N` değeri = `N × 4px`
-> (`pa-0`=0, `pa-1`=4px, `pa-2`=8px, `pa-3`=12px, `pa-4`=16px, `pa-5`=20px …
-> `pa-16`=64px). Negatifler (`n1`…) eksi px. Doğrulama: VCol default
-> `paddingTop: "12px"` ↔ `pa-3`.
->
-> Vuetify **v2** içindir.
-
-## 1. Spacing (padding / margin)
-
-| Class token | S karşılığı |
-|---|---|
-| `pa-N` | `paddingTop` + `paddingBottom` + `paddingLeft` + `paddingRight` = `"Npx"` |
-| `px-N` | `paddingLeft` + `paddingRight` = `"Npx"` |
-| `py-N` | `paddingTop` + `paddingBottom` = `"Npx"` |
-| `pt-N` / `pb-N` / `pl-N` / `pr-N` | `paddingTop` / `paddingBottom` / `paddingLeft` / `paddingRight` = `"Npx"` |
-| `ps-N` / `pe-N` | `paddingLeft` / `paddingRight` = `"Npx"` (LTR) |
-| `ma-N` | `marginTop` + `marginBottom` + `marginLeft` + `marginRight` = `"Npx"` |
-| `mx-N` | `marginLeft` + `marginRight` = `"Npx"` |
-| `my-N` | `marginTop` + `marginBottom` = `"Npx"` |
-| `mt-N` / `mb-N` / `ml-N` / `mr-N` | `marginTop` / `marginBottom` / `marginLeft` / `marginRight` = `"Npx"` |
-| `mx-auto` | `marginLeft` + `marginRight` = `"auto"` |
-| `mt-nN` … (negatif) | ilgili margin = `"-Npx"` |
-
-## 2. Size / Boyut
-
-| Class token | S karşılığı |
-|---|---|
-| `fill-height` | `height: "100%"` |
-
-> Not: Vuetify v2'de `w-100`/`h-100` yoktur. Genişlik/yükseklik hep S üzerinden
-> verilir: `width`, `height`, `maxWidth`, `minWidth`, `maxHeight`, `minHeight`.
-
-## 3. Layout / Flex (sadece flex container: VCol / VRow / VContainer)
-
-| Class token | S karşılığı |
-|---|---|
-| `d-flex` / `d-inline-flex` | flex container aktif → `flexDirection` set edilmişse çakışır |
-| `flex-row` | `flexDirection: "row"` |
-| `flex-column` | `flexDirection: "column"` |
-| `flex-row-reverse` | `flexDirection: "row-reverse"` |
-| `flex-column-reverse` | `flexDirection: "column-reverse"` |
-| `justify-start / center / end / space-between / space-around` | `justifyContent: "flex-start / center / flex-end / space-between / space-around"` |
-| `align-start / center / end / baseline / stretch` | `alignItems: "flex-start / center / flex-end / baseline / stretch"` |
-
-## 4. Text / Tipografi
-
-| Class token | S karşılığı |
-|---|---|
-| `text-h1 … text-h6`, `text-subtitle-1/2`, `text-body-1/2`, `text-button`, `text-caption`, `text-overline` | `fontSize` + `fontWeight` + `lineHeight` (tümü set ediliyorsa) |
-| `font-weight-thin / light / regular / medium / bold / black` | `fontWeight: "100 / 300 / 400 / 500 / 700 / 900"` |
-| `font-italic` | `fontStyle: "italic"` |
-| `text-left / center / right / justify` | `textAlign: "left / center / right / justify"` |
-| `text-decoration-none / underline / line-through` | `textDecorationLine: "none / underline / line-through"` |
-| `<renk>--text` (ör. `white--text`, `primary--text`) | `fontColor` (renk S'te set edilmişse) |
-
-## 5. Appearance / Görünüm
-
-| Class token | S karşılığı |
-|---|---|
-| `elevation-0 … elevation-24` | `boxShadow` |
-| `rounded`, `rounded-lg`, `rounded-xl`, `rounded-circle`, `rounded-pill`, `rounded-0` | `borderTopLeftRadius` + `borderTopRightRadius` + `borderBottomLeftRadius` + `borderBottomRightRadius` |
-| Theme renk class'ları (`primary`, `red lighten-2` vb. — arka plan) | `backgroundColor` (S'te renk set edilmişse) |
-
-## 6. Grid sütun genişliği (`O.layout` `c:col-N` → `S.col`)
-
-| Legacy (`O.layout` / `dOpt`) | `S` sistemi (`VCol` üzerinde) |
-| --- | --- |
-| `c:col-N` → `col-N` class | `S: { "xs-xl": { "col": "N" } }` |
-| `c:col-auto` → `col-auto` class | `S: { "xs-xl": { "col": "auto" } }` |
-| `c:d-none` → `d-none` class (gizli) | `S: { "xs-xl": { "col": "0" } }` |
-| Çoklu breakpoint: `dOpt: { xs: ["c:col-12"], md: ["c:col-6"] }` | `S: { "xs-xl": { "col": "12" }, "md-xl": { "col": "6" } }` |
-| `P.cols` / `P.sm` / `P.md` / `P.lg` / `P.xl` prop'ları | Yukarıdaki `S` range deseni — bu prop'ları kullanma |
-
-`col`, `VCol` üzerinde gerçek bir `S` param'ı (`component-styles.json`'daki `VCol` bloğuna bak). `VRow`, `VCard`, `VContainer` üzerinde `S` param'ı olarak yoktur.
-
-### Tarihsel ilişki — `O.layout` (dOpt) vs `S` layout param'ları
-
-`O.layout` hâlâ yazılıyorken ikisi böyle bir arada var oluyordu; yeni sayfalar için bu artık geçerli değil, **her şey `S`'e yazılır**:
-
-- `VCol`'un `componentStyleList`'i bir `layout-chooser`/`content-direction` grubu içerir, bu yüzden `flexDirection`, `alignItems`, `justifyContent` ve `col` özellikle `VCol` için gerçek `S` param'larıdır — render edilen flex eksenini bunlar belirler. `CompJsonMigrator.convertDesignTimeToStyleBP` (`fd:`→`flexDirection`, `a:`→`alignItems`, `j:`→`justifyContent`) eski `O.layout` verisi için editör-tarafı bir migration yoludur, yeni elle yazılan `pJson` için güvenilecek bir şey değildir.
-- `S.flexDirection` boş bırakılırsa `VCol` satır (row) eksenine döner (`component-styles.json`'daki `"default": "column"` sadece Style-tab'ın ön-dolu önerisidir, anahtar yokken sessizce uygulanan bir değer değildir). Birden fazla görünür çocuğu olan bir `VCol` istifleneceği zaman `S.flexDirection: "column"` açıkça set edilmelidir.
-- `VRow`/`VCard`/`VContainer`'ın `flexDirection`/`alignItems`/`justifyContent` `S` param'ı yoktur. Tasarım `S` şemasının ifade edemediği bir şeye ihtiyaç duyuyorsa, çare bileşenin kendi `class` prop'udur — **sadece Web, son çare** — Mobile karşılığı yoktur; bunun yerine `S`-destekli bir bileşenle (genelde `VCol`) yeniden yapılandır.
-- Aynı layout'u çelişkili iki şekilde ifade etme (ör. eski bir dosyada hem legacy `O.layout` row hem `S.flexDirection: column` aynı `VCol`'da varsa).
-
-## S karşılığı OLMAYAN (kaldırma, dokunma)
-
-Bilgi amaçlı — bu token'lar S'te bir eşe sahip değildir, çakışma kontrolü dışında bırak:
-
-`text-uppercase / lowercase / capitalize` (S'te `textTransform` yok),
-`text-truncate`, `text-no-wrap`,
-`d-none / d-block / d-inline` (görünürlük; S size ile alakasız),
-`flex-grow-* / flex-shrink-*`, `order-*`, `overflow-*`,
-responsive/breakpoint'li varyantlar (`d-md-flex`, `pa-md-4` gibi — S'te
-`break-point` ayrı yönetilir).