@rnaga/wp-next-ui 1.1.10 → 1.2.1

package/Button.js

@@ -5,7 +5,7 @@ import { useWPTheme } from "./ThemeRegistry";
 export const Button = (props) => {
     const { children, size, component, bold, loading, color, disabled, endIcon, ...rest } = props;
     const { wpTheme } = useWPTheme();
-    return (_jsx(MuiButton, { ...rest, component: component, variant: "contained", size: "small", disableElevation: true, disabled: loading || disabled === true, sx: {
+    return (_jsx(MuiButton, { ...rest, ...(component !== undefined ? { component } : {}), variant: "contained", size: "small", disableElevation: true, disabled: loading || disabled === true, sx: {
             textTransform: "none",
             fontSize: size === "large" ? 16 : size === "medium" ? 14 : 12,
             ...(bold ? { fontWeight: "bold" } : {}),

package/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../src/DateTimePicker.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,GAAI,OAAO;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,4CAiDA,CAAC"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../src/DateTimePicker.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,GAAI,OAAO;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,4CAkDA,CAAC"}

package/DateTimePicker.js

@@ -7,39 +7,46 @@ import { useWPTheme } from "./ThemeRegistry";
 export const DateTimePicker = (props) => {
     const { value, onChange, size } = props;
     const { wpTheme } = useWPTheme();
-    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsx(MuiDateTimePicker, { value: dayjs(value), onChange: (newValue) => {
+    const fontSize = size === "large" ? 16 : size === "medium" ? 14 : 12;
+    const height = size === "large" ? 36 : size === "medium" ? 32 : 24;
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsx(MuiDateTimePicker
+        /**
+         * Pass null for empty/invalid values — dayjs(undefined) returns "now"
+         * which misleads the picker when no date has been set.
+         */
+        , { 
+            /**
+             * Pass null for empty/invalid values — dayjs(undefined) returns "now"
+             * which misleads the picker when no date has been set.
+             */
+            value: value ? dayjs(value) : null, onChange: (newValue) => {
                 onChange && onChange(newValue?.toDate() || "");
             }, slotProps: {
-                textField: {
-                    size: "small",
-                    slotProps: {
-                        input: { disableUnderline: true, sx: { fontSize: 0.1 } },
-                    },
+                /**
+                 * In MUI X v9 the textField slot was removed; use field.sx instead.
+                 * Targets MuiPickersOutlinedInput-root (replaces MuiOutlinedInput-root).
+                 */
+                field: {
                     sx: {
-                        "& .MuiInputBase-input": {
-                            py: 0.5,
-                            px: 1,
+                        fontSize,
+                        height,
+                        border: `1px solid ${wpTheme.border.color}`,
+                        borderRadius: 1,
+                        "& .MuiPickersOutlinedInput-root": {
+                            height: "100%",
+                            fontSize,
+                            "& fieldset": { border: "none" },
+                            "&.Mui-focused fieldset": { border: "none" },
+                            "&:hover fieldset": { border: "none" },
                         },
-                        "& .MuiOutlinedInput-root": {
-                            fontSize: size === "large" ? 16 : size === "medium" ? 14 : 12,
-                            height: size === "large" ? 36 : size == "medium" ? 32 : 24,
-                            border: `1px solid ${wpTheme.border.color}`,
-                            "& fieldset": {
-                                border: "none",
-                            },
-                            "&.Mui-focused fieldset": {
-                                border: "none",
-                            },
-                            "&:hover fieldset": {
-                                border: "none",
-                            },
+                        "& .MuiPickersSectionList-root": {
+                            py: 0,
+                            px: 1,
                         },
                         "& .MuiSvgIcon-root": {
                             fontSize: size === "large" ? 26 : size === "medium" ? 22 : 18,
                         },
                     },
                 },
-            }, sx: {
-                width: "100%",
-            } }) }));
+            }, sx: { width: "100%" } }) }));
 };

package/DraggableBox.d.ts

@@ -43,6 +43,6 @@ export declare const DraggableBox: (props: {
     placement?: "target" | "left";
     resizable?: boolean;
     onResize?: (width: number, height: number, event?: Event) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=DraggableBox.d.ts.map

package/DraggableBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableBox.d.ts","sourceRoot":"","sources":["../src/DraggableBox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,EAAmB,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzD,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACnE,4CA6cA,CAAC"}
+{"version":3,"file":"DraggableBox.d.ts","sourceRoot":"","sources":["../src/DraggableBox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,EAAmB,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzD,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACnE,mDA6cA,CAAC"}

package/InputSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputSearch.d.ts","sourceRoot":"","sources":["../src/InputSearch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,eAAO,MAAM,WAAW,GAAI,OAAO;IACjC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7E,4CA6CA,CAAC"}
+{"version":3,"file":"InputSearch.d.ts","sourceRoot":"","sources":["../src/InputSearch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,eAAO,MAAM,WAAW,GAAI,OAAO;IACjC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7E,4CA+CA,CAAC"}

package/InputSearch.js

@@ -9,7 +9,9 @@ export const InputSearch = (props) => {
     const ref = useRef(null);
     const handleClear = () => {
         updateRouter({ search: "" });
-        ref.current.value = "";
+        if (ref.current) {
+            ref.current.value = "";
+        }
     };
     const handleChange = (value, e) => {
         if (props.onChange) {

package/Loading.d.ts

@@ -3,5 +3,5 @@ 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;
+}) => 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> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 //# sourceMappingURL=Loading.d.ts.map

package/Loading.d.ts.map

@@ -1 +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"}
+{"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,4WA+CA,CAAC"}

package/LoadingBox.d.ts

@@ -8,5 +8,5 @@ export declare const LoadingBox: (props: {
         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;
+}) => 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> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 //# sourceMappingURL=LoadingBox.d.ts.map

package/LoadingBox.d.ts.map

@@ -1 +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"}
+{"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,4WA+CA,CAAC"}

package/MediaTag.d.ts

@@ -5,5 +5,5 @@ export declare const MediaTag: <T extends wpCoreTypes.actions.Posts[number]>(pro
     slotSxProps?: {
         icon: SxProps;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=MediaTag.d.ts.map

package/MediaTag.d.ts.map

@@ -1 +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"}
+{"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,mDAsCA,CAAC"}

package/MediaTag.js

@@ -9,9 +9,7 @@ export const MediaTag = (props) => {
     }
     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: {
+    return mediaType == "image" ? (_jsx("img", { "data-first-child": true, src: post.guid, loading: "lazy", alt: "", style: {
             width: "100%",
             height: "auto",
             objectFit: "contain",

package/README.md

@@ -1,291 +1,173 @@
 # 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**.
+WP-Next is built with [Next.js](https://nextjs.org/) and [WP-Node](https://github.com/rnaga/wp-node). It provides two complementary products for building WordPress-powered applications where every layer is written from scratch in TypeScript and React — **no PHP involved**.
 
-👉 **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>
+## 📖 [Full Documentation → rnaga.github.io/wp-next](https://rnaga.github.io/wp-next/)
 
-## Quick Demo
+> For guides, concepts, and examples, the documentation site is the best starting point.
 
-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
-```
+## WP-Next Editor
 
-Visit [http://localhost:3000/admin](http://localhost:3000/admin) and log in with:
+WP-Next Editor is a visual, drag-and-drop page editor for building public-facing pages directly connected to your WordPress database. Pages are stored as structured [Lexical](https://lexical.dev/docs/intro) JSON in the WordPress database — making them version-controllable, programmatically manipulable, and AI-ready.
 
-```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
+<a href="https://vimeo.com/1185738064?share=copy#t=0" target="_blank" rel="noopener">
+  <img width="1200" height="699" alt="WP-Next Editor canvas demo" src="https://rnaga.github.io/wp-next/assets/editor/canvas/canvas.png" />
+</a>
 
-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:
+### Key Features
 
-https://rnaga.github.io/wp-node/docs/getting-started/installation#prerequisites
+- **Drag-and-drop canvas** — build pages visually with a live preview. Select, resize, nest, and animate elements directly on the canvas.
+- **Responsive design** — set per-device breakpoints (desktop, tablet, mobile) and CSS states (hover, focus, etc.). Each device gets its own `@media` query at render time.
+- **Dynamic data binding** — pull posts, users, taxonomies, and options directly from the WordPress database into any element. No custom API endpoints required.
+- **Widget system** — embed sub-templates (widgets) inside other templates for reusable headers, footers, and components. Widget variants let the same widget render different content per embedding.
+- **CSS variables** — define design tokens at the template level and reference them across all elements for consistent theming.
+- **Animations** — attach CSS keyframe animations (98 Animate.css presets) to any element, triggered by hover, click, scroll, and more.
+- **JSON editor** — edit the raw Lexical JSON directly in a built-in code editor for precise control over template structure.
+- **Save history** — create and manage template save points with preview and restore support.
 
-### Initialize Project (Admin Dashboard)
+### Quick Demo
 
-WP-Next provides a CLI tool to initialize the Admin Dashboard. Run the following command and follow the prompts:
+Run a ready-made WP-Next Editor example using Docker:
 
 ```bash
-npx @rnaga/wp-next-cli -- initAdmin
+docker run --rm --init -it --name wp-next-editor-example -p 3000:3000 \
+  -v wp-next-editor_public:/app/editor/public \
+  -v wp-next-editor_db:/var/lib/mysql \
+  rnagat/wp-next-editor-example:latest
 ```
 
-Example setup prompts you may see:
+Log in with:
 
 ```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
+Username: wp
+Password: wp
 ```
 
-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
+- Editor: [http://localhost:3000/admin/1/editor](http://localhost:3000/admin/1/editor)
+- Admin Dashboard: [http://localhost:3000/admin](http://localhost:3000/admin)
 
-### Run and Build the Admin Dashboard
-
-Run in development mode:
+To stop the container:
 
 ```bash
-npm run dev
+docker stop wp-next-editor-example
 ```
 
-Build and start for production:
+### Initialize the Editor
 
 ```bash
-npm run build
-npm run start
+npx @rnaga/wp-next-cli -- initEditor
 ```
 
-For more on production deployment, refer to the Next.js deployment guide:
+See the [Editor Installation guide](https://rnaga.github.io/wp-next/docs/editor/installation) for the full setup walkthrough.
 
-https://nextjs.org/docs/pages/getting-started/deploying
+> `wp-next-editor` includes `wp-next-admin` out of the box. See [WP-Next Admin](#wp-next-admin) below for what it provides.
 
-## Hooks (Filter and Action)
+### AI-Powered Template Authoring — Built-in Agent Skills
 
-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.
+WP-Next Editor ships with a built-in **[Agent Skill](https://agentskills.io/home)** (`/wp-next-editor-template`) that lets you build and modify templates using natural-language prompts. All templates are stored as Lexical JSON, so AI agents can read, write, and transform them directly.
 
-Key points:
+[Agent Skills](https://agentskills.io/home) is an open standard supported by Claude Code, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, VS Code, and more. Install the skill once and use it with whichever coding agent you prefer.
 
-- 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).
+The skill supports four modes:
 
-### Frontend vs Backend hooks
+| Mode      | What it does                                                |
+| --------- | ----------------------------------------------------------- |
+| `create`  | Scaffold a new template from a natural-language description |
+| `update`  | Modify an existing template based on a prompt               |
+| `convert` | Convert HTML/CSS into a Lexical JSON template               |
+| `help`    | Describe available nodes, styles, and patterns              |
 
-When initialized, WP-Next generates a `_wp/hooks` directory where you can add your own hooks:
+Install the skill with:
 
-```txt
-hooks/
-├── client
-│   └── index.tsx
-└── server
-    ├── admin-media.hook.ts
-    ├── index.ts
-    ├── nextauth-providers.hook.ts
-    └── notifications.hook.ts
+```bash
+npx @rnaga/wp-next-cli -- editor agentSkills add
 ```
 
-#### 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).
+Example prompt:
 
-#### 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
+```
+/wp-next-editor-template create src/templates/home.json "A hero section with a full-width background image, centered headline, subtitle, and a CTA button"
+```
 
-## Custom Admin Pages
+See [Using AI](https://rnaga.github.io/wp-next/docs/editor/concepts-features/using-ai) for installation details and more examples.
 
-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.
+## WP-Next Admin
 
-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`.
+WP-Next Admin is a **React-based Admin Dashboard** — a headless CMS that serves as a modern alternative to the traditional WordPress Admin Dashboard.
 
-Example menu item route:  
-`http://localhost:3000/admin/blog/custom`
+<a href="https://vimeo.com/1112693769?share=copy#t=0" target="_blank" rel="noopener">
+  <img width="1200" height="699" alt="WP-Next Admin dashboard demo" src="https://rnaga.github.io/wp-next/images/dashboard-vimeo.png" />
+</a>
 
-This allows you to build fully custom interfaces inside the Admin while reusing the WP-Next shell.
+### Key Features
 
-Example code (illustrative — example usage)
+Out of the box, it includes:
 
-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.
+- Posts & Pages
+- Media
+- Terms (Categories, Tags)
+- Comments
+- Profile & Settings
+- Users and Roles
+- Revisions
 
-CustomPage.tsx
+In **multisite mode**, it also supports:
 
-```tsx
-import React from "react";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
+- Sites
+- Blogs (per-site content such as posts, media, comments)
 
-export const CustomPage = () => {
-  return (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h4" gutterBottom>
-        Custom Page
-      </Typography>
+### Quick Demo
 
-      <Typography paragraph>
-        This is a simple custom admin page. Put your React UI here — forms,
-        lists, editor components, etc.
-      </Typography>
+Run a ready-made WP-Next example using Docker:
 
-      <ul>
-        <li>Example item 1</li>
-        <li>Example item 2</li>
-      </ul>
-    </Box>
-  );
-};
+```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
 ```
 
-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];
-  }
-}
-```
+Visit [http://localhost:3000/admin](http://localhost:3000/admin) and log in with:
 
-index.tsx (register hooks)
+```text
+Username: wp
+Password: wp
+```
 
-```ts
-import { getDefaultAdminHooks } from "@rnaga/wp-next-admin/client/utils";
-import { MenuCustomHook } from "./menu-custom.hook";
+To stop the container:
 
-// include defaults first, then your custom hook
-export const hooks = [...getDefaultAdminHooks(), MenuCustomHook];
+```bash
+docker stop wp-next-example
 ```
 
-Summary and quick how-to
-
-- Prerequisite: WP-Next Admin initialized (project creates `_wp/hooks/` on first run).
+### Initialize the Admin Dashboard
 
-- Key files (place under `_wp/hooks/client/`):
+```bash
+npx @rnaga/wp-next-cli -- initAdmin
+```
 
-  - `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];`
+See the [Admin Getting Started guide](https://rnaga.github.io/wp-next/docs/admin/getting-started) for the full setup walkthrough.
 
-- Important notes:
+### Extensibility
 
-  - 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.
+WP-Next Admin supports **custom pages** and a **hook system** (filters and actions) inspired by WordPress hooks but built for TypeScript and Node.js. Frontend hooks extend the Admin UI in the browser; backend hooks handle server-side concerns such as authentication, media uploads, and integrations.
 
-- Quick steps:
+See [Hooks](https://rnaga.github.io/wp-next/docs/admin/concepts-features/hooks) and [Custom Admin Pages](https://rnaga.github.io/wp-next/docs/admin/concepts-features/custom-pages) in the documentation.
 
-  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:
+## Prerequisites
 
-```bash
-npm run dev
-# or for production
-npm run build
-npm run start
-```
+Both products require a running WordPress database. If you don't already have WordPress installed, see the [WP-Node installation guide](https://rnaga.github.io/wp-node/docs/getting-started/installation#prerequisites) for instructions on running it with Docker.
 
-Example menu route: `http://localhost:3000/admin/blog/custom`
+---
 
 ## License