@tulipfarm/sprout 0.1.0 → 0.3.0

package/dist/styles/index.css

@@ -1,4 +1,5 @@
 @import "./accordion.css";
+@import "./agent-fanout.css";
 @import "./alert.css";
 @import "./alert-dialog.css";
 @import "./aspect-ratio.css";
@@ -15,6 +16,7 @@
 @import "./carousel.css";
 @import "./chart.css";
 @import "./chat-confirmation.css";
+@import "./chat-input.css";
 @import "./chat-plan.css";
 @import "./chat-sources.css";
 @import "./checkbox.css";
@@ -27,6 +29,7 @@
 @import "./dialog.css";
 @import "./dropdown-menu.css";
 @import "./field.css";
+@import "./file-explorer.css";
 @import "./file-viewer.css";
 @import "./form.css";
 @import "./glass-banner.css";
@@ -50,6 +53,7 @@
 @import "./pagination.css";
 @import "./plan-outline.css";
 @import "./popover.css";
+@import "./presence-cursor.css";
 @import "./progress.css";
 @import "./prompt-list.css";
 @import "./questionnaire.css";
@@ -60,6 +64,7 @@
 @import "./review-card.css";
 @import "./rich-text-editor.css";
 @import "./schema-diagram.css";
+@import "./sql-viewer.css";
 @import "./scroll-area.css";
 @import "./search-dialog.css";
 @import "./search-field.css";
@@ -169,6 +174,8 @@
     --sprout-primary-active: #0d0d0d;
     --sprout-on-primary: #fafafa;
     --sprout-focus: #525252;
+    --sprout-focus-ring: #3b82f6;
+    --sprout-focus-width: 1px;
     --sprout-danger: #b32d34;
     --sprout-danger-hover: #98252b;
     --sprout-on-danger: #fff8f8;
@@ -204,6 +211,7 @@
     --sprout-primary-active: #c4c4c4;
     --sprout-on-primary: #202020;
     --sprout-focus: #b5b5b5;
+    --sprout-focus-ring: #60a5fa;
     --sprout-danger: #ff9197;
     --sprout-danger-hover: #ffadb1;
     --sprout-on-danger: #3c1014;
@@ -240,6 +248,7 @@
       --sprout-primary-active: #c4c4c4;
       --sprout-on-primary: #202020;
       --sprout-focus: #b5b5b5;
+      --sprout-focus-ring: #60a5fa;
       --sprout-danger: #ff9197;
       --sprout-danger-hover: #ffadb1;
       --sprout-on-danger: #3c1014;

package/dist/styles/input-group.css

@@ -12,12 +12,11 @@
     background-color: var(--sprout-surface);
     color: var(--sprout-text);
     outline: 0 solid transparent;
