@tiagojct/subsub 0.17.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +4 -3
  3. package/THIRD_PARTY_NOTICES +98 -96
  4. package/dist/config.js +1 -1
  5. package/dist/feedback.js +55 -0
  6. package/dist/notes.js +41 -11
  7. package/dist/read.js +2 -1
  8. package/dist/subsub.js +80 -6
  9. package/dist/web.js +22 -5
  10. package/package.json +1 -1
  11. package/prompts/compare.md +1 -1
  12. package/prompts/gaps.md +1 -1
  13. package/prompts/lit.md +26 -7
  14. package/roles/researcher.md +5 -2
  15. package/src/config.ts +1 -1
  16. package/src/feedback.ts +70 -0
  17. package/src/notes.ts +44 -10
  18. package/src/read.ts +2 -1
  19. package/src/subsub.ts +83 -9
  20. package/src/web.ts +20 -5
  21. package/templates/Zotero agent.md +1 -1
  22. package/web/app.css +211 -168
  23. package/web/app.js +100 -6
  24. package/web/fonts/AtkinsonHyperlegibleMono.woff2 +0 -0
  25. package/web/fonts/AtkinsonHyperlegibleNext.woff2 +0 -0
  26. package/web/fonts/Literata-Italic.woff2 +0 -0
  27. package/web/fonts/Literata.woff2 +0 -0
  28. package/web/i18n.js +10 -1
  29. package/web/icon.svg +4 -4
  30. package/web/index.html +2 -1
  31. package/web/fonts/IBMPlexMono.woff2 +0 -0
  32. package/web/fonts/IBMPlexSans.woff2 +0 -0
  33. package/web/fonts/IBMPlexSerif.woff2 +0 -0
package/web/app.css CHANGED
@@ -1,93 +1,97 @@
1
- /* Sub-Sub web view.
2
- Type: IBM Plex Sans for the interface, IBM Plex Serif for replies, IBM Plex Mono for commands.
3
- The fonts are local: the page's CSP allows no other origin. */
1
+ /* Sub-Sub web view: the plate, at work.
2
+ A grey-green sheet, a lighter field, copperplate ink, and four washes as the only colour:
3
+ Prussian blue (the Researcher), madder (the Librarian), sap green (applied), gamboge (a preview).
4
+ Type: Atkinson Hyperlegible Next for the interface, Literata for replies and notes (true italics),
5
+ Atkinson Hyperlegible Mono for commands. The fonts are local: the page's CSP allows no other origin. */
4
6
 
