eddev 2.3.20 → 2.3.22

package/css/devtools.css

@@ -4,17 +4,24 @@
 
 @config "../dist/app/lib/devtools/tailwind.config.js";
 
-.eddev-ui {
+#eddev-ui {
   @apply text-ui font-mono;
 }
 
 @layer components {
   .btn {
-    .eddev-ui & {
+    #eddev-ui & {
       @apply flex items-center justify-center text-ui font-mono h-button rounded-full gap-1.5;
 
       &[data-variant="button"] {
         @apply bg-black text-white px-2;
+        &:has(svg:first-child) {
+          @apply pl-1.5;
+        }
+
+        &:hover {
+          @apply bg-neutral-800;
+        }
       }
 
       &[data-variant="subtle"] {
@@ -30,20 +37,40 @@
       }
 
       &[data-shape="icon"] {
-        @apply w-button p-0;
+        @apply w-button !p-0;
+
+        &:hover {
+          @apply bg-neutral-800;
+        }
       }
 
       svg {
-        @apply size-[1.2em];
+        @apply size-[1.2em] flex-none;
         fill: currentColor;
       }
     }
   }
 }
 
-.eddev-ui {
+#eddev-ui {
   letter-spacing: -0.02em;
 
+  .btn-group {
+    display: inline-flex;
+
+    > :not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    > :not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    > :not(:first-child) {
+      border-left: 1px solid rgba(255, 255, 255, 0.2);
+    }
+  }
+
   .json-inspector,
   .json-inspector__selection {
     font:
@@ -152,4 +179,17 @@
       background-color: transparent !important;
     }
   }
+
+  kbd {
+    @apply border-neutral-600/50 border px-0.5 rounded-sm;
+  }
+
+  .eddev-no-scrollbars {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera */
+    }
+  }
 }

package/dist/app/lib/blocks/EditableText.d.ts

@@ -63,6 +63,6 @@ type MaybeAsProp<T> = T extends {
 } ? (U extends unknown ? {} : {
     asProp?: U;
 }) : {};
-export declare function EditableText<T extends ElementType>({ id, as, appendOnEnter, removeOnDelete, plainText, store, ...props }: Props<T>): import("react").JSX.Element | null;
+export declare function EditableText<T extends ElementType>({ id, as, appendOnEnter, removeOnDelete, plainText, store, asBlockName, ...props }: Props<T>): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=EditableText.d.ts.map

