@starci/skills 1.1.0

package/knowledge/ui/INDEX.md

@@ -0,0 +1,101 @@
+# UI knowledge
+
+This tree holds the universal UI law shared by every published Grammar family, split into three
+groups by the operator that reads each one.
+It owns 115 stable live X-n laws (36 in composition, 60 in presentation, 19 in proof), plus five
+composition ids that are retired into COVERAGE-1 and never reused, together with observable
+selection conditions, ownership decisions, deterministic verdicts, and audit vectors. It is not an implementation or consumer cookbook. It does not own business facts, page copy,
+routes, permissions, artwork identity, product effects, or family material choices.
+
+## Runtime policy
+
+- Canonical agent/runtime knowledge is the English `.md` file only.
+- Same-stem `.vi.md` files are complete human-review mirrors. Never load, index, or cite them as runtime
+  authority.
+- Grammar operators resolve the smallest relevant canonical file and rule ID. Individual files omit
+  per-topic routing metadata.
+- Rule IDs are stable public knowledge addresses. Append the next sequential `PREFIX-n`; never
+  renumber, reuse, or silently change the meaning of an existing ID.
+- Knowledge owns invariant decisions and audit vectors, not implementation status, migration plans,
+  workflows, operator DAGs, or task orchestration. Current capability/debt belongs in plans and audits.
+
+## Grammar binding
+
+`@starci/grammar/common` is the public authority for props, semantics, renderer anatomy, state,
+accessibility, composition, and universal implementation. A family-selected application imports
+exactly the selected family stylesheet; that stylesheet imports Common. Direct
+`@starci/grammar/common/styles.css` consumption is reserved for intentional familyless Common usage
+and isolated test harnesses. An application must not import both paths for the same rendered tree.
+
+A visual family is a props-compatible scoped overlay declared through `defineGrammarFamily`. It may
+replace a known Common renderer with the exact compatible props or add a non-colliding extension;
+its stylesheet is scoped by `data-grammar-family`. It must preserve Common meaning, state behavior,
+accessibility, ownership, and substitutability.
+
+Business/application code selects one family and supplies domain content, data, permissions,
+handlers, and verified state. Application CSS may own page canvas, product layout/content/media, and
+placement through public extension points. It must not reach through, rebuild, or override Common-owned
+anatomy, spacing, semantics, state, focus, or variants. Family documents record overlay choices and conformance
+evidence; they never duplicate or redefine these universal laws. A missing reusable capability is a
+Common gap, not permission for product-local anatomy or a family-specific universal rule.
+
+## Groups
+
+A topic lives with the operator that reads it. A topic no operator reads has no reason to exist.
+
+| Group | Decides | Read by |
+| --- | --- | --- |
+| [`composition/`](composition/INDEX.md) | Constraints a direction must satisfy, after taste is decided in grammars | `frontend.direction.decide` |
+| [`presentation/`](presentation/INDEX.md) | Which CSS value an app-owned boundary takes | `frontend.presentation.resolve` |
+| [`proof/`](proof/INDEX.md) | What only becomes true once rendered | `frontend.surface.audit` |
+
+The test that places a topic is whether reading source answers it. A spacing value is readable from a
+class, so it is presentation. The number of dominant actions is settled before any tree exists, so it
+is composition. Whether keyboard order matches visual order needs a running page, so it is proof.
+
+Code conventions for the source that produces all of this live in [`patterns/`](../patterns/fe/INDEX.md).
+Family realization lives in [`grammars/`](../grammars/starci/INDEX.md).
+
+## Rule binding architecture
+
+Knowledge defines what a rule means; it does not hard-code which current DOM instance passes it. A
+Common reusable exposes stable component, slot, and relationship anchors. A co-located or generated
+binding registry maps those anchors to rules with at least:
+
+- a stable binding ID and version;
+- `ruleId`;
+- exact target slot or between-slot relationship;
+- the `when` variant, state, or composition selector;
+- the expected owner anchor.
+
+The registry never duplicates the rule's metric or behavior. Applications do not hand-author rule
+arrays, and no markup can label itself as passing. The auditor resolves bindings from stable DOM
+anchors, collects rendered evidence, and records rule IDs and findings in the audit result. Unknown
+rule IDs, missing slots, stale anchors, and orphan bindings fail validation. DOM outside a registered
+reusable may be selected by semantic inspection, but it cannot receive `PASS` without the same owner
+and runtime evidence.
+
+A contract claim is the one exception, and it is not a self-assessment. A rule-binding operator may
+emit `data-contract` on a node it resolved, as a space-separated list of the identifiers that node
+claims to satisfy. The claim states an intention so the auditor can contradict it: a node claiming
+`GAP-4` while the computed gap is `1.5rem` is a finding, a node carrying spacing that claims nothing
+is an unowned value, and a claimed identifier absent from published knowledge fails validation. A
+claim never carries a verdict, score, or `PASS`, and a hand-written one is invalid because only the
+operator's receipt makes it verifiable. Grammar emits the same claim on the elements that realize a
+relationship it owns, the rows of each topic's "Common already owns" table, so a Grammar-internal
+value is never an unowned value and the resolver never re-claims those nodes. The receipt remains the
+durable record, so the attribute may be stripped from a production build without weakening any audit.
+
+## Canonical verdict model
+
+Base verdicts are exactly: `PASS`, `COMMON_CAPABILITY_MISSING`, `COMMON_IMPLEMENTATION_GLITCH`,
+`FAMILY_OVERRIDE_GLITCH`, `APP_REIMPLEMENTATION`, `APP_OVERRIDE`, `APP_WORKAROUND`, `PROOF_MISSING`.
+
+Cause tags are exactly: `VALUE_DRIFT`, `VENDOR_LEAK`, `WRONG_OWNER`, `OFF_SCALE_VALUE`,
+`DOUBLE_OWNER`, `PHYSICAL_SIDE_DRIFT`, `STATE_OR_VIEWPORT_DRIFT`.
+
+Evaluate capability, isolated Common output, family delta, app delta, then owner/state evidence. One
+finding contains one base verdict and zero or more cause tags. Multiple failed layers produce linked
+findings; they are not collapsed into a composite base verdict or suppressed by first-match logic.
+`PASS` is valid only when no failure finding exists.
+

