@stechquick/studio-cli 4.1.0-6 → 4.1.1-0

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

@@ -1,8 +1,8 @@
-# Component Catalog — Authoritative `T` Names & Contracts (legacy `cssClass` system)
+# Component Catalog — `T` Names & Contracts (legacy `cssClass` system)
 
 > **Style system: legacy (`cssClass`).** For legacy pages only — root-level `opt.V` missing or `< 2.0`, where `S` does not render. Component identity (`T` names, props, events) is the same in both eras; only the `VContainer`/`VRow`/`VCol` styling note below is legacy-specific. On a new page, or one with `opt.V >= 2.0`? Use [component-catalog.md](component-catalog.md) instead.
 >
-> Source of truth: the Quick runtime component registry (`packages/websdk/src/components/providers/VuetifyComponents.ts`, `LocalComponents.ts`, `ChartComponents.ts`, `common/shrimp/constants/knownComps.ts`). The machine-readable list lives in [component-index.json](component-index.json). Vuetify components follow Vuetify 2 prop/event/slot semantics unless noted.
+> Extracted from the Quick runtime's component registry. The machine-readable list lives in [component-index.json](component-index.json). Vuetify components follow Vuetify 2 prop/event/slot semantics unless noted.
 
 ## 1. Lifecycle / system (non-visual or embedding)
 
@@ -47,7 +47,7 @@ These are handled by the rendering layer, not plain Vuetify props:
 
 > Some Vuetify components map `value` to an internal name (`VTextField`/`VExpansionPanels` → `internalValue`; `VSwitch`/`VCheckbox` → `inputValue`). Setting `qValue` handles this for you — prefer `qValue`.
 
-## 6. Per-component criticals (verified against runtime + real files)
+## 6. Per-component criticals
 
 ### `QLabel` — text is a PROP
 ```json
@@ -65,7 +65,7 @@ These are handled by the rendering layer, not plain Vuetify props:
     "text": { "H": "'mdi-home'", "T": "text" } },
   "E": {}, "C": {}, "O": { "cType": "slot" }, "_Editor": { "eID": "icHome" } }
 ```
-The icon name goes in `text` with **`T: "text"`** (verified in real files, e.g. `VDataTableIconExample.qjson`). PType `text` renders as slot content, which Vuetify reads as the icon. (This corrects older docs that said `T:"prop"`.)
+The icon name goes in `text` with **`T: "text"`**. PType `text` renders as slot content, which Vuetify reads as the icon. (This corrects older docs that said `T:"prop"`.)
 
 ### `VBtn`
 - No text prop — put a child `QLabel`/`VIcon`/`VImg` in the `default` slot.