-    outline-offset: 2px;
+    outline-offset: 0;
   }
   .sprout-input-group:has([data-slot="input-group-control"]:focus-visible) {
-    border-color: var(--sprout-focus);
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    border-color: var(--sprout-border);
+    outline: var(--sprout-focus-width) solid transparent;
   }
   .sprout-input-group:has(
     [data-slot="input-group-control"][aria-invalid="true"]
@@ -56,11 +55,8 @@
     flex-direction: column;
     align-items: stretch;
     height: auto;
-    border-color: var(--sprout-border);
-    border-radius: var(--sprout-radius-panel);
-  }
-  .sprout-input-group-variant-question-composer {
     border-color: var(--sprout-input);
+    border-radius: var(--sprout-radius-panel);
   }
   .sprout-input-group-variant-composer:has(
     [data-slot="input-group-control"]:focus-visible
@@ -68,9 +64,8 @@
   .sprout-input-group-variant-question-composer:has(
     [data-slot="input-group-control"]:focus-visible
   ) {
-    border-color: var(--sprout-focus);
-    outline-color: transparent;
-    box-shadow: 0 0 0 1px var(--sprout-focus);
+    border-color: var(--sprout-border);
+    outline: var(--sprout-focus-width) solid transparent;
   }
   .sprout-input-group-variant-composer:has(
     [data-slot="input-group-control"][aria-invalid="true"]

package/dist/styles/input-otp.css

@@ -70,8 +70,8 @@
   }
   .sprout-input-otp-slot:focus {
     z-index: 1;
-    border-color: var(--sprout-focus);
-    outline: 2px solid color-mix(in oklab, var(--sprout-focus) 50%, transparent);
+    border-color: var(--sprout-border);
+    outline: var(--sprout-focus-width) solid transparent;
     outline-offset: 0;
   }
   .sprout-input-otp-slot[aria-invalid="true"] {

package/dist/styles/input.css

@@ -15,16 +15,15 @@
     font-weight: 400;
     line-height: 20px;
     outline: 0 solid transparent;
-    outline-offset: 2px;
+    outline-offset: 0;
   }
   .sprout-input::placeholder {
     color: var(--sprout-muted);
     opacity: 1;
   }
   .sprout-input:focus-visible {
-    border-color: var(--sprout-focus);
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    border-color: var(--sprout-border);
+    outline: var(--sprout-focus-width) solid transparent;
   }
   .sprout-input:disabled,
   .sprout-input[data-disabled] {

package/dist/styles/mention-list.css

@@ -142,7 +142,7 @@
   @media (forced-colors: active) {
     .sprout-mention-option[aria-selected="true"] {
       outline: 2px solid Highlight;
-      outline-offset: -2px;
+      outline-offset: -1px;
     }
   }
 

package/dist/styles/menubar.css

@@ -58,8 +58,8 @@
   }
   .sprout-menubar-trigger:focus-visible {
     z-index: 1;
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 1px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-menubar-trigger[data-disabled],
   .sprout-menubar-trigger:disabled {
@@ -200,7 +200,7 @@
     .sprout-menubar-item[data-highlighted],
     .sprout-menubar-sub-trigger[data-popup-open] {
       outline: 2px solid Highlight;
-      outline-offset: -2px;
+      outline-offset: -1px;
     }
   }
 

package/dist/styles/message-response.css

@@ -74,8 +74,8 @@
     text-decoration-thickness: 2px;
   }
   .sprout-message-response 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-message-response :not(pre) > code {
     padding: 2px 4px;
@@ -103,8 +103,8 @@
     overflow: auto;
   }
   .sprout-message-response-table: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-message-response table {
     width: 100%;

package/dist/styles/message-scroller.css

@@ -36,8 +36,8 @@
     );
   }
   .sprout-message-scroller-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-message-scroller-viewport[data-autoscrolling] {
     scrollbar-color: transparent transparent;

package/dist/styles/message.css

@@ -145,8 +145,8 @@
     cursor: pointer;
   }
   .sprout-message-bubble: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-message-bubble:is(button):disabled,
   .sprout-message-bubble[aria-disabled="true"] {
@@ -206,7 +206,7 @@
     );
     --sprout-message-bubble-ink: var(--sprout-danger);
   }
