@devyrpauli/mddocs 0.1.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.
@@ -0,0 +1,1071 @@
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>Proof Editor</title>
7
+ <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png?v=20260310r">
8
+ <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png?v=20260310r">
9
+ <link rel="shortcut icon" href="./favicon.ico?v=20260310r">
10
+ <link rel="apple-touch-icon" sizes="512x512" href="./apple-touch-icon.png?v=20260310r">
11
+ <style>
12
+ :root { --sab: env(safe-area-inset-bottom, 0px); }
13
+
14
+ * {
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ :root {
21
+ --a0-color: rgba(255, 100, 100, 0.25);
22
+ --a1-color: rgba(255, 200, 100, 0.25);
23
+ --a2-color: rgba(255, 255, 100, 0.25);
24
+ --a3-color: rgba(100, 255, 100, 0.25);
25
+ --a4-color: rgba(100, 200, 255, 0.25);
26
+ --human-color: #6EE7B7;
27
+ --ai-color: #A5B4FC;
28
+ --mixed-color: #9C27B0;
29
+ --provenance-gutter-width: 60px;
30
+ --provenance-bar-width: 6px;
31
+
32
+ /* Default theme variables */
33
+ --bg-color: white;
34
+ --text-color: #111;
35
+ --code-bg: #f5f5f5;
36
+ --pre-bg: #2d2d2d;
37
+ --pre-color: #f8f8f2;
38
+ --blockquote-border: #ddd;
39
+ --blockquote-color: #666;
40
+ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
41
+ --font-size: 16px;
42
+ --line-height: 1.6;
43
+ --content-max-width: none;
44
+ --heading-weight: bold;
45
+ --heading-align: left;
46
+ --text-align: left;
47
+ }
48
+
49
+ /* Whitey Theme - Based on Typora Whitey Theme */
50
+ :root[data-theme="whitey"] {
51
+ --bg-color: #fefefe;
52
+ --text-color: #333;
53
+ --code-bg: white;
54
+ --pre-bg: white;
55
+ --pre-color: #333;
56
+ --blockquote-border: #ddd;
57
+ --blockquote-color: #333;
58
+ --font-family: "Vollkorn", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Times, "Times New Roman", serif;
59
+ --font-size: 19px;
60
+ --line-height: 1.53;
61
+ --content-max-width: 960px;
62
+ --heading-weight: normal;
63
+ --heading-align: center;
64
+ --text-align: justify;
65
+ }
66
+
67
+ body {
68
+ font-family: var(--font-family);
69
+ font-size: var(--font-size);
70
+ background: var(--bg-color);
71
+ color: var(--text-color);
72
+ min-height: 100vh;
73
+ margin: 0;
74
+ padding: 0;
75
+ -webkit-font-smoothing: antialiased;
76
+ }
77
+
78
+ #app {
79
+ padding: 0;
80
+ }
81
+
82
+ /* Editor container - holds gutter and editor side by side */
83
+ #editor-container {
84
+ position: relative;
85
+ max-width: var(--content-max-width);
86
+ margin: 0 auto;
87
+ }
88
+
89
+ /* Provenance gutter - fixed position flush with left edge */
90
+ #provenance-gutter {
91
+ position: fixed;
92
+ left: 0;
93
+ top: 0;
94
+ bottom: 0;
95
+ width: var(--provenance-bar-width);
96
+ z-index: 50;
97
+ pointer-events: none;
98
+ overflow: hidden;
99
+ }
100
+
101
+ /* Individual gutter segments */
102
+ .gutter-segment {
103
+ position: absolute;
104
+ left: 0;
105
+ width: 100%;
106
+ }
107
+
108
+ #editor {
109
+ background: var(--bg-color);
110
+ padding: 60px 40px 40px;
111
+ padding-left: calc(var(--provenance-bar-width) + 20px);
112
+ min-height: 100vh;
113
+ outline: none;
114
+ }
115
+
116
+ /* Share mode: comfortable reading/writing width */
117
+ body[data-share-mode="true"] #editor {
118
+ padding: 80px 80px 40px;
119
+ padding-left: calc(var(--provenance-bar-width) + 80px);
120
+ }
121
+
122
+ /* Milkdown editor styles */
123
+ .milkdown {
124
+ outline: none;
125
+ position: relative;
126
+ }
127
+
128
+ .milkdown .editor {
129
+ outline: none;
130
+ min-height: 400px;
131
+ line-height: var(--line-height);
132
+ text-align: var(--text-align);
133
+ }
134
+
135
+ /* Required ProseMirror baseline styles. Missing white-space causes cursor
136
+ and selection weirdness in some browsers/webviews (and ProseMirror will
137
+ warn loudly on input). */
138
+ .milkdown .editor.ProseMirror {
139
+ position: relative;
140
+ word-wrap: break-word;
141
+ white-space: pre-wrap;
142
+ white-space: break-spaces;
143
+ -webkit-font-variant-ligatures: none;
144
+ font-variant-ligatures: none;
145
+ font-feature-settings: "liga" 0;
146
+ }
147
+
148
+ .milkdown .editor.ProseMirror pre {
149
+ white-space: pre-wrap;
150
+ }
151
+
152
+ /* Empty editor placeholder */
153
+ .milkdown .editor.ProseMirror > p.is-editor-empty:first-child::before {
154
+ content: attr(data-placeholder);
155
+ float: left;
156
+ color: #adb5bd;
157
+ pointer-events: none;
158
+ height: 0;
159
+ font-style: italic;
160
+ }
161
+
162
+ body[data-share-mode="true"] .milkdown .editor.ProseMirror > p.is-editor-empty:first-child::before {
163
+ content: 'Start writing...';
164
+ color: #bbb;
165
+ font-style: normal;
166
+ font-weight: 300;
167
+ }
168
+
169
+ .proof-task-checkbox {
170
+ margin-right: 0.5em;
171
+ transform: translateY(0.08em);
172
+ pointer-events: auto;
173
+ }
174
+ .milkdown li.proof-task-item {
175
+ list-style: none;
176
+ }
177
+ .milkdown li.proof-task-item > p {
178
+ display: inline;
179
+ margin: 0;
180
+ }
181
+ .milkdown li.proof-task-item.proof-task-item-checked > p {
182
+ opacity: 0.9;
183
+ }
184
+ .milkdown li.proof-task-item > p + * {
185
+ margin-top: 0.5em;
186
+ }
187
+
188
+ span[data-proof="suggestion"][data-kind="insert"] {
189
+ background-color: rgba(34, 197, 94, 0.25);
190
+ border-bottom: 2px solid #22C55E;
191
+ }
192
+
193
+ span[data-proof="suggestion"][data-kind="delete"] {
194
+ background-color: rgba(239, 68, 68, 0.2);
195
+ text-decoration: line-through;
196
+ color: #666;
197
+ }
198
+
199
+ span[data-proof="suggestion"][data-kind="replace"] {
200
+ background-color: rgba(239, 68, 68, 0.2);
201
+ text-decoration: line-through;
202
+ color: #666;
203
+ }
204
+
205
+ .mark-replace-insert {
206
+ background-color: rgba(34, 197, 94, 0.25);
207
+ border-bottom: 2px solid #22C55E;
208
+ }
209
+
210
+ .mark-compose-anchor {
211
+ background-color: rgba(252, 211, 77, 0.22);
212
+ border-bottom: 2px dashed #F59E0B;
213
+ }
214
+
215
+ .mark-popover {
216
+ position: fixed;
217
+ z-index: 200;
218
+ max-width: 360px;
219
+ background: #1f1f1f;
220
+ color: #f5f5f5;
221
+ border: 1px solid rgba(255, 255, 255, 0.12);
222
+ border-radius: 8px;
223
+ padding: 10px;
224
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
225
+ font-size: 12px;
226
+ line-height: 1.4;
227
+ }
228
+
229
+ .mark-popover-backdrop {
230
+ position: fixed;
231
+ inset: 0;
232
+ z-index: 195;
233
+ background: rgba(0, 0, 0, 0.35);
234
+ backdrop-filter: blur(1px);
235
+ }
236
+
237
+ .mark-popover.mark-popover-sheet {
238
+ left: 0 !important;
239
+ right: 0 !important;
240
+ bottom: 0;
241
+ top: auto !important;
242
+ z-index: 210;
243
+ box-sizing: border-box;
244
+ max-width: none;
245
+ width: 100vw;
246
+ border-radius: 14px 14px 0 0;
247
+ border-left: none;
248
+ border-right: none;
249
+ border-bottom: none;
250
+ padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
251
+ max-height: min(72vh, 560px);
252
+ overflow-x: hidden;
253
+ overflow-y: auto;
254
+ box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.26);
255
+ }
256
+
257
+ .mark-popover-header {
258
+ font-weight: 600;
259
+ margin-bottom: 8px;
260
+ }
261
+
262
+ .mark-popover-thread {
263
+ display: flex;
264
+ flex-direction: column;
265
+ gap: 8px;
266
+ margin-bottom: 10px;
267
+ max-height: 240px;
268
+ overflow-y: auto;
269
+ }
270
+
271
+ .mark-popover-entry {
272
+ padding: 6px 8px;
273
+ background: rgba(255, 255, 255, 0.06);
274
+ border-radius: 6px;
275
+ }
276
+
277
+ .mark-popover-meta {
278
+ font-size: 11px;
279
+ color: rgba(255, 255, 255, 0.7);
280
+ margin-bottom: 4px;
281
+ }
282
+
283
+ .mark-popover-body {
284
+ white-space: pre-wrap;
285
+ word-break: break-word;
286
+ }
287
+
288
+ .mark-popover-textarea {
289
+ width: 100%;
290
+ min-height: 64px;
291
+ margin: 8px 0;
292
+ padding: 6px 8px;
293
+ border-radius: 6px;
294
+ border: 1px solid rgba(255, 255, 255, 0.2);
295
+ background: rgba(255, 255, 255, 0.08);
296
+ color: #f5f5f5;
297
+ font-family: inherit;
298
+ font-size: 12px;
299
+ resize: vertical;
300
+ }
301
+
302
+ .mark-popover-actions {
303
+ display: flex;
304
+ gap: 8px;
305
+ }
306
+
307
+ .mark-popover.mark-popover-sheet .mark-popover-textarea {
308
+ min-height: 84px;
309
+ max-height: min(26vh, 200px);
310
+ }
311
+
312
+ .mark-popover.mark-popover-sheet.mark-popover-keyboard-open .mark-popover-textarea {
313
+ min-height: 72px;
314
+ max-height: min(22vh, 150px);
315
+ }
316
+
317
+ .mark-popover.mark-popover-sheet .mark-popover-actions {
318
+ position: sticky;
319
+ bottom: calc(env(safe-area-inset-bottom) - 2px);
320
+ margin-top: 8px;
321
+ padding-top: 8px;
322
+ background: linear-gradient(180deg, rgba(31, 31, 31, 0.02), rgba(31, 31, 31, 0.92) 32%);
323
+ }
324
+
325
+ .mark-popover-actions button {
326
+ border: none;
327
+ border-radius: 6px;
328
+ min-height: 44px;
329
+ min-width: 44px;
330
+ padding: 10px 14px;
331
+ background: rgba(255, 255, 255, 0.14);
332
+ color: #f5f5f5;
333
+ cursor: pointer;
334
+ font-size: 12px;
335
+ }
336
+
337
+ .mark-popover-actions button:hover {
338
+ background: rgba(255, 255, 255, 0.24);
339
+ }
340
+
341
+ .mark-selection-bar {
342
+ position: fixed;
343
+ z-index: 190;
344
+ display: flex;
345
+ gap: 6px;
346
+ padding: 6px 8px;
347
+ background: #1f1f1f;
348
+ color: #f5f5f5;
349
+ border-radius: 999px;
350
+ border: 1px solid rgba(255, 255, 255, 0.12);
351
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
352
+ font-size: 12px;
353
+ }
354
+
355
+ .mark-selection-bar button {
356
+ border: none;
357
+ background: transparent;
358
+ color: inherit;
359
+ cursor: pointer;
360
+ font-size: 12px;
361
+ padding: 2px 6px;
362
+ }
363
+
364
+ .mark-selection-bar button:hover {
365
+ background: rgba(255, 255, 255, 0.12);
366
+ border-radius: 999px;
367
+ }
368
+
369
+ .mark-selection-bar-hint {
370
+ position: fixed;
371
+ z-index: 191;
372
+ padding: 6px 10px;
373
+ border-radius: 999px;
374
+ background: rgba(17, 17, 17, 0.92);
375
+ color: #f5f5f5;
376
+ border: 1px solid rgba(255, 255, 255, 0.2);
377
+ font-size: 11px;
378
+ white-space: nowrap;
379
+ pointer-events: none;
380
+ }
381
+
382
+ .mark-mobile-strip {
383
+ position: fixed;
384
+ left: 10px;
385
+ right: 10px;
386
+ bottom: 12px;
387
+ z-index: 206;
388
+ display: flex;
389
+ gap: 8px;
390
+ overflow-x: auto;
391
+ padding: 4px 2px;
392
+ scrollbar-width: none;
393
+ }
394
+
395
+ .mark-mobile-strip.mark-mobile-strip-selection {
396
+ left: 12px;
397
+ right: auto;
398
+ bottom: auto;
399
+ width: max-content;
400
+ max-width: calc(100vw - 24px);
401
+ padding: 0;
402
+ overflow: visible;
403
+ }
404
+
405
+ .mark-mobile-strip-actions {
406
+ width: 100%;
407
+ display: grid;
408
+ grid-template-columns: repeat(3, minmax(0, 1fr));
409
+ gap: 8px;
410
+ padding: 10px;
411
+ border-radius: 16px;
412
+ border: 1px solid rgba(17, 17, 17, 0.08);
413
+ background: rgba(22, 22, 22, 0.96);
414
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
415
+ backdrop-filter: blur(16px);
416
+ }
417
+
418
+ .mark-mobile-strip-actions button {
419
+ border: 1px solid rgba(255, 255, 255, 0.14);
420
+ border-radius: 999px;
421
+ min-height: 44px;
422
+ padding: 10px 12px;
423
+ background: rgba(255, 255, 255, 0.12);
424
+ color: #f5f5f5;
425
+ cursor: pointer;
426
+ font-size: 13px;
427
+ font-weight: 600;
428
+ min-width: 0;
429
+ width: 100%;
430
+ white-space: nowrap;
431
+ text-align: center;
432
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
433
+ }
434
+
435
+ .mark-mobile-strip-actions button:active {
436
+ background: rgba(255, 255, 255, 0.22);
437
+ }
438
+
439
+ .mark-mobile-strip-actions + .mark-mobile-summary {
440
+ margin-top: 0;
441
+ padding-top: 8px;
442
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
443
+ }
444
+
445
+ .mark-mobile-strip.mark-mobile-strip-selection .mark-mobile-strip-actions {
446
+ width: auto;
447
+ max-width: 100%;
448
+ display: inline-flex;
449
+ align-items: center;
450
+ gap: 6px;
451
+ padding: 6px;
452
+ border-radius: 18px;
453
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
454
+ }
455
+
456
+ .mark-mobile-strip.mark-mobile-strip-selection .mark-mobile-strip-actions button {
457
+ min-height: 38px;
458
+ width: auto;
459
+ min-width: 82px;
460
+ padding: 8px 14px;
461
+ font-size: 12px;
462
+ line-height: 1;
463
+ }
464
+
465
+ .mark-mobile-strip.mark-mobile-strip-expanded {
466
+ left: 12px;
467
+ right: 12px;
468
+ display: block;
469
+ max-height: min(48vh, 420px);
470
+ overflow-y: auto;
471
+ overflow-x: hidden;
472
+ padding: 12px;
473
+ border-radius: 16px;
474
+ border: 1px solid rgba(255, 255, 255, 0.14);
475
+ background: rgba(22, 22, 22, 0.96);
476
+ box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
477
+ }
478
+
479
+ .mark-mobile-strip::-webkit-scrollbar {
480
+ display: none;
481
+ }
482
+
483
+ .mark-mobile-summary {
484
+ width: 100%;
485
+ min-height: 56px;
486
+ border: 1px solid rgba(255, 255, 255, 0.16);
487
+ border-radius: 14px;
488
+ background: rgba(22, 22, 22, 0.96);
489
+ color: #f5f5f5;
490
+ padding: 10px 12px;
491
+ display: grid;
492
+ grid-template-columns: minmax(0, 1fr) auto;
493
+ gap: 2px 10px;
494
+ text-align: left;
495
+ cursor: pointer;
496
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
497
+ }
498
+
499
+ .mark-mobile-summary-title {
500
+ grid-column: 1 / 2;
501
+ font-size: 14px;
502
+ font-weight: 600;
503
+ line-height: 1.2;
504
+ }
505
+
506
+ .mark-mobile-summary-meta {
507
+ grid-column: 1 / 2;
508
+ font-size: 11px;
509
+ color: rgba(245, 245, 245, 0.72);
510
+ line-height: 1.2;
511
+ }
512
+
513
+ .mark-mobile-summary-cta {
514
+ grid-column: 2 / 3;
515
+ grid-row: 1 / 3;
516
+ align-self: center;
517
+ padding: 6px 10px;
518
+ border-radius: 999px;
519
+ background: rgba(255, 255, 255, 0.12);
520
+ font-size: 11px;
521
+ font-weight: 600;
522
+ color: rgba(245, 245, 245, 0.92);
523
+ }
524
+
525
+ .mark-mobile-strip-header {
526
+ display: flex;
527
+ align-items: center;
528
+ justify-content: space-between;
529
+ margin-bottom: 10px;
530
+ gap: 10px;
531
+ }
532
+
533
+ .mark-mobile-strip-heading {
534
+ display: flex;
535
+ flex-direction: column;
536
+ gap: 2px;
537
+ min-width: 0;
538
+ }
539
+
540
+ .mark-mobile-strip-heading strong {
541
+ font-size: 14px;
542
+ color: #f5f5f5;
543
+ }
544
+
545
+ .mark-mobile-strip-heading span {
546
+ font-size: 11px;
547
+ color: rgba(245, 245, 245, 0.72);
548
+ }
549
+
550
+ .mark-mobile-strip-done {
551
+ border: 1px solid rgba(255, 255, 255, 0.18);
552
+ background: rgba(255, 255, 255, 0.08);
553
+ color: #f5f5f5;
554
+ border-radius: 999px;
555
+ min-height: 36px;
556
+ min-width: 56px;
557
+ padding: 8px 12px;
558
+ font-size: 12px;
559
+ font-weight: 600;
560
+ cursor: pointer;
561
+ flex-shrink: 0;
562
+ }
563
+
564
+ .mark-mobile-section {
565
+ display: flex;
566
+ flex-direction: column;
567
+ gap: 8px;
568
+ margin-bottom: 12px;
569
+ }
570
+
571
+ .mark-mobile-section-heading {
572
+ font-size: 11px;
573
+ font-weight: 600;
574
+ text-transform: uppercase;
575
+ letter-spacing: 0.04em;
576
+ color: rgba(245, 245, 245, 0.66);
577
+ padding: 0 2px;
578
+ }
579
+
580
+ .mark-mobile-strip-note {
581
+ margin-top: 2px;
582
+ font-size: 11px;
583
+ color: rgba(245, 245, 245, 0.68);
584
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
585
+ padding-top: 10px;
586
+ }
587
+
588
+ .mark-mobile-card {
589
+ min-width: 210px;
590
+ max-width: 260px;
591
+ border: 1px solid rgba(255, 255, 255, 0.14);
592
+ border-radius: 12px;
593
+ background: rgba(31, 31, 31, 0.95);
594
+ color: #f5f5f5;
595
+ padding: 10px 12px;
596
+ text-align: left;
597
+ display: flex;
598
+ flex-direction: column;
599
+ gap: 4px;
600
+ font-size: 12px;
601
+ cursor: pointer;
602
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
603
+ }
604
+
605
+ .mark-mobile-strip.mark-mobile-strip-expanded .mark-mobile-card {
606
+ width: 100%;
607
+ min-width: 0;
608
+ max-width: none;
609
+ }
610
+
611
+ .mark-mobile-card strong {
612
+ font-size: 11px;
613
+ letter-spacing: 0.01em;
614
+ color: rgba(245, 245, 245, 0.9);
615
+ }
616
+
617
+ .mark-mobile-card span {
618
+ color: rgba(245, 245, 245, 0.8);
619
+ line-height: 1.35;
620
+ }
621
+
622
+ .mark-mobile-undo {
623
+ position: fixed;
624
+ left: 50%;
625
+ bottom: 80px;
626
+ transform: translateX(-50%);
627
+ z-index: 220;
628
+ border-radius: 999px;
629
+ background: rgba(31, 31, 31, 0.95);
630
+ color: #f5f5f5;
631
+ border: 1px solid rgba(255, 255, 255, 0.2);
632
+ padding: 8px 12px;
633
+ display: flex;
634
+ gap: 12px;
635
+ align-items: center;
636
+ font-size: 12px;
637
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
638
+ }
639
+
640
+ .mark-mobile-undo button {
641
+ border: none;
642
+ border-radius: 999px;
643
+ padding: 4px 10px;
644
+ background: rgba(255, 255, 255, 0.16);
645
+ color: #f5f5f5;
646
+ font-size: 12px;
647
+ cursor: pointer;
648
+ }
649
+
650
+ @media (min-width: 901px) {
651
+ .mark-mobile-strip,
652
+ .mark-mobile-undo {
653
+ display: none !important;
654
+ }
655
+ }
656
+
657
+ /* Attestation backgrounds - applied to provenance spans */
658
+ .attestation-a0 { background-color: var(--a0-color) !important; }
659
+ .attestation-a1 { background-color: var(--a1-color) !important; }
660
+ .attestation-a2 { background-color: var(--a2-color) !important; }
661
+ .attestation-a3 { background-color: var(--a3-color) !important; }
662
+ .attestation-a4 { background-color: var(--a4-color) !important; }
663
+
664
+ /* Default Theme Typography */
665
+ .milkdown h1 {
666
+ font-size: 2em;
667
+ margin-bottom: 0.5em;
668
+ font-weight: var(--heading-weight);
669
+ text-align: var(--heading-align);
670
+ }
671
+ .milkdown h2 {
672
+ font-size: 1.5em;
673
+ margin-bottom: 0.5em;
674
+ font-weight: var(--heading-weight);
675
+ text-align: var(--heading-align);
676
+ }
677
+ .milkdown h3 {
678
+ font-size: 1.25em;
679
+ margin-bottom: 0.5em;
680
+ font-weight: var(--heading-weight);
681
+ text-align: var(--heading-align);
682
+ }
683
+ .milkdown p {
684
+ margin-bottom: 1em;
685
+ line-height: var(--line-height);
686
+ }
687
+ .milkdown ul, .milkdown ol { margin-bottom: 1em; padding-left: 1.5em; }
688
+ .milkdown li { margin-bottom: 0.25em; }
689
+ .milkdown code {
690
+ background: var(--code-bg);
691
+ padding: 2px 6px;
692
+ border-radius: 3px;
693
+ font-family: "SF Mono", Monaco, "Cascadia Code", "Consolas", "Menlo", monospace;
694
+ font-size: 0.9em;
695
+ }
696
+ .milkdown pre {
697
+ background: var(--pre-bg);
698
+ color: var(--pre-color);
699
+ padding: 16px;
700
+ border-radius: 6px;
701
+ overflow-x: auto;
702
+ margin-bottom: 1em;
703
+ }
704
+ .milkdown pre.ProseMirror-selectednode {
705
+ background: var(--pre-bg) !important;
706
+ box-shadow: none !important;
707
+ outline: none !important;
708
+ }
709
+ .milkdown pre code {
710
+ background: none;
711
+ padding: 0;
712
+ color: inherit;
713
+ }
714
+ .proof-code-block {
715
+ margin-bottom: 1em;
716
+ }
717
+ .proof-code-block .proof-code-block-pre {
718
+ margin-bottom: 0;
719
+ }
720
+ .proof-mermaid-block {
721
+ border: 1px solid color-mix(in srgb, var(--text-color) 10%, var(--bg-color));
722
+ border-radius: 16px;
723
+ overflow: hidden;
724
+ background:
725
+ radial-gradient(circle at top left, color-mix(in srgb, var(--text-color) 5%, var(--bg-color)), transparent 48%),
726
+ linear-gradient(180deg, color-mix(in srgb, var(--text-color) 2%, var(--bg-color)), var(--bg-color));
727
+ }
728
+ .proof-mermaid-preview {
729
+ overflow-x: auto;
730
+ padding: 24px;
731
+ }
732
+ .proof-mermaid-svg {
733
+ display: block;
734
+ width: 100%;
735
+ min-width: 640px;
736
+ height: auto;
737
+ }
738
+ .proof-mermaid-status {
739
+ padding: 14px 16px 0;
740
+ color: #b91c1c;
741
+ font-family: "SF Mono", Monaco, "Cascadia Code", "Consolas", "Menlo", monospace;
742
+ font-size: 0.88em;
743
+ line-height: 1.5;
744
+ }
745
+ .proof-mermaid-source {
746
+ border-top: 1px solid color-mix(in srgb, var(--text-color) 10%, var(--bg-color));
747
+ background: color-mix(in srgb, var(--text-color) 2%, var(--bg-color));
748
+ }
749
+ .proof-mermaid-source-summary {
750
+ cursor: pointer;
751
+ list-style: none;
752
+ padding: 12px 16px;
753
+ font-family: "SF Mono", Monaco, "Cascadia Code", "Consolas", "Menlo", monospace;
754
+ font-size: 0.82em;
755
+ letter-spacing: 0.02em;
756
+ text-transform: uppercase;
757
+ color: color-mix(in srgb, var(--text-color) 62%, var(--bg-color));
758
+ user-select: none;
759
+ }
760
+ .proof-mermaid-source-summary::-webkit-details-marker {
761
+ display: none;
762
+ }
763
+ .proof-mermaid-source-summary::before {
764
+ content: "Show ";
765
+ margin-right: 0.55em;
766
+ color: color-mix(in srgb, var(--text-color) 45%, var(--bg-color));
767
+ }
768
+ .proof-mermaid-source[open] > .proof-mermaid-source-summary::before {
769
+ content: "Hide ";
770
+ }
771
+ .proof-mermaid-source .proof-code-block-pre {
772
+ border-radius: 0;
773
+ border-top: 1px solid rgba(255, 255, 255, 0.03);
774
+ }
775
+ @media (max-width: 720px) {
776
+ .proof-mermaid-preview {
777
+ padding: 16px;
778
+ }
779
+ .proof-mermaid-svg {
780
+ min-width: 520px;
781
+ }
782
+ }
783
+ .milkdown blockquote {
784
+ border-left: 4px solid var(--blockquote-border);
785
+ padding-left: 16px;
786
+ margin-left: 0;
787
+ color: var(--blockquote-color);
788
+ }
789
+ .milkdown a {
790
+ color: #2484c1;
791
+ text-decoration: none;
792
+ }
793
+ .milkdown a:hover {
794
+ text-decoration: underline;
795
+ }
796
+ .milkdown a.markdown-link-hover-target {
797
+ text-underline-offset: 3px;
798
+ text-decoration-thickness: 2px;
799
+ }
800
+ .markdown-link-action-card {
801
+ position: fixed;
802
+ left: 0;
803
+ top: 0;
804
+ z-index: 280;
805
+ pointer-events: none;
806
+ display: inline-flex;
807
+ align-items: center;
808
+ opacity: 0;
809
+ transform: translateY(3px) scale(0.98);
810
+ transition: opacity 120ms ease, transform 120ms ease;
811
+ }
812
+ .markdown-link-action-card[data-visible="true"] {
813
+ opacity: 1;
814
+ transform: translateY(0) scale(1);
815
+ pointer-events: auto;
816
+ }
817
+ .markdown-link-action-card-open {
818
+ appearance: none;
819
+ border: 1px solid rgba(15, 23, 42, 0.55);
820
+ display: inline-flex;
821
+ align-items: center;
822
+ justify-content: center;
823
+ gap: 6px;
824
+ min-height: 30px;
825
+ padding: 0 13px;
826
+ border-radius: 999px;
827
+ background: #0f172a;
828
+ color: #f8fafc;
829
+ font-size: 13px;
830
+ font-weight: 650;
831
+ letter-spacing: 0.01em;
832
+ white-space: nowrap;
833
+ cursor: pointer;
834
+ box-shadow: 0 7px 20px rgba(15, 23, 42, 0.24);
835
+ transition: background-color 110ms ease, transform 110ms ease, box-shadow 110ms ease;
836
+ }
837
+ .markdown-link-action-card-open::after {
838
+ content: "";
839
+ display: inline-block;
840
+ width: 12px;
841
+ height: 12px;
842
+ flex: 0 0 12px;
843
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23f8fafc' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9L8 4'/%3E%3Cpath d='M5.7 4H8v2.3'/%3E%3C/svg%3E");
844
+ background-repeat: no-repeat;
845
+ background-size: 12px 12px;
846
+ opacity: 0.9;
847
+ }
848
+ .markdown-link-action-card-open:hover {
849
+ background: #111827;
850
+ transform: translateY(-1px);
851
+ box-shadow: 0 10px 26px rgba(15, 23, 42, 0.26);
852
+ }
853
+ .markdown-link-action-card-open:active {
854
+ transform: translateY(0);
855
+ box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
856
+ }
857
+ .markdown-link-action-card-open:focus-visible {
858
+ outline: 2px solid #0ea5e9;
859
+ outline-offset: 2px;
860
+ }
861
+ .markdown-link-action-card[data-armed="true"] .markdown-link-action-card-open {
862
+ box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.26), 0 10px 26px rgba(15, 23, 42, 0.26);
863
+ }
864
+ .milkdown hr {
865
+ border: none;
866
+ border-top: 1px solid #ddd;
867
+ margin: 2em 0;
868
+ }
869
+
870
+ /* Whitey Theme specific typography overrides */
871
+ :root[data-theme="whitey"] .milkdown h1 {
872
+ font-size: 3em;
873
+ margin-top: 1.6em;
874
+ }
875
+ :root[data-theme="whitey"] .milkdown h2 {
876
+ font-size: 1.5em;
877
+ margin-top: 2em;
878
+ position: relative;
879
+ padding-bottom: 0.5em;
880
+ }
881
+ :root[data-theme="whitey"] .milkdown h2::after {
882
+ content: '';
883
+ display: block;
884
+ width: 100px;
885
+ height: 1px;
886
+ background: #2f2f2f;
887
+ margin: 0.5em auto 0;
888
+ }
889
+ :root[data-theme="whitey"] .milkdown h3 {
890
+ font-size: 1.25em;
891
+ margin-top: 3em;
892
+ font-style: italic;
893
+ }
894
+ :root[data-theme="whitey"] .milkdown ul {
895
+ list-style: square;
896
+ padding-left: 1.2em;
897
+ }
898
+ :root[data-theme="whitey"] .milkdown pre {
899
+ margin-left: 1em;
900
+ padding-left: 1em;
901
+ border: 1px solid #ddd;
902
+ border-radius: 0;
903
+ background: white;
904
+ color: #333;
905
+ }
906
+
907
+ /* Loading state */
908
+ .loading {
909
+ display: flex;
910
+ align-items: center;
911
+ justify-content: center;
912
+ height: 400px;
913
+ color: #999;
914
+ }
915
+
916
+ /* Prism.js Syntax Highlighting */
917
+ .milkdown pre code .token.comment,
918
+ .milkdown pre code .token.prolog,
919
+ .milkdown pre code .token.doctype,
920
+ .milkdown pre code .token.cdata {
921
+ color: #8292a2;
922
+ }
923
+ .milkdown pre code .token.punctuation {
924
+ color: #f8f8f2;
925
+ }
926
+ .milkdown pre code .token.namespace {
927
+ opacity: 0.7;
928
+ }
929
+ .milkdown pre code .token.property,
930
+ .milkdown pre code .token.tag,
931
+ .milkdown pre code .token.constant,
932
+ .milkdown pre code .token.symbol,
933
+ .milkdown pre code .token.deleted {
934
+ color: #f92672;
935
+ }
936
+ .milkdown pre code .token.boolean,
937
+ .milkdown pre code .token.number {
938
+ color: #ae81ff;
939
+ }
940
+ .milkdown pre code .token.selector,
941
+ .milkdown pre code .token.attr-name,
942
+ .milkdown pre code .token.string,
943
+ .milkdown pre code .token.char,
944
+ .milkdown pre code .token.builtin,
945
+ .milkdown pre code .token.inserted {
946
+ color: #a6e22e;
947
+ }
948
+ .milkdown pre code .token.operator,
949
+ .milkdown pre code .token.entity,
950
+ .milkdown pre code .token.url,
951
+ .milkdown pre code .token.variable {
952
+ color: #f8f8f2;
953
+ }
954
+ .milkdown pre code .token.atrule,
955
+ .milkdown pre code .token.attr-value,
956
+ .milkdown pre code .token.function,
957
+ .milkdown pre code .token.class-name {
958
+ color: #e6db74;
959
+ }
960
+ .milkdown pre code .token.keyword {
961
+ color: #66d9ef;
962
+ }
963
+ .milkdown pre code .token.regex,
964
+ .milkdown pre code .token.important {
965
+ color: #fd971f;
966
+ }
967
+ .milkdown pre code .token.important,
968
+ .milkdown pre code .token.bold {
969
+ font-weight: bold;
970
+ }
971
+ .milkdown pre code .token.italic {
972
+ font-style: italic;
973
+ }
974
+ .milkdown pre code .token.entity {
975
+ cursor: help;
976
+ }
977
+
978
+ /* Whitey theme syntax highlighting - light colors */
979
+ :root[data-theme="whitey"] .milkdown pre code .token.comment,
980
+ :root[data-theme="whitey"] .milkdown pre code .token.prolog,
981
+ :root[data-theme="whitey"] .milkdown pre code .token.doctype,
982
+ :root[data-theme="whitey"] .milkdown pre code .token.cdata {
983
+ color: #708090;
984
+ }
985
+ :root[data-theme="whitey"] .milkdown pre code .token.punctuation {
986
+ color: #333;
987
+ }
988
+ :root[data-theme="whitey"] .milkdown pre code .token.property,
989
+ :root[data-theme="whitey"] .milkdown pre code .token.tag,
990
+ :root[data-theme="whitey"] .milkdown pre code .token.constant,
991
+ :root[data-theme="whitey"] .milkdown pre code .token.symbol,
992
+ :root[data-theme="whitey"] .milkdown pre code .token.deleted {
993
+ color: #c92c2c;
994
+ }
995
+ :root[data-theme="whitey"] .milkdown pre code .token.boolean,
996
+ :root[data-theme="whitey"] .milkdown pre code .token.number {
997
+ color: #905;
998
+ }
999
+ :root[data-theme="whitey"] .milkdown pre code .token.selector,
1000
+ :root[data-theme="whitey"] .milkdown pre code .token.attr-name,
1001
+ :root[data-theme="whitey"] .milkdown pre code .token.string,
1002
+ :root[data-theme="whitey"] .milkdown pre code .token.char,
1003
+ :root[data-theme="whitey"] .milkdown pre code .token.builtin,
1004
+ :root[data-theme="whitey"] .milkdown pre code .token.inserted {
1005
+ color: #228b22;
1006
+ }
1007
+ :root[data-theme="whitey"] .milkdown pre code .token.operator,
1008
+ :root[data-theme="whitey"] .milkdown pre code .token.entity,
1009
+ :root[data-theme="whitey"] .milkdown pre code .token.url,
1010
+ :root[data-theme="whitey"] .milkdown pre code .token.variable {
1011
+ color: #333;
1012
+ }
1013
+ :root[data-theme="whitey"] .milkdown pre code .token.atrule,
1014
+ :root[data-theme="whitey"] .milkdown pre code .token.attr-value,
1015
+ :root[data-theme="whitey"] .milkdown pre code .token.function,
1016
+ :root[data-theme="whitey"] .milkdown pre code .token.class-name {
1017
+ color: #dd4a68;
1018
+ }
1019
+ :root[data-theme="whitey"] .milkdown pre code .token.keyword {
1020
+ color: #07a;
1021
+ }
1022
+ :root[data-theme="whitey"] .milkdown pre code .token.regex,
1023
+ :root[data-theme="whitey"] .milkdown pre code .token.important {
1024
+ color: #e90;
1025
+ }
1026
+
1027
+ </style>
1028
+ <script defer src="./assets/editor.js"></script>
1029
+ </head>
1030
+ <body>
1031
+ <div id="app">
1032
+ <div id="editor-container">
1033
+ <div id="provenance-gutter"></div>
1034
+ <div id="editor">
1035
+ <div class="loading">Loading editor...</div>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ <script>
1040
+ // Error catcher - runs before module
1041
+ // Only show banner for real errors, not generic "Script error." from cross-origin issues
1042
+ window.onerror = function(msg, url, line, col, error) {
1043
+ console.error('[onerror]', msg, url, line, col, error);
1044
+
1045
+ // Skip generic cross-origin error messages that don't provide useful info
1046
+ if (msg === 'Script error.' && (!url || url === '')) {
1047
+ console.warn('[onerror] Suppressing generic cross-origin error');
1048
+ return true; // Suppress the error
1049
+ }
1050
+
1051
+ var errorDiv = document.createElement('div');
1052
+ errorDiv.id = 'error-banner-' + Date.now();
1053
+ errorDiv.style.cssText = 'position:fixed;top:0;left:0;right:0;background:red;color:white;padding:10px;z-index:999999;font-family:monospace;font-size:12px;cursor:pointer;';
1054
+ errorDiv.textContent = 'JS Error: ' + msg + ' at ' + url + ':' + line + ' (click to dismiss)';
1055
+ errorDiv.onclick = function() { errorDiv.remove(); };
1056
+ document.body.appendChild(errorDiv);
1057
+ return false;
1058
+ };
1059
+ window.addEventListener('unhandledrejection', function(e) {
1060
+ console.error('[unhandledrejection]', e.reason);
1061
+ var errorDiv = document.createElement('div');
1062
+ errorDiv.id = 'rejection-banner-' + Date.now();
1063
+ errorDiv.style.cssText = 'position:fixed;top:0;left:0;right:0;background:orange;color:white;padding:10px;z-index:999999;font-family:monospace;font-size:12px;cursor:pointer;';
1064
+ errorDiv.textContent = 'Promise rejection: ' + (e.reason ? e.reason.message || e.reason : 'unknown') + ' (click to dismiss)';
1065
+ errorDiv.onclick = function() { errorDiv.remove(); };
1066
+ document.body.appendChild(errorDiv);
1067
+ });
1068
+ console.log('[HTML] Error handlers installed');
1069
+ </script>
1070
+ </body>
1071
+ </html>