@weavy/uikit-react 12.1.0 → 13.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/changelog.md +36 -0
  2. package/dist/cjs/index.js +28 -6
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/client/WeavyClient.d.ts +8 -1
  5. package/dist/cjs/types/components/Attachment.d.ts +2 -1
  6. package/dist/cjs/types/components/Chat.d.ts +1 -1
  7. package/dist/cjs/types/components/PdfViewer.d.ts +3 -1
  8. package/dist/cjs/types/components/Preview.d.ts +8 -10
  9. package/dist/cjs/types/contexts/PreviewContext.d.ts +2 -1
  10. package/dist/cjs/types/contexts/WeavyContext.d.ts +2 -3
  11. package/dist/cjs/types/types/Chat.d.ts +1 -1
  12. package/dist/cjs/types/types/types.d.ts +16 -5
  13. package/dist/cjs/types/ui/Spinner.d.ts +9 -0
  14. package/dist/cjs/types/utils/fileUtilities.d.ts +1 -4
  15. package/dist/css/weavy-chat.css +270 -94
  16. package/dist/css/weavy-messenger.css +274 -96
  17. package/dist/css/weavy.css +274 -96
  18. package/dist/esm/index.js +28 -6
  19. package/dist/esm/index.js.map +1 -1
  20. package/dist/esm/types/client/WeavyClient.d.ts +8 -1
  21. package/dist/esm/types/components/Attachment.d.ts +2 -1
  22. package/dist/esm/types/components/Chat.d.ts +1 -1
  23. package/dist/esm/types/components/PdfViewer.d.ts +3 -1
  24. package/dist/esm/types/components/Preview.d.ts +8 -10
  25. package/dist/esm/types/contexts/PreviewContext.d.ts +2 -1
  26. package/dist/esm/types/contexts/WeavyContext.d.ts +2 -3
  27. package/dist/esm/types/types/Chat.d.ts +1 -1
  28. package/dist/esm/types/types/types.d.ts +16 -5
  29. package/dist/esm/types/ui/Spinner.d.ts +9 -0
  30. package/dist/esm/types/utils/fileUtilities.d.ts +1 -4
  31. package/dist/index.d.ts +14 -7
  32. package/package.json +2 -2
  33. package/rollup.config.js +3 -1
  34. package/src/client/WeavyClient.ts +105 -24
  35. package/src/components/Attachment.tsx +8 -7
  36. package/src/components/Chat.tsx +3 -3
  37. package/src/components/Conversation.tsx +3 -3
  38. package/src/components/Message.tsx +1 -1
  39. package/src/components/Messages.tsx +1 -1
  40. package/src/components/PdfViewer.tsx +88 -83
  41. package/src/components/Preview.tsx +115 -54
  42. package/src/components/SearchUsers.tsx +2 -2
  43. package/src/contexts/PreviewContext.tsx +90 -16
  44. package/src/contexts/WeavyContext.tsx +7 -4
  45. package/src/hooks/useBadge.ts +2 -6
  46. package/src/hooks/useChat.ts +3 -14
  47. package/src/hooks/useConversation.ts +1 -7
  48. package/src/hooks/useConversations.ts +1 -7
  49. package/src/hooks/useFileUploader.ts +6 -8
  50. package/src/hooks/useMembers.ts +1 -7
  51. package/src/hooks/useMessages.ts +1 -7
  52. package/src/hooks/useMutateChat.ts +6 -11
  53. package/src/hooks/useMutateConversation.ts +7 -10
  54. package/src/hooks/useMutateConversationName.ts +10 -12
  55. package/src/hooks/useMutateDeleteReaction.ts +3 -8
  56. package/src/hooks/useMutateExternalBlobs.ts +6 -11
  57. package/src/hooks/useMutateMeeting.ts +6 -11
  58. package/src/hooks/useMutateMembers.ts +8 -13
  59. package/src/hooks/useMutateMessage.ts +10 -15
  60. package/src/hooks/useMutatePinned.ts +3 -8
  61. package/src/hooks/useMutateReaction.ts +6 -12
  62. package/src/hooks/useMutateRead.ts +1 -10
  63. package/src/hooks/useMutateRemoveMembers.ts +7 -12
  64. package/src/hooks/useMutateTyping.ts +6 -11
  65. package/src/hooks/useSearchUsers.ts +1 -6
  66. package/src/hooks/useUser.ts +3 -14
  67. package/src/scss/theme/_appbar.scss +4 -2
  68. package/src/scss/theme/_cm-editor.scss +1 -1
  69. package/src/scss/theme/_code-vscode-dark.scss +184 -0
  70. package/src/scss/theme/_code-vscode-light.scss +179 -0
  71. package/src/scss/theme/_code.scss +9 -112
  72. package/src/scss/theme/_files.scss +1 -1
  73. package/src/scss/theme/_message-editor.scss +1 -1
  74. package/src/scss/theme/_overlays.scss +2 -2
  75. package/src/scss/theme/_panels.scss +11 -7
  76. package/src/scss/theme/_preview-code.scss +5 -0
  77. package/src/scss/theme/_preview-embed.scss +3 -3
  78. package/src/scss/theme/_preview-image.scss +1 -1
  79. package/src/scss/theme/_preview-text.scss +1 -1
  80. package/src/scss/theme/_preview.scss +7 -2
  81. package/src/scss/weavy-chat.scss +1 -0
  82. package/src/scss/weavy-messenger.scss +1 -0
  83. package/src/types/Chat.ts +1 -1
  84. package/src/types/types.ts +16 -5
  85. package/src/ui/Spinner.tsx +18 -0
  86. package/src/utils/fileUtilities.ts +11 -125
