@duskmoon-dev/core 1.17.1 → 1.18.0

package/dist/esm/components/chat.js

@@ -1,10 +1,371 @@
 // Auto-generated from chat.css
-export const css = `/**
- * Chat Component Styles
- * DuskMoonUI - LLM-oriented chat primitives
- */
+export const css = `@layer components {
+  /**
+   * Scrollable transcript with Scroll-Driven Animations indicators.
+   * Set an explicit height / max-height (or place in a flex child with min-height: 0).
+   * Pair each .chat[data-chat-tl="N"] with .chat-scroll-indicator[data-chat-tl="N"] (N = 1..24).
+   */
+  .chat-scroll {
+    --chat-scroll-indicator-size: 0.875rem;
+    --chat-scroll-indicator-active-size: 1.125rem;
+    --chat-scroll-indicator-thickness: 0.1875rem;
+    --chat-scroll-indicator-gap: 0.3125rem;
+    --chat-scroll-indicator-hover-scale: 1.55;
+    --chat-scroll-indicator-neighbor-scale: 1.22;
+
+    container-type: size;
+    container-name: chat-scroll;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.75rem;
+    align-items: start;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    overscroll-behavior-y: contain;
+    timeline-scope:
+    --chat-1,
+    --chat-2,
+    --chat-3,
+    --chat-4,
+    --chat-5,
+    --chat-6,
+    --chat-7,
+    --chat-8,
+    --chat-9,
+    --chat-10,
+    --chat-11,
+    --chat-12,
+    --chat-13,
+    --chat-14,
+    --chat-15,
+    --chat-16,
+    --chat-17,
+    --chat-18,
+    --chat-19,
+    --chat-20,
+    --chat-21,
+    --chat-22,
+    --chat-23,
+    --chat-24;
+  }
+
+  .chat-scroll-track {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--chat-scroll-indicator-gap);
+    width: calc(
+      var(--chat-scroll-indicator-active-size) * var(--chat-scroll-indicator-hover-scale)
+    );
+    height: 100cqh;
+    margin: 0;
+    padding: 0.75rem 0;
+    overflow: visible;
+    list-style: none;
+    pointer-events: none;
+  }
+
+  .chat-scroll-body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .chat-scroll-indicator {
+    display: block;
+    flex-shrink: 0;
+    width: var(--chat-scroll-indicator-size);
+    height: var(--chat-scroll-indicator-thickness);
+    border: 0;
+    border-radius: 999px;
+    padding: 0;
+    appearance: none;
+    background-color: color-mix(in oklch, var(--color-on-surface) 28%, transparent);
+    color: inherit;
+    font: inherit;
+    opacity: 0.45;
+    pointer-events: auto;
+    text-decoration: none;
+    cursor: pointer;
+    transform: scaleX(1);
+    transform-origin: center;
+    transition:
+      transform 140ms ease,
+      opacity 140ms ease,
+      background-color 140ms ease;
+  }
+
+  .chat-scroll-indicator:hover,
+  .chat-scroll-indicator:focus-visible {
+    transform: scaleX(var(--chat-scroll-indicator-hover-scale)) scaleY(1.35);
+    background-color: var(--color-on-surface);
+    opacity: 1;
+  }
+
+  .chat-scroll-indicator:hover + .chat-scroll-indicator,
+  .chat-scroll-indicator:has(+ .chat-scroll-indicator:hover) {
+    transform: scaleX(var(--chat-scroll-indicator-neighbor-scale)) scaleY(1.15);
+    background-color: color-mix(in oklch, var(--color-on-surface) 55%, transparent);
+    opacity: 0.75;
+  }
+
+  .chat[data-chat-tl] {
+    scroll-margin-block-start: 0.5rem;
+  }
+
+  .chat-scroll-indicator:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent);
+  }
+
+  @supports (animation-timeline: --chat-1) {
+    .chat-scroll-indicator {
+      animation-name: chat-scroll-indicator-activate;
+      animation-duration: 1ms;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+      animation-range: entry 0% exit 100%;
+    }
+  }
+
+  .chat[data-chat-tl="1"] {
+    view-timeline-name: --chat-1;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="2"] {
+    view-timeline-name: --chat-2;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="3"] {
+    view-timeline-name: --chat-3;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="4"] {
+    view-timeline-name: --chat-4;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="5"] {
+    view-timeline-name: --chat-5;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="6"] {
+    view-timeline-name: --chat-6;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="7"] {
+    view-timeline-name: --chat-7;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="8"] {
+    view-timeline-name: --chat-8;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="9"] {
+    view-timeline-name: --chat-9;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="10"] {
+    view-timeline-name: --chat-10;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="11"] {
+    view-timeline-name: --chat-11;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="12"] {
+    view-timeline-name: --chat-12;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="13"] {
+    view-timeline-name: --chat-13;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="14"] {
+    view-timeline-name: --chat-14;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="15"] {
+    view-timeline-name: --chat-15;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="16"] {
+    view-timeline-name: --chat-16;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="17"] {
+    view-timeline-name: --chat-17;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="18"] {
+    view-timeline-name: --chat-18;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="19"] {
+    view-timeline-name: --chat-19;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="20"] {
+    view-timeline-name: --chat-20;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="21"] {
+    view-timeline-name: --chat-21;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="22"] {
+    view-timeline-name: --chat-22;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="23"] {
+    view-timeline-name: --chat-23;
+    view-timeline-axis: block;
+  }
+
+  .chat[data-chat-tl="24"] {
+    view-timeline-name: --chat-24;
+    view-timeline-axis: block;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="1"] {
+    animation-timeline: --chat-1;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="2"] {
+    animation-timeline: --chat-2;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="3"] {
+    animation-timeline: --chat-3;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="4"] {
+    animation-timeline: --chat-4;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="5"] {
+    animation-timeline: --chat-5;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="6"] {
+    animation-timeline: --chat-6;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="7"] {
+    animation-timeline: --chat-7;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="8"] {
+    animation-timeline: --chat-8;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="9"] {
+    animation-timeline: --chat-9;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="10"] {
+    animation-timeline: --chat-10;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="11"] {
+    animation-timeline: --chat-11;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="12"] {
+    animation-timeline: --chat-12;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="13"] {
+    animation-timeline: --chat-13;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="14"] {
+    animation-timeline: --chat-14;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="15"] {
+    animation-timeline: --chat-15;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="16"] {
+    animation-timeline: --chat-16;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="17"] {
+    animation-timeline: --chat-17;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="18"] {
+    animation-timeline: --chat-18;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="19"] {
+    animation-timeline: --chat-19;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="20"] {
+    animation-timeline: --chat-20;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="21"] {
+    animation-timeline: --chat-21;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="22"] {
+    animation-timeline: --chat-22;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="23"] {
+    animation-timeline: --chat-23;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="24"] {
+    animation-timeline: --chat-24;
+  }
+
+  @keyframes chat-scroll-indicator-activate {
+    0%,
+    100% {
+      width: var(--chat-scroll-indicator-size);
+      background-color: color-mix(in oklch, var(--color-on-surface) 28%, transparent);
+      opacity: 0.45;
+    }
+
+    35%,
+    65% {
+      width: var(--chat-scroll-indicator-active-size);
+      background-color: var(--color-on-surface);
+      opacity: 1;
+    }
+  }
 
