eddev 2.1.6 → 2.2.0-beta.2

package/dist/app/lib/blocks/inline-editing.d.ts

@@ -11,7 +11,7 @@ export type BlockInstance = {
     originalContent?: string | undefined;
     props?: any;
 };
-type InlineEditingContext = {
+export type InlineEditingContext = {
     values: Attributes;
     innerBlocks: ContentBlock[];
     parents: [string, Attributes][];
@@ -23,6 +23,7 @@ type InlineEditingContext = {
     insertBlocksAfter?: (block: any) => void;
     readonly?: boolean;
     clientId?: string;
+    instanceId: string;
 };
 export declare const InlineEditingContext: import("react").Context<InlineEditingContext | undefined>;
 type ProviderProps = PropsWithChildren<{

package/dist/app/lib/blocks/inline-editing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-editing.d.ts","sourceRoot":"","sources":["../../../../src/app/lib/blocks/inline-editing.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"inline-editing.d.ts","sourceRoot":"","sources":["../../../../src/app/lib/blocks/inline-editing.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAiB,iBAAiB,EAA8B,MAAM,OAAO,CAAA;AAKpF,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;AAErC,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;AAE1E,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,GAAG,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,aAAa,EAAE,CAAA;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,KAAK,CAAC,EAAE,GAAG,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,UAAU,CAAA;IAClB,WAAW,EAAE,YAAY,EAAE,CAAA;IAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAA;IAC/B,KAAK,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;IAC3B,WAAW,CAAC,EAAE,aAAa,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,CAAA;IACtC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAC1B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,2DAA6D,CAAA;AAE9F,KAAK,aAAa,GAAG,iBAAiB,CAAC;IACrC,MAAM,EAAE,UAAU,CAAA;IAClB,WAAW,EAAE,YAAY,EAAE,CAAA;IAC3B,KAAK,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;IAC3B,WAAW,CAAC,EAAE,aAAa,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACtC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAC,CAAA;AAEF,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,aAAa,2CAwChE;AAED,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,2CAazE;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAQ5F;AAED;;;IAGI;AACJ,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAexG;AAED,wBAAgB,gBAAgB,aApHF,GAAG,KAAK,IAAI,cAuHzC;AAED,wBAAgB,cAAc,IAAI,YAAY,EAAE,CAM/C;AAED,wBAAgB,eAAe,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAGxD;AAED,wBAAgB,eAAe,qCAE9B;AAED,wBAAgB,iBAAiB,QAOhC;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,MAAM,SAAS,CAa7C"}

package/dist/app/lib/blocks/inline-editing.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 import { usePostEditor } from "./editor/usePostEditor.js";
 import { useRoute } from "../routing/index.js";
 import { addBlockMetadata } from "./block-utils.js";
 export const InlineEditingContext = createContext(undefined);
 export function InlineEditingContextProvider(props) {
     const parentContext = useContext(InlineEditingContext);
+    const instanceId = useId();
     useMemo(() => {
         addBlockMetadata(props.innerBlocks ?? []);
     }, [props.innerBlocks]);
@@ -30,6 +31,7 @@ export function InlineEditingContextProvider(props) {
             insertBlocksAfter: props.insertBlocksAfter,
             readonly: props.readonly || parentContext?.readonly,
             editorBlock: props.editorBlock,
+            instanceId: instanceId,
         }, children: props.children }));
 }
 export function ReadonlyInlineEditingProvider(props) {

package/dist/app/lib/devtools/components/DevMenu.d.ts

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

package/dist/app/lib/devtools/components/DevMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevMenu.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/components/DevMenu.tsx"],"names":[],"mappings":"AAKA,wBAAgB,OAAO,4CAoCtB"}

package/dist/app/lib/devtools/components/DevMenu.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { usePersistState } from "../hooks/usePersistState";
+import { bolt, close } from "../icons";
+import { DEV_TOOLS_PANELS } from "./panels";
+import { Button } from "./ui/Button";
+export function DevMenu() {
+    const [expanded, setExpanded] = usePersistState("menuOpen", false);
+    const [currentTab, setCurrentTab] = usePersistState("currentTab", "none");
+    const tab = DEV_TOOLS_PANELS[currentTab];
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { shape: "icon", onClick: () => setExpanded(!expanded), children: expanded ? close : bolt }), expanded &&
+                Object.entries(DEV_TOOLS_PANELS).map(([key, info]) => (_jsxs(Button, { variant: "tab", active: currentTab === key, onClick: () => {
+                        if (currentTab === key) {
+                            setCurrentTab("none");
+                        }
+                        else {
+                            setCurrentTab(key);
+                        }
+                    }, children: [info.icon, info.label] }, key))), expanded && tab && (_jsx("div", { className: "max-w-[100vw] absolute left-0 bottom-[calc(100%+10px)]", children: _jsx(tab.component, {}) }))] }));
+}