package/dist/app/lib/blocks/EditableText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../../src/app/lib/blocks/EditableText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA0C,MAAM,OAAO,CAAA;AAE3E,OAAO,EAAE,gBAAgB,EAAoD,MAAM,qBAAqB,CAAA;AAGxG,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;AAE3D,KAAK,cAAc,GACf,WAAW,GACX,WAAW,GACX,aAAa,GACb,WAAW,GACX,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,cAAc,GACd,yBAAyB,GACzB,eAAe,CAAA;AAEnB,KAAK,KAAK,CAAC,CAAC,SAAS,WAAW,IAAI;IAClC,4CAA4C;IAC5C,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;;;;;QAQI;IACJ,cAAc,CAAC,EAAE,CAAC,cAAc,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAA;IACnD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IACxC;;;QAGI;IACJ,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAChC;;;QAGI;IACJ,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,GAAG;IACF;;;;QAII;IACJ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;;QAKI;IACJ,KAAK,EAAE,oBAAoB,GAAG,MAAM,CAAA;CACrC,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,cAAc,GAAG,aAAa,CAAC,GAChF,WAAW,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAA;AAEhD,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,CAAC,SAAS,OAAO,GAAG,EAAE,GAAG;IAAE,MAAM,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,GAAG,EAAE,CAAA;AAEjG,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,EAClD,EAAE,EACF,EAAE,EACF,aAAa,EACb,cAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,sCAmHV"}
+{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../../src/app/lib/blocks/EditableText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA0C,MAAM,OAAO,CAAA;AAE3E,OAAO,EAAE,gBAAgB,EAAoD,MAAM,qBAAqB,CAAA;AAGxG,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;AAE3D,KAAK,cAAc,GACf,WAAW,GACX,WAAW,GACX,aAAa,GACb,WAAW,GACX,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,cAAc,GACd,yBAAyB,GACzB,eAAe,CAAA;AAEnB,KAAK,KAAK,CAAC,CAAC,SAAS,WAAW,IAAI;IAClC,4CAA4C;IAC5C,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;;;;;QAQI;IACJ,cAAc,CAAC,EAAE,CAAC,cAAc,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAA;IACnD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IACxC;;;QAGI;IACJ,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAChC;;;QAGI;IACJ,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,GAAG;IACF;;;;QAII;IACJ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;;QAKI;IACJ,KAAK,EAAE,oBAAoB,GAAG,MAAM,CAAA;CACrC,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,cAAc,GAAG,aAAa,CAAC,GAChF,WAAW,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAA;AAEhD,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,CAAC,SAAS,OAAO,GAAG,EAAE,GAAG;IAAE,MAAM,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,GAAG,EAAE,CAAA;AAEjG,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,EAClD,EAAE,EACF,EAAE,EACF,aAAa,EACb,cAAc,EACd,SAAS,EACT,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,sCAmHV"}

package/dist/app/lib/blocks/EditableText.js

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { useRouter } from "../routing/hooks/useRouter.js";
 import { useBlockAppender, useBlockContext, useValueStore } from "./inline-editing.js";
 import { resolveAcfBlockName } from "./editor/block-templates.js";
-export function EditableText({ id, as, appendOnEnter, removeOnDelete, plainText, store, ...props }) {
+export function EditableText({ id, as, appendOnEnter, removeOnDelete, plainText, store, asBlockName, ...props }) {
     if (env.admin) {
         const ctx = useBlockContext();
         const readOnly = ctx?.readonly;
@@ -11,10 +11,10 @@ export function EditableText({ id, as, appendOnEnter, removeOnDelete, plainText,
             const ref = useRef(null);
             const [value, setValue] = useValueStore(store ?? id);
             useEffect(() => {
-                if (props.asBlockName) {
+                if (asBlockName) {
                     ctx?.setBlockLabel(value || props.defaultValue || props.placeholder || "");
                 }
-            }, [props.asBlockName, value || props.defaultValue || props.placeholder]);
+            }, [asBlockName, value || props.defaultValue || props.placeholder]);
             // useEffect(() => {
             //   if ((plainText || props.allowedFormats?.length === 0) && ref.current && !!value) {
             //     const placeholder = ref.current.querySelector("[data-rich-text-placeholder]")

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BreakpointIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/components/BreakpointIndicator.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,mBAAmB,gCAuGlC"}
+{"version":3,"file":"BreakpointIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/components/BreakpointIndicator.tsx"],"names":[],"mappings":"AA4BA,wBAAgB,mBAAmB,uCAmIlC"}

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

@@ -1,7 +1,10 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
 import { usePersistState } from "../hooks/usePersistState.js";
 import { useTailwindConfig } from "../hooks/useTailwind.js";
+import { gridOff, gridOn } from "../icons.js";
+import { Button } from "./ui/Button.js";
 function parseBreakpointMin(breakpoint) {
     return parseInt(breakpoint);
 }
@@ -21,7 +24,7 @@ function getColors(index) {
     };
 }
 export function BreakpointIndicator() {
-    const ref = useRef(null);
+    const [gridEnabled, setGridEnabled] = usePersistState("gridOverlayEnabled", false);
     const tw = useTailwindConfig();
     const [activeSize, setActiveSize] = useState(-1);
     const [width, setWidth] = useState(window.innerWidth);
@@ -60,22 +63,44 @@ export function BreakpointIndicator() {
         window.addEventListener("resize", update);
         return () => window.removeEventListener("resize", update);
     }, [screens, !!tw]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "g" && e.ctrlKey) {
+                setGridEnabled((e) => !e);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
     const maxSize = screens[screens.length - 1]?.min;
     const screen = screens[activeSize];
     const globalProgress = width / maxSize;
-    return (_jsx("div", { ref: ref, "data-breakpoint": true, onClick: () => setExpanded(!expanded), children: !!screens && !!screen && (_jsx(_Fragment, { children: expanded ? (_jsx("div", { className: "btn w-[400px] bg-black px-2", children: _jsxs("div", { className: "relative w-full h-full cursor-pointer", children: [_jsxs("div", { className: "absolute bottom-[-3px] -translate-x-1/2 -translate-y-1/2 leading-none text-[8px] text-white", style: { left: `calc(min(${globalProgress},1) * 100%)` }, children: ["\u23F6 ", _jsxs("span", { className: globalProgress < 0.85 ? `absolute left-2` : `absolute right-2`, children: [width, "px"] })] }), screens.map((screen, i) => {
-                            const colors = getColors(i);
-                            const active = i === activeSize;
-                            const last = i === screens.length - 1;
-                            return (_jsxs("div", { className: "absolute flex-1 flex flex-col data-[disabled]:opacity-60 transition-opacity", "data-disabled": active ? undefined : "", style: last
-                                    ? {
-                                        right: 0,
-                                    }
-                                    : {
-                                        left: `${(screen.min / maxSize) * 100}%`,
-                                        width: `${(((screen.max ?? maxSize) - screen.min) / maxSize) * 100}%`,
-                                    }, children: [_jsx("span", { className: "text-[8px] text-neutral-300 leading-normal", style: { color: active ? colors.backgroundColor : undefined }, children: screen.name }), !last && _jsx("span", { className: "h-[1px]", style: colors })] }, screen.name));
-                        })] }) })) : (
-            // Condensed
-            _jsx("div", { className: "btn px-3 cursor-pointer", style: getColors(activeSize), children: screen.name })) })) }));
+    if (!screens || !screen)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "btn-group", children: [_jsx(Button, { className: "btn", shape: "icon", variant: "button", tooltip: _jsxs(_Fragment, { children: ["Toggle grid ", _jsx("kbd", { children: "ctrl+g" })] }), onClick: (e) => {
+                            setGridEnabled(!gridEnabled);
+                        }, children: _jsx("span", { className: "ml-0.5", children: gridEnabled ? gridOn : gridOff }) }), expanded ? (_jsx("div", { className: "btn w-[400px] bg-black px-2", onClick: () => setExpanded(!expanded), children: _jsxs("div", { className: "relative w-full h-full cursor-pointer", children: [_jsxs("div", { className: "absolute bottom-[-3px] -translate-x-1/2 -translate-y-1/2 leading-none text-[8px] text-white", style: { left: `calc(min(${globalProgress},1) * 100%)` }, children: ["\u23F6 ", _jsxs("span", { className: globalProgress < 0.85 ? `absolute left-2` : `absolute right-2`, children: [width, "px"] })] }), screens.map((screen, i) => {
+                                    const colors = getColors(i);
+                                    const active = i === activeSize;
+                                    const last = i === screens.length - 1;
+                                    return (_jsxs("div", { className: "absolute flex-1 flex flex-col data-[disabled]:opacity-60 transition-opacity", "data-disabled": active ? undefined : "", style: last
+                                            ? {
+                                                right: 0,
+                                            }
+                                            : {
+                                                left: `${(screen.min / maxSize) * 100}%`,
+                                                width: `${(((screen.max ?? maxSize) - screen.min) / maxSize) * 100}%`,
+                                            }, children: [_jsx("span", { className: "text-[8px] text-neutral-300 leading-normal", style: { color: active ? colors.backgroundColor : undefined }, children: screen.name }), !last && _jsx("span", { className: "h-[1px]", style: colors })] }, screen.name));
+                                })] }) })) : (
+                    // Condensed
+                    _jsx("div", { className: "btn px-3 cursor-pointer", style: getColors(activeSize), onClick: () => setExpanded(!expanded), children: screen.name }))] }), gridEnabled && _jsx(GridOverlay, {})] }));
+}
+function GridOverlay() {
+    const cols = [];
+    for (let i = 0; i < 12; i++) {
+        cols.push(_jsx("div", { style: { height: "100%", backgroundColor: "rgba(255,0,0,0.1)" } }, i));
+    }
+    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/DevMenu.d.ts.map

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

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

@@ -3,17 +3,15 @@ import { usePersistState } from "../hooks/usePersistState.js";
 import { bolt, close } from "../icons.js";
 import { DEV_TOOLS_PANELS } from "./panels/index.js";
 import { Button } from "./ui/Button.js";
+import { Panel } from "./ui/Panel.js";
 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, {}) }))] }));
