next-fetch-panel 0.1.0

package/dist/index.mjs

@@ -0,0 +1,922 @@
+"use client";
+
+// src/Panel.tsx
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useGroupRef } from "react-resizable-panels";
+import { Settings2Icon, XIcon as XIcon3 } from "lucide-react";
+
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/ui/badge.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva as cva2 } from "class-variance-authority";
+var badgeVariants = cva2(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps({ className: cn(badgeVariants({ variant }), className) }, props),
+    render,
+    state: { slot: "badge", variant }
+  });
+}
+
+// src/ui/scroll-area.tsx
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ScrollArea({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx2(ScrollBar, {}),
+        /* @__PURE__ */ jsx2(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ jsx2(
+    ScrollAreaPrimitive.Scrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      "data-orientation": orientation,
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx2(
+        ScrollAreaPrimitive.Thumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-border"
+        }
+      )
+    }
+  );
+}
+
+// src/ui/tabs.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Tabs({ className, orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx3(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
+      ...props
+    }
+  );
+}
+var tabsListVariants = cva3(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    TabsPrimitive.Tab,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    TabsPrimitive.Panel,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 text-sm outline-none", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/resizable.tsx
+import * as ResizablePrimitive from "react-resizable-panels";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ResizablePanelGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    ResizablePrimitive.Group,
+    {
+      "data-slot": "resizable-panel-group",
+      className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className),
+      ...props
+    }
+  );
+}
+function ResizablePanel({ ...props }) {
+  return /* @__PURE__ */ jsx4(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    ResizablePrimitive.Separator,
+    {
+      "data-slot": "resizable-handle",
+      className: cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx4("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })
+    }
+  );
+}
+
+// src/ui/sheet.tsx
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { XIcon } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx5(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx5(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    SheetPrimitive.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  showOverlay = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
+    showOverlay && /* @__PURE__ */ jsx5(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs2(
+      SheetPrimitive.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs2(
+            SheetPrimitive.Close,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ jsx5(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }),
+              children: [
+                /* @__PURE__ */ jsx5(XIcon, {}),
+                /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-heading text-base font-medium text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/dialog.tsx
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { XIcon as XIcon2 } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Backdrop,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 isolate z-10000 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(DialogPortal, { children: [
+    /* @__PURE__ */ jsx6(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs3(
+      DialogPrimitive.Popup,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed top-1/2 left-1/2 z-10000 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs3(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              render: /* @__PURE__ */ jsx6(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }),
+              children: [
+                /* @__PURE__ */ jsx6(XIcon2, {}),
+                /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("font-heading text-base leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/separator.tsx
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Separator2({ className, orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx7(
+    SeparatorPrimitive,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/label.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "label",
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/Panel.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_CONFIG = {
+  mode: "sheet",
+  sheetSide: "bottom",
+  sheetModal: false,
+  width: 820,
+  height: 420,
+  colorScheme: "system",
+  detailSize: 40
+};
+var STORAGE_KEY = "ssr-panel-config";
+function usePanelConfig() {
+  const [config, setConfig] = useState(() => {
+    if (typeof window === "undefined") return DEFAULT_CONFIG;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) return { ...DEFAULT_CONFIG, ...JSON.parse(saved) };
+    } catch {
+    }
+    return DEFAULT_CONFIG;
+  });
+  const update = useCallback((patch) => {
+    setConfig((prev) => {
+      const next = { ...prev, ...patch };
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      } catch {
+      }
+      return next;
+    });
+  }, []);
+  return { config, update };
+}
+function useEffectiveTheme(colorScheme) {
+  const [systemDark, setSystemDark] = useState(
+    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
+  );
+  useEffect(() => {
+    if (colorScheme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => setSystemDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [colorScheme]);
+  if (colorScheme !== "system") return colorScheme;
+  return systemDark ? "dark" : "light";
+}
+var MAX_ENTRIES = 100;
+var METHOD_COLORS = {
+  GET: "text-blue-400",
+  POST: "text-violet-400",
+  PUT: "text-orange-400",
+  PATCH: "text-orange-400",
+  DELETE: "text-red-400"
+};
+function methodClass(m) {
+  return METHOD_COLORS[m] ?? "text-slate-400";
+}
+function statusClass(status, error) {
+  if (error || status === null) return "text-red-400";
+  if (status < 300) return "text-green-400";
+  if (status < 400) return "text-amber-400";
+  return "text-red-400";
+}
+function durationBarColor(ms) {
+  if (ms < 200) return "bg-green-500";
+  if (ms < 1e3) return "bg-amber-500";
+  return "bg-red-500";
+}
+function formatTs(ts) {
+  return new Date(ts).toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    fractionalSecondDigits: 3
+  });
+}
+function tryPrettyJson(text) {
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2);
+  } catch {
+    return text;
+  }
+}
+function OptionButton({
+  active,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "cursor-pointer rounded-md px-3 py-1.5 text-xs font-medium transition-colors border",
+        active ? "bg-primary text-primary-foreground border-primary" : "bg-transparent text-muted-foreground border-border hover:bg-muted hover:text-foreground"
+      ),
+      children
+    }
+  );
+}
+function NumInput({
+  label,
+  value,
+  onChange,
+  min = 200,
+  max = 2e3
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx9(Label, { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          type: "number",
+          min,
+          max,
+          value,
+          onChange: (e) => {
+            const n = parseInt(e.target.value, 10);
+            if (!isNaN(n) && n >= min && n <= max) onChange(n);
+          },
+          className: "w-24 rounded-md border border-border bg-muted px-2 py-1 text-xs text-foreground outline-none focus:ring-1 focus:ring-ring"
+        }
+      ),
+      /* @__PURE__ */ jsx9("span", { className: "text-xs text-muted-foreground", children: "px" })
+    ] })
+  ] });
+}
+function SettingsDialog({
+  config,
+  update,
+  open,
+  onOpenChange,
+  theme
+}) {
+  const isDark = theme === "dark";
+  const isHorizontal = config.sheetSide === "bottom" || config.sheetSide === "top";
+  return /* @__PURE__ */ jsx9(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs4(
+    DialogContent,
+    {
+      className: cn(
+        isDark && "dark",
+        "bg-background text-foreground border-border sm:max-w-lg gap-0 p-0 overflow-hidden"
+      ),
+      showCloseButton: false,
+      children: [
+        /* @__PURE__ */ jsxs4(DialogHeader, { className: "px-5 pt-5 pb-4 border-b border-border", children: [
+          /* @__PURE__ */ jsx9(DialogTitle, { className: "text-sm font-semibold text-foreground", children: "Panel Settings" }),
+          /* @__PURE__ */ jsx9(DialogDescription, { className: "text-xs text-muted-foreground", children: "Preferences are saved to localStorage automatically." })
+        ] }),
+        /* @__PURE__ */ jsx9(ScrollArea, { className: "max-h-[60vh]", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-5 px-5 py-4 text-xs", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx9("p", { className: "font-medium text-foreground", children: "Color scheme" }),
+            /* @__PURE__ */ jsx9("div", { className: "flex gap-2", children: ["system", "light", "dark"].map((s) => /* @__PURE__ */ jsx9(OptionButton, { active: config.colorScheme === s, onClick: () => update({ colorScheme: s }), children: s.charAt(0).toUpperCase() + s.slice(1) }, s)) })
+          ] }),
+          /* @__PURE__ */ jsx9(Separator2, { className: "bg-border" }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx9("p", { className: "font-medium text-foreground", children: "Display mode" }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx9(OptionButton, { active: config.mode === "sheet", onClick: () => update({ mode: "sheet" }), children: "Sheet" }),
+              /* @__PURE__ */ jsx9(OptionButton, { active: config.mode === "fixed", onClick: () => update({ mode: "fixed" }), children: "Fixed modal" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx9(Separator2, { className: "bg-border" }),
+          config.mode === "sheet" && /* @__PURE__ */ jsxs4(Fragment, { children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx9("p", { className: "font-medium text-foreground", children: "Sheet side" }),
+              /* @__PURE__ */ jsx9("div", { className: "flex gap-2 flex-wrap", children: ["bottom", "right", "top", "left"].map((s) => /* @__PURE__ */ jsx9(OptionButton, { active: config.sheetSide === s, onClick: () => update({ sheetSide: s }), children: s.charAt(0).toUpperCase() + s.slice(1) }, s)) })
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx9("p", { className: "font-medium text-foreground", children: "Page interaction" }),
+              /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx9(OptionButton, { active: !config.sheetModal, onClick: () => update({ sheetModal: false }), children: "Allow (non-modal)" }),
+                /* @__PURE__ */ jsx9(OptionButton, { active: config.sheetModal, onClick: () => update({ sheetModal: true }), children: "Block (modal)" })
+              ] }),
+              /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground text-[11px]", children: "Non-modal lets you click the page while the panel is open." })
+            ] }),
+            /* @__PURE__ */ jsx9("div", { className: "flex gap-6", children: isHorizontal ? /* @__PURE__ */ jsx9(NumInput, { label: "Height", value: config.height, onChange: (v) => update({ height: v }) }) : /* @__PURE__ */ jsx9(NumInput, { label: "Width", value: config.width, onChange: (v) => update({ width: v }) }) })
+          ] }),
+          config.mode === "fixed" && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsx9("p", { className: "font-medium text-foreground", children: "Dimensions" }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex gap-6", children: [
+              /* @__PURE__ */ jsx9(NumInput, { label: "Width", value: config.width, onChange: (v) => update({ width: v }) }),
+              /* @__PURE__ */ jsx9(NumInput, { label: "Height", value: config.height, onChange: (v) => update({ height: v }) })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx9("div", { className: "flex justify-end border-t border-border px-5 py-3", children: /* @__PURE__ */ jsx9(DialogClose, { render: /* @__PURE__ */ jsx9(Button, { variant: "outline", size: "sm", children: "Close" }) }) })
+      ]
+    }
+  ) });
+}
+function HeaderList({ headers }) {
+  const entries = Object.entries(headers ?? {});
+  if (entries.length === 0)
+    return /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground text-[11px]", children: "No headers" });
+  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col divide-y divide-border", children: entries.map(([k, v]) => /* @__PURE__ */ jsxs4("div", { className: "py-1.5", children: [
+    /* @__PURE__ */ jsx9("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wide mb-0.5", children: k }),
+    /* @__PURE__ */ jsx9("p", { className: "text-[11px] text-foreground break-all leading-relaxed", children: v })
+  ] }, k)) });
+}
+function BodyViewer({ body, contentType, emptyLabel }) {
+  if (!body) return /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground text-[11px]", children: emptyLabel });
+  const isJson = contentType?.includes("json") || body.trimStart().startsWith("{") || body.trimStart().startsWith("[");
+  return /* @__PURE__ */ jsx9("pre", { className: "text-[11px] text-foreground whitespace-pre-wrap break-all leading-relaxed", children: isJson ? tryPrettyJson(body) : body });
+}
+function DetailPanel({ entry, onClose }) {
+  let pathname = entry.url;
+  try {
+    pathname = new URL(entry.url).pathname;
+  } catch {
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col h-full overflow-hidden border-border", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2.5 py-1.5 gap-2", children: [
+      /* @__PURE__ */ jsx9("span", { className: "truncate text-[11px] font-semibold text-foreground", title: entry.url, children: pathname }),
+      /* @__PURE__ */ jsx9(Button, { variant: "ghost", size: "icon-xs", className: "shrink-0 text-muted-foreground", onClick: onClose, children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsxs4(Tabs, { defaultValue: "general", className: "flex flex-col flex-1 overflow-hidden gap-0", children: [
+      /* @__PURE__ */ jsx9(TabsList, { variant: "line", className: "shrink-0 w-full justify-start rounded-none border-b border-border bg-transparent h-auto px-1 overflow-x-auto scrollbar-none", children: ["general", "headers", "payload", "response"].map((v) => /* @__PURE__ */ jsx9(TabsTrigger, { value: v, className: "text-[11px] capitalize px-2.5 py-1.5", children: v }, v)) }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex-1 overflow-hidden min-h-0", children: [
+        /* @__PURE__ */ jsx9(TabsContent, { value: "general", className: "h-full m-0", children: /* @__PURE__ */ jsx9(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-3 p-3 text-[11px]", children: [
+          [
+            ["Request URL", entry.url],
+            ["Request Method", entry.method],
+            ["Status Code", entry.status != null ? `${entry.status}${entry.statusText ? " " + entry.statusText : ""}` : "\u2014"],
+            ["Started at", formatTs(entry.ts)],
+            ["Duration", `${entry.duration}ms`],
+            ...entry.error ? [["Error", entry.error]] : []
+          ].map(([label, value]) => /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground mb-0.5", children: label }),
+            /* @__PURE__ */ jsx9("p", { className: cn(
+              "break-all leading-relaxed",
+              label === "Status Code" ? statusClass(entry.status, entry.error) : label === "Error" ? "text-red-400" : "text-foreground"
+            ), children: value })
+          ] }, label)),
+          /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground mb-1.5", children: "Duration bar" }),
+            /* @__PURE__ */ jsx9("div", { className: "h-1.5 rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx9(
+              "div",
+              {
+                className: cn("h-full rounded-full", durationBarColor(entry.duration)),
+                style: { width: `${Math.min(entry.duration / 2e3 * 100, 100)}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx9("p", { className: "text-[10px] text-muted-foreground/50 mt-1", children: "scale: 0\u20132000ms" })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsx9(TabsContent, { value: "headers", className: "h-full m-0", children: /* @__PURE__ */ jsx9(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-4 p-3", children: [["Response Headers", entry.responseHeaders], ["Request Headers", entry.requestHeaders]].map(([label, hdrs]) => /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx9("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-2", children: label }),
+          /* @__PURE__ */ jsx9(HeaderList, { headers: hdrs })
+        ] }, label)) }) }) }),
+        /* @__PURE__ */ jsx9(TabsContent, { value: "payload", className: "h-full m-0", children: /* @__PURE__ */ jsx9(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx9("div", { className: "p-3", children: /* @__PURE__ */ jsx9(BodyViewer, { body: entry.requestBody, contentType: entry.requestHeaders?.["content-type"] ?? null, emptyLabel: "No request body" }) }) }) }),
+        /* @__PURE__ */ jsx9(TabsContent, { value: "response", className: "h-full m-0", children: /* @__PURE__ */ jsx9(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx9("div", { className: "p-3", children: /* @__PURE__ */ jsx9(BodyViewer, { body: entry.responseBody, contentType: entry.responseHeaders?.["content-type"] ?? null, emptyLabel: "No response body" }) }) }) })
+      ] })
+    ] })
+  ] });
+}
+function PanelInner({
+  entries,
+  selected,
+  setSelected,
+  setEntries,
+  onOpenSettings,
+  onClose,
+  bottomRef,
+  detailSize,
+  onDetailSizeChange
+}) {
+  const groupRef = useGroupRef();
+  const detailSizeRef = useRef(detailSize);
+  const wasSelectedRef = useRef(false);
+  useEffect(() => {
+    detailSizeRef.current = detailSize;
+  }, [detailSize]);
+  useEffect(() => {
+    if (selected && !wasSelectedRef.current) {
+      const sz = detailSizeRef.current;
+      const id = setTimeout(() => {
+        groupRef.current?.setLayout({ main: 100 - sz, detail: sz });
+      }, 0);
+      wasSelectedRef.current = true;
+      return () => clearTimeout(id);
+    }
+    if (!selected) wasSelectedRef.current = false;
+  }, [selected, groupRef]);
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "font-semibold text-foreground", children: [
+        "Server Network",
+        entries.length > 0 && /* @__PURE__ */ jsxs4("span", { className: "ml-1.5 font-normal text-muted-foreground", children: [
+          entries.length,
+          " requests"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx9(Button, { variant: "ghost", size: "icon-xs", className: "text-muted-foreground", onClick: onOpenSettings, children: /* @__PURE__ */ jsx9(Settings2Icon, {}) }),
+        /* @__PURE__ */ jsx9(Button, { variant: "ghost", size: "xs", className: "text-muted-foreground", onClick: () => {
+          setEntries([]);
+          setSelected(null);
+        }, children: "Clear" }),
+        /* @__PURE__ */ jsx9(Button, { variant: "ghost", size: "icon-xs", className: "text-muted-foreground ml-1", onClick: onClose, children: /* @__PURE__ */ jsx9(XIcon3, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4(
+      ResizablePanelGroup,
+      {
+        orientation: "horizontal",
+        className: "flex-1 overflow-hidden",
+        groupRef,
+        onLayoutChanged: (layout) => {
+          const sz = layout["detail"];
+          if (sz !== void 0 && sz > 0) onDetailSizeChange(sz);
+        },
+        children: [
+          /* @__PURE__ */ jsx9(ResizablePanel, { id: "main", minSize: 10, children: /* @__PURE__ */ jsxs4(ScrollArea, { className: "h-full", children: [
+            /* @__PURE__ */ jsxs4("table", { className: "w-full border-collapse", children: [
+              /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { className: "sticky top-0 z-10 bg-background border-b border-border", children: [
+                { label: "Method", cls: "w-[58px] text-left" },
+                { label: "Status", cls: "w-[52px] text-left" },
+                { label: "URL", cls: "text-left" },
+                { label: "Duration", cls: "w-[68px] text-right" }
+              ].map(({ label, cls }) => /* @__PURE__ */ jsx9("th", { className: cn("px-2.5 py-1.5 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider whitespace-nowrap", cls), children: label }, label)) }) }),
+              /* @__PURE__ */ jsx9("tbody", { children: entries.length === 0 ? /* @__PURE__ */ jsx9("tr", { children: /* @__PURE__ */ jsx9("td", { colSpan: 4, className: "py-6 text-center text-muted-foreground", children: "No requests yet" }) }) : entries.map((entry) => {
+                const isSelected = selected?.id === entry.id;
+                return /* @__PURE__ */ jsxs4(
+                  "tr",
+                  {
+                    title: entry.error,
+                    onClick: () => setSelected(isSelected ? null : entry),
+                    className: cn(
+                      "cursor-pointer border-b border-border transition-colors",
+                      isSelected ? "bg-primary/15" : entry.error ? "bg-destructive/5 hover:bg-destructive/10" : "hover:bg-muted/40"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx9("td", { className: "px-2.5 py-1.25 whitespace-nowrap", children: /* @__PURE__ */ jsx9("span", { className: cn("font-semibold text-[11px]", methodClass(entry.method)), children: entry.method }) }),
+                      /* @__PURE__ */ jsx9("td", { className: "px-2.5 py-1.25 whitespace-nowrap", children: /* @__PURE__ */ jsx9("span", { className: cn("font-semibold", statusClass(entry.status, entry.error)), children: entry.status ?? "ERR" }) }),
+                      /* @__PURE__ */ jsx9("td", { className: "px-2.5 py-1.25 max-w-50 overflow-hidden text-ellipsis whitespace-nowrap text-foreground/80", children: entry.url }),
+                      /* @__PURE__ */ jsxs4("td", { className: "px-2.5 py-1.25 text-right whitespace-nowrap text-muted-foreground", children: [
+                        entry.duration,
+                        "ms"
+                      ] })
+                    ]
+                  },
+                  entry.id
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsx9("div", { ref: bottomRef })
+          ] }) }),
+          selected && /* @__PURE__ */ jsxs4(Fragment, { children: [
+            /* @__PURE__ */ jsx9(ResizableHandle, { withHandle: true }),
+            /* @__PURE__ */ jsx9(ResizablePanel, { id: "detail", minSize: 10, children: /* @__PURE__ */ jsx9(DetailPanel, { entry: selected, onClose: () => setSelected(null) }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function Panel2() {
+  const [entries, setEntries] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState(null);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const bottomRef = useRef(null);
+  const mounted = useSyncExternalStore(() => () => {
+  }, () => true, () => false);
+  const { config, update } = usePanelConfig();
+  const theme = useEffectiveTheme(config.colorScheme);
+  const isDark = mounted && theme === "dark";
+  useEffect(() => {
+    const es = new EventSource("/api/dev-network");
+    es.onmessage = (event) => {
+      try {
+        const entry = JSON.parse(event.data);
+        setEntries((prev) => {
+          const next = [...prev, entry];
+          return next.length > MAX_ENTRIES ? next.slice(-MAX_ENTRIES) : next;
+        });
+      } catch {
+      }
+    };
+    return () => es.close();
+  }, []);
+  useEffect(() => {
+    if (open && !selected) bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [entries, open, selected]);
+  const innerProps = {
+    entries,
+    selected,
+    setSelected,
+    setEntries,
+    onOpenSettings: () => setSettingsOpen(true),
+    onClose: () => setOpen(false),
+    bottomRef,
+    detailSize: config.detailSize,
+    onDetailSizeChange: (size) => update({ detailSize: size })
+  };
+  if (!mounted) return null;
+  const isHorizontal = config.sheetSide === "bottom" || config.sheetSide === "top";
+  const sheetSize = isHorizontal ? { height: config.height } : { width: config.width, maxWidth: config.width };
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx9(
+      SettingsDialog,
+      {
+        config,
+        update,
+        open: settingsOpen,
+        onOpenChange: setSettingsOpen,
+        theme
+      }
+    ),
+    config.mode === "sheet" && /* @__PURE__ */ jsx9(
+      Sheet,
+      {
+        open,
+        onOpenChange: (next) => {
+          if (next || config.sheetModal) setOpen(next);
+        },
+        modal: config.sheetModal,
+        children: /* @__PURE__ */ jsxs4(
+          SheetContent,
+          {
+            side: config.sheetSide,
+            showCloseButton: false,
+            showOverlay: config.sheetModal,
+            className: cn(isDark && "dark", "bg-background text-foreground border-border font-mono text-xs gap-0 p-0"),
+            style: sheetSize,
+            children: [
+              /* @__PURE__ */ jsx9(SheetTitle, { className: "sr-only", children: "Server Network Panel" }),
+              /* @__PURE__ */ jsx9(SheetDescription, { className: "sr-only", children: "Real-time SSR fetch inspector" }),
+              /* @__PURE__ */ jsx9(PanelInner, { ...innerProps })
+            ]
+          }
+        )
+      }
+    ),
+    config.mode === "fixed" && open && /* @__PURE__ */ jsx9("div", { className: cn(isDark && "dark"), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "fixed bottom-14 right-4 z-9998 flex flex-col rounded-lg border border-border bg-background text-foreground font-mono text-xs shadow-2xl",
+        style: { width: config.width, height: config.height },
+        children: /* @__PURE__ */ jsx9(PanelInner, { ...innerProps })
+      }
+    ) }),
+    !open && /* @__PURE__ */ jsx9("div", { className: cn(isDark && "dark"), suppressHydrationWarning: true, children: /* @__PURE__ */ jsxs4(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "fixed bottom-4 right-4 z-9999 font-mono gap-1.5 shadow-md dark:bg-zinc-900 dark:border-zinc-700 dark:text-zinc-100 dark:hover:bg-zinc-800",
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsx9("span", { className: entries.length > 0 ? "text-green-500" : "text-muted-foreground", children: "\u25CF" }),
+          "Server Network",
+          entries.length > 0 && /* @__PURE__ */ jsx9(Badge, { variant: "secondary", className: "ml-0.5 tabular-nums", children: entries.length })
+        ]
+      }
+    ) })
+  ] });
+}
+function DevNetworkPanel() {
+  return /* @__PURE__ */ jsx9(Panel2, {});
+}
+export {
+  DevNetworkPanel
+};