npm - rsc-boundary - Versions diffs - 0.1.0 - Mend

rsc-boundary 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/LICENSE +21 -0
package/README.md +91 -0
package/dist/constants.d.ts +3 -0
package/dist/constants.d.ts.map +1 -0
package/dist/constants.js +2 -0
package/dist/devtools.d.ts +2 -0
package/dist/devtools.d.ts.map +1 -0
package/dist/devtools.js +286 -0
package/dist/fiber-utils.d.ts +31 -0
package/dist/fiber-utils.d.ts.map +1 -0
package/dist/fiber-utils.js +358 -0
package/dist/highlight.d.ts +30 -0
package/dist/highlight.d.ts.map +1 -0
package/dist/highlight.js +125 -0
package/dist/index.d.ts +7 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +5 -0
package/dist/provider.d.ts +33 -0
package/dist/provider.d.ts.map +1 -0
package/dist/provider.js +6 -0
package/dist/server-boundary-marker.d.ts +16 -0
package/dist/server-boundary-marker.d.ts.map +1 -0
package/dist/server-boundary-marker.js +10 -0
package/dist/styles.d.ts +23 -0
package/dist/styles.d.ts.map +1 -0
package/dist/styles.js +82 -0
package/dist/types.d.ts +26 -0
package/dist/types.d.ts.map +1 -0
package/dist/types.js +1 -0
package/package.json +43 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) RSC Boundary contributors
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,91 @@
+# RSC Boundary
+Visualize the boundary between React Server Components and Client Components in Next.js (App Router). Wrap your root layout with a single provider and get automatic, zero-config highlighting of every client component boundary in your app.
+## Quick start
+```bash
+pnpm add rsc-boundary
+```
+In your root layout:
+```tsx
+import { RscBoundaryProvider } from "rsc-boundary";
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <RscBoundaryProvider>{children}</RscBoundaryProvider>
+      </body>
+    </html>
+  );
+}
+```
+That's it. No changes needed to any other component.
+## What it does
+A small floating pill appears in the bottom-left corner of your page during development. Click it to toggle boundary highlighting:
+- **Orange dashed outlines** around client component subtrees (`"use client"`)
+- **Blue dashed outlines** around server-rendered regions (heuristic **~** or optional **explicit** markers)
+- **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>
+```
+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.
+## How it works
+React Server Components are resolved on the server and sent to the client as pre-rendered HTML. They have **no fibers** in the client-side React tree. Client Components are hydrated and **do** have fibers.
+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
+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`)
+5. Derives **heuristic** regions by walking the app root: nodes outside every client subtree, minus wrappers that strictly contain a client root — including **nested** server islands, not only top-level siblings
+A `MutationObserver` watches for DOM changes (route navigation, lazy loading) and re-scans automatically.
+## Architecture
+```
+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
+├── fiber-utils.ts            # Fiber walk + server region detection
+├── highlight.ts              # Outlines, labels, MutationObserver
+├── styles.ts
+└── types.ts
+```
+## Limitations
+- **Uses React internals** (`__reactFiber$*`): same approach React DevTools uses. Dev-only, so stability risk is low.
+- **Heuristic server names**: regions outside client subtrees are labeled by host tag / id unless you add `data-rsc-boundary-server` or `RscServerBoundaryMarker` for an explicit label.
+- **Slots inside client trees**: DOM passed as children into a client component is still under that client root for highlighting; use explicit markers if you need a named server region there.
+- **Next.js internal filtering**: maintains a list of known Next.js internal component names to exclude. May need updates when Next.js adds or renames internals.
+## Requirements
+- Next.js 16+ (App Router)
+- React 19+

package/dist/constants.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+/** Optional explicit server region marker (hybrid / higher-accuracy mode). */
+export declare const SERVER_BOUNDARY_DATA_ATTR = "data-rsc-boundary-server";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,6BAA6B,CAAC"}

package/dist/constants.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /** Optional explicit server region marker (hybrid / higher-accuracy mode). */
2	+ export const SERVER_BOUNDARY_DATA_ATTR = "data-rsc-boundary-server";

package/dist/devtools.d.ts ADDED Viewed

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

