@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.81

package/dist/components/devtools/api-explorer/ApiResponsePanel.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.js";
+import { Badge } from "../../ui/badge.js";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { useTranslations } from "next-intl";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+import { JsonViewerWithControls } from "./JsonViewer.js";
+function getStatusColor(status) {
+  if (status >= 200 && status < 300) return "bg-emerald-500/20 text-emerald-600 dark:text-emerald-400";
+  if (status >= 300 && status < 400) return "bg-blue-500/20 text-blue-600 dark:text-blue-400";
+  if (status >= 400 && status < 500) return "bg-amber-500/20 text-amber-600 dark:text-amber-400";
+  return "bg-red-500/20 text-red-600 dark:text-red-400";
+}
+function ApiResponsePanel({ status, response, error }) {
+  const t = useTranslations("devtools.apiTester");
+  if (status === "idle") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", "data-cy": sel("devtools.apiExplorer.response.panelIdle"), children: [
+      /* @__PURE__ */ jsx("div", { className: "p-3 border-b bg-muted/30", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Response" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-sm", children: t("responseStates.idle") })
+    ] });
+  }
+  if (status === "loading") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", "data-cy": sel("devtools.apiExplorer.response.panelLoading"), children: [
+      /* @__PURE__ */ jsx("div", { className: "p-3 border-b bg-muted/30", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Response" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("responseStates.loading") })
+      ] })
+    ] });
+  }
+  if (status === "error" || status === "cancelled") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", "data-cy": sel("devtools.apiExplorer.response.panelError"), children: [
+      /* @__PURE__ */ jsx("div", { className: "p-3 border-b bg-muted/30", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Response" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-destructive text-sm p-4 text-center", children: error || t("responseStates.error") })
+    ] });
+  }
+  if (!response) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", "data-cy": sel("devtools.apiExplorer.response.panel"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "p-3 border-b bg-muted/30 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Response" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "secondary",
+            className: cn("font-mono text-xs", getStatusColor(response.status)),
+            "data-cy": sel("devtools.apiExplorer.response.status"),
+            children: [
+              response.status,
+              " ",
+              response.statusText
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", "data-cy": sel("devtools.apiExplorer.response.time"), children: [
+          response.timing,
+          "ms"
+        ] }),
+        response.size && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: response.size > 1024 ? `${(response.size / 1024).toFixed(1)} KB` : `${response.size} B` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "body", className: "flex-1 flex flex-col min-h-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b px-3", children: /* @__PURE__ */ jsxs(TabsList, { className: "h-8 bg-transparent p-0 border-0", children: [
+        /* @__PURE__ */ jsx(
+          TabsTrigger,
+          {
+            value: "body",
+            className: "text-xs data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-3 pb-1.5",
+            "data-cy": sel("devtools.apiExplorer.response.tabBody"),
+            children: "Body"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: "headers",
+            className: "text-xs data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-3 pb-1.5",
+            "data-cy": sel("devtools.apiExplorer.response.tabHeaders"),
+            children: [
+              "Headers (",
+              Object.keys(response.headers).length,
+              ")"
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "body", className: "flex-1 m-0 min-h-0 flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-3", "data-cy": sel("devtools.apiExplorer.response.body"), children: typeof response.body === "object" && response.body !== null ? /* @__PURE__ */ jsx(
+        JsonViewerWithControls,
+        {
+          data: response.body,
+          initialExpanded: 2,
+          showControls: true
+        }
+      ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap", children: String(response.body) }) }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "headers", className: "flex-1 m-0 min-h-0", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx("div", { className: "p-3 space-y-1", "data-cy": sel("devtools.apiExplorer.response.headers"), children: Object.entries(response.headers).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "font-mono text-xs", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-primary", children: [
+          key,
+          ":"
+        ] }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: value })
+      ] }, key)) }) }) })
+    ] })
+  ] });
+}
+export {
+  ApiResponsePanel
+};