5
- @font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans.woff2") format("woff2"); font-weight: 100 700; font-stretch: 75% 100%; font-display: swap; }
6
- @font-face { font-family: "IBM Plex Serif"; src: url("/fonts/IBMPlexSerif.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
7
- @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
7
+ @font-face { font-family: "Literata"; src: url("/fonts/Literata.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
8
+ @font-face { font-family: "Literata"; src: url("/fonts/Literata-Italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
9
+ @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/AtkinsonHyperlegibleNext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
10
+ @font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("/fonts/AtkinsonHyperlegibleMono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
8
11
 
9
12
  /* ---------------------------------------------------------------- tokens */
10
13
 
11
14
  :root {
12
- --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
13
- --serif: "IBM Plex Serif", Georgia, serif;
14
- --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
15
-
16
- --bg: #f7f6f2;
17
- --surface: #efede7;
18
- --raised: #ffffff;
19
- --text: #1c1b19;
20
- --muted: #5f5c55;
21
- --faint: #8a867d;
22
- --rule: #e0ddd4;
23
- --rule-strong: #c8c3b8;
24
- --shadow: 0 1px 2px rgb(28 27 25 / 0.05), 0 8px 24px -12px rgb(28 27 25 / 0.18);
25
-
26
- --researcher: #1d4f7c;
27
- --researcher-soft: #e3ebf3;
28
- --librarian: #a33b14;
29
- --librarian-soft: #f5e6de;
30
- --on-accent: #ffffff;
31
-
32
- --add: #256b3b;
33
- --add-soft: #e2f0e5;
34
- --rem: #a8321d;
35
- --rem-soft: #f7e3de;
36
- --warn: #946412;
37
-
38
- --radius: 6px;
39
- --radius-lg: 10px;
15
+ --sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
16
+ --serif: "Literata", Georgia, serif;
17
+ --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
18
+
19
+ --bg: #e9ece6;
20
+ --surface: #dfe3dc;
21
+ --raised: #f4f5f1;
22
+ --text: #16202a;
23
+ --muted: #44505b;
24
+ --faint: #5d6870;
25
+ --rule: #c6ccc6;
26
+ --rule-strong: #7d878e;
27
+
28
+ --researcher: #2c5d87;
29
+ --researcher-soft: #d8e2eb;
30
+ --librarian: #a8432d;
31
+ --librarian-soft: #f0ddd6;
32
+ --on-accent: #f4f5f1;
33
+
34
+ --add: #4f6a2e;
35
+ --add-soft: #dfe7d2;
36
+ --rem: #a8432d;
37
+ --rem-soft: #f0ddd6;
38
+ --warn: #86601a;
39
+ --warn-soft: #f2e5c6;
40
+
41
+ --radius: 2px;
42
+ --radius-lg: 3px;
40
43
  --side-w: 17rem;
41
44
  --measure: 46rem;
42
45
  }
43
46
 
47
+ /* Dark: the steel plate. */
44
48
  @media (prefers-color-scheme: dark) {
45
49
  :root:not([data-theme="light"]) {
46
- --bg: #141413;
47
- --surface: #1c1c1a;
48
- --raised: #232320;
49
- --text: #ebe8e1;
50
- --muted: #a7a399;
51
- --faint: #7b776f;
52
- --rule: #2e2d2a;
53
- --rule-strong: #45433e;
54
- --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -12px rgb(0 0 0 / 0.6);
55
- --researcher: #7fb0de;
56
- --researcher-soft: #1b2733;
57
- --librarian: #e48a5f;
58
- --librarian-soft: #33221a;
59
- --on-accent: #141413;
60
- --add: #7cc493;
61
- --add-soft: #1a2c20;
62
- --rem: #ec8a70;
63
- --rem-soft: #36201b;
64
- --warn: #d6a84e;
50
+ --bg: #12171c;
51
+ --surface: #0d1115;
52
+ --raised: #192128;
53
+ --text: #dce1de;
54
+ --muted: #a6b0b3;
55
+ --faint: #8d989d;
56
+ --rule: #2c363f;
57
+ --rule-strong: #66727c;
58
+ --researcher: #86b4da;
59
+ --researcher-soft: #1e3042;
60
+ --librarian: #e6866d;
61
+ --librarian-soft: #3d2620;
62
+ --on-accent: #12171c;
63
+ --add: #a3c078;
64
+ --add-soft: #253220;
65
+ --rem: #e6866d;
66
+ --rem-soft: #3d2620;
67
+ --warn: #e2b45a;
68
+ --warn-soft: #3a3019;
65
69
  }
66
70
  }
67
71
 
68
72
  :root[data-theme="dark"] {
69
- --bg: #141413;
70
- --surface: #1c1c1a;
71
- --raised: #232320;
72
- --text: #ebe8e1;
73
- --muted: #a7a399;
74
- --faint: #7b776f;
75
- --rule: #2e2d2a;
76
- --rule-strong: #45433e;
77
- --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -12px rgb(0 0 0 / 0.6);
78
- --researcher: #7fb0de;
79
- --researcher-soft: #1b2733;
80
- --librarian: #e48a5f;
81
- --librarian-soft: #33221a;
82
- --on-accent: #141413;
83
- --add: #7cc493;
84
- --add-soft: #1a2c20;
85
- --rem: #ec8a70;
86
- --rem-soft: #36201b;
87
- --warn: #d6a84e;
88
- }
89
-
90
- /* The mode sets the accent: blue for the Researcher, rust for the Librarian. */
73
+ --bg: #12171c;
74
+ --surface: #0d1115;
75
+ --raised: #192128;
76
+ --text: #dce1de;
77
+ --muted: #a6b0b3;
78
+ --faint: #8d989d;
79
+ --rule: #2c363f;
80
+ --rule-strong: #66727c;
81
+ --researcher: #86b4da;
82
+ --researcher-soft: #1e3042;
83
+ --librarian: #e6866d;
84
+ --librarian-soft: #3d2620;
85
+ --on-accent: #12171c;
86
+ --add: #a3c078;
87
+ --add-soft: #253220;
88
+ --rem: #e6866d;
89
+ --rem-soft: #3d2620;
90
+ --warn: #e2b45a;
91
+ --warn-soft: #3a3019;
92
+ }
93
+
94
+ /* The mode sets the accent: Prussian blue for the Researcher, madder for the Librarian. */
91
95
  body { --accent: var(--researcher); --accent-soft: var(--researcher-soft); }
92
96
  body[data-mode="librarian"] { --accent: var(--librarian); --accent-soft: var(--librarian-soft); }
93
97
 
@@ -106,6 +110,8 @@ body {
106
110
  -webkit-font-smoothing: antialiased;
107
111
  -moz-osx-font-smoothing: grayscale;
108
112
  text-rendering: optimizeLegibility;
113
+ caret-color: var(--accent);
114
+ scrollbar-color: var(--rule-strong) transparent;
109
115
  }
110
116
 
111
117
  button, input, select, textarea { font: inherit; color: inherit; }
@@ -116,7 +122,7 @@ svg { flex: none; }
116
122
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
117
123
  [hidden] { display: none !important; }
118
124
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
119
- ::selection { background: var(--accent-soft); }
125
+ ::selection { background: var(--accent-soft); color: var(--text); }
120
126
 
121
127
  /* Icons drawn with strokes, at the size of the text. */
122
128
  .icon-btn svg, .new-btn svg, .brand .mark, .icon {
@@ -135,7 +141,7 @@ button { cursor: pointer; background: none; border: 1px solid transparent; borde
135
141
  button:disabled { opacity: 0.45; cursor: default; }
136
142
 
137
143
  .primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 550; }
138
- .primary:hover:not(:disabled) { filter: brightness(1.08); }
144
+ .primary:hover:not(:disabled) { background: var(--text); border-color: var(--text); color: var(--bg); }
139
145
  .secondary { background: var(--raised); border-color: var(--rule-strong); }
140
146
  .secondary:hover:not(:disabled) { border-color: var(--text); }
141
147
  .ghost { color: var(--muted); }
@@ -215,9 +221,9 @@ select:hover { border-color: var(--rule-strong); }
215
221
  display: flex;
216
222
  align-items: center;
217
223
  gap: 0.45rem;
224
+ font-family: var(--serif);
218
225
  font-weight: 600;
219
- font-size: 1.02rem;
220
- letter-spacing: -0.01em;
226
+ font-size: 1.1rem;
221
227
  margin-right: 0.25rem;
222
228
  }
223
229
  .brand .mark { color: var(--accent); }
@@ -225,24 +231,25 @@ select:hover { border-color: var(--rule-strong); }
225
231
 
226
232
  .modes {
227
233
  display: inline-flex;
228
- padding: 3px;
229
- border-radius: 8px;
230
- background: var(--surface);
231
- border: 1px solid var(--rule);
234
+ border: 1px solid var(--rule-strong);
235
+ background: var(--raised);
232
236
  }
233
237
  .modes button {
234
- padding: 0.28rem 0.8rem;
235
- border-radius: 5px;
238
+ padding: 0.3rem 0.8rem;
239
+ border-radius: 0;
236
240
  font-size: 0.86rem;
237
241
  color: var(--muted);
238
242
  border: 0;
239
243
  }
240
244
  .modes button:hover { color: var(--text); }
245
+ /* Each mode keeps its own colour, chosen or not. */
246
+ .modes button[data-mode="researcher"] { color: var(--researcher); }
247
+ .modes button[data-mode="librarian"] { color: var(--librarian); }
241
248
  .modes button[aria-pressed="true"] {
242
- background: var(--raised);
249
+ background: var(--accent-soft);
243
250
  color: var(--accent);
244
251
  font-weight: 600;
245
- box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px var(--rule);
252
+ box-shadow: inset 0 -2px 0 var(--accent);
246
253
  }
247
254
 
248
255
  .status {
@@ -258,7 +265,6 @@ select:hover { border-color: var(--rule-strong); }
258
265
  align-items: center;
259
266
  gap: 0.45rem;
260
267
  padding: 0.3rem 0.7rem;
261
- border-radius: 999px;
262
268
  font-size: 0.8rem;
263
269
  color: var(--muted);
264
270
  white-space: nowrap;
@@ -268,9 +274,10 @@ select:hover { border-color: var(--rule-strong); }
268
274
  font-variant-numeric: tabular-nums;
269
275
  }
270
276
  .library-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); flex: none; }
271
- .library.reachable .library-dot { background: var(--add); box-shadow: 0 0 0 3px var(--add-soft); }
272
- .library.down { color: var(--rem); background: var(--rem-soft); font-weight: 550; }
273
- .library.down .library-dot { background: var(--rem); }
277
+ .library.reachable .library-dot { background: var(--add); }
278
+ /* Errors are drawn in ink, with a hollow mark and a word: madder means only the Librarian. */
279
+ .library.down { color: var(--text); background: var(--surface); font-weight: 600; }
280
+ .library.down .library-dot { background: none; border: 1.5px solid var(--text); }
274
281
  .library.checking .library-dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
275
282
 
276
283
  /* ---------------------------------------------------------------- side panel */
@@ -289,11 +296,12 @@ select:hover { border-color: var(--rule-strong); }
289
296
  }
290
297
 
291
298
  .side h2 {
292
- font-size: 0.7rem;
293
- font-weight: 600;
299
+ font-family: var(--serif);
300
+ font-size: 0.98rem;
301
+ font-weight: 400;
302
+ font-variant-caps: all-small-caps;
294
303
  letter-spacing: 0.08em;
295
- text-transform: uppercase;
296
- color: var(--faint);
304
+ color: var(--muted);
297
305
  margin: 0 0 0.35rem;
298
306
  padding: 0 0.5rem;
299
307
  }
@@ -306,10 +314,9 @@ select:hover { border-color: var(--rule-strong); }
306
314
  padding: 0.5rem 0.7rem;
307
315
  background: var(--raised);
308
316
  border: 1px solid var(--rule);
309
- font-weight: 550;
310
- box-shadow: 0 1px 1px rgb(0 0 0 / 0.03);
317
+ font-weight: 600;
311
318
  }
312
- .new-btn:hover { border-color: var(--rule-strong); }
319
+ .new-btn:hover { border-color: var(--text); }
313
320
  .new-btn svg { width: 16px; height: 16px; color: var(--accent); }
314
321
 
315
322
  .actions { display: flex; flex-direction: column; }
@@ -318,10 +325,10 @@ select:hover { border-color: var(--rule-strong); }
318
325
  padding: 0.32rem 0.5rem;
319
326
  font-size: 0.88rem;
320
327
  color: var(--text);
321
- border-radius: 5px;
328
+ border-radius: 0;
322
329
  }
323
330
  .actions button:hover { background: var(--bg); }
324
- .actions .group { margin: 0.55rem 0 0.15rem; padding: 0 0.5rem; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
331
+ .actions .group { margin: 0.6rem 0 0.15rem; padding: 0 0.5rem; font-family: var(--serif); font-style: italic; font-size: 0.86rem; color: var(--muted); }
325
332
  .actions .group:first-child { margin-top: 0; }
326
333
 
327
334
  .side .grow { flex: 1; display: flex; flex-direction: column; min-height: 8rem; }
@@ -345,10 +352,10 @@ select:hover { border-color: var(--rule-strong); }
345
352
  text-align: left;
346
353
  padding: 0.42rem 0.5rem;
347
354
  display: block;
348
- border-radius: 5px;
355
+ border-radius: 0;
349
356
  }
350
357
  .sessions button:hover { background: var(--bg); }
351
- .sessions .current button { background: var(--raised); box-shadow: inset 2px 0 0 var(--accent), 0 0 0 1px var(--rule); }
358
+ .sessions .current button { background: var(--raised); outline: 1px solid var(--rule-strong); outline-offset: -1px; }
352
359
  .sessions .what {
353
360
  display: -webkit-box;
354
361
  -webkit-line-clamp: 2;
@@ -384,7 +391,7 @@ select:hover { border-color: var(--rule-strong); }
384
391
  flex: none;
385
392
  width: 28px;
386
393
  height: 16px;
387
- border-radius: 999px;
394
+ border-radius: var(--radius);
388
395
  background: var(--rule-strong);
389
396
  transition: background-color 0.15s ease;
390
397
  }
@@ -395,9 +402,8 @@ select:hover { border-color: var(--rule-strong); }
395
402
  left: 2px;
396
403
  width: 12px;
397
404
  height: 12px;
398
- border-radius: 50%;
399
- background: #fff;
400
- box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
405
+ border-radius: 1px;
406
+ background: var(--raised);
401
407
  transition: transform 0.15s ease;
402
408
  }
