@tulipfarm/sprout 0.1.0 → 0.2.0

package/dist/styles/file-viewer.css

@@ -1,24 +1,120 @@
 @layer components {
+  .sprout-file-viewer.sprout-dialog-fullscreen {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+  .sprout-file-viewer > .sprout-file-viewer-surface {
+    grid-row: 2;
+    grid-column: 1;
+  }
+
   .sprout-file-viewer-header {
-    display: flex;
-    flex-shrink: 0;
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "heading window"
+      "controls controls";
     align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
+    gap: 0.5rem 1rem;
+    padding: 0.625rem 0.75rem 0.625rem 1rem;
     border-bottom: 1px solid var(--sprout-line);
     background: var(--sprout-surface);
   }
+  .sprout-file-viewer-heading {
+    display: grid;
+    grid-area: heading;
+    gap: 2px;
+    min-width: 0;
+  }
+  .sprout-file-viewer-controls {
+    display: flex;
+    flex-wrap: wrap;
+    grid-area: controls;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  .sprout-file-viewer-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .sprout-file-viewer-window {
+    display: flex;
+    grid-area: window;
+    align-items: center;
+    gap: 2px;
+  }
+  .sprout-file-viewer-window > [aria-expanded="true"] {
+    background: var(--sprout-hover);
+    color: var(--sprout-text);
+  }
+  @media (max-width: 639.98px) {
+    .sprout-file-viewer-controls
+      .sprout-button-size-sm:has(> .sprout-file-viewer-label) {
+      width: 28px;
+      padding-inline: 0;
+    }
+    .sprout-file-viewer-label {
+      display: none;
+    }
+  }
   @media (min-width: 640px) {
     .sprout-file-viewer-header {
-      padding-inline: 1.5rem;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      grid-template-areas: "heading controls window";
+      min-height: 3.5rem;
+      padding-inline: 1.5rem 1rem;
+    }
+    .sprout-file-viewer-controls {
+      flex-wrap: nowrap;
+    }
+    .sprout-file-viewer-window::before {
+      content: "";
+      width: 1px;
+      height: 1.25rem;
+      margin-inline: 0.25rem 0.375rem;
+      background: var(--sprout-line);
     }
   }
-  .sprout-file-viewer-heading {
-    display: grid;
-    flex: 1;
-    gap: 2px;
+
+  .sprout-file-viewer-panel {
+    z-index: 1;
+    display: flex;
+    grid-row: 2;
+    grid-column: 1 / -1;
+    flex-direction: column;
+    box-sizing: border-box;
     min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    animation: sprout-file-viewer-panel-in var(--sprout-motion-normal, 180ms)
+      cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .sprout-file-viewer-panel[hidden] {
+    display: none;
   }
+  @media (min-width: 768px) {
+    .sprout-file-viewer-panel {
+      grid-column: 2;
+      width: clamp(18rem, 28vw, 24rem);
+      border-inline-start: 1px solid var(--sprout-line);
+    }
+  }
+  @keyframes sprout-file-viewer-panel-in {
+    from {
+      opacity: 0;
+      translate: 0.75rem 0;
+    }
+  }
+
   .sprout-file-viewer-truncate {
     display: block;
     overflow: hidden;
@@ -96,8 +192,8 @@
     padding: 1rem;
   }
   .sprout-file-text-scroll: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-file-text-page {
     box-sizing: border-box;
@@ -127,8 +223,8 @@
     padding: 1rem;
   }
   .sprout-file-image-stage: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-file-image {
     margin: auto;
@@ -158,8 +254,8 @@
     border-radius: 2px;
   }
   .sprout-file-google-link 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-file-embed {
@@ -218,7 +314,8 @@
 
   @media (prefers-reduced-motion: reduce) {
     .sprout-file-image,
-    .sprout-file-embed-slow {
+    .sprout-file-embed-slow,
+    .sprout-file-viewer-panel {
       transition: none;
       animation: none;
     }

package/dist/styles/hover-card.css

@@ -14,8 +14,8 @@
     text-decoration-color: currentColor;
   }
   :where(a.sprout-hover-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: 0;
   }
 
   .sprout-hover-card-positioner {

package/dist/styles/index.css

@@ -15,6 +15,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 +28,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";
@@ -169,6 +171,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 +208,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 +245,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"] {
@@ -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/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;