@principal-ade/bruno-panels 0.1.1

package/dist/panels.bundle.js

@@ -0,0 +1,1070 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, createElement, createContext, useContext, useState, useCallback } from "react";
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+const __iconNode$5 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$5);
+const __iconNode$4 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$4);
+const __iconNode$3 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+];
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$3);
+const __iconNode$2 = [
+  [
+    "path",
+    {
+      d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
+      key: "usdka0"
+    }
+  ]
+];
+const FolderOpen = createLucideIcon("folder-open", __iconNode$2);
+const __iconNode$1 = [
+  [
+    "path",
+    {
+      d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+      key: "1kt360"
+    }
+  ]
+];
+const Folder = createLucideIcon("folder", __iconNode$1);
+const __iconNode = [
+  [
+    "path",
+    {
+      d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z",
+      key: "1ffxy3"
+    }
+  ],
+  ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
+];
+const Send = createLucideIcon("send", __iconNode);
+var ThemeContext;
+var getThemeContext = () => {
+  if (typeof window !== "undefined") {
+    const globalWindow = window;
+    if (!globalWindow.__principlemd_theme_context__) {
+      globalWindow.__principlemd_theme_context__ = createContext(void 0);
+    }
+    return globalWindow.__principlemd_theme_context__;
+  } else {
+    if (!ThemeContext) {
+      ThemeContext = createContext(void 0);
+    }
+    return ThemeContext;
+  }
+};
+var ThemeContextSingleton = getThemeContext();
+var useTheme = () => {
+  const context = useContext(ThemeContextSingleton);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+const METHOD_COLORS$1 = {
+  GET: "#61affe",
+  POST: "#49cc90",
+  PUT: "#fca130",
+  DELETE: "#f93e3e",
+  PATCH: "#50e3c2",
+  HEAD: "#9012fe",
+  OPTIONS: "#0d5aa7"
+};
+const TreeItem = ({ item, depth, selectedItem, onSelectItem, theme }) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const isSelected = selectedItem?.uid === item.uid;
+  const isFolder = item.type === "folder";
+  const method = item.request?.http?.method?.toUpperCase() || "GET";
+  const methodColor = METHOD_COLORS$1[method] || METHOD_COLORS$1.GET;
+  const handleClick = () => {
+    if (isFolder) {
+      setIsExpanded(!isExpanded);
+    } else {
+      onSelectItem(item);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: handleClick,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "6px 8px",
+          paddingLeft: `${8 + depth * 16}px`,
+          cursor: "pointer",
+          background: isSelected ? theme.colors.backgroundSecondary : "transparent",
+          borderRadius: "4px",
+          fontSize: "13px",
+          color: theme.colors.text,
+          transition: "background 0.15s"
+        },
+        onMouseEnter: (e) => {
+          if (!isSelected) {
+            e.currentTarget.style.background = theme.colors.backgroundHover;
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!isSelected) {
+            e.currentTarget.style.background = "transparent";
+          }
+        },
+        children: [
+          isFolder ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14, color: theme.colors.textMuted }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14, color: theme.colors.textMuted }),
+            /* @__PURE__ */ jsx(Folder, { size: 14, color: theme.colors.textMuted })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { style: { width: "14px" } }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "10px",
+                  fontWeight: 600,
+                  color: methodColor,
+                  minWidth: "36px"
+                },
+                children: method
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: item.name })
+        ]
+      }
+    ),
+    isFolder && isExpanded && item.items && /* @__PURE__ */ jsx("div", { children: item.items.map((child) => /* @__PURE__ */ jsx(
+      TreeItem,
+      {
+        item: child,
+        depth: depth + 1,
+        selectedItem,
+        onSelectItem,
+        theme
+      },
+      child.uid
+    )) })
+  ] });
+};
+const CollectionTree = ({
+  items,
+  selectedItem,
+  onSelectItem
+}) => {
+  const { theme } = useTheme();
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "24px",
+          textAlign: "center",
+          color: theme.colors.textMuted,
+          fontSize: "13px"
+        },
+        children: "No requests found"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { style: { padding: "8px" }, children: items.map((item) => /* @__PURE__ */ jsx(
+    TreeItem,
+    {
+      item,
+      depth: 0,
+      selectedItem,
+      onSelectItem,
+      theme
+    },
+    item.uid
+  )) });
+};
+const METHOD_COLORS = {
+  GET: "#61affe",
+  POST: "#49cc90",
+  PUT: "#fca130",
+  DELETE: "#f93e3e",
+  PATCH: "#50e3c2",
+  HEAD: "#9012fe",
+  OPTIONS: "#0d5aa7"
+};
+const RequestEditor = ({
+  request,
+  isSending,
+  onSend
+}) => {
+  const { theme } = useTheme();
+  const [activeTab, setActiveTab] = useState("params");
+  const parsed = request;
+  const method = parsed?.http?.method?.toUpperCase() || "GET";
+  const url = parsed?.http?.url || "";
+  const methodColor = METHOD_COLORS[method] || METHOD_COLORS.GET;
+  const headers = parsed?.headers || [];
+  const params = parsed?.params || [];
+  const body = parsed?.body;
+  const bodyContent = body?.json || body?.text || body?.xml || "";
+  const tabs = [
+    { id: "params", label: "Params", count: params.filter((p) => p.enabled).length },
+    { id: "headers", label: "Headers", count: headers.filter((h) => h.enabled).length },
+    { id: "body", label: "Body" },
+    { id: "auth", label: "Auth" },
+    { id: "script", label: "Script" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "8px",
+          padding: "12px",
+          borderBottom: `1px solid ${theme.colors.border}`
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                padding: "8px 12px",
+                background: theme.colors.backgroundSecondary,
+                borderRadius: "6px",
+                minWidth: "80px"
+              },
+              children: /* @__PURE__ */ jsx("span", { style: { color: methodColor, fontWeight: 600, fontSize: "13px" }, children: method })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: url,
+              readOnly: true,
+              placeholder: "Enter URL",
+              style: {
+                flex: 1,
+                padding: "8px 12px",
+                background: theme.colors.backgroundSecondary,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: "6px",
+                color: theme.colors.text,
+                fontSize: "13px",
+                fontFamily: "monospace"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: onSend,
+              disabled: isSending,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                padding: "8px 16px",
+                background: isSending ? theme.colors.backgroundSecondary : theme.colors.primary,
+                border: "none",
+                borderRadius: "6px",
+                color: "#fff",
+                fontSize: "13px",
+                fontWeight: 500,
+                cursor: isSending ? "not-allowed" : "pointer",
+                opacity: isSending ? 0.7 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(Send, { size: 14 }),
+                isSending ? "Sending..." : "Send"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "4px",
+          padding: "8px 12px",
+          borderBottom: `1px solid ${theme.colors.border}`
+        },
+        children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setActiveTab(tab.id),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              padding: "6px 12px",
+              background: activeTab === tab.id ? theme.colors.backgroundSecondary : "transparent",
+              border: "none",
+              borderRadius: "4px",
+              color: activeTab === tab.id ? theme.colors.text : theme.colors.textMuted,
+              fontSize: "12px",
+              fontWeight: 500,
+              cursor: "pointer"
+            },
+            children: [
+              tab.label,
+              tab.count !== void 0 && tab.count > 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    padding: "1px 6px",
+                    background: theme.colors.primary,
+                    borderRadius: "10px",
+                    fontSize: "10px",
+                    color: "#fff"
+                  },
+                  children: tab.count
+                }
+              )
+            ]
+          },
+          tab.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
+      activeTab === "params" && /* @__PURE__ */ jsx(KeyValueTable, { items: params, emptyMessage: "No parameters", theme }),
+      activeTab === "headers" && /* @__PURE__ */ jsx(KeyValueTable, { items: headers, emptyMessage: "No headers", theme }),
+      activeTab === "body" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            height: "100%",
+            background: theme.colors.backgroundSecondary,
+            borderRadius: "6px",
+            padding: "12px",
+            fontFamily: "monospace",
+            fontSize: "12px",
+            color: theme.colors.text,
+            whiteSpace: "pre-wrap",
+            overflow: "auto"
+          },
+          children: bodyContent || /* @__PURE__ */ jsx("span", { style: { color: theme.colors.textMuted }, children: "No body" })
+        }
+      ),
+      activeTab === "auth" && /* @__PURE__ */ jsxs("div", { style: { color: theme.colors.textMuted, fontSize: "13px" }, children: [
+        "Auth mode: ",
+        parsed?.auth?.mode || "none"
+      ] }),
+      activeTab === "script" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+        parsed?.script?.req && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: theme.colors.textMuted, marginBottom: "6px" }, children: "Pre-request Script" }),
+          /* @__PURE__ */ jsx(
+            "pre",
+            {
+              style: {
+                padding: "12px",
+                background: theme.colors.backgroundSecondary,
+                borderRadius: "6px",
+                fontSize: "12px",
+                color: theme.colors.text,
+                margin: 0,
+                overflow: "auto"
+              },
+              children: parsed.script.req
+            }
+          )
+        ] }),
+        parsed?.script?.res && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: theme.colors.textMuted, marginBottom: "6px" }, children: "Post-response Script" }),
+          /* @__PURE__ */ jsx(
+            "pre",
+            {
+              style: {
+                padding: "12px",
+                background: theme.colors.backgroundSecondary,
+                borderRadius: "6px",
+                fontSize: "12px",
+                color: theme.colors.text,
+                margin: 0,
+                overflow: "auto"
+              },
+              children: parsed.script.res
+            }
+          )
+        ] }),
+        !parsed?.script?.req && !parsed?.script?.res && /* @__PURE__ */ jsx("div", { style: { color: theme.colors.textMuted, fontSize: "13px" }, children: "No scripts" })
+      ] })
+    ] })
+  ] });
+};
+const KeyValueTable = ({ items, emptyMessage, theme }) => {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { style: { color: theme.colors.textMuted, fontSize: "13px" }, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "12px" }, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: [
+      /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "8px", color: theme.colors.textMuted, fontWeight: 500, width: "30%" }, children: "Key" }),
+      /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "8px", color: theme.colors.textMuted, fontWeight: 500 }, children: "Value" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        style: {
+          borderBottom: `1px solid ${theme.colors.border}`,
+          opacity: item.enabled ? 1 : 0.5
+        },
+        children: [
+          /* @__PURE__ */ jsx("td", { style: { padding: "8px", fontFamily: "monospace", color: theme.colors.text }, children: item.name }),
+          /* @__PURE__ */ jsx("td", { style: { padding: "8px", fontFamily: "monospace", color: theme.colors.text }, children: item.value })
+        ]
+      },
+      index
+    )) })
+  ] });
+};
+const getStatusColor = (status) => {
+  if (status >= 200 && status < 300) return "#49cc90";
+  if (status >= 300 && status < 400) return "#fca130";
+  if (status >= 400 && status < 500) return "#f93e3e";
+  if (status >= 500) return "#f93e3e";
+  return "#888";
+};
+const formatSize = (bytes) => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+};
+const formatJson = (data) => {
+  try {
+    if (typeof data === "string") {
+      const parsed = JSON.parse(data);
+      return JSON.stringify(parsed, null, 2);
+    }
+    return JSON.stringify(data, null, 2);
+  } catch {
+    return String(data);
+  }
+};
+const ResponseViewer = ({
+  response,
+  isLoading
+}) => {
+  const { theme } = useTheme();
+  const [activeTab, setActiveTab] = useState("body");
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          color: theme.colors.textMuted,
+          fontSize: "13px"
+        },
+        children: "Sending request..."
+      }
+    );
+  }
+  if (!response) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          color: theme.colors.textMuted,
+          fontSize: "13px"
+        },
+        children: "Send a request to see the response"
+      }
+    );
+  }
+  const statusColor = getStatusColor(response.status);
+  const headerCount = Object.keys(response.headers).length;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "16px",
+          padding: "12px",
+          borderBottom: `1px solid ${theme.colors.border}`
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  padding: "4px 8px",
+                  background: statusColor,
+                  borderRadius: "4px",
+                  color: "#fff",
+                  fontSize: "12px",
+                  fontWeight: 600
+                },
+                children: response.status
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { color: theme.colors.text, fontSize: "13px" }, children: response.statusText })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", fontSize: "12px", color: theme.colors.textMuted }, children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Time: ",
+              response.responseTime,
+              "ms"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Size: ",
+              formatSize(response.size)
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "4px",
+          padding: "8px 12px",
+          borderBottom: `1px solid ${theme.colors.border}`
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setActiveTab("body"),
+              style: {
+                padding: "6px 12px",
+                background: activeTab === "body" ? theme.colors.backgroundSecondary : "transparent",
+                border: "none",
+                borderRadius: "4px",
+                color: activeTab === "body" ? theme.colors.text : theme.colors.textMuted,
+                fontSize: "12px",
+                fontWeight: 500,
+                cursor: "pointer"
+              },
+              children: "Body"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setActiveTab("headers"),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                padding: "6px 12px",
+                background: activeTab === "headers" ? theme.colors.backgroundSecondary : "transparent",
+                border: "none",
+                borderRadius: "4px",
+                color: activeTab === "headers" ? theme.colors.text : theme.colors.textMuted,
+                fontSize: "12px",
+                fontWeight: 500,
+                cursor: "pointer"
+              },
+              children: [
+                "Headers",
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      padding: "1px 6px",
+                      background: theme.colors.primary,
+                      borderRadius: "10px",
+                      fontSize: "10px",
+                      color: "#fff"
+                    },
+                    children: headerCount
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
+      activeTab === "body" && /* @__PURE__ */ jsx(
+        "pre",
+        {
+          style: {
+            margin: 0,
+            padding: "12px",
+            background: theme.colors.backgroundSecondary,
+            borderRadius: "6px",
+            fontSize: "12px",
+            fontFamily: "monospace",
+            color: theme.colors.text,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word"
+          },
+          children: formatJson(response.data)
+        }
+      ),
+      activeTab === "headers" && /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "12px" }, children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: [
+          /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "8px", color: theme.colors.textMuted, fontWeight: 500, width: "30%" }, children: "Header" }),
+          /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "8px", color: theme.colors.textMuted, fontWeight: 500 }, children: "Value" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: Object.entries(response.headers).map(([key, value]) => /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: [
+          /* @__PURE__ */ jsx("td", { style: { padding: "8px", fontFamily: "monospace", color: theme.colors.text }, children: key }),
+          /* @__PURE__ */ jsx("td", { style: { padding: "8px", fontFamily: "monospace", color: theme.colors.text }, children: value })
+        ] }, key)) })
+      ] })
+    ] })
+  ] });
+};
+const mockSendRequest = async (request) => {
+  console.log("Mock sendRequest:", request);
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  return {
+    status: 200,
+    statusText: "OK",
+    headers: {
+      "content-type": "application/json",
+      "x-request-id": "mock-123"
+    },
+    data: { message: "Mock response", timestamp: Date.now() },
+    responseTime: 123,
+    size: 256
+  };
+};
+const demoCollection = [
+  {
+    uid: "folder-users",
+    name: "Users",
+    type: "folder",
+    path: "/users",
+    items: [
+      {
+        uid: "get-users",
+        name: "Get All Users",
+        type: "request",
+        path: "/users/get-users.bru",
+        request: {
+          meta: { name: "Get All Users", type: "http", seq: 1 },
+          http: { method: "get", url: "https://api.example.com/users", body: "none" },
+          headers: [
+            { name: "Accept", value: "application/json", enabled: true },
+            { name: "Authorization", value: "Bearer {{token}}", enabled: true }
+          ],
+          params: [
+            { name: "page", value: "1", enabled: true, type: "query" },
+            { name: "limit", value: "10", enabled: true, type: "query" }
+          ]
+        }
+      },
+      {
+        uid: "get-user",
+        name: "Get User by ID",
+        type: "request",
+        path: "/users/get-user.bru",
+        request: {
+          meta: { name: "Get User by ID", type: "http", seq: 2 },
+          http: { method: "get", url: "https://api.example.com/users/:id", body: "none" },
+          headers: [{ name: "Accept", value: "application/json", enabled: true }],
+          params: [{ name: "id", value: "123", enabled: true, type: "path" }]
+        }
+      },
+      {
+        uid: "create-user",
+        name: "Create User",
+        type: "request",
+        path: "/users/create-user.bru",
+        request: {
+          meta: { name: "Create User", type: "http", seq: 3 },
+          http: { method: "post", url: "https://api.example.com/users", body: "json" },
+          headers: [
+            { name: "Content-Type", value: "application/json", enabled: true }
+          ],
+          params: [],
+          body: {
+            json: JSON.stringify({ name: "John Doe", email: "john@example.com" }, null, 2)
+          }
+        }
+      }
+    ]
+  },
+  {
+    uid: "folder-auth",
+    name: "Auth",
+    type: "folder",
+    path: "/auth",
+    items: [
+      {
+        uid: "login",
+        name: "Login",
+        type: "request",
+        path: "/auth/login.bru",
+        request: {
+          meta: { name: "Login", type: "http", seq: 1 },
+          http: { method: "post", url: "https://api.example.com/auth/login", body: "json" },
+          headers: [{ name: "Content-Type", value: "application/json", enabled: true }],
+          params: [],
+          body: {
+            json: JSON.stringify({ email: "{{email}}", password: "{{password}}" }, null, 2)
+          }
+        }
+      }
+    ]
+  },
+  {
+    uid: "health-check",
+    name: "Health Check",
+    type: "request",
+    path: "/health-check.bru",
+    request: {
+      meta: { name: "Health Check", type: "http", seq: 1 },
+      http: { method: "get", url: "https://api.example.com/health", body: "none" },
+      headers: [],
+      params: []
+    }
+  }
+];
+const BrunoPanel = ({
+  context,
+  actions,
+  events
+}) => {
+  const { theme } = useTheme();
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [response, setResponse] = useState(null);
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState(null);
+  const [items] = useState(demoCollection);
+  const handleSelectItem = useCallback((item) => {
+    if (item.type === "request") {
+      setSelectedItem(item);
+      setResponse(null);
+      setError(null);
+      events.emit({
+        type: "principal-ade.bruno-panel:request-selected",
+        source: "bruno-panel",
+        timestamp: Date.now(),
+        payload: { requestId: item.uid, request: item.request }
+      });
+    }
+  }, [events]);
+  const handleSendRequest = useCallback(async () => {
+    if (!selectedItem?.request) return;
+    setIsSending(true);
+    setError(null);
+    try {
+      const result = await mockSendRequest(selectedItem.request);
+      setResponse(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setIsSending(false);
+    }
+  }, [selectedItem]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        height: "100%",
+        background: theme.colors.background,
+        color: theme.colors.text,
+        fontFamily: theme.fonts.body
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              width: "260px",
+              minWidth: "200px",
+              borderRight: `1px solid ${theme.colors.border}`,
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    padding: "12px",
+                    borderBottom: `1px solid ${theme.colors.border}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(FolderOpen, { size: 16, color: theme.colors.primary }),
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600 }, children: "Collection" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(
+                CollectionTree,
+                {
+                  items,
+                  selectedItem,
+                  onSelectItem: handleSelectItem
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }, children: selectedItem ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: "200px", borderBottom: `1px solid ${theme.colors.border}` }, children: /* @__PURE__ */ jsx(
+            RequestEditor,
+            {
+              request: selectedItem.request,
+              isSending,
+              onSend: handleSendRequest
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: "200px" }, children: error ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "8px",
+                height: "100%",
+                color: "#f93e3e",
+                fontSize: "13px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(CircleAlert, { size: 16 }),
+                error
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(ResponseViewer, { response, isLoading: isSending }) })
+        ] }) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              gap: "12px",
+              color: theme.colors.textMuted
+            },
+            children: [
+              /* @__PURE__ */ jsx(FolderOpen, { size: 48, strokeWidth: 1 }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "14px" }, children: "Select a request to get started" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+const sendRequestTool = {
+  name: "send_request",
+  description: "Sends the currently selected HTTP request",
+  inputs: {
+    type: "object",
+    properties: {
+      requestId: {
+        type: "string",
+        description: "ID of the request to send (uses selected if not provided)"
+      }
+    }
+  },
+  outputs: {
+    type: "object",
+    properties: {
+      success: { type: "boolean" },
+      status: { type: "number" },
+      responseTime: { type: "number" }
+    }
+  },
+  tags: ["http", "request", "api"],
+  tool_call_template: {
+    call_template_type: "panel_event",
+    event_type: "principal-ade.bruno-panel:send-request"
+  }
+};
+const selectRequestTool = {
+  name: "select_request",
+  description: "Selects a request from the collection to view/edit",
+  inputs: {
+    type: "object",
+    properties: {
+      requestPath: {
+        type: "string",
+        description: "Path to the .bru request file"
+      }
+    },
+    required: ["requestPath"]
+  },
+  outputs: {
+    type: "object",
+    properties: {
+      success: { type: "boolean" },
+      requestName: { type: "string" }
+    }
+  },
+  tags: ["request", "selection", "navigation"],
+  tool_call_template: {
+    call_template_type: "panel_event",
+    event_type: "principal-ade.bruno-panel:select-request"
+  }
+};
+const loadCollectionTool = {
+  name: "load_collection",
+  description: "Loads a Bruno collection from the specified directory",
+  inputs: {
+    type: "object",
+    properties: {
+      collectionPath: {
+        type: "string",
+        description: "Path to the Bruno collection directory"
+      }
+    },
+    required: ["collectionPath"]
+  },
+  outputs: {
+    type: "object",
+    properties: {
+      success: { type: "boolean" },
+      requestCount: { type: "number" }
+    }
+  },
+  tags: ["collection", "load", "bruno"],
+  tool_call_template: {
+    call_template_type: "panel_event",
+    event_type: "principal-ade.bruno-panel:load-collection"
+  }
+};
+const brunoPanelTools = [
+  sendRequestTool,
+  selectRequestTool,
+  loadCollectionTool
+];
+const brunoPanelToolsMetadata = {
+  id: "principal-ade.bruno-panel",
+  name: "Bruno API Client",
+  description: "Tools for interacting with the Bruno API client panel",
+  tools: brunoPanelTools
+};
+const panels = [
+  {
+    metadata: {
+      id: "principal-ade.bruno-panel",
+      name: "Bruno API Client",
+      icon: "🔌",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Bruno-compatible API client for testing HTTP requests",
+      slices: ["fileTree"],
+      tools: brunoPanelTools
+    },
+    component: BrunoPanel,
+    onMount: async (context) => {
+      console.log("Bruno Panel mounted", context.currentScope.repository?.path);
+    },
+    onUnmount: async (_context) => {
+      console.log("Bruno Panel unmounting");
+    }
+  }
+];
+const onPackageLoad = async () => {
+  console.log("Bruno Panel package loaded");
+};
+const onPackageUnload = async () => {
+  console.log("Bruno Panel package unloading");
+};
+export {
+  brunoPanelTools,
+  brunoPanelToolsMetadata,
+  onPackageLoad,
+  onPackageUnload,
+  panels
+};
+//# sourceMappingURL=panels.bundle.js.map