@@ -75,7 +75,7 @@ The icon name goes in `text` with **`T: "text"`** (verified in real files, e.g.
 - Flat style: `elevation:0`. Slots: `default` (+ Vuetify `title`/`subtitle`/`actions`).
 
 ### `VContainer` / `VRow` / `VCol`
-- Layout wrappers (Quick-implemented) — the grid is `VContainer > VRow > VCol`. Structural props: `VContainer` has `fluid`, `noGutters`, `eager`. `VCol` carries its own `layout-chooser` (nested flex). See [../knowledge/03-layout-and-slots-legacy.md](../knowledge/03-layout-and-slots-legacy.md).
+- Layout wrappers (Quick-implemented) — the grid is `VContainer > VRow > VCol`. Structural props: `VContainer` has `fluid`, `noGutters`, `eager`. `VCol` carries its own `layout-chooser` (nested flex). See [../knowledge/layout-and-slots-legacy.md](../knowledge/layout-and-slots-legacy.md).
 - **Column width:** `c:col-N` (1–12) in the `VCol`'s `O.layout.dOpt` + the matching `col-N` in the compiled `O.layout.class` (deterministic; `P.cols` alone is not) — see [layout-system.md](layout-system.md).
 - **Do NOT rely on `P.cols` alone** — it is unreliable across editor/runtime. Use `c:col-N` in `dOpt` with the synced class.
 - Flex direction/align/justify come from `dOpt` tokens (`fd:`/`a:`/`j:`) on the node, mirrored into the compiled `class`.
@@ -105,13 +105,13 @@ The icon name goes in `text` with **`T: "text"`** (verified in real files, e.g.
 - `color`: for per-row variation use static colors + sibling toggling with `visible` (so rows aren't blocked on conditional color expressions). Allowed: `default|primary|secondary|accent|success|error|info|warning`.
 
 ## 7. Valid props, events & style params per component
-The exhaustive, authoritative per-component contract is in [component-contracts.json](component-contracts.json). For each prop it gives:
+The exhaustive per-component contract is in [component-contracts.json](component-contracts.json). For each prop it gives:
 - `pType` — `prop` / `class` / `text` / `attr` (the qjson kind)
 - `type` — the **value type** (`string`, `boolean`, `number`, `number | string`, `Array<any>`, `Function`, `object`, …)
 - `options` — allowed **enum values** (quoted as they appear in `H`, e.g. `color`: `'primary'`,`'secondary'`,…)
 - `default` — the editor default
 
-And the component's **events** as `{ name, params?: [{name, type}] }` — the real event names plus the exact param signature to put in a handler's `P` (e.g. `VDataTable.click:row` → `index:any, row:IVDataTableClickRow`). Generated by merging the editor PIM (`ComponentPims.ts` → prop existence + PType + event names), `componentList.js` (`componentOptions` → value type + options + default), and `eventParamDict.ts` (per-event params). Use it to pick a real prop/event, the right value **type and quoting** (a `boolean` is bare `true`, not `'true'`), valid enum values, and correct handler params. Treat it as the safe subset (real prop/event, correct PType, unquoted boolean); `options` are guidance. Regenerated from the Quick runtime sources when the runtime changes.
+And the component's **events** as `{ name, params?: [{name, type}] }` — the real event names plus the exact param signature to put in a handler's `P` (e.g. `VDataTable.click:row` → `index:any, row:IVDataTableClickRow`). Use it to pick a real prop/event, the right value **type and quoting** (a `boolean` is bare `true`, not `'true'`), valid enum values, and correct handler params. Treat it as the safe subset (real prop/event, correct PType, unquoted boolean); `options` are guidance. Regenerated from the Quick runtime sources when the runtime changes.
 
 **Style params** live in [component-styles.json](component-styles.json) — per `T`, the Style-tab (`S`) params the component supports, each with value `type` and editor `default`. Read it before writing `S` so you only set supported params (generation guidance; not hard-validated, since the editor expands composite border/shadow/font widgets into extra sub-params).
 

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

@@ -1,8 +1,8 @@
-# Component Catalog — Authoritative `T` Names & Contracts (`S` system)
+# Component Catalog — `T` Names & Contracts (`S` system)
 
 > **Style system: `S` (new).** For `S`-system pages only — a new page, or one whose root-level `opt.V >= 2.0`. Component identity (`T` names, props, events) is the same in both eras; only the `VContainer`/`VRow`/`VCol` styling note below is `S`-specific. Editing a **legacy** page (`opt.V` missing or `< 2.0`)? Use [component-catalog-legacy.md](component-catalog-legacy.md) instead.
 >
-> Source of truth: the Quick runtime component registry (`packages/websdk/src/components/providers/VuetifyComponents.ts`, `LocalComponents.ts`, `ChartComponents.ts`, `common/shrimp/constants/knownComps.ts`). The machine-readable list lives in [component-index.json](component-index.json). Vuetify components follow Vuetify 2 prop/event/slot semantics unless noted.
+> Extracted from the Quick runtime's component registry. The machine-readable list lives in [component-index.json](component-index.json). Vuetify components follow Vuetify 2 prop/event/slot semantics unless noted.
 
 ## 1. Lifecycle / system (non-visual or embedding)
 
@@ -47,7 +47,7 @@ These are handled by the rendering layer, not plain Vuetify props:
 
 > Some Vuetify components map `value` to an internal name (`VTextField`/`VExpansionPanels` → `internalValue`; `VSwitch`/`VCheckbox` → `inputValue`). Setting `qValue` handles this for you — prefer `qValue`.
 
-## 6. Per-component criticals (verified against runtime + real files)
+## 6. Per-component criticals
 
 ### `CustomComponent` — two distinct usages
 
@@ -58,11 +58,11 @@ These are handled by the rendering layer, not plain Vuetify props:
     "QJsonPath": { "H": "'<<qjson:path/to/page>>'", "T": "prop" } },
   "E": {}, "C": {}, "O": {}, "_Editor": { "eID": "blockMyPage" } }
 ```
-The embedded page must itself be a block component in Studio: if its frontmatter lacks `blockComponent: true`, run `studio convertToBlock <embedded-file>` (details: [knowledge/05-components.md](../knowledge/05-components.md#block-component-embedding-another-qjson-page)). Does not apply to usage B.
+The embedded page must itself be a block component in Studio — if it isn't one yet, it must be converted on the Studio side via the workspace's tooling (details: [knowledge/components.md](../knowledge/components.md#block-component-embedding-another-qjson-page)). Does not apply to usage B.
 
-**B. Service Caller (project-specific proxy)** — only if the project provides a dedicated service-caller qjson. Has event handlers, a `Ghost` child, and `O: { cType:"child", dynProps:true }`. See [06-services.md](../knowledge/06-services.md) Pattern B.
+**B. Service Caller (project-specific proxy)** — only if the project provides a dedicated service-caller qjson. Has event handlers, a `Ghost` child, and `O: { cType:"child", dynProps:true }`. See [services.md](../knowledge/services.md) Pattern B.
 
-**`QJsonPath` format:** always `'<<qjson:path>>'` where `path` is the page's project-relative path without extension (e.g. `<<qjson:sari-buton>>` for a root-level page, `<<qjson:folder/page-name>>` for a nested one). Studio stores model IDs internally; `studio pull` converts ID→path and `studio push` converts path→ID automatically — never write a raw model ID here.
+**`QJsonPath` format:** always `'<<qjson:path>>'` where `path` is the page's project-relative path without extension (e.g. `<<qjson:sari-buton>>` for a root-level page, `<<qjson:folder/page-name>>` for a nested one). Studio stores model IDs internally; in files you always write the path form — never a raw model ID.
 
 ### `QLabel` — text is a PROP
 ```json
@@ -80,7 +80,7 @@ The embedded page must itself be a block component in Studio: if its frontmatter
     "text": { "H": "'mdi-home'", "T": "text" } },
   "E": {}, "C": {}, "O": { "cType": "slot" }, "_Editor": { "eID": "icHome" } }
 ```
-The icon name goes in `text` with **`T: "text"`** (verified in real files, e.g. `VDataTableIconExample.qjson`). PType `text` renders as slot content, which Vuetify reads as the icon. (This corrects older docs that said `T:"prop"`.)
+The icon name goes in `text` with **`T: "text"`**. PType `text` renders as slot content, which Vuetify reads as the icon. (This corrects older docs that said `T:"prop"`.)
 
 ### `VBtn`
 - No text prop — put a child `QLabel`/`VIcon`/`VImg` in the `default` slot.
@@ -90,7 +90,7 @@ The icon name goes in `text` with **`T: "text"`** (verified in real files, e.g.
 - Flat style: set `S.boxShadow:"none"` (on an `S` page, not the `elevation` prop). Slots: `default` (+ Vuetify `title`/`subtitle`/`actions`).
 
 ### `VContainer` / `VRow` / `VCol`
-- Layout wrappers (Quick-implemented) — the grid is `VContainer > VRow > VCol`. Structural props: `VContainer` has `fluid`, `eager`. `VCol` is the one component whose flex axis (`flexDirection`/`alignItems`/`justifyContent`) is controllable as a real style param — see [../knowledge/03-layout-and-slots.md](../knowledge/03-layout-and-slots.md).
+- Layout wrappers (Quick-implemented) — the grid is `VContainer > VRow > VCol`. Structural props: `VContainer` has `fluid`, `eager`. `VCol` is the one component whose flex axis (`flexDirection`/`alignItems`/`justifyContent`) is controllable as a real style param — see [../knowledge/layout-and-slots.md](../knowledge/layout-and-slots.md).
 - **Column width:** `S.col` on the `VCol` (1–12, range-keyed, e.g. `"xs-xl": {"col":"3"}`) — see [styling-system.md](styling-system.md).
 - **Do NOT use Vuetify responsive column props** (`VCol.cols`/`.sm`/`.md`/`.lg`/`.xl`): they set width via the Vuetify prop system, which `S` does not read. Use `S.col` + resolution ranges.
 - **Do NOT use `VRow.justify`/`VRow.align` props** as design intent — `VRow` exposes no `justifyContent`/`alignItems` `S` param; put alignment on a `VCol` (which supports those params), or fall back to the Web-only `class` last resort.
@@ -120,13 +120,13 @@ The icon name goes in `text` with **`T: "text"`** (verified in real files, e.g.
 - `color`: for per-row variation use static colors + sibling toggling with `visible` (so rows aren't blocked on conditional color expressions). Allowed: `default|primary|secondary|accent|success|error|info|warning`.
 
 ## 7. Valid props, events & style params per component
-The exhaustive, authoritative per-component contract is in [component-contracts.json](component-contracts.json). For each prop it gives:
+The exhaustive per-component contract is in [component-contracts.json](component-contracts.json). For each prop it gives:
 - `pType` — `prop` / `class` / `text` / `attr` (the qjson kind)
 - `type` — the **value type** (`string`, `boolean`, `number`, `number | string`, `Array<any>`, `Function`, `object`, …)
 - `options` — allowed **enum values** (quoted as they appear in `H`, e.g. `color`: `'primary'`,`'secondary'`,…)
 - `default` — the editor default
 
-And the component's **events** as `{ name, params?: [{name, type}] }` — the real event names plus the exact param signature to put in a handler's `P` (e.g. `VDataTable.click:row` → `index:any, row:IVDataTableClickRow`). Generated by merging the editor PIM (`ComponentPims.ts` → prop existence + PType + event names), `componentList.js` (`componentOptions` → value type + options + default), and `eventParamDict.ts` (per-event params). Use it to pick a real prop/event, the right value **type and quoting** (a `boolean` is bare `true`, not `'true'`), valid enum values, and correct handler params. Treat it as the safe subset (real prop/event, correct PType, unquoted boolean); `options` are guidance. Regenerated from the Quick runtime sources when the runtime changes.
+And the component's **events** as `{ name, params?: [{name, type}] }` — the real event names plus the exact param signature to put in a handler's `P` (e.g. `VDataTable.click:row` → `index:any, row:IVDataTableClickRow`). Use it to pick a real prop/event, the right value **type and quoting** (a `boolean` is bare `true`, not `'true'`), valid enum values, and correct handler params. Treat it as the safe subset (real prop/event, correct PType, unquoted boolean); `options` are guidance. Regenerated from the Quick runtime sources when the runtime changes.
 
 **Style params** live in [component-styles.json](component-styles.json) — per `T`, the Style-tab (`S`) params the component supports, each with value `type` and editor `default`. Read it before writing `S` so you only set supported params (generation guidance; not hard-validated, since the editor expands composite border/shadow/font widgets into extra sub-params).
 

package/dist/studio-cli/{src/.ai-kit → kits/ui-app-kit/.ai-kit/ui-kit}/reference/component-contracts.json

@@ -1,11 +1,6 @@
 {
-  "$comment": "Per-component contract: props { name: { pType (prop|class|text|attr), type? (value type), options? (allowed enum values, quoted), default? } } and events [{ name, params?: [{name,type}] }]. Merged from the Quick PIM (ComponentPims.ts: prop existence + PType + event names/params), the editor componentList.js (componentOptions: value type + options + default), and eventParamDict.ts (supplemental per-event params). Regenerated from those Quick runtime sources when the runtime changes. The AI reads this AT GENERATION TIME to pick real props/events/params, correct PType, and valid value types.",
+  "$comment": "Per-component contract: props { name: { pType (prop|class|text|attr), type? (value type), options? (allowed enum values, quoted), default? } } and events [{ name, params?: [{name,type}] }]. Read this AT GENERATION TIME to pick real props/events/params, the correct PType, and valid value types.",
   "version": 3,
-  "sources": {
-    "pim": "apps/cli/src/generated/ComponentPims.ts",
-    "options": "apps/qeditor/.../static/js/componentList.js",
-    "events": "ComponentPims.ts (Events[].Parameters — primary) + eventParamDict.ts (supplement)"
-  },
   "components": {
     "CustomAvatarComp": {
       "editorName": "CustomAvatarComp",

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

@@ -0,0 +1,358 @@
+{
+  "$comment": "Quick component registry. The 'T' values listed here are the type names the runtime resolves; author against them. Editor display names / aliases may differ — prefer these runtime names.",
+  "version": 1,
+  "styleBlockNote": "Only the components in `componentsWithStyleBlocks` have a block in component-styles.json. If a component is NOT listed there, it has no Style-tab params — a grep returning nothing is the expected result, not a failed lookup. `componentsWithSC` additionally carry an `inheritedChildList`; those (and only those) get an `SC` object on the node.",
+  "componentsWithStyleBlocks": [
+    "Messaging",
+    "QDocumentViewer",
+    "QFrame",
+    "QLabel",
+    "QLightBox",
+    "QMap",
+    "QMenu",
+    "QOtp",
+    "QPhoneInput",
+    "RenderingComponent",
+    "Tooltip",
+    "VAlert",
+    "VAppBar",
+    "VAutocomplete",
+    "VAvatar",
+    "VBottomNavigation",
+    "VBottomSheet",
+    "VBtn",
+    "VBtnToggle",
+    "VCalendar",
+    "VCard",
+    "VCarousel",
+    "VCheckbox",
+    "VChip",
+    "VChipGroup",
+    "VCol",
+    "VCombobox",
+    "VContainer",
+    "VDataTable",
+    "VDatePicker",
+    "VDialog",
+    "VDivider",
+    "VExpansionPanel",
+    "VExpansionPanelContent",
+    "VExpansionPanelHeader",
+    "VExpansionPanels",
+    "VFileInput",
+    "VFooter",
+    "VIcon",
+    "VImg",
+    "VInlineDatepicker",
+    "VInlineTimePicker",
+    "VList",
+    "VListGroup",
+    "VListItem",
+    "VMenu",
+    "VNavigationDrawer",
+    "VPagination",
+    "VProgressCircular",
+    "VProgressLinear",
+    "VRadio",
+    "VRadioGroup",
+    "VRow",
+    "VSelect",
+    "VSheet",
+    "VSlideGroup",
+    "VSlider",
+    "VStepper",
+    "VStepperContent",
+    "VStepperHeader",
+    "VStepperItems",
+    "VStepperStep",
+    "VSwitch",
+    "VTab",
+    "VTabItem",
+    "VTabs",
+    "VTextField",
+    "VTextarea",
+    "VTimePicker",
+    "VTimeline",
+    "VTimelineItem"
+  ],
+  "componentsWithSC": [
+    "VBottomNavigation",
+    "VBtn",
+    "VBtnToggle",
+    "VChip",
+    "VChipGroup",
+    "VExpansionPanels",
+    "VListItem",
+    "VNavigationDrawer",
+    "VRadioGroup",
+    "VSlideGroup",
+    "VStepper",
+    "VTabs"
+  ],
+  "families": {
+    "vuetify": "Vuetify 2 components (V-prefixed). Standard Vuetify props/events/slots apply unless wrapped.",
+    "quick": "Quick-native components (Q-prefixed or special names).",
+    "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 (acceptableParentComps / acceptableChildComps, plus restricted components). 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 s-track.md rule S4."
+    ],
+    "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 → kits/ui-app-kit/.ai-kit/ui-kit}/reference/component-styles.json

@@ -1,7 +1,6 @@
 {
-  "$comment": "Per-component valid Style-tab (`S`) params with value type and editor default, flattened across style categories. Source: styleDefinitions.ts (the flattened form of common/agentic/compiler/src/definitions/*.ts `componentStyleList`). The AI reads this AT GENERATION TIME so it only sets style params a component actually supports. Components that push styles into typed children carry `inheritedChildList` ({ styleParam: { ChildType: childParam } }, from each definition's IStyleChild) — mirror it into the node's `SC` when authoring; it is NOT an `S` param itself. Generation guidance (not hard-validated). Regenerated from styleDefinitions.ts when the runtime changes.",
+  "$comment": "Per-component valid Style-tab (`S`) params with value type and editor default, flattened across style categories.                                                                                                                                Read this AT GENERATION TIME so you only set style params a component actually supports. Components that push styles into typed children carry `inheritedChildList` ({ styleParam: { ChildType: childParam } })                                     — mirror it into the node's `SC` when authoring; it is NOT an `S` param itself. Generation guidance (not hard-validated).",
   "version": 1,
-  "source": "styleDefinitions.ts (from common/agentic/compiler/src/definitions)",
   "components": {
     "VAutocomplete": {
       "marginTop": {

package/dist/studio-cli/{src/.ai-kit → kits/ui-app-kit/.ai-kit/ui-kit}/reference/events-system.md

@@ -1,6 +1,6 @@
-# Events & Scripting System — Authoritative Reference (`E`)
+# Events & Scripting System (`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/agentic/compiler/src/omniScript/Compiler.ts`, `common/shrimp/interfaces/Scripting/IGlobals.ts`.
+> Extracted from the runtime's event model, messaging/rendering managers and compiler.
 
 ## 1. `IEventJson` and what each flag DOES at runtime
 
@@ -8,21 +8,19 @@
 interface IEventJson { H; P?; HF?; I?; C?; PE?; TO?; EV?; HL?; SM?; }
 ```
 
