@party-stack/ontology-devtools 0.6.2 → 0.7.0

package/lib/OntologyDevtools.js

@@ -1,234 +1,24 @@
-import './styles.css';
-/* empty css       */
+import { DisclosureSummary } from "./DisclosureSummary.js";
+import { ObjectTypeIcon, OntologyIcon } from "./OntologyIcons.js";
+import { PanelBoundary, usePanelPortal } from "./PanelBoundary.js";
+import { layoutSchema } from "./schemaLayout.js";
+import { typeDisplayName } from "./typeDisplayName.js";
+import { SchemaView } from "./SchemaView.js";
+import { Pinned } from "./Pinned.js";
+import { Queries } from "./Queries.js";
+import { Storage } from "./Storage.js";
+import { Tracing } from "./Tracing.js";
+import { Boxes, CalendarDays, ChartNoAxesGantt, Check, ChevronDown, ChevronUp, ChevronsUpDown, CircleCheck, CircleQuestionMark, Clock, Columns3, Grid2X2, GripVertical, HardDrive, Hash, Link, List, Map, MapPin, Paperclip, Pin, RefreshCw, Search, Send, SquareCode, Trash2, Waypoints } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useDeferredValue, useEffect, useMemo, useState } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import { Menu } from "@base-ui/react/menu";
 import { Tabs } from "@base-ui/react/tabs";
 import { Tooltip } from "@base-ui/react/tooltip";
-import { Graph, layout } from "@dagrejs/dagre";
 import NumberFlow from "@number-flow/react";
