@rnaga/wp-next-ui 1.0.1

package/Link.d.ts

@@ -0,0 +1,6 @@
+import { Link as MuiLink } from "@mui/material";
+import { ReactNode } from "react";
+export declare const Link: (props: Parameters<typeof MuiLink>[0] & {
+    children: ReactNode;
+} & Record<string, any>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Link.d.ts.map

package/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../src/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,IAAI,GACf,OAAO,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,MAAM,CACnE,MAAM,EACN,GAAG,CACJ,4CAwBJ,CAAC"}

package/Link.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link as MuiLink } from "@mui/material";
+export const Link = (props) => {
+    const { children, sx, component, ...rest } = props;
+    return (_jsx(MuiLink, { ...rest, underline: "none", component: component || "a", sx: {
+            display: "inline",
+            p: 0,
+            m: 0,
+            cursor: "pointer",
+            "&:hover": {
+                backgroundColor: (theme) => theme.palette.action.hover,
+            },
+            ...sx,
+        }, children: children }));
+};

package/LinkCopy.d.ts

@@ -0,0 +1,6 @@
+export declare const LinkCopy: (props: {
+    link: string;
+    showIcon: boolean;
+    size?: "small" | "medium" | "large";
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LinkCopy.d.ts.map

package/LinkCopy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCopy.d.ts","sourceRoot":"","sources":["../src/LinkCopy.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ,GAAI,OAAO;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,4CA4BA,CAAC"}

package/LinkCopy.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Link } from "./Link";
+import CheckIcon from "@mui/icons-material/Check";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { Typography } from "./Typography";
+export const LinkCopy = (props) => {
+    const { link, showIcon = true, size = "small" } = props;
+    const [copied, setCopied] = useState(false);
+    return copied ? (showIcon ? (_jsx(CheckIcon, { fontSize: size })) : (_jsx(Typography, { size: size, color: "success", children: "Copied" }))) : (_jsx(_Fragment, { children: _jsx(Link, { fontSize: size, onClick: () => {
+                navigator.clipboard.writeText(link);
+                setCopied(true);
+                setTimeout(() => {
+                    setCopied(false);
+                }, 1000);
+            }, children: showIcon ? _jsx(ContentCopyIcon, {}) : "Copy URL" }) }));
+};

package/Loading.d.ts

@@ -0,0 +1,7 @@
+import { SxProps } from "@mui/material";
+export declare const Loading: (props: {
+    children?: React.ReactNode;
+    loading: boolean;
+    sx?: SxProps;
+}) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode>> | import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Loading.d.ts.map

package/Loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../src/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7D,eAAO,MAAM,OAAO,GAAI,OAAO;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,sUA+CA,CAAC"}

package/Loading.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, LinearProgress } from "@mui/material";
+export const Loading = (props) => {
+    const { children, loading } = props;
+    if (!loading) {
+        return children;
+    }
+    return (_jsx(Box, { sx: {
+            ...props.sx,
+            width: "inherit",
+            height: "inherit",
+            position: "relative",
+        }, children: _jsxs(_Fragment, { children: [_jsx(Box, { sx: {
+                        position: "absolute",
+                        zIndex: 100,
+                        top: 0,
+                        width: "100%",
+                    }, children: _jsx(Box, { sx: {
+                            width: "100%",
+                        }, children: _jsx(LinearProgress, {}) }) }), _jsx(Box, { sx: {
+                        position: "absolute",
+                        zIndex: 100,
+                        left: 0,
+                        top: 0,
+                        width: "100%",
+                        height: "100%",
+                        opacity: "30%",
+                    } })] }) }));
+};

package/LoadingBox.d.ts

@@ -0,0 +1,12 @@
+import { SxProps } from "@mui/material";
+export declare const LoadingBox: (props: {
+    children?: React.ReactNode;
+    loading: boolean;
+    size?: "small" | "medium";
+    sx?: SxProps;
+    slotSxProps?: {
+        innerBox?: SxProps;
+        progress?: SxProps;
+    };
+}) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode>> | import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoadingBox.d.ts.map