-| Field | Runtime behavior (verified) |
+| Field | Runtime behavior |
 |-------|------------------------------|
 | `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"`. |
+| `P` | Parameter declaration. **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. |
+| `I` | **Immediate.** 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. |
+| `PE` | **Property event.** Passed into the component as a **prop callback** (the component calls it — e.g. chart `labelFormatter`/`tooltipLabel`). |
+| `TO` | **Trigger order** for post-render events. Deferred ordered callbacks run **descending** by `TO` — higher `TO` fires first. |
+| `EV` | **Externally visible.** Exposed to a parent page as `quick.parent.events.<name>`. |
+| `HF` | **Handler file** (TS 2.0): `H` is a function name resolved in the page's script file 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:
@@ -77,7 +75,7 @@ Event handlers use **TypeScript only**: author every `E` handler with `"HL": "TS
 
 ## 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).
+- `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/services.md](../knowledge/services.md).
 
 ## 8. Common event param signatures
 | Component | Event | `P` |
@@ -93,6 +91,6 @@ Event handlers use **TypeScript only**: author every `E` handler with `"HL": "TS
 | charts | `labelFormatter`/`tooltipLabel`/`onClick` | `PE:true` + chart-specific params |
 
 ## 9. Compilation
-Authoring rule: `common/agentic/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).
+Authoring rule: the compiler receives event source with `HL:"TS"`, compiles it, and writes JavaScript plus `HL:"JS"` into `cJson`. `QS` is used for property/binding expressions, not event handlers. Errors carry `{componentType, componentId, fieldName, fieldType}`. These script errors surface when the page is compiled — see [../knowledge/validation.md](../knowledge/validation.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).
+Practical how-to and the `quick.*` call list: [../knowledge/events-and-scripting.md](../knowledge/events-and-scripting.md) + [quick-api.md](quick-api.md).

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

