anentrypoint-design 0.0.124 → 0.0.125

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 (4) hide show
  1. package/app-shell.css +52 -6
  2. package/dist/247420.css +52 -6
  3. package/dist/247420.js +12 -12
  4. package/package.json +1 -1
package/app-shell.css CHANGED
@@ -624,13 +624,26 @@ table tr.clickable:hover td { background: var(--bg-2); }
624
624
  flex: 1; min-height: 0; overflow-y: auto;
625
625
  padding: var(--space-2) 0;
626
626
  scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent;
627
+ scroll-behavior: smooth;
627
628
  }
628
629
  .chat-thread::-webkit-scrollbar { width: 8px; }
629
630
  .chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
631
+ .chat-thread:empty::before {
632
+ content: 'no messages yet\astart the conversation';
633
+ white-space: pre;
634
+ color: var(--fg-3);
635
+ font-family: var(--ff-mono);
636
+ font-size: var(--fs-sm);
637
+ text-align: center;
638
+ margin: auto;
639
+ opacity: 0.6;
640
+ pointer-events: none;
641
+ }
630
642
 
631
- .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; }
643
+ .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; position: relative; }
632
644
  .chat-msg.you { flex-direction: row-reverse; }
633
645
  .chat-msg.you .chat-stack { align-items: flex-end; }
646
+ .chat-msg:hover { background: color-mix(in oklab, var(--fg) 1%, transparent); padding: 6px 8px; margin: -4px -8px; border-radius: 8px; transition: background 0.12s ease, padding 0.12s ease; }
634
647
 
635
648
  .chat-avatar {
636
649
  width: 36px; height: 36px; flex-shrink: 0;
@@ -638,7 +651,10 @@ table tr.clickable:hover td { background: var(--bg-2); }
638
651
  display: inline-flex; align-items: center; justify-content: center;
639
652
  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
640
653
  text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
654
+ transition: transform 0.12s ease, box-shadow 0.12s ease;
655
+ position: relative;
641
656
  }
657
+ .chat-msg:hover .chat-avatar { transform: scale(1.08); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
642
658
  .chat-msg.you .chat-avatar {
643
659
  background: color-mix(in oklab, var(--accent) 26%, var(--bg-3));
644
660
  color: var(--accent);
@@ -658,7 +674,9 @@ table tr.clickable:hover td { background: var(--bg-2); }
658
674
  border-radius: 14px; line-height: 1.55;
659
675
  word-wrap: break-word; overflow-wrap: anywhere;
660
676
  font-size: var(--fs-sm);
677
+ transition: transform 0.12s ease, box-shadow 0.12s ease;
661
678
  }
679
+ .chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 8%, transparent); }
662
680
  .chat-msg.you .chat-bubble { background: var(--accent); color: var(--accent-fg); }
663
681
  .chat-msg.aicat .chat-bubble {
664
682
  background: color-mix(in oklab, var(--mascot) 14%, var(--bg-2));
@@ -751,6 +769,12 @@ table tr.clickable:hover td { background: var(--bg-2); }
751
769
  max-width: min(100%, 480px); background: var(--bg-2);
752
770
  text-decoration: none; color: var(--fg);
753
771
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
772
+ transition: box-shadow 0.15s ease, border-color 0.15s ease;
773
+ }
774
+ .chat-msg:hover .chat-image,
775
+ .chat-image:hover {
776
+ border-color: color-mix(in oklab, var(--accent) 35%, transparent);
777
+ box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 12%, transparent);
754
778
  }
755
779
  .chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
756
780
  .chat-image .cap,
@@ -789,7 +813,9 @@ table tr.clickable:hover td { background: var(--bg-2); }
789
813
  color: var(--fg);
790
814
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
791
815
  border-radius: 12px; overflow: hidden; max-width: min(100%, 480px);
816
+ transition: box-shadow 0.12s ease, border-color 0.12s ease;
792
817
  }
818
+ .chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 6%, transparent); }
793
819
  .chat-pdf-head {
794
820
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
795
821
  background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
@@ -811,9 +837,14 @@ table tr.clickable:hover td { background: var(--bg-2); }
811
837
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
812
838
  border-radius: 12px; text-decoration: none; color: var(--fg);
813
839
  max-width: min(100%, 480px);
814
- transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
840
+ transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease), box-shadow 0.15s ease;
841
+ }
842
+ .chat-msg:hover .chat-link,
843
+ .chat-link:hover {
844
+ background: var(--bg-3);
845
+ border-color: color-mix(in oklab, var(--accent) 40%, transparent);
846
+ box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 8%, transparent);
815
847
  }
