@stechquick/studio-cli 4.1.0-7 → 4.1.1-2

package/dist/studio-cli/kits/ui-app-kit/.ai-kit/ui-kit/reference/quick-api.md

@@ -0,0 +1,284 @@
+# Quick Runtime API (`quick.*`)
+
+> The API surface available inside event/prop handlers, extracted from the runtime's TypeScript interface definitions.
+>
+> **Two layers.** This file is the *readable* layer: the authoring rules below plus a complete index of every member (bottom of the file). [quick-api.json](quick-api.json) is the *detail* layer: full signature, params, returns and usage example per member — **grep the member you need there by its full path (e.g. `grep -n '"quick.Quick.region.setRegion"' quick-api.json`); never read it whole.** Workflow: scan the index here → grep the JSON for the one you picked → write the call.
+
+## Two scripting contexts
+
+Handlers run in one of two languages (`HL` field), and the available globals differ:
+
+| | `HL: "TS"` (TypeScript) | `HL: "QS"` (QScript) |
+|---|---|---|
+| Extra globals | `devex` | `Math`, `regex`, `typeOf`, `Date`, `Number`, `JSON`, `string`, `Object`, `js`, `Url` |
+| Default? | **event handlers: always author `TS`** (`"HL":"TS"`) | **properties/bindings: `QS`** — the omitted-`HL` runtime default |
+
+In **TS**, call framework APIs as `quick.X`. In **QScript** (all props, and QS handlers), the `quick.` prefix is **dropped**: `quick.store` → `store`, `quick.MM` → `MM`, `quick.Quick` → `Quick`. Props are always QScript regardless of `HL`. The index below lists the TS form; strip `quick.` when writing QScript.
+
+> **QScript semantics that differ from JS:** (1) `||` is boolean — `a || b` returns `true`/`false`, not the value of `a` or `b`. Don't write `store.get('x') || 'default'` expecting a fallback string; use `if(a){a}else{b}`. (2) Property access is null-safe by default — `a.b.c.d` won't throw even if `a` is undefined. So `|| ''` / `?? ''` guards are unnecessary and wrong in QScript props.
+
+> The QScript-only globals (`Math`, `Date`, `Number`, `JSON`, `string`, `regex`, `typeOf`, `Url`, `js`, `Object`) are wrappers, not the native objects — `Date.now()`, `Math.random(min,max)` and friends behave as the index describes. In TS handlers use native equivalents or `quick.*` instead.
+
+## Easy to get wrong
+
+- **`quick.store` prefixes are Page / Bag(`#`) / Global(`$`) / Shared(`&`)** — no prefix = Page context (cleared on navigation). None of them persist across sessions; for that use `quick.permanentStore`, **not** a store prefix.
+- **`quick.Quick.alert({...})` must always include `actionButtons`** — an alert without them cannot be dismissed.
+- **`quick.Quick.validate(compID, …)` takes the runtime ID (`P.ID.H`), not `_Editor.eID`.**
+- **There is no `phone` validation rule.** The full set is `required`, `minLength`, `maxLength`, `email`, `iban`, `IBANNumOnly`, `regex`, `tckn`, `vkn` (the last two are Turkish ID / tax-number validators). For phone input use the component's `format` mask plus `regex`.
+
+## Shapes the index can't show
+
+A few values are typed by interfaces the index doesn't expand:
+
+- **`IRequest`** (the object passed to `quick.Request.async` / `.download`): `url`, `http`, `data`, `responseField`, `onSuccess`, `onFail`, `blockRender`, `showSuccessMessage`, `showErrorMessage`, `args`, `headers`, `withCredentials`, `timeout`. **`http` is one of** `'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'MULTIPART' | 'POSTBLOB' | 'GETBLOB'`.
+- **`quick.permanentStore`** is **async, IndexedDB-backed** cross-session persistence (unlike `quick.store`, which is in-memory) — `await` its calls.
+- **`place`** in `quick.Quick.createComponent` is `ElementLocation`: `'Before' | 'After' | 'Default'`.
+
+## Golden rules for handler code
+
+1. **Never `return`** — use `quick.return(value)`.
+2. **Event handlers are always TypeScript — set `"HL": "TS"` on every handler.** (The omitted-`HL` default of `QS` applies to property/binding expressions, not `E` handlers.)
+3. In **props**, localization is bare `LR('key')`; in **events**, `quick.LR('key')`.
+4. Avoid browser globals in handlers: `quick.MM.delay` (not `setTimeout`), `quick.EM.trace` (not `console`), `quick.Quick.download` (not anchor downloads).
+5. Read a service response in the `onSuccess` event as `response.<responseField>`.
+6. Strip the `quick.` prefix in QScript (props + QS handlers); keep it in TS handlers.
+
+---
+
+## Complete member index
+
+Every member of the `quick.*` surface. Scan this to see what exists, then read the full
+signature, params and example for the one you need from [quick-api.json](quick-api.json) (grep the member name — never read that file whole).
+
+- **`quick.Request`**
+  - `quick.Request.async` — Sends a network request
+  - `quick.Request.download` — Downloads files and resources through network request
+- **`quick.MM`**
+  - `quick.MM.get` — Retrieves the custom event from the Page Component
+  - `quick.MM.trigger` — Triggers a custom event on the Page Component
+  - `quick.MM.delay` — Triggers a custom event on the Page Component with a delay
+  - `quick.MM.clearTimeout`
+- **`quick.EM`**
+  - `quick.EM.trace` — Writes a message to the browser console
+- `quick.LR` — Retrieves the language equivalent of the given key parameter with current language of the system
+- `quick.importLocalization` — Imports localization data for a specific language and adds it to Global Localization
+- `quick.go` — Triggers the go command in the shell with integrated WebSDK, routing to another page with the provided parameters
+- `quick.getComponent` — Retrieves the component instance by the given component id
+- `quick.setFormData`
+- `quick.getArrangedNestedData`
+- `quick.getFormData`
+- `quick.getArrangedFormData`
+- `quick.bind`
+- **`quick.Quick`**
+  - **`quick.Quick.dx`**
+    - `quick.Quick.dx.getDxCustomStore`
+  - **`quick.Quick.region`** — Provides methods for managing regions within the application
+    - `quick.Quick.region.setRegion` — Sets the current region
+    - `quick.Quick.region.getRegionList` — Retrieves the list of available regions
+    - `quick.Quick.region.getCurrentRegion` — Gets the name of the currently set region
+    - `quick.Quick.region.getFormattingDefinitionByCurrentRegion` — Retrieves the formatting definition based on the current region
+  - **`quick.Quick.theme`** — Provides methods for managing themes within the application
+    - `quick.Quick.theme.setTheme` — Sets the current theme
+    - `quick.Quick.theme.getThemeList` — Retrieves the list of available themes
+    - `quick.Quick.theme.addTheme` — Adds a new theme to the list of available themes
+    - `quick.Quick.theme.removeTheme` — Removes a theme from the list of available themes
+  - `quick.Quick.redirect` — Attempts to open a URL using the specified options for redirection
+  - `quick.Quick.performance`
+  - `quick.Quick.back`
+  - `quick.Quick.goHistory` — Navigates between opened pages using the specified step number in the navigation history
+  - `quick.Quick.go` — Triggers navigation to the specified page with optional configuration options
+  - `quick.Quick.goNative`
+  - `quick.Quick.copy` — Creates a deep copy of the provided object using a cloning technique
+  - `quick.Quick.setComponentsProperty` — Sets the specifed component properties with the given values
+  - `quick.Quick.download` — Initiates the download of a file using a base64-encoded string and specifying the file name
+  - `quick.Quick.shareData` — Initiates the share of a file using a base64-encoded string or by using a link and specifying the file name
+  - `quick.Quick.isObject` — Check if the given input is an object
+  - **`quick.Quick.validation`** — Collection of Quick Rule functions for input component validation
+    - `quick.Quick.validation.required` — Validates that a value is not empty
+    - `quick.Quick.validation.minLength` — Validates that a value has a minimum length
+    - `quick.Quick.validation.maxLength` — Validates that a value has a maximum length
+    - `quick.Quick.validation.email` — Validates that a value is a valid email address
+    - `quick.Quick.validation.iban` — Validates that a value is a valid IBAN
+    - `quick.Quick.validation.IBANNumOnly`
+    - `quick.Quick.validation.regex` — Validates that a value matches a specified regular expression
+    - `quick.Quick.validation.tckn` — Validates that a value is a valid Turkish Identification Number (TCKN)
+    - `quick.Quick.validation.vkn` — Validates that a value is a valid Tax Identification Number (VKN)
+  - `quick.Quick.validate` — Validates a component and all its child inputs
+  - `quick.Quick.validateAll` — Validates all registered inputs in the page
+  - `quick.Quick.resetValidation` — Only clears validations, it has no effect on other variables
+  - `quick.Quick.reset` — Ensures that the set values and validations of the components are cleared
+  - `quick.Quick.createComponent` — Creates a new component based on the provided template component and inserts it into the page at a specified location
+  - `quick.Quick.findCreateComponentRelative` — Finds the desired dynamic component created with a template by giving a child component inside that dynamically created component
+  - `quick.Quick.createChildren` — Creates a child component based on the provided template child name and inserts it into the specified parent component
+  - `quick.Quick.deleteComponent` — Deletes a component or DOM element from the page
+  - `quick.Quick.bind` — Declares legacy store dependencies for the provided fields *(deprecated)*
+  - `quick.Quick.setLanguage` — Sets the system language to given parameter if you add it beforehand in the localization file
+  - `quick.Quick.getLanguage` — Retrieves the currently set system language
+  - `quick.Quick.setPageTitle` — Sets the title of the current page
+  - `quick.Quick.copyToClipboard` — Allows copying a specified value to the clipboard
+  - `quick.Quick.initializePositioning` — Recalculates the positions of the input components drop-down menus
+  - `quick.Quick.cleanupPositioning` — Cleans up the effects of initializePositioning
+  - `quick.Quick.getPageTitle` — Retrieves the title of the current page
+  - `quick.Quick.getFavicon` — Retrieves the favicon of the current page
+  - `quick.Quick.updateComponent` — Updates a component using its instance
+  - `quick.Quick.exportToXlsx` — Exports data to multiple sheets in an Excel file
+  - `quick.Quick.xlsxToJson`
+  - `quick.Quick.toLongDate` — Takes the raw date value and converts it to a date format with month, day, year, hour and minute
+  - `quick.Quick.toShortDate` — Converts a raw date value to a short date format with month, day, and year
+  - `quick.Quick.toLongTime` — Converts a raw date value to a long time format with hour, minute, and second
+  - `quick.Quick.toShortTime` — Converts a raw date value to a short time format with hour and minute
+  - `quick.Quick.toDate` — Converts a string value to a Date object according to the given format type
+  - `quick.Quick.dateFromNow` — Calculates the time difference between a specified time and the present moment and returns a human-readable string
+  - **`quick.Quick.platform`**
+    - `quick.Quick.platform.isMobile` — Returns whether the platform is a mobile platform (Android or iOS)
+    - `quick.Quick.platform.isWeb` — Returns whether the platform is a web browser
+    - `quick.Quick.platform.getPlatformType` — Returns the current platform type
+    - `quick.Quick.platform.getDeviceId` — Returns the device ID that runs the application
+    - `quick.Quick.platform.getClientInfo`
+  - `quick.Quick.getCurrentPosition` — Retrieves the current geographical position of the device
+  - `quick.Quick.toMoney` — Converts a number or numeric string to a money-formatted string
+  - `quick.Quick.setComponentClass` — Sets the class properties of a component using the specified array of class names
+  - `quick.Quick.toDecimal` — Converts a formatted string to its raw decimal value
+  - `quick.Quick.toBigNumber`
+  - `quick.Quick.dm`
+  - `quick.Quick.getEditor`
+  - `quick.Quick.alert` — Displays an alert component with the specified configuration
+  - `quick.Quick.closeAlert`
+  - **`quick.Quick.host`**
+    - `quick.Quick.host.trigger` — ⚠️❗️**Use quick.container instead of quick.Quick.host.trigger.** **See Container Configuration documentation:** **https://docs.onplateau.com/UI-Screens/UI-Settings/container-configuration** *(deprecated)*
+  - `quick.Quick.isEditMode`
+  - `quick.Quick.getComponentIdByInstance` — Retrieves the ID of a component based on its instance
+  - **`quick.Quick.screen`** — Methods for interacting with the screen, including scrolling and bringing elements into view
+    - `quick.Quick.screen.YOffset` — Returns the vertical (up or down) scrolling offset of the screen or element
+    - `quick.Quick.screen.XOffset` — Returns the horizontal (left or right) scrolling offset of the screen or element
+    - `quick.Quick.screen.intoView` — Scrolls the webpage to bring a specific element into the visible area of the browser
+    - `quick.Quick.screen.scrollIntoView` — Alias for the intoView method
+    - `quick.Quick.screen.toTop` — Scrolls the document to the top of the page
+  - **`quick.Quick.environment`**
+    - `quick.Quick.environment.variable`
+  - `quick.Quick.yamlLogType`
+  - **`quick.Quick.loading`** — Methods for managing loading indicators, including showing and hiding the loading state
+    - `quick.Quick.loading.show` — Displays the loading indicator
+    - `quick.Quick.loading.hide` — Hides the loading indicator
+  - **`quick.Quick.network`**
+    - `quick.Quick.network.isConnected` — Determines the online/offline status of the network
+  - **`quick.Quick.render`**
+    - `quick.Quick.render.block` — Blocks rendering operations
+    - `quick.Quick.render.resume` — Resumes rendering operations
+  - **`quick.Quick.authentication`**
+    - `quick.Quick.authentication.getIamToken` — Retrieves IAM token
+  - **`quick.Quick.config`**
+    - `quick.Quick.config.get`
+- **`quick.containerServices`**
+  - `quick.containerServices.extensions`
+- **`quick.sso`**
+  - `quick.sso.start` — Initiates the single sign-on (SSO) process by starting the SSO request
+  - `quick.sso.validate` — Validates the user and completes the single sign-on (SSO) process
+- **`quick.store`**
+  - `quick.store.set` — Sets a value to the store
+  - `quick.store.get` — Gets a value from the store
+  - `quick.store.getAll` — Gets all values from the store
+  - `quick.store.delete` — Deletes a value from the store
+  - `quick.store.deleteAll` — Deletes all values from the store
+- **`quick.permanentStore`**
+  - `quick.permanentStore.set` — Sets a key-value pair object to the Permanent Store
+  - `quick.permanentStore.get` — Gets a key-value pair object from the Permanent Store
+  - `quick.permanentStore.delete` — Deletes a key-value pair object associated with the 'key' in the permanent store 
+  - `quick.permanentStore.getAll` — Gets all key-value pair objects from the permanent store
+  - `quick.permanentStore.createOrChangeStore` — Provide the permanent store name that application will use
+  - `quick.permanentStore.deleteStore` — Deletes the Permanent Store
+  - `quick.permanentStore.defaultStoreName`
+  - `quick.permanentStore.currentStoreName`
+- **`quick.cookie`**
+  - `quick.cookie.set` — Sets a cookie with the provided key and cookie value
+  - `quick.cookie.get` — Gets the value of the cookie associated with the provided key
+  - `quick.cookie.getAll` — Gets all cookies as key-value pairs
+  - `quick.cookie.delete` — Deletes the cookie associated with the provided key
+- **`quick.localStorage`**
+  - `quick.localStorage.set` — Sets a value in the local storage with the provided key
+  - `quick.localStorage.get` — Gets the value from the local storage associated with the provided key
+  - `quick.localStorage.clear` — Clears all values from the local storage
+  - `quick.localStorage.delete` — Deletes the value from the local storage associated with the provided key
+- **`quick.encryptedStorage`**
+  - `quick.encryptedStorage.set` — Only uses for Mobile Apps
+  - `quick.encryptedStorage.get` — Only uses for Mobile Apps
+  - `quick.encryptedStorage.clear` — Only uses for Mobile Apps
+  - `quick.encryptedStorage.delete` — Only uses for Mobile Apps
+- **`quick.Url`**
+  - `quick.Url.resolve`
+  - `quick.Url.getDeepLinkParams`
+  - `quick.Url.getUrl`
+- `quick.findControl`
+- `quick.this`
+- **`quick.parent`**
+  - `quick.parent.props` — Properties defined in Messaging P: ExternalProps
+  - `quick.parent.events` — Events defined in Messaging P: ExternalEvents
+- **`quick.process`**
+  - `quick.process.getMetadata` — Gets the metadata
+  - `quick.process.setMetadata` — Sets the metadata
+  - `quick.process.changeProcessMetadata` — Changes the process metadata
+- `quick.return` — Returns a value from the current event (stops execution and returns)
+- `quick.await`
+- **`quick.currentPage`**
+  - `quick.currentPage.isRenderCompleted` — Checks if the rendering process has been completed
+- **`quick.cryptography`**
+  - `quick.cryptography.hash` — Hashing transforms specific data into a hash value using a chosen hashing algorithm
+  - `quick.cryptography.encrypt` — Encrypts a specific data using the specified encryption algorithm
+  - `quick.cryptography.decrypt` — Decryption is the process of converting encrypted data back to its original, readable form
+- **`quick.encoding`**
+  - `quick.encoding.atob` — Transforms binary data into a text format to facilitate storage or transmission
+  - `quick.encoding.btoa` — Transforms Base64-encoded data back into its original binary form
+- `quick.integrations`
+- `quick.webScripts`
+- **`quick.workflowStore`**
+  - **`quick.workflowStore.context`**
+    - `quick.workflowStore.context.dataInstance`
+    - `quick.workflowStore.context.processInstance`
+  - **`quick.workflowStore.formContext`**
+    - `quick.workflowStore.formContext.task`
+    - `quick.workflowStore.formContext.form`
+    - `quick.workflowStore.formContext.swimlanes`
+- **`quick.workflow`**
+  - `quick.workflow.RunFunction`
+  - `quick.workflow.Commit`
+- `quick.RunBefunc` — !!! DON'T CHANGE
+- `quick.getConstant`
+- `quick.container`
+- **`quick.devex`** *[TypeScript handlers only]*
+  - `quick.devex.createArrayStore` — Creates an array store with the provided key and data for DevExtreme *[TypeScript handlers only]*
+  - `quick.devex.createCustomStore` — Creates a custom store with the provided loadUrl, key, and load options for DevExtreme *[TypeScript handlers only]*
+  - `quick.devex.createDataSource` — Creates a data source with the provided store for DevExtreme *[TypeScript handlers only]*
+  - `quick.devex.exportDxDataGrid` *[TypeScript handlers only]*
+- **`quick.Math`** *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Math.floor` — Rounds a number down to the nearest integer *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Math.random` — Generates a random number between the specified minimum (inclusive) and maximum (exclusive) values *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Math.findIndex` — Finds the index of an object in an array based on the specified key and search string *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Math.round` — Rounds a number to the specified number of decimal places *[QScript only (drop the `quick.` prefix when calling)]*
+- `quick.regex` *[QScript only (drop the `quick.` prefix when calling)]*
+- `quick.typeOf` *[QScript only (drop the `quick.` prefix when calling)]*
+- **`quick.Date`** *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Date.parse` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Date.now` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Date.time` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Date.compare` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Date.getTimezoneOffset` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Date.ISOString` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Date.differenceInDays` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Date.differenceInMonths` *[QScript only (drop the `quick.` prefix when calling)]*
+- **`quick.Number`** *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Number.parse` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Number.parseFloat` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.Number.mod` *[QScript only (drop the `quick.` prefix when calling)]*
+- **`quick.JSON`** *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.JSON.parse` *[QScript only (drop the `quick.` prefix when calling)]*
+- **`quick.string`** *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.string.space` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.string.replace` *[QScript only (drop the `quick.` prefix when calling)]*
+- `quick.Object` *[QScript only (drop the `quick.` prefix when calling)]*
+- **`quick.js`** *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.js.Object` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.js.String` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.js.Math` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.js.Date` *[QScript only (drop the `quick.` prefix when calling)]*
+  - `quick.js.Number` *[QScript only (drop the `quick.` prefix when calling)]*
+

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