package/LoadingBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBox.d.ts","sourceRoot":"","sources":["../src/LoadingBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,OAAO,EAAE,MAAM,eAAe,CAAC;AAE/D,eAAO,MAAM,UAAU,GAAI,OAAO;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH,sUA+CA,CAAC"}

package/LoadingBox.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CircularProgress } from "@mui/material";
+export const LoadingBox = (props) => {
+    const { children, loading, size = "small", sx, slotSxProps } = props;
+    if (!loading) {
+        return children;
+    }
+    return (_jsxs(Box, { sx: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            minHeight: size === "medium" ? 24 : 16, // ensure some height for spinner
+            ...sx,
+        }, children: [_jsx(Box, { sx: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: size === "medium" ? 24 : 16,
+                    height: size === "medium" ? 24 : 16,
+                    ...slotSxProps?.innerBox,
+                }, children: _jsx(CircularProgress, { size: size === "medium" ? 24 : 16, sx: {
+                        ...slotSxProps?.progress,
+                    } }) }), _jsx(Box, { sx: {
+                    opacity: 0.3,
+                }, children: children })] }));
+};

package/MediaTag.d.ts

@@ -0,0 +1,9 @@
+import { SxProps } from "@mui/material";
+import * as wpCoreTypes from "@rnaga/wp-next-core/types";
+export declare const MediaTag: <T extends wpCoreTypes.actions.Posts[number]>(props: {
+    post: T;
+    slotSxProps?: {
+        icon: SxProps;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaTag.d.ts.map

package/MediaTag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaTag.d.ts","sourceRoot":"","sources":["../src/MediaTag.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,OAAO,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAIzD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO;IAC3E,IAAI,EAAE,CAAC,CAAC;IACR,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;CACH,4CAsCA,CAAC"}

package/MediaTag.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DocumentScannerOutlinedIcon from "@mui/icons-material/DocumentScannerOutlined";
+import { Icon } from "@mui/material";
+import { getMimeType } from "@rnaga/wp-next-core/client/utils/media";
+export const MediaTag = (props) => {
+    const { post, slotSxProps } = props;
+    if (!post) {
+        return null;
+    }
+    const mimeType = getMimeType(post.guid);
+    const mediaType = mimeType.split("/")[0];
+    return mediaType == "image" ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    _jsx("img", { "data-first-child": true, src: post.guid, loading: "lazy", alt: "", style: {
+            width: "100%",
+            height: "auto",
+            objectFit: "contain",
+        } })) : mediaType == "audio" ? (_jsxs("audio", { controls: true, "data-first-child": true, style: { maxHeight: 50 }, children: [_jsx("source", { src: post.guid }), "Your browser does not support the video tag."] })) : mediaType == "video" ? (_jsxs("video", { controls: true, "data-first-child": true, children: [_jsx("source", { src: post.guid }), "Your browser does not support the video tag."] })) : (_jsx(Icon, { "data-first-child": true, sx: slotSxProps?.icon, children: _jsx(DocumentScannerOutlinedIcon, { sx: slotSxProps?.icon }) }));
+};

package/Modal.d.ts

@@ -0,0 +1,11 @@
+import { Box, Modal as MuiModal, SxProps } from "@mui/material";
+type ModalParameters = Omit<Parameters<typeof MuiModal>[0], "onClose"> & {
+    onClose: VoidFunction;
+};
+export declare const Modal: (props: ModalParameters) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalContent: (props: {
+    sx?: SxProps;
+    children: React.ReactNode;
+} & Omit<Parameters<typeof Box>[0], "children" | "sx">) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Modal.d.ts.map

package/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,GAAG,EAEH,KAAK,IAAI,QAAQ,EACjB,OAAO,EAER,MAAM,eAAe,CAAC;AAIvB,KAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG;IACvE,OAAO,EAAE,YAAY,CAAC;CACvB,CAAC;AAQF,eAAO,MAAM,KAAK,GAAI,OAAO,eAAe,4CAkB3C,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO;IACL,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,4CAkEvD,CAAC"}

package/Modal.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { Close } from "@mui/icons-material";
+import { Box, IconButton, Modal as MuiModal, } from "@mui/material";
+import { useWPTheme } from "./ThemeRegistry";
+import { useWP } from "@rnaga/wp-next-core/client/wp";
+const Context = createContext({});
+export const Modal = (props) => {
+    const { children, open: muiOpen, onClose, ...rest } = props;
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        setOpen(muiOpen);
+    }, [muiOpen]);
+    const handleClose = () => {
+        setOpen(false);
+        onClose();
+    };
+    return (_jsx(MuiModal, { open: open, onClose: handleClose, ...rest, children: _jsx(Context, { value: { open, setOpen, onClose }, children: children }) }));
+};
+export const ModalContent = (props) => {
+    const { sx, ...rest } = props;
+    const { setOpen, onClose } = useContext(Context);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const { wpTheme } = useWPTheme();
+    const { viewport } = useWP();
+    useEffect(() => {
+        if (viewport.isMobile) {
+            setIsFullscreen(true);
+        }
+        else {
+            setIsFullscreen(false);
+        }
+    }, [viewport.isMobile]);
+    return (_jsx(Box, { sx: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            bgcolor: "background.paper",
+            boxShadow: 24,
+            borderRadius: isFullscreen ? 0 : 1,
+            py: 4,
+            px: 2,
+            ...(isFullscreen && {
+                width: "100%",
+                height: "100%",
+            }),
+            ...sx,
+        }, ...rest, children: _jsxs(Box, { sx: {
+                position: "relative",
+            }, children: [_jsx(IconButton, { size: "small", onClick: (e) => {
+                        setOpen(false);
+                        onClose();
+                    }, sx: {
+                        position: "absolute",
+                        top: isFullscreen ? -25 : -25,
+                        right: isFullscreen ? -10 : -10,
+                        zIndex: 1,
+                        bgcolor: wpTheme.background.color,
+                        border: "none",
+                        ":hover": {
+                            bgcolor: wpTheme.background.hoverColor,
+                        },
+                    }, children: _jsx(Close, { fontSize: "small" }) }), props.children] }) }));
+};

