rsc-boundary 0.1.0 → 0.2.0

package/README.md

@@ -39,13 +39,7 @@ A small floating pill appears in the bottom-left corner of your page during deve
 - **Labels** on each region showing the component name / host tag and provenance
 - **Panel** listing client components and server regions with explicit vs heuristic badges
 
-In production builds, `RscBoundaryProvider` renders only `{children}` — zero runtime cost, no extra DOM nodes, completely tree-shaken.
-
-To force devtools in production (e.g. a documentation site), pass `enabled`:
-
-```tsx
-<RscBoundaryProvider enabled>{children}</RscBoundaryProvider>
-```
+In production builds, `RscBoundaryProvider` renders only `{children}` — no devtools UI, no extra DOM nodes, and no scanning work. Devtools run only in development (`NODE_ENV === "development"`).
 
 The package also exports `RscDevtools` for advanced wiring, and optional `RscServerBoundaryMarker` / `SERVER_BOUNDARY_DATA_ATTR` for explicit server regions; most apps should rely on the provider only.
 
@@ -55,7 +49,7 @@ React Server Components are resolved on the server and sent to the client as pre
 
 When you toggle the devtools on, RSC Boundary walks the React fiber tree (via the `__reactFiber$*` property that React attaches to DOM elements) and:
 
-1. Finds every `FunctionComponent`, `ClassComponent`, `ForwardRef`, and `MemoComponent` fiber
+1. Finds every user component fiber: function, class, `forwardRef`, and `memo` (including simple memo) work tags
 2. Filters out Next.js framework internals (LayoutRouter, ErrorBoundary, etc.)
 3. Maps each remaining user-defined component to its root DOM node(s) — these are your **client component boundaries**
 4. Collects **explicit** regions: elements with `data-rsc-boundary-server` (e.g. `RscServerBoundaryMarker`)
@@ -68,14 +62,23 @@ A `MutationObserver` watches for DOM changes (route navigation, lazy loading) an
 ```
 packages/rsc-boundary/src/
 ├── index.ts                  # Public API
-├── constants.ts              # data attribute name for explicit markers
-├── provider.tsx              # Server component — children + <RscDevtools /> in dev
-├── server-boundary-marker.tsx # Optional explicit server region wrapper
-├── devtools.tsx              # "use client" — pill, panel, scan trigger
+├── constants.ts              # data attribute names (markers, devtools, highlights)
 ├── fiber-utils.ts            # Fiber walk + server region detection
 ├── highlight.ts              # Outlines, labels, MutationObserver
+├── highlight-caption.ts      # Label text for highlighted regions
+├── host-label.ts             # Fallback labels from host DOM
 ├── styles.ts
-└── types.ts
+├── types.ts
+└── components/
+    ├── provider.tsx                 # Server component — children + <RscDevtools /> in dev
+    ├── rsc-devtools.tsx             # "use client" — scan trigger, highlights, observer wiring
+    ├── devtools-pill.tsx            # Floating toggle
+    ├── devtools-panel.tsx           # Side panel + lists
+    ├── devtools-compare.ts          # Stable list diffing for panel updates
+    ├── devtools-legend-item.tsx
+    ├── devtools-client-component-entry.tsx
+    ├── devtools-server-region-entry.tsx
+    └── server-boundary-marker.tsx   # Optional explicit server region wrapper
 ```
 
 ## Limitations

package/dist/components/devtools-client-component-entry.d.ts

