stylegallery 0.1.4 → 0.1.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.
- package/DOMAINS.md +11 -9
- package/GOVERNANCE.md +8 -2
- package/LICENSE +28 -0
- package/LICENSE-DOCS +42 -0
- package/NOTICE +38 -0
- package/README.md +43 -6
- package/consumer-reference/agent-native/README.md +7 -7
- package/consumer-reference/agent-native/v2/admission-policy.json +241 -1
- package/consumer-reference/agent-native/v2/material-registry.json +1 -1
- package/consumer-reference/agent-native/v2/schema/admission-policy.schema.json +2 -2
- package/design-engineering/component-contract.md +114 -0
- package/design-engineering/decision-tree.md +70 -0
- package/design-engineering/index.md +60 -2
- package/design-engineering/loading-and-feedback.md +91 -0
- package/design-engineering/native-interaction-contracts.md +94 -0
- package/design-engineering/state-management/decision-tree.md +60 -0
- package/design-engineering/state-management/index.md +61 -0
- package/design-engineering/state-management/patterns/derived-state.md +85 -0
- package/design-engineering/state-management/patterns/draft-and-baseline.md +86 -0
- package/design-engineering/state-management/patterns/id-selection.md +85 -0
- package/design-engineering/state-management/patterns/identity-reset.md +89 -0
- package/design-engineering/state-management/patterns/latest-request-wins.md +94 -0
- package/design-engineering/state-management/patterns/optimistic-overlay.md +98 -0
- package/design-engineering/state-management/patterns/single-flight.md +92 -0
- package/design-engineering/state-management/patterns/single-owner.md +89 -0
- package/design-engineering/state-management/patterns/submitted-snapshot.md +107 -0
- package/design-engineering/state-management/patterns/unsaved-navigation.md +100 -0
- package/design-engineering/state-management/patterns/url-state.md +96 -0
- package/design-engineering/state-management/patterns/versioned-restore.md +95 -0
- package/design-engineering/state-management/recipes/delete-undo.md +65 -0
- package/design-engineering/state-management/recipes/index.md +64 -0
- package/design-engineering/state-management/recipes/multi-step-form.md +65 -0
- package/design-engineering/state-management/recipes/search-detail.md +65 -0
- package/design-engineering/state-management/recipes/settings-save.md +64 -0
- package/design-engineering/state-management/state-brief.md +83 -0
- package/design-engineering/state-management/verification.md +65 -0
- package/design-engineering/text-input-and-internationalization.md +91 -0
- package/design-engineering/worked-examples.md +129 -0
- package/design-terminology/comparison-workflow.md +98 -0
- package/design-terminology/conflict-cases.md +87 -55
- package/design-terminology/index.md +19 -5
- package/design-terminology/interaction-semantics.md +87 -0
- package/design-terminology/relation-types.md +12 -6
- package/design-terminology/source-vocabularies.md +33 -3
- package/design-terminology/token-semantics.md +90 -0
- package/design-terminology/typography-semantics.md +86 -0
- package/game-ui/decision-tree.md +81 -0
- package/game-ui/index.md +11 -1
- package/game-ui/screen-recipes.md +101 -0
- package/game-ui/verification-workflow.md +100 -0
- package/index.md +8 -0
- package/log.md +67 -0
- package/motion/accessible-motion.md +90 -0
- package/motion/decision-tree.md +70 -0
- package/motion/index.md +21 -2
- package/motion/interaction-recipes.md +170 -0
- package/motion/interruption-and-retargeting.md +90 -0
- package/motion/motion-brief.md +125 -0
- package/motion/observed-choreography.md +73 -0
- package/motion/rendering-and-performance.md +89 -0
- package/motion/review-workflow.md +8 -0
- package/motion/vocabulary.md +2 -2
- package/package.json +74 -8
- package/platform-guides/adaptation-workflow.md +76 -0
- package/platform-guides/adaptive-navigation.md +85 -0
- package/platform-guides/android-interaction.md +74 -0
- package/platform-guides/apple-interaction.md +9 -1
- package/platform-guides/compatibility-matrix.md +97 -0
- package/platform-guides/index.md +19 -2
- package/platform-guides/input-and-focus.md +91 -0
- package/platform-guides/preferences-and-accessibility.md +90 -0
- package/platform-guides/windows-interaction.md +75 -0
- package/recipes/homepage.md +8 -0
- package/scripts/compiler/README.md +112 -0
- package/scripts/compiler/cli.mjs +51 -0
- package/scripts/compiler/mcp.mjs +53 -0
- package/scripts/compiler/operations.mjs +70 -0
- package/scripts/compiler/runtime.mjs +156 -0
- package/scripts/sg-entry.mjs +20 -0
- package/scripts/sg-server.mjs +20 -0
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Observed Choreography Transcription
|
|
4
|
+
description: Transcribe an observed scroll choreography into Scene Composition Contract vocabulary without copying assets or claiming implementation knowledge.
|
|
5
|
+
domain: motion
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Observed Choreography Transcription
|
|
11
|
+
|
|
12
|
+
Primary role: observed scroll-choreography transcription workflow.
|
|
13
|
+
|
|
14
|
+
## Repository Boundary
|
|
15
|
+
|
|
16
|
+
This workflow turns an externally observed scroll-driven presentation into a transcription record written in the [Scroll-Driven Story](interaction-recipes.md#scroll-driven-story) vocabulary: `start`, `distance`, `scene_ranges`, progress-derived state, and static path. It exists so that a reimplementation study, a review, or an automated capture pipeline can hand a builder one document instead of raw pixels.
|
|
17
|
+
|
|
18
|
+
It does not authorize copying an observed site's assets, copy, code, or brand into this repository or into a study; it does not add motion or decorative properties to reusable Layout pattern CSS; and a transcription record is an observation of an unaffiliated external artifact, not evidence about this repository's own examples. The consuming study owns its own imagery, copy, and visual values.
|
|
19
|
+
|
|
20
|
+
## Reusable Method
|
|
21
|
+
|
|
22
|
+
### Capture Protocol
|
|
23
|
+
|
|
24
|
+
Record the capture identity before transcribing: URL, capture date, viewport, tool, wait strategy, and total scroll height. Capture in two passes:
|
|
25
|
+
|
|
26
|
+
1. A coarse scene pass segments the page into scene y-ranges using layout landmarks (full-width blocks) and per-scene representative frames.
|
|
27
|
+
2. A dense timeline pass scrubs at a fixed step (small enough that at least three frames land inside the shortest choreography of interest) and records a frame-difference score between consecutive frames.
|
|
28
|
+
|
|
29
|
+
Difference-score plateaus near zero indicate static regions; sustained non-zero runs indicate scrubbed choreography; isolated spikes indicate discrete swaps. Keep every frame file; the transcription must cite frames by file name.
|
|
30
|
+
|
|
31
|
+
### Transcription Record
|
|
32
|
+
|
|
33
|
+
For each observed scene, write:
|
|
34
|
+
|
|
35
|
+
- **Scene identity**: name, document y-range, one-sentence job.
|
|
36
|
+
- **Pin observation**: whether a stage visually holds position while the document advances (`start` and `distance` in document pixels), or the scene scrolls through normally (`distance` not applicable).
|
|
37
|
+
- **Scene ranges**: sub-segments as fractions of scene progress, each with the observed state it presents.
|
|
38
|
+
- **Keyframe observations**: for each boundary between sub-segments, the property-level change observed across adjacent frames — content swap, translation, scale, opacity, counter/number roll, media frame advance — stated as direction and rough magnitude, not invented exact values.
|
|
39
|
+
- **Transition profile**: for each sub-segment boundary, how the states mix — `cut` (adjacent frames show only completed states), `blend` (a mid-transition frame shows both states partially visible; record the observed blend width in scroll pixels, bounded below by the capture step), or `slide` (a mid-transition frame shows a state displaced along an axis; record the direction). A consumer without a profile defaults to whatever its own contract prefers, so an omitted profile is a gap worth naming.
|
|
40
|
+
- **Static path**: what a non-animated reading order of the same content would present, so the consumer can build the reduced-motion and no-script alternative required by the [Scroll-Driven Story](interaction-recipes.md#scroll-driven-story) contract.
|
|
41
|
+
- **Asset inventory**: the kind of media carrying the effect (photograph, video, rendered UI, image sequence) and its role. Kinds only; the record never embeds or links a copy of the asset for reuse.
|
|
42
|
+
- **Frame evidence**: the frame files supporting each claim.
|
|
43
|
+
|
|
44
|
+
Mark anything the captured frames cannot establish as `not observable in captured frames` instead of interpolating a guess. A claim without a citable frame is a gap, not a fact.
|
|
45
|
+
|
|
46
|
+
### Handoff
|
|
47
|
+
|
|
48
|
+
A transcription record travels with the capture manifest and difference curve. A consumer maps scene ranges onto the [Scene Composition Contract](interaction-recipes.md#scene-composition-contract): document scroll and sticky geometry stay with Layout responsibilities, progress mapping and teardown with Motion, and all visual values with the consuming product.
|
|
49
|
+
|
|
50
|
+
## Opinionated Guidance
|
|
51
|
+
|
|
52
|
+
Transcribe jobs and relationships, not pixel values; a reimplementation that inherits observed exact timings inherits unverified choices. Derive every described state from scene progress so reversal and mid-entry stay well defined in the eventual build. Sampling density bounds what a record may claim: a 500px step cannot support statements about effects shorter than 500px of scroll.
|
|
53
|
+
|
|
54
|
+
## Platform-Specific Guidance
|
|
55
|
+
|
|
56
|
+
Record the capture browser, OS, headless mode, and device scale separately from the observed site's behavior; headless rendering, missing fonts, and disabled video autoplay can all change what frames show. For client-rendered pages, note that DOM text accumulates as sections mount, so per-scene text dumps overstate what is visible; treat frames as the primary evidence for visibility.
|
|
57
|
+
|
|
58
|
+
## Unsupported Absolutes
|
|
59
|
+
|
|
60
|
+
A transcription proves what frames show at sampled positions, never how the original is implemented — no easing curve, frame rate, library, or performance claim survives from frame differences alone. There is no universal scrub step, difference threshold, or scene count; each capture declares its own. Frame similarity in one direction does not prove reversibility. A transition profile is bounded by sampling: a capture step wider than a transition can prove `blend` only when a mid-transition frame happens to land inside it, and can never prove `cut`.
|
|
61
|
+
|
|
62
|
+
## Verification Contract
|
|
63
|
+
|
|
64
|
+
A transcription record is usable when every scene declares a y-range and pin observation, every motion claim cites frame files, every scene has a static path, and every unknown is marked `not observable in captured frames`. Reversibility claims require frames captured in both scroll directions; otherwise mark reversal untested. The record is stale when the source site changes; re-verification means a fresh capture compared against the recorded capture date, never editing old observations in place.
|
|
65
|
+
|
|
66
|
+
## Source, License, And Attribution
|
|
67
|
+
|
|
68
|
+
Locally authored workflow, generalized from an internal capture-and-reimplementation study of an external homepage on 2026-09-10. Transcription records describe unaffiliated external sites; they carry the capture identity for provenance and reproduce no external assets, copy, or code.
|
|
69
|
+
|
|
70
|
+
## IA Navigation
|
|
71
|
+
|
|
72
|
+
Parent: [Motion](index.md).
|
|
73
|
+
Next: [Scroll-Driven Story](interaction-recipes.md#scroll-driven-story).
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Motion Rendering And Performance
|
|
4
|
+
description: Diagnose animation cost and choose native transition mechanisms with measurable behavior and complete fallbacks.
|
|
5
|
+
domain: motion
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
reviewed_on: 2026-09-21
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Motion Rendering And Performance
|
|
12
|
+
|
|
13
|
+
Primary role: source-backed rendering diagnosis and mechanism selection.
|
|
14
|
+
|
|
15
|
+
## Repository Boundary
|
|
16
|
+
|
|
17
|
+
This guide owns questions about the delivery of product motion. It does not grant reusable Layout CSS animation properties, establish universal frame budgets, or treat a trace from one machine as proof for every device. Use the existing [Practice Reference](practice-reference.md) for the boundary between mechanics and taste.
|
|
18
|
+
|
|
19
|
+
## Reusable Method
|
|
20
|
+
|
|
21
|
+
Describe the visible failure before choosing a faster-looking API: input responds late, geometry jumps, frames arrive irregularly, content is blank during decoding, or the wrong state appears. Record the target browser/device, surface size, concurrent work, and source revision. Select evidence that distinguishes these failures.
|
|
22
|
+
|
|
23
|
+
### Source Findings
|
|
24
|
+
|
|
25
|
+
| Source | What it supports | What it does not establish |
|
|
26
|
+
| --- | --- | --- |
|
|
27
|
+
| [web.dev animation guide](https://web.dev/articles/animations-guide) | Rendering work depends on the properties and effects involved; inspect paint and compositing behavior. | That a property or library always runs on a GPU. |
|
|
28
|
+
| [Layout thrashing](https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing) | Interleaved style writes and geometry reads can force synchronous layout; batching can avoid repeated work. | That every geometry read is a defect. |
|
|
29
|
+
| [Chrome runtime performance](https://developer.chrome.com/docs/devtools/performance) | Recorded frames and main-thread work can locate a runtime bottleneck. | Hardware equivalence between throttling and an actual device. |
|
|
30
|
+
| [View Transitions Level 1](https://www.w3.org/TR/css-view-transitions-1/) | Same-document transitions wrap a DOM update and expose distinct update, readiness, and finish promises. | Route state, data consistency, or a universal cross-document contract. |
|
|
31
|
+
| [Scroll-driven Animations](https://www.w3.org/TR/scroll-animations-1/) | Scroll progress and view progress are distinct timeline models. | That a visually scrubbed sequence has correct reading order or accessibility. |
|
|
32
|
+
| [CSS Transitions Level 2](https://www.w3.org/TR/css-transitions-2/#defining-before-change-style) | `@starting-style` supplies entry styling for relevant newly rendered elements. | Correct exit teardown, focus handling, or support in an unspecified runtime. |
|
|
33
|
+
|
|
34
|
+
These are dated source readings, not a compatibility table. The linked standards-track documents include work in progress; check the selected browser and feature combination before making a shipping claim.
|
|
35
|
+
|
|
36
|
+
### Match The Mechanism To The Responsibility
|
|
37
|
+
|
|
38
|
+
| Responsibility | Candidate | First failure probe |
|
|
39
|
+
| --- | --- | --- |
|
|
40
|
+
| Animate one local state difference | CSS transition with a static endpoint | Disable transitions; the endpoint must still be correct. |
|
|
41
|
+
| Control an effect's playback lifecycle | Web Animations | Interrupt and dispose it; verify cleanup and promise handling. |
|
|
42
|
+
| Visually connect a replaced DOM state | Same-document View Transition | Skip the transition; the DOM update must still occur once. |
|
|
43
|
+
| Bind presentation to a scroll interval | Native scroll/view timeline where supported | Remove support; content must remain readable in order. |
|
|
44
|
+
| Coordinate media decoding with chapters | Consumer-owned controller | Delay or fail a frame decode; preserve a readable fallback. |
|
|
45
|
+
|
|
46
|
+
This selection table is a local reasoning aid. It does not rank CSS, JavaScript, or native APIs by universal speed.
|
|
47
|
+
|
|
48
|
+
### A Diagnostic Sequence
|
|
49
|
+
|
|
50
|
+
1. Reproduce the failure with representative content and a repeatable input sequence. Save the initial state, not just the final screenshot.
|
|
51
|
+
2. Inspect the slow interval: input queueing, script execution, style/layout, paint, compositing, and media work where the tooling exposes them.
|
|
52
|
+
3. Change one suspected cost while retaining the same task and information. For a suspected layout loop, batch the same reads before writes rather than removing the interaction.
|
|
53
|
+
4. Compare trace intervals and final behavior. Report both improvements and regressions; averaging the entire page can hide the bad interval.
|
|
54
|
+
5. Repeat on a declared target device when the claim concerns that device. Keep emulation and real-device observations separate.
|
|
55
|
+
|
|
56
|
+
For continuous motion, inspect frame delivery during the effect. For input responsiveness, use [Loading And Feedback](../design-engineering/loading-and-feedback.md) and its distinction between next paint and completed work. A responsive first frame can precede an unsuccessful operation.
|
|
57
|
+
|
|
58
|
+
### View Transition Failure Contract
|
|
59
|
+
|
|
60
|
+
Treat the DOM update as the essential operation. `updateCallbackDone` reports that update's result; `ready` can reject when an animation cannot start; visual skipping can still lead to successful completion. Handle the promises relevant to the selected API version and keep route/focus error handling independent of decoration. The [specification interface](https://www.w3.org/TR/css-view-transitions-1/#viewtransition) is the source for these distinctions.
|
|
61
|
+
|
|
62
|
+
Local probes: request a second navigation before the first effect ends, remove a named element, use a duplicate transition name, fail the update callback, and resize during capture. Determine which failures skip only the effect and which prevent the destination update. Do not infer business success from the existence of a transition object.
|
|
63
|
+
|
|
64
|
+
## Opinionated Guidance
|
|
65
|
+
|
|
66
|
+
Choose the smallest effect that explains the state change. Promote an element or retain a large snapshot only when the measured benefit justifies its lifetime and resource cost. Reducing the work is often easier to explain than adding coordination machinery, but retain evidence for the actual tradeoff.
|
|
67
|
+
|
|
68
|
+
## Platform-Specific Guidance
|
|
69
|
+
|
|
70
|
+
DevTools UI and event names change; record tool/browser versions and retain raw traces. A native timeline needs a source-bound fallback, especially for media chapters with independent decoding. Follow [Scroll-driven Story](interaction-recipes.md#scroll-driven-story) for reading, scroll ownership, and runnable examples.
|
|
71
|
+
|
|
72
|
+
## Unsupported Absolutes
|
|
73
|
+
|
|
74
|
+
An average FPS value cannot prove every frame arrived on time. Smooth video playback of a capture cannot establish input latency. A compositor-friendly effect does not remove image decode, memory, script, or accessibility costs.
|
|
75
|
+
|
|
76
|
+
## Verification Contract
|
|
77
|
+
|
|
78
|
+
Report the initial failure, task-preserving comparison, target environment, raw artifact locator, observed difference, and remaining limitations. Keep source-derived expectations separate from measured timings. Test the static path, rapid input, cold and warm media/cache conditions, and reduced motion when relevant.
|
|
79
|
+
|
|
80
|
+
The sequence above is a proposed diagnostic protocol; this documentation change captures no runtime performance evidence. Re-review when the effect, content scale, browser feature, or target hardware changes.
|
|
81
|
+
|
|
82
|
+
## Source, License, And Attribution
|
|
83
|
+
|
|
84
|
+
Locally authored synthesis. The linked official browser guidance and specifications were inspected 2026-09-21; no source code, figures, or tables are reproduced. `consumer_reference: not_applicable` because no consumer implementation or performance record is selected.
|
|
85
|
+
|
|
86
|
+
## IA Navigation
|
|
87
|
+
|
|
88
|
+
Parent: [Motion](index.md).
|
|
89
|
+
Next: [Motion Review Workflow](review-workflow.md).
|
|
@@ -72,6 +72,14 @@ Do not automatically block `ease-in`, a particular scale value, motion longer th
|
|
|
72
72
|
|
|
73
73
|
Exercise the actual interaction in its default, repeated, interrupted, reversed, and reduced-motion states. Record the exact environment and observable. Source review may establish declared code paths; rendered and human outcomes require corresponding evidence families.
|
|
74
74
|
|
|
75
|
+
## Scroll Story Evidence
|
|
76
|
+
|
|
77
|
+
For [scroll-driven stories](interaction-recipes.md#scroll-driven-story), add boundary samples immediately before and after each scene transition, forward/reverse comparison, large jumps, direct middle entry, reload/history restoration, narrow and short viewports, long copy, and delayed font/image changes. Deliberately fail or delay a media request and verify stale completion cannot replace current presentation.
|
|
78
|
+
|
|
79
|
+
Record JavaScript update cost separately from animation-frame intervals: neither alone measures compositor frame delivery. Count idle updates to catch observer/decode feedback loops. Record media dimensions, bounded cache entries, and estimated decoded bytes separately from measured process/GPU memory. Set product-local budgets and keep real-device, touch, assistive-technology, and comfort outcomes `not_run` when unobserved.
|
|
80
|
+
|
|
81
|
+
The [Scroll Story verification](../examples/scroll-story/verification.md) records the two worked implementations and the limits of the local run.
|
|
82
|
+
|
|
75
83
|
## Source, License, And Attribution
|
|
76
84
|
|
|
77
85
|
- Upstream inspiration: [review-animations/SKILL.md](https://github.com/emilkowalski/skills/blob/220e8607c90b17337d210125777b7b695f26c221/skills/review-animations/SKILL.md)
|
package/motion/vocabulary.md
CHANGED
|
@@ -51,7 +51,7 @@ The terms are implementation-neutral. A framework, operating-system behavior, or
|
|
|
51
51
|
|
|
52
52
|
## Opinionated Guidance
|
|
53
53
|
|
|
54
|
-
The family ordering favors what a reader can observe before implementation details. It is useful for retrieval, but it is not a complete ontology. Add a term only
|
|
54
|
+
The family ordering favors what a reader can observe before implementation details. It is useful for retrieval, but it is not a complete ontology. Add a term only when contrastive repository cases show that existing terms and aliases cannot express the distinction.
|
|
55
55
|
|
|
56
56
|
## Platform-Specific Guidance
|
|
57
57
|
|
|
@@ -66,7 +66,7 @@ Names tied to iOS, macOS, a browser API, Motion, Framer Motion, React, or a comp
|
|
|
66
66
|
|
|
67
67
|
## Verification Contract
|
|
68
68
|
|
|
69
|
-
A vocabulary lookup should exercise exact, ambiguous, and unknown cases. Pass requires one justified term, an ordered candidate set with a stated distinction, or `unknown`; invented winners fail. A new term also requires
|
|
69
|
+
A vocabulary lookup should exercise exact, ambiguous, and unknown cases. Pass requires one justified term, an ordered candidate set with a stated distinction, or `unknown`; invented winners fail. A new term also requires contrastive exact, ambiguous, and unknown cases showing that the current vocabulary cannot express the distinction.
|
|
70
70
|
|
|
71
71
|
## Source, License, And Attribution
|
|
72
72
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stylegallery",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "A governed gallery of portable interface knowledge with
|
|
3
|
+
"version": "0.1.7",
|
|
4
|
+
"description": "A governed gallery of portable interface knowledge with knowledge CLIs, website compilation, and MCP servers.",
|
|
5
5
|
"type": "module",
|
|
6
|
+
"license": "MIT",
|
|
6
7
|
"homepage": "https://github.com/changeroa/StyleGallery#readme",
|
|
7
8
|
"bugs": {
|
|
8
9
|
"url": "https://github.com/changeroa/StyleGallery/issues"
|
|
@@ -28,6 +29,9 @@
|
|
|
28
29
|
"DOMAINS.md",
|
|
29
30
|
"GOVERNANCE.md",
|
|
30
31
|
"GUIDE.md",
|
|
32
|
+
"LICENSE",
|
|
33
|
+
"LICENSE-DOCS",
|
|
34
|
+
"NOTICE",
|
|
31
35
|
"README.md",
|
|
32
36
|
"consumer-reference/agent-native/README.md",
|
|
33
37
|
"consumer-reference/agent-native/registry.json",
|
|
@@ -47,27 +51,61 @@
|
|
|
47
51
|
"consumer-reference/agent-native/v2/schema/material-record.schema.json",
|
|
48
52
|
"consumer-reference/contract.md",
|
|
49
53
|
"consumer-reference/index.md",
|
|
54
|
+
"design-engineering/component-contract.md",
|
|
50
55
|
"design-engineering/consumer-migration-readiness.md",
|
|
56
|
+
"design-engineering/decision-tree.md",
|
|
51
57
|
"design-engineering/index.md",
|
|
52
58
|
"design-engineering/interface-craft.md",
|
|
59
|
+
"design-engineering/loading-and-feedback.md",
|
|
60
|
+
"design-engineering/native-interaction-contracts.md",
|
|
53
61
|
"design-engineering/reference-profiles/governed-local/editorial/profile.json",
|
|
54
62
|
"design-engineering/reference-profiles/governed-local/index.md",
|
|
55
63
|
"design-engineering/reference-profiles/index.md",
|
|
64
|
+
"design-engineering/state-management/decision-tree.md",
|
|
65
|
+
"design-engineering/state-management/index.md",
|
|
66
|
+
"design-engineering/state-management/patterns/derived-state.md",
|
|
67
|
+
"design-engineering/state-management/patterns/draft-and-baseline.md",
|
|
68
|
+
"design-engineering/state-management/patterns/id-selection.md",
|
|
69
|
+
"design-engineering/state-management/patterns/identity-reset.md",
|
|
70
|
+
"design-engineering/state-management/patterns/latest-request-wins.md",
|
|
71
|
+
"design-engineering/state-management/patterns/optimistic-overlay.md",
|
|
72
|
+
"design-engineering/state-management/patterns/single-flight.md",
|
|
73
|
+
"design-engineering/state-management/patterns/single-owner.md",
|
|
74
|
+
"design-engineering/state-management/patterns/submitted-snapshot.md",
|
|
75
|
+
"design-engineering/state-management/patterns/unsaved-navigation.md",
|
|
76
|
+
"design-engineering/state-management/patterns/url-state.md",
|
|
77
|
+
"design-engineering/state-management/patterns/versioned-restore.md",
|
|
78
|
+
"design-engineering/state-management/recipes/delete-undo.md",
|
|
79
|
+
"design-engineering/state-management/recipes/index.md",
|
|
80
|
+
"design-engineering/state-management/recipes/multi-step-form.md",
|
|
81
|
+
"design-engineering/state-management/recipes/search-detail.md",
|
|
82
|
+
"design-engineering/state-management/recipes/settings-save.md",
|
|
83
|
+
"design-engineering/state-management/state-brief.md",
|
|
84
|
+
"design-engineering/state-management/verification.md",
|
|
85
|
+
"design-engineering/text-input-and-internationalization.md",
|
|
86
|
+
"design-engineering/worked-examples.md",
|
|
87
|
+
"design-terminology/comparison-workflow.md",
|
|
56
88
|
"design-terminology/concept-families.md",
|
|
57
89
|
"design-terminology/conflict-cases.md",
|
|
58
90
|
"design-terminology/index.md",
|
|
91
|
+
"design-terminology/interaction-semantics.md",
|
|
59
92
|
"design-terminology/relation-types.md",
|
|
60
93
|
"design-terminology/source-kinds.md",
|
|
61
94
|
"design-terminology/source-vocabularies.md",
|
|
95
|
+
"design-terminology/token-semantics.md",
|
|
96
|
+
"design-terminology/typography-semantics.md",
|
|
62
97
|
"game-ui/classification.md",
|
|
98
|
+
"game-ui/decision-tree.md",
|
|
63
99
|
"game-ui/index.md",
|
|
64
100
|
"game-ui/reference-record.md",
|
|
65
101
|
"game-ui/screen-hierarchy.md",
|
|
102
|
+
"game-ui/screen-recipes.md",
|
|
66
103
|
"game-ui/unity/architecture.md",
|
|
67
104
|
"game-ui/unity/cli-loop.md",
|
|
68
105
|
"game-ui/unity/org-wiki.md",
|
|
69
106
|
"game-ui/unity/repository-map.md",
|
|
70
107
|
"game-ui/unity/ui-systems.md",
|
|
108
|
+
"game-ui/verification-workflow.md",
|
|
71
109
|
"guides/decision-tree.md",
|
|
72
110
|
"guides/documentation-mode-taxonomy.md",
|
|
73
111
|
"guides/layout-brief.md",
|
|
@@ -76,8 +114,15 @@
|
|
|
76
114
|
"index.md",
|
|
77
115
|
"layout/index.md",
|
|
78
116
|
"log.md",
|
|
117
|
+
"motion/accessible-motion.md",
|
|
118
|
+
"motion/decision-tree.md",
|
|
79
119
|
"motion/index.md",
|
|
120
|
+
"motion/interaction-recipes.md",
|
|
121
|
+
"motion/interruption-and-retargeting.md",
|
|
122
|
+
"motion/motion-brief.md",
|
|
123
|
+
"motion/observed-choreography.md",
|
|
80
124
|
"motion/practice-reference.md",
|
|
125
|
+
"motion/rendering-and-performance.md",
|
|
81
126
|
"motion/review-workflow.md",
|
|
82
127
|
"motion/vocabulary.md",
|
|
83
128
|
"patterns/centering/center.md",
|
|
@@ -136,8 +181,15 @@
|
|
|
136
181
|
"patterns/viewport-shell/scroll-body-shell.md",
|
|
137
182
|
"patterns/viewport-shell/sticky-footer.md",
|
|
138
183
|
"patterns/viewport-shell/sticky-header.md",
|
|
184
|
+
"platform-guides/adaptation-workflow.md",
|
|
185
|
+
"platform-guides/adaptive-navigation.md",
|
|
186
|
+
"platform-guides/android-interaction.md",
|
|
139
187
|
"platform-guides/apple-interaction.md",
|
|
188
|
+
"platform-guides/compatibility-matrix.md",
|
|
140
189
|
"platform-guides/index.md",
|
|
190
|
+
"platform-guides/input-and-focus.md",
|
|
191
|
+
"platform-guides/preferences-and-accessibility.md",
|
|
192
|
+
"platform-guides/windows-interaction.md",
|
|
141
193
|
"quality/claim-records/design-terminology-domain-scope.md",
|
|
142
194
|
"quality/claim-records/index.md",
|
|
143
195
|
"quality/claim-records/samples.md",
|
|
@@ -200,19 +252,26 @@
|
|
|
200
252
|
"scripts/agent-native/v2/material-operation-registry.mjs",
|
|
201
253
|
"scripts/agent-native/v2/material-queries.mjs",
|
|
202
254
|
"scripts/agent-native/v2/material-registry.mjs",
|
|
255
|
+
"scripts/compiler/README.md",
|
|
256
|
+
"scripts/compiler/cli.mjs",
|
|
257
|
+
"scripts/compiler/mcp.mjs",
|
|
258
|
+
"scripts/compiler/operations.mjs",
|
|
259
|
+
"scripts/compiler/runtime.mjs",
|
|
260
|
+
"scripts/sg-entry.mjs",
|
|
203
261
|
"scripts/sg-material-mcp.mjs",
|
|
204
262
|
"scripts/sg-material.mjs",
|
|
205
263
|
"scripts/sg-mcp.mjs",
|
|
264
|
+
"scripts/sg-server.mjs",
|
|
206
265
|
"scripts/sg.mjs",
|
|
207
266
|
"scripts/strict-json.mjs"
|
|
208
267
|
],
|
|
209
268
|
"bin": {
|
|
210
|
-
"sg": "scripts/sg.mjs",
|
|
269
|
+
"sg": "scripts/sg-entry.mjs",
|
|
211
270
|
"sg-material": "scripts/sg-material.mjs",
|
|
212
|
-
"stylegallery": "scripts/sg.mjs",
|
|
271
|
+
"stylegallery": "scripts/sg-entry.mjs",
|
|
213
272
|
"stylegallery-material": "scripts/sg-material.mjs",
|
|
214
273
|
"stylegallery-material-mcp": "scripts/sg-material-mcp.mjs",
|
|
215
|
-
"stylegallery-mcp": "scripts/sg-
|
|
274
|
+
"stylegallery-mcp": "scripts/sg-server.mjs"
|
|
216
275
|
},
|
|
217
276
|
"publishConfig": {
|
|
218
277
|
"access": "public"
|
|
@@ -237,13 +296,17 @@
|
|
|
237
296
|
"test:material": "node scripts/agent-native/v2/test-material-admission.mjs && node scripts/agent-native/v2/test-material-registry.mjs && node scripts/agent-native/v2/test-material-query.mjs && node scripts/agent-native/v2/test-material-context.mjs && node scripts/agent-native/v2/test-sg-material-cli.mjs && node scripts/agent-native/v2/test-material-mcp.mjs && node scripts/agent-native/v2/test-material-mcp-stdio.mjs && node scripts/agent-native/v2/test-sg-material-package.mjs",
|
|
238
297
|
"test:lifecycle-dispositions": "node scripts/test-lifecycle-disposition.mjs",
|
|
239
298
|
"validate:lifecycle-dispositions": "node scripts/validate-lifecycle-disposition.mjs --json",
|
|
240
|
-
"sg": "node scripts/sg.mjs",
|
|
299
|
+
"sg": "node scripts/sg-entry.mjs",
|
|
241
300
|
"sg:material": "node scripts/sg-material.mjs",
|
|
242
301
|
"sg:material:mcp": "node scripts/sg-material-mcp.mjs",
|
|
243
|
-
"sg:mcp": "node scripts/sg-
|
|
302
|
+
"sg:mcp": "node scripts/sg-server.mjs",
|
|
244
303
|
"test:agent-native": "node scripts/test-agent-knowledge-kernel.mjs --json && node scripts/test-agent-execution-kernel.mjs --json && node scripts/test-agent-execution-safety.mjs --json && node scripts/test-agent-events.mjs --json && node scripts/test-agent-learning.mjs --json && node scripts/test-agent-native-schemas.mjs --json && node scripts/test-sg-cli.mjs --json && node scripts/test-agent-conformance-receipt.mjs --json && node scripts/test-agent-mcp.mjs --json && node scripts/test-agent-registry-mcp-integrity.mjs --json && node scripts/test-agent-registry-mutations.mjs --json && node scripts/test-agent-adapter-conformance.mjs --json && node scripts/agent-native/v2/test-agent-extension-boundary.mjs && node scripts/test-agent-projections.mjs --json && node scripts/agent-native/v2/test-agent-v1-compatibility.mjs",
|
|
245
304
|
"validate": "node scripts/validate-reference-artifacts.mjs --manifest consumer-reference/generated/manifest.json --json",
|
|
246
|
-
"validate:component-state": "node scripts/validate-component-state.mjs --json && node scripts/generate-consumer-reference-evidence.mjs --check --json"
|
|
305
|
+
"validate:component-state": "node scripts/validate-component-state.mjs --json && node scripts/generate-consumer-reference-evidence.mjs --check --json",
|
|
306
|
+
"test:state-management": "node --test scripts/test-state-management-examples.mjs",
|
|
307
|
+
"test:compiler": "node --test scripts/test-sg-compiler.mjs",
|
|
308
|
+
"sg:v1": "node scripts/sg.mjs",
|
|
309
|
+
"sg:mcp:v1": "node scripts/sg-mcp.mjs"
|
|
247
310
|
},
|
|
248
311
|
"devDependencies": {
|
|
249
312
|
"@axe-core/playwright": "4.12.1",
|
|
@@ -256,5 +319,8 @@
|
|
|
256
319
|
"@modelcontextprotocol/sdk": "1.29.0",
|
|
257
320
|
"style-dictionary": "5.5.0",
|
|
258
321
|
"zod": "4.4.3"
|
|
322
|
+
},
|
|
323
|
+
"overrides": {
|
|
324
|
+
"brace-expansion": "5.0.9"
|
|
259
325
|
}
|
|
260
326
|
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Platform Adaptation Workflow
|
|
4
|
+
description: Compare a native convention with a target implementation through source, capability, fallback, and evidence records.
|
|
5
|
+
domain: platform-guides
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Platform Adaptation Workflow
|
|
11
|
+
|
|
12
|
+
Primary role: platform comparison planning and handoff.
|
|
13
|
+
|
|
14
|
+
## Repository Boundary
|
|
15
|
+
|
|
16
|
+
Use a platform convention as a sourced comparison for a named task. The native platform owns its convention; the target's standards and actual runtime determine the adaptation. This workflow does not make a visual imitation equivalent to native behavior.
|
|
17
|
+
|
|
18
|
+
## Reusable Method
|
|
19
|
+
|
|
20
|
+
1. Name the task and target: native application, browser, embedded web view, or game engine.
|
|
21
|
+
2. Select [Apple](apple-interaction.md), [Android](android-interaction.md), or [Windows](windows-interaction.md) by source platform.
|
|
22
|
+
3. Record an official source, exact page section, version or dated reading, and re-review trigger.
|
|
23
|
+
4. Separate the observed/native fact from the transferable interaction question.
|
|
24
|
+
5. Choose an adaptation and an explicit fallback using the [Compatibility Matrix](compatibility-matrix.md).
|
|
25
|
+
6. Execute the target-specific acceptance cases and record what was not tested.
|
|
26
|
+
|
|
27
|
+
## Adaptation Record
|
|
28
|
+
|
|
29
|
+
| Field | Required content |
|
|
30
|
+
| --- | --- |
|
|
31
|
+
| Task | The user action, intended outcome, and affected state |
|
|
32
|
+
| Source context | Platform, OS/API or documentation version, source URL/section, review date |
|
|
33
|
+
| Source claim | The precise native fact supported by that source |
|
|
34
|
+
| Target context | Browser/OS/framework/device/input and relevant versions |
|
|
35
|
+
| Transferable question | What problem the convention helps investigate |
|
|
36
|
+
| Target decision | Implement, adapt, omit, or defer with a reason |
|
|
37
|
+
| Capability gap | Missing API, different input model, permission, or semantic difference |
|
|
38
|
+
| Fallback | A complete task path when the preferred capability is absent |
|
|
39
|
+
| Verification | Actions, expected and actual behavior, artifacts, source/build identity |
|
|
40
|
+
| Freshness | Source/API change or failed observation that triggers re-review |
|
|
41
|
+
| Handoff | `consumer_reference` record or `not_applicable` with a reason |
|
|
42
|
+
|
|
43
|
+
## Worked Comparison: Returning From Detail
|
|
44
|
+
|
|
45
|
+
Native source: Android's [predictive Back documentation](https://developer.android.com/guide/navigation/custom-back/predictive-back-gesture), reviewed 2026-09-08, describes gesture preview and cancellation. Transferable question: can a person understand and cancel a return before committing it?
|
|
46
|
+
|
|
47
|
+
Web decision: use the application's documented list/detail route and normal browser history. Restore the list's selection and relevant search state on return. Provide a visible return link where the task needs it. Do not intercept browser/system gestures merely to reproduce a preview.
|
|
48
|
+
|
|
49
|
+
Fallback: direct entry to a detail URL has no assumed prior list history; its visible parent link goes to the known collection route. Verification cases: navigate from a filtered list, return with browser Back, enter detail directly, cancel a local dialog before leaving, and return after the selected item is removed.
|
|
50
|
+
|
|
51
|
+
Actual result: `not_run`; this is a fictional adaptation proposal. `consumer_reference: not_applicable` because no consumer record is selected. The comparison claims neither native gesture support nor tested browser history restoration.
|
|
52
|
+
|
|
53
|
+
## Opinionated Guidance
|
|
54
|
+
|
|
55
|
+
Preserve the task and recovery path before reproducing the native effect. When a capability is absent, document an intentional complete alternative rather than a partially functioning control.
|
|
56
|
+
|
|
57
|
+
## Platform-Specific Guidance
|
|
58
|
+
|
|
59
|
+
The source platform and target platform are separate fields even when both run on the same device. A browser on Android does not expose every Android application API. A web view's embedding host may own navigation and permissions.
|
|
60
|
+
|
|
61
|
+
## Unsupported Absolutes
|
|
62
|
+
|
|
63
|
+
An official source establishes its own guidance, not target conformance. Similar appearance, shared vocabulary, or a matching API name is insufficient evidence of equivalent behavior.
|
|
64
|
+
|
|
65
|
+
## Verification Contract
|
|
66
|
+
|
|
67
|
+
A completed adaptation distinguishes source fact, local inference, target implementation, and actual observation. Verify unavailable capabilities, interrupted navigation, relevant preferences, and all claimed inputs. Re-review on a source change, target API change, or failed acceptance case; a review date alone is not proof of continuing support.
|
|
68
|
+
|
|
69
|
+
## Source, License, And Attribution
|
|
70
|
+
|
|
71
|
+
Locally authored comparison method and fictional example. The linked Android source was rechecked on 2026-09-08; prose and examples are independently written. Source access does not establish device execution.
|
|
72
|
+
|
|
73
|
+
## IA Navigation
|
|
74
|
+
|
|
75
|
+
Parent: [Platform Guides](index.md).
|
|
76
|
+
Next: [Platform Compatibility Matrix](compatibility-matrix.md).
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Adaptive Navigation Across Platforms
|
|
4
|
+
description: Compare window adaptation, modal presentation, and Back ownership while preserving task identity across native and web surfaces.
|
|
5
|
+
domain: platform-guides
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
platform: Apple applications, Android applications, Windows applications, and web adaptations
|
|
9
|
+
platform_version: dated official documentation; consumer OS, SDK, and browser versions required
|
|
10
|
+
reviewed_on: 2026-09-21
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# Adaptive Navigation Across Platforms
|
|
14
|
+
|
|
15
|
+
Primary role: comparative navigation and adaptation guide.
|
|
16
|
+
|
|
17
|
+
## Repository Boundary
|
|
18
|
+
|
|
19
|
+
This page compares named platform conventions. It owns no CSS breakpoints, product visuals, or shared navigation implementation. Layout remains responsible for spatial constraints; [State Management](../design-engineering/state-management/index.md) owns route identity, drafts, and persistence.
|
|
20
|
+
|
|
21
|
+
## Reusable Method
|
|
22
|
+
|
|
23
|
+
Describe the current task independently of presentation: selected object, query, draft, parent destination, and active blocking surface. Then name which of those facts must survive a window change. Choose the target presentation and its navigation contract from available space and task needs, rather than from a device label.
|
|
24
|
+
|
|
25
|
+
### Dated Source Comparison
|
|
26
|
+
|
|
27
|
+
| Platform source | Bounded observation | Web adaptation question |
|
|
28
|
+
| --- | --- | --- |
|
|
29
|
+
| [Apple HIG layout](https://developer.apple.com/design/human-interface-guidelines/layout) | The guidance covers changing windows/displays, system safe areas, and text-size changes. | Does the task survive a changed content area and larger text? |
|
|
30
|
+
| [Apple HIG modality](https://developer.apple.com/design/human-interface-guidelines/modality) | Modal presentation is a scoped change of interaction context with dismissal obligations. | Which part of the workflow intentionally suspends background interaction? |
|
|
31
|
+
| [Apple HIG popovers](https://developer.apple.com/design/human-interface-guidelines/popovers) | Popover guidance is platform-specific and recommends a different presentation in compact iOS/iPadOS views. | Can the presentation change while preserving the same edit and explicit close policy? |
|
|
32
|
+
| [Android window size classes](https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes) | Width and height are classified separately from available app space. The reviewed page includes compact, medium, expanded, large, and extra-large width classes. | Does the decision consider usable height as well as width? |
|
|
33
|
+
| [Android predictive Back](https://developer.android.com/guide/navigation/custom-back/predictive-back-gesture) | Enabled callbacks have scoped Back responsibilities; gesture handling and observation are distinct concerns. | Which active layer consumes Back, and does observation accidentally change navigation? |
|
|
34
|
+
| [Windows responsive techniques](https://learn.microsoft.com/en-us/windows/apps/design/layout/responsive-design) | Adaptation can change composition and presentation of controls as available space changes. | Does every required destination remain available after the transformation? |
|
|
35
|
+
|
|
36
|
+
Read on 2026-09-21. These are live documentation snapshots, not SDK pins. Android's reviewed window guidance was updated 2026-08-04 and predictive Back guidance 2026-09-18. Apple page bodies were inspected through their official documentation JSON because the HTML reader exposed a JavaScript shell. Native implementation claims require a named OS/API and an actual native run.
|
|
37
|
+
|
|
38
|
+
### Navigation Actions Are Different Operations
|
|
39
|
+
|
|
40
|
+
| Action | State it should address | Failure from conflation |
|
|
41
|
+
| --- | --- | --- |
|
|
42
|
+
| Browser/native Back | Navigation history according to the host contract | Closing a dialog and leaving the route in one action. |
|
|
43
|
+
| Parent/Up navigation | A defined parent destination | Assuming a direct-link visitor has a matching history entry. |
|
|
44
|
+
| Surface dismissal | Visibility and ownership of a temporary surface | Discarding a draft because a surface resized or changed form. |
|
|
45
|
+
| Operation cancellation | The actual pending operation and its acknowledgement | A closing animation falsely reports that a write was cancelled. |
|
|
46
|
+
| Selection change | Identity of the item being inspected | Selecting another item silently overwrites unsaved work. |
|
|
47
|
+
|
|
48
|
+
This table is a local comparison framework, not a common native dispatch algorithm. Each host retains its own semantics.
|
|
49
|
+
|
|
50
|
+
### Worked Adaptation: Detail Pane Becomes A Route
|
|
51
|
+
|
|
52
|
+
A document browser shows list and detail together when both fit. With less room, the selected document occupies the primary view. Record the selection once and derive presentation from it. Preserve the list query and any draft; do not create a second editor instance solely because a presentation boundary changed.
|
|
53
|
+
|
|
54
|
+
If a selection is encoded in the URL, decide whether presenting the same selection in a second pane creates a navigation event. A resize itself should not invent a new task history entry under this proposal. Direct links, browser refresh, and a missing selected document need explicit outcomes.
|
|
55
|
+
|
|
56
|
+
When a popover becomes a modal editor, re-evaluate focus containment and dismissal. A stored boolean such as `isPopoverOpen` does not describe whether the current surface is modal, what it edits, or which host receives Back. Represent the task and presentation separately.
|
|
57
|
+
|
|
58
|
+
## Opinionated Guidance
|
|
59
|
+
|
|
60
|
+
Prefer task-preserving transformations: keep identity and editable data stable while rearranging presentation. Define navigation with state transitions that a reviewer can inspect. Avoid copying a platform's numeric size boundaries into CSS without a separate content-fit rationale.
|
|
61
|
+
|
|
62
|
+
## Platform-Specific Guidance
|
|
63
|
+
|
|
64
|
+
Android density-independent units, Apple points/safe areas, Windows effective sizing, and browser CSS pixels belong to different target contracts. A visual resemblance does not establish unit equivalence. On the web, use [Layout's existing routes](../layout/index.md) to choose the spatial composition and verify it at the actual parent constraints.
|
|
65
|
+
|
|
66
|
+
Predictive Back progress and cancellation are native host behavior. A browser animation cannot by itself claim equivalent integration. For keyboard and focus adaptation, continue to [Input And Focus](input-and-focus.md).
|
|
67
|
+
|
|
68
|
+
## Unsupported Absolutes
|
|
69
|
+
|
|
70
|
+
A wide window does not identify a desktop device. A compact surface does not require a particular native component. A native Back callback is not interchangeable with browser history. A successful resize screenshot does not prove state continuity.
|
|
71
|
+
|
|
72
|
+
## Verification Contract
|
|
73
|
+
|
|
74
|
+
Proposed cases: resize while editing; open a direct detail link; navigate Back with an inner dialog open; cancel a native Back gesture; rotate with an onscreen keyboard present; enlarge text until a two-pane arrangement no longer fits; remove the selected item remotely.
|
|
75
|
+
|
|
76
|
+
For each case, record route/history, selected identity, draft value, active surface, and focused element before and after. Native claims need native execution; browser cases establish only the browser adaptation. No native or web execution is claimed here. Re-review when a cited convention, SDK, or navigation owner changes.
|
|
77
|
+
|
|
78
|
+
## Source, License, And Attribution
|
|
79
|
+
|
|
80
|
+
Locally authored synthesis of the linked Apple, Google, and Microsoft documentation, inspected 2026-09-21. No platform artwork, code, or distinctive source examples are reproduced. `consumer_reference: not_applicable` because no consumer navigation record is selected.
|
|
81
|
+
|
|
82
|
+
## IA Navigation
|
|
83
|
+
|
|
84
|
+
Parent: [Platform Guides](index.md).
|
|
85
|
+
Next: [Preferences And Accessibility](preferences-and-accessibility.md).
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Android Interaction As A Comparative Reference
|
|
4
|
+
description: Source-bounded Android Back and adaptive-window guidance with explicit web translation and failure cases.
|
|
5
|
+
domain: platform-guides
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
platform: Android applications
|
|
9
|
+
platform_version: dated official documentation; target OS and AndroidX versions required
|
|
10
|
+
reviewed_on: 2026-09-08
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# Android Interaction As A Comparative Reference
|
|
14
|
+
|
|
15
|
+
Primary role: Android platform comparison guide.
|
|
16
|
+
|
|
17
|
+
## Repository Boundary
|
|
18
|
+
|
|
19
|
+
This guide compares Android application behavior with a consumer's target. It does not equate Android APIs with browser APIs or prescribe Material visual treatment. Record the actual OS, AndroidX/UI stack, and target device before implementation.
|
|
20
|
+
|
|
21
|
+
## Reusable Method
|
|
22
|
+
|
|
23
|
+
Use the [Adaptation Workflow](adaptation-workflow.md). Choose a specific native concern below, inspect its source, then write the target behavior and fallback independently of native visuals.
|
|
24
|
+
|
|
25
|
+
## Source-Bounded Conventions
|
|
26
|
+
|
|
27
|
+
| Concern | Official source and bounded fact | Transferable question |
|
|
28
|
+
| --- | --- | --- |
|
|
29
|
+
| Back preview | [Predictive Back](https://developer.android.com/guide/navigation/custom-back/predictive-back-gesture) describes previewing a destination and cancelling a gesture; custom handling depends on the application stack | Is the destination understandable, and does cancelling preserve the current state? |
|
|
30
|
+
| Back ownership | The same source describes enabled callbacks and one recipient for a Back gesture | Which active layer consumes Back, and when does control return to the outer navigation owner? |
|
|
31
|
+
| Window adaptation | [Window size classes](https://developer.android.com/develop/adaptive-apps/guides/use-window-size-classes) classify available application window space for adaptive decisions | Does the screen adapt to its available space while preserving selection and task state? |
|
|
32
|
+
| Navigation transformation | [Responsive navigation](https://developer.android.com/develop/ui/views/layout/build-responsive-navigation) discusses changing navigation presentation with window conditions | Can the user reach the same destinations after presentation changes? |
|
|
33
|
+
|
|
34
|
+
These pages were read on 2026-09-08. They are a dated documentation set, not a pin of every Android release or package. Verify the implementation details for the selected runtime.
|
|
35
|
+
|
|
36
|
+
## Worked Adaptation: Compact List And Expanded Detail
|
|
37
|
+
|
|
38
|
+
Task: inspect a collection on a resizable surface. Native comparison: available window space can change the presentation. Target web decision: compose [List Detail](../recipes/list-detail.md), retain selected identity in application state, and let the Layout owner choose the fit constraint. Android's native units and class boundaries are not CSS breakpoints.
|
|
39
|
+
|
|
40
|
+
On a tight surface, the detail route can replace the list visually while preserving the query and selection. On a roomy surface, both can be visible. Returning must resolve a missing selected item explicitly. Changing presentation must not duplicate the current route or save unrelated navigation history entries.
|
|
41
|
+
|
|
42
|
+
| Action | Expected target behavior |
|
|
43
|
+
| --- | --- |
|
|
44
|
+
| Resize with item B selected | B remains the selected detail |
|
|
45
|
+
| Return to the list | Previous query remains available |
|
|
46
|
+
| Cancel an inner dialog | Dialog closes once; outer route stays put |
|
|
47
|
+
| Open detail directly | Parent navigation works without assuming prior history |
|
|
48
|
+
|
|
49
|
+
This is an unexecuted web proposal, not evidence of an Android build.
|
|
50
|
+
|
|
51
|
+
## Opinionated Guidance
|
|
52
|
+
|
|
53
|
+
Map Back, Up/parent navigation, dialog dismissal, and operation cancellation separately. They may share an icon or button position while changing different state.
|
|
54
|
+
|
|
55
|
+
## Platform-Specific Guidance
|
|
56
|
+
|
|
57
|
+
Android gesture progress, callback dispatch, activities, and AndroidX navigation belong to native or embedding-host code. A browser adaptation should use its supported navigation semantics. Record any web-view host integration as a separate implementation dependency.
|
|
58
|
+
|
|
59
|
+
## Unsupported Absolutes
|
|
60
|
+
|
|
61
|
+
Android window classes are not universal web breakpoints. A browser Back action is not necessarily an application's parent destination. A cancel animation does not prove the underlying operation was cancelled.
|
|
62
|
+
|
|
63
|
+
## Verification Contract
|
|
64
|
+
|
|
65
|
+
Test gesture completion/cancellation on the declared native device when claiming native behavior. For a web adaptation, test actual browser history, direct links, resizes, input modes, and dialog focus independently. Review when any cited convention or target navigation implementation changes.
|
|
66
|
+
|
|
67
|
+
## Source, License, And Attribution
|
|
68
|
+
|
|
69
|
+
Locally authored synthesis of the official Android pages linked above, rechecked 2026-09-08. No source code, tables, or native visual assets are reproduced. `consumer_reference: not_applicable` because this reference guide selects no consumer implementation record.
|
|
70
|
+
|
|
71
|
+
## IA Navigation
|
|
72
|
+
|
|
73
|
+
Parent: [Platform Guides](index.md).
|
|
74
|
+
Next: [Platform Compatibility Matrix](compatibility-matrix.md).
|