mr-md 1.0.4 → 2.0.0-beta

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 (58) hide show
  1. package/README.md +10 -5
  2. package/dist/builder.d.ts +6 -20
  3. package/dist/builder.d.ts.map +1 -1
  4. package/dist/builder.js +38 -97
  5. package/dist/cli/dev.d.ts +2 -0
  6. package/dist/cli/dev.d.ts.map +1 -0
  7. package/dist/cli/dev.js +92 -0
  8. package/dist/cli/generate.d.ts +2 -0
  9. package/dist/cli/generate.d.ts.map +1 -0
  10. package/dist/cli/generate.js +171 -0
  11. package/dist/cli/init.d.ts +2 -0
  12. package/dist/cli/init.d.ts.map +1 -0
  13. package/dist/cli/init.js +89 -0
  14. package/dist/cli.d.ts +3 -0
  15. package/dist/cli.d.ts.map +1 -0
  16. package/dist/cli.js +27 -0
  17. package/dist/client/app.js +282 -107
  18. package/dist/index.d.ts +1 -1
  19. package/dist/index.d.ts.map +1 -1
  20. package/dist/index.js +1 -1
  21. package/dist/renderer/blocks.d.ts.map +1 -1
  22. package/dist/renderer/blocks.js +88 -16
  23. package/dist/renderer/html-neo.d.ts +7 -0
  24. package/dist/renderer/html-neo.d.ts.map +1 -0
  25. package/dist/renderer/html-neo.js +173 -0
  26. package/dist/renderer/html.d.ts.map +1 -1
  27. package/dist/renderer/html.js +36 -7
  28. package/dist/renderer/index-neo.d.ts +4 -0
  29. package/dist/renderer/index-neo.d.ts.map +1 -0
  30. package/dist/renderer/index-neo.js +469 -0
  31. package/dist/renderer/index.d.ts +1 -2
  32. package/dist/renderer/index.d.ts.map +1 -1
  33. package/dist/renderer/index.js +29 -379
  34. package/dist/renderer/markdown.d.ts +1 -1
  35. package/dist/renderer/markdown.d.ts.map +1 -1
  36. package/dist/renderer/markdown.js +3 -3
  37. package/dist/renderer/utils.d.ts +1 -1
  38. package/dist/renderer/utils.d.ts.map +1 -1
  39. package/dist/renderer/utils.js +41 -34
  40. package/dist/styles/theme-neo.css +1369 -0
  41. package/dist/styles/theme.css +412 -127
  42. package/dist/types.d.ts +8 -10
  43. package/dist/types.d.ts.map +1 -1
  44. package/package.json +8 -7
  45. package/src/builder.ts +49 -125
  46. package/src/cli/dev.ts +102 -0
  47. package/src/cli/generate.ts +191 -0
  48. package/src/cli/init.ts +97 -0
  49. package/src/cli.ts +29 -0
  50. package/src/client/app.js +282 -107
  51. package/src/index.ts +1 -1
  52. package/src/renderer/blocks.ts +89 -15
  53. package/src/renderer/html.ts +36 -7
  54. package/src/renderer/index.ts +30 -394
  55. package/src/renderer/markdown.ts +3 -2
  56. package/src/renderer/utils.ts +43 -36
  57. package/src/styles/theme.css +412 -127
  58. package/src/types.ts +8 -12
package/dist/styles/theme.css CHANGED
@@ -1,6 +1,6 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,650;9..144,760&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
2
1
 
