@cyber-dash-tech/revela 0.18.16 → 0.19.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.
Files changed (95) hide show
  1. package/README.md +27 -13
  2. package/README.zh-CN.md +27 -13
  3. package/assets/img/lucent-01.jpg +0 -0
  4. package/assets/img/lucent-02.jpg +0 -0
  5. package/assets/img/lucent-03.jpg +0 -0
  6. package/assets/img/lucent-dark-01.jpg +0 -0
  7. package/assets/img/lucent-dark-02.jpg +0 -0
  8. package/assets/img/lucent-dark-03.jpg +0 -0
  9. package/assets/img/monet-01.jpg +0 -0
  10. package/assets/img/monet-02.jpg +0 -0
  11. package/assets/img/monet-03.jpg +0 -0
  12. package/assets/img/starter-01.jpg +0 -0
  13. package/assets/img/starter-02.jpg +0 -0
  14. package/assets/img/starter-03.jpg +0 -0
  15. package/assets/img/summit-01.jpg +0 -0
  16. package/assets/img/summit-02.jpg +0 -0
  17. package/assets/img/summit-03.jpg +0 -0
  18. package/designs/lucent/DESIGN.md +76 -0
  19. package/designs/lucent/design.css +283 -0
  20. package/designs/lucent-dark/DESIGN.md +278 -0
  21. package/designs/lucent-dark/assets/card-lens.jpg +0 -0
  22. package/designs/lucent-dark/assets/closing-background.jpg +0 -0
  23. package/designs/lucent-dark/assets/cover-background.jpg +0 -0
  24. package/designs/lucent-dark/assets/report-visual.jpg +0 -0
  25. package/designs/lucent-dark/assets/soft-texture.jpg +0 -0
  26. package/designs/lucent-dark/assets/toc-orb.png +0 -0
  27. package/designs/lucent-dark/design.css +417 -0
  28. package/designs/monet/DESIGN.md +14 -0
  29. package/designs/monet/assets/card-lens.jpg +0 -0
  30. package/designs/monet/assets/closing-background.jpg +0 -0
  31. package/designs/monet/assets/cover-background.jpg +0 -0
  32. package/designs/monet/assets/report-visual.jpg +0 -0
  33. package/designs/monet/assets/soft-texture.jpg +0 -0
  34. package/designs/monet/assets/toc-orb.png +0 -0
  35. package/designs/monet/design.css +340 -0
  36. package/designs/starter/DESIGN.md +14 -0
  37. package/designs/starter/assets/card-lens.jpg +0 -0
  38. package/designs/starter/assets/closing-background.jpg +0 -0
  39. package/designs/starter/assets/cover-background.jpg +0 -0
  40. package/designs/starter/assets/report-visual.jpg +0 -0
  41. package/designs/starter/assets/soft-texture.jpg +0 -0
  42. package/designs/starter/assets/toc-orb.png +0 -0
  43. package/designs/starter/design.css +322 -0
  44. package/designs/summit/DESIGN.md +18 -0
  45. package/designs/summit/assets/card-lens.jpg +0 -0
  46. package/designs/summit/assets/closing-background.jpg +0 -0
  47. package/designs/summit/assets/cover-background.jpg +0 -0
  48. package/designs/summit/assets/report-visual.jpg +0 -0
  49. package/designs/summit/assets/soft-texture.jpg +0 -0
  50. package/designs/summit/assets/toc-orb.png +0 -0
  51. package/designs/summit/design.css +334 -0
  52. package/lib/commands/designs-new.ts +13 -25
  53. package/lib/commands/designs-preview.ts +3 -8
  54. package/lib/deck-html/foundation.ts +8 -8
  55. package/lib/design/designs.ts +305 -14
  56. package/lib/narrative-state/deck-plan-artifact.ts +40 -3
  57. package/lib/page-templates/built-in-preview.html +373 -0
  58. package/lib/page-templates/contracts.ts +2 -0
  59. package/lib/page-templates/css.ts +2 -0
  60. package/lib/page-templates/foundation.ts +41 -0
  61. package/lib/page-templates/index.ts +6 -0
  62. package/lib/page-templates/registry.ts +3 -0
  63. package/lib/page-templates/render.ts +1202 -0
  64. package/lib/page-templates/templates/agenda.ts +4 -0
  65. package/lib/page-templates/templates/chart-takeaways.ts +4 -0
  66. package/lib/page-templates/templates/claim-supporting-visual.ts +4 -0
  67. package/lib/page-templates/templates/closing.ts +4 -0
  68. package/lib/page-templates/templates/cover.ts +4 -0
  69. package/lib/page-templates/templates/executive-summary.ts +4 -0
  70. package/lib/page-templates/templates/index.ts +19 -0
  71. package/lib/page-templates/templates/key-message-evidence.ts +4 -0
  72. package/lib/page-templates/templates/metric-highlight.ts +4 -0
  73. package/lib/page-templates/templates/problem-context.ts +4 -0
  74. package/lib/page-templates/templates/process-steps.ts +4 -0
  75. package/lib/page-templates/templates/recommendation-decision.ts +4 -0
  76. package/lib/page-templates/templates/risks-tradeoffs.ts +4 -0
  77. package/lib/page-templates/templates/section-divider.ts +4 -0
  78. package/lib/page-templates/templates/shared.ts +11 -0
  79. package/lib/page-templates/templates/table-comparison.ts +4 -0
  80. package/lib/page-templates/templates/timeline-roadmap.ts +4 -0
  81. package/lib/page-templates/vocabulary.ts +158 -0
  82. package/lib/prompt-builder.ts +5 -5
  83. package/lib/qa/artifact.ts +66 -1
  84. package/lib/qa/compliance.ts +5 -1
  85. package/lib/runtime/index.ts +99 -3
  86. package/package.json +7 -15
  87. package/plugins/revela/.codex-plugin/plugin.json +1 -1
  88. package/plugins/revela/hooks/revela_guard.ts +35 -0
  89. package/plugins/revela/mcp/revela-server.ts +101 -5
  90. package/plugins/revela/skills/revela-design/SKILL.md +21 -16
  91. package/plugins/revela/skills/revela-make-deck/SKILL.md +24 -15
  92. package/designs/lucent/preview.html +0 -529
  93. package/designs/monet/preview.html +0 -190
  94. package/designs/starter/preview.html +0 -335
  95. package/designs/summit/preview.html +0 -186