403
409
  .switch input:checked + .track { background: var(--accent); }
@@ -416,7 +422,7 @@ body.layout-full { --measure: 72rem; }
416
422
  margin: 0.9rem auto 0;
417
423
  padding: 0.6rem 0.6rem 0.6rem 0.9rem;
418
424
  border: 1px solid var(--rule);
419
- border-left: 3px solid var(--warn);
425
+ border-top: 2px solid var(--warn);
420
426
  border-radius: var(--radius);
421
427
  background: var(--raised);
422
428
  display: flex;
@@ -441,7 +447,7 @@ body.layout-full { --measure: 72rem; }
441
447
  .msg.user .bubble {
442
448
  background: var(--raised);
443
449
  border: 1px solid var(--rule);
444
- border-radius: var(--radius-lg) var(--radius-lg) 3px var(--radius-lg);
450
+ border-radius: var(--radius-lg);
445
451
  padding: 0.6rem 0.95rem;
446
452
  max-width: min(36rem, 88%);
447
453
  white-space: pre-wrap;
@@ -456,6 +462,7 @@ body.layout-full { --measure: 72rem; }
456
462
  font-family: var(--serif);
457
463
  font-size: 1.02rem;
458
464
  line-height: 1.68;
465
+ font-variant-numeric: oldstyle-nums proportional-nums;
459
466
  overflow-wrap: anywhere;
460
467
  }
