altitude-design 0.2.0 → 0.3.0
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/README.md +46 -8
- package/dist/adapters/codemirror.cjs +88 -0
- package/dist/adapters/codemirror.cjs.map +7 -0
- package/dist/adapters/codemirror.js +67 -0
- package/dist/adapters/codemirror.js.map +7 -0
- package/dist/adapters/react-flow.css +102 -0
- package/dist/adapters/tiptap.css +71 -0
- package/dist/altitude.css +3165 -246
- package/dist/altitude.iife.js +33 -5
- package/dist/altitude.no-fonts.css +3165 -246
- package/dist/chart-themes.cjs +195 -0
- package/dist/chart-themes.cjs.map +7 -0
- package/dist/chart-themes.js +165 -0
- package/dist/chart-themes.js.map +7 -0
- package/dist/cli/altitude.mjs +134 -0
- package/dist/guidance/README.md +32 -0
- package/dist/guidance/agent-setup.md +22 -0
- package/dist/guidance/app-skeleton.md +17 -0
- package/dist/guidance/evidence.json +95 -0
- package/dist/guidance/index.json +493 -0
- package/dist/guidance/llms.txt +20 -0
- package/dist/guidance/manifest.json +92 -0
- package/dist/guidance/pattern.schema.json +181 -0
- package/dist/guidance/patterns/agent-action.json +77 -0
- package/dist/guidance/patterns/agent-action.md +39 -0
- package/dist/guidance/patterns/assistant-conversation.json +77 -0
- package/dist/guidance/patterns/assistant-conversation.md +50 -0
- package/dist/guidance/patterns/async-collection.json +71 -0
- package/dist/guidance/patterns/async-collection.md +29 -0
- package/dist/guidance/patterns/audit-log.json +75 -0
- package/dist/guidance/patterns/audit-log.md +27 -0
- package/dist/guidance/patterns/auth.json +86 -0
- package/dist/guidance/patterns/auth.md +29 -0
- package/dist/guidance/patterns/billing.json +80 -0
- package/dist/guidance/patterns/billing.md +29 -0
- package/dist/guidance/patterns/consequential-action.json +76 -0
- package/dist/guidance/patterns/consequential-action.md +27 -0
- package/dist/guidance/patterns/developer-settings.json +79 -0
- package/dist/guidance/patterns/developer-settings.md +29 -0
- package/dist/guidance/patterns/edit-record.json +74 -0
- package/dist/guidance/patterns/edit-record.md +51 -0
- package/dist/guidance/patterns/import.json +77 -0
- package/dist/guidance/patterns/import.md +31 -0
- package/dist/guidance/patterns/members.json +77 -0
- package/dist/guidance/patterns/members.md +27 -0
- package/dist/guidance/patterns/onboarding.json +78 -0
- package/dist/guidance/patterns/onboarding.md +31 -0
- package/dist/guidance/patterns/review-submit.json +72 -0
- package/dist/guidance/patterns/review-submit.md +27 -0
- package/dist/guidance/patterns/screen-layout.json +79 -0
- package/dist/guidance/patterns/screen-layout.md +40 -0
- package/dist/guidance/patterns/settings.json +78 -0
- package/dist/guidance/patterns/settings.md +32 -0
- package/dist/guidance/patterns/sync.json +77 -0
- package/dist/guidance/patterns/sync.md +31 -0
- package/dist/guidance/principles.md +23 -0
- package/dist/guidance/references/build/checks/agent-action-pattern.mjs +57 -0
- package/dist/guidance/references/build/checks/agent-setup.mjs +78 -0
- package/dist/guidance/references/build/checks/assistant-conversation-pattern.mjs +49 -0
- package/dist/guidance/references/build/checks/audit-log-pattern.mjs +63 -0
- package/dist/guidance/references/build/checks/auth-pattern.mjs +67 -0
- package/dist/guidance/references/build/checks/billing-pattern.mjs +63 -0
- package/dist/guidance/references/build/checks/developer-settings-pattern.mjs +76 -0
- package/dist/guidance/references/build/checks/guidance.mjs +71 -0
- package/dist/guidance/references/build/checks/import-pattern.mjs +69 -0
- package/dist/guidance/references/build/checks/members-pattern.mjs +71 -0
- package/dist/guidance/references/build/checks/onboarding-pattern.mjs +54 -0
- package/dist/guidance/references/build/checks/pattern-types.mjs +13 -0
- package/dist/guidance/references/build/checks/pattern-workflows.mjs +226 -0
- package/dist/guidance/references/build/checks/primary-scope.mjs +49 -0
- package/dist/guidance/references/build/checks/render-tells.mjs +72 -0
- package/dist/guidance/references/build/checks/screen-layout-pattern.mjs +111 -0
- package/dist/guidance/references/build/checks/semantics.mjs +72 -0
- package/dist/guidance/references/build/checks/settings-pattern.mjs +73 -0
- package/dist/guidance/references/build/checks/sync-pattern.mjs +62 -0
- package/dist/guidance/references/build/checks/tells-lint.mjs +164 -0
- package/dist/guidance/references/build/fixtures/pattern-workflows.tsx +83 -0
- package/dist/guidance/references/build/fixtures/patterns/agent-action.jsx +60 -0
- package/dist/guidance/references/build/fixtures/patterns/app-skeleton.jsx +94 -0
- package/dist/guidance/references/build/fixtures/patterns/assistant-conversation.jsx +79 -0
- package/dist/guidance/references/build/fixtures/patterns/audit-log.jsx +81 -0
- package/dist/guidance/references/build/fixtures/patterns/auth.jsx +150 -0
- package/dist/guidance/references/build/fixtures/patterns/billing.jsx +96 -0
- package/dist/guidance/references/build/fixtures/patterns/developer-settings.jsx +95 -0
- package/dist/guidance/references/build/fixtures/patterns/import.jsx +102 -0
- package/dist/guidance/references/build/fixtures/patterns/members.jsx +106 -0
- package/dist/guidance/references/build/fixtures/patterns/onboarding.jsx +70 -0
- package/dist/guidance/references/build/fixtures/patterns/screen-layout-decision.jsx +74 -0
- package/dist/guidance/references/build/fixtures/patterns/screen-layout-editor.jsx +56 -0
- package/dist/guidance/references/build/fixtures/patterns/screen-layout-report.jsx +42 -0
- package/dist/guidance/references/build/fixtures/patterns/settings.jsx +73 -0
- package/dist/guidance/references/build/fixtures/patterns/sync.jsx +78 -0
- package/dist/guidance/references/project/components/src/pattern-async-collection.tsx +57 -0
- package/dist/guidance/references/project/components/src/pattern-consequential-action.tsx +77 -0
- package/dist/guidance/references/project/components/src/pattern-edit-record.tsx +127 -0
- package/dist/guidance/references/project/components/src/pattern-review-submit.tsx +47 -0
- package/dist/guidance/references/project/components/src/settings.tsx +79 -0
- package/dist/guidance/references/scripts/build-framework-fixture.mjs +20 -0
- package/dist/guidance/rules.json +653 -0
- package/dist/guidance/visual/Elevation.md +194 -0
- package/dist/guidance/visual/Fundamentals.md +83 -0
- package/dist/guidance/visual/Research.md +1620 -0
- package/dist/index.cjs +19009 -1854
- package/dist/index.cjs.map +4 -4
- package/dist/index.js +19009 -1854
- package/dist/index.js.map +4 -4
- package/dist/tokens.css +84 -84
- package/dist/tokens.json +301 -128
- package/dist/types/adapter-codemirror.d.ts +13 -0
- package/dist/types/agent-fleet.d.ts +166 -0
- package/dist/types/ai-label.d.ts +30 -0
- package/dist/types/app-shell.d.ts +83 -0
- package/dist/types/area-chart.d.ts +80 -0
- package/dist/types/artifact.d.ts +65 -0
- package/dist/types/bar-chart.d.ts +83 -0
- package/dist/types/bar-list.d.ts +35 -0
- package/dist/types/breadcrumb.d.ts +62 -0
- package/dist/types/chart-brush.d.ts +35 -0
- package/dist/types/chart-themes.d.ts +229 -0
- package/dist/types/chart.d.ts +570 -0
- package/dist/types/checklist.d.ts +71 -0
- package/dist/types/code-block.d.ts +32 -0
- package/dist/types/collections.d.ts +116 -5
- package/dist/types/color-picker.d.ts +38 -0
- package/dist/types/command.d.ts +6 -3
- package/dist/types/comment-thread.d.ts +48 -0
- package/dist/types/confirmation.d.ts +60 -0
- package/dist/types/context-menu.d.ts +17 -0
- package/dist/types/controls.d.ts +134 -22
- package/dist/types/conversation.d.ts +130 -0
- package/dist/types/copy-button.d.ts +19 -0
- package/dist/types/core.d.ts +139 -10
- package/dist/types/data-grid.d.ts +76 -0
- package/dist/types/date-picker.d.ts +96 -0
- package/dist/types/diff-view.d.ts +54 -0
- package/dist/types/dot-plot.d.ts +54 -0
- package/dist/types/edit-region.d.ts +121 -0
- package/dist/types/feature-gate.d.ts +22 -0
- package/dist/types/filter-bar.d.ts +65 -0
- package/dist/types/formatted-number.d.ts +38 -0
- package/dist/types/heatmap.d.ts +64 -0
- package/dist/types/in-place.d.ts +24 -0
- package/dist/types/index.d.ts +159 -14
- package/dist/types/inline-citation.d.ts +35 -0
- package/dist/types/inline-edit.d.ts +71 -0
- package/dist/types/input-otp.d.ts +37 -0
- package/dist/types/item-group.d.ts +104 -0
- package/dist/types/line-chart.d.ts +116 -0
- package/dist/types/link.d.ts +11 -0
- package/dist/types/markdown.d.ts +88 -0
- package/dist/types/meter.d.ts +43 -0
- package/dist/types/modal-state.d.ts +62 -0
- package/dist/types/nav.d.ts +8 -1
- package/dist/types/notifications.d.ts +42 -0
- package/dist/types/number-input.d.ts +30 -0
- package/dist/types/overlays.d.ts +56 -15
- package/dist/types/page-header.d.ts +27 -0
- package/dist/types/pagination.d.ts +29 -0
- package/dist/types/palette.d.ts +64 -0
- package/dist/types/password-input.d.ts +22 -0
- package/dist/types/pattern-assistant-conversation.d.ts +55 -0
- package/dist/types/pattern-async-collection.d.ts +34 -0
- package/dist/types/pattern-consequential-action.d.ts +53 -0
- package/dist/types/pattern-edit-record.d.ts +72 -0
- package/dist/types/pattern-review-submit.d.ts +43 -0
- package/dist/types/permission-matrix.d.ts +34 -0
- package/dist/types/plan-picker.d.ts +40 -0
- package/dist/types/prompt-input.d.ts +106 -0
- package/dist/types/property-list.d.ts +67 -0
- package/dist/types/question.d.ts +64 -0
- package/dist/types/relative-time.d.ts +21 -0
- package/dist/types/removal-receipt.d.ts +1180 -0
- package/dist/types/resizable.d.ts +48 -0
- package/dist/types/roving.d.ts +44 -0
- package/dist/types/save-bar.d.ts +38 -0
- package/dist/types/saved-views.d.ts +72 -0
- package/dist/types/scatter-chart.d.ts +60 -0
- package/dist/types/schedule.d.ts +80 -0
- package/dist/types/secret-field.d.ts +33 -0
- package/dist/types/select.d.ts +44 -2
- package/dist/types/separator.d.ts +11 -0
- package/dist/types/settings.d.ts +39 -0
- package/dist/types/sheet.d.ts +1 -1
- package/dist/types/sparkline.d.ts +46 -0
- package/dist/types/split-button.d.ts +21 -0
- package/dist/types/stat.d.ts +54 -0
- package/dist/types/stepper.d.ts +6 -3
- package/dist/types/suggestions.d.ts +29 -0
- package/dist/types/suspense.d.ts +85 -0
- package/dist/types/sync-indicator.d.ts +24 -0
- package/dist/types/tag-input.d.ts +65 -0
- package/dist/types/terminal.d.ts +33 -0
- package/dist/types/thread-list.d.ts +58 -0
- package/dist/types/time-input.d.ts +33 -0
- package/dist/types/timeline.d.ts +38 -0
- package/dist/types/toggle.d.ts +46 -0
- package/dist/types/toolbar.d.ts +34 -0
- package/dist/types/tour.d.ts +23 -0
- package/dist/types/trace.d.ts +65 -0
- package/dist/types/tree.d.ts +71 -0
- package/dist/types-cjs/adapter-codemirror.d.cts +13 -0
- package/dist/types-cjs/agent-fleet.d.cts +166 -0
- package/dist/types-cjs/ai-label.d.cts +30 -0
- package/dist/types-cjs/app-shell.d.cts +83 -0
- package/dist/types-cjs/area-chart.d.cts +80 -0
- package/dist/types-cjs/artifact.d.cts +65 -0
- package/dist/types-cjs/bar-chart.d.cts +83 -0
- package/dist/types-cjs/bar-list.d.cts +35 -0
- package/dist/types-cjs/breadcrumb.d.cts +62 -0
- package/dist/types-cjs/chart-brush.d.cts +35 -0
- package/dist/types-cjs/chart-themes.d.cts +229 -0
- package/dist/types-cjs/chart.d.cts +570 -0
- package/dist/types-cjs/checklist.d.cts +71 -0
- package/dist/types-cjs/code-block.d.cts +32 -0
- package/dist/types-cjs/collections.d.cts +246 -0
- package/dist/types-cjs/color-picker.d.cts +38 -0
- package/dist/types-cjs/command.d.cts +66 -0
- package/dist/types-cjs/comment-thread.d.cts +48 -0
- package/dist/types-cjs/confirmation.d.cts +60 -0
- package/dist/types-cjs/context-menu.d.cts +17 -0
- package/dist/types-cjs/controls.d.cts +360 -0
- package/dist/types-cjs/conversation.d.cts +130 -0
- package/dist/types-cjs/copy-button.d.cts +19 -0
- package/dist/types-cjs/core.d.cts +256 -0
- package/dist/types-cjs/data-grid.d.cts +76 -0
- package/dist/types-cjs/date-picker.d.cts +96 -0
- package/dist/types-cjs/diff-view.d.cts +54 -0
- package/dist/types-cjs/dot-plot.d.cts +54 -0
- package/dist/types-cjs/edit-region.d.cts +121 -0
- package/dist/types-cjs/empty.d.cts +24 -0
- package/dist/types-cjs/feature-gate.d.cts +22 -0
- package/dist/types-cjs/filter-bar.d.cts +65 -0
- package/dist/types-cjs/formatted-number.d.cts +38 -0
- package/dist/types-cjs/heatmap.d.cts +64 -0
- package/dist/types-cjs/in-place.d.cts +24 -0
- package/dist/types-cjs/index.d.cts +154 -0
- package/dist/types-cjs/inline-citation.d.cts +35 -0
- package/dist/types-cjs/inline-edit.d.cts +71 -0
- package/dist/types-cjs/input-otp.d.cts +37 -0
- package/dist/types-cjs/item-group.d.cts +104 -0
- package/dist/types-cjs/line-chart.d.cts +116 -0
- package/dist/types-cjs/link.d.cts +11 -0
- package/dist/types-cjs/markdown.d.cts +88 -0
- package/dist/types-cjs/meter.d.cts +43 -0
- package/dist/types-cjs/modal-state.d.cts +62 -0
- package/dist/types-cjs/nav.d.cts +25 -0
- package/dist/types-cjs/notifications.d.cts +42 -0
- package/dist/types-cjs/number-input.d.cts +30 -0
- package/dist/types-cjs/overlays.d.cts +170 -0
- package/dist/types-cjs/page-header.d.cts +27 -0
- package/dist/types-cjs/pagination.d.cts +29 -0
- package/dist/types-cjs/palette.d.cts +64 -0
- package/dist/types-cjs/password-input.d.cts +22 -0
- package/dist/types-cjs/pattern-assistant-conversation.d.cts +55 -0
- package/dist/types-cjs/pattern-async-collection.d.cts +34 -0
- package/dist/types-cjs/pattern-consequential-action.d.cts +53 -0
- package/dist/types-cjs/pattern-edit-record.d.cts +72 -0
- package/dist/types-cjs/pattern-review-submit.d.cts +43 -0
- package/dist/types-cjs/permission-matrix.d.cts +34 -0
- package/dist/types-cjs/pile.d.cts +27 -0
- package/dist/types-cjs/plan-picker.d.cts +40 -0
- package/dist/types-cjs/prompt-input.d.cts +106 -0
- package/dist/types-cjs/property-list.d.cts +67 -0
- package/dist/types-cjs/question.d.cts +64 -0
- package/dist/types-cjs/relative-time.d.cts +21 -0
- package/dist/types-cjs/removal-receipt.d.cts +1180 -0
- package/dist/types-cjs/resizable.d.cts +48 -0
- package/dist/types-cjs/roving.d.cts +44 -0
- package/dist/types-cjs/save-bar.d.cts +38 -0
- package/dist/types-cjs/saved-views.d.cts +72 -0
- package/dist/types-cjs/scatter-chart.d.cts +60 -0
- package/dist/types-cjs/schedule.d.cts +80 -0
- package/dist/types-cjs/secret-field.d.cts +33 -0
- package/dist/types-cjs/select.d.cts +109 -0
- package/dist/types-cjs/separator.d.cts +11 -0
- package/dist/types-cjs/settings.d.cts +39 -0
- package/dist/types-cjs/sheet.d.cts +27 -0
- package/dist/types-cjs/sparkline.d.cts +46 -0
- package/dist/types-cjs/split-button.d.cts +21 -0
- package/dist/types-cjs/stat.d.cts +54 -0
- package/dist/types-cjs/stepper.d.cts +26 -0
- package/dist/types-cjs/suggestions.d.cts +29 -0
- package/dist/types-cjs/suspense.d.cts +85 -0
- package/dist/types-cjs/sync-indicator.d.cts +24 -0
- package/dist/types-cjs/tag-input.d.cts +65 -0
- package/dist/types-cjs/terminal.d.cts +33 -0
- package/dist/types-cjs/thread-list.d.cts +58 -0
- package/dist/types-cjs/time-input.d.cts +33 -0
- package/dist/types-cjs/timeline.d.cts +38 -0
- package/dist/types-cjs/toggle.d.cts +46 -0
- package/dist/types-cjs/toolbar.d.cts +34 -0
- package/dist/types-cjs/tour.d.cts +23 -0
- package/dist/types-cjs/trace.d.cts +65 -0
- package/dist/types-cjs/tree.d.cts +71 -0
- package/package.json +90 -9
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"id": "audit-log",
|
|
4
|
+
"version": 1,
|
|
5
|
+
"title": "Audit log",
|
|
6
|
+
"intents": [
|
|
7
|
+
"audit log",
|
|
8
|
+
"audit",
|
|
9
|
+
"activity",
|
|
10
|
+
"history",
|
|
11
|
+
"events",
|
|
12
|
+
"security log"
|
|
13
|
+
],
|
|
14
|
+
"purpose": "Find who did what, to which resource, when and from where, and export it.",
|
|
15
|
+
"useWhen": [
|
|
16
|
+
"A workspace keeps a log of changes that people filter, inspect and export, or a record shows its own activity."
|
|
17
|
+
],
|
|
18
|
+
"avoidWhen": [
|
|
19
|
+
"Notifications meant for someone to act on; use NotificationCenter."
|
|
20
|
+
],
|
|
21
|
+
"alternatives": [
|
|
22
|
+
"Use the async-collection contract for other filtered lists, and NotificationCenter for things that need attention."
|
|
23
|
+
],
|
|
24
|
+
"requiredInputs": [
|
|
25
|
+
"events with actor, action, resource, exact time, origin, before and after",
|
|
26
|
+
"a server query that filters and pages",
|
|
27
|
+
"an export job adapter with progress and a download",
|
|
28
|
+
"the retention period"
|
|
29
|
+
],
|
|
30
|
+
"states": [
|
|
31
|
+
"loading",
|
|
32
|
+
"ready",
|
|
33
|
+
"page-loading",
|
|
34
|
+
"no-results",
|
|
35
|
+
"empty",
|
|
36
|
+
"expanded",
|
|
37
|
+
"exporting",
|
|
38
|
+
"exported",
|
|
39
|
+
"export-failed",
|
|
40
|
+
"live-arrival"
|
|
41
|
+
],
|
|
42
|
+
"transitions": [
|
|
43
|
+
"ready → page-loading → ready on a page turn, keeping the rows",
|
|
44
|
+
"ready → ready or no-results on a filter change, back to the first page",
|
|
45
|
+
"ready → expanded on an entry's disclosure",
|
|
46
|
+
"ready → exporting → exported with a download, or export-failed"
|
|
47
|
+
],
|
|
48
|
+
"rules": [
|
|
49
|
+
"ALT-AUDIT-001",
|
|
50
|
+
"ALT-COLLECTION-001",
|
|
51
|
+
"ALT-STATUS-001",
|
|
52
|
+
"ALT-VISUAL-003"
|
|
53
|
+
],
|
|
54
|
+
"sources": [
|
|
55
|
+
"altitude-elevation",
|
|
56
|
+
"task-review",
|
|
57
|
+
"wcag22"
|
|
58
|
+
],
|
|
59
|
+
"authority": "contextual-pattern",
|
|
60
|
+
"applicability": "Workspace audit logs and record activity feeds.",
|
|
61
|
+
"exceptions": [
|
|
62
|
+
"Require only states supported by the application; a log without export skips those states."
|
|
63
|
+
],
|
|
64
|
+
"maturity": "provisional",
|
|
65
|
+
"evidenceStatus": "engineering-fixtures; human-effectiveness-unmeasured",
|
|
66
|
+
"document": "patterns/audit-log.md",
|
|
67
|
+
"implementation": "build/fixtures/patterns/audit-log.jsx",
|
|
68
|
+
"examples": [
|
|
69
|
+
"build/fixtures/patterns/audit-log.jsx"
|
|
70
|
+
],
|
|
71
|
+
"verification": [
|
|
72
|
+
"build/checks/audit-log-pattern.mjs",
|
|
73
|
+
"build/checks/pattern-types.mjs"
|
|
74
|
+
]
|
|
75
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Audit log
|
|
2
|
+
|
|
3
|
+
Help someone find out who did what, to which resource, when and from where: a workspace audit log that can be filtered, paged, expanded to the change and exported, and a lighter activity feed on each record. It composes [Async collection](async-collection.md) for loading, filtering and paging.
|
|
4
|
+
|
|
5
|
+
## Inputs and ownership
|
|
6
|
+
|
|
7
|
+
Supply events with an actor, an action, a resource, a time with its exact value, the origin (IP address or client), and the before and after of what changed; a server query that filters and pages them; an export job adapter that reports progress and a download; and the retention period. The application owns event capture and integrity (an audit log the interface can edit is not an audit log), retention, access control (who may read the log), and the export's contents.
|
|
8
|
+
|
|
9
|
+
## States and transitions
|
|
10
|
+
|
|
11
|
+
**Entries are the record**: flush rows on the ground, never raised and never cards. Each entry reads as one sentence ("Theo Marsh changed Ines Duarte's role from Member to Admin") with its actor, time (`RelativeTime`, exact value on demand) and origin in columns. Only an entry that links somewhere lifts when pointed at. The **workspace log** is a `DataTable` with a `FilterBar` (actor, action, resource, date range) and server pagination; changing a filter returns to the first page and announces the result count; turning a page holds the current rows at half strength until the next page arrives. An entry **expands** to its change as a `DiffView` (properties before and after). A **record's activity** is a `Timeline` on the record, with details behind a disclosure; don't mix the record feed and the workspace log.
|
|
12
|
+
|
|
13
|
+
**Export** is a job, a task under way: `Progress` with its percentage and the words ("Preparing export, 40%"), then a toast with the download, and the export itself appears in the log. Other states: loading (imprinted rows), empty for a new workspace (say what will appear here), no results for a filter (say so and how to widen it), live arrivals (new events land with the afterglow, announced politely and throttled), and retention ("kept for 90 days on the Pro plan") said in words near the log.
|
|
14
|
+
|
|
15
|
+
## Content, keyboard, focus and announcements
|
|
16
|
+
|
|
17
|
+
Write entries as sentences in the past tense with real names, not codes. The disclosure that expands an entry is named by the entry. The filter bar is one Tab stop with arrow keys inside it; results are announced after each change. Pagination keeps focus on the control used. The table keeps a minimum width and scrolls horizontally on narrow screens. Verify forced colors (disclosures and diff markers stay visible), reduced motion (no afterglow movement), zoom and RTL.
|
|
18
|
+
|
|
19
|
+
## Recovery and working implementation
|
|
20
|
+
|
|
21
|
+
A failed page load keeps the previous rows and offers to try again. A failed export says so in the toast and offers to retry; nothing partial is offered for download. The working example in `build/fixtures/patterns/audit-log.jsx` (shipped as `references/build/fixtures/patterns/audit-log.jsx`) composes a filtered, paged log with expandable changes, an export job and a record's activity. It is also the Storybook preview "Patterns/AuditLogPattern". [Metadata](audit-log.json) names the runtime and verification sources.
|
|
22
|
+
|
|
23
|
+
## Rules, verification and evidence
|
|
24
|
+
|
|
25
|
+
`ALT-AUDIT-001` covers flush sentence entries, the change on expansion and export as a job; `ALT-COLLECTION-001` covers loading, filtering and paging; `ALT-STATUS-001` covers announcements; `ALT-VISUAL-003` covers states that don't rise. `build/checks/audit-log-pattern.mjs` checks the example in a browser. See [rules](../rules.json). Whether people find what they're looking for still needs evaluation with representative users and real logs.
|
|
26
|
+
|
|
27
|
+
See [running examples and verification](../principles.md#run-the-examples-and-verification) for the installed example command, repository test command, and the limits of shipped test-reference snapshots.
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"id": "auth",
|
|
4
|
+
"version": 1,
|
|
5
|
+
"title": "Auth",
|
|
6
|
+
"intents": [
|
|
7
|
+
"sign in",
|
|
8
|
+
"login",
|
|
9
|
+
"log in",
|
|
10
|
+
"sign up",
|
|
11
|
+
"signup",
|
|
12
|
+
"register",
|
|
13
|
+
"two-factor",
|
|
14
|
+
"2fa",
|
|
15
|
+
"mfa",
|
|
16
|
+
"reset password",
|
|
17
|
+
"forgot password",
|
|
18
|
+
"magic link",
|
|
19
|
+
"sso"
|
|
20
|
+
],
|
|
21
|
+
"purpose": "Sign in, sign up, verify, pass two-factor and reset a password without revealing whether an account exists.",
|
|
22
|
+
"useWhen": [
|
|
23
|
+
"A product authenticates people with passwords, SSO, emailed links or one-time codes."
|
|
24
|
+
],
|
|
25
|
+
"avoidWhen": [
|
|
26
|
+
"Re-confirming identity before one sensitive action inside the product; use the consequential-action contract with the provider's re-authentication."
|
|
27
|
+
],
|
|
28
|
+
"alternatives": [
|
|
29
|
+
"Use the provider's hosted sign-in page when the product delegates authentication entirely."
|
|
30
|
+
],
|
|
31
|
+
"requiredInputs": [
|
|
32
|
+
"the sign-in methods offered",
|
|
33
|
+
"step adapters that never reveal whether an account exists",
|
|
34
|
+
"rate-limit state with its wait",
|
|
35
|
+
"link and code lifetimes",
|
|
36
|
+
"the destination after sign-in"
|
|
37
|
+
],
|
|
38
|
+
"states": [
|
|
39
|
+
"sign-in",
|
|
40
|
+
"submitting",
|
|
41
|
+
"credentials-rejected",
|
|
42
|
+
"rate-limited",
|
|
43
|
+
"link-sent",
|
|
44
|
+
"sign-up",
|
|
45
|
+
"verify-email",
|
|
46
|
+
"two-factor",
|
|
47
|
+
"recovery-code",
|
|
48
|
+
"reset",
|
|
49
|
+
"link-expired",
|
|
50
|
+
"signed-in"
|
|
51
|
+
],
|
|
52
|
+
"transitions": [
|
|
53
|
+
"sign-in → submitting → two-factor or signed-in, or credentials-rejected keeping the email",
|
|
54
|
+
"credentials-rejected → rate-limited after the service's limit",
|
|
55
|
+
"sign-in → link-sent, with a resend after a countdown",
|
|
56
|
+
"sign-up → verify-email → signed-in",
|
|
57
|
+
"two-factor → recovery-code → signed-in",
|
|
58
|
+
"reset → link-sent"
|
|
59
|
+
],
|
|
60
|
+
"rules": [
|
|
61
|
+
"ALT-AUTH-001",
|
|
62
|
+
"ALT-EDIT-002",
|
|
63
|
+
"ALT-STATUS-001"
|
|
64
|
+
],
|
|
65
|
+
"sources": [
|
|
66
|
+
"owasp-auth",
|
|
67
|
+
"wcag22",
|
|
68
|
+
"task-review"
|
|
69
|
+
],
|
|
70
|
+
"authority": "contextual-pattern",
|
|
71
|
+
"applicability": "Sign-in, sign-up, verification, two-factor and password reset screens.",
|
|
72
|
+
"exceptions": [
|
|
73
|
+
"Require only the methods the product offers; the security of authentication itself is the application's."
|
|
74
|
+
],
|
|
75
|
+
"maturity": "provisional",
|
|
76
|
+
"evidenceStatus": "engineering-fixtures; human-effectiveness-unmeasured",
|
|
77
|
+
"document": "patterns/auth.md",
|
|
78
|
+
"implementation": "build/fixtures/patterns/auth.jsx",
|
|
79
|
+
"examples": [
|
|
80
|
+
"build/fixtures/patterns/auth.jsx"
|
|
81
|
+
],
|
|
82
|
+
"verification": [
|
|
83
|
+
"build/checks/auth-pattern.mjs",
|
|
84
|
+
"build/checks/pattern-types.mjs"
|
|
85
|
+
]
|
|
86
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# Auth
|
|
2
|
+
|
|
3
|
+
Help someone sign in, create an account, verify their email, pass two-factor, or reset a password, with states and copy that keep them moving without revealing anything to someone else. The layout is simple; the states and words are not.
|
|
4
|
+
|
|
5
|
+
## Inputs and ownership
|
|
6
|
+
|
|
7
|
+
Supply the sign-in methods the product offers (password, SSO, emailed link), adapters for each step that return a result without saying whether an account exists, the rate-limit state with its wait, link and code lifetimes, and where to go once signed in. The application owns authentication, session handling, rate limiting and lockout, link and code generation and expiry, bot protection, and account recovery. This contract covers the interface; it does not certify the security of the implementation.
|
|
8
|
+
|
|
9
|
+
## States and transitions
|
|
10
|
+
|
|
11
|
+
Put the form on **a raised `Card` at level 1, never a level-5 `Dialog`**: nothing is behind it to recede from, and the summit stays for moments that interrupt. Flows: **sign in** (SSO first when offered, then email and password, then "Email me a sign-in link" and "Forgot your password?"); **sign up** (name, email, a new password whose requirements `PasswordInput` stamps as met); **verify email** (`InputOTP` with the code's lifetime and a resend that counts down in words); **two-factor** (`InputOTP`, "Use a recovery code instead", "Trust this device for 30 days"); **reset** (email, then the same "check your email" screen); **expired or used link** (say which and offer a new one).
|
|
12
|
+
|
|
13
|
+
Submitting holds the button pressed with its words ("Signing in"). Failure keeps the email and clears only what must be re-entered. A step change moves focus to the new step's heading.
|
|
14
|
+
|
|
15
|
+
**Security copy rules.** Never reveal whether an account exists: "That email and password don't match", "If that address has an account, we've sent a link". State rate limits in words with the wait ("Too many attempts. Wait 5 minutes, then try again, or reset your password."). Never submit a password or code for the person: Verify stays a button even when the code is complete. Keep the email across steps and offer to change it on every "check your email" screen.
|
|
16
|
+
|
|
17
|
+
## Content, keyboard, focus and announcements
|
|
18
|
+
|
|
19
|
+
Every field has its `autocomplete` token (`username` or `email`, `current-password`, `new-password`, `one-time-code`, `name`) so password managers and autofill work; pasting is never blocked. An unsuccessful submit focuses the error summary, whose links go to the fields. Don't make a cognitive test the only path: no CAPTCHA without an alternative, no transcribing codes without paste. Enter submits the current form; Tab follows the visual order. The card fits at 320px; text wraps. Verify forced colors, zoom, RTL and screen readers announcing each step's heading.
|
|
20
|
+
|
|
21
|
+
## Recovery and working implementation
|
|
22
|
+
|
|
23
|
+
A wrong password, wrong code or expired link says what to do next. A rate limit says when to try again and offers reset. Losing access to the authenticator offers recovery codes. The working example in `build/fixtures/patterns/auth.jsx` (shipped as `references/build/fixtures/patterns/auth.jsx`) composes sign-in with SSO, password and emailed link, sign-up with email verification, two-factor with recovery codes, reset, rate limiting and the security copy. It is also the Storybook preview "Patterns/AuthPattern". [Metadata](auth.json) names the runtime and verification sources.
|
|
24
|
+
|
|
25
|
+
## Rules, verification and evidence
|
|
26
|
+
|
|
27
|
+
`ALT-AUTH-001` covers the security copy, autocomplete tokens and no auto-submission; `ALT-EDIT-002` covers errors linked to fields; `ALT-STATUS-001` covers announcements. WCAG 2.2's accessible authentication and input-purpose criteria apply. The OWASP authentication cheat sheet is the source for generic responses and rate limiting. `build/checks/auth-pattern.mjs` checks the example in a browser. See [rules](../rules.json) and [evidence](../evidence.json).
|
|
28
|
+
|
|
29
|
+
See [running examples and verification](../principles.md#run-the-examples-and-verification) for the installed example command, repository test command, and the limits of shipped test-reference snapshots.
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"id": "billing",
|
|
4
|
+
"version": 1,
|
|
5
|
+
"title": "Billing",
|
|
6
|
+
"intents": [
|
|
7
|
+
"billing",
|
|
8
|
+
"change plan",
|
|
9
|
+
"upgrade",
|
|
10
|
+
"downgrade",
|
|
11
|
+
"usage",
|
|
12
|
+
"invoices",
|
|
13
|
+
"subscription",
|
|
14
|
+
"pricing"
|
|
15
|
+
],
|
|
16
|
+
"purpose": "Show usage against limits as readings and change plan with the cost reviewed before it's confirmed.",
|
|
17
|
+
"useWhen": [
|
|
18
|
+
"A product shows what someone pays for, how much they've used, and lets them change plan."
|
|
19
|
+
],
|
|
20
|
+
"avoidWhen": [
|
|
21
|
+
"A one-off checkout for a single purchase; use the review-submit contract with the payment provider's checkout."
|
|
22
|
+
],
|
|
23
|
+
"alternatives": [
|
|
24
|
+
"Use the review-submit contract for a one-off purchase, and the settings contract for billing contact details."
|
|
25
|
+
],
|
|
26
|
+
"requiredInputs": [
|
|
27
|
+
"plans with prices per period",
|
|
28
|
+
"current plan and period",
|
|
29
|
+
"usage per quota with limits and thresholds",
|
|
30
|
+
"an estimate and how it's computed",
|
|
31
|
+
"a proration preview from the billing service",
|
|
32
|
+
"losses a downgrade would cause",
|
|
33
|
+
"payment status and invoices"
|
|
34
|
+
],
|
|
35
|
+
"states": [
|
|
36
|
+
"ready",
|
|
37
|
+
"choosing",
|
|
38
|
+
"reviewing",
|
|
39
|
+
"changing",
|
|
40
|
+
"changed",
|
|
41
|
+
"change-failed",
|
|
42
|
+
"downgrade-review",
|
|
43
|
+
"payment-failed",
|
|
44
|
+
"feature-locked"
|
|
45
|
+
],
|
|
46
|
+
"transitions": [
|
|
47
|
+
"ready → choosing → reviewing with the proration",
|
|
48
|
+
"reviewing → changing on confirm, or choosing to pick again",
|
|
49
|
+
"changing → changed when the service confirms, or change-failed with nothing charged",
|
|
50
|
+
"choosing → downgrade-review when the plan removes access",
|
|
51
|
+
"ready → payment-failed when a charge fails, until the payment method is updated"
|
|
52
|
+
],
|
|
53
|
+
"rules": [
|
|
54
|
+
"ALT-BILLING-001",
|
|
55
|
+
"ALT-REVIEW-001",
|
|
56
|
+
"ALT-ACTION-001",
|
|
57
|
+
"ALT-VISUAL-003"
|
|
58
|
+
],
|
|
59
|
+
"sources": [
|
|
60
|
+
"wcag22",
|
|
61
|
+
"altitude-elevation",
|
|
62
|
+
"task-review"
|
|
63
|
+
],
|
|
64
|
+
"authority": "contextual-pattern",
|
|
65
|
+
"applicability": "Products with plans, usage limits, plan changes and invoices.",
|
|
66
|
+
"exceptions": [
|
|
67
|
+
"Require only states supported by the application; flat-priced products without usage skip the quota states."
|
|
68
|
+
],
|
|
69
|
+
"maturity": "provisional",
|
|
70
|
+
"evidenceStatus": "engineering-fixtures; human-effectiveness-unmeasured",
|
|
71
|
+
"document": "patterns/billing.md",
|
|
72
|
+
"implementation": "build/fixtures/patterns/billing.jsx",
|
|
73
|
+
"examples": [
|
|
74
|
+
"build/fixtures/patterns/billing.jsx"
|
|
75
|
+
],
|
|
76
|
+
"verification": [
|
|
77
|
+
"build/checks/billing-pattern.mjs",
|
|
78
|
+
"build/checks/pattern-types.mjs"
|
|
79
|
+
]
|
|
80
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# Billing
|
|
2
|
+
|
|
3
|
+
Help someone understand what they pay for and change it safely: usage against plan limits, an estimate of the next bill, changing plan or billing period, locked features, a failed payment, and invoices. It composes [Review and submit](review-submit.md) for a plan change and [Consequential action](consequential-action.md) for a downgrade that removes access.
|
|
4
|
+
|
|
5
|
+
## Inputs and ownership
|
|
6
|
+
|
|
7
|
+
Supply the plans (prices in minor units, per period and unit), the current plan and period, usage per quota with its limit and the thresholds where it is near or over, usage history, an estimate of the next bill and how it's computed, a proration preview from the billing service for any proposed change, the losses a downgrade would cause (seats over the new limit, features in use), the payment status, and the invoices. The application and its billing provider own prices, proration, tax, entitlements and payment retries. Never compute a charge in the interface that the service hasn't quoted.
|
|
8
|
+
|
|
9
|
+
## States and transitions
|
|
10
|
+
|
|
11
|
+
**Usage is a reading, not a task under way.** Each quota is a `Meter`: flat ink in a flush track, a notch at the threshold, and the state said in words ("8 of 10", "Near limit", "Over limit"). Never draw a quota as `Progress`, which means work moving toward completion. History is a `BarChart` whose remaining cycle is `status="projected"`, hatched and said ("Projected"), never raised. The estimate is a `Stat` whose help text says how it's computed and when it updates.
|
|
12
|
+
|
|
13
|
+
**Change plan**: choose in `PlanPicker` (the current plan is a "Current plan" plate and the recommended plan a "Recommended" plate, never extra height), then review: the heading names the change ("Upgrade to Business?") and takes focus, and the proration is a sentence ("You'll pay €84 today for the rest of this cycle, then €480/month"). Confirming is pending until the service confirms; only then does the page say "You're on Business". Changing the period is the same flow. A **downgrade that removes access** is consequential: its review lists what will be lost and when, and its button is a danger one named by the outcome ("Downgrade to Free"). Reviewing with no change says why it can't proceed.
|
|
14
|
+
|
|
15
|
+
A **locked feature** uses `FeatureGate`: the control stays live with the plan it needs as a plate, and activating it explains and offers the upgrade (or "Ask an admin" when this person can't). A **failed payment** is a page banner (`Alert placement="page" variant="raised" tone="critical"`) that says what failed, by when to act, and offers to update the payment method; if access becomes restricted, app mode makes the page read-only and says why. **Invoices** are a `Table` whose amounts use `FormattedNumber` currency.
|
|
16
|
+
|
|
17
|
+
## Content, keyboard, focus and announcements
|
|
18
|
+
|
|
19
|
+
Prices and limits are always words as well as numbers ("€20 per seat per month"). The review moves focus to its heading; completion moves focus to the result heading; the change's progress is announced politely in one status region. Plans are a radio group with arrow-key movement; the period switch is a segmented control. Tables scroll horizontally on narrow screens. Verify forced colors (meter notches, hatched projections and plan plates stay visible), reduced motion, zoom and RTL; meaning never depends on colour alone.
|
|
20
|
+
|
|
21
|
+
## Recovery and working implementation
|
|
22
|
+
|
|
23
|
+
A failed plan change says nothing was charged and offers to try again, keeping the chosen plan. A failed payment banner stays until the payment method is updated. The working example in `build/fixtures/patterns/billing.jsx` (shipped as `references/build/fixtures/patterns/billing.jsx`) composes quotas, a projected usage chart, an explained estimate, an upgrade and a downgrade with losses, a locked feature, a failed payment banner and invoices. It is also the Storybook preview "Patterns/BillingPattern". [Metadata](billing.json) names the runtime and verification sources.
|
|
24
|
+
|
|
25
|
+
## Rules, verification and evidence
|
|
26
|
+
|
|
27
|
+
`ALT-BILLING-001` covers readings, reviewed changes and stated losses; `ALT-REVIEW-001` covers the review and receipt; `ALT-ACTION-001` covers the downgrade; `ALT-VISUAL-003` covers what must not rise (the current and recommended plan, the projection). `build/checks/billing-pattern.mjs` checks the example in a browser. WCAG 2.2's error prevention for financial transactions applies to the confirmation. See [rules](../rules.json). Whether people read proration sentences correctly still needs evaluation with representative users.
|
|
28
|
+
|
|
29
|
+
See [running examples and verification](../principles.md#run-the-examples-and-verification) for the installed example command, repository test command, and the limits of shipped test-reference snapshots.
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"id": "consequential-action",
|
|
4
|
+
"version": 1,
|
|
5
|
+
"title": "Consequential action",
|
|
6
|
+
"intents": [
|
|
7
|
+
"delete",
|
|
8
|
+
"remove",
|
|
9
|
+
"revoke",
|
|
10
|
+
"publish",
|
|
11
|
+
"undo",
|
|
12
|
+
"recover",
|
|
13
|
+
"approve"
|
|
14
|
+
],
|
|
15
|
+
"purpose": "Complete a consequential operation with appropriate review or real recovery.",
|
|
16
|
+
"useWhen": [
|
|
17
|
+
"The action has meaningful impact on data or other people."
|
|
18
|
+
],
|
|
19
|
+
"avoidWhen": [
|
|
20
|
+
"Use direct action when application-backed recovery is appropriate; avoid ritual confirmation for trivial operations."
|
|
21
|
+
],
|
|
22
|
+
"alternatives": [
|
|
23
|
+
"Use direct action when application-backed recovery is appropriate; avoid ritual confirmation for trivial operations."
|
|
24
|
+
],
|
|
25
|
+
"requiredInputs": [
|
|
26
|
+
"named target and consequence",
|
|
27
|
+
"execute promise",
|
|
28
|
+
"confirmation policy",
|
|
29
|
+
"optional real undo",
|
|
30
|
+
"logical focus destination"
|
|
31
|
+
],
|
|
32
|
+
"states": [
|
|
33
|
+
"idle",
|
|
34
|
+
"confirming",
|
|
35
|
+
"pending",
|
|
36
|
+
"failure",
|
|
37
|
+
"complete",
|
|
38
|
+
"undo-pending",
|
|
39
|
+
"undo-failure",
|
|
40
|
+
"undone"
|
|
41
|
+
],
|
|
42
|
+
"transitions": [
|
|
43
|
+
"idle \u2192 confirming or pending",
|
|
44
|
+
"confirming \u2192 idle on cancel",
|
|
45
|
+
"confirming \u2192 pending on confirm",
|
|
46
|
+
"pending \u2192 failure or complete",
|
|
47
|
+
"complete \u2192 undo-pending only with actual undo",
|
|
48
|
+
"undo-pending \u2192 undone or undo-failure"
|
|
49
|
+
],
|
|
50
|
+
"rules": [
|
|
51
|
+
"ALT-ACTION-001",
|
|
52
|
+
"ALT-STATUS-001",
|
|
53
|
+
"ALT-EXP-001"
|
|
54
|
+
],
|
|
55
|
+
"sources": [
|
|
56
|
+
"hold-hypothesis",
|
|
57
|
+
"task-review",
|
|
58
|
+
"wcag22"
|
|
59
|
+
],
|
|
60
|
+
"authority": "contextual-pattern",
|
|
61
|
+
"applicability": "The action has meaningful impact on data or other people.",
|
|
62
|
+
"exceptions": [
|
|
63
|
+
"Require only states supported by the application; do not fabricate capabilities."
|
|
64
|
+
],
|
|
65
|
+
"maturity": "provisional",
|
|
66
|
+
"evidenceStatus": "engineering-fixtures; human-effectiveness-unmeasured",
|
|
67
|
+
"document": "patterns/consequential-action.md",
|
|
68
|
+
"implementation": "project/components/src/pattern-consequential-action.tsx",
|
|
69
|
+
"examples": [
|
|
70
|
+
"build/fixtures/pattern-workflows.tsx",
|
|
71
|
+
"scripts/build-framework-fixture.mjs"
|
|
72
|
+
],
|
|
73
|
+
"verification": [
|
|
74
|
+
"build/checks/pattern-workflows.mjs"
|
|
75
|
+
]
|
|
76
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Consequential action
|
|
2
|
+
|
|
3
|
+
Help someone understand and complete an action whose consequences matter: deletion, revocation, publishing or bulk changes. Match protection to actual impact. Prefer direct action with genuine recovery where appropriate, or a focused review/confirmation when correction before commitment matters. Avoid confirmation rituals for trivial operations. A hold gesture is a scoped option, never the universal destructive-action policy.
|
|
4
|
+
|
|
5
|
+
## Inputs and ownership
|
|
6
|
+
|
|
7
|
+
Supply the exact target, scope and consequence, an `execute` adapter, explicit confirmation policy, optional genuine `undo`, and a logical focus destination. Explain what becomes unavailable, who is affected, and whether recovery expires. The application owns authorization, persistence, idempotency and recovery durability; an Undo label does not create an inverse operation. Legal/financial/data error prevention criteria have specific applicability and alternatives, not a blanket “confirm all deletes” rule.
|
|
8
|
+
|
|
9
|
+
## States and transitions
|
|
10
|
+
|
|
11
|
+
Runtime phases are `idle`, `confirming`, `pending`, `failed`, `succeeded`, `undoing` and `undone`; failed execution and failed undo share `failed`, and `retry` repeats the correct operation. Request moves from idle to confirming or pending according to policy. Cancel before execution returns to idle without a mutation. Confirm records intent and starts pending; it does not establish completion. Pending blocks repeated activation. Rejection becomes failure and offers a useful retry; success only follows a resolved execution result. Undo is available only when supplied and truthful: complete → undo-pending → undone or undo-failure. Keep a failed undo recoverable and do not report restoration before the inverse succeeds. Do not claim an in-flight operation was cancelled because its UI closed.
|
|
12
|
+
|
|
13
|
+
## Content, keyboard, focus and announcements
|
|
14
|
+
|
|
15
|
+
Name actions by outcome (“Delete Northwind workspace”), not “OK”. Make the target and consequence visible before commitment. Use native buttons, and an accessible Dialog for bounded confirmation; its name, inert background, contained Tab/Shift+Tab, dismissal and initial focus must remain correct. Initial focus may favor the safe option for irreversible consequences. On cancel return to the trigger; after a removed record, focus a surviving logical neighbor or heading via the application callback. Persistent failure belongs near the task; concise status uses `WorkflowStatus` without stealing focus.
|
|
16
|
+
|
|
17
|
+
Long target names and consequences must wrap on narrow screens; keep cancellation and commitment visible and keyboard reachable. Verify RTL, zoom, forced colors, reduced motion and touch. Meaning must survive without animation, shadow or color.
|
|
18
|
+
|
|
19
|
+
## Recovery and working implementation
|
|
20
|
+
|
|
21
|
+
Compose `useConsequentialAction`, named buttons, `Dialog` when required, and `WorkflowStatus`. Wire `execute` to the real mutation and `undo` only to its real inverse. The executable `build/fixtures/pattern-workflows.tsx` demonstrates intent cancellation, delayed execution, failure/retry, true removal and restoration; the distributed snapshot is `references/build/fixtures/pattern-workflows.tsx`. [Metadata](consequential-action.json) names runtime and verification sources. App adapters must handle deletion races, permission changes and ambiguous transport outcomes; retries need idempotency or reconciliation where duplicate effects matter. Recovery should have a durable destination beyond an ephemeral toast when its availability requires it.
|
|
22
|
+
|
|
23
|
+
## Rules, verification and evidence
|
|
24
|
+
|
|
25
|
+
`ALT-ACTION-001` checks the integration boundary between confirmation and actual completion, including real undo and logical focus. `ALT-STATUS-001` covers feedback. `ALT-EXP-001` explicitly marks hold-to-confirm task benefit as unvalidated. See [rules](../rules.json) and [metadata](consequential-action.json) for source authority, applicability, exceptions, provisional maturity and executable references. Browser tests establish operation sequences; representative-user evaluation is still needed for the suitability and comprehensibility of the protection.
|
|
26
|
+
|
|
27
|
+
See [running examples and verification](../principles.md#run-the-examples-and-verification) for the installed example command, repository test command, and the limits of shipped test-reference snapshots.
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"id": "developer-settings",
|
|
4
|
+
"version": 1,
|
|
5
|
+
"title": "Developer settings",
|
|
6
|
+
"intents": [
|
|
7
|
+
"api keys",
|
|
8
|
+
"api key",
|
|
9
|
+
"webhooks",
|
|
10
|
+
"webhook",
|
|
11
|
+
"integrations",
|
|
12
|
+
"developer settings",
|
|
13
|
+
"developers",
|
|
14
|
+
"oauth"
|
|
15
|
+
],
|
|
16
|
+
"purpose": "Create, roll and revoke API keys, manage webhooks and connect integrations without treating them as ordinary forms.",
|
|
17
|
+
"useWhen": [
|
|
18
|
+
"A product exposes API keys, webhooks or third-party integrations to its customers."
|
|
19
|
+
],
|
|
20
|
+
"avoidWhen": [
|
|
21
|
+
"Personal access tokens for the product's own sign-in; use the auth contract and SecretField."
|
|
22
|
+
],
|
|
23
|
+
"alternatives": [
|
|
24
|
+
"Use the settings contract for ordinary preferences, and SecretField alone for one stored secret."
|
|
25
|
+
],
|
|
26
|
+
"requiredInputs": [
|
|
27
|
+
"keys with name, masked tail and last use",
|
|
28
|
+
"a create adapter returning the secret once",
|
|
29
|
+
"roll and revoke adapters with the roll's overlap window",
|
|
30
|
+
"webhook endpoints, events, deliveries and retry and test adapters",
|
|
31
|
+
"integrations with OAuth start and completion"
|
|
32
|
+
],
|
|
33
|
+
"states": [
|
|
34
|
+
"key-creating",
|
|
35
|
+
"secret-shown",
|
|
36
|
+
"secret-acknowledged",
|
|
37
|
+
"rolling",
|
|
38
|
+
"revoking",
|
|
39
|
+
"delivery-failed",
|
|
40
|
+
"delivery-retrying",
|
|
41
|
+
"test-sent",
|
|
42
|
+
"oauth-pending",
|
|
43
|
+
"connected",
|
|
44
|
+
"disconnecting"
|
|
45
|
+
],
|
|
46
|
+
"transitions": [
|
|
47
|
+
"key-creating → secret-shown → secret-acknowledged before the dialog can close",
|
|
48
|
+
"rolling → the new key, with the old one working for the overlap",
|
|
49
|
+
"revoking → the key removed, said",
|
|
50
|
+
"delivery-failed → delivery-retrying → delivered or failed with its attempt",
|
|
51
|
+
"oauth-pending → connected, or back to Connect when abandoned",
|
|
52
|
+
"connected → disconnecting → not connected"
|
|
53
|
+
],
|
|
54
|
+
"rules": [
|
|
55
|
+
"ALT-DEV-001",
|
|
56
|
+
"ALT-ACTION-001",
|
|
57
|
+
"ALT-STATUS-001"
|
|
58
|
+
],
|
|
59
|
+
"sources": [
|
|
60
|
+
"task-review",
|
|
61
|
+
"altitude-elevation"
|
|
62
|
+
],
|
|
63
|
+
"authority": "contextual-pattern",
|
|
64
|
+
"applicability": "Developer areas with API keys, webhooks and integrations.",
|
|
65
|
+
"exceptions": [
|
|
66
|
+
"Require only the parts the product offers; products that allow revealing a stored secret must still mask it by default."
|
|
67
|
+
],
|
|
68
|
+
"maturity": "provisional",
|
|
69
|
+
"evidenceStatus": "engineering-fixtures; human-effectiveness-unmeasured",
|
|
70
|
+
"document": "patterns/developer-settings.md",
|
|
71
|
+
"implementation": "build/fixtures/patterns/developer-settings.jsx",
|
|
72
|
+
"examples": [
|
|
73
|
+
"build/fixtures/patterns/developer-settings.jsx"
|
|
74
|
+
],
|
|
75
|
+
"verification": [
|
|
76
|
+
"build/checks/developer-settings-pattern.mjs",
|
|
77
|
+
"build/checks/pattern-types.mjs"
|
|
78
|
+
]
|
|
79
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# Developer settings
|
|
2
|
+
|
|
3
|
+
Help someone manage how other software reaches their account: API keys (create, list, roll, revoke), webhooks (endpoints, events, deliveries, retries, test events), and integrations (connect through OAuth, disconnect). These screens look like forms but carry production consequences: a leaked or revoked key breaks a live service. It composes [Consequential action](consequential-action.md) for revoke, roll and disconnect.
|
|
4
|
+
|
|
5
|
+
## Inputs and ownership
|
|
6
|
+
|
|
7
|
+
Supply keys with a name, a masked tail and when each was last used (and by what); a create adapter that returns the secret once; roll and revoke adapters, with the overlap window a roll allows; webhook endpoints with their events, recent deliveries with results and attempts, a retry adapter and a test-event adapter returning the payload; integrations with their state and an OAuth start and completion. The application owns secret generation and storage (a secret is shown once and never retrievable from the interface afterwards unless the product deliberately supports it), signing, retry schedules, OAuth scopes and token revocation.
|
|
8
|
+
|
|
9
|
+
## States and transitions
|
|
10
|
+
|
|
11
|
+
**API keys.** Creation happens in a `Dialog` that **can't be closed by Escape or the backdrop until the secret is acknowledged**: `SecretField once` shows the secret in full with "You won't see this key again", and Done waits for "I've saved this key". The list shows keys **masked** (prefix and last characters) with their name and last use ("Used 3 minutes ago by 3 services"), never in full. **Roll** says the overlap in words ("The old key keeps working for 24 hours") before confirming, and afterwards. **Revoke** is a consequential action that names what breaks ("Requests that use it fail immediately. Used 3 minutes ago by 3 services."), behind a danger button.
|
|
12
|
+
|
|
13
|
+
**Webhooks.** An endpoint shows its URL, whether it's active, and its events as `Checkbox`es. **Deliveries are a `Timeline`**: each entry is the event with a status plate (Delivered, Failed). A failed delivery offers Retry; a retry in progress is a dispatched write, so it **hovers as pending** with its attempt in words ("Retrying (attempt 4 of 5)"), then lands. "Send test event" shows the payload it sent in a `CodeBlock`. The signing secret is a stored `SecretField`.
|
|
14
|
+
|
|
15
|
+
**Integrations.** Each is a `Card` with what it does and one action. Connected ones carry a "Connected" `Badge`. An OAuth handoff in progress is pending ("Waiting for authorization") until the provider returns; a cancelled or failed handoff says so and offers to try again. **Disconnect** is consequential and says what stops. A card holds its own action buttons, so the card itself doesn't lift; make a card `interactive` only when the whole card is one action (opening the integration's page).
|
|
16
|
+
|
|
17
|
+
## Content, keyboard, focus and announcements
|
|
18
|
+
|
|
19
|
+
Every row action is named with its target ("Revoke CI pipeline key"). Results are announced politely in one status region; focus returns to a logical place after a dialog. Secrets use a monospace face and copy buttons; never put a secret in a URL, a toast or a log entry. Tables scroll horizontally on narrow screens. Verify forced colors (masked keys, status plates and the pending retry stay distinguishable), reduced motion, zoom and RTL.
|
|
20
|
+
|
|
21
|
+
## Recovery and working implementation
|
|
22
|
+
|
|
23
|
+
A failed create, roll or revoke says nothing changed and offers to try again; a failed retry returns the delivery to Failed with the attempt count; an abandoned OAuth handoff returns the card to Connect. The working example in `build/fixtures/patterns/developer-settings.jsx` (shipped as `references/build/fixtures/patterns/developer-settings.jsx`) composes key creation shown once, a masked list, roll, revoke, webhook deliveries with a pending retry and a test payload, and integrations with an OAuth handoff. It is also the Storybook preview "Patterns/DeveloperSettingsPattern". [Metadata](developer-settings.json) names the runtime and verification sources.
|
|
24
|
+
|
|
25
|
+
## Rules, verification and evidence
|
|
26
|
+
|
|
27
|
+
`ALT-DEV-001` covers secrets shown once behind acknowledgement, masked lists, roll overlaps and revocation that names what breaks; `ALT-ACTION-001` covers the confirmations; `ALT-STATUS-001` covers announcements. `build/checks/developer-settings-pattern.mjs` checks the example in a browser. See [rules](../rules.json). Sample secrets in examples are obviously fake (`ak_live_EXAMPLE…`).
|
|
28
|
+
|
|
29
|
+
See [running examples and verification](../principles.md#run-the-examples-and-verification) for the installed example command, repository test command, and the limits of shipped test-reference snapshots.
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"id": "edit-record",
|
|
4
|
+
"version": 1,
|
|
5
|
+
"title": "Edit record",
|
|
6
|
+
"intents": [
|
|
7
|
+
"edit",
|
|
8
|
+
"settings",
|
|
9
|
+
"form",
|
|
10
|
+
"save",
|
|
11
|
+
"record",
|
|
12
|
+
"profile"
|
|
13
|
+
],
|
|
14
|
+
"purpose": "Edit a durable record without losing work.",
|
|
15
|
+
"useWhen": [
|
|
16
|
+
"A record has editable fields and an explicit persistence operation."
|
|
17
|
+
],
|
|
18
|
+
"avoidWhen": [
|
|
19
|
+
"Use InlineEdit for a contextual single value; use a route for extended work."
|
|
20
|
+
],
|
|
21
|
+
"alternatives": [
|
|
22
|
+
"Use InlineEdit for a contextual single value; use a route for extended work."
|
|
23
|
+
],
|
|
24
|
+
"requiredInputs": [
|
|
25
|
+
"initialValue",
|
|
26
|
+
"business validation",
|
|
27
|
+
"save promise returning canonical persisted value",
|
|
28
|
+
"unsaved-work/navigation policy"
|
|
29
|
+
],
|
|
30
|
+
"states": [
|
|
31
|
+
"pristine",
|
|
32
|
+
"editing",
|
|
33
|
+
"invalid",
|
|
34
|
+
"pending",
|
|
35
|
+
"failure",
|
|
36
|
+
"success"
|
|
37
|
+
],
|
|
38
|
+
"transitions": [
|
|
39
|
+
"editing \u2192 invalid on failed validation",
|
|
40
|
+
"editing \u2192 pending on valid submit",
|
|
41
|
+
"pending \u2192 failure on rejected persistence",
|
|
42
|
+
"failure \u2192 pending on retry",
|
|
43
|
+
"pending \u2192 success only after current response; newer edits remain dirty"
|
|
44
|
+
],
|
|
45
|
+
"rules": [
|
|
46
|
+
"ALT-EDIT-001",
|
|
47
|
+
"ALT-EDIT-002",
|
|
48
|
+
"ALT-EDIT-003",
|
|
49
|
+
"ALT-STATUS-001",
|
|
50
|
+
"ALT-VISUAL-001"
|
|
51
|
+
],
|
|
52
|
+
"sources": [
|
|
53
|
+
"altitude-elevation",
|
|
54
|
+
"govuk-validation",
|
|
55
|
+
"task-review",
|
|
56
|
+
"wcag22"
|
|
57
|
+
],
|
|
58
|
+
"authority": "contextual-pattern",
|
|
59
|
+
"applicability": "A record has editable fields and an explicit persistence operation.",
|
|
60
|
+
"exceptions": [
|
|
61
|
+
"Require only states supported by the application; do not fabricate capabilities."
|
|
62
|
+
],
|
|
63
|
+
"maturity": "provisional",
|
|
64
|
+
"evidenceStatus": "engineering-fixtures; human-effectiveness-unmeasured",
|
|
65
|
+
"document": "patterns/edit-record.md",
|
|
66
|
+
"implementation": "project/components/src/pattern-edit-record.tsx",
|
|
67
|
+
"examples": [
|
|
68
|
+
"build/fixtures/pattern-workflows.tsx",
|
|
69
|
+
"scripts/build-framework-fixture.mjs"
|
|
70
|
+
],
|
|
71
|
+
"verification": [
|
|
72
|
+
"build/checks/pattern-workflows.mjs"
|
|
73
|
+
]
|
|
74
|
+
}
|