leva 0.1.10 → 0.2.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.
- checksums.yaml +4 -4
- data/README.md +1 -2
- data/app/assets/stylesheets/leva/application.css +3083 -15
- data/app/controllers/leva/design_system_controller.rb +9 -0
- data/app/views/layouts/leva/application.html.erb +23 -24
- data/app/views/leva/dataset_records/index.html.erb +63 -61
- data/app/views/leva/dataset_records/show.html.erb +115 -25
- data/app/views/leva/datasets/_dataset.html.erb +11 -18
- data/app/views/leva/datasets/_form.html.erb +18 -14
- data/app/views/leva/datasets/edit.html.erb +16 -4
- data/app/views/leva/datasets/index.html.erb +33 -41
- data/app/views/leva/datasets/new.html.erb +15 -4
- data/app/views/leva/datasets/show.html.erb +120 -139
- data/app/views/leva/design_system/index.html.erb +1731 -0
- data/app/views/leva/experiments/_experiment.html.erb +46 -31
- data/app/views/leva/experiments/_form.html.erb +62 -35
- data/app/views/leva/experiments/edit.html.erb +17 -3
- data/app/views/leva/experiments/index.html.erb +41 -36
- data/app/views/leva/experiments/new.html.erb +40 -19
- data/app/views/leva/experiments/show.html.erb +155 -98
- data/app/views/leva/runner_results/show.html.erb +271 -54
- data/app/views/leva/workbench/_evaluation_area.html.erb +18 -4
- data/app/views/leva/workbench/_prompt_content.html.erb +116 -111
- data/app/views/leva/workbench/_prompt_form.html.erb +24 -23
- data/app/views/leva/workbench/_prompt_sidebar.html.erb +57 -12
- data/app/views/leva/workbench/_results_section.html.erb +274 -112
- data/app/views/leva/workbench/_top_bar.html.erb +16 -6
- data/app/views/leva/workbench/edit.html.erb +46 -15
- data/app/views/leva/workbench/index.html.erb +5 -8
- data/app/views/leva/workbench/new.html.erb +74 -42
- data/config/routes.rb +2 -0
- data/lib/leva/engine.rb +10 -0
- data/lib/leva/version.rb +1 -1
- metadata +4 -2
|
@@ -0,0 +1,1731 @@
|
|
|
1
|
+
<% content_for :title, "Design System" %>
|
|
2
|
+
|
|
3
|
+
<div class="design-system">
|
|
4
|
+
<header class="ds-header">
|
|
5
|
+
<h1>Leva Design System</h1>
|
|
6
|
+
<p class="ds-intro">A warm, refined design system with careful attention to spacing, contrast, and typography.</p>
|
|
7
|
+
</header>
|
|
8
|
+
|
|
9
|
+
<!-- Design Principles -->
|
|
10
|
+
<section class="ds-section">
|
|
11
|
+
<h2 class="ds-section-title">Design Principles</h2>
|
|
12
|
+
|
|
13
|
+
<div class="ds-principles">
|
|
14
|
+
<div class="ds-principle">
|
|
15
|
+
<h3>1. Accent Color Restraint</h3>
|
|
16
|
+
<p>Reserve the accent color (orange/amber) for <strong>primary actions only</strong>. Use gray for labels, titles, and secondary elements. This creates clear visual hierarchy and makes CTAs stand out.</p>
|
|
17
|
+
<div class="ds-principle-example">
|
|
18
|
+
<span class="ds-do">Do: </span>
|
|
19
|
+
<button class="btn btn-primary btn-sm">Run</button>
|
|
20
|
+
<button class="btn btn-secondary btn-sm">Cancel</button>
|
|
21
|
+
<button class="btn btn-ghost btn-sm">Options</button>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="ds-principle-example">
|
|
24
|
+
<span class="ds-dont">Don't: </span>
|
|
25
|
+
<span style="color: var(--accent-400); text-transform: uppercase; font-size: 12px; font-weight: 600;">SECTION TITLE</span>
|
|
26
|
+
<span style="margin-left: 8px; color: var(--gray-400); text-transform: uppercase; font-size: 12px; font-weight: 600;">SECTION TITLE</span>
|
|
27
|
+
<span class="text-xs text-muted" style="margin-left: 8px;">(use gray instead)</span>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<div class="ds-principle">
|
|
32
|
+
<h3>2. Tight, Purposeful Spacing</h3>
|
|
33
|
+
<p>Use smaller spacing values (space-1 to space-3) for related elements. Reserve larger spacing for section breaks. Dense UIs feel more professional.</p>
|
|
34
|
+
<div class="ds-spacing-comparison">
|
|
35
|
+
<div class="ds-spacing-demo ds-spacing-tight">
|
|
36
|
+
<span class="ds-do">Tight (8px)</span>
|
|
37
|
+
<div class="output-block" style="margin-bottom: 4px;">
|
|
38
|
+
<span class="output-label">Label</span>
|
|
39
|
+
<span class="output-value">Value</span>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="output-block">
|
|
42
|
+
<span class="output-label">Label</span>
|
|
43
|
+
<span class="output-value">Value</span>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="ds-spacing-demo ds-spacing-loose">
|
|
47
|
+
<span class="ds-dont">Loose (24px)</span>
|
|
48
|
+
<div class="output-block" style="margin-bottom: 24px;">
|
|
49
|
+
<span class="output-label">Label</span>
|
|
50
|
+
<span class="output-value">Value</span>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="output-block">
|
|
53
|
+
<span class="output-label">Label</span>
|
|
54
|
+
<span class="output-value">Value</span>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div class="ds-principle">
|
|
61
|
+
<h3>3. Visual Differentiation for Comparisons</h3>
|
|
62
|
+
<p>When showing expected vs actual values, use subtle visual cues (borders, background tints) to differentiate without being heavy-handed.</p>
|
|
63
|
+
<div class="ds-principle-example" style="max-width: 300px;">
|
|
64
|
+
<div class="output-block output-block--expected" style="margin-bottom: 4px;">
|
|
65
|
+
<span class="output-label">Expected</span>
|
|
66
|
+
<span class="output-value">Positive</span>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="output-block output-block--got">
|
|
69
|
+
<span class="output-label">Got</span>
|
|
70
|
+
<span class="output-value">Positive</span>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div class="ds-principle">
|
|
76
|
+
<h3>4. Inline Labels for Compact Data</h3>
|
|
77
|
+
<p>For key-value pairs, use inline layout with fixed-width labels. This is more scannable than stacked layouts.</p>
|
|
78
|
+
<div class="ds-principle-example" style="max-width: 300px;">
|
|
79
|
+
<div class="output-grid">
|
|
80
|
+
<div class="output-block">
|
|
81
|
+
<span class="output-label">Status</span>
|
|
82
|
+
<span class="output-value">Complete</span>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="output-block">
|
|
85
|
+
<span class="output-label">Score</span>
|
|
86
|
+
<span class="output-value">0.95</span>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div class="ds-principle">
|
|
93
|
+
<h3>5. Clickable Cards for Actions</h3>
|
|
94
|
+
<p>When items are actionable, make the entire card clickable rather than adding small buttons. Show scores prominently.</p>
|
|
95
|
+
<div class="ds-principle-example">
|
|
96
|
+
<div class="eval-grid" style="max-width: 300px;">
|
|
97
|
+
<button class="eval-card" type="button">
|
|
98
|
+
<span class="eval-card-inner">
|
|
99
|
+
<span class="eval-name">Accuracy</span>
|
|
100
|
+
<span class="eval-score score-excellent">100</span>
|
|
101
|
+
</span>
|
|
102
|
+
</button>
|
|
103
|
+
<button class="eval-card" type="button">
|
|
104
|
+
<span class="eval-card-inner">
|
|
105
|
+
<span class="eval-name">F1 Score</span>
|
|
106
|
+
<span class="eval-score score-fair">55</span>
|
|
107
|
+
</span>
|
|
108
|
+
</button>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div class="ds-principle">
|
|
114
|
+
<h3>6. Data Tables Best Practices</h3>
|
|
115
|
+
<p>Tables should be <strong>compact, scannable, and clickable</strong>. Use monospace for numbers, right-align numeric columns, and make entire rows clickable for navigation.</p>
|
|
116
|
+
<ul style="font-size: var(--text-sm); color: var(--gray-300); margin-bottom: var(--space-4); padding-left: var(--space-5);">
|
|
117
|
+
<li>Full row clickable - no separate action buttons needed</li>
|
|
118
|
+
<li>Right-align numeric data with <code>text-right cell-numeric</code></li>
|
|
119
|
+
<li>Use relative time ("2 days ago") with <code>text-nowrap</code></li>
|
|
120
|
+
<li>Compact padding for dense data display</li>
|
|
121
|
+
<li>Short column headers - abbreviate evaluator names</li>
|
|
122
|
+
<li>Cursor pointer on hover to indicate clickability</li>
|
|
123
|
+
</ul>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div class="ds-principle">
|
|
127
|
+
<h3>7. Detail Page Patterns</h3>
|
|
128
|
+
<p>Detail pages should use <strong>breadcrumb navigation</strong>, <strong>inline metadata</strong>, and <strong>side-by-side comparison panels</strong> for clarity.</p>
|
|
129
|
+
<ul style="font-size: var(--text-sm); color: var(--gray-300); margin-bottom: var(--space-4); padding-left: var(--space-5);">
|
|
130
|
+
<li>Breadcrumbs: <code>breadcrumb</code>, <code>breadcrumb-link</code>, <code>breadcrumb-sep</code></li>
|
|
131
|
+
<li>Inline metadata: <code>exp-meta</code> with <code>exp-meta-item</code></li>
|
|
132
|
+
<li>Score cards: <code>eval-summary</code> with progress bars</li>
|
|
133
|
+
<li>Comparison panels: <code>result-comparison</code> with <code>result-panel</code></li>
|
|
134
|
+
<li>Code output: <code>result-code</code> for monospace content</li>
|
|
135
|
+
</ul>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div class="ds-principle">
|
|
139
|
+
<h3>8. Status Indicators</h3>
|
|
140
|
+
<p>Use <strong>colored dots with text labels</strong> for status display. More subtle than badges, better for inline use in tables and lists.</p>
|
|
141
|
+
<div class="ds-principle-example">
|
|
142
|
+
<span class="status-indicator">
|
|
143
|
+
<span class="status-dot status-dot-success"></span>
|
|
144
|
+
<span class="status-text">Completed</span>
|
|
145
|
+
</span>
|
|
146
|
+
<span class="status-indicator">
|
|
147
|
+
<span class="status-dot status-dot-warning"></span>
|
|
148
|
+
<span class="status-text">Pending</span>
|
|
149
|
+
</span>
|
|
150
|
+
<span class="status-indicator">
|
|
151
|
+
<span class="status-dot status-dot-error"></span>
|
|
152
|
+
<span class="status-text">Failed</span>
|
|
153
|
+
</span>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<div class="ds-principle">
|
|
158
|
+
<h3>9. Score Pills</h3>
|
|
159
|
+
<p>Use compact <strong>score pills with colored backgrounds</strong> for displaying metrics in tables. Shows percentage with subtle color-coded background.</p>
|
|
160
|
+
<div class="ds-principle-example">
|
|
161
|
+
<span class="score-pill score-excellent">100%</span>
|
|
162
|
+
<span class="score-pill score-good">78%</span>
|
|
163
|
+
<span class="score-pill score-fair">55%</span>
|
|
164
|
+
<span class="score-pill score-poor">32%</span>
|
|
165
|
+
<span class="score-pill score-bad">12%</span>
|
|
166
|
+
<span class="score-empty">—</span>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="ds-principle">
|
|
171
|
+
<h3>10. Section Headers with Counts</h3>
|
|
172
|
+
<p>Use <strong>section headers with inline counts</strong> to show what's in each section at a glance. Gray count badge provides context without drawing focus.</p>
|
|
173
|
+
<div class="ds-principle-example" style="flex-direction: column; align-items: flex-start; gap: var(--space-2);">
|
|
174
|
+
<div class="section-header" style="width: 100%; max-width: 400px; margin: 0;">
|
|
175
|
+
<h3 class="section-title" style="margin: 0;">Results</h3>
|
|
176
|
+
<span class="section-count">3 runs</span>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="section-header" style="width: 100%; max-width: 400px; margin: 0;">
|
|
179
|
+
<h3 class="section-title" style="margin: 0;">Records</h3>
|
|
180
|
+
<span class="section-count">15 total</span>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<div class="ds-principle">
|
|
186
|
+
<h3>11. Icons for Scanability</h3>
|
|
187
|
+
<p>Add <strong>meaningful icons to section headers</strong> to help users quickly identify content areas. Use subtle gray icons, not accent colors.</p>
|
|
188
|
+
<div class="ds-principle-example">
|
|
189
|
+
<div class="flex items-center gap-2">
|
|
190
|
+
<svg class="icon-sm" style="color: var(--gray-400);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
191
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
192
|
+
</svg>
|
|
193
|
+
<span class="text-sm text-muted">SYSTEM PROMPT</span>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="flex items-center gap-2">
|
|
196
|
+
<svg class="icon-sm" style="color: var(--gray-400);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
197
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
198
|
+
</svg>
|
|
199
|
+
<span class="text-sm text-muted">USER TEMPLATE</span>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="flex items-center gap-2">
|
|
202
|
+
<svg class="icon-sm" style="color: var(--gray-400);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
203
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
204
|
+
</svg>
|
|
205
|
+
<span class="text-sm text-muted">OUTPUT</span>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
</section>
|
|
211
|
+
|
|
212
|
+
<!-- Colors -->
|
|
213
|
+
<section class="ds-section">
|
|
214
|
+
<h2 class="ds-section-title">Colors</h2>
|
|
215
|
+
|
|
216
|
+
<h3 class="ds-subsection-title">Gray Scale (Warm)</h3>
|
|
217
|
+
<div class="ds-color-grid">
|
|
218
|
+
<div class="ds-color-swatch">
|
|
219
|
+
<div class="ds-color-preview" style="background: var(--gray-50);"></div>
|
|
220
|
+
<span class="ds-color-name">gray-50</span>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="ds-color-swatch">
|
|
223
|
+
<div class="ds-color-preview" style="background: var(--gray-100);"></div>
|
|
224
|
+
<span class="ds-color-name">gray-100</span>
|
|
225
|
+
</div>
|
|
226
|
+
<div class="ds-color-swatch">
|
|
227
|
+
<div class="ds-color-preview" style="background: var(--gray-200);"></div>
|
|
228
|
+
<span class="ds-color-name">gray-200</span>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="ds-color-swatch">
|
|
231
|
+
<div class="ds-color-preview" style="background: var(--gray-300);"></div>
|
|
232
|
+
<span class="ds-color-name">gray-300</span>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="ds-color-swatch">
|
|
235
|
+
<div class="ds-color-preview" style="background: var(--gray-400);"></div>
|
|
236
|
+
<span class="ds-color-name">gray-400</span>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="ds-color-swatch">
|
|
239
|
+
<div class="ds-color-preview" style="background: var(--gray-500);"></div>
|
|
240
|
+
<span class="ds-color-name">gray-500</span>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="ds-color-swatch">
|
|
243
|
+
<div class="ds-color-preview" style="background: var(--gray-600);"></div>
|
|
244
|
+
<span class="ds-color-name">gray-600</span>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="ds-color-swatch">
|
|
247
|
+
<div class="ds-color-preview" style="background: var(--gray-700);"></div>
|
|
248
|
+
<span class="ds-color-name">gray-700</span>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="ds-color-swatch">
|
|
251
|
+
<div class="ds-color-preview" style="background: var(--gray-800);"></div>
|
|
252
|
+
<span class="ds-color-name">gray-800</span>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="ds-color-swatch">
|
|
255
|
+
<div class="ds-color-preview" style="background: var(--gray-900);"></div>
|
|
256
|
+
<span class="ds-color-name">gray-900</span>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="ds-color-swatch">
|
|
259
|
+
<div class="ds-color-preview" style="background: var(--gray-950);"></div>
|
|
260
|
+
<span class="ds-color-name">gray-950</span>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<h3 class="ds-subsection-title">Accent (Warm Amber)</h3>
|
|
265
|
+
<div class="ds-color-grid">
|
|
266
|
+
<div class="ds-color-swatch">
|
|
267
|
+
<div class="ds-color-preview" style="background: var(--accent-50);"></div>
|
|
268
|
+
<span class="ds-color-name">accent-50</span>
|
|
269
|
+
</div>
|
|
270
|
+
<div class="ds-color-swatch">
|
|
271
|
+
<div class="ds-color-preview" style="background: var(--accent-100);"></div>
|
|
272
|
+
<span class="ds-color-name">accent-100</span>
|
|
273
|
+
</div>
|
|
274
|
+
<div class="ds-color-swatch">
|
|
275
|
+
<div class="ds-color-preview" style="background: var(--accent-200);"></div>
|
|
276
|
+
<span class="ds-color-name">accent-200</span>
|
|
277
|
+
</div>
|
|
278
|
+
<div class="ds-color-swatch">
|
|
279
|
+
<div class="ds-color-preview" style="background: var(--accent-300);"></div>
|
|
280
|
+
<span class="ds-color-name">accent-300</span>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="ds-color-swatch">
|
|
283
|
+
<div class="ds-color-preview" style="background: var(--accent-400);"></div>
|
|
284
|
+
<span class="ds-color-name">accent-400</span>
|
|
285
|
+
</div>
|
|
286
|
+
<div class="ds-color-swatch">
|
|
287
|
+
<div class="ds-color-preview" style="background: var(--accent-500);"></div>
|
|
288
|
+
<span class="ds-color-name">accent-500</span>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="ds-color-swatch">
|
|
291
|
+
<div class="ds-color-preview" style="background: var(--accent-600);"></div>
|
|
292
|
+
<span class="ds-color-name">accent-600</span>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="ds-color-swatch">
|
|
295
|
+
<div class="ds-color-preview" style="background: var(--accent-700);"></div>
|
|
296
|
+
<span class="ds-color-name">accent-700</span>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
|
|
300
|
+
<h3 class="ds-subsection-title">Semantic Colors</h3>
|
|
301
|
+
<div class="ds-color-grid">
|
|
302
|
+
<div class="ds-color-swatch">
|
|
303
|
+
<div class="ds-color-preview" style="background: var(--success-500);"></div>
|
|
304
|
+
<span class="ds-color-name">success</span>
|
|
305
|
+
</div>
|
|
306
|
+
<div class="ds-color-swatch">
|
|
307
|
+
<div class="ds-color-preview" style="background: var(--warning-500);"></div>
|
|
308
|
+
<span class="ds-color-name">warning</span>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="ds-color-swatch">
|
|
311
|
+
<div class="ds-color-preview" style="background: var(--error-500);"></div>
|
|
312
|
+
<span class="ds-color-name">error</span>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="ds-color-swatch">
|
|
315
|
+
<div class="ds-color-preview" style="background: var(--info-500);"></div>
|
|
316
|
+
<span class="ds-color-name">info</span>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
</section>
|
|
320
|
+
|
|
321
|
+
<!-- Typography -->
|
|
322
|
+
<section class="ds-section">
|
|
323
|
+
<h2 class="ds-section-title">Typography</h2>
|
|
324
|
+
|
|
325
|
+
<div class="ds-typography-samples">
|
|
326
|
+
<div class="ds-type-sample">
|
|
327
|
+
<span class="ds-type-label">Display / H1</span>
|
|
328
|
+
<h1 style="margin: 0;">The quick brown fox</h1>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="ds-type-sample">
|
|
331
|
+
<span class="ds-type-label">H2</span>
|
|
332
|
+
<h2 style="margin: 0;">The quick brown fox jumps over the lazy dog</h2>
|
|
333
|
+
</div>
|
|
334
|
+
<div class="ds-type-sample">
|
|
335
|
+
<span class="ds-type-label">H3</span>
|
|
336
|
+
<h3 style="margin: 0;">The quick brown fox jumps over the lazy dog</h3>
|
|
337
|
+
</div>
|
|
338
|
+
<div class="ds-type-sample">
|
|
339
|
+
<span class="ds-type-label">H4</span>
|
|
340
|
+
<h4 style="margin: 0;">The quick brown fox jumps over the lazy dog</h4>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="ds-type-sample">
|
|
343
|
+
<span class="ds-type-label">Body</span>
|
|
344
|
+
<p style="margin: 0;">The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!</p>
|
|
345
|
+
</div>
|
|
346
|
+
<div class="ds-type-sample">
|
|
347
|
+
<span class="ds-type-label">Small</span>
|
|
348
|
+
<p class="text-sm" style="margin: 0;">The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.</p>
|
|
349
|
+
</div>
|
|
350
|
+
<div class="ds-type-sample">
|
|
351
|
+
<span class="ds-type-label">Code</span>
|
|
352
|
+
<code>const greeting = "Hello, World!";</code>
|
|
353
|
+
</div>
|
|
354
|
+
<div class="ds-type-sample">
|
|
355
|
+
<span class="ds-type-label">Code Block</span>
|
|
356
|
+
<pre><code>function evaluate(prompt, context) {
|
|
357
|
+
const result = model.generate(prompt);
|
|
358
|
+
return scorer.score(result, context);
|
|
359
|
+
}</code></pre>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</section>
|
|
363
|
+
|
|
364
|
+
<!-- Spacing -->
|
|
365
|
+
<section class="ds-section">
|
|
366
|
+
<h2 class="ds-section-title">Spacing Scale</h2>
|
|
367
|
+
<p class="ds-description">Generous spacing scale for better breathing room and visual rhythm.</p>
|
|
368
|
+
|
|
369
|
+
<div class="ds-spacing-samples">
|
|
370
|
+
<div class="ds-spacing-item">
|
|
371
|
+
<div class="ds-spacing-box" style="width: var(--space-1); height: var(--space-1);"></div>
|
|
372
|
+
<span>space-1 (4px)</span>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="ds-spacing-item">
|
|
375
|
+
<div class="ds-spacing-box" style="width: var(--space-2); height: var(--space-2);"></div>
|
|
376
|
+
<span>space-2 (8px)</span>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="ds-spacing-item">
|
|
379
|
+
<div class="ds-spacing-box" style="width: var(--space-3); height: var(--space-3);"></div>
|
|
380
|
+
<span>space-3 (12px)</span>
|
|
381
|
+
</div>
|
|
382
|
+
<div class="ds-spacing-item">
|
|
383
|
+
<div class="ds-spacing-box" style="width: var(--space-4); height: var(--space-4);"></div>
|
|
384
|
+
<span>space-4 (16px)</span>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="ds-spacing-item">
|
|
387
|
+
<div class="ds-spacing-box" style="width: var(--space-5); height: var(--space-5);"></div>
|
|
388
|
+
<span>space-5 (24px)</span>
|
|
389
|
+
</div>
|
|
390
|
+
<div class="ds-spacing-item">
|
|
391
|
+
<div class="ds-spacing-box" style="width: var(--space-6); height: var(--space-6);"></div>
|
|
392
|
+
<span>space-6 (32px)</span>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="ds-spacing-item">
|
|
395
|
+
<div class="ds-spacing-box" style="width: var(--space-8); height: var(--space-8);"></div>
|
|
396
|
+
<span>space-8 (40px)</span>
|
|
397
|
+
</div>
|
|
398
|
+
<div class="ds-spacing-item">
|
|
399
|
+
<div class="ds-spacing-box" style="width: var(--space-10); height: var(--space-10);"></div>
|
|
400
|
+
<span>space-10 (48px)</span>
|
|
401
|
+
</div>
|
|
402
|
+
<div class="ds-spacing-item">
|
|
403
|
+
<div class="ds-spacing-box" style="width: var(--space-12); height: var(--space-12);"></div>
|
|
404
|
+
<span>space-12 (64px)</span>
|
|
405
|
+
</div>
|
|
406
|
+
<div class="ds-spacing-item">
|
|
407
|
+
<div class="ds-spacing-box" style="width: var(--space-16); height: var(--space-16);"></div>
|
|
408
|
+
<span>space-16 (80px)</span>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
</section>
|
|
412
|
+
|
|
413
|
+
<!-- Buttons -->
|
|
414
|
+
<section class="ds-section">
|
|
415
|
+
<h2 class="ds-section-title">Buttons</h2>
|
|
416
|
+
|
|
417
|
+
<h3 class="ds-subsection-title">Primary</h3>
|
|
418
|
+
<div class="ds-button-row">
|
|
419
|
+
<button class="btn btn-primary btn-sm">Small</button>
|
|
420
|
+
<button class="btn btn-primary">Default</button>
|
|
421
|
+
<button class="btn btn-primary btn-lg">Large</button>
|
|
422
|
+
<button class="btn btn-primary" disabled>Disabled</button>
|
|
423
|
+
</div>
|
|
424
|
+
|
|
425
|
+
<h3 class="ds-subsection-title">Secondary</h3>
|
|
426
|
+
<div class="ds-button-row">
|
|
427
|
+
<button class="btn btn-secondary btn-sm">Small</button>
|
|
428
|
+
<button class="btn btn-secondary">Default</button>
|
|
429
|
+
<button class="btn btn-secondary btn-lg">Large</button>
|
|
430
|
+
<button class="btn btn-secondary" disabled>Disabled</button>
|
|
431
|
+
</div>
|
|
432
|
+
|
|
433
|
+
<h3 class="ds-subsection-title">Ghost</h3>
|
|
434
|
+
<div class="ds-button-row">
|
|
435
|
+
<button class="btn btn-ghost btn-sm">Small</button>
|
|
436
|
+
<button class="btn btn-ghost">Default</button>
|
|
437
|
+
<button class="btn btn-ghost btn-lg">Large</button>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
440
|
+
<h3 class="ds-subsection-title">Success / Danger</h3>
|
|
441
|
+
<div class="ds-button-row">
|
|
442
|
+
<button class="btn btn-success">Success</button>
|
|
443
|
+
<button class="btn btn-danger">Danger</button>
|
|
444
|
+
</div>
|
|
445
|
+
|
|
446
|
+
<h3 class="ds-subsection-title">Icon Buttons</h3>
|
|
447
|
+
<div class="ds-button-row">
|
|
448
|
+
<button class="btn btn-icon btn-primary btn-sm">
|
|
449
|
+
<svg class="icon-sm" viewBox="0 0 20 20" fill="currentColor">
|
|
450
|
+
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
|
|
451
|
+
</svg>
|
|
452
|
+
</button>
|
|
453
|
+
<button class="btn btn-icon btn-secondary">
|
|
454
|
+
<svg class="icon-sm" viewBox="0 0 20 20" fill="currentColor">
|
|
455
|
+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
|
|
456
|
+
</svg>
|
|
457
|
+
</button>
|
|
458
|
+
<button class="btn btn-icon btn-ghost">
|
|
459
|
+
<svg class="icon-sm" viewBox="0 0 20 20" fill="currentColor">
|
|
460
|
+
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
|
461
|
+
</svg>
|
|
462
|
+
</button>
|
|
463
|
+
</div>
|
|
464
|
+
|
|
465
|
+
<h3 class="ds-subsection-title">Button Usage Guidelines</h3>
|
|
466
|
+
<div class="ds-principles" style="margin-top: var(--space-4);">
|
|
467
|
+
<div class="ds-principle">
|
|
468
|
+
<h3>When to Use Each Button Type</h3>
|
|
469
|
+
<table class="table" style="margin-bottom: 0;">
|
|
470
|
+
<thead>
|
|
471
|
+
<tr>
|
|
472
|
+
<th>Button Type</th>
|
|
473
|
+
<th>Use For</th>
|
|
474
|
+
<th>Examples</th>
|
|
475
|
+
</tr>
|
|
476
|
+
</thead>
|
|
477
|
+
<tbody>
|
|
478
|
+
<tr>
|
|
479
|
+
<td><button class="btn btn-primary btn-sm">Primary</button></td>
|
|
480
|
+
<td>Main actions, creation, submission</td>
|
|
481
|
+
<td>New Dataset, New Experiment, Create, Save, Run, Submit</td>
|
|
482
|
+
</tr>
|
|
483
|
+
<tr>
|
|
484
|
+
<td><button class="btn btn-secondary btn-sm">Secondary</button></td>
|
|
485
|
+
<td>Alternative actions, navigation back</td>
|
|
486
|
+
<td>Cancel, Back, Close, View in Workbench</td>
|
|
487
|
+
</tr>
|
|
488
|
+
<tr>
|
|
489
|
+
<td><button class="btn btn-ghost btn-sm">Ghost</button></td>
|
|
490
|
+
<td>Tertiary actions, inline actions</td>
|
|
491
|
+
<td>Run All, Options, Edit (inline), Copy</td>
|
|
492
|
+
</tr>
|
|
493
|
+
<tr>
|
|
494
|
+
<td><button class="btn btn-danger btn-sm">Danger</button></td>
|
|
495
|
+
<td>Destructive actions</td>
|
|
496
|
+
<td>Delete, Remove, Clear All</td>
|
|
497
|
+
</tr>
|
|
498
|
+
<tr>
|
|
499
|
+
<td><button class="btn btn-success btn-sm">Success</button></td>
|
|
500
|
+
<td>Positive confirmation actions</td>
|
|
501
|
+
<td>Confirm, Approve, Accept</td>
|
|
502
|
+
</tr>
|
|
503
|
+
</tbody>
|
|
504
|
+
</table>
|
|
505
|
+
</div>
|
|
506
|
+
<div class="ds-principle">
|
|
507
|
+
<h3>Button Placement Rules</h3>
|
|
508
|
+
<ul style="font-size: var(--text-sm); color: var(--gray-300); margin: 0; padding-left: var(--space-5);">
|
|
509
|
+
<li><strong>Page headers:</strong> Primary action on the right (e.g., "New Dataset")</li>
|
|
510
|
+
<li><strong>Forms:</strong> Primary submit on right, Cancel/secondary on left</li>
|
|
511
|
+
<li><strong>Modals:</strong> Primary on right, Cancel on left</li>
|
|
512
|
+
<li><strong>Empty states:</strong> Single primary CTA centered</li>
|
|
513
|
+
<li><strong>Detail pages:</strong> Edit (secondary/ghost), Delete (danger) on right</li>
|
|
514
|
+
</ul>
|
|
515
|
+
</div>
|
|
516
|
+
<div class="ds-principle">
|
|
517
|
+
<h3>Consistent "New" Button Pattern</h3>
|
|
518
|
+
<p style="margin-bottom: var(--space-3);">All "New X" buttons should be <strong>primary (orange)</strong> to maintain visual consistency:</p>
|
|
519
|
+
<div class="ds-button-row" style="margin-bottom: 0;">
|
|
520
|
+
<button class="btn btn-primary">
|
|
521
|
+
<svg class="icon-sm" viewBox="0 0 20 20" fill="currentColor">
|
|
522
|
+
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
|
|
523
|
+
</svg>
|
|
524
|
+
New Dataset
|
|
525
|
+
</button>
|
|
526
|
+
<button class="btn btn-primary">
|
|
527
|
+
<svg class="icon-sm" viewBox="0 0 20 20" fill="currentColor">
|
|
528
|
+
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
|
|
529
|
+
</svg>
|
|
530
|
+
New Experiment
|
|
531
|
+
</button>
|
|
532
|
+
<button class="btn btn-primary btn-sm">
|
|
533
|
+
<svg class="icon-sm" viewBox="0 0 20 20" fill="currentColor">
|
|
534
|
+
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
|
|
535
|
+
</svg>
|
|
536
|
+
New Prompt
|
|
537
|
+
</button>
|
|
538
|
+
</div>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
</section>
|
|
542
|
+
|
|
543
|
+
<!-- Forms -->
|
|
544
|
+
<section class="ds-section">
|
|
545
|
+
<h2 class="ds-section-title">Forms</h2>
|
|
546
|
+
|
|
547
|
+
<div class="ds-form-demo">
|
|
548
|
+
<div class="form-group">
|
|
549
|
+
<label class="form-label">Text Input</label>
|
|
550
|
+
<input type="text" class="form-input" placeholder="Enter text...">
|
|
551
|
+
</div>
|
|
552
|
+
|
|
553
|
+
<div class="form-group">
|
|
554
|
+
<label class="form-label">With Helper Text</label>
|
|
555
|
+
<input type="email" class="form-input" placeholder="you@example.com">
|
|
556
|
+
<p class="form-hint">We'll never share your email.</p>
|
|
557
|
+
</div>
|
|
558
|
+
|
|
559
|
+
<div class="form-group">
|
|
560
|
+
<label class="form-label">Select</label>
|
|
561
|
+
<select class="form-select">
|
|
562
|
+
<option value="">Choose an option...</option>
|
|
563
|
+
<option value="1">Option One</option>
|
|
564
|
+
<option value="2">Option Two</option>
|
|
565
|
+
<option value="3">Option Three</option>
|
|
566
|
+
</select>
|
|
567
|
+
</div>
|
|
568
|
+
|
|
569
|
+
<div class="form-group">
|
|
570
|
+
<label class="form-label">Textarea</label>
|
|
571
|
+
<textarea class="form-textarea" rows="4" placeholder="Enter longer text..."></textarea>
|
|
572
|
+
</div>
|
|
573
|
+
|
|
574
|
+
<div class="form-group">
|
|
575
|
+
<label class="form-label">Disabled Input</label>
|
|
576
|
+
<input type="text" class="form-input" placeholder="Cannot edit" disabled>
|
|
577
|
+
</div>
|
|
578
|
+
</div>
|
|
579
|
+
</section>
|
|
580
|
+
|
|
581
|
+
<!-- Cards -->
|
|
582
|
+
<section class="ds-section">
|
|
583
|
+
<h2 class="ds-section-title">Cards</h2>
|
|
584
|
+
|
|
585
|
+
<div class="ds-cards-grid">
|
|
586
|
+
<div class="card">
|
|
587
|
+
<h3>Default Card</h3>
|
|
588
|
+
<p>This is a standard card component with some content inside it. Cards provide a contained surface for content.</p>
|
|
589
|
+
<div class="form-actions">
|
|
590
|
+
<button class="btn btn-ghost">Cancel</button>
|
|
591
|
+
<button class="btn btn-primary">Save</button>
|
|
592
|
+
</div>
|
|
593
|
+
</div>
|
|
594
|
+
|
|
595
|
+
<div class="card-subtle">
|
|
596
|
+
<h3>Subtle Card</h3>
|
|
597
|
+
<p>A more subtle card variant with less visual weight. Good for secondary content or nested cards.</p>
|
|
598
|
+
</div>
|
|
599
|
+
|
|
600
|
+
<div class="card card-hover">
|
|
601
|
+
<h3>Hoverable Card</h3>
|
|
602
|
+
<p>This card has a hover state. Good for clickable/interactive cards.</p>
|
|
603
|
+
</div>
|
|
604
|
+
</div>
|
|
605
|
+
</section>
|
|
606
|
+
|
|
607
|
+
<!-- Badges -->
|
|
608
|
+
<section class="ds-section">
|
|
609
|
+
<h2 class="ds-section-title">Badges & Tags</h2>
|
|
610
|
+
|
|
611
|
+
<h3 class="ds-subsection-title">Status Badges</h3>
|
|
612
|
+
<div class="ds-badge-row">
|
|
613
|
+
<span class="badge">Default</span>
|
|
614
|
+
<span class="badge badge-success">Success</span>
|
|
615
|
+
<span class="badge badge-warning">Warning</span>
|
|
616
|
+
<span class="badge badge-error">Error</span>
|
|
617
|
+
<span class="badge badge-info">Info</span>
|
|
618
|
+
</div>
|
|
619
|
+
|
|
620
|
+
<h3 class="ds-subsection-title">Tags</h3>
|
|
621
|
+
<div class="ds-badge-row">
|
|
622
|
+
<span class="tag">Default Tag</span>
|
|
623
|
+
<span class="tag tag-green">Green Tag</span>
|
|
624
|
+
<span class="tag tag-yellow">Yellow Tag</span>
|
|
625
|
+
<span class="tag tag-blue">Blue Tag</span>
|
|
626
|
+
</div>
|
|
627
|
+
</section>
|
|
628
|
+
|
|
629
|
+
<!-- Scores -->
|
|
630
|
+
<section class="ds-section">
|
|
631
|
+
<h2 class="ds-section-title">Score Indicators</h2>
|
|
632
|
+
|
|
633
|
+
<div class="ds-scores-grid">
|
|
634
|
+
<div class="score-card">
|
|
635
|
+
<span class="text-sm">Excellent</span>
|
|
636
|
+
<p class="score score-lg score-excellent">0.95</p>
|
|
637
|
+
</div>
|
|
638
|
+
<div class="score-card">
|
|
639
|
+
<span class="text-sm">Good</span>
|
|
640
|
+
<p class="score score-lg score-good">0.78</p>
|
|
641
|
+
</div>
|
|
642
|
+
<div class="score-card">
|
|
643
|
+
<span class="text-sm">Fair</span>
|
|
644
|
+
<p class="score score-lg score-fair">0.52</p>
|
|
645
|
+
</div>
|
|
646
|
+
<div class="score-card">
|
|
647
|
+
<span class="text-sm">Poor</span>
|
|
648
|
+
<p class="score score-lg score-poor">0.31</p>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="score-card">
|
|
651
|
+
<span class="text-sm">Bad</span>
|
|
652
|
+
<p class="score score-lg score-bad">0.12</p>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
|
|
656
|
+
<h3 class="ds-subsection-title">Inline Scores</h3>
|
|
657
|
+
<p>
|
|
658
|
+
The model achieved a score of <span class="score score-excellent">0.92</span> on accuracy,
|
|
659
|
+
<span class="score score-good">0.71</span> on relevance, and
|
|
660
|
+
<span class="score score-fair">0.45</span> on conciseness.
|
|
661
|
+
</p>
|
|
662
|
+
</section>
|
|
663
|
+
|
|
664
|
+
<!-- Tables -->
|
|
665
|
+
<section class="ds-section">
|
|
666
|
+
<h2 class="ds-section-title">Tables</h2>
|
|
667
|
+
|
|
668
|
+
<div class="table-wrapper">
|
|
669
|
+
<table class="table">
|
|
670
|
+
<thead>
|
|
671
|
+
<tr>
|
|
672
|
+
<th>Name</th>
|
|
673
|
+
<th>Status</th>
|
|
674
|
+
<th>Score</th>
|
|
675
|
+
<th>Actions</th>
|
|
676
|
+
</tr>
|
|
677
|
+
</thead>
|
|
678
|
+
<tbody>
|
|
679
|
+
<tr>
|
|
680
|
+
<td>Summarization Eval</td>
|
|
681
|
+
<td><span class="badge badge-success">Complete</span></td>
|
|
682
|
+
<td><span class="score score-excellent">0.89</span></td>
|
|
683
|
+
<td>
|
|
684
|
+
<button class="btn btn-ghost btn-sm">View</button>
|
|
685
|
+
</td>
|
|
686
|
+
</tr>
|
|
687
|
+
<tr>
|
|
688
|
+
<td>QA Evaluation</td>
|
|
689
|
+
<td><span class="badge badge-warning">Running</span></td>
|
|
690
|
+
<td><span class="text-muted">-</span></td>
|
|
691
|
+
<td>
|
|
692
|
+
<button class="btn btn-ghost btn-sm">View</button>
|
|
693
|
+
</td>
|
|
694
|
+
</tr>
|
|
695
|
+
<tr>
|
|
696
|
+
<td>Classification Test</td>
|
|
697
|
+
<td><span class="badge badge-error">Failed</span></td>
|
|
698
|
+
<td><span class="score score-poor">0.23</span></td>
|
|
699
|
+
<td>
|
|
700
|
+
<button class="btn btn-ghost btn-sm">View</button>
|
|
701
|
+
</td>
|
|
702
|
+
</tr>
|
|
703
|
+
<tr>
|
|
704
|
+
<td>Extraction Eval</td>
|
|
705
|
+
<td><span class="badge badge-info">Pending</span></td>
|
|
706
|
+
<td><span class="text-muted">-</span></td>
|
|
707
|
+
<td>
|
|
708
|
+
<button class="btn btn-ghost btn-sm">View</button>
|
|
709
|
+
</td>
|
|
710
|
+
</tr>
|
|
711
|
+
</tbody>
|
|
712
|
+
</table>
|
|
713
|
+
</div>
|
|
714
|
+
</section>
|
|
715
|
+
|
|
716
|
+
<!-- Empty States -->
|
|
717
|
+
<section class="ds-section">
|
|
718
|
+
<h2 class="ds-section-title">Empty States</h2>
|
|
719
|
+
|
|
720
|
+
<div class="card">
|
|
721
|
+
<div class="empty-state">
|
|
722
|
+
<svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
723
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
|
724
|
+
</svg>
|
|
725
|
+
<h3 class="empty-state-title">No Results Yet</h3>
|
|
726
|
+
<p class="empty-state-description">Run an evaluation to see results here.</p>
|
|
727
|
+
<button class="btn btn-primary">Run Evaluation</button>
|
|
728
|
+
</div>
|
|
729
|
+
</div>
|
|
730
|
+
</section>
|
|
731
|
+
|
|
732
|
+
<!-- Panels & Layout -->
|
|
733
|
+
<section class="ds-section">
|
|
734
|
+
<h2 class="ds-section-title">Panels</h2>
|
|
735
|
+
|
|
736
|
+
<div class="ds-panel-demo">
|
|
737
|
+
<div class="panel" style="max-width: 400px;">
|
|
738
|
+
<div class="panel-section">
|
|
739
|
+
<div class="panel-section-header">
|
|
740
|
+
<h2 class="panel-section-title">Panel Section</h2>
|
|
741
|
+
<button class="btn btn-ghost btn-sm">Action</button>
|
|
742
|
+
</div>
|
|
743
|
+
<p class="text-sm text-muted">Panel sections organize related content with consistent spacing.</p>
|
|
744
|
+
</div>
|
|
745
|
+
<div class="panel-section">
|
|
746
|
+
<div class="panel-section-header">
|
|
747
|
+
<h2 class="panel-section-title">Another Section</h2>
|
|
748
|
+
</div>
|
|
749
|
+
<div class="form-group">
|
|
750
|
+
<label class="form-label">Input in Panel</label>
|
|
751
|
+
<input type="text" class="form-input" placeholder="Type here...">
|
|
752
|
+
</div>
|
|
753
|
+
</div>
|
|
754
|
+
</div>
|
|
755
|
+
</div>
|
|
756
|
+
</section>
|
|
757
|
+
|
|
758
|
+
<!-- Collapsibles -->
|
|
759
|
+
<section class="ds-section">
|
|
760
|
+
<h2 class="ds-section-title">Collapsible Sections</h2>
|
|
761
|
+
|
|
762
|
+
<details class="collapsible">
|
|
763
|
+
<summary class="collapsible-header">
|
|
764
|
+
<span class="collapsible-title">Click to Expand</span>
|
|
765
|
+
<svg class="collapsible-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
766
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
767
|
+
</svg>
|
|
768
|
+
</summary>
|
|
769
|
+
<div class="collapsible-body">
|
|
770
|
+
<p>This content is hidden by default and revealed when the summary is clicked. Useful for progressive disclosure of complex information.</p>
|
|
771
|
+
</div>
|
|
772
|
+
</details>
|
|
773
|
+
|
|
774
|
+
<details class="collapsible">
|
|
775
|
+
<summary class="collapsible-header">
|
|
776
|
+
<span class="collapsible-title">Another Collapsible</span>
|
|
777
|
+
<svg class="collapsible-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
778
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
779
|
+
</svg>
|
|
780
|
+
</summary>
|
|
781
|
+
<div class="collapsible-body">
|
|
782
|
+
<div class="form-group">
|
|
783
|
+
<label class="form-label">Setting</label>
|
|
784
|
+
<select class="form-select">
|
|
785
|
+
<option>Option A</option>
|
|
786
|
+
<option>Option B</option>
|
|
787
|
+
</select>
|
|
788
|
+
</div>
|
|
789
|
+
</div>
|
|
790
|
+
</details>
|
|
791
|
+
</section>
|
|
792
|
+
|
|
793
|
+
<!-- Workbench Components -->
|
|
794
|
+
<section class="ds-section">
|
|
795
|
+
<h2 class="ds-section-title">Workbench Components</h2>
|
|
796
|
+
<p class="ds-description">Specialized components for the prompt workbench interface.</p>
|
|
797
|
+
|
|
798
|
+
<h3 class="ds-subsection-title">Run Controls</h3>
|
|
799
|
+
<div class="ds-workbench-demo">
|
|
800
|
+
<div class="run-controls" style="max-width: 320px;">
|
|
801
|
+
<div class="run-selects">
|
|
802
|
+
<div class="run-select-group">
|
|
803
|
+
<label class="run-label">Runner</label>
|
|
804
|
+
<select class="form-select form-select-sm">
|
|
805
|
+
<option>SentimentRun</option>
|
|
806
|
+
<option>ClassificationRun</option>
|
|
807
|
+
</select>
|
|
808
|
+
</div>
|
|
809
|
+
<div class="run-select-group">
|
|
810
|
+
<label class="run-label">Record</label>
|
|
811
|
+
<select class="form-select form-select-sm">
|
|
812
|
+
<option>TextContent #1</option>
|
|
813
|
+
<option>TextContent #2</option>
|
|
814
|
+
</select>
|
|
815
|
+
</div>
|
|
816
|
+
</div>
|
|
817
|
+
<button class="btn btn-primary btn-run">
|
|
818
|
+
<svg class="icon-sm" style="margin-right: 6px;" viewBox="0 0 20 20" fill="currentColor">
|
|
819
|
+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
|
|
820
|
+
</svg>
|
|
821
|
+
Run
|
|
822
|
+
</button>
|
|
823
|
+
</div>
|
|
824
|
+
</div>
|
|
825
|
+
|
|
826
|
+
<h3 class="ds-subsection-title">Output Display</h3>
|
|
827
|
+
<div class="ds-workbench-demo">
|
|
828
|
+
<div class="output-section" style="max-width: 320px; border: none; padding: 0;">
|
|
829
|
+
<div class="output-header">
|
|
830
|
+
<span class="output-title">Output</span>
|
|
831
|
+
<span class="output-meta">v36 · 5 months</span>
|
|
832
|
+
</div>
|
|
833
|
+
<div class="output-grid">
|
|
834
|
+
<div class="output-block output-block--expected">
|
|
835
|
+
<span class="output-label">Expected</span>
|
|
836
|
+
<span class="output-value">Positive</span>
|
|
837
|
+
</div>
|
|
838
|
+
<div class="output-block output-block--got">
|
|
839
|
+
<span class="output-label">Got</span>
|
|
840
|
+
<span class="output-value">Positive</span>
|
|
841
|
+
</div>
|
|
842
|
+
<div class="output-block">
|
|
843
|
+
<span class="output-label">Parsed</span>
|
|
844
|
+
<span class="output-value">Positive</span>
|
|
845
|
+
</div>
|
|
846
|
+
</div>
|
|
847
|
+
</div>
|
|
848
|
+
</div>
|
|
849
|
+
|
|
850
|
+
<h3 class="ds-subsection-title">Evaluator Cards</h3>
|
|
851
|
+
<div class="ds-workbench-demo">
|
|
852
|
+
<div class="eval-section" style="max-width: 320px;">
|
|
853
|
+
<div class="eval-header">
|
|
854
|
+
<span class="eval-title">Evaluate</span>
|
|
855
|
+
<button class="btn btn-ghost btn-sm">Run All</button>
|
|
856
|
+
</div>
|
|
857
|
+
<div class="eval-grid">
|
|
858
|
+
<button class="eval-card" type="button">
|
|
859
|
+
<span class="eval-card-inner">
|
|
860
|
+
<span class="eval-name">Sentiment Accuracy</span>
|
|
861
|
+
<span class="eval-score score-excellent">100</span>
|
|
862
|
+
</span>
|
|
863
|
+
</button>
|
|
864
|
+
<button class="eval-card" type="button">
|
|
865
|
+
<span class="eval-card-inner">
|
|
866
|
+
<span class="eval-name">Sentiment F1</span>
|
|
867
|
+
<span class="eval-score score-fair">55</span>
|
|
868
|
+
</span>
|
|
869
|
+
</button>
|
|
870
|
+
<button class="eval-card" type="button">
|
|
871
|
+
<span class="eval-card-inner">
|
|
872
|
+
<span class="eval-name">Precision</span>
|
|
873
|
+
<span class="eval-score score-good">78</span>
|
|
874
|
+
</span>
|
|
875
|
+
</button>
|
|
876
|
+
<button class="eval-card" type="button">
|
|
877
|
+
<span class="eval-card-inner">
|
|
878
|
+
<span class="eval-name">Recall</span>
|
|
879
|
+
<span class="eval-score eval-score--empty">—</span>
|
|
880
|
+
</span>
|
|
881
|
+
</button>
|
|
882
|
+
</div>
|
|
883
|
+
</div>
|
|
884
|
+
</div>
|
|
885
|
+
|
|
886
|
+
<h3 class="ds-subsection-title">Prompt Textarea</h3>
|
|
887
|
+
<div class="ds-workbench-demo">
|
|
888
|
+
<div style="max-width: 500px;">
|
|
889
|
+
<div class="label-inline">
|
|
890
|
+
<span class="panel-section-title">System</span>
|
|
891
|
+
<button class="btn btn-ghost btn-sm">
|
|
892
|
+
<svg class="icon-sm" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
893
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
|
|
894
|
+
</svg>
|
|
895
|
+
</button>
|
|
896
|
+
</div>
|
|
897
|
+
<textarea class="prompt-textarea" placeholder="System instructions...">You are a helpful assistant that analyzes sentiment.</textarea>
|
|
898
|
+
</div>
|
|
899
|
+
</div>
|
|
900
|
+
|
|
901
|
+
<h3 class="ds-subsection-title">Sidebar Item States</h3>
|
|
902
|
+
<div class="ds-workbench-demo">
|
|
903
|
+
<div style="max-width: 220px; background: var(--gray-900); padding: var(--space-2); border-radius: var(--radius-md);">
|
|
904
|
+
<a href="#" class="sidebar-item active">
|
|
905
|
+
<span style="display: flex; align-items: center; gap: var(--space-2);">
|
|
906
|
+
<span class="status-dot status-dot-success" style="margin-right: 0;"></span>
|
|
907
|
+
<span class="truncate">Selected Prompt</span>
|
|
908
|
+
</span>
|
|
909
|
+
<span class="sidebar-item-badge">v36</span>
|
|
910
|
+
</a>
|
|
911
|
+
<a href="#" class="sidebar-item">
|
|
912
|
+
<span class="truncate">Another Prompt</span>
|
|
913
|
+
<span class="sidebar-item-badge">v12</span>
|
|
914
|
+
</a>
|
|
915
|
+
<a href="#" class="sidebar-item">
|
|
916
|
+
<span class="truncate">Third Prompt with Long Name</span>
|
|
917
|
+
<span class="sidebar-item-badge">v3</span>
|
|
918
|
+
</a>
|
|
919
|
+
</div>
|
|
920
|
+
</div>
|
|
921
|
+
</section>
|
|
922
|
+
|
|
923
|
+
<!-- Breadcrumb Navigation -->
|
|
924
|
+
<section class="ds-section">
|
|
925
|
+
<h2 class="ds-section-title">Breadcrumb Navigation</h2>
|
|
926
|
+
<p class="ds-description">Hierarchical navigation for detail pages. Links are accent-colored, separators and current page are muted.</p>
|
|
927
|
+
|
|
928
|
+
<div class="ds-workbench-demo">
|
|
929
|
+
<nav class="breadcrumb">
|
|
930
|
+
<a href="#" class="breadcrumb-link">Datasets</a>
|
|
931
|
+
<span class="breadcrumb-sep">/</span>
|
|
932
|
+
<a href="#" class="breadcrumb-link">Sentiment Analysis</a>
|
|
933
|
+
<span class="breadcrumb-sep">/</span>
|
|
934
|
+
<span class="breadcrumb-current">Records</span>
|
|
935
|
+
</nav>
|
|
936
|
+
</div>
|
|
937
|
+
|
|
938
|
+
<h3 class="ds-subsection-title">With Home Icon</h3>
|
|
939
|
+
<div class="ds-workbench-demo">
|
|
940
|
+
<nav class="breadcrumb">
|
|
941
|
+
<a href="#" class="breadcrumb-link" style="display: flex; align-items: center;">
|
|
942
|
+
<svg class="icon-sm" style="color: var(--gray-400);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
943
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
944
|
+
</svg>
|
|
945
|
+
</a>
|
|
946
|
+
<span class="breadcrumb-sep">/</span>
|
|
947
|
+
<a href="#" class="breadcrumb-link">sdf</a>
|
|
948
|
+
<span class="breadcrumb-sep">/</span>
|
|
949
|
+
<span class="breadcrumb-current">Result #11</span>
|
|
950
|
+
</nav>
|
|
951
|
+
</div>
|
|
952
|
+
</section>
|
|
953
|
+
|
|
954
|
+
<!-- Metadata Bars -->
|
|
955
|
+
<section class="ds-section">
|
|
956
|
+
<h2 class="ds-section-title">Metadata Bars</h2>
|
|
957
|
+
<p class="ds-description">Inline metadata display for detail pages. Key-value pairs separated by vertical dividers.</p>
|
|
958
|
+
|
|
959
|
+
<h3 class="ds-subsection-title">Experiment Metadata</h3>
|
|
960
|
+
<div class="ds-workbench-demo">
|
|
961
|
+
<div class="exp-meta" style="margin-bottom: 0;">
|
|
962
|
+
<div class="exp-meta-item">
|
|
963
|
+
<span class="exp-meta-label">Dataset</span>
|
|
964
|
+
<a href="#" class="exp-meta-value exp-meta-link">Sentiment Analysis Dataset</a>
|
|
965
|
+
</div>
|
|
966
|
+
<div class="exp-meta-item">
|
|
967
|
+
<span class="exp-meta-label">Prompt</span>
|
|
968
|
+
<span class="exp-meta-value">Test Prompt</span>
|
|
969
|
+
</div>
|
|
970
|
+
<div class="exp-meta-item">
|
|
971
|
+
<span class="exp-meta-label">Runner</span>
|
|
972
|
+
<span class="exp-meta-value font-mono">SentimentRun</span>
|
|
973
|
+
</div>
|
|
974
|
+
<div class="exp-meta-item">
|
|
975
|
+
<span class="exp-meta-label">Created</span>
|
|
976
|
+
<span class="exp-meta-value">over 1 year ago</span>
|
|
977
|
+
</div>
|
|
978
|
+
</div>
|
|
979
|
+
</div>
|
|
980
|
+
|
|
981
|
+
<h3 class="ds-subsection-title">With Icons (Result Metadata)</h3>
|
|
982
|
+
<div class="ds-workbench-demo">
|
|
983
|
+
<div class="result-meta-bar">
|
|
984
|
+
<div class="result-meta-item">
|
|
985
|
+
<svg class="icon-sm" style="color: var(--gray-500);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
986
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
987
|
+
</svg>
|
|
988
|
+
<span class="result-meta-label">PROMPT</span>
|
|
989
|
+
<a href="#" class="result-meta-link">Test Prompt</a>
|
|
990
|
+
<span class="badge badge-default" style="font-size: 10px; padding: 2px 6px;">v</span>
|
|
991
|
+
</div>
|
|
992
|
+
<span class="result-meta-divider"></span>
|
|
993
|
+
<div class="result-meta-item">
|
|
994
|
+
<svg class="icon-sm" style="color: var(--gray-500);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
995
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
996
|
+
</svg>
|
|
997
|
+
<span class="result-meta-label">RUNNER</span>
|
|
998
|
+
<span class="result-meta-value">SentimentRun</span>
|
|
999
|
+
</div>
|
|
1000
|
+
<span class="result-meta-divider"></span>
|
|
1001
|
+
<div class="result-meta-item">
|
|
1002
|
+
<svg class="icon-sm" style="color: var(--gray-500);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
1003
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
1004
|
+
</svg>
|
|
1005
|
+
<span class="result-meta-label">RAN</span>
|
|
1006
|
+
<span class="result-meta-value">over 1 year ago</span>
|
|
1007
|
+
</div>
|
|
1008
|
+
</div>
|
|
1009
|
+
</div>
|
|
1010
|
+
</section>
|
|
1011
|
+
|
|
1012
|
+
<!-- Evaluation Summary Cards -->
|
|
1013
|
+
<section class="ds-section">
|
|
1014
|
+
<h2 class="ds-section-title">Evaluation Summary Cards</h2>
|
|
1015
|
+
<p class="ds-description">Score cards with progress bars for displaying evaluation metrics. Used on experiment show and runner result pages.</p>
|
|
1016
|
+
|
|
1017
|
+
<div class="ds-workbench-demo">
|
|
1018
|
+
<div class="eval-summary">
|
|
1019
|
+
<div class="eval-summary-card">
|
|
1020
|
+
<span class="eval-summary-score score-excellent">100<span class="eval-summary-pct">%</span></span>
|
|
1021
|
+
<span class="eval-summary-name">ACCURACY</span>
|
|
1022
|
+
<div class="eval-summary-bar">
|
|
1023
|
+
<div class="eval-summary-bar-fill score-excellent" style="width: 100%"></div>
|
|
1024
|
+
</div>
|
|
1025
|
+
<span class="eval-summary-count">3 runs</span>
|
|
1026
|
+
</div>
|
|
1027
|
+
<div class="eval-summary-card">
|
|
1028
|
+
<span class="eval-summary-score score-fair">44<span class="eval-summary-pct">%</span></span>
|
|
1029
|
+
<span class="eval-summary-name">F1</span>
|
|
1030
|
+
<div class="eval-summary-bar">
|
|
1031
|
+
<div class="eval-summary-bar-fill score-fair" style="width: 44%"></div>
|
|
1032
|
+
</div>
|
|
1033
|
+
<span class="eval-summary-count">3 runs</span>
|
|
1034
|
+
</div>
|
|
1035
|
+
<div class="eval-summary-card">
|
|
1036
|
+
<span class="eval-summary-score score-good">78<span class="eval-summary-pct">%</span></span>
|
|
1037
|
+
<span class="eval-summary-name">PRECISION</span>
|
|
1038
|
+
<div class="eval-summary-bar">
|
|
1039
|
+
<div class="eval-summary-bar-fill score-good" style="width: 78%"></div>
|
|
1040
|
+
</div>
|
|
1041
|
+
<span class="eval-summary-count">3 runs</span>
|
|
1042
|
+
</div>
|
|
1043
|
+
</div>
|
|
1044
|
+
</div>
|
|
1045
|
+
|
|
1046
|
+
<h3 class="ds-subsection-title">With Score Labels</h3>
|
|
1047
|
+
<div class="ds-workbench-demo">
|
|
1048
|
+
<div class="eval-summary">
|
|
1049
|
+
<div class="eval-summary-card">
|
|
1050
|
+
<span class="eval-summary-score score-excellent">100<span class="eval-summary-pct">%</span></span>
|
|
1051
|
+
<span class="eval-summary-name">ACCURACY</span>
|
|
1052
|
+
<div class="eval-summary-bar">
|
|
1053
|
+
<div class="eval-summary-bar-fill score-excellent" style="width: 100%"></div>
|
|
1054
|
+
</div>
|
|
1055
|
+
<span class="eval-summary-label score-excellent">EXCELLENT</span>
|
|
1056
|
+
</div>
|
|
1057
|
+
<div class="eval-summary-card">
|
|
1058
|
+
<span class="eval-summary-score score-fair">44<span class="eval-summary-pct">%</span></span>
|
|
1059
|
+
<span class="eval-summary-name">F1</span>
|
|
1060
|
+
<div class="eval-summary-bar">
|
|
1061
|
+
<div class="eval-summary-bar-fill score-fair" style="width: 44%"></div>
|
|
1062
|
+
</div>
|
|
1063
|
+
<span class="eval-summary-label score-fair">FAIR</span>
|
|
1064
|
+
</div>
|
|
1065
|
+
</div>
|
|
1066
|
+
</div>
|
|
1067
|
+
</section>
|
|
1068
|
+
|
|
1069
|
+
<!-- Result Comparison Panels -->
|
|
1070
|
+
<section class="ds-section">
|
|
1071
|
+
<h2 class="ds-section-title">Result Comparison Panels</h2>
|
|
1072
|
+
<p class="ds-description">Side-by-side panels for comparing prediction vs expected values. Used on runner result detail pages.</p>
|
|
1073
|
+
|
|
1074
|
+
<div class="ds-workbench-demo">
|
|
1075
|
+
<div class="result-comparison">
|
|
1076
|
+
<div class="result-panel">
|
|
1077
|
+
<div class="result-panel-header">
|
|
1078
|
+
<div style="display: flex; align-items: center; gap: var(--space-2);">
|
|
1079
|
+
<svg class="icon-sm" style="color: var(--info-400);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
1080
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
1081
|
+
</svg>
|
|
1082
|
+
<span class="result-panel-label">PREDICTION</span>
|
|
1083
|
+
</div>
|
|
1084
|
+
<span class="text-xs text-muted">8 chars</span>
|
|
1085
|
+
</div>
|
|
1086
|
+
<div class="result-panel-content">
|
|
1087
|
+
<pre class="result-code"><code>Positive</code></pre>
|
|
1088
|
+
</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
<div class="result-panel result-panel--expected">
|
|
1091
|
+
<div class="result-panel-header">
|
|
1092
|
+
<div style="display: flex; align-items: center; gap: var(--space-2);">
|
|
1093
|
+
<svg class="icon-sm" style="color: var(--success-400);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
1094
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
1095
|
+
</svg>
|
|
1096
|
+
<span class="result-panel-label">EXPECTED (GROUND TRUTH)</span>
|
|
1097
|
+
</div>
|
|
1098
|
+
<span class="text-xs text-muted">8 chars</span>
|
|
1099
|
+
</div>
|
|
1100
|
+
<div class="result-panel-content">
|
|
1101
|
+
<pre class="result-code"><code>Positive</code></pre>
|
|
1102
|
+
</div>
|
|
1103
|
+
</div>
|
|
1104
|
+
</div>
|
|
1105
|
+
</div>
|
|
1106
|
+
|
|
1107
|
+
<h3 class="ds-subsection-title">With Empty State</h3>
|
|
1108
|
+
<div class="ds-workbench-demo">
|
|
1109
|
+
<div class="result-comparison">
|
|
1110
|
+
<div class="result-panel">
|
|
1111
|
+
<div class="result-panel-header">
|
|
1112
|
+
<span class="result-panel-label">PREDICTION</span>
|
|
1113
|
+
</div>
|
|
1114
|
+
<div class="result-panel-content">
|
|
1115
|
+
<pre class="result-code"><code>Negative</code></pre>
|
|
1116
|
+
</div>
|
|
1117
|
+
</div>
|
|
1118
|
+
<div class="result-panel result-panel--expected">
|
|
1119
|
+
<div class="result-panel-header">
|
|
1120
|
+
<span class="result-panel-label">EXPECTED</span>
|
|
1121
|
+
</div>
|
|
1122
|
+
<div class="result-panel-content">
|
|
1123
|
+
<div class="result-empty-state">
|
|
1124
|
+
<svg class="icon" style="color: var(--gray-500);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
1125
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
1126
|
+
</svg>
|
|
1127
|
+
<span class="text-sm text-muted">No ground truth defined</span>
|
|
1128
|
+
</div>
|
|
1129
|
+
</div>
|
|
1130
|
+
</div>
|
|
1131
|
+
</div>
|
|
1132
|
+
</div>
|
|
1133
|
+
</section>
|
|
1134
|
+
|
|
1135
|
+
<!-- Clickable Table Rows -->
|
|
1136
|
+
<section class="ds-section">
|
|
1137
|
+
<h2 class="ds-section-title">Clickable Tables</h2>
|
|
1138
|
+
<p class="ds-description">Tables with full-row click targets. No action buttons needed - entire row navigates to detail page.</p>
|
|
1139
|
+
|
|
1140
|
+
<div class="table-wrapper">
|
|
1141
|
+
<table class="table table-clickable">
|
|
1142
|
+
<thead>
|
|
1143
|
+
<tr>
|
|
1144
|
+
<th>NAME</th>
|
|
1145
|
+
<th>STATUS</th>
|
|
1146
|
+
<th class="text-right">RUNS</th>
|
|
1147
|
+
<th class="text-right">ACCURACY</th>
|
|
1148
|
+
<th class="text-right">F1</th>
|
|
1149
|
+
<th></th>
|
|
1150
|
+
</tr>
|
|
1151
|
+
</thead>
|
|
1152
|
+
<tbody>
|
|
1153
|
+
<tr class="clickable-row">
|
|
1154
|
+
<td>
|
|
1155
|
+
<div>
|
|
1156
|
+
<span class="row-title">test exp</span>
|
|
1157
|
+
<div class="text-xs text-muted" style="margin-top: 2px;">Sentiment analysis test</div>
|
|
1158
|
+
</div>
|
|
1159
|
+
</td>
|
|
1160
|
+
<td>
|
|
1161
|
+
<span class="status-indicator">
|
|
1162
|
+
<span class="status-dot status-dot-success"></span>
|
|
1163
|
+
<span class="status-text">Completed</span>
|
|
1164
|
+
</span>
|
|
1165
|
+
</td>
|
|
1166
|
+
<td class="text-right cell-numeric">3</td>
|
|
1167
|
+
<td class="text-right"><span class="score-pill score-excellent">100%</span></td>
|
|
1168
|
+
<td class="text-right"><span class="score-pill score-poor">18%</span></td>
|
|
1169
|
+
<td class="text-right">
|
|
1170
|
+
<svg class="icon-sm" style="color: var(--gray-500);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
1171
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
1172
|
+
</svg>
|
|
1173
|
+
</td>
|
|
1174
|
+
</tr>
|
|
1175
|
+
<tr class="clickable-row">
|
|
1176
|
+
<td>
|
|
1177
|
+
<div>
|
|
1178
|
+
<span class="row-title">sdf</span>
|
|
1179
|
+
<div class="text-xs text-muted" style="margin-top: 2px;">Another experiment</div>
|
|
1180
|
+
</div>
|
|
1181
|
+
</td>
|
|
1182
|
+
<td>
|
|
1183
|
+
<span class="status-indicator">
|
|
1184
|
+
<span class="status-dot status-dot-warning"></span>
|
|
1185
|
+
<span class="status-text">Pending</span>
|
|
1186
|
+
</span>
|
|
1187
|
+
</td>
|
|
1188
|
+
<td class="text-right cell-numeric">0</td>
|
|
1189
|
+
<td class="text-right"><span class="score-empty">—</span></td>
|
|
1190
|
+
<td class="text-right"><span class="score-empty">—</span></td>
|
|
1191
|
+
<td class="text-right">
|
|
1192
|
+
<svg class="icon-sm" style="color: var(--gray-500);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
1193
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
1194
|
+
</svg>
|
|
1195
|
+
</td>
|
|
1196
|
+
</tr>
|
|
1197
|
+
</tbody>
|
|
1198
|
+
</table>
|
|
1199
|
+
</div>
|
|
1200
|
+
</section>
|
|
1201
|
+
|
|
1202
|
+
<!-- Collapsible Sidebars & Resizable Panels -->
|
|
1203
|
+
<section class="ds-section">
|
|
1204
|
+
<h2 class="ds-section-title">Collapsible Sidebars & Resizable Panels</h2>
|
|
1205
|
+
<p class="ds-description">Panels that can be collapsed to maximize workspace. State persists in localStorage. Use Stimulus controllers for interactivity.</p>
|
|
1206
|
+
|
|
1207
|
+
<h3 class="ds-subsection-title">Design Principles</h3>
|
|
1208
|
+
<div class="ds-principles" style="margin-bottom: var(--space-6);">
|
|
1209
|
+
<div class="ds-principle">
|
|
1210
|
+
<h3>12. Collapsible Panels</h3>
|
|
1211
|
+
<p>Sidebars and panels should be collapsible to give users control over their workspace. Collapsed state should show minimal visual indicators (dots for list items) and persist across sessions via localStorage.</p>
|
|
1212
|
+
</div>
|
|
1213
|
+
<div class="ds-principle">
|
|
1214
|
+
<h3>13. Resizable Panels</h3>
|
|
1215
|
+
<p>Panels should be resizable via drag handles. The handle should be subtle (6px wide) with hover/active states. Width constraints (min/max) prevent unusable sizes.</p>
|
|
1216
|
+
</div>
|
|
1217
|
+
</div>
|
|
1218
|
+
|
|
1219
|
+
<h3 class="ds-subsection-title">Collapse Button</h3>
|
|
1220
|
+
<div class="ds-workbench-demo">
|
|
1221
|
+
<div style="display: flex; gap: var(--space-4); align-items: center;">
|
|
1222
|
+
<div>
|
|
1223
|
+
<span class="text-xs text-muted mb-2" style="display: block;">Default</span>
|
|
1224
|
+
<button type="button" class="sidebar-collapse-btn" style="position: relative;">
|
|
1225
|
+
<svg viewBox="0 0 20 20" fill="currentColor" style="width: 14px; height: 14px;">
|
|
1226
|
+
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
1227
|
+
</svg>
|
|
1228
|
+
</button>
|
|
1229
|
+
</div>
|
|
1230
|
+
<div>
|
|
1231
|
+
<span class="text-xs text-muted mb-2" style="display: block;">Hover</span>
|
|
1232
|
+
<button type="button" class="sidebar-collapse-btn" style="position: relative; color: var(--gray-200); background: var(--gray-700);">
|
|
1233
|
+
<svg viewBox="0 0 20 20" fill="currentColor" style="width: 14px; height: 14px;">
|
|
1234
|
+
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
1235
|
+
</svg>
|
|
1236
|
+
</button>
|
|
1237
|
+
</div>
|
|
1238
|
+
<div>
|
|
1239
|
+
<span class="text-xs text-muted mb-2" style="display: block;">Collapsed (rotated)</span>
|
|
1240
|
+
<button type="button" class="sidebar-collapse-btn" style="position: relative;">
|
|
1241
|
+
<svg viewBox="0 0 20 20" fill="currentColor" style="width: 14px; height: 14px; transform: rotate(180deg);">
|
|
1242
|
+
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
1243
|
+
</svg>
|
|
1244
|
+
</button>
|
|
1245
|
+
</div>
|
|
1246
|
+
</div>
|
|
1247
|
+
</div>
|
|
1248
|
+
|
|
1249
|
+
<h3 class="ds-subsection-title">Collapsed Sidebar Items (Dots)</h3>
|
|
1250
|
+
<div class="ds-workbench-demo">
|
|
1251
|
+
<div style="width: 48px; background: var(--gray-900); padding: var(--space-2); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-1);">
|
|
1252
|
+
<div style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--gray-700); border-radius: var(--radius-sm);">
|
|
1253
|
+
<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--accent-500);"></span>
|
|
1254
|
+
</div>
|
|
1255
|
+
<div style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);">
|
|
1256
|
+
<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--gray-600);"></span>
|
|
1257
|
+
</div>
|
|
1258
|
+
<div style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);">
|
|
1259
|
+
<span style="width: 8px; height: 8px; border-radius: 50%; background: var(--gray-600);"></span>
|
|
1260
|
+
</div>
|
|
1261
|
+
</div>
|
|
1262
|
+
<p class="text-xs text-muted mt-2">Active item has accent-colored dot, others are muted gray.</p>
|
|
1263
|
+
</div>
|
|
1264
|
+
|
|
1265
|
+
<h3 class="ds-subsection-title">Resize Handle</h3>
|
|
1266
|
+
<div class="ds-workbench-demo">
|
|
1267
|
+
<div style="display: flex; gap: var(--space-6); align-items: center;">
|
|
1268
|
+
<div>
|
|
1269
|
+
<span class="text-xs text-muted mb-2" style="display: block;">Default</span>
|
|
1270
|
+
<div style="width: 6px; height: 80px; background: transparent; border-radius: 2px; cursor: col-resize;"></div>
|
|
1271
|
+
</div>
|
|
1272
|
+
<div>
|
|
1273
|
+
<span class="text-xs text-muted mb-2" style="display: block;">Hover</span>
|
|
1274
|
+
<div style="width: 6px; height: 80px; background: var(--gray-800); border-radius: 2px; cursor: col-resize; position: relative;">
|
|
1275
|
+
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 32px; background: var(--gray-700); border-radius: 1px;"></div>
|
|
1276
|
+
</div>
|
|
1277
|
+
</div>
|
|
1278
|
+
<div>
|
|
1279
|
+
<span class="text-xs text-muted mb-2" style="display: block;">Dragging</span>
|
|
1280
|
+
<div style="width: 6px; height: 80px; background: var(--accent-500); border-radius: 2px; cursor: col-resize; position: relative;">
|
|
1281
|
+
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 32px; background: var(--accent-400); border-radius: 1px;"></div>
|
|
1282
|
+
</div>
|
|
1283
|
+
</div>
|
|
1284
|
+
</div>
|
|
1285
|
+
</div>
|
|
1286
|
+
|
|
1287
|
+
<h3 class="ds-subsection-title">Stimulus Controller Pattern</h3>
|
|
1288
|
+
<div class="ds-code-block">
|
|
1289
|
+
<pre style="margin: 0; font-size: 12px; color: var(--gray-300); overflow-x: auto;"><code>// Collapsible sidebar controller
|
|
1290
|
+
application.register("collapsible-sidebar", class extends Stimulus.Controller {
|
|
1291
|
+
static values = { key: String }
|
|
1292
|
+
|
|
1293
|
+
connect() {
|
|
1294
|
+
const isCollapsed = localStorage.getItem(this.keyValue) === 'true'
|
|
1295
|
+
if (isCollapsed) this.element.classList.add('collapsed')
|
|
1296
|
+
}
|
|
1297
|
+
|
|
1298
|
+
toggle() {
|
|
1299
|
+
this.element.classList.toggle('collapsed')
|
|
1300
|
+
localStorage.setItem(this.keyValue, this.element.classList.contains('collapsed'))
|
|
1301
|
+
}
|
|
1302
|
+
})
|
|
1303
|
+
|
|
1304
|
+
// Usage in HTML:
|
|
1305
|
+
// <div class="sidebar" data-controller="collapsible-sidebar"
|
|
1306
|
+
// data-collapsible-sidebar-key-value="leva-sidebar-collapsed"></code></pre>
|
|
1307
|
+
</div>
|
|
1308
|
+
</section>
|
|
1309
|
+
|
|
1310
|
+
</div>
|
|
1311
|
+
|
|
1312
|
+
<style>
|
|
1313
|
+
/* Design System Page Styles */
|
|
1314
|
+
.design-system {
|
|
1315
|
+
max-width: 1000px;
|
|
1316
|
+
margin: 0 auto;
|
|
1317
|
+
padding: var(--space-10) var(--space-6);
|
|
1318
|
+
animation: fadeInUp 0.6s ease-out;
|
|
1319
|
+
}
|
|
1320
|
+
|
|
1321
|
+
@keyframes fadeInUp {
|
|
1322
|
+
from {
|
|
1323
|
+
opacity: 0;
|
|
1324
|
+
transform: translateY(16px);
|
|
1325
|
+
}
|
|
1326
|
+
to {
|
|
1327
|
+
opacity: 1;
|
|
1328
|
+
transform: translateY(0);
|
|
1329
|
+
}
|
|
1330
|
+
}
|
|
1331
|
+
|
|
1332
|
+
.ds-section {
|
|
1333
|
+
animation: fadeInUp 0.6s ease-out backwards;
|
|
1334
|
+
}
|
|
1335
|
+
|
|
1336
|
+
.ds-section:nth-child(2) { animation-delay: 0.05s; }
|
|
1337
|
+
.ds-section:nth-child(3) { animation-delay: 0.1s; }
|
|
1338
|
+
.ds-section:nth-child(4) { animation-delay: 0.15s; }
|
|
1339
|
+
.ds-section:nth-child(5) { animation-delay: 0.2s; }
|
|
1340
|
+
.ds-section:nth-child(6) { animation-delay: 0.25s; }
|
|
1341
|
+
.ds-section:nth-child(7) { animation-delay: 0.3s; }
|
|
1342
|
+
.ds-section:nth-child(8) { animation-delay: 0.35s; }
|
|
1343
|
+
.ds-section:nth-child(9) { animation-delay: 0.4s; }
|
|
1344
|
+
.ds-section:nth-child(10) { animation-delay: 0.45s; }
|
|
1345
|
+
.ds-section:nth-child(11) { animation-delay: 0.5s; }
|
|
1346
|
+
.ds-section:nth-child(12) { animation-delay: 0.55s; }
|
|
1347
|
+
|
|
1348
|
+
.ds-header {
|
|
1349
|
+
margin-bottom: var(--space-12);
|
|
1350
|
+
padding-bottom: var(--space-8);
|
|
1351
|
+
border-bottom: 1px solid var(--border-color);
|
|
1352
|
+
}
|
|
1353
|
+
|
|
1354
|
+
.ds-header h1 {
|
|
1355
|
+
font-size: var(--text-3xl);
|
|
1356
|
+
margin-bottom: var(--space-3);
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
.ds-intro {
|
|
1360
|
+
font-size: var(--text-lg);
|
|
1361
|
+
color: var(--text-secondary);
|
|
1362
|
+
max-width: 600px;
|
|
1363
|
+
}
|
|
1364
|
+
|
|
1365
|
+
.ds-section {
|
|
1366
|
+
margin-bottom: var(--space-16);
|
|
1367
|
+
}
|
|
1368
|
+
|
|
1369
|
+
.ds-section-title {
|
|
1370
|
+
font-size: var(--text-2xl);
|
|
1371
|
+
margin-bottom: var(--space-6);
|
|
1372
|
+
padding-bottom: var(--space-3);
|
|
1373
|
+
border-bottom: 1px solid var(--border-color);
|
|
1374
|
+
}
|
|
1375
|
+
|
|
1376
|
+
.ds-subsection-title {
|
|
1377
|
+
font-size: var(--text-sm);
|
|
1378
|
+
font-weight: 600;
|
|
1379
|
+
text-transform: uppercase;
|
|
1380
|
+
letter-spacing: 0.05em;
|
|
1381
|
+
color: var(--text-tertiary);
|
|
1382
|
+
margin-top: var(--space-8);
|
|
1383
|
+
margin-bottom: var(--space-4);
|
|
1384
|
+
}
|
|
1385
|
+
|
|
1386
|
+
.ds-description {
|
|
1387
|
+
color: var(--text-secondary);
|
|
1388
|
+
margin-bottom: var(--space-6);
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
/* Color Swatches */
|
|
1392
|
+
.ds-color-grid {
|
|
1393
|
+
display: flex;
|
|
1394
|
+
flex-wrap: wrap;
|
|
1395
|
+
gap: var(--space-3);
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
.ds-color-swatch {
|
|
1399
|
+
display: flex;
|
|
1400
|
+
flex-direction: column;
|
|
1401
|
+
align-items: center;
|
|
1402
|
+
gap: var(--space-2);
|
|
1403
|
+
}
|
|
1404
|
+
|
|
1405
|
+
.ds-color-preview {
|
|
1406
|
+
width: 64px;
|
|
1407
|
+
height: 64px;
|
|
1408
|
+
border-radius: var(--radius-md);
|
|
1409
|
+
border: 1px solid var(--border-color);
|
|
1410
|
+
}
|
|
1411
|
+
|
|
1412
|
+
.ds-color-name {
|
|
1413
|
+
font-size: var(--text-xs);
|
|
1414
|
+
font-family: var(--font-mono);
|
|
1415
|
+
color: var(--text-tertiary);
|
|
1416
|
+
}
|
|
1417
|
+
|
|
1418
|
+
/* Typography Samples */
|
|
1419
|
+
.ds-typography-samples {
|
|
1420
|
+
display: flex;
|
|
1421
|
+
flex-direction: column;
|
|
1422
|
+
gap: var(--space-6);
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
.ds-type-sample {
|
|
1426
|
+
padding: var(--space-4);
|
|
1427
|
+
background: var(--gray-800);
|
|
1428
|
+
border-radius: var(--radius-md);
|
|
1429
|
+
}
|
|
1430
|
+
|
|
1431
|
+
.ds-type-label {
|
|
1432
|
+
display: block;
|
|
1433
|
+
font-size: var(--text-xs);
|
|
1434
|
+
font-weight: 500;
|
|
1435
|
+
text-transform: uppercase;
|
|
1436
|
+
letter-spacing: 0.05em;
|
|
1437
|
+
color: var(--text-tertiary);
|
|
1438
|
+
margin-bottom: var(--space-2);
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1441
|
+
/* Spacing Samples */
|
|
1442
|
+
.ds-spacing-samples {
|
|
1443
|
+
display: flex;
|
|
1444
|
+
flex-wrap: wrap;
|
|
1445
|
+
gap: var(--space-6);
|
|
1446
|
+
align-items: flex-end;
|
|
1447
|
+
}
|
|
1448
|
+
|
|
1449
|
+
.ds-spacing-item {
|
|
1450
|
+
display: flex;
|
|
1451
|
+
flex-direction: column;
|
|
1452
|
+
align-items: center;
|
|
1453
|
+
gap: var(--space-2);
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1456
|
+
.ds-spacing-box {
|
|
1457
|
+
background: var(--accent-500);
|
|
1458
|
+
border-radius: var(--radius-sm);
|
|
1459
|
+
}
|
|
1460
|
+
|
|
1461
|
+
.ds-spacing-item span {
|
|
1462
|
+
font-size: var(--text-xs);
|
|
1463
|
+
font-family: var(--font-mono);
|
|
1464
|
+
color: var(--text-tertiary);
|
|
1465
|
+
}
|
|
1466
|
+
|
|
1467
|
+
/* Button Rows */
|
|
1468
|
+
.ds-button-row {
|
|
1469
|
+
display: flex;
|
|
1470
|
+
flex-wrap: wrap;
|
|
1471
|
+
gap: var(--space-3);
|
|
1472
|
+
align-items: center;
|
|
1473
|
+
margin-bottom: var(--space-4);
|
|
1474
|
+
}
|
|
1475
|
+
|
|
1476
|
+
/* Form Demo */
|
|
1477
|
+
.ds-form-demo {
|
|
1478
|
+
max-width: 400px;
|
|
1479
|
+
}
|
|
1480
|
+
|
|
1481
|
+
/* Cards Grid */
|
|
1482
|
+
.ds-cards-grid {
|
|
1483
|
+
display: grid;
|
|
1484
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
1485
|
+
gap: var(--space-6);
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
.ds-cards-grid .card,
|
|
1489
|
+
.ds-cards-grid .card-subtle {
|
|
1490
|
+
height: 100%;
|
|
1491
|
+
}
|
|
1492
|
+
|
|
1493
|
+
/* Badge Row */
|
|
1494
|
+
.ds-badge-row {
|
|
1495
|
+
display: flex;
|
|
1496
|
+
flex-wrap: wrap;
|
|
1497
|
+
gap: var(--space-3);
|
|
1498
|
+
margin-bottom: var(--space-4);
|
|
1499
|
+
}
|
|
1500
|
+
|
|
1501
|
+
/* Scores Grid */
|
|
1502
|
+
.ds-scores-grid {
|
|
1503
|
+
display: grid;
|
|
1504
|
+
grid-template-columns: repeat(5, 1fr);
|
|
1505
|
+
gap: var(--space-4);
|
|
1506
|
+
margin-bottom: var(--space-8);
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
.ds-scores-grid .score-card {
|
|
1510
|
+
text-align: center;
|
|
1511
|
+
padding: var(--space-4);
|
|
1512
|
+
}
|
|
1513
|
+
|
|
1514
|
+
/* Panel Demo */
|
|
1515
|
+
.ds-panel-demo {
|
|
1516
|
+
background: var(--gray-900);
|
|
1517
|
+
padding: var(--space-6);
|
|
1518
|
+
border-radius: var(--radius-lg);
|
|
1519
|
+
}
|
|
1520
|
+
|
|
1521
|
+
/* Principles Section */
|
|
1522
|
+
.ds-principles {
|
|
1523
|
+
display: flex;
|
|
1524
|
+
flex-direction: column;
|
|
1525
|
+
gap: var(--space-8);
|
|
1526
|
+
}
|
|
1527
|
+
|
|
1528
|
+
.ds-principle {
|
|
1529
|
+
padding: var(--space-5);
|
|
1530
|
+
background: var(--gray-800);
|
|
1531
|
+
border-radius: var(--radius-lg);
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1534
|
+
.ds-principle h3 {
|
|
1535
|
+
font-size: var(--text-base);
|
|
1536
|
+
margin-bottom: var(--space-3);
|
|
1537
|
+
color: var(--gray-100);
|
|
1538
|
+
}
|
|
1539
|
+
|
|
1540
|
+
.ds-principle p {
|
|
1541
|
+
color: var(--gray-300);
|
|
1542
|
+
margin-bottom: var(--space-4);
|
|
1543
|
+
font-size: var(--text-sm);
|
|
1544
|
+
}
|
|
1545
|
+
|
|
1546
|
+
.ds-principle-example {
|
|
1547
|
+
display: flex;
|
|
1548
|
+
align-items: center;
|
|
1549
|
+
gap: var(--space-3);
|
|
1550
|
+
flex-wrap: wrap;
|
|
1551
|
+
margin-bottom: var(--space-3);
|
|
1552
|
+
}
|
|
1553
|
+
|
|
1554
|
+
.ds-do {
|
|
1555
|
+
font-size: var(--text-xs);
|
|
1556
|
+
font-weight: 600;
|
|
1557
|
+
color: var(--success-400);
|
|
1558
|
+
text-transform: uppercase;
|
|
1559
|
+
}
|
|
1560
|
+
|
|
1561
|
+
.ds-dont {
|
|
1562
|
+
font-size: var(--text-xs);
|
|
1563
|
+
font-weight: 600;
|
|
1564
|
+
color: var(--error-400);
|
|
1565
|
+
text-transform: uppercase;
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
.ds-spacing-comparison {
|
|
1569
|
+
display: flex;
|
|
1570
|
+
gap: var(--space-6);
|
|
1571
|
+
}
|
|
1572
|
+
|
|
1573
|
+
.ds-spacing-demo {
|
|
1574
|
+
flex: 1;
|
|
1575
|
+
padding: var(--space-4);
|
|
1576
|
+
background: var(--gray-900);
|
|
1577
|
+
border-radius: var(--radius-md);
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1580
|
+
.ds-spacing-demo > span {
|
|
1581
|
+
display: block;
|
|
1582
|
+
margin-bottom: var(--space-3);
|
|
1583
|
+
font-size: var(--text-xs);
|
|
1584
|
+
font-weight: 600;
|
|
1585
|
+
}
|
|
1586
|
+
|
|
1587
|
+
/* Workbench Demo */
|
|
1588
|
+
.ds-workbench-demo {
|
|
1589
|
+
padding: var(--space-5);
|
|
1590
|
+
background: var(--gray-900);
|
|
1591
|
+
border-radius: var(--radius-lg);
|
|
1592
|
+
margin-bottom: var(--space-4);
|
|
1593
|
+
}
|
|
1594
|
+
|
|
1595
|
+
/* Status Indicator */
|
|
1596
|
+
.status-indicator {
|
|
1597
|
+
display: inline-flex;
|
|
1598
|
+
align-items: center;
|
|
1599
|
+
gap: var(--space-2);
|
|
1600
|
+
}
|
|
1601
|
+
|
|
1602
|
+
.status-text {
|
|
1603
|
+
font-size: var(--text-sm);
|
|
1604
|
+
color: var(--gray-300);
|
|
1605
|
+
}
|
|
1606
|
+
|
|
1607
|
+
/* Score Pills */
|
|
1608
|
+
.score-pill {
|
|
1609
|
+
display: inline-block;
|
|
1610
|
+
padding: var(--space-1) var(--space-2);
|
|
1611
|
+
border-radius: var(--radius-sm);
|
|
1612
|
+
font-family: var(--font-mono);
|
|
1613
|
+
font-size: var(--text-sm);
|
|
1614
|
+
font-weight: 500;
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
.score-pill.score-excellent {
|
|
1618
|
+
background: rgba(125, 179, 103, 0.15);
|
|
1619
|
+
color: var(--success-400);
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
.score-pill.score-good {
|
|
1623
|
+
background: rgba(159, 204, 111, 0.15);
|
|
1624
|
+
color: #9fcc6f;
|
|
1625
|
+
}
|
|
1626
|
+
|
|
1627
|
+
.score-pill.score-fair {
|
|
1628
|
+
background: rgba(212, 168, 74, 0.15);
|
|
1629
|
+
color: var(--warning-400);
|
|
1630
|
+
}
|
|
1631
|
+
|
|
1632
|
+
.score-pill.score-poor {
|
|
1633
|
+
background: rgba(232, 161, 88, 0.15);
|
|
1634
|
+
color: #e8a158;
|
|
1635
|
+
}
|
|
1636
|
+
|
|
1637
|
+
.score-pill.score-bad {
|
|
1638
|
+
background: rgba(207, 111, 98, 0.15);
|
|
1639
|
+
color: var(--error-400);
|
|
1640
|
+
}
|
|
1641
|
+
|
|
1642
|
+
.score-empty {
|
|
1643
|
+
color: var(--gray-600);
|
|
1644
|
+
font-family: var(--font-mono);
|
|
1645
|
+
font-size: var(--text-sm);
|
|
1646
|
+
}
|
|
1647
|
+
|
|
1648
|
+
/* Result Metadata Bar */
|
|
1649
|
+
.result-meta-bar {
|
|
1650
|
+
display: flex;
|
|
1651
|
+
align-items: center;
|
|
1652
|
+
flex-wrap: wrap;
|
|
1653
|
+
gap: var(--space-4);
|
|
1654
|
+
padding: var(--space-3) var(--space-4);
|
|
1655
|
+
background: var(--gray-800);
|
|
1656
|
+
border-radius: var(--radius-md);
|
|
1657
|
+
}
|
|
1658
|
+
|
|
1659
|
+
.result-meta-item {
|
|
1660
|
+
display: flex;
|
|
1661
|
+
align-items: center;
|
|
1662
|
+
gap: var(--space-2);
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1665
|
+
.result-meta-label {
|
|
1666
|
+
font-size: 10px;
|
|
1667
|
+
font-weight: 600;
|
|
1668
|
+
color: var(--gray-500);
|
|
1669
|
+
text-transform: uppercase;
|
|
1670
|
+
letter-spacing: 0.04em;
|
|
1671
|
+
}
|
|
1672
|
+
|
|
1673
|
+
.result-meta-value {
|
|
1674
|
+
font-size: var(--text-sm);
|
|
1675
|
+
color: var(--gray-200);
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
.result-meta-link {
|
|
1679
|
+
font-size: var(--text-sm);
|
|
1680
|
+
color: var(--accent-400);
|
|
1681
|
+
}
|
|
1682
|
+
|
|
1683
|
+
.result-meta-divider {
|
|
1684
|
+
width: 1px;
|
|
1685
|
+
height: 20px;
|
|
1686
|
+
background: var(--gray-700);
|
|
1687
|
+
}
|
|
1688
|
+
|
|
1689
|
+
/* Eval Summary Label */
|
|
1690
|
+
.eval-summary-label {
|
|
1691
|
+
font-size: 10px;
|
|
1692
|
+
font-weight: 600;
|
|
1693
|
+
text-transform: uppercase;
|
|
1694
|
+
letter-spacing: 0.04em;
|
|
1695
|
+
margin-top: var(--space-1);
|
|
1696
|
+
}
|
|
1697
|
+
|
|
1698
|
+
/* Result Empty State */
|
|
1699
|
+
.result-empty-state {
|
|
1700
|
+
display: flex;
|
|
1701
|
+
flex-direction: column;
|
|
1702
|
+
align-items: center;
|
|
1703
|
+
justify-content: center;
|
|
1704
|
+
gap: var(--space-2);
|
|
1705
|
+
padding: var(--space-6);
|
|
1706
|
+
text-align: center;
|
|
1707
|
+
}
|
|
1708
|
+
|
|
1709
|
+
/* Result Panel Header with flex */
|
|
1710
|
+
.result-panel-header {
|
|
1711
|
+
display: flex;
|
|
1712
|
+
align-items: center;
|
|
1713
|
+
justify-content: space-between;
|
|
1714
|
+
}
|
|
1715
|
+
|
|
1716
|
+
/* Code Block for Design System */
|
|
1717
|
+
.ds-code-block {
|
|
1718
|
+
background: var(--gray-900);
|
|
1719
|
+
border: 1px solid var(--gray-800);
|
|
1720
|
+
border-radius: var(--radius-md);
|
|
1721
|
+
padding: var(--space-4);
|
|
1722
|
+
overflow-x: auto;
|
|
1723
|
+
}
|
|
1724
|
+
|
|
1725
|
+
.ds-code-block code {
|
|
1726
|
+
font-family: var(--font-mono);
|
|
1727
|
+
font-size: 12px;
|
|
1728
|
+
line-height: 1.6;
|
|
1729
|
+
color: var(--gray-300);
|
|
1730
|
+
}
|
|
1731
|
+
</style>
|