eddev 2.0.0-beta.4 → 2.0.0-beta.40

package/dist/app/entry/MetaTags.d.ts

@@ -0,0 +1,7 @@
+import { RouteMetaTag } from "../lib/routing";
+type Props = {
+    debugKey?: string;
+    tags: RouteMetaTag[];
+};
+export declare function MetaTags(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/app/entry/MetaTags.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export function MetaTags(props) {
+    return (_jsx(_Fragment, { children: props.tags?.map((tag, i) => {
+            const Tag = tag.tagName;
+            const tagProps = Array.isArray(tag.attributes) ? {} : { ...tag.attributes };
+            if (tag.tagName === "title") {
+                tagProps.children = tag.inner ?? "";
+            }
+            else if (tag.tagName === "script" || !!tag.inner) {
+                tagProps.dangerouslySetInnerHTML = { __html: tag.inner ?? "" };
+            }
+            if (tagProps.async === "") {
+                tagProps.async = true;
+            }
+            return _jsx(Tag, { "data-test": props.debugKey + "_" + i, ...tagProps }, i);
+        }) }));
+}

package/dist/app/entry/boot-admin.d.ts

@@ -0,0 +1 @@
+export default function bootAdmin(): void;

package/dist/app/entry/{main.admin.js → boot-admin.js}

@@ -1,8 +1,6 @@
-import "@manifest/admin";
-import { installFieldTypes } from "../lib/admin/installFieldTypes";
-import { runWidgets } from "../lib/admin/runWidgets";
-import { installEDGutenbergHooks } from "../lib/blocks/editor/installGutenbergHooks";
-import "@manifest/blocks";
+import { installFieldTypes } from "../lib/admin/installFieldTypes.js";
+import { runWidgets } from "../lib/admin/runWidgets.js";
+import { installEDGutenbergHooks } from "../lib/blocks/editor/installGutenbergHooks.js";
 export default function bootAdmin() {
     installEDGutenbergHooks();
     installFieldTypes();

package/dist/app/entry/spa-root.d.ts

@@ -0,0 +1 @@
+export declare function SPARoot(): import("react/jsx-runtime").JSX.Element;

package/dist/app/entry/{Root.js → spa-root.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter } from "../lib/routing/components/BrowserRouter";
-import { getQueryClient } from "../utils/query-client";
-import { DevUILoader } from "../lib/devtools/loader";
+import { BrowserRouter } from "../lib/routing/components/BrowserRouter.js";
+import { getQueryClient } from "../utils/query-client.js";
+import { DevUILoader } from "../lib/devtools/loader.js";
 import { Suspense } from "react";
-export function Root() {
+export function SPARoot() {
     return (_jsxs(QueryClientProvider, { client: getQueryClient(), children: [_jsx(Suspense, { children: _jsx(BrowserRouter, {}) }), _jsx(DevUILoader, {})] }));
 }

package/dist/app/entry/ssr-root-client.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { RouteMetaTag } from "../lib/routing/types.js";
+export declare function SSRClientRoot(props: {
+    assets: ReactNode;
+    metaTags: RouteMetaTag[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/app/entry/ssr-root-client.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Suspense, useRef } from "react";
+import { getQueryClient } from "../utils/query-client.js";
+import { BrowserRouter } from "../lib/routing/components/BrowserRouter.js";
+import { DevUILoader } from "../lib/devtools/loader.js";
+import { MetaTags } from "./MetaTags.js";
+import { useRouteMeta } from "../lib/routing/hooks/useRouteMeta.js";
+export function SSRClientRoot(props) {
+    const router = useRef(null);
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("link", { rel: "icon", href: "/favicon.ico" }), _jsx(DynamicMetaTags, { tags: props.metaTags, router: router }), props.assets] }), _jsx("body", { children: _jsxs(QueryClientProvider, { client: getQueryClient(), children: [_jsx(Suspense, { children: _jsx(BrowserRouter, { routerRef: router }) }), _jsx(DevUILoader, {})] }) })] }));
+}
+function DynamicMetaTags(props) {
+    const data = useRouteMeta();
+    return _jsx(MetaTags, { tags: data.tags ?? [] });
+}