816
- .chat-link:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
817
848
  .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
818
849
  .chat-link .thumb,
819
850
  .chat-link img.thumb { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
@@ -842,9 +873,10 @@ table tr.clickable:hover td { background: var(--bg-2); }
842
873
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
843
874
  border-radius: 999px; font-size: var(--fs-xs);
844
875
  cursor: pointer; user-select: none;
845
- transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease);
876
+ transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
877
+ position: relative;
846
878
  }
847
- .chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
879
+ .chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: scale(1.06); }
848
880
  .chat-reactions .rxn.you {
849
881
  background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
850
882
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
@@ -867,6 +899,19 @@ table tr.clickable:hover td { background: var(--bg-2); }
867
899
  30% { transform: translateY(-5px); opacity: 1; }
868
900
  }
869
901
 
902
+ @keyframes chat-fade-in {
903
+ from { opacity: 0; transform: translateY(8px); }
904
+ to { opacity: 1; transform: translateY(0); }
905
+ }
906
+
907
+ .chat-msg {
908
+ animation: chat-fade-in 0.3s ease-out forwards;
909
+ }
910
+ .chat-msg:nth-child(1) { animation-delay: 0s; }
911
+ .chat-msg:nth-child(2) { animation-delay: 0.05s; }
912
+ .chat-msg:nth-child(3) { animation-delay: 0.1s; }
913
+ .chat-msg:nth-child(n+4) { animation-delay: 0.15s; }
914
+
870
915
  .chat-composer {
871
916
  display: flex; align-items: flex-end; gap: 8px;
872
917
  padding: var(--space-3) 0 0;
@@ -885,7 +930,8 @@ table tr.clickable:hover td { background: var(--bg-2); }
885
930
  .chat-composer textarea:focus {
886
931
  background: var(--bg-2);
887
932
  border-color: var(--accent);
888
- box-shadow: 0 0 0 1px var(--accent);
933
+ box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
934
+ outline: none;
889
935
  }
890
936
  .chat-composer .send,
891
937
  .chat-composer button {
package/dist/247420.css CHANGED
@@ -856,13 +856,26 @@
856
856
  flex: 1; min-height: 0; overflow-y: auto;
857
857
  padding: var(--space-2) 0;
858
858
  scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent;
859
+ scroll-behavior: smooth;
859
860
  }
860
861
  .ds-247420 .chat-thread::-webkit-scrollbar { width: 8px; }
861
862
  .ds-247420 .chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
863
+ .ds-247420 .chat-thread:empty::before {
864
+ content: 'no messages yet\astart the conversation';
865
+ white-space: pre;
866
+ color: var(--fg-3);
867
+ font-family: var(--ff-mono);
868
+ font-size: var(--fs-sm);
869
+ text-align: center;
870
+ margin: auto;
871
+ opacity: 0.6;
872
+ pointer-events: none;
873
+ }
862
874
 
863
- .ds-247420 .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; }
875
+ .ds-247420 .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; position: relative; }
864
876
  .ds-247420 .chat-msg.you { flex-direction: row-reverse; }
865
877
  .ds-247420 .chat-msg.you .chat-stack { align-items: flex-end; }
878
+ .ds-247420 .chat-msg:hover { background: color-mix(in oklab, var(--fg) 1%, transparent); padding: 6px 8px; margin: -4px -8px; border-radius: 8px; transition: background 0.12s ease, padding 0.12s ease; }
866
879
 
867
880
  .ds-247420 .chat-avatar {
868
881
  width: 36px; height: 36px; flex-shrink: 0;
@@ -870,7 +883,10 @@
870
883
  display: inline-flex; align-items: center; justify-content: center;
871
884
  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
872
885
  text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
886
+ transition: transform 0.12s ease, box-shadow 0.12s ease;
887
+ position: relative;
873
888
  }
889
+ .ds-247420 .chat-msg:hover .chat-avatar { transform: scale(1.08); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
874
890
  .ds-247420 .chat-msg.you .chat-avatar {
875
891
  background: color-mix(in oklab, var(--accent) 26%, var(--bg-3));
876
892
  color: var(--accent);
@@ -890,7 +906,9 @@
890
906
  border-radius: 14px; line-height: 1.55;
891
907
  word-wrap: break-word; overflow-wrap: anywhere;
892
908
  font-size: var(--fs-sm);
909
+ transition: transform 0.12s ease, box-shadow 0.12s ease;
893
910
  }
911
+ .ds-247420 .chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 8%, transparent); }
894
912
  .ds-247420 .chat-msg.you .chat-bubble { background: var(--accent); color: var(--accent-fg); }