+    const [currentTab, setCurrentTab] = usePersistState("currentTab", "appData");
+    const tabName = currentTab === "none" ? "appData" : currentTab;
+    const tab = DEV_TOOLS_PANELS[tabName];
+    const tabNames = Object.keys(DEV_TOOLS_PANELS);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { shape: "icon", title: expanded ? "Close Dev UI" : "Open Dev UI", onClick: () => setExpanded(!expanded), children: expanded ? close : bolt }), expanded && (_jsx("div", { className: "max-w-[calc(100vw-16px)] absolute left-0 bottom-[calc(100%+10px)]", children: _jsx(Panel, { id: "devtools", padded: tab.padded, header: _jsx("div", { className: "flex whitespace-nowrap flex-none gap-2 -ml-2", children: tabNames.map((name) => {
+                            const info = DEV_TOOLS_PANELS[name];
+                            return (_jsxs(Button, { variant: "tab", active: tabName === name, onClick: () => setCurrentTab(name), children: [info.icon, info.label] }, name));
+                        }) }), children: _jsx(tab.component, {}) }) }))] }));
 }

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,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,iCAAiC,CAAA;AAQxC,MAAM,CAAC,OAAO,UAAU,KAAK,gCAgB5B;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"}
+{"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;AAUxC,MAAM,CAAC,OAAO,UAAU,KAAK,gCAgB5B;AAuBD,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,14 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from "react";
 import "../../../../../css/devtools.css";
+import { useRouterState } from "../../routing/index.js";
+import { usePersistState } from "../hooks/usePersistState.js";
+import { pencil } from "../icons.js";
+import { normalizeEditLink } from "../lib/edit-link.js";
 import { BreakpointIndicator } from "./BreakpointIndicator.js";
 import { DevMenu } from "./DevMenu.js";
-import { GridIndicator } from "./GridIndicator.js";
-import { Panel } from "./ui/Panel.js";
 import { Button } from "./ui/Button.js";
-import { usePersistState } from "../hooks/usePersistState.js";
+import { Panel } from "./ui/Panel.js";
 export default function DevUI() {
-    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, {})] }) }) }) }));
+    return (_jsx("div", { id: "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: [_jsxs("div", { className: "btn-group", children: [_jsx(DevMenu, {}), _jsx(RouteEditButton, {})] }), _jsx(BreakpointIndicator, {})] }) }) }) }));
+}
+function RouteEditButton() {
+    const editLink = useRouterState((state) => state.activeRoute.meta.admin?.editLink);
+    if (!editLink)
+        return null;
+    return (_jsxs(Button, { className: "btn", "data-shape": "default", "data-variant": "button", href: normalizeEditLink(editLink), target: "_blank", rel: "noreferrer", title: "Edit in WP Admin", children: [pencil, "Edit"] }));
 }
 export class ErrorBoundary extends Component {
     state = {

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

@@ -1 +1 @@
-{"version":3,"file":"AppDataPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/AppDataPanel.tsx"],"names":[],"mappings":"AAMA,wBAAgB,YAAY,gCAM3B;AAED,wBAAgB,UAAU,gCAqBzB"}
+{"version":3,"file":"AppDataPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/AppDataPanel.tsx"],"names":[],"mappings":"AAIA,wBAAgB,YAAY,gCAE3B;AAED,wBAAgB,UAAU,gCAqBzB"}

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

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAppData, useAppDataQueryMonitor } from "../../../hooks/useAppData.js";
 import { JSONInspector } from "../ui/JSONInspector.js";
-import { Panel } from "../ui/Panel.js";
 import { QueryMonitorDisplay } from "../ui/QueryMonitorDisplay.js";
-// import { JsonInspector } from "@rexxars/react-json-inspector"
 //
 export function AppDataPanel() {
-    return (_jsx(Panel, { title: "App", padded: true, id: "app", children: _jsx(AppDetails, {}) }));
+    return _jsx(AppDetails, {});
 }
 export function AppDetails() {
     const appData = useAppData();

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RoutePanel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/RoutePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA8C,MAAM,2BAA2B,CAAA;AAmKlG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,+BAwB5D;AAED,wBAAgB,UAAU,gCAuDzB"}
+{"version":3,"file":"RoutePanel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/panels/RoutePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA8C,MAAM,2BAA2B,CAAA;AAmKlG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,+BAwB5D;AAED,wBAAgB,UAAU,gCAwDzB"}

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRouter, useRouterEvents, useRouterState } from "../../../routing/index.js";
-import { Panel } from "../ui/Panel.js";
+import { PanelWidgets } from "../ui/Panel.js";
 import { Fragment, useEffect } from "react";
-import { withoutHost } from "ufo";
 import { terminal, undo } from "../../icons.js";
 import { Button } from "../ui/Button.js";
 import { Chip, ChipGroup } from "../ui/Chip.js";
 import { JSONInspector } from "../ui/JSONInspector.js";
 import { QueryMonitorDisplay } from "../ui/QueryMonitorDisplay.js";
 import { useTabBar } from "../ui/TabBar.js";
+import { normalizeEditLink } from "../../lib/edit-link.js";
 function RouteDetails(props) {
     const { route } = props;
     const admin = route.meta.admin;
@@ -25,7 +25,7 @@ function RouteDetails(props) {
         }, 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;
+        const actualUrl = normalizeEditLink(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(", ") }))] }))] }));
@@ -59,5 +59,5 @@ export function RoutePanel() {
     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, id: "route", 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))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(PanelWidgets, { children: tabs.tabBar }), 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.map

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

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

