next-fetch-panel 0.2.0 → 0.4.0

package/README.md

@@ -139,6 +139,55 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
+In sheet mode, the panel is resizable — drag the thin handle at the open edge to change its height (bottom/top sheet) or width (left/right sheet). The size is saved to `localStorage` automatically.
+
+---
+
+## Controlling the panel programmatically
+
+Use the `useDevNetworkPanel` hook to open, close, or toggle the panel from your own components — without relying on the default floating button.
+
+```tsx
+"use client";
+import { useDevNetworkPanel } from "next-fetch-panel";
+
+export function MyToolbar() {
+  const { isOpen, toggle } = useDevNetworkPanel();
+  return (
+    <button onClick={toggle}>
+      {isOpen ? "Hide" : "Show"} network panel
+    </button>
+  );
+}
+```
+
+The hook returns `{ isOpen, open, close, toggle }`. All four values are stable references — safe to use as event handlers without `useCallback`.
+
+To hide the default floating button (when you're providing your own trigger), pass `showToggleButton={false}` to `<DevNetworkPanel>`:
+
+```tsx
+<DevNetworkPanel showToggleButton={false} />
+```
+
+### Toggle button position
+
+Use `buttonPosition` to place the default toggle button in any of six positions (default: `"bottom-right"`):
+
+```tsx
+<DevNetworkPanel buttonPosition="bottom-center" />
+```
+
+| Value | Position |
+|-------|----------|
+| `"bottom-right"` | Bottom-right corner *(default)* |
+| `"bottom-center"` | Bottom edge, centered |
+| `"bottom-left"` | Bottom-left corner |
+| `"top-right"` | Top-right corner |
+| `"top-center"` | Top edge, centered |
+| `"top-left"` | Top-left corner |
+
+In `fixed` panel mode, the panel container anchors to the same corner/edge as the button.
+
 ---
 
 ## Redacting secrets
@@ -204,6 +253,31 @@ No axios configuration change is required — `adapter: 'fetch'` is **not** need
 
 ---
 
+## Disabling per environment
+
+Every entry point accepts an `enabled` option (or prop) that defaults to `true`. Pass `false` to make that layer a complete no-op — no patching, no cookies, no SSE stream, no panel rendered.
+
+```ts
+// instrumentation.ts
+await registerDevPanel({ enabled: process.env.NODE_ENV !== "production" });
+
+// middleware.ts / proxy.ts
+export const middleware = withDevPanel(handler, { enabled: process.env.NODE_ENV !== "production" });
+
+// app/api/dev-network/route.ts
+export const GET = createDevPanelRoute({ enabled: process.env.NODE_ENV !== "production" });
+
+// axios client
+createDevPanelAxiosInterceptors({ enabled: process.env.NODE_ENV !== "production" });
+
+// app/layout.tsx
+<DevNetworkPanel enabled={process.env.NODE_ENV !== "production"} />
+```
+
+You can use any condition — `NODE_ENV`, a custom env var, a feature flag, or any boolean. Each entry point is independent, so you can disable just the fetch patch while keeping the panel open for other sessions, or shut everything off at once.
+
+---
+
 ## Security notes
 
 | Concern | How it is handled |
@@ -211,15 +285,15 @@ No axios configuration change is required — `adapter: 'fetch'` is **not** need
 | User A seeing User B's requests | Each browser session gets a unique `__dev_sid` cookie. The SSE stream filters strictly by session ID. |
 | Panel accessible to anyone | Use the `guard` option on `createDevPanelRoute`. |
 | Secrets leaking to the browser | Configured patterns are replaced with `[REDACTED]` before entries reach the store. |
-| Running in production | Add a `NODE_ENV` gate in `registerDevPanel` or behind a feature flag if needed. |
+| Running in production | Pass `enabled: process.env.NODE_ENV !== "production"` to each entry point. |
 
 ---
 
 ## Public API
 
 ```ts
-import { DevNetworkPanel } from "next-fetch-panel";
-import type { LogEntry } from "next-fetch-panel";
+import { DevNetworkPanel, useDevNetworkPanel } from "next-fetch-panel";
+import type { LogEntry, ButtonPosition } from "next-fetch-panel";
 
 import { registerDevPanel } from "next-fetch-panel/patch";
 import { withDevPanel } from "next-fetch-panel/middleware";

package/dist/index.d.mts

@@ -1,6 +1,17 @@
 import * as react from 'react';
 
-declare function DevNetworkPanel(): react.ReactPortal | null;
+type ButtonPosition = "bottom-right" | "bottom-center" | "bottom-left" | "top-right" | "top-center" | "top-left";
+declare function useDevNetworkPanel(): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+declare function DevNetworkPanel({ enabled, showToggleButton, buttonPosition, }: {
+    enabled?: boolean;
+    showToggleButton?: boolean;
+    buttonPosition?: ButtonPosition;
+}): react.ReactPortal | null;
 
 type LogEntry = {
     id: string;
@@ -27,4 +38,4 @@ declare global {
     var __devLogStore: DevLogStore | undefined;
 }
 
-export { DevNetworkPanel, type LogEntry };
+export { type ButtonPosition, DevNetworkPanel, type LogEntry, useDevNetworkPanel };

package/dist/index.d.ts

@@ -1,6 +1,17 @@
 import * as react from 'react';
 
-declare function DevNetworkPanel(): react.ReactPortal | null;
+type ButtonPosition = "bottom-right" | "bottom-center" | "bottom-left" | "top-right" | "top-center" | "top-left";
+declare function useDevNetworkPanel(): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+declare function DevNetworkPanel({ enabled, showToggleButton, buttonPosition, }: {
+    enabled?: boolean;
+    showToggleButton?: boolean;
+    buttonPosition?: ButtonPosition;
+}): react.ReactPortal | null;
 
 type LogEntry = {
     id: string;
@@ -27,4 +38,4 @@ declare global {
     var __devLogStore: DevLogStore | undefined;
 }
 
-export { DevNetworkPanel, type LogEntry };
+export { type ButtonPosition, DevNetworkPanel, type LogEntry, useDevNetworkPanel };