package/dist/app/lib/devtools/components/DevUI.d.ts

@@ -1,3 +1,16 @@
+import { Component, ErrorInfo, PropsWithChildren } from "react";
 import "../../../../../css/devtools.css";
 export default function DevUI(): import("react/jsx-runtime").JSX.Element;
+interface State {
+    hasError: boolean;
+    error?: Error;
+    errorInfo?: ErrorInfo;
+}
+export declare class ErrorBoundary extends Component<PropsWithChildren<{}>, State> {
+    state: State;
+    static getDerivedStateFromError(err: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};
 //# sourceMappingURL=DevUI.d.ts.map

package/dist/app/lib/devtools/components/DevUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevUI.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/components/DevUI.tsx"],"names":[],"mappings":"AAAA,OAAO,iCAAiC,CAAA;AAIxC,MAAM,CAAC,OAAO,UAAU,KAAK,4CAS5B"}
+{"version":3,"file":"DevUI.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/components/DevUI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,iCAAiC,CAAA;AAQxC,MAAM,CAAC,OAAO,UAAU,KAAK,4CAgB5B;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC;IACjE,KAAK,EAAE,KAAK,CAElB;WAEa,wBAAwB,CAAC,GAAG,EAAE,KAAK,GAAG,KAAK;IAKlD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAwBd"}

package/dist/app/lib/devtools/components/DevUI.js

@@ -1,7 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
 import "../../../../../css/devtools.css";
 import { BreakpointIndicator } from "./BreakpointIndicator.js";
+import { DevMenu } from "./DevMenu";
 import { GridIndicator } from "./GridIndicator";
+import { Panel } from "./ui/Panel";
+import { Button } from "./ui/Button";
+import { usePersistState } from "../hooks/usePersistState";
 export default function DevUI() {
-    return (_jsxs("div", { className: "eddev-ui", children: [_jsx("div", { className: "fixed left-2 bottom-2 z-[999999999999999]", children: _jsx(BreakpointIndicator, {}) }), _jsx(GridIndicator, {})] }));
+    return (_jsx("div", { className: "eddev-ui", children: _jsx("div", { className: "fixed left-2 bottom-2 right-2 z-[999999999999999] pointer-events-none flex justify-start", children: _jsx("div", { className: "flex gap-2 items-center pointer-events-auto", children: _jsxs(ErrorBoundary, { children: [_jsx(DevMenu, {}), _jsx("div", { children: _jsx(BreakpointIndicator, {}) }), _jsx(GridIndicator, {})] }) }) }) }));
+}
+export class ErrorBoundary extends Component {
+    state = {
+        hasError: false,
+    };
+    static getDerivedStateFromError(err) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true, error: err };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("Uncaught error:", error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            const err = this.state.error;
+            return (_jsx(Panel, { title: "Dev UI Error", padded: true, children: _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx("div", { className: "font-bold text-red-400", children: "An error occurred in the Dev UI:" }), _jsx("div", { className: "max-w-[40em] text-red-400 bg-red-950 p-2 rounded-sm", children: err.message }), _jsx(Button, { variant: "subtle", onClick: () => {
+                                usePersistState.clearAll();
+                                this.setState({ hasError: false, error: undefined, errorInfo: undefined });
+                            }, children: "Reset Settings" })] }) }));
+        }
+        return this.props.children;
+    }
 }

package/dist/app/lib/devtools/components/GridIndicator.d.ts

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

package/dist/app/lib/devtools/components/GridIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/components/GridIndicator.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,mDAkC5B"}
+{"version":3,"file":"GridIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/components/GridIndicator.tsx"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,uCAmC5B"}

package/dist/app/lib/devtools/components/GridIndicator.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect } from "react";
 import { usePersistState } from "../hooks/usePersistState.js";