package/knowledge/ui/INDEX.vi.md

@@ -0,0 +1,101 @@
+# UI knowledge
+
+Cây này chứa universal UI law dùng chung cho mọi Grammar family đã publish, chia thành ba nhóm theo
+operator đọc từng law.
+Nó sở hữu 115 law X-n ổn định đang sống (36 ở composition, 60 ở presentation, 19 ở proof), cộng
+năm id composition đã nghỉ vào COVERAGE-1 và không bao giờ dùng lại, cùng với selection condition
+quan sát được, ownership decision, deterministic verdict và audit vector. Đây không phải implementation hay consumer cookbook. Nó không sở hữu business fact, copy riêng của page, route, permission,
+identity artwork, effect sản phẩm hay lựa chọn material của family.
+
+## Runtime policy
+
+- Knowledge chuẩn cho agent/runtime chỉ là file `.md` tiếng Anh.
+- File `.vi.md` cùng tên là bản mirror đầy đủ dành cho human review. Không bao giờ load, index hay
+  cite chúng như runtime authority.
+- Grammar operator resolve file canonical nhỏ nhất liên quan cùng rule ID. Từng file không mang
+  routing metadata theo topic.
+- Rule ID là địa chỉ ổn định, công khai. Chỉ được nối thêm `PREFIX-n` kế tiếp theo thứ tự; không bao
+  giờ đánh số lại, tái sử dụng, hay lặng lẽ đổi nghĩa một ID đã tồn tại.
+- Knowledge sở hữu invariant decision và audit vector, không sở hữu implementation status, migration
+  plan, workflow, operator DAG hay task orchestration. Capability/debt hiện tại thuộc về plan và audit.
+
+## Grammar binding
+
+`@starci/grammar/common` là authority công khai cho props, semantics, renderer anatomy, state,
+accessibility, composition và universal implementation. Một application đã chọn family chỉ import
+đúng stylesheet của family đó; stylesheet đó import Common. Import trực tiếp
+`@starci/grammar/common/styles.css` chỉ dành cho trường hợp dùng Common không family có chủ đích và
+cho test harness cô lập. Một application không được import cả hai đường cho cùng một cây đã render.
+
+Một visual family là scoped overlay tương thích props, khai báo qua `defineGrammarFamily`. Nó có thể
+thay một Common renderer đã biết bằng props tương thích chính xác, hoặc thêm extension không xung
+đột; stylesheet của nó được scope bằng `data-grammar-family`. Nó phải giữ nguyên meaning, state
+behavior, accessibility, ownership và substitutability của Common.
+
+Business/application code chọn đúng một family và cung cấp domain content, data, permission, handler
+và verified state. Application CSS được phép sở hữu page canvas, product layout/content/media và
+placement thông qua extension point công khai. Nó không được reach-through, dựng lại hay override
+anatomy, spacing, semantics, state, focus hay variant do Common sở hữu. Family document ghi lại lựa
+chọn overlay và conformance evidence; chúng không bao giờ lặp lại hay định nghĩa lại những universal
+law này. Một capability tái dùng còn thiếu là gap của Common, không phải giấy phép cho anatomy cục bộ
+theo sản phẩm hay một universal rule riêng của family.
+
+## Ba nhóm
+
+Một topic sống cùng operator đọc nó. Topic nào không operator nào đọc thì không có lý do tồn tại.
+
+| Nhóm | Quyết định | Ai đọc |
+| --- | --- | --- |
+| [`composition/`](composition/INDEX.vi.md) | Ràng buộc mà một direction phải thoả, sau khi gu thẩm mỹ đã quyết ở grammars | `frontend.direction.decide` |
+| [`presentation/`](presentation/INDEX.vi.md) | Ranh giới do app sở hữu lấy giá trị CSS nào | `frontend.presentation.resolve` |
+| [`proof/`](proof/INDEX.vi.md) | Thứ chỉ đúng sau khi đã render | `frontend.surface.audit` |
+
+Phép thử để xếp một topic là: đọc source có trả lời được không. Giá trị khoảng cách đọc được từ class
+nên thuộc presentation. Số hành động trội đã chốt trước khi có cây nên thuộc composition. Thứ tự bàn
+phím có khớp thứ tự nhìn thấy hay không thì phải chạy mới biết, nên thuộc proof.
+
+Quy ước viết code sinh ra tất cả những thứ này nằm ở [`patterns/`](../patterns/fe/INDEX.vi.md), còn
+phần hiện thực của từng họ nằm ở [`grammars/`](../grammars/starci/INDEX.vi.md).
+
+## Rule binding architecture
+
+Knowledge định nghĩa một rule nghĩa là gì; nó không hard-code instance DOM hiện tại nào pass rule đó.
+Một Common reusable expose stable anchor cho component, slot và relationship. Một binding registry
+co-located hoặc generated map các anchor đó sang rule, với tối thiểu:
+
+- một binding ID và version ổn định;
+- `ruleId`;
+- target slot hoặc between-slot relationship chính xác;
+- `when` variant, state hoặc composition selector;
+- expected owner anchor.
+
+Registry không bao giờ lặp lại metric hay behavior của rule. Application không tự tay viết mảng rule,
+và không markup nào tự gán nhãn pass cho chính nó. Auditor resolve binding từ stable DOM anchor, thu
+thập rendered evidence, và ghi rule ID cùng finding vào audit result. Rule ID không rõ, slot thiếu,
+anchor cũ và binding mồ côi đều fail validation. DOM nằm ngoài một reusable đã đăng ký có thể được
+chọn bằng semantic inspection, nhưng không thể nhận `PASS` nếu thiếu cùng owner và runtime evidence.
+
+Contract claim là ngoại lệ duy nhất, và nó không phải self-assessment. Một rule-binding operator có
+thể emit `data-contract` trên node nó đã resolve, dưới dạng danh sách identifier cách nhau bằng
+space mà node đó tuyên bố thoả mãn. Claim nêu ra một ý định để auditor có thể phản bác: một node claim
+`GAP-4` trong khi gap tính ra là `1.5rem` là một finding, một node mang spacing mà không claim gì là
+một giá trị vô chủ, và một identifier được claim nhưng không có trong knowledge đã publish thì fail
+validation. Claim không bao giờ mang verdict, score hay `PASS`, và một claim viết tay là không hợp lệ
+vì chỉ receipt của operator mới verify được. Grammar emit cùng một claim trên những element hiện thực
+một relationship nó sở hữu, chính là các row trong bảng "Common already owns" của từng topic, nên một
+giá trị nội bộ của Grammar không bao giờ là giá trị vô chủ và resolver không claim lại những node đó.
+Receipt vẫn là bản ghi bền vững, nên attribute này có thể bị strip khỏi production build mà không làm
+yếu bất kỳ audit nào.
+
+## Canonical verdict model
+
+Base verdict chỉ gồm đúng: `PASS`, `COMMON_CAPABILITY_MISSING`, `COMMON_IMPLEMENTATION_GLITCH`,
+`FAMILY_OVERRIDE_GLITCH`, `APP_REIMPLEMENTATION`, `APP_OVERRIDE`, `APP_WORKAROUND`, `PROOF_MISSING`.
+
+Cause tag chỉ gồm đúng: `VALUE_DRIFT`, `VENDOR_LEAK`, `WRONG_OWNER`, `OFF_SCALE_VALUE`,
+`DOUBLE_OWNER`, `PHYSICAL_SIDE_DRIFT`, `STATE_OR_VIEWPORT_DRIFT`.
+
+Đánh giá theo thứ tự capability, output cô lập của Common, delta của family, delta của app, rồi mới
+tới owner/state evidence. Một finding chứa đúng một base verdict và không hoặc nhiều cause tag. Nhiều
+layer fail cùng lúc tạo ra các finding liên kết; chúng không bị gộp thành một base verdict tổng hợp
+hay bị first-match logic che mất. `PASS` chỉ hợp lệ khi không tồn tại failure finding nào.