-import { LucideIcon } from "@party-stack/icons-lucide/react";
-import { createReactPlugin } from "@tanstack/devtools-utils/react";
-import { useLiveInfiniteQuery, useLiveQuery } from "@tanstack/react-db";
+import { DbProvider, useLiveInfiniteQuery, useLiveQuery } from "@tanstack/react-db";
 import { columnOrderingFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, flexRender, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
-import { CalendarDays, Check, ChevronDown, ChevronUp, ChevronsUpDown, CircleCheck, CircleQuestionMark, Clock, Columns3, Database, Grid2X2, GripVertical, Hash, Inbox, Link, List, Map as Map$1, MapPin, Paperclip, RefreshCw, Share2, SquareCode, Trash2 } from "lucide-react";
-import { useEffect, useId, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/OntologyDevtools.tsx
-function OntologyIcon({ className, color, name }) {
-	return /* @__PURE__ */ jsx(LucideIcon, {
-		"aria-hidden": "true",
-		className,
-		name,
-		style: color ? { color } : void 0
-	});
-}
-function ObjectTypeIcon({ className, objectType }) {
-	return /* @__PURE__ */ jsx(OntologyIcon, {
-		className,
-		color: objectType.color,
-		name: objectType.icon?.name ?? "database"
-	});
-}
-function PartyStackLogo({ theme }) {
-	const id = useId().replaceAll(":", "");
-	const gradientId = `ps-ball-${id}`;
-	const shadowId = `ps-shadow-${id}`;
-	return /* @__PURE__ */ jsxs("svg", {
-		"aria-hidden": "true",
-		style: {
-			display: "block",
-			height: "100%",
-			width: "100%"
-		},
-		viewBox: "0 0 1200 300",
-		children: [
-			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("radialGradient", {
-				cx: "69%",
-				cy: "24%",
-				id: gradientId,
-				r: "82%",
-				children: [
-					/* @__PURE__ */ jsx("stop", {
-						offset: "0",
-						stopColor: "#fff"
-					}),
-					/* @__PURE__ */ jsx("stop", {
-						offset: ".38",
-						stopColor: "#fff"
-					}),
-					/* @__PURE__ */ jsx("stop", {
-						offset: ".62",
-						stopColor: "#f8f7f3"
-					}),
-					/* @__PURE__ */ jsx("stop", {
-						offset: ".82",
-						stopColor: "#e1dfda"
-					}),
-					/* @__PURE__ */ jsx("stop", {
-						offset: "1",
-						stopColor: "#b7b3ad"
-					})
-				]
-			}), /* @__PURE__ */ jsx("filter", {
-				height: "170%",
-				id: shadowId,
-				width: "160%",
-				x: "-30%",
-				y: "-30%",
-				children: /* @__PURE__ */ jsx("feDropShadow", {
-					dx: "3",
-					dy: "6",
-					floodColor: "#681611",
-					floodOpacity: ".28",
-					stdDeviation: "5"
-				})
-			})] }),
-			/* @__PURE__ */ jsxs("g", {
-				transform: "translate(22 22) scale(.5)",
-				children: [/* @__PURE__ */ jsx("path", {
-					d: "M96 64h184c81 0 136 55 136 136s-55 136-136 136h-56v112H96V64Z",
-					fill: "#e83b32"
-				}), /* @__PURE__ */ jsxs("g", {
-					filter: `url(#${shadowId})`,
-					children: [/* @__PURE__ */ jsx("circle", {
-						cx: "258",
-						cy: "200",
-						fill: `url(#${gradientId})`,
-						r: "60"
-					}), /* @__PURE__ */ jsx("ellipse", {
-						cx: "279",
-						cy: "177",
-						fill: "#fff",
-						opacity: ".92",
-						rx: "8.5",
-						ry: "10.5"
-					})]
-				})]
-			}),
-			/* @__PURE__ */ jsx("text", {
-				fill: theme === "dark" ? "#f7f5f0" : "#171717",
-				fontFamily: "Avenir Next, Avenir, Helvetica Neue, Arial, sans-serif",
-				fontSize: "124",
-				fontWeight: "700",
-				letterSpacing: "-3",
-				x: "310",
-				y: "196",
-				children: "Party Stack"
-			})
-		]
-	});
-}
-function PartyStackLogomark() {
-	const id = useId().replaceAll(":", "");
-	const gradientId = `ps-mark-ball-${id}`;
-	const shadowId = `ps-mark-shadow-${id}`;
-	return /* @__PURE__ */ jsxs("svg", {
-		"aria-hidden": "true",
-		style: {
-			display: "block",
-			height: "100%",
-			width: "100%"
-		},
-		viewBox: "0 0 512 512",
-		children: [
-			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("radialGradient", {
-				cx: "69%",
-				cy: "24%",
-				id: gradientId,
-				r: "82%",
-				children: [
-					/* @__PURE__ */ jsx("stop", {
-						offset: "0",
-						stopColor: "#fff"
-					}),
-					/* @__PURE__ */ jsx("stop", {
-						offset: ".38",
-						stopColor: "#fff"
-					}),
-					/* @__PURE__ */ jsx("stop", {
-						offset: ".62",
-						stopColor: "#f8f7f3"
-					}),
-					/* @__PURE__ */ jsx("stop", {
-						offset: ".82",
-						stopColor: "#e1dfda"
-					}),
-					/* @__PURE__ */ jsx("stop", {
-						offset: "1",
-						stopColor: "#b7b3ad"
-					})
-				]
-			}), /* @__PURE__ */ jsx("filter", {
-				height: "170%",
-				id: shadowId,
-				width: "160%",
-				x: "-30%",
-				y: "-30%",
-				children: /* @__PURE__ */ jsx("feDropShadow", {
-					dx: "3",
-					dy: "6",
-					floodColor: "#681611",
-					floodOpacity: ".28",
-					stdDeviation: "5"
-				})
-			})] }),
-			/* @__PURE__ */ jsx("path", {
-				d: "M96 64h184c81 0 136 55 136 136s-55 136-136 136h-56v112H96V64Z",
-				fill: "#e83b32"
-			}),
-			/* @__PURE__ */ jsxs("g", {
-				filter: `url(#${shadowId})`,
-				children: [/* @__PURE__ */ jsx("circle", {
-					cx: "258",
-					cy: "200",
-					fill: `url(#${gradientId})`,
-					r: "60"
-				}), /* @__PURE__ */ jsx("ellipse", {
-					cx: "279",
-					cy: "177",
-					fill: "#fff",
-					opacity: ".92",
-					rx: "8.5",
-					ry: "10.5"
-				})]
-			})
-		]
-	});
-}
-function OntologyDevtoolsPluginName({ theme }) {
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			height: 30,
-			width: 120
-		},
-		children: /* @__PURE__ */ jsx(PartyStackLogo, { theme })
-	});
-}
-function OntologyDevtoolsTrigger({ theme }) {
-	const dark = theme === "dark";
-	return /* @__PURE__ */ jsx("div", {
-		"aria-label": "Open Ontology devtools",
-		style: {
-			alignItems: "center",
-			background: dark ? "linear-gradient(145deg, #2d2d31, #171719)" : "linear-gradient(145deg, #fff, #f5f5f4)",
-			border: dark ? "1px solid rgba(255,255,255,.16)" : "1px solid rgba(23,23,23,.14)",
-			borderRadius: "999px",
-			boxSizing: "border-box",
-			boxShadow: dark ? "0 10px 30px rgba(0,0,0,.34), 0 0 0 4px rgba(232,59,50,.11)" : "0 10px 28px rgba(28,25,23,.16), 0 0 0 4px rgba(232,59,50,.09)",
-			cursor: "pointer",
-			display: "flex",
-			height: 48,
-			justifyContent: "center",
-			padding: 8,
-			width: 48
-		},
-		title: "Open Ontology devtools",
-		children: /* @__PURE__ */ jsx(PartyStackLogomark, {})
-	});
-}
-function ontologyDevtoolsTrigger(_element, { theme }) {
-	return /* @__PURE__ */ jsx(OntologyDevtoolsTrigger, { theme });
-}
 function OutboxPanel({ children, theme }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: `ps-outbox-root ps-theme-${theme}`,
@@ -244,8 +34,9 @@ function statusClass(entry) {
 function statusLabel(entry) {
 	switch (entry.status) {
 		case "queued": return "Waiting";
-		case "executing": return "Running";
-		case "failed": return "Failed";
+		case "sending": return entry.attemptStage === "forwarding" ? "Forwarding" : "Sending";
+		case "acknowledged": return entry.attemptStage === "forwarding" ? "Accepted by parent" : "Reconciling";
+		case "blocked": return entry.lastError?.actionOutcome === "unknown" ? "Outcome unknown" : "Blocked";
 	}
 }
 const relativeTime = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
@@ -276,16 +67,23 @@ function cardClass(entry) {
 function OutboxEntryCard({ entry, outbox, now }) {
 	const [pending, setPending] = useState();
 	const [actionError, setActionError] = useState();
+	const [confirmation, setConfirmation] = useState();
+	const busy = entry.status === "sending" || entry.status === "acknowledged";
+	const choose = (action) => {
+		if (action === "retry" ? entry.retryRequiresAcknowledgement : entry.lastError?.actionOutcome === "unknown") setConfirmation(action);
+		else run(action);
+	};
 	const run = async (action) => {
 		setPending(action);
 		setActionError(void 0);
 		try {
-			if (action === "retry") await outbox.retry(entry.id);
-			else await outbox.remove(entry.id);
+			if (action === "retry") await outbox.retry(entry.id, { allowUnknownOutcome: confirmation === "retry" });
+			else await outbox.remove(entry.id, { allowUnknownOutcome: confirmation === "remove" });
 		} catch (error) {
 			setActionError(error instanceof Error ? error.message : String(error));
 		} finally {
 			setPending(void 0);
+			setConfirmation(void 0);
 		}
 	};
 	return /* @__PURE__ */ jsxs("article", {
@@ -304,11 +102,11 @@ function OutboxEntryCard({ entry, outbox, now }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "ps-outbox-meta",
 				children: [
-					/* @__PURE__ */ jsxs("span", { children: [
-						/* @__PURE__ */ jsx("strong", { children: entry.attempts }),
-						" ",
-						entry.attempts === 1 ? "attempt" : "attempts"
-					] }),
+					/* @__PURE__ */ jsx("span", {
+						className: "ps-outbox-attempts",
+						title: entry.attemptStage === "forwarding" ? entry.status === "acknowledged" ? "Accepted by the parent; waiting for its replicated action state." : `${entry.attempts} forwarding attempts; upstream execution has not been observed yet.` : "Attempts to execute at this replica's upstream.",
+						children: entry.attemptStage === "forwarding" ? entry.status === "acknowledged" ? "Parent accepted" : "Forwarding" : /* @__PURE__ */ jsxs(Fragment, { children: ["Attempts: ", /* @__PURE__ */ jsx("strong", { children: entry.attempts })] })
+					}),
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
 						className: "ps-outbox-meta-divider"
@@ -324,34 +122,73 @@ function OutboxEntryCard({ entry, outbox, now }) {
 					}) : null
 				]
 			}),
-			entry.lastError ? /* @__PURE__ */ jsx("div", {
+			entry.lastError ? /* @__PURE__ */ jsxs("div", {
 				className: "ps-outbox-error",
-				children: entry.lastError.message
+				role: "alert",
+				children: [
+					/* @__PURE__ */ jsx("strong", { children: entry.lastError.kind }),
+					/* @__PURE__ */ jsx("div", { children: entry.lastError.message }),
+					entry.lastError.actionOutcome === "unknown" ? /* @__PURE__ */ jsx("p", { children: "The previous attempt may have committed. No definitive result has been received." }) : null,
+					entry.lastError.issues?.length ? /* @__PURE__ */ jsx("ul", { children: entry.lastError.issues.map((issue, index) => /* @__PURE__ */ jsxs("li", { children: [
+						/* @__PURE__ */ jsx("code", { children: issue.path?.join(".") || "Submission" }),
+						": ",
+						issue.message,
+						" ",
+						/* @__PURE__ */ jsxs("code", { children: [
+							"(",
+							issue.code,
+							")"
+						] })
+					] }, index)) }) : null
+				]
 			}) : null,
 			/* @__PURE__ */ jsxs("details", {
 				className: "ps-outbox-details",
-				children: [/* @__PURE__ */ jsx("summary", { children: "Parameters" }), /* @__PURE__ */ jsx("pre", { children: JSON.stringify(entry.request.parameters, null, 2) })]
+				children: [/* @__PURE__ */ jsx(DisclosureSummary, { children: "Parameters" }), /* @__PURE__ */ jsx("pre", { children: JSON.stringify(entry.request.parameters, null, 2) })]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "ps-outbox-actions",
 				children: [/* @__PURE__ */ jsxs("button", {
 					className: "ps-button ps-button-primary",
 					type: "button",
-					disabled: !entry.retryable || entry.status === "executing" || pending !== void 0,
+					disabled: busy || pending !== void 0,
 					onClick: () => {
-						run("retry");
+						choose("retry");
 					},
 					children: [/* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }), pending === "retry" ? "Retrying…" : "Retry"]
 				}), /* @__PURE__ */ jsxs("button", {
 					className: "ps-button ps-button-danger",
 					type: "button",
-					disabled: entry.status === "executing" || pending !== void 0,
+					disabled: busy || pending !== void 0,
 					onClick: () => {
-						run("remove");
+						choose("remove");
 					},
 					children: [/* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" }), pending === "remove" ? "Removing…" : "Remove"]
 				})]
 			}),
+			confirmation ? /* @__PURE__ */ jsxs("div", {
+				className: "ps-outbox-error",
+				role: "alert",
+				children: [
+					/* @__PURE__ */ jsx("p", { children: confirmation === "retry" ? "Retrying may execute the action again." : "Discarding removes local intent; it does not cancel a remote execution." }),
+					/* @__PURE__ */ jsx("button", {
+						className: "ps-button",
+						type: "button",
+						disabled: pending !== void 0,
+						onClick: () => setConfirmation(void 0),
+						children: "Cancel"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: "ps-button ps-button-danger",
+						type: "button",
+						disabled: pending !== void 0,
+						onClick: () => {
+							run(confirmation);
+						},
+						children: confirmation === "retry" ? "Retry anyway" : "Discard local action"
+					})
+				]
+			}) : null,
 			actionError ? /* @__PURE__ */ jsx("div", {
 				className: "ps-outbox-action-error",
 				children: actionError
@@ -395,7 +232,7 @@ function OutboxRows({ outbox, theme }) {
 }
 function getOutboxActivity(entries) {
 	if (entries.length === 0) return "idle";
-	if (entries.reduce((first, entry) => entry.sequence < first.sequence ? entry : first).status === "failed") return "paused";
+	if (entries.reduce((first, entry) => entry.sequence < first.sequence ? entry : first).status === "blocked") return "paused";
 	return "draining";
 }
 function outboxActivityLabel(activity) {
@@ -407,26 +244,46 @@ function outboxActivityLabel(activity) {
 }
 function outboxBadgeClass(activity) {
 	switch (activity) {
-		case "idle": return "ps:bg-zinc-500/15 ps:text-zinc-400";
+		case "idle": return "ps:bg-[var(--ps-raised)] ps:text-[var(--ps-muted)]";
 		case "draining": return "ps:bg-sky-500/20 ps:text-sky-300";
 		case "paused": return "ps:bg-red-500/20 ps:text-red-300";
 	}
 }
 const ontologyViews = [
+	{
+		id: "objects",
+		label: "Objects",
+		icon: Boxes
+	},
 	{
 		id: "outbox",
 		label: "Outbox",
-		icon: Inbox
+		icon: Send
+	},
+	{
+		id: "queries",
+		label: "Queries",
+		icon: Search
+	},
+	{
+		id: "pinned",
+		label: "Pinned",
+		icon: Pin
+	},
+	{
+		id: "tracing",
+		label: "Tracing",
+		icon: ChartNoAxesGantt
 	},
 	{
 		id: "schema",
 		label: "Schema",
-		icon: Share2
+		icon: Waypoints
 	},
 	{
-		id: "objects",
-		label: "Objects",
-		icon: Database
+		id: "storage",
+		label: "Storage",
+		icon: HardDrive
 	}
 ];
 function formatObjectValue(value) {
@@ -452,28 +309,6 @@ function resolvedType(ir, type) {
 	const referenced = ir.types.find((candidate) => candidate.name === type.value.name)?.type;
 	return referenced ? resolvedType(ir, referenced) : type;
 }
-function typeDisplayName(type) {
-	switch (type.kind) {
-		case "ref": return type.value.name;
-		case "optional": return `${typeDisplayName(type.value.type)} (optional)`;
-		case "list": return `List of ${typeDisplayName(type.value.elementType)}`;
-		case "map": return `Map of ${typeDisplayName(type.value.valueType)}`;
-		case "objectReference": return `${type.value.objectType} reference`;
-		case "string": return "String";
-		case "boolean": return "Boolean";
-		case "integer": return "Integer";
-		case "float": return "Float";
-		case "double": return "Double";
-		case "date": return "Date";
-		case "timestamp": return "Timestamp";
-		case "geopoint": return "Geopoint";
-		case "struct": return "Struct";
-		case "union": return "Union";
-		case "result": return "Result";
-		case "attachment": return "Attachment";
-		case "unknown": return "Unknown";
-	}
-}
 function typeIcon(type) {
 	switch (type.kind) {
 		case "ref": return Link;
@@ -490,24 +325,29 @@ function typeIcon(type) {
 		case "timestamp": return Clock;
 		case "geopoint": return MapPin;
 		case "attachment": return Paperclip;
+		case "encrypted": return SquareCode;
 		case "struct":
 		case "union":
-		case "result": return Map$1;
+		case "result": return Map;
 		case "unknown": return CircleQuestionMark;
 	}
 }
 function DevtoolsTooltip({ children, label }) {
+	const portal = usePanelPortal();
 	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
 		render: /* @__PURE__ */ jsx("span", { className: "ps:inline-flex ps:items-center" }),
 		children
-	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-		className: "ps:z-[100001]",
-		sideOffset: 6,
-		children: /* @__PURE__ */ jsx(Tooltip.Popup, {
-			className: "ps:max-w-64 ps:rounded-md ps:border ps:border-zinc-700 ps:bg-zinc-900 ps:px-2.5 ps:py-1.5 ps:text-[11px] ps:text-zinc-200 ps:shadow-xl",
-			children: label
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, {
+		container: portal,
+		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			className: "ps:z-[100001]",
+			sideOffset: 6,
+			children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+				className: "ps:max-w-64 ps:rounded-md ps:border ps:border-[var(--ps-border)] ps:bg-[var(--ps-raised)] ps:px-2.5 ps:py-1.5 ps:text-[11px] ps:text-[var(--ps-text)] ps:shadow-xl",
+				children: label
+			})
 		})
-	}) })] });
+	})] });
 }
 function TypeIndicator({ type }) {
 	const Icon = typeIcon(type);
@@ -515,7 +355,7 @@ function TypeIndicator({ type }) {
 		label: typeDisplayName(type),
 		children: /* @__PURE__ */ jsx(Icon, {
 			"aria-hidden": true,
-			className: "ps:size-3.5 ps:text-zinc-500"
+			className: "ps:size-3.5 ps:text-[var(--ps-muted)]"
 		})
 	});
 }
@@ -529,7 +369,7 @@ function GeopointPreview({ value }) {
 	return /* @__PURE__ */ jsx(DevtoolsTooltip, {
 		label: /* @__PURE__ */ jsxs("svg", {
 			"aria-label": `Map preview for ${label}`,
-			className: "ps:block ps:rounded ps:border ps:border-zinc-700",
+			className: "ps:block ps:rounded ps:border ps:border-[var(--ps-border)]",
 			height: "72",
 			role: "img",
 			viewBox: "0 0 360 180",
@@ -588,6 +428,7 @@ function isAttachment(value) {
 	return typeof value === "object" && value !== null && "id" in value && typeof value.id === "string";
 }
 function AttachmentPreview({ attachment, ontology }) {
+	const portal = usePanelPortal();
 	const [preview, setPreview] = useState();
 	useEffect(() => {
 		let cancelled = false;
@@ -613,7 +454,7 @@ function AttachmentPreview({ attachment, ontology }) {
 			className: "ps:inline-flex ps:max-w-40 ps:items-center ps:gap-1.5 ps:truncate",
 			children: [/* @__PURE__ */ jsx(Paperclip, {
 				"aria-hidden": true,
-				className: "ps:size-3.5 ps:flex-none ps:text-zinc-500"
+				className: "ps:size-3.5 ps:flex-none ps:text-[var(--ps-muted)]"
 			}), /* @__PURE__ */ jsx("span", {
 				className: "ps:truncate",
 				children: label
@@ -622,35 +463,38 @@ function AttachmentPreview({ attachment, ontology }) {
 	});
 	return /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
 		"aria-label": `Open ${label}`,
-		className: "ps:block ps:overflow-hidden ps:rounded-md ps:border ps:border-zinc-700 ps:bg-transparent ps:p-0 ps:hover:border-rose-400",
+		className: "ps:block ps:overflow-hidden ps:rounded-md ps:border ps:border-[var(--ps-border)] ps:bg-transparent ps:p-0 ps:hover:border-[var(--ps-accent)]",
 		children: /* @__PURE__ */ jsx("img", {
 			alt: label,
-			className: "ps:size-10 ps:object-cover",
+			className: "ps:block ps:size-7 ps:object-cover",
 			src: preview.src
 		})
-	}), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "ps:fixed ps:inset-0 ps:z-[100002] ps:bg-black/75 ps:backdrop-blur-sm" }), /* @__PURE__ */ jsx(Dialog.Viewport, {
-		className: "ps:fixed ps:inset-0 ps:z-[100003] ps:grid ps:place-items-center ps:p-8",
-		children: /* @__PURE__ */ jsxs(Dialog.Popup, {
-			className: "ps:relative ps:max-h-full ps:max-w-4xl ps:rounded-xl ps:border ps:border-zinc-700 ps:bg-zinc-950 ps:p-3 ps:shadow-2xl",
-			children: [
-				/* @__PURE__ */ jsx(Dialog.Title, {
-					className: "ps:sr-only",
-					children: label
-				}),
-				/* @__PURE__ */ jsx("img", {
-					alt: label,
-					className: "ps:max-h-[80vh] ps:max-w-[80vw] ps:rounded-lg ps:object-contain",
-					src: preview.src
-				}),
-				/* @__PURE__ */ jsx(Dialog.Close, {
-					className: "ps:absolute ps:top-4 ps:right-4 ps:rounded-md ps:border ps:border-zinc-600 ps:bg-zinc-950/90 ps:px-2.5 ps:py-1.5 ps:text-xs ps:text-white",
-					children: "Close"
-				})
-			]
-		})
-	})] })] });
+	}), /* @__PURE__ */ jsxs(Dialog.Portal, {
+		container: portal,
+		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "ps:fixed ps:inset-0 ps:z-[100002] ps:bg-black/75 ps:backdrop-blur-sm" }), /* @__PURE__ */ jsx(Dialog.Viewport, {
+			className: "ps:fixed ps:inset-0 ps:z-[100003] ps:grid ps:place-items-center ps:p-8",
+			children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+				className: "ps:relative ps:max-h-full ps:max-w-4xl ps:rounded-xl ps:border ps:border-[var(--ps-border)] ps:bg-[var(--ps-bg)] ps:p-3 ps:shadow-2xl",
+				children: [
+					/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "ps:sr-only",
+						children: label
+					}),
+					/* @__PURE__ */ jsx("img", {
+						alt: label,
+						className: "ps:max-h-[80vh] ps:max-w-[80vw] ps:rounded-lg ps:object-contain",
+						src: preview.src
+					}),
+					/* @__PURE__ */ jsx(Dialog.Close, {
+						className: "ps:absolute ps:top-4 ps:right-4 ps:rounded-md ps:border ps:border-[var(--ps-border-strong)] ps:bg-[var(--ps-surface)] ps:px-2.5 ps:py-1.5 ps:text-xs ps:text-[var(--ps-text)]",
+						children: "Close"
+					})
+				]
+			})
+		})]
+	})] });
 }
