@arjunkhera/atlas 0.3.8 → 0.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/.claude-plugin/plugin.json +1 -1
  2. package/agents/artifact-renderer.md +22 -22
  3. package/door/cli.mjs +36 -11
  4. package/door/lib/design-build.mjs +409 -0
  5. package/door/lib/design.mjs +199 -118
  6. package/door/lib/markdown.mjs +160 -0
  7. package/package.json +1 -1
  8. package/skills/lead/SKILL.md +1 -1
  9. package/skills/sdlc-task/SKILL.md +33 -24
  10. package/skills/sdlc-task/design/README.md +187 -0
  11. package/skills/sdlc-task/design/parts/actors.md +26 -0
  12. package/skills/sdlc-task/design/parts/alternatives.md +24 -0
  13. package/skills/sdlc-task/design/parts/build.md +23 -0
  14. package/skills/sdlc-task/design/parts/calls.md +25 -0
  15. package/skills/sdlc-task/design/parts/change.md +27 -0
  16. package/skills/sdlc-task/design/parts/data.md +22 -0
  17. package/skills/sdlc-task/design/parts/done.md +23 -0
  18. package/skills/sdlc-task/design/parts/edges.md +24 -0
  19. package/skills/sdlc-task/design/parts/goals.md +27 -0
  20. package/skills/sdlc-task/design/parts/key.md +25 -0
  21. package/skills/sdlc-task/design/parts/migration.md +22 -0
  22. package/skills/sdlc-task/design/parts/order.md +24 -0
  23. package/skills/sdlc-task/design/parts/problem.md +22 -0
  24. package/skills/sdlc-task/design/parts/proof.md +24 -0
  25. package/skills/sdlc-task/design/parts/proposal.md +24 -0
  26. package/skills/sdlc-task/design/parts/records.md +24 -0
  27. package/skills/sdlc-task/design/parts/repos.md +25 -0
  28. package/skills/sdlc-task/design/parts/risks.md +24 -0
  29. package/skills/sdlc-task/design/parts/rollout.md +24 -0
  30. package/skills/sdlc-task/design/parts/routes.md +24 -0
  31. package/skills/sdlc-task/design/parts/scorecard.md +25 -0
  32. package/skills/sdlc-task/design/parts/security.md +22 -0
  33. package/skills/sdlc-task/design/parts/shared-decisions.md +24 -0
  34. package/skills/sdlc-task/design/parts/states.md +25 -0
  35. package/skills/sdlc-task/design/parts/stories.md +26 -0
  36. package/skills/sdlc-task/design/parts/summary.md +33 -0
  37. package/skills/sdlc-task/design/parts/why.md +22 -0
  38. package/skills/sdlc-task/design/parts/words.md +29 -0
  39. package/skills/sdlc-task/design/parts/yardstick.md +25 -0
  40. package/skills/sdlc-task/design/parts.yaml +306 -0
  41. package/skills/sdlc-task/lifecycle.yaml +2 -2
  42. package/agents/artifact-format/walkthrough.html +0 -706
  43. package/skills/sdlc-task/templates/design-doc.md +0 -126
