@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/internal/syntax.js

@@ -1,14 +1,14 @@
-import { codeLanguageAliases, codeLanguageFilenames, } from "./languages.js";
-const plain = new Set(["text", "txt", "plain", "plaintext"]);
+import { codeLanguageAliases, codeLanguageFilenames } from './languages.js';
+const plain = new Set(['text', 'txt', 'plain', 'plaintext']);
 /** The Shiki language for a file name, from its whole name or its extension. */
 export function languageForFilename(name) {
-    const base = (name.split(/[\\/]/).at(-1) ?? "").toLowerCase();
+    const base = (name.split(/[\\/]/).at(-1) ?? '').toLowerCase();
     const whole = codeLanguageFilenames[base];
     if (whole)
         return whole;
-    if (base.startsWith(".env."))
-        return "dotenv";
-    const dot = base.lastIndexOf(".");
+    if (base.startsWith('.env.'))
+        return 'dotenv';
+    const dot = base.lastIndexOf('.');
     return dot < 0 ? null : (codeLanguageAliases[base.slice(dot + 1)] ?? null);
 }
 /** Resolves a language name or alias, falling back to the file name. `null` means plain text. */
@@ -25,71 +25,60 @@ const role = (name) => `var(--sprout-syntax-token-${name})`;
 // Shiki's CSS-variables theme leaves prose markup in the foreground color, so Markdown and diffs read as plain text.
 const markupRules = [
     {
-        scope: [
-            "markup.heading",
-            "entity.name.section",
-            "punctuation.definition.heading",
-        ],
-        settings: { foreground: role("heading"), fontStyle: "bold" },
+        scope: ['markup.heading', 'entity.name.section', 'punctuation.definition.heading'],
+        settings: { foreground: role('heading'), fontStyle: 'bold' },
     },
     {
         scope: [
-            "punctuation.definition.list.begin",
-            "beginning.punctuation.definition.list",
-            "punctuation.definition.list",
+            'punctuation.definition.list.begin',
+            'beginning.punctuation.definition.list',
+            'punctuation.definition.list',
         ],
-        settings: { foreground: role("constant") },
+        settings: { foreground: role('constant') },
     },
     {
         scope: [
-            "punctuation.definition.bold",
-            "punctuation.definition.italic",
-            "punctuation.definition.strikethrough",
-            "punctuation.definition.quote.begin",
-            "meta.separator",
+            'punctuation.definition.bold',
+            'punctuation.definition.italic',
+            'punctuation.definition.strikethrough',
+            'punctuation.definition.quote.begin',
+            'meta.separator',
         ],
-        settings: { foreground: role("punctuation") },
+        settings: { foreground: role('punctuation') },
     },
     {
-        scope: ["markup.quote"],
-        settings: { foreground: role("comment"), fontStyle: "italic" },
+        scope: ['markup.quote'],
+        settings: { foreground: role('comment'), fontStyle: 'italic' },
     },
     {
-        scope: ["markup.inline.raw", "markup.fenced_code", "markup.raw"],
-        settings: { foreground: role("string") },
+        scope: ['markup.inline.raw', 'markup.fenced_code', 'markup.raw'],
+        settings: { foreground: role('string') },
     },
     {
-        scope: ["fenced_code.block.language"],
-        settings: { foreground: role("keyword") },
+        scope: ['fenced_code.block.language'],
+        settings: { foreground: role('keyword') },
     },
     {
-        scope: ["markup.inserted", "punctuation.definition.inserted"],
-        settings: { foreground: role("inserted") },
+        scope: ['markup.inserted', 'punctuation.definition.inserted'],
+        settings: { foreground: role('inserted') },
     },
     {
-        scope: ["markup.deleted", "punctuation.definition.deleted"],
-        settings: { foreground: role("deleted") },
+        scope: ['markup.deleted', 'punctuation.definition.deleted'],
+        settings: { foreground: role('deleted') },
     },
     {
-        scope: [
-            "meta.diff.range",
-            "punctuation.definition.range.diff",
-            "meta.diff.header",
-        ],
-        settings: { foreground: role("keyword") },
+        scope: ['meta.diff.range', 'punctuation.definition.range.diff', 'meta.diff.header'],
+        settings: { foreground: role('keyword') },
     },
 ];
 let highlighter;
 let starting;
 const loading = new Map();
 function start() {
-    starting ??= Promise.all([
-        import("shiki/core"),
-        import("shiki/engine/javascript"),
-    ]).then(async ([{ createHighlighterCore, createCssVariablesTheme }, { createJavaScriptRegexEngine },]) => {
+    starting ??= Promise.all([import('shiki/core'), import('shiki/engine/javascript')]).then(async ([{ createHighlighterCore, createCssVariablesTheme }, { createJavaScriptRegexEngine }]) => {
         const theme = createCssVariablesTheme({
-            name: "sprout",
-            variablePrefix: "--sprout-syntax-",
+            name: 'sprout',
+            variablePrefix: '--sprout-syntax-',
             fontStyle: true,
         });
         theme.tokenColors = [...(theme.tokenColors ?? []), ...markupRules];
@@ -105,7 +94,7 @@ function start() {
 export function loadCodeLanguage(language) {
     let loaded = loading.get(language);
     if (!loaded) {
-        loaded = Promise.all([start(), import("shiki/langs")]).then(([core, { bundledLanguages }]) => core.loadLanguage(bundledLanguages[language]));
+        loaded = Promise.all([start(), import('shiki/langs')]).then(([core, { bundledLanguages }]) => core.loadLanguage(bundledLanguages[language]));
         loading.set(language, loaded);
         loaded.catch(() => loading.delete(language));
     }
@@ -113,7 +102,7 @@ export function loadCodeLanguage(language) {
 }
 /** Languages a file needs beyond its own, such as the fences inside Markdown. */
 export function embeddedLanguages(code, language) {
-    if (language !== "markdown" && language !== "mdx")
+    if (language !== 'markdown' && language !== 'mdx')
         return [];
     const found = new Set();
     for (const [, name] of code.matchAll(/^\s*(?:```|~~~)\s*([\w#+.-]+)/gm)) {
@@ -132,6 +121,6 @@ export function codeTokens(code, language) {
         return null;
     return highlighter.codeToTokensBase(code, {
         lang: language,
-        theme: "sprout",
+        theme: 'sprout',
     });
 }

package/dist/styles/accordion.css

@@ -68,7 +68,7 @@
     font-size: var(--sprout-text-sm);
     line-height: 1.25rem;
   }
-  .sprout-accordion-content[hidden]:not([hidden="until-found"]) {
+  .sprout-accordion-content[hidden]:not([hidden='until-found']) {
     display: none;
   }
   .sprout-accordion-content[data-starting-style],
@@ -91,12 +91,10 @@
 
   @media (prefers-reduced-motion: no-preference) {
     .sprout-accordion-trigger-icon {
-      transition: transform var(--sprout-motion-fast, 120ms)
-        var(--sprout-motion-ease, ease-out);
+      transition: transform var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out);
     }
     .sprout-accordion-content {
-      transition: height var(--sprout-motion-normal, 180ms)
-        var(--sprout-motion-ease, ease-out);
+      transition: height var(--sprout-motion-normal, 180ms) var(--sprout-motion-ease, ease-out);
     }
   }
 }

package/dist/styles/agent-fanout.css

@@ -13,11 +13,43 @@
     --sprout-on-primary: inherit;
     --sprout-danger: inherit;
     --sprout-danger-subtle: inherit;
+    --sprout-indigo: inherit;
+    --sprout-green: inherit;
+    --sprout-orange: inherit;
+    --sprout-red: inherit;
+    --sprout-sky: inherit;
+    --sprout-purple: inherit;
+    --sprout-yellow: inherit;
+    --sprout-teal: inherit;
+    --sprout-blue: inherit;
+    --sprout-tan: inherit;
     --sprout-chart-1: inherit;
     --sprout-chart-2: inherit;
     --sprout-chart-3: inherit;
     --sprout-chart-4: inherit;
     --sprout-chart-5: inherit;
+    --sprout-chart-6: inherit;
+    --sprout-chart-7: inherit;
+    --sprout-chart-8: inherit;
+    --sprout-chart-9: inherit;
+    --sprout-chart-10: inherit;
+    --sprout-agent-fanout-check: inherit;
+  }
+
+  :root,
+  .light {
+    --sprout-agent-fanout-check: var(--sprout-surface);
+  }
+
+  /* The dark surface reads faint on the bright dark-mode fills. */
+  .dark {
+    --sprout-agent-fanout-check: #000;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+      --sprout-agent-fanout-check: #000;
+    }
   }
 }
 
@@ -139,7 +171,7 @@
     background: var(--sprout-primary);
     color: var(--sprout-on-primary);
   }
-  .sprout-agent-fanout-root[data-state="stopped"] {
+  .sprout-agent-fanout-root[data-state='stopped'] {
     background: var(--sprout-hover);
     color: var(--sprout-muted);
     box-shadow: inset 0 0 0 1px var(--sprout-line);
@@ -173,48 +205,35 @@
     z-index: -1;
     inset: calc(var(--sprout-agent-fanout-dot) * -0.27);
     border-radius: 50%;
-    background: color-mix(
-      in oklab,
-      var(--sprout-agent-fanout-color) 14%,
-      transparent
-    );
-    content: "";
+    background: color-mix(in oklab, var(--sprout-agent-fanout-color) 14%, transparent);
+    content: '';
     opacity: 0;
   }
   .sprout-agent-fanout-node {
     isolation: isolate;
   }
-  .sprout-agent-fanout-node[data-status="queued"] .sprout-agent-fanout-dot {
+  .sprout-agent-fanout-node[data-status='queued'] .sprout-agent-fanout-dot {
     color: color-mix(in oklab, var(--sprout-muted) 70%, var(--sprout-surface));
   }
-  .sprout-agent-fanout-node[data-status="working"] .sprout-agent-fanout-dot {
+  .sprout-agent-fanout-node[data-status='working'] .sprout-agent-fanout-dot {
     border-color: var(--sprout-agent-fanout-color);
-    background: color-mix(
-      in oklab,
-      var(--sprout-agent-fanout-color) 6%,
-      var(--sprout-surface)
-    );
-    color: color-mix(
-      in oklab,
-      var(--sprout-agent-fanout-color) 78%,
-      var(--sprout-text)
-    );
-  }
-  .sprout-agent-fanout-node[data-status="working"]
-    .sprout-agent-fanout-dot::before {
+    background: color-mix(in oklab, var(--sprout-agent-fanout-color) 6%, var(--sprout-surface));
+    color: color-mix(in oklab, var(--sprout-agent-fanout-color) 78%, var(--sprout-text));
+  }
+  .sprout-agent-fanout-node[data-status='working'] .sprout-agent-fanout-dot::before {
     opacity: 1;
   }
-  .sprout-agent-fanout-node[data-status="done"] .sprout-agent-fanout-dot {
+  .sprout-agent-fanout-node[data-status='done'] .sprout-agent-fanout-dot {
     border-color: var(--sprout-agent-fanout-color);
     background: var(--sprout-agent-fanout-color);
-    color: var(--sprout-surface);
+    color: var(--sprout-agent-fanout-check);
   }
-  .sprout-agent-fanout-node[data-status="failed"] .sprout-agent-fanout-dot {
+  .sprout-agent-fanout-node[data-status='failed'] .sprout-agent-fanout-dot {
     border-color: var(--sprout-danger);
     background: var(--sprout-danger-subtle);
     color: var(--sprout-danger);
   }
-  .sprout-agent-fanout-node[data-status="stopped"] .sprout-agent-fanout-dot {
+  .sprout-agent-fanout-node[data-status='stopped'] .sprout-agent-fanout-dot {
     border-color: var(--sprout-border);
     opacity: 0.6;
   }
@@ -301,19 +320,13 @@
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
-  .sprout-agent-fanout-row[data-status="working"]
-    .sprout-agent-fanout-row-status {
-    color: color-mix(
-      in oklab,
-      var(--sprout-agent-fanout-color) 72%,
-      var(--sprout-text)
-    );
+  .sprout-agent-fanout-row[data-status='working'] .sprout-agent-fanout-row-status {
+    color: color-mix(in oklab, var(--sprout-agent-fanout-color) 72%, var(--sprout-text));
   }
-  .sprout-agent-fanout-row[data-status="done"] .sprout-agent-fanout-row-status {
+  .sprout-agent-fanout-row[data-status='done'] .sprout-agent-fanout-row-status {
     color: var(--sprout-text);
   }
-  .sprout-agent-fanout-row[data-status="failed"]
-    .sprout-agent-fanout-row-status {
+  .sprout-agent-fanout-row[data-status='failed'] .sprout-agent-fanout-row-status {
     color: var(--sprout-danger);
   }
   .sprout-agent-fanout-pulse {
@@ -363,21 +376,18 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    .sprout-agent-fanout-trail[data-trip="out"] {
-      animation: sprout-agent-fanout-out var(--sprout-agent-fanout-trip)
-        var(--sprout-agent-fanout-trip-ease) both;
+    .sprout-agent-fanout-trail[data-trip='out'] {
+      animation: sprout-agent-fanout-out var(--sprout-agent-fanout-trip) var(--sprout-agent-fanout-trip-ease) both;
     }
-    .sprout-agent-fanout-trail[data-trip="back"] {
-      animation: sprout-agent-fanout-back var(--sprout-agent-fanout-trip)
-        var(--sprout-agent-fanout-trip-ease) both;
+    .sprout-agent-fanout-trail[data-trip='back'] {
+      animation: sprout-agent-fanout-back var(--sprout-agent-fanout-trip) var(--sprout-agent-fanout-trip-ease) both;
     }
-    .sprout-agent-fanout-comet[data-trip="out"] {
-      animation: sprout-agent-fanout-comet-out var(--sprout-agent-fanout-trip)
-        var(--sprout-agent-fanout-trip-ease) both;
+    .sprout-agent-fanout-comet[data-trip='out'] {
+      animation: sprout-agent-fanout-comet-out var(--sprout-agent-fanout-trip) var(--sprout-agent-fanout-trip-ease) both;
     }
-    .sprout-agent-fanout-comet[data-trip="back"] {
-      animation: sprout-agent-fanout-comet-back var(--sprout-agent-fanout-trip)
-        var(--sprout-agent-fanout-trip-ease) both;
+    .sprout-agent-fanout-comet[data-trip='back'] {
+      animation: sprout-agent-fanout-comet-back var(--sprout-agent-fanout-trip) var(--sprout-agent-fanout-trip-ease)
+        both;
     }
 
     .sprout-agent-fanout-dot,
@@ -389,19 +399,15 @@
         opacity 240ms var(--sprout-motion-ease);
     }
     /* The node lights up when the pulse lands, not when it leaves. */
-    .sprout-agent-fanout-node[data-status="working"][data-changed]
-      .sprout-agent-fanout-dot,
-    .sprout-agent-fanout-node[data-status="working"][data-changed]
-      .sprout-agent-fanout-dot::before {
+    .sprout-agent-fanout-node[data-status='working'][data-changed] .sprout-agent-fanout-dot,
+    .sprout-agent-fanout-node[data-status='working'][data-changed] .sprout-agent-fanout-dot::before {
       transition-delay: calc(var(--sprout-agent-fanout-trip) * 0.85);
     }
-    .sprout-agent-fanout-node[data-status="working"]
-      .sprout-agent-fanout-dot::before {
+    .sprout-agent-fanout-node[data-status='working'] .sprout-agent-fanout-dot::before {
       animation: sprout-agent-fanout-breathe 1.6s ease-in-out infinite alternate;
       animation-delay: calc(var(--sprout-agent-fanout-index) * -0.55s);
     }
-    .sprout-agent-fanout-node[data-status="done"][data-changed]
-      .sprout-agent-fanout-dot {
+    .sprout-agent-fanout-node[data-status='done'][data-changed] .sprout-agent-fanout-dot {
       animation: sprout-agent-fanout-pop 420ms var(--sprout-motion-ease);
     }
     .sprout-agent-fanout-root[data-changed] {
@@ -504,8 +510,7 @@
 }
 @keyframes sprout-agent-fanout-ring {
   from {
-    box-shadow: 0 0 0 0
-      color-mix(in oklab, var(--sprout-primary) 28%, transparent);
+    box-shadow: 0 0 0 0 color-mix(in oklab, var(--sprout-primary) 28%, transparent);
   }
   to {
     box-shadow: 0 0 0 14px transparent;
@@ -513,8 +518,7 @@
 }
 @keyframes sprout-agent-fanout-pulse {
   0% {
-    box-shadow: 0 0 0 0
-      color-mix(in oklab, var(--sprout-agent-fanout-color) 45%, transparent);
+    box-shadow: 0 0 0 0 color-mix(in oklab, var(--sprout-agent-fanout-color) 45%, transparent);
   }
   100% {
     box-shadow: 0 0 0 5px transparent;

package/dist/styles/alert-dialog.css

@@ -62,7 +62,7 @@
     background: var(--sprout-secondary);
     color: var(--sprout-text);
   }
-  .sprout-alert-dialog-media > svg:not([class*="size-"]) {
+  .sprout-alert-dialog-media > svg:not([class*='size-']) {
     width: 24px;
     height: 24px;
   }
@@ -86,9 +86,7 @@
     text-wrap: pretty;
   }
   /* Title and description placed straight in the content read as one header. */
-  .sprout-alert-dialog-content
-    > .sprout-alert-dialog-title
-    + .sprout-alert-dialog-description {
+  .sprout-alert-dialog-content > .sprout-alert-dialog-title + .sprout-alert-dialog-description {
     margin-top: -10px;
   }
   .sprout-alert-dialog-description a:not([data-slot]) {
@@ -106,57 +104,45 @@
     display: flex;
     flex-direction: column-reverse;
     gap: 8px;
-    margin: 0 calc(var(--sprout-alert-dialog-padding) * -1)
-      calc(var(--sprout-alert-dialog-padding) * -1);
+    margin: 0 calc(var(--sprout-alert-dialog-padding) * -1) calc(var(--sprout-alert-dialog-padding) * -1);
     padding: 12px 16px;
     border-top: 1px solid var(--sprout-line);
     border-end-start-radius: inherit;
     border-end-end-radius: inherit;
-    background: color-mix(
-      in oklab,
-      var(--sprout-canvas) 70%,
-      var(--sprout-surface)
-    );
+    background: color-mix(in oklab, var(--sprout-canvas) 70%, var(--sprout-surface));
   }
-  .sprout-alert-dialog-content[data-size="sm"] > .sprout-alert-dialog-footer {
+  .sprout-alert-dialog-content[data-size='sm'] > .sprout-alert-dialog-footer {
     display: grid;
     grid-auto-columns: minmax(0, 1fr);
     grid-auto-flow: column;
   }
-  .sprout-alert-dialog-content[data-size="sm"]
-    > .sprout-alert-dialog-footer
-    > .sprout-button {
+  .sprout-alert-dialog-content[data-size='sm'] > .sprout-alert-dialog-footer > .sprout-button {
     min-width: 0;
   }
 
   @media (min-width: 40rem) {
-    .sprout-alert-dialog-content[data-size="default"] {
+    .sprout-alert-dialog-content[data-size='default'] {
       max-width: 24rem;
     }
-    .sprout-alert-dialog-content[data-size="default"]
-      > .sprout-alert-dialog-header {
+    .sprout-alert-dialog-content[data-size='default'] > .sprout-alert-dialog-header {
       justify-items: start;
       text-align: start;
     }
-    .sprout-alert-dialog-content[data-size="default"]
-      > .sprout-alert-dialog-header:has(> .sprout-alert-dialog-media) {
+    .sprout-alert-dialog-content[data-size='default'] > .sprout-alert-dialog-header:has(> .sprout-alert-dialog-media) {
       grid-template-columns: auto minmax(0, 1fr);
       grid-template-rows: auto 1fr;
       column-gap: 16px;
     }
-    .sprout-alert-dialog-content[data-size="default"]
-      > .sprout-alert-dialog-header
-      > .sprout-alert-dialog-media {
+    .sprout-alert-dialog-content[data-size='default'] > .sprout-alert-dialog-header > .sprout-alert-dialog-media {
       grid-row: span 2;
       margin-bottom: 0;
     }
-    .sprout-alert-dialog-content[data-size="default"]
+    .sprout-alert-dialog-content[data-size='default']
       > .sprout-alert-dialog-header:has(> .sprout-alert-dialog-media)
       > :not(.sprout-alert-dialog-media) {
       grid-column-start: 2;
     }
-    .sprout-alert-dialog-content[data-size="default"]
-      > .sprout-alert-dialog-footer {
+    .sprout-alert-dialog-content[data-size='default'] > .sprout-alert-dialog-footer {
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: flex-end;

package/dist/styles/alert.css

@@ -20,7 +20,7 @@
     text-align: start;
     overflow-wrap: break-word;
   }
-  .sprout-alert:has(> [data-slot="alert-action"]) {
+  .sprout-alert:has(> [data-slot='alert-action']) {
     padding-inline-end: 4.5rem;
   }
 
@@ -35,18 +35,18 @@
     flex-shrink: 0;
     pointer-events: none;
   }
-  .sprout-alert > svg:not([class*="size-"]) {
+  .sprout-alert > svg:not([class*='size-']) {
     width: 16px;
     height: 16px;
   }
-  .sprout-alert:has(> svg) > :not(svg, [data-slot="alert-action"]) {
+  .sprout-alert:has(> svg) > :not(svg, [data-slot='alert-action']) {
     grid-column-start: 2;
   }
 
   .sprout-alert > :is(p, pre) {
     margin: 0;
   }
-  .sprout-alert > [data-slot="button"] {
+  .sprout-alert > [data-slot='button'] {
     justify-self: start;
     margin-top: 6px;
   }
@@ -68,12 +68,12 @@
   .sprout-alert-description p:not(:last-child) {
     margin-bottom: 1rem;
   }
-  .sprout-alert-description > [data-slot="button"]:not([data-variant="link"]) {
+  .sprout-alert-description > [data-slot='button']:not([data-variant='link']) {
     display: flex;
     width: fit-content;
     margin-top: 8px;
   }
-  .sprout-alert-description > [data-slot="button"][data-variant="link"] {
+  .sprout-alert-description > [data-slot='button'][data-variant='link'] {
     height: auto;
     margin-inline-start: 4px;
     padding: 0;
@@ -86,8 +86,7 @@
     text-decoration: underline;
     text-underline-offset: 3px;
   }
-  :is(.sprout-alert-title, .sprout-alert-description)
-    a:not([data-slot]):focus-visible {
+  :is(.sprout-alert-title, .sprout-alert-description) a:not([data-slot]):focus-visible {
     outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
     outline-offset: 0;
   }
@@ -110,13 +109,10 @@
   }
 
   @media (hover: hover) {
-    :is(.sprout-alert-title, .sprout-alert-description)
-      a:not([data-slot]):hover {
+    :is(.sprout-alert-title, .sprout-alert-description) a:not([data-slot]):hover {
       color: var(--sprout-text);
     }
-    .sprout-alert-destructive
-      :is(.sprout-alert-title, .sprout-alert-description)
-      a:not([data-slot]):hover {
+    .sprout-alert-destructive :is(.sprout-alert-title, .sprout-alert-description) a:not([data-slot]):hover {
       color: var(--sprout-danger-hover);
     }
   }
@@ -129,8 +125,7 @@
 
   @media (prefers-reduced-motion: no-preference) {
     .sprout-alert {
-      animation: sprout-alert-in var(--sprout-motion-normal, 180ms)
-        var(--sprout-motion-ease, ease) both;
+      animation: sprout-alert-in var(--sprout-motion-normal, 180ms) var(--sprout-motion-ease, ease) both;
       transition:
         color var(--sprout-motion-fast) ease-out,
         border-color var(--sprout-motion-fast) ease-out;