3
2
  :root {
3
+ color-scheme: light;
4
4
  --font-sans:
5
5
  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
6
6
  --font-display: "Fraunces", Georgia, serif;
@@ -8,107 +8,220 @@
8
8
  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
9
9
  monospace;
10
10
 
11
- --bg: #f7f3ec;
12
- --paper: #fffdf8;
13
- --panel: #f0eee8;
14
- --panel-strong: #e7e1d6;
15
- --ink: #17130f;
16
- --muted: #695f53;
17
- --faint: #958b7f;
18
- --line: #ded5c8;
19
- --line-strong: #b9ab99;
20
- --code-bg: #171a1f;
21
- --text-code: #f1f1f1;
22
- --blue: #315f8c;
23
- --teal: #246b61;
24
- --amber: #9a6525;
25
- --rose: #9a3f4d;
26
- --violet: #69559f;
11
+ --bg: #f5f8fc;
12
+ --paper: #ffffff;
13
+ --panel: #f4f4f5;
14
+ --panel-strong: #e4e4e7;
15
+ --ink: #09090b;
16
+ --muted: #71717a;
17
+ --faint: #a1a1aa;
18
+ --line: #e2e8f0;
19
+ --line-strong: #cbd5e1;
20
+ --code-bg: #18181b;
21
+ --text-code: #f4f4f5;
22
+ --blue: #2563eb;
23
+ --teal: #0d9488;
24
+ --amber: #d97706;
25
+ --rose: #e11d48;
26
+ --violet: #7c3aed;
27
27
  --accent: var(--blue);
28
- --accent-soft: #e4eef6;
29
- --correct-bg: #e5f3ed;
30
- --correct-line: #2c7a57;
31
- --wrong-bg: #f8e5e2;
32
- --wrong-line: #b44a3e;
33
- --shadow: 0 24px 70px rgba(32, 24, 15, 0.12);
28
+ --accent-soft: rgba(37, 99, 235, 0.1);
29
+ --correct-bg: rgba(16, 185, 129, 0.1);
30
+ --correct-line: #10b981;
31
+ --wrong-bg: rgba(225, 29, 72, 0.1);
32
+ --wrong-line: #e11d48;
33
+ --shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
34
34
  }
35
35
 
36
36
  html[data-palette="field"] {
37
- --bg: #eff5ef;
38
- --paper: #fbfff9;
39
- --panel: #e8f0e6;
40
- --panel-strong: #dbe7d8;
41
- --ink: #111810;
42
- --muted: #596a55;
43
- --line: #cbd9c7;
44
- --line-strong: #9db39a;
45
- --blue: #2f6f5f;
46
- --teal: #1e7a56;
47
- --amber: #85712b;
48
- --rose: #8f4852;
49
- --violet: #566b9e;
37
+ --bg: #f2fcf5;
38
+ --paper: #ffffff;
39
+ --line: #e2f5e9;
40
+ --line-strong: #bbf7d0;
50
41
  --accent: var(--teal);
51
- --accent-soft: #dceee3;
42
+ --accent-soft: rgba(13, 148, 136, 0.1);
52
43
  }
53
44
 