@@ -0,0 +1,7 @@
+import type { ClientComponentInfo } from "../types";
+interface ClientComponentEntryProps {
+    component: ClientComponentInfo;
+}
+export declare function ClientComponentEntry({ component }: ClientComponentEntryProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=devtools-client-component-entry.d.ts.map

package/dist/components/devtools-client-component-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-client-component-entry.d.ts","sourceRoot":"","sources":["../../src/components/devtools-client-component-entry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpD,UAAU,yBAAyB;IACjC,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAgC5E"}

package/dist/components/devtools-client-component-entry.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COLORS } from "../styles";
+export function ClientComponentEntry({ component }) {
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "3px 6px",
+            borderRadius: 4,
+            background: "rgba(249, 115, 22, 0.1)",
+            fontSize: 11,
+        }, children: [_jsx("span", { style: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    background: COLORS.client.outline,
+                    flexShrink: 0,
+                } }), _jsx("span", { style: { color: "rgba(255,255,255,0.9)" }, children: `<${component.name} />` }), component.domNodes.length > 1 && (_jsxs("span", { style: { color: "rgba(255,255,255,0.4)", marginLeft: "auto" }, children: [component.domNodes.length, " nodes"] }))] }));
+}

package/dist/components/devtools-compare.d.ts

@@ -0,0 +1,4 @@
+import type { ClientComponentInfo, ServerRegionInfo } from "../types";
+export declare function clientComponentListEqual(a: ClientComponentInfo[], b: ClientComponentInfo[]): boolean;
+export declare function serverRegionsEqual(a: ServerRegionInfo[], b: ServerRegionInfo[]): boolean;
+//# sourceMappingURL=devtools-compare.d.ts.map

package/dist/components/devtools-compare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-compare.d.ts","sourceRoot":"","sources":["../../src/components/devtools-compare.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEtE,wBAAgB,wBAAwB,CACtC,CAAC,EAAE,mBAAmB,EAAE,EACxB,CAAC,EAAE,mBAAmB,EAAE,GACvB,OAAO,CA2BT;AAED,wBAAgB,kBAAkB,CAChC,CAAC,EAAE,gBAAgB,EAAE,EACrB,CAAC,EAAE,gBAAgB,EAAE,GACpB,OAAO,CAqBT"}

package/dist/components/devtools-compare.js

@@ -0,0 +1,50 @@
+export function clientComponentListEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+        const ai = a[i];
+        const bi = b[i];
+        if (ai === undefined || bi === undefined) {
+            return false;
+        }
+        if (ai.name !== bi.name) {
+            return false;
+        }
+        const na = ai.domNodes;
+        const nb = bi.domNodes;
+        if (na.length !== nb.length) {
+            return false;
+        }
+        for (let j = 0; j < na.length; j++) {
+            const naJ = na[j];
+            const nbJ = nb[j];
+            if (naJ !== nbJ) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+export function serverRegionsEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+        const ai = a[i];
+        const bi = b[i];
+        if (ai === undefined || bi === undefined) {
+            return false;
+        }
+        if (ai.element !== bi.element) {
+            return false;
+        }
+        if (ai.source !== bi.source) {
+            return false;
+        }
+        if (ai.displayLabel !== bi.displayLabel) {
+            return false;
+        }
+    }
+    return true;
+}

package/dist/components/devtools-legend-item.d.ts

@@ -0,0 +1,7 @@
+interface LegendItemProps {
+    color: string;
+    label: string;
+}
+export declare function LegendItem({ color, label }: LegendItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=devtools-legend-item.d.ts.map

package/dist/components/devtools-legend-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-legend-item.d.ts","sourceRoot":"","sources":["../../src/components/devtools-legend-item.tsx"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,2CAe3D"}

package/dist/components/devtools-legend-item.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function LegendItem({ color, label }) {
+    return (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [_jsx("span", { style: {
+                    display: "inline-block",
+                    width: 10,
+                    height: 10,
+                    borderRadius: 2,
+                    border: `2px dashed ${color}`,
+                } }), label] }));
+}

package/dist/components/devtools-panel.d.ts