-function PropertyValuePreview({ ir, ontology, type, value }) {
+const PropertyValuePreview = memo(function PropertyValuePreview({ ir, ontology, type, value }) {
 	const resolved = resolvedType(ir, type);
 	if (resolved.kind === "optional") return /* @__PURE__ */ jsx(PropertyValuePreview, {
 		ir,
@@ -678,7 +522,7 @@ function PropertyValuePreview({ ir, ontology, type, value }) {
 				attachment,
 				ontology
 			}, attachment.id)), attachments.length > 3 ? /* @__PURE__ */ jsxs("span", {
-				className: "ps:text-zinc-500",
+				className: "ps:text-[var(--ps-muted)]",
 				children: ["+", attachments.length - 3]
 			}) : null]
 		});
@@ -689,7 +533,7 @@ function PropertyValuePreview({ ir, ontology, type, value }) {
 		title: formatted,
 		children: formatted
 	});
-}
+});
 function defaultColumnSize(ir, type) {
 	switch (resolvedType(ir, type).kind) {
 		case "boolean": return 110;
@@ -724,6 +568,7 @@ const objectTableFeatures = tableFeatures({
 });
 const objectColumnHelper = createColumnHelper();
 function ObjectTable({ collection, objectType, ontology, pageSize }) {
+	const portal = usePanelPortal();
 	const [sorting, setSorting] = useState([]);
 	const [columnSizing, setColumnSizing] = useState({});
 	const [columnVisibility, setColumnVisibility] = useState({});
@@ -731,19 +576,13 @@ function ObjectTable({ collection, objectType, ontology, pageSize }) {
 	const [draggedColumnId, setDraggedColumnId] = useState();
 	const [dragOverColumnId, setDragOverColumnId] = useState();
 	const selectedSort = sorting[0];
-	const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useLiveInfiniteQuery((query) => {
+	const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useLiveInfiniteQuery((query) => {
 		const from = query.from({ row: collection });
 		const primaryKey = objectType.primaryKey;
 		if (selectedSort && selectedSort.id !== primaryKey) return from.orderBy(({ row }) => row[selectedSort.id], selectedSort.desc ? "desc" : "asc").orderBy(({ row }) => row[primaryKey], "asc").select(({ row }) => row);
 		return from.orderBy(({ row }) => row[primaryKey], selectedSort?.desc ? "desc" : "asc").select(({ row }) => row);
-	}, { pageSize }, [
-		collection.id,
-		objectType.primaryKey,
-		pageSize,
-		selectedSort?.id,
-		selectedSort?.desc
-	]);
-	const rows = data;
+	}, { pageSize });
+	const rows = useDeferredValue(data);
 	const columns = useMemo(() => objectType.properties.map((property) => objectColumnHelper.accessor((row) => row[property.name], {
 		id: property.name,
 		maxSize: 520,
@@ -755,7 +594,7 @@ function ObjectTable({ collection, objectType, ontology, pageSize }) {
 				/* @__PURE__ */ jsx(TypeIndicator, { type: property.type }),
 				/* @__PURE__ */ jsx("span", { children: property.displayName }),
 				property.name === objectType.primaryKey ? /* @__PURE__ */ jsx("span", {
-					className: "ps:ml-1.5 ps:text-[9px] ps:font-bold ps:tracking-wide ps:text-rose-400",
+					className: "ps:ml-1.5 ps:text-[9px] ps:font-bold ps:tracking-wide ps:text-[var(--ps-accent)]",
 					children: "PK"
 				}) : null
 			]
@@ -792,17 +631,17 @@ function ObjectTable({ collection, objectType, ontology, pageSize }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "ps:flex ps:min-h-0 ps:min-w-0 ps:flex-1 ps:flex-col ps:overflow-hidden",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "ps:flex ps:flex-none ps:items-center ps:border-b ps:border-zinc-500/20 ps:px-4 ps:py-2",
+			className: "ps:bg-[var(--ps-surface)] ps:flex ps:flex-none ps:items-center ps:border-b ps:border-[var(--ps-border)] ps:px-4 ps:py-2",
 			children: [/* @__PURE__ */ jsxs("h2", {
 				className: "ps:m-0 ps:flex ps:items-center ps:gap-2 ps:text-lg ps:font-semibold",
 				children: [/* @__PURE__ */ jsx(ObjectTypeIcon, {
-					className: "ps:size-5 ps:flex-none ps:text-rose-400",
+					className: "ps:size-5 ps:flex-none ps:text-[var(--ps-accent)]",
 					objectType
 				}), objectType.pluralDisplayName]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "ps:ml-auto ps:flex ps:items-center ps:gap-1.5",
 				children: [/* @__PURE__ */ jsxs("button", {
-					className: "ps:inline-flex ps:items-center ps:gap-1.5 ps:rounded-md ps:border-0 ps:bg-transparent ps:px-2 ps:py-1.5 ps:text-xs ps:text-zinc-400 ps:hover:bg-zinc-500/10 ps:hover:text-current ps:disabled:opacity-40",
+					className: "ps:inline-flex ps:items-center ps:gap-1.5 ps:rounded-md ps:border-0 ps:bg-transparent ps:px-2 ps:py-1.5 ps:text-xs ps:text-[var(--ps-muted)] ps:hover:bg-[var(--ps-hover)] ps:hover:text-current ps:disabled:opacity-40",
 					disabled: Object.keys(columnSizing).length === 0,
 					title: "Reset column widths",
 					type: "button",
@@ -814,96 +653,96 @@ function ObjectTable({ collection, objectType, ontology, pageSize }) {
 						className: "ps:size-3.5"
 					}), "Reset widths"]
 				}), /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
-					className: "ps:inline-flex ps:items-center ps:gap-1.5 ps:rounded-md ps:border ps:border-zinc-500/30 ps:bg-zinc-500/10 ps:px-2.5 ps:py-1.5 ps:text-xs ps:text-inherit ps:hover:border-zinc-500/60",
+					className: "ps:inline-flex ps:items-center ps:gap-1.5 ps:rounded-md ps:border ps:border-[var(--ps-border)] ps:bg-[var(--ps-hover)] ps:px-2.5 ps:py-1.5 ps:text-xs ps:text-inherit ps:hover:border-[var(--ps-border-strong)]",
 					children: [/* @__PURE__ */ jsx(Columns3, {
 						"aria-hidden": true,
 						className: "ps:size-3.5"
 					}), "Columns"]
-				}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-					align: "end",
-					className: "ps:z-[100001]",
-					sideOffset: 6,
-					children: /* @__PURE__ */ jsx(Menu.Popup, {
-						className: "ps:min-w-48 ps:rounded-lg ps:border ps:border-zinc-700 ps:bg-zinc-900 ps:p-1.5 ps:text-xs ps:text-zinc-200 ps:shadow-2xl",
-						children: /* @__PURE__ */ jsxs(Menu.Group, { children: [
-							/* @__PURE__ */ jsx(Menu.GroupLabel, {
-								className: "ps:px-2 ps:py-1.5 ps:text-[10px] ps:font-bold ps:tracking-wider ps:text-zinc-500 ps:uppercase",
-								children: "Columns"
-							}),
-							allColumns.map((column, columnIndex) => /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
-								"aria-label": objectType.properties.find((property) => property.name === column.id)?.displayName ?? column.id,
-								checked: column.getIsVisible(),
-								className: dragOverColumnId === column.id && draggedColumnId !== column.id ? "ps:flex ps:cursor-default ps:items-center ps:gap-2 ps:rounded-md ps:bg-rose-500/15 ps:px-2 ps:py-1.5 ps:outline-none" : "ps:flex ps:cursor-default ps:items-center ps:gap-2 ps:rounded-md ps:px-2 ps:py-1.5 ps:outline-none ps:data-[highlighted]:bg-zinc-700/70",
-								draggable: true,
-								label: objectType.properties.find((property) => property.name === column.id)?.displayName ?? column.id,
-								onCheckedChange: (checked) => {
-									column.toggleVisibility(checked);
-								},
-								onDragEnd: () => {
-									setDraggedColumnId(void 0);
-									setDragOverColumnId(void 0);
-								},
-								onDragOver: (event) => {
-									event.preventDefault();
-									event.dataTransfer.dropEffect = "move";
-									setDragOverColumnId(column.id);
-								},
-								onDragStart: (event) => {
-									event.dataTransfer.effectAllowed = "move";
-									event.dataTransfer.setData("text/plain", column.id);
-									setDraggedColumnId(column.id);
-								},
-								onDrop: (event) => {
-									event.preventDefault();
-									if (draggedColumnId && draggedColumnId !== column.id) setColumnOrder((current) => moveColumn(current, draggedColumnId, column.id));
-									setDraggedColumnId(void 0);
-									setDragOverColumnId(void 0);
-								},
-								onKeyDown: (event) => {
-									if (!event.altKey || event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
-									event.preventDefault();
-									const targetIndex = event.key === "ArrowUp" ? columnIndex - 1 : columnIndex + 1;
-									const target = allColumns[targetIndex];
-									if (target) setColumnOrder((current) => moveColumn(current, column.id, target.id));
-								},
-								children: [
-									/* @__PURE__ */ jsx("span", {
-										"aria-hidden": "true",
-										className: "ps:cursor-grab ps:text-zinc-500 ps:active:cursor-grabbing",
-										title: "Drag to reorder",
-										onClick: (event) => {
-											event.stopPropagation();
-										},
-										children: /* @__PURE__ */ jsx(GripVertical, {
-											"aria-hidden": true,
-											className: "ps:size-3.5"
+				}), /* @__PURE__ */ jsx(Menu.Portal, {
+					container: portal,
+					children: /* @__PURE__ */ jsx(Menu.Positioner, {
+						align: "end",
+						className: "ps:z-[100001]",
+						sideOffset: 6,
+						children: /* @__PURE__ */ jsx(Menu.Popup, {
+							className: "ps:min-w-48 ps:rounded-lg ps:border ps:border-[var(--ps-border)] ps:bg-[var(--ps-raised)] ps:p-1.5 ps:text-xs ps:text-[var(--ps-text)] ps:shadow-2xl",
+							children: /* @__PURE__ */ jsxs(Menu.Group, { children: [
+								/* @__PURE__ */ jsx(Menu.GroupLabel, {
+									className: "ps:px-2 ps:py-1.5 ps:text-[10px] ps:font-bold ps:tracking-wider ps:text-[var(--ps-muted)] ps:uppercase",
+									children: "Columns"
+								}),
+								allColumns.map((column, columnIndex) => /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+									"aria-label": objectType.properties.find((property) => property.name === column.id)?.displayName ?? column.id,
+									checked: column.getIsVisible(),
+									className: dragOverColumnId === column.id && draggedColumnId !== column.id ? "ps:flex ps:cursor-default ps:items-center ps:gap-2 ps:rounded-md ps:bg-[var(--ps-selected)] ps:px-2 ps:py-1.5 ps:outline-none" : "ps:flex ps:cursor-default ps:items-center ps:gap-2 ps:rounded-md ps:px-2 ps:py-1.5 ps:outline-none ps:data-[highlighted]:bg-[var(--ps-hover)]",
+									draggable: true,
+									label: objectType.properties.find((property) => property.name === column.id)?.displayName ?? column.id,
+									onCheckedChange: (checked) => {
+										column.toggleVisibility(checked);
+									},
+									onDragEnd: () => {
+										setDraggedColumnId(void 0);
+										setDragOverColumnId(void 0);
+									},
+									onDragOver: (event) => {
+										event.preventDefault();
+										event.dataTransfer.dropEffect = "move";
+										setDragOverColumnId(column.id);
+									},
+									onDragStart: (event) => {
+										event.dataTransfer.effectAllowed = "move";
+										event.dataTransfer.setData("text/plain", column.id);
+										setDraggedColumnId(column.id);
+									},
+									onDrop: (event) => {
+										event.preventDefault();
+										if (draggedColumnId && draggedColumnId !== column.id) setColumnOrder((current) => moveColumn(current, draggedColumnId, column.id));
+										setDraggedColumnId(void 0);
+										setDragOverColumnId(void 0);
+									},
+									onKeyDown: (event) => {
+										if (!event.altKey || event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+										event.preventDefault();
+										const targetIndex = event.key === "ArrowUp" ? columnIndex - 1 : columnIndex + 1;
+										const target = allColumns[targetIndex];
+										if (target) setColumnOrder((current) => moveColumn(current, column.id, target.id));
+									},
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											className: "ps:cursor-grab ps:text-[var(--ps-muted)] ps:active:cursor-grabbing",
+											title: "Drag to reorder",
+											onClick: (event) => {
+												event.stopPropagation();
+											},
+											children: /* @__PURE__ */ jsx(GripVertical, {
+												"aria-hidden": true,
+												className: "ps:size-3.5"
+											})
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "ps:grid ps:size-4 ps:place-items-center ps:rounded ps:border ps:border-[var(--ps-border-strong)]",
+											children: column.getIsVisible() ? /* @__PURE__ */ jsx(Check, {
+												"aria-hidden": true,
+												className: "ps:size-3 ps:text-[var(--ps-accent)]"
+											}) : null
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "ps:truncate",
+											children: objectType.properties.find((property) => property.name === column.id)?.displayName ?? column.id
 										})
-									}),
-									/* @__PURE__ */ jsx("span", {
-										className: "ps:grid ps:size-4 ps:place-items-center ps:rounded ps:border ps:border-zinc-600",
-										children: column.getIsVisible() ? /* @__PURE__ */ jsx(Check, {
-											"aria-hidden": true,
-											className: "ps:size-3 ps:text-rose-400"
-										}) : null
-									}),
-									/* @__PURE__ */ jsx("span", {
-										className: "ps:truncate",
-										children: objectType.properties.find((property) => property.name === column.id)?.displayName ?? column.id
-									})
-								]
-							}, column.id)),
-							/* @__PURE__ */ jsx("p", {
-								className: "ps:m-0 ps:px-2 ps:pt-2 ps:pb-1 ps:text-[10px] ps:text-zinc-500",
-								children: "Drag to reorder · Alt+↑/↓ with keyboard"
-							})
-						] })
+									]
+								}, column.id)),
+								/* @__PURE__ */ jsx("p", {
+									className: "ps:m-0 ps:px-2 ps:pt-2 ps:pb-1 ps:text-[10px] ps:text-[var(--ps-muted)]",
+									children: "Drag to reorder · Alt+↑/↓ with keyboard"
+								})
+							] })
+						})
 					})
-				}) })] })]
+				})] })]
 			})]