@@ -1,17 +1,17 @@
 # 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).
+> ⚠️ **STOP — before applying any rule below, confirm which style system the target page is on.** Read its root-level `opt.V` (and whether its nodes carry an `S` object): **`opt.V >= 2.0` / has `S` → S system**; **`opt.V` missing or `< 2.0` → legacy**. The two systems are not interchangeable on a page. Unsure how to route? → [index.md Step 0](../index.md).
 >
-> **This file is the `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).
+> **This file is the `legacy` track** (`O.layout` / `dOpt` / `class` grammar + the `dOpt → class` compilation rule). Authoring flow: [../knowledge/styling-legacy.md](../knowledge/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.
+> Extracted from the runtime's layout helpers, component interfaces and rendering manager.
 
 ## 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).
+`dOpt` holds prefixed tokens per breakpoint; `class` is the compiled Vuetify class string. **The runtime applies `O.layout.class`** to the element — so `class` must always be kept in sync with `dOpt` (the kit validator derives and checks this).
 
 ```json
 "O": { "cType": "slot",
@@ -20,7 +20,7 @@ interface ILayoutJson { dOpt: Record<breakpoint, string[]>; class: string; }
               "class": "d-flex flex-column col-6 pa-4 flex-md-row col-md-4" } }
 ```
 
-## 2. The dOpt prefix grammar (complete, from `layoutBarHelper.ts`)
+## 2. The dOpt prefix grammar (complete)
 
 | Prefix | Meaning | Valid values |
 |--------|---------|--------------|
@@ -56,7 +56,7 @@ dOpt { xs:["fd:flex-row"], md:["fd:flex-column","c:col-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 |
 |-----|--------|--------|--------|
@@ -96,4 +96,4 @@ Other components have no hard accept-list, but container components with item pa
 - 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).
+Practical how-to + slots: [../knowledge/layout-and-slots-legacy.md](../knowledge/layout-and-slots-legacy.md).