@@ -0,0 +1,7 @@
+import type { ClientComponentInfo, ServerRegionInfo } from "../types";
+export interface PanelProps {
+    clientComponents: ClientComponentInfo[];
+    serverRegions: ServerRegionInfo[];
+}
+export declare function Panel({ clientComponents, serverRegions }: PanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=devtools-panel.d.ts.map

package/dist/components/devtools-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-panel.d.ts","sourceRoot":"","sources":["../../src/components/devtools-panel.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQtE,MAAM,WAAW,UAAU;IACzB,gBAAgB,EAAE,mBAAmB,EAAE,CAAC;IACxC,aAAa,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAED,wBAAgB,KAAK,CAAC,EAAE,gBAAgB,EAAE,aAAa,EAAE,EAAE,UAAU,2CAqNpE"}

package/dist/components/devtools-panel.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, } from "react";
+import { RSC_DEVTOOLS_DATA_ATTR } from "../constants";
+import { COLORS, PANEL_STYLES, applyStyles } from "../styles";
+import { LegendItem } from "./devtools-legend-item";
+import { ClientComponentEntry } from "./devtools-client-component-entry";
+import { ServerRegionEntry } from "./devtools-server-region-entry";
+export function Panel({ clientComponents, serverRegions }) {
+    const panelRef = useRef(null);
+    const [tab, setTab] = useState("client");
+    useEffect(() => {
+        if (!panelRef.current)
+            return;
+        applyStyles(panelRef.current, PANEL_STYLES);
+    }, []);
+    const tabBase = {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        minHeight: 44,
+        padding: "6px 6px 8px",
+        border: "none",
+        borderRadius: "4px 4px 0 0",
+        background: "transparent",
+        cursor: "pointer",
+        fontFamily: "inherit",
+    };
+    const tabLine1 = {
+        fontSize: 14,
+        fontWeight: 600,
+        lineHeight: 1.15,
+        fontVariantNumeric: "tabular-nums",
+    };
+    const tabLine2 = {
+        fontSize: 10,
+        fontWeight: 500,
+        lineHeight: 1.2,
+        textAlign: "center",
+        whiteSpace: "nowrap",
+    };
+    return (_jsxs("div", { ref: panelRef, [RSC_DEVTOOLS_DATA_ATTR]: "", children: [_jsx("div", { style: {
+                    marginBottom: 10,
+                    paddingBottom: 8,
+                    borderBottom: "1px solid rgba(255,255,255,0.1)",
+                    fontSize: 13,
+                    fontWeight: 600,
+                }, children: "RSC Boundaries" }), _jsxs("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 6,
+                    marginBottom: 10,
+                    fontSize: 11,
+                }, children: [_jsxs("div", { style: { display: "flex", gap: 12 }, children: [_jsx(LegendItem, { color: COLORS.server.outline, label: "Server" }), _jsx(LegendItem, { color: COLORS.client.outline, label: "Client" })] }), _jsxs("div", { style: {
+                            color: "rgba(255,255,255,0.45)",
+                            fontSize: 10,
+                            lineHeight: 1.35,
+                        }, children: ["Server:", " ", _jsx("span", { style: { color: "rgba(255,255,255,0.65)" }, children: "explicit" }), " ", "(marker) vs", " ", _jsx("span", { style: { color: "rgba(255,255,255,0.65)" }, children: "~" }), " ", "(heuristic)."] })] }), _jsxs("div", { role: "tablist", "aria-label": "Boundary list scope", style: {
+                    display: "flex",
+                    gap: 0,
+                    marginBottom: 10,
+                    borderBottom: "1px solid rgba(255,255,255,0.12)",
+                }, children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "client", id: "rsc-panel-tab-client", "aria-controls": "rsc-panel-client", "aria-label": `${clientComponents.length} client component${clientComponents.length !== 1 ? "s" : ""}`, onClick: () => setTab("client"), style: {
+                            ...tabBase,
+                            color: tab === "client"
+                                ? "rgba(255,255,255,0.95)"
+                                : "rgba(255,255,255,0.55)",
+                            borderBottom: tab === "client"
+                                ? `2px solid ${COLORS.client.outline}`
+                                : "2px solid transparent",
+                            marginBottom: -1,
+                        }, children: [_jsx("span", { style: tabLine1, children: clientComponents.length }), _jsxs("span", { style: tabLine2, children: ["client component", clientComponents.length !== 1 ? "s" : ""] })] }), _jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "server", id: "rsc-panel-tab-server", "aria-controls": "rsc-panel-server", "aria-label": `${serverRegions.length} server region${serverRegions.length !== 1 ? "s" : ""}`, onClick: () => setTab("server"), style: {
+                            ...tabBase,
+                            color: tab === "server"
+                                ? "rgba(255,255,255,0.95)"
+                                : "rgba(255,255,255,0.55)",
+                            borderBottom: tab === "server"
+                                ? `2px solid ${COLORS.server.outline}`
+                                : "2px solid transparent",
+                            marginBottom: -1,
+                        }, children: [_jsx("span", { style: tabLine1, children: serverRegions.length }), _jsxs("span", { style: tabLine2, children: ["server region", serverRegions.length !== 1 ? "s" : ""] })] })] }), tab === "client" && (_jsx("div", { id: "rsc-panel-client", role: "tabpanel", "aria-labelledby": "rsc-panel-tab-client", children: clientComponents.length > 0 ? (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: clientComponents.map((comp, i) => (_jsx(ClientComponentEntry, { component: comp }, `${comp.name}-${i}`))) })) : (_jsx("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: 11 }, children: serverRegions.length > 0 ? (_jsxs(_Fragment, { children: ["No client components in this view.", _jsx("br", {}), _jsx("span", { style: { color: "rgba(255,255,255,0.35)" }, children: "Switch to the server tab to see server regions." })] })) : ("No regions detected.") })) })), tab === "server" && (_jsx("div", { id: "rsc-panel-server", role: "tabpanel", "aria-labelledby": "rsc-panel-tab-server", children: serverRegions.length > 0 ? (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: serverRegions.map((region, i) => (_jsx(ServerRegionEntry, { region: region }, `server-region-${i}`))) })) : (_jsx("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: 11 }, children: clientComponents.length > 0 ? (_jsxs(_Fragment, { children: ["No server regions in this view (everything may sit under client boundaries).", _jsx("br", {}), _jsx("span", { style: { color: "rgba(255,255,255,0.35)" }, children: "Switch to the client tab or add an explicit server marker." })] })) : ("No regions detected.") })) }))] }));
+}