461
468
  .md > :first-child { margin-top: 0; }
@@ -464,9 +471,8 @@ body.layout-full { --measure: 72rem; }
464
471
  .md li { margin: 0.2rem 0; }
465
472
  .md li::marker { color: var(--faint); }
466
473
  .md h1, .md h2, .md h3, .md h4 {
467
- font-family: var(--sans);
474
+ font-family: var(--serif);
468
475
  line-height: 1.3;
469
- letter-spacing: -0.01em;
470
476
  margin: 1.6rem 0 0.5rem;
471
477
  font-weight: 600;
472
478
  }
@@ -484,14 +490,17 @@ body.layout-full { --measure: 72rem; }
484
490
  padding: 0.1rem 0 0.1rem 1rem;
485
491
  border-left: 2px solid var(--accent);
486
492
  color: var(--muted);
493
+ font-style: italic;
487
494
  }
495
+ .md blockquote code, .md blockquote a { font-style: normal; }
496
+ /* A page link stays whole: (p. 12) never breaks after "p.". */
497
+ .md a[href^="zotero://open-pdf"] { white-space: nowrap; }
488
498
 
489
499
  .md code {
490
500
  font-family: var(--mono);
491
501
  font-size: 0.84em;
492
502
  background: var(--surface);
493
- border: 1px solid var(--rule);
494
- border-radius: 4px;
503
+ border-radius: var(--radius);
495
504
  padding: 0.05em 0.32em;
496
505
  }
