@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/styles/recipes/chat-composer.css

@@ -6,7 +6,7 @@
     --cui-chat-composer-shell-backdrop-filter: none;
     --cui-chat-composer-shell-border-color: var(--border);
     --cui-chat-composer-shell-border-width: var(--control-rim-width);
-    --cui-chat-composer-shell-radius: var(--radius-field);
+    --cui-chat-composer-shell-radius: var(--radius-composer);
     --cui-chat-composer-shell-shadow: var(--shadow-md);
     --cui-chat-composer-input-foreground: var(--card-foreground);
     --cui-chat-composer-input-placeholder-foreground: var(--muted-foreground);
@@ -15,8 +15,8 @@
     --cui-chat-composer-mention-border-color: transparent;
     --cui-chat-composer-mention-border-width: 0px;
     --cui-chat-composer-mention-background: oklch(from var(--primary) l c h / 0.1);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+    padding-inline: var(--composer-padding);
+    padding-block: calc(var(--spacing) * 1) var(--composer-padding);
     background: var(--cui-chat-composer-root-background);
   }
 
@@ -32,13 +32,13 @@
     transition-timing-function: var(--ease-emphasized);
   }
 
-  :where(
-    [data-control-family="chat-composer"][data-slot="shell"][data-keyboard-navigation]:has(
-      :is(textarea, [contenteditable="true"]):focus-visible
-    )
-  ) {
+  :where([data-control-family="chat-composer"][data-slot="shell"]:has(:is(textarea, [contenteditable="true"]):focus-visible)) {
     outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
-    outline-offset: var(--focus-ring-offset);
+    outline-offset: calc(var(--focus-ring-width) * -1);
+  }
+
+  :where([data-control-family="chat-composer"][data-slot="shell"] [data-control-family="dropzone"][data-slot="overlay"]) {
+    --cui-dropzone-surface-radius: max(0px, calc(var(--cui-chat-composer-shell-radius) - var(--cui-chat-composer-shell-border-width)));
   }
 
   :where([data-control-family="chat-composer"][data-slot="accent"]) {
@@ -48,7 +48,7 @@
 
   :where([data-control-family="chat-composer"]:is([data-slot="textarea"], [data-slot="fallback"], [data-slot="placeholder"])),
   :where([data-control-family="chat-composer"][data-slot="editor"] .ProseMirror) {
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     line-height: calc(var(--spacing) * 6);
   }
 
@@ -57,6 +57,7 @@
     border: 0;
     background: transparent;
     color: var(--cui-chat-composer-input-foreground);
+    --focus-ring-width: 0px;
     outline: none;
   }
 
@@ -67,20 +68,24 @@
   }
 
   :where([data-control-family="chat-composer"][data-slot="textarea"]:disabled) {
-    opacity: 0.6;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="chat-composer"][data-slot="editor"] [aria-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="chat-composer"][data-slot="toolbar"]) {
-    min-block-size: calc(var(--spacing) * 10);
+    --nest-radius: max(
+      0px,
+      calc(var(--cui-chat-composer-shell-radius) - var(--cui-chat-composer-shell-border-width) - var(--composer-padding))
+    );
+    min-block-size: calc(var(--control-h-xs) + var(--composer-padding) + var(--spacing) * 0.5);
     gap: calc(var(--spacing) * 2);
     flex-wrap: wrap;
-    padding-inline: calc(var(--spacing) * 2.5);
-    padding-block-end: calc(var(--spacing) * 2);
+    padding-inline: var(--composer-padding);
+    padding-block-end: var(--composer-padding);
   }
 
   :where([data-control-family="chat-composer"][data-slot="tools"]) {
@@ -121,7 +126,7 @@
   @media (pointer: coarse) {
     :where([data-control-family="chat-composer"]:is([data-slot="textarea"], [data-slot="fallback"], [data-slot="placeholder"])),
     :where([data-control-family="chat-composer"][data-slot="editor"] .ProseMirror) {
-      font-size: max(16px, var(--text-sm));
+      font-size: max(var(--text-input-min), var(--text-body));
     }
   }
 }