@@ -1,706 +0,0 @@
1
- <!doctype html>
2
- <!--
3
- Walkthrough format. The renderer copies this file and swaps the content.
4
- - Each part is <section class="part" id="part-N">. Tabs are plain anchors to it.
5
- - Each step is <div class="stepblock" id="step-N">. It holds its own copy of the part's SVG and the step text.
6
- - The SVG copy has class "upto-N". CSS hides each piece whose data-step is above N.
7
- - data-step="N" marks the step that adds a piece. Pieces of step N get a soft highlight.
8
- - Use a unique marker id in each SVG copy. The CSS covers steps 1 to 20.
9
- - The script adds class "js" to <html>. Only then does stepper mode start.
10
- - Stepper mode shows one part and one step block, with Back, Next, chips and arrow keys.
11
- - The page must work with all scripts removed: every step block and its picture state stay visible.
12
- - The last tab, "Reference", is a plain page with no steps.
13
- -->
14
- <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
15
- <title>Add a pickup time to an order — design (DRAFT)</title>
16
- <script>document.documentElement.classList.add('js')</script>
17
- <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18
- <link href="https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;600;700&display=swap" rel="stylesheet">
19
- <style>
20
- /* Organic — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
- :root {
40
- --color-bg: #f5ead8;
41
- --color-surface: #ebddc5;
42
- --color-text: #201e1d;
43
- --color-accent: #c67139;
44
- --color-accent-2: #7a8a5e;
45
- --color-divider: color-mix(in srgb, #201e1d 16%, transparent);
46
-
47
- /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
48
- same step of any role matches the others in visual value. */
49
- --color-neutral-100: #f9f4ed;
50
- --color-neutral-200: #eee7db;
51
- --color-neutral-300: #dcd3c4;
52
- --color-neutral-400: #c0b6a5;
53
- --color-neutral-500: #a19786;
54
- --color-neutral-600: #82796a;
55
- --color-neutral-700: #645c50;
56
- --color-neutral-800: #474238;
57
- --color-neutral-900: #2e2b25;
58
-
59
- --color-accent-100: #fff2eb;
60
- --color-accent-200: #ffe1d0;
61
- --color-accent-300: #ffc6a5;
62
- --color-accent-400: #f6a06b;
63
- --color-accent-500: #d67f48;
64
- --color-accent-600: #b2622d;
65
- --color-accent-700: #8c491a;
66
- --color-accent-800: #643312;
67
- --color-accent-900: #402310;
68
-
69
- --color-accent-2-100: #f0fae1;
70
- --color-accent-2-200: #e1eecc;
71
- --color-accent-2-300: #ccdbb2;
72
- --color-accent-2-400: #aebf92;
73
- --color-accent-2-500: #8fa073;
74
- --color-accent-2-600: #728157;
75
- --color-accent-2-700: #56633f;
76
- --color-accent-2-800: #3d472b;
77
- --color-accent-2-900: #272e1b;
78
-
79
- --font-heading: "Caprasimo", system-ui, sans-serif;
80
- --font-heading-weight: 400;
81
- --font-body: "Figtree", system-ui, sans-serif;
82
-
83
- --space-1: 4.4px;
84
- --space-2: 8.8px;
85
- --space-3: 13.2px;
86
- --space-4: 17.6px;
87
- --space-6: 26.4px;
88
- --space-8: 35.2px;
89
-
90
- --radius-sm: 8px;
91
- --radius-md: 16px;
92
- --radius-lg: 28px;
93
-
94
- /* Elevation — derived from the ground: soft ink-tinted shadows on a
95
- light theme, a hairline edge + ambient darkness on a dark one. */
96
- --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
97
- --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
98
- --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
99
- }
100
-
101
- body {
102
- background: var(--color-bg);
103
- color: var(--color-text);
104
- font-family: var(--font-body);
105
- }
106
- h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
107
-
108
- .washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}
109
-
110
- /* ══════════════════════════════════════════════════════════════════════════
111
- Components — built with the tokens above. Plain CSS
112
- on plain HTML: no JavaScript, no build step. Each class is documented in
113
- readme.md and demonstrated in foundations/ and components/.
114
- ══════════════════════════════════════════════════════════════════════ */
115
-
116
- *, *::before, *::after { box-sizing: border-box; }
117
- body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
118
- h1, h2, h3, h4, h5, h6 {
119
- font-family: var(--font-heading); font-weight: var(--font-heading-weight);
120
- line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
121
- }
122
- h1 { font-size: 42px; }
123
- h2 { font-size: 32px; }
124
- h3 { font-size: 25px; }
125
- h4 { font-size: 20px; }
126
- h5 { font-size: 16px; }
127
- h6 { font-size: 13px; }
128
- h6 { letter-spacing: 0.08em; text-transform: uppercase; }
129
- p { margin: 0 0 var(--space-3); }
130
- a { color: var(--color-accent); text-underline-offset: 3px; }
131
- img { display: block; max-width: 100%; }
132
- figure { margin: 0; }
133
- figcaption {
134
- font-size: 11px; margin-top: var(--space-1);
135
- color: color-mix(in srgb, var(--color-text) 55%, transparent);
136
- }
137
- .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
138
- :focus { outline: none; }
139
- :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
140
- ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
141
-
142
- /* — rules — */
143
- .hr {
144
- height: 1px; border: 0; margin: var(--space-4) 0;
145
- background: var(--color-divider);
146
- }
147
-
148
- /* — buttons — */
149
- .btn {
150
- display: inline-flex; align-items: center; justify-content: center; gap: 6px;
151
- cursor: pointer; text-decoration: none;
152
- font-family: var(--font-heading); font-weight: var(--font-heading-weight);
153
- font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
154
- the pair sits side by side in sign-up rows */
155
- background: transparent; border: 1px solid transparent;
156
- padding: var(--space-2) calc(var(--space-3) * 1.2);
157
- border-radius: var(--radius-md);
158
- }
159
- .btn svg { display: block; }
160
- .btn:disabled { opacity: 0.45; cursor: not-allowed; }
161
- .btn-primary { background: var(--color-accent); color: var(--color-bg); }
162
- .btn-primary:hover { background: var(--color-accent-600); }
163
- .btn-primary:active { background: var(--color-accent-700); }
164
- .btn-secondary { border-color: var(--color-divider); }
165
- .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
166
- .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
167
- .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
168
- .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
169
- .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
170
- .btn-icon { width: 36px; height: 36px; padding: 0; }
171
- .btn-block { width: 100%; margin-top: var(--space-2); }
172
-
173
- /* — forms — */
174
- .field > label {
175
- display: block; font-size: 12px; margin-bottom: 5px;
176
- color: color-mix(in srgb, var(--color-text) 70%, transparent);
177
- }
178
- .input {
179
- width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
180
- font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
181
- background: var(--color-surface);
182
- border: 1px solid var(--color-divider); border-radius: var(--radius-md);
183
- }
184
- .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
185
- .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
186
- textarea.input { min-height: 90px; resize: vertical; }
187
- .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
188
- .radio input, .seg-opt input {
189
- position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
190
- }
191
- .radio .dot {
192
- width: 16px; height: 16px; flex: none; border-radius: 50%;
193
- border: 1.5px solid var(--color-divider);
194
- }
195
- .radio:hover .dot { border-color: var(--color-accent); }
196
- .radio input:checked + .dot {
197
- border-color: var(--color-accent); background: var(--color-accent);
198
- box-shadow: inset 0 0 0 4px var(--color-bg);
199
- }
200
- .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
201
- .seg {
202
- display: inline-flex; overflow: hidden;
203
- border: 1px solid var(--color-divider); border-radius: var(--radius-md);
204
- }
205
- .seg-opt {
206
- display: inline-flex; align-items: center; gap: 6px;
207
- padding: 7px 12px; font-size: 13px; cursor: pointer;
208
- }
209
- .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
210
- .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
211
- .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
212
- .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
213
-
214
- /* — cards — */
215
- .card {
216
- display: flex; flex-direction: column; gap: var(--space-2);
217
- padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
218
- }
219
- .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
220
- .card-title {
221
- font-family: var(--font-heading); font-weight: var(--font-heading-weight);
222
- font-size: 17px; line-height: 1.2;
223
- }
224
- .card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
225
- .card-meta {
226
- display: flex; align-items: center; gap: 6px; font-size: 11px;
227
- color: color-mix(in srgb, var(--color-text) 50%, transparent);
228
- }
229
- .elev-sm { box-shadow: var(--shadow-sm); }
230
- .elev-md { box-shadow: var(--shadow-md); }
231
- .elev-lg { box-shadow: var(--shadow-lg); }
232
-
233
- /* — tags — */
234
- .tag {
235
- display: inline-flex; align-items: center; font-size: 11px;
236
- letter-spacing: 0.02em; padding: 3px 10px;
237
- border-radius: calc(var(--radius-md) * 0.75);
238
- }
239
- .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
240
- .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
241
- .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
242
- .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
243
-
244
- /* — navigation — */
245
- .nav {
246
- display: flex; align-items: center; gap: var(--space-4);
247
- padding: var(--space-3) var(--space-4);
248
- border-bottom: none;
249
- }
250
- .nav-brand {
251
- font-family: var(--font-heading); font-weight: var(--font-heading-weight);
252
- font-size: 18px; margin-right: auto;
253
- }
254
- .nav a { color: inherit; text-decoration: none; font-size: 14px; }
255
- .nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }
256
-
257
- /* — tables — */
258
- .table { width: 100%; border-collapse: collapse; font-size: 14px; }
259
- .table th {
260
- text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
261
- color: color-mix(in srgb, var(--color-text) 60%, transparent);
262
- padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
263
- }
264
- .table td {
265
- padding: var(--space-2);
266
- border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
267
- }
268
- .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
269
-
270
- /* — dialog — */
271
- .dialog-backdrop {
272
- position: fixed; inset: 0; display: grid; place-items: center;
273
- padding: var(--space-4);
274
- background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
275
- }
276
- .dialog {
277
- width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
278
- padding: var(--space-4); border-radius: var(--radius-lg);
279
- background: var(--color-surface); box-shadow: var(--shadow-lg);
280
- }
281
- .dialog-title {
282
- font-family: var(--font-heading); font-weight: var(--font-heading-weight);
283
- font-size: 20px;
284
- }
285
- .dialog-body { font-size: 14px; opacity: 0.85; }
286
- .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
287
-
288
- /* — rounded frame: everything softens, small controls go pill — */
289
- .card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
290
- .btn, .tag, .seg, .input { border-radius: 999px; }
291
- .input { padding-inline: 14px; }
292
-
293
-
294
-
295
- :root{--color-bg:#fcfbf9;--color-surface:#f5f1ea;--color-text:#25221f;--color-accent:#a97f5f;--color-divider:#e6dfd4;
296
- --color-accent-100:#f6ede4;--color-accent-600:#8f6a4d;--color-accent-700:#7a5a41;--color-accent-800:#5e4531;
297
- --ink-soft:#5f574c;--line:#e3dbcf;--clay-text:#7a5a41;--hl:#f7ebdf}
298
- html{background:#fcfbf9;color-scheme:light}
299
- body{background:#fcfbf9;color:#25221f;font-size:17px;line-height:1.65}
300
- .topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 28px;background:#fcfbf9;border-bottom:1px solid var(--line)}
301
- .brand{font-family:var(--font-heading);font-size:21px;color:#25221f;text-decoration:none;line-height:1.2}
302
- .tabs{display:flex;gap:8px;flex-wrap:wrap}
303
- .tab{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#3b362f;text-decoration:none;font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap}
304
- .tab .tn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f1ebe2;font-size:13px}
305
- .tab:hover{border-color:#a97f5f}
306
- .tab[aria-current="true"]{background:#a97f5f;border-color:#a97f5f;color:#fff}
307
- .tab[aria-current="true"] .tn{background:rgba(255,255,255,.25)}
308
- .phead{max-width:1240px;margin:0 auto;padding:28px 28px 8px}
309
- .kicker{margin:0 0 6px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-text);font-weight:700}
310
- .hrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
311
- .ptitle{font-size:38px;margin:0}
312
- .tag{font-size:13px;font-weight:700;letter-spacing:.06em}
313
- .sumcard{margin-top:18px;max-width:860px;background:#f7f3ec;border:1px solid var(--line);border-radius:20px;padding:18px 24px 6px}
314
- .sumcard p{max-width:68ch}
315
- .exl{margin:0 0 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay-text);font-weight:700}
316
- .pic{background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:0 1px 2px rgba(46,43,37,.06)}
317
- .pic svg{display:block;width:100%;height:auto;max-width:700px;margin:0 auto;overflow:visible}
318
- .steps{display:flex;flex-direction:column;gap:28px}
319
- .stepno{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--clay-text)}
320
- .steptitle{font-size:29px;margin:0 0 10px}
321
- .steptext{max-width:68ch;margin:0 0 14px}
322
- code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:#f4efe8;border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
323
- .lh{margin:0 0 4px;font-weight:700}
324
- .lst{margin:0 0 16px;padding-left:1.3em;max-width:68ch}
325
- .lst li{margin-bottom:4px}
326
- .exc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;overflow-x:auto}
327
- .exp,.exn{margin:0 0 8px;max-width:68ch}
328
- .exn{color:var(--ink-soft);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
329
- .exc pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
330
- .kv{margin:0}
331
- .kv>div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:6px 0;border-bottom:1px solid #efe9df}
332
- .kv>div:last-child{border-bottom:0}
333
- .kv dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--ink-soft);padding-top:2px}
334
- .kv dd{margin:0;overflow-wrap:anywhere}
335
- a{color:#7a5a41}
336
- /* svg */
337
- svg text{font-family:var(--font-body);font-size:16px;fill:#25221f}
338
- svg .m{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}
339
- svg .b{font-weight:700}svg .ts{font-size:15px;fill:#5f574c}svg .ac{fill:#7a5a41}
340
- svg .ok{fill:#5f6f45;font-size:18px}svg .bad{fill:#9a4a2e;font-size:18px}
341
- svg .bx{fill:#fff;stroke:#cbbfae;stroke-width:1.5}
342
- svg .bx2{fill:#faf7f2;stroke:#d9cfbf;stroke-width:1.5}
343
- svg .bx3{fill:#f6f1ea;stroke:#e0d6c7;stroke-width:1.2}
344
- svg .bxg{fill:#eef1e4;stroke:#aab38c;stroke-width:1.5}
345
- svg .badbx,svg .badr{fill:#fbeee8;stroke:#d9a58f;stroke-width:1.5}
346
- svg .gb{fill:#e6dfd4}
347
- svg .chip{fill:#e6dfd4}svg .chip.on{fill:#a97f5f}
348
- svg .ar{fill:none;stroke:#8a6446;stroke-width:2;stroke-linejoin:round}
349
- svg [data-step]{transition:opacity .4s}
350
- @keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
351
- /* bottom bar */
352
- .bottombar{display:none}
353
- html.js .bottombar{display:flex;position:sticky;bottom:0;z-index:10;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 28px;background:#fcfbf9;border-top:1px solid var(--line)}
354
- .nb{font:inherit;font-size:15px;font-weight:700;border-radius:999px;padding:9px 20px;cursor:pointer;border:1px solid #cbbfae;background:#fff;color:#25221f}
355
- .nb:hover:not(:disabled){border-color:#a97f5f}
356
- .nb.next{background:#2e2b25;border-color:#2e2b25;color:#fff}
357
- .nb:disabled{opacity:.4;cursor:not-allowed}
358
- .chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:center}
359
- .sc{min-width:38px;height:38px;border-radius:50%;border:1px solid #cbbfae;background:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;color:#25221f;padding:0 10px}
360
- .sc[aria-current="step"]{background:#a97f5f;border-color:#a97f5f;color:#fff}
361
- .sc.wide{border-radius:999px}
362
- .hint{font-size:14px;color:var(--ink-soft)}
363
- .part,.stepblock{scroll-margin-top:96px}
364
- .stepnav{max-width:1240px;margin:0 auto;padding:0 28px;font-size:15px;color:var(--ink-soft)}
365
- .stepnav a{display:inline-block;min-width:30px;text-align:center;margin-right:4px;font-weight:700}
366
- .stepblock{max-width:1240px;margin:0 auto;padding:12px 28px 28px;display:grid;gap:24px}
367
- .stepblock .steps{display:block}
368
- html.js .stepnav{display:none}
369
- html.js .part{display:none}
370
- html.js .part.is-active{display:block}
371
- html.js .stepblock{display:none}
372
- html.js .stepblock.is-active{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
373
- html.js .stepblock.is-active .step{animation:pop .4s ease both}
374
- .refbody{max-width:760px;margin:0 auto 0 0;padding:8px 0 48px}
375
- .part.ref .phead{padding-bottom:0}
376
- .refbody h2{font-size:27px;margin:30px 0 10px}
377
- .reflist{padding-left:1.4em;max-width:68ch}.reflist li{margin-bottom:8px}
378
- .ref{max-width:1240px;margin:0 auto}
379
- .ref .refbody{padding:0 28px 48px}
380
- .qid{font-weight:700;color:#7a5a41;border-bottom:1px dotted #7a5a41;cursor:help;text-decoration:none}
381
- .qid:target{background:#f7ebdf}
382
- html:not(.js) .part{border-top:1px solid var(--line);margin-top:20px}
383
- @media (max-width:860px){
384
- .topbar{padding:10px 16px}.tabs{overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:4px}
385
- .phead,.stepblock,.stepnav,.ref .refbody{padding-left:16px;padding-right:16px}
386
- html.js .stepblock.is-active{grid-template-columns:1fr}
387
- .ptitle{font-size:31px}.steptitle{font-size:25px}
388
- html.js .bottombar{padding:10px 16px}.chips{order:3;flex-basis:100%}.hint{display:none}
389
- }
390
- @media (prefers-reduced-motion:reduce){
391
- svg [data-step],html.js .stepblock.is-active .step,svg [data-step]{transition:none!important;animation:none!important}
392
- }
393
-
394
- .upto-1 [data-step="2"]{display:none}
395
- .upto-1 [data-step="3"]{display:none}
396
- .upto-1 [data-step="4"]{display:none}
397
- .upto-1 [data-step="5"]{display:none}
398
- .upto-1 [data-step="6"]{display:none}
399
- .upto-1 [data-step="7"]{display:none}
400
- .upto-1 [data-step="8"]{display:none}
401
- .upto-1 [data-step="9"]{display:none}
402
- .upto-1 [data-step="10"]{display:none}
403
- .upto-1 [data-step="11"]{display:none}
404
- .upto-1 [data-step="12"]{display:none}
405
- .upto-1 [data-step="13"]{display:none}
406
- .upto-1 [data-step="14"]{display:none}
407
- .upto-1 [data-step="15"]{display:none}
408
- .upto-1 [data-step="16"]{display:none}
409
- .upto-1 [data-step="17"]{display:none}
410
- .upto-1 [data-step="18"]{display:none}
411
- .upto-1 [data-step="19"]{display:none}
412
- .upto-1 [data-step="20"]{display:none}
413
- .upto-1 [data-step="1"]>rect.bx,.upto-1 [data-step="1"]>rect.bx3,.upto-1 [data-step="1"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
414
- .upto-1 [data-step="1"] .ar{stroke:#a97f5f;stroke-width:2.6}
415
- html.js .upto-1 [data-step="1"]{animation:pop .5s ease both}
416
- .upto-2 [data-step="3"]{display:none}
417
- .upto-2 [data-step="4"]{display:none}
418
- .upto-2 [data-step="5"]{display:none}
419
- .upto-2 [data-step="6"]{display:none}
420
- .upto-2 [data-step="7"]{display:none}
421
- .upto-2 [data-step="8"]{display:none}
422
- .upto-2 [data-step="9"]{display:none}
423
- .upto-2 [data-step="10"]{display:none}
424
- .upto-2 [data-step="11"]{display:none}
425
- .upto-2 [data-step="12"]{display:none}
426
- .upto-2 [data-step="13"]{display:none}
427
- .upto-2 [data-step="14"]{display:none}
428
- .upto-2 [data-step="15"]{display:none}
429
- .upto-2 [data-step="16"]{display:none}
430
- .upto-2 [data-step="17"]{display:none}
431
- .upto-2 [data-step="18"]{display:none}
432
- .upto-2 [data-step="19"]{display:none}
433
- .upto-2 [data-step="20"]{display:none}
434
- .upto-2 [data-step="2"]>rect.bx,.upto-2 [data-step="2"]>rect.bx3,.upto-2 [data-step="2"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
435
- .upto-2 [data-step="2"] .ar{stroke:#a97f5f;stroke-width:2.6}
436
- html.js .upto-2 [data-step="2"]{animation:pop .5s ease both}
437
- .upto-3 [data-step="4"]{display:none}
438
- .upto-3 [data-step="5"]{display:none}
439
- .upto-3 [data-step="6"]{display:none}
440
- .upto-3 [data-step="7"]{display:none}
441
- .upto-3 [data-step="8"]{display:none}
442
- .upto-3 [data-step="9"]{display:none}
443
- .upto-3 [data-step="10"]{display:none}
444
- .upto-3 [data-step="11"]{display:none}
445
- .upto-3 [data-step="12"]{display:none}
446
- .upto-3 [data-step="13"]{display:none}
447
- .upto-3 [data-step="14"]{display:none}
448
- .upto-3 [data-step="15"]{display:none}
449
- .upto-3 [data-step="16"]{display:none}
450
- .upto-3 [data-step="17"]{display:none}
451
- .upto-3 [data-step="18"]{display:none}
452
- .upto-3 [data-step="19"]{display:none}
453
- .upto-3 [data-step="20"]{display:none}
454
- .upto-3 [data-step="3"]>rect.bx,.upto-3 [data-step="3"]>rect.bx3,.upto-3 [data-step="3"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
455
- .upto-3 [data-step="3"] .ar{stroke:#a97f5f;stroke-width:2.6}
456
- html.js .upto-3 [data-step="3"]{animation:pop .5s ease both}
457
- .upto-4 [data-step="5"]{display:none}
458
- .upto-4 [data-step="6"]{display:none}
459
- .upto-4 [data-step="7"]{display:none}
460
- .upto-4 [data-step="8"]{display:none}
461
- .upto-4 [data-step="9"]{display:none}
462
- .upto-4 [data-step="10"]{display:none}
463
- .upto-4 [data-step="11"]{display:none}
464
- .upto-4 [data-step="12"]{display:none}
465
- .upto-4 [data-step="13"]{display:none}
466
- .upto-4 [data-step="14"]{display:none}
467
- .upto-4 [data-step="15"]{display:none}
468
- .upto-4 [data-step="16"]{display:none}
469
- .upto-4 [data-step="17"]{display:none}
470
- .upto-4 [data-step="18"]{display:none}
471
- .upto-4 [data-step="19"]{display:none}
472
- .upto-4 [data-step="20"]{display:none}
473
- .upto-4 [data-step="4"]>rect.bx,.upto-4 [data-step="4"]>rect.bx3,.upto-4 [data-step="4"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
474
- .upto-4 [data-step="4"] .ar{stroke:#a97f5f;stroke-width:2.6}
475
- html.js .upto-4 [data-step="4"]{animation:pop .5s ease both}
476
- .upto-5 [data-step="6"]{display:none}
477
- .upto-5 [data-step="7"]{display:none}
478
- .upto-5 [data-step="8"]{display:none}
479
- .upto-5 [data-step="9"]{display:none}
480
- .upto-5 [data-step="10"]{display:none}
481
- .upto-5 [data-step="11"]{display:none}
482
- .upto-5 [data-step="12"]{display:none}
483
- .upto-5 [data-step="13"]{display:none}
484
- .upto-5 [data-step="14"]{display:none}
485
- .upto-5 [data-step="15"]{display:none}
486
- .upto-5 [data-step="16"]{display:none}
487
- .upto-5 [data-step="17"]{display:none}
488
- .upto-5 [data-step="18"]{display:none}
489
- .upto-5 [data-step="19"]{display:none}
490
- .upto-5 [data-step="20"]{display:none}
491
- .upto-5 [data-step="5"]>rect.bx,.upto-5 [data-step="5"]>rect.bx3,.upto-5 [data-step="5"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
492
- .upto-5 [data-step="5"] .ar{stroke:#a97f5f;stroke-width:2.6}
493
- html.js .upto-5 [data-step="5"]{animation:pop .5s ease both}
494
- .upto-6 [data-step="7"]{display:none}
495
- .upto-6 [data-step="8"]{display:none}
496
- .upto-6 [data-step="9"]{display:none}
497
- .upto-6 [data-step="10"]{display:none}
498
- .upto-6 [data-step="11"]{display:none}
499
- .upto-6 [data-step="12"]{display:none}
500
- .upto-6 [data-step="13"]{display:none}
501
- .upto-6 [data-step="14"]{display:none}
502
- .upto-6 [data-step="15"]{display:none}
503
- .upto-6 [data-step="16"]{display:none}
504
- .upto-6 [data-step="17"]{display:none}
505
- .upto-6 [data-step="18"]{display:none}
506
- .upto-6 [data-step="19"]{display:none}
507
- .upto-6 [data-step="20"]{display:none}
508
- .upto-6 [data-step="6"]>rect.bx,.upto-6 [data-step="6"]>rect.bx3,.upto-6 [data-step="6"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
509
- .upto-6 [data-step="6"] .ar{stroke:#a97f5f;stroke-width:2.6}
510
- html.js .upto-6 [data-step="6"]{animation:pop .5s ease both}
511
- .upto-7 [data-step="8"]{display:none}
512
- .upto-7 [data-step="9"]{display:none}
513
- .upto-7 [data-step="10"]{display:none}
514
- .upto-7 [data-step="11"]{display:none}
515
- .upto-7 [data-step="12"]{display:none}
516
- .upto-7 [data-step="13"]{display:none}
517
- .upto-7 [data-step="14"]{display:none}
518
- .upto-7 [data-step="15"]{display:none}
519
- .upto-7 [data-step="16"]{display:none}
520
- .upto-7 [data-step="17"]{display:none}
521
- .upto-7 [data-step="18"]{display:none}
522
- .upto-7 [data-step="19"]{display:none}
523
- .upto-7 [data-step="20"]{display:none}
524
- .upto-7 [data-step="7"]>rect.bx,.upto-7 [data-step="7"]>rect.bx3,.upto-7 [data-step="7"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
525
- .upto-7 [data-step="7"] .ar{stroke:#a97f5f;stroke-width:2.6}
526
- html.js .upto-7 [data-step="7"]{animation:pop .5s ease both}
527
- .upto-8 [data-step="9"]{display:none}
528
- .upto-8 [data-step="10"]{display:none}
529
- .upto-8 [data-step="11"]{display:none}
530
- .upto-8 [data-step="12"]{display:none}
531
- .upto-8 [data-step="13"]{display:none}
532
- .upto-8 [data-step="14"]{display:none}
533
- .upto-8 [data-step="15"]{display:none}
534
- .upto-8 [data-step="16"]{display:none}
535
- .upto-8 [data-step="17"]{display:none}
536
- .upto-8 [data-step="18"]{display:none}
537
- .upto-8 [data-step="19"]{display:none}
538
- .upto-8 [data-step="20"]{display:none}
539
- .upto-8 [data-step="8"]>rect.bx,.upto-8 [data-step="8"]>rect.bx3,.upto-8 [data-step="8"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
540
- .upto-8 [data-step="8"] .ar{stroke:#a97f5f;stroke-width:2.6}
541
- html.js .upto-8 [data-step="8"]{animation:pop .5s ease both}
542
- .upto-9 [data-step="10"]{display:none}
543
- .upto-9 [data-step="11"]{display:none}
544
- .upto-9 [data-step="12"]{display:none}
545
- .upto-9 [data-step="13"]{display:none}
546
- .upto-9 [data-step="14"]{display:none}
547
- .upto-9 [data-step="15"]{display:none}
548
- .upto-9 [data-step="16"]{display:none}
549
- .upto-9 [data-step="17"]{display:none}
550
- .upto-9 [data-step="18"]{display:none}
551
- .upto-9 [data-step="19"]{display:none}
552
- .upto-9 [data-step="20"]{display:none}
553
- .upto-9 [data-step="9"]>rect.bx,.upto-9 [data-step="9"]>rect.bx3,.upto-9 [data-step="9"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
554
- .upto-9 [data-step="9"] .ar{stroke:#a97f5f;stroke-width:2.6}
555
- html.js .upto-9 [data-step="9"]{animation:pop .5s ease both}
556
- .upto-10 [data-step="11"]{display:none}
557
- .upto-10 [data-step="12"]{display:none}
558
- .upto-10 [data-step="13"]{display:none}
559
- .upto-10 [data-step="14"]{display:none}
560
- .upto-10 [data-step="15"]{display:none}
561
- .upto-10 [data-step="16"]{display:none}
562
- .upto-10 [data-step="17"]{display:none}
563
- .upto-10 [data-step="18"]{display:none}
564
- .upto-10 [data-step="19"]{display:none}
565
- .upto-10 [data-step="20"]{display:none}
566
- .upto-10 [data-step="10"]>rect.bx,.upto-10 [data-step="10"]>rect.bx3,.upto-10 [data-step="10"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
567
- .upto-10 [data-step="10"] .ar{stroke:#a97f5f;stroke-width:2.6}
568
- html.js .upto-10 [data-step="10"]{animation:pop .5s ease both}
569
- .upto-11 [data-step="12"]{display:none}
570
- .upto-11 [data-step="13"]{display:none}
571
- .upto-11 [data-step="14"]{display:none}
572
- .upto-11 [data-step="15"]{display:none}
573
- .upto-11 [data-step="16"]{display:none}
574
- .upto-11 [data-step="17"]{display:none}
575
- .upto-11 [data-step="18"]{display:none}
576
- .upto-11 [data-step="19"]{display:none}
577
- .upto-11 [data-step="20"]{display:none}
578
- .upto-11 [data-step="11"]>rect.bx,.upto-11 [data-step="11"]>rect.bx3,.upto-11 [data-step="11"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
579
- .upto-11 [data-step="11"] .ar{stroke:#a97f5f;stroke-width:2.6}
580
- html.js .upto-11 [data-step="11"]{animation:pop .5s ease both}
581
- .upto-12 [data-step="13"]{display:none}
582
- .upto-12 [data-step="14"]{display:none}
583
- .upto-12 [data-step="15"]{display:none}
584
- .upto-12 [data-step="16"]{display:none}
585
- .upto-12 [data-step="17"]{display:none}
586
- .upto-12 [data-step="18"]{display:none}
587
- .upto-12 [data-step="19"]{display:none}
588
- .upto-12 [data-step="20"]{display:none}
589
- .upto-12 [data-step="12"]>rect.bx,.upto-12 [data-step="12"]>rect.bx3,.upto-12 [data-step="12"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
590
- .upto-12 [data-step="12"] .ar{stroke:#a97f5f;stroke-width:2.6}
591
- html.js .upto-12 [data-step="12"]{animation:pop .5s ease both}
592
- .upto-13 [data-step="14"]{display:none}
593
- .upto-13 [data-step="15"]{display:none}
594
- .upto-13 [data-step="16"]{display:none}
595
- .upto-13 [data-step="17"]{display:none}
596
- .upto-13 [data-step="18"]{display:none}
597
- .upto-13 [data-step="19"]{display:none}
598
- .upto-13 [data-step="20"]{display:none}
599
- .upto-13 [data-step="13"]>rect.bx,.upto-13 [data-step="13"]>rect.bx3,.upto-13 [data-step="13"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
600
- .upto-13 [data-step="13"] .ar{stroke:#a97f5f;stroke-width:2.6}
601
- html.js .upto-13 [data-step="13"]{animation:pop .5s ease both}
602
- .upto-14 [data-step="15"]{display:none}
603
- .upto-14 [data-step="16"]{display:none}
604
- .upto-14 [data-step="17"]{display:none}
605
- .upto-14 [data-step="18"]{display:none}
606
- .upto-14 [data-step="19"]{display:none}
607
- .upto-14 [data-step="20"]{display:none}
608
- .upto-14 [data-step="14"]>rect.bx,.upto-14 [data-step="14"]>rect.bx3,.upto-14 [data-step="14"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
609
- .upto-14 [data-step="14"] .ar{stroke:#a97f5f;stroke-width:2.6}
610
- html.js .upto-14 [data-step="14"]{animation:pop .5s ease both}
611
- .upto-15 [data-step="16"]{display:none}
612
- .upto-15 [data-step="17"]{display:none}
613
- .upto-15 [data-step="18"]{display:none}
614
- .upto-15 [data-step="19"]{display:none}
615
- .upto-15 [data-step="20"]{display:none}
616
- .upto-15 [data-step="15"]>rect.bx,.upto-15 [data-step="15"]>rect.bx3,.upto-15 [data-step="15"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
617
- .upto-15 [data-step="15"] .ar{stroke:#a97f5f;stroke-width:2.6}
618
- html.js .upto-15 [data-step="15"]{animation:pop .5s ease both}
619
- .upto-16 [data-step="17"]{display:none}
620
- .upto-16 [data-step="18"]{display:none}
621
- .upto-16 [data-step="19"]{display:none}
622
- .upto-16 [data-step="20"]{display:none}
623
- .upto-16 [data-step="16"]>rect.bx,.upto-16 [data-step="16"]>rect.bx3,.upto-16 [data-step="16"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
624
- .upto-16 [data-step="16"] .ar{stroke:#a97f5f;stroke-width:2.6}
625
- html.js .upto-16 [data-step="16"]{animation:pop .5s ease both}
626
- .upto-17 [data-step="18"]{display:none}
627
- .upto-17 [data-step="19"]{display:none}
628
- .upto-17 [data-step="20"]{display:none}
629
- .upto-17 [data-step="17"]>rect.bx,.upto-17 [data-step="17"]>rect.bx3,.upto-17 [data-step="17"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
630
- .upto-17 [data-step="17"] .ar{stroke:#a97f5f;stroke-width:2.6}
631
- html.js .upto-17 [data-step="17"]{animation:pop .5s ease both}
632
- .upto-18 [data-step="19"]{display:none}
633
- .upto-18 [data-step="20"]{display:none}
634
- .upto-18 [data-step="18"]>rect.bx,.upto-18 [data-step="18"]>rect.bx3,.upto-18 [data-step="18"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
635
- .upto-18 [data-step="18"] .ar{stroke:#a97f5f;stroke-width:2.6}
636
- html.js .upto-18 [data-step="18"]{animation:pop .5s ease both}
637
- .upto-19 [data-step="20"]{display:none}
638
- .upto-19 [data-step="19"]>rect.bx,.upto-19 [data-step="19"]>rect.bx3,.upto-19 [data-step="19"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
639
- .upto-19 [data-step="19"] .ar{stroke:#a97f5f;stroke-width:2.6}
640
- html.js .upto-19 [data-step="19"]{animation:pop .5s ease both}
641
- .upto-20 [data-step="20"]>rect.bx,.upto-20 [data-step="20"]>rect.bx3,.upto-20 [data-step="20"]>rect.bx2{fill:var(--hl);stroke:#a97f5f}
642
- .upto-20 [data-step="20"] .ar{stroke:#a97f5f;stroke-width:2.6}
643
- html.js .upto-20 [data-step="20"]{animation:pop .5s ease both}
644
-
645
- </style></head><body>
646
- <div class="topbar"><a class="brand" href="#part-1">Add a pickup time to an order</a><nav class="tabs" aria-label="Parts"><a class="tab" href="#part-1" data-tab="0"><span class="tn">1</span> What and why</a><a class="tab" href="#part-2" data-tab="1"><span class="tn">2</span> How it flows</a><a class="tab" href="#part-3" data-tab="2"><span class="tn">3</span> Reference</a></nav></div>
647
- <main><section class="part" id="part-1" data-part="1" aria-label="Part 1: What and why"><header class="phead"><p class="kicker">Design · Part 1 of 3</p><div class="hrow"><h1 class="ptitle">What and why</h1><span class="tag tag-accent">DRAFT</span></div><div class="sumcard"><p class="exl">Summary</p><p>The Coffee order app lets a customer pick a pickup time for an order. This page is a made-up example of the walkthrough format.</p><p>Step through each part with the arrow keys. Each step adds one piece to the picture.</p></div></header><p class="stepnav">Steps in this part: <a href="#step-1">1</a> <a href="#step-2">2</a></p><div class="stepblock" id="step-1" data-n="1"><figure class="pic"><svg class="upto-1" viewBox="0 0 640 260" role="img" aria-label="Mia uses the app. Her order goes to the cafe queue." xmlns="http://www.w3.org/2000/svg"><defs><marker id="a1s1" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="#8a6446"/></marker></defs><g data-step="1"><rect class="bx" x="20" y="40" width="150" height="60" rx="12"/><text class="t" x="95.0" y="65.5" text-anchor="middle">Mia</text><text class="t" x="95.0" y="85.5" text-anchor="middle">(customer)</text></g><g data-step="1"><path class="ar" d="M170 70H250" marker-end="url(#a1s1)"/></g><g data-step="1"><rect class="bx" x="250" y="40" width="170" height="60" rx="12"/><text class="t" x="335.0" y="65.5" text-anchor="middle">Coffee order</text><text class="t" x="335.0" y="85.5" text-anchor="middle">app</text></g><g data-step="2"><path class="ar" d="M335 100V170" marker-end="url(#a1s1)"/></g><g data-step="2"><rect class="bx" x="250" y="170" width="170" height="60" rx="12"/><text class="t" x="335.0" y="195.5" text-anchor="middle">Cafe</text><text class="t" x="335.0" y="215.5" text-anchor="middle">drink queue</text></g><g data-step="2"><text class="ts" x="440" y="196" text-anchor="start">ready 8:12</text></g><g data-step="2"><text class="ts" x="440" y="220" text-anchor="start">Mia arrives 8:30</text></g></svg></figure><div class="steps"><article class="step" data-n="1"><p class="stepno">Step 1 of 5</p><h2 class="steptitle">A customer wants a pickup time</h2><p class="steptext">Mia opens the Coffee order app. She wants to say when she will collect her drink.</p><div class="exc"><p class="exl">Example</p><dl class="kv"><div><dt>Customer</dt><dd>Mia</dd></div><div><dt>Order</dt><dd>1 flat white</dd></div><div><dt>Wanted</dt><dd>pickup at 8:30</dd></div></dl></div></article></div></div><div class="stepblock" id="step-2" data-n="2"><figure class="pic"><svg class="upto-2" viewBox="0 0 640 260" role="img" aria-label="Mia uses the app. Her order goes to the cafe queue." xmlns="http://www.w3.org/2000/svg"><defs><marker id="a1s2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="#8a6446"/></marker></defs><g data-step="1"><rect class="bx" x="20" y="40" width="150" height="60" rx="12"/><text class="t" x="95.0" y="65.5" text-anchor="middle">Mia</text><text class="t" x="95.0" y="85.5" text-anchor="middle">(customer)</text></g><g data-step="1"><path class="ar" d="M170 70H250" marker-end="url(#a1s2)"/></g><g data-step="1"><rect class="bx" x="250" y="40" width="170" height="60" rx="12"/><text class="t" x="335.0" y="65.5" text-anchor="middle">Coffee order</text><text class="t" x="335.0" y="85.5" text-anchor="middle">app</text></g><g data-step="2"><path class="ar" d="M335 100V170" marker-end="url(#a1s2)"/></g><g data-step="2"><rect class="bx" x="250" y="170" width="170" height="60" rx="12"/><text class="t" x="335.0" y="195.5" text-anchor="middle">Cafe</text><text class="t" x="335.0" y="215.5" text-anchor="middle">drink queue</text></g><g data-step="2"><text class="ts" x="440" y="196" text-anchor="start">ready 8:12</text></g><g data-step="2"><text class="ts" x="440" y="220" text-anchor="start">Mia arrives 8:30</text></g></svg></figure><div class="steps"><article class="step" data-n="2"><p class="stepno">Step 2 of 5</p><h2 class="steptitle">Today the order has no time</h2><p class="steptext">The cafe makes drinks in the order they arrive. Mia’s drink may be cold when she gets there.</p><div class="exc"><p class="exl">Example</p><dl class="kv"><div><dt>Order placed</dt><dd>8:05</dd></div><div><dt>Drink ready</dt><dd>8:12</dd></div><div><dt>Mia arrives</dt><dd>8:30</dd></div></dl></div></article></div></div></section><section class="part" id="part-2" data-part="2" aria-label="Part 2: How it flows"><header class="phead"><p class="kicker">Design · Part 2 of 3</p><div class="hrow"><h1 class="ptitle">How it flows</h1><span class="tag tag-accent">DRAFT</span></div></header><p class="stepnav">Steps in this part: <a href="#step-3">3</a> <a href="#step-4">4</a> <a href="#step-5">5</a></p><div class="stepblock" id="step-3" data-n="3"><figure class="pic"><svg class="upto-3" viewBox="0 0 640 260" role="img" aria-label="The order screen sends the pickup time to the server. The cafe screen sorts by it." xmlns="http://www.w3.org/2000/svg"><defs><marker id="a2s3" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="#8a6446"/></marker></defs><g data-step="3"><rect class="bx" x="20" y="30" width="170" height="60" rx="12"/><text class="t" x="105.0" y="55.5" text-anchor="middle">Order screen</text><text class="t" x="105.0" y="75.5" text-anchor="middle">time picker</text></g><g data-step="3"><text class="ts" x="20" y="120" text-anchor="start">Mia picks 8:30</text></g><g data-step="4"><path class="ar" d="M190 60H260" marker-end="url(#a2s3)"/></g><g data-step="4"><rect class="bx" x="260" y="30" width="150" height="60" rx="12"/><text class="t" x="335.0" y="65.5" text-anchor="middle">Server</text></g><g data-step="4"><path class="ar" d="M410 60H470" marker-end="url(#a2s3)"/></g><g data-step="4"><rect class="bxg" x="470" y="30" width="150" height="60" rx="12"/><text class="t" x="545.0" y="55.5" text-anchor="middle">Saved</text><text class="t" x="545.0" y="75.5" text-anchor="middle">orders</text></g><g data-step="5"><path class="ar" d="M335 90V170" marker-end="url(#a2s3)"/></g><g data-step="5"><rect class="bx" x="260" y="170" width="150" height="60" rx="12"/><text class="t" x="335.0" y="195.5" text-anchor="middle">Cafe screen</text><text class="t" x="335.0" y="215.5" text-anchor="middle">sorted by time</text></g><g data-step="5"><text class="ts" x="430" y="196" text-anchor="start">start by 8:20</text></g></svg></figure><div class="steps"><article class="step" data-n="3"><p class="stepno">Step 3 of 5</p><h2 class="steptitle">The app asks for a time</h2><p class="steptext">The order screen gets a time picker. Mia picks 8:30.</p><div class="exc"><p class="exl">Example</p><dl class="kv"><div><dt>Field</dt><dd>pickup_time</dd></div><div><dt>Value</dt><dd>08:30</dd></div></dl></div></article></div></div><div class="stepblock" id="step-4" data-n="4"><figure class="pic"><svg class="upto-4" viewBox="0 0 640 260" role="img" aria-label="The order screen sends the pickup time to the server. The cafe screen sorts by it." xmlns="http://www.w3.org/2000/svg"><defs><marker id="a2s4" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="#8a6446"/></marker></defs><g data-step="3"><rect class="bx" x="20" y="30" width="170" height="60" rx="12"/><text class="t" x="105.0" y="55.5" text-anchor="middle">Order screen</text><text class="t" x="105.0" y="75.5" text-anchor="middle">time picker</text></g><g data-step="3"><text class="ts" x="20" y="120" text-anchor="start">Mia picks 8:30</text></g><g data-step="4"><path class="ar" d="M190 60H260" marker-end="url(#a2s4)"/></g><g data-step="4"><rect class="bx" x="260" y="30" width="150" height="60" rx="12"/><text class="t" x="335.0" y="65.5" text-anchor="middle">Server</text></g><g data-step="4"><path class="ar" d="M410 60H470" marker-end="url(#a2s4)"/></g><g data-step="4"><rect class="bxg" x="470" y="30" width="150" height="60" rx="12"/><text class="t" x="545.0" y="55.5" text-anchor="middle">Saved</text><text class="t" x="545.0" y="75.5" text-anchor="middle">orders</text></g><g data-step="5"><path class="ar" d="M335 90V170" marker-end="url(#a2s4)"/></g><g data-step="5"><rect class="bx" x="260" y="170" width="150" height="60" rx="12"/><text class="t" x="335.0" y="195.5" text-anchor="middle">Cafe screen</text><text class="t" x="335.0" y="215.5" text-anchor="middle">sorted by time</text></g><g data-step="5"><text class="ts" x="430" y="196" text-anchor="start">start by 8:20</text></g></svg></figure><div class="steps"><article class="step" data-n="4"><p class="stepno">Step 4 of 5</p><h2 class="steptitle">The server saves the time</h2><p class="steptext">The app sends the order with the pickup time. The server checks that the time is in the future, then saves it.</p><div class="exc"><p class="exl">Example</p><pre>{ "item": "flat white",
648
- "pickup_time": "08:30" }</pre></div></article></div></div><div class="stepblock" id="step-5" data-n="5"><figure class="pic"><svg class="upto-5" viewBox="0 0 640 260" role="img" aria-label="The order screen sends the pickup time to the server. The cafe screen sorts by it." xmlns="http://www.w3.org/2000/svg"><defs><marker id="a2s5" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="#8a6446"/></marker></defs><g data-step="3"><rect class="bx" x="20" y="30" width="170" height="60" rx="12"/><text class="t" x="105.0" y="55.5" text-anchor="middle">Order screen</text><text class="t" x="105.0" y="75.5" text-anchor="middle">time picker</text></g><g data-step="3"><text class="ts" x="20" y="120" text-anchor="start">Mia picks 8:30</text></g><g data-step="4"><path class="ar" d="M190 60H260" marker-end="url(#a2s5)"/></g><g data-step="4"><rect class="bx" x="260" y="30" width="150" height="60" rx="12"/><text class="t" x="335.0" y="65.5" text-anchor="middle">Server</text></g><g data-step="4"><path class="ar" d="M410 60H470" marker-end="url(#a2s5)"/></g><g data-step="4"><rect class="bxg" x="470" y="30" width="150" height="60" rx="12"/><text class="t" x="545.0" y="55.5" text-anchor="middle">Saved</text><text class="t" x="545.0" y="75.5" text-anchor="middle">orders</text></g><g data-step="5"><path class="ar" d="M335 90V170" marker-end="url(#a2s5)"/></g><g data-step="5"><rect class="bx" x="260" y="170" width="150" height="60" rx="12"/><text class="t" x="335.0" y="195.5" text-anchor="middle">Cafe screen</text><text class="t" x="335.0" y="215.5" text-anchor="middle">sorted by time</text></g><g data-step="5"><text class="ts" x="430" y="196" text-anchor="start">start by 8:20</text></g></svg></figure><div class="steps"><article class="step" data-n="5"><p class="stepno">Step 5 of 5</p><h2 class="steptitle">The cafe sees the time</h2><p class="steptext">The cafe screen sorts orders by pickup time. The barista starts Mia’s drink at 8:20.</p><div class="exc"><p class="exl">Example</p><dl class="kv"><div><dt>Start by</dt><dd>8:20</dd></div><div><dt>Pickup</dt><dd>8:30</dd></div></dl></div></article></div></div></section><section class="part ref" id="part-3" data-part="3" aria-label="Part 3: Reference"><header class="phead"><p class="kicker">Design · Part 3 of 3</p><div class="hrow"><h1 class="ptitle">Reference</h1><span class="tag tag-accent">DRAFT</span></div></header><div class="refbody">
649
- <h2 id="done">Definition of done</h2><ol class="reflist"><li>The order screen has a time picker.</li><li>The server saves a pickup time that is in the future.</li><li>The cafe screen sorts orders by pickup time.</li></ol>
650
- <h2 id="kind">Kind of change, impact and undo</h2><ul class="reflist"><li><strong>Kind:</strong> a new field on the order. No money.</li><li><strong>Impact:</strong> new orders carry a pickup time. Old orders do not change.</li><li><strong>Undo:</strong> hide the time picker, and release again.</li></ul>
651
- <h2 id="questions">Questions</h2><ul class="reflist"><li><span id="Q-1" class="qid" tabindex="0" title="Should a customer be able to change the pickup time after ordering?">Q-1</span> — Should a customer be able to change the pickup time after ordering?</li></ul>
652
- <h2 id="key">Key</h2><ul class="reflist"><li><strong>Pickup time</strong> — the time a customer plans to collect an order.</li><li><a class="qid" href="#Q-1" data-ref title="Should a customer be able to change the pickup time after ordering?">Q-1</a> — the open question above.</li></ul>
653
- </div></section></main>
654
- <div class="bottombar"><button class="nb" id="back" type="button">← Back</button><div class="chips" id="chips"></div><button class="nb next" id="next" type="button">Next →</button><span class="hint">← → or Space to move</span></div>
655
- <script>
656
- (function(){
657
- var parts=[].slice.call(document.querySelectorAll('.part'));
658
- var tabs=[].slice.call(document.querySelectorAll('[data-tab]'));
659
- var pos=[];
660
- parts.forEach(function(p,i){var ss=[].slice.call(p.querySelectorAll('.stepblock'));
661
- if(ss.length){ss.forEach(function(s){pos.push({p:i,s:+s.getAttribute('data-n')});});}else{pos.push({p:i,s:0});}});
662
- var cur=0,lastPart=-1;
663
- var back=document.getElementById('back'),next=document.getElementById('next'),chips=document.getElementById('chips');
664
- function render(){
665
- var it=pos[cur];
666
- parts.forEach(function(p,i){p.classList.toggle('is-active',i===it.p);});
667
- tabs.forEach(function(t,i){if(i===it.p){t.setAttribute('aria-current','true');}else{t.removeAttribute('aria-current');}});
668
- [].forEach.call(document.querySelectorAll('.stepblock'),function(s){s.classList.toggle('is-active',+s.getAttribute('data-n')===it.s);});
669
- chips.innerHTML='';
670
- pos.forEach(function(q,idx){if(q.p!==it.p)return;
671
- var b=document.createElement('button');b.type='button';b.className='sc'+(q.s?'':' wide');
672
- b.textContent=q.s?q.s:'Reference';b.setAttribute('aria-label',q.s?('Go to step '+q.s):'Reference');
673
- if(idx===cur)b.setAttribute('aria-current','step');
674
- b.addEventListener('click',function(){go(idx);});chips.appendChild(b);});
675
- back.disabled=cur===0;next.disabled=cur===pos.length-1;
676
- if(lastPart!==it.p){try{history.replaceState(null,'','#part-'+(it.p+1));}catch(e){}
677
- window.scrollTo(0,0);lastPart=it.p;}
678
- }
679
- function go(i){cur=Math.max(0,Math.min(pos.length-1,i));render();}
680
- function goStep(n){for(var i=0;i<pos.length;i++){if(pos[i].s===n){go(i);return;}}}
681
- function goPart(k){for(var i=0;i<pos.length;i++){if(pos[i].p===k){go(i);return;}}}
682
- back.addEventListener('click',function(){go(cur-1);});
683
- next.addEventListener('click',function(){go(cur+1);});
684
- tabs.forEach(function(t,i){t.addEventListener('click',function(e){e.preventDefault();goPart(i);});});
685
- document.addEventListener('click',function(e){var a=e.target.closest&&e.target.closest('a[data-goto],a[data-ref]');if(!a)return;
686
- e.preventDefault();
687
- if(a.hasAttribute('data-goto')){goStep(+a.getAttribute('data-goto'));}
688
- else{goPart(2);var t=document.getElementById('Q-1');if(t)t.scrollIntoView();}});
689
- document.addEventListener('keydown',function(e){
690
- if(e.altKey||e.ctrlKey||e.metaKey)return;
691
- var tg=e.target&&e.target.tagName;
692
- if(e.key==='ArrowRight'){e.preventDefault();go(cur+1);}
693
- else if(e.key==='ArrowLeft'){e.preventDefault();go(cur-1);}
694
- else if((e.key===' '||e.key==='Spacebar')&&tg!=='BUTTON'&&tg!=='A'){e.preventDefault();go(e.shiftKey?cur-1:cur+1);}
695
- });
696
- function route(){var h=location.hash.replace('#','');var m;
697
- if((m=/^step-(\d+)$/.exec(h))){goStep(+m[1]);}
698
- else if((m=/^part-(\d)$/.exec(h))){goPart(+m[1]-1);}
699
- else{go(0);}
700
- if(!/^Q-1$/.test(h))window.scrollTo(0,0);}
701
- window.addEventListener('hashchange',route);
702
- route();
703
- setTimeout(function(){if(!/^Q-1$/.test(location.hash.slice(1)))window.scrollTo(0,0);},0);
704
- })();
705
- </script>
706
- </body></html>