54
45
  html[data-palette="ember"] {
55
- --bg: #f5f0ec;
56
- --paper: #fffdfa;
57
- --panel: #f0e7df;
58
- --panel-strong: #e5d5c8;
59
- --ink: #1b1411;
60
- --muted: #715d52;
61
- --line: #dccbc0;
62
- --line-strong: #b99e8c;
63
- --blue: #255f89;
64
- --teal: #2f665d;
65
- --amber: #a25c25;
66
- --rose: #9b3f3a;
67
- --violet: #725798;
68
- --accent: var(--rose);
69
- --accent-soft: #f2dfdd;
46
+ --bg: #fffcf8;
47
+ --paper: #ffffff;
48
+ --line: #fce8d5;
49
+ --line-strong: #fed7aa;
50
+ --accent: #ea580c;
51
+ --accent-soft: rgba(234, 88, 12, 0.1);
52
+ }
53
+
54
+ html[data-palette="elixir"] {
55
+ --bg: #f8f5fc;
56
+ --paper: #ffffff;
57
+ --line: #ede5f6;
58
+ --line-strong: #d8b4fe;
59
+ --accent: #a855f7;
60
+ --accent-soft: rgba(168, 85, 247, 0.1);
61
+ }
62
+
63
+ html[data-palette="trunk"] {
64
+ --bg: #fdfaf8;
65
+ --paper: #ffffff;
66
+ --line: #f4ece4;
67
+ --line-strong: #d6bfa8;
68
+ --accent: #78350f;
69
+ --accent-soft: rgba(120, 53, 15, 0.1);
70
+ }
71
+
72
+ html[data-palette="lava"] {
73
+ --bg: #fff5f5;
74
+ --paper: #ffffff;
75
+ --line: #fce8e8;
76
+ --line-strong: #fca5a5;
77
+ --accent: #ef4444;
78
+ --accent-soft: rgba(239, 68, 68, 0.1);
79
+ }
80
+
81
+ :root[data-theme="dark"] {
82
+ color-scheme: dark;
83
+ --bg: #07090c;
84
+ --paper: #121212;
85
+ --panel: #1a1a1a;
86
+ --panel-strong: #262626;
87
+ --ink: #f0f0f0;
88
+ --muted: #a1a1aa;
89
+ --faint: #71717a;
90
+ --line: #182028;
91
+ --line-strong: #24303c;
92
+ --code-bg: #000000;
93
+ --text-code: #e4e4e7;
94
+ --blue: #60a5fa;
95
+ --teal: #2dd4bf;
96
+ --amber: #fbbf24;
97
+ --rose: #fb7185;
98
+ --violet: #a78bfa;
99
+ --accent: var(--blue);
100
+ --accent-soft: rgba(96, 165, 250, 0.1);
101
+ --correct-bg: rgba(16, 185, 129, 0.1);
102
+ --correct-line: #10b981;
103
+ --wrong-bg: rgba(244, 63, 94, 0.1);
104
+ --wrong-line: #f43f5e;
105
+ --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
106
+ }
107
+
108
+ html[data-palette="field"][data-theme="dark"] {
109
+ --bg: #090c0a;
110
+ --paper: #121212;
111
+ --line: #1a221c;
112
+ --line-strong: #27362c;
113
+ --accent: var(--teal);
114
+ --accent-soft: rgba(45, 212, 191, 0.1);
115
+ }
116
+
117
+ html[data-palette="ember"][data-theme="dark"] {
118
+ --bg: #0d0a08;
119
+ --paper: #121212;
120
+ --line: #221a16;
121
+ --line-strong: #362822;
122
+ --accent: #fb923c;
123
+ --accent-soft: rgba(251, 146, 60, 0.1);
124
+ }
125
+
126
+ html[data-palette="elixir"][data-theme="dark"] {
127
+ --bg: #0b0a0e;
128
+ --paper: #121212;
129
+ --line: #1c1a24;
130
+ --line-strong: #2d263b;
131
+ --accent: #c084fc;
132
+ --accent-soft: rgba(192, 132, 252, 0.1);
133
+ }
134
+
135
+ html[data-palette="trunk"][data-theme="dark"] {
136
+ --bg: #0c0a09;
137
+ --paper: #121212;
138
+ --line: #201a17;
139
+ --line-strong: #332822;
140
+ --accent: #d4a373;
141
+ --accent-soft: rgba(212, 163, 115, 0.1);
142
+ }
143
+
144
+ html[data-palette="lava"][data-theme="dark"] {
145
+ --bg: #0f0808;
146
+ --paper: #121212;
147
+ --line: #241414;
148
+ --line-strong: #3c1e1e;
149
+ --accent: #f87171;
150
+ --accent-soft: rgba(248, 113, 113, 0.1);
70
151
  }
71
152
 
