twntyx-css 1.0.7 → 1.0.8

package/styles/chat.css

@@ -4,8 +4,7 @@
 
 /* Base chat container */
 .chat {
-  @apply
-  flex
+  @apply flex
   /* overflow-x-hidden */
   relative
   flex-col
@@ -20,8 +19,7 @@
 
 /* Chat feed - messages container */
 @utility chat-feed {
-  @apply
-  flex-1
+  @apply flex-1
   overflow-y-auto
   overflow-x-hidden
   mx-auto
@@ -33,14 +31,11 @@
   gap-6
   p-4
   w-full;
-
-  
 }
 
 /* Message groups */
 @utility chat-group {
-  @apply
-  flex
+  @apply flex
   relative
   gap-4
   items-start
@@ -49,8 +44,7 @@
 
   /* Author section with avatar and timestamp */
   .chat-author {
-    @apply
-    flex
+    @apply flex
     relative
     flex-col
     gap-2
@@ -60,12 +54,11 @@
     &,
     .avatar,
     .avatar > * {
-      @apply size-12;
+      @apply size-11;
     }
 
     time {
-      @apply
-      text-xs
+      @apply text-xs
       leading-none
       whitespace-nowrap
       text-text-tertiary
@@ -77,8 +70,7 @@
 
   /* Messages container */
   .chat-messages {
-    @apply
-    flex
+    @apply flex
     flex-col
     flex-1
     gap-2
@@ -87,16 +79,14 @@
     lg:max-w-[60%];
 
     .chat-name {
-      @apply
-      text-sm
+      @apply text-sm
       font-medium
       text-text-secondary;
     }
 
     /* Individual message */
     .chat-message {
-      @apply
-      relative
+      @apply relative
       max-w-full
       w-fit
       flex
@@ -110,17 +100,14 @@
         @apply z-20;
 
         .chat-actions {
-          @apply
-          opacity-100
+          @apply opacity-100
           scale-100
-          pointer-events-auto
-          ;
+          pointer-events-auto;
         }
       }
 
       .chat-bubble {
-        @apply
-        px-4
+        @apply px-4
         py-3
         rounded-2xl
         break-words
@@ -140,49 +127,41 @@
 
         b,
         strong {
-          @apply
-          font-semibold;
+          @apply font-semibold;
         }
 
         i,
         em {
-          @apply
-          italic;
+          @apply italic;
         }
 
         ul,
         ol {
-          @apply
-          pl-6
+          @apply pl-6
           mb-4
           last:mb-0;
         }
 
         ul {
-          @apply
-          list-disc;
+          @apply list-disc;
         }
 
         ol {
-          @apply
-          list-decimal;
+          @apply list-decimal;
         }
 
         li {
-          @apply
-          mb-2 last:mb-0;
+          @apply mb-2 last:mb-0;
         }
 
         a {
-          @apply
-          underline
+          @apply underline
           text-text-link
           hover:text-text-link-hover;
         }
 
         code {
-          @apply
-          px-1.5
+          @apply px-1.5
           py-0.5
           text-xs
           rounded
@@ -190,8 +169,7 @@
         }
 
         pre {
-          @apply
-          overflow-x-auto
+          @apply overflow-x-auto
           p-4
           mb-4
           rounded
@@ -199,14 +177,12 @@
           bg-background-surface-elevated;
 
           code {
-            @apply
-            p-0 bg-transparent;
+            @apply p-0 bg-transparent;
           }
         }
 
         blockquote {
-          @apply
-          pl-4
+          @apply pl-4
           my-4
           italic
           border-l-2
@@ -214,8 +190,7 @@
         }
 
         .chat-bubble-actions {
-          @apply
-          flex
+          @apply flex
           flex-wrap
           gap-2;
 
@@ -223,7 +198,7 @@
             @apply
             pointer-events-none;
           } */
-/* 
+          /* 
           > :where(button, .button) {
             @apply
             opacity-0
@@ -275,8 +250,7 @@
 
       /* Message actions */
       .chat-actions {
-        @apply
-        flex
+        @apply flex
         absolute
         right-0
         -top-7
@@ -294,8 +268,7 @@
         surface;
 
         button {
-          @apply
-          border
+          @apply border
           button
           include-border-secondary
           bg-background-surface
@@ -304,14 +277,12 @@
           shrink-0;
 
           &:hover {
-            @apply
-            border-line-default
+            @apply border-line-default
             text-text-default;
           }
 
           svg {
-            @apply
-            w-4
+            @apply w-4
             h-4;
           }
         }
@@ -321,8 +292,7 @@
 
   /* Owner messages styling */
   &.is-owner {
-    @apply
-    flex-row-reverse
+    @apply flex-row-reverse
     text-right;
 
     .chat-messages {
@@ -332,18 +302,15 @@
         @apply ml-auto;
 
         .chat-bubble {
-          @apply
-          border-none
+          @apply border-none
           bg-core-black
           dark:bg-core-white
           text-core-white
-          dark:text-core-black
-          ;
+          dark:text-core-black;
         }
 
         .chat-actions {
-          @apply
-          left-0
+          @apply left-0
           right-auto;
         }
       }
@@ -360,8 +327,7 @@
         @apply opacity-0 pointer-events-none;
       }
       &::before {
-        @apply
-        content-[attr(data-loading)]
+        @apply content-[attr(data-loading)]
         absolute
         top-0
         md:top-3.5
@@ -374,8 +340,7 @@
 
 /* Chat input area */
 @utility chat-footer {
-  @apply
-  sticky
+  @apply sticky
   right-0
   bottom-0
   left-0
@@ -387,22 +352,19 @@
   rounded-b-[inherit];
 
   .chat-input {
-    @apply
-    flex
+    @apply flex
     gap-2
     items-end
     max-w-full;
 
     .input-control {
-      @apply
-      overflow-y-auto
+      @apply overflow-y-auto
       flex-1
       min-w-0
       max-h-32;
 
       .input-textarea {
-        @apply
-        py-2
+        @apply py-2
         min-h-[40px]
         max-h-full;
       }
@@ -416,44 +378,38 @@
 
 /* AI Chat variant */
 @utility chat-secondary {
-
-  &:has(.chat-footer-full) {
+  &:has(.chat-footer-full):not([class*='bg-']) {
     @apply bg-background-surface-sunken;
   }
 
   .chat-feed {
-    @apply
-    bg-background-surface-sunken;
-
+    &:not([class*='bg-']) {
+      @apply bg-background-surface-sunken;
+    }
   }
   .chat-group {
-    @apply
-    flex-col
+    @apply flex-col
     items-stretch
     md:flex-row
     md:items-start;
     .chat-messages {
-      @apply
-      px-0
+      @apply px-0
       w-full
       lg:w-auto
       lg:max-w-full;
 
       .chat-message {
-        @apply
-        items-start
+        @apply items-start
         w-full;
 
         .chat-bubble {
-          @apply
-          py-2
+          @apply py-2
           space-y-2
           w-full
           max-w-fit;
         }
         .chat-actions {
-          @apply
-          top-auto
+          @apply top-auto
           -bottom-5
           left-auto
           right-0;
@@ -464,8 +420,7 @@
     &:not(.is-owner) {
       .chat-message {
         .chat-bubble {
-          @apply
-          p-0
+          @apply p-0
           bg-transparent
           border-none;
         }
@@ -473,16 +428,13 @@
     }
 
     &.is-owner {
-      @apply
-      text-left;
+      @apply text-left;
 
       .chat-messages {
-        @apply
-        items-start;
+        @apply items-start;
 
         .chat-message {
-          @apply
-          flex-row;
+          @apply flex-row;
         }
       }
     }
@@ -491,24 +443,21 @@
 
 /* Media attachments inside bubbles */
 @utility chat-media-grid {
-  @apply
-  grid
+  @apply grid
   grid-cols-2
   gap-2
   mt-2;
 }
 
 @utility chat-media-item {
-  @apply
-  overflow-hidden
+  @apply overflow-hidden
   rounded-xl
   border
   border-line-default
   bg-background-surface-sunken;
 
   img {
-    @apply
-    block
+    @apply block
     w-full
     h-24
     md:h-28
@@ -522,15 +471,13 @@
 }
 
 @utility chat-loop-stack {
-  @apply
-  relative
+  @apply relative
   mt-6;
 
   min-height: 9.25rem;
 
   > .chat-group {
-    @apply
-    absolute
+    @apply absolute
     inset-0
     mt-0;
   }
@@ -550,12 +497,33 @@
 
 /* Extended chat footer demo */
 @utility chat-footer-full {
-
   @apply flex flex-col gap-2 w-full rounded-2xl! surface mb-4;
 
+  .chat-attachment-preview {
+    @apply flex;
+  }
+
+  .chat-attachment-thumbnail {
+    @apply relative size-20 rounded-xl border-line-default;
+
+    &:has(.button:hover) {
+      @apply border-line-highlight;
+      img {
+        @apply brightness-110;
+      }
+    }
+
+    img {
+      @apply size-full object-cover rounded-[inherit];
+    }
+  }
+
+  .chat-attachment-remove {
+    @apply absolute -top-2 -right-2 shadow-sm;
+  }
+
   .chat-input-full {
-    @apply
-    flex-wrap
+    @apply flex-wrap
     items-end;
 
     .chat-add-menu-trigger,
@@ -564,47 +532,76 @@
     }
 
     .chat-footer-actions {
-      @apply
-      order-3
+      @apply order-3
       flex
       gap-2
       flex-1
       items-center
       justify-end
-      sm:order-none
       sm:flex-none
       sm:ml-auto;
     }
 
-    .chat-model-select {
-      @apply
-      w-36
-      sm:w-44;
-    }
+    .chat-dictate {
+      @apply relative px-0.5!;
+
+      .chat-dictate-indicator {
+        @apply flex items-center justify-center gap-0.75 min-h-4 pointer-events-none;
+
+        &::before {
+          @apply content-['']
+          absolute
+          inset-1
+          rounded-full
+          bg-current
+          transition-all
+          duration-150
+          ease-out;
+          mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%20-960%20960%20960%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M409.04-449.04Q380-478.08%20380-520v-240q0-41.92%2029.04-70.96Q438.08-860%20480-860q41.92%200%2070.96%2029.04Q580-801.92%20580-760v240q0%2041.92-29.04%2070.96Q521.92-420%20480-420q-41.92%200-70.96-29.04ZM480-640Zm-30%20480v-101.85q-89.31-10.31-153.08-73.38-63.76-63.08-74.69-153.77-1.61-12.77%206.69-21.88Q237.23-520%20250-520q12.77%200%2021.38%208.81%208.62%208.8%2011.47%2021.57%2010.92%2073.47%2067.19%20121.54Q406.31-320%20480-320q74.69%200%20130.46-48.58%2055.77-48.57%2066.69-121.04%202.85-12.77%2011.47-21.57Q697.23-520%20710-520t21.08%209.12q8.3%209.11%206.69%2021.88-10.93%2088.69-74.19%20152.58-63.27%2063.88-153.58%2074.57V-160q0%2012.77-8.62%2021.38Q492.77-130%20480-130t-21.38-8.62Q450-147.23%20450-160Zm58.5-331.5Q520-503%20520-520v-240q0-17-11.5-28.5T480-800q-17%200-28.5%2011.5T440-760v240q0%2017%2011.5%2028.5T480-480q17%200%2028.5-11.5Z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E');
+          mask-size: contain;
+          mask-repeat: no-repeat;
+          mask-position: center;
+        }
+      }
 
+      .chat-dictate-bar {
+        @apply block size-0.5 rounded-full bg-current transition-all duration-150 ease-out opacity-0;
+      }
 
-    .chat-dictate {
-      @apply
-      relative;
+      &.is-listening {
+        .chat-dictate-indicator {
+          @apply items-end;
+          &::before {
+            @apply opacity-0;
+          }
+        }
 
-      &.is-listening::after {
-        content: "";
-        @apply
-        absolute
-        -top-1
-        -right-1
-        size-2
-        rounded-full
-        bg-background-error
-        border
-        border-background-surface;
-        animation: chat-dictate-pulse 1.4s ease-in-out infinite;
+        .chat-dictate-bar {
+          @apply h-4 w-0.5 rounded-full opacity-100;
+          animation: chat-dictate-listen 1s ease-in-out infinite;
+          transform-origin: center;
+        }
+
+        .chat-dictate-bar:nth-child(2) {
+          animation-delay: 0.1s;
+        }
+
+        .chat-dictate-bar:nth-child(3) {
+          animation-delay: 0.2s;
+        }
+
+        .chat-dictate-bar:nth-child(4) {
+          animation-delay: 0.3s;
+        }
+
+        .chat-dictate-bar:nth-child(5) {
+          animation-delay: 0.4s;
+        }
       }
     }
 
     .chat-send-button {
-      @apply
-      shrink-0;
+      @apply shrink-0;
     }
   }
 
@@ -621,8 +618,7 @@
   }
 
   .chat-dictate-hint {
-    @apply
-    mt-2
+    @apply mt-2
     text-xs
     text-text-secondary;
   }
@@ -681,22 +677,26 @@
   }
 }
 
-@keyframes chat-dictate-pulse {
+@keyframes chat-dictate-listen {
   0%,
   100% {
-    opacity: 1;
-    transform: scale(1);
+    transform: scaleY(0.35);
   }
-  50% {
-    opacity: 0.35;
-    transform: scale(1.35);
+  30% {
+    transform: scaleY(1);
+  }
+  65% {
+    transform: scaleY(0.55);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .chat-loop-stack .chat-loop-loading,
   .chat-loop-stack .chat-loop-message,
-  .chat-footer-full .chat-input-full .chat-dictate.is-listening::after {
+  .chat-footer-full
+    .chat-input-full
+    .chat-dictate.is-listening
+    .chat-dictate-bar {
     animation: none;
   }
 
@@ -710,4 +710,11 @@
     visibility: visible;
     transform: none;
   }
+
+  .chat-footer-full
+    .chat-input-full
+    .chat-dictate.is-listening
+    .chat-dictate-bar {
+    transform: none;
+  }
 }

package/styles/collapsible.css

@@ -61,7 +61,7 @@
     }
   }
 
-  &:not([class*="rounded"]) {
+  &:not([class*='rounded']) {
     --roundness: 1.5rem;
   }
   &.rounded-none {
@@ -81,7 +81,11 @@
   }
 
   .collapsible-header {
-    @apply rounded-[calc(var(--roundness)-0.125rem-1px)] flex items-center gap-2 include-interactive cursor-pointer include-interactive text-text-default;
+    @apply rounded-[calc(var(--roundness)-0.125rem-1px)] flex-1 flex items-center gap-2 cursor-pointer include-interactive text-text-default;
+
+    > span {
+      @apply flex-1;
+    }
   }
 
   .collapsible-content {