package/dist/styles/recipes/chat-layout.css

@@ -6,27 +6,83 @@
     --cui-chat-layout-border-width: var(--control-rim-width);
     --cui-chat-layout-shadow: var(--shadow-md);
     --cui-chat-layout-scroll-button-gap: calc(var(--spacing) * 3);
-    background: var(--cui-chat-layout-background);
+    --cui-chat-layout-turn-gap: calc(var(--spacing) * 2);
+    container: chat-layout / inline-size;
+  }
+
+  :where(
+    [data-control-family="chat-layout"][data-slot="root"][data-chrome="panel"]:has([data-control-family="chat-layout"][data-slot="dock"])
+  ) {
+    --cui-chat-layout-radius: max(
+      var(--radius-scene),
+      calc(var(--radius-composer) + var(--composer-padding) + var(--cui-chat-layout-border-width))
+    );
   }
 
   :where([data-control-family="chat-layout"][data-slot="root"][data-chrome="panel"]) {
+    background: var(--cui-chat-layout-background);
     border: var(--cui-chat-layout-border-width) solid var(--cui-chat-layout-border-color);
     border-radius: var(--cui-chat-layout-radius);
     box-shadow: var(--cui-chat-layout-shadow);
   }
 
+  :where([data-popup-part="surface"] [data-control-family="chat-layout"][data-slot="root"][data-chrome="embedded"]) {
+    --cui-chat-layout-background: var(--cui-popup-background);
+    --cui-chat-layout-radius: var(--cui-popup-radius);
+    border-radius: var(--cui-chat-layout-radius);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="header"]) {
+    padding-block: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 4);
+    border-block-end: var(--cui-chat-layout-border-width) solid var(--cui-chat-layout-border-color);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="header"] > :not([data-control-family="chat-layout"])) {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="title"]) {
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-tight);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="description"]) {
+    margin-block-start: calc(var(--spacing) * 0.5);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="actions"]) {
+    gap: calc(var(--spacing) * 1);
+    margin-inline-start: calc(var(--spacing) * 3);
+  }
+
   :where([data-control-family="chat-layout"][data-slot="thread-content"]) {
     gap: calc(var(--spacing) * 8);
     padding-block: calc(var(--spacing) * 6);
     padding-inline: calc(var(--spacing) * 4);
   }
 