+import { createPortal } from "react-dom";
 export function GridIndicator() {
     const [enabled, setEnabled] = usePersistState("gridOverlayEnabled", false);
     useEffect(() => {
@@ -25,5 +26,5 @@ export function GridIndicator() {
     }
     if (!enabled)
         return null;
-    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 999999999, pointerEvents: "none" }, children: _jsx("div", { className: "grid-auto debug-display", style: { height: "100%" }, children: cols }) }));
+    return createPortal(_jsx("div", { style: { zIndex: 10000000, position: "fixed", inset: 0, pointerEvents: "none" }, children: _jsx("div", { className: "grid-auto", style: { height: "100%" }, children: cols }) }), document.body);
 }

package/dist/app/lib/devtools/components/panels/AppDataPanel.d.ts

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

package/dist/app/lib/devtools/components/panels/AppDataPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppDataPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/AppDataPanel.tsx"],"names":[],"mappings":"AAMA,wBAAgB,YAAY,4CAuB3B"}

package/dist/app/lib/devtools/components/panels/AppDataPanel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppData, useAppDataQueryMonitor } from "../../../hooks";
+import { JSONInspector } from "../ui/JSONInspector";
+import { Panel } from "../ui/Panel";
+import { QueryMonitorDisplay } from "../ui/QueryMonitorDisplay";
+// import { JsonInspector } from "@rexxars/react-json-inspector"
+//
+export function AppDataPanel() {
+    const appData = useAppData();
+    const queryMonitor = useAppDataQueryMonitor();
+    return (_jsx(Panel, { title: "App", padded: true, children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx("div", { className: "font-bold mb-1", children: "App Data:" }), _jsx("div", { className: "max-h-[400px] overflow-auto", children: _jsx(JSONInspector, { data: appData, detailed: true, expandLevel: 4 }) })] }), queryMonitor && queryMonitor.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "font-bold mb-1", children: "Query Log:" }), _jsx(QueryMonitorDisplay, { entries: queryMonitor })] }))] }) }));
+}

package/dist/app/lib/devtools/components/panels/QueriesPanel.d.ts

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

package/dist/app/lib/devtools/components/panels/QueriesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueriesPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/QueriesPanel.tsx"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,4CAM3B"}

package/dist/app/lib/devtools/components/panels/QueriesPanel.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Panel } from "../ui/Panel";
+export function QueriesPanel() {
+    return (_jsx(Panel, { title: "Queries", padded: true, children: "WIP" }));
+}

package/dist/app/lib/devtools/components/panels/RoutePanel.d.ts

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

package/dist/app/lib/devtools/components/panels/RoutePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoutePanel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/RoutePanel.tsx"],"names":[],"mappings":"AAmKA,wBAAgB,UAAU,4CAuDzB"}