package/knowledge/ui/composition/INDEX.md

@@ -0,0 +1,60 @@
+# UI composition
+
+Composition is the decision layer that runs before any DOM exists:
+
+```text
+business
+-> composition decides regions, rank, actions, states and emphasis
+-> presentation resolves CSS values on app-owned boundaries
+-> rendered UI
+```
+
+Every rule in this folder is consumed by the direction operator. That operator answers the questions
+that must be settled while the page is still a description: which regions the page has, which
+content outranks which, which action carries the decision, which conditions the feature can be in,
+what the reader is told at each outcome, and where the scarce dominant emphasis is spent. These
+topics belong together because each of them is a commitment made before rendering, and because they
+constrain one another — a region without an anchor has no hierarchy to spend accent on, and a state
+with no carrier has nothing for feedback to describe. Nothing here can be repaired by a later CSS
+value, which is exactly why it is decided first.
+
+## Catalog
+
+| Knowledge | What it decides | Rules |
+| --- | --- | --- |
+| [Layout](layout.md) | Which visible task regions exist, who owns their tracks and scrolling | LAYOUT-1 to LAYOUT-4 |
+| [Hierarchy](hierarchy.md) | Which information rank each piece of meaning receives | HIERARCHY-1 to HIERARCHY-5 |
+| [Responsive](responsive.md) | What survives as space changes, and which query owns the change | RESPONSIVE-1 to RESPONSIVE-4 |
+| [CTA](cta.md) | Which action carries the decision, and what its emphasis promises | CTA-1 to CTA-5 |
+| [Action](action.md) | What one activation does, and who owns the effect and the pending state | ACTION-1 to ACTION-3 |
+| [State](state.md) | Which conditions exist, and which published carrier holds each one | STATE-1 to STATE-7 |
+| [Feedback](feedback.md) | Who reports a failure, a correction, a recovery, and a result | FEEDBACK-1 to FEEDBACK-3 |
+| [Accent](accent.md) | Where the scarce strongest emphasis is spent | ACCENT-1 to ACCENT-5 |
+| [Coverage](coverage.md) | What the direction receipt must enumerate before it is emitted | COVERAGE-1 |
+
+Five per-topic coverage rules were merged into COVERAGE-1, and a retired address is never reused:
+retired are `ACTION-4`, `STATE-4`, `FEEDBACK-4`, `LAYOUT-5`, and `RESPONSIVE-5`.
+
+## Rule shape
+
+`LAYOUT-1`, `STATE-5`, and the other `PREFIX-n` names are stable ordinal addresses within their
+topic. The number is not a severity, a component variant, or a value on a scale.
+
+Every rule carries its heading, one line naming what the rule governs, and one table:
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | The concrete situation that reaches this rule. | A falsifiable statement about the direction receipt or the composed tree, in language the product can read. |
+
+The `Assert` cell states a predicate the receipt or the composed tree either satisfies or fails, not
+advice and not a class name. It may name a published component or prop where that is what must be
+carried, but it never resolves a CSS value; that belongs to presentation. Taste and layout are
+decided in `knowledge/grammars/starci`; these rules only say what a direction must satisfy.
+
+A case that belongs to a neighbouring rule is not a table row. It goes on one line after the table,
+as `Not this rule: <condition> is PREFIX-n`. Each file closes with a
+`## What this file does not decide` section linking its siblings and the proof knowledge that
+observes the result.
+
+Component and prop names in these files resolve to `@starci/grammar/common`. An API that does not
+exist there is not written into a rule; a required capability that is missing is recorded as a gap.