-  @media (width >= 40rem) {
+  @container chat-layout (width >= 40rem) {
     :where([data-control-family="chat-layout"][data-slot="thread-content"]) {
       padding-inline: calc(var(--spacing) * 8);
     }
   }
 
+  :where([data-control-family="chat-layout"][data-slot="thread-content"]:has(> [data-control-family="chat-message"][data-layout="flat"])) {
+    gap: 0;
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="turn"]) {
+    gap: var(--cui-chat-layout-turn-gap);
+  }
+
   :where([data-control-family="chat-layout"][data-slot="dock"])::before {
     content: "";
     position: absolute;
@@ -89,3 +145,9 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-chat-layout-turn-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/chat-message-social.css

@@ -0,0 +1,123 @@
+@layer components {
+  :where([data-control-family="chat-message"][data-slot="root"][data-kind="typing"]) {
+    gap: calc(var(--spacing) * 2);
+    min-block-size: calc(var(--spacing) * 5);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="row"][data-continuation]) {
+    padding-block-start: calc(var(--spacing) * 0.5);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="avatar"][data-continuation]) {
+    margin-block-start: 0;
+    block-size: calc(var(--spacing) * 5);
+    border-color: transparent;
+    background: transparent;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="avatar"] [data-slot="time"]) {
+    font-size: 0.625rem;
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="row"]:hover > [data-slot="avatar"] [data-slot="time"]) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="row"]:focus-within > [data-slot="avatar"] [data-slot="time"]) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="footer"]) {
+    margin-block-start: calc(var(--spacing) * 1);
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 1);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="footer"][data-state="error"]) {
+    color: var(--destructive);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reactions"]) {
+    margin-block-start: calc(var(--spacing) * 1.5);
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where(
+    [data-control-family="chat-message"]:is(
+      [data-slot="header"],
+      [data-slot="footer"],
+      [data-slot="reactions"]
+    )[data-layout="bubble"][data-role="user"]
+  ) {
+    justify-content: flex-end;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="footer"][data-layout="flat"]) {
+    padding-inline: 0;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reaction"]) {
+    gap: calc(var(--spacing) * 1);
+    block-size: calc(var(--spacing) * 6);
+    padding-inline: calc(var(--spacing) * 2);
+    border: var(--cui-chat-message-reaction-border-width) solid var(--cui-chat-message-reaction-border-color);
+    border-radius: var(--cui-chat-message-reaction-radius);
+    background: var(--cui-chat-message-reaction-background);
+    font-size: var(--text-caption);
+    font-weight: 500;
+    color: var(--muted-foreground);
+    transition-property: background-color, border-color, color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reaction"][data-pressed]) {
+    border-color: var(--cui-chat-message-reaction-pressed-border-color);
+    background: var(--cui-chat-message-reaction-pressed-background);
+    color: var(--foreground);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="chat-message"][data-slot="reaction"][aria-pressed]:hover) {
+      color: var(--foreground);
+    }
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reaction-emoji"]) {
+    font-size: var(--text-body);
+    line-height: 1;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reply-summary"]) {
+    margin-block-start: calc(var(--spacing) * 1);
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 1);
+    border-radius: var(--radius-md);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+    transition-property: background-color, color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="chat-message"][data-slot="reply-summary"]:hover) {
+      background-color: var(--cui-chat-message-row-hover-background);
+      color: var(--foreground);
+    }
+  }
+
+  :where([data-control-family="chat-message"][data-slot="replies"]) {
+    margin-block-start: calc(var(--spacing) * 2);
+    padding-inline-start: calc(var(--spacing) * 3);
+    border-inline-start: 2px solid var(--border);
+  }
+}

package/dist/styles/recipes/chat-message.css

@@ -14,14 +14,26 @@
     --cui-chat-message-shadow: none;
     --cui-chat-message-pending-dot-color: var(--muted-foreground);
     --cui-chat-message-pending-dot-size: calc(var(--spacing) * 1.5);
+    --cui-chat-message-row-hover-background: oklch(from var(--muted) l c h / 0.6);
+    --cui-chat-message-reaction-radius: 9999px;
+    --cui-chat-message-reaction-background: oklch(from var(--muted) l c h / 0.7);
+    --cui-chat-message-reaction-border-color: transparent;
+    --cui-chat-message-reaction-border-width: var(--control-rim-width);
+    --cui-chat-message-reaction-pressed-background: oklch(from var(--primary) l c h / 0.14);
+    --cui-chat-message-reaction-pressed-border-color: oklch(from var(--primary) l c h / 0.55);
   }
 
-  :where([data-control-family="chat-message"][data-slot="pending"]) {
+  :where([data-control-family="chat-message"][data-slot="pending"]),
+  :where([data-control-family="chat-message"][data-slot="typing-dots"]) {
     gap: var(--cui-chat-message-pending-dot-size);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="pending"]) {
     padding-block: calc(var(--spacing) * 2);
   }
 
