@tulipfarm/sprout 0.1.0 → 0.2.0

package/dist/internal/brand-glyphs.js

@@ -34,6 +34,30 @@ export const brandGlyphs = {
             { "d": "M11.065 11.199l7.257-7.2c.137-.136.06-.41-.116-.41H14.3a.164.164 0 00-.117.051l-7.82 7.756c-.122.12-.302.013-.302-.179V3.82c0-.127-.083-.23-.185-.23H3.186c-.103 0-.186.103-.186.23V19.77c0 .128.083.23.186.23h2.69c.103 0 .186-.102.186-.23v-3.25c0-.069.025-.135.069-.178l2.424-2.406a.158.158 0 01.205-.023l6.484 4.772a7.677 7.677 0 003.453 1.283c.108.012.2-.095.2-.23v-3.06c0-.117-.07-.212-.164-.227a5.028 5.028 0 01-2.027-.807l-5.613-4.064c-.117-.078-.132-.279-.028-.381z", "evenOdd": true },
         ],
     },
+    "gemini": {
+        viewBox: "0 0 24 24",
+        paths: [
+            { "d": "M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z", "evenOdd": true },
+        ],
+    },
+    "mistral": {
+        viewBox: "0 0 24 24",
+        paths: [
+            { "d": "M3.428 3.4h3.429v3.428h3.429v3.429h-.002 3.431V6.828h3.427V3.4h3.43v13.714H24v3.429H13.714v-3.428h-3.428v-3.429h-3.43v3.428h3.43v3.429H0v-3.429h3.428V3.4zm10.286 13.715h3.428v-3.429h-3.427v3.429z", "evenOdd": true },
+        ],
+    },
+    "meta": {
+        viewBox: "0 0 24 24",
+        paths: [
+            { "d": "M6.897 4c1.915 0 3.516.932 5.43 3.376l.282-.373c.19-.246.383-.484.58-.71l.313-.35C14.588 4.788 15.792 4 17.225 4c1.273 0 2.469.557 3.491 1.516l.218.213c1.73 1.765 2.917 4.71 3.053 8.026l.011.392.002.25c0 1.501-.28 2.759-.818 3.7l-.14.23-.108.153c-.301.42-.664.758-1.086 1.009l-.265.142-.087.04a3.493 3.493 0 01-.302.118 4.117 4.117 0 01-1.33.208c-.524 0-.996-.067-1.438-.215-.614-.204-1.163-.56-1.726-1.116l-.227-.235c-.753-.812-1.534-1.976-2.493-3.586l-1.43-2.41-.544-.895-1.766 3.13-.343.592C7.597 19.156 6.227 20 4.356 20c-1.21 0-2.205-.42-2.936-1.182l-.168-.184c-.484-.573-.837-1.311-1.043-2.189l-.067-.32a8.69 8.69 0 01-.136-1.288L0 14.468c.002-.745.06-1.49.174-2.23l.1-.573c.298-1.53.828-2.958 1.536-4.157l.209-.34c1.177-1.83 2.789-3.053 4.615-3.16L6.897 4zm-.033 2.615l-.201.01c-.83.083-1.606.673-2.252 1.577l-.138.199-.01.018c-.67 1.017-1.185 2.378-1.456 3.845l-.004.022a12.591 12.591 0 00-.207 2.254l.002.188c.004.18.017.36.04.54l.043.291c.092.503.257.908.486 1.208l.117.137c.303.323.698.492 1.17.492 1.1 0 1.796-.676 3.696-3.641l2.175-3.4.454-.701-.139-.198C9.11 7.3 8.084 6.616 6.864 6.616zm10.196-.552l-.176.007c-.635.048-1.223.359-1.82.933l-.196.198c-.439.462-.887 1.064-1.367 1.807l.266.398c.18.274.362.56.55.858l.293.475 1.396 2.335.695 1.114c.583.926 1.03 1.6 1.408 2.082l.213.262c.282.326.529.54.777.673l.102.05c.227.1.457.138.718.138.176.002.35-.023.518-.073.338-.104.61-.32.813-.637l.095-.163.077-.162c.194-.459.29-1.06.29-1.785l-.006-.449c-.08-2.871-.938-5.372-2.2-6.798l-.176-.189c-.67-.683-1.444-1.074-2.27-1.074z", "evenOdd": true },
+        ],
+    },
+    "qwen": {
+        viewBox: "0 0 24 24",
+        paths: [
+            { "d": "M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z", "evenOdd": true },
+        ],
+    },
     "google": {
         viewBox: "0 0 24 24",
         paths: [

package/dist/internal/code-tokens.d.ts

@@ -0,0 +1,4 @@
+import type { ThemedToken } from "shiki/core";
+import type { CodeLanguage } from "./languages.js";
+export declare function useCodeTokens(code: string, language: CodeLanguage | null): ThemedToken[][] | null;
+export declare function tokenClass(token: ThemedToken): string | undefined;

package/dist/internal/code-tokens.js

@@ -0,0 +1,34 @@
+import { useEffect, useMemo, useState } from "react";
+import { codeTokens, embeddedLanguages, isLanguageReady, loadCodeLanguage, maxHighlightedLength, } from "./syntax.js";
+export function useCodeTokens(code, language) {
+    const [loaded, setLoaded] = useState(0);
+    const highlightable = language !== null && code.length <= maxHighlightedLength;
+    const needed = useMemo(() => highlightable ? [language, ...embeddedLanguages(code, language)] : [], [code, language, highlightable]);
+    const missing = needed.filter((name) => !isLanguageReady(name));
+    const key = missing.join(" ");
+    useEffect(() => {
+        if (!key)
+            return;
+        let live = true;
+        void Promise.all(key.split(" ").map((name) => loadCodeLanguage(name))).then(() => live && setLoaded((value) => value + 1), () => undefined);
+        return () => {
+            live = false;
+        };
+    }, [key]);
+    return useMemo(() => (highlightable ? codeTokens(code, language) : null), 
+    // `loaded` and `key` re-run this once the grammars arrive.
+    [code, language, highlightable, loaded, key]);
+}
+const fontStyleClasses = [
+    [1, "sprout-syntax-italic"],
+    [2, "sprout-syntax-bold"],
+    [4, "sprout-syntax-underline"],
+];
+export function tokenClass(token) {
+    const role = /--sprout-syntax-(?:token-)?([a-z-]+)/.exec(token.color ?? "")?.[1];
+    const classes = role && role !== "foreground" ? [`sprout-syntax-${role}`] : [];
+    for (const [flag, name] of fontStyleClasses)
+        if ((token.fontStyle ?? 0) & flag)
+            classes.push(name);
+    return classes.length ? classes.join(" ") : undefined;
+}

package/dist/styles/accordion.css

@@ -40,8 +40,8 @@
     text-decoration-line: underline;
   }
   .sprout-accordion-trigger:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-accordion-trigger[data-disabled] {
     cursor: not-allowed;

package/dist/styles/alert-dialog.css

@@ -98,8 +98,8 @@
     text-underline-offset: 3px;
   }
   .sprout-alert-dialog-description a:not([data-slot]):focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 
   .sprout-alert-dialog-footer {

package/dist/styles/alert.css

@@ -88,8 +88,8 @@
   }
   :is(.sprout-alert-title, .sprout-alert-description)
     a:not([data-slot]):focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 
   .sprout-alert-action {

package/dist/styles/attachment.css

@@ -52,8 +52,8 @@
     );
   }
   .sprout-attachment:has(> .sprout-attachment-trigger:focus-visible) {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-attachment[data-state="idle"] {
     border-style: dashed;
@@ -320,18 +320,6 @@
     );
   }
   .sprout-attachment-carousel-arrow {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    border: 1px solid var(--sprout-line);
-    border-radius: 8px;
-    background: var(--sprout-surface);
-    box-shadow: var(--sprout-shadow-control);
-    color: var(--sprout-muted);
-    cursor: pointer;
     opacity: 0;
     pointer-events: auto;
   }