package/knowledge/ui/composition/INDEX.vi.md

@@ -0,0 +1,63 @@
+# UI composition
+
+Composition là tầng quyết định chạy trước khi có bất kỳ cây DOM nào:
+
+```text
+business
+-> composition quyết định vùng, cấp độ, action, state và điểm nhấn
+-> presentation chốt giá trị CSS trên boundary do app sở hữu
+-> UI đã render
+```
+
+Mọi rule trong folder này được operator direction tiêu thụ. Operator đó trả lời những câu hỏi phải
+chốt xong khi trang vẫn còn là một bản mô tả: trang có những vùng nào, nội dung nào đứng trên nội
+dung nào, action nào mang quyết định, tính năng có thể rơi vào những điều kiện nào, người đọc được
+nói gì ở mỗi kết cục, và phần nhấn mạnh mạnh nhất vốn khan hiếm thì tiêu ở đâu. Những chủ đề này
+nằm chung một chỗ vì mỗi cái đều là một cam kết đưa ra trước lúc render, và vì chúng ràng buộc lẫn
+nhau: một vùng không có anchor thì chẳng có cấp độ nào để tiêu accent lên, còn một state không có
+carrier thì feedback không có gì để mô tả. Không thứ gì ở đây sửa được bằng một giá trị CSS về sau,
+và đó chính là lý do nó được quyết trước.
+
+## Danh mục
+
+| Knowledge | Quyết định điều gì | Rule |
+| --- | --- | --- |
+| [Layout](layout.vi.md) | Trang có những vùng nhiệm vụ nào, ai sở hữu track và scroll của chúng | LAYOUT-1 đến LAYOUT-4 |
+| [Hierarchy](hierarchy.vi.md) | Mỗi mảng ý nghĩa nhận cấp độ thông tin nào | HIERARCHY-1 đến HIERARCHY-5 |
+| [Responsive](responsive.vi.md) | Cái gì sống sót khi không gian đổi, và query nào sở hữu thay đổi đó | RESPONSIVE-1 đến RESPONSIVE-4 |
+| [CTA](cta.vi.md) | Action nào mang quyết định, và điểm nhấn của nó hứa điều gì | CTA-1 đến CTA-5 |
+| [Action](action.vi.md) | Một lần kích hoạt làm gì, ai sở hữu hiệu ứng và trạng thái pending | ACTION-1 đến ACTION-3 |
+| [State](state.vi.md) | Có những điều kiện nào, và carrier công khai nào giữ từng cái | STATE-1 đến STATE-7 |
+| [Feedback](feedback.vi.md) | Ai báo lỗi, ai chỉ cách sửa, ai phục hồi, ai công bố kết quả | FEEDBACK-1 đến FEEDBACK-3 |
+| [Accent](accent.vi.md) | Phần nhấn mạnh mạnh nhất và khan hiếm được tiêu ở đâu | ACCENT-1 đến ACCENT-5 |
+| [Coverage](coverage.vi.md) | Receipt của direction phải liệt kê những gì trước khi được phát ra | COVERAGE-1 |
+
+Năm rule phạm vi của từng chủ đề đã gộp vào COVERAGE-1, và một địa chỉ đã nghỉ thì không dùng lại:
+đã nghỉ là `ACTION-4`, `STATE-4`, `FEEDBACK-4`, `LAYOUT-5` và `RESPONSIVE-5`.
+
+## Cấu trúc rule
+
+`LAYOUT-1`, `STATE-5` và các tên `PREFIX-n` khác là địa chỉ thứ tự ổn định trong chủ đề của chúng.
+Con số không phải mức độ nghiêm trọng, không phải variant của component, cũng không phải một vị trí
+trên thang giá trị.
+
+Mỗi rule gồm heading, một dòng gọi tên thứ mà rule chi phối, và đúng một bảng:
+
+| Case | Dùng khi | Khẳng định |
+| --- | --- | --- |
+| Case 1 | Tình huống cụ thể dẫn tới rule này. | Một khẳng định phủ định được về receipt của direction hoặc về cây đã dựng, viết bằng ngôn ngữ mà phía sản phẩm đọc được. |
+
+Ô `Khẳng định` nêu một mệnh đề mà receipt hoặc cây đã dựng hoặc thoả hoặc trượt, không phải lời
+khuyên và không phải tên class. Nó có thể gọi tên một component hay prop công khai khi đó chính là
+thứ phải được mang, nhưng nó không bao giờ chốt một giá trị CSS; phần đó thuộc về presentation. Bố
+cục và gu thẩm mỹ được quyết trong `knowledge/grammars/starci`; các rule ở đây chỉ nói một direction
+phải thoả điều gì.
+
+Một case thuộc về rule hàng xóm thì không nằm trong bảng. Nó đứng thành một dòng ngay sau bảng, theo
+dạng `Không phải rule này: <điều kiện> thuộc PREFIX-n`. Mỗi file khép lại bằng mục
+`## File này không quyết định`, dẫn sang các file anh em và sang nhóm proof, nơi kết quả được quan
+sát.
+
+Tên component và tên prop trong các file này đều phải phân giải được về `@starci/grammar/common`.
+Một API không tồn tại ở đó thì không được viết vào rule; một năng lực cần mà chưa có thì ghi nhận
+thành capability gap.