package/dist/devtools.d.ts.map ADDED Viewed

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

package/dist/devtools.js ADDED Viewed

@@ -0,0 +1,286 @@
+"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 by default, or when `enabled` is set).
+ */
+import { useState, useCallback, useEffect, useRef, } from "react";
+import { scanFiberTree, getServerRegions } from "./fiber-utils";
+import { applyHighlights, removeHighlights, observeDomChanges, } from "./highlight";
+import { COLORS, PILL_STYLES, PILL_ACTIVE_STYLES, PANEL_STYLES, applyStyles, } from "./styles";
+function componentListEqual(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;
+}
+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;
+}
+export function RscDevtools() {
+    return _jsx(RscDevtoolsInner, {});
+}
+function RscDevtoolsInner() {
+    const [active, setActive] = useState(false);
+    const [panelOpen, setPanelOpen] = useState(false);
+    const [components, setComponents] = useState([]);
+    const [serverRegions, setServerRegions] = useState([]);
+    const cleanupRef = useRef(null);
+    const scan = useCallback(() => {
+        const clientComponents = scanFiberTree();
+        const nextServerRegions = getServerRegions(clientComponents);
+        applyHighlights(clientComponents, nextServerRegions);
+        setComponents((prev) => componentListEqual(prev, clientComponents) ? prev : clientComponents);
+        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;
+        setComponents([]);
+        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, { components: components, serverRegions: serverRegions })), _jsx(Pill, { active: active, onToggle: handleToggle, onPanelToggle: handlePanelToggle, clientCount: components.length })] }));
+}
+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, "data-rsc-devtools": "", "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);
+                    }
+                }, "data-rsc-devtools": "", 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})` : "···" }))] }));
+}
+function Panel({ components, 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, "data-rsc-devtools": "", 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": `${components.length} client component${components.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: components.length }), _jsxs("span", { style: tabLine2, children: ["client component", components.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: components.length > 0 ? (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: components.map((comp, i) => (_jsx(ComponentEntry, { 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: components.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.") })) }))] }));
+}
+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] }));
+}
+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 })] }));
+}
+function ComponentEntry({ 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/fiber-utils.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+/**
+ * React fiber tree utilities for automatic RSC Boundary detection.
+ *
+ * How it works:
+ * - React Server Components are resolved on the server and sent as pre-rendered
+ *   HTML. They have NO corresponding fibers in the client-side React tree.
+ * - Client Components ("use client") are hydrated on the client and DO have
+ *   fibers (FunctionComponent, ForwardRef, MemoComponent, etc.).
+ *
+ * By walking the fiber tree after hydration, we find every user-defined client
+ * component and map it to its root DOM node(s). Server regions are explicit
+ * markers plus heuristic DOM outside those client subtrees (see getServerRegions).
+ *
+ * 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";
+/**
+ * Scan the React fiber tree and return all user-defined client components
+ * with their root DOM nodes.
+ *
+ * Server regions combine explicit markers with heuristic DOM outside client
+ * subtrees (see getServerRegions).
+ */
+export declare function scanFiberTree(): ComponentInfo[];
+/**
+ * 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[];
+//# sourceMappingURL=fiber-utils.d.ts.map

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

	@@ -0,0 +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"}

package/dist/fiber-utils.js ADDED Viewed

@@ -0,0 +1,358 @@
+/**
+ * React fiber tree utilities for automatic RSC Boundary detection.
+ *
+ * How it works:
+ * - React Server Components are resolved on the server and sent as pre-rendered
+ *   HTML. They have NO corresponding fibers in the client-side React tree.
+ * - Client Components ("use client") are hydrated on the client and DO have
+ *   fibers (FunctionComponent, ForwardRef, MemoComponent, etc.).
+ *
+ * By walking the fiber tree after hydration, we find every user-defined client
+ * component and map it to its root DOM node(s). Server regions are explicit
+ * markers plus heuristic DOM outside those client subtrees (see getServerRegions).
+ *
+ * This approach mirrors what React DevTools does internally — it accesses the
+ * __reactFiber$* property that React attaches to DOM elements during hydration.
+ */
+import { SERVER_BOUNDARY_DATA_ATTR } from "./constants";
+// React fiber work tags (numeric constants from React source)
+const FUNCTION_COMPONENT = 0;
+const CLASS_COMPONENT = 1;
+const HOST_COMPONENT = 5;
+const FORWARD_REF = 11;
+const MEMO_COMPONENT = 14;
+const SIMPLE_MEMO_COMPONENT = 15;
+const COMPONENT_TAGS = new Set([
+    FUNCTION_COMPONENT,
+    CLASS_COMPONENT,
+    FORWARD_REF,
+    MEMO_COMPONENT,
+    SIMPLE_MEMO_COMPONENT,
+]);
+/**
+ * Next.js internal client component names to filter out.
+ * These are framework components that appear in the fiber tree but are not
+ * user-authored — highlighting them would add noise rather than insight.
+ */
+const NEXT_INTERNALS = new Set([
+    "AppRouter",
+    "HotReload",
+    "Router",
+    "LayoutRouter",
+    "InnerLayoutRouter",
+    "OuterLayoutRouter",
+    "RenderFromTemplateContext",
+    "ErrorBoundary",
+    "ErrorBoundaryHandler",
+    "GlobalError",
+    "RedirectBoundary",
+    "RedirectErrorBoundary",
+    "NotFoundBoundary",
+    "NotFoundErrorBoundary",
+    "LoadingBoundary",
+    "ScrollAndFocusHandler",
+    "InnerScrollAndFocusHandler",
+    "RootLayoutBoundary",
+    "RootErrorBoundary",
+    "ReactDevOverlay",
+    "DevToolsIndicator",
+    "DevRootNotFoundBoundary",
+    "MetadataBoundary",
+    "ViewportBoundary",
+    "OutletBoundary",
+    "HTTPAccessFallbackBoundary",
+    "HTTPAccessErrorBoundary",
+    // Our own devtools root components (sub-components filtered via DOM check)
+    "RscDevtools",
+    "RscDevtoolsInner",
+]);
+/**
+ * Find the __reactFiber$* property key on a DOM element.
+ * React attaches a randomly-suffixed key per render root.
+ */
+function getReactFiberKey(element) {
+    for (const key of Object.keys(element)) {
+        if (key.startsWith("__reactFiber$"))
+            return key;
+    }
+    return null;
+}
+/**
+ * Get the React fiber attached to a DOM element, if any.
+ */
+function getFiber(element) {
+    const key = getReactFiberKey(element);
+    if (!key)
+        return null;
+    return element[key] ?? null;
+}
+function isFiber(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "tag" in value &&
+        "child" in value &&
+        "sibling" in value);
+}
+function getComponentName(fiber) {
+    const type = fiber.type;
+    if (!type)
+        return null;
+    if (typeof type === "function") {
+        return type.displayName ??
+            type.name ?? null;
+    }
+    if (typeof type === "object" && type !== null) {
+        // ForwardRef wraps a render function
+        if ("render" in type && typeof type.render === "function") {
+            return type.render.displayName ??
+                type.render.name ?? null;
+        }
+        // MemoComponent wraps a type
+        if ("type" in type) {
+            const inner = type.type;
+            if (typeof inner === "function") {
+                return inner.displayName ??
+                    inner.name ?? null;
+            }
+        }
+        return type.displayName ?? type.name ?? null;
+    }
+    return null;
+}
+function isUserComponent(fiber) {
+    if (!COMPONENT_TAGS.has(fiber.tag))
+        return false;
+    const name = getComponentName(fiber);
+    if (!name)
+        return false;
+    if (NEXT_INTERNALS.has(name))
+        return false;
+    return true;
+}
+/**
+ * Walk down from a component fiber to find its root DOM node(s).
+ * Stops at the first HostComponent layer — does not recurse into
+ * child components.
+ */
+function getRootDomNodes(fiber) {
+    const nodes = [];
+    function collect(f) {
+        if (!f)
+            return;
+        if (f.tag === HOST_COMPONENT && f.stateNode instanceof HTMLElement) {
+            nodes.push(f.stateNode);
+            return; // don't go deeper — this is the DOM root for this subtree
+        }
+        // Skip into child component fibers but only collect their DOM if
+        // they are NOT themselves user components (which get their own entry).
+        if (COMPONENT_TAGS.has(f.tag) && f !== fiber && isUserComponent(f)) {
+            return; // this child component will be reported separately
+        }
+        collect(f.child);
+        collect(f.sibling);
+    }
+    collect(fiber.child);
+    return nodes;
+}
+/**
+ * Find the fiber root by starting at a DOM element and walking up.
+ */
+function findFiberRoot() {
+    const candidates = [
+        document.getElementById("__next"),
+        document.body,
+        document.documentElement,
+    ];
+    for (const el of candidates) {
+        if (!el)
+            continue;
+        const raw = getFiber(el);
+        if (!isFiber(raw))
+            continue;
+        let root = raw;
+        while (root.return)
+            root = root.return;
+        return root;
+    }
+    return null;
+}
+/**
+ * Check whether a DOM node lives inside our own devtools overlay.
+ */
+function isInsideDevtools(el) {
+    let current = el;
+    while (current) {
+        if (current.dataset.rscDevtools != null)
+            return true;
+        current = current.parentElement;
+    }
+    return false;
+}
+/**
+ * Scan the React fiber tree and return all user-defined client components
+ * with their root DOM nodes.
+ *
+ * Server regions combine explicit markers with heuristic DOM outside client
+ * subtrees (see getServerRegions).
+ */
+export function scanFiberTree() {
+    const root = findFiberRoot();
+    if (!root)
+        return [];
+    const components = [];
+    function walk(fiber) {
+        if (!fiber)
+            return;
+        if (isUserComponent(fiber)) {
+            const name = getComponentName(fiber) ?? "Anonymous";
+            const domNodes = getRootDomNodes(fiber).filter((node) => !isInsideDevtools(node));
+            if (domNodes.length > 0) {
+                components.push({ name, domNodes });
+            }
+        }
+        walk(fiber.child);
+        walk(fiber.sibling);
+    }
+    walk(root.child);
+    return components;
+}
+function isInsideClientBoundary(el, clientRoots) {
+    let current = el;
+    while (current) {
+        if (clientRoots.has(current))
+            return true;
+        current = current.parentElement;
+    }
+    return false;
+}
+/**
+ * True if `el` is a strict DOM ancestor of any client component root.
+ * Those nodes are excluded from heuristic server highlights so we don't draw
+ * a box around a wrapper that contains a client boundary.
+ */
+function isStrictAncestorOfAnyClientRoot(el, clientRoots) {
+    for (const root of clientRoots) {
+        if (el !== root && el.contains(root))
+            return true;
+    }
+    return false;
+}
+/**
+ * True if `el` is the explicit marker element or a descendant of one.
+ */
+function isInsideExplicitMarkerSubtree(el, explicitRoots) {
+    let current = el;
+    while (current) {
+        if (explicitRoots.has(current))
+            return true;
+        current = current.parentElement;
+    }
+    return false;
+}
+function* elementDescendants(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    let n = walker.nextNode();
+    while (n) {
+        if (n instanceof HTMLElement && n !== root) {
+            yield n;
+        }
+        n = walker.nextNode();
+    }
+}
+function collectExplicitServerRegions() {
+    const selector = `[${SERVER_BOUNDARY_DATA_ATTR}]`;
+    const regions = [];
+    for (const el of document.querySelectorAll(selector)) {
+        if (!(el instanceof HTMLElement))
+            continue;
+        if (isInsideDevtools(el))
+            continue;
+        const raw = el.getAttribute(SERVER_BOUNDARY_DATA_ATTR) ?? "";
+        const name = raw.trim();
+        const displayLabel = name.length > 0 ? name : hostFallbackLabel(el);
+        regions.push({
+            element: el,
+            displayLabel,
+            source: "explicit",
+        });
+    }
+    return regions;
+}
+function hostFallbackLabel(el) {
+    const tag = el.tagName.toLowerCase();
+    if (el.id)
+        return `<${tag}#${el.id}>`;
+    return `<${tag}>`;
+}
+function heuristicRegionPanelLabel(el, allRoots) {
+    const tag = el.tagName.toLowerCase();
+    if (el.id) {
+        return `<${tag}#${el.id}>`;
+    }
+    const sameTag = allRoots.filter((e) => e.tagName === el.tagName);
+    if (sameTag.length === 1) {
+        return `<${tag}>`;
+    }
+    const n = sameTag.indexOf(el) + 1;
+    return `<${tag}> (${n})`;
+}
+/**
+ * Heuristic server regions: DOM nodes outside every client component subtree,
+ * excluding wrappers that strictly contain a client root, and excluding
+ * subtrees already covered by explicit markers.
+ */
+function collectHeuristicServerRegions(clientComponents, explicitMarkerElements, container) {
+    const clientRoots = new Set();
+    for (const comp of clientComponents) {
+        for (const node of comp.domNodes) {
+            clientRoots.add(node);
+        }
+    }
+    const inHeuristicCandidate = (el) => {
+        if (el === container)
+            return false;
+        if (!container.contains(el))
+            return false;
+        if (isInsideDevtools(el))
+            return false;
+        if (isInsideClientBoundary(el, clientRoots))
+            return false;
+        if (isInsideExplicitMarkerSubtree(el, explicitMarkerElements))
+            return false;
+        return true;
+    };
+    const filtered = new Set();
+    for (const el of elementDescendants(container)) {
+        if (!inHeuristicCandidate(el))
+            continue;
+        if (isStrictAncestorOfAnyClientRoot(el, clientRoots))
+            continue;
+        filtered.add(el);
+    }
+    const roots = [];
+    for (const el of filtered) {
+        const parent = el.parentElement;
+        const parentIn = parent !== null &&
+            parent !== container &&
+            filtered.has(parent);
+        if (!parentIn) {
+            roots.push(el);
+        }
+    }
+    return roots.map((element) => ({
+        element,
+        displayLabel: heuristicRegionPanelLabel(element, roots),
+        source: "heuristic",
+    }));
+}
+/**
+ * Collect server-rendered regions: optional explicit markers plus heuristic
+ * nested regions outside client component DOM subtrees.
+ */
+export function getServerRegions(clientComponents, container) {
+    const root = container ?? document.getElementById("__next") ?? document.body;
+    const explicit = collectExplicitServerRegions();
+    const explicitRoots = new Set(explicit.map((r) => r.element));
+    const heuristic = collectHeuristicServerRegions(clientComponents, explicitRoots, root);
+    return [...explicit, ...heuristic];
+}

package/dist/highlight.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+/**
+ * DOM highlighting for RSC Boundary visualization.
+ *
+ * When active, this module:
+ * 1. Takes the list of client components (from fiber-utils) and applies
+ *    orange dashed outlines to their root DOM elements.
+ * 2. Identifies server regions (explicit markers and/or heuristic DOM outside
+ *    client subtrees) and applies blue dashed outlines.
+ * 3. Injects small floating labels (client name; server label + explicit vs ~).
+ * 4. Sets up a MutationObserver to re-scan when the DOM changes
+ *    (e.g. route navigation, lazy-loaded content).
+ *
+ * All styling uses inline styles — no global CSS is injected.
+ */
+import type { ComponentInfo, ServerRegionInfo } from "./types";
+/**
+ * Apply highlights to detected client components and server regions.
+ */
+export declare function applyHighlights(clientComponents: ComponentInfo[], serverRegions: ServerRegionInfo[]): void;
+/**
+ * Remove all active highlights and restore original styles.
+ */
+export declare function removeHighlights(): void;
+/**
+ * Start a MutationObserver that calls `onMutation` when the DOM subtree
+ * changes (route transitions, lazy loading, etc.).
+ * Returns a cleanup function to disconnect the observer.
+ */
+export declare function observeDomChanges(onMutation: () => void): () => void;
+//# sourceMappingURL=highlight.d.ts.map

package/dist/highlight.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../src/highlight.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAsB,MAAM,SAAS,CAAC;AAsFnF;;GAEG;AACH,wBAAgB,eAAe,CAC7B,gBAAgB,EAAE,aAAa,EAAE,EACjC,aAAa,EAAE,gBAAgB,EAAE,GAChC,IAAI,CAqBN;AAYD;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAEvC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAmBpE"}

package/dist/highlight.js ADDED Viewed

@@ -0,0 +1,125 @@
+/**
+ * DOM highlighting for RSC Boundary visualization.
+ *
+ * When active, this module:
+ * 1. Takes the list of client components (from fiber-utils) and applies
+ *    orange dashed outlines to their root DOM elements.
+ * 2. Identifies server regions (explicit markers and/or heuristic DOM outside
+ *    client subtrees) and applies blue dashed outlines.
+ * 3. Injects small floating labels (client name; server label + explicit vs ~).
+ * 4. Sets up a MutationObserver to re-scan when the DOM changes
+ *    (e.g. route navigation, lazy-loaded content).
+ *
+ * All styling uses inline styles — no global CSS is injected.
+ */
+import { COLORS, LABEL_BASE_STYLES, applyStyles } from "./styles";
+const HIGHLIGHT_ATTR = "data-rsc-highlight";
+const LABEL_ATTR = "data-rsc-label";
+let activeHighlights = [];
+let observer = null;
+const OBSERVER_OPTIONS = {
+    childList: true,
+    subtree: true,
+};
+/**
+ * Our own highlight/label DOM updates trigger childList mutations. Pause the
+ * observer while mutating so we don't debounce-scan → setState in a loop.
+ */
+function withObserverPaused(callback) {
+    if (!observer) {
+        callback();
+        return;
+    }
+    observer.disconnect();
+    try {
+        callback();
+    }
+    finally {
+        observer.observe(document.body, OBSERVER_OPTIONS);
+    }
+}
+function createLabel(name, kind, serverSource) {
+    const label = document.createElement("div");
+    label.setAttribute(LABEL_ATTR, "");
+    label.setAttribute("data-rsc-devtools", "");
+    const prefix = kind === "client"
+        ? "Client"
+        : serverSource === "explicit"
+            ? "Server (explicit)"
+            : "Server (~)";
+    label.textContent = `${prefix}: ${name}`;
+    applyStyles(label, {
+        ...LABEL_BASE_STYLES,
+        background: kind === "client" ? COLORS.client.label : COLORS.server.label,
+    });
+    return label;
+}
+function highlightElement(element, name, kind, serverSource) {
+    const colors = kind === "client" ? COLORS.client : COLORS.server;
+    const originalOutline = element.style.outline;
+    const originalPosition = element.style.position;
+    element.style.outline = `2px dashed ${colors.outline}`;
+    element.setAttribute(HIGHLIGHT_ATTR, kind);
+    // Labels need a positioned ancestor to sit correctly
+    const computed = globalThis.getComputedStyle(element);
+    if (computed.position === "static") {
+        element.style.position = "relative";
+    }
+    const label = createLabel(name, kind, serverSource);
+    element.appendChild(label);
+    return { element, originalOutline, originalPosition, label };
+}
+/**
+ * Apply highlights to detected client components and server regions.
+ */
+export function applyHighlights(clientComponents, serverRegions) {
+    withObserverPaused(() => {
+        removeHighlightsInternal();
+        for (const comp of clientComponents) {
+            for (const node of comp.domNodes) {
+                activeHighlights.push(highlightElement(node, comp.name, "client"));
+            }
+        }
+        for (const region of serverRegions) {
+            activeHighlights.push(highlightElement(region.element, region.displayLabel, "server", region.source));
+        }
+    });
+}
+function removeHighlightsInternal() {
+    for (const entry of activeHighlights) {
+        entry.element.style.outline = entry.originalOutline;
+        entry.element.style.position = entry.originalPosition;
+        entry.element.removeAttribute(HIGHLIGHT_ATTR);
+        entry.label.remove();
+    }
+    activeHighlights = [];
+}
+/**
+ * Remove all active highlights and restore original styles.
+ */
+export function removeHighlights() {
+    withObserverPaused(removeHighlightsInternal);
+}
+/**
+ * Start a MutationObserver that calls `onMutation` when the DOM subtree
+ * changes (route transitions, lazy loading, etc.).
+ * Returns a cleanup function to disconnect the observer.
+ */
+export function observeDomChanges(onMutation) {
+    if (observer) {
+        observer.disconnect();
+    }
+    let debounceTimer = null;
+    observer = new MutationObserver(() => {
+        if (debounceTimer)
+            clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(onMutation, 300);
+    });
+    observer.observe(document.body, OBSERVER_OPTIONS);
+    return () => {
+        if (debounceTimer)
+            clearTimeout(debounceTimer);
+        observer?.disconnect();
+        observer = null;
+    };
+}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export { SERVER_BOUNDARY_DATA_ATTR } from "./constants";
+export { COLORS, LABEL_BASE_STYLES } from "./styles";
+export type { ComponentInfo, HighlightState, ServerRegionInfo, ServerRegionSource, } from "./types";
+export { RscBoundaryProvider } from "./provider";
+export { RscDevtools } from "./devtools";
+export { RscServerBoundaryMarker } from "./server-boundary-marker";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACrD,YAAY,EACV,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+export { SERVER_BOUNDARY_DATA_ATTR } from "./constants";
+export { COLORS, LABEL_BASE_STYLES } from "./styles";
+export { RscBoundaryProvider } from "./provider";
+export { RscDevtools } from "./devtools";
+export { RscServerBoundaryMarker } from "./server-boundary-marker";

package/dist/provider.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+/**
+ * RscBoundaryProvider — the single integration point for RSC Boundary.
+ *
+ * This is a React Server Component (no "use client" directive). Add it once
+ * in your root layout:
+ *
+ * ```tsx
+ * import { RscBoundaryProvider } from "rsc-boundary";
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <RscBoundaryProvider>{children}</RscBoundaryProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ *
+ * 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).
+ */
+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 {};
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,wBAAwB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,iHAAiH;IACjH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAO,GACR,EAAE,wBAAwB,2CAU1B"}

package/dist/provider.js ADDED Viewed

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

package/dist/server-boundary-marker.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+interface RscServerBoundaryMarkerProps {
+    children: ReactNode;
+    /** Shown in devtools when the region source is explicit. */
+    label?: string;
+    className?: string;
+}
+/**
+ * Server Component wrapper that opts a subtree into **explicit** server-region
+ * detection. Add `label` so the devtools panel shows a stable name.
+ *
+ * Heuristic detection still runs elsewhere; this marker is optional.
+ */
+export declare function RscServerBoundaryMarker({ children, label, className, }: RscServerBoundaryMarkerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=server-boundary-marker.d.ts.map

package/dist/server-boundary-marker.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"server-boundary-marker.d.ts","sourceRoot":"","sources":["../src/server-boundary-marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,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,2CAM9B"}

package/dist/server-boundary-marker.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Server Component wrapper that opts a subtree into **explicit** server-region
+ * detection. Add `label` so the devtools panel shows a stable name.
+ *
+ * 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 }));
+}