package/dist/app/lib/devtools/components/panels/RoutePanel.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRouter, useRouterEvents, useRouterState } from "../../../routing";
+import { Panel } from "../ui/Panel";
+import { Fragment, useEffect } from "react";
+import { withoutHost } from "ufo";
+import { terminal, undo } from "../../icons";
+import { Button } from "../ui/Button";
+import { Chip, ChipGroup } from "../ui/Chip";
+import { JSONInspector } from "../ui/JSONInspector";
+import { QueryMonitorDisplay } from "../ui/QueryMonitorDisplay";
+import { useTabBar } from "../ui/TabBar";
+function RouteDetails(props) {
+    const { route } = props;
+    const admin = route.meta.admin;
+    const router = useRouter();
+    let rows = [];
+    function addRow(label, contents) {
+        rows.push(_jsxs(Fragment, { children: [_jsx("div", { children: label }), _jsx("div", { children: contents })] }, rows.length));
+    }
+    addRow("URI", _jsx("a", { href: route.uri, onClick: (e) => {
+            if (e.metaKey || e.ctrlKey || e.shiftKey)
+                return;
+            e.preventDefault();
+            router.restoreRoute(route);
+        }, className: "underline", children: route.uri }));
+    addRow("Route ID", _jsx(_Fragment, { children: route.id }));
+    if (admin?.editLink) {
+        const actualUrl = env.serverless ? withoutHost(admin.editLink) : admin.editLink;
+        addRow("Edit", _jsx("a", { href: actualUrl, className: "underline", target: "_blank", children: actualUrl || "N/A" }));
+    }
+    addRow("WP Route", _jsxs(ChipGroup, { children: [admin?.kind === "archive" ? (_jsx(Chip, { label: "Archive", value: admin.postType })) : admin?.kind === "post" ? (_jsxs(_Fragment, { children: [!!admin?.postType && _jsx(Chip, { label: "Post Type", value: admin?.postType }), !!admin?.postId && _jsx(Chip, { label: "ID", value: admin?.postId })] })) : admin?.kind === "taxonomy" ? (_jsxs(_Fragment, { children: [!!admin?.taxonomy && _jsx(Chip, { label: "Taxonomy", value: admin?.taxonomy }), !!admin?.termId && _jsx(Chip, { label: "Term ID", value: admin?.termId })] })) : admin?.kind === "404" ? (_jsx(_Fragment, { children: _jsx(Chip, { value: "Not Found" }) })) : null, !!admin?.customRoute && (_jsxs(_Fragment, { children: [_jsx(Chip, { value: "Custom Route" }), !!admin?.customRoute.pattern && _jsx(Chip, { label: "Pattern", value: admin?.customRoute.pattern }), !!Object.keys(admin?.customRoute.params ?? {}).length && (_jsx(Chip, { label: "Custom Params", value: Object.keys(admin?.customRoute.params).join(", ") }))] }))] }));
+    addRow("View", _jsxs("div", { className: "text-white/50", children: [_jsx("span", { children: "views/" }), _jsx("span", { className: "text-white", children: route.view }), _jsx("span", { children: ".tsx" })] }));
+    addRow("Link Data", _jsx(JSONInspector, { data: route.linkData }));
+    if (route.returnState) {
+        addRow("Restore State", _jsx(JSONInspector, { data: route.returnState }));
+    }
+    addRow("GraphQL Vars", _jsx(ChipGroup, { children: Object.entries(route.meta.admin?.params ?? {}).map(([key, value]) => (_jsx(Chip, { label: key, value: String(value) }, key))) }));
+    if (props.compact) {
+        addRow("Props", _jsx("div", { className: "max-h-[400px] overflow-auto", children: _jsx(JSONInspector, { data: route.props, detailed: true, expandLevel: 0 }) }));
+    }
+    return (_jsxs("div", { className: "bg-neutral-800 rounded-md px-2 py-1 flex flex-col gap-1", children: [_jsxs("div", { className: "flex gap-2 text-ellipsis justify-between items-center", children: [_jsx("span", { className: "font-bold", children: route.meta.title }), _jsxs("div", { className: "flex gap-1 items-center", children: [props.active ? ("Current page") : (_jsxs(_Fragment, { children: [props.historyDepth === 1 ? "Previous page" : `${props.historyDepth} pages ago`, _jsx(Button, { variant: "subtle", title: "Restore", shape: "icon", onClick: () => window.history.go(-props.historyDepth), children: undo })] })), _jsx(Button, { title: "Log to Console", shape: "icon", variant: "subtle", onClick: () => {
+                                    console.log("Route Details:", route);
+                                }, children: terminal })] })] }), _jsx("div", { className: "grid [grid-template-columns:120px_1fr] w-full gap-1", children: rows })] }));
+}
+export function RoutePanel() {
+    const router = useRouterState();
+    const tabs = useTabBar("router-panel", [
+        { value: "active", label: "Active Route" },
+        { value: "history", badge: String(router.history.length), label: "History" },
+    ]);
+    useEffect(() => {
+        console.info(`%cRouter logging enabled while Route Panel is open`, "color: #000000; background-color: #7fdbca; padding-inline: 2px; font-weight: bold;");
+    }, []);
+    useRouterEvents((event) => {
+        console.log(`%c${event.type}`, "color: #000000; background-color: #7fdbca; padding-inline: 2px; font-weight: bold;", event);
+    });
+    return (_jsxs(Panel, { title: "Route Data", widgets: tabs.tabBar, padded: true, children: [tabs.tab === "active" && (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(RouteDetails, { route: router.activeRoute, index: router.history.length, active: true }), _jsxs("div", { children: [_jsx("div", { className: "font-bold mb-1", children: "Page Props:" }), _jsx("div", { className: "max-h-[400px] overflow-auto", children: _jsx(JSONInspector, { data: router.activeRoute.props, detailed: true, expandLevel: 4 }) })] }), _jsxs("div", { children: [_jsx("div", { className: "font-bold mb-1", children: "Query Log:" }), _jsx(QueryMonitorDisplay, { entries: router.activeRoute.queryMonitor })] })] })), tabs.tab === "history" && (_jsx("div", { className: "flex flex-col gap-1", children: router.history.map((item, index) => (_jsx(RouteDetails, { route: item, index: index, historyDepth: router.history.length - index - 1, active: router.activeRoute === item, compact: true }, item.id))) }))] }));
+}

