@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/internal/charts/timeline.js

@@ -0,0 +1,287 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Bar, BarChart, CartesianGrid, Rectangle, ReferenceArea, ReferenceLine, XAxis, YAxis } from 'recharts';
+import { Badge } from '../../components/badge.js';
+import { Button } from '../../components/button.js';
+import { Skeleton } from '../../components/skeleton.js';
+import { StatePanel } from '../state-panel.js';
+import { cn } from '../classes.js';
+import { ChartContainer, ChartLegend, ChartTooltip, ChartTooltipContent, chartColor, configLegend, dayLabel, quietAxis, seriesConfig, tooltipCursor, } from '../chart-kit.js';
+import { DAY, dayTime, isCalendarDate, plainSpaces, wallClock } from './timeline-dates.js';
+const AXIS = 40;
+const read = (value) => {
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? { time: value, date: false } : null;
+    if (typeof value !== 'string' || !value)
+        return null;
+    if (isCalendarDate(value))
+        return { time: dayTime(value), date: true };
+    const time = Date.parse(value);
+    return Number.isNaN(time) ? null : { time, date: false };
+};
+const clipText = {
+    start: 'Starts before window',
+    end: 'Ends after window',
+    both: 'Runs past window',
+};
+const dateFormat = (locale) => new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' });
+const timeFormat = (locale, timeZone) => new Intl.DateTimeFormat(locale, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZone,
+});
+/** A mark's dates in words, like "1–9 Oct 2026". */
+function datesText(mark, hasEnd, locale, timeZone) {
+    return plainSpaces(rawDatesText(mark, hasEnd, locale, timeZone));
+}
+function rawDatesText(mark, hasEnd, locale, timeZone) {
+    const format = mark.from.date ? dateFormat(locale) : timeFormat(locale, timeZone);
+    const start = format.format(mark.from.time);
+    if (mark.kind === 'reversed' && mark.to)
+        return `Starts ${start}, ends ${format.format(mark.to.time)}`;
+    if (!mark.to)
+        return hasEnd ? `${start}, no end` : start;
+    if (mark.to.time === mark.from.time)
+        return start;
+    return format.formatRange(mark.from.time, mark.to.time);
+}
+/** Saturdays and Sundays in a window of a month or less, as [from, to] times. */
+function weekends(from, to) {
+    if (to - from > 31 * DAY)
+        return [];
+    const bands = [];
+    for (let day = from; day < to; day += DAY) {
+        const weekday = new Date(day).getUTCDay();
+        if (weekday === 6 || (weekday === 0 && day === from))
+            bands.push([day, Math.min(to, day + (weekday === 6 ? 2 : 1) * DAY)]);
+    }
+    return bands;
+}
+const weekLength = (from, to) => to - from <= 7 * DAY;
+/** Tick times for a window: the middle of each day in a week, weekly in a month, twice a month in a quarter. */
+function windowTicks(from, to) {
+    if (weekLength(from, to))
+        return Array.from({ length: Math.round((to - from) / DAY) }, (_, i) => from + (i + 0.5) * DAY);
+    const days = Math.round((to - from) / DAY);
+    const ticks = [];
+    for (let day = from; day <= to; day += DAY) {
+        const date = new Date(day).getUTCDate();
+        if (days <= 31 ? (date - 1) % 7 === 0 : date === 1 || date === 15)
+            ticks.push(day);
+    }
+    return ticks;
+}
+/** A week tick, like "Mon 12": weekday first in every locale so the days scan down one edge. */
+function weekdayTick(value, locale) {
+    const parts = new Intl.DateTimeFormat(locale, { weekday: 'short', day: 'numeric', timeZone: 'UTC' }).formatToParts(value);
+    const part = (type) => parts.find(item => item.type === type)?.value ?? '';
+    return `${part('weekday')} ${part('day')}`;
+}
+const diamond = (cx, cy) => `M${cx} ${cy - 6}L${cx + 6} ${cy}L${cx} ${cy + 6}L${cx - 6} ${cy}Z`;
+/** Bars for ranges, cut ends squared with a chevron; diamonds for points. */
+function markShape(props) {
+    const mark = props.payload;
+    const { x = 0, y = 0, width = 0, height = 0 } = props;
+    const cy = y + height / 2;
+    if (mark.kind !== 'range')
+        return (_jsx("path", { className: "sprout-timeline-point", "data-kind": mark.kind, d: diamond(x, cy), fill: mark.kind === 'reversed' ? 'var(--sprout-surface)' : mark.fill, stroke: mark.kind === 'reversed' ? 'var(--sprout-warning)' : 'var(--sprout-surface)', strokeWidth: mark.kind === 'reversed' ? 2 : 1 }));
+    if (!mark.clip)
+        return _jsx(Rectangle, { ...props, fill: mark.fill });
+    const left = mark.clip !== 'end';
+    const right = mark.clip !== 'start';
+    const radius = [left ? 0 : 3, right ? 0 : 3, right ? 0 : 3, left ? 0 : 3];
+    const room = width >= 16;
+    return (_jsxs("g", { className: "sprout-timeline-clipped", "data-clip": mark.clip, children: [_jsx(Rectangle, { ...props, radius: radius, fill: mark.fill }), room && left ? (_jsx("path", { className: "sprout-timeline-chevron", d: `M${x + 8} ${cy - 4}L${x + 4} ${cy}L${x + 8} ${cy + 4}` })) : null, room && right ? (_jsx("path", { className: "sprout-timeline-chevron", d: `M${x + width - 8} ${cy - 4}L${x + width - 4} ${cy}L${x + width - 8} ${cy + 4}` })) : null] }));
+}
+function TodayLabel({ viewBox }) {
+    const x = viewBox?.x ?? 0;
+    const y = viewBox?.y ?? 0;
+    return (_jsxs("g", { className: "sprout-timeline-today", children: [_jsx("rect", { x: x - 21, y: y - AXIS + 2, width: 42, height: 16, rx: 8 }), _jsx("text", { x: x, y: y - AXIS + 10, textAnchor: "middle", dominantBaseline: "central", children: "Today" })] }));
+}
+const plural = (count) => (Number(String(count).replaceAll(',', '')) === 1 ? 'row' : 'rows');
+const focusable = 'a[href], button, input, textarea, [tabindex]';
+/**
+ * Gives only the active row's actions a place in the tab order, so the list
+ * is one tab stop and Tab from a row reaches its own actions.
+ */
+function syncActions(list, active) {
+    list.querySelectorAll('[data-slot="timeline-row"]').forEach((row, index) => {
+        for (const element of row.querySelectorAll(`[data-slot="timeline-row-actions"] :is(${focusable})`)) {
+            const saved = element.dataset.sproutTabindex;
+            if (index === active) {
+                if (saved === undefined)
+                    continue;
+                if (saved)
+                    element.setAttribute('tabindex', saved);
+                else
+                    element.removeAttribute('tabindex');
+                delete element.dataset.sproutTabindex;
+            }
+            else if (saved === undefined) {
+                element.dataset.sproutTabindex = element.getAttribute('tabindex') ?? '';
+                element.tabIndex = -1;
+            }
+        }
+    });
+}
+/**
+ * Rows as bars on a time axis, like a project plan. A row with only a start
+ * is a diamond. Give it a `window`, `renderLabel`, `renderActions`, or
+ * `onRowOpen` and it becomes a record timeline: a list of titles and dates
+ * in words beside the chart, in start order, with one tab stop and arrow
+ * keys. Without them it is a plain chart with names on the axis, one 32px
+ * row per task, colored by `seriesKey`.
+ */
+export function TimelineChart({ rows, category, start, end, seriesKey, series = [], locale, window, today, timeZone, rowKey, renderLabel, renderActions, onRowOpen, undated, notice, status = 'ready', error, onRetry, empty, title = 'Timeline', className, }) {
+    const record = Boolean(window || renderLabel || renderActions || onRowOpen);
+    const zoned = record || timeZone !== undefined;
+    const config = useMemo(() => seriesConfig(series), [series]);
+    const domain = useMemo(() => (window ? [dayTime(window.start), dayTime(window.end) + DAY] : undefined), [window]);
+    const marks = useMemo(() => {
+        const at = (when) => (when.date || !zoned ? when.time : wallClock(when.time, timeZone));
+        const list = [];
+        rows.forEach((row, index) => {
+            const from = read(row[start]);
+            if (!from)
+                return;
+            const to = end ? read(row[end]) : null;
+            const key = seriesKey ? String(row[seriesKey] ?? '') : '';
+            const a = at(from);
+            const kind = !to ? 'point' : at(to) < a ? 'reversed' : 'range';
+            let range;
+            if (kind === 'range')
+                range = [a, at(to) + (record && to.date ? DAY : 0)];
+            else {
+                const point = a + (record && from.date ? DAY / 2 : 0);
+                range = [point, point];
+            }
+            let clip;
+            if (domain) {
+                const [low, high] = domain;
+                if (kind === 'range' ? range[1] <= low || range[0] >= high : range[0] < low || range[0] >= high)
+                    return;
+                const cutStart = range[0] < low;
+                const cutEnd = range[1] > high;
+                clip = cutStart && cutEnd ? 'both' : cutStart ? 'start' : cutEnd ? 'end' : undefined;
+                range = [Math.max(range[0], low), Math.min(range[1], high)];
+            }
+            list.push({
+                row,
+                id: rowKey ? String(row[rowKey] ?? index) : String(index),
+                name: String(row[category] ?? ''),
+                key,
+                fill: series.some(item => item.key === key) ? chartColor(key) : 'var(--sprout-chart-1)',
+                kind,
+                range,
+                clip,
+                startsAt: a,
+                from,
+                to,
+            });
+        });
+        if (record)
+            list.sort((x, y) => x.startsAt - y.startsAt);
+        return list;
+    }, [rows, category, start, end, seriesKey, series, rowKey, domain, record, zoned, timeZone]);
+    const date = (value) => dayLabel(value, locale);
+    const todayAt = today && isCalendarDate(today) ? dayTime(today) + DAY / 2 : undefined;
+    if (!record)
+        return (_jsx(ChartContainer, { "data-variant": "timeline", className: cn('sprout-chart-timeline', className), style: { height: `${marks.length * 2 + (series.length ? 5 : 3)}rem` }, config: config, children: _jsxs(BarChart, { data: marks, accessibilityLayer: true, title: title, layout: "vertical", barCategoryGap: "28%", children: [_jsx(CartesianGrid, { horizontal: false }), _jsx(XAxis, { type: "number", scale: "time", domain: domain ?? ['dataMin', 'dataMax'], tickFormatter: date, ...quietAxis, minTickGap: 24 }), _jsx(YAxis, { type: "category", dataKey: "name", width: "auto", ...quietAxis, interval: 0 }), _jsx(ChartTooltip, { cursor: tooltipCursor, content: props => (_jsx(ChartTooltipContent, { active: props.active, label: props.label, nameKey: "key", payload: props.payload?.map(item => {
+                                const [from, to] = item.payload.range;
+                                return {
+                                    ...item,
+                                    name: item.payload.key,
+                                    value: from === to ? date(from) : `${date(from)} – ${date(to)}`,
+                                };
+                            }) })) }), series.length ? _jsx(ChartLegend, { content: configLegend(config) }) : null, todayAt === undefined ? null : (_jsx(ReferenceLine, { x: todayAt, stroke: "var(--sprout-chart-1)", strokeDasharray: "3 3" })), _jsx(Bar, { dataKey: "range", radius: 3, shape: markShape, isAnimationActive: false })] }) }));
+    return (_jsx(RecordTimeline, { marks: marks, config: config, series: series, hasEnd: Boolean(end), domain: domain, window: window, todayAt: todayAt, locale: locale, timeZone: timeZone, renderLabel: renderLabel, renderActions: renderActions, onRowOpen: onRowOpen, undated: undated, notice: notice, status: status, error: error, onRetry: onRetry, empty: empty, title: title, className: className }));
+}
+function RecordTimeline({ marks, config, series, hasEnd, domain, window, todayAt, locale, timeZone, renderLabel, renderActions, onRowOpen, undated, notice, status, error, onRetry, empty, title, className, }) {
+    const id = useId();
+    const listRef = useRef(null);
+    const [activeId, setActiveId] = useState(null);
+    const [hot, setHot] = useState(null);
+    const found = marks.findIndex(mark => mark.id === activeId);
+    const active = found === -1 ? 0 : found;
+    useEffect(() => {
+        if (listRef.current)
+            syncActions(listRef.current, active);
+    });
+    const date = (value) => dayLabel(value, locale);
+    const dates = marks.map(mark => datesText(mark, hasEnd, locale, timeZone));
+    const loading = status === 'loading';
+    const style = { '--sprout-timeline-count': Math.max(marks.length, 1) };
+    const focusRow = (index) => {
+        const next = marks[index];
+        if (!next)
+            return;
+        setActiveId(next.id);
+        listRef.current?.querySelectorAll('[data-slot="timeline-row"]')[index]?.focus();
+    };
+    const onKeyDown = (event, index) => {
+        if (event.target !== event.currentTarget)
+            return;
+        const moves = {
+            ArrowDown: index + 1,
+            ArrowUp: index - 1,
+            Home: 0,
+            End: marks.length - 1,
+        };
+        const next = moves[event.key];
+        if (next !== undefined) {
+            event.preventDefault();
+            focusRow(Math.min(Math.max(next, 0), marks.length - 1));
+        }
+        else if (event.key === 'Enter' && onRowOpen) {
+            event.preventDefault();
+            onRowOpen(marks[index].row);
+        }
+    };
+    const onRowClick = (event, index) => {
+        if (event.target.closest('[data-slot="timeline-row-actions"]'))
+            return;
+        onRowOpen?.(marks[index].row);
+    };
+    const windowText = () => {
+        if (!window)
+            return 'No rows to show.';
+        const format = dateFormat(locale);
+        return `Nothing between ${format.format(dayTime(window.start))} and ${format.format(dayTime(window.end))}.`;
+    };
+    let body;
+    if (status === 'error')
+        body = (_jsx(StatePanel, { kind: "error", heading: "h3", title: "Couldn't load the timeline", description: error ?? 'Something went wrong while reading these rows.', className: "sprout-timeline-state", children: onRetry ? (_jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: "Try again" })) : null }));
+    else if (!marks.length && loading)
+        body = (_jsxs("div", { role: "status", "aria-label": "Loading timeline", className: "sprout-timeline-grid", "data-skeleton": "", children: [_jsx("div", { className: "sprout-timeline-labels", "aria-hidden": "true", children: [0, 1, 2, 3, 4].map(index => (_jsx("div", { className: "sprout-timeline-row", children: _jsxs("div", { className: "sprout-timeline-label", children: [_jsx(Skeleton, { style: { width: `${70 - index * 7}%` } }), _jsx(Skeleton, { style: { width: '45%', height: 10 } })] }) }, index))) }), _jsx("div", { className: "sprout-timeline-plot", "aria-hidden": "true", children: [0, 1, 2, 3, 4].map(index => (_jsx("div", { className: "sprout-timeline-skeleton-band", children: _jsx(Skeleton, { style: { marginLeft: `${(index * 17) % 60}%`, width: `${20 + ((index * 23) % 30)}%` } }) }, index))) })] }));
+    else if (!marks.length)
+        body = empty ?? (_jsx(StatePanel, { kind: "empty", heading: "h3", title: "Nothing in this window", description: windowText(), className: "sprout-timeline-state" }));
+    else
+        body = (_jsxs("div", { className: "sprout-timeline-grid", onMouseLeave: () => setHot(null), children: [_jsx("ol", { ref: listRef, "aria-label": title, className: "sprout-timeline-labels", onBlur: event => {
+                        if (!event.currentTarget.contains(event.relatedTarget))
+                            setHot(null);
+                    }, children: marks.map((mark, index) => (_jsxs("li", { "data-slot": "timeline-row", "data-active": index === active || undefined, "data-hot": index === hot || undefined, "data-openable": onRowOpen ? '' : undefined, tabIndex: index === active ? 0 : -1, "aria-labelledby": `${id}-${index}`, className: "sprout-timeline-row", onKeyDown: event => onKeyDown(event, index), onClick: event => onRowClick(event, index), onFocus: () => {
+                            setActiveId(mark.id);
+                            setHot(index);
+                        }, onMouseEnter: () => setHot(index), children: [_jsxs("div", { className: "sprout-timeline-label", id: `${id}-${index}`, children: [_jsxs("span", { className: "sprout-timeline-label-head", children: [_jsx("span", { className: "sprout-timeline-label-title", children: renderLabel ? renderLabel(mark.row) : mark.name }), mark.kind === 'reversed' ? (_jsx(Badge, { variant: "warning", size: "chip", className: "sprout-timeline-label-marker", children: "End before start" })) : null] }), _jsxs("span", { className: "sprout-timeline-label-dates", children: [mark.kind === 'reversed' ? (_jsx("span", { className: "sprout-timeline-label-warning", children: "End before start" })) : null, _jsx("span", { className: "sprout-timeline-label-text", children: dates[index] }), mark.clip ? _jsx("span", { className: "sprout-timeline-label-clip", children: clipText[mark.clip] }) : null] })] }), renderActions ? (_jsx("div", { "data-slot": "timeline-row-actions", className: "sprout-timeline-row-actions", children: renderActions(mark.row) })) : null] }, mark.id))) }), _jsxs("div", { className: "sprout-timeline-plot", "aria-hidden": "true", children: [hot === null ? null : (_jsx("div", { className: "sprout-timeline-band", style: { '--sprout-timeline-index': hot } })), _jsx(ChartContainer, { "data-variant": "timeline", className: "sprout-chart-timeline sprout-timeline-chart", config: config, initialDimension: { width: 640, height: AXIS + marks.length * 44 }, children: _jsxs(BarChart, { data: marks, layout: "vertical", margin: { top: 0, right: 16, bottom: 0, left: 16 }, barSize: 16, accessibilityLayer: false, onMouseMove: state => {
+                                    const index = Number(state.activeTooltipIndex);
+                                    setHot(Number.isInteger(index) && state.activeTooltipIndex != null ? index : null);
+                                }, children: [_jsx(CartesianGrid, { horizontal: false, vertical: !(domain && weekLength(...domain)) }), domain
+                                        ? weekends(...domain).map(([x1, x2]) => (_jsx(ReferenceArea, { x1: x1, x2: x2, ifOverflow: "hidden", className: "sprout-timeline-weekend", fill: "var(--sprout-hover)", fillOpacity: 0.4, stroke: "none" }, x1)))
+                                        : null, _jsx(XAxis, { type: "number", scale: "time", orientation: "top", height: AXIS, domain: domain ?? ['dataMin', 'dataMax'], allowDataOverflow: true, ticks: domain ? windowTicks(...domain) : undefined, tickFormatter: domain && weekLength(...domain) ? (value) => weekdayTick(value, locale) : date, interval: "equidistantPreserveStart", ...quietAxis, tickMargin: 6, minTickGap: 32 }), _jsx(YAxis, { type: "category", dataKey: "id", hide: true }), _jsx(ChartTooltip, { cursor: false, content: props => (_jsx(ChartTooltipContent, { active: props.active, label: props.payload?.[0]?.payload?.name, nameKey: "key", hideIndicator: !series.length, payload: props.payload?.map(item => {
+                                                const mark = item.payload;
+                                                return {
+                                                    ...item,
+                                                    name: mark.key,
+                                                    value: dates[marks.indexOf(mark)] ?? '',
+                                                };
+                                            }) })) }), todayAt === undefined ? null : (_jsx(ReferenceLine, { x: todayAt, stroke: "var(--sprout-chart-1)", strokeWidth: 1.5, ifOverflow: "discard", label: _jsx(TodayLabel, {}) })), _jsx(Bar, { dataKey: "range", radius: 3, shape: markShape, isAnimationActive: false, onClick: (_, index) => {
+                                            const mark = marks[index];
+                                            if (mark)
+                                                onRowOpen?.(mark.row);
+                                        } })] }) })] })] }));
+    return (_jsxs("div", { "data-slot": "timeline", "data-status": status, "aria-busy": loading || undefined, className: cn('sprout-timeline', className), style: style, children: [notice ? _jsx("div", { className: "sprout-timeline-notice", children: notice }) : null, body, series.length && marks.length && status !== 'error' ? (_jsx("div", { "data-slot": "chart-legend", className: "sprout-chart-legend sprout-timeline-legend", children: series.map(item => (_jsxs("div", { className: "sprout-chart-legend-item", children: [_jsx("span", { "aria-hidden": "true", className: "sprout-chart-legend-swatch", style: { backgroundColor: item.color } }), item.label] }, item.key))) })) : null, undated && status !== 'error' ? (_jsxs("div", { "data-slot": "timeline-undated", className: "sprout-timeline-undated", children: [_jsx("span", { children: `${undated.count} ${plural(undated.count)} without ${undated.field}` }), undated.action] })) : null] }));
+}