package/dist/components/devtools-pill.d.ts

@@ -0,0 +1,9 @@
+import { type MouseEvent } from "react";
+export interface PillProps {
+    active: boolean;
+    onToggle: () => void;
+    onPanelToggle: (e: MouseEvent) => void;
+    clientCount: number;
+}
+export declare function Pill({ active, onToggle, onPanelToggle, clientCount, }: PillProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=devtools-pill.d.ts.map

package/dist/components/devtools-pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-pill.d.ts","sourceRoot":"","sources":["../../src/components/devtools-pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAU3D,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,IAAI,CAAC,EACnB,MAAM,EACN,QAAQ,EACR,aAAa,EACb,WAAW,GACZ,EAAE,SAAS,2CA0DX"}

package/dist/components/devtools-pill.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { RSC_DEVTOOLS_DATA_ATTR } from "../constants";
+import { COLORS, PILL_STYLES, PILL_ACTIVE_STYLES, applyStyles, } from "../styles";
+export function Pill({ active, onToggle, onPanelToggle, clientCount, }) {
+    const pillRef = useRef(null);
+    useEffect(() => {
+        if (!pillRef.current)
+            return;
+        applyStyles(pillRef.current, PILL_STYLES);
+        if (active) {
+            applyStyles(pillRef.current, PILL_ACTIVE_STYLES);
+        }
+    }, [active]);
+    return (_jsxs("button", { ref: pillRef, type: "button", onClick: onToggle, [RSC_DEVTOOLS_DATA_ATTR]: "", "aria-label": "Toggle RSC Boundary highlighting", title: "Toggle RSC Boundary highlighting", children: [_jsx("span", { style: {
+                    display: "inline-block",
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: active ? COLORS.client.outline : "rgba(255,255,255,0.4)",
+                    transition: "background 150ms ease",
+                } }), _jsx("span", { children: "RSC" }), active && (_jsx("span", { role: "button", tabIndex: 0, onClick: onPanelToggle, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        onPanelToggle(e);
+                    }
+                }, [RSC_DEVTOOLS_DATA_ATTR]: "", style: {
+                    color: "rgba(255,255,255,0.7)",
+                    cursor: "pointer",
+                    padding: "0 0 0 4px",
+                    fontSize: "12px",
+                    fontFamily: "inherit",
+                    lineHeight: "1",
+                }, "aria-label": "Toggle component panel", title: "Toggle component panel", children: clientCount > 0 ? `(${clientCount})` : "···" }))] }));
+}