package/dist/styles.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * CSS-in-JS constants for the devtools overlay.
+ * All styles are applied via inline styles or injected style elements
+ * to avoid requiring a CSS file or global stylesheet.
+ */
+export declare const COLORS: {
+    readonly client: {
+        readonly outline: "rgba(249, 115, 22, 0.8)";
+        readonly background: "rgba(249, 115, 22, 0.12)";
+        readonly label: "rgba(249, 115, 22, 0.95)";
+    };
+    readonly server: {
+        readonly outline: "rgba(59, 130, 246, 0.8)";
+        readonly background: "rgba(59, 130, 246, 0.12)";
+        readonly label: "rgba(59, 130, 246, 0.95)";
+    };
+};
+export declare const PILL_STYLES: Record<string, string>;
+export declare const PILL_ACTIVE_STYLES: Partial<typeof PILL_STYLES>;
+export declare const PANEL_STYLES: Record<string, string>;
+export declare const LABEL_BASE_STYLES: Record<string, string>;
+export declare function applyStyles(el: HTMLElement, styles: Record<string, string>): void;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,CAAC;AAEX,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAuB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,OAAO,WAAW,CAG1D,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkB/C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAepD,CAAC;AAEF,wBAAgB,WAAW,CACzB,EAAE,EAAE,WAAW,EACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,IAAI,CAON"}

