@langgraph-js/ui 5.6.0 → 5.7.1

package/src/chat/tools/visualize_data_with_chart.tsx

@@ -0,0 +1,274 @@
+import { createUITool } from "@langgraph-js/sdk";
+import { z } from "zod";
+import { BarChart3, TrendingUp, PieChart, ScatterChart, AreaChart, Radar, Grid3x3, BarChart } from "lucide-react";
+import {
+    LineChart,
+    Line,
+    BarChart as RechartsBarChart,
+    Bar,
+    PieChart as RechartsPieChart,
+    Pie,
+    Cell,
+    ScatterChart as RechartsScatterChart,
+    Scatter,
+    AreaChart as RechartsAreaChart,
+    Area,
+    RadarChart as RechartsRadarChart,
+    PolarGrid,
+    PolarAngleAxis,
+    PolarRadiusAxis,
+    Radar as RechartsRadar,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    Legend,
+    ResponsiveContainer,
+    ComposedChart,
+} from "recharts";
+
+const VisualizeDataWithChartSchema = {
+    title: z.string().describe("Chart title"),
+    description: z.string().optional().describe("Optional chart description"),
+    chart_type: z.enum(["line", "bar", "pie", "scatter", "area", "radar", "heatmap", "histogram"]).describe("Type of chart to render"),
+    data: z.array(z.record(z.string(), z.any())).describe("Chart data points"),
+    x_axis: z
+        .object({
+            label: z.string().describe("X-axis label"),
+            field: z.string().describe("Data field for X-axis"),
+        })
+        .optional()
+        .describe("X-axis configuration"),
+    y_axis: z
+        .object({
+            label: z.string().describe("Y-axis label"),
+            field: z.string().describe("Data field for Y-axis"),
+        })
+        .optional()
+        .describe("Y-axis configuration"),
+    options: z.record(z.string(), z.any()).optional().describe("Additional chart configuration options"),
+};
+
+const getChartIcon = (chartType: string) => {
+    switch (chartType) {
+        case "line":
+            return TrendingUp;
+        case "bar":
+            return BarChart3;
+        case "pie":
+            return PieChart;
+        case "scatter":
+            return ScatterChart;
+        case "area":
+            return AreaChart;
+        case "radar":
+            return Radar;
+        case "heatmap":
+            return Grid3x3;
+        case "histogram":
+            return BarChart;
+        default:
+            return BarChart3;
+    }
+};
+
+const COLORS = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899", "#84cc16"];
+
+const renderChart = (chartType: string, data: Record<string, any>[], xAxis?: { label: string; field: string }, yAxis?: { label: string; field: string }, options?: Record<string, any>) => {
+    if (!data || data.length === 0) {
+        return <div className="text-sm text-gray-500 p-8 text-center">No data available</div>;
+    }
+
+    const commonProps = {
+        data,
+        margin: { top: 5, right: 30, left: 20, bottom: 5 },
+    };
+
+    switch (chartType) {
+        case "line":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <LineChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && <Line type="monotone" dataKey={yAxis.field} stroke={COLORS[0]} strokeWidth={2} />}
+                    </LineChart>
+                </ResponsiveContainer>
+            );
+
+        case "bar":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsBarChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && <Bar dataKey={yAxis.field} fill={COLORS[0]} />}
+                    </RechartsBarChart>
+                </ResponsiveContainer>
+            );
+
+        case "pie":
+            // Pie chart uses different data structure
+            const pieData =
+                xAxis?.field && yAxis?.field
+                    ? data.map((item) => ({
+                          name: item[xAxis.field],
+                          value: item[yAxis.field],
+                      }))
+                    : data;
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsPieChart>
+                        <Pie
+                            data={pieData}
+                            cx="50%"
+                            cy="50%"
+                            labelLine={false}
+                            label={(props: any) => {
+                                const { name, percent } = props;
+                                return `${name}: ${((percent as number) * 100).toFixed(0)}%`;
+                            }}
+                            outerRadius={120}
+                            fill="#8884d8"
+                            dataKey={yAxis?.field || "value"}
+                        >
+                            {pieData.map((entry, index) => (
+                                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                            ))}
+                        </Pie>
+                        <Tooltip />
+                        <Legend />
+                    </RechartsPieChart>
+                </ResponsiveContainer>
+            );
+
+        case "scatter":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsScatterChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis type="number" dataKey={xAxis?.field || "x"} name={xAxis?.label || "X"} />
+                        <YAxis type="number" dataKey={yAxis?.field || "y"} name={yAxis?.label || "Y"} />
+                        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
+                        <Scatter dataKey={yAxis?.field || "y"} fill={COLORS[0]} />
+                    </RechartsScatterChart>
+                </ResponsiveContainer>
+            );
+
+        case "area":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsAreaChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && <Area type="monotone" dataKey={yAxis.field} stroke={COLORS[0]} fill={COLORS[0]} fillOpacity={0.6} />}
+                    </RechartsAreaChart>
+                </ResponsiveContainer>
+            );
+
+        case "radar":
+            const radarData = data.map((item) => {
+                const result: Record<string, any> = {};
+                if (xAxis?.field) {
+                    result[xAxis.field] = item[xAxis.field];
+                }
+                if (yAxis?.field) {
+                    result[yAxis.field] = item[yAxis.field];
+                }
+                // Include all numeric fields
+                Object.keys(item).forEach((key) => {
+                    if (typeof item[key] === "number" && key !== xAxis?.field && key !== yAxis?.field) {
+                        result[key] = item[key];
+                    }
+                });
+                return result;
+            });
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsRadarChart data={radarData}>
+                        <PolarGrid />
+                        <PolarAngleAxis dataKey={xAxis?.field || "name"} />
+                        <PolarRadiusAxis />
+                        <RechartsRadar name={yAxis?.label || "Value"} dataKey={yAxis?.field || "value"} stroke={COLORS[0]} fill={COLORS[0]} fillOpacity={0.6} />
+                        <Tooltip />
+                        <Legend />
+                    </RechartsRadarChart>
+                </ResponsiveContainer>
+            );
+
+        case "heatmap":
+            // Heatmap is not directly supported by recharts, use a composed chart as approximation
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <ComposedChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && (
+                            <Bar dataKey={yAxis.field} fill={COLORS[0]} radius={[4, 4, 0, 0]}>
+                                {data.map((entry, index) => (
+                                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                                ))}
+                            </Bar>
+                        )}
+                    </ComposedChart>
+                </ResponsiveContainer>
+            );
+
+        case "histogram":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsBarChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && <Bar dataKey={yAxis.field} fill={COLORS[0]} />}
+                    </RechartsBarChart>
+                </ResponsiveContainer>
+            );
+
+        default:
+            return <div className="text-sm text-gray-500 p-8 text-center">Unsupported chart type: {chartType}</div>;
+    }
+};
+
+export const visualize_data_with_chart = createUITool({
+    name: "visualize_data_with_chart",
+    description: "Generate a dynamic chart for data visualization and user review.",
+    parameters: VisualizeDataWithChartSchema,
+    onlyRender: true,
+    render(tool) {
+        const data = tool.getInputRepaired();
+        const ChartIcon = getChartIcon(data.chart_type || "line");
+
+        return (
+            <div className="w-[70%] my-1 border border-gray-200 bg-white shadow-none rounded-xl overflow-hidden">
+                <div className="pb-2 p-3 border-b border-gray-50 bg-gray-50/30">
+                    <div className="flex items-center gap-2">
+                        <div className="w-7 h-7 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center">
+                            <ChartIcon className="w-3.5 h-3.5" />
+                        </div>
+                        <h3 className="text-sm font-medium text-gray-900">{data.title}</h3>
+                    </div>
+                </div>
+                <div className="p-4">
+                    {data.description && <div className="text-sm text-gray-600 mb-4">{data.description}</div>}
+                    <div className="w-full">{renderChart(data.chart_type || "line", (data.data || []) as Record<string, any>[], data.x_axis, data.y_axis, data.options)}</div>
+                </div>
+            </div>
+        );
+    },
+});

