@airalogy/aimd-renderer 2.7.0 → 2.8.1

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.
@@ -1,6 +1,613 @@
1
1
  /* Re-export KaTeX base styles for AIMD renderer consumers. */
2
2
  @import "katex/dist/katex.min.css";
3
3
 
4
+ :root {
5
+ --aimd-border-color: #90caf9;
6
+ --aimd-border-color-focus: #4181fd;
7
+ --aimd-var-bg: #e3f2fd;
8
+ --aimd-var-scope-bg: #bbdefb;
9
+ --aimd-var-text: #1565c0;
10
+ --aimd-var-scope-text: #1976d2;
11
+ }
12
+
13
+ .aimd-field {
14
+ display: inline-flex;
15
+ align-items: center;
16
+ box-sizing: border-box;
17
+ max-width: 100%;
18
+ flex-wrap: wrap;
19
+ gap: 4px;
20
+ margin: 4px 0;
21
+ padding: 2px 4px;
22
+ border-radius: 4px;
23
+ font-size: 14px;
24
+ line-height: 1.5;
25
+ vertical-align: middle;
26
+ }
27
+
28
+ .aimd-field--var {
29
+ border: 1px solid var(--aimd-border-color);
30
+ background-color: var(--aimd-var-bg);
31
+ color: var(--aimd-var-text);
32
+ }
33
+
34
+ .aimd-field--var .aimd-field__scope {
35
+ padding: 0 4px;
36
+ border-radius: 2px;
37
+ background-color: var(--aimd-var-scope-bg);
38
+ color: var(--aimd-var-scope-text);
39
+ font-size: 12px;
40
+ font-weight: 600;
41
+ text-transform: lowercase;
42
+ }
43
+
44
+ .aimd-field--var .aimd-field__name {
45
+ font-weight: 500;
46
+ }
47
+
48
+ .aimd-field--var .aimd-field__type {
49
+ color: #7b1fa2;
50
+ font-size: 12px;
51
+ font-style: italic;
52
+ }
53
+
54
+ .aimd-field__name--with-metadata {
55
+ display: inline-flex;
56
+ flex-direction: column;
57
+ align-items: flex-start;
58
+ min-width: 0;
59
+ gap: 1px;
60
+ line-height: 1.25;
61
+ }
62
+
63
+ .aimd-field__title {
64
+ font-weight: inherit;
65
+ overflow-wrap: anywhere;
66
+ }
67
+
68
+ .aimd-field__key {
69
+ color: rgba(15, 23, 42, 0.55);
70
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
71
+ font-size: 11px;
72
+ font-weight: 500;
73
+ line-height: 1.2;
74
+ overflow-wrap: anywhere;
75
+ }
76
+
77
+ .aimd-field--var-table {
78
+ display: block;
79
+ box-sizing: border-box;
80
+ width: 100%;
81
+ max-width: 100%;
82
+ margin: 8px 0;
83
+ padding: 6px 8px;
84
+ overflow: visible;
85
+ border: 1px solid #a5d6a7;
86
+ border-radius: 4px;
87
+ background-color: #e8f5e9;
88
+ color: #2e7d32;
89
+ font-size: 14px;
90
+ }
91
+
92
+ .aimd-field--var-table .aimd-field__header {
93
+ display: inline-flex;
94
+ align-items: center;
95
+ flex-wrap: wrap;
96
+ gap: 4px;
97
+ }
98
+
99
+ .aimd-field--var-table .aimd-field__scope {
100
+ padding: 0 4px;
101
+ border-radius: 2px;
102
+ background-color: #c8e6c9;
103
+ color: #388e3c;
104
+ font-size: 12px;
105
+ font-weight: 600;
106
+ text-transform: lowercase;
107
+ }
108
+
109
+ .aimd-field--var-table .aimd-field__name {
110
+ font-weight: 500;
111
+ }
112
+
113
+ .aimd-field--var-table .aimd-field__table-preview {
114
+ width: 100%;
115
+ margin-top: 8px;
116
+ margin-bottom: 4px;
117
+ overflow: visible;
118
+ border-collapse: collapse;
119
+ border-radius: 4px;
120
+ font-size: 12px;
121
+ table-layout: fixed;
122
+ }
123
+
124
+ .aimd-field--var-table .aimd-field__table-preview th,
125
+ .aimd-field--var-table .aimd-field__table-preview td {
126
+ padding: 4px 8px;
127
+ border: 1px solid #c8e6c9;
128
+ overflow-wrap: anywhere;
129
+ text-align: left;
130
+ vertical-align: top;
131
+ }
132
+
133
+ .aimd-field--var-table .aimd-field__table-preview th {
134
+ position: relative;
135
+ overflow: visible;
136
+ background: #cfeed0;
137
+ color: #2e7d32;
138
+ font-weight: 600;
139
+ }
140
+
141
+ .aimd-field--var-table .aimd-field__table-preview th:has(.aimd-field__metadata-host:hover),
142
+ .aimd-field--var-table .aimd-field__table-preview th:has(.aimd-field__metadata-host:focus),
143
+ .aimd-field--var-table .aimd-field__table-preview th:has(.aimd-field__metadata-host:focus-within) {
144
+ z-index: 95;
145
+ }
146
+
147
+ .aimd-field--var-table .aimd-field__table-preview td {
148
+ color: #666;
149
+ font-style: italic;
150
+ }
151
+
152
+ .aimd-field--quiz {
153
+ display: block;
154
+ box-sizing: border-box;
155
+ width: 100%;
156
+ max-width: 860px;
157
+ margin: 10px 0;
158
+ padding: 8px 10px;
159
+ border: 1px solid #ffe082;
160
+ border-radius: 6px;
161
+ background-color: #fff8e1;
162
+ color: #4e342e;
163
+ }
164
+
165
+ .aimd-field--quiz .aimd-quiz__meta {
166
+ display: flex;
167
+ flex-wrap: wrap;
168
+ align-items: center;
169
+ gap: 6px;
170
+ }
171
+
172
+ .aimd-field--quiz .aimd-field__scope {
173
+ padding: 0 4px;
174
+ border-radius: 2px;
175
+ background-color: #ffecb3;
176
+ color: #8d6e63;
177
+ font-size: 12px;
178
+ font-weight: 700;
179
+ }
180
+
181
+ .aimd-field--quiz .aimd-field__name {
182
+ font-weight: 600;
183
+ }
184
+
185
+ .aimd-field--quiz .aimd-field__type,
186
+ .aimd-field--quiz .aimd-quiz__score {
187
+ color: #6d4c41;
188
+ font-size: 12px;
189
+ }
190
+
191
+ .aimd-field--quiz .aimd-quiz__title {
192
+ margin-top: 6px;
193
+ color: #3b2f2f;
194
+ font-size: 16px;
195
+ font-weight: 700;
196
+ }
197
+
198
+ .aimd-field--quiz .aimd-quiz__stem {
199
+ margin-top: 6px;
200
+ line-height: 1.55;
201
+ white-space: pre-wrap;
202
+ }
203
+
204
+ .aimd-field--quiz .aimd-quiz__description {
205
+ margin-top: 6px;
206
+ color: #6d4c41;
207
+ font-size: 13px;
208
+ line-height: 1.45;
209
+ white-space: pre-wrap;
210
+ }
211
+
212
+ .aimd-field--quiz .aimd-quiz__blank-placeholder {
213
+ display: inline-flex;
214
+ align-items: center;
215
+ justify-content: center;
216
+ min-width: 44px;
217
+ margin: 0 2px;
218
+ padding: 0 6px;
219
+ border-bottom: 2px solid #f9a825;
220
+ border-radius: 4px 4px 2px 2px;
221
+ background: #fffde7;
222
+ color: #8d6e63;
223
+ font-size: 12px;
224
+ font-weight: 600;
225
+ line-height: 1.4;
226
+ vertical-align: baseline;
227
+ }
228
+
229
+ .aimd-field--quiz .aimd-quiz__options {
230
+ margin: 8px 0 0;
231
+ padding-left: 20px;
232
+ }
233
+
234
+ .aimd-field--quiz .aimd-quiz__options li {
235
+ margin: 3px 0;
236
+ }
237
+
238
+ .aimd-field--quiz .aimd-quiz__rubric {
239
+ margin-top: 8px;
240
+ padding: 6px 8px;
241
+ border-left: 3px solid #ffcc80;
242
+ background: #fff3cd;
243
+ color: #6d4c41;
244
+ font-size: 13px;
245
+ }
246
+
247
+ .aimd-field--quiz .aimd-scale__table {
248
+ width: 100%;
249
+ margin-top: 10px;
250
+ border-collapse: collapse;
251
+ table-layout: fixed;
252
+ }
253
+
254
+ .aimd-field--quiz .aimd-scale__table th,
255
+ .aimd-field--quiz .aimd-scale__table td {
256
+ padding: 8px 10px;
257
+ border: 1px solid #f1d8a7;
258
+ text-align: center;
259
+ vertical-align: middle;
260
+ }
261
+
262
+ .aimd-field--quiz .aimd-scale__table thead th {
263
+ background: #fff4d6;
264
+ font-size: 12px;
265
+ font-weight: 600;
266
+ }
267
+
268
+ .aimd-field--quiz .aimd-scale__item-header,
269
+ .aimd-field--quiz .aimd-scale__item-stem {
270
+ text-align: left;
271
+ }
272
+
273
+ .aimd-field--quiz .aimd-scale__item-stem {
274
+ width: 34%;
275
+ font-weight: 500;
276
+ line-height: 1.4;
277
+ }
278
+
279
+ .aimd-field--quiz .aimd-scale__list {
280
+ display: flex;
281
+ flex-direction: column;
282
+ gap: 10px;
283
+ margin-top: 10px;
284
+ }
285
+
286
+ .aimd-field--quiz .aimd-scale__list-item {
287
+ padding: 10px 12px;
288
+ border: 1px solid #f1d8a7;
289
+ border-radius: 8px;
290
+ background: #fffdf7;
291
+ }
292
+
293
+ .aimd-field--quiz .aimd-scale__item-options {
294
+ margin: 8px 0 0;
295
+ padding-left: 18px;
296
+ }
297
+
298
+ .aimd-field--quiz .aimd-scale__bands {
299
+ margin: 10px 0 0;
300
+ padding-left: 20px;
301
+ }
302
+
303
+ .aimd-field--step {
304
+ border: 1px solid #ffcc80;
305
+ background-color: #fff3e0;
306
+ color: #e65100;
307
+ }
308
+
309
+ .aimd-field--step .aimd-field__icon {
310
+ font-size: 14px;
311
+ }
312
+
313
+ .aimd-field--step .aimd-field__name {
314
+ font-weight: 500;
315
+ }
316
+
317
+ .aimd-field--check {
318
+ display: inline-flex;
319
+ align-items: center;
320
+ gap: 8px;
321
+ padding: 4px 8px;
322
+ border: 1px solid rgba(185, 28, 28, 0.2);
323
+ border-radius: 4px;
324
+ background-color: #fffafa;
325
+ color: #333;
326
+ cursor: pointer;
327
+ transition: all 0.2s ease;
328
+ }
329
+
330
+ .aimd-field--check:hover {
331
+ border-color: rgba(185, 28, 28, 0.32);
332
+ background-color: #fff5f5;
333
+ }
334
+
335
+ .aimd-field--check.aimd-rec-inline--check-passed {
336
+ border-color: rgba(22, 101, 52, 0.22);
337
+ background-color: #f6fdf9;
338
+ color: #1f3d2a;
339
+ }
340
+
341
+ .aimd-field--check.aimd-rec-inline--check-passed:hover {
342
+ border-color: rgba(22, 101, 52, 0.34);
343
+ background-color: #effcf4;
344
+ }
345
+
346
+ .aimd-field--check .aimd-checkbox {
347
+ width: 16px;
348
+ height: 16px;
349
+ margin: 0;
350
+ accent-color: #dc2626;
351
+ cursor: pointer;
352
+ }
353
+
354
+ .aimd-field--check.aimd-rec-inline--check-passed .aimd-checkbox {
355
+ accent-color: #16a34a;
356
+ }
357
+
358
+ .aimd-field--check .aimd-field__label,
359
+ .aimd-field--check .aimd-field__name {
360
+ font-weight: 500;
361
+ user-select: none;
362
+ }
363
+
364
+ .aimd-field--editable {
365
+ min-width: 80px;
366
+ padding: 2px 8px;
367
+ cursor: text;
368
+ }
369
+
370
+ .aimd-field--editable .aimd-field__value {
371
+ display: inline-block;
372
+ font-weight: 500;
373
+ }
374
+
375
+ .aimd-ref {
376
+ display: inline-block;
377
+ margin: 4px 0;
378
+ padding: 8px 12px;
379
+ border-left: 4px solid #dfe2e5;
380
+ background-color: #f6f8fa;
381
+ color: inherit;
382
+ cursor: default;
383
+ text-decoration: none;
384
+ transition: all 0.2s ease;
385
+ vertical-align: middle;
386
+ }
387
+
388
+ .aimd-ref:hover {
389
+ border-left-color: #b0b0b0;
390
+ background-color: #f0f0f0;
391
+ }
392
+
393
+ .aimd-ref--step,
394
+ .aimd-ref--var {
395
+ padding: 0;
396
+ border: none;
397
+ background: transparent;
398
+ }
399
+
400
+ .aimd-ref--step:hover,
401
+ .aimd-ref--var:hover {
402
+ border: none;
403
+ background: transparent;
404
+ }
405
+
406
+ .aimd-ref__content {
407
+ display: inline-flex;
408
+ align-items: center;
409
+ max-width: 100%;
410
+ flex-wrap: wrap;
411
+ gap: 4px;
412
+ }
413
+
414
+ .aimd-ref--step .aimd-ref__content {
415
+ gap: 0;
416
+ }
417
+
418
+ .aimd-ref--step .aimd-field--step,
419
+ .aimd-ref--var .aimd-field--var {
420
+ margin: 0;
421
+ }
422
+
423
+ .aimd-ref .aimd-field--readonly {
424
+ opacity: 0.95;
425
+ cursor: default;
426
+ pointer-events: none;
427
+ }
428
+
429
+ .aimd-ref .aimd-field--readonly .aimd-field__value {
430
+ color: inherit;
431
+ font-weight: 500;
432
+ }
433
+
434
+ .aimd-refs {
435
+ margin: 24px 0;
436
+ padding-top: 16px;
437
+ border-top: 1px solid #d8dee8;
438
+ color: #1f2937;
439
+ }
440
+
441
+ .aimd-refs__title {
442
+ margin-bottom: 10px;
443
+ font-size: 16px;
444
+ font-weight: 700;
445
+ }
446
+
447
+ .aimd-refs__list {
448
+ margin: 0;
449
+ padding-left: 22px;
450
+ }
451
+
452
+ .aimd-refs__item {
453
+ margin: 8px 0;
454
+ line-height: 1.55;
455
+ }
456
+
457
+ .aimd-refs__doi,
458
+ .aimd-refs__url {
459
+ color: #1976d2;
460
+ overflow-wrap: anywhere;
461
+ }
462
+
463
+ .aimd-figure {
464
+ display: block;
465
+ box-sizing: border-box;
466
+ width: fit-content;
467
+ max-width: min(100%, 920px);
468
+ margin: 1.2em auto 1.45em;
469
+ overflow: hidden;
470
+ border: 1px solid #d8e2ef;
471
+ border-radius: 10px;
472
+ background: #ffffff;
473
+ }
474
+
475
+ .aimd-figure > .aimd-figure__image {
476
+ display: block;
477
+ max-width: 100%;
478
+ height: auto;
479
+ margin: 0 auto;
480
+ border-radius: 0;
481
+ background: #f3f7fc;
482
+ object-fit: contain;
483
+ }
484
+
485
+ .aimd-figure__caption {
486
+ display: block;
487
+ margin: 0;
488
+ padding: 10px 14px 12px 16px;
489
+ border-top: 1px solid #d8e2ef;
490
+ background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
491
+ color: #253247;
492
+ line-height: 1.45;
493
+ }
494
+
495
+ .aimd-figure__title {
496
+ margin: 0;
497
+ color: #172033;
498
+ font-size: 0.94em;
499
+ font-weight: 700;
500
+ line-height: 1.38;
501
+ }
502
+
503
+ .aimd-figure__legend {
504
+ margin: 4px 0 0;
505
+ color: #526176;
506
+ font-size: 0.9em;
507
+ line-height: 1.5;
508
+ }
509
+
510
+ @media (max-width: 640px) {
511
+ .aimd-figure {
512
+ width: 100%;
513
+ margin-right: 0;
514
+ margin-left: 0;
515
+ }
516
+
517
+ .aimd-figure > .aimd-figure__image {
518
+ width: 100%;
519
+ }
520
+ }
521
+
522
+ .aimd-ref[data-aimd-ref-target] {
523
+ cursor: pointer;
524
+ }
525
+
526
+ .aimd-ref[data-aimd-ref-target]:focus-visible {
527
+ outline: 2px solid rgba(25, 118, 210, 0.36);
528
+ outline-offset: 3px;
529
+ }
530
+
531
+ .aimd-cite {
532
+ display: inline;
533
+ color: #1976d2;
534
+ font-size: 13px;
535
+ text-decoration: none;
536
+ }
537
+
538
+ .aimd-cite__refs {
539
+ font-weight: 500;
540
+ }
541
+
542
+ .aimd-cite__ref {
543
+ position: relative;
544
+ display: inline-flex;
545
+ align-items: center;
546
+ border-radius: 999px;
547
+ outline: none;
548
+ color: inherit;
549
+ cursor: help;
550
+ font-weight: 600;
551
+ line-height: 1;
552
+ text-decoration: none;
553
+ }
554
+
555
+ .aimd-cite__ref:hover,
556
+ .aimd-cite__ref:focus-visible {
557
+ text-decoration: underline;
558
+ }
559
+
560
+ .aimd-cite__label {
561
+ display: inline-flex;
562
+ align-items: center;
563
+ }
564
+
565
+ .aimd-cite__popover {
566
+ position: absolute;
567
+ left: 50%;
568
+ top: calc(100% + 8px);
569
+ z-index: 30;
570
+ width: max-content;
571
+ max-width: min(420px, 80vw);
572
+ padding: 8px 10px;
573
+ border: 1px solid #d6e1f0;
574
+ border-radius: 8px;
575
+ background: #ffffff;
576
+ box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
577
+ color: #1f2937;
578
+ font-size: 12px;
579
+ font-weight: 500;
580
+ line-height: 1.45;
581
+ opacity: 0;
582
+ overflow-wrap: anywhere;
583
+ pointer-events: none;
584
+ user-select: text;
585
+ text-align: left;
586
+ text-decoration: none;
587
+ transform: translate(-50%, -4px);
588
+ transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
589
+ visibility: hidden;
590
+ white-space: normal;
591
+ }
592
+
593
+ .aimd-cite__popover::before {
594
+ content: "";
595
+ position: absolute;
596
+ left: 0;
597
+ right: 0;
598
+ top: -10px;
599
+ height: 10px;
600
+ }
601
+
602
+ .aimd-cite__ref:hover .aimd-cite__popover,
603
+ .aimd-cite__ref:focus .aimd-cite__popover,
604
+ .aimd-cite__ref:focus-within .aimd-cite__popover {
605
+ opacity: 1;
606
+ pointer-events: auto;
607
+ transform: translate(-50%, 0);
608
+ visibility: visible;
609
+ }
610
+
4
611
  .aimd-field__metadata-host {
5
612
  position: relative;
6
613
  cursor: help;
package/src/vue/index.ts CHANGED
@@ -60,6 +60,10 @@ export type {
60
60
  } from '@airalogy/aimd-core/types'
61
61
 
62
62
  export type { AimdAssignerVisibility, AimdRendererOptions, RenderResult } from '../common/processor'
63
+ export type {
64
+ AimdAssetUrlResolver,
65
+ AimdAssetUrlResolveContext,
66
+ } from '../common/assetUrls'
63
67
  export type {
64
68
  AimdRendererI18nOptions,
65
69
  AimdRendererLocale,