@@ -6,7 +6,6 @@ import { usePersistState } from "../../hooks/usePersistState.js";
 import { blocksIcon, code, globeIcon, jumpTo, routesIcon, singleBlockIcon } from "../../icons.js";
 import { Expander } from "../ui/Expander.js";
 import { JSONInspector } from "../ui/JSONInspector.js";
-import { Panel } from "../ui/Panel.js";
 import { FullRouteDetails } from "./RoutePanel.js";
 import { AppDetails } from "./AppDataPanel.js";
 export function StructurePanel() {
@@ -25,7 +24,7 @@ export function StructurePanel() {
     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 }) })] })] }));
+            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-[min(30%,250px)] 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 === "route" && !!selectedNode.route) {
             nodeDetails = _jsx(FullRouteDetails, { route: selectedNode.route });
@@ -50,7 +49,7 @@ export function StructurePanel() {
                                     })] })] })] }));
         }
     }
-    return (_jsx(Panel, { title: "Structure", id: "structure", padded: false, children: _jsxs("div", { className: "flex flex-row h-full", children: [_jsx("div", { className: "overflow-auto border-r border-r-neutral-800 p-2", children: _jsx(StructureNode, { node: root, indent: 0, selectedId: blockId, onSelect: (id) => setBlockId(id) }) }), _jsx("div", { className: "overflow-auto max-w-[500px] flex flex-col gap-2 p-3", children: nodeDetails })] }) }));
+    return (_jsxs("div", { className: "flex flex-1 min-h-0 min-w-0 w-full flex-row", children: [_jsx("div", { className: "min-w-0 overflow-auto border-r border-r-neutral-800 p-2", children: _jsx(StructureNode, { node: root, indent: 0, selectedId: blockId, onSelect: (id) => setBlockId(id) }) }), _jsx("div", { className: "min-w-0 flex-1 overflow-auto flex flex-col gap-2 p-3", children: nodeDetails })] }));
 }
 function StructureNode(props) {
     const node = props.node;

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

@@ -3,6 +3,7 @@ type Panel = {
     label: string;
     icon: ReactNode;
     component: ComponentType;
+    padded: boolean;
 };
 export type DevPanelName = "appData" | "route" | "queries" | "structure";
 export declare const DEV_TOOLS_PANELS: Record<DevPanelName, Panel>;

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

@@ -1 +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"}
+{"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;IACxB,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAA;AAExE,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,EAAE,KAAK,CAyBxD,CAAA"}

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

@@ -4,24 +4,28 @@ import { RoutePanel } from "./RoutePanel.js";
 import { QueriesPanel } from "./QueriesPanel.js";
 import { StructurePanel } from "./StructurePanel.js";
 export const DEV_TOOLS_PANELS = {
-    appData: {
-        label: "App Data",
-        icon: globeIcon,
-        component: AppDataPanel,
+    structure: {
+        label: "Structure",
+        icon: blocksIcon,
+        component: StructurePanel,
+        padded: false,
     },
     route: {
         label: "Route",
         icon: routesIcon,
         component: RoutePanel,
+        padded: true,
     },
     queries: {
         label: "Queries",
         icon: structure,
         component: QueriesPanel,
+        padded: true,
     },
-    structure: {
-        label: "Structure",
-        icon: blocksIcon,
-        component: StructurePanel,
+    appData: {
+        label: "App Data",
+        icon: globeIcon,
+        component: AppDataPanel,
+        padded: true,
     },
 };

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

@@ -1,8 +1,9 @@
-import { ComponentProps } from "react";
-type Props = ComponentProps<"button"> & {
+import { ComponentProps, ReactNode } from "react";
+type Props = ComponentProps<"a"> & {
     shape?: "icon" | "default";
     variant?: "tab" | "button" | "subtle";
     active?: boolean;
+    tooltip?: ReactNode;
 };
 export declare function Button({ active, shape, variant, ...props }: Props): import("react").JSX.Element;
 export {};

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

@@ -1 +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,+BAUjE"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAG3D,KAAK,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACrC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,+BA+CjE"}

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

@@ -1,4 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { createPortal } from "react-dom";
 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 }));