895
913
  .ds-247420 .chat-msg.aicat .chat-bubble {
896
914
  background: color-mix(in oklab, var(--mascot) 14%, var(--bg-2));
@@ -983,6 +1001,12 @@
983
1001
  max-width: min(100%, 480px); background: var(--bg-2);
984
1002
  text-decoration: none; color: var(--fg);
985
1003
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
1004
+ transition: box-shadow 0.15s ease, border-color 0.15s ease;
1005
+ }
1006
+ .ds-247420 .chat-msg:hover .chat-image,
1007
+ .ds-247420 .chat-image:hover {
1008
+ border-color: color-mix(in oklab, var(--accent) 35%, transparent);
1009
+ box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 12%, transparent);
986
1010
  }
987
1011
  .ds-247420 .chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
988
1012
  .ds-247420 .chat-image .cap,
@@ -1021,7 +1045,9 @@
1021
1045
  color: var(--fg);
1022
1046
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
1023
1047
  border-radius: 12px; overflow: hidden; max-width: min(100%, 480px);
1048
+ transition: box-shadow 0.12s ease, border-color 0.12s ease;
1024
1049
  }
1050
+ .ds-247420 .chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 6%, transparent); }
1025
1051
  .ds-247420 .chat-pdf-head {
1026
1052
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
1027
1053
  background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
@@ -1043,9 +1069,14 @@
1043
1069
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
1044
1070
  border-radius: 12px; text-decoration: none; color: var(--fg);
1045
1071
  max-width: min(100%, 480px);
1046
- transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
1072
+ transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease), box-shadow 0.15s ease;
1073
+ }
1074
+ .ds-247420 .chat-msg:hover .chat-link,
1075
+ .ds-247420 .chat-link:hover {
1076
+ background: var(--bg-3);
1077
+ border-color: color-mix(in oklab, var(--accent) 40%, transparent);
1078
+ box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 8%, transparent);
1047
1079
  }
1048
- .ds-247420 .chat-link:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
1049
1080
  .ds-247420 .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
1050
1081
  .ds-247420 .chat-link .thumb,
1051
1082
  .ds-247420 .chat-link img.thumb { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
@@ -1074,9 +1105,10 @@
1074
1105
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
1075
1106
  border-radius: 999px; font-size: var(--fs-xs);
1076
1107
  cursor: pointer; user-select: none;
1077
- transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease);
1108
+ transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
1109
+ position: relative;
1078
1110
  }
1079
- .ds-247420 .chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
1111
+ .ds-247420 .chat-reactions .rxn:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: scale(1.06); }
1080
1112
  .ds-247420 .chat-reactions .rxn.you {
1081
1113
  background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
1082
1114
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
@@ -1099,6 +1131,19 @@
1099
1131
  30% { transform: translateY(-5px); opacity: 1; }
1100
1132
  }
1101
1133
 
1134
+ @keyframes chat-fade-in {
1135
+ from { opacity: 0; transform: translateY(8px); }
1136
+ to { opacity: 1; transform: translateY(0); }
1137
+ }
1138
+
1139
+ .ds-247420 .chat-msg {
1140
+ animation: chat-fade-in 0.3s ease-out forwards;
1141
+ }
1142
+ .ds-247420 .chat-msg:nth-child(1) { animation-delay: 0s; }
1143
+ .ds-247420 .chat-msg:nth-child(2) { animation-delay: 0.05s; }
1144
+ .ds-247420 .chat-msg:nth-child(3) { animation-delay: 0.1s; }
1145
+ .ds-247420 .chat-msg:nth-child(n+4) { animation-delay: 0.15s; }
1146
+
1102
1147
  .ds-247420 .chat-composer {
1103
1148
  display: flex; align-items: flex-end; gap: 8px;
1104
1149
  padding: var(--space-3) 0 0;
@@ -1117,7 +1162,8 @@
1117
1162
  .ds-247420 .chat-composer textarea:focus {
1118
1163
  background: var(--bg-2);
1119
1164
  border-color: var(--accent);
1120
- box-shadow: 0 0 0 1px var(--accent);
1165
+ box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
1166
+ outline: none;
1121
1167
  }
1122
1168
  .ds-247420 .chat-composer .send,
1123
1169
  .ds-247420 .chat-composer button {