hazo_blog 1.1.0 → 1.2.0

package/CHANGE_LOG.md

@@ -3,6 +3,33 @@
 All notable changes are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## 1.2.0 — 2026-09-12
+
+**Side preview in the post editor (`PanelDialog` + `PostPreview`)**
+
+The admin edit dialog now supports a split-pane layout showing the published article alongside the
+editor. When editing a published post, a "Preview" toggle appears in the dialog header; clicking it
+expands the dialog to `max-w-7xl` and loads the published article in an iframe on the right half.
+
+**`PanelDialog`** gained two new optional props:
+- `sideContent?: ReactNode` — when provided, the dialog widens and renders a two-column layout
+  (children on the left, sideContent on the right).
+- `headerActions?: ReactNode` — rendered inline after the title, used by `BlogAdminPanel` for the
+  preview toggle button.
+
+**`PostPreview`** — new component exported from `hazo_blog/ui`. A lightweight iframe wrapper that
+takes a `url` prop (the post's public URL), shows a loading state, and provides an "Open in new
+tab" link. Token-free Tailwind, same isolation rule as the rest of `src/ui/*`.
+
+**`BlogAdminPanel`** wires it up automatically: when the `dialogTarget` is a published post, the
+preview toggle and `PostPreview` are passed to `PanelDialog`. The iframe URL is constructed from
+`blogBasePath` + slug (e.g. `/guides/my-post`), so consuming apps that set a custom `blogBasePath`
+get correct preview URLs out of the box.
+
+**Back-compat: zero break.** Both new `PanelDialog` props are optional; `PostPreview` is additive.
+The dialog renders identically to before when `sideContent` is not provided (the only layout
+difference is the title now sits in a border-bottom header row — visually near-identical).
+
 ## 1.1.0 — 2026-09-11
 
 **`onPostSaved` config hook + `createBlogManageSlugRoutes` factory**

package/dist/ui/blog-admin-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blog-admin-panel.d.ts","sourceRoot":"","sources":["../../src/ui/blog-admin-panel.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjE,sFAAsF;IACtF,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,YAAsB,EACtB,YAAY,EACZ,eAAe,EACf,SAAS,GACV,EAAE,mBAAmB,2CAwFrB"}
+{"version":3,"file":"blog-admin-panel.d.ts","sourceRoot":"","sources":["../../src/ui/blog-admin-panel.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjE,sFAAsF;IACtF,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,YAAsB,EACtB,YAAY,EACZ,eAAe,EACf,SAAS,GACV,EAAE,mBAAmB,2CAoHrB"}

package/dist/ui/blog-admin-panel.js

@@ -13,10 +13,12 @@ import { PostForm } from "../components/admin/post-form.js";
 import { PostListTable } from "./post-list-table.js";
 import { LayoutSelector } from "./layout-selector.js";
 import { PanelDialog } from "./panel-dialog.js";
+import { PostPreview } from "./post-preview.js";
 import { useBlogAdmin } from "./use-blog-admin.js";
 export function BlogAdminPanel({ fetchFn, basePath, blogBasePath = "/blog", settingsPath, imageUploadPath, className, }) {
     const admin = useBlogAdmin({ fetchFn, basePath, settingsPath, imageUploadPath });
     const [dialogTarget, setDialogTarget] = useState(undefined);
+    const [showPreview, setShowPreview] = useState(false);
     const dialogOpen = dialogTarget !== undefined;
     const resolvedImageUploadPath = imageUploadPath ?? `${basePath}/images`;
     function openCreate() {
@@ -27,6 +29,7 @@ export function BlogAdminPanel({ fetchFn, basePath, blogBasePath = "/blog", sett
     }
     function closeDialog() {
         setDialogTarget(undefined);
+        setShowPreview(false);
     }
     async function handleDelete(post) {
         if (typeof window !== "undefined" && !window.confirm(`Delete "${post.title || post.slug}"? This cannot be undone.`)) {
@@ -41,7 +44,9 @@ export function BlogAdminPanel({ fetchFn, basePath, blogBasePath = "/blog", sett
                 window.alert(message);
         }
     }
-    return (_jsxs("div", { className: `space-y-8 text-zinc-900 dark:text-zinc-100 ${className ?? ""}`, children: [_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Posts" }), _jsx("button", { type: "button", onClick: openCreate, className: "rounded-lg bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:opacity-90 dark:bg-zinc-100 dark:text-zinc-900", children: "New Post" })] }), admin.postsError && (_jsxs("p", { className: "text-sm text-red-600 dark:text-red-400", children: ["Error: ", admin.postsError] })), admin.postsLoading && admin.posts.length === 0 ? (_jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading posts\u2026" })) : (_jsx(PostListTable, { posts: admin.posts, blogBasePath: blogBasePath, onEdit: openEdit, onDelete: handleDelete }))] }), _jsxs("section", { children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: "Index Layout" }), admin.settingsError && (_jsxs("p", { className: "mb-2 text-sm text-red-600 dark:text-red-400", children: ["Error: ", admin.settingsError] })), admin.settingsState && (_jsx(LayoutSelector, { value: admin.settingsState.settings.indexLayout, persisted: admin.settingsState.persisted, onSelect: (next) => admin.updateSettings({ indexLayout: next }) }))] }), _jsx(PanelDialog, { open: dialogOpen, onClose: closeDialog, title: dialogTarget ? "Edit Post" : "New Post", children: _jsx(PostForm, { post: dialogTarget ?? null, categories: admin.categories, endpoint: basePath, imageUploadEndpoint: resolvedImageUploadPath, fetchFn: fetchFn, onCancel: closeDialog, onSaved: () => {
+    return (_jsxs("div", { className: `space-y-8 text-zinc-900 dark:text-zinc-100 ${className ?? ""}`, children: [_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Posts" }), _jsx("button", { type: "button", onClick: openCreate, className: "rounded-lg bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:opacity-90 dark:bg-zinc-100 dark:text-zinc-900", children: "New Post" })] }), admin.postsError && (_jsxs("p", { className: "text-sm text-red-600 dark:text-red-400", children: ["Error: ", admin.postsError] })), admin.postsLoading && admin.posts.length === 0 ? (_jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading posts\u2026" })) : (_jsx(PostListTable, { posts: admin.posts, blogBasePath: blogBasePath, onEdit: openEdit, onDelete: handleDelete }))] }), _jsxs("section", { children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: "Index Layout" }), admin.settingsError && (_jsxs("p", { className: "mb-2 text-sm text-red-600 dark:text-red-400", children: ["Error: ", admin.settingsError] })), admin.settingsState && (_jsx(LayoutSelector, { value: admin.settingsState.settings.indexLayout, persisted: admin.settingsState.persisted, onSelect: (next) => admin.updateSettings({ indexLayout: next }) }))] }), _jsx(PanelDialog, { open: dialogOpen, onClose: closeDialog, title: dialogTarget ? "Edit Post" : "New Post", headerActions: dialogTarget?.status === "published" ? (_jsx("button", { type: "button", onClick: () => setShowPreview((p) => !p), className: `rounded-md border px-3 py-1 text-xs font-medium transition-colors ${showPreview
+                        ? "border-zinc-900 bg-zinc-900 text-white dark:border-zinc-100 dark:bg-zinc-100 dark:text-zinc-900"
+                        : "border-zinc-200 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"}`, children: showPreview ? "Hide preview" : "Preview" })) : undefined, sideContent: showPreview && dialogTarget?.slug ? (_jsx(PostPreview, { url: `${blogBasePath.replace(/\/$/, "")}/${dialogTarget.slug}` })) : undefined, children: _jsx(PostForm, { post: dialogTarget ?? null, categories: admin.categories, endpoint: basePath, imageUploadEndpoint: resolvedImageUploadPath, fetchFn: fetchFn, onCancel: closeDialog, onSaved: () => {
                         closeDialog();
                         void admin.refetchPosts();
                     } }) })] }));