-  :where([data-control-family="chat-message"][data-slot="pending"] > span) {
+  :where([data-control-family="chat-message"][data-slot="pending"] > span),
+  :where([data-control-family="chat-message"][data-slot="typing-dots"] > span) {
     inline-size: var(--cui-chat-message-pending-dot-size);
     block-size: var(--cui-chat-message-pending-dot-size);
     border-radius: 9999px;
@@ -29,28 +41,16 @@
     animation: chat-message-pending calc(var(--duration-slow) * 3) var(--ease-standard) infinite;
   }
 
-  :where([data-control-family="chat-message"][data-slot="pending"] > span:nth-child(2)) {
+  :where([data-control-family="chat-message"][data-slot="pending"] > span:nth-child(2)),
+  :where([data-control-family="chat-message"][data-slot="typing-dots"] > span:nth-child(2)) {
     animation-delay: calc(var(--duration-slow) / 2);
   }
 
-  :where([data-control-family="chat-message"][data-slot="pending"] > span:nth-child(3)) {
+  :where([data-control-family="chat-message"][data-slot="pending"] > span:nth-child(3)),
+  :where([data-control-family="chat-message"][data-slot="typing-dots"] > span:nth-child(3)) {
     animation-delay: var(--duration-slow);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    :where([data-control-family="chat-message"][data-slot="pending"] > span) {
-      animation: none;
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  :where([data-motion="reduced"] [data-control-family="chat-message"][data-slot="pending"] > span) {
-    animation: none;
-    opacity: 1;
-    scale: 1;
-  }
-
   @keyframes chat-message-pending {
     0%,
     60%,
@@ -69,17 +69,33 @@
     padding-block: calc(var(--spacing) * 2);
   }
 
-  :where([data-control-family="chat-message"][data-slot="root"][data-density="compact"] [data-slot="row"]) {
+  :where([data-control-family="chat-message"][data-slot="row"][data-density="compact"]) {
     padding-block: calc(var(--spacing) * 1);
   }
 
-  :where([data-control-family="chat-message"][data-slot="root"][data-role="user"] [data-slot="body"]) {
-    max-inline-size: 76%;
+  :where([data-control-family="chat-message"][data-slot="row"][data-layout="flat"]) {
+    gap: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 2);
+    border-radius: var(--radius-md);
+    transition-property: background-color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
   }
 
-  :where([data-control-family="chat-message"][data-slot="root"]:not([data-role="user"]) [data-slot="body"]) {
-    max-inline-size: 100%;
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="chat-message"][data-slot="row"][data-layout="flat"]:hover:not(:has([data-slot="row"]:hover))) {
+      background-color: var(--cui-chat-message-row-hover-background);
+    }
+  }
+
+  :where([data-control-family="chat-message"][data-slot="body"]) {
     flex: 1;
+    max-inline-size: 100%;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="body"][data-layout="bubble"]:is([data-role="user"], [data-role="participant"])) {
+    flex: 0 1 auto;
+    max-inline-size: 76%;
   }
 
   :where([data-control-family="chat-message"][data-slot="avatar"]) {
@@ -93,6 +109,16 @@
     color: var(--muted-foreground);
   }
 
+  :where([data-control-family="chat-message"][data-slot="avatar"][data-layout="flat"]) {
+    inline-size: calc(var(--spacing) * 8);
+    block-size: calc(var(--spacing) * 8);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="avatar"]:has(> [data-control-family="avatar"])) {
+    border-color: transparent;
+    background: transparent;
+  }
+
   :where([data-control-family="chat-message"][data-slot="content"]) {
     border: var(--cui-chat-message-border-width) solid var(--cui-chat-message-border-color);
     border-radius: var(--cui-chat-message-radius);
@@ -101,12 +127,12 @@
     background-image: var(--cui-chat-message-background-image);
     box-shadow: var(--cui-chat-message-shadow);
     color: var(--cui-chat-message-foreground);
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
     font-size: var(--text-body);
     line-height: calc(var(--spacing) * 5);
   }
 
-  :where([data-control-family="chat-message"][data-slot="root"][data-role="user"]) {
+  :where([data-control-family="chat-message"][data-slot="root"][data-layout="bubble"][data-role="user"]) {
     --cui-chat-message-radius: var(--radius-field);
     --cui-chat-message-corner-radius: var(--radius-lg);
     --cui-chat-message-background: var(--primary);
@@ -114,9 +140,39 @@
     --cui-chat-message-shadow: var(--shadow-sm);
   }
 
-  :where([data-control-family="chat-message"][data-slot="content"][data-role="assistant"][data-streaming]) {
+  :where([data-control-family="chat-message"][data-slot="root"][data-layout="bubble"][data-role="participant"]) {
+    --cui-chat-message-radius: var(--radius-field);
+    --cui-chat-message-corner-radius: var(--radius-field);
+    --cui-chat-message-background: var(--muted);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="header"][data-role="assistant"][data-state="streaming"]) {
     @apply shimmer-text;
   }
+
+  :where([data-control-family="chat-message"][data-slot="header"]) {
+    margin-block-end: calc(var(--spacing) * 1);
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 1);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="header"][data-layout="flat"]) {
+    margin-block-end: calc(var(--spacing) * 0.5);
+    padding-inline: 0;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="author"]) {
+    font-weight: 500;
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="author"][data-layout="flat"]) {
+    font-size: var(--text-body);
+  }
+
   :where([data-control-family="chat-message"][data-slot="actions"]) {
     margin-block-start: calc(var(--spacing) * 1);
     gap: calc(var(--spacing) * 1);
@@ -126,27 +182,49 @@
     transition-timing-function: var(--ease-standard);
   }
 
