@cyber-dash-tech/revela 0.18.16 → 0.19.1

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 (98) hide show
  1. package/README.md +45 -31
  2. package/README.zh-CN.md +45 -31
  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 +317 -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/hooks/revela_post_write_notice.ts +4 -4
  90. package/plugins/revela/mcp/revela-server.ts +104 -6
  91. package/plugins/revela/skills/revela/SKILL.md +1 -1
  92. package/plugins/revela/skills/revela-design/SKILL.md +22 -16
  93. package/plugins/revela/skills/revela-helper/SKILL.md +1 -1
  94. package/plugins/revela/skills/revela-make-deck/SKILL.md +25 -16
  95. package/designs/lucent/preview.html +0 -529
  96. package/designs/monet/preview.html +0 -190
  97. package/designs/starter/preview.html +0 -335
  98. package/designs/summit/preview.html +0 -186
package/designs/monet/preview.html DELETED
@@ -1,190 +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>Monet Design System - Contract Preview</title>
7
- <style>
8
- :root {
9
- --bg-frame: #0d1a24;
10
- --bg-page: #f0f4f7;
11
- --bg-page-alt: #e4ecf2;
12
- --text-primary: #0f1e2a;
13
- --text-secondary: #3a5068;
14
- --text-muted: #7a96aa;
15
- --line: rgba(15, 30, 42, 0.12);
16
- --line-strong: rgba(15, 30, 42, 0.24);
17
- --accent-earth: #2980AF;
18
- --accent-olive: #00A2B0;
19
- --accent-stone: #83A5BA;
20
- --accent-gold: #738DC2;
21
- --accent-danger: #E593B4;
22
- --accent-sage: #7CBDC3;
23
- --shadow-soft: rgba(0, 55, 102, 0.18);
24
- --font-display: "EB Garamond", Georgia, ui-serif, serif;
25
- --font-body: "EB Garamond", Georgia, ui-serif, serif;
26
- --grid-page-inset: 40px;
27
- --grid-content-width: 1480px;
28
- --grid-text-col: 480px;
29
- --grid-image-col: 880px;
30
- --grid-gutter: 40px;
31
- --grid-safe-x: 80px;
32
- --grid-safe-y: 72px;
33
- --space-1: 8px;
34
- --space-2: 16px;
35
- --space-3: 24px;
36
- --space-4: 32px;
37
- --space-5: 48px;
38
- --space-6: 72px;
39
- --font-size-meta: 13px;
40
- --font-size-body: 17px;
41
- --font-size-body-strong: 20px;
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: .16em; text-transform: uppercase; color: var(--text-muted); }
56
- h1, h2, h3 { font-family: var(--font-display); color: var(--text-primary); font-weight: 500; letter-spacing: 0; }
57
- h1 { font-size: 98px; line-height: 1.08; padding: 12px 0; }
58
- h2 { font-size: 42px; line-height: 1.18; padding: 4px 0; }
59
- h3 { font-size: 28px; line-height: 1.22; }
60
- p, li { font-size: 22px; line-height: 1.55; color: var(--text-secondary); }
61
- .eyebrow, .caption { font-size: 13px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
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(240,244,247,.62); }
65
- .brand-watermark { position: absolute; right: var(--grid-safe-x); top: var(--grid-safe-y); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
66
- .water-field { position: absolute; inset: 0; background:
67
- radial-gradient(circle at 22% 20%, rgba(124,189,195,.42), transparent 24%),
68
- radial-gradient(circle at 78% 18%, rgba(115,141,194,.38), transparent 25%),
69
- radial-gradient(circle at 54% 72%, rgba(41,128,175,.28), transparent 36%),
70
- linear-gradient(135deg, #dcecf1, #f4f7f8 44%, #b9d9df); }
71
- .water-field::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255,255,255,.14) 0 2px, transparent 2px 18px); opacity: .45; }
72
- .hero { position: relative; height: 100%; overflow: hidden; }
73
- .hero-content { position: relative; z-index: 1; height: 100%; padding: 88px; display: flex; flex-direction: column; justify-content: flex-end; max-width: 900px; }
74
- .hero h1 { max-width: 780px; }
75
- .hero p { max-width: 620px; margin-top: var(--space-3); }
76
- .toc-panel { height: 100%; display: grid; grid-template-columns: 430px 1fr; gap: var(--space-6); align-items: stretch; }
77
- .toc-title { border-right: 1px solid var(--line); padding-right: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; }
78
- .toc-list { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
79
- .toc-item { display: grid; grid-template-columns: 76px 1fr 64px; gap: var(--space-3); align-items: baseline; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
80
- .toc-item span { font-size: 32px; line-height: 1.2; color: var(--accent-earth); }
81
- .toc-item strong { font-size: 30px; font-weight: 500; }
82
- .toc-page-number { justify-self: end; color: var(--text-muted); font-size: 18px; }
83
- .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); }
84
- .layout-title h2 { max-width: 1180px; }
85
- .grid { height: calc(100% - 184px); display: grid; gap: var(--grid-gutter); min-height: 0; }
86
- .narrative-grid { grid-template-columns: 5fr 7fr; }
87
- .narrative-grid--reverse { grid-template-columns: 7fr 5fr; }
88
- .highlight-cols-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
89
- .halves-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
90
- .stacked-grid { grid-template-rows: .44fr 1.56fr; }
91
- .box, .text-panel, .stat-card, .echart-panel, .table-panel, .quote, .steps, .roadmap { background: rgba(255,255,255,.44); padding: var(--space-4); min-height: 0; overflow: hidden; }
92
- .box { display: flex; flex-direction: column; gap: var(--space-3); }
93
- .box--mist { background: rgba(228,236,242,.72); }
94
- .text-panel { display: flex; flex-direction: column; justify-content: space-between; }
95
- .media { position: relative; min-height: 0; overflow: hidden; background: linear-gradient(135deg, rgba(41,128,175,.16), rgba(124,189,195,.34)); }
96
- .media::before { content: ""; position: absolute; inset: 38px 54px; background: radial-gradient(circle at 32% 34%, rgba(255,255,255,.68), transparent 28%), linear-gradient(130deg, rgba(41,128,175,.36), rgba(124,189,195,.24)); }
97
- .stat-value { font-size: 68px; line-height: 1.12; color: var(--accent-earth); font-weight: 500; }
98
- .chart-bars { flex: 1; display: flex; align-items: end; gap: 18px; padding-top: var(--space-4); min-height: 230px; }
99
- .chart-bars span { flex: 1; background: linear-gradient(180deg, var(--accent-olive), var(--accent-stone)); min-height: 64px; }
100
- table { width: 100%; border-collapse: collapse; font-size: 21px; line-height: 1.4; }
101
- 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); }
102
- td { padding: 15px 12px 15px 0; border-bottom: 1px solid var(--line); color: var(--text-secondary); }
103
- .quote { display: flex; align-items: center; justify-content: center; }
104
- .quote p { font-size: 38px; line-height: 1.28; font-style: italic; max-width: 980px; color: var(--text-primary); }
105
- .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
106
- .steps li { border-top: 2px solid var(--accent-earth); padding-top: var(--space-3); }
107
- .roadmap { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
108
- .roadmap-item { border-left: 2px solid var(--accent-olive); padding-left: var(--space-3); }
109
- .roadmap-vertical { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
110
- .tjh { --tjh-node: 14px; --tjh-stem-h: 38px; --tjh-col: 280px; position: relative; width: 100%; height: 100%; min-height: 420px; overflow: visible; }
111
- .tjh-axis { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line-strong); transform: translateY(-50%); }
112
- .tjh-item { position: absolute; display: flex; flex-direction: column; align-items: center; width: var(--tjh-col); transform: translateX(-50%); overflow: visible; }
113
- .tjh-item--up { bottom: 50%; }
114
- .tjh-item--down { top: 50%; }
115
- .tjh-axis-dot, .tjh-tip-dot { width: var(--tjh-node); height: var(--tjh-node); background: var(--tjh-item-color); flex-shrink: 0; transform: rotate(-8deg); }
116
- .tjh-item--up .tjh-axis-dot { margin-bottom: calc(-1 * var(--tjh-node) / 2); }
117
- .tjh-item--down .tjh-axis-dot { margin-top: calc(-1 * var(--tjh-node) / 2); }
118
- .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; }
119
- .tjh-label { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 0 8px; overflow: visible; }
120
- .tjh-item--up .tjh-label { margin-bottom: 8px; }
121
- .tjh-item--down .tjh-label { margin-top: 8px; }
122
- .tjh-date, .tjv-date { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tjh-item-color, var(--tjv-item-color)); }
123
- .tjh-title, .tjv-title { font-family: var(--font-display); font-size: 18px; color: var(--text-primary); line-height: 1.28; }
124
- .tjh-text, .tjv-text { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
125
- .tjv { --tjv-node: 14px; --tjv-stem-w: 36px; position: relative; width: 100%; height: 100%; min-height: 420px; overflow: visible; }
126
- .tjv-axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); transform: translateX(-50%); }
127
- .tjv-item { position: absolute; display: flex; align-items: center; min-width: 260px; min-height: 116px; transform: translateY(-50%); overflow: visible; }
128
- .tjv-item--left { right: calc(50% - var(--tjv-node) / 2); flex-direction: row-reverse; }
129
- .tjv-item--right { left: calc(50% - var(--tjv-node) / 2); flex-direction: row; }
130
- .tjv-axis-dot, .tjv-tip-dot { width: var(--tjv-node); height: var(--tjv-node); background: var(--tjv-item-color); flex-shrink: 0; transform: rotate(-8deg); }
131
- .tjv-item--left .tjv-axis-dot, .tjv-item--right .tjv-axis-dot { margin: 0; }
132
- .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; }
133
- .tjv-label { display: flex; flex-direction: column; gap: 5px; overflow: visible; }
134
- .tjv-item--left .tjv-label { text-align: right; align-items: flex-end; padding-right: 14px; max-width: 340px; }
135
- .tjv-item--right .tjv-label { text-align: left; align-items: flex-start; padding-left: 14px; max-width: 340px; }
136
- .timeline-preview { display: grid; grid-template-rows: 1fr 58px 1fr; gap: var(--space-3); height: 100%; }
137
- .timeline-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); align-items: end; }
138
- .timeline-row--bottom { align-items: start; }
139
- .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; }
140
- .timeline-row--top .timeline-node:nth-child(even), .timeline-row--bottom .timeline-node:nth-child(odd) { visibility: hidden; }
141
- .timeline-axis-preview { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); align-items: center; }
142
- .timeline-axis-preview::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
143
- .timeline-dot { position: relative; z-index: 1; width: 14px; height: 14px; background: var(--dot); justify-self: center; transform: rotate(-8deg); }
144
- .vertical-timeline-preview { display: block; position: relative; height: 100%; min-height: 420px; }
145
- </style>
146
- </head>
147
- <body>
148
- <section class="slide" slide-qa="false" data-slide-index="1" data-slide-role="cover" data-preview-layout="fullbleed" data-preview-component="hero">
149
- <div class="slide-canvas"><div class="hero"><div class="water-field"></div><div class="hero-content"><p class="eyebrow">Monet Design System</p><h1>Quiet evidence, composed like water.</h1><p>Contract preview for an editorial serif design: misty fields, narrow copy columns, and calm source-aware modules.</p></div><div class="page-number page-number--light" data-preview-component="page-number">01</div></div></div>
150
- </section>
151
-
152
- <section class="slide" slide-qa="false" data-slide-index="2" data-preview-layout="toc" data-preview-component="toc">
153
- <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>A catalogue rhythm for decision artifacts</h2></div><p>Rows stay quiet, page references stay aligned, and the title rail carries orientation.</p></div><ol class="toc-list"><li class="toc-item"><span>01</span><strong>Situation</strong><em class="toc-page-number">04</em></li><li class="toc-item"><span>02</span><strong>Evidence</strong><em class="toc-page-number">12</em></li><li class="toc-item"><span>03</span><strong>Decision</strong><em class="toc-page-number">20</em></li></ol></div><div class="page-number">02</div></div></div>
154
- </section>
155
-
156
- <section class="slide" slide-qa="true" data-slide-index="3" data-preview-layout="narrative">
157
- <div class="slide-canvas"><div class="page"><p class="preview-label">layout fixture / narrative</p><div class="brand-watermark" data-preview-component="brand-watermark">Monet</div><div class="layout-title"><div><p class="eyebrow">Narrative</p><h2>Text stays narrow while the visual field carries atmosphere.</h2></div></div><div class="grid narrative-grid"><div class="text-panel" data-preview-component="text-panel"><div><h3>One calm reading column</h3><p>Use this slot for claim, caveat, and audience takeaway. 中文正文与 English copy keep the same measured line rhythm.</p></div><p class="source-note">Source note: preview fixture only; source text stays inside the safe area.</p></div><div class="media" data-preview-component="media" aria-label="Abstract water garden media fixture"></div></div><div class="page-number">03</div></div></div>
158
- </section>
159
-
160
- <section class="slide" slide-qa="true" data-slide-index="4" data-preview-layout="narrative-reverse">
161
- <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 the argument remains editorial.</h2></div></div><div class="grid narrative-grid--reverse"><div class="media"></div><div class="box box--mist" data-preview-component="box"><h3>Evidence reading</h3><p>Place the interpretive note beside the visual. Keep it concise and source-bounded.</p><div class="stat-card" data-preview-component="stat-card"><p class="eyebrow">Signal</p><div class="stat-value">27%</div><p>Example metric tile with quiet emphasis.</p></div></div></div><div class="page-number">04</div></div></div>
162
- </section>
163
-
164
- <section class="slide" slide-qa="true" data-slide-index="5" data-preview-layout="highlight-cols">
165
- <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 equal columns test box rhythm and long-copy restraint.</h2></div></div><div class="grid highlight-cols-grid"><div class="box"><h3>Claim</h3><p>Each card holds one idea, not a pile of decoration.</p></div><div class="box"><h3>Evidence</h3><p>Source notes can sit inside the module when evidence is local to the card.</p><p class="source-note">Source: fixture.</p></div><div class="box"><h3>Caveat</h3><p>Unsupported scope remains visible instead of being polished away.</p></div></div><div class="page-number">05</div></div></div>
166
- </section>
167
-
168
- <section class="slide" slide-qa="true" data-slide-index="6" data-preview-layout="halves">
169
- <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 stable containers and quiet axes.</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:44%"></span><span style="height:68%"></span><span style="height:56%"></span><span style="height:82%"></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>Reach</td><td>42</td><td>58</td></tr><tr><td>Trust</td><td>64</td><td>71</td></tr><tr><td>Gap</td><td>High</td><td>Med</td></tr></tbody></table></div></div><div class="page-number">06</div></div></div>
170
- </section>
171
-
172
- <section class="slide" slide-qa="true" data-slide-index="7" data-preview-layout="stacked">
173
- <div class="slide-canvas"><div class="page"><p class="preview-label">layout fixture / stacked + timeline journey</p><div class="grid stacked-grid"><div class="quote" data-preview-component="quote"><p>"The slide should feel edited, sourced, and composed before it feels decorated."</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);">Mar 2019</span><span class="tjh-title">Launch</span><span class="tjh-text">Baseline mapping.</span></div><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date" style="--tjh-item-color:var(--accent-olive);">Jun 2021</span><span class="tjh-title">Reset</span><span class="tjh-text">Claims narrow.</span></div><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date" style="--tjh-item-color:var(--accent-stone);">2026</span><span class="tjh-title">Loop</span><span class="tjh-text">Evidence refresh.</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-sage);"></span><span class="timeline-dot" style="--dot:var(--accent-stone);"></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);">Nov 2019</span><span class="tjh-title">Audit</span><span class="tjh-text">Evidence sprint.</span></div><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date" style="--tjh-item-color:var(--accent-sage);">Feb 2024</span><span class="tjh-title">Gate</span><span class="tjh-text">Review caveats.</span></div><div class="timeline-node"></div></div></div></div><div class="page-number">07</div></div></div>
174
- </section>
175
-
176
- <section class="slide" slide-qa="false" data-slide-index="8" data-slide-role="closing" data-preview-component="roadmap-vertical">
177
- <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 journey timeline and next steps stay inside the safe area.</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">Research</span><span class="tjv-title">Source truth</span><span class="tjv-text">Preserve caveats.</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">Plan</span><span class="tjv-title">Argument flow</span><span class="tjv-text">Use the grid.</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">Make</span><span class="tjv-title">Render</span><span class="tjv-text">No outer boxes.</span></div></div><div class="tjv-item tjv-item--right" style="top:82%;--tjv-item-color:var(--accent-sage);"><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">Review</span><span class="tjv-title">QA pass</span><span class="tjv-text">Then export.</span></div></div></div><ol class="steps" data-preview-component="steps"><li><h3>1</h3><p>Keep evidence visible.</p></li><li><h3>2</h3><p>Use the layout grid.</p></li><li><h3>3</h3><p>Export only after QA.</p></li></ol></div><div class="page-number">08</div></div></div>
178
- </section>
179
-
180
- <script>
181
- class SlidePresentation {
182
- constructor() { this.slides = document.querySelectorAll(".slide"); this.currentSlide = 0; this.setupScaling(); this.setupKeyboardNav(); }
183
- 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(); }
184
- 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); } }); }
185
- goTo(index) { const clamped = Math.max(0, Math.min(this.slides.length - 1, index)); this.slides[clamped].scrollIntoView({ behavior: "smooth" }); this.currentSlide = clamped; }
186
- }
187
- new SlidePresentation();
188
- </script>
189
- </body>
190
- </html>
package/designs/starter/preview.html DELETED
@@ -1,335 +0,0 @@
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>Starter Design System — Preview</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
10
- <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
11
- <style>
12
- :root {
13
- --bg-frame: #111315;
14
- --bg-page: #f6f7f8;
15
- --bg-page-alt: #eceff2;
16
- --surface: #ffffff;
17
- --surface-strong: #dfe5eb;
18
- --text-primary: #17191c;
19
- --text-secondary: #4f5965;
20
- --text-muted: #7a8490;
21
- --line: rgba(23, 25, 28, 0.12);
22
- --line-strong: rgba(23, 25, 28, 0.26);
23
- --accent-primary: #3b82f6;
24
- --accent-secondary: #64748b;
25
- --accent-soft: #dbeafe;
26
- --accent-danger: #dc2626;
27
- --shadow-soft: rgba(15, 23, 42, 0.16);
28
- --font-display: 'Montserrat', ui-sans-serif, sans-serif;
29
- --font-body: 'Montserrat', ui-sans-serif, sans-serif;
30
- --font-size-body: 17px;
31
- --font-size-meta: 12px;
32
- }
33
-
34
- * { box-sizing: border-box; margin: 0; padding: 0; }
35
- html { scroll-snap-type: y mandatory; overflow-y: scroll; height: 100%; }
36
- body { background: var(--bg-frame); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; height: 100%; }
37
- .slide { min-height: 100dvh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-frame); }
38
- .slide-canvas { width: 1920px; height: 1080px; flex-shrink: 0; transform-origin: center center; position: relative; overflow: hidden; padding: 0; }
39
- .page { position: relative; width: 100%; height: 100%; background: var(--bg-page); color: var(--text-primary); padding: 56px 64px 64px; box-shadow: 0 24px 80px var(--shadow-soft); display: flex; flex-direction: column; overflow: hidden; }
40
- .page.alt { background: var(--bg-page-alt); }
41
- .eyebrow, .caption, .meta-label { font-size: var(--font-size-meta); line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
42
- h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.035em; color: var(--text-primary); }
43
- h1 { font-size: 92px; line-height: 1.08; }
44
- h2 { font-size: 46px; line-height: 1.04; }
45
- h3 { font-size: 26px; line-height: 1.14; }
46
- p, li { font-size: var(--font-size-body); line-height: 1.6; color: var(--text-secondary); }
47
- .rule { width: 100%; height: 1px; background: var(--line); }
48
- .rule.strong { background: var(--line-strong); }
49
- .media-frame { position: relative; overflow: hidden; background: var(--surface-strong); }
50
- .media-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
51
- .media-caption { margin-top: 12px; font-size: var(--font-size-meta); line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
52
- .editorial-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
53
- .editorial-list li { position: relative; padding-left: 20px; font-size: var(--font-size-body); line-height: 1.58; color: var(--text-secondary); }
54
- .editorial-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--accent-primary); }
55
- .editorial-list li.editorial-list__red { color: var(--accent-danger); }
56
- .editorial-list li.editorial-list__red::before { background: var(--accent-danger); }
57
- .editorial-list li.editorial-list__wide { width: 1200px; min-height: 36px; line-height: 36px; }
58
- .editorial-list li.editorial-list__green { color: #16a34a; }
59
- .editorial-list li.editorial-list__green::before { background: #16a34a; }
60
- .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
61
- .reveal.visible { opacity: 1; transform: translateY(0); }
62
-
63
- .narrative-grid { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; overflow: hidden; align-items: stretch; }
64
- .narrative-grid--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }
65
- .narrative-grid > * { overflow: hidden; min-height: 0; min-width: 0; }
66
- .highlight-cols-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 32px; overflow: hidden; align-items: stretch; }
67
- .highlight-cols-grid > * { overflow: hidden; min-height: 0; }
68
- .halves-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; overflow: hidden; align-items: stretch; }
69
- .halves-grid > * { overflow: hidden; min-height: 0; min-width: 0; }
70
- .stacked-grid { display: grid; grid-template-rows: minmax(0, .52fr) minmax(0, 1.72fr); height: 100%; width: 100%; overflow: hidden; }
71
- .stacked-top, .stacked-bottom { overflow: hidden; min-height: 0; }
72
-
73
- .text-panel { height: 100%; padding: 56px 48px 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
74
- .text-panel--light { background: var(--bg-page-alt); color: var(--text-primary); }
75
- .text-panel--dark { background: #1f242b; color: #f8fafc; --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --line: rgba(248,250,252,0.16); }
76
- .text-panel-body { display: flex; flex-direction: column; gap: 14px; }
77
- .text-panel-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
78
- .stat-card { height: 100%; display: flex; min-height: 0; flex-direction: column; justify-content: flex-start; gap: 16px; padding-top: 8px; }
79
- .stat-card--horizontal { flex-direction: row; align-items: flex-start; gap: 30px; }
80
- .stat-card-value { font-family: var(--font-display); font-size: 76px; line-height: 1.08; letter-spacing: -0.04em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-primary); }
81
- .editorial-image-top { display: flex; flex-direction: column; gap: 16px; height: 100%; }
82
- .editorial-image-top .editorial-media { height: 240px; border: 1px solid var(--line); }
83
- .editorial-module-body { display: flex; flex-direction: column; gap: 12px; }
84
- .editorial-text-top { display: flex; flex-direction: column; gap: 16px; height: 100%; }
85
- .editorial-text-top .editorial-media { flex: 1; min-height: 180px; border: 1px solid var(--line); }
86
- .editorial-text-left { display: flex; flex-direction: column; gap: 0; height: 100%; overflow: hidden; border: 1px solid var(--line); }
87
- .editorial-text-left-header { flex-shrink: 0; padding: 24px 26px 16px; border-bottom: 1px solid var(--line); }
88
- .editorial-text-left-content { display: flex; flex: 1; min-height: 0; }
89
- .editorial-text-left-copy { flex: 1.1; min-width: 0; padding: 20px 24px; display: flex; flex-direction: column; justify-content: flex-start; }
90
- .editorial-text-left-visual { flex: 1; min-width: 0; min-height: 0; align-self: stretch; overflow: hidden; position: relative; background: var(--surface-strong); }
91
-
92
- .echart-panel { display: flex; flex-direction: column; height: 100%; gap: 0; }
93
- .echart-panel-header { flex-shrink: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
94
- .chart-subtitle { margin-top: 4px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
95
- .echart-container { flex: 1; min-height: 0; }
96
- .chart-caption { flex-shrink: 0; margin-top: 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
97
- .flow-number { position: relative; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--line-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; }
98
- .flow-number::after { content: attr(data-n); font-size: 12px; font-weight: 800; color: var(--accent-primary); }
99
- .flow-body h4 { font-size: 20px; font-weight: 700; line-height: 1.14; }
100
- .flow-body p { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
101
- .flow-horizontal { position: relative; display: flex; align-items: flex-start; width: 100%; }
102
- .flow-horizontal::before { content: ''; position: absolute; top: 17px; left: 0; right: 0; height: 1px; background: var(--line-strong); z-index: 0; }
103
- .flow-horizontal .flow-item { flex: 1; display: flex; flex-direction: column; gap: 18px; padding-right: 40px; }
104
- .flow-horizontal .flow-number { position: relative; z-index: 1; }
105
- .flow-vertical { display: flex; flex-direction: column; width: 100%; }
106
- .flow-vertical .flow-item { display: flex; gap: 28px; align-items: flex-start; }
107
- .flow-vertical .flow-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
108
- .flow-vertical .flow-line { width: 1px; flex: 1; min-height: 28px; background: var(--line-strong); margin: 6px 0; }
109
- .flow-vertical .flow-body { padding-bottom: 32px; }
110
- .flow-vertical .flow-item.last .flow-body { padding-bottom: 0; }
111
-
112
- .data-table-wrap { width: 100%; }
113
- .data-table-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
114
- .data-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 17px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
115
- .data-table thead tr { border-bottom: 1.5px solid var(--line-strong); }
116
- .data-table th { padding: 0 12px 10px 0; text-align: left; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
117
- .data-table th:not(:first-child), .data-table td:not(:first-child) { text-align: right; }
118
- .data-table tbody tr { border-bottom: 1px solid var(--line); }
119
- .data-table td { padding: 9px 12px 9px 0; line-height: 1.4; color: var(--text-secondary); }
120
- .data-table .delta.positive { color: var(--accent-primary); }
121
- .data-table .delta.negative { color: var(--accent-danger); }
122
- .table-caption { margin-top: 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
123
-
124
- .image-title { position: relative; width: 100%; height: 100%; overflow: hidden; color: #f8fafc; background: #1f242b; }
125
- .image-title-media { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #1f2937, #475569); }
126
- .image-title-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,23,42,0.78), rgba(15,23,42,0.18)); }
127
- .image-title-fg { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 72px 84px; }
128
- .image-title--left .image-title-body { max-width: 820px; }
129
- .image-title h1 { color: #f8fafc; font-size: 82px; line-height: 1.18; letter-spacing: -0.03em; padding: 4px 0 10px; }
130
- .image-title-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(248,250,252,0.62); margin-bottom: 20px; }
131
- .image-title-subtitle { margin-top: 24px; font-size: 18px; line-height: 1.56; color: rgba(248,250,252,0.78); max-width: 520px; }
132
- .toc-panel { height: 100%; padding: 86px 118px 58px; display: flex; overflow: hidden; background: var(--bg-page); }
133
- .toc-panel-inner { width: 100%; display: grid; grid-template-columns: 37% 1fr; align-items: stretch; gap: 76px; }
134
- .toc-header { display: flex; flex-direction: column; min-height: 100%; }
135
- .toc-header h2 { margin-top: 32px; max-width: 360px; font-size: 46px; line-height: 1.04; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 650; }
136
- .toc-note { margin-top: 230px; margin-bottom: 0; max-width: 300px; font-size: 14px; line-height: 1.7; letter-spacing: 0.02em; color: var(--text-muted); }
137
- .toc-footer { margin-top: auto; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 750; color: var(--text-primary); }
138
- .toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 42px; height: 100%; }
139
- .toc-item { display: grid; grid-template-columns: 80px 1fr; gap: 44px; align-items: center; min-height: 54px; overflow: visible; }
140
- .toc-item span { font-style: normal; font-family: var(--font-display); font-size: 42px; line-height: 1; letter-spacing: 0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
141
- .toc-item strong { font-size: 16px; line-height: 1.55; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 500; color: var(--text-primary); }
142
- .quote-block { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 24px; max-width: 980px; }
143
- .quote-mark { font-size: 96px; line-height: 0.7; color: var(--accent-primary); }
144
- .quote-block blockquote { font-family: var(--font-display); font-size: 54px; line-height: 1.06; letter-spacing: -0.04em; color: var(--text-primary); }
145
- .quote-source { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
146
- .brand-watermark { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
147
- .brand-watermark span { width: 18px; height: 18px; border: 2px solid var(--accent-primary); display: block; }
148
- .brand-watermark strong { font-weight: 800; color: var(--text-secondary); }
149
- .page-number { position: absolute; right: 34px; bottom: 26px; z-index: 10; font-size: 12px; letter-spacing: 0.14em; color: var(--text-muted); }
150
- .page-number--light { color: rgba(248,250,252,0.72); }
151
- .timeline-journey-horizontal { --tjh-node: 12px; --tjh-stem-h: 34px; --tjh-col: 210px; position: relative; width: 100%; height: 245px; overflow: visible; }
152
- .tjh-axis { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line-strong); transform: translateY(-50%); }
153
- .tjh-item { position: absolute; display: flex; flex-direction: column; align-items: center; width: var(--tjh-col); transform: translateX(-50%); overflow: visible; }
154
- .tjh-item--up { bottom: 50%; }
155
- .tjh-item--down { top: 50%; }
156
- .tjh-axis-dot, .tjh-tip-dot { width: var(--tjh-node); height: var(--tjh-node); border-radius: 999px; background: var(--tjh-item-color, var(--accent-primary)); flex-shrink: 0; }
157
- .tjh-item--up .tjh-axis-dot { margin-bottom: calc(-1 * var(--tjh-node) / 2); }
158
- .tjh-item--down .tjh-axis-dot { margin-top: calc(-1 * var(--tjh-node) / 2); }
159
- .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; }
160
- .tjh-label { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 0 6px; }
161
- .tjh-item--up .tjh-label { margin-bottom: 8px; }
162
- .tjh-item--down .tjh-label { margin-top: 8px; }
163
- .tjh-date { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tjh-item-color, var(--accent-primary)); line-height: 1.3; white-space: nowrap; }
164
- .tjh-title { font-size: 15px; font-weight: 700; line-height: 1.28; color: var(--text-primary); }
165
- .tjh-text { font-size: 12px; line-height: 1.35; color: var(--text-secondary); }
166
- .timeline-journey-vertical { --tjv-node: 12px; --tjv-stem-w: 28px; position: relative; width: 100%; height: 100%; min-height: 260px; overflow: visible; }
167
- .tjv-axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); transform: translateX(-50%); }
168
- .tjv-item { position: absolute; display: flex; align-items: center; min-width: 220px; min-height: 92px; transform: translateY(-50%); overflow: visible; }
169
- .tjv-item--left { right: calc(50% - var(--tjv-node) / 2); flex-direction: row-reverse; }
170
- .tjv-item--right { left: calc(50% - var(--tjv-node) / 2); flex-direction: row; }
171
- .tjv-axis-dot { width: var(--tjv-node); height: var(--tjv-node); border-radius: 999px; background: var(--tjv-item-color, var(--accent-primary)); flex-shrink: 0; position: relative; z-index: 1; }
172
- .tjv-item--left .tjv-axis-dot, .tjv-item--right .tjv-axis-dot { margin: 0; }
173
- .tjv-tip-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tjv-item-color, var(--accent-primary)); flex-shrink: 0; }
174
- .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; }
175
- .tjv-label { display: flex; flex-direction: column; gap: 3px; }
176
- .tjv-item--left .tjv-label { text-align: right; align-items: flex-end; padding-right: 10px; max-width: 180px; }
177
- .tjv-item--right .tjv-label { text-align: left; align-items: flex-start; padding-left: 10px; max-width: 180px; }
178
- .tjv-date { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tjv-item-color, var(--accent-primary)); line-height: 1.3; white-space: nowrap; }
179
- .tjv-title { font-size: 15px; font-weight: 700; line-height: 1.28; color: var(--text-primary); }
180
- .tjv-text { font-size: 12px; line-height: 1.35; color: var(--text-secondary); max-width: 190px; }
181
- .svg-motif { position: relative; pointer-events: none; color: var(--text-primary); }
182
- .svg-motif svg { display: block; width: 100%; height: 100%; overflow: visible; }
183
- .svg-motif--bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; }
184
- .svg-motif--side { position: absolute; right: 0; top: 0; bottom: 0; width: 34%; }
185
- .svg-motif--corner { position: absolute; right: 40px; bottom: 36px; width: 360px; height: 220px; }
186
- .svg-motif--hero { width: 100%; height: 100%; }
187
- .timeline-preview { display: grid; grid-template-rows: 1fr 46px 1fr; gap: 14px; height: 100%; }
188
- .timeline-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: end; }
189
- .timeline-row--bottom { align-items: start; }
190
- .timeline-node { display: flex; flex-direction: column; align-items: center; justify-self: center; gap: 4px; width: min(220px, 100%); min-width: 0; text-align: center; }
191
- .timeline-row--top .timeline-node:nth-child(even), .timeline-row--bottom .timeline-node:nth-child(odd) { visibility: hidden; }
192
- .timeline-axis-preview { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: center; }
193
- .timeline-axis-preview::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
194
- .timeline-dot { position: relative; z-index: 1; width: 12px; height: 12px; background: var(--dot); justify-self: center; border-radius: 999px; }
195
- .vertical-timeline-preview { display: block; position: relative; height: 100%; min-height: 260px; }
196
- </style>
197
- </head>
198
- <body>
199
- <section class="slide" slide-qa="false" data-index="0" data-slide-role="cover" data-preview-layout="fullbleed" data-preview-component="hero">
200
- <div class="slide-canvas">
201
- <div class="page" style="padding:0;">
202
- <div class="image-title image-title--left">
203
- <div class="image-title-media"></div>
204
- <div class="image-title-overlay"></div>
205
- <div class="svg-motif svg-motif--bottom" aria-hidden="true">
206
- <svg viewBox="0 0 1600 420"><rect x="0" y="354" width="1600" height="26" fill="#dbeafe"/><circle cx="1240" cy="230" r="96" fill="#3b82f6" opacity=".18"/><path d="M118 344 C150 250 265 224 342 290 C400 340 315 378 176 374 Z" fill="#3b82f6"/><path d="M392 368 C430 250 590 228 668 314 C714 364 606 394 462 390 Z" fill="#64748b" opacity=".85"/><path d="M692 360 C730 285 835 282 888 336 C920 370 832 392 716 386 Z" fill="#dbeafe"/><path d="M1160 278 l28 -28 l28 28 l-28 28 Z" fill="none" stroke="#f8fafc" stroke-width="8"/><path d="M1320 198 C1370 160 1412 168 1448 220" fill="none" stroke="#f8fafc" stroke-width="10" stroke-linecap="round"/><circle cx="232" cy="318" r="7" fill="#17191c"/><circle cx="284" cy="318" r="7" fill="#17191c"/><path d="M238 340 C252 354 272 354 286 340" fill="none" stroke="#17191c" stroke-width="7" stroke-linecap="round"/></svg>
207
- </div>
208
- <div class="image-title-fg">
209
- <div class="brand-watermark" data-preview-component="brand-watermark"><span></span><strong>Starter</strong></div>
210
- <div class="image-title-body reveal"><p class="image-title-eyebrow">Neutral base design</p><h1>Design Preview</h1><p class="image-title-subtitle">A structural scaffold for AI-authored Revela themes. Preserve the system; replace the visual identity.</p></div>
211
- </div>
212
- <div class="page-number page-number--light" data-preview-component="page-number">01</div>
213
- </div>
214
- </div>
215
- </div>
216
- </section>
217
-
218
- <section class="slide" slide-qa="false" data-index="1" data-preview-layout="toc" data-preview-component="toc">
219
- <div class="slide-canvas">
220
- <div class="page" style="padding:0;">
221
- <div class="toc-panel">
222
- <div class="toc-panel-inner">
223
- <div class="toc-header reveal">
224
- <h2>Table of<br>Contents</h2>
225
- <p class="toc-note">Starter preview demonstrates the core structure available to derived themes.</p>
226
- <p class="toc-footer">Structure-First-Design</p>
227
- </div>
228
- <ol class="toc-list reveal">
229
- <li class="toc-item"><span>01</span><strong>Foundation and visual schema</strong></li>
230
- <li class="toc-item"><span>02</span><strong>Layouts and content modules</strong></li>
231
- <li class="toc-item"><span>03</span><strong>Data flow and evidence</strong></li>
232
- <li class="toc-item"><span>04</span><strong>Motifs and closing states</strong></li>
233
- </ol>
234
- </div>
235
- <div class="page-number">02</div>
236
- </div>
237
- </div>
238
- </div>
239
- </section>
240
-
241
- <section class="slide" slide-qa="false" data-index="2" data-preview-layout="narrative">
242
- <div class="slide-canvas">
243
- <div class="page" style="padding:0;">
244
- <div class="narrative-grid">
245
- <div class="text-panel text-panel--light reveal" data-preview-component="text-panel">
246
- <div class="text-panel-body"><p class="eyebrow">Visual schema first</p><h2>Preserve composition before changing style</h2><ul class="editorial-list"><li class="editorial-list__red"><strong>Reference type.</strong> Identify whether the source is vector, photo, UI, page, or motif.</li><li class="editorial-list__wide"><strong>Scale and anchor.</strong> Keep a bottom strip low, a corner motif small, and a hero visual dominant only when requested.</li><li class="editorial-list__green"><strong>Implementation path.</strong> Use SVG for flat motifs; use image/surface rules for photo and UI references.</li></ul></div>
247
- <div class="text-panel-footer"><span class="caption">Authoring constraint</span><span class="caption">03</span></div>
248
- </div>
249
- <div class="text-panel text-panel--dark reveal">
250
- <div class="text-panel-body"><p class="eyebrow">CSS scope</p><h3>Stable containers, replaceable skins</h3><p>Derived designs should modify tokens, type, component surfaces, and motif components before rewriting layout CSS.</p></div>
251
- <div class="stat-card" data-preview-component="stat-card"><div class="stat-card-value">67</div><p>Baseline layouts remain available as neutral structure.</p></div>
252
- </div>
253
- </div>
254
- </div>
255
- </div>
256
- </section>
257
-
258
- <section class="slide" slide-qa="false" data-index="3" data-preview-layout="highlight-cols">
259
- <div class="slide-canvas">
260
- <div class="page">
261
- <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:620px;" class="reveal"><p class="eyebrow">Component coverage</p><h2>Reusable modules</h2></div>
262
- <div class="highlight-cols-grid" style="flex:1;min-height:0;">
263
- <div class="editorial-image-top reveal" data-preview-component="media"><div class="media-frame editorial-media"><div class="svg-motif svg-motif--hero"><svg viewBox="0 0 600 320"><rect width="600" height="320" fill="#dfe5eb"/><circle cx="140" cy="150" r="72" fill="#3b82f6" opacity=".76"/><rect x="250" y="86" width="210" height="132" rx="24" fill="#fff"/><path d="M286 132 H426 M286 166 H390" stroke="#64748b" stroke-width="12" stroke-linecap="round"/></svg></div></div><div class="editorial-module-body"><p class="eyebrow">Media module</p><h3>Image or motif above copy</h3><p>Use for examples, evidence, screenshots, and vector moments.</p></div></div>
264
- <div class="editorial-text-top reveal" data-preview-component="box"><div class="editorial-module-body"><p class="eyebrow">Text module</p><h3>Copy-led primitive</h3><p>Neutral spacing and type hierarchy provide a stable baseline for derived themes.</p></div><div class="media-frame editorial-media"></div></div>
265
- <div class="stat-card reveal"><p class="eyebrow">Metric</p><div class="stat-card-value">16</div><h3>Components</h3><p>Starter includes broad enough coverage for most generated decks, including SVG motifs.</p></div>
266
- </div>
267
- <div class="page-number">04</div>
268
- </div>
269
- </div>
270
- </section>
271
-
272
- <section class="slide" slide-qa="false" data-index="4" data-preview-layout="stacked">
273
- <div class="slide-canvas">
274
- <div class="page" style="padding:0;">
275
- <div class="stacked-grid">
276
- <div class="stacked-top text-panel reveal" style="padding:42px 56px 20px;"><div class="text-panel-body"><p class="eyebrow">Data and process</p><h2>Evidence components stay structural</h2><p>Charts, tables, and journey timelines inherit the active theme while keeping predictable geometry.</p></div></div>
277
- <div class="stacked-bottom" style="display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 250px;gap:26px;padding:0 56px 56px;overflow:visible;" data-preview-layout="halves">
278
- <div class="echart-panel reveal" data-preview-component="echart-panel"><div class="echart-panel-header"><p class="eyebrow">Example chart</p><h3>Signal distribution</h3><p class="chart-subtitle">Neutral chart defaults with restrained labels.</p></div><div class="echart-container" id="starter-chart"></div><p class="chart-caption">Source: demo data</p></div>
279
- <div class="roadmap-vertical timeline-journey-vertical vertical-timeline-preview reveal" data-preview-component="roadmap-vertical">
280
- <div class="tjv-axis"></div>
281
- <div class="tjv-item tjv-item--left" style="top:18%;--tjv-item-color:var(--accent-primary);"><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">Discover</span><span class="tjv-title">Scan</span><span class="tjv-text">Map inputs.</span></div></div>
282
- <div class="tjv-item tjv-item--right" style="top:50%;--tjv-item-color:var(--accent-secondary);"><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">Build</span><span class="tjv-title">Draft</span><span class="tjv-text">Apply schema.</span></div></div>
283
- <div class="tjv-item tjv-item--left" style="top:82%;--tjv-item-color:var(--accent-danger);"><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">Preview</span><span class="tjv-text">Check geometry.</span></div></div>
284
- </div>
285
- <div class="roadmap-horizontal timeline-preview reveal" data-preview-component="roadmap-horizontal" style="grid-column:1 / -1;">
286
- <div class="timeline-row timeline-row--top"><div class="timeline-node"><span class="tjh-date">01</span><span class="tjh-title">Brief</span><span class="tjh-text">Clarify style.</span></div><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date">03</span><span class="tjh-title">Modules</span><span class="tjh-text">Skin blocks.</span></div><div class="timeline-node"></div></div>
287
- <div class="timeline-axis-preview"><span class="timeline-dot" style="--dot:var(--accent-primary);"></span><span class="timeline-dot" style="--dot:var(--accent-secondary);"></span><span class="timeline-dot" style="--dot:var(--accent-danger);"></span><span class="timeline-dot" style="--dot:var(--text-muted);"></span></div>
288
- <div class="timeline-row timeline-row--bottom"><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date">02</span><span class="tjh-title">Tokens</span><span class="tjh-text">Set type.</span></div><div class="timeline-node"></div><div class="timeline-node"><span class="tjh-date">04</span><span class="tjh-title">Validate</span><span class="tjh-text">Inspect.</span></div></div>
289
- </div>
290
- </div>
291
- </div>
292
- <div class="page-number">05</div>
293
- </div>
294
- </div>
295
- </section>
296
-
297
- <section class="slide" slide-qa="false" data-index="5" data-slide-role="closing" data-preview-layout="narrative-reverse">
298
- <div class="slide-canvas">
299
- <div class="page">
300
- <div class="svg-motif svg-motif--corner" aria-hidden="true"><svg viewBox="0 0 600 360"><rect x="80" y="190" width="360" height="34" fill="#dbeafe"/><circle cx="190" cy="150" r="82" fill="#3b82f6" opacity=".82"/><path d="M286 230 C330 120 474 122 516 226 C458 274 348 276 286 230 Z" fill="#64748b" opacity=".68"/><path d="M112 70 l22 -22 l22 22 l-22 22 Z" fill="none" stroke="#17191c" stroke-width="8"/><path d="M470 72 C508 38 548 46 566 88" fill="none" stroke="#17191c" stroke-width="9" stroke-linecap="round"/></svg></div>
301
- <div style="height:100%;display:flex;flex-direction:column;justify-content:space-between;max-width:1040px;" class="reveal">
302
- <div class="brand-watermark"><span></span><strong>Starter</strong></div>
303
- <div class="quote-block" data-preview-component="quote"><p class="quote-mark">“</p><blockquote>A starter design should be boring enough to replace, but complete enough to trust.</blockquote><p class="quote-source">Neutral base principle</p></div>
304
- <div style="display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:900px;">
305
- <ol class="steps--horizontal" data-preview-component="steps" style="list-style:none;">
306
- <li class="step-item"><span class="step-number" data-n="1"></span><div class="step-body"><h4>Read</h4><p>Inspect the design.</p></div></li>
307
- <li class="step-item"><span class="step-number" data-n="2"></span><div class="step-body"><h4>Render</h4><p>Apply the theme.</p></div></li>
308
- </ol>
309
- <table data-preview-component="data-table" style="width:100%;border-collapse:collapse;font-size:16px;">
310
- <thead><tr><th style="text-align:left;">Check</th><th style="text-align:left;">State</th></tr></thead>
311
- <tbody><tr><td>Canvas</td><td>Fixed</td></tr><tr><td>Preview</td><td>Complete</td></tr></tbody>
312
- </table>
313
- </div>
314
- <p class="caption">Activate derived designs after preview inspection.</p>
315
- </div>
316
- <div class="page-number">06</div>
317
- </div>
318
- </div>
319
- </section>
320
-
321
- <script>
322
- class SlidePresentation {
323
- constructor() { this.slides = document.querySelectorAll('.slide'); this.currentSlide = 0; this.setupScaling(); this.setupIntersectionObserver(); this.setupKeyboardNav(); this.setupTouchNav(); this.setupMouseWheel(); this.setupChart(); }
324
- setupScaling() { const canvases = document.querySelectorAll('.slide-canvas'); const update = () => { const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080); canvases.forEach((canvas) => { canvas.style.transform = `scale(${scale})`; }); }; window.addEventListener('resize', update); update(); }
325
- setupIntersectionObserver() { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) entry.target.querySelectorAll('.reveal').forEach((el) => el.classList.add('visible')); }); }, { threshold: 0.2 }); this.slides.forEach((slide) => observer.observe(slide)); }
326
- 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); } }); }
327
- setupTouchNav() { let startY = 0; document.addEventListener('touchstart', (event) => { startY = event.touches[0].clientY; }, { passive: true }); document.addEventListener('touchend', (event) => { const deltaY = startY - event.changedTouches[0].clientY; if (Math.abs(deltaY) > 40) this.goTo(this.currentSlide + (deltaY > 0 ? 1 : -1)); }, { passive: true }); }
328
- setupMouseWheel() { let last = 0; document.addEventListener('wheel', (event) => { const now = Date.now(); if (now - last < 800) return; last = now; this.goTo(this.currentSlide + (event.deltaY > 0 ? 1 : -1)); }, { passive: true }); }
329
- setupChart() { const el = document.getElementById('starter-chart'); if (!el || !window.echarts) return; const chart = echarts.init(el); chart.setOption({ grid: { left: 30, right: 16, top: 20, bottom: 32 }, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'], axisLine: { lineStyle: { color: 'rgba(23,25,28,.26)' } }, axisTick: { show: false } }, yAxis: { type: 'value', splitLine: { lineStyle: { color: 'rgba(23,25,28,.12)' } } }, series: [{ type: 'bar', data: [42, 68, 51, 76], itemStyle: { color: '#3b82f6' }, barWidth: 34 }] }); window.addEventListener('resize', () => chart.resize()); }
330
- goTo(index) { const clamped = Math.max(0, Math.min(this.slides.length - 1, index)); this.slides[clamped].scrollIntoView({ behavior: 'smooth' }); this.currentSlide = clamped; }
331
- }
332
- new SlidePresentation();
333
- </script>
334
- </body>
335
- </html>