@tulipfarm/sprout 0.1.0 → 0.3.0

package/dist/styles/themes/tulipfarm.css

@@ -1,125 +1,115 @@
-/* TulipFarm: Neutral grays with TulipFarm green.
+/* TulipFarm: The TulipFarm Cloud palette, cool neutral grays with Google green.
  *
  * One file is the whole theme: font, radius, and every color token for light
  * and dark. Import it after "@tulipfarm/sprout/styles.css", then set
  * data-sprout-theme="tulipfarm" on <html>, or on any element to theme only
- * that subtree.
+ * that subtree. The font is Inter; load it (for example with
+ * @fontsource-variable/inter) or the system font is used.
  */
 @layer base {
   [data-sprout-theme="tulipfarm"] {
-    --sprout-font: ui-sans-serif, system-ui, sans-serif;
-    --sprout-radius-control: 0.375rem;
+    --sprout-font:
+      "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
+    --sprout-radius-control: 0.5rem;
     --sprout-radius-panel: 0.75rem;
   }
 
   [data-sprout-theme="tulipfarm"],
   .light[data-sprout-theme="tulipfarm"],
   .light [data-sprout-theme="tulipfarm"] {
-    --sprout-canvas: #f8f8f8;
-    --sprout-surface: #fdfdfd;
-    --sprout-hover: #eeeeee;
-    --sprout-active: #e3e3e3;
-    --sprout-text: #242424;
-    --sprout-muted: #626262;
-    --sprout-line: #e0e0e0;
-    --sprout-border: #909090;
-    --sprout-border-strong: #707070;
-    --sprout-input: #d4d4d4;
-    --sprout-primary: #286440;
-    --sprout-primary-hover: #1e5032;
-    --sprout-primary-active: #164027;
-    --sprout-on-primary: #f5fbf6;
-    --sprout-focus: #327c4e;
-    --sprout-danger: #b32d34;
-    --sprout-danger-hover: #98252b;
-    --sprout-on-danger: #fff8f8;
-    --sprout-info: #1f5fb8;
-    --sprout-info-subtle: #ebf1fd;
-    --sprout-danger-subtle: #fdeeef;
-    --sprout-success: #1d6a37;
-    --sprout-success-subtle: #e8f4eb;
+    --sprout-canvas: #f9f9fa;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f5f5f7;
+    --sprout-active: #ebebed;
+    --sprout-text: #1b1b1b;
+    --sprout-muted: #65666e;
+    --sprout-line: #e8e8e8;
+    --sprout-border: #89898e;
+    --sprout-border-strong: #6e6f75;
+    --sprout-input: #dedee0;
+    --sprout-primary: #188038;
+    --sprout-primary-hover: #146c2f;
+    --sprout-primary-active: #105825;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #188038;
+    --sprout-danger: #b42332;
+    --sprout-danger-hover: #9a1d2a;
+    --sprout-on-danger: #ffffff;
+    --sprout-info: #245cba;
+    --sprout-info-subtle: #edf3ff;
+    --sprout-danger-subtle: #fff0f1;
+    --sprout-success: #146c2f;
+    --sprout-success-subtle: #e9f5ec;
     --sprout-warning: #8a4b08;
-    --sprout-warning-subtle: #fdf1dc;
-    --sprout-primary-subtle: color-mix(
-      in oklab,
-      var(--sprout-primary) 10%,
-      var(--sprout-surface)
-    );
-    --sprout-secondary: #ececec;
-    --sprout-overlay: rgb(18 18 18 / 0.35);
+    --sprout-warning-subtle: #fff4df;
+    --sprout-primary-subtle: #edf7f0;
+    --sprout-secondary: #f0f0f2;
+    --sprout-overlay: rgb(32 33 36 / 0.25);
   }
 
   .dark[data-sprout-theme="tulipfarm"],
   .dark [data-sprout-theme="tulipfarm"] {
-    --sprout-canvas: #151515;
-    --sprout-surface: #1d1d1d;
-    --sprout-hover: #2b2b2b;
-    --sprout-active: #363636;
-    --sprout-text: #f0f0f0;
-    --sprout-muted: #adadad;
-    --sprout-line: #383838;
-    --sprout-border: #808080;
-    --sprout-border-strong: #a0a0a0;
-    --sprout-input: #474747;
-    --sprout-primary: #a2d8af;
-    --sprout-primary-hover: #b8e3c1;
-    --sprout-primary-active: #c9ecd0;
-    --sprout-on-primary: #142e1c;
-    --sprout-focus: #a2d8af;
-    --sprout-danger: #ff9197;
-    --sprout-danger-hover: #ffadb1;
-    --sprout-on-danger: #3c1014;
-    --sprout-info: #8fb8f5;
-    --sprout-info-subtle: #1f2c45;
-    --sprout-danger-subtle: #3a2124;
-    --sprout-success: #82d29a;
-    --sprout-success-subtle: #1c3223;
-    --sprout-warning: #eec27e;
-    --sprout-warning-subtle: #34291b;
-    --sprout-primary-subtle: color-mix(
-      in oklab,
-      var(--sprout-primary) 16%,
-      var(--sprout-surface)
-    );
-    --sprout-secondary: #2c2c2c;
-    --sprout-overlay: rgb(8 8 8 / 0.65);
+    --sprout-canvas: #101113;
+    --sprout-surface: #16171a;
+    --sprout-hover: #202125;
+    --sprout-active: #222327;
+    --sprout-text: #ffffff;
+    --sprout-muted: #a5a6af;
+    --sprout-line: #2d2e31;
+    --sprout-border: #727277;
+    --sprout-border-strong: #9a9ba1;
+    --sprout-input: #26272b;
+    --sprout-primary: #75ce8e;
+    --sprout-primary-hover: #8fd9a3;
+    --sprout-primary-active: #a6e2b6;
+    --sprout-on-primary: #0e2615;
+    --sprout-focus: #75ce8e;
+    --sprout-danger: #ff929d;
+    --sprout-danger-hover: #ffadb5;
+    --sprout-on-danger: #3b1016;
+    --sprout-info: #9cbdff;
+    --sprout-info-subtle: #202e48;
+    --sprout-danger-subtle: #3b2228;
+    --sprout-success: #75ce8e;
+    --sprout-success-subtle: #1b3323;
+    --sprout-warning: #edc17c;
+    --sprout-warning-subtle: #352b1e;
+    --sprout-primary-subtle: #1b3323;
+    --sprout-secondary: #28292e;
+    --sprout-overlay: rgb(0 0 0 / 0.5);
   }
 
   @media (prefers-color-scheme: dark) {
     :root:not(.light):not(.dark)[data-sprout-theme="tulipfarm"],
     :root:not(.light):not(.dark) [data-sprout-theme="tulipfarm"] {
-      --sprout-canvas: #151515;
-      --sprout-surface: #1d1d1d;
-      --sprout-hover: #2b2b2b;
-      --sprout-active: #363636;
-      --sprout-text: #f0f0f0;
-      --sprout-muted: #adadad;
-      --sprout-line: #383838;
-      --sprout-border: #808080;
-      --sprout-border-strong: #a0a0a0;
-      --sprout-input: #474747;
-      --sprout-primary: #a2d8af;
-      --sprout-primary-hover: #b8e3c1;
-      --sprout-primary-active: #c9ecd0;
-      --sprout-on-primary: #142e1c;
-      --sprout-focus: #a2d8af;
-      --sprout-danger: #ff9197;
-      --sprout-danger-hover: #ffadb1;
-      --sprout-on-danger: #3c1014;
-      --sprout-info: #8fb8f5;
-      --sprout-info-subtle: #1f2c45;
-      --sprout-danger-subtle: #3a2124;
-      --sprout-success: #82d29a;
-      --sprout-success-subtle: #1c3223;
-      --sprout-warning: #eec27e;
-      --sprout-warning-subtle: #34291b;
-      --sprout-primary-subtle: color-mix(
-        in oklab,
-        var(--sprout-primary) 16%,
-        var(--sprout-surface)
-      );
-      --sprout-secondary: #2c2c2c;
-      --sprout-overlay: rgb(8 8 8 / 0.65);
+      --sprout-canvas: #101113;
+      --sprout-surface: #16171a;
+      --sprout-hover: #202125;
+      --sprout-active: #222327;
+      --sprout-text: #ffffff;
+      --sprout-muted: #a5a6af;
+      --sprout-line: #2d2e31;
+      --sprout-border: #727277;
+      --sprout-border-strong: #9a9ba1;
+      --sprout-input: #26272b;
+      --sprout-primary: #75ce8e;
+      --sprout-primary-hover: #8fd9a3;
+      --sprout-primary-active: #a6e2b6;
+      --sprout-on-primary: #0e2615;
+      --sprout-focus: #75ce8e;
+      --sprout-danger: #ff929d;
+      --sprout-danger-hover: #ffadb5;
+      --sprout-on-danger: #3b1016;
+      --sprout-info: #9cbdff;
+      --sprout-info-subtle: #202e48;
+      --sprout-danger-subtle: #3b2228;
+      --sprout-success: #75ce8e;
+      --sprout-success-subtle: #1b3323;
+      --sprout-warning: #edc17c;
+      --sprout-warning-subtle: #352b1e;
+      --sprout-primary-subtle: #1b3323;
+      --sprout-secondary: #28292e;
+      --sprout-overlay: rgb(0 0 0 / 0.5);
     }
   }
 }

