@schlenkr/quassel 0.5.0 → 0.5.2

package/README.md

@@ -4,7 +4,7 @@ Chat building blocks for React: a streaming transcript with thinking and tool st
 actions, an input card with attachments and steering, and a small event contract that works
 on the server as well. quassel is the chat of [RAgents](https://github.com/SchlenkR/RAgents),
 published as a library. It ships a compiled stylesheet, so hosts need no Tailwind, and every
-color, radius, font and font size is a `--qsl-*` variable, and the text size follows the host by default.
+color, radius, font and font size is a `--qsl-*` variable, with compact defaults for text and tool steps.
 
 ![An agent chat with grouped steps, timestamps, Markdown and the input card](https://raw.githubusercontent.com/SchlenkR/quassel/main/docs/images/agent.png)
 
@@ -93,20 +93,28 @@ Any backend that emits the `@schlenkr/quassel/events` stream works with the same
 
 ## Text size
 
-quassel inherits the font size of the place it is mounted in. Chat text and the input use that
-size, meta lines, step rows and labels are derived from it as smaller steps, and nothing
-compounds when elements nest. One variable changes it for a chat:
+quassel starts at 13px with a line height of 1.5, a 10px message gap and a 3px dense
+step gap. Tool rows and timestamps use 88% of the text size. Expanded tool groups have a
+1px gap between rows; tool rows have 1px of vertical padding on each side.
 
-```css
-.my-chat {
-    --qsl-font-size: 15px;
-}
+Every size derives from one base, so nested elements never compound. Set `--qsl-font-size`
+on a wrapper, or `appearance.fontSize`, to change it. Use `1em` to follow the host's font size.
+`appearance` also offers `toolFontScale`, `toolGroupGap` and `toolRowPadding`.
+
+User message backgrounds fill the available row by default while text keeps its width and
+alignment. `bubbleOptions={{ userBackgroundFullWidth: false }}` restores a fitted background.
+Timestamps sit beside messages by default; their size follows the tool text unless overridden:
+
+```tsx
+<ChatMessages
+    messages={messages}
+    showTimestamps
+    timestampOptions={{ position: "above", fontScale: 0.88 }}
+/>
 ```
 
-`--qsl-chat-font-size` and `--qsl-text-meta` (and `-trace`, `-label`, `-xs` to `-xl`) override
-single steps. Up to 0.4.9 the root was fixed at 14px and the chat text at 13px, so hosts had to
-override sizes by hand; from 0.5.0 on that is no longer needed. Details in the
-[guide](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md#text-size).
+`--qsl-text-trace`, `--qsl-timestamp-font-size` and the other `--qsl-text-*` variables override
+individual sizes. The [guide](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md#text-size) lists the full API.
 
 ## Development
 

package/chat.css

@@ -43,15 +43,24 @@
   .qsl\:absolute {
     position: absolute;
   }
+  .qsl\:fixed {
+    position: fixed;
+  }
   .qsl\:relative {
     position: relative;
   }
+  .qsl\:inset-0 {
+    inset: 0px;
+  }
   .qsl\:inset-x-0 {
     inset-inline: 0px;
   }
   .qsl\:top-1 {
     top: var(--qsl-spacing);
   }
+  .qsl\:top-1\/2 {
+    top: calc(1 / 2 * 100%);
+  }
   .qsl\:right-1 {
     right: var(--qsl-spacing);
   }
@@ -61,6 +70,9 @@
   .qsl\:bottom-\[calc\(var\(--qsl-composer-height\,0px\)_\+_12px\)\] {
     bottom: calc(var(--qsl-composer-height,0px) + 12px);
   }
+  .qsl\:left-1\/2 {
+    left: calc(1 / 2 * 100%);
+  }
   .qsl\:isolate {
     isolation: isolate;
   }
@@ -76,6 +88,12 @@
   .qsl\:z-\[110\] {
     z-index: 110;
   }
+  .qsl\:z-\[120\] {
+    z-index: 120;
+  }
+  .qsl\:z-\[121\] {
+    z-index: 121;
+  }
   .qsl\:-mx-\[16px\] {
     margin-inline: calc(16px * -1);
   }
@@ -112,11 +130,11 @@
   .qsl\:mt-4 {
     margin-top: calc(var(--qsl-spacing) * 4);
   }
-  .qsl\:mt-\[var\(--qsl-chat-dense-message-gap\,8px\)\] {
-    margin-top: var(--qsl-chat-dense-message-gap,8px);
+  .qsl\:mt-\[var\(--qsl-chat-dense-message-gap\,3px\)\] {
+    margin-top: var(--qsl-chat-dense-message-gap,3px);
   }
-  .qsl\:mt-\[var\(--qsl-chat-message-gap\,16px\)\] {
-    margin-top: var(--qsl-chat-message-gap,16px);
+  .qsl\:mt-\[var\(--qsl-chat-message-gap\,10px\)\] {
+    margin-top: var(--qsl-chat-message-gap,10px);
   }
   .qsl\:mb-0\.5 {
     margin-bottom: calc(var(--qsl-spacing) * 0.5);
@@ -195,6 +213,9 @@
   .qsl\:max-h-\[240px\] {
     max-height: 240px;
   }
+  .qsl\:max-h-\[calc\(100vh-6rem\)\] {
+    max-height: calc(100vh - 6rem);
+  }
   .qsl\:max-h-\[calc\(var\(--qsl-panel-height\,100dvh\)_\/_2\)\] {
     max-height: calc(var(--qsl-panel-height,100dvh) / 2);
   }
@@ -222,6 +243,9 @@
   .qsl\:w-\[190px\] {
     width: 190px;
   }
+  .qsl\:w-\[320px\] {
+    width: 320px;
+  }
   .qsl\:w-\[calc\(100\%_-_2_\*_var\(--qsl-chat-horizontal-padding\,24px\)\)\] {
     width: calc(100% - 2 * var(--qsl-chat-horizontal-padding,24px));
   }
@@ -243,6 +267,9 @@
   .qsl\:max-w-\[86\%\] {
     max-width: 86%;
   }
+  .qsl\:max-w-\[94vw\] {
+    max-width: 94vw;
+  }
   .qsl\:max-w-\[220px\] {
     max-width: 220px;
   }
@@ -291,6 +318,14 @@
   .qsl\:origin-\(--transform-origin\) {
     transform-origin: var(--transform-origin);
   }
+  .qsl\:-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .qsl\:-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .qsl\:rotate-90 {
     rotate: 90deg;
   }
@@ -306,6 +341,9 @@
   .qsl\:cursor-pointer {
     cursor: pointer;
   }
+  .qsl\:cursor-zoom-in {
+    cursor: zoom-in;
+  }
   .qsl\:resize-none {
     resize: none;
   }
@@ -336,6 +374,9 @@
   .qsl\:items-end {
     align-items: flex-end;
   }
+  .qsl\:items-stretch {
+    align-items: stretch;
+  }
   .qsl\:justify-between {
     justify-content: space-between;
   }
@@ -354,9 +395,6 @@
   .qsl\:gap-0 {
     gap: 0px;
   }
-  .qsl\:gap-0\.5 {
-    gap: calc(var(--qsl-spacing) * 0.5);
-  }
   .qsl\:gap-1 {
     gap: var(--qsl-spacing);
   }
@@ -375,8 +413,11 @@
   .qsl\:gap-\[5px\] {
     gap: 5px;
   }
-  .qsl\:gap-\[var\(--qsl-chat-dense-message-gap\,8px\)\] {
-    gap: var(--qsl-chat-dense-message-gap,8px);
+  .qsl\:gap-\[var\(--qsl-chat-dense-message-gap\,3px\)\] {
+    gap: var(--qsl-chat-dense-message-gap,3px);
+  }
+  .qsl\:gap-\[var\(--qsl-tool-group-gap\,1px\)\] {
+    gap: var(--qsl-tool-group-gap,1px);
   }
   :where(.qsl\:space-y-0 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
@@ -395,6 +436,9 @@
   .qsl\:self-baseline {
     align-self: baseline;
   }
+  .qsl\:self-start {
+    align-self: flex-start;
+  }
   .qsl\:overflow-auto {
     overflow: auto;
   }
@@ -506,6 +550,12 @@
       background-color: color-mix(in oklab, var(--qsl-color-black) 15%, transparent);
     }
   }
+  .qsl\:bg-black\/75 {
+    background-color: var(--qsl-color-black);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--qsl-color-black) 75%, transparent);
+    }
+  }
   .qsl\:bg-card {
     background-color: var(--qsl-card);
   }
@@ -530,8 +580,8 @@
   .qsl\:bg-\[linear-gradient\(to_right\,var\(--qsl-scroll-cover\,var\(--qsl-background\)\)_50\%\,transparent\)_left\/20px_100\%_no-repeat_local\,linear-gradient\(to_left\,var\(--qsl-scroll-cover\,var\(--qsl-background\)\)_50\%\,transparent\)_right\/20px_100\%_no-repeat_local\,linear-gradient\(to_right\,\#00000047\,transparent\)_left\/14px_100\%_no-repeat_scroll\,linear-gradient\(to_left\,\#00000047\,transparent\)_right\/14px_100\%_no-repeat_scroll\] {
     background-image: linear-gradient(to right,var(--qsl-scroll-cover,var(--qsl-background)) 50%,transparent) left/20px 100% no-repeat local,linear-gradient(to left,var(--qsl-scroll-cover,var(--qsl-background)) 50%,transparent) right/20px 100% no-repeat local,linear-gradient(to right,#00000047,transparent) left/14px 100% no-repeat scroll,linear-gradient(to left,#00000047,transparent) right/14px 100% no-repeat scroll;
   }
-  .qsl\:\[mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_var\(--qsl-chat-message-gap\,16px\)\)\,transparent\)\] {
-    mask-image: linear-gradient(to bottom,#000 calc(100% - var(--qsl-chat-message-gap,16px)),transparent);
+  .qsl\:\[mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_var\(--qsl-chat-message-gap\,10px\)\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,#000 calc(100% - var(--qsl-chat-message-gap,10px)),transparent);
   }
   .qsl\:\[mask-image\:linear-gradient\(to_bottom\,\#000_calc\(var\(--qsl-fade-edge\)_-_40px\)\,transparent_calc\(var\(--qsl-fade-edge\)_\+_16px\)\)\] {
     mask-image: linear-gradient(to bottom,#000 calc(var(--qsl-fade-edge) - 40px),transparent calc(var(--qsl-fade-edge) + 16px));
@@ -608,6 +658,9 @@
   .qsl\:py-\[3px\] {
     padding-block: 3px;
   }
+  .qsl\:py-\[var\(--qsl-tool-row-padding\,1px\)\] {
+    padding-block: var(--qsl-tool-row-padding,1px);
+  }
   .qsl\:py-px {
     padding-block: 1px;
   }
@@ -635,8 +688,8 @@
   .qsl\:pb-\[calc\(var\(--qsl-composer-height\,0px\)_\+_max\(3\.25em\,40px\)\)\] {
     padding-bottom: calc(var(--qsl-composer-height,0px) + max(3.25em, 40px));
   }
-  .qsl\:pb-\[var\(--qsl-chat-message-gap\,16px\)\] {
-    padding-bottom: var(--qsl-chat-message-gap,16px);
+  .qsl\:pb-\[var\(--qsl-chat-message-gap\,10px\)\] {
+    padding-bottom: var(--qsl-chat-message-gap,10px);
   }
   .qsl\:pl-1 {
     padding-left: var(--qsl-spacing);
@@ -692,8 +745,11 @@
   .qsl\:text-meta {
     font-size: var(--qsl-text-meta, calc(var(--qsl-base) * 0.8));
   }
+  .qsl\:text-timestamp {
+    font-size: var(--qsl-timestamp-font-size, var(--qsl-text-trace, calc(var(--qsl-base) * var(--qsl-tool-font-scale, 0.88))));
+  }
   .qsl\:text-trace {
-    font-size: var(--qsl-text-trace, calc(var(--qsl-base) * 0.85));
+    font-size: var(--qsl-text-trace, calc(var(--qsl-base) * var(--qsl-tool-font-scale, 0.88)));
   }
   .qsl\:leading-\[1\.3\] {
     --tw-leading: 1.3;
@@ -719,10 +775,6 @@
     --tw-leading: var(--qsl-chat-line-height,1.5);
     line-height: var(--qsl-chat-line-height,1.5);
   }
-  .qsl\:leading-\[var\(--qsl-chat-line-height\,1\.625\)\] {
-    --tw-leading: var(--qsl-chat-line-height,1.625);
-    line-height: var(--qsl-chat-line-height,1.625);
-  }
   .qsl\:leading-normal {
     --tw-leading: var(--qsl-leading-normal);
     line-height: var(--qsl-leading-normal);
@@ -811,6 +863,9 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .qsl\:underline {
+    text-decoration-line: underline;
+  }
   .qsl\:\[text-underline-offset\:2px\] {
     text-underline-offset: 2px;
   }
@@ -846,6 +901,10 @@
     --tw-shadow: var(--qsl-bar-shadow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .qsl\:shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .qsl\:shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -925,8 +984,8 @@
   .qsl\:\[--qsl-scroll-cover\:var\(--qsl-secondary\)\] {
     --qsl-scroll-cover: var(--qsl-secondary);
   }
-  .qsl\:\[-webkit-mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_var\(--qsl-chat-message-gap\,16px\)\)\,transparent\)\] {
-    -webkit-mask-image: linear-gradient(to bottom,#000 calc(100% - var(--qsl-chat-message-gap,16px)),transparent);
+  .qsl\:\[-webkit-mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_var\(--qsl-chat-message-gap\,10px\)\)\,transparent\)\] {
+    -webkit-mask-image: linear-gradient(to bottom,#000 calc(100% - var(--qsl-chat-message-gap,10px)),transparent);
   }
   .qsl\:\[-webkit-mask-image\:linear-gradient\(to_bottom\,\#000_calc\(var\(--qsl-fade-edge\)_-_40px\)\,transparent_calc\(var\(--qsl-fade-edge\)_\+_16px\)\)\] {
     -webkit-mask-image: linear-gradient(to bottom,#000 calc(var(--qsl-fade-edge) - 40px),transparent calc(var(--qsl-fade-edge) + 16px));
@@ -1119,9 +1178,6 @@
   :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:p-0 {
     padding: 0px;
   }
-  :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:text-foreground {
-    color: var(--qsl-foreground);
-  }
   :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:border-white\/35 {
     border-color: var(--qsl-color-white);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1652,7 +1708,7 @@
 @property --qsl-base {
   syntax: "<length>";
   inherits: true;
-  initial-value: 14px;
+  initial-value: 13px;
 }
 @layer theme {
   :where(:root, :host, [data-theme="light"], [data-theme="system"]) {
@@ -1735,7 +1791,7 @@
     font-family: var(--qsl-font);
     font-feature-settings: normal;
     font-variation-settings: normal;
-    font-size: var(--qsl-font-size, 1em);
+    font-size: var(--qsl-font-size, 13px);
     --qsl-base: 1em;
     color: var(--qsl-foreground);
     -webkit-tap-highlight-color: transparent;
@@ -1850,6 +1906,21 @@
     display: none;
   }
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -1966,21 +2037,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity,1);
@@ -2018,9 +2074,12 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     :root, :host {
-      --qsl-base: 14px;
+      --qsl-base: 13px;
     }
     *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
@@ -2047,9 +2106,6 @@
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
       --tw-duration: initial;
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
       --tw-animation-delay: 0s;
       --tw-animation-direction: normal;
       --tw-animation-duration: initial;