package/dist/styles.js ADDED Viewed

@@ -0,0 +1,82 @@
+/**
+ * CSS-in-JS constants for the devtools overlay.
+ * All styles are applied via inline styles or injected style elements
+ * to avoid requiring a CSS file or global stylesheet.
+ */
+export const COLORS = {
+    client: {
+        outline: "rgba(249, 115, 22, 0.8)",
+        background: "rgba(249, 115, 22, 0.12)",
+        label: "rgba(249, 115, 22, 0.95)",
+    },
+    server: {
+        outline: "rgba(59, 130, 246, 0.8)",
+        background: "rgba(59, 130, 246, 0.12)",
+        label: "rgba(59, 130, 246, 0.95)",
+    },
+};
+export const PILL_STYLES = {
+    position: "fixed",
+    bottom: "64px",
+    left: "16px",
+    zIndex: "99999",
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "6px 12px",
+    borderRadius: "9999px",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    background: "rgba(0, 0, 0, 0.8)",
+    backdropFilter: "blur(8px)",
+    color: "#fff",
+    fontSize: "13px",
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    fontWeight: "500",
+    cursor: "pointer",
+    userSelect: "none",
+    lineHeight: "1",
+    transition: "background 150ms ease, box-shadow 150ms ease",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
+};
+export const PILL_ACTIVE_STYLES = {
+    background: "rgba(0, 0, 0, 0.9)",
+    boxShadow: `0 0 0 2px ${COLORS.client.outline}, 0 2px 8px rgba(0, 0, 0, 0.3)`,
+};
+export const PANEL_STYLES = {
+    position: "fixed",
+    bottom: "100px",
+    left: "16px",
+    zIndex: "99998",
+    width: "280px",
+    maxHeight: "400px",
+    overflowY: "auto",
+    borderRadius: "12px",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    background: "rgba(0, 0, 0, 0.85)",
+    backdropFilter: "blur(12px)",
+    color: "#fff",
+    fontSize: "12px",
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    padding: "12px",
+    boxShadow: "0 4px 16px rgba(0, 0, 0, 0.4)",
+};
+export const LABEL_BASE_STYLES = {
+    position: "absolute",
+    top: "-1px",
+    left: "-1px",
+    padding: "1px 6px",
+    fontSize: "10px",
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    fontWeight: "600",
+    lineHeight: "16px",
+    color: "#fff",
+    borderRadius: "0 0 4px 0",
+    pointerEvents: "none",
+    zIndex: "99997",
+    whiteSpace: "nowrap",
+};
+export function applyStyles(el, styles) {
+    for (const [key, value] of Object.entries(styles)) {
+        el.style.setProperty(key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`), value);
+    }
+}

package/dist/types.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+ * Represents a detected client component boundary in the fiber tree.
+ * Server components have no fibers on the client — they are identified
+ * by exclusion (DOM regions not owned by any client component) and/or
+ * optional explicit markers.
+ */
+export interface ComponentInfo {
+    name: string;
+    domNodes: HTMLElement[];
+}
+/** How a server region was detected. */
+export type ServerRegionSource = "explicit" | "heuristic";
+/**
+ * A highlighted server-rendered DOM region (explicit marker or heuristic).
+ */
+export interface ServerRegionInfo {
+    element: HTMLElement;
+    /** Label for panel and floating overlay */
+    displayLabel: string;
+    source: ServerRegionSource;
+}
+export interface HighlightState {
+    enabled: boolean;
+    components: ComponentInfo[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,wCAAwC;AACxC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,2CAA2C;IAC3C,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,aAAa,EAAE,CAAC;CAC7B"}

package/dist/types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/package.json ADDED Viewed

@@ -0,0 +1,43 @@
+{
+  "name": "rsc-boundary",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/foxted/rsc-boundary.git"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "eslint": "^10.2.0",
+    "typescript": "6.0.2",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint --max-warnings 0",
+    "check-types": "tsc --noEmit"
+  }
+}