effect-inspect 0.1.0

package/app/dist/server/assets/router-CN98Ramo.js

@@ -0,0 +1,491 @@
+import { useContext, useEffect, useSyncExternalStore } from "react";
+import { HeadContent, Link, Outlet, Scripts, createFileRoute, createRootRoute, createRouter, lazyRouteComponent } from "@tanstack/react-router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, FileQuestion } from "lucide-react";
+import { RegistryContext, RegistryProvider, useAtom } from "@effect/atom-react";
+import { Atom } from "effect/unstable/reactivity";
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region app/src/state/panels.ts
+/**
+* Whether the sessions sidebar and the span detail panel are collapsed.
+*
+* Both panels are *chrome around* the chart, not the chart itself, so which of
+* them a user wants open is a durable preference rather than per-visit state —
+* it lives in `localStorage` alongside the theme.
+*
+* The hydration constraint is the same one {@link module:state/theme} has, and
+* so is the answer: the server cannot read `localStorage`, so these atoms are
+* seeded with the *default* and adopt storage in an effect. Unlike the theme
+* there is no boot script and no flash to avoid, because a collapsed panel is
+* a layout the user sees and re-renders once — not a colour that would flash.
+*
+* See `usePanel` in {@link module:components/Panel} for the read side, which
+* defers to the server's value until hydration commits.
+*/
+/** `localStorage` key. One record, so a panel added later costs no migration. */
+var PANELS_STORAGE_KEY = "effect-inspect:panels";
+/** Both panels open — what the server renders, and a first visit gets. */
+var DEFAULT_PANELS = {
+	sessions: false,
+	detail: false
+};
+/** Reads stored collapse state, ignoring anything that is not our shape. */
+var stored = () => {
+	if (typeof localStorage === "undefined") return DEFAULT_PANELS;
+	try {
+		const raw = JSON.parse(localStorage.getItem("effect-inspect:panels") ?? "null");
+		if (typeof raw !== "object" || raw === null) return DEFAULT_PANELS;
+		const value = raw;
+		return {
+			sessions: value.sessions === true,
+			detail: value.detail === true
+		};
+	} catch {
+		return DEFAULT_PANELS;
+	}
+};
+/** The live collapse state. Seeded with the default; see the module comment. */
+var panelsAtom = Atom.make(DEFAULT_PANELS);
+/**
+* Adopts the stored collapse state and persists every change after it.
+*
+* Started once from the root, for the same reason the theme sync is: there is
+* one `localStorage` entry, so there is one owner of it.
+*/
+var startPanelSync = (registry) => {
+	const off = registry.subscribe(panelsAtom, (panels) => {
+		try {
+			localStorage.setItem(PANELS_STORAGE_KEY, JSON.stringify(panels));
+		} catch {}
+	});
+	const saved = stored();
+	const current = registry.get(panelsAtom);
+	if (saved.sessions !== current.sessions || saved.detail !== current.detail) registry.set(panelsAtom, saved);
+	return off;
+};
+//#endregion
+//#region app/src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region app/src/components/atoms/Button.tsx
+/**
+* Beautiful UI's `button` atom, installed from
+* `https://www.beautifului.dev/r/button.json`.
+*
+* Adapted to repo convention only: relative import with an explicit extension,
+* `readonly` props, and no `"use client"` (nothing in this app is an RSC).
+* The variant table itself is the registry's, unedited — it is the file's whole
+* reason for existing.
+*/
+var filledShadow = "shadow-[inset_0_1px_0_rgba(255,255,255,0.14)]";
+var buttonVariants = cva(`inline-flex items-center justify-center font-medium select-none
+   transition-[transform,background-color,opacity] duration-150 ease-out
+   active:scale-[0.96] disabled:opacity-50 disabled:pointer-events-none`, {
+	variants: {
+		variant: {
+			primary: `bg-ink text-canvas hover:opacity-90 dark:bg-ink dark:text-canvas ${filledShadow}`,
+			secondary: "bg-surface text-ink shadow-btn hover:bg-inset aria-expanded:bg-hover",
+			ghost: "bg-hover-2 text-ink hover:bg-line-strong",
+			accent: `bg-accent text-white hover:bg-accent-ink ${filledShadow}`,
+			success: `bg-green text-white hover:brightness-95 ${filledShadow}`,
+			quiet: "text-ink hover:bg-hover"
+		},
+		size: {
+			xs: "h-7 rounded-full px-2.5 text-[12px] font-normal leading-none gap-1",
+			sm: "h-[27px] px-3 text-[13px] leading-none rounded-full gap-1.5",
+			md: "px-4 py-[9px] text-sm leading-none rounded-full gap-2"
+		}
+	},
+	defaultVariants: {
+		variant: "secondary",
+		size: "md"
+	}
+});
+var Button = ({ variant, size, className, ...props }) => /* @__PURE__ */ jsx("button", {
+	className: cn(buttonVariants({
+		variant,
+		size
+	}), className),
+	...props
+});
+//#endregion
+//#region app/src/components/Panel.tsx
+/**
+* The shared furniture the side panels are built from: the collapse hook, the
+* rail a collapsed panel leaves behind, and the designed empty state.
+*
+* Both side panels are the same object seen from opposite edges — a titled
+* surface that can fold to a rail — so the collapse affordance, its width and
+* its label orientation live here once rather than being written twice with a
+* left/right difference in each.
+*/
+/** No-op subscribe: {@link useHydrated} never changes after the first commit. */
+var noSubscribe = () => () => {};
+/**
+* `false` during server render and while hydrating, `true` afterwards.
+*
+* Same mechanism, and the same reason, as the copy in `ThemeToggle`: the
+* stored panel state is adopted in an effect that can land before a lazily
+* loaded component hydrates, so reading the atom directly would render markup
+* that disagrees with what React is hydrating against.
+*/
+var useHydrated = () => useSyncExternalStore(noSubscribe, () => true, () => false);
+/**
+* One panel's collapsed flag and a toggle for it.
+*
+* Returns the *server's* value until hydration commits, so the first client
+* render always matches the markup; the stored preference arrives one commit
+* later, which for a layout is a single re-render rather than a flash.
+*/
+var usePanel = (key) => {
+	const [panels, setPanels] = useAtom(panelsAtom);
+	return [useHydrated() ? panels[key] : DEFAULT_PANELS[key], () => setPanels({
+		...panels,
+		[key]: !panels[key]
+	})];
+};
+/** Which way the chevron points, per edge and state. */
+var chevron = (edge, collapsed) => {
+	return (edge === "left" ? collapsed : !collapsed) ? ChevronRight : ChevronLeft;
+};
+/**
+* The collapse control. Quiet until hovered, like every other chrome button.
+*
+* `aria-expanded` and `aria-controls` rather than a changing label, so the
+* button's accessible name stays stable while its state is announced — the
+* same shape the drawer's collapse button already uses.
+*/
+var CollapseButton = ({ edge, collapsed, onToggle, label, controls }) => {
+	const Icon = chevron(edge, collapsed);
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "quiet",
+		size: "xs",
+		onClick: onToggle,
+		"aria-expanded": !collapsed,
+		"aria-controls": controls,
+		"aria-label": label,
+		title: label,
+		className: "size-6 shrink-0 px-0 text-ink-3 hover:text-ink",
+		children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
+	});
+};
+/**
+* A collapsed panel, as a narrow rail carrying its own name and re-open control.
+*
+* A rail rather than nothing at all: a panel that vanishes entirely leaves no
+* clue that it existed, and the user who collapsed it last week has to
+* rediscover the feature. 28px is the button plus the panel's border.
+*/
+var CollapsedRail = ({ edge, title, onToggle, id }) => /* @__PURE__ */ jsxs("aside", {
+	id,
+	className: `flex w-7 shrink-0 flex-col items-center gap-2 bg-surface py-1.5 ${edge === "left" ? "border-r" : "border-l"} border-line`,
+	children: [/* @__PURE__ */ jsx(CollapseButton, {
+		edge,
+		collapsed: true,
+		onToggle,
+		label: `Show ${title.toLowerCase()}`,
+		controls: id
+	}), /* @__PURE__ */ jsx("span", {
+		className: "text-[10px] tracking-wider whitespace-nowrap text-ink-3 uppercase",
+		style: {
+			writingMode: "vertical-rl",
+			transform: edge === "left" ? "rotate(180deg)" : void 0
+		},
+		children: title
+	})]
+});
+/**
+* The panel header: a section label, and whatever control belongs beside it.
+*
+* Fixed 28px content height so the sidebar's header, the detail panel's header
+* and the drawer's tab bar all land on the same baseline grid.
+*/
+var PanelHeader = ({ title, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex h-8 shrink-0 items-center gap-2 border-b border-line px-2",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "min-w-0 flex-1 truncate text-[10px] tracking-wider text-ink-3 uppercase",
+		children: title
+	}), children]
+});
+/**
+* The designed empty state: an icon, what is missing, and the action that fixes it.
+*
+* Three lines rather than one sentence, because "Select a span." tells a new
+* user what is absent but not what to do about it. The icon is what makes the
+* block read as a deliberate state rather than as a failed render, and the
+* hint carries the verb.
+*/
+var Empty = ({ icon: Icon, title, hint, className = "" }) => /* @__PURE__ */ jsxs("div", {
+	className: `flex flex-col items-center justify-center gap-2 px-4 py-8 text-center ${className}`,
+	children: [
+		/* @__PURE__ */ jsx(Icon, {
+			className: "size-5 text-ink-3",
+			strokeWidth: 1.5,
+			"aria-hidden": true
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "text-xs text-ink-2",
+			children: title
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "max-w-56 text-[11px] leading-relaxed text-balance text-ink-3",
+			children: hint
+		})
+	]
+});
+//#endregion
+//#region app/src/state/theme.ts
+/**
+* Theme preference, and the one place that owns the `dark` class.
+*
+* Three moving parts, and the split between them is the whole design:
+*
+* - **The preference** (`light | dark | system`) is what the user chose. It
+*   lives in an atom and in `localStorage`.
+* - **The resolution** (`light | dark`) is what that preference means right
+*   now, which for `system` depends on `prefers-color-scheme` and can change
+*   under a stationary preference.
+* - **The class on `<html>`** is what CSS and the canvas actually read.
+*
+* The class is applied *imperatively*, not by React rendering it. TanStack
+* Start renders the document on the server, where `localStorage` and
+* `prefers-color-scheme` are both unavailable, so a React-rendered class can
+* only ever be the default — and correcting it in an effect is a flash. See
+* {@link THEME_BOOT_SCRIPT}, which runs before first paint.
+*/
+/** `localStorage` key. Shared with {@link THEME_BOOT_SCRIPT}, which is a string. */
+var THEME_STORAGE_KEY = "effect-inspect:theme";
+/** Dark is the default, per the spec, and is what the server renders. */
+var DEFAULT_THEME = "dark";
+var isTheme = (value) => value === "light" || value === "dark" || value === "system";
+/**
+* Blocking inline script for `<head>`.
+*
+* This is the no-flash mechanism. The server always renders `class="dark"`
+* (the default), so a user whose stored preference is `light` would otherwise
+* see a dark frame before hydration corrects it. Running synchronously in
+* `<head>`, before the body paints, means the correction happens in the same
+* frame as the first paint and there is nothing to see.
+*
+* It is deliberately duplicated logic rather than an import: it must run before
+* any module graph is fetched, so it cannot be a module. It is small and both
+* copies read the same {@link THEME_STORAGE_KEY}.
+*
+* `color-scheme` is set alongside the class so form controls, scrollbars and
+* the canvas's own backdrop match before any stylesheet has applied.
+*/
+var THEME_BOOT_SCRIPT = `(function(){try{
+var s=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});
+var t=(s==='light'||s==='dark'||s==='system')?s:${JSON.stringify(DEFAULT_THEME)};
+var d=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);
+document.documentElement.classList.toggle('dark',d);
+document.documentElement.style.colorScheme=d?'dark':'light';
+}catch(e){}})()`;
+/** Reads the stored preference. Returns the default on the server or bad data. */
+var storedTheme = () => {
+	if (typeof localStorage === "undefined") return DEFAULT_THEME;
+	try {
+		const stored = localStorage.getItem(THEME_STORAGE_KEY);
+		return isTheme(stored) ? stored : DEFAULT_THEME;
+	} catch {
+		return DEFAULT_THEME;
+	}
+};
+/**
+* The user's preference.
+*
+* Seeded with {@link DEFAULT_THEME} rather than with the stored value, even
+* though the stored value is readable on the client. React hydrates against
+* the *server's* markup, so a toggle that rendered `light` as checked on the
+* first client pass would mismatch a server that rendered `dark` — a real
+* hydration error, not a cosmetic one. The stored preference is adopted a beat
+* later by {@link startThemeSync}, in an effect, where a divergence is a normal
+* state update instead.
+*
+* This costs nothing visually: the *class* on `<html>` is already correct by
+* then — {@link THEME_BOOT_SCRIPT} set it before the first paint — so the only
+* thing catching up is which of three radios is checked.
+*/
+var themeAtom = Atom.make(DEFAULT_THEME);
+/**
+* What the preference resolves to right now.
+*
+* A separate atom rather than a derived read because it has a second input the
+* preference does not see: the OS setting can change while `system` is
+* selected. {@link startThemeSync} owns writing it.
+*/
+var resolvedThemeAtom = Atom.make(typeof document === "undefined" ? DEFAULT_THEME : currentResolved());
+/** Resolves a preference against the OS setting. */
+var resolve = (theme) => {
+	if (theme !== "system") return theme;
+	if (typeof matchMedia === "undefined") return DEFAULT_THEME;
+	return matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+/** What the DOM is showing, read from the class the boot script set. */
+function currentResolved() {
+	return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+/**
+* Keeps `<html>`, `localStorage` and {@link resolvedThemeAtom} in step with the
+* preference, for as long as the returned function is not called.
+*
+* Started once from the root component rather than from a hook per consumer:
+* there is exactly one `<html>` element, so there is exactly one owner of its
+* class. Everything else — the toggle, the canvas — reads atoms.
+*/
+var startThemeSync = (registry) => {
+	const apply = (theme) => {
+		const resolved = resolve(theme);
+		const root = document.documentElement;
+		if (root.classList.contains("dark") !== (resolved === "dark")) {
+			root.classList.add("theme-switching");
+			root.classList.toggle("dark", resolved === "dark");
+			requestAnimationFrame(() => root.classList.remove("theme-switching"));
+		}
+		root.style.colorScheme = resolved;
+		if (registry.get(resolvedThemeAtom) !== resolved) registry.set(resolvedThemeAtom, resolved);
+	};
+	const offAtom = registry.subscribe(themeAtom, (theme) => {
+		try {
+			localStorage.setItem(THEME_STORAGE_KEY, theme);
+		} catch {}
+		apply(theme);
+	});
+	const stored = storedTheme();
+	if (stored === registry.get(themeAtom)) apply(stored);
+	else registry.set(themeAtom, stored);
+	const query = matchMedia("(prefers-color-scheme: dark)");
+	const onSystemChange = () => apply(registry.get(themeAtom));
+	query.addEventListener("change", onSystemChange);
+	return () => {
+		offAtom();
+		query.removeEventListener("change", onSystemChange);
+	};
+};
+//#endregion
+//#region app/src/styles.css?url
+var styles_default = "/assets/styles-B3rAZGvS.css";
+//#endregion
+//#region app/src/routes/__root.tsx
+var Route$1 = createRootRoute({
+	head: () => ({
+		meta: [
+			{ charSet: "utf-8" },
+			{
+				name: "viewport",
+				content: "width=device-width, initial-scale=1"
+			},
+			{ title: "effect-inspect" }
+		],
+		links: [{
+			rel: "stylesheet",
+			href: styles_default
+		}]
+	}),
+	component: RootComponent
+});
+function RootComponent() {
+	return /* @__PURE__ */ jsx(RootDocument, { children: /* @__PURE__ */ jsxs(RegistryProvider, { children: [
+		/* @__PURE__ */ jsx(ThemeSync, {}),
+		/* @__PURE__ */ jsx(PanelSync, {}),
+		/* @__PURE__ */ jsx(Outlet, {})
+	] }) });
+}
+/**
+* Owns the `dark` class on `<html>` for the life of the app.
+*
+* Renders nothing: the theme is not React state that something displays, it is
+* a property of the document. One component starts the sync, everything else —
+* the toggle, the flame chart — reads atoms.
+*/
+function ThemeSync() {
+	const registry = useContext(RegistryContext);
+	useEffect(() => startThemeSync(registry), [registry]);
+	return null;
+}
+/**
+* Adopts and persists the side panels' collapse state.
+*
+* Separate from `ThemeSync` because they own different storage keys and have
+* different failure modes: the theme has a boot script and a flash to avoid,
+* the panels have neither.
+*/
+function PanelSync() {
+	const registry = useContext(RegistryContext);
+	useEffect(() => startPanelSync(registry), [registry]);
+	return null;
+}
+function RootDocument({ children }) {
+	return /* @__PURE__ */ jsxs("html", {
+		lang: "en",
+		className: "dark",
+		suppressHydrationWarning: true,
+		children: [/* @__PURE__ */ jsxs("head", { children: [/* @__PURE__ */ jsx(HeadContent, {}), /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: THEME_BOOT_SCRIPT } })] }), /* @__PURE__ */ jsxs("body", { children: [children, /* @__PURE__ */ jsx(Scripts, {})] })]
+	});
+}
+//#endregion
+//#region app/src/routes/index.tsx
+var $$splitComponentImporter = () => import("./routes-eZ4XqxE9.js");
+//#endregion
+//#region app/src/routeTree.gen.ts
+var rootRouteChildren = { IndexRoute: createFileRoute("/")({ component: lazyRouteComponent($$splitComponentImporter, "component") }).update({
+	id: "/",
+	path: "/",
+	getParentRoute: () => Route$1
+}) };
+var routeTree = Route$1._addFileChildren(rootRouteChildren)._addFileTypes();
+//#endregion
+//#region app/src/router.tsx
+var router_exports = /* @__PURE__ */ __exportAll({ getRouter: () => getRouter });
+/**
+* Shown for any URL the route tree does not match.
+*
+* Configured at the router rather than per route because the app is a
+* single-page inspector: `/` is the only real route, so *every* miss is the
+* same miss, and a `notFoundComponent` on each route would be the same
+* component repeated. Without this, TanStack falls back to a bare
+* `<p>Not Found</p>` that ignores the theme entirely — which is what a stray
+* request (a probe for `/favicon.ico`, a stale bookmark) would otherwise render.
+*/
+var NotFound = () => /* @__PURE__ */ jsx("div", {
+	className: "flex h-screen flex-col items-center justify-center bg-page font-mono text-ink antialiased",
+	children: /* @__PURE__ */ jsx(Empty, {
+		icon: FileQuestion,
+		title: "No such page",
+		hint: /* @__PURE__ */ jsxs(Fragment, { children: [
+			"effect-inspect is a single page. Head back to",
+			" ",
+			/* @__PURE__ */ jsx(Link, {
+				to: "/",
+				className: "text-accent underline underline-offset-2",
+				children: "the inspector"
+			}),
+			"."
+		] })
+	})
+});
+/** TanStack Start calls this per request to build the router. */
+var getRouter = () => createRouter({
+	routeTree,
+	scrollRestoration: true,
+	defaultNotFoundComponent: NotFound
+});
+//#endregion
+export { CollapseButton as a, PanelHeader as c, getRouter, themeAtom as i, usePanel as l, DEFAULT_THEME as n, CollapsedRail as o, resolvedThemeAtom as r, Empty as s, router_exports as t, Button as u };