@@ -346,14 +334,6 @@
       opacity: 1;
     }
   }
-  .sprout-attachment-carousel-arrow:hover {
-    background: var(--sprout-hover);
-    color: var(--sprout-text);
-  }
-  .sprout-attachment-carousel-arrow:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 1px;
-  }
 
   /* File type icon */
   .sprout-file-type-icon {
@@ -486,8 +466,8 @@
   }
   .sprout-file-attachment-open:focus-visible,
   .sprout-file-attachment-preview:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-file-attachment:has(
       button.sprout-file-attachment-open:not(:disabled)

package/dist/styles/badge.css

@@ -36,8 +36,8 @@
     pointer-events: none;
   }
   .sprout-badge:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-badge[aria-invalid="true"] {
     border-color: var(--sprout-danger);

package/dist/styles/brand-icon.css

@@ -50,8 +50,8 @@
     background: var(--sprout-hover);
   }
   .sprout-brand-tile[data-size]:is(button, a):focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-brand-tile[data-size]:is(button, a):disabled {
     cursor: not-allowed;

package/dist/styles/breadcrumb.css

@@ -54,8 +54,8 @@
     color: var(--sprout-text);
   }
   .sprout-breadcrumb-link:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 
   .sprout-breadcrumb-page {

package/dist/styles/button.css

@@ -33,8 +33,8 @@
     height: var(--sprout-button-icon);
   }
   .sprout-button:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-button:disabled,
   .sprout-button[data-disabled],

