@june-ai/june-ui 0.2.11 → 0.2.13

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.
package/dist/june.css CHANGED
@@ -484,7 +484,7 @@
484
484
  .june-doc__footer { justify-content: space-between; }
485
485
  }
486
486
  /* ---------- generated preview and edit panel ---------- */
487
- .june-doc-card { margin: 8px 0; }
487
+ .june-doc.june-doc-card { margin: 8px 0; overflow: hidden; border-radius: 16px; }
488
488
  .june-doc-card__bar {
489
489
  display: flex; align-items: center; gap: 10px;
490
490
  min-height: 44px; padding: 6px 8px 6px 14px;
@@ -503,7 +503,7 @@
503
503
  .june-doc-card__sheet {
504
504
  max-width: 794px; margin: 0 auto; padding: 28px 24px;
505
505
  color: var(--jd-page-fg); background: var(--jd-page);
506
- border: 1px solid var(--jd-border); border-radius: 3px; box-shadow: var(--jd-shadow);
506
+ border: 1px solid var(--jd-border); border-radius: 14px; box-shadow: var(--jd-shadow);
507
507
  }
508
508
  .june-doc.june-doc-inline {
509
509
  margin: 8px 0; border: 0; background: transparent; box-shadow: none;
@@ -634,3 +634,228 @@
634
634
  display: grid;
635
635
  gap: 8px;
636
636
  }
637
+
638
+ /* Model-rendered tool approval card. Separate from .june-approval so the existing card is unchanged. */
639
+ .june-approval-card {
640
+ display: flex;
641
+ align-items: flex-start;
642
+ gap: 12px;
643
+ max-width: 100%;
644
+ min-width: 0;
645
+ box-sizing: border-box;
646
+ margin: 8px 0;
647
+ padding: 16px 18px;
648
+ border: 1px solid #eadcc4;
649
+ border-radius: 16px;
650
+ background: #fff;
651
+ color: #1c1917;
652
+ }
653
+
654
+ .june-approval-card__icon {
655
+ display: inline-flex;
656
+ flex: none;
657
+ align-items: center;
658
+ justify-content: center;
659
+ width: 36px;
660
+ height: 36px;
661
+ border-radius: 999px;
662
+ background: #f6efe3;
663
+ color: #c4a36a;
664
+ }
665
+
666
+ .june-approval-card__glyph {
667
+ width: 18px;
668
+ height: 18px;
669
+ }
670
+
671
+ .june-approval-card__body {
672
+ display: grid;
673
+ gap: 10px;
674
+ min-width: 0;
675
+ flex: 1;
676
+ }
677
+
678
+ .june-approval-card__title {
679
+ margin: 0;
680
+ font-size: 15px;
681
+ font-weight: 600;
682
+ line-height: 1.4;
683
+ color: #1c1917;
684
+ }
685
+
686
+ .june-approval-card__meta {
687
+ display: flex;
688
+ flex-wrap: wrap;
689
+ align-items: center;
690
+ gap: 8px;
691
+ }
692
+
693
+ .june-approval-card__tool {
694
+ padding: 2px 8px;
695
+ border-radius: 8px;
696
+ background: #f3f4f6;
697
+ color: #6b7280;
698
+ font-size: 13px;
699
+ line-height: 1.4;
700
+ text-decoration: underline;
701
+ text-underline-offset: 2px;
702
+ overflow-wrap: anywhere;
703
+ }
704
+
705
+ .june-approval-card__effect {
706
+ color: #9ca3af;
707
+ font-size: 13px;
708
+ line-height: 1.4;
709
+ }
710
+
711
+ .june-approval-card__risk {
712
+ padding: 2px 10px;
713
+ border-radius: 999px;
714
+ background: #fff4e8;
715
+ color: #d97706;
716
+ font-size: 13px;
717
+ font-weight: 600;
718
+ line-height: 1.4;
719
+ }
720
+
721
+ .june-approval-card__risk[data-risk="low"] {
722
+ background: #ecfdf3;
723
+ color: #15803d;
724
+ }
725
+
726
+ .june-approval-card__risk[data-risk="high"] {
727
+ background: #fef2f2;
728
+ color: #dc2626;
729
+ }
730
+
731
+ .june-approval-card__actions {
732
+ display: flex;
733
+ flex-wrap: wrap;
734
+ align-items: center;
735
+ gap: 8px;
736
+ }
737
+
738
+ .june-approval-card__button {
739
+ display: inline-flex;
740
+ align-items: center;
741
+ gap: 6px;
742
+ margin: 0;
743
+ padding: 8px 14px;
744
+ border: 1px solid transparent;
745
+ border-radius: 10px;
746
+ background: transparent;
747
+ color: #4b5563;
748
+ font: inherit;
749
+ font-size: 14px;
750
+ font-weight: 600;
751
+ line-height: 1.2;
752
+ cursor: pointer;
753
+ }
754
+
755
+ .june-approval-card__button[data-choice="approve"] {
756
+ border-color: #1e40af;
757
+ background: #1e40af;
758
+ color: #fff;
759
+ }
760
+
761
+ .june-approval-card__button[data-choice="reject"] {
762
+ border-color: #e5e7eb;
763
+ background: #fff;
764
+ color: #374151;
765
+ font-weight: 500;
766
+ }
767
+
768
+ .june-approval-card__button[data-choice="edit"] {
769
+ padding-left: 8px;
770
+ padding-right: 8px;
771
+ color: #4b5563;
772
+ font-weight: 500;
773
+ }
774
+
775
+ .june-approval-card__btn-icon {
776
+ width: 14px;
777
+ height: 14px;
778
+ flex: none;
779
+ }
780
+
781
+ .june-approval-card__button:disabled {
782
+ opacity: 0.5;
783
+ cursor: not-allowed;
784
+ }
785
+
786
+ /* Failure notice with a Retry button. */
787
+ .june-retry {
788
+ display: flex;
789
+ align-items: center;
790
+ gap: 12px;
791
+ max-width: 100%;
792
+ min-width: 0;
793
+ box-sizing: border-box;
794
+ margin: 8px 0;
795
+ padding: 14px 16px;
796
+ border: 1px solid #f3c7c7;
797
+ border-radius: 16px;
798
+ background: #fff6f6;
799
+ color: #1c1917;
800
+ }
801
+
802
+ .june-retry__icon {
803
+ display: inline-flex;
804
+ flex: none;
805
+ color: #ef4444;
806
+ }
807
+
808
+ .june-retry__glyph {
809
+ width: 22px;
810
+ height: 22px;
811
+ }
812
+
813
+ .june-retry__copy {
814
+ min-width: 0;
815
+ flex: 1;
816
+ }
817
+
818
+ .june-retry__title {
819
+ margin: 0;
820
+ font-size: 15px;
821
+ font-weight: 700;
822
+ line-height: 1.35;
823
+ color: #111827;
824
+ }
825
+
826
+ .june-retry__message {
827
+ margin: 2px 0 0;
828
+ font-size: 14px;
829
+ line-height: 1.4;
830
+ color: #6b7280;
831
+ }
832
+
833
+ .june-retry__button {
834
+ display: inline-flex;
835
+ flex: none;
836
+ align-items: center;
837
+ gap: 6px;
838
+ margin: 0;
839
+ padding: 8px 14px;
840
+ border: 1px solid #e5e7eb;
841
+ border-radius: 12px;
842
+ background: #fff;
843
+ box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
844
+ color: #111827;
845
+ font: inherit;
846
+ font-size: 14px;
847
+ font-weight: 600;
848
+ line-height: 1.2;
849
+ cursor: pointer;
850
+ }
851
+
852
+ .june-retry__btn-icon {
853
+ width: 15px;
854
+ height: 15px;
855
+ flex: none;
856
+ }
857
+
858
+ .june-retry__button:disabled {
859
+ opacity: 0.5;
860
+ cursor: not-allowed;
861
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@june-ai/june-ui",
3
- "version": "0.2.11",
3
+ "version": "0.2.13",
4
4
  "description": "A modular React SDK for generative UI: Markdown, streaming OpenUI Lang, custom components and documents",
5
5
  "license": "MIT",
6
6
  "type": "module",