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

package/dist/studio-cli/src/.ai-kit/reference/events-system.md

@@ -1,98 +0,0 @@
-# Events & Scripting System — Authoritative Reference (`E`)
-
-> Source: `common/shrimp/interfaces/ComponentInterfaces/ICompJson.ts` (IEventJson), `common/dory/src/Model/Component/{EventData,EventCollection}.ts`, `common/dory/src/Managers/RenderingManager.ts` (GenerateEvents), `common/dory/src/Context/RenderingContext.ts`, `common/dory/src/Components/LifeCycleComponents/Messaging.ts`, `common/dory/src/Managers/{MessagingManager,Evaluator,Network/RequestManager}.ts`, `common/compiler/src/omniScript/Compiler.ts`, `common/shrimp/interfaces/Scripting/IGlobals.ts`.
-
-## 1. `IEventJson` and what each flag DOES at runtime
-
-```ts
-interface IEventJson { H; P?; HF?; I?; C?; PE?; TO?; EV?; HL?; SM?; }
-```
-
-| Field | Runtime behavior (verified) |
-|-------|------------------------------|
-| `H` | Handler: code string (QS/JS/TS) **or** a Flow model object (`HL:"FL"`). |
-| `P` | Parameter declaration. Parsed by `QJsonHelper.ParseParameters`: **QS** → names only `"x,y,z"`; **TS/JS** → `"x:string,y:any"`. |
-| `HL` | Event handler language. **Use only `"TS"`** for `E` handlers. `QS` belongs to properties/bindings, not events. Compiled handlers get their `HL` rewritten to the compiled lang. |
-| `I` | **Immediate.** `RenderingContext.executeOrDelayEvent`: if `I` (or not currently rendering) the handler runs **now**; otherwise it's deferred to end-of-render. |
-| `C` | **Custom event.** Triggered via `quick.MM.trigger`. For `C:true`, trigger parameters are passed as the **dataSource** (array → first element; object → whole object), merged over the event's scope; not name-mapped like DOM events. |
-| `PE` | **Property event.** Stored in `propertyEventFunctions` and **injected into the component's props** (so the component calls it as a callback — e.g. chart `labelFormatter`/`tooltipLabel`). |
-| `TO` | **Trigger order** for post-render events. `RenderingContext.endRendering` sorts deferred ordered callbacks **descending** by `TO` — higher `TO` fires first. |
-| `EV` | **Externally visible.** Included in `GetExternalEventBoundFunctions`; exposed to a parent page as `quick.parent.events.<name>`. |
-| `HF` | **Handler file** (TS 2.0): `H` is a function name resolved in `PageScripting` instead of inline code. |
-| `SM` | Source map (base64) for TS debugging. |
-
-`RenderingManager.GenerateEvents` builds an `EventData` per entry, passing all of the above into the event collection.
-
-## 2. Lifecycle (on the `Messaging` / page component)
-
-Emitted in the `Messaging` constructor in order, then `Restored` on back-navigation:
-
-1. **PreRender** — before rendering. **Canonical place to initialize store + trigger the first fetch.**
-2. **EndRender** — after render setup.
-3. **PostRender** — after DOM render; deferred handlers run here, ordered by `TO` (descending).
-4. **Restored** — when the page resurfaces from history (back navigation); re-runs dependency watchers and cascades to child Messaging components.
-5. **OnDeviceBack** — mobile hardware back button.
-
-Custom events are also defined on `Messaging` and invoked anywhere via `quick.MM.trigger`. Keep initialization in **one** lifecycle hook to avoid duplicate work.
-
-## 3. Custom events & parameters
-
-```ts
-quick.MM.trigger('eventName', [ { a:1, b:2 } ]);   // array → first element is dataSource
-quick.MM.trigger('eventName', payloadObject);       // object → whole object is dataSource
-quick.MM.delay('eventName', { delayTime: 500, options: [...] });
-let r = quick.MM.trigger('eventName');              // can return a value (via quick.return)
-```
-- A triggered event must be declared with `"C": true`.
-- **DOM/native event** params come via `P` (name-mapped). **Custom event** payload comes via the dataSource (declare the fields you read).
-- Don't duplicate a name in both `P` and a `declare let`/`let` inside `H`.
-- A custom event returns whatever the handler passes to `quick.return(value)`.
-
-## 4. Property events (`PE:true`)
-Become component callback props. Chart formatters are the canonical use:
-```json
-"labelFormatter": { "H": "quick.return(value + '%');", "PE": true,
-  "P": "value:any,context:{ dataIndex:number; dataset:any; }", "HL": "TS" }
-"tooltipLabel": { "H": "quick.return(context.formattedValue + ' - ' + context.label);", "PE": true,
-  "P": "context:{ formattedValue:string; label:string; }", "HL": "TS" }
-```
-
-## 5. External events / parent communication (`EV:true`)
-A page exposes events/props to a parent (e.g. when embedded via `CustomComponent`/`RenderingComponent`) through `Messaging` `ExternalEvents`/`ExternalProps`. The parent calls:
-```ts
-quick.parent.events?.someEvent(args);   // events the child marked EV:true
-quick.parent.props?.someProp;           // props the parent passed in
-```
-
-## 6. Scripting languages & execution
-
-Event handlers use **TypeScript only**: author every `E` handler with `"HL": "TS"`. It is compiled to JavaScript for `cJson`. Do not use `QS`, `JS`, `FL`, or `GUI` for events.
-
-`QS` remains available for **properties/bindings** (`P`); it is not an event-handler language in this authoring model.
-
-- **`quick.return` is exception-based control flow** — that's why native `return` doesn't work in handlers. `quick.return(v)` throws a `quickReturnExc` caught by the evaluator, yielding `v` as the handler result.
-- **Object literals need `};`** before the next statement in a TS handler.
-- **Forbidden browser globals** (`window`, `document`, `console`, `setTimeout`, `setInterval`, `fetch`) — use `quick.EM.trace`, `quick.MM.delay`, `quick.Request.async`, `quick.Quick.download`.
-- Line breaks in `H` are `\r\n`.
-
-## 7. Async / network integration
-- Handlers may `await`; event completion waits for all internal QPromises before firing the completion callback.
-- `quick.Request.async({ url, http, data, responseField, onSuccess, onFail, blockRender })`: on resolve, the `onSuccess` event fires with the response merged into the global `response` object (read `response.<responseField>`); on reject, `onFail` fires with `{ error }` (`error.response`, `error.message`). Both inherit the originating event's immediacy. Full service patterns: [../knowledge/06-services.md](../knowledge/06-services.md).
-
-## 8. Common event param signatures
-| Component | Event | `P` |
-|-----------|-------|-----|
-| VBtn / clickable | `click` | `mouseEvent:unknown \| undefined` |
-| inputs (VTextField, …) | `input` / `change` | `value:any` (input) / value (change) |
-| inputs | `blur` | `event:FocusEvent` |
-| VCheckbox / VSwitch | `change` | `value:boolean` |
-| VSelect | `change` | `value:any` |
-| VPagination | `input` | `number:number` (1-based; first line `quick.this.qValue = number;`) |
-| VDialog | `click:outside` | — (set `qValue=false`) |
-| VDataTable | `click:row` | `index:any,row:any` — `index`/`item` is the row data (`IVDataTableClickRow`: `item, headers, isSelected, isExpanded, select, expand`) |
-| charts | `labelFormatter`/`tooltipLabel`/`onClick` | `PE:true` + chart-specific params |
-
-## 9. Compilation
-Authoring rule: `common/compiler/src/omniScript/Compiler.compileEvent` receives event source with `HL:"TS"`, compiles it through algae, and writes JavaScript plus `HL:"JS"` into `cJson`. `QS` is used for property/binding expressions, not event handlers. Errors carry `{componentType, componentId, fieldName, fieldType}`. Compile with `studio buildQjson` to surface these script errors — see [../knowledge/10-validation-and-sync.md](../knowledge/10-validation-and-sync.md).
-
-Practical how-to and the `quick.*` call list: [../knowledge/02-events-and-scripting.md](../knowledge/02-events-and-scripting.md) + [quick-api.md](quick-api.md).