497
506
 
@@ -530,9 +539,8 @@ body.layout-full { --measure: 72rem; }
530
539
  .md-table-wrap {
531
540
  overflow-x: auto;
532
541
  margin: 1.1rem 0;
533
- border: 1px solid var(--rule);
534
- border-radius: var(--radius);
535
- background: var(--raised);
542
+ border-top: 1.5px solid var(--text);
543
+ border-bottom: 1.5px solid var(--text);
536
544
  }
537
545
  .md table {
538
546
  border-collapse: collapse;
@@ -540,18 +548,19 @@ body.layout-full { --measure: 72rem; }
540
548
  font-family: var(--sans);
541
549
  font-size: 0.86rem;
542
550
  line-height: 1.45;
543
- font-variant-numeric: tabular-nums;
551
+ font-variant-numeric: lining-nums tabular-nums;
544
552
  }
545
553
  .md th, .md td { padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
546
554
  .md tr:last-child td { border-bottom: 0; }
547
555
  .md th {
548
- font-size: 0.72rem;
549
- font-weight: 600;
550
- letter-spacing: 0.04em;
551
- text-transform: uppercase;
556
+ font-family: var(--serif);
557
+ font-size: 0.98rem;
558
+ font-weight: 400;
559
+ font-variant-caps: all-small-caps;
560
+ letter-spacing: 0.07em;
552
561
  color: var(--muted);
553
562
  white-space: nowrap;
554
- background: var(--surface);
563
+ border-bottom-color: var(--text);
555
564
  }
556
565
  .md td:first-child { white-space: nowrap; }
557
566
  .md td code { white-space: nowrap; }
@@ -562,6 +571,7 @@ body.layout-full { --measure: 72rem; }
562
571
  .msg-action-btn { font-size: 0.75rem; padding: 0.15rem 0.45rem; color: var(--faint); }
563
572
  .msg-action-btn:hover { color: var(--text); background: var(--surface); }
564
573
  .msg-action-btn.copied { color: var(--add); }
574
+ .table-actions { display: flex; justify-content: flex-end; margin: -0.35rem 0 0.9rem; }
565
575
 
566
576
  /* Tool calls: one quiet line each; the result opens below. */
567
577
  .tool { margin: 0.35rem 0; font-size: 0.82rem; color: var(--muted); }
@@ -575,7 +585,7 @@ body.layout-full { --measure: 72rem; }
575
585
  align-items: baseline;
576
586
  padding: 0.28rem 0.55rem;
577
587
  margin-left: -0.55rem;
578
- border-radius: 5px;
588
+ border-radius: 0;
579
589
  width: fit-content;
580
590
  max-width: calc(100% + 0.55rem);
581
591
  }
@@ -593,8 +603,8 @@ body.layout-full { --measure: 72rem; }
593
603
  .tool .label { color: var(--text); white-space: nowrap; }
