@aryasaatvik/motel 0.3.0

package/src/ui/waterfallNav.test.ts

@@ -0,0 +1,453 @@
+import { describe, expect, it } from "bun:test"
+import type { TraceSpanItem } from "../domain.ts"
+import {
+	findFirstChildIndex,
+	findParentIndex,
+	getWaterfallLayout,
+	getWaterfallSuffixMetrics,
+	getVisibleSpans,
+} from "./waterfallModel.ts"
+import { resolveCollapseStep } from "./waterfallNav.ts"
+
+// ---------------------------------------------------------------------------
+// Test helpers
+// ---------------------------------------------------------------------------
+
+const mkSpan = (spanId: string, depth: number, parentSpanId: string | null): TraceSpanItem => ({
+	spanId,
+	parentSpanId,
+	serviceName: "svc",
+	scopeName: null,
+	kind: null,
+	operationName: spanId,
+	startTime: new Date(0),
+	isRunning: false,
+	durationMs: 1,
+	status: "ok",
+	depth,
+	tags: {},
+	warnings: [],
+	events: [],
+})
+
+/**
+ * A reusable, depth-first ordered span tree.
+ *
+ *  root        (0)
+ *  ├─ a        (1)
+ *  │  ├─ a1   (2)
+ *  │  └─ a2   (2)
+ *  ├─ b        (1)
+ *  │  └─ b1   (2)
+ *  │     └─ b1a (3)
+ *  └─ c        (1)
+ */
+const buildTree = (): readonly TraceSpanItem[] => [
+	mkSpan("root", 0, null),
+	mkSpan("a", 1, "root"),
+	mkSpan("a1", 2, "a"),
+	mkSpan("a2", 2, "a"),
+	mkSpan("b", 1, "root"),
+	mkSpan("b1", 2, "b"),
+	mkSpan("b1a", 3, "b1"),
+	mkSpan("c", 1, "root"),
+]
+
+const idsOf = (spans: readonly TraceSpanItem[]) => spans.map((s) => s.spanId)
+const indexOfId = (spans: readonly TraceSpanItem[], id: string) => spans.findIndex((s) => s.spanId === id)
+
+// Convenience: run resolveCollapseStep with the selection identified by spanId.
+const step = (
+	spans: readonly TraceSpanItem[],
+	collapsed: ReadonlySet<string>,
+	selectedSpanId: string | null,
+	direction: "left" | "right",
+) => {
+	const visible = getVisibleSpans(spans, collapsed)
+	const selectedIndex = selectedSpanId === null ? -1 : visible.findIndex((s) => s.spanId === selectedSpanId)
+	const out = resolveCollapseStep({
+		spans,
+		collapsed,
+		selectedIndex: selectedIndex < 0 ? null : selectedIndex,
+		direction,
+	})
+	const newVisible = getVisibleSpans(spans, out.collapsed)
+	return {
+		collapsed: out.collapsed,
+		selectedIndex: out.selectedIndex,
+		selectedSpanId: out.selectedIndex !== null ? newVisible[out.selectedIndex]?.spanId ?? null : null,
+		visibleIds: idsOf(newVisible),
+	}
+}
+
+// ---------------------------------------------------------------------------
+// getVisibleSpans
+// ---------------------------------------------------------------------------
+
+describe("getVisibleSpans", () => {
+	it("returns the full list when nothing is collapsed", () => {
+		const spans = buildTree()
+		expect(idsOf(getVisibleSpans(spans, new Set()))).toEqual([
+			"root", "a", "a1", "a2", "b", "b1", "b1a", "c",
+		])
+	})
+
+	it("hides direct children of a collapsed node", () => {
+		const spans = buildTree()
+		expect(idsOf(getVisibleSpans(spans, new Set(["a"])))).toEqual([
+			"root", "a", "b", "b1", "b1a", "c",
+		])
+	})
+
+	it("hides transitive descendants of a collapsed node", () => {
+		const spans = buildTree()
+		expect(idsOf(getVisibleSpans(spans, new Set(["b"])))).toEqual([
+			"root", "a", "a1", "a2", "b", "c",
+		])
+	})
+
+	it("collapsing a leaf changes nothing visually (no children to hide)", () => {
+		const spans = buildTree()
+		expect(idsOf(getVisibleSpans(spans, new Set(["c"])))).toEqual(idsOf(spans))
+	})
+
+	it("handles multiple collapsed sibling subtrees", () => {
+		const spans = buildTree()
+		expect(idsOf(getVisibleSpans(spans, new Set(["a", "b"])))).toEqual([
+			"root", "a", "b", "c",
+		])
+	})
+
+	it("collapsing root hides everything but root", () => {
+		const spans = buildTree()
+		expect(idsOf(getVisibleSpans(spans, new Set(["root"])))).toEqual(["root"])
+	})
+
+	it("collapsing a node and its descendant is idempotent", () => {
+		const spans = buildTree()
+		expect(idsOf(getVisibleSpans(spans, new Set(["b", "b1"])))).toEqual([
+			"root", "a", "a1", "a2", "b", "c",
+		])
+	})
+})
+
+describe("getWaterfallSuffixMetrics", () => {
+	it("uses the widest visible duration as the shared suffix width", () => {
+		const spans = [
+			{ spanId: "a", durationMs: 1 },
+			{ spanId: "b", durationMs: 57_000 },
+			{ spanId: "c", durationMs: 120 },
+		]
+		const metrics = getWaterfallSuffixMetrics(spans)
+		// `120ms` = 5 is the widest
+		expect(metrics.maxDurationWidth).toBe(5)
+		expect(metrics.suffixWidth).toBe(5)
+	})
+
+	it("layout reserves the suffix once and leaves the rest for the bar", () => {
+		const contentWidth = 72
+		const metrics = getWaterfallSuffixMetrics(
+			[{ spanId: "a", durationMs: 57_000 }, { spanId: "b", durationMs: 1 }],
+		)
+		const { labelMaxWidth, barWidth } = getWaterfallLayout(contentWidth, metrics.suffixWidth)
+		// label + 1 (gap before bar) + bar + 1 (gap before suffix) + suffix = contentWidth
+		expect(labelMaxWidth + 1 + barWidth + 1 + metrics.suffixWidth).toBe(contentWidth)
+	})
+
+	it("layout fits inside contentWidth at narrow widths without overflow", () => {
+		// Regression guard: a prior `max(6, ...)` floor on barWidth caused
+		// the total row width to exceed contentWidth at narrow panes,
+		// which in turn made OpenTUI's truncate add "..." suffixes
+		// across the right edge. Every width in this sweep must satisfy
+		// label + 1 + bar + 1 + suffix == contentWidth.
+		for (let contentWidth = 14; contentWidth <= 120; contentWidth++) {
+			for (const suffixWidth of [3, 5, 7]) {
+				const { labelMaxWidth, barWidth } = getWaterfallLayout(contentWidth, suffixWidth)
+				expect(labelMaxWidth + 1 + barWidth + 1 + suffixWidth).toBe(contentWidth)
+				expect(barWidth).toBeGreaterThanOrEqual(1)
+				expect(labelMaxWidth).toBeGreaterThanOrEqual(4)
+			}
+		}
+	})
+})
+
+// ---------------------------------------------------------------------------
+// findParentIndex
+// ---------------------------------------------------------------------------
+
+describe("findParentIndex", () => {
+	it("returns null for the root span", () => {
+		const spans = buildTree()
+		expect(findParentIndex(spans, indexOfId(spans, "root"))).toBeNull()
+	})
+
+	it("returns the immediate parent index in the same list", () => {
+		const spans = buildTree()
+		expect(findParentIndex(spans, indexOfId(spans, "a1"))).toBe(indexOfId(spans, "a"))
+		expect(findParentIndex(spans, indexOfId(spans, "b1a"))).toBe(indexOfId(spans, "b1"))
+		expect(findParentIndex(spans, indexOfId(spans, "c"))).toBe(indexOfId(spans, "root"))
+	})
+
+	it("works against a filtered (visible) list — parent is the nearest shallower ancestor before index", () => {
+		const spans = buildTree()
+		const visible = getVisibleSpans(spans, new Set(["b1"]))
+		// visible: root, a, a1, a2, b, b1, c
+		expect(findParentIndex(visible, indexOfId(visible, "b1"))).toBe(indexOfId(visible, "b"))
+	})
+
+	it("returns null on out-of-range index instead of crashing", () => {
+		const spans = buildTree()
+		expect(findParentIndex(spans, 999)).toBeNull()
+		expect(findParentIndex(spans, -1)).toBeNull()
+	})
+
+	it("returns null on empty input", () => {
+		expect(findParentIndex([], 0)).toBeNull()
+	})
+})
+
+// ---------------------------------------------------------------------------
+// findFirstChildIndex
+// ---------------------------------------------------------------------------
+
+describe("findFirstChildIndex", () => {
+	it("returns next index when the next span is deeper", () => {
+		const spans = buildTree()
+		expect(findFirstChildIndex(spans, indexOfId(spans, "a"))).toBe(indexOfId(spans, "a1"))
+		expect(findFirstChildIndex(spans, indexOfId(spans, "b1"))).toBe(indexOfId(spans, "b1a"))
+		expect(findFirstChildIndex(spans, indexOfId(spans, "root"))).toBe(indexOfId(spans, "a"))
+	})
+
+	it("returns null for leaf spans", () => {
+		const spans = buildTree()
+		expect(findFirstChildIndex(spans, indexOfId(spans, "a1"))).toBeNull()
+		expect(findFirstChildIndex(spans, indexOfId(spans, "c"))).toBeNull()
+	})
+
+	it("returns null on out-of-range index", () => {
+		const spans = buildTree()
+		expect(findFirstChildIndex(spans, 999)).toBeNull()
+		expect(findFirstChildIndex(spans, -1)).toBeNull()
+	})
+
+	it("returns null on empty input", () => {
+		expect(findFirstChildIndex([], 0)).toBeNull()
+	})
+})
+
+// ---------------------------------------------------------------------------
+// resolveCollapseStep — the heart of the keyboard logic
+// ---------------------------------------------------------------------------
+
+describe("resolveCollapseStep — `right` (l / expand-or-into)", () => {
+	it("expanding a collapsed node keeps the same span selected", () => {
+		const spans = buildTree()
+		const collapsed = new Set(["a"])
+		const r = step(spans, collapsed, "a", "right")
+		expect(r.collapsed.has("a")).toBe(false)
+		expect(r.selectedSpanId).toBe("a")
+		expect(r.visibleIds).toEqual(["root", "a", "a1", "a2", "b", "b1", "b1a", "c"])
+	})
+
+	it("on an expanded parent, walks selection into its first visible child", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(), "a", "right")
+		expect(r.collapsed.size).toBe(0)
+		expect(r.selectedSpanId).toBe("a1")
+	})
+
+	it("on a leaf, is a no-op", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(), "a1", "right")
+		expect(r.collapsed.size).toBe(0)
+		expect(r.selectedSpanId).toBe("a1")
+	})
+
+	it("on root (expanded with children) walks into first child", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(), "root", "right")
+		expect(r.selectedSpanId).toBe("a")
+	})
+
+	it("on root (collapsed) expands it", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(["root"]), "root", "right")
+		expect(r.collapsed.has("root")).toBe(false)
+		expect(r.selectedSpanId).toBe("root")
+	})
+
+	it("when nothing is selected, is a no-op", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(), null, "right")
+		expect(r.selectedSpanId).toBeNull()
+		expect(r.collapsed.size).toBe(0)
+	})
+
+	it("when index is stale (past visible end), is a no-op rather than crashing", () => {
+		const spans = buildTree()
+		const out = resolveCollapseStep({ spans, collapsed: new Set(), selectedIndex: 999, direction: "right" })
+		expect(out.selectedIndex).toBe(999)
+		expect(out.collapsed.size).toBe(0)
+	})
+})
+
+describe("resolveCollapseStep — `left` (h / collapse-or-up)", () => {
+	it("collapsing an expanded parent keeps the same span selected", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(), "a", "left")
+		expect(r.collapsed.has("a")).toBe(true)
+		expect(r.selectedSpanId).toBe("a")
+		expect(r.visibleIds).toEqual(["root", "a", "b", "b1", "b1a", "c"])
+	})
+
+	it("on a leaf, walks to its parent", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(), "a1", "left")
+		expect(r.selectedSpanId).toBe("a")
+		expect(r.collapsed.size).toBe(0)
+	})
+
+	it("on a deep leaf, walks to its immediate parent (not all the way to root)", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(), "b1a", "left")
+		expect(r.selectedSpanId).toBe("b1")
+	})
+
+	it("on a collapsed parent, walks to its parent (since it has no expanded kids to collapse)", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(["a"]), "a", "left")
+		expect(r.selectedSpanId).toBe("root")
+		expect(r.collapsed.has("a")).toBe(true) // staying collapsed
+	})
+
+	it("on root, is a no-op", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(["root"]), "root", "left")
+		expect(r.selectedSpanId).toBe("root")
+	})
+
+	it("when nothing is selected, is a no-op", () => {
+		const spans = buildTree()
+		const r = step(spans, new Set(), null, "left")
+		expect(r.selectedSpanId).toBeNull()
+		expect(r.collapsed.size).toBe(0)
+	})
+})
+
+describe("resolveCollapseStep — sequences (real bug scenarios)", () => {
+	it("press l then l: navigates root → a → a1 (no double-collapse)", () => {
+		const spans = buildTree()
+		const r1 = step(spans, new Set(), "root", "right")
+		expect(r1.selectedSpanId).toBe("a")
+		const r2 = step(spans, r1.collapsed, r1.selectedSpanId!, "right")
+		expect(r2.selectedSpanId).toBe("a1")
+	})
+
+	it("h-then-h-then-h on a leaf reaches root via collapse-then-walk pattern", () => {
+		const spans = buildTree()
+		// b1a -> h -> b1 (walk parent)
+		const r1 = step(spans, new Set(), "b1a", "left")
+		expect(r1.selectedSpanId).toBe("b1")
+		// b1 -> h -> collapse b1
+		const r2 = step(spans, r1.collapsed, r1.selectedSpanId!, "left")
+		expect(r2.collapsed.has("b1")).toBe(true)
+		expect(r2.selectedSpanId).toBe("b1")
+		// b1 (collapsed) -> h -> walk to parent b
+		const r3 = step(spans, r2.collapsed, r2.selectedSpanId!, "left")
+		expect(r3.selectedSpanId).toBe("b")
+	})
+
+	it("rapid collapse/expand on the same node converges to the original state", () => {
+		const spans = buildTree()
+		let st: { collapsed: ReadonlySet<string>; selectedSpanId: string } = {
+			collapsed: new Set(),
+			selectedSpanId: "a",
+		}
+		for (let i = 0; i < 10; i++) {
+			const dir = i % 2 === 0 ? "left" : "right"
+			const r = step(spans, st.collapsed, st.selectedSpanId, dir)
+			st = { collapsed: r.collapsed, selectedSpanId: r.selectedSpanId! }
+		}
+		expect([...st.collapsed]).toEqual([])
+		expect(st.selectedSpanId).toBe("a")
+	})
+
+	it("walking right past a leaf is idempotent (no crash, no state change)", () => {
+		const spans = buildTree()
+		const r1 = step(spans, new Set(), "a1", "right")
+		const r2 = step(spans, r1.collapsed, r1.selectedSpanId!, "right")
+		const r3 = step(spans, r2.collapsed, r2.selectedSpanId!, "right")
+		expect(r1.selectedSpanId).toBe("a1")
+		expect(r2.selectedSpanId).toBe("a1")
+		expect(r3.selectedSpanId).toBe("a1")
+	})
+
+	it("walking left past root is idempotent", () => {
+		const spans = buildTree()
+		const r1 = step(spans, new Set(["root"]), "root", "left")
+		const r2 = step(spans, r1.collapsed, r1.selectedSpanId!, "left")
+		expect(r1.selectedSpanId).toBe("root")
+		expect(r2.selectedSpanId).toBe("root")
+	})
+
+	it("collapse then move to another span then expand: state stays consistent", () => {
+		const spans = buildTree()
+		// Collapse `a` while on it.
+		const r1 = step(spans, new Set(), "a", "left")
+		expect(r1.collapsed.has("a")).toBe(true)
+		// Visible: root, a, b, b1, b1a, c
+		// Pretend user clicks `b1a` (so selection moves there).
+		// Now press h on b1a.
+		const r2 = step(spans, r1.collapsed, "b1a", "left")
+		expect(r2.selectedSpanId).toBe("b1")
+		expect(r2.collapsed.has("a")).toBe(true) // a stays collapsed
+	})
+})
+
+describe("resolveCollapseStep — invariants", () => {
+	it("never returns a selectedIndex that is out of the new visible range", () => {
+		const spans = buildTree()
+		// Try every (selectedSpanId, direction, collapsed-state) combination we care about.
+		const interesting: ReadonlyArray<{ collapsed: ReadonlySet<string>; selectedSpanId: string }> = [
+			{ collapsed: new Set(), selectedSpanId: "root" },
+			{ collapsed: new Set(), selectedSpanId: "a" },
+			{ collapsed: new Set(), selectedSpanId: "a2" },
+			{ collapsed: new Set(), selectedSpanId: "b1a" },
+			{ collapsed: new Set(["a"]), selectedSpanId: "a" },
+			{ collapsed: new Set(["a"]), selectedSpanId: "b" },
+			{ collapsed: new Set(["b"]), selectedSpanId: "b" },
+			{ collapsed: new Set(["root"]), selectedSpanId: "root" },
+		]
+		for (const { collapsed, selectedSpanId } of interesting) {
+			for (const direction of ["left", "right"] as const) {
+				const r = step(spans, collapsed, selectedSpanId, direction)
+				if (r.selectedIndex !== null) {
+					expect(r.selectedIndex).toBeGreaterThanOrEqual(0)
+					expect(r.selectedIndex).toBeLessThan(r.visibleIds.length)
+				}
+			}
+		}
+	})
+
+	it("collapsing then expanding the same node restores the original state", () => {
+		const spans = buildTree()
+		const a = step(spans, new Set(), "a", "left")           // collapse a
+		const b = step(spans, a.collapsed, a.selectedSpanId!, "right") // expand a
+		expect([...b.collapsed]).toEqual([])
+		expect(b.selectedSpanId).toBe("a")
+		expect(b.visibleIds).toEqual(idsOf(spans))
+	})
+
+	it("collapsing an ancestor of the currently selected span keeps the ancestor visible (selection moves up)", () => {
+		// Start: selected = b1a (depth 3). Collapse `b` (its grandparent).
+		const spans = buildTree()
+		// We collapse `b` while `b1a` is selected. The keyboard handler only collapses
+		// the currently selected span, so we simulate the click-to-collapse path by
+		// asserting the helper handles a selection that became invisible afterward.
+		const collapsed = new Set(["b"])
+		const visible = getVisibleSpans(spans, collapsed)
+		// `b1a` is no longer visible. Its nearest visible ancestor is `b`.
+		expect(visible.some((s) => s.spanId === "b1a")).toBe(false)
+		expect(visible.some((s) => s.spanId === "b")).toBe(true)
+	})
+})