package/dist/studio-cli/src/.ai-kit/reference/layout-system.md

@@ -1,99 +0,0 @@
-# Layout System — Legacy `cssClass` Reference (`O.layout` / `dOpt` / `class`)
-
-> ⚠️ **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** (`O.layout` / `dOpt` / `class` grammar + the `dOpt → class` compilation rule). Authoring flow: [../knowledge/04-styling-legacy.md](../knowledge/04-styling-legacy.md). On a new page / `opt.V >= 2.0` instead → grid/flex/spacing are `S` params, see [styling-system.md](styling-system.md).
->
-> Source: `common/shrimp/helpers/layoutBarHelper.ts` (prefix grammar + `getOptionsClass`), `common/shrimp/interfaces/ComponentInterfaces/ICompJson.ts` (ILayoutJson), `common/shrimp/helpers/StyleHelper.ts` (breakpoints), `common/shrimp/helpers/CompJsonMigrator.ts` (dOpt↔S), `common/dory/src/Managers/RenderingManager.ts` (class application), VContainer/VRow/VCol definitions + wrappers.
-
-## 1. Shape
-
-```ts
-interface ILayoutJson { dOpt: Record<breakpoint, string[]>; class: string; }
-```
-`dOpt` holds prefixed tokens per breakpoint; `class` is the compiled Vuetify class string. **The runtime applies `O.layout.class`** to the element (`RenderingManager`) — so `class` must always be kept in sync with `dOpt` (the kit validator derives and checks this).
-
-```json
-"O": { "cType": "slot",
-  "layout": { "dOpt": { "xs": ["d:d-flex","fd:flex-column","c:col-6","sp:pa-4"],
-                        "md": ["fd:flex-row","c:col-4"] },
-              "class": "d-flex flex-column col-6 pa-4 flex-md-row col-md-4" } }
-```
-
-## 2. The dOpt prefix grammar (complete, from `layoutBarHelper.ts`)
-
-| Prefix | Meaning | Valid values |
-|--------|---------|--------------|
-| `d:` | display | `d-flex` (and `d-none` via column `0`) |
-| `fd:` | flex direction | `flex-row`, `flex-column` |
-| `a:` | align-items (cross axis) | `align-start`, `align-end`, `align-center`, `align-stretch`, `align-baseline` |
-| `j:` | justify-content (main axis) | `justify-start`, `justify-end`, `justify-center`, `justify-space-between`, `justify-space-around` |
-| `w:` | flex wrap | `flex-nowrap`, `flex-wrap` |
-| `c:` | grid column | `d-none` (=0), `col-1`…`col-12`, `col-auto` |
-| `sp:` | spacing | `mt-N mr-N mb-N ml-N ma-N pt-N pr-N pb-N pl-N pa-N` (N is the Vuetify step; ≈ `N×4px`; negative margins `mt-n1` etc.) |
-| `tt:` | text typography | `text-h1`…`text-h6`, `text-subtitle-1/2`, `text-body-1/2`, `text-button`, `text-caption`, `text-overline` |
-| `tc:` | text color | `primary--text`, `secondary--text`, `accent--text`, `success--text`, `error--text`, `info--text`, `warning--text` |
-| `te:` | text emphasis (weight) | `font-weight-black/bold/medium/regular/light/thin` |
-| `fi:` | font italic | `font-italic` |
-
-A token may carry comma-separated values: `te:font-weight-bold,font-italic` → both classes.
-
-> This corrects earlier notes: the real prefix set is `d, fd, a, j, w, c, sp, tt, tc, te, fi` (there is **no** `ai:` prefix; align-self is not part of this grammar — use `a:` for align-items).
-
-## 3. dOpt → class compilation (`getOptionsClass`)
-
-The algorithm (must be replicated exactly to keep `class` correct):
-
-1. For the **`xs`** breakpoint: strip the prefix and use the token's class value **as-is** (`fd:flex-column` → `flex-column`, `c:col-6` → `col-6`, `sp:pa-4` → `pa-4`).
-2. For **`sm`/`md`/`lg`/`xl`**: strip the prefix, then **insert the breakpoint after the first `-`**: `flex-column` → `flex-md-column`, `col-6` → `col-md-6`, `pa-4` → `pa-md-4`, `mr-10` → `mr-md-10`, `align-center` → `align-md-center`.
-3. Join all with spaces in dOpt order.
-
-```
-dOpt { xs:["fd:flex-row"], md:["fd:flex-column","c:col-6"] }
-→ class "flex-row flex-md-column col-md-6"
-```
-
-So `class` is NOT simply the flattened tokens — non-`xs` breakpoints get the infixed Vuetify-responsive form. The kit validator implements this rule.
-
-## 4. Breakpoints (device ranges)
-> Kept in sync with the identical table in [../knowledge/03-layout-and-slots-legacy.md](../knowledge/03-layout-and-slots-legacy.md) — update both.
-
-| Key | Device | Min px | Max px |
-|-----|--------|--------|--------|
-| `xs` | Mobile | 0 | 600 |
-| `sm` | Tablet | 600 | 960 |
-| `md` | Laptop | 960 | 1264 |
-| `lg` | Desktop | 1264 | 1904 |
-| `xl` | TV | 1904 | ∞ |
-
-`xs` is the base (applies everywhere); larger breakpoints override from their min width up. `S` (Style tab) uses **ranges** (`"xs-xl"`); `dOpt` uses **single** breakpoints.
-
-## 4b. Containment rules (editor-enforced)
-These are the editor's own drop rules (`acceptableParentComps`/`acceptableChildComps`; `VCol` additionally must always have a parent). The editor blocks violating drops; Vuetify runtime is lenient (existing files may violate and still render), so the kit validator reports these as **warnings**. Machine-readable copy: [component-index.json](component-index.json) `containmentRules`.
-
-| Rule | From |
-|------|------|
-| `VCol` must be a child of `VRow`; cannot be at page root | `VColExtension.acceptableParentComps={VRow}` + `restrictedComponents` + `layout.md` |
-| `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`.
-
-## 5. The grid: VContainer → VRow → VCol
-
-- **VContainer**: page/layout wrapper (`fluid`, `noGutters`, `eager`); applies its compiled class to a div.
-- **VRow**: flex row; default `display:flex; flex-wrap:wrap; align-items:stretch`; default margins 0.
-- **VCol**: a grid column; default padding 12px; supports its own `layout-chooser` (nested flex). Column width via `c:col-N`.
-
-12-column model: `col-1`…`col-12` (fraction of row), `col-auto` (fit content), column value `0` → `d-none` (hidden).
-
-(Migrating this grid width / `S`-system equivalents to `S`: [mapping-S-vuetify-class.md](mapping-S-vuetify-class.md).)
-
-## 6. Authoring checklist — legacy
-
-- Put layout tokens in `dOpt` keyed by breakpoint (`xs` base + overrides).
-- Compile `class` per §3 (xs as-is; others infixed). Keep them in sync.
-- Size columns with `c:col-N` on `VCol`; sum toward 12 per row.
-- Spacing via `sp:` tokens; typography utility via `tt:`/`te:`/`tc:` (or precise fonts via `S`).
-
-Practical how-to + slots: [../knowledge/03-layout-and-slots-legacy.md](../knowledge/03-layout-and-slots-legacy.md).

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).