594
604
  .tool.running summary::before { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
595
605
  .tool.done summary::before { background: var(--add); }
596
- .tool.error summary::before { background: var(--rem); }
597
- .tool.error .label { color: var(--rem); }
606
+ .tool.error summary::before { background: none; border: 1.5px solid var(--text); }
607
+ .tool.error .label { color: var(--text); font-weight: 600; }
598
608
  .tool .args { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
599
609
  .tool[open] .args { white-space: normal; overflow-wrap: anywhere; }
600
610
  .tool pre {
@@ -630,8 +640,8 @@ body.layout-full { --measure: 72rem; }
630
640
  white-space: pre-wrap;
631
641
  overflow-wrap: anywhere;
632
642
  }
633
- .note.warning { border-left: 3px solid var(--warn); }
634
- .note.error { border-left: 3px solid var(--rem); }
643
+ .note.warning { border-top: 2px solid var(--warn); }
644
+ .note.error { border-top: 2px solid var(--text); }
635
645
  .note.mono { font-family: var(--mono); font-size: 0.76rem; line-height: 1.55; }
636
646
  .note pre { font-family: var(--mono); font-size: 0.74rem; white-space: pre-wrap; }
637
647
  .note button { margin-top: 0.5rem; }
@@ -639,7 +649,7 @@ body.layout-full { --measure: 72rem; }
639
649
  .note details { margin-top: 0.4rem; color: var(--muted); }
640
650
  .note details summary { cursor: pointer; font-size: 0.78rem; }
641
651
  .note details pre { margin: 0.3rem 0 0; overflow-wrap: anywhere; }
642
- .free-note { border-left: 3px solid var(--accent); padding-left: 0.6rem; }
652
+ .free-note { border-top: 1px solid var(--accent); padding-top: 0.4rem; }
643
653
 
644
654
  .working {
645
655
  margin-top: 1rem;
@@ -664,13 +674,18 @@ body.layout-full { --measure: 72rem; }
664
674
  /* Empty conversation. */
665
675
  .empty { padding-top: 11vh; }
666
676
  .empty .kicker {
667
- font-size: 0.72rem;
668
- font-weight: 600;
677
+ display: flex;
678
+ justify-content: space-between;
679
+ margin: 0 0 1.5rem;
680
+ padding-bottom: 0.3rem;
681
+ border-bottom: 1px solid var(--text);
682
+ font-family: var(--serif);
683
+ font-size: 1rem;
684
+ font-variant-caps: all-small-caps;
669
685
  letter-spacing: 0.08em;
670
- text-transform: uppercase;
671
686
  color: var(--accent);
672
- margin: 0 0 0.6rem;
673
687
  }
688
+ .empty .kicker::before { content: "Sub-Sub"; color: var(--muted); order: -1; }
674
689
  .empty h1 {
675
690
  font-family: var(--serif);
676
691
  font-weight: 500;
@@ -680,17 +695,18 @@ body.layout-full { --measure: 72rem; }
680
695
  margin: 0 0 0.6rem;
681
696
  }
682
697
  .empty .lede { color: var(--muted); max-width: 34rem; margin: 0 0 1.75rem; }
683
- .chips { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
698
+ /* Suggestions: a short list of lines to start from, not a row of cards. */
699
+ .chips { display: grid; max-width: 34rem; border-bottom: 1px solid var(--rule-strong); }
684
700
  .chips button {
685
701
  text-align: left;
686
- border: 1px solid var(--rule);
687
- border-radius: var(--radius-lg);
688
- background: var(--raised);
689
- padding: 0.75rem 0.9rem;
690
- font-size: 0.9rem;
702
+ border: 0;
703
+ border-top: 1px solid var(--rule-strong);
704
+ border-radius: 0;
705
+ padding: 0.6rem 0.25rem;
706
+ font-size: 0.95rem;
691
707
  line-height: 1.4;
692
708
  }
693
- .chips button:hover { border-color: var(--accent); }
709
+ .chips button:hover { background: var(--accent-soft); color: var(--accent); }
694
710
 
695
711
  body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0; margin: 0; }
696
712
 
@@ -701,12 +717,11 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
701
717
  width: min(100%, var(--measure));
702
718
  margin-inline: auto;
703
719
  border: 1px solid var(--rule-strong);
704
- border-radius: 12px;
720
+ border-radius: var(--radius-lg);
705
721
  background: var(--raised);
706
- box-shadow: var(--shadow);
707
722
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
708
723
  }
709
- .composer-box:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft); }
724
+ .composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
710
725
  .composer textarea {
711
726
  display: block;
712
727
  width: 100%;
@@ -736,11 +751,10 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
736
751
  background: var(--raised);
737
752
  border: 1px solid var(--rule-strong);
738
753
  border-radius: var(--radius-lg);
739
- box-shadow: var(--shadow);
740
754
  padding: 0.3rem;
741
755
  z-index: 5;
742
756
  }
743
- .suggest button, .suggest .hint-row { display: flex; align-items: baseline; gap: 0.6rem; width: 100%; text-align: left; padding: 0.38rem 0.55rem; border-radius: 5px; }
757
+ .suggest button, .suggest .hint-row { display: flex; align-items: baseline; gap: 0.6rem; width: 100%; text-align: left; padding: 0.38rem 0.55rem; border-radius: 0; }
744
758
  .suggest button[aria-selected="true"], .suggest button:hover { background: var(--accent-soft); }
745
759
  .suggest .name { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); white-space: nowrap; }
746
760
  .suggest .desc { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -748,32 +762,38 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
748
762
  /* ---------------------------------------------------------------- dialogs */
749
763
 
750
764
  .modal {
751
- border: 1px solid var(--rule-strong);
752
- border-radius: 12px;
765
+ border: 1px solid var(--text);
766
+ border-radius: var(--radius-lg);
753
767
  background: var(--raised);
754
768
  color: var(--text);
755
769
  padding: 1.4rem 1.5rem 1.25rem;
756
770
  width: min(40rem, calc(100vw - 2rem));
757
771
  max-height: calc(100dvh - 2rem);
758
772
  overflow-y: auto;
759
- box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.45);
760
773
  }
761
774
  .modal.wide { width: min(44rem, calc(100vw - 2rem)); }
762
- .modal::backdrop { background: rgb(20 20 19 / 0.45); backdrop-filter: blur(2px); }
775
+ .modal::backdrop { background: rgb(18 23 28 / 0.5); }
763
776
  .modal[open] { animation: rise 0.16s ease-out; }
764
777
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
765
778
 