package/dist/internal/classes.d.ts

@@ -1,3 +1,3 @@
-import { type ClassValue } from "clsx";
+import { type ClassValue } from 'clsx';
 export declare function cn(...values: ClassValue[]): string;
 export declare function stateClassName<State>(base: string, className: string | ((state: State) => string | undefined) | undefined): string | ((state: State) => string);

package/dist/internal/classes.js

@@ -1,12 +1,12 @@
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
 const merge = extendTailwindMerge({
     extend: {
         theme: {
-            text: ["sprout-xs", "sprout-sm", "sprout-base"],
-            font: ["sprout"],
-            radius: ["sprout-control", "sprout-panel"],
-            shadow: ["sprout-control", "sprout-panel", "sprout-overlay"],
+            text: ['sprout-xs', 'sprout-sm', 'sprout-base'],
+            font: ['sprout'],
+            radius: ['sprout-control', 'sprout-panel'],
+            shadow: ['sprout-control', 'sprout-panel', 'sprout-overlay'],
         },
     },
 });
@@ -14,7 +14,5 @@ export function cn(...values) {
     return merge(clsx(values));
 }
 export function stateClassName(base, className) {
-    return typeof className === "function"
-        ? (state) => cn(base, className(state))
-        : cn(base, className);
+    return typeof className === 'function' ? (state) => cn(base, className(state)) : cn(base, className);
 }

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