package/knowledge/ui/composition/accent.md

@@ -0,0 +1,73 @@
+# Accent composition
+
+This file answers one question: the page has a small budget of strongest emphasis, so where is it
+spent, and what does spending it there promise?
+
+Accent is scarce by design. Every extra dominant treatment reduces what the previous one meant, so
+the decision is about allocation, not about paint. Nothing in this file may change what the product
+is claiming; accent only makes an existing claim easier to find.
+
+## ACCENT-1 — One dominant decision accent
+
+Governs how many strongest treatments a decision region may hold.
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | A decision region offers one clear next action | Exactly one dominant accent sits inside that decision owner, on `Button variant="primary"`, whether it carries `onPress` or `href` |
+| Case 2 | Sibling actions share the region | Each sibling carries a weaker published variant that states its real consequence |
+| Case 3 | Two peer choices genuinely carry equal consequence | Neither carries the dominant accent, and no paint breaks the tie |
+| Case 4 | Separate regions each have their own next step | Each dominant accent is counted within its own decision owner, and none is counted twice |
+| Case 5 | The count would change in a compact layout or a loading state | The count of dominant accents is identical in every state and at every width |
+
+## ACCENT-2 — Compact identity accent
+
+Governs the small visual anchor that helps a reader scan peers.
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | Peer features, rows, or sections need a compact anchor for scanning | `IconTile tone="accent"`, or `Icon` in its declared role, carries it, with a reviewed semantic glyph named in the receipt |
+| Case 2 | The anchor sits beside a name | The visible text identity remains, and the mark never replaces it |
+| Case 3 | The direction wants a different plate size or shape | The published geometry carries it, at `sm` 32 or `md` 40 nominal CSS pixels, and no coloured rounded square is rebuilt around an icon |
+| Case 4 | The glyph would be the only identity for an unfamiliar feature | Every unfamiliar feature carries a name; no glyph is its sole identity |
+
+## ACCENT-3 — Selection, destination, and focus stay distinct
+
+Governs three treatments that tend to collapse into one another.
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | A region can hold a persistent selection, a destination, a command emphasis, and keyboard focus at once | Each of the four resolves to its own published owner and its own treatment |
+| Case 2 | Selection is being expressed | Selection carries a non-colour cue and survives focus moving elsewhere |
+| Case 3 | A destination sits inside body copy | It is identifiable as a destination at rest, before hover and before focus |
+| Case 4 | Colour is removed, or the viewer is in forced colours | All three remain distinguishable, because none relies on fill alone |
+| Case 5 | A brief hover is mistaken for selection | No transient cue carries a persistent value |
+
+## ACCENT-4 — Accent progress requires a real measurement
+
+Governs the accent fill that reads as completion.
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | Authority supplies a verified value from 0 to 100 | `Progress` carries a truthful `label` and that `value`, and the accent fill presents that measurement only |
+| Case 2 | The value has not resolved | `isSkeleton` is bound, and no zero-length bar states a measurement nobody made |
+| Case 3 | A bar, ring, or line is decorative, or expresses a ranking rather than completion | It carries no progress semantics at all |
+| Case 4 | The fill is tempting to read as an outcome | The fill states a measurement, and a separate outcome owner states the outcome |
+
+## ACCENT-5 — Outcome and destructive authority are not accent
+
+Governs the treatments accent must not stand in for.
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | Content reports success, warning, danger, pending, or selection | `Badge`, a presentation-state owner, or the current-state owner carries it; the primary accent carries none of them |
+| Case 2 | A final destructive CTA is required | A typed danger action treatment is required first, and while `ButtonVariant` publishes no danger value the receipt records that gap |
+| Case 3 | Local red would bridge that gap today | No local red and no family repaint of `primary` appears against that action |
+| Case 4 | An ordinary primary action looks consequential | Consequence and confirmation are named in the product decision, not inferred from the emphasis |
+
+## What this file does not decide
+
+Which rank the content carries is [Hierarchy](hierarchy.md), and which action deserves the decision
+emphasis is [CTA](cta.md). Which conditions the state owners can be in is [State](state.md).
+Whether a distinction survives forced colours and reduced motion once rendered is
+[Accessibility](../proof/accessibility.md) and [Motion](../proof/motion.md), and whether the
+emphasis claims something authority never said is [Render truth](../proof/render-truth.md).

package/knowledge/ui/composition/accent.vi.md

