@reqvire-org/ads 0.3.17 → 0.3.20
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.
- package/dist/atomic-composition.mjs +1 -1
- package/dist/behaviors.mjs +5 -5
- package/dist/bootstrap-ds/ADS.md +2 -2
- package/dist/bootstrap-ds/README.md +1 -1
- package/dist/bootstrap-ds/design-system/index.ts +0 -1
- package/dist/bootstrap-ds/design-system/review/index.ts +1 -0
- package/dist/bootstrap-ds/design-system/tokens/Foundation.scenario.tsx +1 -1
- package/dist/bootstrap-ds/ds.config.json +1 -1
- package/dist/bootstrap-ds/tsconfig.json +18 -3
- package/dist/bootstrap-ds/vite.config.ts +1 -1
- package/dist/boundaries.mjs +4 -2
- package/dist/check.mjs +49 -15
- package/dist/config.mjs +13 -2
- package/dist/init.mjs +17 -14
- package/dist/investigations.mjs +34 -3
- package/dist/layers.mjs +288 -0
- package/dist/linaria/preserve-values.cjs +21 -2
- package/dist/lint-config.mjs +1 -1
- package/dist/mcp/behavior-pages.mjs +36 -0
- package/dist/mcp/context.mjs +5 -2
- package/dist/mcp/edit-preparation.mjs +3 -3
- package/dist/mcp/execution-results.mjs +146 -0
- package/dist/mcp/mutations.mjs +4 -4
- package/dist/mcp/prompts.mjs +1 -1
- package/dist/mcp/result-pages.mjs +87 -0
- package/dist/mcp/server.mjs +49 -30
- package/dist/mcp/widget.bundle.js +1 -1
- package/dist/oxlint.mjs +3 -1
- package/dist/preview-resources.mjs +11 -1
- package/dist/property-registrations.mjs +39 -0
- package/dist/public-api.mjs +13 -6
- package/dist/scenario-trace.mjs +7 -7
- package/dist/scenarios-vite.mjs +2 -1
- package/dist/scenarios.mjs +10 -7
- package/dist/scoped-tokens.mjs +6 -0
- package/dist/showcase/client.bundle.js +1 -1
- package/dist/showcase/sandbox.bundle.js +1 -1
- package/dist/skills/ads-break-ui/SKILL.md +27 -10
- package/dist/skills/ads-break-ui/references/atomic-styles.md +48 -0
- package/dist/skills/ads-break-ui/references/captures.md +6 -1
- package/dist/skills/ads-break-ui/references/evidence.md +52 -5
- package/dist/skills/ads-break-ui/references/guarded-editing.md +9 -6
- package/dist/skills/ads-break-ui/references/layers.md +123 -0
- package/dist/skills/ads-break-ui/references/review.md +96 -0
- package/dist/skills/ads-break-ui/references/scenarios.md +24 -3
- package/dist/skills/ads-designer/SKILL.md +28 -11
- package/dist/skills/ads-designer/assets/bootstrap-ds/ADS.md +2 -2
- package/dist/skills/ads-designer/assets/bootstrap-ds/README.md +1 -1
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/index.ts +0 -1
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/review/index.ts +1 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/Foundation.scenario.tsx +1 -1
- package/dist/skills/ads-designer/assets/bootstrap-ds/ds.config.json +1 -1
- package/dist/skills/ads-designer/assets/bootstrap-ds/tsconfig.json +18 -3
- package/dist/skills/ads-designer/assets/bootstrap-ds/vite.config.ts +1 -1
- package/dist/skills/ads-designer/references/atomic-styles.md +48 -0
- package/dist/skills/ads-designer/references/captures.md +6 -1
- package/dist/skills/ads-designer/references/evidence.md +52 -5
- package/dist/skills/ads-designer/references/guarded-editing.md +9 -6
- package/dist/skills/ads-designer/references/layers.md +123 -0
- package/dist/skills/ads-designer/references/review.md +96 -0
- package/dist/skills/ads-designer/references/scenarios.md +24 -3
- package/dist/skills/ads-import/SKILL.md +27 -10
- package/dist/skills/ads-import/references/atomic-styles.md +48 -0
- package/dist/skills/ads-import/references/captures.md +6 -1
- package/dist/skills/ads-import/references/evidence.md +52 -5
- package/dist/skills/ads-import/references/guarded-editing.md +9 -6
- package/dist/skills/ads-import/references/layers.md +123 -0
- package/dist/skills/ads-import/references/review.md +96 -0
- package/dist/skills/ads-import/references/scenarios.md +24 -3
- package/dist/skills/ads-migrate/SKILL.md +27 -10
- package/dist/skills/ads-migrate/references/atomic-styles.md +48 -0
- package/dist/skills/ads-migrate/references/captures.md +6 -1
- package/dist/skills/ads-migrate/references/evidence.md +52 -5
- package/dist/skills/ads-migrate/references/guarded-editing.md +9 -6
- package/dist/skills/ads-migrate/references/layers.md +123 -0
- package/dist/skills/ads-migrate/references/review.md +96 -0
- package/dist/skills/ads-migrate/references/scenarios.md +24 -3
- package/dist/skills/ads-motion/SKILL.md +28 -11
- package/dist/skills/ads-motion/references/atomic-styles.md +48 -0
- package/dist/skills/ads-motion/references/audit.md +1 -1
- package/dist/skills/ads-motion/references/captures.md +6 -1
- package/dist/skills/ads-motion/references/evidence.md +52 -5
- package/dist/skills/ads-motion/references/guarded-editing.md +9 -6
- package/dist/skills/ads-motion/references/layers.md +123 -0
- package/dist/skills/ads-motion/references/motion-review.md +35 -0
- package/dist/skills/ads-motion/references/review.md +96 -35
- package/dist/skills/ads-motion/references/scenarios.md +24 -3
- package/dist/units.mjs +17 -14
- package/docs/ADS.md +42 -5
- package/docs/ARCHITECTURE.md +64 -4
- package/docs/BEHAVIORS.md +21 -2
- package/docs/CHANGELOG.md +40 -0
- package/docs/GUIDE.md +3 -2
- package/docs/MCP.md +87 -20
- package/package.json +2 -1
- package/dist/bootstrap-ds/design-system/patterns/token-preview/Scenario.tsx +0 -4
- package/dist/bootstrap-ds/design-system/patterns/token-preview/fixture.ts +0 -8
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/patterns/token-preview/Scenario.tsx +0 -4
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/patterns/token-preview/fixture.ts +0 -8
- /package/dist/bootstrap-ds/design-system/{patterns → review}/token-preview/TokenPreview.tsx +0 -0
- /package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/{patterns → review}/token-preview/TokenPreview.tsx +0 -0
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# Components, patterns and application adapters
|
|
2
|
+
|
|
3
|
+
Read this when choosing an owner, moving UI between layers, or resolving
|
|
4
|
+
`component-dependency`, `component-contract`, `component-style`, `no-app-import`
|
|
5
|
+
or `showcase-import`. MCP also serves this guide as `ads://guides/layers`.
|
|
6
|
+
|
|
7
|
+
## Choose by responsibility
|
|
8
|
+
|
|
9
|
+
A **component** provides one cohesive UI capability: semantics, input handling,
|
|
10
|
+
focus, accessibility, states and appearance. It may compose other components and
|
|
11
|
+
controllers. A notification using an icon, action button and spinner can still
|
|
12
|
+
be one component.
|
|
13
|
+
|
|
14
|
+
A **pattern** arranges capabilities and content slots into a reusable structure
|
|
15
|
+
or workflow, such as navigation with search/account controls or a report screen.
|
|
16
|
+
Layout parts may arrange `children` without importing several components.
|
|
17
|
+
Patterns may compose other patterns. A native wrapper or a large implementation
|
|
18
|
+
does not decide the layer.
|
|
19
|
+
|
|
20
|
+
An **application adapter** supplies domain data, store access, route state and
|
|
21
|
+
navigation/service callbacks. Domain-shaped inputs are valid in project-owned
|
|
22
|
+
patterns; importing a particular application store/router is not.
|
|
23
|
+
|
|
24
|
+
A **scenario** supplies demonstration inputs, local state and simulated services.
|
|
25
|
+
A component scenario may compose several public components and development review helpers
|
|
26
|
+
to demonstrate its subject. That does not turn its fixture or variant selectors
|
|
27
|
+
into production API. Keep `covers` aligned with the scenario's subject layer.
|
|
28
|
+
|
|
29
|
+
Do not classify by import count, JSX element count, names or file length. Review
|
|
30
|
+
the capability and its consumer contract. Preserve valid APIs when tracing is
|
|
31
|
+
inconclusive; do not make an export private or add a product prop just to pass.
|
|
32
|
+
|
|
33
|
+
## Demonstrate the production implementation
|
|
34
|
+
|
|
35
|
+
Product patterns are reusable application UI, not showcase replicas. A scenario
|
|
36
|
+
imports the same production owner and supplies fixtures through its public API;
|
|
37
|
+
the application supplies live data and callbacks to that API. Keep mock records,
|
|
38
|
+
demo selections and simulated services in development files. Legitimate defaults,
|
|
39
|
+
control labels and the pattern's own interaction logic remain with their owner.
|
|
40
|
+
|
|
41
|
+
Demo framing must not replace a product pattern's styling or behavior. Browser
|
|
42
|
+
checks should exercise both the demonstrated contract and relevant application
|
|
43
|
+
integration; a successful showcase does not establish production parity. A new
|
|
44
|
+
pattern need not already have an application consumer, and import counts cannot
|
|
45
|
+
detect a duplicated implementation. Existing import guards prevent fixture/test
|
|
46
|
+
dependencies; review and browser checks must assess hardcoded mock data and
|
|
47
|
+
unrepresentative rendering that source ownership alone cannot prove.
|
|
48
|
+
|
|
49
|
+
Review framing belongs in development-only `review/`, not production patterns.
|
|
50
|
+
Use the separate review entry and [review.md](review.md) for the migration and
|
|
51
|
+
build contract.
|
|
52
|
+
|
|
53
|
+
## Dependency contracts (blocking)
|
|
54
|
+
|
|
55
|
+
- Component runtime may depend on components, shared controllers and lower-level
|
|
56
|
+
helpers. It cannot depend on patterns or composition, including indirectly
|
|
57
|
+
through aliases, forwarding exports, helpers or literal dynamic imports.
|
|
58
|
+
Type-only pattern references do not introduce runtime dependencies.
|
|
59
|
+
- Patterns consume component symbols published by the configured public entry,
|
|
60
|
+
including intentional public types. A relative import of a public symbol is
|
|
61
|
+
allowed inside the ADS; requiring a self-import through the barrel can create
|
|
62
|
+
cycles. Private state, class blocks and implementation helpers stay internal.
|
|
63
|
+
A public component may use its own private implementation dependencies.
|
|
64
|
+
- Runtime code cannot import review implementations/types/styles, scenarios, fixtures or checks, including through
|
|
65
|
+
forwarding exports. Scenarios also cannot import application source.
|
|
66
|
+
- ADS implementations receive application data/effects through inputs and
|
|
67
|
+
callbacks. Re-exporting application stores, routers or services from a helper
|
|
68
|
+
does not make them part of the ADS.
|
|
69
|
+
|
|
70
|
+
For example, `components/Control → shared/helper → patterns/Navigation` fails
|
|
71
|
+
`component-dependency`. Extract a lower-level capability/controller, or move the
|
|
72
|
+
arrangement to a pattern. `patterns/Navigation → components/Control` is valid
|
|
73
|
+
when `Control` is public. Replacing that import with its private state helper
|
|
74
|
+
fails `component-contract` even through a forwarding module.
|
|
75
|
+
|
|
76
|
+
## Styling contracts (blocking when ownership is established)
|
|
77
|
+
|
|
78
|
+
Components own their control states and appearance. Patterns own arrangement,
|
|
79
|
+
spacing and their own presentation. Use typed component props/variants, an
|
|
80
|
+
intentional public class helper/hook, or registered non-state customization
|
|
81
|
+
variables. Registration does not authorize overriding interaction policy.
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
// Component-owned implementation; the marker is not a consumer styling API.
|
|
85
|
+
function Control() {
|
|
86
|
+
return <button><span className="control-private-label">Label</span></button>;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Pattern: rejected because it styles the component's private rendered part.
|
|
90
|
+
const wrong = css`
|
|
91
|
+
& .control-private-label { color: var(--text-muted); }
|
|
92
|
+
`;
|
|
93
|
+
|
|
94
|
+
// Pattern: its own arrangement remains valid.
|
|
95
|
+
const layout = css`
|
|
96
|
+
display: flex;
|
|
97
|
+
gap: var(--space-4);
|
|
98
|
+
`;
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
The source guard matches component-emitted class names and unambiguous literal
|
|
102
|
+
data markers to the selector's styled subject, including `:is()`/`:where()`.
|
|
103
|
+
It also rejects reads of known private component variables. It does not treat
|
|
104
|
+
an ancestor predicate or `:has()` query as styling that ancestor/descendant:
|
|
105
|
+
`[data-layout="expanded"] > & { gap: var(--space-4); }` changes the pattern's
|
|
106
|
+
own arrangement. Public hooks and registered non-state variables remain valid.
|
|
107
|
+
Token definitions, namespaces and writes retain their existing guards.
|
|
108
|
+
|
|
109
|
+
Opaque/computed imports, generated selectors, ambiguous shared markers, forwarded
|
|
110
|
+
consumer classes and arbitrary service abstractions are not a complete static
|
|
111
|
+
proof. Passing source checks does not prove that every visual override is safe.
|
|
112
|
+
Review the real rendered states, computed styles, keyboard interactions and
|
|
113
|
+
responsive layouts; use registered browser checks for promised behavior.
|
|
114
|
+
|
|
115
|
+
## Refactoring an owner
|
|
116
|
+
|
|
117
|
+
Move runtime source, its scenarios/fixtures and guides together; update public
|
|
118
|
+
exports, dependent imports and documented scenario IDs. Keep callers on the
|
|
119
|
+
same intentional public API. Navigation stays in an application callback or a
|
|
120
|
+
normal link supplied by the consumer, rather than a hidden router mutation in
|
|
121
|
+
the pattern. Validate the complete migration with project checks, product and
|
|
122
|
+
preview builds, and behavior tests. An existing guard rejection is not permission
|
|
123
|
+
to write around the guarded editing workflow.
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# Development-only review UI
|
|
2
|
+
|
|
3
|
+
Read this when creating or migrating demo frames, preview sizing helpers, token
|
|
4
|
+
renderers or demonstration controls. MCP serves it as `ads://guides/review`.
|
|
5
|
+
|
|
6
|
+
## Responsibilities and boundaries
|
|
7
|
+
|
|
8
|
+
Components provide cohesive production capabilities. Patterns provide reusable
|
|
9
|
+
application structures/workflows. Both receive variable application data and
|
|
10
|
+
callbacks through their APIs. Their scenarios import the same implementation
|
|
11
|
+
used by the application and supply fixtures; do not create a second implementation
|
|
12
|
+
that only looks correct in the showcase.
|
|
13
|
+
|
|
14
|
+
`design-system/review/` owns development-only presentation: example frames,
|
|
15
|
+
arrangement, demonstration controls, token sample renderers and their styles.
|
|
16
|
+
It remains project-owned. The MCP host shell stays generic; review code executes
|
|
17
|
+
inside the preview App with the project's framework, foundation, fonts and styles.
|
|
18
|
+
Nothing depends on particular helper names or an imported component library.
|
|
19
|
+
|
|
20
|
+
The development entry defaults to `review/index.ts` relative to `dsDir`; configure
|
|
21
|
+
`reviewEntry` for another script inside `review/`. Its import alias is the
|
|
22
|
+
configured `publicAlias` plus `/review`, normally `@ds/review`. Discover the actual
|
|
23
|
+
entry/alias through `ads_status.project.review`. Export helpers there, never from
|
|
24
|
+
the production public barrel. Review implementations, types and styles must not
|
|
25
|
+
enter application, component, pattern or controller dependencies. Tests, fixtures,
|
|
26
|
+
scenarios and preview mounts can consume review code.
|
|
27
|
+
|
|
28
|
+
Review helpers can own Linaria presentation, local state and demo controls. Normal
|
|
29
|
+
style-token, variable ownership, measured-style-write and application separation
|
|
30
|
+
gates still apply. They consume deliberate public component/pattern/controller
|
|
31
|
+
contracts and may reuse local foundation helpers. They cannot target private
|
|
32
|
+
component styles or replace real product behavior. Keep one-off fixture data in
|
|
33
|
+
the scenario; a helper need not become a product API to frame an example.
|
|
34
|
+
|
|
35
|
+
## Scenario and token contracts
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { Panel } from "@ds";
|
|
39
|
+
import { ReviewFrame } from "@ds/review";
|
|
40
|
+
import { fixture } from "./Panel.fixture";
|
|
41
|
+
|
|
42
|
+
export const scenario = { title: "Panel", covers: ["Panel"] };
|
|
43
|
+
export default function Scenario() {
|
|
44
|
+
return <ReviewFrame><Panel {...fixture} /></ReviewFrame>;
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
The names above are illustrative. `covers` names the production subjects actually
|
|
49
|
+
demonstrated, not every review wrapper. A review export has no product catalogue
|
|
50
|
+
entry and needs no standalone catalogue scenario. Keep review unit tests/specs
|
|
51
|
+
beside their owner; optional behavior contracts can verify review guarantees
|
|
52
|
+
through an existing real scenario. They establish no production coverage.
|
|
53
|
+
|
|
54
|
+
A token scenario may name its real review renderer in `covers`, import it from
|
|
55
|
+
the development entry, declare `samples: fixture.samples`, and pass those samples
|
|
56
|
+
into the renderer. Existing real product patterns may also serve as token UI.
|
|
57
|
+
Empty covers, unused samples, fabricated tokens and plain value lists remain
|
|
58
|
+
invalid. The rendered App must still pass token-binding checks. See
|
|
59
|
+
[scenarios.md](scenarios.md) for the full token/render contract.
|
|
60
|
+
|
|
61
|
+
Review class helpers can supply source-proven Linaria classes to a scenario.
|
|
62
|
+
Arbitrary scenario classes/styles remain forbidden. A review wrapper's own native
|
|
63
|
+
controls do not authorize arbitrary native controls in its consuming scenario;
|
|
64
|
+
slot/selector exceptions still need actual production-owner evidence. Keep
|
|
65
|
+
production and review export names distinct where `covers` would be ambiguous.
|
|
66
|
+
|
|
67
|
+
## Build and guarded edits
|
|
68
|
+
|
|
69
|
+
The normal preview plugin registers the exact review alias before broader product
|
|
70
|
+
aliases. Configure the same alias in project TypeScript and any independent
|
|
71
|
+
preview/dev harness. In an ordered bundler alias map, put `@ds/review` before
|
|
72
|
+
`@ds`; the broad `@ds` mapping must not resolve it as `index.ts/review`.
|
|
73
|
+
Production entrypoints never import the development entry. Inspect the product
|
|
74
|
+
bundle for review modules/CSS; passing static checks does not prove bundle parity.
|
|
75
|
+
|
|
76
|
+
Use `ads_units` for `review/<Owner>` units. Scenarios, local specs and helper files
|
|
77
|
+
follow ordinary flat/directory ownership. A review patch may update only its own
|
|
78
|
+
re-exports in the development entry and its own documented style boundaries.
|
|
79
|
+
Product owners retain the separate production entry companion. Use prepared
|
|
80
|
+
patches/dry runs and coupled transactions as described in
|
|
81
|
+
[guarded-editing.md](guarded-editing.md); do not bypass a rejected mutation.
|
|
82
|
+
|
|
83
|
+
For an existing project, identify helpers by responsibility and actual consumers,
|
|
84
|
+
not names or the number of imported components. Preserve real application patterns.
|
|
85
|
+
Move only demo helpers, their styles and relevant guides to `review/`; update
|
|
86
|
+
scenario/preview imports, style-boundary paths, TypeScript/bundler aliases and
|
|
87
|
+
links. Remove their production exports and obsolete standalone product scenarios.
|
|
88
|
+
Do not copy old example fixtures or export demonstration controls as product UI.
|
|
89
|
+
|
|
90
|
+
Upgrade ADS before migrating a consuming project: older versions do not know the
|
|
91
|
+
separate review entry. For staged guarded edits, first add distinctly named review
|
|
92
|
+
exports, migrate consumers in passing owner patches, then remove the old pattern
|
|
93
|
+
exports/owners once unused. Required coupled changes use a transaction. Check
|
|
94
|
+
source gates, typecheck, preview and production builds, real browser rendering,
|
|
95
|
+
registered behaviors and token bindings. A source move alone establishes none
|
|
96
|
+
of those rendered guarantees.
|
|
@@ -34,10 +34,31 @@ do not add scenario `preventDefault` handlers merely to hide it. Explicit App
|
|
|
34
34
|
bases retain their declared behavior and CSP requirements; external hosts own
|
|
35
35
|
their document-loading policy. Verify link activation as well as rendering.
|
|
36
36
|
|
|
37
|
+
## Forms inside Apps
|
|
38
|
+
|
|
39
|
+
Use real form semantics and the runtime owner's intended submit handler. ADS's
|
|
40
|
+
showcase and diagnostic explorer permit `allow-forms` at every iframe layer,
|
|
41
|
+
including legacy widgets. Browser constraint validation, Submit clicks, Enter and
|
|
42
|
+
`requestSubmit()` can reach the normal submit path. Client-side forms call
|
|
43
|
+
`preventDefault()` in their submit handlers; the host does not synthesize clicks
|
|
44
|
+
or submit events. Native action requests are blocked by CSP `form-action 'none'`.
|
|
45
|
+
Submit effects that use tools or resources still follow the MCP bridge.
|
|
46
|
+
|
|
47
|
+
If a click fires but the `submit` handler never runs, inspect the browser's sandbox
|
|
48
|
+
diagnostic and every ancestor iframe's permissions. Distinguish that host problem
|
|
49
|
+
from native constraint validation legitimately preventing submission. Do not add
|
|
50
|
+
scenario click interception to disguise a missing sandbox permission. External
|
|
51
|
+
MCP hosts control their own sandbox/CSP policy.
|
|
52
|
+
|
|
53
|
+
Verify an invalid submit, a valid submit, implicit Enter submission and the promised
|
|
54
|
+
state effects. A working Next button is not evidence that form submission works.
|
|
55
|
+
Keep native action navigation separate from client-side submission behavior;
|
|
56
|
+
`allow-forms` does not grant host DOM access or top-level navigation.
|
|
57
|
+
|
|
37
58
|
## Owner-local token previews load their own definitions
|
|
38
59
|
|
|
39
60
|
Keep the registered token sheet imported by its runtime owner for product use.
|
|
40
|
-
A colocated `kind: "tokens"` scenario may render only the
|
|
61
|
+
A colocated `kind: "tokens"` scenario may render only the development-only review renderer
|
|
41
62
|
with its fixture samples. Discovery adds the registered owner sheet to the
|
|
42
63
|
generated record's `stylesheets`; `previewEntriesPlugin` imports those paths
|
|
43
64
|
into the token preview independently of the runtime component. Custom builders
|
|
@@ -91,7 +112,7 @@ These examples describe verification mistakes, not component-specific rules:
|
|
|
91
112
|
|
|
92
113
|
| Situation | Do not | Do instead |
|
|
93
114
|
|-----------|--------|------------|
|
|
94
|
-
| A reference example sets `width: 15rem`, while the native popup uses its default width. | Remove the reference width and claim the original example now matches. | Keep the baseline intact. Reproduce demo sizing through the project's
|
|
115
|
+
| A reference example sets `width: 15rem`, while the native popup uses its default width. | Remove the reference width and claim the original example now matches. | Keep the baseline intact. Reproduce demo sizing through the project's development-only review helper or supported style helper. If a different native size is intentional, document it. Label any additional normalized comparison separately. |
|
|
95
116
|
| Static tracing cannot prove that a public clear control renders when a value is selected. | Remove its export, drop its required coverage, or change runtime behavior merely to pass the gate. | Preserve the intended public API. Try a meaningful selected-state fixture or another real scenario. If valid rendering remains untraceable, report the tooling limitation with a small reproduction. |
|
|
96
117
|
| A screenshot shows the clear control in a selected state. | Treat its presence as evidence that clearing works. | Add a browser check: start selected, activate Clear, assert the value and selection are empty, verify the control's resulting visibility and documented focus behavior, then select again. |
|
|
97
118
|
|
|
@@ -207,6 +228,6 @@ An `exercises` entry records behavioral use; it never grants styling permission.
|
|
|
207
228
|
Keep helper signatures compatible with the product API. Fix ownership/provenance
|
|
208
229
|
in the runtime owner when genuinely wrong; retain intentional public APIs when
|
|
209
230
|
reporting an unsupported trace. Demo-only sizing, framing and arrangement still
|
|
210
|
-
belong in
|
|
231
|
+
belong in development-only review helpers. A style helper is not permission to
|
|
211
232
|
author a second design in the scenario. For cascade risks and extraction issues,
|
|
212
233
|
read [atomic-styles.md](atomic-styles.md).
|
|
@@ -86,17 +86,32 @@ For on-demand current/candidate screenshots and visual dry-run review, read
|
|
|
86
86
|
[captures.md](references/captures.md).
|
|
87
87
|
For a rejected patch, failed check or loading error, read
|
|
88
88
|
[evidence and diagnosis](references/evidence.md); inspect the failing boundary
|
|
89
|
-
|
|
89
|
+
then page needed `ads_results` sections using the returned result ID. Inspect
|
|
90
|
+
one `ads_investigate({unit,check,runId})` summary before changing APIs or policy;
|
|
91
|
+
load request/error/artifact details only when relevant.
|
|
92
|
+
|
|
93
|
+
Review/demo layout belongs in development-only `review/`, exported through the
|
|
94
|
+
separate `${publicAlias}/review` entry (normally `@ds/review`), never the production
|
|
95
|
+
barrel. Product patterns are application UI. For ownership, migration, token
|
|
96
|
+
renderers, build aliases or `review-import` / `review-contract` diagnostics, read
|
|
97
|
+
[development review UI](references/review.md), also served as `ads://guides/review`.
|
|
98
|
+
|
|
99
|
+
A component provides one cohesive UI capability; a pattern arranges capabilities
|
|
100
|
+
into reusable structures or workflows. Components may compose components/controllers;
|
|
101
|
+
layout patterns may arrange slots. Do not classify by component count. For owner
|
|
102
|
+
selection or `component-dependency`, `component-contract` or `component-style`, read
|
|
103
|
+
[layer responsibilities and contracts](references/layers.md), also served as
|
|
104
|
+
`ads://guides/layers`. Preserve public APIs and documented non-state styling hooks.
|
|
90
105
|
|
|
91
106
|
For parent/child `covers`, conditional-control review, reference comparisons,
|
|
92
|
-
public style-helper use, fragment
|
|
93
|
-
`showcase-class` findings, read [scenario contracts](references/scenarios.md). Its verification
|
|
107
|
+
public style-helper use, native slot/selector composition, fragment navigation,
|
|
108
|
+
or `scenario-render` / `showcase-control` / `showcase-class` findings, read [scenario contracts](references/scenarios.md). Its verification
|
|
94
109
|
examples explain API visibility, reference baselines and state-transition checks.
|
|
95
110
|
Traced parents can cover declared public children; verified public Linaria
|
|
96
111
|
helpers do not grant custom scenario CSS.
|
|
97
112
|
|
|
98
113
|
For atomic base/variant styling, helper/wrapper class composition, extracted
|
|
99
|
-
custom-property arithmetic, or an
|
|
114
|
+
custom-property arithmetic, typed `@property` registrations, or an
|
|
100
115
|
`atomic-composition-review` / `atomic-composition-limit` advisory, read
|
|
101
116
|
[atomic style composition](references/atomic-styles.md). The same guide is served
|
|
102
117
|
as `ads://guides/atomic-styles`. It explains shorthand/logical conflicts and
|
|
@@ -146,7 +161,7 @@ checks; do not fetch the unpublished package.
|
|
|
146
161
|
Read [assets/bootstrap-ds/README.md](assets/bootstrap-ds/README.md) and its
|
|
147
162
|
[contract](assets/bootstrap-ds/ADS.md). The scaffold contains semantic token
|
|
148
163
|
defaults, React/TypeScript/Linaria configuration, general lint, a public
|
|
149
|
-
barrel, empty product component directories, a project-owned token review
|
|
164
|
+
barrel, empty product component directories, a project-owned token review renderer, and a project preview compiler adapter. The browser shell is supplied by ADS tooling.
|
|
150
165
|
It contains no components, shell patterns, vendored fonts, or example screens.
|
|
151
166
|
|
|
152
167
|
Resolve assets relative to this skill's `SKILL.md`, including after installation
|
|
@@ -359,7 +374,7 @@ fixture under the configured token directory. Declare metadata
|
|
|
359
374
|
The renderer name is project-owned; use its real public API. Each literal fixture
|
|
360
375
|
sample declares `{ token, property, probe }`: a real token, the CSS property its
|
|
361
376
|
sample demonstrates, and a valid test value different from that token's current
|
|
362
|
-
value. Pass `samples` into the rendered
|
|
377
|
+
value. Pass `samples` into the rendered development-only review renderer. Names, sample text,
|
|
363
378
|
bindings and probes are fixture data; displayed values come from foundation CSS.
|
|
364
379
|
There is no property catalogue, token-name mapping or probe palette in ADS.
|
|
365
380
|
Every token needs sample coverage; fabricated tokens, missing bindings/probes,
|
|
@@ -380,10 +395,12 @@ source definitions and values; inspecting definitions does not prove UI parity.
|
|
|
380
395
|
The tool keeps the shared naming contract; sample templates and their token
|
|
381
396
|
lists belong to the project.
|
|
382
397
|
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
398
|
+
Development review helpers need no product catalogue scenario. A token scenario
|
|
399
|
+
may name its review renderer in `covers`; ordinary component/pattern scenarios
|
|
400
|
+
cover their production subjects. Keep review exports in the separate review entry.
|
|
401
|
+
Remove redundant helper catalogue scenarios during migration. Product UI retains
|
|
402
|
+
its real render-coverage requirement. Keep directory ownership anchored by its
|
|
403
|
+
implementation entry (`index` or a file matching the directory name) or colocated fixture.
|
|
387
404
|
Import colocated image/font fixtures so MCP serves them through asset resources.
|
|
388
405
|
For a broken-image case, use a local failing fixture, rather than an external
|
|
389
406
|
network failure or a domain-specific CSP exception. Production asset APIs remain
|
|
@@ -407,7 +424,7 @@ branch, property and value must fit its role. Token-backed control skins, layout
|
|
|
407
424
|
interactive state rules and owner hooks are rejected even through `:where()`.
|
|
408
425
|
Do not copy an unchecked upstream preflight or turn a component repair into a reset.
|
|
409
426
|
Keep behavior and skin in their runtime owner. Put demo-only sizing and framing
|
|
410
|
-
in a
|
|
427
|
+
in a development-only review helper; add component props for a deliberate runtime
|
|
411
428
|
API need. Preserve required capabilities while following ownership rules.
|
|
412
429
|
Use tokens for absolute/font-relative lengths, including `ch`, `ex`, `cap`, `ic`
|
|
413
430
|
and `lh`; calculations and fallback values follow the same rule. Structural
|
|
@@ -72,7 +72,7 @@ layout, component-specific focus rules and hover/disabled skins are rejected.
|
|
|
72
72
|
Shared token definitions belong in value sheets, not `base.css`. No project token
|
|
73
73
|
names are embedded in this policy. A zero-specificity `:where()` wrapper does not
|
|
74
74
|
change ownership. Put component design and animation in Linaria owners, and
|
|
75
|
-
scenario layout variations in typed
|
|
75
|
+
scenario layout variations in typed review-helper props. Browser review
|
|
76
76
|
still checks the effects and accessibility of permitted defaults.
|
|
77
77
|
|
|
78
78
|
Own primitive markup, focus, hover, selected, disabled, loading, and motion in
|
|
@@ -151,7 +151,7 @@ Flat owners may use `Button.scenario.tsx` and `Button.fixture.ts` instead.
|
|
|
151
151
|
`export const scenario = { title: "Button states", covers: ["Button"] };`.
|
|
152
152
|
Token entries under the configured token directory declare
|
|
153
153
|
`export const scenario = { title: fixture.title, covers: ["TokenSamples"], samples: fixture.samples };`.
|
|
154
|
-
`TokenSamples` is any project-owned
|
|
154
|
+
`TokenSamples` is any project-owned development-only review renderer, not a required name.
|
|
155
155
|
Its colocated fixture declares literal `samples: [{ token, property, probe }]`.
|
|
156
156
|
Each token must exist and have sample coverage; duplicate bindings, missing probes,
|
|
157
157
|
empty covers and value-only inspectors fail. The default entry passes the declared
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Empty native design system
|
|
2
2
|
|
|
3
3
|
This private React/TypeScript workspace contains semantic CSS tokens, a project-owned
|
|
4
|
-
token review
|
|
4
|
+
token review renderer, a public barrel, Linaria extraction and a preview compiler
|
|
5
5
|
adapter. It has no product components, icons, fonts or example screens. The minimal showcase
|
|
6
6
|
shell and MCP client come from ADS tooling.
|
|
7
7
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TokenPreview } from "./token-preview/TokenPreview";
|
package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/Foundation.scenario.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TokenPreview } from "@ds";
|
|
1
|
+
import { TokenPreview } from "@ds/review";
|
|
2
2
|
import { fixture } from "./Foundation.fixture";
|
|
3
3
|
export const scenario = { title: fixture.title, covers: ["TokenPreview"], samples: fixture.samples };
|
|
4
4
|
export default function Scenario() { return <TokenPreview {...fixture} />; }
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"compilerOptions": {
|
|
3
3
|
"target": "ES2022",
|
|
4
|
-
"lib": [
|
|
4
|
+
"lib": [
|
|
5
|
+
"ES2022",
|
|
6
|
+
"DOM",
|
|
7
|
+
"DOM.Iterable"
|
|
8
|
+
],
|
|
5
9
|
"module": "ESNext",
|
|
6
10
|
"moduleResolution": "bundler",
|
|
7
11
|
"skipLibCheck": true,
|
|
@@ -14,7 +18,18 @@
|
|
|
14
18
|
"noUnusedParameters": true,
|
|
15
19
|
"noFallthroughCasesInSwitch": true,
|
|
16
20
|
"baseUrl": ".",
|
|
17
|
-
"paths": {
|
|
21
|
+
"paths": {
|
|
22
|
+
"@ds/review": [
|
|
23
|
+
"design-system/review/index.ts"
|
|
24
|
+
],
|
|
25
|
+
"@ds": [
|
|
26
|
+
"design-system/index.ts"
|
|
27
|
+
]
|
|
28
|
+
}
|
|
18
29
|
},
|
|
19
|
-
"include": [
|
|
30
|
+
"include": [
|
|
31
|
+
"src",
|
|
32
|
+
"design-system",
|
|
33
|
+
"vite.config.ts"
|
|
34
|
+
]
|
|
20
35
|
}
|
|
@@ -7,7 +7,7 @@ import { linariaTagResolver } from "@reqvire-org/ads/linaria";
|
|
|
7
7
|
export default defineConfig({
|
|
8
8
|
plugins: [wyw({ tagResolver: linariaTagResolver }), react()],
|
|
9
9
|
resolve: {
|
|
10
|
-
alias: { "@ds": path.resolve(import.meta.dirname, "design-system/index.ts") },
|
|
10
|
+
alias: { "@ds/review": path.resolve(import.meta.dirname, "design-system/review/index.ts"), "@ds": path.resolve(import.meta.dirname, "design-system/index.ts") },
|
|
11
11
|
},
|
|
12
12
|
build: {
|
|
13
13
|
outDir: "dist",
|
|
@@ -81,6 +81,54 @@ const treatment = css`
|
|
|
81
81
|
This is a distinct state, not two competing base atoms. Whether changing padding
|
|
82
82
|
on hover is desirable remains a product decision.
|
|
83
83
|
|
|
84
|
+
## Register typed custom properties without atomizing their descriptors
|
|
85
|
+
|
|
86
|
+
Use a literal `@property` in its component/pattern's Linaria template when the
|
|
87
|
+
browser needs a typed, interpolated runtime variable:
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
const treatment = css`
|
|
91
|
+
@property --ds-example-progress {
|
|
92
|
+
syntax: "<number>";
|
|
93
|
+
inherits: false;
|
|
94
|
+
initial-value: 0;
|
|
95
|
+
}
|
|
96
|
+
opacity: var(--ds-example-progress);
|
|
97
|
+
`;
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
The identifier is illustrative; use a unique name owned by the real unit.
|
|
101
|
+
Registrations are document-global, even when authored beside one component.
|
|
102
|
+
Put them at template level or inside conditional at-rules, never element selectors.
|
|
103
|
+
Use the same ADS tag resolver described below in both product and preview builds;
|
|
104
|
+
it preserves each complete registration and its conditional context instead of
|
|
105
|
+
splitting syntax/inherits/initial-value into invalid atomic rules. This works for
|
|
106
|
+
atomic `css` and `styled`; the browser receives CSS without a registration runtime.
|
|
107
|
+
MCP delivers it inside the App document, not the outer showcase host.
|
|
108
|
+
|
|
109
|
+
`property-registration` validates descriptor shape, CSS syntax/initial-value and
|
|
110
|
+
ownership, and rejects conflicting schemas or registrations shared by unrelated
|
|
111
|
+
owners. Identical registrations from the same owner are permitted. Runtime
|
|
112
|
+
`--ds-*` / `--ux-*` variables stay with their runtime owner. A shared token's
|
|
113
|
+
registration belongs beside its actual definition in a foundation value sheet;
|
|
114
|
+
a namespaced owner token's registration belongs in its registered `tokens.css`.
|
|
115
|
+
Neither `base.css` nor `fonts.css` becomes a registration escape hatch. Registration
|
|
116
|
+
alone does not define a token or satisfy its sample/fixture coverage.
|
|
117
|
+
|
|
118
|
+
Typed initial values must match their syntax and be computationally independent:
|
|
119
|
+
`0px` is valid metadata; `var(--space-4)`, `1rem` and `currentColor` are not.
|
|
120
|
+
The literal exemption applies only to registration descriptors. Keep design
|
|
121
|
+
assignments outside them token-backed; a technical fallback is not a place to
|
|
122
|
+
hide a component skin. Use literal static descriptors so guards can inspect them.
|
|
123
|
+
See the [W3C registration contract](https://www.w3.org/TR/css-properties-values-api-1/#at-property-rule).
|
|
124
|
+
|
|
125
|
+
Verify extracted CSS and actual interpolation, including after minification and
|
|
126
|
+
inside the MCP App. A declaration can parse while a browser ignores an invalid
|
|
127
|
+
registration. Keep required browser fallbacks and reduced-motion behavior; do not
|
|
128
|
+
replace a valid CSS implementation with script merely to evade extraction or a
|
|
129
|
+
guard limitation. These checks cover declarative registrations; arbitrary dynamic
|
|
130
|
+
`CSS.registerProperty()` calls are not an ownership proof.
|
|
131
|
+
|
|
84
132
|
## Preserve custom-property arithmetic during extraction
|
|
85
133
|
|
|
86
134
|
Custom properties can hold an unevaluated token stream that becomes arithmetic
|
|
@@ -101,7 +101,12 @@ failed/cancelled capture does not replace existing image slots or apply source.
|
|
|
101
101
|
If a scenario/target is newly introduced, `current` is null with an explicit
|
|
102
102
|
`currentAbsent` explanation; only the real candidate image exists.
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
The edit reply is a summary. Read `ads_results({resultId,section:"captures"})` for
|
|
105
|
+
the requested image resource URIs and `section:"diagnostics"` for relevant
|
|
106
|
+
messages; follow `nextCursor` when needed. Read image resources explicitly.
|
|
107
|
+
Standalone `ads_capture` continues returning its selected capture directly.
|
|
108
|
+
|
|
109
|
+
Review those images and diagnostics, fix the draft if necessary, then apply
|
|
105
110
|
with `dryRun:false`. Apply reruns all gates. An image is promoted only when the
|
|
106
111
|
accepted source revision matches the captured candidate; other proposals remain
|
|
107
112
|
stale. Images do not approve a patch or certify interaction/accessibility/parity.
|
|
@@ -20,21 +20,67 @@ A complete failed run can contain independent passing cases. Suite interruption,
|
|
|
20
20
|
missing/skipped cases, stale inputs and an unexplained process exit cannot certify
|
|
21
21
|
a pass. Keep the reported case outcome separate from whole-run acceptance.
|
|
22
22
|
|
|
23
|
+
## Retrieve only the evidence needed
|
|
24
|
+
|
|
25
|
+
`ads_verify`, `ads_apply_patch` and `ads_apply_transaction` reply with counts,
|
|
26
|
+
bounded acceptance, at most three failure previews and `resultId`, within 4096
|
|
27
|
+
UTF-8 JSON bytes. Full validation still decides acceptance. Do not repeat a suite
|
|
28
|
+
merely to recover its output, or restate the complete report in conversation.
|
|
29
|
+
|
|
30
|
+
Read a relevant saved section:
|
|
31
|
+
|
|
32
|
+
```js
|
|
33
|
+
ads_results({resultId: "<returned ID>", section: "outcomes", status: "not_passed"})
|
|
34
|
+
// Continue only when needed, with the same section and status:
|
|
35
|
+
ads_results({resultId: "<returned ID>", section: "outcomes", status: "not_passed", cursor: "<nextCursor>"})
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Pages default to 10 rows, allow at most 20 and stay within 8192 JSON bytes. The
|
|
39
|
+
byte cap can return fewer rows; `nextCursor` is the continuation. Other sections
|
|
40
|
+
are `checks` (pipeline steps), `diagnostics`, `advisories`, `warnings`, `changes`,
|
|
41
|
+
`captures`, `acceptance`, `investigation` (mutation boundary) and `selection`.
|
|
42
|
+
A row marked `detailTruncated` is a preview. To read that exact record, pass its
|
|
43
|
+
`recordIndex`, the same result/section, and `offset`/`chars` (maximum 2000 UTF-16
|
|
44
|
+
characters); follow `nextOffset`. Do not combine ranges with a cursor/status filter.
|
|
45
|
+
Read only the relevant log range. Reading pages or ranges never executes checks.
|
|
46
|
+
|
|
47
|
+
`ads://project/results` lists the latest IDs. `ads://results/<resultId>` reads a
|
|
48
|
+
summary; matching query parameters read pages/ranges. Only the latest verification
|
|
49
|
+
and latest mutation snapshots are retained, independently, up to 8 MiB each.
|
|
50
|
+
A superseded ID fails explicitly. An oversized report retains only its summary
|
|
51
|
+
with a warning; disk failure retains details in server memory until shutdown.
|
|
52
|
+
Neither changes actual acceptance or applied state. These are logical JSON byte
|
|
53
|
+
budgets, not token estimates; compatibility text can duplicate structured JSON.
|
|
54
|
+
Saved outcomes describe completion-time evidence, not current source freshness;
|
|
55
|
+
compare their revisions with `ads_behaviors` before claiming a current pass.
|
|
56
|
+
|
|
57
|
+
`ads_behaviors` pages owner summaries, then an exact unit's `checks`, `guarantees`,
|
|
58
|
+
`subjects`, `demonstrations` or `profiles`. Use `nextCursor` and identical filters;
|
|
59
|
+
changes invalidate a discovery cursor. Read a truncated contract via its
|
|
60
|
+
`sourceFile` and bounded `ads_read_file`, rather than requesting everything.
|
|
61
|
+
|
|
23
62
|
## Get a compact investigation
|
|
24
63
|
|
|
25
|
-
|
|
64
|
+
Take an outcome's exact owner/check/run IDs from `ads_results`, then:
|
|
26
65
|
|
|
27
66
|
```json
|
|
28
|
-
{ "unit": "components/Example", "check": "keyboard-navigation" }
|
|
67
|
+
{ "unit": "components/Example", "check": "keyboard-navigation", "runId": "<outcome runId>" }
|
|
29
68
|
```
|
|
30
69
|
|
|
31
|
-
Send this to `ads_investigate`. It reads
|
|
70
|
+
Send this to `ads_investigate`. It reads a summary within 4096 JSON bytes, without
|
|
71
|
+
running code. The run ID rejects evidence superseded by another execution.
|
|
72
|
+
`section: "details"`, `"requests"`, `"browserErrors"` or `"artifacts"` reads separate pages
|
|
73
|
+
(default 10/max 20 rows, at most 8192 JSON bytes); artifacts themselves require
|
|
74
|
+
explicit resource reads. Truncated investigation records also support
|
|
75
|
+
`recordIndex`/`offset`/`chars`; keep the exact `runId` to avoid mixing evidence.
|
|
76
|
+
Without a check, the tool pages available investigations.
|
|
32
77
|
`ads://project/investigations` lists available entries; the returned `resourceUri`
|
|
33
78
|
reads the same bundle. It records:
|
|
34
79
|
|
|
35
80
|
- Project versus isolated candidate, configured framework/profile and scenario.
|
|
36
81
|
- Exact input revision and the preview revision actually observed by the helper.
|
|
37
|
-
-
|
|
82
|
+
- `details.failingStep`, `details.source`, startup viewport and failure boundary.
|
|
83
|
+
- Counts for separately paged relevant requests, browser errors and artifacts.
|
|
38
84
|
- Available registered trace, screenshot or context artifact resource URIs.
|
|
39
85
|
- Explicit `acceptance.established` and `acceptance.unverified` scope.
|
|
40
86
|
|
|
@@ -58,7 +104,8 @@ Candidate evidence never becomes passing live-source evidence. Compare the
|
|
|
58
104
|
recorded input revision with current `ads_behaviors` evidence; a bundle describes
|
|
59
105
|
its run, and does not claim current source merely because it remains available.
|
|
60
106
|
For a build/architecture rejection before behavior runs, inspect the mutation
|
|
61
|
-
|
|
107
|
+
saved `investigation` section via `ads_results`. Status retains the compact
|
|
108
|
+
execution summary and result ID, rather than embedding complete reports.
|
|
62
109
|
|
|
63
110
|
## Preserve the design while repairing the failure
|
|
64
111
|
|