@grainulation/barn 1.0.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/CHANGELOG.md +13 -0
- package/LICENSE +21 -0
- package/README.md +87 -0
- package/bin/barn.js +98 -0
- package/lib/index.js +93 -0
- package/lib/server.js +368 -0
- package/package.json +52 -0
- package/public/grainulation-tokens.css +321 -0
- package/public/index.html +907 -0
- package/templates/README.md +48 -0
- package/templates/adr.html +223 -0
- package/templates/adr.json +29 -0
- package/templates/brief.html +297 -0
- package/templates/brief.json +26 -0
- package/templates/certificate.html +247 -0
- package/templates/certificate.json +23 -0
- package/templates/changelog.html +239 -0
- package/templates/changelog.json +19 -0
- package/templates/ci-workflow.yml +52 -0
- package/templates/comparison.html +248 -0
- package/templates/comparison.json +21 -0
- package/templates/conflict-map.html +240 -0
- package/templates/conflict-map.json +19 -0
- package/templates/dashboard.html +515 -0
- package/templates/dashboard.json +22 -0
- package/templates/email-digest.html +178 -0
- package/templates/email-digest.json +18 -0
- package/templates/evidence-matrix.html +232 -0
- package/templates/evidence-matrix.json +21 -0
- package/templates/explainer.html +342 -0
- package/templates/explainer.json +23 -0
- package/templates/handoff.html +343 -0
- package/templates/handoff.json +24 -0
- package/templates/one-pager.html +248 -0
- package/templates/one-pager.json +22 -0
- package/templates/postmortem.html +303 -0
- package/templates/postmortem.json +20 -0
- package/templates/rfc.html +199 -0
- package/templates/rfc.json +32 -0
- package/templates/risk-register.html +231 -0
- package/templates/risk-register.json +22 -0
- package/templates/slide-deck.html +239 -0
- package/templates/slide-deck.json +23 -0
- package/templates/template.schema.json +25 -0
- package/templates/wiki-page.html +222 -0
- package/templates/wiki-page.json +23 -0
- package/tools/README.md +31 -0
- package/tools/build-pdf.js +43 -0
- package/tools/detect-sprints.js +292 -0
- package/tools/generate-manifest.js +237 -0
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# barn/templates
|
|
2
|
+
|
|
3
|
+
Self-contained HTML templates for research sprint artifacts. No external dependencies -- all CSS is inlined, no JavaScript frameworks.
|
|
4
|
+
|
|
5
|
+
## explainer.html
|
|
6
|
+
|
|
7
|
+
Full-screen scroll-snap presentation template. Each `.slide` div fills the viewport and snaps into place on scroll.
|
|
8
|
+
|
|
9
|
+
**Placeholders to replace:**
|
|
10
|
+
- `{{TITLE}}` -- main presentation title
|
|
11
|
+
- `{{SUBTITLE}}` -- subtitle/description
|
|
12
|
+
|
|
13
|
+
**Layout components:**
|
|
14
|
+
- `.slide` -- full-screen section (scroll-snap aligned)
|
|
15
|
+
- `.card` -- content card with colored left border (add `.green`, `.orange`, `.red`, `.purple`, `.pink`)
|
|
16
|
+
- `.two-col` / `.three-col` -- column layouts
|
|
17
|
+
- `.label` -- small uppercase badge (add color class for variants)
|
|
18
|
+
- `.divider` -- accent-colored horizontal rule
|
|
19
|
+
- `table` -- styled data table
|
|
20
|
+
- `.claim-ref` -- monospace claim reference (e.g., `[r001]`)
|
|
21
|
+
- `.slide-nav` -- fixed dot navigation on the right edge
|
|
22
|
+
- `.fade-in` -- entrance animation
|
|
23
|
+
|
|
24
|
+
## dashboard.html
|
|
25
|
+
|
|
26
|
+
Sprint status dashboard. Designed to be populated from `compilation.json` data.
|
|
27
|
+
|
|
28
|
+
**Sections:**
|
|
29
|
+
- Phase progress track (define/research/prototype/evaluate/compile)
|
|
30
|
+
- Evidence strength bars by topic
|
|
31
|
+
- Conflict tracker (unresolved + resolved)
|
|
32
|
+
- Connected sources list
|
|
33
|
+
- Recent activity log
|
|
34
|
+
- Full claim inventory table with type/evidence badges
|
|
35
|
+
|
|
36
|
+
**Badge classes:**
|
|
37
|
+
- Claim types: `.factual`, `.constraint`, `.estimate`, `.risk`, `.recommendation`, `.feedback`
|
|
38
|
+
- Evidence tiers: `.production`, `.tested`, `.documented`, `.web`, `.stated`
|
|
39
|
+
|
|
40
|
+
## Usage
|
|
41
|
+
|
|
42
|
+
Copy a template into your project and replace the `{{PLACEHOLDER}}` values:
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
cp node_modules/@grainulation/barn/templates/explainer.html ./output/presentation.html
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Both templates are mobile responsive with breakpoints at 768px and 480px.
|
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>ADR-{{ADR_NUMBER}}: {{TITLE}}</title>
|
|
7
|
+
<style>
|
|
8
|
+
/* barn/templates/adr.html — Architecture Decision Record template
|
|
9
|
+
Standard ADR format. Self-contained, no external dependencies. */
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
--bg: #0a0e1a;
|
|
13
|
+
--bg2: #111827;
|
|
14
|
+
--bg3: #1e293b;
|
|
15
|
+
--accent: #3b82f6;
|
|
16
|
+
--accent-light: #60a5fa;
|
|
17
|
+
--green: #22c55e;
|
|
18
|
+
--green-dim: rgba(34,197,94,0.12);
|
|
19
|
+
--orange: #f59e0b;
|
|
20
|
+
--orange-dim: rgba(245,158,11,0.12);
|
|
21
|
+
--red: #e11d48;
|
|
22
|
+
--red-dim: rgba(225,29,72,0.12);
|
|
23
|
+
--purple: #a78bfa;
|
|
24
|
+
--text: #f1f5f9;
|
|
25
|
+
--text-muted: #94a3b8;
|
|
26
|
+
--text-dim: #64748b;
|
|
27
|
+
--border: rgba(255,255,255,0.08);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
31
|
+
|
|
32
|
+
body {
|
|
33
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
|
|
34
|
+
background: var(--bg);
|
|
35
|
+
color: var(--text);
|
|
36
|
+
font-size: 11pt;
|
|
37
|
+
line-height: 1.6;
|
|
38
|
+
-webkit-font-smoothing: antialiased;
|
|
39
|
+
max-width: 800px;
|
|
40
|
+
margin: 0 auto;
|
|
41
|
+
padding: 48px 24px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
header { margin-bottom: 36px; }
|
|
45
|
+
|
|
46
|
+
.adr-id {
|
|
47
|
+
font-size: 10pt;
|
|
48
|
+
font-weight: 600;
|
|
49
|
+
color: var(--text-dim);
|
|
50
|
+
text-transform: uppercase;
|
|
51
|
+
letter-spacing: 0.1em;
|
|
52
|
+
margin-bottom: 8px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
h1 { font-size: 26pt; font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1.2; }
|
|
56
|
+
|
|
57
|
+
.status-bar {
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
gap: 16px;
|
|
61
|
+
margin-bottom: 8px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.status-badge {
|
|
65
|
+
display: inline-block;
|
|
66
|
+
font-size: 9pt;
|
|
67
|
+
font-weight: 700;
|
|
68
|
+
text-transform: uppercase;
|
|
69
|
+
letter-spacing: 0.08em;
|
|
70
|
+
padding: 4px 14px;
|
|
71
|
+
border-radius: 4px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.status-proposed { background: rgba(59,130,246,0.15); color: var(--accent-light); }
|
|
75
|
+
.status-accepted { background: var(--green-dim); color: var(--green); }
|
|
76
|
+
.status-deprecated { background: var(--orange-dim); color: var(--orange); }
|
|
77
|
+
.status-superseded { background: var(--red-dim); color: var(--red); }
|
|
78
|
+
|
|
79
|
+
.date { font-size: 10pt; color: var(--text-dim); }
|
|
80
|
+
|
|
81
|
+
h2 {
|
|
82
|
+
font-size: 16pt;
|
|
83
|
+
font-weight: 600;
|
|
84
|
+
color: #fff;
|
|
85
|
+
margin: 36px 0 12px;
|
|
86
|
+
padding-bottom: 8px;
|
|
87
|
+
border-bottom: 1px solid var(--border);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
p { color: var(--text-muted); margin-bottom: 12px; }
|
|
91
|
+
ul, ol { color: var(--text-muted); margin: 0 0 16px 20px; }
|
|
92
|
+
li { margin-bottom: 6px; }
|
|
93
|
+
|
|
94
|
+
.section {
|
|
95
|
+
background: var(--bg2);
|
|
96
|
+
border: 1px solid var(--border);
|
|
97
|
+
border-radius: 8px;
|
|
98
|
+
padding: 20px 24px;
|
|
99
|
+
margin-bottom: 16px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.section h3 {
|
|
103
|
+
font-size: 12pt;
|
|
104
|
+
font-weight: 600;
|
|
105
|
+
color: var(--accent-light);
|
|
106
|
+
margin-bottom: 10px;
|
|
107
|
+
text-transform: uppercase;
|
|
108
|
+
letter-spacing: 0.06em;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.consequence-risk {
|
|
112
|
+
border-left: 3px solid var(--orange);
|
|
113
|
+
padding-left: 12px;
|
|
114
|
+
margin-bottom: 10px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.consequence-benefit {
|
|
118
|
+
border-left: 3px solid var(--green);
|
|
119
|
+
padding-left: 12px;
|
|
120
|
+
margin-bottom: 10px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.alternative {
|
|
124
|
+
background: var(--bg3);
|
|
125
|
+
border: 1px solid var(--border);
|
|
126
|
+
border-radius: 6px;
|
|
127
|
+
padding: 16px 20px;
|
|
128
|
+
margin-bottom: 12px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.alternative h4 {
|
|
132
|
+
font-size: 12pt;
|
|
133
|
+
font-weight: 600;
|
|
134
|
+
color: var(--text);
|
|
135
|
+
margin-bottom: 6px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.related-list {
|
|
139
|
+
list-style: none;
|
|
140
|
+
padding: 0;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.related-list li {
|
|
144
|
+
padding: 6px 0;
|
|
145
|
+
border-bottom: 1px solid var(--border);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.related-list a { color: var(--accent-light); text-decoration: none; }
|
|
149
|
+
.related-list a:hover { text-decoration: underline; }
|
|
150
|
+
|
|
151
|
+
.claim-ref { font-size: 8pt; color: var(--text-dim); font-family: monospace; }
|
|
152
|
+
|
|
153
|
+
footer {
|
|
154
|
+
margin-top: 40px;
|
|
155
|
+
padding-top: 16px;
|
|
156
|
+
border-top: 1px solid var(--border);
|
|
157
|
+
font-size: 8pt;
|
|
158
|
+
color: var(--text-dim);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
@media print {
|
|
162
|
+
body { background: #fff; color: #1a1a1a; max-width: 100%; }
|
|
163
|
+
h1, h2, h3, h4 { color: #111; }
|
|
164
|
+
p, li { color: #333; }
|
|
165
|
+
.section, .alternative { background: #f5f5f5; border-color: #ddd; }
|
|
166
|
+
.status-badge { border: 1px solid #ccc; }
|
|
167
|
+
.consequence-risk { border-color: #cc8800; }
|
|
168
|
+
.consequence-benefit { border-color: #228822; }
|
|
169
|
+
a { color: #0066cc; }
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
@media (max-width: 600px) {
|
|
173
|
+
body { padding: 24px 16px; }
|
|
174
|
+
h1 { font-size: 20pt; }
|
|
175
|
+
h2 { font-size: 14pt; }
|
|
176
|
+
.section { padding: 14px 16px; }
|
|
177
|
+
.alternative { padding: 12px 14px; }
|
|
178
|
+
.status-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
|
|
179
|
+
}
|
|
180
|
+
</style>
|
|
181
|
+
</head>
|
|
182
|
+
<body>
|
|
183
|
+
<article aria-label="Architecture Decision Record: {{TITLE}}">
|
|
184
|
+
|
|
185
|
+
<header>
|
|
186
|
+
<div class="adr-id">ADR-{{ADR_NUMBER}}</div>
|
|
187
|
+
<h1>{{TITLE}}</h1>
|
|
188
|
+
<div class="status-bar">
|
|
189
|
+
<span class="status-badge {{STATUS}}">{{STATUS}}</span>
|
|
190
|
+
<span class="date">{{DATE}}</span>
|
|
191
|
+
</div>
|
|
192
|
+
</header>
|
|
193
|
+
|
|
194
|
+
<section aria-label="Context">
|
|
195
|
+
<h2>Context</h2>
|
|
196
|
+
{{CONTEXT}}
|
|
197
|
+
</section>
|
|
198
|
+
|
|
199
|
+
<section aria-label="Decision">
|
|
200
|
+
<h2>Decision</h2>
|
|
201
|
+
{{DECISION}}
|
|
202
|
+
</section>
|
|
203
|
+
|
|
204
|
+
<section aria-label="Consequences">
|
|
205
|
+
<h2>Consequences</h2>
|
|
206
|
+
{{CONSEQUENCES}}
|
|
207
|
+
</section>
|
|
208
|
+
|
|
209
|
+
<section aria-label="Alternatives considered">
|
|
210
|
+
<h2>Alternatives Considered</h2>
|
|
211
|
+
{{ALTERNATIVES}}
|
|
212
|
+
</section>
|
|
213
|
+
|
|
214
|
+
<section aria-label="Related decisions">
|
|
215
|
+
<h2>Related ADRs</h2>
|
|
216
|
+
{{RELATED}}
|
|
217
|
+
</section>
|
|
218
|
+
|
|
219
|
+
<footer>Built with barn -- grainulation</footer>
|
|
220
|
+
|
|
221
|
+
</article>
|
|
222
|
+
</body>
|
|
223
|
+
</html>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "Architecture Decision Record",
|
|
3
|
+
"description": "Standard ADR format for documenting architecture decisions. Includes context, decision, consequences, alternatives considered, and related ADRs. Follows the widely adopted ADR convention that engineering teams already know.",
|
|
4
|
+
"tags": ["adr", "architecture", "decision-record", "engineering"],
|
|
5
|
+
"author": "grainulation",
|
|
6
|
+
"version": "1.0.0",
|
|
7
|
+
"exportPresets": [
|
|
8
|
+
{ "name": "pdf", "format": "pdf" },
|
|
9
|
+
{ "name": "static-site", "format": "html" },
|
|
10
|
+
{ "name": "markdown-outline", "format": "md" }
|
|
11
|
+
],
|
|
12
|
+
"seedPacks": [
|
|
13
|
+
"architecture"
|
|
14
|
+
],
|
|
15
|
+
"scaffoldConfig": {
|
|
16
|
+
"defaultPlaceholders": {
|
|
17
|
+
"ADR_NUMBER": "000",
|
|
18
|
+
"TITLE": "Untitled Decision",
|
|
19
|
+
"STATUS": "status-proposed",
|
|
20
|
+
"DATE": "",
|
|
21
|
+
"CONTEXT": "",
|
|
22
|
+
"DECISION": "",
|
|
23
|
+
"CONSEQUENCES": "",
|
|
24
|
+
"ALTERNATIVES": "",
|
|
25
|
+
"RELATED": ""
|
|
26
|
+
},
|
|
27
|
+
"postInit": ["load-claims", "compile-brief"]
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>{{TITLE}} — Decision Brief</title>
|
|
7
|
+
<style>
|
|
8
|
+
/* barn/templates/brief.html — one-page decision document
|
|
9
|
+
System font stack, no external dependencies, fully self-contained. */
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
--bg: #0a0e1a;
|
|
13
|
+
--bg2: #111827;
|
|
14
|
+
--bg3: #1e293b;
|
|
15
|
+
--accent: #3b82f6;
|
|
16
|
+
--accent-light: #60a5fa;
|
|
17
|
+
--green: #22c55e;
|
|
18
|
+
--orange: #f59e0b;
|
|
19
|
+
--red: #e11d48;
|
|
20
|
+
--purple: #a78bfa;
|
|
21
|
+
--pink: #f472b6;
|
|
22
|
+
--text: #f1f5f9;
|
|
23
|
+
--text-muted: #94a3b8;
|
|
24
|
+
--text-dim: #64748b;
|
|
25
|
+
--border: rgba(255,255,255,0.06);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
29
|
+
html { height: 100%; scroll-behavior: smooth; scroll-snap-type: y mandatory; overflow-y: scroll; }
|
|
30
|
+
|
|
31
|
+
body {
|
|
32
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
|
|
33
|
+
background: var(--bg);
|
|
34
|
+
color: var(--text);
|
|
35
|
+
font-size: 11pt;
|
|
36
|
+
line-height: 1.5;
|
|
37
|
+
-webkit-font-smoothing: antialiased;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
section {
|
|
41
|
+
min-height: 100vh;
|
|
42
|
+
padding: 60px 80px;
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
justify-content: center;
|
|
46
|
+
scroll-snap-align: start;
|
|
47
|
+
position: relative;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
section::before {
|
|
51
|
+
content: '';
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: 0; right: 0;
|
|
54
|
+
width: 40%; height: 100%;
|
|
55
|
+
background: radial-gradient(ellipse at top right, rgba(59,130,246,0.06) 0%, transparent 70%);
|
|
56
|
+
pointer-events: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
h1 {
|
|
60
|
+
font-size: 36pt;
|
|
61
|
+
font-weight: 800;
|
|
62
|
+
letter-spacing: -0.03em;
|
|
63
|
+
line-height: 1.1;
|
|
64
|
+
margin-bottom: 12px;
|
|
65
|
+
background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
|
|
66
|
+
-webkit-background-clip: text;
|
|
67
|
+
-webkit-text-fill-color: transparent;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
h2 {
|
|
71
|
+
font-size: 24pt;
|
|
72
|
+
font-weight: 700;
|
|
73
|
+
letter-spacing: -0.02em;
|
|
74
|
+
margin-bottom: 20px;
|
|
75
|
+
color: #fff;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.section-label {
|
|
79
|
+
display: inline-block;
|
|
80
|
+
font-size: 9pt;
|
|
81
|
+
font-weight: 600;
|
|
82
|
+
letter-spacing: 0.12em;
|
|
83
|
+
text-transform: uppercase;
|
|
84
|
+
color: var(--accent-light);
|
|
85
|
+
background: rgba(59,130,246,0.12);
|
|
86
|
+
padding: 4px 12px;
|
|
87
|
+
border-radius: 4px;
|
|
88
|
+
margin-bottom: 16px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.subtitle { font-size: 16pt; color: var(--text-muted); font-weight: 300; max-width: 70%; margin-bottom: 24px; }
|
|
92
|
+
.sprint-meta { display: flex; gap: 24px; color: var(--text-dim); font-size: 10pt; margin-top: 12px; }
|
|
93
|
+
.sprint-meta strong { color: var(--text-muted); }
|
|
94
|
+
|
|
95
|
+
.question-block {
|
|
96
|
+
background: var(--bg2);
|
|
97
|
+
border-left: 3px solid var(--accent);
|
|
98
|
+
padding: 16px 24px;
|
|
99
|
+
border-radius: 0 8px 8px 0;
|
|
100
|
+
margin-top: 20px;
|
|
101
|
+
max-width: 80%;
|
|
102
|
+
font-size: 13pt;
|
|
103
|
+
color: var(--text-muted);
|
|
104
|
+
line-height: 1.5;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.claims-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
108
|
+
|
|
109
|
+
.claim-group {
|
|
110
|
+
background: var(--bg2);
|
|
111
|
+
border-radius: 12px;
|
|
112
|
+
padding: 20px 24px;
|
|
113
|
+
border: 1px solid var(--border);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.claim-group-header {
|
|
117
|
+
font-size: 9pt;
|
|
118
|
+
font-weight: 700;
|
|
119
|
+
text-transform: uppercase;
|
|
120
|
+
letter-spacing: 0.1em;
|
|
121
|
+
margin-bottom: 12px;
|
|
122
|
+
padding-bottom: 8px;
|
|
123
|
+
border-bottom: 1px solid var(--border);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.claim-group.constraint .claim-group-header { color: var(--purple); }
|
|
127
|
+
.claim-group.factual .claim-group-header { color: var(--accent-light); }
|
|
128
|
+
.claim-group.estimate .claim-group-header { color: var(--orange); }
|
|
129
|
+
.claim-group.risk .claim-group-header { color: var(--red); }
|
|
130
|
+
.claim-group.recommendation .claim-group-header { color: var(--green); }
|
|
131
|
+
.claim-group.feedback .claim-group-header { color: var(--pink); }
|
|
132
|
+
|
|
133
|
+
.claim-item {
|
|
134
|
+
padding: 8px 0;
|
|
135
|
+
border-bottom: 1px solid var(--border);
|
|
136
|
+
font-size: 10pt;
|
|
137
|
+
color: var(--text-muted);
|
|
138
|
+
line-height: 1.4;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.claim-item:last-child { border-bottom: none; }
|
|
142
|
+
.claim-item code { font-size: 8pt; color: var(--text-dim); margin-right: 6px; }
|
|
143
|
+
|
|
144
|
+
.evidence-track {
|
|
145
|
+
display: flex;
|
|
146
|
+
height: 32px;
|
|
147
|
+
border-radius: 8px;
|
|
148
|
+
overflow: hidden;
|
|
149
|
+
margin-bottom: 12px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.evidence-segment {
|
|
153
|
+
display: flex;
|
|
154
|
+
align-items: center;
|
|
155
|
+
justify-content: center;
|
|
156
|
+
font-size: 8pt;
|
|
157
|
+
font-weight: 700;
|
|
158
|
+
letter-spacing: 0.05em;
|
|
159
|
+
text-transform: uppercase;
|
|
160
|
+
color: rgba(255,255,255,0.9);
|
|
161
|
+
min-width: 40px;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.evidence-segment.production { background: linear-gradient(90deg, #22c55e, #16a34a); }
|
|
165
|
+
.evidence-segment.tested { background: linear-gradient(90deg, #3b82f6, #2563eb); }
|
|
166
|
+
.evidence-segment.documented { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
|
|
167
|
+
.evidence-segment.web { background: linear-gradient(90deg, #f59e0b, #d97706); }
|
|
168
|
+
.evidence-segment.stated { background: linear-gradient(90deg, #64748b, #475569); }
|
|
169
|
+
|
|
170
|
+
.legend { display: flex; gap: 20px; flex-wrap: wrap; }
|
|
171
|
+
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 9pt; color: var(--text-dim); }
|
|
172
|
+
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
|
|
173
|
+
|
|
174
|
+
.recommendation-card {
|
|
175
|
+
background: var(--bg2);
|
|
176
|
+
border: 1px solid var(--border);
|
|
177
|
+
border-radius: 16px;
|
|
178
|
+
padding: 32px;
|
|
179
|
+
max-width: 80%;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.recommendation-card p { font-size: 13pt; color: var(--text-muted); line-height: 1.6; margin-bottom: 0; }
|
|
183
|
+
|
|
184
|
+
.confidence-bar { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
|
|
185
|
+
.confidence-track { flex: 1; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; max-width: 300px; }
|
|
186
|
+
.confidence-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--green)); }
|
|
187
|
+
.confidence-label { font-size: 10pt; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
|
|
188
|
+
|
|
189
|
+
.brief-footer {
|
|
190
|
+
display: flex;
|
|
191
|
+
justify-content: space-between;
|
|
192
|
+
align-items: center;
|
|
193
|
+
padding: 20px 0;
|
|
194
|
+
border-top: 1px solid var(--border);
|
|
195
|
+
margin-top: auto;
|
|
196
|
+
font-size: 9pt;
|
|
197
|
+
color: var(--text-dim);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.brief-footer .hash { font-family: monospace; font-size: 8pt; }
|
|
201
|
+
|
|
202
|
+
nav[aria-label="sections"] {
|
|
203
|
+
position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
|
|
204
|
+
display: flex; flex-direction: column; gap: 8px; z-index: 100;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
nav[aria-label="sections"] a {
|
|
208
|
+
width: 8px; height: 8px; border-radius: 50%;
|
|
209
|
+
background: var(--text-dim); display: block; transition: all 0.2s;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
nav[aria-label="sections"] a:hover { background: var(--accent); transform: scale(1.5); }
|
|
213
|
+
|
|
214
|
+
@media (max-width: 768px) {
|
|
215
|
+
section { padding: 32px 20px; height: auto; }
|
|
216
|
+
h1 { font-size: 22pt; } h2 { font-size: 18pt; }
|
|
217
|
+
.subtitle { font-size: 13pt; max-width: 100%; }
|
|
218
|
+
.question-block { max-width: 100%; font-size: 11pt; }
|
|
219
|
+
.claims-grid { grid-template-columns: 1fr; }
|
|
220
|
+
.recommendation-card { max-width: 100%; padding: 20px; }
|
|
221
|
+
.sprint-meta { flex-wrap: wrap; gap: 8px 16px; }
|
|
222
|
+
nav[aria-label="sections"] { display: none; }
|
|
223
|
+
.brief-footer { flex-direction: column; gap: 8px; text-align: center; }
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
@media print {
|
|
227
|
+
html { scroll-snap-type: none; }
|
|
228
|
+
section { min-height: auto; height: auto; page-break-after: always; padding: 40px; }
|
|
229
|
+
body { background: #fff; color: #1a1a1a; }
|
|
230
|
+
h1 { background: none; -webkit-text-fill-color: #1a1a1a; }
|
|
231
|
+
h2 { color: #1a1a1a; }
|
|
232
|
+
.subtitle, .claim-item, .question-block { color: #333; }
|
|
233
|
+
.claim-group, .recommendation-card { background: #f5f5f5; border-color: #ddd; }
|
|
234
|
+
nav[aria-label="sections"] { display: none; }
|
|
235
|
+
}
|
|
236
|
+
</style>
|
|
237
|
+
</head>
|
|
238
|
+
<body>
|
|
239
|
+
|
|
240
|
+
<nav aria-label="sections">
|
|
241
|
+
<a href="#executive" title="Executive Summary"></a>
|
|
242
|
+
<a href="#findings" title="Key Findings"></a>
|
|
243
|
+
<a href="#evidence" title="Evidence Coverage"></a>
|
|
244
|
+
<a href="#recommendation" title="Recommendation"></a>
|
|
245
|
+
</nav>
|
|
246
|
+
|
|
247
|
+
<section id="executive" aria-label="Executive Summary">
|
|
248
|
+
<span class="section-label">Decision Brief</span>
|
|
249
|
+
<h1>{{TITLE}}</h1>
|
|
250
|
+
<p class="subtitle">{{SUBTITLE}}</p>
|
|
251
|
+
<div class="sprint-meta">
|
|
252
|
+
<span>Sprint: <strong>{{SPRINT_NAME}}</strong></span>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="question-block">{{QUESTION}}</div>
|
|
255
|
+
</section>
|
|
256
|
+
|
|
257
|
+
<section id="findings" aria-label="Key Findings">
|
|
258
|
+
<span class="section-label">Key Findings</span>
|
|
259
|
+
<h2>Claims by Type</h2>
|
|
260
|
+
<div class="claims-grid">
|
|
261
|
+
{{CLAIMS_BY_TYPE}}
|
|
262
|
+
</div>
|
|
263
|
+
</section>
|
|
264
|
+
|
|
265
|
+
<section id="evidence" aria-label="Evidence Coverage">
|
|
266
|
+
<span class="section-label">Evidence Coverage</span>
|
|
267
|
+
<h2>Tier Distribution</h2>
|
|
268
|
+
<div class="evidence-track">
|
|
269
|
+
{{EVIDENCE_SUMMARY}}
|
|
270
|
+
</div>
|
|
271
|
+
<div class="legend">
|
|
272
|
+
<div class="legend-item"><div class="legend-dot" style="background:#22c55e"></div> Production</div>
|
|
273
|
+
<div class="legend-item"><div class="legend-dot" style="background:#3b82f6"></div> Tested</div>
|
|
274
|
+
<div class="legend-item"><div class="legend-dot" style="background:#a78bfa"></div> Documented</div>
|
|
275
|
+
<div class="legend-item"><div class="legend-dot" style="background:#f59e0b"></div> Web</div>
|
|
276
|
+
<div class="legend-item"><div class="legend-dot" style="background:#64748b"></div> Stated</div>
|
|
277
|
+
</div>
|
|
278
|
+
</section>
|
|
279
|
+
|
|
280
|
+
<section id="recommendation" aria-label="Recommendation">
|
|
281
|
+
<span class="section-label">Recommendation</span>
|
|
282
|
+
<h2>What We Recommend</h2>
|
|
283
|
+
<div class="recommendation-card">
|
|
284
|
+
<p>{{RECOMMENDATION}}</p>
|
|
285
|
+
<div class="confidence-bar">
|
|
286
|
+
<span class="confidence-label">Confidence: {{CONFIDENCE}}</span>
|
|
287
|
+
<div class="confidence-track"><div class="confidence-fill" style="width:{{CONFIDENCE_PERCENT}}%"></div></div>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="brief-footer">
|
|
291
|
+
<div>Compiled: {{COMPILED_AT}} | Claims: {{CLAIM_COUNT}}</div>
|
|
292
|
+
<div class="hash">{{HASH}}</div>
|
|
293
|
+
</div>
|
|
294
|
+
</section>
|
|
295
|
+
|
|
296
|
+
</body>
|
|
297
|
+
</html>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "Brief",
|
|
3
|
+
"description": "One-page decision document for stakeholder review. Executive summary, claim cards by type, evidence coverage, and recommendation with confidence indicator.",
|
|
4
|
+
"tags": ["brief", "decision", "stakeholder", "executive"],
|
|
5
|
+
"author": "grainulation",
|
|
6
|
+
"version": "1.0.0",
|
|
7
|
+
"exportPresets": [
|
|
8
|
+
{ "name": "pdf", "format": "pdf" },
|
|
9
|
+
{ "name": "static-site", "format": "html" },
|
|
10
|
+
{ "name": "markdown-outline", "format": "md" }
|
|
11
|
+
],
|
|
12
|
+
"seedPacks": [
|
|
13
|
+
"architecture",
|
|
14
|
+
"compliance"
|
|
15
|
+
],
|
|
16
|
+
"scaffoldConfig": {
|
|
17
|
+
"defaultPlaceholders": {
|
|
18
|
+
"TITLE": "Decision Brief",
|
|
19
|
+
"SUBTITLE": "Sprint Summary",
|
|
20
|
+
"SPRINT_NAME": "Untitled Sprint",
|
|
21
|
+
"QUESTION": "",
|
|
22
|
+
"CONFIDENCE": "medium"
|
|
23
|
+
},
|
|
24
|
+
"postInit": ["load-claims", "compile-brief"]
|
|
25
|
+
}
|
|
26
|
+
}
|