@siladev/qalam 0.1.1 → 0.1.2

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 +1049 -0
  2. package/package.json +1 -1
@@ -0,0 +1,1049 @@
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 ul,
456
+ .qalam-renderer ol ul {
457
+ list-style-type: "- ";
458
+ }
459
+
460
+
461
+ .qalam-render-verse {
462
+ font-family: "HafsSmart", serif;
463
+ font-size: 1.1em;
464
+ color: var(--qalam-quran);
465
+ }
466
+
467
+ .qalam-render-basmalah {
468
+ font-family: "KFGQPC Symbols", serif;
469
+ font-size: 1.3em;
470
+ }
471
+
472
+ .qalam-render-bracket {
473
+ color: var(--qalam-quran-bracket);
474
+ font-family: "Amiri", serif;
475
+ font-size: 1.1em;
476
+ }
477
+
478
+ .qalam-render-citation {
479
+ font-family: "Amiri", serif;
480
+ font-size: 0.75em;
481
+ color: var(--qalam-citation);
482
+ margin-right: 6px;
483
+ margin-left: 6px;
484
+ }
485
+
486
+ /* Inline repeat mark */
487
+
488
+ /* Inline repeat mark — matches quran repeat design */
489
+
490
+ .qalam-inline-repeat {
491
+ border-bottom: 2px solid var(--qalam-blockquote-border);
492
+ padding-bottom: 0;
493
+ }
494
+
495
+ .qalam-inline-repeat::after {
496
+ content: attr(data-repeat-label);
497
+ font-family: "Amiri", serif;
498
+ font-size: 0.7em;
499
+ color: var(--qalam-inline-repeat);
500
+ background: var(--qalam-inline-repeat-bg);
501
+ padding: 2px 6px;
502
+ border-radius: 3px;
503
+ margin: 0 4px;
504
+ vertical-align: middle;
505
+ white-space: nowrap;
506
+ }
507
+
508
+ /* Renderer inline repeat */
509
+
510
+ .qalam-render-inline-repeat {
511
+ border-bottom: 2px solid var(--qalam-blockquote-border);
512
+ padding-bottom: 0;
513
+ }
514
+
515
+ .qalam-render-inline-repeat-badge {
516
+ font-family: "Amiri", serif;
517
+ font-size: 0.7em;
518
+ color: var(--qalam-inline-repeat);
519
+ background: var(--qalam-inline-repeat-bg);
520
+ padding: 2px 6px;
521
+ border-radius: 3px;
522
+ margin: 0 4px;
523
+ vertical-align: middle;
524
+ white-space: nowrap;
525
+ unicode-bidi: isolate;
526
+ direction: rtl;
527
+ }
528
+
529
+ /* Quran repeat (editor + renderer) */
530
+
531
+ .qalam-quran-repeat {
532
+ border-bottom: 2px solid var(--qalam-blockquote-border);
533
+ padding-bottom: 0;
534
+ }
535
+
536
+ .qalam-quran-repeat-badge {
537
+ font-family: "Amiri", serif;
538
+ font-size: 0.7em;
539
+ color: var(--qalam-inline-repeat);
540
+ background: var(--qalam-inline-repeat-bg);
541
+ padding: 2px 6px;
542
+ border-radius: 3px;
543
+ margin: 0 4px;
544
+ vertical-align: middle;
545
+ white-space: nowrap;
546
+ unicode-bidi: isolate;
547
+ direction: rtl;
548
+ }
549
+
550
+ .qalam-render-repeat {
551
+ border-bottom: 2px solid var(--qalam-blockquote-border);
552
+ padding-bottom: 0;
553
+ }
554
+
555
+ .qalam-render-repeat-badge {
556
+ font-family: "Amiri", serif;
557
+ font-size: 0.7em;
558
+ color: var(--qalam-inline-repeat);
559
+ background: var(--qalam-inline-repeat-bg);
560
+ padding: 2px 6px;
561
+ border-radius: 3px;
562
+ margin: 0 4px;
563
+ vertical-align: middle;
564
+ white-space: nowrap;
565
+ unicode-bidi: isolate;
566
+ direction: rtl;
567
+ }
568
+
569
+ /* Block repeat (renderer) */
570
+
571
+ .qalam-render-block-repeat {
572
+ position: relative;
573
+ overflow: hidden;
574
+ }
575
+
576
+ .qalam-render-block-repeat-badge {
577
+ position: absolute;
578
+ bottom: 4px;
579
+ left: 0;
580
+ font-family: "Amiri", serif;
581
+ font-size: 0.7em;
582
+ color: var(--qalam-repeat);
583
+ font-weight: bold;
584
+ background: var(--qalam-repeat-bg);
585
+ padding: 1px 6px;
586
+ border-radius: 3px;
587
+ white-space: nowrap;
588
+ pointer-events: none;
589
+ unicode-bidi: isolate;
590
+ direction: rtl;
591
+ z-index: 2;
592
+ }
593
+
594
+ .qalam-render-block-repeat-ghost {
595
+ font-family: "Amiri", serif;
596
+ font-size: 0.7em;
597
+ font-weight: bold;
598
+ padding: 1px 6px;
599
+ margin: 0 6px;
600
+ visibility: hidden;
601
+ pointer-events: none;
602
+ user-select: none;
603
+ }
604
+
605
+ /* Popover segments */
606
+
607
+ .qalam-popover__segment {
608
+ border: 1px solid var(--qalam-border-light);
609
+ border-radius: 4px;
610
+ padding: 6px 8px;
611
+ margin-bottom: 6px;
612
+ background: var(--qalam-bg-segment);
613
+ }
614
+
615
+ .qalam-popover__segment-header {
616
+ display: flex;
617
+ justify-content: space-between;
618
+ align-items: center;
619
+ margin-bottom: 4px;
620
+ }
621
+
622
+ .qalam-popover__segment-num {
623
+ font-size: 11px;
624
+ font-weight: 600;
625
+ color: var(--qalam-text-muted);
626
+ background: var(--qalam-border-light);
627
+ width: 18px;
628
+ height: 18px;
629
+ display: inline-flex;
630
+ align-items: center;
631
+ justify-content: center;
632
+ border-radius: 50%;
633
+ }
634
+
635
+ .qalam-popover__segment-remove {
636
+ border: none;
637
+ background: none;
638
+ color: var(--qalam-text-dim);
639
+ cursor: pointer;
640
+ font-size: 12px;
641
+ padding: 2px 4px;
642
+ border-radius: 3px;
643
+ }
644
+
645
+ .qalam-popover__segment-remove:hover {
646
+ background: var(--qalam-error-bg);
647
+ color: var(--qalam-error);
648
+ }
649
+
650
+ .qalam-popover__field--repeat {
651
+ width: 50px;
652
+ min-width: 50px;
653
+ flex: 0 0 50px;
654
+ }
655
+
656
+ .qalam-popover__add-segment {
657
+ border: 1px dashed var(--qalam-border);
658
+ background: none;
659
+ color: var(--qalam-text-secondary);
660
+ cursor: pointer;
661
+ font-size: 12px;
662
+ padding: 4px;
663
+ border-radius: 4px;
664
+ width: 100%;
665
+ margin-bottom: 6px;
666
+ }
667
+
668
+ .qalam-popover__add-segment:hover {
669
+ background: var(--qalam-word-hover);
670
+ border-color: var(--qalam-input-focus);
671
+ color: var(--qalam-accent);
672
+ }
673
+
674
+ /* Toolbar hadith button */
675
+
676
+ .qalam-toolbar__btn--hadith {
677
+ font-family: "Amiri", serif !important;
678
+ font-size: 16px !important;
679
+ color: var(--qalam-hadith) !important;
680
+ font-weight: normal;
681
+ }
682
+
683
+ .qalam-toolbar__btn--saws {
684
+ font-size: 20px !important;
685
+ color: var(--qalam-text) !important;
686
+ }
687
+
688
+ /* HadithRef inline node (editor) */
689
+
690
+ .qalam-hadith-ref {
691
+ display: inline;
692
+ background: var(--qalam-hadith-light);
693
+ border-radius: 4px;
694
+ padding: 0 2px;
695
+ }
696
+
697
+ .qalam-hadith-ref--selected {
698
+ outline: 2px solid #fbbf24;
699
+ outline-offset: 2px;
700
+ border-radius: 4px;
701
+ }
702
+
703
+ .qalam-hadith-bracket {
704
+ color: var(--qalam-hadith-bracket);
705
+ font-family: "Amiri", serif;
706
+ font-size: 1.1em;
707
+ }
708
+
709
+ .qalam-hadith-body {
710
+ display: inline;
711
+ font-family: "Amiri", serif;
712
+ color: var(--qalam-text);
713
+ }
714
+
715
+ .qalam-hadith-meta {
716
+ display: inline-flex;
717
+ align-items: center;
718
+ gap: 4px;
719
+ margin-right: 6px;
720
+ vertical-align: baseline;
721
+ }
722
+
723
+ .qalam-hadith-citation-input,
724
+ .qalam-hadith-grade-input {
725
+ font-family: "Amiri", serif;
726
+ font-size: 0.72em;
727
+ border: none;
728
+ border-bottom: 1px dashed var(--qalam-hadith-citation-color);
729
+ background: transparent;
730
+ color: var(--qalam-hadith-citation-color);
731
+ outline: none;
732
+ padding: 0;
733
+ direction: rtl;
734
+ }
735
+
736
+ .qalam-hadith-citation-input::placeholder,
737
+ .qalam-hadith-grade-input::placeholder {
738
+ color: var(--qalam-text-dim);
739
+ font-style: italic;
740
+ }
741
+
742
+ /* Prophetic speech mark (editor) */
743
+ .qalam-prophetic-speech {
744
+ color: var(--qalam-hadith);
745
+ }
746
+
747
+ .qalam-prophetic-quote {
748
+ color: var(--qalam-hadith);
749
+ font-family: "Amiri", serif;
750
+ }
751
+
752
+ /* Hadith renderer */
753
+
754
+ .qalam-render-hadith {
755
+ display: inline;
756
+ }
757
+
758
+ .qalam-render-hadith--empty {
759
+ color: var(--qalam-hadith);
760
+ font-size: 0.85em;
761
+ }
762
+
763
+ .qalam-render-hadith-bracket {
764
+ color: var(--qalam-hadith-bracket);
765
+ font-family: "Amiri", serif;
766
+ font-size: 1.1em;
767
+ }
768
+
769
+ .qalam-render-hadith-citation {
770
+ font-family: "Amiri", serif;
771
+ font-size: 0.75em;
772
+ color: var(--qalam-hadith-citation-color);
773
+ padding-right: 6px;
774
+ padding-left: 6px;
775
+ }
776
+
777
+ .qalam-render-hadith-grade {
778
+ font-family: "Amiri", serif;
779
+ font-size: 0.7em;
780
+ color: var(--qalam-text-secondary);
781
+ }
782
+
783
+ /* Prophetic speech mark (renderer) */
784
+ .qalam-render-prophetic-speech {
785
+ color: var(--qalam-hadith);
786
+ }
787
+ .qalam-render-prophetic-quote {
788
+ color: var(--qalam-hadith);
789
+ }
790
+
791
+ /* Poem (editor) */
792
+
793
+ .qalam-poem {
794
+ margin: 12px 0;
795
+ padding: 12px 16px;
796
+ border: 1px solid var(--qalam-border-light);
797
+ border-radius: 6px;
798
+ background: var(--qalam-bg-alt);
799
+ overflow: visible;
800
+ }
801
+
802
+ .qalam-poem__bayt {
803
+ display: flex;
804
+ gap: 8px;
805
+ align-items: center;
806
+ margin-bottom: 6px;
807
+ }
808
+
809
+ .qalam-poem__shatr-group {
810
+ display: flex;
811
+ gap: 8px;
812
+ flex: 1;
813
+ }
814
+
815
+ .qalam-poem__shatr {
816
+ flex: 1;
817
+ padding: 6px 10px;
818
+ border: 1px solid var(--qalam-border);
819
+ border-radius: 4px;
820
+ font-family: "Amiri", serif;
821
+ font-size: 18px;
822
+ line-height: 1.8;
823
+ text-align: center;
824
+ background: var(--qalam-bg);
825
+ color: var(--qalam-text);
826
+ outline: none;
827
+ box-sizing: border-box;
828
+ }
829
+
830
+ .qalam-poem__shatr:focus {
831
+ border-color: var(--qalam-input-focus);
832
+ box-shadow: 0 0 0 1.5px rgba(147, 197, 253, 0.3);
833
+ }
834
+
835
+ .qalam-poem__bayt-actions {
836
+ display: flex;
837
+ gap: 4px;
838
+ align-items: center;
839
+ flex-shrink: 0;
840
+ opacity: 0;
841
+ transition: opacity 0.15s;
842
+ }
843
+
844
+ .qalam-poem__bayt:hover .qalam-poem__bayt-actions {
845
+ opacity: 1;
846
+ }
847
+
848
+ .qalam-poem__action-btn {
849
+ border: 1px dashed var(--qalam-border);
850
+ background: none;
851
+ color: var(--qalam-text-dim);
852
+ cursor: pointer;
853
+ font-family: system-ui, sans-serif;
854
+ font-size: 12px;
855
+ padding: 4px 8px;
856
+ border-radius: 4px;
857
+ white-space: nowrap;
858
+ }
859
+
860
+ .qalam-poem__action-btn:hover {
861
+ background: var(--qalam-quran-light);
862
+ border-color: var(--qalam-accent);
863
+ color: var(--qalam-accent);
864
+ }
865
+
866
+
867
+ .qalam-poem__add-line {
868
+ display: flex;
869
+ gap: 4px;
870
+ justify-content: center;
871
+ margin-top: 4px;
872
+ opacity: 0;
873
+ transition: opacity 0.15s;
874
+ }
875
+
876
+ .qalam-poem:hover .qalam-poem__add-line {
877
+ opacity: 1;
878
+ }
879
+
880
+ .qalam-poem__add {
881
+ border: 1px dashed var(--qalam-border);
882
+ background: none;
883
+ color: var(--qalam-text-dim);
884
+ cursor: pointer;
885
+ font-family: system-ui, sans-serif;
886
+ font-size: 12px;
887
+ padding: 2px 12px;
888
+ border-radius: 4px;
889
+ }
890
+
891
+ .qalam-poem__add:hover {
892
+ background: var(--qalam-quran-light);
893
+ border-color: var(--qalam-accent);
894
+ color: var(--qalam-accent);
895
+ }
896
+
897
+ /* Separator */
898
+
899
+ .qalam-poem__separator {
900
+ display: flex;
901
+ align-items: center;
902
+ margin: 4px 0;
903
+ padding: 4px 8px;
904
+ border-radius: 4px;
905
+ background: var(--qalam-bg-segment);
906
+ }
907
+
908
+ .qalam-poem__separator:hover {
909
+ background: var(--qalam-border-light);
910
+ }
911
+
912
+ .qalam-poem__separator-dots {
913
+ flex: 1;
914
+ text-align: center;
915
+ color: var(--qalam-text-dim);
916
+ font-size: 14px;
917
+ letter-spacing: 4px;
918
+ }
919
+
920
+ .qalam-poem__separator-delete {
921
+ border: 1px dashed var(--qalam-border);
922
+ background: none;
923
+ color: var(--qalam-text-dim);
924
+ cursor: pointer;
925
+ font-family: system-ui, sans-serif;
926
+ font-size: 12px;
927
+ padding: 2px 8px;
928
+ border-radius: 4px;
929
+ white-space: nowrap;
930
+ opacity: 0;
931
+ transition: opacity 0.15s;
932
+ }
933
+
934
+ .qalam-poem__separator:hover .qalam-poem__separator-delete {
935
+ opacity: 1;
936
+ }
937
+
938
+ .qalam-poem__separator-delete:hover {
939
+ background: var(--qalam-quran-light);
940
+ border-color: var(--qalam-accent);
941
+ color: var(--qalam-accent);
942
+ }
943
+
944
+ /* Insert line between rows */
945
+
946
+ .qalam-poem__insert-line {
947
+ height: 8px;
948
+ position: relative;
949
+ cursor: pointer;
950
+ }
951
+
952
+ .qalam-poem__insert-line::before {
953
+ content: "";
954
+ position: absolute;
955
+ left: 10%;
956
+ right: 10%;
957
+ top: 50%;
958
+ height: 1px;
959
+ background: transparent;
960
+ transition: background 0.15s;
961
+ }
962
+
963
+ .qalam-poem__insert-line:hover::before {
964
+ background: var(--qalam-border);
965
+ }
966
+
967
+ .qalam-poem__insert-actions {
968
+ display: none;
969
+ position: absolute;
970
+ left: 50%;
971
+ top: 50%;
972
+ transform: translate(-50%, -50%);
973
+ gap: 4px;
974
+ z-index: 10;
975
+ }
976
+
977
+ .qalam-poem__insert-line:hover .qalam-poem__insert-actions {
978
+ display: flex;
979
+ }
980
+
981
+ .qalam-poem__insert-btn {
982
+ border: 1px dashed var(--qalam-border);
983
+ background: var(--qalam-bg);
984
+ color: var(--qalam-text-dim);
985
+ cursor: pointer;
986
+ font-family: system-ui, sans-serif;
987
+ font-size: 11px;
988
+ padding: 2px 8px;
989
+ border-radius: 4px;
990
+ white-space: nowrap;
991
+ }
992
+
993
+ .qalam-poem__insert-btn:hover {
994
+ background: var(--qalam-quran-light);
995
+ border-color: var(--qalam-accent);
996
+ color: var(--qalam-accent);
997
+ }
998
+
999
+ .qalam-toolbar__btn--poem {
1000
+ font-family: "Amiri", serif !important;
1001
+ font-size: 16px !important;
1002
+ color: var(--qalam-text-secondary) !important;
1003
+ }
1004
+
1005
+ /* Poem (renderer) */
1006
+
1007
+ .qalam-render-poem {
1008
+ margin: 16px auto;
1009
+ }
1010
+
1011
+ .qalam-render-poem__bayt {
1012
+ display: flex;
1013
+ justify-content: center;
1014
+ }
1015
+
1016
+ .qalam-render-poem__shatr {
1017
+ flex: 1;
1018
+ text-align: center;
1019
+ padding: 4px 16px;
1020
+ font-family: "Amiri", serif;
1021
+ font-size: 1em;
1022
+ line-height: 2;
1023
+ }
1024
+
1025
+ .qalam-render-poem--stacked .qalam-render-poem__bayt {
1026
+ flex-direction: column;
1027
+ align-items: center;
1028
+ }
1029
+
1030
+ .qalam-render-poem--stacked .qalam-render-poem__shatr {
1031
+ flex: none;
1032
+ width: auto;
1033
+ }
1034
+
1035
+ .qalam-render-poem--stacked .qalam-render-poem__shatr:first-child {
1036
+ align-self: flex-start;
1037
+ }
1038
+
1039
+ .qalam-render-poem--stacked .qalam-render-poem__shatr:last-child {
1040
+ align-self: flex-end;
1041
+ }
1042
+
1043
+ .qalam-render-poem__separator {
1044
+ text-align: center;
1045
+ color: var(--qalam-text-dim);
1046
+ font-size: 14px;
1047
+ letter-spacing: 4px;
1048
+ padding: 4px 0;
1049
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siladev/qalam",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Islamic content editor with Quran verse references",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",