-@layer components {
   .chat {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
@@ -66,6 +427,10 @@ export const css = `/**
     --chat-bubble-fg: var(--color-on-surface);
 
     position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
     max-width: min(80ch, 100%);
     padding: 0.625rem 0.875rem;
     border-radius: 1rem;
@@ -78,6 +443,10 @@ export const css = `/**
     word-break: break-word;
   }
 
+  .chat-bubble-content {
+    min-width: 0;
+  }
+
   .chat-start .chat-bubble::before,
   .chat-end .chat-bubble::before,
   .chat-start .chat-bubble::after,
@@ -260,6 +629,14 @@ export const css = `/**
     overflow: hidden;
   }
 
+  .chat-bubble > .chat-reasoning,
+  .chat-bubble > .chat-tool,
+  .chat-reasoning .chat-tool,
+  .chat-reasoning-body > .chat-tool {
+    width: 100%;
+    max-width: none;
+  }
+
   .chat-reasoning > summary,
   .chat-tool > summary {
     cursor: pointer;
@@ -272,12 +649,28 @@ export const css = `/**
     font-weight: 500;
   }
 
-  .chat-reasoning > :not(summary) {
+  .chat-reasoning-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0 0.75rem 0.75rem;
+    color: var(--color-on-surface-variant);
+  }
+
+  .chat-reasoning-body > :not(.chat-tool) {
+    font-style: italic;
+  }
+
+  .chat-reasoning > div:not(.chat-tool):not(.chat-reasoning-body) {
     padding: 0 0.75rem 0.75rem;
     color: var(--color-on-surface-variant);
     font-style: italic;
   }
 
+  .chat-reasoning > .chat-tool {
+    margin: 0 0.75rem 0.75rem;
+  }
+
   .chat-tool-header {
     display: flex;
     align-items: center;
@@ -372,7 +765,8 @@ export const css = `/**
     animation-delay: 300ms;
   }
 
-  .chat-bubble-streaming::after {
+  .chat-bubble-streaming::after,
+  .chat-bubble-content.chat-bubble-streaming::after {
     content: "";
     display: inline-block;
     width: 1px;
@@ -383,6 +777,10 @@ export const css = `/**
     animation: chat-stream-caret 1s step-end infinite;
   }
 
+  .chat-bubble.chat-bubble-streaming:has(.chat-reasoning, .chat-tool, .chat-bubble-content)::after {
+    content: none;
+  }
+
   .chat-reasoning > summary:focus-visible,
   .chat-tool > summary:focus-visible {
     outline: none;
@@ -422,15 +820,26 @@ export const css = `/**
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .chat-scroll {
+      scroll-behavior: auto;
+    }
+
+    .chat-scroll-indicator {
+      animation: none;
+      transition: none;
+    }
+
     .chat-typing::before,
     .chat-typing::after,
     .chat-typing span,
     .chat-bubble-streaming::after,
+    .chat-bubble-content.chat-bubble-streaming::after,
     .chat-tool-running .chat-tool-header::before {
       animation: none;
     }
 
-    .chat-bubble-streaming::after {
+    .chat-bubble-streaming::after,
+    .chat-bubble-content.chat-bubble-streaming::after {
       opacity: 1;
     }
   }