72
153
  @media (prefers-color-scheme: dark) {
73
154
  :root:not([data-theme="light"]) {
74
- --bg: #11100f;
75
- --paper: #191817;
76
- --panel: #22201d;
77
- --panel-strong: #2b2824;
78
- --ink: #f4efe7;
79
- --muted: #b8aa99;
80
- --faint: #887b6d;
81
- --line: #36312c;
82
- --line-strong: #5b5046;
83
- --code-bg: #0b0d10;
84
- --text-code: #f1f1f1;
85
- --accent-soft: #1a2a36;
86
- --correct-bg: #173329;
87
- --correct-line: #61b58d;
88
- --wrong-bg: #351f20;
89
- --wrong-line: #d56c60;
90
- --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
155
+ color-scheme: dark;
156
+ --bg: #07090c;
157
+ --paper: #121212;
158
+ --panel: #1a1a1a;
159
+ --panel-strong: #262626;
160
+ --ink: #f0f0f0;
161
+ --muted: #a1a1aa;
162
+ --faint: #71717a;
163
+ --line: #182028;
164
+ --line-strong: #24303c;
165
+ --code-bg: #000000;
166
+ --text-code: #e4e4e7;
167
+ --blue: #60a5fa;
168
+ --teal: #2dd4bf;
169
+ --amber: #fbbf24;
170
+ --rose: #fb7185;
171
+ --violet: #a78bfa;
172
+ --accent: var(--blue);
173
+ --accent-soft: rgba(96, 165, 250, 0.1);
174
+ --correct-bg: rgba(16, 185, 129, 0.1);
175
+ --correct-line: #10b981;
176
+ --wrong-bg: rgba(244, 63, 94, 0.1);
177
+ --wrong-line: #f43f5e;
178
+ --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
91
179
  }
92
- }
93
180
 
94
- :root[data-theme="dark"] {
95
- --bg: #11100f;
96
- --paper: #191817;
97
- --panel: #22201d;
98
- --panel-strong: #2b2824;
99
- --ink: #f4efe7;
100
- --muted: #b8aa99;
101
- --faint: #887b6d;
102
- --line: #36312c;
103
- --line-strong: #5b5046;
104
- --code-bg: #0b0d10;
105
- --text-code: #f1f1f1;
106
- --accent-soft: #1a2a36;
107
- --correct-bg: #173329;
108
- --correct-line: #61b58d;
109
- --wrong-bg: #351f20;
110
- --wrong-line: #d56c60;
111
- --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
181
+ html[data-palette="field"]:not([data-theme="light"]) {
182
+ --bg: #090c0a;
183
+ --paper: #121212;
184
+ --line: #1a221c;
185
+ --line-strong: #27362c;
186
+ --accent: var(--teal);
187
+ --accent-soft: rgba(45, 212, 191, 0.1);
188
+ }
189
+
190
+ html[data-palette="ember"]:not([data-theme="light"]) {
191
+ --bg: #0d0a08;
192
+ --paper: #121212;
193
+ --line: #221a16;
194
+ --line-strong: #362822;
195
+ --accent: #fb923c;
196
+ --accent-soft: rgba(251, 146, 60, 0.1);
197
+ }
198
+
199
+ html[data-palette="elixir"]:not([data-theme="light"]) {
200
+ --bg: #0b0a0e;
201
+ --paper: #121212;
202
+ --line: #1c1a24;
203
+ --line-strong: #2d263b;
204
+ --accent: #c084fc;
205
+ --accent-soft: rgba(192, 132, 252, 0.1);
206
+ }
207
+
208
+ html[data-palette="trunk"]:not([data-theme="light"]) {
209
+ --bg: #0c0a09;
210
+ --paper: #121212;
211
+ --line: #201a17;
212
+ --line-strong: #332822;
213
+ --accent: #d4a373;
214
+ --accent-soft: rgba(212, 163, 115, 0.1);
215
+ }
216
+
217
+ html[data-palette="lava"]:not([data-theme="light"]) {
218
+ --bg: #0f0808;
219
+ --paper: #121212;
220
+ --line: #241414;
221
+ --line-strong: #3c1e1e;
222
+ --accent: #f87171;
223
+ --accent-soft: rgba(248, 113, 113, 0.1);
224
+ }
112
225
  }