package/src/chat/tools/wait_for_user_to_upload_file.tsx

@@ -0,0 +1,324 @@
+import { createUITool, ToolManager } from "@langgraph-js/sdk";
+import { useState, useRef } from "react";
+import { z } from "zod";
+import { UploadCloud, X, File, CheckCircle, AlertCircle, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { TmpFilesClient } from "@/chat/FileUpload";
+
+const WaitForUserToUploadFileSchema = {
+    title: z.string().describe("Title for the upload section"),
+    description: z.string().optional().describe("Optional description text"),
+    accept: z.array(z.string()).optional().describe("Accepted file types (e.g., ['image/*', '.pdf', '.docx'])"),
+    multiple: z.boolean().default(false).describe("Allow multiple file uploads"),
+    max_size_mb: z.number().positive().optional().describe("Maximum file size in MB"),
+    required: z.boolean().default(true).describe("Whether file upload is required"),
+};
+
+interface UploadedFileInfo {
+    file_name: string;
+    file_size: number;
+    file_type: string;
+    file_url: string;
+}
+
+export const wait_for_user_to_upload_file = createUITool({
+    name: "wait_for_user_to_upload_file",
+    description: "Wait for the user to upload one or more files.",
+    parameters: WaitForUserToUploadFileSchema,
+    handler: ToolManager.waitForUIDone,
+    onlyRender: false,
+    render(tool) {
+        const data = tool.getInputRepaired();
+        const [uploadedFiles, setUploadedFiles] = useState<UploadedFileInfo[]>([]);
+        const [uploading, setUploading] = useState(false);
+        const [error, setError] = useState<string>("");
+        const fileInputRef = useRef<HTMLInputElement>(null);
+        const client = new TmpFilesClient();
+        const canInteract = tool.state === "interrupted" || tool.state === "loading";
+
+        const formatFileSize = (bytes: number): string => {
+            if (bytes === 0) return "0 Bytes";
+            const k = 1024;
+            const sizes = ["Bytes", "KB", "MB", "GB"];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+        };
+
+        const validateFile = (file: File): string | null => {
+            // 检查文件大小
+            if (data.max_size_mb) {
+                const maxSizeBytes = data.max_size_mb * 1024 * 1024;
+                if (file.size > maxSizeBytes) {
+                    return `文件大小超过限制 (最大 ${data.max_size_mb}MB)`;
+                }
+            }
+
+            // 检查文件类型
+            if (data.accept && data.accept.length > 0) {
+                const fileType = (file.type || "").toLowerCase();
+                const fileName = (file.name || "").toLowerCase();
+
+                const normalize = (v: string) => v.trim().toLowerCase();
+
+                const matches = data.accept.map(normalize).some((pattern) => {
+                    // 全放行：*/* 或 *
+                    if (pattern === "*/*" || pattern === "*") return true;
+
+                    // 扩展名：.pdf / .docx
+                    if (pattern.startsWith(".")) return fileName.endsWith(pattern);
+
+                    // MIME 前缀：image/* -> image/
+                    if (pattern.includes("/") && pattern.endsWith("/*")) {
+                        const prefix = pattern.slice(0, -1); // keep trailing '/'
+                        return fileType.startsWith(prefix);
+                    }
+
+                    // 精确 MIME：application/pdf
+                    if (pattern.includes("/")) return fileType === pattern;
+
+                    // 兜底：不认识的 pattern（不匹配）
+                    return false;
+                });
+
+                if (!matches) {
+                    return `不支持的文件类型。支持的类型: ${data.accept.join(", ")}`;
+                }
+            }
+
+            return null;
+        };
+
+        const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+            const files = Array.from(event.target.files || []);
+            if (files.length === 0) return;
+
+            setError("");
+            setUploading(true);
+
+            try {
+                const uploadPromises = files.map(async (file) => {
+                    const validationError = validateFile(file);
+                    if (validationError) {
+                        throw new Error(validationError);
+                    }
+
+                    const result = await client.upload(file);
+                    if (!result.data?.url) {
+                        throw new Error("上传失败：未返回文件 URL");
+                    }
+
+                    return {
+                        file_name: file.name,
+                        file_size: file.size,
+                        file_type: file.type || "application/octet-stream",
+                        file_url: result.data.url,
+                    };
+                });
+
+                const uploaded = await Promise.all(uploadPromises);
+
+                if (data.multiple) {
+                    setUploadedFiles((prev) => [...prev, ...uploaded]);
+                } else {
+                    setUploadedFiles(uploaded);
+                }
+
+                // 如果不需要等待用户确认，自动提交
+                if (!data.required || uploaded.length > 0) {
+                    // 自动提交逻辑可以在这里添加
+                }
+            } catch (err) {
+                setError(err instanceof Error ? err.message : "上传失败");
+            } finally {
+                setUploading(false);
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = "";
+                }
+            }
+        };
+
+        const handleRemoveFile = (index: number) => {
+            setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
+        };
+
+        const handleSubmit = () => {
+            if (data.required && uploadedFiles.length === 0) {
+                setError("请至少上传一个文件");
+                return;
+            }
+
+            tool.sendResumeData({
+                /** @ts-ignore */
+                type: "respond",
+                message: JSON.stringify(uploadedFiles),
+            });
+        };
+
+        const handleReset = () => {
+            setUploadedFiles([]);
+            setError("");
+            if (fileInputRef.current) {
+                fileInputRef.current.value = "";
+            }
+        };
+
+        const isSubmitDisabled = !canInteract || (data.required && uploadedFiles.length === 0) || uploading;
+
+        // 完成状态视图
+        if (!canInteract && tool.output) {
+            const outputFiles = typeof tool.output === "string" ? JSON.parse(tool.output) : tool.output;
+            return (
+                <div className="flex flex-col gap-2 my-1 p-3 bg-gray-50/50 border border-gray-200 rounded-xl">
+                    <div className="flex items-center gap-2 text-xs text-gray-500">
+                        <div className="w-5 h-5 rounded-full bg-gray-100 flex items-center justify-center border border-gray-200">
+                            <CheckCircle className="w-3 h-3" />
+                        </div>
+                        <span className="font-medium">Files Uploaded</span>
+
+                        <Button variant="ghost" size="icon" className="h-7 w-7 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full" onClick={handleReset} title="Reset upload">
+                            <X className="h-3.5 w-3.5" />
+                        </Button>
+                    </div>
+
+                    <div className="space-y-2">
+                        <div className="text-sm text-gray-600 pl-1">{data.title}</div>
+                        {Array.isArray(outputFiles) && outputFiles.length > 0 && (
+                            <div className="space-y-1.5">
+                                {outputFiles.map((file: UploadedFileInfo, index: number) => (
+                                    <div key={index} className="flex items-center gap-2 text-sm text-gray-900 bg-white px-3 py-2 rounded-lg border border-gray-200">
+                                        <File className="w-4 h-4 text-blue-500 shrink-0" />
+                                        <div className="flex-1 min-w-0">
+                                            <div className="font-medium truncate">{file.file_name}</div>
+                                            <div className="text-xs text-gray-500">{formatFileSize(file.file_size)}</div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+
+        // 交互状态视图
+        return (
+            <div className="w-full my-1 border border-gray-200 bg-white shadow-none rounded-xl overflow-hidden">
+                <div className="pb-2 p-3 border-b border-gray-50 bg-gray-50/30">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <div className="w-7 h-7 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center">
+                                <UploadCloud className="w-3.5 h-3.5" />
+                            </div>
+                            <h3 className="text-sm font-medium text-gray-900">File Upload Required</h3> {tool.state}
+                        </div>
+                        {uploadedFiles.length > 0 && (
+                            <Button variant="ghost" size="icon" className="h-7 w-7 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full" onClick={handleReset} title="Reset upload">
+                                <X className="h-3.5 w-3.5" />
+                            </Button>
+                        )}
+                    </div>
+                </div>
+                <div className="p-3 space-y-3">
+                    <div>
+                        <label
+                            className={cn(
+                                "flex flex-col items-center justify-center w-full min-h-[180px] border-2 border-dashed rounded-lg cursor-pointer transition-colors p-6",
+                                uploading ? "border-blue-300 bg-blue-50/50" : "border-gray-300 bg-gray-50/50 hover:border-blue-400 hover:bg-blue-50/30",
+                                !canInteract && "opacity-50 cursor-not-allowed"
+                            )}
+                        >
+                            <div className="flex flex-col items-center justify-center w-full space-y-3">
+                                {uploading ? (
+                                    <>
+                                        <Loader2 className="w-10 h-10 text-blue-600 animate-spin" />
+                                        <p className="text-sm font-medium text-gray-700">上传中...</p>
+                                    </>
+                                ) : (
+                                    <>
+                                        <UploadCloud className="w-10 h-10 text-gray-400" />
+                                        <div className="text-center space-y-1">
+                                            <p className="text-sm font-medium text-gray-900">{data.title}</p>
+                                            {data.description && <p className="text-xs text-gray-600">{data.description}</p>}
+                                        </div>
+                                        <div className="text-center space-y-0.5">
+                                            <p className="text-sm text-gray-600">
+                                                <span className="font-semibold text-blue-600">点击上传</span> 或拖拽文件到此处
+                                            </p>
+                                            <p className="text-xs text-gray-500">{data.multiple ? "可上传多个文件" : "单个文件"}</p>
+                                        </div>
+                                        {(data.accept && data.accept.length > 0) || data.max_size_mb ? (
+                                            <div className="pt-2 border-t border-gray-200 w-full">
+                                                <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-gray-500">
+                                                    {data.accept && data.accept.length > 0 && <span>支持类型: {data.accept.join(", ")}</span>}
+                                                    {data.max_size_mb && <span>最大大小: {data.max_size_mb}MB</span>}
+                                                </div>
+                                            </div>
+                                        ) : null}
+                                    </>
+                                )}
+                            </div>
+                            <input
+                                ref={fileInputRef}
+                                type="file"
+                                className="hidden"
+                                accept={data.accept?.join(",")}
+                                multiple={data.multiple}
+                                onChange={handleFileChange}
+                                disabled={!canInteract || uploading}
+                            />
+                        </label>
+                    </div>
+
+                    {error && (
+                        <div className="flex items-center gap-2 p-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+                            <AlertCircle className="w-4 h-4 shrink-0" />
+                            <span>{error}</span>
+                        </div>
+                    )}
+
+                    {uploadedFiles.length > 0 && (
+                        <div className="space-y-2">
+                            <div className="text-xs font-medium text-gray-700">已上传的文件 ({uploadedFiles.length})</div>
+                            <div className="space-y-1.5">
+                                {uploadedFiles.map((file, index) => (
+                                    <div key={index} className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg border border-gray-200">
+                                        <File className="w-4 h-4 text-blue-500 shrink-0" />
+                                        <div className="flex-1 min-w-0">
+                                            <div className="text-sm font-medium text-gray-900 truncate">{file.file_name}</div>
+                                            <div className="text-xs text-gray-500">{formatFileSize(file.file_size)}</div>
+                                        </div>
+                                        {canInteract && (
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                className="h-6 w-6 text-gray-400 hover:text-red-600 hover:bg-red-50"
+                                                onClick={() => handleRemoveFile(index)}
+                                                title="Remove file"
+                                            >
+                                                <X className="h-3.5 w-3.5" />
+                                            </Button>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="flex justify-end pt-2">
+                        <Button
+                            onClick={handleSubmit}
+                            disabled={isSubmitDisabled}
+                            className={cn(
+                                "px-5 rounded-full transition-all duration-200",
+                                isSubmitDisabled ? "bg-gray-100 text-gray-400" : "bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg hover:shadow-blue-200"
+                            )}
+                        >
+                            {uploadedFiles.length > 0 ? `Submit ${uploadedFiles.length} File${uploadedFiles.length > 1 ? "s" : ""}` : "Submit"}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        );
+    },
+});

package/dist/assets/arc-BNOCe7pe.js

@@ -1 +0,0 @@
-import{L as ln,M as un,N as X,O,P as N,Q as an,R as y,S as tn,T as $,V as _,W as rn,X as o,Y as sn,Z as on,$ as fn}from"./mermaid.core-Y2zCEMvG.js";function cn(l){return l.innerRadius}function yn(l){return l.outerRadius}function gn(l){return l.startAngle}function dn(l){return l.endAngle}function mn(l){return l&&l.padAngle}function pn(l,h,D,S,v,R,Q,u){var E=D-l,i=S-h,n=Q-v,d=u-R,a=d*E-n*i;if(!(a*a<y))return a=(n*(h-R)-d*(l-v))/a,[l+a*E,h+a*i]}function G(l,h,D,S,v,R,Q){var u=l-D,E=h-S,i=(Q?R:-R)/$(u*u+E*E),n=i*E,d=-i*u,a=l+n,s=h+d,f=D+n,c=S+d,V=(a+f)/2,t=(s+c)/2,m=f-a,g=c-s,A=m*m+g*g,T=v-R,P=a*c-f*s,I=(g<0?-1:1)*$(on(0,T*T*A-P*P)),L=(P*g-m*I)/A,M=(-P*m-g*I)/A,w=(P*g+m*I)/A,p=(-P*m+g*I)/A,x=L-V,e=M-t,r=w-V,W=p-t;return x*x+e*e>r*r+W*W&&(L=w,M=p),{cx:L,cy:M,x01:-n,y01:-d,x11:L*(v/T-1),y11:M*(v/T-1)}}function hn(){var l=cn,h=yn,D=N(0),S=null,v=gn,R=dn,Q=mn,u=null,E=ln(i);function i(){var n,d,a=+l.apply(this,arguments),s=+h.apply(this,arguments),f=v.apply(this,arguments)-an,c=R.apply(this,arguments)-an,V=rn(c-f),t=c>f;if(u||(u=n=E()),s<a&&(d=s,s=a,a=d),!(s>y))u.moveTo(0,0);else if(V>tn-y)u.moveTo(s*X(f),s*O(f)),u.arc(0,0,s,f,c,!t),a>y&&(u.moveTo(a*X(c),a*O(c)),u.arc(0,0,a,c,f,t));else{var m=f,g=c,A=f,T=c,P=V,I=V,L=Q.apply(this,arguments)/2,M=L>y&&(S?+S.apply(this,arguments):$(a*a+s*s)),w=_(rn(s-a)/2,+D.apply(this,arguments)),p=w,x=w,e,r;if(M>y){var W=sn(M/a*O(L)),j=sn(M/s*O(L));(P-=W*2)>y?(W*=t?1:-1,A+=W,T-=W):(P=0,A=T=(f+c)/2),(I-=j*2)>y?(j*=t?1:-1,m+=j,g-=j):(I=0,m=g=(f+c)/2)}var Y=s*X(m),Z=s*O(m),z=a*X(T),B=a*O(T);if(w>y){var C=s*X(g),F=s*O(g),H=a*X(A),J=a*O(A),q;if(V<un)if(q=pn(Y,Z,H,J,C,F,z,B)){var K=Y-q[0],U=Z-q[1],k=C-q[0],b=F-q[1],nn=1/O(fn((K*k+U*b)/($(K*K+U*U)*$(k*k+b*b)))/2),en=$(q[0]*q[0]+q[1]*q[1]);p=_(w,(a-en)/(nn-1)),x=_(w,(s-en)/(nn+1))}else p=x=0}I>y?x>y?(e=G(H,J,Y,Z,s,x,t),r=G(C,F,z,B,s,x,t),u.moveTo(e.cx+e.x01,e.cy+e.y01),x<w?u.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(r.y01,r.x01),!t):(u.arc(e.cx,e.cy,x,o(e.y01,e.x01),o(e.y11,e.x11),!t),u.arc(0,0,s,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),!t),u.arc(r.cx,r.cy,x,o(r.y11,r.x11),o(r.y01,r.x01),!t))):(u.moveTo(Y,Z),u.arc(0,0,s,m,g,!t)):u.moveTo(Y,Z),!(a>y)||!(P>y)?u.lineTo(z,B):p>y?(e=G(z,B,C,F,a,-p,t),r=G(Y,Z,H,J,a,-p,t),u.lineTo(e.cx+e.x01,e.cy+e.y01),p<w?u.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(r.y01,r.x01),!t):(u.arc(e.cx,e.cy,p,o(e.y01,e.x01),o(e.y11,e.x11),!t),u.arc(0,0,a,o(e.cy+e.y11,e.cx+e.x11),o(r.cy+r.y11,r.cx+r.x11),t),u.arc(r.cx,r.cy,p,o(r.y11,r.x11),o(r.y01,r.x01),!t))):u.arc(0,0,a,T,A,t)}if(u.closePath(),n)return u=null,n+""||null}return i.centroid=function(){var n=(+l.apply(this,arguments)+ +h.apply(this,arguments))/2,d=(+v.apply(this,arguments)+ +R.apply(this,arguments))/2-un/2;return[X(d)*n,O(d)*n]},i.innerRadius=function(n){return arguments.length?(l=typeof n=="function"?n:N(+n),i):l},i.outerRadius=function(n){return arguments.length?(h=typeof n=="function"?n:N(+n),i):h},i.cornerRadius=function(n){return arguments.length?(D=typeof n=="function"?n:N(+n),i):D},i.padRadius=function(n){return arguments.length?(S=n==null?null:typeof n=="function"?n:N(+n),i):S},i.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:N(+n),i):v},i.endAngle=function(n){return arguments.length?(R=typeof n=="function"?n:N(+n),i):R},i.padAngle=function(n){return arguments.length?(Q=typeof n=="function"?n:N(+n),i):Q},i.context=function(n){return arguments.length?(u=n??null,i):u},i}export{hn as d};