-		}), rows.length === 0 ? /* @__PURE__ */ jsx("div", {
-			className: "ps:m-4 ps:grid ps:min-h-40 ps:place-items-center ps:rounded-xl ps:border ps:border-dashed ps:border-zinc-500/40 ps:text-sm ps:text-zinc-500",
-			children: "No objects loaded"
-		}) : /* @__PURE__ */ jsx("div", {
+		}), /* @__PURE__ */ jsx("div", {
 			className: "ps-object-table-scroll ps:min-h-0 ps:flex-1 ps:overflow-auto",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "ps:relative ps:min-h-full",
@@ -921,9 +760,9 @@ function ObjectTable({ collection, objectType, ontology, pageSize }) {
 								children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => {
 									const direction = header.column.getIsSorted();
 									return /* @__PURE__ */ jsxs("th", {
-										className: "ps:relative ps:border-b ps:border-zinc-500/30 ps:bg-zinc-950/95 ps:px-4 ps:py-3 ps:font-semibold ps:whitespace-nowrap ps:backdrop-blur ps:in-[.ps-theme-light]:bg-stone-50/95",
+										className: "ps:relative ps:border-b ps:border-[var(--ps-border)] ps:bg-[var(--ps-surface)] ps:px-4 ps:py-3 ps:font-semibold ps:whitespace-nowrap ps:backdrop-blur",
 										children: [header.isPlaceholder ? null : /* @__PURE__ */ jsxs("button", {
-											className: "ps:flex ps:w-full ps:items-center ps:gap-2 ps:border-0 ps:bg-transparent ps:p-0 ps:text-left ps:text-inherit ps:font-inherit ps:hover:text-rose-400",
+											className: "ps:flex ps:w-full ps:items-center ps:gap-2 ps:border-0 ps:bg-transparent ps:p-0 ps:text-left ps:text-inherit ps:font-inherit ps:hover:text-[var(--ps-accent)]",
 											title: `Sort by ${header.column.id}`,
 											type: "button",
 											onClick: header.column.getToggleSortingHandler(),
@@ -931,13 +770,13 @@ function ObjectTable({ collection, objectType, ontology, pageSize }) {
 												flexRender(header.column.columnDef.header, header.getContext()),
 												direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, {
 													"aria-hidden": true,
-													className: "ps:size-3.5 ps:flex-none ps:text-rose-400"
+													className: "ps:size-3.5 ps:flex-none ps:text-[var(--ps-accent)]"
 												}) : direction === "desc" ? /* @__PURE__ */ jsx(ChevronDown, {
 													"aria-hidden": true,
-													className: "ps:size-3.5 ps:flex-none ps:text-rose-400"
+													className: "ps:size-3.5 ps:flex-none ps:text-[var(--ps-accent)]"
 												}) : /* @__PURE__ */ jsx(ChevronsUpDown, {
 													"aria-hidden": true,
-													className: "ps:size-3.5 ps:flex-none ps:text-zinc-600"
+													className: "ps:size-3.5 ps:flex-none ps:text-[var(--ps-muted)]"
 												}),
 												/* @__PURE__ */ jsx("span", {
 													className: "ps:sr-only",
@@ -975,19 +814,26 @@ function ObjectTable({ collection, objectType, ontology, pageSize }) {
 									}, header.id);
 								}) }, headerGroup.id))
 							}),
-							/* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx("tr", {
-								className: "ps:hover:bg-zinc-500/8",
+							/* @__PURE__ */ jsxs("tbody", { children: [rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+								colSpan: table.getVisibleLeafColumns().length,
+								className: "ps:h-40 ps:px-4 ps:pt-6 ps:align-top ps:text-[var(--ps-muted)]",
+								children: /* @__PURE__ */ jsx("output", { children: isLoading ? "Loading objects…" : "No objects loaded" })
+							}) }), table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx("tr", {
+								className: "ps-object-data-row ps:hover:bg-[var(--ps-hover)]",
 								children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", {
-									className: "ps:max-w-80 ps:border-b ps:border-zinc-500/15 ps:px-4 ps:py-3 ps:text-[11px] ps:whitespace-nowrap",
-									children: flexRender(cell.column.columnDef.cell, cell.getContext())
+									className: "ps-object-data-cell ps:max-w-80 ps:border-b ps:border-[var(--ps-border)] ps:px-4 ps:text-[11px] ps:whitespace-nowrap",
+									children: /* @__PURE__ */ jsx("div", {
+										className: "ps-object-cell-content",
+										children: flexRender(cell.column.columnDef.cell, cell.getContext())
+									})
 								}, cell.id))
-							}, row.id)) })
+							}, row.id))] })
 						]
 					}),
 					hasNextPage ? /* @__PURE__ */ jsx("div", {
-						className: "ps:sticky ps:left-0 ps:flex ps:w-full ps:justify-center ps:border-t ps:border-zinc-500/20 ps:bg-zinc-950/95 ps:p-3 ps:in-[.ps-theme-light]:bg-stone-50/95",
+						className: "ps:sticky ps:left-0 ps:flex ps:w-full ps:justify-center ps:border-t ps:border-[var(--ps-border)] ps:bg-[var(--ps-surface)] ps:p-3",
 						children: /* @__PURE__ */ jsx("button", {
-							className: "ps:rounded-md ps:border ps:border-zinc-600 ps:bg-zinc-900 ps:px-3 ps:py-1.5 ps:text-xs ps:text-zinc-200 ps:hover:border-rose-400 ps:hover:text-rose-300 ps:disabled:opacity-50",
+							className: "ps:rounded-md ps:border ps:border-[var(--ps-border-strong)] ps:bg-[var(--ps-raised)] ps:px-3 ps:py-1.5 ps:text-xs ps:text-[var(--ps-text)] ps:hover:border-[var(--ps-accent)] ps:hover:text-[var(--ps-accent)] ps:disabled:opacity-50",
 							disabled: isFetchingNextPage,
 							type: "button",
 							onClick: () => void fetchNextPage(),
@@ -1006,26 +852,26 @@ function ObjectTable({ collection, objectType, ontology, pageSize }) {
 		})]
 	});
 }