package/dist/app/lib/devtools/components/panels/StructurePanel.d.ts

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

package/dist/app/lib/devtools/components/panels/StructurePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StructurePanel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/StructurePanel.tsx"],"names":[],"mappings":"AASA,wBAAgB,cAAc,4CAqG7B"}

package/dist/app/lib/devtools/components/panels/StructurePanel.js

@@ -0,0 +1,138 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useSnapshot } from "valtio";
+import { pageStructureRoot } from "../../../blocks/block-debugger";
+import { usePersistState } from "../../hooks/usePersistState";
+import { blocksIcon, code, globeIcon, jumpTo, routesIcon, singleBlockIcon } from "../../icons";
+import { Expander } from "../ui/Expander";
+import { JSONInspector } from "../ui/JSONInspector";
+import { Panel } from "../ui/Panel";
+export function StructurePanel() {
+    const root = useSnapshot(pageStructureRoot);
+    const nodesById = useMemo(() => {
+        const map = new Map();
+        function traverse(node) {
+            map.set(node.id, node);
+            node.children.forEach(traverse);
+        }
+        traverse(root);
+        return map;
+    }, [root]);
+    const [blockId, setBlockId] = usePersistState("selectedBlockId", null);
+    const selectedNode = blockId ? nodesById.get(blockId) : null;
+    let nodeDetails = null;
+    if (selectedNode) {
+        if (selectedNode.type === "block") {
+            nodeDetails = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "font-bold mb-1", children: ["Block: ", selectedNode.block.slug] }), _jsxs("div", { children: [_jsx("div", { className: "font-bold mb-1 text-white/80", children: "Inline Data:" }), _jsx("div", { className: "max-h-[400px] overflow-auto", children: Object.entries(selectedNode.context?.values ?? {}).map(([key, value]) => (_jsxs("div", { className: "flex ", children: [_jsxs("div", { className: "font-mono text-sm text-cyan-400 w-[150px] break-words", children: [key, ":"] }), _jsx("div", { className: "ml-2 flex-1", children: _jsx(JSONInspector, { data: value, expandLevel: 2 }) })] }, key))) })] }), _jsxs("div", { children: [_jsx("div", { className: "font-bold mb-1 text-white/80", children: "Props:" }), _jsx("div", { className: "max-h-[400px] overflow-auto", children: _jsx(JSONInspector, { data: selectedNode.block.props, detailed: true, expandLevel: 4 }) })] })] }));
+        }
+        else if (selectedNode.type === "debug") {
+            const data = {
+                ...selectedNode.data,
+            };
+            delete data.log;
+            nodeDetails = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "font-bold mb-1", children: ["Debug Node: ", selectedNode.label] }), _jsxs("div", { children: [_jsx("div", { className: "font-bold mb-1 text-white/80", children: "Data:" }), _jsx("div", { children: _jsx(JSONInspector, { data: data, detailed: true, expandLevel: 4 }) })] }), _jsxs("div", { children: [_jsx("div", { className: "font-bold mb-1 text-white/80", children: "Log:" }), _jsxs("div", { children: [selectedNode.logEntries.length === 0 && _jsx("div", { className: "text-white/50 italic", children: "No log entries" }), selectedNode.logEntries.map((entry, index) => {
+                                        return (_jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: "flex gap-1.5 flex-1 min-w-[200px]", children: [_jsx("span", { className: "text-white/50", children: ">" }), entry.args.map((part, partIndex) => {
+                                                            if (typeof part === "string") {
+                                                                return _jsx(_Fragment, { children: part });
+                                                            }
+                                                            else {
+                                                                return (_jsx("span", { className: "text-purple-400 inline-flex", onClick: (e) => e.stopPropagation(), children: _jsx(JSONInspector, { data: part }) }));
+                                                            }
+                                                        })] }), _jsx("div", { className: "text-white/30", children: entry.time.toLocaleTimeString() })] }, index));
+                                    })] })] })] }));
+        }
+    }
+    return (_jsx(Panel, { title: "Blocks", children: _jsxs("div", { className: "flex flex-row gap-3 p-3 min-h-[300px] max-h-[80vh]", children: [_jsx("div", { className: "overflow-auto", children: _jsx(StructureNode, { node: root, indent: 0, selectedId: blockId, onSelect: (id) => setBlockId(id) }) }), !!nodeDetails && _jsx("div", { className: "overflow-auto max-w-[500px] flex flex-col gap-2", children: nodeDetails })] }) }));
+}
+function StructureNode(props) {
+    const node = props.node;
+    let nodeId = node.id;
+    let label = null;
+    let widget = null;
+    let onHover = undefined;
+    if (node.type === "root") {
+        label = _jsxs(_Fragment, { children: [globeIcon, " Root"] });
+    }
+    else if (node.type === "route") {
+        label = (_jsxs(_Fragment, { children: [routesIcon, " Route: ", node.route.uri] }));
+    }
+    else if (node.type === "blocks") {
+        label = _jsxs(_Fragment, { children: [blocksIcon, " ContentBlocks"] });
+    }
+    else if (node.type === "debug") {
+        label = (_jsxs(_Fragment, { children: [code, " Debug: ", node.label] }));
+    }
+    else if (node.type === "block") {
+        label = (_jsxs(_Fragment, { children: [singleBlockIcon, " Block: ", node.block.slug] }));
+        nodeId = node.context?.instanceId || "";
+    }
+    if (node.type === "block" || node.type === "debug") {
+        if (node.getElements) {
+            widget = (_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    const elements = node.getElements?.();
+                    if (elements && elements.length) {
+                        elements[0].scrollIntoView({ behavior: "smooth", block: "start" });
+                    }
+                }, children: jumpTo }));
+            onHover = () => {
+                const elements = node.getElements?.();
+                const boundsDisplays = [];
+                if (elements?.length) {
+                    for (const el of elements) {
+                        const rect = el.getBoundingClientRect();
+                        const boundsDisplay = document.createElement("div");
+                        boundsDisplay.style.position = "fixed";
+                        boundsDisplay.style.left = `${rect.left}px`;
+                        boundsDisplay.style.top = `${rect.top}px`;
+                        boundsDisplay.style.width = `${rect.width}px`;
+                        boundsDisplay.style.height = `${rect.height}px`;
+                        boundsDisplay.style.border = "2px solid rgba(255, 165, 0, 0.8)";
+                        boundsDisplay.style.backgroundColor = "rgba(255, 165, 0, 0.2)";
+                        boundsDisplay.style.pointerEvents = "none";
+                        boundsDisplay.style.zIndex = "9999";
+                        document.body.appendChild(boundsDisplay);
+                        boundsDisplays.push(boundsDisplay);
+                    }
+                }
+                return () => {
+                    for (const bd of boundsDisplays) {
+                        bd.remove();
+                    }
+                };
+            };
+        }
+    }
+    const selected = props.selectedId === nodeId && nodeId !== "";
+    const cleanupHover = useRef(undefined);
+    useEffect(() => {
+        return () => {
+            cleanupHover.current?.();
+        };
+    }, []);
+    useEffect(() => {
+        const abort = new AbortController();
+        window.addEventListener("scroll", () => {
+            if (cleanupHover.current) {
+                cleanupHover.current();
+                cleanupHover.current = onHover ? onHover() : undefined;
+            }
+        }, { signal: abort.signal });
+        return () => {
+            abort.abort();
+        };
+    }, []);
+    const [expanded, setExpanded] = useState(true);
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: `flex justify-between gap-1 py-0.5 [&_svg]:size-[1.2em] items-center px-1 ${selected ? "bg-neutral-700" : "hover:bg-neutral-800"}`, style: { paddingLeft: `${props.indent * 1.25}em` }, onClick: () => {
+                    props.onSelect(nodeId);
+                }, onMouseEnter: () => {
+                    if (onHover) {
+                        cleanupHover.current = onHover();
+                    }
+                }, onMouseLeave: () => {
+                    if (cleanupHover.current) {
+                        cleanupHover.current();
+                        cleanupHover.current = undefined;
+                    }
+                }, children: [_jsx(Expander, { expanded: expanded, onChange: setExpanded, canExpand: node.children.length > 0, children: _jsx("div", { className: "flex flex-row", children: _jsx("div", { className: "text-white/70 inline-flex gap-1 items-center", children: label }) }) }), widget] }), node.children.length > 0 && (_jsx("div", { className: "flex flex-col", children: node.children.map((child, index) => (_jsx(StructureNode, { node: child, indent: props.indent + 1, selectedId: props.selectedId, onSelect: props.onSelect }, index))) }))] }));
+}