779
+ /* A preview is gamboge, and drawn dashed: nothing has happened yet. Its label is the dialog's
780
+ running head, with "Sub-Sub" opposite, as on the website's plates. */
766
781
  .modal-kicker {
767
- margin: 0 0 0.3rem;
768
- font-size: 0.7rem;
769
- font-weight: 600;
782
+ display: flex;
783
+ justify-content: space-between;
784
+ margin: 0 0 0.9rem;
785
+ padding-bottom: 0.25rem;
786
+ border-bottom: 1px dashed var(--warn);
787
+ font-family: var(--serif);
788
+ font-size: 1rem;
789
+ font-variant-caps: all-small-caps;
770
790
  letter-spacing: 0.08em;
771
- text-transform: uppercase;
772
- color: var(--accent);
791
+ color: var(--warn);
773
792
  }
793
+ .modal-kicker::after { content: "Sub-Sub"; color: var(--muted); }
774
794
  .modal-kicker:empty { display: none; }
775
- .modal h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
776
- .modal h3 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 1.4rem 0 0.5rem; }
795
+ .modal h2 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
796
+ .modal h3 { font-family: var(--serif); font-size: 0.98rem; font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--muted); margin: 1.4rem 0 0.5rem; }
777
797
  .modal .hint { color: var(--muted); margin: 0 0 1rem; font-size: 0.88rem; }
778
798
 
779
799
  .preview {
@@ -783,16 +803,17 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
783
803
  white-space: pre-wrap;
784
804
  overflow-wrap: anywhere;
785
805
  background: var(--bg);
786
- border: 1px solid var(--rule);
787
- border-radius: var(--radius);
806
+ border: 1px dashed var(--warn);
807
+ border-radius: 0;
788
808
  padding: 0.8rem 0.95rem;
789
809
  max-height: 55vh;
790
810
  overflow-y: auto;
791
811
  margin: 0 0 1.1rem;
792
812
  }
793
- .preview .add, .preview .rem { border-radius: 3px; padding: 0.1em 0.3em; }
813
+ .preview .add, .preview .rem { padding: 0.1em 0.3em; }
794
814
  .preview .add { color: var(--add); background: var(--add-soft); }
795
- .preview .rem { color: var(--rem); background: var(--rem-soft); }
815
+ .preview .rem { color: var(--muted); background: none; text-decoration: line-through; text-decoration-thickness: 1px; }
816
+ /* A removal is struck through: madder stays the Librarian's colour. */
796
817
 
797
818
  .modal-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
798
819
  .modal-buttons button { min-width: 5.5rem; }
@@ -845,7 +866,7 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
845
866
  .models button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
846
867
  .models .needs-key { opacity: 0.65; }
847
868
  .models .model-name { min-width: 0; overflow-wrap: anywhere; }
848
- .models .model-tag { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 0 0.45rem; }
869
+ .models .model-tag { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--accent); border: 1px solid currentColor; padding: 0 0.45rem; }
849
870
  .models .model-why { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); }
850
871
 
851
872
  /* ---------------------------------------------------------------- narrow screens */
@@ -856,6 +877,15 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
856
877
  .settings button { width: 100%; text-align: left; color: var(--text); }
857
878
  .settings .model-btn { font-family: var(--mono); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
858
879
 
880
+ /* ---------------------------------------------------------------- the flow of works (/lit) */
881
+
882
+ .flow { display: grid; gap: 1rem; margin: 1rem 0; font-family: var(--sans); }
883
+ .flow-row { display: grid; grid-template-columns: minmax(0, 15rem) repeat(auto-fit, minmax(0, 13rem)); gap: 1.4rem; align-items: center; }
884
+ .flow-box { position: relative; padding: 0.45rem 0.7rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--raised); font-size: 0.84rem; text-align: center; }
885
+ .flow-row + .flow-row .flow-box::before { content: ""; position: absolute; left: 50%; top: calc(-1rem - 1px); height: 1rem; border-left: 1px solid var(--muted); }
886
+ .flow-side { position: relative; padding: 0.35rem 0.6rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius); color: var(--muted); font-size: 0.78rem; }
887
+ .flow-side::before { content: ""; position: absolute; right: 100%; top: 50%; width: 1.4rem; border-top: 1px dashed var(--muted); }
888
+
859
889
  /* ---------------------------------------------------------------- library search and notes */
860
890
 
861
891
  #notes-btn { font-family: var(--sans); }
@@ -863,7 +893,7 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
863
893
 
864
894
  .items { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
865
895
  .items:empty { display: none; }
866
- .items > li { padding: 0.4rem 0.5rem; border-radius: 5px; }
896
+ .items > li { padding: 0.4rem 0.5rem; }
867
897
  .items > li:hover { background: var(--bg); }
868
898
  .items > li.muted { font-size: 0.82rem; }
869
899
  .item-title { font-size: 0.86rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@@ -873,7 +903,7 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
873
903
  .item-actions button:hover, .item-actions a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
874
904
 
875
905
  .sessions li { position: relative; }
876
- .session-tools { position: absolute; top: 0.3rem; right: 0.3rem; display: none; gap: 0.3rem; background: var(--raised); border-radius: 4px; }
906
+ .session-tools { position: absolute; top: 0.3rem; right: 0.3rem; display: none; gap: 0.3rem; background: var(--raised); }
877
907
  .sessions li:hover .session-tools, .sessions li:focus-within .session-tools { display: flex; }
878
908
  /* No hover on a touch screen: the buttons stay under the conversation. */
879
909
  @media (hover: none) { .session-tools { display: flex; position: static; justify-content: flex-end; background: none; } }
@@ -892,17 +922,30 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
892
922
  }
893
923
  .note-pane[hidden] { display: none; }
894
924
  .note-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); }