package/dist/app/entry/ssr-root.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import type { RouteData, RouteMetaTag } from "../lib/routing/types.js";
+import type { RouteLoader } from "../lib/routing/loader.js";
+export declare function SSRRoot(props: {
+    pathname: string;
+    initialData: RouteData;
+    assets: ReactNode;
+    loader: RouteLoader;
+    metaTags: RouteMetaTag[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/app/entry/ssr-root.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { getQueryClient } from "../utils/query-client.js";
+import { SSRRouter } from "../lib/routing/components/SSRRouter.js";
+import { getRouteMeta, normalizeRoute } from "../lib/routing/utils.js";
+import { MetaTags } from "./MetaTags.js";
+export function SSRRoot(props) {
+    const loader = props.loader;
+    loader.setAppData(props.initialData.appData.data);
+    loader.populateRouteData(props.pathname, props.initialData);
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("link", { rel: "icon", href: "/favicon.ico" }), _jsx(MetaTags, { tags: props.metaTags }), props.assets] }), _jsx("body", { children: _jsx(QueryClientProvider, { client: getQueryClient(), children: _jsx(Suspense, { children: _jsx(SSRRouter, { loader: loader, route: normalizeRoute({
+                                id: "initial",
+                                component: loader.getRouteComponent(props.initialData.view),
+                                key: "",
+                                props: props.initialData.viewData.data,
+                                view: props.initialData.view,
+                                search: "",
+                                pathname: props.pathname,
+                                query: {},
+                                hash: "",
+                                meta: getRouteMeta(props.initialData),
+                            }) }) }) }) })] }));
+}

package/dist/app/lib/admin/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./defineField";
-export * from "./defineWidget";
+export * from "./defineField.js";
+export * from "./defineWidget.js";

package/dist/app/lib/admin/index.js

@@ -1,2 +1,2 @@
-export * from "./defineField";
-export * from "./defineWidget";
+export * from "./defineField.js";
+export * from "./defineWidget.js";