package/ModalConfirm.d.ts

@@ -0,0 +1,8 @@
+export declare const ModalConfirm: (props: {
+    title?: string;
+    message: string | React.ReactNode;
+    callback: (confirm: boolean) => void;
+    open: boolean;
+    onClose?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalConfirm.d.ts.map

package/ModalConfirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalConfirm.d.ts","sourceRoot":"","sources":["../src/ModalConfirm.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY,GAAI,OAAO;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,4CA0GA,CAAC"}

package/ModalConfirm.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import WarningIcon from "@mui/icons-material/Warning";
+import { Box, Divider } from "@mui/material";
+import { useWP } from "@rnaga/wp-next-core/client/wp";
+import { Button } from "./Button";
+import { Modal, ModalContent } from "./Modal";
+import { Typography } from "./Typography";
+export const ModalConfirm = (props) => {
+    const { title = "Are you absolutely sure?", message, callback, onClose, } = props;
+    const { viewport } = useWP();
+    const [open, setOpen] = useState(props.open);
+    useEffect(() => {
+        console.log("changing open state to", props.open);
+        if (props.open !== open) {
+            setOpen(props.open);
+        }
+    }, [props.open]);
+    return (_jsx(Modal, { open: open, onClose: () => {
+            console.log("ConfirmModal onClose called, but no action taken");
+            setOpen(false);
+            onClose?.();
+        }, children: _jsxs(ModalContent, { "aria-labelledby": "nested-modal-title", "aria-describedby": "nested-modal-description", sx: {
+                minWidth: "40%",
+                ...(viewport.isMobile
+                    ? {
+                        top: "unset",
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        borderRadius: 0,
+                        transform: "none",
+                        maxWidth: "unset",
+                    }
+                    : {}),
+            }, children: [_jsxs(Box, { sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                    }, children: [_jsx(WarningIcon, {}), _jsx(Typography, { id: "nested-modal-title", size: "large", bold: true, children: title.length > 0 ? title : "Confirmation" })] }), _jsx(Divider, { sx: { my: 2 } }), _jsx(Typography, { id: "nested-modal-description", size: "large", component: "div", sx: {
+                        mt: 1,
+                        mb: 2,
+                        whiteSpace: "pre-line",
+                    }, children: message }), _jsxs(Box, { sx: {
+                        mt: 1,
+                        display: "flex",
+                        gap: 1,
+                        flexDirection: { xs: "column", sm: "row-reverse" },
+                    }, children: [_jsx(Button, { size: "large", variant: "outlined", onClick: () => {
+                                callback(true);
+                                setOpen(false);
+                                onClose?.();
+                            }, color: "error", children: "Continue" }), _jsx(Button, { size: "large", variant: "outlined", color: "primary", onClick: () => {
+                                callback(false);
+                                setOpen(false);
+                                onClose?.();
+                            }, children: "Cancel" })] })] }) }));
+};

package/PopperMenu.d.ts

@@ -0,0 +1,7 @@
+import { Menu } from "@mui/material";
+export declare const PopperMenu: (props: {
+    open: boolean;
+    children: React.ReactNode;
+    onClose: () => void;
+} & Omit<React.ComponentProps<typeof Menu>, "open" | "onClose">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PopperMenu.d.ts.map

package/PopperMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopperMenu.d.ts","sourceRoot":"","sources":["../src/PopperMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,eAAe,CAAC;AAExD,eAAO,MAAM,UAAU,GACrB,OAAO;IACL,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,4CAgBhE,CAAC"}

package/PopperMenu.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu } from "@mui/material";
+export const PopperMenu = (props) => {
+    const { ref, open, children, anchorEl, onClose, ...rest } = props;
+    return (_jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, ...rest, children: children }));
+};