895
- .note-name { flex: 1; min-width: 0; font-size: 0.84rem; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
925
+ .note-name { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
896
926
  .note-pane > .search { margin: 0.6rem 0.9rem 0; width: auto; }
897
927
  .note-body { flex: 1; overflow-y: auto; padding: 0.9rem 1.1rem 1.5rem; }
898
928
  .note-body .front { font-size: 0.74rem; color: var(--muted); margin: 0 0 1rem; }
929
+ /* What a note was written from, drawn by line: solid for the full text, dashed for the abstract,
930
+ dotted for the metadata. The same lines as on the website's Plate II. */
931
+ .evidence { margin: 0 0 0.6rem; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
932
+ .evidence span { color: var(--text); padding-bottom: 2px; border-bottom: 2px solid var(--rule-strong); }
933
+ .evidence.ev-full span { border-bottom-style: solid; border-color: var(--add); }
934
+ .evidence.ev-abstract span { border-bottom-style: dashed; border-color: var(--warn); }
935
+ .evidence.ev-meta span { border-bottom-style: dotted; border-color: var(--muted); }
936
+ /* Reading mode: larger type, wider lines and spacing, a shorter measure. */
937
+ .note-pane.reading .note-body { padding: 1.4rem 1.6rem 2.5rem; }
938
+ .note-pane.reading .note-body .md { font-size: 1.2rem; line-height: 1.9; word-spacing: 0.06em; max-width: 36rem; }
939
+ .note-pane.reading .note-body .md p, .note-pane.reading .note-body .md li { margin-block: 0.9rem; }
940
+ #note-read[aria-pressed="true"] { color: var(--accent); text-decoration: underline; }
899
941
  .note-body .front summary { cursor: pointer; }
900
942
  .note-body .front pre { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.5rem 0.7rem; margin: 0.4rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
901
943
  .note-list { list-style: none; margin: 0; padding: 0; }
902
- .note-list button { width: 100%; text-align: left; padding: 0.4rem 0.5rem; border-radius: 5px; display: grid; gap: 0.1rem; }
944
+ .note-list button { width: 100%; text-align: left; padding: 0.4rem 0.5rem; border-radius: 0; display: grid; gap: 0.1rem; }
903
945
  .note-list button:hover { background: var(--bg); }
904
946
  .note-list .rel { font-size: 0.84rem; overflow-wrap: anywhere; }
905
947
  .note-list .when { font-size: 0.72rem; color: var(--faint); }
948
+ .note-body img.note-img { display: block; max-width: 100%; height: auto; margin: 0.8rem 0; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
906
949
  a[data-note] { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 0.18em; cursor: pointer; }
907
950
 
908
951
  @media (max-width: 64rem) {
@@ -919,7 +962,7 @@ a[data-note] { color: var(--accent); text-decoration: underline; text-decoration
919
962
  width: min(19rem, 86vw);
920
963
  transform: translateX(-100%);
921
964
  transition: transform 0.2s ease;
922
- box-shadow: var(--shadow);
965
+ border-right: 1px solid var(--text);
923
966
  }
924
967
  .side.open { transform: none; }
925
968
  .app.note-open, .app.note-open.side-collapsed { grid-template-columns: minmax(0, 1fr); }
@@ -944,12 +987,12 @@ a[data-note] { color: var(--accent); text-decoration: underline; text-decoration
944
987
  }
945
988
 
946
989
  /* First run: what is still missing */
947
- .setup { margin-block: 1.4rem 1rem; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--raised); text-align: left; max-width: 40rem; }
948
- .setup h2 { margin: 0 0 0.5rem; font-size: 0.95rem; }
990
+ .setup { margin-block: 1.4rem 1rem; padding: 0.9rem 1rem; border: 1px solid var(--rule-strong); border-top: 2px solid var(--accent); background: var(--raised); text-align: left; max-width: 40rem; }
991
+ .setup h2 { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.02rem; }
949
992
  .setup ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
950
993
  .setup li { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.6rem; align-items: start; font-size: 0.88rem; line-height: 1.45; }
951
994
  .setup li > * { min-width: 0; }
952
- .setup .mark { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0.15rem; color: var(--muted); }
953
- .setup li.todo .mark { color: var(--rem); }
995
+ .setup .mark { font-family: var(--serif); font-size: 0.95rem; font-variant-caps: all-small-caps; letter-spacing: 0.07em; color: var(--muted); }
996
+ .setup li.todo .mark { color: var(--warn); }
954
997
  .setup li.ok .step-text { color: var(--muted); }
955
998
  @media (max-width: 560px) { .setup li { grid-template-columns: 1fr; gap: 0.2rem; } }