-function ObjectsView({ ontology, pageSize = 50 }) {
+const ObjectsView = memo(function ObjectsView({ ontology, pageSize = 50 }) {
 	const objectTypes = ontology.ir.objectTypes;
 	const [selectedName, setSelectedName] = useState(() => objectTypes[0]?.name);
 	const selected = objectTypes.find((objectType) => objectType.name === selectedName) ?? objectTypes[0];
-	const collection = selected ? ontology.objects[selected.name] : void 0;
+	const collection = selected ? ontology.cachedObjects[selected.name] : void 0;
 	if (!selected || !collection) return /* @__PURE__ */ jsx("div", {
-		className: "ps:grid ps:h-full ps:place-items-center ps:text-sm ps:text-zinc-500",
+		className: "ps:grid ps:h-full ps:place-items-center ps:text-sm ps:text-[var(--ps-muted)]",
 		children: "This ontology has no object types."
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "ps:flex ps:h-full ps:min-h-0 ps:w-full ps:min-w-0 ps:overflow-hidden",
 		children: [/* @__PURE__ */ jsxs("aside", {
-			className: "ps:w-44 ps:flex-none ps:overflow-y-auto ps:border-r ps:border-zinc-500/20 ps:p-3",
+			className: "ps:w-44 ps:flex-none ps:overflow-y-auto ps:border-r ps:border-[var(--ps-border)] ps:p-3",
 			children: [/* @__PURE__ */ jsx("p", {
-				className: "ps:mt-0 ps:mb-2 ps:px-2 ps:text-[10px] ps:font-bold ps:tracking-[0.14em] ps:text-zinc-500 ps:uppercase",
+				className: "ps:mt-0 ps:mb-2 ps:px-2 ps:text-[10px] ps:font-bold ps:tracking-[0.14em] ps:text-[var(--ps-muted)] ps:uppercase",
 				children: "Object types"
 			}), /* @__PURE__ */ jsx("div", {
 				className: "ps:flex ps:flex-col ps:gap-1",
 				children: objectTypes.map((objectType) => /* @__PURE__ */ jsxs("button", {
-					className: objectType.name === selected.name ? "ps:flex ps:items-center ps:gap-2 ps:rounded-lg ps:border-0 ps:bg-rose-500/15 ps:px-2.5 ps:py-2 ps:text-left ps:text-xs ps:font-semibold ps:text-rose-400" : "ps:flex ps:items-center ps:gap-2 ps:rounded-lg ps:border-0 ps:bg-transparent ps:px-2.5 ps:py-2 ps:text-left ps:text-xs ps:text-inherit ps:hover:bg-zinc-500/10",
+					className: objectType.name === selected.name ? "ps:flex ps:items-center ps:gap-2 ps:rounded-lg ps:border-0 ps:bg-[var(--ps-selected)] ps:px-2.5 ps:py-2 ps:text-left ps:text-xs ps:font-semibold ps:text-[var(--ps-accent)]" : "ps:flex ps:items-center ps:gap-2 ps:rounded-lg ps:border-0 ps:bg-transparent ps:px-2.5 ps:py-2 ps:text-left ps:text-xs ps:text-inherit ps:hover:bg-[var(--ps-hover)]",
 					type: "button",
 					onClick: () => {
 						setSelectedName(objectType.name);
@@ -1046,200 +892,28 @@ function ObjectsView({ ontology, pageSize = 50 }) {
 			pageSize
 		}, selected.name)]
 	});
-}
-const SCHEMA_CARD_WIDTH = 230;
-const SCHEMA_CARD_HEIGHT = 176;
-function schemaEdgeLabel(link) {
-	const label = `${link.source.displayName} · ${link.cardinality}`;
-	return {
-		label,
-		width: Math.min(180, Math.max(72, label.length * 6 + 16))
-	};
-}
-function layoutSchema(ir) {
-	const graph = new Graph({ multigraph: true }).setGraph({
-		marginx: 40,
-		marginy: 40,
-		nodesep: 72,
-		rankdir: "LR",
-		ranksep: 120
-	}).setDefaultEdgeLabel(() => ({ label: "" }));
-	for (const objectType of ir.objectTypes) graph.setNode(objectType.name, {
-		height: SCHEMA_CARD_HEIGHT,
-		width: SCHEMA_CARD_WIDTH
-	});
-	for (const link of ir.linkTypes) {
-		const edgeLabel = schemaEdgeLabel(link);
-		graph.setEdge(link.source.objectType, link.target.objectType, {
-			height: 24,
-			label: edgeLabel.label,
-			width: edgeLabel.width
-		}, link.id);
-	}
-	layout(graph);
-	const objectTypeByName = new Map(ir.objectTypes.map((objectType) => [objectType.name, objectType]));
-	const nodes = graph.nodes().map((name) => {
-		const objectType = objectTypeByName.get(name);
-		const node = graph.node(name);
-		if (!objectType || !node) return void 0;
-		return {
-			objectType,
-			x: (node.x ?? 0) - SCHEMA_CARD_WIDTH / 2,
-			y: (node.y ?? 0) - SCHEMA_CARD_HEIGHT / 2
-		};
-	}).filter((node) => node !== void 0);
-	const edges = graph.edges().map((edge) => {
-		const value = graph.edge(edge);
-		return {
-			id: edge.name ?? `${edge.v}-${edge.w}`,
-			label: value.label ?? "",
-			labelWidth: value.width ?? 72,
-			labelX: value.x ?? value.points?.[0]?.x ?? 0,
-			labelY: value.y ?? value.points?.[0]?.y ?? 0,
-			points: value.points ?? []
-		};
-	});
-	const graphSize = graph.graph();
-	return {
-		nodes,
-		edges,
-		width: Math.max(310, graphSize.width ?? 0),
-		height: Math.max(256, graphSize.height ?? 0)
-	};
-}
-function schemaEdgePath(points, cornerRadius = 12) {
-	if (points.length === 0) return "";
-	const first = points[0];
-	if (points.length === 1) return `M ${first.x} ${first.y}`;
-	const path = [`M ${first.x} ${first.y}`];
-	for (let index = 1; index < points.length - 1; index += 1) {
-		const previous = points[index - 1];
-		const current = points[index];
-		const next = points[index + 1];
-		const incoming = Math.hypot(current.x - previous.x, current.y - previous.y);
-		const outgoing = Math.hypot(next.x - current.x, next.y - current.y);
-		if (incoming === 0 || outgoing === 0) {
-			path.push(`L ${current.x} ${current.y}`);
-			continue;
-		}
-		const radius = Math.min(cornerRadius, incoming / 2, outgoing / 2);
-		const before = {
-			x: current.x + (previous.x - current.x) / incoming * radius,
-			y: current.y + (previous.y - current.y) / incoming * radius
-		};
-		const after = {
-			x: current.x + (next.x - current.x) / outgoing * radius,
-			y: current.y + (next.y - current.y) / outgoing * radius
-		};
-		path.push(`L ${before.x} ${before.y}`, `Q ${current.x} ${current.y} ${after.x} ${after.y}`);
-	}
-	const end = points.at(-1);
-	if (end) path.push(`L ${end.x} ${end.y}`);
-	return path.join(" ");
-}
-function SchemaView({ ir }) {
-	const schemaLayout = useMemo(() => layoutSchema(ir), [ir]);
-	const markerId = `ps-schema-arrow-${useId().replaceAll(":", "")}`;
-	if (ir.objectTypes.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: "ps:grid ps:h-full ps:place-items-center ps:text-sm ps:text-zinc-500",
-		children: "This ontology has no schema."
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "ps:h-full ps:overflow-auto ps:p-5",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "ps:relative ps:rounded-2xl ps:border ps:border-zinc-500/20 ps:bg-zinc-950/25 ps:in-[.ps-theme-light]:bg-white/45",
-			style: {
-				height: schemaLayout.height,
-				width: schemaLayout.width
-			},
-			children: [/* @__PURE__ */ jsxs("svg", {
-				"aria-label": "Ontology relations",
-				className: "ps:absolute ps:inset-0 ps:size-full ps:overflow-visible",
-				role: "img",
-				viewBox: `0 0 ${schemaLayout.width} ${schemaLayout.height}`,
-				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
-					id: markerId,
-					markerHeight: "8",
-					markerWidth: "8",
-					orient: "auto",
-					refX: "7",
-					refY: "4",
-					children: /* @__PURE__ */ jsx("path", {
-						className: "ps:fill-rose-400",
-						d: "M0,0 L8,4 L0,8 Z"
-					})
-				}) }), schemaLayout.edges.map((edge) => /* @__PURE__ */ jsxs("g", { children: [
-					/* @__PURE__ */ jsx("path", {
-						className: "ps:fill-none ps:stroke-rose-400/80",
-						d: schemaEdgePath(edge.points),
-						markerEnd: `url(#${markerId})`,
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: "2"
-					}),
-					/* @__PURE__ */ jsx("rect", {
-						className: "ps:fill-zinc-900 ps:stroke-zinc-700 ps:in-[.ps-theme-light]:fill-white ps:in-[.ps-theme-light]:stroke-stone-300",
-						height: "22",
-						rx: "7",
-						width: edge.labelWidth,
-						x: edge.labelX - edge.labelWidth / 2,
-						y: edge.labelY - 11
-					}),
-					/* @__PURE__ */ jsx("text", {
-						className: "ps:fill-zinc-300 ps:text-[10px] ps:font-medium ps:in-[.ps-theme-light]:fill-stone-600",
-						dominantBaseline: "middle",
-						textAnchor: "middle",
-						x: edge.labelX,
-						y: edge.labelY,
-						children: edge.label
-					})
-				] }, edge.id))]
-			}), schemaLayout.nodes.map(({ objectType, x, y }) => /* @__PURE__ */ jsxs("article", {
-				className: "ps:absolute ps:h-44 ps:w-[230px] ps:overflow-hidden ps:rounded-xl ps:border ps:border-zinc-500/30 ps:bg-zinc-900/95 ps:shadow-xl ps:in-[.ps-theme-light]:bg-white/95",
-				style: {
-					left: x,
-					top: y
-				},
-				children: [/* @__PURE__ */ jsxs("header", {
-					className: "ps:border-b ps:border-zinc-500/20 ps:px-3.5 ps:py-3",
-					children: [/* @__PURE__ */ jsxs("h3", {
-						className: "ps:m-0 ps:flex ps:items-center ps:gap-2 ps:text-sm ps:font-semibold",
-						children: [/* @__PURE__ */ jsx(ObjectTypeIcon, {
-							className: "ps:size-4 ps:flex-none ps:text-rose-400",
-							objectType
-						}), objectType.displayName]
-					}), /* @__PURE__ */ jsx("p", {
-						className: "ps:mt-0.5 ps:mb-0 ps:font-mono ps:text-[10px] ps:text-zinc-500",
-						children: objectType.name
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "ps:max-h-28 ps:overflow-y-auto ps:px-3.5 ps:py-2",
-					children: objectType.properties.map((property) => /* @__PURE__ */ jsxs("div", {
-						className: "ps:flex ps:items-center ps:justify-between ps:gap-3 ps:py-1 ps:text-[11px]",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "ps:truncate",
-							children: property.displayName
-						}), property.name === objectType.primaryKey ? /* @__PURE__ */ jsx("span", {
-							className: "ps:flex-none ps:text-[9px] ps:font-bold ps:text-rose-400",
-							children: "PK"
-						}) : null]
-					}, property.name))
-				})]
-			}, objectType.name))]
+});
+function OntologyDevtoolsPanel(props) {
+	return /* @__PURE__ */ jsx(PanelBoundary, {
+		theme: props.theme ?? "dark",
+		children: /* @__PURE__ */ jsx(DbProvider, {
+			client: props.ontology.dbClient,
+			children: /* @__PURE__ */ jsx(OntologyDevtoolsContent, { ...props })
 		})
 	});
 }
-function OntologyDevtoolsPanel({ metaOntology, ontology, theme = "dark" }) {
+function OntologyDevtoolsContent({ metaOntology, ontology, theme = "dark" }) {
 	const { data: outboxEntries } = useLiveQuery({ query: (query) => query.from({ entry: ontology.outbox.collection }) });
 	const outboxActivity = getOutboxActivity(outboxEntries);
 	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsxs(Tabs.Root, {
-		className: `ps-devtools ps-theme-${theme} ps:flex ps:h-full ps:min-h-0 ps:w-full ps:min-w-0 ps:flex-col ps:overflow-hidden ps:font-sans ps:text-[13px] ${theme === "dark" ? "ps:bg-zinc-950 ps:text-stone-200" : "ps:bg-stone-50 ps:text-stone-800"}`,
-		defaultValue: "outbox",
+		"data-ps-devtools": true,
+		className: `ps-devtools ps-theme-${theme} ps:flex ps:h-full ps:min-h-0 ps:w-full ps:min-w-0 ps:flex-col ps:overflow-hidden ps:font-sans ps:text-[13px]`,
+		defaultValue: "objects",
 		style: { contain: "inline-size" },
 		children: [
 			/* @__PURE__ */ jsx(Tabs.List, {
 				"aria-label": "Ontology devtools views",
-				className: "ps:flex ps:flex-none ps:items-center ps:gap-1 ps:border-b ps:border-zinc-500/20 ps:px-4",
+				className: "ps:bg-[var(--ps-surface)] ps:flex ps:flex-none ps:items-center ps:gap-1 ps:overflow-x-auto ps:border-b ps:border-[var(--ps-border)] ps:px-4",
 				style: { height: 40 },
 				children: [...ontologyViews, ...metaOntology ? [{
 					id: "meta",
@@ -1248,7 +922,7 @@ function OntologyDevtoolsPanel({ metaOntology, ontology, theme = "dark" }) {
 				}] : []].map((view) => {
 					const Icon = view.icon;
 					return /* @__PURE__ */ jsxs(Tabs.Tab, {
-						className: "ps:group ps:flex ps:h-full ps:items-center ps:gap-1.5 ps:border-x-0 ps:border-t-0 ps:border-b-2 ps:border-transparent ps:bg-transparent ps:px-3 ps:text-xs ps:font-medium ps:text-zinc-500 ps:hover:text-current ps:data-[active]:border-rose-400 ps:data-[active]:font-semibold ps:data-[active]:text-rose-400",
+						className: "ps:group ps:flex ps:h-full ps:shrink-0 ps:items-center ps:gap-1.5 ps:border-x-0 ps:border-t-0 ps:border-b-2 ps:border-transparent ps:bg-transparent ps:px-3 ps:text-xs ps:font-medium ps:text-[var(--ps-muted)] ps:hover:text-current ps:data-[active]:border-[var(--ps-accent)] ps:data-[active]:font-semibold ps:data-[active]:text-[var(--ps-accent)]",
 						value: view.id,
 						children: [
 							/* @__PURE__ */ jsx(Icon, {
@@ -1284,41 +958,51 @@ function OntologyDevtoolsPanel({ metaOntology, ontology, theme = "dark" }) {
 			/* @__PURE__ */ jsx(Tabs.Panel, {
 				className: "ps:min-h-0 ps:min-w-0 ps:flex-1 ps:overflow-hidden",
 				value: "schema",
-				children: /* @__PURE__ */ jsx(SchemaView, { ir: ontology.ir })
+				children: /* @__PURE__ */ jsx(SchemaView, {
+					ir: ontology.ir,
+					theme
+				})
 			}),
 			/* @__PURE__ */ jsx(Tabs.Panel, {
 				className: "ps:min-h-0 ps:min-w-0 ps:flex-1 ps:overflow-hidden",
 				value: "objects",
 				children: /* @__PURE__ */ jsx(ObjectsView, { ontology })
 			}),
+			/* @__PURE__ */ jsx(Tabs.Panel, {
+				className: "ps:min-h-0 ps:min-w-0 ps:flex-1 ps:overflow-hidden",
+				value: "tracing",
+				children: /* @__PURE__ */ jsx(Tracing, { ontology })
+			}),
+			/* @__PURE__ */ jsx(Tabs.Panel, {
+				className: "ps:min-h-0 ps:min-w-0 ps:flex-1 ps:overflow-hidden",
+				value: "queries",
+				children: /* @__PURE__ */ jsx(Queries, { ontology })
+			}),
+			/* @__PURE__ */ jsx(Tabs.Panel, {
+				className: "ps:min-h-0 ps:min-w-0 ps:flex-1 ps:overflow-hidden",
+				value: "pinned",
+				children: /* @__PURE__ */ jsx(Pinned, { ontology })
+			}),
+			/* @__PURE__ */ jsx(Tabs.Panel, {
+				className: "ps:min-h-0 ps:min-w-0 ps:flex-1 ps:overflow-hidden",
+				value: "storage",
+				children: /* @__PURE__ */ jsx(Storage, { ontology })
+			}),
 			metaOntology ? /* @__PURE__ */ jsx(Tabs.Panel, {
 				className: "ps:min-h-0 ps:min-w-0 ps:flex-1 ps:overflow-hidden",
 				value: "meta",
-				children: /* @__PURE__ */ jsx(ObjectsView, {
-					ontology: metaOntology,
-					pageSize: 25
+				children: /* @__PURE__ */ jsx(DbProvider, {
+					client: metaOntology.dbClient,
+					children: /* @__PURE__ */ jsx(ObjectsView, {
+						ontology: metaOntology,
+						pageSize: 25
+					})
 				})
 			}) : null
 		]
 	}) });
 }
-function createOntologyDevtoolsPlugin({ ontology, id = "party-stack-ontology", metaOntology, name, defaultOpen }) {
-	const [createPlugin] = createReactPlugin({
-		id,
-		name: "Ontology",
-		defaultOpen,
-		Component: ({ theme }) => /* @__PURE__ */ jsx(OntologyDevtoolsPanel, {
-			metaOntology,
-			ontology,
-			theme
-		})
-	});
-	return {
-		...createPlugin(),
-		name: name ?? ((_element, { theme }) => /* @__PURE__ */ jsx(OntologyDevtoolsPluginName, { theme }))
-	};
-}
 //#endregion
-export { OntologyDevtoolsPanel, OntologyDevtoolsPluginName, OntologyDevtoolsTrigger, OntologyIcon, createOntologyDevtoolsPlugin, getOutboxActivity, layoutSchema, moveColumn, ontologyDevtoolsTrigger, schemaEdgePath, timestampPreview, typeDisplayName };
+export { OntologyDevtoolsPanel, OntologyIcon, OutboxEntryCard, getOutboxActivity, layoutSchema, moveColumn, timestampPreview, typeDisplayName };
 
 //# sourceMappingURL=OntologyDevtools.js.map