@@ -1,14 +1,14 @@
-# Styling System — Authoritative Reference (`S` / `SC` / `SA`)
+# Styling System (`S` / `SC` / `SA`)
 
-> ⚠️ **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 `S` track** (`S` / `SC` / `SA` schema). Authoring how-to: [../knowledge/04-styling.md](../knowledge/04-styling.md). On a **legacy** page instead (where `S` does not render) → [layout-system.md](layout-system.md).
+> **This file is the `S` track** (`S` / `SC` / `SA` schema). Authoring how-to: [../knowledge/styling.md](../knowledge/styling.md). On a **legacy** page instead (where `S` does not render) → [layout-system.md](layout-system.md).
 
 ## Why styling = the `S` object, not CSS
 
 Quick runs on **Web, Android, and iOS**. CSS only exists on Web (DOM). Mobile renders native views. So per-component styling is expressed as a **platform-neutral style object `S`** on the component node, which each platform applies natively:
 
-- **Web** (`StyleManager`): `S` → CSS rules with `@media` ranges + `[q_UID='…']` selectors (some components have specialized style handlers).
+- **Web**: `S` → CSS rules with `@media` ranges + `[q_UID='…']` selectors (some components have specialized style handlers).
 - **Mobile** (`bridgets componentManager`): `S` → flattened to the single breakpoint range matching the device → promoted to top-level props → `col` converted to flex-basis %, `boxShadow` simplified → passed to the native bridge `nb_createComponent`.
 
 **Consequence:** a project Style File (CSS) styles Web only. To style **cross-platform**, you must use `S` (the Style tab). Author `S`, not CSS, for component visuals.