package/dist/components/devtools-server-region-entry.d.ts

@@ -0,0 +1,7 @@
+import type { ServerRegionInfo } from "../types";
+interface ServerRegionEntryProps {
+    region: ServerRegionInfo;
+}
+export declare function ServerRegionEntry({ region }: ServerRegionEntryProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=devtools-server-region-entry.d.ts.map

package/dist/components/devtools-server-region-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-server-region-entry.d.ts","sourceRoot":"","sources":["../../src/components/devtools-server-region-entry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGjD,UAAU,sBAAsB;IAC9B,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,sBAAsB,2CAiDnE"}

package/dist/components/devtools-server-region-entry.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COLORS } from "../styles";
+export function ServerRegionEntry({ region }) {
+    const provenance = region.source === "explicit" ? "explicit" : "~";
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "3px 6px",
+            borderRadius: 4,
+            background: "rgba(59, 130, 246, 0.12)",
+            fontSize: 11,
+        }, children: [_jsx("span", { style: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    background: COLORS.server.outline,
+                    flexShrink: 0,
+                } }), _jsx("span", { style: {
+                    minWidth: 52,
+                    flexShrink: 0,
+                    fontSize: 9,
+                    fontWeight: 600,
+                    letterSpacing: "0.02em",
+                    textTransform: "uppercase",
+                    color: region.source === "explicit"
+                        ? "rgba(147, 197, 253, 0.95)"
+                        : "rgba(255,255,255,0.45)",
+                }, children: provenance }), _jsx("span", { style: {
+                    color: "rgba(255,255,255,0.9)",
+                    fontFamily: "ui-monospace, monospace",
+                }, children: region.displayLabel })] }));
+}

package/dist/{provider.d.ts → components/provider.d.ts}