package/dist/styles/calendar.css

@@ -221,7 +221,7 @@
   }
   .sprout-calendar-day-button.sprout-button:focus-visible {
     z-index: 2;
-    outline-offset: 1px;
+    outline-offset: 0;
   }
   .sprout-calendar-day-button > span {
     font-size: 0.625rem;
@@ -282,11 +282,11 @@
     .sprout-calendar-day-button[data-range-start="true"],
     .sprout-calendar-day-button[data-range-end="true"] {
       outline: 2px solid Highlight;
-      outline-offset: -2px;
+      outline-offset: -1px;
     }
     .sprout-calendar-day-button[data-range-middle="true"] {
       outline: 1px dashed Highlight;
-      outline-offset: -2px;
+      outline-offset: -1px;
     }
     .sprout-calendar-today .sprout-calendar-day-button {
       text-decoration: underline;

package/dist/styles/canvas.css

@@ -152,16 +152,13 @@
   }
   .sprout-canvas-tab:focus-visible,
   .sprout-canvas-tab-close:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
   }
   .sprout-canvas-tab-icon {
     display: inline-flex;
     flex-shrink: 0;
   }
-  .sprout-canvas-tab-spinner {
-    flex-shrink: 0;
-  }
   .sprout-canvas-tab-title {
     min-width: 0;
     overflow: hidden;
@@ -178,8 +175,8 @@
     outline: none;
   }
   .sprout-canvas-body:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
   }
 
   .sprout-canvas-toggle-count {
@@ -295,11 +292,6 @@
     }
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .sprout-canvas-tab-spinner {
-      animation: sprout-canvas-spin 1s linear infinite;
-    }
-  }
   @media (prefers-reduced-motion: reduce) {
     .sprout-canvas-tab,
     .sprout-canvas-tab-close,
@@ -319,9 +311,3 @@
     }
   }
 }
-
-@keyframes sprout-canvas-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/dist/styles/carousel.css

@@ -37,8 +37,8 @@
     user-select: none;
   }
   .sprout-carousel-content:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
   }
 
   .sprout-carousel-track {

package/dist/styles/chart.css

@@ -87,8 +87,8 @@
     border-radius: var(--sprout-radius-control);
   }
   .sprout-chart .recharts-surface:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 
   .sprout-chart-tooltip {

package/dist/styles/chat-confirmation.css

@@ -23,7 +23,7 @@
     outline: none;
   }
   .sprout-chat-confirmation-result:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 }

package/dist/styles/chat-input.css