package/src/ui/waterfallNav.ts

@@ -0,0 +1,75 @@
+import type { TraceSpanItem } from "../domain.ts"
+import { findFirstChildIndex, findParentIndex, getVisibleSpans } from "./waterfallModel.ts"
+
+export type CollapseStep = {
+	readonly collapsed: ReadonlySet<string>
+	readonly selectedIndex: number | null
+}
+
+export type ResolveCollapseParams = {
+	readonly spans: readonly TraceSpanItem[]
+	readonly collapsed: ReadonlySet<string>
+	readonly selectedIndex: number | null
+	readonly direction: "left" | "right"
+}
+
+/**
+ * Pure resolver for the `h` (left) / `l` (right) keys in the waterfall.
+ *
+ * Semantics:
+ * - `right`: if the selected span has children and is currently collapsed,
+ *   expand it; selection stays on the same span. Otherwise, if it has visible
+ *   children, move selection to its first child. Otherwise no-op.
+ * - `left`: if the selected span has children and is currently expanded,
+ *   collapse it; selection stays on the same span. Otherwise, if it has a
+ *   parent in the visible list, move selection to that parent. Otherwise no-op.
+ *
+ * Stale or out-of-range selection indices are treated as no-ops rather than
+ * crashing — defensive against the one-frame window between a state change
+ * and the next render.
+ */
+export const resolveCollapseStep = ({
+	spans,
+	collapsed,
+	selectedIndex,
+	direction,
+}: ResolveCollapseParams): CollapseStep => {
+	const noChange: CollapseStep = { collapsed, selectedIndex }
+
+	if (selectedIndex === null) return noChange
+
+	const visible = getVisibleSpans(spans, collapsed)
+	if (selectedIndex < 0 || selectedIndex >= visible.length) return noChange
+
+	const span = visible[selectedIndex]!
+	const fullIndex = spans.indexOf(span)
+	const hasChildren = fullIndex >= 0 && findFirstChildIndex(spans, fullIndex) !== null
+	const isCollapsed = collapsed.has(span.spanId)
+
+	if (direction === "right") {
+		// Expand a collapsed parent (selection stays).
+		if (hasChildren && isCollapsed) {
+			const next = new Set(collapsed)
+			next.delete(span.spanId)
+			return { collapsed: next, selectedIndex }
+		}
+		// Walk into first visible child.
+		if (hasChildren) {
+			const childIdx = findFirstChildIndex(visible, selectedIndex)
+			if (childIdx !== null) return { collapsed, selectedIndex: childIdx }
+		}
+		return noChange
+	}
+
+	// direction === "left"
+	// Collapse an expanded parent (selection stays).
+	if (hasChildren && !isCollapsed) {
+		const next = new Set(collapsed)
+		next.add(span.spanId)
+		return { collapsed: next, selectedIndex }
+	}
+	// Walk to parent in the visible list.
+	const parentIdx = findParentIndex(visible, selectedIndex)
+	if (parentIdx !== null) return { collapsed, selectedIndex: parentIdx }
+	return noChange
+}

