@raf-query/react 0.11.1 → 0.13.0

package/dist/devtools-panel.mjs

@@ -1,896 +0,0 @@
-"use client";
-import { useOptionalQueryClient } from "./provider.mjs";
-import { countByStatus, sortOrders, statuses, useQueryRows, visibleRows } from "./devtools-store.mjs";
-import { Query } from "@raf-query/core";
-import { useState, useSyncExternalStore } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Effect, Predicate } from "effect";
-//#region src/devtools-panel.tsx
-const palettes = {
-	dark: {
-		accent: "#978bff",
-		background: "#0f172a",
-		boolean: "#f472b6",
-		border: "#334155",
-		muted: "#94a3b8",
-		number: "#fbbf24",
-		raised: "#1e293b",
-		selected: "#2b2653",
-		string: "#4ade80",
-		text: "#e2e8f0"
-	},
-	light: {
-		accent: "#6c48ea",
-		background: "#ffffff",
-		boolean: "#be185d",
-		border: "#cbd5e1",
-		muted: "#64748b",
-		number: "#b45309",
-		raised: "#f1f5f9",
-		selected: "#e9e8ff",
-		string: "#15803d",
-		text: "#0f172a"
-	}
-};
-/** The logo's gradient: blue through violet to coral. */
-const brandGradient = "linear-gradient(135deg, #3b8eea, #7b5cff, #ff4d6d)";
-const statusColors = {
-	error: "#dc2626",
-	fetching: "#2563eb",
-	fresh: "#16a34a",
-	inactive: "#64748b",
-	stale: "#ca8a04"
-};
-const sortLabels = {
-	hash: "Key",
-	status: "Status",
-	updated: "Last updated"
-};
-const fontFamily = "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
-const monoFamily = "ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace";
-/** Entries an expanded object, array, map, or set lists before "… more". */
-const maxChildren = 100;
-const minSize = 120;
-const defaultSize = 320;
-const storageKeys = {
-	open: "raf-query-devtools:open",
-	size: "raf-query-devtools:size"
-};
-const noop = () => {};
-const subscribeNever = () => noop;
-/** `false` on the server and while hydrating, then `true`. */
-function useIsClient() {
-	return useSyncExternalStore(subscribeNever, () => true, () => false);
-}
-function subscribeColorScheme(onChange) {
-	const media = window.matchMedia("(prefers-color-scheme: dark)");
-	media.addEventListener("change", onChange);
-	return () => media.removeEventListener("change", onChange);
-}
-function prefersDark() {
-	return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-function usePalette(theme = "system") {
-	const systemDark = useSyncExternalStore(subscribeColorScheme, prefersDark, () => true);
-	if (theme === "system") return systemDark ? palettes.dark : palettes.light;
-	return palettes[theme];
-}
-function useDevtoolsClient(client) {
-	const contextClient = useOptionalQueryClient();
-	const resolved = client ?? contextClient;
-	if (!resolved) throw new Error("raf-query devtools: pass `client` or render inside a QueryClientProvider");
-	return resolved;
-}
-function readStored(key) {
-	try {
-		return window.localStorage.getItem(key);
-	} catch {
-		return null;
-	}
-}
-function writeStored(key, value) {
-	try {
-		window.localStorage.setItem(key, value);
-	} catch {}
-}
-function formatTime(updatedAt) {
-	return updatedAt === 0 ? "never" : new Date(updatedAt).toLocaleTimeString();
-}
-/** One-line form of a value, for leaves and collapsed nodes. */
-function preview(value) {
-	if (Predicate.isString(value)) return JSON.stringify(value);
-	if (Predicate.isBigInt(value)) return `${value}n`;
-	if (Predicate.isSymbol(value)) return value.toString();
-	if (Predicate.isFunction(value)) return `ƒ ${value.name || "anonymous"}()`;
-	if (Predicate.isDate(value)) return Number.isNaN(value.getTime()) ? "Invalid Date" : value.toISOString();
-	if (Predicate.isError(value)) return `${value.name}: ${value.message}`;
-	if (Predicate.isRegExp(value)) return String(value);
-	if (Predicate.isPromiseLike(value)) return "Promise";
-	if (Array.isArray(value)) return `Array(${value.length})`;
-	if (Predicate.isMap(value)) return `Map(${value.size})`;
-	if (Predicate.isSet(value)) return `Set(${value.size})`;
-	if (Predicate.isObject(value)) {
-		const size = Object.keys(value).length;
-		return size === 1 ? "{1 key}" : `{${size} keys}`;
-	}
-	return String(value);
-}
-/** Labelled children of a value the explorer can expand, else `undefined`. */
-function childrenOf(value) {
-	if (Array.isArray(value)) return value.map((item, index) => [String(index), item]);
-	if (Predicate.isMap(value)) return [...value].map(([key, item]) => [preview(key), item]);
-	if (Predicate.isSet(value)) return [...value].map((item, index) => [String(index), item]);
-	if (!Predicate.isObject(value) || Predicate.isDate(value) || Predicate.isError(value) || Predicate.isRegExp(value) || Predicate.isPromiseLike(value)) return;
-	return Object.entries(value);
-}
-function colorOf(value, palette) {
-	if (Predicate.isString(value)) return palette.string;
-	if (Predicate.isNumber(value) || Predicate.isBigInt(value)) return palette.number;
-	if (Predicate.isBoolean(value)) return palette.boolean;
-	if (Predicate.isNullish(value)) return palette.muted;
-	return palette.text;
-}
-function copyText(value) {
-	try {
-		return JSON.stringify(value, null, 2) ?? String(value);
-	} catch {
-		return preview(value);
-	}
-}
-function Explorer(props) {
-	const [expanded, setExpanded] = useState(props.depth < 1);
-	const children = childrenOf(props.value);
-	const palette = props.palette;
-	const label = props.label === void 0 ? null : /* @__PURE__ */ jsx("span", {
-		style: { color: palette.accent },
-		children: `${props.label}: `
-	});
-	if (children === void 0) return /* @__PURE__ */ jsxs("div", {
-		style: { paddingLeft: 14 },
-		children: [label, /* @__PURE__ */ jsx("span", {
-			style: { color: colorOf(props.value, palette) },
-			children: preview(props.value)
-		})]
-	});
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
-		"aria-expanded": expanded,
-		onClick: () => setExpanded(!expanded),
-		style: {
-			background: "none",
-			border: "none",
-			color: palette.text,
-			cursor: "pointer",
-			font: "inherit",
-			padding: 0,
-			textAlign: "left"
-		},
-		type: "button",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": true,
-				style: {
-					display: "inline-block",
-					width: 14
-				},
-				children: expanded ? "▾" : "▸"
-			}),
-			label,
-			/* @__PURE__ */ jsx("span", {
-				style: { color: palette.muted },
-				children: preview(props.value)
-			})
-		]
-	}), expanded ? /* @__PURE__ */ jsxs("div", {
-		style: { paddingLeft: 14 },
-		children: [children.slice(0, maxChildren).map(([key, item]) => /* @__PURE__ */ jsx(Explorer, {
-			depth: props.depth + 1,
-			label: key,
-			palette,
-			value: item
-		}, key)), children.length > maxChildren ? /* @__PURE__ */ jsx("div", {
-			style: {
-				color: palette.muted,
-				paddingLeft: 14
-			},
-			children: `… ${children.length - maxChildren} more`
-		}) : null]
-	}) : null] });
-}
-function StatusChip(props) {
-	return /* @__PURE__ */ jsxs("span", {
-		"data-status": props.status,
-		style: {
-			alignItems: "center",
-			background: props.palette.raised,
-			border: `1px solid ${props.palette.border}`,
-			borderRadius: 999,
-			display: "inline-flex",
-			gap: 6,
-			padding: "2px 8px"
-		},
-		children: [/* @__PURE__ */ jsx("span", {
-			"aria-hidden": true,
-			style: {
-				background: statusColors[props.status],
-				borderRadius: 999,
-				height: 8,
-				width: 8
-			}
-		}), `${props.status} ${props.count}`]
-	});
-}
-function ActionButton(props) {
-	return /* @__PURE__ */ jsx("button", {
-		disabled: props.disabled,
-		onClick: props.onClick,
-		style: {
-			background: props.color,
-			border: "none",
-			borderRadius: 4,
-			color: "#ffffff",
-			cursor: props.disabled ? "not-allowed" : "pointer",
-			font: "inherit",
-			opacity: props.disabled ? .5 : 1,
-			padding: "4px 10px"
-		},
-		type: "button",
-		children: props.label
-	});
-}
-function Heading(props) {
-	return /* @__PURE__ */ jsx("h3", {
-		style: {
-			background: props.palette.raised,
-			borderBottom: `1px solid ${props.palette.border}`,
-			borderTop: `1px solid ${props.palette.border}`,
-			fontSize: 12,
-			fontWeight: 600,
-			margin: 0,
-			padding: "4px 8px"
-		},
-		children: props.title
-	});
-}
-function Field(props) {
-	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			gap: 8,
-			justifyContent: "space-between"
-		},
-		children: [/* @__PURE__ */ jsx("dt", {
-			style: { color: props.palette.muted },
-			children: props.label
-		}), /* @__PURE__ */ jsx("dd", {
-			style: {
-				margin: 0,
-				textAlign: "right"
-			},
-			children: props.children
-		})]
-	});
-}
-function QueryDetails(props) {
-	const palette = props.palette;
-	const query = props.row.query;
-	const state = props.row.state;
-	const options = query.options;
-	const meta = Query.metaUnsafe(query);
-	const section = { padding: 8 };
-	return /* @__PURE__ */ jsxs("section", {
-		"aria-label": "Query details",
-		style: {
-			flex: 1,
-			minWidth: 0,
-			overflow: "auto"
-		},
-		children: [
-			/* @__PURE__ */ jsx(Heading, {
-				palette,
-				title: "Query details"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				style: section,
-				children: [/* @__PURE__ */ jsx("pre", {
-					style: {
-						fontFamily: monoFamily,
-						margin: "0 0 8px",
-						whiteSpace: "pre-wrap",
-						wordBreak: "break-all"
-					},
-					children: JSON.stringify(query.key, null, 2)
-				}), /* @__PURE__ */ jsxs("dl", {
-					style: {
-						display: "grid",
-						gap: 4,
-						margin: 0
-					},
-					children: [
-						/* @__PURE__ */ jsx(Field, {
-							label: "Status",
-							palette,
-							children: props.row.status
-						}),
-						/* @__PURE__ */ jsx(Field, {
-							label: "Observers",
-							palette,
-							children: String(props.row.observers)
-						}),
-						/* @__PURE__ */ jsx(Field, {
-							label: "Last updated",
-							palette,
-							children: formatTime(state.updatedAt)
-						}),
-						/* @__PURE__ */ jsx(Field, {
-							label: "Kind",
-							palette,
-							children: options === void 0 ? "hydrated" : options.kind
-						}),
-						/* @__PURE__ */ jsx(Field, {
-							label: "Failures",
-							palette,
-							children: String(state.failureCount)
-						})
-					]
-				})]
-			}),
-			/* @__PURE__ */ jsx(Heading, {
-				palette,
-				title: "Actions"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				style: {
-					...section,
-					display: "flex",
-					flexWrap: "wrap",
-					gap: 6
-				},
-				children: [
-					/* @__PURE__ */ jsx(ActionButton, {
-						color: statusColors.fetching,
-						disabled: options === void 0 || state.isFetching,
-						label: "Refetch",
-						onClick: () => void Effect.runPromise(Query.refetch(query))
-					}),
-					/* @__PURE__ */ jsx(ActionButton, {
-						color: statusColors.stale,
-						label: "Invalidate",
-						onClick: () => void Effect.runPromise(Query.invalidate(query))
-					}),
-					/* @__PURE__ */ jsx(ActionButton, {
-						color: statusColors.inactive,
-						label: "Reset",
-						onClick: () => void Effect.runPromise(Query.reset(query))
-					}),
-					/* @__PURE__ */ jsx(ActionButton, {
-						color: statusColors.error,
-						label: "Remove",
-						onClick: () => props.client.remove({
-							exact: true,
-							queryKey: query.key
-						})
-					})
-				]
-			}),
-			state.error == null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
-				palette,
-				title: "Error"
-			}), /* @__PURE__ */ jsxs("div", {
-				style: {
-					...section,
-					color: statusColors.error
-				},
-				children: [/* @__PURE__ */ jsx("div", { children: preview(state.error) }), Predicate.isError(state.error) && state.error.stack ? /* @__PURE__ */ jsx("pre", {
-					style: {
-						fontFamily: monoFamily,
-						fontSize: 11,
-						margin: "6px 0 0",
-						whiteSpace: "pre-wrap"
-					},
-					children: state.error.stack
-				}) : null]
-			})] }),
-			/* @__PURE__ */ jsx(Heading, {
-				palette,
-				title: "Data"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				style: {
-					...section,
-					fontFamily: monoFamily
-				},
-				children: [/* @__PURE__ */ jsx("button", {
-					onClick: () => void navigator.clipboard?.writeText(copyText(state.data)),
-					style: {
-						background: "none",
-						border: `1px solid ${palette.border}`,
-						borderRadius: 4,
-						color: palette.text,
-						cursor: "pointer",
-						float: "right",
-						font: "inherit",
-						fontFamily,
-						padding: "2px 8px"
-					},
-					type: "button",
-					children: "Copy"
-				}), /* @__PURE__ */ jsx(Explorer, {
-					depth: 0,
-					palette,
-					value: state.data
-				})]
-			}),
-			/* @__PURE__ */ jsx(Heading, {
-				palette,
-				title: "Input"
-			}),
-			/* @__PURE__ */ jsx("div", {
-				style: {
-					...section,
-					fontFamily: monoFamily
-				},
-				children: /* @__PURE__ */ jsx(Explorer, {
-					depth: 0,
-					palette,
-					value: query.handle.input
-				})
-			}),
-			meta === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
-				palette,
-				title: "Meta"
-			}), /* @__PURE__ */ jsx("div", {
-				style: {
-					...section,
-					fontFamily: monoFamily
-				},
-				children: /* @__PURE__ */ jsx(Explorer, {
-					depth: 0,
-					palette,
-					value: meta
-				})
-			})] })
-		]
-	});
-}
-function QueryList(props) {
-	const palette = props.palette;
-	if (props.rows.length === 0) return /* @__PURE__ */ jsx("p", {
-		style: {
-			color: palette.muted,
-			margin: 0,
-			padding: 12
-		},
-		children: "No queries"
-	});
-	return /* @__PURE__ */ jsx("ul", {
-		style: {
-			listStyle: "none",
-			margin: 0,
-			padding: 0
-		},
-		children: props.rows.map((row) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
-			"aria-pressed": row.hash === props.selectedHash,
-			"data-status": row.status,
-			onClick: () => props.onSelect(row.hash),
-			style: {
-				alignItems: "center",
-				background: row.hash === props.selectedHash ? palette.selected : "transparent",
-				border: "none",
-				borderBottom: `1px solid ${palette.border}`,
-				color: palette.text,
-				cursor: "pointer",
-				display: "flex",
-				font: "inherit",
-				gap: 8,
-				padding: "4px 8px",
-				textAlign: "left",
-				width: "100%"
-			},
-			title: row.status,
-			type: "button",
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-label": `${row.observers} observers`,
-				style: {
-					background: statusColors[row.status],
-					borderRadius: 4,
-					color: "#ffffff",
-					flexShrink: 0,
-					fontWeight: 600,
-					minWidth: 22,
-					padding: "1px 4px",
-					textAlign: "center"
-				},
-				children: row.observers
-			}), /* @__PURE__ */ jsx("code", {
-				style: {
-					fontFamily: monoFamily,
-					overflow: "hidden",
-					textOverflow: "ellipsis",
-					whiteSpace: "nowrap"
-				},
-				children: row.hash
-			})]
-		}) }, row.hash))
-	});
-}
-function isSortBy(value) {
-	return sortOrders.some((order) => order === value);
-}
-function Panel(props) {
-	const client = useDevtoolsClient(props.client);
-	const palette = usePalette(props.theme);
-	const rows = useQueryRows(client);
-	const [filter, setFilter] = useState("");
-	const [sortBy, setSortBy] = useState("status");
-	const [selectedHash, setSelectedHash] = useState(void 0);
-	const counts = countByStatus(rows);
-	const shown = visibleRows(rows, filter, sortBy);
-	const selected = rows.find((row) => row.hash === selectedHash);
-	const control = {
-		background: palette.raised,
-		border: `1px solid ${palette.border}`,
-		borderRadius: 4,
-		color: palette.text,
-		font: "inherit",
-		padding: "3px 6px"
-	};
-	const onClose = props.onClose;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-raf-query-devtools": "",
-		style: {
-			background: palette.background,
-			boxSizing: "border-box",
-			color: palette.text,
-			colorScheme: palette === palettes.dark ? "dark" : "light",
-			display: "flex",
-			flexDirection: "column",
-			fontFamily,
-			fontSize: 12,
-			lineHeight: 1.4,
-			minHeight: 0,
-			overflow: "hidden",
-			...props.style
-		},
-		children: [/* @__PURE__ */ jsxs("header", {
-			style: {
-				alignItems: "center",
-				borderBottom: `1px solid ${palette.border}`,
-				display: "flex",
-				flexWrap: "wrap",
-				gap: 8,
-				padding: 8
-			},
-			children: [
-				/* @__PURE__ */ jsxs("strong", {
-					style: { fontSize: 13 },
-					children: ["raf-query ", /* @__PURE__ */ jsx("span", {
-						style: { color: palette.accent },
-						children: "devtools"
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					style: {
-						display: "flex",
-						flexWrap: "wrap",
-						gap: 4
-					},
-					children: statuses.map((status) => /* @__PURE__ */ jsx(StatusChip, {
-						count: counts[status],
-						palette,
-						status
-					}, status))
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						gap: 6,
-						marginLeft: "auto"
-					},
-					children: [
-						/* @__PURE__ */ jsx("input", {
-							"aria-label": "Filter queries",
-							onChange: (event) => setFilter(event.target.value),
-							placeholder: "Filter",
-							style: control,
-							type: "search",
-							value: filter
-						}),
-						/* @__PURE__ */ jsx("select", {
-							"aria-label": "Sort queries",
-							onChange: (event) => {
-								const value = event.target.value;
-								if (isSortBy(value)) setSortBy(value);
-							},
-							style: control,
-							value: sortBy,
-							children: sortOrders.map((order) => /* @__PURE__ */ jsx("option", {
-								value: order,
-								children: sortLabels[order]
-							}, order))
-						}),
-						/* @__PURE__ */ jsx("button", {
-							onClick: () => void client.invalidate({}),
-							style: {
-								...control,
-								cursor: "pointer"
-							},
-							type: "button",
-							children: "Invalidate all"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							onClick: () => client.clear(),
-							style: {
-								...control,
-								cursor: "pointer"
-							},
-							type: "button",
-							children: "Clear cache"
-						}),
-						onClose ? /* @__PURE__ */ jsx("button", {
-							"aria-label": "Close raf-query devtools",
-							onClick: () => onClose(),
-							style: {
-								...control,
-								cursor: "pointer"
-							},
-							type: "button",
-							children: "✕"
-						}) : null
-					]
-				})
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				flex: 1,
-				minHeight: 0
-			},
-			children: [/* @__PURE__ */ jsx("nav", {
-				"aria-label": "Queries",
-				style: {
-					borderRight: `1px solid ${palette.border}`,
-					flex: 1,
-					minWidth: 0,
-					overflow: "auto"
-				},
-				children: /* @__PURE__ */ jsx(QueryList, {
-					onSelect: setSelectedHash,
-					palette,
-					rows: shown,
-					selectedHash
-				})
-			}), selected ? /* @__PURE__ */ jsx(QueryDetails, {
-				client,
-				palette,
-				row: selected
-			}) : /* @__PURE__ */ jsx("p", {
-				style: {
-					color: palette.muted,
-					flex: 1,
-					margin: 0,
-					padding: 12
-				},
-				children: "Select a query to inspect it"
-			})]
-		})]
-	});
-}
-/**
-* The devtools panel on its own, to place anywhere in the page. Renders
-* nothing on the server, since the server's cache isn't the browser's.
-*/
-function QueryDevtoolsPanel(props) {
-	return useIsClient() ? /* @__PURE__ */ jsx(Panel, {
-		client: props.client,
-		onClose: props.onClose,
-		style: props.style,
-		theme: props.theme
-	}) : null;
-}
-const corners = {
-	"bottom-left": {
-		bottom: 12,
-		left: 12
-	},
-	"bottom-right": {
-		bottom: 12,
-		right: 12
-	},
-	"top-left": {
-		left: 12,
-		top: 12
-	},
-	"top-right": {
-		right: 12,
-		top: 12
-	}
-};
-function clampSize(size, max) {
-	return Math.min(Math.max(size, minSize), Math.max(max - 40, minSize));
-}
-function DockedDevtools(props) {
-	const position = props.position ?? "bottom";
-	const buttonPosition = props.buttonPosition ?? "bottom-right";
-	const horizontal = position === "left" || position === "right";
-	const [isOpen, setIsOpen] = useState(() => {
-		const stored = readStored(storageKeys.open);
-		return stored === null ? props.initialIsOpen ?? false : stored === "true";
-	});
-	const [size, setSize] = useState(() => Number(readStored(storageKeys.size)) || defaultSize);
-	const palette = usePalette(props.theme);
-	const setOpen = (open) => {
-		setIsOpen(open);
-		writeStored(storageKeys.open, String(open));
-	};
-	const startResize = (event) => {
-		event.preventDefault();
-		let latest = size;
-		const onMove = (move) => {
-			const next = {
-				bottom: window.innerHeight - move.clientY,
-				left: move.clientX,
-				right: window.innerWidth - move.clientX,
-				top: move.clientY
-			}[position];
-			latest = clampSize(next, horizontal ? window.innerWidth : window.innerHeight);
-			setSize(latest);
-		};
-		const onUp = () => {
-			window.removeEventListener("pointermove", onMove);
-			window.removeEventListener("pointerup", onUp);
-			writeStored(storageKeys.size, String(latest));
-		};
-		window.addEventListener("pointermove", onMove);
-		window.addEventListener("pointerup", onUp);
-	};
-	if (!isOpen) return /* @__PURE__ */ jsxs("button", {
-		"aria-label": "Open raf-query devtools",
-		onClick: () => setOpen(true),
-		style: {
-			...corners[buttonPosition],
-			alignItems: "center",
-			background: palette.background,
-			border: `1px solid ${palette.border}`,
-			borderRadius: 999,
-			boxShadow: "0 2px 8px rgb(0 0 0 / 0.25)",
-			color: palette.text,
-			cursor: "pointer",
-			display: "flex",
-			fontFamily,
-			fontSize: 12,
-			fontWeight: 600,
-			gap: 6,
-			padding: "6px 12px",
-			position: "fixed",
-			zIndex: 99999
-		},
-		type: "button",
-		children: [/* @__PURE__ */ jsx("span", {
-			"aria-hidden": true,
-			style: {
-				background: brandGradient,
-				borderRadius: 999,
-				height: 8,
-				width: 8
-			}
-		}), "raf-query"]
-	});
-	const edge = {
-		bottom: {
-			bottom: 0,
-			height: size,
-			left: 0,
-			right: 0
-		},
-		left: {
-			bottom: 0,
-			left: 0,
-			top: 0,
-			width: size
-		},
-		right: {
-			bottom: 0,
-			right: 0,
-			top: 0,
-			width: size
-		},
-		top: {
-			height: size,
-			left: 0,
-			right: 0,
-			top: 0
-		}
-	}[position];
-	const handleEdge = {
-		bottom: {
-			height: 10,
-			left: 0,
-			right: 0,
-			top: -5
-		},
-		left: {
-			bottom: 0,
-			right: -5,
-			top: 0,
-			width: 10
-		},
-		right: {
-			bottom: 0,
-			left: -5,
-			top: 0,
-			width: 10
-		},
-		top: {
-			bottom: -5,
-			height: 10,
-			left: 0,
-			right: 0
-		}
-	}[position];
-	return /* @__PURE__ */ jsxs("aside", {
-		"aria-label": "raf-query devtools",
-		style: {
-			...edge,
-			borderColor: palette.border,
-			borderStyle: "solid",
-			borderWidth: {
-				bottom: "1px 0 0",
-				left: "0 1px 0 0",
-				right: "0 0 0 1px",
-				top: "0 0 1px"
-			}[position],
-			boxShadow: "0 0 16px rgb(0 0 0 / 0.3)",
-			position: "fixed",
-			zIndex: 99999
-		},
-		children: [/* @__PURE__ */ jsx("div", {
-			"aria-label": "Resize raf-query devtools",
-			"aria-orientation": horizontal ? "vertical" : "horizontal",
-			onPointerDown: startResize,
-			role: "separator",
-			style: {
-				...handleEdge,
-				alignItems: "center",
-				cursor: horizontal ? "ew-resize" : "ns-resize",
-				display: "flex",
-				justifyContent: "center",
-				position: "absolute",
-				touchAction: "none",
-				zIndex: 1
-			},
-			children: /* @__PURE__ */ jsx("span", {
-				"aria-hidden": true,
-				style: {
-					background: palette.border,
-					borderRadius: 999,
-					height: horizontal ? 32 : 4,
-					width: horizontal ? 4 : 32
-				}
-			})
-		}), /* @__PURE__ */ jsx(QueryDevtoolsPanel, {
-			client: props.client,
-			onClose: () => setOpen(false),
-			style: {
-				height: "100%",
-				width: "100%"
-			},
-			theme: props.theme
-		})]
-	});
-}
-/**
-* A toggle button that opens the devtools panel docked to an edge of the
-* viewport. Renders nothing on the server. Open state and size are kept in
-* `localStorage`.
-*/
-function QueryDevtools(props) {
-	return useIsClient() ? /* @__PURE__ */ jsx(DockedDevtools, {
-		buttonPosition: props.buttonPosition,
-		client: props.client,
-		initialIsOpen: props.initialIsOpen,
-		position: props.position,
-		theme: props.theme
-	}) : null;
-}
-//#endregion
-export { QueryDevtools, QueryDevtoolsPanel, preview };