package/dist/app/lib/devtools/components/panels/index.d.ts

@@ -0,0 +1,10 @@
+import { ComponentType, ReactNode } from "react";
+type Panel = {
+    label: string;
+    icon: ReactNode;
+    component: ComponentType;
+};
+export type DevPanelName = "appData" | "route" | "queries" | "structure";
+export declare const DEV_TOOLS_PANELS: Record<DevPanelName, Panel>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/app/lib/devtools/components/panels/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOhD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,EAAE,aAAa,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAA;AAExE,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,EAAE,KAAK,CAqBxD,CAAA"}

package/dist/app/lib/devtools/components/panels/index.js

@@ -0,0 +1,27 @@
+import { blocksIcon, globeIcon, routesIcon, structure } from "../../icons";
+import { AppDataPanel } from "./AppDataPanel";
+import { RoutePanel } from "./RoutePanel";
+import { QueriesPanel } from "./QueriesPanel";
+import { StructurePanel } from "./StructurePanel";
+export const DEV_TOOLS_PANELS = {
+    appData: {
+        label: "App Data",
+        icon: globeIcon,
+        component: AppDataPanel,
+    },
+    route: {
+        label: "Route",
+        icon: routesIcon,
+        component: RoutePanel,
+    },
+    queries: {
+        label: "Queries",
+        icon: structure,
+        component: QueriesPanel,
+    },
+    structure: {
+        label: "Structure",
+        icon: blocksIcon,
+        component: StructurePanel,
+    },
+};