@@ -1,4 +1,4 @@
-import type { ThemedToken } from "shiki/core";
-import type { CodeLanguage } from "./languages.js";
+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

@@ -1,16 +1,16 @@
-import { useEffect, useMemo, useState } from "react";
-import { codeTokens, embeddedLanguages, isLanguageReady, loadCodeLanguage, maxHighlightedLength, } from "./syntax.js";
+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(" ");
+    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);
+        void Promise.all(key.split(' ').map(name => loadCodeLanguage(name))).then(() => live && setLoaded(value => value + 1), () => undefined);
         return () => {
             live = false;
         };
@@ -20,15 +20,15 @@ export function useCodeTokens(code, language) {
     [code, language, highlightable, loaded, key]);
 }
 const fontStyleClasses = [
-    [1, "sprout-syntax-italic"],
-    [2, "sprout-syntax-bold"],
-    [4, "sprout-syntax-underline"],
+    [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}`] : [];
+    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;
+    return classes.length ? classes.join(' ') : undefined;
 }

package/dist/internal/fieldset.d.ts

@@ -1,4 +1,4 @@
-import { type Ref } from "react";
+import { type Ref } from 'react';
 /**
  * Base UI roots are spans, which `<fieldset disabled>` does not disable. Track the
  * enclosing fieldsets so the control can pass a real `disabled` to Base UI.

package/dist/internal/fieldset.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useState } from 'react';
 /**
  * Base UI roots are spans, which `<fieldset disabled>` does not disable. Track the
  * enclosing fieldsets so the control can pass a real `disabled` to Base UI.
@@ -6,29 +6,29 @@ import { useCallback, useState } from "react";
 export function useFieldsetDisabled(ref) {
     const [disabled, setDisabled] = useState(false);
     const mergedRef = useCallback((node) => {
-        if (typeof ref === "function")
+        if (typeof ref === 'function')
             ref(node);
         else if (ref)
             ref.current = node;
         if (!node)
             return;
         const fieldsets = [];
-        for (let fieldset = node.closest("fieldset"); fieldset; fieldset = fieldset.parentElement?.closest("fieldset") ?? null) {
+        for (let fieldset = node.closest('fieldset'); fieldset; fieldset = fieldset.parentElement?.closest('fieldset') ?? null) {
             fieldsets.push(fieldset);
         }
         if (fieldsets.length === 0)
             return;
-        const sync = () => setDisabled(node.closest("fieldset:disabled") !== null);
+        const sync = () => setDisabled(node.closest('fieldset:disabled') !== null);
         sync();
         const observer = new MutationObserver(sync);
         for (const fieldset of fieldsets)
             observer.observe(fieldset, {
                 attributes: true,
-                attributeFilter: ["disabled"],
+                attributeFilter: ['disabled'],
             });
         return () => {
             observer.disconnect();
-            if (typeof ref === "function")
+            if (typeof ref === 'function')
                 ref(null);
             else if (ref)
                 ref.current = null;

package/dist/internal/file-kind.d.ts

@@ -1,4 +1,4 @@
-export type FileKind = "image" | "pdf" | "json" | "text" | "markdown" | "code" | "sheet" | "document" | "slides" | "google" | "unsupported";
+export type FileKind = 'image' | 'pdf' | 'json' | 'text' | 'markdown' | 'code' | 'sheet' | 'document' | 'slides' | 'google' | 'unsupported';
 export declare const defaultFileAccept: string;
 export declare function fileKind(name: string, mediaType: string): FileKind;
 export declare function formatFileSize(bytes: number): string;

package/dist/internal/file-kind.js

@@ -1,62 +1,54 @@
-import { languageForFilename } from "./syntax.js";
-export const defaultFileAccept = ".docx,.xlsx,.xls,.csv,.tsv,.pptx,.ppt,.pdf,.json,.txt,.md,.markdown,.gdoc,.gsheet,.gslides,image/*," +
-    ".js,.jsx,.ts,.tsx,.py,.rb,.go,.rs,.java,.kt,.swift,.c,.h,.cpp,.cs,.php,.sh,.sql,.yaml,.yml,.toml,.xml,.html,.css,.scss,.log";
+import { languageForFilename } from './syntax.js';
+export const defaultFileAccept = '.docx,.xlsx,.xls,.csv,.tsv,.pptx,.ppt,.pdf,.json,.txt,.md,.markdown,.gdoc,.gsheet,.gslides,image/*,' +
+    '.js,.jsx,.ts,.tsx,.py,.rb,.go,.rs,.java,.kt,.swift,.c,.h,.cpp,.cs,.php,.sh,.sql,.yaml,.yml,.toml,.xml,.html,.css,.scss,.log';
 const imageExtensions = [
-    "png",
-    "jpg",
-    "jpeg",
-    "gif",
-    "webp",
-    "avif",
-    "svg",
-    "bmp",
-    "ico",
-    "heic",
-    "heif",
-    "tif",
-    "tiff",
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'webp',
+    'avif',
+    'svg',
+    'bmp',
+    'ico',
+    'heic',
+    'heif',
+    'tif',
+    'tiff',
 ];
 const sheetTypes = [
-    "application/vnd.ms-excel",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    "text/csv",
+    'application/vnd.ms-excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'text/csv',
 ];
 export function fileKind(name, mediaType) {
-    const extension = name.toLowerCase().split(".").at(-1) ?? "";
-    if (mediaType.startsWith("image/") || imageExtensions.includes(extension))
-        return "image";
-    if (mediaType.startsWith("application/vnd.google-apps.") ||
-        ["gdoc", "gsheet", "gslides"].includes(extension))
-        return "google";
-    if (extension === "pdf" || mediaType === "application/pdf")
-        return "pdf";
-    if (extension === "json" || mediaType === "application/json")
-        return "json";
-    if (["md", "markdown"].includes(extension) || mediaType === "text/markdown")
-        return "markdown";
-    if (["xls", "xlsx", "csv", "tsv"].includes(extension) ||
-        sheetTypes.includes(mediaType))
-        return "sheet";
-    if (extension === "docx" ||
-        mediaType ===
-            "application/vnd.openxmlformats-officedocument.wordprocessingml.document")
-        return "document";
-    if (extension === "pptx" ||
-        mediaType ===
-            "application/vnd.openxmlformats-officedocument.presentationml.presentation")
-        return "slides";
+    const extension = name.toLowerCase().split('.').at(-1) ?? '';
+    if (mediaType.startsWith('image/') || imageExtensions.includes(extension))
+        return 'image';
+    if (mediaType.startsWith('application/vnd.google-apps.') || ['gdoc', 'gsheet', 'gslides'].includes(extension))
+        return 'google';
+    if (extension === 'pdf' || mediaType === 'application/pdf')
+        return 'pdf';
+    if (extension === 'json' || mediaType === 'application/json')
+        return 'json';
+    if (['md', 'markdown'].includes(extension) || mediaType === 'text/markdown')
+        return 'markdown';
+    if (['xls', 'xlsx', 'csv', 'tsv'].includes(extension) || sheetTypes.includes(mediaType))
+        return 'sheet';
+    if (extension === 'docx' || mediaType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')
+        return 'document';
+    if (extension === 'pptx' || mediaType === 'application/vnd.openxmlformats-officedocument.presentationml.presentation')
+        return 'slides';
     if (languageForFilename(name))
-        return "code";
-    if (mediaType.startsWith("text/") || extension === "txt")
-        return "text";
-    return "unsupported";
+        return 'code';
+    if (mediaType.startsWith('text/') || extension === 'txt')
+        return 'text';
+    return 'unsupported';
 }
 export function formatFileSize(bytes) {
     if (bytes === 0)
-        return "0 bytes";
+        return '0 bytes';
     if (bytes >= 1024 ** 3)
-        return `${(bytes / 1024 ** 3).toFixed(1).replace(/\.0$/, "")} GB`;
-    return bytes < 1024 * 1024
-        ? `${Math.max(1, Math.round(bytes / 1024))} KB`
-        : `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+        return `${(bytes / 1024 ** 3).toFixed(1).replace(/\.0$/, '')} GB`;
+    return bytes < 1024 * 1024 ? `${Math.max(1, Math.round(bytes / 1024))} KB` : `${(bytes / 1024 / 1024).toFixed(1)} MB`;
 }

package/dist/internal/flow.d.ts

@@ -1,5 +1,5 @@
-import { type FitViewOptions, type Node } from "@xyflow/react";
-import { type KeyboardEvent } from "react";
+import { type FitViewOptions, type Node } from '@xyflow/react';
+import { type KeyboardEvent } from 'react';
 export declare const flowMinZoom = 0.2;
 export declare const flowMaxZoom = 1.5;
 export declare function useViewportMobile(): boolean;
@@ -8,12 +8,12 @@ export declare const motion: (ms: number) => number;
  * Refits whenever the pane resizes or the nodes change. The canvas panel
  * animates open, so the first fit sees a narrower pane than the final one.
  */
-export declare function FitOnResize({ nodes, fit, }: {
+export declare function FitOnResize({ nodes, fit }: {
     nodes: readonly Node[];
     fit: FitViewOptions;
 }): null;
 export declare function ZoomControls({ position, fit, className, slot, }: {
-    position: "top-right" | "bottom-right";
+    position: 'top-right' | 'bottom-right';
     fit: FitViewOptions;
     className: string;
     slot: string;