package/dist/studio-cli/src/.ai-kit/reference/qjson-schema-legacy.md

@@ -1,189 +0,0 @@
-# QJSON Schema — Authoritative Reference (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.** Design is authored through `O.layout` (`dOpt` + compiled `class`) and CSS utility classes. On a new page / `opt.V >= 2.0` instead → [qjson-schema.md](qjson-schema.md).
->
-> Source of truth: `common/shrimp/interfaces/ComponentInterfaces/ICompJson.ts` and `IQJson.ts`. These are the actual TypeScript interfaces the Quick runtime/compiler use. The earlier community docs described a smaller subset — this is the full schema.
-
-## 1. File envelope (`IQJSon`)
-
-A `.qjson` file is a JS module exporting `pjson`:
-
-```javascript
-let pjson = {
-  "pJson": [],     // ICompJson[]  — authored component tree (you write this)
-  "lrids": {},     // ILRID        — localization you write, by language code
-  "opt": {}        // IQJsonOptions
-};
-export default pjson
-```
-
-An **AI-authored file carries only these three keys** (`pJson`, `lrids`, `opt`). The compiled twins `cJson` (compiled tree) and `clrids` (compiled localization) are generated by the editor/compiler on import — **omit them entirely**: never write them into a new file, and strip them from any downloaded file you edit.
-
-Full `IQJSon` interface fields:
-
-| Key | Type | Authored? | Notes |
-|-----|------|-----------|-------|
-| `pJson` | `ICompJson[]` | **you** | the component tree |
-| `cJson` | `ICompJson[]` | generated | compiled twin of pJson; **absent in AI-authored files** (omit/strip — Studio regenerates it) |
-| `lrids` | `ILRID` | **you** | `{ "tr-TR": {key:"'val'"}, ... }` |
-| `clrids` | `ILRID` | generated | compiled localization; **absent in AI-authored files** (omit/strip — Studio regenerates it) |
-| `opt` | `IQJsonOptions` | optional | page options (below) |
-| `description` | `string` | optional | page description |
-| `files` / `cFiles` | `Record<string,string>` | optional | TS 2.0 external handler files (`HF`) and compiled twins |
-| `namedViews` | `Record<string, IQView>` | optional | additional named views (advanced) |
-
-`IQJsonOptions` (`opt`):
-
-| Field | Meaning |
-|-------|---------|
-| `QL` | QJSON default scripting language (`ScriptLang`). Event handlers still use explicit `HL:"TS"`; properties/bindings may use `HL:"QS"`. |
-| `V` | schema version number. **On a legacy page this is missing or `< 2.0`** — that is what makes `S` not render. Do not bump it as a side effect of an edit. |
-| `otelDiag` / `otelChannel` | telemetry tags |
-
-> `ScriptLang = "QS" | "JS" | "TS" | "FL" | "GUI"`. `QS`=QScript, `TS`=TypeScript, `JS`=plain JS (passthrough), `FL`=Flow (visual), `GUI`=editor-generated.
-
-AI-authoring convention: an authored file carries three keys (`pJson`, `lrids`, `opt`) and **omits `cJson`/`clrids` entirely**; the editor/compiler fills the compiled twins on import/save. The file must close with `};` then `export default pjson`.
-
-## 2. Component node (`ICompJson`)
-
-```ts
-interface ICompJson {
-  T: string;                        // component type name (see component-catalog-legacy.md)
-  CP?: string;                      // CompPath for a Named component
-  P: IPropJson;                     // properties (ID is required)
-  E: IDictionary<IEventJson>;       // events
-  C: IDictionary<IChildJson>;       // children grouped by slot name
-  D?: Record<string, Record<string, IDirectiveJson>>;  // directives (advanced)
-  O?: IOptJson;                     // options (cType, layout) — layout is where design lives here
-  SA?: Array<string>;               // (S-system field — not authored on legacy pages)
-  S?: StyleValue;                   // (S-system field — does NOT render on legacy pages)
-  SC?: IStyleChild;                 // (S-system field — not authored on legacy pages)
-  _Editor: IEditorJson;             // { eID: string }
-}
-```
-
-Required for a valid node: `T`, `P.ID.H`, `_Editor.eID`, and **`C`** (use `{}` for leaf components — omitting `C` is an error). `E` is typically present (often `{}`). `O` carries `cType` and — on legacy pages — `layout`, which is the design mechanism (§6).
-
-### Styling on legacy pages: `O.layout` + CSS classes (NOT `S`)
-The `S`/`SA`/`SC` fields exist in the schema (they're the modern Style-tab mechanism), but on a legacy page the runtime does **not** render `S` — so **do not author it**. Design is expressed two ways:
-
-- **`O.layout`** (`dOpt` + compiled `class`) — grid width, flex direction/align/justify, spacing (§6).
-- **The `class` prop** — CSS utility classes for typography, color, elevation, rounding.
-
-Full guidance: [../knowledge/04-styling-legacy.md](../knowledge/04-styling-legacy.md). Introducing `S` here would silently break styling — keep to the mechanism the page already uses. (A deliberate migration to `S` is a separate, opt-in task — see [../agents/qjson-legacy-migrator.md](../agents/qjson-legacy-migrator.md).)
-
-`CP` (CompPath for Named components) and `D` (directives) are advanced/editor-managed; hand-authoring rarely needs them.
-
-### `_Editor.eID`
-`{ "eID": "<id>" }` — the editor's stable internal id. It is **equal to `P.ID.H` for auto-generated components** (both `EdtrComp_42`) but **may differ** when the ID is renamed in Studio (real files contain both: e.g. `ID:"PageComp"` with `eID:"EdtrComp_1"`). So equality is not required. Rules that ARE required: both `P.ID.H` and `_Editor.eID` must be present and unique per page. When hand-authoring a new component, setting `eID` = `ID` (one unique value) is the simplest valid choice.
-
-## 3. Properties (`IPropJson` / `IPropertyJson`)
-
-```ts
-interface IPropertyJson {
-  H: string | object;   // value/expression (the "handler")
-  T: PTyped;            // "prop" | "class" | "text" | "attr"
-  DE?: boolean;         // Don't-Evaluate: use H literally, skip script evaluation
-  HF?: string;          // external handler file (TS 2.0)
-  HL?: ScriptLang;      // property language; QS is permitted and is the default for property expressions
-}
-```
-
-`PType` enum (how the value is applied at render — from `RenderingManager`):
-
-| `T` | Destination | Use for |
-|-----|-------------|---------|
-| `"prop"` | Vue component prop | the common case (`color`, `label`, `visible`, `items`, `QLabel.text`) |
-| `"class"` | CSS class string | `class` — a **primary styling mechanism on legacy pages** (typography/color/elevation utilities) |
-| `"text"` | component slot **text content** | `VIcon` icon name; raw text content |
-| `"attr"` | DOM attribute | `data-*`, `aria-*`, masks like `format` |
-
-Value quoting inside `H` (QScript expression semantics):
-- String → single-quoted: `"'primary'"`
-- Number/boolean → bare: `"10"`, `"true"`
-- Expression/binding → bare: `"item.name"`, `"data.title"`, `"components.x.qValue"`
-- Array → `"[1,2,3]"`; QScript object literals use `=` keys: `"[{text='A', value=1}]"`
-
-`IPropJson` reserves `ID` (required, `IDefinedPropertyJson` — `H` is a plain string), plus `Render`, `DiscardSettings`, `class`.
-
-## 4. Events (`IEventJson`)
-
-```ts
-interface IEventJson {
-  H: string | IQuickFlowModel;  // handler code (TS/QScript text), or a Flow model
-  P?: string;   // params. QS: "x,y,z" 
-  HF?: string;  // external handler file (TS 2.0)
-  I?: boolean;  // immediate (run synchronously during render — used by lifecycle init)
-  C?: boolean;  // custom event (triggered via quick.MM.trigger)
-  PE?: boolean; // property event (fires on a property change; charts use this)
-  TO?: number;  // post-render trigger order
-  EV?: boolean; // externally visible (callable from a parent/other qjson)
-  HL: "TS";        // event handlers use TS only
-  SM?: string;  // source map (debug)
-}
-```
-
-- Event handler text uses `\r\n` line breaks.
-- Custom events you call with `quick.MM.trigger('name', [payload])` must be declared with `"C": true`.
-- Events callable from another page/parent need `"EV": true`.
-- Lifecycle init events are often marked `"I": true`.
-- Use `quick.return` (never native `return`); see [scripting knowledge](../knowledge/02-events-and-scripting.md).
-
-## 5. Children & slots (`IChildJson` / `CType`)
-
-```ts
-interface IChildJson { cType: CTyped; c: Array<ICompJson>; }
-enum CType { child = "child", slot = "slot", scopedSlot = "scopedSlot" }
-```
-
-`C` is keyed by **slot name**:
-
-```json
-"C": {
-  "default":      { "c": [ ...children... ], "cType": "slot" },
-  "item.actions": { "c": [ ...per-row cells... ], "cType": "scopedSlot" }
-}
-```
-
-| `cType` | Meaning (from source) |
-|---------|------------------------|
-| `"slot"` | normal named slot |
-| `"child"` | direct/structural child (Messaging, service components, Ghost) |
-| `"scopedSlot"` | callback slot receiving per-item data (`VDataTable` `item.<col>` — `item` available in child bindings) |
-
-## 6. Options (`IOptJson`) — `O.layout` is the design mechanism here
-
-```ts
-interface IOptJson {
-  cType?: CTyped;                       // matches the node's slot context
-  dynProps?: boolean;                   // dynamic-prop component (e.g. CustomComponent)
-  CL?: ScriptLang;                      // component language (defaults to QS)
-  forceUpdateAfterPropertySetting?: boolean;
-  compDomClasses?: string;              // editor-rendered DOM class string (editor-managed)
-  layout?: ILayoutJson;                 // grid/flex/spacing — the layout mechanism on legacy pages
-}
-interface ILayoutJson { dOpt: IDictionary<Array<string>>; class: string; }
-```
-
-- **`O.layout` is how you lay out a legacy page.** `dOpt` holds prefixed Vuetify tokens keyed by breakpoint (`d:`/`fd:`/`a:`/`j:`/`c:`/`sp:`/`tt:`/`tc:`/`te:`/`fi:`); `class` is the compiled Vuetify class string the runtime actually applies, and it must be kept **in sync** with `dOpt` (the compilation rule: `xs` tokens as-is, `sm/md/lg/xl` tokens infix the breakpoint after the first `-`).
-- Grid width → `c:col-N`; flex direction/align/justify → `fd:`/`a:`/`j:`; spacing → `sp:`. Full prefix grammar + the `dOpt → class` compilation algorithm are in [layout-system.md](layout-system.md); the practical authoring flow is in [../knowledge/04-styling-legacy.md](../knowledge/04-styling-legacy.md).
-- Do **not** author the `S` object here — it will not render on `V < 2`. (New page, or `opt.V >= 2.0`? You are in the wrong doc — see [qjson-schema.md](qjson-schema.md).)
-
-## 7. Compiled form (`cJson`) — do not author
-
-When compiled, handler `H` values get wrapped with sentinel delimiters (e.g. `╬...╩╩`) and `cJson`/`clrids` are populated. **AI-authored files omit `cJson`/`clrids` entirely** — never write them into a new file, and strip them from any downloaded file you edit. Author `pJson`/`lrids`, then let the editor (or the official compiler CLI) regenerate the compiled twins on import. See [validation & sync](../knowledge/10-validation-and-sync-legacy.md).
-
-## 8. Minimal valid node
-
-```json
-{
-  "T": "QLabel",
-  "P": { "ID": { "H": "lblTitle", "T": "prop" },
-         "text": { "H": "'Hello'", "T": "prop" } },
-  "E": {}, "C": {},
-  "O": { "cType": "slot" },
-  "_Editor": { "eID": "lblTitle" }
-}
-```