@@ -0,0 +1,74 @@
+# Accent composition
+
+File này trả lời đúng một câu hỏi: trang chỉ có một ngân sách nhỏ cho phần nhấn mạnh mạnh nhất, vậy
+ngân sách đó tiêu ở đâu, và tiêu ở đó thì hứa điều gì.
+
+Accent khan hiếm là do thiết kế. Mỗi treatment chủ đạo thêm vào lại làm giảm ý nghĩa của cái trước
+đó, nên đây là quyết định về phân bổ chứ không phải về sơn phết. Không thứ gì trong file này được
+đổi điều mà sản phẩm đang tuyên bố; accent chỉ làm cho một tuyên bố sẵn có dễ tìm hơn.
+
+## ACCENT-1 — Một điểm nhấn quyết định chủ đạo
+
+Chi phối số treatment mạnh nhất mà một vùng quyết định được giữ.
+
+| Case | Dùng khi | Khẳng định |
+| --- | --- | --- |
+| Case 1 | Một vùng quyết định có đúng một bước kế tiếp rõ ràng | Đúng một điểm nhấn chủ đạo nằm bên trong decision owner đó, trên `Button variant="primary"`, dù nó mang `onPress` hay `href` |
+| Case 2 | Các action anh em cùng ở trong vùng | Mỗi action anh em mang một variant công khai yếu hơn, nói đúng hệ quả thật của nó |
+| Case 3 | Hai lựa chọn ngang hàng thật sự mang hệ quả ngang nhau | Không cái nào mang điểm nhấn chủ đạo, và không phần sơn nào phá thế hoà |
+| Case 4 | Nhiều vùng tách biệt, mỗi vùng có bước kế tiếp riêng | Mỗi điểm nhấn chủ đạo được đếm trong chính decision owner của nó, và không cái nào bị đếm hai lần |
+| Case 5 | Con số đó sẽ đổi ở bố cục hẹp hoặc ở trạng thái đang tải | Số điểm nhấn chủ đạo trùng khít nhau ở mọi state và mọi bề rộng |
+
+## ACCENT-2 — Điểm nhấn định danh gọn
+
+Chi phối cái mỏ neo thị giác nhỏ giúp người đọc quét qua các mục ngang hàng.
+
+| Case | Dùng khi | Khẳng định |
+| --- | --- | --- |
+| Case 1 | Các tính năng, hàng hoặc section ngang hàng cần một mỏ neo gọn để quét | `IconTile tone="accent"`, hoặc `Icon` ở vai trò đã khai báo, mang nó, với glyph ngữ nghĩa đã duyệt được gọi tên trong receipt |
+| Case 2 | Mỏ neo nằm cạnh một cái tên | Phần chữ nhìn thấy được ở lại, và dấu hiệu không bao giờ thay chỗ nó |
+| Case 3 | Direction muốn một plate khác cỡ hoặc khác hình | Geometry đã công bố mang nó, ở `sm` 32 hoặc `md` 40 pixel CSS danh nghĩa, và không ô bo tròn có màu nào được dựng lại quanh một icon |
+| Case 4 | Glyph sẽ là danh tính duy nhất của một tính năng xa lạ | Mọi tính năng xa lạ đều mang một cái tên; không glyph nào là danh tính duy nhất của nó |
+
+## ACCENT-3 — Selection, điểm đến và focus vẫn tách bạch
+
+Chi phối ba treatment hay bị nhập lại thành một.
+
+| Case | Dùng khi | Khẳng định |
+| --- | --- | --- |
+| Case 1 | Một vùng có thể cùng lúc mang selection bền, một điểm đến, một điểm nhấn câu lệnh và focus bàn phím | Cả bốn thứ đều phân giải về owner công khai riêng và treatment riêng của mình |
+| Case 2 | Đang diễn đạt selection | Selection mang một dấu hiệu không dựa vào màu và sống sót khi focus dời đi chỗ khác |
+| Case 3 | Một điểm đến nằm trong đoạn văn | Nó nhận ra được là điểm đến ngay lúc nghỉ, trước hover và trước focus |
+| Case 4 | Màu bị bỏ đi, hoặc người xem ở chế độ forced colors | Cả ba vẫn phân biệt được, vì không cái nào chỉ dựa vào phần tô |
+| Case 5 | Một cú hover thoáng qua bị nhầm là selection | Không dấu hiệu thoáng qua nào mang một giá trị bền |
+
+## ACCENT-4 — Accent cho tiến độ đòi một phép đo thật
+
+Chi phối phần tô accent đọc lên như mức hoàn thành.
+
+| Case | Dùng khi | Khẳng định |
+| --- | --- | --- |
+| Case 1 | Authority cấp một giá trị đã kiểm chứng từ 0 đến 100 | `Progress` mang `label` trung thực và đúng `value` đó, và phần tô accent chỉ trình bày phép đo ấy |
+| Case 2 | Giá trị chưa giải quyết | `isSkeleton` được gắn, và không thanh dài bằng không nào nêu ra một phép đo không ai thực hiện |
+| Case 3 | Một thanh, vòng hay đường chỉ để trang trí, hoặc diễn đạt thứ hạng chứ không phải mức hoàn thành | Nó không mang ngữ nghĩa progress nào cả |
+| Case 4 | Phần tô rất dễ bị đọc thành một kết cục | Phần tô nêu một phép đo, và một owner kết cục riêng nêu kết cục |
+
+## ACCENT-5 — Kết cục và authority huỷ hoại không phải là accent
+
+Chi phối những treatment mà accent không được đứng thay.
+
+| Case | Dùng khi | Khẳng định |
+| --- | --- | --- |
+| Case 1 | Nội dung báo thành công, cảnh báo, nguy hiểm, đang chạy hoặc selection | `Badge`, một presentation-state owner, hoặc owner của trạng thái hiện hành mang nó; accent primary không mang thứ nào trong số đó |
+| Case 2 | Cần một CTA huỷ hoại cuối cùng | Trước hết cần một treatment action danger có kiểu, và chừng nào `ButtonVariant` chưa công bố giá trị danger thì receipt ghi nhận gap đó |
+| Case 3 | Màu đỏ cục bộ có thể lấp gap đó ngay hôm nay | Không màu đỏ cục bộ nào và không lần sơn lại `primary` của family nào đứng cạnh action đó |
+| Case 4 | Một action primary bình thường trông có vẻ nặng hệ quả | Hệ quả và bước xác nhận được gọi tên trong quyết định sản phẩm, không suy ra từ phần nhấn mạnh |
+
+## File này không quyết định
+
+Nội dung mang cấp độ nào thuộc [Hierarchy](hierarchy.vi.md), và action nào xứng đáng nhận điểm nhấn
+quyết định thuộc [CTA](cta.vi.md). Các state owner có thể ở những điều kiện nào thuộc
+[State](state.vi.md). Một khác biệt có sống sót qua forced colors và qua reduced motion sau khi
+render không thuộc [Accessibility](../proof/accessibility.vi.md) và [Motion](../proof/motion.vi.md),
+còn điểm nhấn có tuyên bố điều mà authority chưa từng nói không thuộc
+[Render truth](../proof/render-truth.vi.md).