@@ -491,105 +491,270 @@
491
491
  gap: 0.5rem;
492
492
  }
493
493
 
494
- code[class*=language-], pre[class*=language-] {
495
- font-family: var(--wy-font-monospace);
496
- font-size: 1em;
497
- direction: ltr;
494
+ :not(.wy-dark) .wy-code, .wy-code:not(.wy-dark) {
495
+ /*pre[class*="language-"]::-moz-selection,
496
+ pre[class*="language-"] ::-moz-selection,
497
+ code[class*="language-"]::-moz-selection,
498
+ code[class*="language-"] ::-moz-selection {
499
+ text-shadow: none;
500
+ background: #ffffff;
501
+ }
502
+
503
+ pre[class*="language-"]::selection,
504
+ pre[class*="language-"] ::selection,
505
+ code[class*="language-"]::selection,
506
+ code[class*="language-"] ::selection {
507
+ text-shadow: none;
508
+ background: #ffffff;
509
+ }*/
510
+ /* Code blocks */
511
+ }
512
+ :not(.wy-dark) .wy-code code[class*=language-],
513
+ :not(.wy-dark) .wy-code pre[class*=language-], .wy-code:not(.wy-dark) code[class*=language-],
514
+ .wy-code:not(.wy-dark) pre[class*=language-] {
515
+ color: #000000;
516
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
498
517
  text-align: left;
499
518
  white-space: pre;
500
519
  word-spacing: normal;
501
520
  word-break: normal;
521
+ word-wrap: normal;
502
522
  line-height: 1.5;
523
+ -moz-tab-size: 4;
524
+ -o-tab-size: 4;
503
525
  tab-size: 4;
526
+ -webkit-hyphens: none;
527
+ -moz-hyphens: none;
528
+ -ms-hyphens: none;
504
529
  hyphens: none;
505
530
  }
506
-
507
- pre[class*=language-] {
508
- background: #fff;
509
- font-size: 0.875em;
510
- padding: 1rem;
511
- margin: 0.5rem 0;
531
+ @media print {
532
+ :not(.wy-dark) .wy-code code[class*=language-],
533
+ :not(.wy-dark) .wy-code pre[class*=language-], .wy-code:not(.wy-dark) code[class*=language-],
534
+ .wy-code:not(.wy-dark) pre[class*=language-] {
535
+ text-shadow: none;
536
+ }
537
+ }
538
+ :not(.wy-dark) .wy-code pre[class*=language-], .wy-code:not(.wy-dark) pre[class*=language-] {
539
+ padding: 1em;
540
+ margin: 0.5em 0;
512
541
  overflow: auto;
513
542
  }
514
-
515
- .token.comment,
516
- .token.prolog,
517
- .token.doctype,
518
- .token.cdata {
543
+ :not(.wy-dark) .wy-code :not(pre) > code[class*=language-],
544
+ :not(.wy-dark) .wy-code pre[class*=language-], .wy-code:not(.wy-dark) :not(pre) > code[class*=language-],
545
+ .wy-code:not(.wy-dark) pre[class*=language-] {
546
+ color: white;
547
+ background: #ffffff;
548
+ }
549
+ :not(.wy-dark) .wy-code :not(pre) > code[class*=language-], .wy-code:not(.wy-dark) :not(pre) > code[class*=language-] {
550
+ padding: 0.1em;
551
+ border-radius: 0.3em;
552
+ white-space: normal;
553
+ }
554
+ :not(.wy-dark) .wy-code .token.comment, .wy-code:not(.wy-dark) .token.comment {
519
555
  color: #008000;
520
- font-style: italic;
521
556
  }
522
-
523
- .token.namespace {
524
- opacity: 0.7;
557
+ :not(.wy-dark) .wy-code .token.builtin, .wy-code:not(.wy-dark) .token.builtin {
558
+ color: #0070C1;
525
559
  }
526
-
527
- .token.string {
560
+ :not(.wy-dark) .wy-code .token.number, .wy-code:not(.wy-dark) .token.number {
561
+ color: #098658;
562
+ }
563
+ :not(.wy-dark) .wy-code .token.variable, .wy-code:not(.wy-dark) .token.variable {
564
+ color: #098658;
565
+ }
566
+ :not(.wy-dark) .wy-code .token.inserted, .wy-code:not(.wy-dark) .token.inserted {
567
+ color: #098658;
568
+ }
569
+ :not(.wy-dark) .wy-code .token.operator, .wy-code:not(.wy-dark) .token.operator {
570
+ color: #000000;
571
+ }
572
+ :not(.wy-dark) .wy-code .token.constant, .wy-code:not(.wy-dark) .token.constant {
573
+ color: #811F3F;
574
+ }
575
+ :not(.wy-dark) .wy-code .token.hexcode, .wy-code:not(.wy-dark) .token.hexcode {
576
+ color: #811F3F;
577
+ }
578
+ :not(.wy-dark) .wy-code .token.regex, .wy-code:not(.wy-dark) .token.regex {
579
+ color: #811F3F;
580
+ }
581
+ :not(.wy-dark) .wy-code .token.char, .wy-code:not(.wy-dark) .token.char {
582
+ color: #811F3F;
583
+ }
584
+ :not(.wy-dark) .wy-code .token.tag, .wy-code:not(.wy-dark) .token.tag {
585
+ color: #800000;
586
+ }
587
+ :not(.wy-dark) .wy-code .token.attr-name, .wy-code:not(.wy-dark) .token.attr-name {
588
+ color: #FF0000;
589
+ }
590
+ :not(.wy-dark) .wy-code .token.selector, .wy-code:not(.wy-dark) .token.selector {
591
+ color: #FF0000;
592
+ }
593
+ :not(.wy-dark) .wy-code .token.property, .wy-code:not(.wy-dark) .token.property {
594
+ color: #FF0000;
595
+ }
596
+ :not(.wy-dark) .wy-code .token.deleted, .wy-code:not(.wy-dark) .token.deleted {
528
597
  color: #A31515;
529
598
  }
530
-
531
- .token.url,
532
- .token.symbol,
533
- .token.number,
534
- .token.boolean,
535
- .token.variable,
536
- .token.constant,
537
- .token.inserted {
538
- color: #36acaa;
599
+ :not(.wy-dark) .wy-code .token.string, .wy-code:not(.wy-dark) .token.string {
600
+ color: #A31515;
539
601
  }
540
-
541
- .token.atrule,
542
- .token.keyword,
543
- .token.attr-value,
544
- .language-autohotkey .token.selector,
545
- .language-json .token.boolean,
546
- .language-json .token.number,
547
- code[class*=language-css] {
548
- color: #0000ff;
602
+ :not(.wy-dark) .wy-code .token.changed, .wy-code:not(.wy-dark) .token.changed {
603
+ color: #0451A5;
549
604
  }
550
-
551
- .token.deleted,
552
- .language-autohotkey .token.tag {
553
- color: #9a050f;
605
+ :not(.wy-dark) .wy-code .token.punctuation, .wy-code:not(.wy-dark) .token.punctuation {
606
+ color: #0451A5;
554
607
  }
555
-
556
- .token.selector,
557
- .language-autohotkey .token.keyword {
558
- color: #00009f;
608
+ :not(.wy-dark) .wy-code .token.function, .wy-code:not(.wy-dark) .token.function {
609
+ color: #0000FF;
559
610
  }
560
-
561
- .token.important {
562
- color: #e90;
611
+ :not(.wy-dark) .wy-code .token.keyword, .wy-code:not(.wy-dark) .token.keyword {
612
+ color: #0000FF;
563
613
  }
564
-
565
- .token.important,
566
- .token.bold {
567
- font-weight: 700;
614
+ :not(.wy-dark) .wy-code .token.class-name, .wy-code:not(.wy-dark) .token.class-name {
615
+ color: #267F99;
568
616
  }
569
-
570
- .token.italic {
617
+ :not(.wy-dark) .wy-code .token.important,
618
+ :not(.wy-dark) .wy-code .token.bold, .wy-code:not(.wy-dark) .token.important,
619
+ .wy-code:not(.wy-dark) .token.bold {
620
+ font-weight: bold;
621
+ }
622
+ :not(.wy-dark) .wy-code .token.italic, .wy-code:not(.wy-dark) .token.italic {
571
623
  font-style: italic;
572
624
  }
625
+ .wy-dark .wy-code, .wy-code.wy-dark {
626
+ /*pre[class*="language-"]::-moz-selection,
627
+ pre[class*="language-"] ::-moz-selection,
628
+ code[class*="language-"]::-moz-selection,
629
+ code[class*="language-"] ::-moz-selection {
630
+ text-shadow: none;
631
+ background: #1e1e1e;
632
+ }
573
633
 
574
- .token.class-name,
575
- .language-json .token.property {
576
- color: #2B91AF;
634
+ pre[class*="language-"]::selection,
635
+ pre[class*="language-"] ::selection,
636
+ code[class*="language-"]::selection,
637
+ code[class*="language-"] ::selection {
638
+ text-shadow: none;
639
+ background: #1e1e1e;
640
+ }*/
641
+ /* Code blocks */
642
+ }
643
+ .wy-dark .wy-code code[class*=language-],
644
+ .wy-dark .wy-code pre[class*=language-], .wy-code.wy-dark code[class*=language-],
645
+ .wy-code.wy-dark pre[class*=language-] {
646
+ color: #d4d4d4;
647
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
648
+ text-align: left;
649
+ white-space: pre;
650
+ word-spacing: normal;
651
+ word-break: normal;
652
+ word-wrap: normal;
653
+ line-height: 1.5;
654
+ -moz-tab-size: 4;
655
+ -o-tab-size: 4;
656
+ tab-size: 4;
657
+ -webkit-hyphens: none;
658
+ -moz-hyphens: none;
659
+ -ms-hyphens: none;
660
+ hyphens: none;
577
661
  }
578
-
579
- .token.tag,
580
- .token.selector {
581
- color: #800000;
662
+ @media print {
663
+ .wy-dark .wy-code code[class*=language-],
664
+ .wy-dark .wy-code pre[class*=language-], .wy-code.wy-dark code[class*=language-],
665
+ .wy-code.wy-dark pre[class*=language-] {
666
+ text-shadow: none;
667
+ }
582
668
  }
583
-
584
- .token.attr-name,
585
- .token.property,
586
- .token.regex,
587
- .token.entity {
588
- color: #ff0000;
669
+ .wy-dark .wy-code pre[class*=language-], .wy-code.wy-dark pre[class*=language-] {
670
+ padding: 1em;
671
+ margin: 0.5em 0;
672
+ overflow: auto;
589
673
  }
590
-
591
- .token.directive.tag .tag {
592
- background: #ffff00;
674
+ .wy-dark .wy-code :not(pre) > code[class*=language-],
675
+ .wy-dark .wy-code pre[class*=language-], .wy-code.wy-dark :not(pre) > code[class*=language-],
676
+ .wy-code.wy-dark pre[class*=language-] {
677
+ color: white;
678
+ background: #1e1e1e;
679
+ }
680
+ .wy-dark .wy-code :not(pre) > code[class*=language-], .wy-code.wy-dark :not(pre) > code[class*=language-] {
681
+ padding: 0.1em;
682
+ border-radius: 0.3em;
683
+ white-space: normal;
684
+ }
685
+ .wy-dark .wy-code .token.prolog, .wy-code.wy-dark .token.prolog {
686
+ color: #8080ff;
687
+ }
688
+ .wy-dark .wy-code .token.comment, .wy-code.wy-dark .token.comment {
689
+ color: #6A9955;
690
+ }
691
+ .wy-dark .wy-code .token.punctuation, .wy-code.wy-dark .token.punctuation {
692
+ color: #6A9955;
693
+ }
694
+ .wy-dark .wy-code .token.builtin, .wy-code.wy-dark .token.builtin {
695
+ color: #4FC1FF;
696
+ }
697
+ .wy-dark .wy-code .token.number, .wy-code.wy-dark .token.number {
698
+ color: #B5CEA8;
699
+ }
700
+ .wy-dark .wy-code .token.variable, .wy-code.wy-dark .token.variable {
701
+ color: #B5CEA8;
702
+ }
703
+ .wy-dark .wy-code .token.inserted, .wy-code.wy-dark .token.inserted {
704
+ color: #B5CEA8;
705
+ }
706
+ .wy-dark .wy-code .token.operator, .wy-code.wy-dark .token.operator {
707
+ color: #D4D4D4;
708
+ }
709
+ .wy-dark .wy-code .token.constant, .wy-code.wy-dark .token.constant {
710
+ color: #646695;
711
+ }
712
+ .wy-dark .wy-code .token.hexcode, .wy-code.wy-dark .token.hexcode {
713
+ color: #646695;
714
+ }
715
+ .wy-dark .wy-code .token.tag, .wy-code.wy-dark .token.tag {
716
+ color: #569CD6;
717
+ }
718
+ .wy-dark .wy-code .token.changed, .wy-code.wy-dark .token.changed {
719
+ color: #569CD6;
720
+ }
721
+ .wy-dark .wy-code .token.function, .wy-code.wy-dark .token.function {
722
+ color: #569CD6;
723
+ }
724
+ .wy-dark .wy-code .token.keyword, .wy-code.wy-dark .token.keyword {
725
+ color: #569CD6;
726
+ }
727
+ .wy-dark .wy-code .token.attr-name, .wy-code.wy-dark .token.attr-name {
728
+ color: #9CDCFE;
729
+ }
730
+ .wy-dark .wy-code .token.selector, .wy-code.wy-dark .token.selector {
731
+ color: #9CDCFE;
732
+ }
733
+ .wy-dark .wy-code .token.property, .wy-code.wy-dark .token.property {
734
+ color: #9CDCFE;
735
+ }
736
+ .wy-dark .wy-code .token.deleted, .wy-code.wy-dark .token.deleted {
737
+ color: #CE9178;
738
+ }
739
+ .wy-dark .wy-code .token.string, .wy-code.wy-dark .token.string {
740
+ color: #CE9178;
741
+ }
742
+ .wy-dark .wy-code .token.regex, .wy-code.wy-dark .token.regex {
743
+ color: #D16969;
744
+ }
745
+ .wy-dark .wy-code .token.char, .wy-code.wy-dark .token.char {
746
+ color: #D16969;
747
+ }
748
+ .wy-dark .wy-code .token.class-name, .wy-code.wy-dark .token.class-name {
749
+ color: #4EC9B0;
750
+ }
751
+ .wy-dark .wy-code .token.important,
752
+ .wy-dark .wy-code .token.bold, .wy-code.wy-dark .token.important,
753
+ .wy-code.wy-dark .token.bold {
754
+ font-weight: bold;
755
+ }
756
+ .wy-dark .wy-code .token.italic, .wy-code.wy-dark .token.italic {
757
+ font-style: italic;
593
758
  }
594
759
 
595
760
  .wy-hashtag {
@@ -1178,7 +1343,7 @@ code[class*=language-css] {
1178
1343
  .wy-message-form.wy-uploading .wy-spinner {
1179
1344
  display: block;
1180
1345
  }
1181
- .wy-message-form.wy-uploading .wy-icon-attachment {
1346
+ .wy-message-form.wy-uploading [data-icon=plus] {
1182
1347
  display: none;
1183
1348
  }
1184
1349
  .wy-message-form .wy-picker-list:not(:empty) {
@@ -1321,9 +1486,9 @@ code[class*=language-css] {
1321
1486
  color: #fff;
1322
1487
  }
1323
1488
  .wy-overlays .wy-panel.wy-dark.wy-open[data-title]::before {
1324
- background: rgba(41, 41, 41, 0.95);
1489
+ background-color: rgba(41, 41, 41, 0.95);
1325
1490
  color: rgba(255, 255, 255, 0.62);
1326
- border-bottom: 1px #000 solid;
1491
+ box-shadow: rgba(71, 71, 71, 0.95) 0px -1px 0px 0px inset;
1327
1492
  }
1328
1493
  @media (min-width: 768px) {
1329
1494
  .wy-overlays .wy-panel.wy-floating {
@@ -1425,8 +1590,8 @@ tr.wy-pager td .wy-spinner {
1425
1590
  flex-direction: column;
1426
1591
  }
1427
1592
  .wy-panel .wy-controls {
1428
- top: 0.5rem;
1429
- left: 0.5rem;
1593
+ top: 0.75rem;
1594
+ left: 0.75rem;
1430
1595
  min-width: 2rem;
1431
1596
  width: auto;
1432
1597
  display: flex;
@@ -1459,19 +1624,20 @@ tr.wy-pager td .wy-spinner {
1459
1624
  top: 0;
1460
1625
  left: 0;
1461
1626
  right: 0;
1462
- height: 2.9375rem;
1627
+ height: 3rem;
1628
+ padding: 0.5rem 0.5rem;
1463
1629
  opacity: 0;
1464
1630
  pointer-events: none;
1465
1631
  display: flex;
1466
1632
  align-items: center;
1467
1633
  justify-content: center;
1468
- background-color: rgba(242, 242, 242, 0.95);
1469
- color: rgba(0, 0, 0, 0.69);
1470
- border-bottom: 1px solid #cccccc;
1471
1634
  transition: opacity 0.1s 0.2s step-end;
1472
- font-family: var(--wy-font-sans-serif);
1635
+ font-family: var(--wy-font-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji);
1473
1636
  line-height: 1.5;
1474
1637
  font-weight: 400;
1638
+ background-color: rgba(242, 242, 242, 0.95);
1639
+ color: rgba(0, 0, 0, 0.69);
1640
+ box-shadow: rgba(204, 204, 204, 0.95) 0px -1px 0px 0px inset;
1475
1641
  backface-visibility: hidden;
1476
1642
  }
1477
1643
  @supports (backdrop-filter: blur(0.5rem)) {
@@ -1561,6 +1727,10 @@ tr.wy-pager td .wy-spinner {
1561
1727
  justify-content: center;
1562
1728
  height: calc(100% - 3rem - 1px);
1563
1729
  position: relative;
1730
+ background-color: #fff;
1731
+ }
1732
+ .wy-dark .wy-preview, .wy-preview.wy-dark {
1733
+ background-color: #292929;
1564
1734
  }
1565
1735
 
1566
1736
  .wy-nav-prev, .wy-nav-next {
@@ -1595,7 +1765,7 @@ tr.wy-pager td .wy-spinner {
1595
1765
  .wy-document {
1596
1766
  padding: 3rem 4rem;
1597
1767
  margin: 2rem 3.5rem;
1598
- border-radius: 0.25rem;
1768
+ border-radius: 0.125rem;
1599
1769
  box-shadow: 0 0.25rem 0.3125rem 0 rgba(0, 0, 0, 0.14), 0 0.0625rem 0.625rem 0 rgba(0, 0, 0, 0.12), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.2);
1600
1770
  width: 120ch;
1601
1771
  min-height: 170ch;
@@ -1634,14 +1804,14 @@ tr.wy-pager td .wy-spinner {
1634
1804
  backdrop-filter: blur(0.5rem);
1635
1805
  }
1636
1806
  }
1637
- .wy-dark .wy-tools, .wy-tools.wy-dark {
1807
+ .wy-dark .wy-tools {
1638
1808
  background-color: rgba(41, 41, 41, 0.95);
1639
1809
  color: rgba(255, 255, 255, 0.62);
1640
1810
  }
1641
- .wy-dark .wy-tools .wy-icon, .wy-tools.wy-dark .wy-icon {
1811
+ .wy-dark .wy-tools .wy-icon {
1642
1812
  color: rgba(255, 255, 255, 0.62);
1643
1813
  }
1644
- .wy-dark .wy-tools .wy-input, .wy-tools.wy-dark .wy-input {
1814
+ .wy-dark .wy-tools .wy-input {
1645
1815
  background-color: rgba(0, 0, 0, 0.5);
1646
1816
  color: rgba(255, 255, 255, 0.62);
1647
1817
  }
@@ -1652,32 +1822,38 @@ tr.wy-pager td .wy-spinner {
1652
1822
  margin: 0 0.5rem;
1653
1823
  }
1654
1824
 
1655
- .wy-content-iframe, [data-controller~=embed] {
1825
+ .wy-content-code {
1826
+ align-self: flex-start;
1827
+ width: 100%;
1828
+ padding: 1rem 3rem;
1829
+ }
1830
+
1831
+ .wy-content-iframe {
1656
1832
  border: 0;
1657
1833
  display: block;
1658
1834
  width: 100%;
1659
1835
  height: 100%;
1660
1836
  flex: 1 1 100%;
1661
1837
  }
1662
- .wy-content-iframe:not(.wy-loading):not([data-controller~=embed]), .wy-content-iframe[data-controller~=embed].wy-loaded, [data-controller~=embed]:not(.wy-loading):not([data-controller~=embed]), [data-controller~=embed][data-controller~=embed].wy-loaded {
1838
+ .wy-content-iframe.wy-loaded {
1663
1839
  background: #fff;
1664
1840
  }
1665
- .wy-content-iframe:not(.wy-loading):not([data-controller~=embed]) ~ .wy-content-iframe-fallback, .wy-content-iframe:not(.wy-loading):not([data-controller~=embed]) ~ .wy-spinner, .wy-content-iframe[data-controller~=embed].wy-loaded ~ .wy-content-iframe-fallback, .wy-content-iframe[data-controller~=embed].wy-loaded ~ .wy-spinner, [data-controller~=embed]:not(.wy-loading):not([data-controller~=embed]) ~ .wy-content-iframe-fallback, [data-controller~=embed]:not(.wy-loading):not([data-controller~=embed]) ~ .wy-spinner, [data-controller~=embed][data-controller~=embed].wy-loaded ~ .wy-content-iframe-fallback, [data-controller~=embed][data-controller~=embed].wy-loaded ~ .wy-spinner {
1841
+ .wy-content-iframe.wy-loaded ~ .wy-content-iframe-fallback, .wy-content-iframe.wy-loaded ~ .wy-spinner {
1666
1842
  display: none;
1667
1843
  }
1668
- .wy-content-iframe.wy-loading:not(.wy-loaded), .wy-content-iframe[data-controller~=embed]:not(.wy-loaded), [data-controller~=embed].wy-loading:not(.wy-loaded), [data-controller~=embed][data-controller~=embed]:not(.wy-loaded) {
1844
+ .wy-content-iframe.wy-loading:not(.wy-loaded) {
1669
1845
  position: absolute;
1670
1846
  visibility: hidden;
1671
1847
  z-index: -1;
1672
1848
  pointer-events: none;
1673
1849
  }
1674
- .wy-content-iframe.wy-loading:not(.wy-loaded):not(.wy-fallback) ~ .wy-content-iframe-fallback, .wy-content-iframe[data-controller~=embed]:not(.wy-loaded):not(.wy-fallback) ~ .wy-content-iframe-fallback, [data-controller~=embed].wy-loading:not(.wy-loaded):not(.wy-fallback) ~ .wy-content-iframe-fallback, [data-controller~=embed][data-controller~=embed]:not(.wy-loaded):not(.wy-fallback) ~ .wy-content-iframe-fallback {
1850
+ .wy-content-iframe.wy-loading:not(.wy-loaded):not(.wy-fallback) ~ .wy-content-iframe-fallback {
1675
1851
  display: none;
1676
1852
  }
1677
- .wy-content-iframe.wy-loading:not(.wy-loaded).wy-fallback ~ .wy-spinner, .wy-content-iframe[data-controller~=embed]:not(.wy-loaded).wy-fallback ~ .wy-spinner, [data-controller~=embed].wy-loading:not(.wy-loaded).wy-fallback ~ .wy-spinner, [data-controller~=embed][data-controller~=embed]:not(.wy-loaded).wy-fallback ~ .wy-spinner {
1853
+ .wy-content-iframe.wy-loading:not(.wy-loaded).wy-fallback ~ .wy-spinner {
1678
1854
  display: none;
1679
1855
  }
1680
- .wy-content-iframe ~ .wy-spinner, [data-controller~=embed] ~ .wy-spinner {
1856
+ .wy-content-iframe ~ .wy-spinner {
1681
1857
  margin: auto;
1682
1858
  }
1683
1859
 
@@ -1729,7 +1905,7 @@ tr.wy-pager td .wy-spinner {
1729
1905
  .wy-content-image:not(.wy-intrinsic-image) {
1730
1906
  height: 100%;
1731
1907
  width: 100%;
1732
- --max-width: min(calc((100vh - 3rem - 1px) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%);
1908
+ --max-width: min(calc((100vh - 3rem) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%);
1733
1909
  --max-height: min(calc(100vw * (var(--height) / var(--width))), calc(var(--height) * 1px), 100%);
1734
1910
  /* // With sidebar
1735
1911
  body.controller-content & {