113
226
 
114
227
  * {
@@ -117,21 +230,9 @@ html[data-palette="ember"] {
117
230
  padding: 0;
118
231
  }
119
232
  html {
120
- scroll-behavior: smooth;
121
233
  }
122
234
  body {
123
- background:
124
- linear-gradient(
125
- 90deg,
126
- color-mix(in srgb, var(--accent) 7%, transparent),
127
- transparent 34%
128
- ),
129
- radial-gradient(
130
- circle at 88% 6%,
131
- color-mix(in srgb, var(--teal) 10%, transparent),
132
- transparent 30%
133
- ),
134
- var(--bg);
235
+ background: var(--bg);
135
236
  color: var(--ink);
136
237
  font-family: var(--font-sans);
137
238
  line-height: 1.85;
@@ -410,30 +511,37 @@ body {
410
511
  flex-direction: column;
411
512
  gap: 4px;
412
513
  padding: 0 16px;
514
+ position: relative;
515
+ }
516
+ .bk-nav-active-pill {
517
+ position: absolute;
518
+ left: 16px;
519
+ right: 16px;
520
+ background: var(--accent-soft);
521
+ border-radius: 6px;
522
+ transition: top 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
523
+ z-index: 0;
524
+ pointer-events: none;
525
+ opacity: 0;
413
526
  }
414
527
  .bk-nav-item {
415
528
  display: block;
416
- padding: 9px 10px 9px 14px;
529
+ padding: 7px 12px;
417
530
  font-size: 13px;
418
- line-height: 1.35;
531
+ line-height: 1.4;
419
532
  color: var(--muted);
420
533
  text-decoration: none;
421
- border-radius: 8px;
422
- border-left: 2px solid transparent;
423
- transition:
424
- color 0.2s ease,
425
- background 0.2s ease,
426
- border-color 0.2s ease;
534
+ border-bottom: none;
535
+ border-radius: 6px;
536
+ position: relative;
537
+ z-index: 1;
538
+ transition: color 0.15s ease;
427
539
  }
428
540
  .bk-nav-item:hover {
429
541
  color: var(--ink);
430
- background: var(--panel);
431
542
  }
432
543
  .bk-nav-item.active {
433
544
  color: var(--accent);
434
- background: var(--accent-soft);
435
- border-left-color: var(--accent);
436
- font-weight: 600;
437
545
  }
438
546
  .bk-nav-heading {
439
547
  font-weight: 600;
@@ -443,7 +551,8 @@ body {
443
551
  .bk-nav-heading:first-child {
444
552
  margin-top: 0;
445
553
  }
446
- .bk-nav-sub {
554
+ .bk-nav-sub,
555
+ .bk-nav-sim {
447
556
  padding-left: 32px;
448
557
  font-size: 13px;
449
558
  position: relative;
@@ -510,8 +619,7 @@ body {
510
619
  }
511
620
 
512
621
  .bk-markdown h1,
513
- .bk-section h1,
514
- .bk-section h2 {
622
+ .bk-section h1 {
515
623
  font-family: var(--font-display);
516
624
  font-size: 34px;
517
625
  font-weight: 700;
@@ -526,14 +634,14 @@ body {
526
634
  margin-top: 16px;
527
635
  }
528
636
  .bk-markdown h2,
529
- .bk-section h3 {
637
+ .bk-section h2 {
530
638
  font-size: 23px;
531
639
  font-weight: 650;
532
640
  margin: 32px 0 16px;
533
641
  letter-spacing: 0;
534
642
  }
535
643
  .bk-markdown h3,
536
- .bk-section h4 {
644
+ .bk-section h3 {
537
645
  font-size: 18px;
538
646
  font-weight: 600;
539
647
  margin: 24px 0 12px;
@@ -781,11 +889,7 @@ hr.bk-divider {
781
889
  gap: 12px;
782
890
  padding: 13px 16px;
783
891
  border-bottom: 1px solid var(--line);
784
- background: linear-gradient(
785
- 90deg,
786
- color-mix(in srgb, var(--object-accent, var(--accent)) 12%, var(--paper)),
787
- var(--paper)
788
- );
892
+ background: color-mix(in srgb, var(--object-accent, var(--accent)) 3%, var(--paper));
789
893
  }
790
894
  .bk-object-kicker {
791
895
  font-size: 11px;
@@ -815,10 +919,9 @@ hr.bk-divider {
815
919
  background: rgba(0, 0, 0, 0.05);
816
920
  color: var(--ink);
817
921
  }
818
- @media (prefers-color-scheme: dark) {
819
- .bk-object-maximize:hover {
820
- background: rgba(255, 255, 255, 0.1);
821
- }
922
+
923
+ :root[data-theme="dark"] .bk-object-maximize:hover {
924
+ background: rgba(255, 255, 255, 0.1);
822
925
  }
823
926
  .bk-object--maximized {
824
927
  position: fixed;
@@ -880,6 +983,8 @@ hr.bk-divider {
880
983
  border-radius: 8px;
881
984
  overflow: hidden;
882
985
  background: #000;
986
+ content-visibility: auto;
987
+ contain-intrinsic-size: auto 480px;
883
988
  isolation: isolate;
884
989
  display: flex;
885
990
  justify-content: center;
@@ -1256,3 +1361,183 @@ hr.bk-divider {
1256
1361
  grid-template-columns: 1fr !important;
1257
1362
  }
1258
1363
  }
1364
+
1365
+ @media (prefers-reduced-motion: no-preference) {
1366
+ @view-transition {
1367
+ navigation: auto;
1368
+ }
1369
+ }
1370
+ /* ─── UI THEMES ───────────────────────────────────────────────────────────── */
1371
+
1372
+ /* --- NEO BRUTALIST --- */
1373
+ html[data-ui="neo"] {
1374
+ --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1375
+ --font-display: "Syne", Georgia, serif;
1376
+ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1377
+ }
1378
+
1379
+ /* NO COLOR OVERRIDES FOR NEO! Let palettes do their job. */
1380
+
1381
+ html[data-ui="neo"] * {
1382
+ border-radius: 0 !important;
1383
+ }
1384
+
1385
+ html[data-ui="neo"] .bk-callout,
1386
+ html[data-ui="neo"] .bk-object,
1387
+ html[data-ui="neo"] .bk-lesson-card,
1388
+ html[data-ui="neo"] .bk-path-terminal,
1389
+ html[data-ui="neo"] .bk-theme-panel,
1390
+ html[data-ui="neo"] .bk-segmented-control,
1391
+ html[data-ui="neo"] .bk-icon-btn,
1392
+ html[data-ui="neo"] .bk-sidebar-expand,
1393
+ html[data-ui="neo"] .bk-brand-mark {
1394
+ border-width: 2px !important;
1395
+ border-style: solid !important;
1396
+ border-color: var(--line-strong, var(--line)) !important;
1397
+ }
1398
+
1399
+ html[data-ui="neo"] .bk-sidebar {
1400
+ border-top: none !important;
1401
+ border-bottom: none !important;
1402
+ border-left: none !important;
1403
+ border-right: 2px solid var(--line-strong, var(--line)) !important;
1404
+ }
1405
+
1406
+ html[data-ui="neo"] blockquote {
1407
+ border-left-width: 6px !important;
1408
+ }
1409
+
1410
+ html[data-ui="neo"] .bk-callout,
1411
+ html[data-ui="neo"] .bk-object,
1412
+ html[data-ui="neo"] .bk-theme-panel,
1413
+ html[data-ui="neo"] .bk-lesson-card,
1414
+ html[data-ui="neo"] .bk-sidebar-expand,
1415
+ html[data-ui="neo"] .bk-icon-btn {
1416
+ box-shadow: 4px 4px 0px 0px var(--ink) !important;
1417
+ transition: all 0.15s ease-out !important;
1418
+ }
1419
+
1420
+ html[data-ui="neo"][data-theme="dark"] .bk-callout,
1421
+ html[data-ui="neo"][data-theme="dark"] .bk-object,
1422
+ html[data-ui="neo"][data-theme="dark"] .bk-theme-panel,
1423
+ html[data-ui="neo"][data-theme="dark"] .bk-lesson-card,
1424
+ html[data-ui="neo"][data-theme="dark"] .bk-sidebar-expand,
1425
+ html[data-ui="neo"][data-theme="dark"] .bk-icon-btn {
1426
+ box-shadow: 4px 4px 0px 0px var(--accent) !important;
1427
+ }
1428
+
1429
+ html[data-ui="neo"] .bk-lesson-card {
1430
+ padding: 24px;
1431
+ }
1432
+
1433
+ html[data-ui="neo"] .bk-lesson-card:hover {
1434
+ transform: translate(-2px, -2px) !important;
1435
+ box-shadow: 6px 6px 0px 0px var(--ink) !important;
1436
+ }
1437
+
1438
+ html[data-ui="neo"][data-theme="dark"] .bk-lesson-card:hover {
1439
+ box-shadow: 6px 6px 0px 0px var(--accent) !important;
1440
+ }
1441
+
1442
+
1443
+ /* --- PLAYFUL --- */
1444
+ html[data-ui="playful"] {
1445
+ --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1446
+ --font-display: "Nunito", sans-serif;
1447
+ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
1448
+ }
1449
+
1450
+ html[data-ui="playful"] .bk-callout,
1451
+ html[data-ui="playful"] .bk-lesson-card,
1452
+ html[data-ui="playful"] .bk-object,
1453
+ html[data-ui="playful"] .bk-path-terminal,
1454
+ html[data-ui="playful"] .bk-theme-panel {
1455
+ border-radius: 24px !important;
1456
+ border-width: 3px !important;
1457
+ border-style: solid !important;
1458
+ border-color: var(--line) !important;
1459
+ box-shadow: 0 6px 0 0 var(--line), 0 16px 30px rgba(0,0,0,0.06) !important;
1460
+ transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
1461
+ overflow: hidden;
1462
+ background: var(--paper) !important;
1463
+ }
1464
+
1465
+ html[data-ui="playful"][data-theme="dark"] .bk-callout,
1466
+ html[data-ui="playful"][data-theme="dark"] .bk-lesson-card,
1467
+ html[data-ui="playful"][data-theme="dark"] .bk-object,
1468
+ html[data-ui="playful"][data-theme="dark"] .bk-path-terminal,
1469
+ html[data-ui="playful"][data-theme="dark"] .bk-theme-panel {
1470
+ box-shadow: 0 6px 0 0 var(--line), 0 16px 30px rgba(0,0,0,0.3) !important;
1471
+ }
1472
+
1473
+ @media (hover: hover) and (pointer: fine) {
1474
+ html[data-ui="playful"] .bk-lesson-card:hover,
1475
+ html[data-ui="playful"] .bk-icon-btn:hover {
1476
+ transform: translateY(2px) !important;
1477
+ box-shadow: 0 4px 0 0 var(--line), 0 8px 20px rgba(0,0,0,0.1) !important;
1478
+ }
1479
+
1480
+ html[data-ui="playful"][data-theme="dark"] .bk-lesson-card:hover,
1481
+ html[data-ui="playful"][data-theme="dark"] .bk-icon-btn:hover {
1482
+ box-shadow: 0 4px 0 0 var(--line), 0 8px 20px rgba(0,0,0,0.4) !important;
1483
+ }
1484
+ }
1485
+
1486
+
1487
+ html[data-ui="playful"] .bk-lesson-card:active,
1488
+ html[data-ui="playful"] .bk-icon-btn:active {
1489
+ transform: translateY(6px) !important;
1490
+ box-shadow: 0 0px 0 0 var(--line) !important;
1491
+ }
1492
+
1493
+ html[data-ui="playful"] .bk-object-header {
1494
+ border-bottom: 3px solid var(--line) !important;
1495
+ padding: 16px 20px !important;
1496
+ }
1497
+
1498
+ html[data-ui="playful"] .bk-sidebar {
1499
+ border-top-right-radius: 32px !important;
1500
+ border-bottom-right-radius: 32px !important;
1501
+ border-right: 3px solid var(--line) !important;
1502
+ box-shadow: 4px 0 24px rgba(0,0,0,0.05) !important;
1503
+ }
1504
+
1505
+ html[data-ui="playful"][data-theme="dark"] .bk-sidebar {
1506
+ box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
1507
+ }
1508
+
1509
+ html[data-ui="playful"] .bk-segment-btn {
1510
+ border-radius: 16px !important;
1511
+ font-weight: 800 !important;
1512
+ }
1513
+
1514
+ html[data-ui="playful"] .bk-icon-btn {
1515
+ border-radius: 50% !important;
1516
+ border: 3px solid var(--line) !important;
1517
+ box-shadow: 0 4px 0 0 var(--line) !important;
1518
+ transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
1519
+ background: var(--paper) !important;
1520
+ }
1521
+
1522
+ html[data-ui="playful"] .bk-hero h1 {
1523
+ font-weight: 900;
1524
+ letter-spacing: -0.04em;
1525
+ text-shadow: 3px 3px 0 var(--line-strong);
1526
+ }
1527
+
1528
+ html[data-ui="playful"] .bk-lesson-card h2 {
1529
+ font-weight: 800;
1530
+ }
1531
+
1532
+ html[data-ui="playful"] .bk-timeline-node {
1533
+ border-radius: 50% !important;
1534
+ border-width: 3px !important;
1535
+ box-shadow: 0 3px 0 0 var(--line) !important;
1536
+ }
1537
+
1538
+ html[data-ui="playful"] blockquote {
1539
+ border-left: 6px solid var(--accent) !important;
1540
+ border-radius: 12px;
1541
+ background: var(--accent-soft) !important;
1542
+ padding: 16px 20px !important;
1543
+ }
package/dist/types.d.ts CHANGED
@@ -126,10 +126,17 @@ export interface BuildOptions {
126
126
  outDir?: string;
127
127
  /** Base path for resolving local files like `.md`, `.js`, `.json`. Default: `'.'` */
128
128
  contentBase?: string;
129
- /** Light or dark mode. `auto` respects user system preferences. Default: `'auto'` */
129
+ /** Light or dark mode. Default: `'auto'` */
130
130
  theme?: "light" | "dark" | "auto";
131
131
  /** Visual color palette of the generated page. Default: `'ink'` */
132
132
  palette?: "ink" | "field" | "ember";
133
+ /**
134
+ * Structural layout styling.
135
+ * - `standard`: clean, rounded standard aesthetic
136
+ * - `neo`: neo-brutalist harsh borders and shadows
137
+ * - `playful`: bubbly rounded buttons and bounce transitions
138
+ */
139
+ ui?: "standard" | "neo" | "playful";
133
140
  /** Custom CSS font-family string (e.g. `'Inter, sans-serif'`). */
134
141
  font?: string;
135
142
  /** Path to a favicon. */
@@ -204,13 +211,4 @@ export interface Chapter {
204
211
  meta: ChapterMeta;
205
212
  lessons: Lesson[];
206
213
  }
207
- export interface CourseMeta {
208
- title: string;
209
- slug: string;
210
- description?: string;
211
- }
212
- export interface Course {
213
- meta: CourseMeta;
214
- chapters: Chapter[];
215
- }
216
214
  //# sourceMappingURL=types.d.ts.map