package/web/dist/assets/index-B01z9BaO.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:"Berkeley Mono", "IBM Plex Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;--color-red-400:oklch(70.4% .191 22.216);--color-amber-400:oklch(82.8% .189 84.429);--color-emerald-400:oklch(76.5% .177 163.223);--color-sky-400:oklch(74.6% .16 232.661);--color-zinc-50:oklch(98.5% 0 0);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-900:oklch(21% .006 285.885);--color-zinc-950:oklch(14.1% .005 285.823);--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--container-3xl:48rem;--container-7xl:80rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-sm:.25rem;--radius-md:.375rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-accent:oklch(79.5% .16 70);--color-accent-dim:oklch(65% .12 70)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:0}.top-1\/2{top:50%}.right-0{right:0}.right-1{right:var(--spacing)}.bottom-0{bottom:0}.bottom-1{bottom:var(--spacing)}.left-0{left:0}.left-1{left:var(--spacing)}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.h-3{height:calc(var(--spacing) * 3)}.h-full{height:100%}.min-h-0{min-height:0}.w-16{width:calc(var(--spacing) * 16)}.w-28{width:calc(var(--spacing) * 28)}.w-72{width:calc(var(--spacing) * 72)}.w-\[7rem\]{width:7rem}.w-\[440px\]{width:440px}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-28{max-width:calc(var(--spacing) * 28)}.max-w-32{max-width:calc(var(--spacing) * 32)}.min-w-0{min-width:0}.min-w-80{min-width:calc(var(--spacing) * 80)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-x-5{column-gap:calc(var(--spacing) * 5)}.gap-y-1{row-gap:var(--spacing)}.gap-y-1\.5{row-gap:calc(var(--spacing) * 1.5)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-accent-dim\/50{border-color:#bd813080}@supports (color:color-mix(in lab, red, red)){.border-accent-dim\/50{border-color:color-mix(in oklab, var(--color-accent-dim) 50%, transparent)}}.border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/5{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/\[0\.03\]{border-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.03\]{border-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.bg-accent\/5{background-color:#fca72c0d}@supports (color:color-mix(in lab, red, red)){.bg-accent\/5{background-color:color-mix(in oklab, var(--color-accent) 5%, transparent)}}.bg-accent\/10{background-color:#fca72c1a}@supports (color:color-mix(in lab, red, red)){.bg-accent\/10{background-color:color-mix(in oklab, var(--color-accent) 10%, transparent)}}.bg-accent\/15{background-color:#fca72c26}@supports (color:color-mix(in lab, red, red)){.bg-accent\/15{background-color:color-mix(in oklab, var(--color-accent) 15%, transparent)}}.bg-amber-400\/10{background-color:#fcbb001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-400\/10{background-color:color-mix(in oklab, var(--color-amber-400) 10%, transparent)}}.bg-emerald-400\/10{background-color:#00d2941a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-400\/10{background-color:color-mix(in oklab, var(--color-emerald-400) 10%, transparent)}}.bg-red-400\/10{background-color:#ff65681a}@supports (color:color-mix(in lab, red, red)){.bg-red-400\/10{background-color:color-mix(in oklab, var(--color-red-400) 10%, transparent)}}.bg-sky-400\/10{background-color:#00bcfe1a}@supports (color:color-mix(in lab, red, red)){.bg-sky-400\/10{background-color:color-mix(in oklab, var(--color-sky-400) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-zinc-500\/10{background-color:#71717b1a}@supports (color:color-mix(in lab, red, red)){.bg-zinc-500\/10{background-color:color-mix(in oklab, var(--color-zinc-500) 10%, transparent)}}.bg-zinc-600\/10{background-color:#52525c1a}@supports (color:color-mix(in lab, red, red)){.bg-zinc-600\/10{background-color:color-mix(in oklab, var(--color-zinc-600) 10%, transparent)}}.bg-zinc-900{background-color:var(--color-zinc-900)}.bg-zinc-900\/50{background-color:#18181b80}@supports (color:color-mix(in lab, red, red)){.bg-zinc-900\/50{background-color:color-mix(in oklab, var(--color-zinc-900) 50%, transparent)}}.bg-zinc-950{background-color:var(--color-zinc-950)}.p-16{padding:calc(var(--spacing) * 16)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-1\.5{padding-right:calc(var(--spacing) * 1.5)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-1\.5{padding-left:calc(var(--spacing) * 1.5)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-6{padding-left:calc(var(--spacing) * 6)}.text-left{text-align:left}.text-right{text-align:right}.align-top{vertical-align:top}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent{color:var(--color-accent)}.text-amber-400{color:var(--color-amber-400)}.text-emerald-400{color:var(--color-emerald-400)}.text-inherit{color:inherit}.text-red-400{color:var(--color-red-400)}.text-sky-400{color:var(--color-sky-400)}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.text-zinc-50{color:var(--color-zinc-50)}.text-zinc-100{color:var(--color-zinc-100)}.text-zinc-200{color:var(--color-zinc-200)}.text-zinc-300{color:var(--color-zinc-300)}.text-zinc-400{color:var(--color-zinc-400)}.text-zinc-500{color:var(--color-zinc-500)}.text-zinc-600{color:var(--color-zinc-600)}.text-zinc-700{color:var(--color-zinc-700)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.scheme-only-dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark only}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-zinc-600::placeholder{color:var(--color-zinc-600)}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media (hover:hover){.hover\:border-white\/20:hover{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/20:hover{border-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.hover\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.hover\:bg-white\/\[0\.03\]:hover{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.03\]:hover{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.hover\:text-accent:hover{color:var(--color-accent)}.hover\:text-zinc-200:hover{color:var(--color-zinc-200)}.hover\:text-zinc-300:hover{color:var(--color-zinc-300)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:border-accent-dim:focus{border-color:var(--color-accent-dim)}}html,body,#root{height:100%;font-family:var(--font-mono)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-white)/.1;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-white)/.2}@keyframes pulse-bar{0%,to{opacity:.5}50%{opacity:1}}.animate-bar-pulse{animation:1.5s ease-in-out infinite pulse-bar}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}