@reqvire-org/ads 0.3.5 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +5 -1
  2. package/dist/atomic-composition.mjs +183 -0
  3. package/dist/bootstrap-ds/ADS.md +9 -3
  4. package/dist/bootstrap-ds/README.md +10 -0
  5. package/dist/boundaries.mjs +3 -0
  6. package/dist/check.mjs +16 -0
  7. package/dist/cli.mjs +1 -1
  8. package/dist/config.mjs +6 -2
  9. package/dist/mcp/build-status.mjs +7 -4
  10. package/dist/mcp/context.mjs +2 -2
  11. package/dist/mcp/edit-preparation.mjs +111 -0
  12. package/dist/mcp/mutations.mjs +54 -38
  13. package/dist/mcp/preview-watch.mjs +10 -4
  14. package/dist/mcp/server.mjs +36 -24
  15. package/dist/mcp/text-diff.mjs +19 -0
  16. package/dist/preview-resources.mjs +45 -8
  17. package/dist/preview-scope.mjs +30 -0
  18. package/dist/public-api.mjs +37 -1
  19. package/dist/scenarios-compiler.mjs +24 -17
  20. package/dist/scenarios.mjs +58 -6
  21. package/dist/scoped-tokens.mjs +57 -0
  22. package/dist/skills/ads-break-ui/SKILL.md +10 -2
  23. package/dist/skills/ads-break-ui/references/atomic-styles.md +121 -0
  24. package/dist/skills/ads-break-ui/references/guarded-editing.md +44 -0
  25. package/dist/skills/ads-break-ui/references/verification.md +6 -0
  26. package/dist/skills/ads-designer/SKILL.md +10 -2
  27. package/dist/skills/ads-designer/assets/bootstrap-ds/ADS.md +9 -3
  28. package/dist/skills/ads-designer/assets/bootstrap-ds/README.md +10 -0
  29. package/dist/skills/ads-designer/references/atomic-styles.md +121 -0
  30. package/dist/skills/ads-designer/references/guarded-editing.md +44 -0
  31. package/dist/skills/ads-import/SKILL.md +10 -2
  32. package/dist/skills/ads-import/references/atomic-styles.md +121 -0
  33. package/dist/skills/ads-import/references/guarded-editing.md +44 -0
  34. package/dist/skills/ads-import/references/tokens.md +4 -2
  35. package/dist/skills/ads-migrate/SKILL.md +10 -2
  36. package/dist/skills/ads-migrate/references/atomic-styles.md +121 -0
  37. package/dist/skills/ads-migrate/references/guarded-editing.md +44 -0
  38. package/dist/skills/ads-motion/SKILL.md +10 -2
  39. package/dist/skills/ads-motion/references/atomic-styles.md +121 -0
  40. package/dist/skills/ads-motion/references/guarded-editing.md +44 -0
  41. package/dist/token-fixtures.mjs +30 -0
  42. package/dist/tokens.mjs +8 -2
  43. package/dist/units.mjs +15 -0
  44. package/dist/verification.mjs +1 -1
  45. package/docs/ADS.md +59 -2
  46. package/docs/ARCHITECTURE.md +27 -0
  47. package/docs/BEHAVIORS.md +20 -0
  48. package/docs/CHANGELOG.md +32 -0
  49. package/docs/GUIDE.md +8 -3
  50. package/docs/MCP.md +70 -5
  51. package/package.json +4 -2