package/dist/components/devtools/api-explorer/JsonEditor.d.ts

@@ -0,0 +1,30 @@
+interface JsonEditorProps {
+    value: string;
+    onChange?: (value: string) => void;
+    readOnly?: boolean;
+    className?: string;
+    minHeight?: string;
+}
+/**
+ * JSON Editor component with syntax highlighting and formatting
+ *
+ * Uses CodeMirror 6 for editing with:
+ * - JSON syntax highlighting
+ * - Auto-format/prettify button
+ * - Copy to clipboard button
+ * - Built-in fold/expand via gutter
+ * - Line numbers
+ * - Dark/light theme support
+ *
+ * @example
+ * ```tsx
+ * <JsonEditor
+ *   value={jsonString}
+ *   onChange={setJsonString}
+ *   minHeight="200px"
+ * />
+ * ```
+ */
+export declare function JsonEditor({ value, onChange, readOnly, className, minHeight, }: JsonEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=JsonEditor.d.ts.map

package/dist/components/devtools/api-explorer/JsonEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/JsonEditor.tsx"],"names":[],"mappings":"AAWA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,SAAmB,GACpB,EAAE,eAAe,2CAyFjB"}

package/dist/components/devtools/api-explorer/JsonEditor.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
+import { useTheme } from "next-themes";
+import { Copy, Wand2 } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils/index.js";
+function JsonEditor({
+  value,
+  onChange,
+  readOnly = false,
+  className,
+  minHeight = "150px"
+}) {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+  const handleFormat = useCallback(() => {
+    try {
+      const parsed = JSON.parse(value);
+      const formatted = JSON.stringify(parsed, null, 2);
+      onChange == null ? void 0 : onChange(formatted);
+    } catch {
+    }
+  }, [value, onChange]);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(value);
+  }, [value]);
+  const isValidJson = useMemo(() => {
+    if (!value.trim()) return true;
+    try {
+      JSON.parse(value);
+      return true;
+    } catch {
+      return false;
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col border rounded-md overflow-hidden", className),
+      "data-cy": "json-editor",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1 border-b bg-muted/30", children: [
+          !readOnly && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: handleFormat,
+              className: "h-7 px-2 text-xs",
+              disabled: !isValidJson,
+              title: "Format JSON",
+              "data-cy": "json-editor-format",
+              children: [
+                /* @__PURE__ */ jsx(Wand2, { className: "h-3.5 w-3.5 mr-1" }),
+                "Format"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: handleCopy,
+              className: "h-7 px-2 text-xs",
+              title: "Copy to clipboard",
+              "data-cy": "json-editor-copy",
+              children: [
+                /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5 mr-1" }),
+                "Copy"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          !isValidJson && /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive", "data-cy": "json-editor-error", children: "Invalid JSON" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CodeMirror,
+          {
+            value,
+            onChange,
+            extensions: [json()],
+            theme: isDark ? githubDark : githubLight,
+            readOnly,
+            basicSetup: {
+              lineNumbers: true,
+              foldGutter: true,
+              // Expand/collapse for objects/arrays
+              bracketMatching: true,
+              autocompletion: true
+            },
+            style: { minHeight },
+            "data-cy": "json-editor-codemirror"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  JsonEditor
+};

package/dist/components/devtools/api-explorer/JsonViewer.d.ts

@@ -0,0 +1,40 @@
+import 'react-json-view-lite/dist/index.css';
+type JsonValue = Record<string, unknown> | unknown[];
+type ExpandState = 'all' | 'none' | number;
+interface JsonViewerProps {
+    data: JsonValue;
+    className?: string;
+    /** Initial expansion: 'all' | 'none' | number (depth level) */
+    initialExpanded?: ExpandState;
+}
+/**
+ * JSON Viewer component with collapsible tree structure
+ *
+ * Wraps react-json-view-lite with theme support and customizable expansion.
+ * Uses dark/light styles based on the current theme.
+ *
+ * @example
+ * ```tsx
+ * <JsonViewer data={apiResponse} initialExpanded={2} />
+ * ```
+ */
+export declare function JsonViewer({ data, className, initialExpanded }: JsonViewerProps): import("react/jsx-runtime").JSX.Element;
+interface JsonViewerWithControlsProps {
+    data: JsonValue;
+    className?: string;
+    /** Initial expansion: 'all' | 'none' | number (depth level) */
+    initialExpanded?: ExpandState;
+    /** Show expand/collapse buttons */
+    showControls?: boolean;
+}
+/**
+ * JSON Viewer with Expand All / Collapse All controls
+ *
+ * @example
+ * ```tsx
+ * <JsonViewerWithControls data={apiResponse} showControls />
+ * ```
+ */
+export declare function JsonViewerWithControls({ data, className, initialExpanded, showControls, }: JsonViewerWithControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=JsonViewer.d.ts.map

package/dist/components/devtools/api-explorer/JsonViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/JsonViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,qCAAqC,CAAA;AAM5C,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAA;AACpD,KAAK,WAAW,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;AAE1C,UAAU,eAAe;IACvB,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,eAAmB,EAAE,EAAE,eAAe,2CAqBnF;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,mCAAmC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,SAAS,EACT,eAAmB,EACnB,YAAmB,GACpB,EAAE,2BAA2B,2CA+E7B"}

package/dist/components/devtools/api-explorer/JsonViewer.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { JsonView, allExpanded, collapseAllNested, defaultStyles, darkStyles } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
+import { useTheme } from "next-themes";
+import { ChevronsDownUp, ChevronsUpDown, Copy } from "lucide-react";
+import { cn } from "../../../lib/utils/index.js";
+import { Button } from "../../ui/button.js";
+function JsonViewer({ data, className, initialExpanded = 2 }) {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+  const shouldExpandNode = initialExpanded === "all" ? allExpanded : initialExpanded === "none" ? collapseAllNested : (level) => level < initialExpanded;
+  return /* @__PURE__ */ jsx("div", { className: cn("font-mono text-sm", className), children: /* @__PURE__ */ jsx(
+    JsonView,
+    {
+      data,
+      shouldExpandNode,
+      style: isDark ? darkStyles : defaultStyles
+    }
+  ) });
+}
+function JsonViewerWithControls({
+  data,
+  className,
+  initialExpanded = 2,
+  showControls = true
+}) {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+  const [expandState, setExpandState] = useState(initialExpanded);
+  const [viewKey, setViewKey] = useState(0);
+  const handleExpandAll = useCallback(() => {
+    setExpandState("all");
+    setViewKey((k) => k + 1);
+  }, []);
+  const handleCollapseAll = useCallback(() => {
+    setExpandState("none");
+    setViewKey((k) => k + 1);
+  }, []);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+  }, [data]);
+  const shouldExpandNode = expandState === "all" ? allExpanded : expandState === "none" ? collapseAllNested : (level) => level < expandState;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
+    showControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mb-2", "data-cy": "json-viewer-controls", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: handleExpandAll,
+          className: "h-7 px-2 text-xs",
+          "data-cy": "json-viewer-expand-all",
+          children: [
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5 mr-1" }),
+            "Expand"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: handleCollapseAll,
+          className: "h-7 px-2 text-xs",
+          "data-cy": "json-viewer-collapse-all",
+          children: [
+            /* @__PURE__ */ jsx(ChevronsDownUp, { className: "h-3.5 w-3.5 mr-1" }),
+            "Collapse"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: handleCopy,
+          className: "h-7 px-2 text-xs",
+          title: "Copy to clipboard",
+          "data-cy": "json-viewer-copy",
+          children: [
+            /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5 mr-1" }),
+            "Copy"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "font-mono text-sm flex-1 overflow-auto", children: /* @__PURE__ */ jsx(
+      JsonView,
+      {
+        data,
+        shouldExpandNode,
+        style: isDark ? darkStyles : defaultStyles
+      },
+      viewKey
+    ) })
+  ] });
+}
+export {
+  JsonViewer,
+  JsonViewerWithControls
+};

package/dist/components/devtools/api-explorer/PresetsTab.d.ts

@@ -0,0 +1,10 @@
+import type { ApiEndpointPresets, ApiPreset } from '../../../types/api-presets';
+import type { HttpMethod } from '../api-tester/types';
+interface PresetsTabProps {
+    endpointPresets: ApiEndpointPresets | null;
+    currentMethod: HttpMethod;
+    onApplyPreset: (preset: ApiPreset) => void;
+}
+export declare function PresetsTab({ endpointPresets, currentMethod, onApplyPreset }: PresetsTabProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PresetsTab.d.ts.map

package/dist/components/devtools/api-explorer/PresetsTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/PresetsTab.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAErD,UAAU,eAAe;IACvB,eAAe,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC1C,aAAa,EAAE,UAAU,CAAA;IACzB,aAAa,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAA;CAC3C;AAED,wBAAgB,UAAU,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,eAAe,2CA8H5F"}

package/dist/components/devtools/api-explorer/PresetsTab.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Play, Eye, BookOpen } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card.js";
+import { Badge } from "../../ui/badge.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter
+} from "../../ui/dialog.js";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { sel } from "../../../lib/test/index.js";
+function PresetsTab({ endpointPresets, currentMethod, onApplyPreset }) {
+  const [selectedPreset, setSelectedPreset] = useState(null);
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+  if (!endpointPresets || endpointPresets.presets.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground",
+        "data-cy": sel("devtools.apiExplorer.presets.empty"),
+        children: [
+          /* @__PURE__ */ jsx(BookOpen, { className: "h-12 w-12 mb-4 opacity-50" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No presets available for this endpoint" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs mt-2", children: [
+            "Create presets in ",
+            /* @__PURE__ */ jsx("code", { className: "bg-muted px-1 rounded", children: "devtools/api/" })
+          ] })
+        ]
+      }
+    );
+  }
+  const filteredPresets = endpointPresets.presets.filter(
+    (p) => p.method === currentMethod
+  );
+  const handleApplyPreset = (preset) => {
+    onApplyPreset(preset);
+    setIsDetailOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", "data-cy": sel("devtools.apiExplorer.presets.tab"), children: [
+    endpointPresets.summary && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: endpointPresets.summary }),
+    filteredPresets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground p-4 bg-muted/30 rounded-lg", children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        "No presets for ",
+        /* @__PURE__ */ jsx("strong", { children: currentMethod }),
+        " method."
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs", children: [
+        "Available methods:",
+        " ",
+        [...new Set(endpointPresets.presets.map((p) => p.method))].join(", ")
+      ] })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "grid gap-3 grid-cols-1 sm:grid-cols-2", children: filteredPresets.map((preset) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: "hover:border-primary/50 transition-colors",
+        "data-cy": sel("devtools.apiExplorer.presets.card", { id: preset.id }),
+        children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium truncate", children: preset.title }),
+              preset.description && /* @__PURE__ */ jsx(CardDescription, { className: "text-xs mt-1 line-clamp-2", children: preset.description })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1 shrink-0", children: [
+              /* @__PURE__ */ jsxs(Dialog, { open: isDetailOpen && (selectedPreset == null ? void 0 : selectedPreset.id) === preset.id, onOpenChange: (open) => {
+                setIsDetailOpen(open);
+                if (open) setSelectedPreset(preset);
+              }, children: [
+                /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "data-cy": sel("devtools.apiExplorer.presets.viewBtn", { id: preset.id }),
+                    children: /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl", children: [
+                  /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: preset.title }) }),
+                  /* @__PURE__ */ jsx(PresetDetails, { preset }),
+                  /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs(Button, { onClick: () => handleApplyPreset(preset), children: [
+                    /* @__PURE__ */ jsx(Play, { className: "h-4 w-4 mr-2" }),
+                    "Apply Preset"
+                  ] }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "icon",
+                  className: "h-8 w-8",
+                  onClick: () => handleApplyPreset(preset),
+                  "data-cy": sel("devtools.apiExplorer.presets.applyBtn", { id: preset.id }),
+                  children: /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] }) }),
+          preset.tags && preset.tags.length > 0 && /* @__PURE__ */ jsx(CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: preset.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) }) })
+        ]
+      },
+      preset.id
+    )) }),
+    filteredPresets.length < endpointPresets.presets.length && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-4", children: [
+      endpointPresets.presets.length - filteredPresets.length,
+      " more preset(s) available for other methods"
+    ] })
+  ] });
+}
+function PresetDetails({ preset }) {
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[60vh]", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 pr-4", children: [
+    preset.description && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-1", children: "Description" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: preset.description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Method:" }),
+      /* @__PURE__ */ jsx(Badge, { variant: "outline", children: preset.method })
+    ] }),
+    preset.pathParams && Object.keys(preset.pathParams).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Path Parameters" }),
+      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.pathParams, null, 2) })
+    ] }),
+    preset.params && Object.keys(preset.params).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Query Parameters" }),
+      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.params, null, 2) })
+    ] }),
+    preset.headers && Object.keys(preset.headers).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Headers" }),
+      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.headers, null, 2) })
+    ] }),
+    preset.payload && Object.keys(preset.payload).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Request Body" }),
+      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.payload, null, 2) })
+    ] }),
+    preset.sessionConfig && Object.keys(preset.sessionConfig).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Session Config" }),
+      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.sessionConfig, null, 2) })
+    ] }),
+    preset.tags && preset.tags.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Tags" }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: preset.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: tag }, tag)) })
+    ] })
+  ] }) });
+}
+export {
+  PresetsTab
+};