@@ -0,0 +1,240 @@
+@layer components {
+  .sprout-chat-input {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+    min-width: 0;
+    font-family: var(--sprout-font);
+  }
+  .sprout-chat-input-form {
+    position: relative;
+    min-width: 0;
+  }
+
+  .sprout-chat-input-attachments.sprout-input-group-addon {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    gap: 6px;
+    padding: 4px 4px 0;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+    cursor: default;
+  }
+  .sprout-chat-input-attachments::-webkit-scrollbar {
+    display: none;
+  }
+  .sprout-chat-input-attachments > * {
+    flex-shrink: 0;
+  }
+
+  .sprout-chat-input-editor .sprout-rich-text-editor-body {
+    min-height: 4.5rem;
+  }
+  .sprout-chat-input-editor .sprout-rich-text-editor-content {
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+  }
+  .sprout-chat-input-reference {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 6px;
+    border-radius: var(--sprout-radius-control);
+    background: var(--sprout-hover);
+    color: var(--sprout-text);
+    font-size: 0.9375em;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  .sprout-chat-input-reference[data-chat-reference="agent"] {
+    background: var(--sprout-info-subtle);
+    color: var(--sprout-info);
+  }
+  .sprout-chat-input-reference.ProseMirror-selectednode {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
+  }
+  .sprout-chat-input-editor .sprout-rich-text-editor-content a {
+    color: var(--sprout-info);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .sprout-chat-input-bar {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+  }
+  .sprout-chat-input-bar-start,
+  .sprout-chat-input-bar-end {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+  }
+  .sprout-chat-input-bar-end {
+    flex-shrink: 0;
+    gap: 6px;
+  }
+  .sprout-chat-input-divider {
+    align-self: center;
+    width: 1px;
+    height: 20px;
+    margin-inline: 6px;
+    background: var(--sprout-line);
+  }
+
+  .sprout-chat-input-bar .sprout-input-group-button[data-variant="ghost"] {
+    color: var(--sprout-muted);
+  }
+  .sprout-chat-input-bar
+    .sprout-input-group-button[data-variant="ghost"]:hover {
+    color: var(--sprout-text);
+  }
+  .sprout-chat-input-picker-label {
+    min-width: 0;
+    max-width: 10rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sprout-chat-input-bar .sprout-chat-input-mode {
+    color: var(--sprout-text);
+  }
+
+  .sprout-chat-input[data-mode-color]
+    .sprout-input-group.sprout-chat-input-box {
+    border-color: var(--sprout-chat-input-mode);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--sprout-chat-input-mode) 14%, transparent);
+  }
+  .sprout-chat-input[data-mode-color]
+    .sprout-chat-input-bar
+    .sprout-chat-input-mode {
+    background: color-mix(
+      in oklab,
+      var(--sprout-chat-input-mode) 14%,
+      transparent
+    );
+    color: var(--sprout-chat-input-mode);
+  }
+  .sprout-chat-input[data-mode-color]
+    .sprout-chat-input-bar
+    .sprout-chat-input-mode:hover {
+    background: color-mix(
+      in oklab,
+      var(--sprout-chat-input-mode) 22%,
+      transparent
+    );
+  }
+  .sprout-chat-input-mode-option > :is(svg, .sprout-brand-icon) {
+    color: var(--sprout-chat-input-mode);
+  }
+
+  .sprout-dropdown-menu-content.sprout-chat-input-menu {
+    width: 18rem;
+  }
+  .sprout-chat-input-menu
+    :is(.sprout-dropdown-menu-item, .sprout-command-item):has(
+      .sprout-chat-input-option-text
+    ) {
+    align-items: flex-start;
+    padding-block: 6px;
+  }
+  .sprout-chat-input-menu
+    :is(.sprout-dropdown-menu-item, .sprout-command-item):has(
+      .sprout-chat-input-option-text
+    )
+    > :is(svg, .sprout-brand-icon) {
+    margin-top: 2px;
+  }
+  .sprout-chat-input-option-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+  .sprout-chat-input-option-description {
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+  }
+
+  .sprout-chat-input-panel {
+    position: absolute;
+    inset-inline: 0;
+    bottom: calc(100% + 8px);
+    z-index: 20;
+  }
+  .sprout-chat-input-panel[data-side="bottom"] {
+    top: calc(100% + 8px);
+    bottom: auto;
+  }
+
+  .sprout-chat-input-prompts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .sprout-chat-input-stop {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    background: currentColor;
+  }
+
+  .sprout-button.sprout-chat-input-prompt {
+    font-weight: 400;
+  }
+
+  @media (pointer: coarse) {
+    .sprout-chat-input-picker-label {
+      max-width: 6rem;
+    }
+    /* Keep the 44px tap target but paint the fill at the desktop 28px size. */
+    .sprout-chat-input .sprout-button.sprout-chat-input-send {
+      border: 8px solid transparent;
+      border-radius: calc(var(--sprout-radius-control) + 8px);
+      background-clip: padding-box;
+    }
+  }
+  @media (max-width: 480px) {
+    .sprout-chat-input-bar .sprout-chat-input-picker-label {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-chat-input[data-status="streaming"]
+      .sprout-rich-text-editor-content
+      .is-editor-empty:first-child::before {
+      animation: sprout-chat-input-pulse 1.6s ease-in-out infinite alternate;
+    }
+  }
+  @keyframes sprout-chat-input-pulse {
+    to {
+      opacity: 0.4;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-input-group.sprout-chat-input-box {
+      transition:
+        border-color var(--sprout-motion-normal) var(--sprout-motion-ease),
+        box-shadow var(--sprout-motion-normal) var(--sprout-motion-ease);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-chat-input[data-status="streaming"]
+      .sprout-rich-text-editor-content
+      .is-editor-empty:first-child::before {
+      color: GrayText;
+    }
+  }
+}

package/dist/styles/chat-sources.css

@@ -94,8 +94,8 @@
     color: var(--sprout-primary-hover);
   }
   .sprout-chat-sources-link:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-chat-sources-retry {
     margin-top: 4px;

package/dist/styles/checkbox.css

@@ -17,7 +17,7 @@
     vertical-align: middle;
     cursor: pointer;
     outline: 0 solid transparent;
-    outline-offset: 2px;
+    outline-offset: 0;
     -webkit-tap-highlight-color: transparent;
   }
   /* A 40 x 32px hit area around the 16px box. */
@@ -36,8 +36,7 @@
     }
   }
   .sprout-checkbox:focus-visible {
-    border-color: var(--sprout-focus);
-    outline: 2px solid var(--sprout-focus);
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
   }
   .sprout-checkbox[data-checked],
   .sprout-checkbox[data-indeterminate] {

package/dist/styles/choice-list.css

@@ -48,7 +48,7 @@
     font-size: var(--sprout-text-sm);
     line-height: 1.25rem;
     outline: 0 solid transparent;
-    outline-offset: 2px;
+    outline-offset: 0;
   }
   .sprout-choice-list-option {
     align-items: center;
@@ -67,7 +67,7 @@
   }
   .sprout-choice-list-option:has(.sprout-choice-list-input:focus-visible),
   .sprout-choice-list-text:focus-within {
-    outline: 2px solid var(--sprout-focus);
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
   }
   .sprout-choice-list-option[data-checked],
   .sprout-choice-list-text[data-checked] {

package/dist/styles/code-block.css

@@ -80,8 +80,8 @@
     min-height: 0;
   }
   .sprout-code-block-viewport:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
   }
 
   .sprout-code-block-gutter,