package/README.md

@@ -0,0 +1,292 @@
+# WP-Next
+
+WP-Next is built with [Next.js](https://nextjs.org/) and [WP-Node](https://github.com/rnaga/wp-node). It provides a modern **React-based Admin Dashboard** and utilities for building applications that interact directly with a WordPress database — **no PHP required**.
+
+👉 **View [Full Documentation](https://rnaga.github.io/wp-next/)**
+
+<a href="https://vimeo.com/1112693769?share=copy#t=0" target="_blank" rel="noopener">
+  <img width="1200" height="699" alt="dashboard-vimeo" src="https://rnaga.github.io/wp-next/images/dashboard-vimeo.png" />
+</a>
+
+## Quick Demo
+
+Run a ready-made WP-Next example using Docker:
+
+```bash
+docker run --rm --init -it --name wp-next-example -p 3000:3000 \
+  -v wp-next-example_public:/app/admin/public \
+  -v wp-next-example_db:/var/lib/mysql \
+  -v wp-next-example_html:/app/html \
+  rnagat/wp-next-example:latest
+```
+
+Visit [http://localhost:3000/admin](http://localhost:3000/admin) and log in with:
+
+```text
+Username: wp
+Password: wp
+```
+
+To stop and remove the running example container, use:
+
+```sh
+docker stop wp-next-example
+```
+
+## Admin Dashboard
+
+The main feature of WP-Next is the **Admin Dashboard**, a headless CMS that serves as an alternative to the traditional WordPress Admin Dashboard.
+
+Out of the box, it includes:
+
+- Posts & Pages
+- Media
+- Terms (Categories, Tags)
+- Comments
+- Profile & Settings
+- Users and Roles
+- Revisions
+
+In **multisite mode**, it also supports:
+
+- Sites
+- Blogs (per-site content such as posts, media, comments)
+
+### Notes
+
+Since WP-Next is entirely written in TypeScript and React, some WordPress features are **not supported**, including:
+
+- WordPress Themes and appearance settings
+- WordPress Block Editor (Gutenberg)
+- WordPress template rendering APIs
+- WordPress plugins
+
+## Core Libraries
+
+- [`@rnaga/wp-node`](https://github.com/rnaga/wp-node) — TypeScript-first WordPress database integration.
+- [`next`](https://nextjs.org/) — Next.js framework for SSR/SSG, routing, and APIs.
+- [`@mui/material`](https://mui.com/) — Material UI component library.
+- [`@tiptap/react`](https://tiptap.dev/), [`mui-tiptap`](https://github.com/sjdemartini/mui-tiptap) — TipTap rich-text editor with Material UI integration.
+
+## Installation
+
+### Prerequisites
+
+WP-Next requires a running WordPress database. If you don’t already have WordPress installed, see the Prerequisites section in the WP-Node installation guide for instructions on running it with Docker:
+
+https://rnaga.github.io/wp-node/docs/getting-started/installation#prerequisites
+
+### Initialize Project (Admin Dashboard)
+
+WP-Next provides a CLI tool to initialize the Admin Dashboard. Run the following command and follow the prompts:
+
+```bash
+npx @rnaga/wp-next-cli -- initAdmin
+```
+
+Example setup prompts you may see:
+
+```text
+✔ Enter your database hostname: · localhost
+✔ Enter your database port: · 33306
+✔ Enter your database username: · wp
+✔ Enter your database password: · **
+✔ Enter your database name: · wordpress
+✔ Is it a multi-site? · No
+✔ Enter your static assets path: · public
+✔ Enter your Admin URL: · http://localhost:3000
+✔ Enter project path (What is your project named?): · admin
+```
+
+The CLI will automatically install and configure:
+
+- A Next.js project (App Router enabled) for the Admin Dashboard
+- Pages and layouts required by the Admin Dashboard
+- Configuration files and the `_wp/hooks` scaffolding
+
+### Run and Build the Admin Dashboard
+
+Run in development mode:
+
+```bash
+npm run dev
+```
+
+Build and start for production:
+
+```bash
+npm run build
+npm run start
+```
+
+For more on production deployment, refer to the Next.js deployment guide:
+
+https://nextjs.org/docs/pages/getting-started/deploying
+
+## Hooks (Filter and Action)
+
+WP-Next uses [WP-Node](https://github.com/rnaga/wp-node) hook system which is inspired by WordPress hooks but designed for TypeScript and Node.js. The system supports both filters (which transform data) and actions (which run side effects). Because WP-Node is TypeScript-first, hooks are type-safe and can be asynchronous — they are not directly compatible with WordPress core PHP hooks.
+
+Key points:
+
+- Filters: transform and return data; they may be async.
+- Actions: perform side effects and do not return data.
+- Hooks can be registered either with TypeScript decorators (static / application lifecycle) or with the functional HookCommand utilities (runtime / dynamic).
+
+### Frontend vs Backend hooks
+
+When initialized, WP-Next generates a `_wp/hooks` directory where you can add your own hooks:
+
+```txt
+hooks/
+├── client
+│   └── index.tsx
+└── server
+    ├── admin-media.hook.ts
+    ├── index.ts
+    ├── nextauth-providers.hook.ts
+    └── notifications.hook.ts
+```
+
+#### Frontend Hooks
+
+Frontend hooks (place under `_wp/hooks/client/`) are bundled into the Admin UI and run in the browser. Use them to register UI extensions such as sidebar menus, custom admin pages, or client-side theming. Frontend hooks must contain only client-safe code (no direct access to the filesystem, process env secrets, or server-only Node APIs).
+
+#### Backend Hooks
+
+Backend hooks (place under `_wp/hooks/server/`) run inside the server-side application/context. Use them for server responsibilities like media upload handling, authentication providers, email sending, or other integrations that require Node APIs, credentials, or synchronous server-side state.
+
+For more details about hooks, how they work, and usage examples, see the WP-Node hooks documentation:
+
+https://rnaga.github.io/wp-node/docs/concepts-features/hooks
+
+## Custom Admin Pages
+
+You can extend the Admin Dashboard by registering **custom pages**:
+
+Below are minimal, illustrative examples (a page component and a frontend hook) you can copy into `_wp/hooks/client/` and adapt to your project.
+
+1. **Create a React component** (`CustomPage.tsx`) to render your page.
+2. **Write a frontend hook** (`menu-custom.hook.tsx`) to add a sidebar menu and route.
+3. **Register the hook** in `_wp/hooks/client/index.tsx`.
+
+Example menu item route:  
+`http://localhost:3000/admin/blog/custom`
+
+This allows you to build fully custom interfaces inside the Admin while reusing the WP-Next shell.
+
+Example code (illustrative — example usage)
+
+These snippets show one way to implement `CustomPage.tsx` and `menu-custom.hook.tsx`. Adapt imports, types, and `capabilities` to your project; they are examples, not production-ready code.
+
+CustomPage.tsx
+
+```tsx
+import React from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+export const CustomPage = () => {
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h4" gutterBottom>
+        Custom Page
+      </Typography>
+
+      <Typography paragraph>
+        This is a simple custom admin page. Put your React UI here — forms,
+        lists, editor components, etc.
+      </Typography>
+
+      <ul>
+        <li>Example item 1</li>
+        <li>Example item 2</li>
+      </ul>
+    </Box>
+  );
+};
+```
+
+menu-custom.hook.tsx
+
+```tsx
+"use client";
+
+import { filter as clientFilter } from "@rnaga/wp-next-core/decorators";
+import { hook } from "@rnaga/wp-node/decorators/hooks";
+import CircleIcon from "@mui/icons-material/Circle";
+import { CustomPage } from "./CustomPage";
+
+@hook("next_admin_custom_menu")
+export class MenuCustomHook {
+  @clientFilter("next_admin_menu")
+  hookFilter(adminMenus: any[] = [], segment?: string) {
+    // Only show in blog/dashboard segments
+    if (!["blog", "dashboard"].includes(segment || "")) {
+      return adminMenus;
+    }
+
+    const blogMenu = [
+      {
+        icon: <CircleIcon />,
+        displayOnSidebar: true,
+        component: <CustomPage />,
+        capabilities: ["read"], // control access
+        label: "Custom Page",
+        // final route: /admin/blog/custom
+        path: `/${"blog"}/custom`,
+      },
+    ];
+
+    return [...adminMenus, ...blogMenu];
+  }
+}
+```
+
+index.tsx (register hooks)
+
+```ts
+import { getDefaultAdminHooks } from "@rnaga/wp-next-admin/client/utils";
+import { MenuCustomHook } from "./menu-custom.hook";
+
+// include defaults first, then your custom hook
+export const hooks = [...getDefaultAdminHooks(), MenuCustomHook];
+```
+
+Summary and quick how-to
+
+- Prerequisite: WP-Next Admin initialized (project creates `_wp/hooks/` on first run).
+
+- Key files (place under `_wp/hooks/client/`):
+
+  - `CustomPage.tsx` — minimal React page component that renders when the route is visited.
+  - `menu-custom.hook.tsx` — frontend hook that adds a sidebar menu entry and maps a path (e.g. `/admin/blog/custom`) to your component. Use the `@hook(...)` class decorator and a client filter such as `@clientFilter('next_admin_menu')` to contribute menu items.
+  - `index.tsx` — export the frontend hooks array. Include defaults first, then your custom hook: `export const hooks = [...getDefaultAdminHooks(), MenuCustomHook];`
+
+- Important notes:
+
+  - Admin routes are segmented (e.g. `dashboard`, `blog`). Hooks often check/normalize the current segment so the final URL becomes something like `/admin/blog/custom`.
+  - Use `capabilities` on menu items (for example `['read']` or `['edit_posts']`) to restrict access.
+  - Frontend hooks run in the browser bundle — avoid Node-only APIs, filesystem access, or secrets in client hooks.
+
+- Quick steps:
+
+  1. Create `_wp/hooks/client/CustomPage.tsx` with your React UI.
+  2. Add `_wp/hooks/client/menu-custom.hook.tsx` to register the menu item and route (set `component`, `path`, and `capabilities`).
+  3. Add your hook to `_wp/hooks/client/index.tsx` so the Admin shell loads it.
+  4. Run in dev or build for production.
+
+- Run:
+
+```bash
+npm run dev
+# or for production
+npm run build
+npm run start
+```
+
+Example menu route: `http://localhost:3000/admin/blog/custom`
+
+## License
+
+MIT