package/dist/styles/toast.css

@@ -68,8 +68,8 @@
     content: "";
   }
   .sprout-toast: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-toast[data-expanded] {
     height: var(--toast-height);

package/dist/styles/toggle-group.css

@@ -58,8 +58,8 @@
   }
   .sprout-toggle-group-item:focus-visible {
     z-index: 1;
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-toggle-group-item[data-disabled] {
     cursor: not-allowed;

package/dist/styles/toggle.css

@@ -44,8 +44,8 @@
   }
   .sprout-toggle:focus-visible {
     z-index: 1;
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-toggle:disabled,
   .sprout-toggle[data-disabled] {

package/dist/styles/tool-activity.css

@@ -87,8 +87,8 @@
     display: none;
   }
   .sprout-activity-panel-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-tool-activity {
@@ -114,7 +114,7 @@
     color: var(--sprout-text);
   }
   .sprout-tool-activity-trigger:focus-visible {
-    outline-offset: 1px;
+    outline-offset: 0;
   }
   .sprout-tool-activity-trigger > svg {
     flex-shrink: 0;
@@ -262,8 +262,8 @@
     background: var(--sprout-active);
   }
   .sprout-tool-activity-source-chip: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-tool-activity-favicon {
     position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tulipfarm/sprout",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Considered React controls. Built with Base UI and Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -36,6 +36,10 @@
       "types": "./dist/components/accordion.d.ts",
       "import": "./dist/components/accordion.js"
     },
+    "./agent-fanout": {
+      "types": "./dist/components/agent-fanout.d.ts",
+      "import": "./dist/components/agent-fanout.js"
+    },
     "./alert": {
       "types": "./dist/components/alert.d.ts",
       "import": "./dist/components/alert.js"
@@ -108,6 +112,10 @@
       "types": "./dist/components/chat-sources.d.ts",
       "import": "./dist/components/chat-sources.js"
     },
+    "./chat-input": {
+      "types": "./dist/components/chat-input.d.ts",
+      "import": "./dist/components/chat-input.js"
+    },
     "./checkbox": {
       "types": "./dist/components/checkbox.d.ts",
       "import": "./dist/components/checkbox.js"
@@ -152,6 +160,10 @@
       "types": "./dist/components/field.d.ts",
       "import": "./dist/components/field.js"
     },
+    "./file-explorer": {
+      "types": "./dist/components/file-explorer.d.ts",
+      "import": "./dist/components/file-explorer.js"
+    },
     "./file-viewer": {
       "types": "./dist/components/file-viewer.d.ts",
       "import": "./dist/components/file-viewer.js"
@@ -244,6 +256,10 @@
       "types": "./dist/components/popover.d.ts",
       "import": "./dist/components/popover.js"
     },
+    "./presence-cursor": {
+      "types": "./dist/components/presence-cursor.d.ts",
+      "import": "./dist/components/presence-cursor.js"
+    },
     "./progress": {
       "types": "./dist/components/progress.d.ts",
       "import": "./dist/components/progress.js"
@@ -284,6 +300,10 @@
       "types": "./dist/components/schema-diagram.d.ts",
       "import": "./dist/components/schema-diagram.js"
     },
+    "./sql-viewer": {
+      "types": "./dist/components/sql-viewer.d.ts",
+      "import": "./dist/components/sql-viewer.js"
+    },
     "./scroll-area": {
       "types": "./dist/components/scroll-area.d.ts",
       "import": "./dist/components/scroll-area.js"
@@ -413,11 +433,12 @@
     "@dnd-kit/utilities": "3.2.2",
     "@tanstack/react-table": "9.3.1",
     "@tanstack/react-virtual": "3.14.21",
-    "@tiptap/core": "3.31.4",
-    "@tiptap/extension-placeholder": "3.31.4",
-    "@tiptap/pm": "3.31.4",
-    "@tiptap/react": "3.31.4",
-    "@tiptap/starter-kit": "3.31.4",
+    "@tiptap/core": "3.32.0",
+    "@tiptap/extension-placeholder": "3.32.0",
+    "@tiptap/pm": "3.32.0",
+    "@tiptap/react": "3.32.0",
+    "@tiptap/starter-kit": "3.32.0",
+    "@tiptap/suggestion": "3.32.0",
     "@xyflow/react": "12.12.0",
     "clsx": "^2.1.1",
     "react-day-picker": "10.0.1",