Skip to content

Commit c4fb535

Browse files
diegochinediegochine
committed
Various fixes
1 parent e797867 commit c4fb535

File tree

6 files changed

+606
-201
lines changed

6 files changed

+606
-201
lines changed

‎AGENTS.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ All Probability Lab-specific DOM elements use the `pl-` prefix:
113113

114114
- Mode/configuration: `pl-mode`, `pl-single-config`, `pl-two-config`
115115
- Devices: `pl-device`, `pl-device-a`, `pl-device-b`
116-
- Controls: `pl-reset`, `pl-step`, `pl-step-size`, `pl-auto`, `pl-speed`
116+
- Controls: `pl-reset`, `pl-step`, `pl-step-size`, `pl-auto`
117117
- Seed: `pl-seed`, `pl-apply-seed`, `pl-randomize-seed`
118118
- Event: `pl-event-card`, `pl-event-outcomes`, `pl-event-est`, `pl-event-theory`
119119
- Visualization: `pl-device-view`, `pl-trials`, `pl-last`

‎client/app.css‎

Lines changed: 222 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,139 @@
175175
width: 120px;
176176
}
177177

178-
.bespoke .pl-auto-row {
179-
margin-top: var(--UI-Spacing-spacing-xs);
178+
/* ===== LIVE TRIAL CONTROLS ===== */
179+
180+
.bespoke .pl-trial-controls {
181+
display: flex;
182+
flex-direction: column;
183+
gap: var(--UI-Spacing-spacing-s);
184+
padding: var(--UI-Spacing-spacing-s) var(--UI-Spacing-spacing-ml);
185+
margin-bottom: var(--UI-Spacing-spacing-s);
186+
}
187+
188+
.bespoke .pl-control-row {
189+
display: flex;
190+
align-items: center;
191+
gap: var(--UI-Spacing-spacing-ml);
192+
flex-wrap: wrap;
193+
}
194+
195+
.bespoke .pl-control-row-auto {
196+
padding-top: var(--UI-Spacing-spacing-s);
197+
}
198+
199+
.bespoke .pl-step-size-group {
200+
display: flex;
201+
align-items: center;
202+
gap: var(--UI-Spacing-spacing-s);
203+
flex: 1;
204+
min-width: 0;
205+
}
206+
207+
.bespoke .pl-control-label {
208+
font-size: var(--Fonts-Body-Default-sm);
209+
font-weight: 500;
210+
color: var(--Colors-Text-Body-Default);
211+
white-space: nowrap;
212+
}
213+
214+
.bespoke .pl-button-group {
215+
display: flex;
216+
border-radius: var(--UI-Radius-radius-s);
217+
overflow: hidden;
218+
border: 1.5px solid var(--Colors-Stroke-Default);
219+
background: var(--Colors-Backgrounds-Main-Default);
220+
}
221+
222+
.bespoke .pl-button-group-item {
223+
padding: var(--UI-Spacing-spacing-xs) var(--UI-Spacing-spacing-ms);
224+
border: none;
225+
background: var(--Colors-Backgrounds-Main-Default);
226+
color: var(--Colors-Text-Body-Default);
227+
font-size: var(--Fonts-Body-Default-sm);
228+
font-weight: 500;
229+
cursor: pointer;
230+
transition: all 0.2s ease;
231+
border-right: 1px solid var(--Colors-Stroke-Light);
232+
min-width: 44px;
233+
}
234+
235+
.bespoke .pl-button-group-item:last-child {
236+
border-right: none;
237+
}
238+
239+
.bespoke .pl-button-group-item:hover {
240+
background: var(--Colors-Backgrounds-Main-Light);
241+
}
242+
243+
.bespoke .pl-button-group-item.active {
244+
background: var(--Colors-Primary-Default);
245+
color: var(--Colors-Text-Body-White);
246+
font-weight: 600;
247+
}
248+
249+
.bespoke .pl-action-buttons {
250+
display: flex;
251+
gap: var(--UI-Spacing-spacing-s);
252+
margin-left: auto;
253+
}
254+
255+
.bespoke .pl-action-buttons .button-primary {
256+
font-size: var(--Fonts-Body-Default-md);
257+
height: 40px;
258+
padding: 0 var(--UI-Spacing-spacing-ml);
259+
font-weight: 600;
260+
min-width: 120px;
261+
}
262+
263+
.bespoke .pl-action-buttons .button-secondary {
264+
height: 40px;
265+
padding: 0 var(--UI-Spacing-spacing-ml);
266+
}
267+
268+
/* ===== LIVE TRIAL DEVICE SECTION ===== */
269+
270+
.bespoke .pl-device-section {
271+
display: flex;
272+
align-items: center;
273+
justify-content: center;
274+
padding: var(--UI-Spacing-spacing-ml) 0;
275+
margin-bottom: var(--UI-Spacing-spacing-s);
276+
}
277+
278+
/* ===== LIVE TRIAL METRICS ===== */
279+
280+
.bespoke .pl-trial-metrics {
281+
display: grid;
282+
grid-template-columns: 1fr 1fr;
283+
gap: var(--UI-Spacing-spacing-s);
284+
padding-top: var(--UI-Spacing-spacing-ml);
285+
border-top: 1px solid var(--Colors-Stroke-Light);
286+
}
287+
288+
.bespoke .pl-trial-metric {
289+
display: flex;
290+
flex-direction: column;
291+
align-items: flex-start;
292+
justify-content: flex-start;
293+
gap: var(--UI-Spacing-spacing-xxs);
294+
padding: var(--UI-Spacing-spacing-s);
295+
}
296+
297+
.bespoke .pl-trial-metric .pl-metric-label {
298+
font-size: var(--Fonts-Body-Default-xs);
299+
color: var(--Colors-Text-Body-Medium);
300+
text-transform: uppercase;
301+
letter-spacing: 0.5px;
302+
font-weight: 600;
303+
}
304+
305+
.bespoke .pl-trial-metric .pl-metric-value {
306+
font-size: var(--Fonts-Body-Default-xxxl);
307+
font-family: var(--heading-family);
308+
font-weight: 700;
309+
color: var(--Colors-Primary-Default);
310+
line-height: 1.2;
180311
}
181312

182313
.bespoke .pl-two-config-grid {
@@ -216,14 +347,6 @@
216347
gap: var(--UI-Spacing-spacing-xl);
217348
}
218349

219-
.bespoke .pl-live {
220-
display: flex;
221-
align-items: center;
222-
justify-content: center;
223-
gap: var(--UI-Spacing-spacing-xl);
224-
padding: var(--UI-Spacing-spacing-ml) 0;
225-
}
226-
227350
.bespoke .pl-device {
228351
width: 160px;
229352
height: 160px;
@@ -233,6 +356,7 @@
233356
border: 1px solid var(--Colors-Stroke-Default);
234357
background: var(--Colors-Backgrounds-Main-Top);
235358
transition: transform 0.2s ease;
359+
box-shadow: 0 4px 8px var(--Colors-Shadow-Soft);
236360
}
237361

238362
.bespoke .pl-device {
@@ -385,38 +509,6 @@
385509
top: -5px;
386510
}
387511

388-
.bespoke .pl-live-metrics {
389-
display: grid;
390-
gap: var(--UI-Spacing-spacing-ml);
391-
flex: 1;
392-
}
393-
394-
.bespoke .pl-live-metric {
395-
display: grid;
396-
gap: var(--UI-Spacing-spacing-xs);
397-
padding: var(--UI-Spacing-spacing-s);
398-
border-radius: var(--UI-Radius-radius-s);
399-
background: var(--Colors-Backgrounds-Main-Top);
400-
border: 1px solid var(--Colors-Stroke-Light);
401-
}
402-
403-
.bespoke .pl-live-label {
404-
font-size: var(--Fonts-Body-Default-sm);
405-
color: var(--Colors-Text-Body-Medium);
406-
text-transform: uppercase;
407-
letter-spacing: 0.5px;
408-
font-weight: 600;
409-
}
410-
411-
.bespoke .pl-live-value {
412-
font-size: var(--Fonts-Body-Default-xxxl);
413-
font-family: var(--heading-family);
414-
font-weight: 700;
415-
color: var(--Colors-Primary-Default);
416-
line-height: 1.2;
417-
transition: color 0.2s ease;
418-
}
419-
420512
.bespoke .pl-canvas {
421513
width: 100%;
422514
height: 280px;
@@ -583,30 +675,6 @@
583675
box-shadow: 0 1px 2px 0 var(--Colors-Shadow-Soft);
584676
}
585677

586-
/* ===== RUN CONTROLS ===== */
587-
588-
.bespoke .pl-run-section {
589-
display: flex;
590-
flex-direction: column;
591-
gap: var(--UI-Spacing-spacing-s);
592-
padding: var(--UI-Spacing-spacing-s);
593-
border-radius: var(--UI-Radius-radius-s);
594-
background: var(--Colors-Backgrounds-Main-Light);
595-
margin: var(--UI-Spacing-spacing-s) 0;
596-
}
597-
598-
.bespoke .pl-primary-actions {
599-
display: flex;
600-
gap: var(--UI-Spacing-spacing-s);
601-
}
602-
603-
.bespoke .pl-primary-actions .button-primary {
604-
flex: 1;
605-
font-size: var(--Fonts-Body-Default-lg);
606-
height: 56px;
607-
font-weight: 600;
608-
}
609-
610678
/* ===== INTERACTIVE FEEDBACK ===== */
611679

612680
/* Smooth transitions on interactive elements */
@@ -680,6 +748,7 @@
680748
}
681749