package/knowledge/ui/composition/action.md

@@ -0,0 +1,55 @@
+# Action composition
+
+This file answers one question: when the reader activates something, what exactly happens, and who
+owns it?
+
+Action decisions come before the tree exists because they settle the count of owners and the count
+of effects. A single activation reaching two handlers, or a command wearing anchor semantics, is a
+composition mistake that no later styling can repair.
+
+## ACTION-1 — One activation, one effect
+
+Governs how many things may respond to a single press.
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | An activation changes application state | Exactly one node owns the effect, and it is `Button`, or `TextAction` where the command reads as text; no second node carries `onPress` for the same activation |
+| Case 2 | The command participates in a form | The receipt names the chosen `Button.type`, so submit behaviour is stated rather than inherited from the enclosing form |
+| Case 3 | The direction wants the whole row or container to be clickable too | The receipt names one owner for that activation; no clickable wrapper encloses a published command that owns the same effect |
+| Case 4 | An ancestor or a document-level listener exists on the same path | No ancestor or document listener on that path responds to the same activation |
+
+Not this rule: whether the surface itself is the action is STATE-5.
+
+## ACTION-2 — Pending belongs to the initiator
+
+Governs which control shows that work is in flight.
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | A command accepted work that has not settled | The node that initiated the work binds `isPending`; its label is unchanged, its busy state is exposed, and a second activation is refused |
+| Case 2 | The work was started by the recovery action inside an empty or failed region | `EmptyNotice.isActionPending` carries it, and it resolves to the button that region owns |
+| Case 3 | Other controls are visible while that work runs | No other node changes state for that work, and no page-wide lock or spinner stands in for the initiator's pending |
+| Case 4 | The direction is tempted to swap in `isDisabled` for the duration | The receipt binds `isPending`, not `isDisabled`, for accepted work; disabled appears only where the work cannot start |
+| Case 5 | The owner that needs pending publishes no pending prop | A `GRAMMAR_REQUIRED` gap naming that owner exists in the receipt, and no application-level pending substitute appears in the tree |
+
+## ACTION-3 — Consequence chooses the semantics
+
+Governs the native element the reader operates.
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | The consequence is following a real address | The node keeps `TextAction` with its `href` and stays an anchor under every appearance it is given |
+| Case 2 | The consequence is a state change | The node is `Button` or `TextAction` and carries a real handler, not a destination |
+| Case 3 | The direction wants to observe a follow before it happens | `TextAction.onFollow` is present only as an observer; the node still carries a real destination |
+| Case 4 | An anchor is being used with a click handler and no destination | No such node exists in the tree; the command owner carries the effect instead |
+
+Retired: ACTION-4 is retired into COVERAGE-1 and is not reused; the address stays spent.
+
+## What this file does not decide
+
+Which action deserves emphasis and what its variant promises is [CTA](cta.md). Which surface is
+itself an action, and which controlled values persist, is [State](state.md). What the reader is told
+after the action settles is [Feedback](feedback.md). What the receipt must enumerate about these
+actions is [Coverage](coverage.md). Whether the rendered target is named, sized, and visibly
+focusable is [Accessibility](../proof/accessibility.md) and [Focus](../proof/focus.md), and whether
+the resulting claim is true is [Render truth](../proof/render-truth.md).

package/knowledge/ui/composition/action.vi.md