package/dist/ui/index.d.ts

@@ -2,5 +2,6 @@ export { BlogAdminPanel, type BlogAdminPanelProps } from "./blog-admin-panel.js"
 export { PostListTable, type PostListTableProps } from "./post-list-table.js";
 export { LayoutSelector, type LayoutSelectorProps } from "./layout-selector.js";
 export { PanelDialog, type PanelDialogProps } from "./panel-dialog.js";
+export { PostPreview, type PostPreviewProps } from "./post-preview.js";
 export { useBlogAdmin, type UseBlogAdminOptions, type UseBlogAdminResult, type BlogSettingsState, } from "./use-blog-admin.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,YAAY,EACZ,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,YAAY,EACZ,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAC"}

package/dist/ui/index.js

@@ -6,4 +6,5 @@ export { BlogAdminPanel } from "./blog-admin-panel.js";
 export { PostListTable } from "./post-list-table.js";
 export { LayoutSelector } from "./layout-selector.js";
 export { PanelDialog } from "./panel-dialog.js";
+export { PostPreview } from "./post-preview.js";
 export { useBlogAdmin, } from "./use-blog-admin.js";

package/dist/ui/panel-dialog.d.ts

@@ -4,7 +4,11 @@ export interface PanelDialogProps {
     onClose: () => void;
     title?: string;
     children: ReactNode;
+    /** When provided, dialog expands to a two-column layout with this on the right. */
+    sideContent?: ReactNode;
+    /** Rendered inline after the title (e.g. a toggle button). */
+    headerActions?: ReactNode;
     className?: string;
 }