package/dist/app/lib/admin/installFieldTypes.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import * as ReactDOM from "react-dom/client";
-import { adminManifestReader } from "../internal";
+import { adminManifestReader } from "../internal/read-admin-manifest.js";
 export function installFieldTypes() {
     // @ts-ignore
     const acf = window.acf;

package/dist/app/lib/admin/runWidgets.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import * as ReactDOM from "react-dom/client";
-import { adminManifestReader } from "../internal";
+import { adminManifestReader } from "../internal/read-admin-manifest.js";
 export function runWidgets() {
     const elements = document.querySelectorAll("[data-widget]");
     setTimeout(() => {

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, createContext, memo, useContext, useMemo } from "react";
-import { blockManifestReader } from "../internal/read-block-manifest";
-import { ErrorBoundaryFrontend } from "./ErrorBoundaryFrontend";
-import { InlineEditingContextProvider, ReadonlyInlineEditingProvider } from "./inline-editing";
-import { addBlockMetadata } from "./block-utils";
+import { blockManifestReader } from "../internal/read-block-manifest.js";
+import { ErrorBoundaryFrontend } from "./ErrorBoundaryFrontend.js";
+import { InlineEditingContextProvider, ReadonlyInlineEditingProvider } from "./inline-editing.js";
+import { addBlockMetadata } from "./block-utils.js";
 export const BlocksContext = createContext(undefined);
 /**
  * Render a set of Gutenberg blocks

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

@@ -1,5 +1,5 @@
 import { ElementType } from "react";
-import { InlineValueStore } from "./inline-editing";
+import { InlineValueStore } from "./inline-editing.js";
 export type InlineTextValueStore = InlineValueStore<string>;
 type Props<T extends ElementType> = {
     /** Specify a tag name or React component */

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRouter } from "../routing";
-import { useBlockAppender, useBlockContext, useValueStore } from "./inline-editing";
+import { useRouter } from "../routing/hooks/useRouter.js";
+import { useBlockAppender, useBlockContext, useValueStore } from "./inline-editing.js";
 export function EditableText({ id, as, appendOnEnter, store, ...props }) {
     if (env.admin) {
         const readOnly = useBlockContext()?.readonly;
         if (!readOnly) {
             const [value, setValue] = useValueStore(store ?? id);
             const appendBlocks = useBlockAppender();
-            return (_jsx(wp.blockEditor.RichText, { ...props, tagName: as, value: value || "", onChange: setValue, disableLineBreaks: props.disableLineBreaks, onKeyDownCapture: (e) => {
+            return (_jsx(wp.blockEditor.RichText, { ...props, tagName: as, value: value || "", onChange: setValue, inlineToolbar: props.inlineToolbar, disableLineBreaks: props.disableLineBreaks, onKeyDownCapture: (e) => {
                     if (e.key === "Enter" && appendOnEnter && appendBlocks) {
                         appendBlocks([
                             wp.blocks.createBlock(typeof appendOnEnter === "string" ? appendOnEnter : "core/paragraph"),

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

@@ -9,6 +9,7 @@ export class ErrorBoundaryFrontend extends Component {
         return { hasError: true, error: err };
     }
     componentDidCatch(error, errorInfo) {
+        console.log("Caught error:", error, errorInfo);
         console.error("Uncaught error:", error, errorInfo);
     }
     render() {

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

@@ -1,10 +1,20 @@
 import { FunctionComponent } from "react";
-import { ContentBlockLayoutProps } from "./ContentBlocks";
-import { BlockTemplate } from "./editor/block-templates";
+import { ContentBlockLayoutProps } from "./ContentBlocks.js";
+import { BlockTemplate } from "./editor/block-templates.js";
 type AppenderConfig = {
-    type: "default" | "button" | FunctionComponent<any>;
+    type: "default" | "button" | CustomBlockAppender;
     className?: string;
 };
+export type CustomBlockAppender = FunctionComponent<{
+    onToggle: () => void;
+    disabled: boolean;
+    isOpen: boolean;
+    blockTitle: string;
+    hasSingleBlockType: boolean;
+}>;
+export declare function createAppender(comp: CustomBlockAppender): {
+    type: CustomBlockAppender;
+};
 type InnerBlocksProps = {
     /** A list of allowed blocks, and/or block tags. */
     allowedBlocks?: (ChildBlockTypeName | BlockTagName)[];

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

@@ -1,15 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ContentBlocks } from "./ContentBlocks";
-import { transformBlockTemplate } from "./editor/block-templates";
-import { blocksByTag } from "./editor/blocks-by-tag";
-import { useBlockContext, useInnerBlocks } from "./inline-editing";
+import { ContentBlocks } from "./ContentBlocks.js";
+import { transformBlockTemplate } from "./editor/block-templates.js";
+import { blocksByTag } from "./editor/blocks-by-tag.js";
+import { useBlockContext, useInnerBlocks } from "./inline-editing.js";
 const Appender = (props) => {
     const clientId = useBlockContext()?.block[1].clientId;
     if (props.type === "button") {
         return _jsx(wp.blockEditor.ButtonBlockAppender, { className: props.className, rootClientId: clientId });
     }
     else if (typeof props.type === "function") {
-        return props.type({});
+        const Type = props.type;
+        return (_jsx(wp.blockEditor.Inserter, { renderToggle: (p) => {
+                return _jsx(Type, { ...p });
+            }, rootClientId: clientId }));
     }
     else {
         return (_jsx(wp.blockEditor.DefaultBlockAppender
@@ -19,6 +22,11 @@ const Appender = (props) => {
             className: props.className, rootClientId: clientId, lastBlockClientId: clientId }));
     }
 };
+export function createAppender(comp) {
+    return {
+        type: comp,
+    };
+}
 /**
  * Allows child blocks to be added to the current block context.
  */

package/dist/app/lib/blocks/block-utils.d.ts

@@ -1,4 +1,4 @@
-import { ContentBlock } from "./ContentBlocks";
+import { ContentBlock } from "./ContentBlocks.js";
 /**
  * Returns some very basic info about blocks in the project.
  * This is purposely lean, to avoid bloated info.
@@ -12,7 +12,7 @@ export declare function getPublicBlockInfo(): {
  *
  * Note that this function mutates the existing block, adding new properties.
  */
-export declare function addBlockMetadata(blocks: ContentBlock[]): ContentBlock[];
+export declare function addBlockMetadata(blocks: ContentBlock[] | null | undefined): ContentBlock[];
 export declare function getBlockMetadata(blockName: string): {
     slug: string;
     tags?: undefined;

package/dist/app/lib/blocks/block-utils.js

@@ -1,4 +1,4 @@
-import { blockManifestReader } from "../internal";
+import { blockManifestReader } from "../internal/read-block-manifest.js";
 /**
  * Returns some very basic info about blocks in the project.
  * This is purposely lean, to avoid bloated info.
@@ -13,7 +13,7 @@ export function getPublicBlockInfo() {
  * Note that this function mutates the existing block, adding new properties.
  */
 export function addBlockMetadata(blocks) {
-    const out = blocks;
+    const out = (blocks ?? []);
     const infos = getPublicBlockInfo();
     for (let block of out) {
         const info = infos[block.blockName];

package/dist/app/lib/blocks/editor/EditorSupport.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { createContext, Suspense, useContext } from "react";
-import { getQueryClient } from "../../../utils/query-client";
-import { blockManifestReader } from "../../internal";
-import { ErrorBoundaryEditor } from "./ErrorBoundaryEditor";
+import { getQueryClient } from "../../../utils/query-client.js";
+import { blockManifestReader } from "../../internal/read-block-manifest.js";
+import { ErrorBoundaryEditor } from "./ErrorBoundaryEditor.js";
 export const BlockContext = createContext(undefined);
 export function EditableBlock({ payload }) {
     const block = useContext(BlockContext);

package/dist/app/lib/blocks/editor/editor-config.d.ts

@@ -1,4 +1,4 @@
-import { BlockTemplate } from "./block-templates";
+import { BlockTemplate } from "./block-templates.js";
 export type EditorConfigItem = {
     /** Optionally indicate that the post title field should be hidden. Use then when your header template includes a post title editor already. */
     hideTitle?: boolean;

package/dist/app/lib/blocks/editor/editor-config.js

@@ -1,5 +1,5 @@
 import { proxy } from "valtio";
-import { resolveAcfBlockName, transformBlockTemplate } from "./block-templates";
+import { resolveAcfBlockName, transformBlockTemplate } from "./block-templates.js";
 export const editorConfigStore = proxy({
     config: null,
     currentBlocksConfig: null,

package/dist/app/lib/blocks/editor/installGutenbergHooks.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { InlineEditingContextProvider } from "../inline-editing";
-import { BlockContext, EditableBlock } from "./EditorSupport";
-import { blocksByTag } from "./blocks-by-tag";
-import { editorConfigStore, getEditingPostInfo, watchEditorTemplate } from "./editor-config";
+import { InlineEditingContextProvider } from "../inline-editing.js";
+import { BlockContext, EditableBlock } from "./EditorSupport.js";
+import { blocksByTag } from "./blocks-by-tag.js";
+import { editorConfigStore, getEditingPostInfo, watchEditorTemplate } from "./editor-config.js";
 import { useSnapshot } from "valtio";
-import { getBlockMetadata } from "../block-utils";
+import { getBlockMetadata } from "../block-utils.js";
 function listenForHandleResize() {
     let interval = setInterval(() => {
         let viewportTarget = document.querySelector(".interface-interface-skeleton__content");

package/dist/app/lib/blocks/editor/usePostEditor.d.ts

@@ -1,4 +1,4 @@
-import { InlineValueStore } from "../inline-editing";
+import { InlineValueStore } from "../inline-editing.js";
 export declare function usePostEditor(): {
     post: any;
     updatePost(update: any): void;

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

@@ -1,9 +1,9 @@
-export * from "./ContentBlocks";
-export * from "./EditableText";
-export * from "./InnerBlocks";
-export * from "./defineBlock";
-export * from "./editor/controls";
-export * from "./editor/usePostEditor";
-export * from "./block-utils";
-export { defineEditorConfig } from "./editor/editor-config";
-export { useBlockContext, useInlineEditableValue, useInnerBlocks, useTemplate } from "./inline-editing";
+export * from "./ContentBlocks.js";
+export * from "./EditableText.js";
+export * from "./InnerBlocks.js";
+export * from "./defineBlock.js";
+export * from "./editor/controls.js";
+export * from "./editor/usePostEditor.js";
+export * from "./block-utils.js";
+export { defineEditorConfig } from "./editor/editor-config.js";
+export { useBlockContext, useInlineEditableValue, useInnerBlocks, useTemplate } from "./inline-editing.js";

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

@@ -1,9 +1,9 @@
-export * from "./ContentBlocks";
-export * from "./EditableText";
-export * from "./InnerBlocks";
-export * from "./defineBlock";
-export * from "./editor/controls";
-export * from "./editor/usePostEditor";
-export * from "./block-utils";
-export { defineEditorConfig } from "./editor/editor-config";
-export { useBlockContext, useInlineEditableValue, useInnerBlocks, useTemplate } from "./inline-editing";
+export * from "./ContentBlocks.js";
+export * from "./EditableText.js";
+export * from "./InnerBlocks.js";
+export * from "./defineBlock.js";
+export * from "./editor/controls.js";
+export * from "./editor/usePostEditor.js";
+export * from "./block-utils.js";
+export { defineEditorConfig } from "./editor/editor-config.js";
+export { useBlockContext, useInlineEditableValue, useInnerBlocks, useTemplate } from "./inline-editing.js";

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

@@ -1,4 +1,4 @@
-import { ContentBlock } from "./ContentBlocks";
+import { ContentBlock } from "./ContentBlocks.js";
 import { PropsWithChildren } from "react";
 type Attributes = Record<string, any>;
 export type InlineValueStore<T> = [value: T, setValue: (value: T) => void];

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-import { usePostEditor } from "./editor/usePostEditor";
-import { useRoute } from "../routing";
-import { addBlockMetadata } from "./block-utils";
+import { createContext, useContext, useMemo } from "react";
+import { usePostEditor } from "./editor/usePostEditor.js";
+import { useRoute } from "../routing/index.js";
+import { addBlockMetadata } from "./block-utils.js";
 const InlineEditingContext = createContext(undefined);
 export function InlineEditingContextProvider(props) {
     const parentContext = useContext(InlineEditingContext);
-    addBlockMetadata(props.innerBlocks);
+    useMemo(() => {
+        addBlockMetadata(props.innerBlocks ?? []);
+    }, [props.innerBlocks]);
     return (_jsx(InlineEditingContext.Provider, { value: {
             values: props.values,
             innerBlocks: props.innerBlocks,

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

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useTailwindConfig } from "../hooks/useTailwind.js";
 import { usePersistState } from "../hooks/usePersistState.js";
+import { useTailwindConfig } from "../hooks/useTailwind.js";
 function parseBreakpointMin(breakpoint) {
     return parseInt(breakpoint);
 }
@@ -48,9 +48,10 @@ export function BreakpointIndicator() {
             ...screen,
             max: arr[i + 1] ? arr[i + 1].min - 1 : undefined,
         }));
-    }, [tw?.theme?.screens]);
-    const maxSize = screens[screens.length - 1].min;
+    }, [tw?.theme?.screens, !!tw]);
     useEffect(() => {
+        if (!tw)
+            return;
         const update = () => {
             setWidth(window.innerWidth);
             setActiveSize(screens.findLastIndex((screen) => window.innerWidth >= screen.min));
@@ -58,7 +59,8 @@ export function BreakpointIndicator() {
         update();
         window.addEventListener("resize", update);
         return () => window.removeEventListener("resize", update);
-    }, [screens]);
+    }, [screens, !!tw]);
+    const maxSize = screens[screens.length - 1]?.min;
     const screen = screens[activeSize];
     const globalProgress = width / maxSize;
     return (_jsx("div", { ref: ref, "data-breakpoint": true, className: "fixed left-2 bottom-2 z-[999999999999999]", 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) => {

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

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../../../../../css/devtools.css";
-import { BreakpointIndicator } from "./BreakpointIndicator";
+import { BreakpointIndicator } from "./BreakpointIndicator.js";
+import { GridIndicator } from "./GridIndicator";
 export default function DevUI() {
-    return (_jsx("div", { className: "eddev-ui", children: _jsx(BreakpointIndicator, {}) }));
+    return (_jsxs("div", { className: "eddev-ui", children: [_jsx(BreakpointIndicator, {}), _jsx(GridIndicator, {})] }));
 }

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

@@ -0,0 +1 @@
+export declare function GridIndicator(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { usePersistState } from "../hooks/usePersistState.js";
+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)" } }));
+    }
+    if (!enabled)
+        return null;
+    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 999999999, pointerEvents: "none" }, children: _jsx("div", { className: "grid-auto", style: { height: "100%" }, children: cols }) }));
+}

package/dist/app/lib/devtools/dev-tools-store.d.ts

@@ -0,0 +1,9 @@
+import { Config as TailwindConfig } from "tailwindcss";
+type Store = {
+    loadTailwindConfig: () => void;
+    tailwindConfig: TailwindConfig | null;
+};
+export declare const devToolsStore: Store & {
+    set<K extends keyof Store>(key: K, value: Store[K]): void;
+};
+export {};

package/dist/app/lib/devtools/dev-tools-store.js

@@ -0,0 +1,8 @@
+import { proxy, ref } from "valtio";
+export const devToolsStore = proxy({
+    tailwindConfig: null,
+    loadTailwindConfig() { },
+    set(key, value) {
+        devToolsStore[key] = (value ? ref(value) : value);
+    },
+});

package/dist/app/lib/devtools/hooks/usePersistState.d.ts

@@ -1 +1 @@
-export declare function usePersistState<T>(id: string, initial: T): [T, (value: T) => void];
+export declare function usePersistState<T>(id: string, initial: T): [T, (value: T | ((current: T) => T)) => void];

package/dist/app/lib/devtools/hooks/usePersistState.js

@@ -24,8 +24,17 @@ export function usePersistState(id, initial) {
     return [
         value,
         (value) => {
-            set(id, value);
-            setValue(value);
+            if (typeof value === "function") {
+                return setValue((cur) => {
+                    const next = value(cur);
+                    set(id, next);
+                    return next;
+                });
+            }
+            else {
+                set(id, value);
+                setValue(value);
+            }
         },
     ];
 }