+    const [showTooltip, setShowTooltip] = useState(null);
+    const tooltipText = props.tooltip || props.title;
+    const Tag = (props.href ? "a" : "button");
+    return (_jsxs(_Fragment, { children: [_jsx(Tag, { className: "btn", "data-shape": shape ?? "default", "data-variant": variant ?? "button", "data-active": active ? "" : undefined, ...props, title: undefined, onPointerEnter: (e) => {
+                    props.onPointerEnter?.(e);
+                    const bounds = e.currentTarget.getBoundingClientRect();
+                    setShowTooltip({
+                        x: bounds.x,
+                        y: bounds.y,
+                    });
+                }, onPointerLeave: (e) => {
+                    props.onPointerLeave?.(e);
+                    setShowTooltip(null);
+                } }), showTooltip &&
+                !!tooltipText &&
+                createPortal(_jsx("div", { className: "fixed z-[10000000000] pointer-events-none w-[150px] flex justify-start -translate-y-[calc(100%+5px)]", style: {
+                        left: showTooltip.x,
+                        top: showTooltip.y,
+                    }, children: _jsx("div", { className: "bg-neutral-900 text-tiny text-neutral-200 border border-neutral-600 px-2 py-1 rounded-md max-w-[150px] opacity-80", children: tooltipText }) }), document.getElementById("eddev-ui"))] }));
 }

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

@@ -9,7 +9,7 @@ export function JSONInspector(props) {
         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)] }));
