@siladev/qalam 0.1.1 → 0.1.3

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 (2) hide show
  1. package/dist/styles.css +1061 -0
  2. package/package.json +2 -1
@@ -0,0 +1,1061 @@
1
+ /* Abjad counter style */
2
+ @counter-style abjad {
3
+ system: fixed;
4
+ symbols: 'أ' 'ب' 'ج' 'د' 'ه' 'و' 'ز' 'ح' 'ط' 'ي' 'ك' 'ل' 'م' 'ن' 'س' 'ع' 'ف' 'ص' 'ق' 'ر' 'ش' 'ت' 'ث' 'خ' 'ذ' 'ض' 'ظ' 'غ';
5
+ suffix: '. ';
6
+ }
7
+
8
+ ol[data-list-type="abjad"] {
9
+ list-style-type: abjad;
10
+ }
11
+
12
+ /* Qalam Editor Styles */
13
+
14
+ :root {
15
+ --qalam-bg: #fff;
16
+ --qalam-bg-alt: #fafafa;
17
+ --qalam-bg-segment: #fafafa;
18
+ --qalam-border: #e0e0e0;
19
+ --qalam-border-light: #eee;
20
+ --qalam-text: #1a1a1a;
21
+ --qalam-text-muted: #888;
22
+ --qalam-text-secondary: #666;
23
+ --qalam-text-dim: #999;
24
+ --qalam-quran: #1a3fa0;
25
+ --qalam-quran-bracket: #996515;
26
+ --qalam-quran-light: #dbeafe;
27
+ --qalam-hadith: #14632e;
28
+ --qalam-hadith-bracket: #8b4513;
29
+ --qalam-hadith-light: #f0fdf4;
30
+ --qalam-accent: #2563eb;
31
+ --qalam-repeat: #7c5cbf;
32
+ --qalam-citation: #553292;
33
+ --qalam-hadith-citation-color: #7c5c12;
34
+ --qalam-repeat-bg: #f3f0ff;
35
+ --qalam-inline-repeat: #92400e;
36
+ --qalam-inline-repeat-bg: #fef3c7;
37
+ --qalam-blockquote-border: #d4a574;
38
+ --qalam-blockquote-text: #555;
39
+ --qalam-error: #991b1b;
40
+ --qalam-error-bg: #fee2e2;
41
+ --qalam-toolbar-hover: #e8e8e8;
42
+ --qalam-toolbar-active-bg: #dbeafe;
43
+ --qalam-toolbar-active: #1a3fa0;
44
+ --qalam-input-focus: #93c5fd;
45
+ --qalam-word-hover: #e0f2fe;
46
+ --qalam-word-selected: #bfdbfe;
47
+ --qalam-shadow: rgba(0, 0, 0, 0.15);
48
+ }
49
+
50
+ .qalam-dark {
51
+ --qalam-bg: #303030;
52
+ --qalam-bg-alt: #3a3a3a;
53
+ --qalam-bg-segment: #3a3a3a;
54
+ --qalam-border: #4a4a4a;
55
+ --qalam-border-light: #424242;
56
+ --qalam-text: #fafafa;
57
+ --qalam-text-muted: #a0a0a0;
58
+ --qalam-text-secondary: #c0c0c0;
59
+ --qalam-text-dim: #909090;
60
+ --qalam-quran: #c0e0ff;
61
+ --qalam-quran-bracket: #d4a24e;
62
+ --qalam-quran-light: #1e3a5f;
63
+ --qalam-hadith: #b5eece;
64
+ --qalam-hadith-bracket: #d4a574;
65
+ --qalam-hadith-light: #14532d;
66
+ --qalam-accent: #60a5fa;
67
+ --qalam-repeat: #a78bfa;
68
+ --qalam-citation: #d0c0ee;
69
+ --qalam-hadith-citation-color: #e8c470;
70
+ --qalam-repeat-bg: #2d2640;
71
+ --qalam-inline-repeat: #fbbf24;
72
+ --qalam-inline-repeat-bg: #3d2e0a;
73
+ --qalam-blockquote-border: #a8845c;
74
+ --qalam-blockquote-text: #bbb;
75
+ --qalam-error: #fca5a5;
76
+ --qalam-error-bg: #3b1515;
77
+ --qalam-toolbar-hover: #3a3a3a;
78
+ --qalam-toolbar-active-bg: #1e3a5f;
79
+ --qalam-toolbar-active: #60a5fa;
80
+ --qalam-input-focus: #60a5fa;
81
+ --qalam-word-hover: #1e3a5f;
82
+ --qalam-word-selected: #1e3a5f;
83
+ --qalam-shadow: rgba(0, 0, 0, 0.4);
84
+ }
85
+
86
+ .qalam-editor {
87
+ border: 1px solid var(--qalam-border);
88
+ border-radius: 8px;
89
+ background: var(--qalam-bg);
90
+ display: flex;
91
+ flex-direction: column;
92
+ max-height: 80vh;
93
+ }
94
+
95
+ .qalam-editor__scroll {
96
+ overflow-y: auto;
97
+ flex: 1;
98
+ min-height: 0;
99
+ }
100
+
101
+ .qalam-editor__content {
102
+ padding: 16px 20px;
103
+ min-height: 200px;
104
+ outline: none;
105
+ font-family: "Amiri", serif;
106
+ font-size: 20px;
107
+ line-height: 2;
108
+ color: var(--qalam-text);
109
+ }
110
+
111
+ .qalam-editor__content [dir="rtl"] {
112
+ text-align: right;
113
+ }
114
+
115
+ .qalam-editor__content ul ul,
116
+ .qalam-editor__content ol ul {
117
+ list-style-type: "- ";
118
+ }
119
+
120
+ .qalam-editor__content p {
121
+ margin: 0 0 8px;
122
+ }
123
+
124
+ .qalam-editor__content p[data-repeat],
125
+ .qalam-editor__content blockquote[data-repeat] {
126
+ position: relative;
127
+ }
128
+
129
+ /* Ghost spacer at end to reserve room */
130
+ .qalam-editor__content p[data-repeat]::after,
131
+ .qalam-editor__content blockquote[data-repeat]::after {
132
+ content: attr(data-repeat-label);
133
+ font-family: "Amiri", serif;
134
+ font-size: 0.7em;
135
+ font-weight: bold;
136
+ padding: 1px 6px;
137
+ margin: 0 6px;
138
+ visibility: hidden;
139
+ pointer-events: none;
140
+ }
141
+
142
+ /* Real badge positioned at bottom-left */
143
+ .qalam-editor__content p[data-repeat]::before,
144
+ .qalam-editor__content blockquote[data-repeat]::before {
145
+ content: attr(data-repeat-label);
146
+ position: absolute;
147
+ bottom: 4px;
148
+ left: 0;
149
+ font-family: "Amiri", serif;
150
+ font-size: 0.7em;
151
+ color: var(--qalam-repeat);
152
+ font-weight: bold;
153
+ background: var(--qalam-repeat-bg);
154
+ padding: 1px 6px;
155
+ border-radius: 3px;
156
+ white-space: nowrap;
157
+ pointer-events: none;
158
+ }
159
+
160
+ .qalam-editor__content h1,
161
+ .qalam-editor__content h2,
162
+ .qalam-editor__content h3 {
163
+ margin: 16px 0 8px;
164
+ }
165
+
166
+ .qalam-editor__content blockquote {
167
+ border-right: 3px solid var(--qalam-blockquote-border);
168
+ padding-right: 16px;
169
+ margin: 8px 0;
170
+ color: var(--qalam-blockquote-text);
171
+ }
172
+
173
+ /* Toolbar */
174
+
175
+ .qalam-toolbar {
176
+ display: flex;
177
+ align-items: center;
178
+ gap: 2px;
179
+ padding: 8px 12px;
180
+ border-bottom: 1px solid var(--qalam-border);
181
+ background: var(--qalam-bg-alt);
182
+ flex-wrap: wrap;
183
+ }
184
+
185
+ .qalam-toolbar button {
186
+ display: inline-flex;
187
+ align-items: center;
188
+ justify-content: center;
189
+ min-width: 32px;
190
+ height: 32px;
191
+ padding: 0 8px;
192
+ border: none;
193
+ border-radius: 4px;
194
+ background: transparent;
195
+ cursor: pointer;
196
+ font-size: 14px;
197
+ color: var(--qalam-text-secondary);
198
+ font-family: system-ui, sans-serif;
199
+ }
200
+
201
+ .qalam-toolbar button:hover {
202
+ background: var(--qalam-toolbar-hover);
203
+ }
204
+
205
+ .qalam-toolbar__btn--active {
206
+ background: var(--qalam-toolbar-active-bg) !important;
207
+ color: var(--qalam-toolbar-active) !important;
208
+ }
209
+
210
+ .qalam-toolbar__btn--quran {
211
+ font-family: "Amiri", serif !important;
212
+ font-size: 16px !important;
213
+ color: var(--qalam-quran) !important;
214
+ font-weight: normal;
215
+ }
216
+
217
+ .qalam-toolbar__repeat-group {
218
+ display: inline-flex;
219
+ align-items: center;
220
+ gap: 2px;
221
+ }
222
+
223
+ .qalam-toolbar__repeat-label {
224
+ font-size: 13px;
225
+ color: var(--qalam-text-secondary);
226
+ }
227
+
228
+ .qalam-toolbar__repeat-input {
229
+ width: 36px;
230
+ height: 26px;
231
+ padding: 0 2px;
232
+ border: 1px solid var(--qalam-border);
233
+ border-radius: 4px;
234
+ font-size: 13px;
235
+ text-align: center;
236
+ outline: none;
237
+ font-family: system-ui, sans-serif;
238
+ background: var(--qalam-bg);
239
+ color: var(--qalam-text);
240
+ }
241
+
242
+ .qalam-toolbar__repeat-input:focus {
243
+ border-color: var(--qalam-input-focus);
244
+ box-shadow: 0 0 0 1.5px rgba(147, 197, 253, 0.3);
245
+ }
246
+
247
+ .qalam-toolbar__sep {
248
+ width: 1px;
249
+ height: 20px;
250
+ background: var(--qalam-border);
251
+ margin: 0 4px;
252
+ }
253
+
254
+ /* QuranRef inline node */
255
+
256
+ .qalam-quran-ref {
257
+ display: inline;
258
+ cursor: pointer;
259
+ position: relative;
260
+ font-style: normal !important;
261
+ font-weight: normal !important;
262
+ text-decoration: none !important;
263
+ }
264
+
265
+ .qalam-quran-ref--selected {
266
+ outline: 2px solid #93c5fd;
267
+ outline-offset: 2px;
268
+ border-radius: 4px;
269
+ }
270
+
271
+ .qalam-quran-ref--empty {
272
+ color: var(--qalam-text-dim);
273
+ font-family: system-ui, sans-serif;
274
+ font-size: 14px;
275
+ background: var(--qalam-inline-repeat-bg);
276
+ padding: 2px 6px;
277
+ border-radius: 4px;
278
+ }
279
+
280
+ .qalam-quran-ref__text {
281
+ display: inline;
282
+ }
283
+
284
+ .qalam-quran-verse {
285
+ font-family: "HafsSmart", serif;
286
+ font-size: 1.1em;
287
+ color: var(--qalam-quran);
288
+ }
289
+
290
+ .qalam-quran-basmalah {
291
+ font-family: "KFGQPC Symbols", serif;
292
+ font-size: 1.3em;
293
+ }
294
+
295
+ .qalam-quran-bracket {
296
+ color: var(--qalam-quran-bracket);
297
+ font-family: "Amiri", serif;
298
+ font-size: 1.1em;
299
+ }
300
+
301
+ .qalam-quran-citation {
302
+ font-family: "Amiri", serif;
303
+ font-size: 0.75em;
304
+ color: var(--qalam-citation);
305
+ margin-right: 6px;
306
+ margin-left: 6px;
307
+ }
308
+
309
+ /* Popover */
310
+
311
+ .qalam-popover {
312
+ position: fixed;
313
+ z-index: 1000;
314
+ background: var(--qalam-bg);
315
+ color: var(--qalam-text);
316
+ border: 1px solid var(--qalam-border);
317
+ border-radius: 6px;
318
+ padding: 10px;
319
+ box-shadow: 0 4px 20px var(--qalam-shadow);
320
+ width: 380px;
321
+ direction: rtl;
322
+ font-family: system-ui, sans-serif;
323
+ box-sizing: border-box;
324
+ font-size: 13px;
325
+ max-height: 80vh;
326
+ overflow-y: auto;
327
+ }
328
+
329
+ .qalam-popover__field {
330
+ margin-bottom: 8px;
331
+ position: relative;
332
+ }
333
+
334
+ .qalam-popover__field label {
335
+ display: block;
336
+ font-size: 11px;
337
+ color: var(--qalam-text-muted);
338
+ margin-bottom: 2px;
339
+ }
340
+
341
+ .qalam-popover__field input[type="text"] {
342
+ width: 100%;
343
+ padding: 5px 8px;
344
+ border: 1px solid var(--qalam-border);
345
+ border-radius: 4px;
346
+ font-size: 14px;
347
+ font-family: "Amiri", serif;
348
+ outline: none;
349
+ box-sizing: border-box;
350
+ background: var(--qalam-bg-alt);
351
+ color: var(--qalam-text);
352
+ }
353
+
354
+ .qalam-popover__field input[type="text"]:focus {
355
+ border-color: var(--qalam-input-focus);
356
+ box-shadow: 0 0 0 1.5px rgba(147, 197, 253, 0.3);
357
+ }
358
+
359
+ .qalam-popover__field--half {
360
+ flex: 1;
361
+ min-width: 0;
362
+ }
363
+
364
+ .qalam-popover__row {
365
+ display: flex;
366
+ gap: 8px;
367
+ margin-bottom: 8px;
368
+ }
369
+
370
+ .qalam-popover__row .qalam-popover__field {
371
+ margin-bottom: 0;
372
+ }
373
+
374
+ .qalam-popover__checkbox {
375
+ display: flex;
376
+ align-items: center;
377
+ gap: 5px;
378
+ cursor: pointer;
379
+ font-size: 12px;
380
+ color: var(--qalam-text-secondary);
381
+ }
382
+
383
+ .qalam-popover__checkbox input[type="checkbox"] {
384
+ width: 14px;
385
+ height: 14px;
386
+ }
387
+
388
+ .qalam-popover__suggestions {
389
+ z-index: 1002;
390
+ background: var(--qalam-bg);
391
+ border: 1px solid var(--qalam-border);
392
+ border-radius: 4px;
393
+ max-height: 200px;
394
+ overflow-y: auto;
395
+ box-shadow: 0 4px 12px var(--qalam-shadow);
396
+ }
397
+
398
+ .qalam-popover__suggestion {
399
+ padding: 5px 8px;
400
+ cursor: pointer;
401
+ font-family: "Amiri", serif;
402
+ font-size: 14px;
403
+ color: var(--qalam-text);
404
+ }
405
+
406
+ .qalam-popover__suggestion:hover {
407
+ background: var(--qalam-word-hover);
408
+ }
409
+
410
+ .qalam-popover__suggestion-en {
411
+ font-family: system-ui, sans-serif;
412
+ font-size: 11px;
413
+ color: var(--qalam-text-muted);
414
+ }
415
+
416
+ .qalam-popover__actions {
417
+ display: flex;
418
+ gap: 6px;
419
+ justify-content: flex-start;
420
+ margin-top: 10px;
421
+ }
422
+
423
+ .qalam-popover__btn {
424
+ padding: 5px 14px;
425
+ border: none;
426
+ border-radius: 4px;
427
+ font-size: 13px;
428
+ cursor: pointer;
429
+ background: var(--qalam-accent);
430
+ color: #fff;
431
+ }
432
+
433
+ .qalam-popover__btn:hover {
434
+ background: var(--qalam-accent);
435
+ filter: brightness(0.9);
436
+ }
437
+
438
+ .qalam-popover__btn--secondary {
439
+ background: var(--qalam-bg-alt);
440
+ color: var(--qalam-text-secondary);
441
+ }
442
+
443
+ .qalam-popover__btn--secondary:hover {
444
+ background: var(--qalam-toolbar-hover);
445
+ }
446
+
447
+ /* Renderer */
448
+
449
+ .qalam-renderer {
450
+ font-family: "Amiri", serif;
451
+ font-size: 20px;
452
+ line-height: 2;
453
+ }
454
+
455
+ .qalam-renderer ul {
456
+ list-style-type: disc;
457
+ padding-right: 24px;
458
+ margin: 8px 0;
459
+ }
460
+
461
+ .qalam-renderer ol {
462
+ list-style-type: decimal;
463
+ padding-right: 24px;
464
+ margin: 8px 0;
465
+ }
466
+
467
+ .qalam-renderer ul ul,
468
+ .qalam-renderer ol ul {
469
+ list-style-type: "- ";
470
+ }
471
+
472
+
473
+ .qalam-render-verse {
474
+ font-family: "HafsSmart", serif;
475
+ font-size: 1.1em;
476
+ color: var(--qalam-quran);
477
+ }
478
+
479
+ .qalam-render-basmalah {
480
+ font-family: "KFGQPC Symbols", serif;
481
+ font-size: 1.3em;
482
+ }
483
+
484
+ .qalam-render-bracket {
485
+ color: var(--qalam-quran-bracket);
486
+ font-family: "Amiri", serif;
487
+ font-size: 1.1em;
488
+ }
489
+
490
+ .qalam-render-citation {
491
+ font-family: "Amiri", serif;
492
+ font-size: 0.75em;
493
+ color: var(--qalam-citation);
494
+ margin-right: 6px;
495
+ margin-left: 6px;
496
+ }
497
+
498
+ /* Inline repeat mark */
499
+
500
+ /* Inline repeat mark — matches quran repeat design */
501
+
502
+ .qalam-inline-repeat {
503
+ border-bottom: 2px solid var(--qalam-blockquote-border);
504
+ padding-bottom: 0;
505
+ }
506
+
507
+ .qalam-inline-repeat::after {
508
+ content: attr(data-repeat-label);
509
+ font-family: "Amiri", serif;
510
+ font-size: 0.7em;
511
+ color: var(--qalam-inline-repeat);
512
+ background: var(--qalam-inline-repeat-bg);
513
+ padding: 2px 6px;
514
+ border-radius: 3px;
515
+ margin: 0 4px;
516
+ vertical-align: middle;
517
+ white-space: nowrap;
518
+ }
519
+
520
+ /* Renderer inline repeat */
521
+
522
+ .qalam-render-inline-repeat {
523
+ border-bottom: 2px solid var(--qalam-blockquote-border);
524
+ padding-bottom: 0;
525
+ }
526
+
527
+ .qalam-render-inline-repeat-badge {
528
+ font-family: "Amiri", serif;
529
+ font-size: 0.7em;
530
+ color: var(--qalam-inline-repeat);
531
+ background: var(--qalam-inline-repeat-bg);
532
+ padding: 2px 6px;
533
+ border-radius: 3px;
534
+ margin: 0 4px;
535
+ vertical-align: middle;
536
+ white-space: nowrap;
537
+ unicode-bidi: isolate;
538
+ direction: rtl;
539
+ }
540
+
541
+ /* Quran repeat (editor + renderer) */
542
+
543
+ .qalam-quran-repeat {
544
+ border-bottom: 2px solid var(--qalam-blockquote-border);
545
+ padding-bottom: 0;
546
+ }
547
+
548
+ .qalam-quran-repeat-badge {
549
+ font-family: "Amiri", serif;
550
+ font-size: 0.7em;
551
+ color: var(--qalam-inline-repeat);
552
+ background: var(--qalam-inline-repeat-bg);
553
+ padding: 2px 6px;
554
+ border-radius: 3px;
555
+ margin: 0 4px;
556
+ vertical-align: middle;
557
+ white-space: nowrap;
558
+ unicode-bidi: isolate;
559
+ direction: rtl;
560
+ }
561
+
562
+ .qalam-render-repeat {
563
+ border-bottom: 2px solid var(--qalam-blockquote-border);
564
+ padding-bottom: 0;
565
+ }
566
+
567
+ .qalam-render-repeat-badge {
568
+ font-family: "Amiri", serif;
569
+ font-size: 0.7em;
570
+ color: var(--qalam-inline-repeat);
571
+ background: var(--qalam-inline-repeat-bg);
572
+ padding: 2px 6px;
573
+ border-radius: 3px;
574
+ margin: 0 4px;
575
+ vertical-align: middle;
576
+ white-space: nowrap;
577
+ unicode-bidi: isolate;
578
+ direction: rtl;
579
+ }
580
+
581
+ /* Block repeat (renderer) */
582
+
583
+ .qalam-render-block-repeat {
584
+ position: relative;
585
+ overflow: hidden;
586
+ }
587
+
588
+ .qalam-render-block-repeat-badge {
589
+ position: absolute;
590
+ bottom: 4px;
591
+ left: 0;
592
+ font-family: "Amiri", serif;
593
+ font-size: 0.7em;
594
+ color: var(--qalam-repeat);
595
+ font-weight: bold;
596
+ background: var(--qalam-repeat-bg);
597
+ padding: 1px 6px;
598
+ border-radius: 3px;
599
+ white-space: nowrap;
600
+ pointer-events: none;
601
+ unicode-bidi: isolate;
602
+ direction: rtl;
603
+ z-index: 2;
604
+ }
605
+
606
+ .qalam-render-block-repeat-ghost {
607
+ font-family: "Amiri", serif;
608
+ font-size: 0.7em;
609
+ font-weight: bold;
610
+ padding: 1px 6px;
611
+ margin: 0 6px;
612
+ visibility: hidden;
613
+ pointer-events: none;
614
+ user-select: none;
615
+ }
616
+
617
+ /* Popover segments */
618
+
619
+ .qalam-popover__segment {
620
+ border: 1px solid var(--qalam-border-light);
621
+ border-radius: 4px;
622
+ padding: 6px 8px;
623
+ margin-bottom: 6px;
624
+ background: var(--qalam-bg-segment);
625
+ }
626
+
627
+ .qalam-popover__segment-header {
628
+ display: flex;
629
+ justify-content: space-between;
630
+ align-items: center;
631
+ margin-bottom: 4px;
632
+ }
633
+
634
+ .qalam-popover__segment-num {
635
+ font-size: 11px;
636
+ font-weight: 600;
637
+ color: var(--qalam-text-muted);
638
+ background: var(--qalam-border-light);
639
+ width: 18px;
640
+ height: 18px;
641
+ display: inline-flex;
642
+ align-items: center;
643
+ justify-content: center;
644
+ border-radius: 50%;
645
+ }
646
+
647
+ .qalam-popover__segment-remove {
648
+ border: none;
649
+ background: none;
650
+ color: var(--qalam-text-dim);
651
+ cursor: pointer;
652
+ font-size: 12px;
653
+ padding: 2px 4px;
654
+ border-radius: 3px;
655
+ }
656
+
657
+ .qalam-popover__segment-remove:hover {
658
+ background: var(--qalam-error-bg);
659
+ color: var(--qalam-error);
660
+ }
661
+
662
+ .qalam-popover__field--repeat {
663
+ width: 50px;
664
+ min-width: 50px;
665
+ flex: 0 0 50px;
666
+ }
667
+
668
+ .qalam-popover__add-segment {
669
+ border: 1px dashed var(--qalam-border);
670
+ background: none;
671
+ color: var(--qalam-text-secondary);
672
+ cursor: pointer;
673
+ font-size: 12px;
674
+ padding: 4px;
675
+ border-radius: 4px;
676
+ width: 100%;
677
+ margin-bottom: 6px;
678
+ }
679
+
680
+ .qalam-popover__add-segment:hover {
681
+ background: var(--qalam-word-hover);
682
+ border-color: var(--qalam-input-focus);
683
+ color: var(--qalam-accent);
684
+ }
685
+
686
+ /* Toolbar hadith button */
687
+
688
+ .qalam-toolbar__btn--hadith {
689
+ font-family: "Amiri", serif !important;
690
+ font-size: 16px !important;
691
+ color: var(--qalam-hadith) !important;
692
+ font-weight: normal;
693
+ }
694
+
695
+ .qalam-toolbar__btn--saws {
696
+ font-size: 20px !important;
697
+ color: var(--qalam-text) !important;
698
+ }
699
+
700
+ /* HadithRef inline node (editor) */
701
+
702
+ .qalam-hadith-ref {
703
+ display: inline;
704
+ background: var(--qalam-hadith-light);
705
+ border-radius: 4px;
706
+ padding: 0 2px;
707
+ }
708
+
709
+ .qalam-hadith-ref--selected {
710
+ outline: 2px solid #fbbf24;
711
+ outline-offset: 2px;
712
+ border-radius: 4px;
713
+ }
714
+
715
+ .qalam-hadith-bracket {
716
+ color: var(--qalam-hadith-bracket);
717
+ font-family: "Amiri", serif;
718
+ font-size: 1.1em;
719
+ }
720
+
721
+ .qalam-hadith-body {
722
+ display: inline;
723
+ font-family: "Amiri", serif;
724
+ color: var(--qalam-text);
725
+ }
726
+
727
+ .qalam-hadith-meta {
728
+ display: inline-flex;
729
+ align-items: center;
730
+ gap: 4px;
731
+ margin-right: 6px;
732
+ vertical-align: baseline;
733
+ }
734
+
735
+ .qalam-hadith-citation-input,
736
+ .qalam-hadith-grade-input {
737
+ font-family: "Amiri", serif;
738
+ font-size: 0.72em;
739
+ border: none;
740
+ border-bottom: 1px dashed var(--qalam-hadith-citation-color);
741
+ background: transparent;
742
+ color: var(--qalam-hadith-citation-color);
743
+ outline: none;
744
+ padding: 0;
745
+ direction: rtl;
746
+ }
747
+
748
+ .qalam-hadith-citation-input::placeholder,
749
+ .qalam-hadith-grade-input::placeholder {
750
+ color: var(--qalam-text-dim);
751
+ font-style: italic;
752
+ }
753
+
754
+ /* Prophetic speech mark (editor) */
755
+ .qalam-prophetic-speech {
756
+ color: var(--qalam-hadith);
757
+ }
758
+
759
+ .qalam-prophetic-quote {
760
+ color: var(--qalam-hadith);
761
+ font-family: "Amiri", serif;
762
+ }
763
+
764
+ /* Hadith renderer */
765
+
766
+ .qalam-render-hadith {
767
+ display: inline;
768
+ }
769
+
770
+ .qalam-render-hadith--empty {
771
+ color: var(--qalam-hadith);
772
+ font-size: 0.85em;
773
+ }
774
+
775
+ .qalam-render-hadith-bracket {
776
+ color: var(--qalam-hadith-bracket);
777
+ font-family: "Amiri", serif;
778
+ font-size: 1.1em;
779
+ }
780
+
781
+ .qalam-render-hadith-citation {
782
+ font-family: "Amiri", serif;
783
+ font-size: 0.75em;
784
+ color: var(--qalam-hadith-citation-color);
785
+ padding-right: 6px;
786
+ padding-left: 6px;
787
+ }
788
+
789
+ .qalam-render-hadith-grade {
790
+ font-family: "Amiri", serif;
791
+ font-size: 0.7em;
792
+ color: var(--qalam-text-secondary);
793
+ }
794
+
795
+ /* Prophetic speech mark (renderer) */
796
+ .qalam-render-prophetic-speech {
797
+ color: var(--qalam-hadith);
798
+ }
799
+ .qalam-render-prophetic-quote {
800
+ color: var(--qalam-hadith);
801
+ }
802
+
803
+ /* Poem (editor) */
804
+
805
+ .qalam-poem {
806
+ margin: 12px 0;
807
+ padding: 12px 16px;
808
+ border: 1px solid var(--qalam-border-light);
809
+ border-radius: 6px;
810
+ background: var(--qalam-bg-alt);
811
+ overflow: visible;
812
+ }
813
+
814
+ .qalam-poem__bayt {
815
+ display: flex;
816
+ gap: 8px;
817
+ align-items: center;
818
+ margin-bottom: 6px;
819
+ }
820
+
821
+ .qalam-poem__shatr-group {
822
+ display: flex;
823
+ gap: 8px;
824
+ flex: 1;
825
+ }
826
+
827
+ .qalam-poem__shatr {
828
+ flex: 1;
829
+ padding: 6px 10px;
830
+ border: 1px solid var(--qalam-border);
831
+ border-radius: 4px;
832
+ font-family: "Amiri", serif;
833
+ font-size: 18px;
834
+ line-height: 1.8;
835
+ text-align: center;
836
+ background: var(--qalam-bg);
837
+ color: var(--qalam-text);
838
+ outline: none;
839
+ box-sizing: border-box;
840
+ }
841
+
842
+ .qalam-poem__shatr:focus {
843
+ border-color: var(--qalam-input-focus);
844
+ box-shadow: 0 0 0 1.5px rgba(147, 197, 253, 0.3);
845
+ }
846
+
847
+ .qalam-poem__bayt-actions {
848
+ display: flex;
849
+ gap: 4px;
850
+ align-items: center;
851
+ flex-shrink: 0;
852
+ opacity: 0;
853
+ transition: opacity 0.15s;
854
+ }
855
+
856
+ .qalam-poem__bayt:hover .qalam-poem__bayt-actions {
857
+ opacity: 1;
858
+ }
859
+
860
+ .qalam-poem__action-btn {
861
+ border: 1px dashed var(--qalam-border);
862
+ background: none;
863
+ color: var(--qalam-text-dim);
864
+ cursor: pointer;
865
+ font-family: system-ui, sans-serif;
866
+ font-size: 12px;
867
+ padding: 4px 8px;
868
+ border-radius: 4px;
869
+ white-space: nowrap;
870
+ }
871
+
872
+ .qalam-poem__action-btn:hover {
873
+ background: var(--qalam-quran-light);
874
+ border-color: var(--qalam-accent);
875
+ color: var(--qalam-accent);
876
+ }
877
+
878
+
879
+ .qalam-poem__add-line {
880
+ display: flex;
881
+ gap: 4px;
882
+ justify-content: center;
883
+ margin-top: 4px;
884
+ opacity: 0;
885
+ transition: opacity 0.15s;
886
+ }
887
+
888
+ .qalam-poem:hover .qalam-poem__add-line {
889
+ opacity: 1;
890
+ }
891
+
892
+ .qalam-poem__add {
893
+ border: 1px dashed var(--qalam-border);
894
+ background: none;
895
+ color: var(--qalam-text-dim);
896
+ cursor: pointer;
897
+ font-family: system-ui, sans-serif;
898
+ font-size: 12px;
899
+ padding: 2px 12px;
900
+ border-radius: 4px;
901
+ }
902
+
903
+ .qalam-poem__add:hover {
904
+ background: var(--qalam-quran-light);
905
+ border-color: var(--qalam-accent);
906
+ color: var(--qalam-accent);
907
+ }
908
+
909
+ /* Separator */
910
+
911
+ .qalam-poem__separator {
912
+ display: flex;
913
+ align-items: center;
914
+ margin: 4px 0;
915
+ padding: 4px 8px;
916
+ border-radius: 4px;
917
+ background: var(--qalam-bg-segment);
918
+ }
919
+
920
+ .qalam-poem__separator:hover {
921
+ background: var(--qalam-border-light);
922
+ }
923
+
924
+ .qalam-poem__separator-dots {
925
+ flex: 1;
926
+ text-align: center;
927
+ color: var(--qalam-text-dim);
928
+ font-size: 14px;
929
+ letter-spacing: 4px;
930
+ }
931
+
932
+ .qalam-poem__separator-delete {
933
+ border: 1px dashed var(--qalam-border);
934
+ background: none;
935
+ color: var(--qalam-text-dim);
936
+ cursor: pointer;
937
+ font-family: system-ui, sans-serif;
938
+ font-size: 12px;
939
+ padding: 2px 8px;
940
+ border-radius: 4px;
941
+ white-space: nowrap;
942
+ opacity: 0;
943
+ transition: opacity 0.15s;
944
+ }
945
+
946
+ .qalam-poem__separator:hover .qalam-poem__separator-delete {
947
+ opacity: 1;
948
+ }
949
+
950
+ .qalam-poem__separator-delete:hover {
951
+ background: var(--qalam-quran-light);
952
+ border-color: var(--qalam-accent);
953
+ color: var(--qalam-accent);
954
+ }
955
+
956
+ /* Insert line between rows */
957
+
958
+ .qalam-poem__insert-line {
959
+ height: 8px;
960
+ position: relative;
961
+ cursor: pointer;
962
+ }
963
+
964
+ .qalam-poem__insert-line::before {
965
+ content: "";
966
+ position: absolute;
967
+ left: 10%;
968
+ right: 10%;
969
+ top: 50%;
970
+ height: 1px;
971
+ background: transparent;
972
+ transition: background 0.15s;
973
+ }
974
+
975
+ .qalam-poem__insert-line:hover::before {
976
+ background: var(--qalam-border);
977
+ }
978
+
979
+ .qalam-poem__insert-actions {
980
+ display: none;
981
+ position: absolute;
982
+ left: 50%;
983
+ top: 50%;
984
+ transform: translate(-50%, -50%);
985
+ gap: 4px;
986
+ z-index: 10;
987
+ }
988
+
989
+ .qalam-poem__insert-line:hover .qalam-poem__insert-actions {
990
+ display: flex;
991
+ }
992
+
993
+ .qalam-poem__insert-btn {
994
+ border: 1px dashed var(--qalam-border);
995
+ background: var(--qalam-bg);
996
+ color: var(--qalam-text-dim);
997
+ cursor: pointer;
998
+ font-family: system-ui, sans-serif;
999
+ font-size: 11px;
1000
+ padding: 2px 8px;
1001
+ border-radius: 4px;
1002
+ white-space: nowrap;
1003
+ }
1004
+
1005
+ .qalam-poem__insert-btn:hover {
1006
+ background: var(--qalam-quran-light);
1007
+ border-color: var(--qalam-accent);
1008
+ color: var(--qalam-accent);
1009
+ }
1010
+
1011
+ .qalam-toolbar__btn--poem {
1012
+ font-family: "Amiri", serif !important;
1013
+ font-size: 16px !important;
1014
+ color: var(--qalam-text-secondary) !important;
1015
+ }
1016
+
1017
+ /* Poem (renderer) */
1018
+
1019
+ .qalam-render-poem {
1020
+ margin: 16px auto;
1021
+ }
1022
+
1023
+ .qalam-render-poem__bayt {
1024
+ display: flex;
1025
+ justify-content: center;
1026
+ }
1027
+
1028
+ .qalam-render-poem__shatr {
1029
+ flex: 1;
1030
+ text-align: center;
1031
+ padding: 4px 16px;
1032
+ font-family: "Amiri", serif;
1033
+ font-size: 1em;
1034
+ line-height: 2;
1035
+ }
1036
+
1037
+ .qalam-render-poem--stacked .qalam-render-poem__bayt {
1038
+ flex-direction: column;
1039
+ align-items: center;
1040
+ }
1041
+
1042
+ .qalam-render-poem--stacked .qalam-render-poem__shatr {
1043
+ flex: none;
1044
+ width: auto;
1045
+ }
1046
+
1047
+ .qalam-render-poem--stacked .qalam-render-poem__shatr:first-child {
1048
+ align-self: flex-start;
1049
+ }
1050
+
1051
+ .qalam-render-poem--stacked .qalam-render-poem__shatr:last-child {
1052
+ align-self: flex-end;
1053
+ }
1054
+
1055
+ .qalam-render-poem__separator {
1056
+ text-align: center;
1057
+ color: var(--qalam-text-dim);
1058
+ font-size: 14px;
1059
+ letter-spacing: 4px;
1060
+ padding: 4px 0;
1061
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siladev/qalam",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Islamic content editor with Quran verse references",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -28,6 +28,7 @@
28
28
  "types": "./dist/resolver/index.d.ts"
29
29
  },
30
30
  "./styles.css": "./dist/styles.css",
31
+ "./fonts/*": "./dist/*",
31
32
  "./quran-data": "./dist/quran-data.json"
32
33
  },
33
34
  "files": [