-export declare function PanelDialog({ open, onClose, title, children, className }: PanelDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PanelDialog({ open, onClose, title, children, sideContent, headerActions, className }: PanelDialogProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=panel-dialog.d.ts.map

package/dist/ui/panel-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-dialog.d.ts","sourceRoot":"","sources":["../../src/ui/panel-dialog.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,kDAkC1F"}
+{"version":3,"file":"panel-dialog.d.ts","sourceRoot":"","sources":["../../src/ui/panel-dialog.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,mFAAmF;IACnF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,gBAAgB,kDAkDtH"}

package/dist/ui/panel-dialog.js

@@ -4,8 +4,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Deliberately NOT hazo_ui's Dialog (token-dependent — see the isolation
 // rule for src/ui/*). A plain fixed-position overlay + centered panel is
 // enough for an admin-panel context; no portal library needed.
+//
+// `sideContent` enables a split-pane layout: children on the left,
+// sideContent on the right, dialog widens to max-w-7xl. Used by
+// BlogAdminPanel to show a live article preview alongside the editor.
 import { useEffect } from "react";
-export function PanelDialog({ open, onClose, title, children, className }) {
+export function PanelDialog({ open, onClose, title, children, sideContent, headerActions, className }) {
     useEffect(() => {
         if (!open)
             return;
@@ -18,5 +22,6 @@ export function PanelDialog({ open, onClose, title, children, className }) {
     }, [open, onClose]);
     if (!open)
         return null;
-    return (_jsxs("div", { className: "fixed inset-0 z-[1000] flex items-center justify-center p-4", children: [_jsx("div", { className: "fixed inset-0 bg-black/50", onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": title, className: `relative z-10 max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-lg border border-zinc-200 bg-white p-6 shadow-xl dark:border-zinc-800 dark:bg-zinc-900 ${className ?? ""}`, children: [title && (_jsx("h2", { className: "mb-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100", children: title })), children] })] }));
+    const wide = !!sideContent;
+    return (_jsxs("div", { className: "fixed inset-0 z-[1000] flex items-center justify-center p-4", children: [_jsx("div", { className: "fixed inset-0 bg-black/50", onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": title, className: `relative z-10 max-h-[90vh] w-full rounded-lg border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-900 ${wide ? "max-w-7xl" : "max-w-2xl"} ${className ?? ""}`, children: [(title || headerActions) && (_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-100 px-6 py-4 dark:border-zinc-800", children: [title && (_jsx("h2", { className: "text-lg font-semibold text-zinc-900 dark:text-zinc-100", children: title })), headerActions && _jsx("div", { className: "flex items-center gap-2", children: headerActions })] })), wide ? (_jsxs("div", { className: "flex max-h-[calc(90vh-60px)] min-h-0", children: [_jsx("div", { className: "w-1/2 shrink-0 overflow-y-auto border-r border-zinc-100 p-6 dark:border-zinc-800", children: children }), _jsx("div", { className: "flex w-1/2 min-w-0 flex-col", children: sideContent })] })) : (_jsx("div", { className: "max-h-[calc(90vh-60px)] overflow-y-auto p-6", children: children }))] })] }));
 }

package/dist/ui/post-preview.d.ts

@@ -0,0 +1,7 @@
+export interface PostPreviewProps {
+    /** Full URL of the published post (e.g. "/guides/my-post"). */
+    url: string;
+    className?: string;
+}
+export declare function PostPreview({ url, className }: PostPreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=post-preview.d.ts.map

package/dist/ui/post-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-preview.d.ts","sourceRoot":"","sources":["../../src/ui/post-preview.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAiC/D"}

package/dist/ui/post-preview.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// hazo_blog/src/ui/post-preview.tsx — iframe-based published-article
+// preview for the admin edit dialog's side panel. TOKEN-FREE Tailwind
+// (same isolation rule as the rest of src/ui/*).
+import { useState } from "react";
+export function PostPreview({ url, className }) {
+    const [loading, setLoading] = useState(true);
+    return (_jsxs("div", { className: `flex h-full flex-col ${className ?? ""}`, children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-100 px-4 py-2 dark:border-zinc-800", children: [_jsx("span", { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400", children: "Published preview" }), _jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "text-xs font-medium text-zinc-600 hover:text-zinc-900 hover:underline dark:text-zinc-400 dark:hover:text-zinc-200", children: "Open in new tab \u2197" })] }), _jsxs("div", { className: "relative flex-1", children: [loading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-50 dark:bg-zinc-950", children: _jsx("span", { className: "text-sm text-zinc-400 dark:text-zinc-500", children: "Loading preview\u2026" }) })), _jsx("iframe", { src: url, title: "Post preview", className: "h-full w-full border-0", onLoad: () => setLoading(false) })] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_blog",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "SEO-optimized blogging package: posts, categories, tags, MDX content, and GA4/GSC/Bing-ready SEO.",
   "type": "module",
   "module": "./dist/index.js",
@@ -52,9 +52,9 @@
     "build:test-app": "npm run build && cd test-app && npm run build"
   },
   "peerDependencies": {
-    "hazo_core": "^2.2.0",
-    "hazo_connect": "^4.1.0",
-    "hazo_api": "^2.6.1",
+    "hazo_core": "^2.3.0",
+    "hazo_connect": "^4.2.0",
+    "hazo_api": "^2.7.0",
     "hazo_files": "^3.3.0",
     "hazo_theme": "^1.3.1",
     "hazo_ui": "^6.11.2",
@@ -99,9 +99,9 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "next": "^16.0.10",
-    "hazo_core": "^2.2.0",
-    "hazo_connect": "^4.1.0",
-    "hazo_api": "^2.6.1",
+    "hazo_core": "^2.3.0",
+    "hazo_connect": "^4.2.0",
+    "hazo_api": "^2.7.0",
     "hazo_files": "^3.3.0",
     "hazo_ui": "^6.11.2",
     "tailwindcss": "^4.2.4",