package/dist/app/lib/devtools/components/panels/monaco-graphql.worker.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=monaco-graphql.worker.d.ts.map

package/dist/app/lib/devtools/components/panels/monaco-graphql.worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"monaco-graphql.worker.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/monaco-graphql.worker.ts"],"names":[],"mappings":""}

package/dist/app/lib/devtools/components/panels/monaco-graphql.worker.js

@@ -0,0 +1,9 @@
+// @ts-expect-error: worker entry
+import { initialize } from "monaco-editor/esm/vs/editor/editor.worker";
+import { GraphQLWorker } from "monaco-graphql/esm/GraphQLWorker.js";
+globalThis.onmessage = () => {
+    initialize((ctx, createData) => {
+        // optional: tweak createData.languageConfig here
+        return new GraphQLWorker(ctx, createData);
+    });
+};

package/dist/app/lib/devtools/components/ui/Button.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+type Props = ComponentProps<"button"> & {
+    shape?: "icon" | "default";
+    variant?: "tab" | "button" | "subtle";
+    active?: boolean;
+};
+export declare function Button({ active, shape, variant, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/app/lib/devtools/components/ui/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,KAAK,KAAK,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACrC,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAUjE"}

package/dist/app/lib/devtools/components/ui/Button.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Button({ active, shape, variant, ...props }) {
+    return (_jsx("button", { className: "btn", "data-shape": shape ?? "default", "data-variant": variant ?? "button", "data-active": active ? "" : undefined, ...props }));
+}

package/dist/app/lib/devtools/components/ui/Chip.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+type Props = {
+    label?: string;
+    value: ReactNode;
+};
+export declare function Chip(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ChipGroup(props: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Chip.d.ts.map

package/dist/app/lib/devtools/components/ui/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,KAAK,2CAOhC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAEvD"}

package/dist/app/lib/devtools/components/ui/Chip.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export function Chip(props) {
+    return (_jsxs("span", { className: "inline-flex line-clamp-1 overflow-ellipsis bg-neutral-300/10 rounded-md px-[0.4em] py-[0.08em] gap-1", children: [props.label ? _jsxs("span", { className: "text-white/50", children: [props.label, ":"] }) : null, _jsx("span", { children: props.value })] }));
+}
+export function ChipGroup(props) {
+    return _jsx("div", { className: "flex flex-wrap gap-1 items-center", children: props.children });
+}

package/dist/app/lib/devtools/components/ui/Expander.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+export declare function Expander(props: {
+    expanded: boolean;
+    onChange(expanded: boolean): void;
+    canExpand?: boolean;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Expander.d.ts.map

package/dist/app/lib/devtools/components/ui/Expander.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/Expander.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,2CAcA"}

package/dist/app/lib/devtools/components/ui/Expander.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Expander(props) {
+    return (_jsxs("span", { className: "inline-flex cursor-default items-start", onClick: () => props.canExpand !== false && props.onChange(!props.expanded), children: [_jsx("span", { className: `text-white/40 inline-flex mr-1 ${props.expanded ? "rotate-90" : ""} ${props.canExpand === false ? "opacity-0" : ""}`, children: "\u25B6" }), props.children] }));
+}

package/dist/app/lib/devtools/components/ui/JSONInspector.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    data: any;
+    expandLevel?: number;
+    detailed?: boolean;
+};
+export declare function JSONInspector(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=JSONInspector.d.ts.map

package/dist/app/lib/devtools/components/ui/JSONInspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSONInspector.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/JSONInspector.tsx"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,GAAG,CAAA;IACT,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,2CA+BzC"}

package/dist/app/lib/devtools/components/ui/JSONInspector.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ObjectInspector } from "react-inspector";
+import { usePersistState } from "../../hooks/usePersistState";
+import { bytesToSize } from "../../lib/filesize";
+export function JSONInspector(props) {
+    const inspector = _jsx(ObjectInspector, { data: props.data, theme: "chromeDark", expandLevel: props.expandLevel });
+    const [rawMode, setRawMode] = usePersistState("json-raw-mode", false);
+    if (props.data === undefined || props.data === null) {
+        return _jsx("div", { className: "text-ui text-neutral-500 italic", children: String(props.data) });
+    }
+    if (props.detailed) {
+        return (_jsxs("div", { className: "relative pr-[85px]", children: [_jsxs("div", { className: "absolute top-0 right-0 text-tiny flex gap-1 bg-neutral-600 px-1", children: [bytesToSize(JSON.stringify(props.data).length), _jsx("button", { className: "underline", onClick: () => setRawMode(!rawMode), children: rawMode ? "INSPECT" : "RAW" })] }), rawMode ? (_jsx("textarea", { className: "w-full bg-transparent text-inherit resize-none [field-sizing:content] outline-none font-mono text-ui", readOnly: true, value: JSON.stringify(props.data, null, 2) })) : (inspector)] }));
+    }
+    else {
+        return inspector;
+    }
+}

package/dist/app/lib/devtools/components/ui/Panel.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+type Props = {
+    title: string;
+    widgets?: ReactNode;
+    children: ReactNode;
+    padded?: boolean;
+};
+export declare function Panel(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Panel.d.ts.map

package/dist/app/lib/devtools/components/ui/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,2CAcjC"}

package/dist/app/lib/devtools/components/ui/Panel.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Panel(props) {
+    return (_jsxs("div", { className: "bg-black text-white rounded-md shadow-md border border-neutral-800", children: [_jsxs("div", { className: "px-3 py-2 border-b border-neutral-800 flex justify-between items-center gap-4", children: [_jsx("div", { className: "text-heading pt-1", children: props.title }), _jsx("div", { children: props.widgets })] }), _jsx("div", { className: `overflow-auto max-h-[calc(100vh-120px)] max-w-[calc(100vw-120px)] flex flex-col ${props.padded ? "p-3" : ""}`, children: props.children })] }));
+}