package/dist/components/devtools/api-explorer/index.d.ts

@@ -0,0 +1,9 @@
+export { ApiExplorer } from './ApiExplorer';
+export { ApiEndpointsSidebar } from './ApiEndpointsSidebar';
+export { ApiRequestPanel } from './ApiRequestPanel';
+export { ApiResponsePanel } from './ApiResponsePanel';
+export { JsonViewer, JsonViewerWithControls } from './JsonViewer';
+export { JsonEditor } from './JsonEditor';
+export { PresetsTab } from './PresetsTab';
+export { ApiDocsModal } from './ApiDocsModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/devtools/api-explorer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/components/devtools/api-explorer/index.js

@@ -0,0 +1,19 @@
+import { ApiExplorer } from "./ApiExplorer.js";
+import { ApiEndpointsSidebar } from "./ApiEndpointsSidebar.js";
+import { ApiRequestPanel } from "./ApiRequestPanel.js";
+import { ApiResponsePanel } from "./ApiResponsePanel.js";
+import { JsonViewer, JsonViewerWithControls } from "./JsonViewer.js";
+import { JsonEditor } from "./JsonEditor.js";
+import { PresetsTab } from "./PresetsTab.js";
+import { ApiDocsModal } from "./ApiDocsModal.js";
+export {
+  ApiDocsModal,
+  ApiEndpointsSidebar,
+  ApiExplorer,
+  ApiRequestPanel,
+  ApiResponsePanel,
+  JsonEditor,
+  JsonViewer,
+  JsonViewerWithControls,
+  PresetsTab
+};

package/dist/components/devtools/api-tester/ApiTester.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiTester.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-tester/ApiTester.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAiD,MAAM,SAAS,CAAA;AAE5F,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAsR5D"}
+{"version":3,"file":"ApiTester.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-tester/ApiTester.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAiD,MAAM,SAAS,CAAA;AAE5F,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,2CA2R5D"}