+  :where([data-control-family="chat-message"][data-slot="actions"][data-layout="flat"]) {
+    position: relative;
+    isolation: isolate;
+    align-self: flex-start;
+    margin-block-start: 0;
+    padding: calc(var(--spacing) * 0.5);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     :where([data-control-family="chat-message"][data-slot="actions"]) {
       opacity: 0;
+      pointer-events: none;
+    }
+
+    :where([data-control-family="chat-message"][data-slot="actions"][data-layout="flat"]) {
+      position: absolute;
+      z-index: 1;
+      inset-block-start: calc(var(--spacing) * -3);
+      inset-inline-end: calc(var(--spacing) * 2);
     }
 
-    :where([data-control-family="chat-message"][data-slot="row"]:hover [data-control-family="chat-message"][data-slot="actions"]) {
+    :where([data-control-family="chat-message"][data-slot="row"]:hover:not(:has([data-slot="row"]:hover)) > [data-slot="actions"]),
+    :where(
+        [data-control-family="chat-message"][data-slot="row"]:hover:not(:has([data-slot="row"]:hover))
+          > [data-slot="body"]
+          > [data-slot="actions"]
+      ) {
       opacity: 1;
+      pointer-events: auto;
     }
   }
 
-  :where([data-control-family="chat-message"][data-slot="root"]:focus-within [data-slot="actions"]) {
+  :where(
+    [data-control-family="chat-message"][data-slot="row"]:focus-within:not(:has([data-slot="row"]:focus-within)) > [data-slot="actions"]
+  ),
+  :where(
+    [data-control-family="chat-message"][data-slot="row"]:focus-within:not(:has([data-slot="row"]:focus-within))
+      > [data-slot="body"]
+      > [data-slot="actions"]
+  ),
+  :where([data-control-family="chat-message"][data-slot="actions"]:has([data-popup-open])) {
     opacity: 1;
-  }
-
-  :where([data-control-family="chat-message"][data-slot="header"]) {
-    margin-block-end: calc(var(--spacing) * 1);
-    gap: calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 1);
-    font-size: var(--text-caption);
-    color: var(--muted-foreground);
-    font-variant-numeric: tabular-nums;
+    pointer-events: auto;
   }
 }
 
@@ -231,3 +309,45 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-chat-message-row-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-chat-message-reaction-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-chat-message-reaction-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-chat-message-reaction-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-chat-message-reaction-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-chat-message-reaction-pressed-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-chat-message-reaction-pressed-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}