+        return (_jsxs("div", { className: "relative", 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-white/5 p-2 text-inherit resize-none [field-sizing:content] outline-none font-mono text-ui", readOnly: true, value: JSON.stringify(props.data, null, 2) })) : (_jsx("div", { className: "pr-[85px]", children: inspector }))] }));
     }
     else {
         return inspector;

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

@@ -4,14 +4,17 @@ type Size = {
     height: number;
 };
 type Props = {
-    title: string;
-    widgets?: ReactNode;
+    title?: string;
+    header?: ReactNode;
     children: ReactNode;
     padded?: boolean;
     id: string;
     defaultSize?: Size;
     resizeable?: boolean;
 };
+export declare function PanelWidgets(props: {
+    children: ReactNode;
+}): import("react").ReactPortal | null;
 export declare function Panel(props: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAA;AAIzC,KAAK,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAE7C,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;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,WAAW,CAAC,EAAE,IAAI,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,+BA6BjC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/app/lib/devtools/components/ui/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,MAAM,OAAO,CAAA;AAI9E,KAAK,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAE7C,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,WAAW,CAAC,EAAE,IAAI,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sCAG1D;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,+BAkCjC"}

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

@@ -1,10 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from "react";
+import { createContext, useContext, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { usePersistState } from "../../hooks/usePersistState.js";
+const PanelWidgetsContext = createContext(null);
+export function PanelWidgets(props) {
+    const container = useContext(PanelWidgetsContext);
+    return container ? createPortal(props.children, container) : null;
+}
 export function Panel(props) {
     const ref = useRef(null);
+    const [widgetsContainer, setWidgetsContainer] = useState(null);
     const [size, setSize] = usePersistState(`devtools-panel-size-${props.id}`, props.defaultSize ?? null);
-    return (_jsxs("div", { ref: ref, className: "bg-black text-white rounded-md shadow-md border border-neutral-800 max-w-[calc(100vw-16px)] max-h-[calc(100vh-90px)] relative flex flex-col", style: size && props.resizeable !== false ? { width: size.width, height: size.height } : {}, children: [_jsxs("div", { className: "flex-none 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 overscroll-contain flex-1 flex flex-col ${props.padded ? "p-3" : ""}`, children: props.children }), props.resizeable !== false && (_jsxs(_Fragment, { children: [_jsx(ResizeHandle, { panelRef: ref, side: "right", onResize: setSize }), _jsx(ResizeHandle, { panelRef: ref, side: "top", onResize: setSize }), _jsx(ResizeHandle, { panelRef: ref, side: "tr", onResize: setSize })] }))] }));
+    return (_jsx(PanelWidgetsContext.Provider, { value: widgetsContainer, children: _jsxs("div", { ref: ref, className: "bg-black text-white rounded-lg shadow-md border border-neutral-800 max-w-[calc(100vw-16px)] max-h-[calc(100vh-90px)] relative flex flex-col", style: size && props.resizeable !== false ? { width: size.width, height: size.height } : {}, children: [_jsx("div", { className: "flex-none px-3 py-2 border-b border-neutral-800 flex justify-between items-center gap-4 overflow-x-auto eddev-no-scrollbars", children: _jsxs("div", { className: "flex w-full min-w-max gap-4 justify-between", children: [_jsx("div", { className: props.header ? "min-w-0" : "text-heading pt-1", children: props.header ?? props.title }), _jsx("div", { ref: setWidgetsContainer, className: "flex flex-none items-center justify-end gap-2" })] }) }), _jsx("div", { className: `overflow-auto overscroll-contain flex-1 flex flex-col ${props.padded ? "p-3" : ""}`, children: props.children }), props.resizeable !== false && (_jsxs(_Fragment, { children: [_jsx(ResizeHandle, { panelRef: ref, side: "right", onResize: setSize }), _jsx(ResizeHandle, { panelRef: ref, side: "top", onResize: setSize }), _jsx(ResizeHandle, { panelRef: ref, side: "tr", onResize: setSize })] }))] }) }));
 }
 function ResizeHandle(props) {
     let sideClass = "";

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePersistState } from "../../hooks/usePersistState.js";
 import { Button } from "./Button.js";
 export function TabBar(props) {
-    return (_jsx("div", { className: "flex gap-2 flex-none p-2 pb-0", children: props.tabs.map((t) => (_jsxs(Button, { variant: "tab", active: props.activeTab === t.value, onClick: () => props.onTabChange?.(t.value), children: [t.label, t.badge ? _jsx("span", { className: "bg-neutral-200/20 rounded-md px-1", children: t.badge }) : null] }, t.value))) }));
+    return (_jsx("div", { className: "flex gap-2 flex-none", children: props.tabs.map((t) => (_jsxs(Button, { variant: "tab", active: props.activeTab === t.value, onClick: () => props.onTabChange?.(t.value), children: [t.label, t.badge ? _jsx("span", { className: "bg-neutral-200/20 rounded-md px-1", children: t.badge }) : null] }, t.value))) }));
 }
 export function useTabBar(id, tabs) {
     const [tab, setTab] = usePersistState(`tab:${id}`, tabs[0].value);

package/dist/app/lib/devtools/icons.d.ts

@@ -22,4 +22,7 @@ export declare const query: import("react").JSX.Element;
 export declare const singleBlockIcon: import("react").JSX.Element;
 export declare const globeIcon: import("react").JSX.Element;
 export declare const jumpTo: import("react").JSX.Element;
+export declare const pencil: import("react").JSX.Element;
+export declare const gridOn: import("react").JSX.Element;
+export declare const gridOff: import("react").JSX.Element;
 //# sourceMappingURL=icons.d.ts.map

package/dist/app/lib/devtools/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/app/lib/devtools/icons.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,6BAShB,CAAA;AAED,eAAO,MAAM,UAAU,6BAItB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,OAAO,6BAInB,CAAA;AAED,eAAO,MAAM,UAAU,6BAItB,CAAA;AAED,eAAO,MAAM,UAAU,6BAItB,CAAA;AAED,eAAO,MAAM,SAAS,6BAcrB,CAAA;AAED,eAAO,MAAM,IAAI,6BAKhB,CAAA;AAED,eAAO,MAAM,KAAK,6BA0BjB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,UAAU,6BAKtB,CAAA;AAED,eAAO,MAAM,WAAW,6BAKvB,CAAA;AAED,eAAO,MAAM,IAAI,6BAkBhB,CAAA;AAED,eAAO,MAAM,IAAI,6BAKhB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,KAAK,6BAIjB,CAAA;AAED,eAAO,MAAM,QAAQ,6BAIpB,CAAA;AAED,eAAO,MAAM,IAAI,6BAIhB,CAAA;AAED,eAAO,MAAM,KAAK,6BAIjB,CAAA;AAED,eAAO,MAAM,eAAe,6BAI3B,CAAA;AAED,eAAO,MAAM,SAAS,6BAIrB,CAAA;AAED,eAAO,MAAM,MAAM,6BAIlB,CAAA"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/app/lib/devtools/icons.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,6BAShB,CAAA;AAED,eAAO,MAAM,UAAU,6BAItB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,OAAO,6BAInB,CAAA;AAED,eAAO,MAAM,UAAU,6BAItB,CAAA;AAED,eAAO,MAAM,UAAU,6BAItB,CAAA;AAED,eAAO,MAAM,SAAS,6BAcrB,CAAA;AAED,eAAO,MAAM,IAAI,6BAKhB,CAAA;AAED,eAAO,MAAM,KAAK,6BA0BjB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,UAAU,6BAKtB,CAAA;AAED,eAAO,MAAM,WAAW,6BAKvB,CAAA;AAED,eAAO,MAAM,IAAI,6BAkBhB,CAAA;AAED,eAAO,MAAM,IAAI,6BAKhB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,KAAK,6BAKjB,CAAA;AAED,eAAO,MAAM,KAAK,6BAIjB,CAAA;AAED,eAAO,MAAM,QAAQ,6BAIpB,CAAA;AAED,eAAO,MAAM,IAAI,6BAIhB,CAAA;AAED,eAAO,MAAM,KAAK,6BAIjB,CAAA;AAED,eAAO,MAAM,eAAe,6BAI3B,CAAA;AAED,eAAO,MAAM,SAAS,6BAIrB,CAAA;AAED,eAAO,MAAM,MAAM,6BAIlB,CAAA;AAED,eAAO,MAAM,MAAM,6BAIlB,CAAA;AAED,eAAO,MAAM,MAAM,6BAIlB,CAAA;AAED,eAAO,MAAM,OAAO,6BAInB,CAAA"}

package/dist/app/lib/devtools/icons.js

@@ -23,3 +23,6 @@ export const query = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height:
 export const singleBlockIcon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#e3e3e3", children: _jsx("path", { d: "M480-68 120-275v-410l360-207 360 207v410L480-68Zm-40-389v274l40 23 40-23v-274l240-139v-42l-43-25-237 137-237-137-43 25v42l240 139Z" }) }));
 export const globeIcon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#e3e3e3", children: _jsx("path", { d: "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-7-.5-14.5T799-507q-5 29-27 48t-52 19h-80q-33 0-56.5-23.5T560-520v-40H400v-80q0-33 23.5-56.5T480-720h40q0-23 12.5-40.5T563-789q-20-5-40.5-8t-42.5-3q-134 0-227 93t-93 227h200q66 0 113 47t47 113v40H400v110q20 5 39.5 7.5T480-160Z" }) }));
 export const jumpTo = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#e3e3e3", children: _jsx("path", { d: "M440-440v-160h80v80h80v80H440Zm280 0v-80h80v-80h80v160H720ZM440-720v-160h160v80h-80v80h-80Zm360 0v-80h-80v-80h160v160h-80ZM136-80l-56-56 224-224H120v-80h320v320h-80v-184L136-80Z" }) }));
+export const pencil = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#e3e3e3", children: _jsx("path", { d: "M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" }) }));
+export const gridOn = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#e3e3e3", children: _jsx("path", { d: "M320-160v-160H160v-80h160v-160H160v-80h160v-160h80v160h160v-160h80v160h160v80H640v160h160v80H640v160h-80v-160H400v160h-80Zm80-240h160v-160H400v160Z" }) }));
+export const gridOff = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#e3e3e3", children: _jsx("path", { d: "m753-320-80-80h127v80h-47ZM640-433 433-640h127v-160h80v160h160v80H640v127ZM400-673l-80-80v-47h80v127ZM791-56 640-207v47h-80v-127l-33-33H400v160h-80v-160H160v-80h160v-127l-33-33H160v-80h47L56-791l56-57 736 736-57 56Z" }) }));

package/dist/app/lib/devtools/lib/edit-link.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeEditLink(editLink: string): string;
+//# sourceMappingURL=edit-link.d.ts.map

package/dist/app/lib/devtools/lib/edit-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-link.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/devtools/lib/edit-link.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,UAEjD"}

package/dist/app/lib/devtools/lib/edit-link.js

@@ -0,0 +1,4 @@
+import { withoutHost } from "ufo";
+export function normalizeEditLink(editLink) {
+    return env.serverless ? withoutHost(editLink) : editLink;
+}

package/dist/app/lib/devtools/tailwind.config.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
         };
         fontSize: {
             ui: [string, string];
+            logo: [string, string];
             heading: [string, string];
             tiny: [string, string];
         };

package/dist/app/lib/devtools/tailwind.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.config.d.ts","sourceRoot":"","sources":["../../../../src/app/lib/devtools/tailwind.config.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBA2BkB"}
+{"version":3,"file":"tailwind.config.d.ts","sourceRoot":"","sources":["../../../../src/app/lib/devtools/tailwind.config.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBA4BkB"}

package/dist/app/lib/devtools/tailwind.config.js

@@ -1,7 +1,7 @@
 // @ts-ignore
 export default {
     darkMode: [],
-    important: ".eddev-ui",
+    important: "#eddev-ui",
     // @ts-ignore
     content: [__dirname + "/**/*.{js,jsx,ts,tsx}"],
     theme: {
@@ -11,6 +11,7 @@ export default {
         },
         fontSize: {
             ui: ["12px", "16px"],
+            logo: ["16px", "18px"],
             heading: ["18px", "20px"],
             tiny: ["10px", "14px"],
         },

package/dist/node/cli/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.3.20";
+export declare const VERSION = "2.3.22";
 //# sourceMappingURL=version.d.ts.map

package/dist/node/cli/version.js

@@ -1 +1 @@
-export const VERSION = "2.3.20";
+export const VERSION = "2.3.22";

package/dist/node/types/block-type.d.ts

@@ -47,19 +47,11 @@ export declare const BlockMetaSchema: z.ZodObject<{
         anchor?: boolean;
         listView?: boolean;
         align?: boolean | ("left" | "right" | "full")[];
-        background?: {
-            backgroundImage: boolean;
-            backgroundSize: boolean;
-        };
     } | undefined, undefined, z.core.$ZodTypeInternals<{
         visibility?: booean;
         anchor?: boolean;
         listView?: boolean;
         align?: boolean | ("left" | "right" | "full")[];
-        background?: {
-            backgroundImage: boolean;
-            backgroundSize: boolean;
-        };
     } | undefined, undefined>>>;
     templatePart: z.ZodOptional<z.ZodObject<{
         area: z.ZodString;

package/dist/node/types/block-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-type.d.ts","sourceRoot":"","sources":["../../../src/node/types/block-type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAEvB,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAA;AAMrE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAuGk4B,MAAO;;;;;;;;;qBAAP,MAAO;;;;;;;;;;;;;iBAhEn6B,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAA;AAE3D,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAA;AAEtE,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,UAkBjD;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,aAAa,UA6B5D"}
+{"version":3,"file":"block-type.d.ts","sourceRoot":"","sources":["../../../src/node/types/block-type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAEvB,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAA;AAMrE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAuGk4B,MAAO;;;;;qBAAP,MAAO;;;;;;;;;iBAhEn6B,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAA;AAE3D,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAA;AAEtE,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,UAkBjD;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,aAAa,UA6B5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "2.3.20",
+  "version": "2.3.22",
   "description": "",
   "main": "index.js",
   "type": "module",

package/types.meta.d.ts

@@ -136,10 +136,6 @@ declare global {
        * 
        */
       align?: boolean | ('left' | 'right' | 'full')[]
-      background?: {
-        backgroundImage: boolean,
-        backgroundSize: boolean
-      }
     },
 
     /**

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

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

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

@@ -1 +0,0 @@
-{"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,30 +0,0 @@
-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(() => {
-        const handleKeyDown = (e) => {
-            if (e.key === "g" && e.ctrlKey) {
-                setEnabled((e) => !e);
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => {
-            window.removeEventListener("keydown", handleKeyDown);
-        };
-    }, []);
-    const cols = [];
-    for (let i = 0; i < 12; i++) {
-        cols.push(_jsx("div", { style: { height: "100%", backgroundColor: "rgba(255,0,0,0.1)" } }, i));
-    }
-    if (env.client) {
-        useLayoutEffect(() => {
-            document.documentElement.classList.toggle("debug-grid", enabled);
-        }, [enabled]);
-    }
-    if (!enabled)
-        return null;
-    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);
-}