682750
/* Value update animations */
751+
.bespoke .pl-trial-metric .pl-metric-value.pl-updated,
683752
.bespoke .pl-live-value.pl-updated {
684753
color: var(--Colors-Alert-Success-Default);
685754
animation: pl-flash 0.5s ease;
@@ -738,6 +807,57 @@
738807
font-weight: 600;
739808
}
740809

810+
/* ===== EXPERIMENT SETUP SECTION ===== */
811+
812+
.bespoke .pl-setup-device {
813+
display: flex;
814+
flex-direction: column;
815+
gap: var(--UI-Spacing-spacing-xs);
816+
margin-bottom: var(--UI-Spacing-spacing-ml);
817+
}
818+
819+
.bespoke .pl-setup-device-item {
820+
display: flex;
821+
align-items: center;
822+
gap: var(--UI-Spacing-spacing-xs);
823+
}
824+
825+
.bespoke .pl-setup-icon {
826+
font-size: var(--Fonts-Body-Default-lg);
827+
line-height: 1;
828+
}
829+
830+
.bespoke .pl-setup-device-name {
831+
font-weight: 600;
832+
color: var(--Colors-Text-Body-Default);
833+
font-size: var(--Fonts-Body-Default-sm);
834+
}
835+
836+
.bespoke .pl-setup-label {
837+
font-size: var(--Fonts-Body-Default-xs);
838+
color: var(--Colors-Text-Body-Medium);
839+
}
840+
841+
.bespoke .pl-setup-sample-space {
842+
display: flex;
843+
flex-direction: column;
844+
gap: var(--UI-Spacing-spacing-xs);
845+
}
846+
847+
.bespoke .pl-setup-sample-space-item {
848+
display: flex;
849+
align-items: baseline;
850+
gap: var(--UI-Spacing-spacing-xs);
851+
flex-wrap: wrap;
852+
}
853+
854+
.bespoke .pl-setup-set {
855+
font-family: var(--code-family);
856+
font-size: var(--Fonts-Body-Default-sm);
857+
color: var(--Colors-Text-Body-Default);
858+
font-weight: 500;
859+
}
860+
741861
/* Chart context */
742862
.bespoke .pl-chart-header {
743863
display: flex;
@@ -820,4 +940,40 @@
820940
.bespoke .pl-two-config-grid {
821941
grid-template-columns: 1fr;
822942
}
943+
944+
.bespoke .pl-trial-controls {
945+
padding: var(--UI-Spacing-spacing-s);
946+
}
947+
948+
.bespoke .pl-control-row {
949+
flex-direction: column;
950+
align-items: stretch;
951+
}
952+
953+
.bespoke .pl-step-size-group {
954+
flex-direction: column;
955+
align-items: flex-start;
956+
}
957+
958+
.bespoke .pl-action-buttons {
959+
margin-left: 0;
960+
width: 100%;
961+
}
962+
963+
.bespoke .pl-action-buttons .button {
964+
flex: 1;
965+
}
966+
967+
.bespoke .pl-control-row-auto {
968+
flex-direction: column;
969+
align-items: stretch;
970+
}
971+
972+
.bespoke .pl-inline {
973+
width: 100%;
974+
}
975+
976+
.bespoke .pl-trial-metrics {
977+
grid-template-columns: 1fr;
978+
}
823979
}

0 commit comments

Comments
 (0)