@@ -0,0 +1,121 @@
1
+ # Atomic style composition
2
+
3
+ Use this guide when creating or migrating component/pattern styles, changing
4
+ base/size/state combinations, or reviewing `atomic-composition-review` warnings.
5
+ It is also available as `ads://guides/atomic-styles` through ADS MCP.
6
+
7
+ ## Why valid tokens can still render incorrectly
8
+
9
+ Atomic Linaria extracts declarations into reusable classes. `cx` from
10
+ `@linaria/atomic` or `@linaria/core` replaces earlier atoms with the same property
11
+ and selector/condition key. It does not expand every CSS shorthand or resolve
12
+ every overlap between physical and logical properties.
13
+
14
+ For example, these declarations have different atomic keys:
15
+
16
+ ```tsx
17
+ const base = css`
18
+ padding: 0;
19
+ `;
20
+ const small = css`
21
+ padding-inline: var(--space-6);
22
+ `;
23
+
24
+ cx(base, small);
25
+ ```
26
+
27
+ Both classes survive. Both declarations can affect horizontal padding in a
28
+ horizontal writing mode. In the inspected Linaria implementation, `padding` and
29
+ `padding-inline` receive equal specificity. If a reset atom is emitted later,
30
+ it can override the intended size. Shared atom reuse and CSS splitting can make
31
+ this visible in a larger build even when an isolated view appears correct.
32
+ The order of class names in HTML does not decide equal-specificity rule order.
33
+ Valid tokens, successful extraction and a passing source check do not establish
34
+ the intended computed value.
35
+
36
+ See Linaria's [class merging implementation](https://github.com/callstack/linaria/blob/master/packages/core/src/cx.ts)
37
+ and [property priority implementation](https://github.com/callstack/linaria/blob/master/packages/atomic/src/processors/helpers/propertyPriority.ts).
38
+ Inspect the project's installed version when investigating its output.
39
+
40
+ ## Prefer matching properties across composed blocks
41
+
42
+ Express the reset and overrides using the same property vocabulary:
43
+
44
+ ```tsx
45
+ const base = css`
46
+ padding-block: 0;
47
+ padding-inline: 0;
48
+ `;
49
+ const small = css`
50
+ padding-inline: var(--space-6);
51
+ `;
52
+ const regular = css`
53
+ padding-block: var(--space-4);
54
+ padding-inline: var(--space-8);
55
+ `;
56
+
57
+ cx(base, compact ? small : regular);
58
+ ```
59
+
60
+ Now each selected size replaces the corresponding base atom through `cx`.
61
+ Review every size, including the default and icon-only variants. Changing only
62
+ one size can leave another size mixing shorthand and logical properties.
63
+ The names and tokens above are illustrative: use the project's real API and
64
+ declared tokens. Preserve its intended dimensions and supported writing modes.
65
+
66
+ The same reasoning applies to margin, inset, logical borders/corners, dimensions
67
+ and overflow. For example, prefer `margin-inline: 0` plus a size's
68
+ `margin-inline: var(...)` over combining `margin: 0` with that logical override.
69
+ Choose consistent physical properties when the product deliberately positions
70
+ against physical edges; logical properties are not mandatory.
71
+
72
+ An intentional state override may have a different selector or condition:
73
+
74
+ ```tsx
75
+ const treatment = css`
76
+ padding-inline: var(--space-6);
77
+ &:hover { padding-inline: var(--space-8); }
78
+ `;
79
+ ```
80
+
81
+ This is a distinct state, not two competing base atoms. Whether changing padding
82
+ on hover is desirable remains a product decision.
83
+
84
+ ## Respond to a warning
85
+
86
+ 1. Follow the warning's related file/line locations and inspect the actual `cx`
87
+ composition. Variant lookups may contribute several possible combinations.
88
+ 2. In a current built preview, inspect computed properties and the winning CSS
89
+ rules. Establish whether extraction order, specificity, writing mode or an
90
+ intentional override explains the result.
91
+ 3. For accidental overlap, align property names/granularity across the base and
92
+ affected variants. Use Linaria's `cx`, preserve tokens and fix the owning
93
+ component/pattern. Reordering class strings does not remove overlapping keys.
94
+ 4. Verify the affected sizes/states and supported directions in the normal app
95
+ and preview build. Add a registered rendered check when a specific geometry
96
+ or computed-style guarantee matters.
97
+
98
+ Increasing specificity, adding `!important`, copying styles into scenarios or
99
+ moving component styling into `base.css` can hide the symptom while retaining
100
+ the conflict. Prefer resolving the composition itself. If an overlap is
101
+ intentional, document why its precedence is stable and verify the resulting
102
+ behavior rather than changing product capabilities to silence a warning.
103
+
104
+ ## What ADS checks
105
+
106
+ `atomic-composition-review` is a nonblocking warning, returned under `advisories`
107
+ with `severity: "warning"`. CLI checks still exit successfully when there are no
108
+ errors; MCP checks and mutations preserve the warning and its guidance URI.
109
+
110
+ The source review examines atomic Linaria templates and statically traceable
111
+ `cx` arguments, including aliases, local imports, nested composition, conditional
112
+ expressions and variant-object lookups. It checks known overlaps involving box
113
+ spacing, inset, borders/corners, dimensions, overflow, backgrounds, typography,
114
+ motion and common layout shorthands, plus `all` resets. It compares shared selector/condition contexts; separate alternatives
115
+ within one conditional or lookup are not assumed to apply together.
116
+
117
+ This is a bounded source review, not a CSS engine or a proof of precedence. It
118
+ does not enumerate every external class, runtime function result, selector
119
+ interaction or overlapping media query. An empty warning list does not establish
120
+ visual correctness. Actual failed registered browser/behavior checks remain
121
+ blocking; potentially intentional source overlaps remain warnings.
@@ -0,0 +1,44 @@
1
+ # Advanced guarded editing
2
+
3
+ Use `ads_apply_patch` for independent owner edits. `ads_prepare_patch` can create a
4
+ local draft of one owner and its companions; edit that directory with local file
5
+ tools, request `action:"diff"`, then apply the returned patchFile. Discard the
6
+ draft afterward. Remote clients can keep sending inline Git diffs. Neither draft
7
+ preparation nor diff generation validates or changes live source.
8
+
9
+ For genuinely coupled changes, `ads_apply_transaction` accepts 2–8 distinct owner
10
+ patches (32 distinct files and 16 MiB combined). Each patch keeps its ownership and
11
+ companion restrictions. Patches apply in order; later shared-entry hunks match the
12
+ earlier candidate. All guards, registered checks and affected behavior checks run
13
+ on the final candidate before live source is written. Dry-run first. Rejection,
14
+ conflict and cancellation publish nothing. Dependency installation remains local;
15
+ the candidate uses installed node_modules. Never bypass a rejected gate directly.
16
+
17
+ A component/pattern can own constants without expanding the shared vocabulary:
18
+ colocate `tokens.json` with `{ "schemaVersion":1, "namespace":"--<owner>-" }`
19
+ and a definition-only `tokens.css`, imported by its runtime source. Flat owners use
20
+ `<Owner>.tokens.json`/`<Owner>.tokens.css`. Namespaces are unique and cannot overlap
21
+ shared or --ds-/--ux-/--showcase- variables. Only that owner consumes/defines its
22
+ local tokens; aliases can use shared or own tokens. UI styles stay in Linaria.
23
+ Add a colocated token scenario with `kind:"tokens"`, real fixture `samples` and a
24
+ public review pattern. These inputs belong to the same owner and need real sample
25
+ coverage. Manifests and fixtures stay out of the product bundle.
26
+
27
+ `ads_prepare_token_samples({id, bindings?})` preserves existing project samples,
28
+ removes undeclared names and returns an owner patchFile. Supply explicit
29
+ `{token,property,probe}` bindings for new samples; unresolved tokens stay reported.
30
+ ADS does not infer visual meaning or fabricate renderers. Apply through the guard,
31
+ then inspect the actual App sample effects.
32
+
33
+ An empty .gitkeep can be deleted alongside new source beneath it in the selected
34
+ owner. Nonempty markers and other hidden files stay protected. A redundant
35
+ Scenario.tsx can be deleted when real coverage remains elsewhere; removing a
36
+ scenario does not erase ownership of the unit's runtime source.
37
+
38
+ Keep contextual public parts public when they are intended consumer API. Demonstrate
39
+ them through their actual public composition/customization path and list their real
40
+ render references in covers. Do not count internal production renders as public API
41
+ coverage. Behavioral APIs use exercises and registered guarantees instead.
42
+ Scenario controls still use public UI; native link/button markup belongs in an
43
+ owned public primitive/pattern or an owner-local test, including polymorphic/slot
44
+ adaptation. Do not add demo-only component props or global styles for review glue.
@@ -32,8 +32,8 @@ and `boundaries.styleWrites` entries together with its source. Unused permission
32
32
  fail the core checks; do not pre-register a boundary without its implementation.
33
33
  Use `dryRun: true` to
34
34
  inspect validation; applying re-runs the gates. Fix rejected patches in their
35
- owner. Report unsupported coupled changes instead of bypassing a rejection with
36
- direct source writes. Shared styles/helpers use `foundation`, root guides use
35
+ owner. Use `ads_apply_transaction` for genuinely coupled owner patches;
36
+ never bypass a rejection with direct source writes. Shared styles/helpers use `foundation`, root guides use
37
37
  `documentation`, and branding/fonts use their discovered `assets/*` unit.
38
38
  Intentional configuration, rule exceptions, registered guard code and compiler
39
39
  changes use `configuration`; validate the proposed settings and keep mandatory
@@ -41,6 +41,14 @@ ADS gates. For binary/large assets, generate `git diff --binary --full-index` in
41
41
  `.ds/patches/<name>.patch` and send `patchFile` instead of inline `patch`, so bytes
42
42
  stay out of model context. Binary changes require Git. When editing is disabled,
43
43
  use the client's normal source-editing tools.
44
+ For owner drafts, token-sample reconciliation, coupled transactions and local
45
+ constant namespaces, read [guarded-editing.md](references/guarded-editing.md).
46
+
47
+ For atomic base/variant styling or an `atomic-composition-review` warning, read
48
+ [atomic style composition](references/atomic-styles.md). The same guide is served
49
+ as `ads://guides/atomic-styles`. It explains shorthand/logical conflicts and
50
+ matching-property fixes. Review warnings in the real `cx` composition and verify
51
+ computed styles across affected sizes/states; retain intentional product behavior.
44
52
 
45
53
  Controllers are UI behavior owners: private helpers stay with their component or
46
54
  pattern; reusable controllers use discovered `controllers/<Name>` units. Use the
@@ -0,0 +1,121 @@
1
+ # Atomic style composition
2
+
3
+ Use this guide when creating or migrating component/pattern styles, changing
4
+ base/size/state combinations, or reviewing `atomic-composition-review` warnings.
5
+ It is also available as `ads://guides/atomic-styles` through ADS MCP.
6
+
7
+ ## Why valid tokens can still render incorrectly
8
+
9
+ Atomic Linaria extracts declarations into reusable classes. `cx` from
10
+ `@linaria/atomic` or `@linaria/core` replaces earlier atoms with the same property
11
+ and selector/condition key. It does not expand every CSS shorthand or resolve
12
+ every overlap between physical and logical properties.
13
+
14
+ For example, these declarations have different atomic keys:
15
+
16
+ ```tsx
17
+ const base = css`
18
+ padding: 0;
19
+ `;
20
+ const small = css`
21
+ padding-inline: var(--space-6);
22
+ `;
23
+
24
+ cx(base, small);
25
+ ```
26
+
27
+ Both classes survive. Both declarations can affect horizontal padding in a
28
+ horizontal writing mode. In the inspected Linaria implementation, `padding` and
29
+ `padding-inline` receive equal specificity. If a reset atom is emitted later,
30
+ it can override the intended size. Shared atom reuse and CSS splitting can make
31
+ this visible in a larger build even when an isolated view appears correct.
32
+ The order of class names in HTML does not decide equal-specificity rule order.
33
+ Valid tokens, successful extraction and a passing source check do not establish
34
+ the intended computed value.
35
+
36
+ See Linaria's [class merging implementation](https://github.com/callstack/linaria/blob/master/packages/core/src/cx.ts)
37
+ and [property priority implementation](https://github.com/callstack/linaria/blob/master/packages/atomic/src/processors/helpers/propertyPriority.ts).
38
+ Inspect the project's installed version when investigating its output.
39
+
40
+ ## Prefer matching properties across composed blocks
41
+
42
+ Express the reset and overrides using the same property vocabulary:
43
+
44
+ ```tsx
45
+ const base = css`
46
+ padding-block: 0;
47
+ padding-inline: 0;
48
+ `;
49
+ const small = css`
50
+ padding-inline: var(--space-6);
51
+ `;
52
+ const regular = css`
53
+ padding-block: var(--space-4);
54
+ padding-inline: var(--space-8);
55
+ `;
56
+
57
+ cx(base, compact ? small : regular);
58
+ ```
59
+
60
+ Now each selected size replaces the corresponding base atom through `cx`.
61
+ Review every size, including the default and icon-only variants. Changing only
62
+ one size can leave another size mixing shorthand and logical properties.
63
+ The names and tokens above are illustrative: use the project's real API and
64
+ declared tokens. Preserve its intended dimensions and supported writing modes.
65
+
66
+ The same reasoning applies to margin, inset, logical borders/corners, dimensions
67
+ and overflow. For example, prefer `margin-inline: 0` plus a size's
68
+ `margin-inline: var(...)` over combining `margin: 0` with that logical override.
69
+ Choose consistent physical properties when the product deliberately positions
70
+ against physical edges; logical properties are not mandatory.
71
+
72
+ An intentional state override may have a different selector or condition:
73
+
74
+ ```tsx
75
+ const treatment = css`
76
+ padding-inline: var(--space-6);
77
+ &:hover { padding-inline: var(--space-8); }
78
+ `;
79
+ ```
80
+
81
+ This is a distinct state, not two competing base atoms. Whether changing padding
82
+ on hover is desirable remains a product decision.
83
+
84
+ ## Respond to a warning
85
+
86
+ 1. Follow the warning's related file/line locations and inspect the actual `cx`
87
+ composition. Variant lookups may contribute several possible combinations.
88
+ 2. In a current built preview, inspect computed properties and the winning CSS
89
+ rules. Establish whether extraction order, specificity, writing mode or an
90
+ intentional override explains the result.
91
+ 3. For accidental overlap, align property names/granularity across the base and
92
+ affected variants. Use Linaria's `cx`, preserve tokens and fix the owning
93
+ component/pattern. Reordering class strings does not remove overlapping keys.
94
+ 4. Verify the affected sizes/states and supported directions in the normal app
95
+ and preview build. Add a registered rendered check when a specific geometry
96
+ or computed-style guarantee matters.
97
+
98
+ Increasing specificity, adding `!important`, copying styles into scenarios or
99
+ moving component styling into `base.css` can hide the symptom while retaining
100
+ the conflict. Prefer resolving the composition itself. If an overlap is
101
+ intentional, document why its precedence is stable and verify the resulting
102
+ behavior rather than changing product capabilities to silence a warning.
103
+
104
+ ## What ADS checks
105
+
106
+ `atomic-composition-review` is a nonblocking warning, returned under `advisories`
107
+ with `severity: "warning"`. CLI checks still exit successfully when there are no
108
+ errors; MCP checks and mutations preserve the warning and its guidance URI.
109
+
110
+ The source review examines atomic Linaria templates and statically traceable
111
+ `cx` arguments, including aliases, local imports, nested composition, conditional
112
+ expressions and variant-object lookups. It checks known overlaps involving box
113
+ spacing, inset, borders/corners, dimensions, overflow, backgrounds, typography,
114
+ motion and common layout shorthands, plus `all` resets. It compares shared selector/condition contexts; separate alternatives
115
+ within one conditional or lookup are not assumed to apply together.
116
+
117
+ This is a bounded source review, not a CSS engine or a proof of precedence. It
118
+ does not enumerate every external class, runtime function result, selector
119
+ interaction or overlapping media query. An empty warning list does not establish
120
+ visual correctness. Actual failed registered browser/behavior checks remain
121
+ blocking; potentially intentional source overlaps remain warnings.
@@ -0,0 +1,44 @@
1
+ # Advanced guarded editing
2
+
3
+ Use `ads_apply_patch` for independent owner edits. `ads_prepare_patch` can create a
4
+ local draft of one owner and its companions; edit that directory with local file
5
+ tools, request `action:"diff"`, then apply the returned patchFile. Discard the
6
+ draft afterward. Remote clients can keep sending inline Git diffs. Neither draft
7
+ preparation nor diff generation validates or changes live source.
8
+
9
+ For genuinely coupled changes, `ads_apply_transaction` accepts 2–8 distinct owner
10
+ patches (32 distinct files and 16 MiB combined). Each patch keeps its ownership and
11
+ companion restrictions. Patches apply in order; later shared-entry hunks match the
12
+ earlier candidate. All guards, registered checks and affected behavior checks run
13
+ on the final candidate before live source is written. Dry-run first. Rejection,
14
+ conflict and cancellation publish nothing. Dependency installation remains local;
15
+ the candidate uses installed node_modules. Never bypass a rejected gate directly.
16
+
17
+ A component/pattern can own constants without expanding the shared vocabulary:
18
+ colocate `tokens.json` with `{ "schemaVersion":1, "namespace":"--<owner>-" }`
19
+ and a definition-only `tokens.css`, imported by its runtime source. Flat owners use
20
+ `<Owner>.tokens.json`/`<Owner>.tokens.css`. Namespaces are unique and cannot overlap
21
+ shared or --ds-/--ux-/--showcase- variables. Only that owner consumes/defines its
22
+ local tokens; aliases can use shared or own tokens. UI styles stay in Linaria.
23
+ Add a colocated token scenario with `kind:"tokens"`, real fixture `samples` and a
24
+ public review pattern. These inputs belong to the same owner and need real sample
25
+ coverage. Manifests and fixtures stay out of the product bundle.
26
+
27
+ `ads_prepare_token_samples({id, bindings?})` preserves existing project samples,
28
+ removes undeclared names and returns an owner patchFile. Supply explicit
29
+ `{token,property,probe}` bindings for new samples; unresolved tokens stay reported.
30
+ ADS does not infer visual meaning or fabricate renderers. Apply through the guard,
31
+ then inspect the actual App sample effects.
32
+
33
+ An empty .gitkeep can be deleted alongside new source beneath it in the selected
34
+ owner. Nonempty markers and other hidden files stay protected. A redundant
35
+ Scenario.tsx can be deleted when real coverage remains elsewhere; removing a
36
+ scenario does not erase ownership of the unit's runtime source.
37
+
38
+ Keep contextual public parts public when they are intended consumer API. Demonstrate
39
+ them through their actual public composition/customization path and list their real
40
+ render references in covers. Do not count internal production renders as public API
41
+ coverage. Behavioral APIs use exercises and registered guarantees instead.
42
+ Scenario controls still use public UI; native link/button markup belongs in an
43
+ owned public primitive/pattern or an owner-local test, including polymorphic/slot
44
+ adaptation. Do not add demo-only component props or global styles for review glue.
@@ -47,9 +47,11 @@ overwriting destination theme behavior during an item import.
47
47
 
48
48
  ## Explicit `tokens` mode imports values
49
49
 
50
- ADS token names and prefixes are fixed. New definitions must follow the existing
50
+ Shared ADS token names and prefixes retain their semantics. Owner-local constants
51
+ may use the registered namespace contract described in [guarded-editing.md](guarded-editing.md);
52
+ they do not create a second shared branding vocabulary. New shared definitions follow the existing
51
53
  architecture; components use `--ds-*`, patterns `--ux-*`, and owned scenario review layouts
52
- `--ux-*` (`--showcase-*` is reserved, not permission for fixture CSS). Never add source-brand aliases or configurable prefix support.
54
+ `--ux-*` (`--showcase-*` is reserved, not permission for fixture CSS). Keep shared names canonical; owner-local namespaces remain separate, explicit contracts.
53
55
  Normalize nonconforming source references to canonical ADS names during import,
54
56
  preserving destination values unless this mode explicitly requests changes.
55
57
 
@@ -33,8 +33,8 @@ and `boundaries.styleWrites` entries together with its source. Unused permission
33
33
  fail the core checks; do not pre-register a boundary without its implementation.
34
34
  Use `dryRun: true` to
35
35
  inspect validation; applying re-runs the gates. Fix rejected patches in their
36
- owner. Report unsupported coupled changes instead of bypassing a rejection with
37
- direct source writes. Shared styles/helpers use `foundation`, root guides use
36
+ owner. Use `ads_apply_transaction` for genuinely coupled owner patches;
37
+ never bypass a rejection with direct source writes. Shared styles/helpers use `foundation`, root guides use
38
38
  `documentation`, and branding/fonts use their discovered `assets/*` unit.
39
39
  Intentional configuration, rule exceptions, registered guard code and compiler
40
40
  changes use `configuration`; validate the proposed settings and keep mandatory
@@ -42,8 +42,16 @@ ADS gates. For binary/large assets, generate `git diff --binary --full-index` in
42
42
  `.ds/patches/<name>.patch` and send `patchFile` instead of inline `patch`, so bytes
43
43
  stay out of model context. Binary changes require Git. When editing is disabled,
44
44
  use the client's normal source-editing tools.
45
+ For owner drafts, token-sample reconciliation, coupled transactions and local
46
+ constant namespaces, read [guarded-editing.md](references/guarded-editing.md).
45
47
 
46
48
 
49
+ For atomic base/variant styling or an `atomic-composition-review` warning, read
50
+ [atomic style composition](references/atomic-styles.md). The same guide is served
51
+ as `ads://guides/atomic-styles`. It explains shorthand/logical conflicts and
52
+ matching-property fixes. Review warnings in the real `cx` composition and verify
53
+ computed styles across affected sizes/states; retain intentional product behavior.
54
+
47
55
  Controllers are UI behavior owners: private helpers stay with their component or
48
56
  pattern; reusable controllers use discovered `controllers/<Name>` units. Use the
49
57
  project's configured framework and declared dependencies, or plain TypeScript,
@@ -0,0 +1,121 @@
1
+ # Atomic style composition
2
+
3
+ Use this guide when creating or migrating component/pattern styles, changing
4
+ base/size/state combinations, or reviewing `atomic-composition-review` warnings.
5
+ It is also available as `ads://guides/atomic-styles` through ADS MCP.
6
+
7
+ ## Why valid tokens can still render incorrectly
8
+
9
+ Atomic Linaria extracts declarations into reusable classes. `cx` from
10
+ `@linaria/atomic` or `@linaria/core` replaces earlier atoms with the same property
11
+ and selector/condition key. It does not expand every CSS shorthand or resolve
12
+ every overlap between physical and logical properties.
13
+
14
+ For example, these declarations have different atomic keys:
15
+
16
+ ```tsx
17
+ const base = css`
18
+ padding: 0;
19
+ `;
20
+ const small = css`
21
+ padding-inline: var(--space-6);
22
+ `;
23
+
24
+ cx(base, small);
25
+ ```
26
+
27
+ Both classes survive. Both declarations can affect horizontal padding in a
28
+ horizontal writing mode. In the inspected Linaria implementation, `padding` and
29
+ `padding-inline` receive equal specificity. If a reset atom is emitted later,
30
+ it can override the intended size. Shared atom reuse and CSS splitting can make
31
+ this visible in a larger build even when an isolated view appears correct.
32
+ The order of class names in HTML does not decide equal-specificity rule order.
33
+ Valid tokens, successful extraction and a passing source check do not establish
34
+ the intended computed value.
35
+
36
+ See Linaria's [class merging implementation](https://github.com/callstack/linaria/blob/master/packages/core/src/cx.ts)
37
+ and [property priority implementation](https://github.com/callstack/linaria/blob/master/packages/atomic/src/processors/helpers/propertyPriority.ts).
38
+ Inspect the project's installed version when investigating its output.
39
+
40
+ ## Prefer matching properties across composed blocks
41
+
42
+ Express the reset and overrides using the same property vocabulary:
43
+
44
+ ```tsx
45
+ const base = css`
46
+ padding-block: 0;
47
+ padding-inline: 0;
48
+ `;
49
+ const small = css`
50
+ padding-inline: var(--space-6);
51
+ `;
52
+ const regular = css`
53
+ padding-block: var(--space-4);
54
+ padding-inline: var(--space-8);
55
+ `;
56
+
57
+ cx(base, compact ? small : regular);
58
+ ```
59
+
60
+ Now each selected size replaces the corresponding base atom through `cx`.
61
+ Review every size, including the default and icon-only variants. Changing only
62
+ one size can leave another size mixing shorthand and logical properties.
63
+ The names and tokens above are illustrative: use the project's real API and
64
+ declared tokens. Preserve its intended dimensions and supported writing modes.
65
+
66
+ The same reasoning applies to margin, inset, logical borders/corners, dimensions
67
+ and overflow. For example, prefer `margin-inline: 0` plus a size's
68
+ `margin-inline: var(...)` over combining `margin: 0` with that logical override.
69
+ Choose consistent physical properties when the product deliberately positions
70
+ against physical edges; logical properties are not mandatory.
71
+
72
+ An intentional state override may have a different selector or condition:
73
+
74
+ ```tsx
75
+ const treatment = css`
76
+ padding-inline: var(--space-6);
77
+ &:hover { padding-inline: var(--space-8); }
78
+ `;
79
+ ```
80
+
81
+ This is a distinct state, not two competing base atoms. Whether changing padding
82
+ on hover is desirable remains a product decision.
83
+
84
+ ## Respond to a warning
85
+
86
+ 1. Follow the warning's related file/line locations and inspect the actual `cx`
87
+ composition. Variant lookups may contribute several possible combinations.
88
+ 2. In a current built preview, inspect computed properties and the winning CSS
89
+ rules. Establish whether extraction order, specificity, writing mode or an
90
+ intentional override explains the result.
91
+ 3. For accidental overlap, align property names/granularity across the base and
92
+ affected variants. Use Linaria's `cx`, preserve tokens and fix the owning
93
+ component/pattern. Reordering class strings does not remove overlapping keys.
94
+ 4. Verify the affected sizes/states and supported directions in the normal app
95
+ and preview build. Add a registered rendered check when a specific geometry
96
+ or computed-style guarantee matters.
97
+
98
+ Increasing specificity, adding `!important`, copying styles into scenarios or
99
+ moving component styling into `base.css` can hide the symptom while retaining
100
+ the conflict. Prefer resolving the composition itself. If an overlap is
101
+ intentional, document why its precedence is stable and verify the resulting
102
+ behavior rather than changing product capabilities to silence a warning.
103
+
104
+ ## What ADS checks
105
+
106
+ `atomic-composition-review` is a nonblocking warning, returned under `advisories`
107
+ with `severity: "warning"`. CLI checks still exit successfully when there are no
108
+ errors; MCP checks and mutations preserve the warning and its guidance URI.
109
+
110
+ The source review examines atomic Linaria templates and statically traceable
111
+ `cx` arguments, including aliases, local imports, nested composition, conditional
112
+ expressions and variant-object lookups. It checks known overlaps involving box
113
+ spacing, inset, borders/corners, dimensions, overflow, backgrounds, typography,
114
+ motion and common layout shorthands, plus `all` resets. It compares shared selector/condition contexts; separate alternatives
115
+ within one conditional or lookup are not assumed to apply together.
116
+
117
+ This is a bounded source review, not a CSS engine or a proof of precedence. It
118
+ does not enumerate every external class, runtime function result, selector
119
+ interaction or overlapping media query. An empty warning list does not establish
120
+ visual correctness. Actual failed registered browser/behavior checks remain
121
+ blocking; potentially intentional source overlaps remain warnings.
@@ -0,0 +1,44 @@
1
+ # Advanced guarded editing
2
+
3
+ Use `ads_apply_patch` for independent owner edits. `ads_prepare_patch` can create a
4
+ local draft of one owner and its companions; edit that directory with local file
5
+ tools, request `action:"diff"`, then apply the returned patchFile. Discard the
6
+ draft afterward. Remote clients can keep sending inline Git diffs. Neither draft
7
+ preparation nor diff generation validates or changes live source.
8
+
9
+ For genuinely coupled changes, `ads_apply_transaction` accepts 2–8 distinct owner
10
+ patches (32 distinct files and 16 MiB combined). Each patch keeps its ownership and
11
+ companion restrictions. Patches apply in order; later shared-entry hunks match the
12
+ earlier candidate. All guards, registered checks and affected behavior checks run
13
+ on the final candidate before live source is written. Dry-run first. Rejection,
14
+ conflict and cancellation publish nothing. Dependency installation remains local;
15
+ the candidate uses installed node_modules. Never bypass a rejected gate directly.
16
+
17
+ A component/pattern can own constants without expanding the shared vocabulary:
18
+ colocate `tokens.json` with `{ "schemaVersion":1, "namespace":"--<owner>-" }`
19
+ and a definition-only `tokens.css`, imported by its runtime source. Flat owners use
20
+ `<Owner>.tokens.json`/`<Owner>.tokens.css`. Namespaces are unique and cannot overlap
21
+ shared or --ds-/--ux-/--showcase- variables. Only that owner consumes/defines its
22
+ local tokens; aliases can use shared or own tokens. UI styles stay in Linaria.
23
+ Add a colocated token scenario with `kind:"tokens"`, real fixture `samples` and a
24
+ public review pattern. These inputs belong to the same owner and need real sample
25
+ coverage. Manifests and fixtures stay out of the product bundle.
26
+
27
+ `ads_prepare_token_samples({id, bindings?})` preserves existing project samples,
28
+ removes undeclared names and returns an owner patchFile. Supply explicit
29
+ `{token,property,probe}` bindings for new samples; unresolved tokens stay reported.
30
+ ADS does not infer visual meaning or fabricate renderers. Apply through the guard,
31
+ then inspect the actual App sample effects.
32
+
33
+ An empty .gitkeep can be deleted alongside new source beneath it in the selected
34
+ owner. Nonempty markers and other hidden files stay protected. A redundant
35
+ Scenario.tsx can be deleted when real coverage remains elsewhere; removing a
36
+ scenario does not erase ownership of the unit's runtime source.
37
+
38
+ Keep contextual public parts public when they are intended consumer API. Demonstrate
39
+ them through their actual public composition/customization path and list their real
40
+ render references in covers. Do not count internal production renders as public API
41
+ coverage. Behavioral APIs use exercises and registered guarantees instead.
42
+ Scenario controls still use public UI; native link/button markup belongs in an
43
+ owned public primitive/pattern or an owner-local test, including polymorphic/slot
44
+ adaptation. Do not add demo-only component props or global styles for review glue.
@@ -53,8 +53,8 @@ and `boundaries.styleWrites` entries together with its source. Unused permission
53
53
  fail the core checks; do not pre-register a boundary without its implementation.
54
54
  Use `dryRun: true` to
55
55
  inspect validation; applying re-runs the gates. Fix rejected patches in their
56
- owner. Report unsupported coupled changes instead of bypassing a rejection with
57
- direct source writes. Shared styles/helpers use `foundation`, root guides use
56
+ owner. Use `ads_apply_transaction` for genuinely coupled owner patches;
57
+ never bypass a rejection with direct source writes. Shared styles/helpers use `foundation`, root guides use
58
58
  `documentation`, and branding/fonts use their discovered `assets/*` unit.
59
59
  Intentional configuration, rule exceptions, registered guard code and compiler
60
60
  changes use `configuration`; validate the proposed settings and keep mandatory
@@ -62,8 +62,16 @@ ADS gates. For binary/large assets, generate `git diff --binary --full-index` in
62
62
  `.ds/patches/<name>.patch` and send `patchFile` instead of inline `patch`, so bytes
63
63
  stay out of model context. Binary changes require Git. When editing is disabled,
64
64
  use the client's normal source-editing tools.
65
+ For owner drafts, token-sample reconciliation, coupled transactions and local
66
+ constant namespaces, read [guarded-editing.md](references/guarded-editing.md).
65
67
 
66
68
 
69
+ For atomic base/variant styling or an `atomic-composition-review` warning, read
70
+ [atomic style composition](references/atomic-styles.md). The same guide is served
71
+ as `ads://guides/atomic-styles`. It explains shorthand/logical conflicts and
72
+ matching-property fixes. Review warnings in the real `cx` composition and verify
73
+ computed styles across affected sizes/states; retain intentional product behavior.
74
+
67
75
  Controllers are UI behavior owners: private helpers stay with their component or
68
76
  pattern; reusable controllers use discovered `controllers/<Name>` units. Use the
69
77
  project's configured framework and declared dependencies, or plain TypeScript,