@@ -19,15 +19,12 @@
  * ```
  *
  * In development, it renders `{children}` plus the `<RscDevtools />` floating
- * overlay. In production, it renders only `{children}` — zero runtime cost,
- * unless you pass `enabled` (e.g. for a documentation site).
+ * overlay. In production, it renders only `{children}` — zero runtime cost.
  */
 import type { ReactNode } from "react";
 interface RscBoundaryProviderProps {
     children: ReactNode;
-    /** When `true`, always mount devtools (including production). When omitted, devtools run only in development. */
-    enabled?: boolean;
 }
-export declare function RscBoundaryProvider({ children, enabled, }: RscBoundaryProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function RscBoundaryProvider({ children }: RscBoundaryProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=provider.d.ts.map

package/dist/components/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/components/provider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,wBAAwB;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CASzE"}

package/dist/components/provider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RscDevtools } from "./rsc-devtools";
+export function RscBoundaryProvider({ children }) {
+    const isDev = process.env.NODE_ENV === "development";
+    return (_jsxs(_Fragment, { children: [children, isDev ? _jsx(RscDevtools, {}) : null] }));
+}

package/dist/{devtools.d.ts → components/rsc-devtools.d.ts}

@@ -1,2 +1,2 @@
 export declare function RscDevtools(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=devtools.d.ts.map
+//# sourceMappingURL=rsc-devtools.d.ts.map

package/dist/components/rsc-devtools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rsc-devtools.d.ts","sourceRoot":"","sources":["../../src/components/rsc-devtools.tsx"],"names":[],"mappings":"AAmCA,wBAAgB,WAAW,4CAkF1B"}

package/dist/components/rsc-devtools.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RscDevtools — floating overlay for visualizing RSC boundaries.
+ *
+ * Renders a small pill-shaped toggle (bottom-left, visually complementing
+ * the Next.js dev indicator) that, when activated, scans the React fiber
+ * tree to find all client components, highlights them with orange outlines,
+ * and shows server regions in blue.
+ *
+ * A companion panel lists detected components with counts and a legend.
+ *
+ * This component is client-only ("use client"). Mounting is controlled by
+ * `RscBoundaryProvider` (development only).
+ */
+import { useState, useCallback, useEffect, useRef, } from "react";
+import { scanFiberTree, getServerRegions } from "../fiber-utils";
+import { applyHighlights, removeHighlights, observeDomChanges, } from "../highlight";
+import { clientComponentListEqual, serverRegionsEqual } from "./devtools-compare";
+import { Panel } from "./devtools-panel";
+import { Pill } from "./devtools-pill";
+export function RscDevtools() {
+    const [active, setActive] = useState(false);
+    const [panelOpen, setPanelOpen] = useState(false);
+    const [clientComponents, setClientComponents] = useState([]);
+    const [serverRegions, setServerRegions] = useState([]);
+    const cleanupRef = useRef(null);
+    const scan = useCallback(() => {
+        const nextClientComponents = scanFiberTree();
+        const nextServerRegions = getServerRegions(nextClientComponents);
+        applyHighlights(nextClientComponents, nextServerRegions);
+        setClientComponents((prev) => clientComponentListEqual(prev, nextClientComponents)
+            ? prev
+            : nextClientComponents);
+        setServerRegions((prev) => serverRegionsEqual(prev, nextServerRegions) ? prev : nextServerRegions);
+    }, []);
+    const activate = useCallback(() => {
+        // Delay scan slightly to let React finish any pending renders
+        requestAnimationFrame(() => {
+            scan();
+            cleanupRef.current = observeDomChanges(scan);
+        });
+    }, [scan]);
+    const deactivate = useCallback(() => {
+        removeHighlights();
+        cleanupRef.current?.();
+        cleanupRef.current = null;
+        setClientComponents([]);
+        setServerRegions([]);
+    }, []);
+    const handleToggle = useCallback(() => {
+        setActive((prev) => {
+            const next = !prev;
+            if (next) {
+                activate();
+            }
+            else {
+                deactivate();
+                setPanelOpen(false);
+            }
+            return next;
+        });
+    }, [activate, deactivate]);
+    const handlePanelToggle = useCallback((e) => {
+        e.stopPropagation();
+        if (active) {
+            setPanelOpen((prev) => !prev);
+        }
+    }, [active]);
+    useEffect(() => {
+        return () => {
+            removeHighlights();
+            cleanupRef.current?.();
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [panelOpen && active && (_jsx(Panel, { clientComponents: clientComponents, serverRegions: serverRegions })), _jsx(Pill, { active: active, onToggle: handleToggle, onPanelToggle: handlePanelToggle, clientCount: clientComponents.length })] }));
+}

package/dist/components/server-boundary-marker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-boundary-marker.d.ts","sourceRoot":"","sources":["../../src/components/server-boundary-marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,4BAA4B,2CAS9B"}

package/dist/{server-boundary-marker.js → components/server-boundary-marker.js}

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { SERVER_BOUNDARY_DATA_ATTR } from "../constants";
 /**
  * Server Component wrapper that opts a subtree into **explicit** server-region
  * detection. Add `label` so the devtools panel shows a stable name.
@@ -6,5 +7,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Heuristic detection still runs elsewhere; this marker is optional.
  */
 export function RscServerBoundaryMarker({ children, label, className, }) {
-    return (_jsx("div", { className: className, "data-rsc-boundary-server": label ?? "", children: children }));
+    return (_jsx("div", { className: className, [SERVER_BOUNDARY_DATA_ATTR]: label ?? "", children: children }));
 }

package/dist/constants.d.ts

@@ -1,3 +1,9 @@
 /** Optional explicit server region marker (hybrid / higher-accuracy mode). */
 export declare const SERVER_BOUNDARY_DATA_ATTR = "data-rsc-boundary-server";
+/** Marks nodes that belong to the RSC Boundary devtools UI (excluded from scans). */
+export declare const RSC_DEVTOOLS_DATA_ATTR = "data-rsc-devtools";
+/** Outline target for client or server highlight overlays. */
+export declare const RSC_HIGHLIGHT_DATA_ATTR = "data-rsc-highlight";
+/** Floating caption node inside a highlighted region. */
+export declare const RSC_LABEL_DATA_ATTR = "data-rsc-label";
 //# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,6BAA6B,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,6BAA6B,CAAC;AAEpE,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,sBAAsB,CAAC;AAE1D,8DAA8D;AAC9D,eAAO,MAAM,uBAAuB,uBAAuB,CAAC;AAE5D,yDAAyD;AACzD,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}

package/dist/constants.js

@@ -1,2 +1,8 @@
 /** Optional explicit server region marker (hybrid / higher-accuracy mode). */
 export const SERVER_BOUNDARY_DATA_ATTR = "data-rsc-boundary-server";
+/** Marks nodes that belong to the RSC Boundary devtools UI (excluded from scans). */
+export const RSC_DEVTOOLS_DATA_ATTR = "data-rsc-devtools";
+/** Outline target for client or server highlight overlays. */
+export const RSC_HIGHLIGHT_DATA_ATTR = "data-rsc-highlight";
+/** Floating caption node inside a highlighted region. */
+export const RSC_LABEL_DATA_ATTR = "data-rsc-label";

package/dist/fiber-utils.d.ts

@@ -14,7 +14,7 @@
  * This approach mirrors what React DevTools does internally — it accesses the
  * __reactFiber$* property that React attaches to DOM elements during hydration.
  */
-import type { ComponentInfo, ServerRegionInfo } from "./types";
+import type { ClientComponentInfo, ServerRegionInfo } from "./types";
 /**
  * Scan the React fiber tree and return all user-defined client components
  * with their root DOM nodes.
@@ -22,10 +22,10 @@ import type { ComponentInfo, ServerRegionInfo } from "./types";
  * Server regions combine explicit markers with heuristic DOM outside client
  * subtrees (see getServerRegions).
  */
-export declare function scanFiberTree(): ComponentInfo[];
+export declare function scanFiberTree(): ClientComponentInfo[];
 /**
  * Collect server-rendered regions: optional explicit markers plus heuristic
  * nested regions outside client component DOM subtrees.
  */
-export declare function getServerRegions(clientComponents: ComponentInfo[], container?: HTMLElement): ServerRegionInfo[];
+export declare function getServerRegions(clientComponents: ClientComponentInfo[], container?: HTMLElement): ServerRegionInfo[];
 //# sourceMappingURL=fiber-utils.d.ts.map

package/dist/fiber-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fiber-utils.d.ts","sourceRoot":"","sources":["../src/fiber-utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAsM/D;;;;;;GAMG;AACH,wBAAgB,aAAa,IAAI,aAAa,EAAE,CAyB/C;AAoJD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,gBAAgB,EAAE,aAAa,EAAE,EACjC,SAAS,CAAC,EAAE,WAAW,GACtB,gBAAgB,EAAE,CAepB"}
+{"version":3,"file":"fiber-utils.d.ts","sourceRoot":"","sources":["../src/fiber-utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAqNrE;;;;;;GAMG;AACH,wBAAgB,aAAa,IAAI,mBAAmB,EAAE,CAyBrD;AAwID;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,gBAAgB,EAAE,mBAAmB,EAAE,EACvC,SAAS,CAAC,EAAE,WAAW,GACtB,gBAAgB,EAAE,CAepB"}