-  .sprout-message-bubble-destructive:focus-visible {
+  .sprout-message-bubble-destructive:is(button, a):focus-visible {
     outline-color: var(--sprout-danger);
   }
 
@@ -270,8 +270,8 @@
     color: var(--sprout-primary);
   }
   .sprout-message-reactions > button:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 1px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 
   @media (hover: hover) {

package/dist/styles/navigation-menu.css

@@ -78,8 +78,8 @@
   }
   .sprout-navigation-menu-trigger:focus-visible,
   .sprout-navigation-menu-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-navigation-menu-trigger:is(:disabled, [data-disabled]) {
     pointer-events: none;

package/dist/styles/page-header.css

@@ -47,8 +47,8 @@
   }
   .sprout-page-header-title:focus-visible {
     border-radius: 2px;
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 
   .sprout-page-header-description {
@@ -108,8 +108,8 @@
     color: var(--sprout-text);
   }
   .sprout-page-header-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-page-header-breadcrumb[data-placement="chrome"]
     .sprout-page-header-breadcrumb-item:first-child {

package/dist/styles/plan-outline.css

@@ -115,8 +115,8 @@
     outline: none;
   }
   .sprout-plan-outline-task: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-plan-outline-row {
     box-sizing: border-box;
@@ -143,8 +143,8 @@
     background: var(--sprout-hover);
   }
   .sprout-plan-outline-trigger: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-plan-outline-mark {
     display: inline-flex;
@@ -347,8 +347,8 @@
     text-decoration: underline;
   }
   .sprout-plan-outline-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-plan-outline-dependency-label {
     color: var(--sprout-muted);

package/dist/styles/presence-cursor.css

@@ -0,0 +1,68 @@
+@layer components {
+  .sprout-presence-cursor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    pointer-events: none;
+    user-select: none;
+    font-family: var(--sprout-font);
+  }
+
+  .sprout-presence-cursor-arrow {
+    display: block;
+    width: 18px;
+    height: 18px;
+    fill: var(--sprout-presence-color);
+    stroke: #fff;
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.2));
+  }
+
+  .sprout-presence-cursor-label,
+  .sprout-presence-cursor-avatar {
+    position: absolute;
+    top: 16px;
+    left: 14px;
+    box-shadow: var(--sprout-shadow-control);
+  }
+
+  .sprout-presence-cursor-label {
+    box-sizing: border-box;
+    max-width: 16rem;
+    padding: 4px 8px;
+    overflow: hidden;
+    border-radius: var(--sprout-radius-control);
+    background: var(--sprout-presence-color);
+    color: #fff;
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 1.25rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .sprout-presence-cursor-avatar {
+    display: flex;
+    border: 2px solid var(--sprout-presence-color);
+    border-radius: 9999px;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-presence-cursor {
+      transition: transform var(--sprout-motion-normal)
+        var(--sprout-motion-ease);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-presence-cursor-arrow {
+      fill: CanvasText;
+      stroke: Canvas;
+    }
+    .sprout-presence-cursor-label {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/dist/styles/prompt-list.css

@@ -34,7 +34,7 @@
     font-size: var(--sprout-text-sm);
     line-height: 1.25rem;
     outline: 0 solid transparent;
-    outline-offset: 1px;
+    outline-offset: 0;
   }
   @media (pointer: coarse) {
     .sprout-prompt-list-item {
@@ -50,7 +50,7 @@
   .sprout-prompt-list-item:has(.sprout-prompt-list-button:focus-visible) {
     --sprout-brand-ring: var(--sprout-hover);
     background: var(--sprout-hover);
-    outline: 2px solid var(--sprout-focus);
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
   }
   .sprout-prompt-list-item:has(.sprout-prompt-list-button:disabled) {
     opacity: 0.5;

package/dist/styles/questionnaire.css

@@ -82,7 +82,7 @@
     cursor: pointer;
     user-select: none;
     outline: 0 solid transparent;
-    outline-offset: 2px;
+    outline-offset: 0;
     -webkit-tap-highlight-color: transparent;
   }
   @media (hover: hover) {
@@ -93,8 +93,7 @@
   .sprout-questionnaire-choice:has(
     > .sprout-questionnaire-choice-input:focus-visible
   ) {
-    border-color: var(--sprout-focus);
-    outline: 2px solid var(--sprout-focus);
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
   }
   .sprout-questionnaire-choice[data-checked] {
     border-color: var(--sprout-focus);
@@ -184,22 +183,8 @@
   }
 
   .sprout-questionnaire-choice-shortcut {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
     margin-inline-start: auto;
-    border: 1px solid var(--sprout-line);
-    border-radius: calc(var(--sprout-radius-control) - 2px);
-    background: var(--sprout-surface);
-    font-size: var(--sprout-text-xs);
-    font-weight: 500;
-    line-height: 1;
     font-variant-numeric: tabular-nums;
-    color: var(--sprout-muted);
     pointer-events: none;
   }
   .sprout-questionnaire-choice[data-checked]

package/dist/styles/radio-group.css

@@ -23,7 +23,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 dot. */
@@ -42,8 +42,7 @@
     }
   }
   .sprout-radio-group-item:focus-visible {
-    border-color: var(--sprout-focus);
-    outline: 2px solid var(--sprout-focus);
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
   }
   .sprout-radio-group-item[data-checked] {
     border-color: var(--sprout-primary);

package/dist/styles/reasoning-effort.css

@@ -59,8 +59,8 @@
     cursor: grab;
   }
   .sprout-reasoning-effort-track:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 3px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-reasoning-effort[data-dragging="true"]
     .sprout-reasoning-effort-track {

package/dist/styles/review-card.css

@@ -34,8 +34,8 @@
     background: color-mix(in oklab, var(--sprout-hover) 60%, transparent);
   }
   .sprout-review-card-header:has(.sprout-review-card-trigger:focus-visible) {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
     border-radius: inherit;
   }
   .sprout-review-card-icon {

package/dist/styles/rich-text-editor.css

@@ -39,7 +39,7 @@
     line-height: 1.5;
     overflow-wrap: anywhere;
     outline: 0 solid transparent;
-    outline-offset: 2px;
+    outline-offset: 0;
   }
   .sprout-rich-text-editor-size-compact .sprout-rich-text-editor-content {
     min-height: 2.5rem;
@@ -52,7 +52,7 @@
     max-height: 8rem;
   }
   .sprout-rich-text-editor-content:focus-visible {
-    outline: 2px solid var(--sprout-focus);
+    outline: 0 solid transparent;
   }
   /* Inside an input group, the group draws the focus ring for the editor. */
   .sprout-input-group .sprout-rich-text-editor-content:focus-visible {

package/dist/styles/schema-diagram.css

@@ -63,8 +63,8 @@
     background: transparent;
   }
   .sprout-schema-flow:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
     border-radius: inherit;
   }
   .sprout-schema-flow .react-flow__container {
@@ -143,8 +143,8 @@
     cursor: grabbing;
   }
   .sprout-schema-flow .react-flow__node: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-schema-flow .react-flow__panel {
     position: absolute;

package/dist/styles/scroll-area.css

@@ -23,8 +23,8 @@
     overscroll-behavior: contain;
   }
   .sprout-scroll-area-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-scroll-area[data-variant="table"] > .sprout-scroll-area-viewport {
     max-height: 60dvh;

package/dist/styles/search-dialog.css

@@ -16,28 +16,6 @@
     background: transparent;
   }
 
-  .sprout-search-kbd {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    min-width: 20px;
-    height: 20px;
-    padding-inline: 4px;
-    border: 1px solid var(--sprout-line);
-    border-radius: calc(var(--sprout-radius-control) - 2px);
-    background: var(--sprout-surface);
-    color: var(--sprout-muted);
-    font-family: inherit;
-    font-size: var(--sprout-text-xs);
-    font-weight: 500;
-    line-height: 1;
-    white-space: nowrap;
-    user-select: none;
-    pointer-events: none;
-  }
-
   /* Input row */
   .sprout-search-input {
     display: flex;
@@ -79,44 +57,6 @@
   .sprout-search-filters::-webkit-scrollbar {
     display: none;
   }
-  .sprout-search-filter {
-    box-sizing: border-box;
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    gap: 6px;
-    height: 28px;
-    margin: 0;
-    padding-inline: 10px;
-    border: 1px solid var(--sprout-line);
-    border-radius: calc(var(--sprout-radius-panel) - 4px);
-    background: var(--sprout-surface);
-    box-shadow: var(--sprout-shadow-control);
-    color: var(--sprout-muted);
-    font: inherit;
-    font-size: var(--sprout-text-xs);
-    font-weight: 500;
-    line-height: 1rem;
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .sprout-search-filter > svg {
-    flex-shrink: 0;
-    width: 14px;
-    height: 14px;
-  }
-  .sprout-search-filter:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 1px;
-  }
-  .sprout-search-filter[data-pressed] {
-    border-color: var(--sprout-input);
-    background: var(--sprout-active);
-    color: var(--sprout-text);
-  }
-
   /* Results */
   .sprout-search-dialog .sprout-search-list {
     height: min(28rem, 60dvh);
@@ -337,27 +277,4 @@
       display: flex;
     }
   }
-
-  @media (hover: hover) {
-    .sprout-search-filter:hover {
-      background: var(--sprout-hover);
-      color: var(--sprout-text);
-    }
-  }
-
-  @media (forced-colors: active) {
-    .sprout-search-filter[data-pressed] {
-      outline: 2px solid Highlight;
-      outline-offset: -2px;
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .sprout-search-filter {
-      transition:
-        background-color var(--sprout-motion-fast) var(--sprout-motion-ease),
-        border-color var(--sprout-motion-fast) var(--sprout-motion-ease),
-        color var(--sprout-motion-fast) var(--sprout-motion-ease);
-    }
-  }
 }

package/dist/styles/select.css

@@ -34,8 +34,8 @@
     background: var(--sprout-hover);
   }
   .sprout-select-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-select-trigger[data-placeholder] {
     color: var(--sprout-muted);
@@ -253,7 +253,7 @@
   @media (forced-colors: active) {
     .sprout-select-item[data-highlighted] {
       outline: 2px solid Highlight;
-      outline-offset: -2px;
+      outline-offset: -1px;
     }
   }
 

package/dist/styles/separator.css

@@ -181,8 +181,8 @@
   }
   a.sprout-separator-marker:focus-visible,
   .sprout-separator-content > 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;
     color: var(--sprout-text);
   }
 

package/dist/styles/sheet.css

@@ -140,8 +140,8 @@
   }
   .sprout-sheet-title[tabindex="-1"]:focus-visible {
     border-radius: 2px;
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 
   .sprout-sheet-description {