package/dist/styles/collapsible.css

@@ -10,8 +10,8 @@
     -webkit-tap-highlight-color: transparent;
   }
   :where(.sprout-collapsible-trigger:not(.sprout-button)):focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   :where(.sprout-collapsible-trigger:not(.sprout-button))[data-disabled] {
     cursor: not-allowed;

package/dist/styles/combobox.css

@@ -182,15 +182,15 @@
     font-size: var(--sprout-text-sm);
     line-height: 20px;
     outline: 0 solid transparent;
-    outline-offset: 2px;
+    outline-offset: 0;
     cursor: text;
   }
   .sprout-combobox-chips:has([data-slot="combobox-chip"]) {
     padding-inline: 4px;
   }
   .sprout-combobox-chips:focus-within {
-    border-color: var(--sprout-focus);
-    outline: 2px solid var(--sprout-focus);
+    border-color: var(--sprout-border);
+    outline: var(--sprout-focus-width) solid transparent;
   }
   .sprout-combobox-chips:has([aria-invalid="true"]),
   .sprout-combobox-chips:has([data-invalid]) {
@@ -225,8 +225,8 @@
   }
   .sprout-combobox-chip:focus-visible,
   .sprout-combobox-chip[data-highlighted] {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 1px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-combobox-chip:has(:disabled),
   .sprout-combobox-chip[data-disabled] {
@@ -301,7 +301,7 @@
   @media (forced-colors: active) {
     .sprout-combobox-item[data-highlighted] {
       outline: 2px solid Highlight;
-      outline-offset: -2px;
+      outline-offset: -1px;
     }
     .sprout-combobox-chips:focus-within {
       outline-color: Highlight;