package/designs/summit/preview.html DELETED
@@ -1,186 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Summit Design System - Contract Preview</title>
7
- <style>
8
- :root {
9
- --bg-frame: #050505;
10
- --bg-page: #f7f4ee;
11
- --bg-page-alt: #efe9df;
12
- --text-primary: #171411;
13
- --text-secondary: #5e554c;
14
- --text-muted: #8a7f73;
15
- --line: rgba(23, 20, 17, 0.14);
16
- --line-strong: rgba(23, 20, 17, 0.28);
17
- --accent-earth: #8d6a49;
18
- --accent-olive: #6f7562;
19
- --accent-stone: #b9afa1;
20
- --accent-gold: #c9992a;
21
- --accent-danger: #b94a3c;
22
- --accent-sage: #9eb0a6;
23
- --shadow-soft: rgba(0, 0, 0, 0.18);
24
- --font-display: Montserrat, Arial, ui-sans-serif, sans-serif;
25
- --font-body: Montserrat, Arial, ui-sans-serif, sans-serif;
26
- --font-size-body: 17px;
27
- --font-size-meta: 17px;
28
- --font-size-body-strong: 20px;
29
- --grid-page-inset: 40px;
30
- --grid-content-width: 1480px;
31
- --grid-text-col: 480px;
32
- --grid-image-col: 880px;
33
- --grid-gutter: 40px;
34
- --grid-safe-x: 80px;
35
- --grid-safe-y: 72px;
36
- --space-1: 8px;
37
- --space-2: 16px;
38
- --space-3: 24px;
39
- --space-4: 32px;
40
- --space-5: 48px;
41
- --space-6: 72px;
42
- --font-size-h3: 24px;
43
- --font-size-h2: 36px;
44
- --font-size-hero: 116px;
45
- --surface-radius: 0px;
46
- --surface-shadow: 0 24px 80px var(--shadow-soft);
47
- }
48
- * { box-sizing: border-box; margin: 0; padding: 0; }
49
- html { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; }
50
- body { min-height: 100%; background: var(--bg-frame); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
51
- .slide { min-height: 100dvh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; background: var(--bg-frame); overflow: hidden; }
52
- .slide-canvas { width: 1920px; height: 1080px; flex-shrink: 0; transform-origin: center center; position: relative; overflow: hidden; padding: 0; }
53
- .page { position: relative; width: 100%; height: 100%; padding: var(--grid-safe-y) var(--grid-safe-x); background: var(--bg-page); box-shadow: var(--surface-shadow); overflow: hidden; }
54
- .page.alt { background: var(--bg-page-alt); }
55
- .preview-label { position: absolute; left: var(--grid-safe-x); top: 26px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
56
- h1, h2, h3 { font-family: var(--font-display); color: var(--text-primary); font-weight: 700; letter-spacing: 0; }
57
- h1 { font-size: 86px; line-height: 1.1; padding: 10px 0; }
58
- h2 { font-size: 43px; line-height: 1.16; padding: 4px 0; }
59
- h3 { font-size: 27px; line-height: 1.2; }
60
- p, li { font-size: 21px; line-height: 1.5; color: var(--text-secondary); }
61
- .eyebrow, .caption { font-size: 15px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
62
- .source-note { font-family: "Times New Roman", Times, serif; font-size: 15px; line-height: 1.36; color: var(--text-muted); }
63
- .page-number { position: absolute; right: 34px; bottom: 26px; font-size: 12px; letter-spacing: .14em; color: var(--text-muted); }
64
- .page-number--light { color: rgba(247,244,238,.66); }
65
- .brand-watermark { position: absolute; right: var(--grid-safe-x); top: var(--grid-safe-y); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
66
- .mountain-field { position: absolute; inset: 0; background: linear-gradient(180deg, #8f9a94 0%, #c2b8a8 48%, #efe9df 100%); overflow: hidden; }
67
- .mountain-field::before { content: ""; position: absolute; left: -80px; right: -80px; bottom: 0; height: 72%; background: linear-gradient(145deg, transparent 0 34%, rgba(23,20,17,.72) 34% 51%, transparent 51%), linear-gradient(35deg, transparent 0 42%, rgba(23,20,17,.54) 42% 60%, transparent 60%); opacity: .8; }
68
- .mountain-field::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.86), rgba(5,5,5,.48) 45%, rgba(5,5,5,.12)); }
69
- .hero { position: relative; height: 100%; overflow: hidden; }
70
- .hero-content { position: relative; z-index: 1; height: 100%; padding: 88px; display: flex; flex-direction: column; justify-content: flex-end; max-width: 900px; }
71
- .hero h1 { color: var(--bg-page); max-width: 800px; }
72
- .hero p { max-width: 620px; margin-top: var(--space-3); color: rgba(247,244,238,.76); }
73
- .toc-panel { height: 100%; display: grid; grid-template-columns: 430px 1fr; gap: var(--space-6); align-items: stretch; }
74
- .toc-title { border-right: 1px solid var(--line); padding-right: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; }
75
- .toc-list { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
76
- .toc-item { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-3); align-items: baseline; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
77
- .toc-item span { font-size: 32px; line-height: 1.2; color: var(--accent-earth); font-weight: 700; }
78
- .toc-item strong { font-size: 28px; color: var(--text-primary); }
79
- .layout-title { height: 152px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
80
- .layout-title h2 { max-width: 1160px; }
81
- .grid { height: calc(100% - 184px); display: grid; gap: var(--grid-gutter); min-height: 0; }
82
- .narrative-grid { grid-template-columns: 5fr 7fr; }
83
- .narrative-grid--reverse { grid-template-columns: 7fr 5fr; }
84
- .highlight-cols-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
85
- .halves-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
86
- .stacked-grid { grid-template-rows: .44fr 1.56fr; }
87
- .box, .text-panel, .stat-card, .echart-panel, .table-panel, .quote, .steps, .roadmap { background: rgba(247,244,238,.62); padding: var(--space-4); min-height: 0; overflow: hidden; }
88
- .box { display: flex; flex-direction: column; gap: var(--space-3); }
89
- .box--paper { background: rgba(255,255,255,.42); }
90
- .text-panel { display: flex; flex-direction: column; justify-content: space-between; }
91
- .media { position: relative; min-height: 0; overflow: hidden; background: linear-gradient(140deg, #6f7562, #b9afa1); }
92
- .media::before { content: ""; position: absolute; inset: 64px 42px; background: linear-gradient(140deg, transparent 0 36%, rgba(247,244,238,.78) 36% 39%, transparent 39%), linear-gradient(35deg, transparent 0 45%, rgba(23,20,17,.42) 45% 62%, transparent 62%); }
93
- .stat-value { font-size: 66px; line-height: 1.12; color: var(--accent-earth); font-weight: 700; }
94
- .chart-bars { flex: 1; display: flex; align-items: end; gap: 18px; padding-top: var(--space-4); min-height: 230px; }
95
- .chart-bars span { flex: 1; background: linear-gradient(180deg, var(--accent-gold), var(--accent-earth)); min-height: 64px; }
96
- table { width: 100%; border-collapse: collapse; font-size: 20px; line-height: 1.4; }
97
- th { text-align: left; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
98
- td { padding: 15px 12px 15px 0; border-bottom: 1px solid var(--line); color: var(--text-secondary); }
99
- .quote { display: flex; align-items: center; justify-content: center; }
100
- .quote p { font-size: 34px; line-height: 1.28; max-width: 980px; color: var(--text-primary); font-weight: 600; }
101
- .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
102
- .steps li { border-top: 3px solid var(--accent-gold); padding-top: var(--space-3); }
103
- .roadmap { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
104
- .roadmap-item { border-left: 3px solid var(--accent-earth); padding-left: var(--space-3); }
105
- .roadmap-vertical { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
106
- .tjh { --tjh-node: 14px; --tjh-stem-h: 38px; --tjh-col: 280px; position: relative; width: 100%; height: 100%; min-height: 420px; overflow: visible; }
107
- .tjh-axis { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line-strong); transform: translateY(-50%); }
108
- .tjh-item { position: absolute; display: flex; flex-direction: column; align-items: center; width: var(--tjh-col); transform: translateX(-50%); overflow: visible; }
109
- .tjh-item--up { bottom: 50%; }
110
- .tjh-item--down { top: 50%; }
111
- .tjh-axis-dot, .tjh-tip-dot { width: var(--tjh-node); height: var(--tjh-node); background: var(--tjh-item-color); flex-shrink: 0; }
112
- .tjh-item--up .tjh-axis-dot { margin-bottom: calc(-1 * var(--tjh-node) / 2); }
113
- .tjh-item--down .tjh-axis-dot { margin-top: calc(-1 * var(--tjh-node) / 2); }
114
- .tjh-stem { width: 1px; height: var(--tjh-stem-h); background-image: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 8px); flex-shrink: 0; }
115
- .tjh-label { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 0 8px; overflow: visible; }
116
- .tjh-item--up .tjh-label { margin-bottom: 8px; }
117
- .tjh-item--down .tjh-label { margin-top: 8px; }
118
- .tjh-date, .tjv-date { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tjh-item-color, var(--tjv-item-color)); font-weight: 800; }
119
- .tjh-title, .tjv-title { font-family: var(--font-display); font-size: 18px; color: var(--text-primary); line-height: 1.28; font-weight: 700; }
120
- .tjh-text, .tjv-text { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
121
- .tjv { --tjv-node: 14px; --tjv-stem-w: 36px; position: relative; width: 100%; height: 100%; min-height: 420px; overflow: visible; }
122
- .tjv-axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); transform: translateX(-50%); }
123
- .tjv-item { position: absolute; display: flex; align-items: center; min-width: 260px; min-height: 116px; transform: translateY(-50%); overflow: visible; }
124
- .tjv-item--left { right: calc(50% - var(--tjv-node) / 2); flex-direction: row-reverse; }
125
- .tjv-item--right { left: calc(50% - var(--tjv-node) / 2); flex-direction: row; }
126
- .tjv-axis-dot, .tjv-tip-dot { width: var(--tjv-node); height: var(--tjv-node); background: var(--tjv-item-color); flex-shrink: 0; }
127
- .tjv-item--left .tjv-axis-dot, .tjv-item--right .tjv-axis-dot { margin: 0; }
128
- .tjv-stem { width: var(--tjv-stem-w); height: 1px; background-image: repeating-linear-gradient(to right, var(--line-strong) 0 4px, transparent 4px 8px); flex-shrink: 0; }
129
- .tjv-label { display: flex; flex-direction: column; gap: 5px; overflow: visible; }
130
- .tjv-item--left .tjv-label { text-align: right; align-items: flex-end; padding-right: 14px; max-width: 340px; }
131
- .tjv-item--right .tjv-label { text-align: left; align-items: flex-start; padding-left: 14px; max-width: 340px; }
132
- .timeline-preview { display: grid; grid-template-rows: 1fr 58px 1fr; gap: var(--space-3); height: 100%; }
133
- .timeline-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); align-items: end; }
134
- .timeline-row--bottom { align-items: start; }
135
- .timeline-node { display: flex; flex-direction: column; align-items: center; justify-self: center; gap: 5px; width: min(240px, 100%); min-width: 0; text-align: center; }
136
- .timeline-row--top .timeline-node:nth-child(even), .timeline-row--bottom .timeline-node:nth-child(odd) { visibility: hidden; }
137
- .timeline-axis-preview { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); align-items: center; }
138
- .timeline-axis-preview::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
139
- .timeline-dot { position: relative; z-index: 1; width: 14px; height: 14px; background: var(--dot); justify-self: center; }
140
- .vertical-timeline-preview { display: block; position: relative; height: 100%; min-height: 420px; }
141
- </style>
142
- </head>
143
- <body>
144
- <section class="slide" slide-qa="false" data-slide-index="1" data-slide-role="cover" data-preview-layout="fullbleed" data-preview-component="hero">
145
- <div class="slide-canvas"><div class="hero"><div class="mountain-field"></div><div class="hero-content"><p class="eyebrow" style="color:rgba(247,244,238,.68);">Summit Design System</p><h1>Grounded strategy for hard terrain.</h1><p>Contract preview for a warm paper, documentary, mountain-led executive deck system.</p></div><div class="page-number page-number--light" data-preview-component="page-number">01</div></div></div>
146
- </section>
147
-
148
- <section class="slide" slide-qa="false" data-slide-index="2" data-preview-layout="toc" data-preview-component="toc">
149
- <div class="slide-canvas"><div class="page"><p class="preview-label">layout fixture / toc</p><div class="toc-panel"><div class="toc-title"><div><p class="eyebrow">Contents</p><h2>Operating review with expedition discipline</h2></div><p>Rows stay broad, direct, and easy to scan before the deck moves into evidence.</p></div><ol class="toc-list"><li class="toc-item"><span>01</span><strong>Baseline and target</strong></li><li class="toc-item"><span>02</span><strong>Material evidence</strong></li><li class="toc-item"><span>03</span><strong>Roadmap and decision</strong></li></ol></div><div class="page-number">02</div></div></div>
150
- </section>
151
-
152
- <section class="slide" slide-qa="true" data-slide-index="3" data-preview-layout="narrative">
153
- <div class="slide-canvas"><div class="page"><p class="preview-label">layout fixture / narrative</p><div class="brand-watermark" data-preview-component="brand-watermark">Summit</div><div class="layout-title"><div><p class="eyebrow">Narrative</p><h2>Use narrow text beside a dominant documentary field.</h2></div></div><div class="grid narrative-grid"><div class="text-panel" data-preview-component="text-panel"><div><h3>Decision-ready copy</h3><p>Summit favors direct claims, plain caveats, and a grounded visual hierarchy. 中文正文与 English explanation keep predictable spacing.</p></div><p class="source-note">Source note: preview fixture only.</p></div><div class="media" data-preview-component="media"></div></div><div class="page-number">03</div></div></div>
154
- </section>
155
-
156
- <section class="slide" slide-qa="true" data-slide-index="4" data-preview-layout="narrative-reverse">
157
- <div class="slide-canvas"><div class="page alt"><p class="preview-label">layout fixture / narrative-reverse</p><div class="layout-title"><div><p class="eyebrow">Reverse split</p><h2>Evidence can lead while interpretation remains compact.</h2></div></div><div class="grid narrative-grid--reverse"><div class="media"></div><div class="box box--paper" data-preview-component="box"><h3>Operating signal</h3><p>Use boxes for one idea: claim, risk, action, or evidence item.</p><div class="stat-card" data-preview-component="stat-card"><p class="eyebrow">Progress</p><div class="stat-value">38%</div><p>Example metric tile with restrained emphasis.</p></div></div></div><div class="page-number">04</div></div></div>
158
- </section>
159
-
160
- <section class="slide" slide-qa="true" data-slide-index="5" data-preview-layout="highlight-cols">
161
- <div class="slide-canvas"><div class="page"><p class="preview-label">layout fixture / highlight-cols</p><div class="layout-title"><div><p class="eyebrow">Dense state</p><h2>Three columns test disciplined cards and concise evidence.</h2></div></div><div class="grid highlight-cols-grid"><div class="box"><h3>Target</h3><p>One measurable commitment per module.</p></div><div class="box"><h3>Evidence</h3><p>Source notes stay attached to the evidence card.</p><p class="source-note">Source: fixture.</p></div><div class="box"><h3>Risk</h3><p>Make the operating caveat visible before the ask.</p></div></div><div class="page-number">05</div></div></div>
162
- </section>
163
-
164
- <section class="slide" slide-qa="true" data-slide-index="6" data-preview-layout="halves">
165
- <div class="slide-canvas"><div class="page alt"><p class="preview-label">layout fixture / halves</p><div class="layout-title"><div><p class="eyebrow">Data modules</p><h2>Charts and tables keep rugged but stable containers.</h2></div></div><div class="grid halves-grid"><div class="echart-panel" data-preview-component="echart-panel"><h3>Chart frame</h3><div class="chart-bars"><span style="height:54%"></span><span style="height:42%"></span><span style="height:76%"></span><span style="height:68%"></span></div><p class="source-note">Chart source: fixture data.</p></div><div class="table-panel" data-preview-component="data-table"><h3>Table frame</h3><table><thead><tr><th>Area</th><th>Base</th><th>Now</th></tr></thead><tbody><tr><td>Scope 1</td><td>100</td><td>76</td></tr><tr><td>Scope 2</td><td>100</td><td>62</td></tr><tr><td>Scope 3</td><td>100</td><td>91</td></tr></tbody></table></div></div><div class="page-number">06</div></div></div>
166
- </section>
167
-
168
- <section class="slide" slide-qa="true" data-slide-index="7" data-preview-layout="stacked">
169
- <div class="slide-canvas"><div class="page"><p class="preview-label">layout fixture / stacked + expedition timeline</p><div class="grid stacked-grid"><div class="quote" data-preview-component="quote"><p>"A hard deck should make the path, the risk, and the decision unmistakable."</p></div><div class="roadmap-horizontal timeline-preview" data-preview-component="roadmap-horizontal"><div class="timeline-row timeline-row--top"><div class="timeline-node"><span class="tjh-date" style="--tjh-item-color:var(--accent-earth);">Q1</span><span class="tjh-title">Baseline</span><span class="tjh-text">Lock facts.</span></div><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date" style="--tjh-item-color:var(--accent-olive);">Q3</span><span class="tjh-title">Move</span><span class="tjh-text">Ship actions.</span></div><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date" style="--tjh-item-color:var(--text-muted);">2027</span><span class="tjh-title">Scale</span><span class="tjh-text">Extend route.</span></div></div><div class="timeline-axis-preview"><span class="timeline-dot" style="--dot:var(--accent-earth);"></span><span class="timeline-dot" style="--dot:var(--accent-gold);"></span><span class="timeline-dot" style="--dot:var(--accent-olive);"></span><span class="timeline-dot" style="--dot:var(--accent-rust);"></span><span class="timeline-dot" style="--dot:var(--text-muted);"></span></div><div class="timeline-row timeline-row--bottom"><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date" style="--tjh-item-color:var(--accent-gold);">Q2</span><span class="tjh-title">Focus</span><span class="tjh-text">Pick levers.</span></div><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date" style="--tjh-item-color:var(--accent-rust);">Q4</span><span class="tjh-title">Review</span><span class="tjh-text">Audit gaps.</span></div><div class="timeline-node"></div></div></div></div><div class="page-number">07</div></div></div>
170
- </section>
171
-
172
- <section class="slide" slide-qa="false" data-slide-index="8" data-slide-role="closing" data-preview-component="roadmap-vertical">
173
- <div class="slide-canvas"><div class="page alt"><p class="preview-label">component fixture / roadmap-vertical + steps</p><div class="layout-title"><div><p class="eyebrow">Closing fixture</p><h2>Vertical expedition timeline and next steps stay inside the paper page.</h2></div></div><div class="grid halves-grid"><div class="roadmap-vertical tjv vertical-timeline-preview" data-preview-component="roadmap-vertical"><div class="tjv-axis"></div><div class="tjv-item tjv-item--left" style="top:16%;--tjv-item-color:var(--accent-earth);"><div class="tjv-axis-dot"></div><div class="tjv-stem"></div><div class="tjv-tip-dot"></div><div class="tjv-label"><span class="tjv-date">Measure</span><span class="tjv-title">Baseline</span><span class="tjv-text">Set terrain.</span></div></div><div class="tjv-item tjv-item--right" style="top:38%;--tjv-item-color:var(--accent-gold);"><div class="tjv-axis-dot"></div><div class="tjv-stem"></div><div class="tjv-tip-dot"></div><div class="tjv-label"><span class="tjv-date">Reduce</span><span class="tjv-title">Levers</span><span class="tjv-text">Assign owners.</span></div></div><div class="tjv-item tjv-item--left" style="top:60%;--tjv-item-color:var(--accent-olive);"><div class="tjv-axis-dot"></div><div class="tjv-stem"></div><div class="tjv-tip-dot"></div><div class="tjv-label"><span class="tjv-date">Verify</span><span class="tjv-title">Audit</span><span class="tjv-text">Check source.</span></div></div><div class="tjv-item tjv-item--right" style="top:82%;--tjv-item-color:var(--accent-rust);"><div class="tjv-axis-dot"></div><div class="tjv-stem"></div><div class="tjv-tip-dot"></div><div class="tjv-label"><span class="tjv-date">Decide</span><span class="tjv-title">Scale</span><span class="tjv-text">Name action.</span></div></div></div><ol class="steps" data-preview-component="steps"><li><h3>1</h3><p>Keep the claim direct.</p></li><li><h3>2</h3><p>Keep evidence bounded.</p></li><li><h3>3</h3><p>Export after QA.</p></li></ol></div><div class="page-number">08</div></div></div>
174
- </section>
175
-
176
- <script>
177
- class SlidePresentation {
178
- constructor() { this.slides = document.querySelectorAll(".slide"); this.currentSlide = 0; this.setupScaling(); this.setupKeyboardNav(); }
179
- setupScaling() { const update = () => { const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080); document.querySelectorAll(".slide-canvas").forEach((canvas) => { canvas.style.transform = `scale(${scale})`; }); }; window.addEventListener("resize", update); update(); }
180
- setupKeyboardNav() { document.addEventListener("keydown", (event) => { if (["ArrowDown","ArrowRight"," ","PageDown"].includes(event.key)) { event.preventDefault(); this.goTo(this.currentSlide + 1); } else if (["ArrowUp","ArrowLeft","PageUp"].includes(event.key)) { event.preventDefault(); this.goTo(this.currentSlide - 1); } }); }
181
- goTo(index) { const clamped = Math.max(0, Math.min(this.slides.length - 1, index)); this.slides[clamped].scrollIntoView({ behavior: "smooth" }); this.currentSlide = clamped; }
182
- }
183
- new SlidePresentation();
184
- </script>
185
- </body>
186
- </html>