@@ -31,15 +31,15 @@ In practice `S` is keyed by **resolution range**, each holding camelCase CSS-lik
 
 - A range key is `"<from>-<to>"` over breakpoints `xs<sm<md<lg<xl`. Default full range `"xs-xl"`.
 - A narrower range (e.g. `"md-xl"`) overrides the base for those device widths (this is "Layout Multiplexing"). Empty string `""` = unset (use component default).
-- Breakpoint widths: `xs` 0, `sm` 600, `md` 960, `lg` 1264, `xl` ∞ (px) — `StyleHelper.matchSizeValue`.
+- Breakpoint widths: `xs` 0, `sm` 600, `md` 960, `lg` 1264, `xl` ∞ (px).
 
 > Note: `S` ranges are inclusive spans over the breakpoints (`"xs-xl"`, `"md-xl"`, …), unlike the legacy `dOpt` keys which are **single** breakpoints.
 
-## 2. Per-component style definitions (`componentStyleList`)
+## 2. Per-component style definitions
 
-Each component declares which style fields it supports (its `componentStyleList`), grouped into the Style-tab sections: **LAYOUT**, **TEXT** (often `inheritedStyle:true`), **APPERANCE** (sic — that's the literal key). Each group has typed editors (`type` from `COMPONENT_STYLE_TYPE`) that emit specific `param` keys with defaults. **The per-component flattened form of this data — every supported `S` param + default — is bundled in [component-styles.json](component-styles.json); that file is the single source to consult when authoring `S`.**
+Each component declares which style fields it supports, grouped into the Style-tab sections: **LAYOUT**, **TEXT** (often `inheritedStyle:true`), **APPERANCE** (spelled that way in the data). Each group has typed editors (`type` from `COMPONENT_STYLE_TYPE`) that emit specific `param` keys with defaults. **The per-component flattened form of this data — every supported `S` param + default — is bundled in [component-styles.json](component-styles.json); that file is the single source to consult when authoring `S`.**
 
-> **A `default` in `component-styles.json` is only the Style-tab's pre-filled suggestion — it is NOT applied automatically.** Nothing merges these defaults at render; a param takes effect only when you write that `S` key on the node yourself. If you want a listed default value (e.g. `VBtn` `fontColor:#ffffff`), write it into `S` explicitly. (Same rule as [../knowledge/04-styling.md](../knowledge/04-styling.md) — the two docs agree on this.)
+> **A `default` in `component-styles.json` is only the Style-tab's pre-filled suggestion — it is NOT applied automatically.** Nothing merges these defaults at render; a param takes effect only when you write that `S` key on the node yourself. If you want a listed default value (e.g. `VBtn` `fontColor:#ffffff`), write it into `S` explicitly. (Same rule as [../knowledge/styling.md](../knowledge/styling.md) — the two docs agree on this.)
 
 ### Editor types → params they emit (`COMPONENT_STYLE_TYPE`)
 | Editor `type` | Emits these `S` params |
@@ -61,7 +61,7 @@ Each component declares which style fields it supports (its `componentStyleList`
 | `display-text-decoration` | `textDecorationLine`, `textDecorationStyle`, `textDecorationColor` |
 
 ### `IComponentDefinition` fields (per component)
-- `componentStyleList` — the grouped style fields above.
+- the grouped style fields above (per component, in [component-styles.json](component-styles.json)).
 - `propMigrateList` — **old prop → style key** migration. E.g. `VBtn`/`VCard`: `color → backgroundColor`; `VTextField`: `color → labelDefaultFontColor`, `height → height`. (This is why setting a legacy `color` prop maps into `S`.)
 - `inheritedChildList` (→ node `SC`) — cascade a parent style to child sub-components (see §4). Bundled per component in [component-styles.json](component-styles.json) as the `inheritedChildList` key.
 - `propRemoveList` — deprecated props hidden by the editor (e.g. `VBtn`: `small`,`large`,`text`).
@@ -140,7 +140,7 @@ Reusable named styles created from the Style tab; the node references them via `
 
 ## 7. Containment rules (shared, editor-enforced)
 
-> Kept in sync with the identical block in [../knowledge/03-layout-and-slots.md](../knowledge/03-layout-and-slots.md) — update both. (Containment is enforced identically regardless of style era.)
+> Containment is enforced identically regardless of style era.
 
 | Rule | From |
 |------|------|
@@ -152,7 +152,7 @@ Other components have no hard accept-list, but container components with item pa
 
 ## 8. Breakpoint device ranges (shared)
 
-> Kept in sync with the identical table in [../knowledge/03-layout-and-slots.md](../knowledge/03-layout-and-slots.md) — update both. `S` ranges (e.g. `"xs-xl"`, `"md-xl"`) are built from these same device boundaries.
+> `S` ranges (e.g. `"xs-xl"`, `"md-xl"`) are built from these same device boundaries.
 
 | Key | Device | Min px | Max px |
 |-----|--------|--------|--------|
@@ -164,7 +164,7 @@ Other components have no hard accept-list, but container components with item pa
 
 ## 9. `class` token → `S` equivalent (audit reference)
 
-> Kept in sync with [mapping-S-vuetify-class.md](mapping-S-vuetify-class.md) — update both. This table is a **live dependency** of the class-prop audit rule (§6 above and the `S`-system pre-sync checklist at the end of [../knowledge/04-styling.md](../knowledge/04-styling.md)): before writing any `class` token as the Web-only last resort, check it here — if an `S` equivalent exists, write `S` and drop the token.
+> Full table: [mapping-S-vuetify-class.md](mapping-S-vuetify-class.md). This table is a **live dependency** of the class-prop audit rule (§6 above and the `S`-system final checklist at the end of [../knowledge/styling.md](../knowledge/styling.md)): before writing any `class` token as the Web-only last resort, check it here — if an `S` equivalent exists, write `S` and drop the token.
 
 **Has an `S` equivalent (don't leave in `class` if `S` is set):**
 
@@ -190,4 +190,4 @@ Other components have no hard accept-list, but container components with item pa
 
 Full token-by-token table (Turkish) + the legacy-migration framing: [mapping-S-vuetify-class.md](mapping-S-vuetify-class.md).
 
-Practical how-to and copy-paste patterns: [../knowledge/04-styling.md](../knowledge/04-styling.md).
+Practical how-to and copy-paste patterns: [../knowledge/styling.md](../knowledge/styling.md).

package/dist/studio-cli/{src/.ai-kit/AGENT_GUIDE-s.md → kits/ui-app-kit/.ai-kit/ui-kit/s-track.md}

@@ -1,30 +1,29 @@
-# Agent Operating Guide — `S` system track
+# Quick qjson — `S` system track
 
-> **Style system: `S` (new).** Follow this guide when the target is an `S`-system page — a new page, or one whose root-level `opt.V >= 2.0`. If the page is legacy (`opt.V` missing or `< 2.0`), stop and use [AGENT_GUIDE-legacy.md](AGENT_GUIDE-legacy.md) instead. Shared workflow, shared docs, and shared rules are in the dispatcher [AGENT_GUIDE.md](AGENT_GUIDE.md); this guide adds the `S`-track doc set and the styling/layout rules.
+> **Style system: `S` (new).** Follow this guide when the target is an `S`-system page — a new page, or one whose root-level `opt.V >= 2.0`. If the page is legacy (`opt.V` missing or `< 2.0`), stop and use [legacy-track.md](legacy-track.md) instead. Shared workflow, shared docs, and shared rules are in the dispatcher [index.md](index.md); this guide adds the `S`-track doc set and the styling/layout rules.
 
 ## The `S`-track doc set (open only these + the shared docs)
 - **Schema** → [reference/qjson-schema.md](reference/qjson-schema.md)
-- **Structure (start here)** → [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)
+- **Structure (start here)** → [knowledge/qjson-structure.md](knowledge/qjson-structure.md)
+- **Layout & slots** → [knowledge/layout-and-slots.md](knowledge/layout-and-slots.md)
+- **Styling how-to** → [knowledge/styling.md](knowledge/styling.md)
 - **Styling reference (`S`/`SC`/`SA` schema)** → [reference/styling-system.md](reference/styling-system.md)
 - **Component catalog** → [reference/component-catalog.md](reference/component-catalog.md)
-- **Page skeletons** → [knowledge/09-page-skeletons.md](knowledge/09-page-skeletons.md)
-- **Validation & sync (pre-sync checklist)** → [knowledge/10-validation-and-sync.md](knowledge/10-validation-and-sync.md)
+- **Page skeletons** → [knowledge/page-skeletons.md](knowledge/page-skeletons.md)
+- **Validation (final checklist)** → [knowledge/validation.md](knowledge/validation.md)
 - **Examples** → [examples/style/](examples/style/) only
-- **Styling+layout specialist subagent** → `quick-styling`
 
 ## Build & style
-1. **Build from a skeleton**, top-down (`Messaging` → optional service component → `VContainer` → rows/cols/cards → content). **A new page's `VContainer` content root is required** (rule S4 below), and **set the new page's `opt.V: 2.5`** (the current schema version — this is what makes it an `S`-system page). For large/visual pages, add **1–3 sections per edit** — never rewrite a whole page in one shot. Copy a skeleton from [knowledge/09-page-skeletons.md](knowledge/09-page-skeletons.md).
-2. **Style every component you add — set its `S` tag. Don't skip this.** `S` is the mechanism for *all* per-component design, layout included — size, spacing, grid column, flex direction/align/justify, colors, fonts, borders, shadows — keyed by resolution range (`"xs-xl"` = all sizes). For each node, set its `S` params from [reference/component-styles.json](reference/component-styles.json) — **including every param that carries a `default` in that component's block** (rule S3 below: write the default or your override, never omit it). If the component's block carries an `inheritedChildList`, copy it into the node's `SC` as-is (styles a child through its parent — `VBtn`/`VChip`/`VTabs` labels/icons) *in addition to* the child's own `S`, not instead of it. How-to: [knowledge/04-styling.md](knowledge/04-styling.md). **This is the single most-skipped step — a page returned without `S` is unstyled. Treat it as required.** Only when a component's `S` schema genuinely has no param for what you need: on **Web** you may set the `class` prop directly, as a last resort; on **Mobile** there is **no** `class` fallback — restructure with an `S`-capable component instead.
+1. **Build from a skeleton**, top-down (`Messaging` → optional service component → `VContainer` → rows/cols/cards → content). **A new page's `VContainer` content root is required** (rule S4 below), and **set the new page's `opt.V: 2.5`** (the current schema version — this is what makes it an `S`-system page). For large/visual pages, add **1–3 sections per edit** — never rewrite a whole page in one shot. Copy a skeleton from [knowledge/page-skeletons.md](knowledge/page-skeletons.md).
+2. **Style every component you add — set its `S` tag. Don't skip this.** `S` is the mechanism for *all* per-component design, layout included — size, spacing, grid column, flex direction/align/justify, colors, fonts, borders, shadows — keyed by resolution range (`"xs-xl"` = all sizes). For each node, set its `S` params from [reference/component-styles.json](reference/component-styles.json) — **including every param that carries a `default` in that component's block** (rule S3 below: write the default or your override, never omit it). If the component's block carries an `inheritedChildList`, copy it into the node's `SC` as-is (styles a child through its parent — `VBtn`/`VChip`/`VTabs` labels/icons) *in addition to* the child's own `S`, not instead of it. How-to: [knowledge/styling.md](knowledge/styling.md). **This is the single most-skipped step — a page returned without `S` is unstyled. Treat it as required.** Only when a component's `S` schema genuinely has no param for what you need: on **Web** you may set the `class` prop directly, as a last resort; on **Mobile** there is **no** `class` fallback — restructure with an `S`-capable component instead.
    - **Token-by-token `class` justification (before writing any `class` prop):** list every CSS token you are about to write; check the `class → S` table in [reference/styling-system.md](reference/styling-system.md) §9 — if an `S` equivalent exists, write the `S` param and drop the token. Only tokens with confirmed no `S` equivalent belong in `class`. Never bulk-copy a class string. **Violation example:** `class: 'fill-height'` when `S.height:"100%"` is set — `fill-height` = `height:100%`, so drop the class token.
-   - **Mandatory delegation threshold:** if the page has more than ~15 visual components, or is a dashboard/landing/hero recreating a visual design, do **not** self-style inline. Finish the structural pass, then make a separate Agent call with `subagent_type: "quick-styling"`, passing the file path + the node IDs needing styling. Only self-style inline (reading [knowledge/04-styling.md](knowledge/04-styling.md) yourself) for small pages or single-component tweaks.
-3. **Validate** against [knowledge/10-validation-and-sync.md](knowledge/10-validation-and-sync.md) (shared core + `S` style checklist), then compile.
+   - **Big pages get a dedicated styling pass:** if the page has more than ~15 visual components, or is a dashboard/landing/hero recreating a visual design, don't style ad-hoc while building. Finish the structural pass first, then read [knowledge/styling.md](knowledge/styling.md) and run a focused styling pass over every node you flagged. Styling inline as you build is fine for small pages or single-component tweaks.
+3. **Validate** against [knowledge/validation.md](knowledge/validation.md) (shared core + `S` style checklist), then compile.
 
 ## Non-negotiable `S`-track rules
-- **S1 — Don't author `O.layout`.** It's the legacy mechanism and does not belong on an `S` page. Size columns and any flex/grid/spacing intent via `S` instead: `S.col` for grid width, `S.flexDirection`/`alignItems`/`justifyContent` where the component's `componentStyleList` supports them (check [reference/component-styles.json](reference/component-styles.json)). **Do NOT use Vuetify's responsive column props** (`VCol.cols`/`.sm`/`.md`/`.lg`/`.xl`) — use `S.col` + resolution ranges (e.g. `"xs-sm": {"col":"12"}, "md-xl": {"col":"6"}`). Do NOT use `VRow.justify`/`VRow.align` props as style substitutes — if `S` can't express it on those components, that is the Web-only `class`-last-resort case.
+- **S1 — Don't author `O.layout`.** It's the legacy mechanism and does not belong on an `S` page. Size columns and any flex/grid/spacing intent via `S` instead: `S.col` for grid width, `S.flexDirection`/`alignItems`/`justifyContent` where the component's style block supports them (check [reference/component-styles.json](reference/component-styles.json)). **Do NOT use Vuetify's responsive column props** (`VCol.cols`/`.sm`/`.md`/`.lg`/`.xl`) — use `S.col` + resolution ranges (e.g. `"xs-sm": {"col":"12"}, "md-xl": {"col":"6"}`). Do NOT use `VRow.justify`/`VRow.align` props as style substitutes — if `S` can't express it on those components, that is the Web-only `class`-last-resort case.
 - **S2 — Prefer `S` over a Vuetify style-prop even when the prop is valid.** E.g. don't set `cols`/`sm`/`md`/`lg`/`xl` on `VCol` when `S.col` covers it; don't set `color` on `VBtn`/`VCard` when `S.backgroundColor` covers it; don't set the `elevation` prop when `S.boxShadow` covers it.
 - **S3 — Don't ship structure-only pages, and emit every default.** Every component you place gets an `S` object (range-keyed), and that `S` must include **ALL params that carry a `default` in the component's [reference/component-styles.json](reference/component-styles.json) block** — write the default value as-is, or your design's value where it differs. Never omit a default-valued param on the assumption it applies anyway (it does not — nothing merges defaults at render). For a component with a text/icon child (`VBtn`, `VChip`, `VTab`, …): the parent's own `S` still carries its full default set (fonts included), the child label/icon **also** carries its own `S` with its full default set (values matched to the design — e.g. white label text on a primary button), and the parent gets an **`SC`** — **copy the component's `inheritedChildList` block from [reference/component-styles.json](reference/component-styles.json) into `SC` as-is — the WHOLE block, never a hand-picked subset** (`VBtn`'s has 14 params, not just `fontColor`+`backgroundColor`; the validator reports `incomplete-SC`). Only components whose JSON block has an `inheritedChildList` get an `SC`; never invent mappings, never put `SC` on a component without one. Skipping `S` is the most common miss — it is not optional.
 - **S4 — New-page content root = `VContainer`.** A newly-created page must wrap all UI/visual content in a single top-level `VContainer`; the only non-`VContainer` top-level `pJson` siblings allowed are the non-visual `Messaging` event hub and an optional service component — `pJson: [Messaging, service?, VContainer{ … }]`. **New pages only:** when editing an existing page, keep its current root and do NOT insert a `VContainer` unless the user asks (real pages legitimately root on `VAppBar`, `VDataTable`, etc.).
-- **S5 — A multi-child `VCol` doesn't stack for free.** `VCol`'s flex direction defaults to row unless set — fix stacking with `"S": {"xs-xl": {"flexDirection": "column"}}` on that `VCol`. See the gotcha + copy-paste label/value pattern in [knowledge/03-layout-and-slots.md](knowledge/03-layout-and-slots.md).
+- **S5 — A multi-child `VCol` doesn't stack for free.** `VCol`'s flex direction defaults to row unless set — fix stacking with `"S": {"xs-xl": {"flexDirection": "column"}}` on that `VCol`. See the gotcha + copy-paste label/value pattern in [knowledge/layout-and-slots.md](knowledge/layout-and-slots.md).
 - **S6 — CSS Style Files are a Web-only true last resort** (project-level CSS, `@font-face`) — for cross-cutting rules neither `S` nor a component's `class` prop can express. Never rely on CSS for anything that must work on Mobile (no CSS there).

package/dist/studio-cli/{src/.ai-kit → kits/ui-app-kit/.claude}/skills/figma-to-qjson/SKILL.md

@@ -1,13 +1,13 @@
 ---
 name: figma-to-qjson
-description: Reconstruct a Quick / Plateau Studio .qjson page from a Figma design (a Figma selection URL). If the design isn't fetched yet, run the `studio figmaPull` command to populate a local .figma/ folder (node.json, file.json, render.json, imagefills.json, assets/*.svg), then turn that raw Figma node tree into a real qjson page. Use whenever the task is to convert a Figma frame/selection into a qjson page. Covers fetching via the `studio figmaPull` command, the Figma→qjson mapping rules, the geometry/style extraction recipe, the rect+text control-clustering heuristic, and asset handling. Delegates all qjson-authoring detail to the quick-qjson skill + .ai-kit kit.
+description: Reconstruct a Quick / Plateau Studio .qjson page from a Figma design (a Figma selection URL). If the design isn't fetched yet, run the `studio figmaPull` command to populate a local .figma/ folder (node.json, file.json, render.json, imagefills.json, assets/*.svg), then turn that raw Figma node tree into a real qjson page. Use whenever the task is to convert a Figma frame/selection into a qjson page. Covers fetching via the `studio figmaPull` command, the Figma→qjson mapping rules, the geometry/style extraction recipe, the rect+text control-clustering heuristic, and asset handling. Delegates all qjson-authoring detail to the quick-qjson skill + the ui-kit package.
 ---
 
 # Figma → QJSON reconstruction
 
 This skill turns a Figma design into a **Quick `.qjson` page**. The raw Figma responses live in a local **`.figma/`** folder; you produce that folder by **running the `studio figmaPull` command** (which wraps `figmaPull(url, token)`). This skill never calls the Figma API directly — it runs the command, then reads what the command wrote.
 
-It owns only the **translation knowledge** (Figma node tree → qjson components). For everything about *authoring* qjson (schema, props, styling, validation, project conventions) it defers to the **`quick-qjson`** skill and the **`.ai-kit/`** kit — read those; do not re-derive them here.
+It owns only the **translation knowledge** (Figma node tree → qjson components). For everything about *authoring* qjson (schema, props, styling, validation, project conventions) it defers to the **`quick-qjson`** skill and the **ui-kit** package ([`index.md`](../../../ui-kit/index.md)) — read those; do not re-derive them here.
 
 ## Get the design first (run `studio figmaPull`)
 Before the translation workflow below, you need the raw Figma responses in `.figma/`. Get them by running the **`studio figmaPull` command** (the CLI that wraps `figmaPull(url, token)` — it extracts `fileKey` + `node-id` from the URL itself):
@@ -93,7 +93,7 @@ Figma often keeps a button's **background rect** and its **label text** as *sepa
 | custom VECTOR group (logo/illustration) | `VImg` from an asset (see step 5) | type VECTOR/GROUP, not a glyph |
 | IMAGE fill (`imageRef`) | `VImg`, URL from `imagefills.json` | fill type IMAGE |
 
-Pick real props/events/styles from **`.ai-kit/reference/component-contracts.json`** and **`component-styles.json`** — never invent. Convert px → the kit's responsive grid (`col`, `S` blocks); do **not** reproduce absolute pixel coordinates.
+Pick real props/events/styles from **`ui-kit/reference/component-contracts.json`** and **`component-styles.json`** — never invent. Convert px → the kit's responsive grid (`col`, `S` blocks); do **not** reproduce absolute pixel coordinates.
 
 ### 5. Assets (vectors / logos)
 A deployed Quick app can't read local SVGs or Figma's expiring S3 URLs. So:
@@ -104,7 +104,7 @@ A deployed Quick app can't read local SVGs or Figma's expiring S3 URLs. So:
 Hand off to **`quick-qjson`**: build top-down `Messaging → VContainer > VRow > VCol > content`, mirror a sibling page in the workspace for ID style and `S`-block shape, author `pJson`/`lrids` only (omit `cJson`/`clrids` entirely — never write them, strip if present). Wire obvious behavior (e.g. a login button → a `Messaging` event that reads `components.<id>.qValue` and `quick.Quick.alert(...)`).
 
 ### 7. Validate + report
-`npx tsx .ai-kit/tools/check_qjson.ts <file>` — fix every ERROR. Then report: the new file, the **mapping decisions** (what each Figma element became), any **assumptions** (background, clustering, responsive sizing), **assets needing manual upload**, and the validation result.
+`studio buildQjson <file>` — fix every error. Then report: the new file, the **mapping decisions** (what each Figma element became), any **assumptions** (background, clustering, responsive sizing), **assets needing manual upload**, and the validation result.
 
 ## Gotchas (these trip up naive conversions)
 - **Artboard ≠ background.** Use the full-bleed shape's fill, not `frame.fills`.

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

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

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

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