@@ -0,0 +1,56 @@
+# Action composition
+
+File này trả lời đúng một câu hỏi: khi người đọc kích hoạt một thứ gì đó thì chính xác chuyện gì xảy
+ra, và ai sở hữu chuyện đó.
+
+Quyết định về action đến trước khi có cây DOM, vì chúng chốt số lượng owner và số lượng hiệu ứng.
+Một lần kích hoạt chạm tới hai handler, hay một câu lệnh khoác ngữ nghĩa của anchor, đều là lỗi
+composition mà không kiểu styling nào về sau sửa được.
+
+## ACTION-1 — Một lần kích hoạt, một hiệu ứng
+
+Chi phối số thứ được phép phản hồi cho một lần bấm.
+
+| Case | Dùng khi | Khẳng định |
+| --- | --- | --- |
+| Case 1 | Một lần kích hoạt thay đổi state của ứng dụng | Đúng một node sở hữu hiệu ứng, và node đó là `Button`, hoặc `TextAction` khi câu lệnh cần đọc như chữ; không node thứ hai nào mang `onPress` cho cùng lần kích hoạt |
+| Case 2 | Câu lệnh tham gia vào một form | Receipt gọi tên `Button.type` đã chọn, nên hành vi submit được nêu ra chứ không thừa hưởng từ form bao ngoài |
+| Case 3 | Direction muốn cả hàng hoặc cả container cũng bấm được | Receipt gọi tên đúng một owner cho lần kích hoạt đó; không wrapper bấm được nào bọc quanh một câu lệnh công khai đang giữ cùng hiệu ứng |
+| Case 4 | Có listener ở cấp tổ tiên hoặc cấp document nằm trên cùng đường đi | Không listener tổ tiên hay listener cấp document nào trên đường đi đó phản hồi cùng lần kích hoạt |
+
+Không phải rule này: bản thân surface có phải là action hay không thuộc STATE-5.
+
+## ACTION-2 — Pending thuộc về kẻ khởi động
+
+Chi phối control nào hiển thị rằng việc đang chạy.
+
+| Case | Dùng khi | Khẳng định |
+| --- | --- | --- |
+| Case 1 | Một câu lệnh đã nhận việc và việc chưa xong | Node đã khởi động việc mang `isPending`; nhãn của nó không đổi, trạng thái bận được để lộ, và lần kích hoạt thứ hai bị từ chối |
+| Case 2 | Việc do action phục hồi bên trong một vùng rỗng hoặc vùng lỗi khởi động | `EmptyNotice.isActionPending` mang nó, và prop đó phân giải về đúng nút mà vùng đó sở hữu |
+| Case 3 | Có những control khác đang hiển thị trong lúc việc chạy | Không node nào khác đổi state vì việc đó, và không khoá toàn trang hay spinner toàn cục nào đứng thay cho pending của kẻ khởi động |
+| Case 4 | Direction bị cám dỗ tráo `isDisabled` vào trong khoảng thời gian đó | Receipt gắn `isPending` chứ không phải `isDisabled` cho việc đã nhận; disabled chỉ xuất hiện ở nơi việc chưa thể bắt đầu |
+| Case 5 | Owner cần pending lại không công bố prop pending nào | Trong receipt có một gap `GRAMMAR_REQUIRED` gọi tên owner đó, và không có thứ thay thế pending cấp ứng dụng nào trong cây |
+
+## ACTION-3 — Hệ quả chọn ngữ nghĩa
+
+Chi phối phần tử native mà người đọc thao tác.
+
+| Case | Dùng khi | Khẳng định |
+| --- | --- | --- |
+| Case 1 | Hệ quả là đi tới một địa chỉ thật | Node giữ `TextAction` cùng `href` của nó và vẫn là anchor dưới mọi appearance được khoác lên |
+| Case 2 | Hệ quả là một thay đổi state | Node là `Button` hoặc `TextAction` và mang handler thật, không mang điểm đến |
+| Case 3 | Direction muốn quan sát một lần follow trước khi nó xảy ra | `TextAction.onFollow` chỉ có mặt với vai trò quan sát; node vẫn mang một điểm đến thật |
+| Case 4 | Một anchor đang được dùng kèm click handler mà không có điểm đến | Không node nào như vậy tồn tại trong cây; owner của câu lệnh mang hiệu ứng thay cho nó |
+
+Retired: ACTION-4 đã nghỉ, gộp vào COVERAGE-1, và số này không được dùng lại; địa chỉ đó coi như đã tiêu.
+
+## File này không quyết định
+
+Action nào xứng đáng được nhấn mạnh và variant của nó hứa gì thuộc [CTA](cta.vi.md). Surface nào tự
+nó là một action, và giá trị điều khiển nào bền vững, thuộc [State](state.vi.md). Người đọc được nói
+gì sau khi action kết thúc thuộc [Feedback](feedback.vi.md). Receipt phải liệt kê những gì về các
+action này thuộc [Coverage](coverage.vi.md). Mục tiêu sau khi render có tên, có kích thước và có
+focus nhìn thấy được không thuộc [Accessibility](../proof/accessibility.vi.md) và
+[Focus](../proof/focus.vi.md), còn tuyên bố sinh ra có đúng sự thật không thuộc
+[Render truth](../proof/render-truth.vi.md).

package/knowledge/ui/composition/coverage.md

@@ -0,0 +1,37 @@
+# Coverage composition
+
+This file answers one question: what must the direction receipt actually enumerate, so that a later
+operator can exercise the direction instead of guessing at it?
+
+Every other composition topic constrains one decision at a time. This one constrains the receipt as
+a whole. Five topics each used to close with a coverage rule of their own, and five copies of one
+idea drift apart. Those five are retired into the single rule below and their numbers are never
+reused; retired are `ACTION-4`, `STATE-4`, `FEEDBACK-4`, `LAYOUT-5`, and `RESPONSIVE-5`. What the
+enumeration is worth is decided elsewhere: layout and taste come from the idioms and the playbook in
+`knowledge/grammars/starci`, and this rule only asserts that the receipt says enough for anyone to
+check them.
+
+## COVERAGE-1 — What the receipt must enumerate
+
+Governs the fields a decided `frontend-direction-decision.json` must carry before it may be emitted.
+
+| Case | When | Assert |
+| --- | --- | --- |
+| Case 1 | The direction delivers any action | `coverage.actions[]` is non-empty, and every entry names its pointer route, its keyboard route, and every reachable named state of that action, enabled, disabled, pending, and settled, so no route and no state is left implicit |
+| Case 2 | Any action accepts work that does not settle immediately | Every pending path in `coverage.actions[]` names its settlement, cancellation included; no entry declares a pending path whose settlement is absent |
+| Case 3 | The direction declares regions | `coverage.regions[]` is non-empty and covers every entry in `regionModel`, and each entry names one idiom in `knowledge/grammars/starci/playbook.md` and one published composition; no region resolves to a bare arrangement |
+| Case 4 | The composition changes shape as space changes | `coverage.responsive[]` is non-empty and every branch names exactly one owner, a published container query or a published viewport query; no branch names a device and none names two owners |
+| Case 5 | The feature has more than one condition | `coverage.states[]` is non-empty, every entry names its meaning before its carrier, and no carrier appears against two meanings |
+| Case 6 | A family or the application adds a delta over a published owner | Each layer is enumerated separately, so a doubled effect, a lost selected state, a lost compact trigger, or a duplicated announcement is attributable to the layer that introduced it |
+
+Not this rule: taking the measurements, running the samples, and counting the announcements is the
+audit operator's work; this rule only fixes what the receipt promised.
+
+## What this file does not decide
+
+Which regions exist and who owns their tracks is [Layout](layout.md), and which branch survives a
+reflow is [Responsive](responsive.md). Which conditions exist and which carrier holds each is
+[State](state.md). What one activation does is [Action](action.md), and what the reader is told at
+each outcome is [Feedback](feedback.md). Whether the enumerated paths actually hold once rendered is
+[Focus](../proof/focus.md), [Accessibility](../proof/accessibility.md), and
+[Render truth](../proof/render-truth.md).