hazo_blog 1.1.0 → 1.3.0

package/CHANGE_LOG.md

@@ -3,6 +3,64 @@
 All notable changes are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## 1.3.0 — 2026-09-20
+
+**Migrated onto the canonical `hazo_core/i18n` bridge**
+
+`src/lib/create_package_t.ts` (this package's local ~120-line copy of the `createPackageT`
+pattern) is deleted. All 13 call sites now import `createPackageT` from `hazo_core/i18n` — the
+canonical, workspace-shared version of the same bridge (flat-key catalog, `{{var}}` mustache
+interpolation, optional fire-and-forget registration into `hazo_i18n`'s cross-package registry
+when that package is installed). No `resolvePackageLocale` callers existed in this package, so
+none needed updating. `hazo_core` peer bumped to `^2.4.0` (first version shipping
+`hazo_core/i18n`); `hazo_i18n` peer bumped to `^0.5.0`.
+
+**Extracted ~68 residual hardcoded strings into `src/locales/en.json`**
+
+The admin/editorial UI surface — `PostForm`, `FeaturedImageField`, `BlogAdminPanel`,
+`PostListTable`, `LayoutSelector`, and `PostPreview` — had never been wired through `t()`. Every
+label, placeholder, button, status message, and error string across those six components is now a
+flat, literal-dotted key in `en.json` (`post_form.*`, `featured_image_field.*`,
+`blog_admin_panel.*`, `post_list_table.*`, `layout_selector.*`, `post_preview.*`), routed through a
+module-scope `t = createPackageT("hazo_blog", en)`. `en.json` now has 90 keys total, all
+referenced, zero orphans (verified by a full-repo cross-reference of every `t("...")` call against
+the catalog).
+
+**New `/autotest` scenario group: `hazo_blog_i18n`**
+
+`test-app/app/autotest/hazo_blog_i18n_scenarios.ts` — catalog loads (`t`/`t.has`/`t.raw` shape),
+sampled keys resolve across both pre-existing and newly-extracted areas, `{{var}}` interpolation
+substitutes correctly, and a coverage-threshold guard confirms every sampled key is a real
+`en.json` entry. Wired into `test-app/app/autotest/page.tsx` alongside the existing
+`hazo_blog_scenarios` group.
+
+## 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/components/admin/featured-image-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"featured-image-field.d.ts","sourceRoot":"","sources":["../../../src/components/admin/featured-image-field.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,uBAAuB;IACtC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,uBAAuB,2CA6GzB"}
+{"version":3,"file":"featured-image-field.d.ts","sourceRoot":"","sources":["../../../src/components/admin/featured-image-field.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,uBAAuB;IACtC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,uBAAuB,2CA+GzB"}

package/dist/components/admin/featured-image-field.js

@@ -3,6 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { cn } from "hazo_ui/utils";
 import { ImageIcon, TrashIcon, UploadIcon } from "../icons.js";
+import en from "../../locales/en.json" with { type: "json" };
+import { createPackageT } from "hazo_core/i18n";
+const t = createPackageT("hazo_blog", en);
 const inputCls = "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary";
 export function FeaturedImageField({ value, onChange, uploader, className, }) {
     const [uploading, setUploading] = useState(false);
@@ -20,7 +23,7 @@ export function FeaturedImageField({ value, onChange, uploader, className, }) {
                 onChange(url);
             }
             else {
-                setError("Upload failed — try again or paste a URL below.");
+                setError(t("featured_image_field.upload_failed"));
             }
         }
         finally {
@@ -34,13 +37,15 @@ export function FeaturedImageField({ value, onChange, uploader, className, }) {
             return;
         void handleFile(e.dataTransfer.files?.[0]);
     }
-    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Featured image" }), value ? (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("img", { src: value, alt: "Featured", className: "h-24 w-24 rounded-lg border border-border object-cover" }), _jsxs("button", { type: "button", onClick: () => onChange(""), className: "inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium hover:bg-accent", children: [_jsx(TrashIcon, { width: 16, height: 16 }), "Clear"] })] })) : (_jsxs("div", { onDragOver: (e) => {
+    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("featured_image_field.label") }), value ? (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("img", { src: value, alt: t("featured_image_field.alt_text"), className: "h-24 w-24 rounded-lg border border-border object-cover" }), _jsxs("button", { type: "button", onClick: () => onChange(""), className: "inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium hover:bg-accent", children: [_jsx(TrashIcon, { width: 16, height: 16 }), t("featured_image_field.clear")] })] })) : (_jsxs("div", { onDragOver: (e) => {
                     if (!uploader)
                         return;
                     e.preventDefault();
                     setDragOver(true);
-                }, onDragLeave: () => setDragOver(false), onDrop: onDrop, className: cn("flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted px-4 py-8 text-center", dragOver && "border-primary bg-accent"), children: [_jsx(ImageIcon, { width: 28, height: 28, className: "text-muted-foreground" }), _jsx("p", { className: "text-sm text-muted-foreground", children: uploader ? "Drag & drop an image, or" : "No image set — paste a URL below" }), uploader && (_jsxs("button", { type: "button", disabled: uploading, onClick: () => fileInputRef.current?.click(), className: "inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium hover:bg-accent disabled:opacity-50", children: [_jsx(UploadIcon, { width: 16, height: 16 }), uploading ? "Uploading…" : "Upload"] }))] })), uploader && (_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: (e) => {
+                }, onDragLeave: () => setDragOver(false), onDrop: onDrop, className: cn("flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted px-4 py-8 text-center", dragOver && "border-primary bg-accent"), children: [_jsx(ImageIcon, { width: 28, height: 28, className: "text-muted-foreground" }), _jsx("p", { className: "text-sm text-muted-foreground", children: uploader
+                            ? t("featured_image_field.drag_drop_or")
+                            : t("featured_image_field.no_image_set") }), uploader && (_jsxs("button", { type: "button", disabled: uploading, onClick: () => fileInputRef.current?.click(), className: "inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium hover:bg-accent disabled:opacity-50", children: [_jsx(UploadIcon, { width: 16, height: 16 }), uploading ? t("featured_image_field.uploading") : t("featured_image_field.upload")] }))] })), uploader && (_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: (e) => {
                     void handleFile(e.target.files?.[0]);
                     e.target.value = "";
-                } })), error && _jsx("p", { className: "text-sm text-destructive", children: error }), _jsx("input", { className: inputCls, value: value, onChange: (e) => onChange(e.target.value), placeholder: "https://\u2026" })] }));
+                } })), error && _jsx("p", { className: "text-sm text-destructive", children: error }), _jsx("input", { className: inputCls, value: value, onChange: (e) => onChange(e.target.value), placeholder: t("featured_image_field.url_placeholder") })] }));
 }

package/dist/components/admin/post-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"post-form.d.ts","sourceRoot":"","sources":["../../../src/components/admin/post-form.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7D,OAAO,KAAK,EACV,YAAY,EACZ,qBAAqB,EAGtB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,WAAW,aAAa;IAC5B,kDAAkD;IAClD,IAAI,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,kEAAkE;IAClE,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IAClE,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,UAAe,EACf,QAA4B,EAC5B,OAAO,EACP,MAAuB,EACvB,aAAa,EACb,mBAAmB,EACnB,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,2CAyQf"}
+{"version":3,"file":"post-form.d.ts","sourceRoot":"","sources":["../../../src/components/admin/post-form.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7D,OAAO,KAAK,EACV,YAAY,EACZ,qBAAqB,EAGtB,MAAM,sBAAsB,CAAC;AAQ9B,MAAM,WAAW,aAAa;IAC5B,kDAAkD;IAClD,IAAI,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,kEAAkE;IAClE,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IAClE,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,UAAe,EACf,QAA4B,EAC5B,OAAO,EACP,MAAuB,EACvB,aAAa,EACb,mBAAmB,EACnB,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,2CAyQf"}

package/dist/components/admin/post-form.js

@@ -6,6 +6,9 @@ import { cn } from "hazo_ui/utils";
 import { slugify } from "../../lib/text.js";
 import { createBlogImageUploader } from "./upload-image.js";
 import { FeaturedImageField } from "./featured-image-field.js";
+import en from "../../locales/en.json" with { type: "json" };
+import { createPackageT } from "hazo_core/i18n";
+const t = createPackageT("hazo_blog", en);
 const DEFAULT_EMBEDS = [
     { name: "youtube", label: "YT", snippet: '\n<YouTube id="VIDEO_ID" title="" />\n' },
     {
@@ -73,21 +76,21 @@ export function PostForm({ post, categories = [], endpoint = "/api/admin/blog",
                 body: JSON.stringify(payload),
             });
             if (!res.ok) {
-                setError(`Save failed (${res.status})`);
+                setError(t("post_form.save_failed_with_status", { status: res.status }));
                 return;
             }
             onSaved?.(await res.json());
         }
         catch {
-            setError("Save failed");
+            setError(t("post_form.save_failed"));
         }
         finally {
             setSaving(false);
         }
     }
     const inputCls = "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary";
-    return (_jsxs("form", { className: cn("space-y-5", className), onSubmit: (e) => e.preventDefault(), children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Title" }), _jsx("input", { className: inputCls, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Post title" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Slug" }), _jsx("input", { className: inputCls, value: slugTouched ? slug : effectiveSlug(), onChange: (e) => {
+    return (_jsxs("form", { className: cn("space-y-5", className), onSubmit: (e) => e.preventDefault(), children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("post_form.title_label") }), _jsx("input", { className: inputCls, value: title, onChange: (e) => setTitle(e.target.value), placeholder: t("post_form.title_placeholder") })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("post_form.slug_label") }), _jsx("input", { className: inputCls, value: slugTouched ? slug : effectiveSlug(), onChange: (e) => {
                             setSlugTouched(true);
                             setSlug(e.target.value);
-                        }, placeholder: "auto-generated-from-title" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Content (MDX)" }), _jsx(MarkdownEditor, { value: content, onChange: setContent, height: 480, embeds: embeds, onImageUpload: uploader, placeholder: "Write your post in Markdown / MDX\u2026" })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Category" }), _jsxs("select", { className: inputCls, value: categoryId, onChange: (e) => setCategoryId(e.target.value), children: [_jsx("option", { value: "", children: "\u2014 none \u2014" }), categories.map((c) => (_jsx("option", { value: c.id, children: c.name }, c.id)))] })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Tags (comma-separated)" }), _jsx("input", { className: inputCls, value: tags, onChange: (e) => setTags(e.target.value), placeholder: "guides, timers" })] })] }), _jsx(FeaturedImageField, { value: featuredImage, onChange: setFeaturedImage, uploader: uploader }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Locale" }), _jsx("input", { className: inputCls, value: locale, onChange: (e) => setLocale(e.target.value), placeholder: "e.g. fr, pt-BR (blank = default locale)" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Translation of (post ID)" }), _jsx("input", { className: inputCls, value: translationOf, onChange: (e) => setTranslationOf(e.target.value), placeholder: "Leave blank for the root post" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { id: "post-form-indexable", type: "checkbox", className: "h-4 w-4 rounded border-border accent-primary", checked: indexable, onChange: (e) => setIndexable(e.target.checked) }), _jsx("label", { htmlFor: "post-form-indexable", className: "text-sm font-medium", children: "Indexable (include in sitemap/robots)" })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Meta title (SEO)" }), _jsx("input", { className: inputCls, value: metaTitle, onChange: (e) => setMetaTitle(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Meta description (SEO)" }), _jsx("input", { className: inputCls, value: metaDescription, onChange: (e) => setMetaDescription(e.target.value) })] })] }), _jsxs("fieldset", { className: "rounded-lg border border-border p-4", children: [_jsx("legend", { className: "px-1 text-sm font-medium", children: "FAQ" }), faq.map((item, i) => (_jsxs("div", { className: "mb-2 grid gap-2 sm:grid-cols-2", children: [_jsx("input", { className: inputCls, value: item.question, placeholder: "Question", onChange: (e) => setFaq((prev) => prev.map((f, j) => (j === i ? { ...f, question: e.target.value } : f))) }), _jsx("input", { className: inputCls, value: item.answer, placeholder: "Answer", onChange: (e) => setFaq((prev) => prev.map((f, j) => (j === i ? { ...f, answer: e.target.value } : f))) })] }, i))), _jsx("button", { type: "button", className: "mt-1 text-sm text-primary hover:underline", onClick: () => setFaq((p) => [...p, { question: "", answer: "" }]), children: "+ Add FAQ item" })] }), error && _jsx("p", { className: "text-sm text-destructive", children: error }), _jsxs("div", { className: "flex gap-3", children: [onCancel && (_jsx("button", { type: "button", disabled: saving, onClick: onCancel, className: "rounded-lg border border-border px-4 py-2 text-sm font-medium hover:bg-accent disabled:opacity-50", children: "Cancel" })), _jsx("button", { type: "button", disabled: saving, onClick: () => save("draft"), className: "rounded-lg border border-border px-4 py-2 text-sm font-medium hover:bg-accent disabled:opacity-50", children: "Save draft" }), _jsx("button", { type: "button", disabled: saving, onClick: () => save("published"), className: "rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50", children: saving ? "Saving…" : "Publish" })] })] }));
+                        }, placeholder: t("post_form.slug_placeholder") })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("post_form.content_label") }), _jsx(MarkdownEditor, { value: content, onChange: setContent, height: 480, embeds: embeds, onImageUpload: uploader, placeholder: t("post_form.content_placeholder") })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("post_form.category_label") }), _jsxs("select", { className: inputCls, value: categoryId, onChange: (e) => setCategoryId(e.target.value), children: [_jsx("option", { value: "", children: t("post_form.category_none_option") }), categories.map((c) => (_jsx("option", { value: c.id, children: c.name }, c.id)))] })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("post_form.tags_label") }), _jsx("input", { className: inputCls, value: tags, onChange: (e) => setTags(e.target.value), placeholder: t("post_form.tags_placeholder") })] })] }), _jsx(FeaturedImageField, { value: featuredImage, onChange: setFeaturedImage, uploader: uploader }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("post_form.locale_label") }), _jsx("input", { className: inputCls, value: locale, onChange: (e) => setLocale(e.target.value), placeholder: t("post_form.locale_placeholder") })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("post_form.translation_of_label") }), _jsx("input", { className: inputCls, value: translationOf, onChange: (e) => setTranslationOf(e.target.value), placeholder: t("post_form.translation_of_placeholder") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { id: "post-form-indexable", type: "checkbox", className: "h-4 w-4 rounded border-border accent-primary", checked: indexable, onChange: (e) => setIndexable(e.target.checked) }), _jsx("label", { htmlFor: "post-form-indexable", className: "text-sm font-medium", children: t("post_form.indexable_label") })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("post_form.meta_title_label") }), _jsx("input", { className: inputCls, value: metaTitle, onChange: (e) => setMetaTitle(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: t("post_form.meta_description_label") }), _jsx("input", { className: inputCls, value: metaDescription, onChange: (e) => setMetaDescription(e.target.value) })] })] }), _jsxs("fieldset", { className: "rounded-lg border border-border p-4", children: [_jsx("legend", { className: "px-1 text-sm font-medium", children: t("post_form.faq_legend") }), faq.map((item, i) => (_jsxs("div", { className: "mb-2 grid gap-2 sm:grid-cols-2", children: [_jsx("input", { className: inputCls, value: item.question, placeholder: t("post_form.faq_question_placeholder"), onChange: (e) => setFaq((prev) => prev.map((f, j) => (j === i ? { ...f, question: e.target.value } : f))) }), _jsx("input", { className: inputCls, value: item.answer, placeholder: t("post_form.faq_answer_placeholder"), onChange: (e) => setFaq((prev) => prev.map((f, j) => (j === i ? { ...f, answer: e.target.value } : f))) })] }, i))), _jsx("button", { type: "button", className: "mt-1 text-sm text-primary hover:underline", onClick: () => setFaq((p) => [...p, { question: "", answer: "" }]), children: t("post_form.faq_add_item") })] }), error && _jsx("p", { className: "text-sm text-destructive", children: error }), _jsxs("div", { className: "flex gap-3", children: [onCancel && (_jsx("button", { type: "button", disabled: saving, onClick: onCancel, className: "rounded-lg border border-border px-4 py-2 text-sm font-medium hover:bg-accent disabled:opacity-50", children: t("post_form.cancel") })), _jsx("button", { type: "button", disabled: saving, onClick: () => save("draft"), className: "rounded-lg border border-border px-4 py-2 text-sm font-medium hover:bg-accent disabled:opacity-50", children: t("post_form.save_draft") }), _jsx("button", { type: "button", disabled: saving, onClick: () => save("published"), className: "rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50", children: saving ? t("post_form.saving") : t("post_form.publish") })] })] }));
 }

package/dist/components/author-bio.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from "next/image";
 import { cn } from "hazo_ui/utils";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 export function AuthorBio({ author, className }) {
     return (_jsxs("aside", { className: cn("my-8 flex items-center gap-4 rounded-xl border border-border bg-muted/30 p-5", className), children: [author.avatar && (_jsx(Image, { src: author.avatar, alt: author.name, width: 56, height: 56, className: "h-14 w-14 rounded-full object-cover" })), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t("author_bio.written_by") }), _jsx("a", { href: author.url, className: "font-semibold text-foreground hover:text-primary", children: author.name }), author.bio && _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: author.bio })] })] }));

package/dist/components/blog-search.js

@@ -7,7 +7,7 @@ import { cn } from "hazo_ui/utils";
 import { trackBlogEvent } from "../lib/analytics.js";
 import { SearchIcon } from "./icons.js";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 export function BlogSearch({ endpoint, basePath = "/blog", placeholder = t("blog_search.placeholder"), className, variant = "default", }) {
     const url = endpoint ?? `${basePath}/api/search`;

package/dist/components/faq-section.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "hazo_ui/utils";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 /** Renders FAQ as a no-JS <details> accordion (the FAQPage JSON-LD is emitted separately). */
 export function FaqSection({ faq, title = t("faq_section.title"), className }) {

package/dist/components/featured-post-card.js

@@ -8,7 +8,7 @@ import { cn } from "hazo_ui/utils";
 import { ClockIcon, ArrowRightIcon, ImageIcon } from "./icons.js";
 import { formatPostDate } from "../lib/dates.js";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 export function FeaturedPostCard({ post, basePath = "/blog", className }) {
     return (_jsxs("article", { className: cn("grid overflow-hidden rounded-3xl border border-border bg-card md:grid-cols-[3fr_2fr]", className), children: [_jsx("div", { className: "relative aspect-video w-full overflow-hidden md:aspect-auto md:h-full", children: post.featured_image ? (_jsx(Image, { src: post.featured_image, alt: post.title, fill: true, className: "object-cover", sizes: "(max-width: 768px) 100vw, 60vw", priority: true })) : (_jsx("div", { className: "flex h-full min-h-48 w-full items-center justify-center bg-gradient-to-br from-muted to-muted/50", children: _jsx(ImageIcon, { className: "h-12 w-12 text-muted-foreground/40" }) })) }), _jsxs("div", { className: "flex flex-col justify-center gap-4 p-6 sm:p-8 lg:p-10", children: [_jsxs("div", { className: "flex items-center gap-3 text-xs font-medium text-muted-foreground", children: [post.category && (_jsx("span", { className: "inline-block rounded-full px-2.5 py-0.5 text-xs font-medium", style: {

package/dist/components/layouts/blog-index-editorial.js

@@ -14,7 +14,7 @@ import { FeaturedPostCard } from "../featured-post-card.js";
 import { EditorialPostCard } from "../editorial-post-card.js";
 import { BlogSearch } from "../blog-search.js";
 import en from "../../locales/en.json" with { type: "json" };
-import { createPackageT } from "../../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 export function BlogIndexEditorial({ posts, basePath, searchEndpoint, query, page, totalPages, title = t("common.default_blog_title"), description, }) {
     const showFeatured = !query && posts.length > 0;

package/dist/components/layouts/blog-index-grid.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PostCard } from "../post-card.js";
 import { BlogSearch } from "../blog-search.js";
 import en from "../../locales/en.json" with { type: "json" };
-import { createPackageT } from "../../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 export function BlogIndexGrid({ posts, basePath, searchEndpoint, query, page, totalPages, title = t("common.default_blog_title"), }) {
     return (_jsxs("div", { className: "mx-auto max-w-6xl px-4 py-10", children: [_jsxs("div", { className: "mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold text-foreground", children: title }), query && (_jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [t("common.results_count", {

package/dist/components/mdx/youtube.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // <YouTube id="..." title="..." start={30} /> — privacy-friendly lazy embed.
 import { cn } from "hazo_ui/utils";
 import en from "../../locales/en.json" with { type: "json" };
-import { createPackageT } from "../../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 export function YouTube({ id, title = t("youtube.default_title"), start, className }) {
     const src = `https://www.youtube-nocookie.com/embed/${id}${start ? `?start=${start}` : ""}`;

package/dist/components/post-card.js

@@ -3,7 +3,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { cn } from "hazo_ui/utils";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 export function PostCard({ post, basePath = "/blog", className }) {
     return (_jsx("article", { className: cn("group overflow-hidden rounded-xl border border-border bg-card transition-shadow hover:shadow-md", className), children: _jsxs(Link, { href: `${basePath}/${post.slug}`, className: "block", children: [post.featured_image && (_jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: _jsx(Image, { src: post.featured_image, alt: post.title, fill: true, className: "object-cover transition-transform duration-300 group-hover:scale-105", sizes: "(max-width: 768px) 100vw, 33vw" }) })), _jsxs("div", { className: "p-5", children: [post.category && (_jsx("span", { className: "mb-2 inline-block rounded-full px-2.5 py-0.5 text-xs font-medium", style: {

package/dist/components/post-hero.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from "next/image";
 import { cn } from "hazo_ui/utils";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 function formatDate(value) {
     if (!value)

package/dist/components/related-posts.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "hazo_ui/utils";
 import { PostCard } from "./post-card.js";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 export function RelatedPosts({ posts, basePath = "/blog", title = t("related_posts.title"), className, }) {
     if (!posts || posts.length === 0)

package/dist/components/table-of-contents.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "hazo_ui/utils";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 export function TableOfContents({ headings, title = t("table_of_contents.title"), className }) {
     if (!headings || headings.length === 0)

package/dist/locales/en.json

@@ -20,5 +20,73 @@
     "index_page.meta_description": "Articles and guides from {{siteName}}.",
     "tag_page.heading_prefix": "Tagged:",
     "tag_page.no_posts": "No posts with this tag.",
-    "tag_page.meta_title": "{{tag}} | {{siteName}} Blog"
+    "tag_page.meta_title": "{{tag}} | {{siteName}} Blog",
+    "post_form.title_label": "Title",
+    "post_form.title_placeholder": "Post title",
+    "post_form.slug_label": "Slug",
+    "post_form.slug_placeholder": "auto-generated-from-title",
+    "post_form.content_label": "Content (MDX)",
+    "post_form.content_placeholder": "Write your post in Markdown / MDX…",
+    "post_form.category_label": "Category",
+    "post_form.category_none_option": "— none —",
+    "post_form.tags_label": "Tags (comma-separated)",
+    "post_form.tags_placeholder": "guides, timers",
+    "post_form.locale_label": "Locale",
+    "post_form.locale_placeholder": "e.g. fr, pt-BR (blank = default locale)",
+    "post_form.translation_of_label": "Translation of (post ID)",
+    "post_form.translation_of_placeholder": "Leave blank for the root post",
+    "post_form.indexable_label": "Indexable (include in sitemap/robots)",
+    "post_form.meta_title_label": "Meta title (SEO)",
+    "post_form.meta_description_label": "Meta description (SEO)",
+    "post_form.faq_legend": "FAQ",
+    "post_form.faq_question_placeholder": "Question",
+    "post_form.faq_answer_placeholder": "Answer",
+    "post_form.faq_add_item": "+ Add FAQ item",
+    "post_form.save_failed_with_status": "Save failed ({{status}})",
+    "post_form.save_failed": "Save failed",
+    "post_form.cancel": "Cancel",
+    "post_form.save_draft": "Save draft",
+    "post_form.saving": "Saving…",
+    "post_form.publish": "Publish",
+    "featured_image_field.label": "Featured image",
+    "featured_image_field.alt_text": "Featured",
+    "featured_image_field.clear": "Clear",
+    "featured_image_field.upload_failed": "Upload failed — try again or paste a URL below.",
+    "featured_image_field.drag_drop_or": "Drag & drop an image, or",
+    "featured_image_field.no_image_set": "No image set — paste a URL below",
+    "featured_image_field.upload": "Upload",
+    "featured_image_field.uploading": "Uploading…",
+    "featured_image_field.url_placeholder": "https://…",
+    "blog_admin_panel.posts_heading": "Posts",
+    "blog_admin_panel.new_post_button": "New Post",
+    "blog_admin_panel.error_prefix": "Error: {{message}}",
+    "blog_admin_panel.loading_posts": "Loading posts…",
+    "blog_admin_panel.index_layout_heading": "Index Layout",
+    "blog_admin_panel.edit_post_title": "Edit Post",
+    "blog_admin_panel.new_post_title": "New Post",
+    "blog_admin_panel.hide_preview": "Hide preview",
+    "blog_admin_panel.preview": "Preview",
+    "blog_admin_panel.delete_confirm": "Delete \"{{title}}\"? This cannot be undone.",
+    "blog_admin_panel.delete_failed": "Delete failed",
+    "post_list_table.search_placeholder": "Search title or slug…",
+    "post_list_table.filter_all": "All",
+    "post_list_table.filter_draft": "Draft",
+    "post_list_table.filter_published": "Published",
+    "post_list_table.filter_scheduled": "Scheduled",
+    "post_list_table.col_title": "Title",
+    "post_list_table.col_status": "Status",
+    "post_list_table.col_category": "Category",
+    "post_list_table.col_published": "Published",
+    "post_list_table.no_posts_found": "No posts found.",
+    "post_list_table.untitled": "(untitled)",
+    "post_list_table.edit": "Edit",
+    "post_list_table.delete": "Delete",
+    "layout_selector.not_persisted_notice": "Settings table not migrated — layout is read-only.",
+    "layout_selector.save_failed": "Failed to save layout",
+    "layout_selector.saving": "Saving…",
+    "layout_selector.active": "Active",
+    "post_preview.heading": "Published preview",
+    "post_preview.open_in_new_tab": "Open in new tab",
+    "post_preview.loading": "Loading preview…",
+    "post_preview.iframe_title": "Post preview"
 }

package/dist/next/blog-content.js

@@ -8,7 +8,7 @@ import remarkGfm from "remark-gfm";
 import { defaultMdxComponents } from "../components/mdx/index.js";
 import { sanitizeMdx } from "../lib/text.js";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 // MDXRemote is an async RSC but TypeScript surfaces it as ComponentType via
 // React 18 JSX types. Cast to the actual async-function signature so we can

package/dist/next/pages.js

@@ -27,7 +27,7 @@ import { BlogContent } from "./blog-content.js";
 import { BLOG_INDEX_LAYOUTS } from "../components/layouts/index.js";
 import { formatPostDate } from "../lib/dates.js";
 import en from "../locales/en.json" with { type: "json" };
-import { createPackageT } from "../lib/create_package_t.js";
+import { createPackageT } from "hazo_core/i18n";
 const t = createPackageT("hazo_blog", en);
 function JsonLd({ data }) {
     // Escape `<` (and the line/para separators) so author-supplied strings can't

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":"AAwBA,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,2CAiIrB"}

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

@@ -13,10 +13,15 @@ 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";
+import en from "../locales/en.json" with { type: "json" };
+import { createPackageT } from "hazo_core/i18n";
+const t = createPackageT("hazo_blog", en);
 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,21 +32,27 @@ 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.`)) {
+        if (typeof window !== "undefined" &&
+            !window.confirm(t("blog_admin_panel.delete_confirm", { title: post.title || post.slug }))) {
             return;
         }
         try {
             await admin.deletePost(post.id);
         }
         catch (err) {
-            const message = err instanceof Error ? err.message : "Delete failed";
+            const message = err instanceof Error ? err.message : t("blog_admin_panel.delete_failed");
             if (typeof window !== "undefined")
                 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: t("blog_admin_panel.posts_heading") }), _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: t("blog_admin_panel.new_post_button") })] }), admin.postsError && (_jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: t("blog_admin_panel.error_prefix", { message: admin.postsError }) })), admin.postsLoading && admin.posts.length === 0 ? (_jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: t("blog_admin_panel.loading_posts") })) : (_jsx(PostListTable, { posts: admin.posts, blogBasePath: blogBasePath, onEdit: openEdit, onDelete: handleDelete }))] }), _jsxs("section", { children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: t("blog_admin_panel.index_layout_heading") }), admin.settingsError && (_jsx("p", { className: "mb-2 text-sm text-red-600 dark:text-red-400", children: t("blog_admin_panel.error_prefix", { message: 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
+                    ? t("blog_admin_panel.edit_post_title")
+                    : t("blog_admin_panel.new_post_title"), 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 ? t("blog_admin_panel.hide_preview") : t("blog_admin_panel.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/layout-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-selector.d.ts","sourceRoot":"","sources":["../../src/ui/layout-selector.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAExG,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAmE5F"}
+{"version":3,"file":"layout-selector.d.ts","sourceRoot":"","sources":["../../src/ui/layout-selector.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMxG,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAmE5F"}

package/dist/ui/layout-selector.js

@@ -8,6 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // and a banner explains why (an update would just 503).
 import { useEffect, useState } from "react";
 import { BLOG_INDEX_LAYOUT_META, BLOG_INDEX_LAYOUT_IDS } from "../lib/layouts.js";
+import en from "../locales/en.json" with { type: "json" };
+import { createPackageT } from "hazo_core/i18n";
+const t = createPackageT("hazo_blog", en);
 export function LayoutSelector({ value, persisted, onSelect, className }) {
     const [current, setCurrent] = useState(value);
     const [saving, setSaving] = useState(null);
@@ -28,17 +31,17 @@ export function LayoutSelector({ value, persisted, onSelect, className }) {
         }
         catch (err) {
             setCurrent(previous); // revert
-            setError(err instanceof Error ? err.message : "Failed to save layout");
+            setError(err instanceof Error ? err.message : t("layout_selector.save_failed"));
         }
         finally {
             setSaving(null);
         }
     }
-    return (_jsxs("div", { className: className, children: [!persisted && (_jsx("p", { className: "mb-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300", children: "Settings table not migrated \u2014 layout is read-only." })), error && _jsx("p", { className: "mb-3 text-sm text-red-600 dark:text-red-400", children: error }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: BLOG_INDEX_LAYOUT_IDS.map((id) => {
+    return (_jsxs("div", { className: className, children: [!persisted && (_jsx("p", { className: "mb-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300", children: t("layout_selector.not_persisted_notice") })), error && _jsx("p", { className: "mb-3 text-sm text-red-600 dark:text-red-400", children: error }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: BLOG_INDEX_LAYOUT_IDS.map((id) => {
                     const meta = BLOG_INDEX_LAYOUT_META[id];
                     const selected = current === id;
                     return (_jsxs("button", { type: "button", disabled: !persisted || saving !== null, onClick: () => void handleSelect(id), className: `rounded-lg border p-4 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${selected
                             ? "border-zinc-900 bg-zinc-50 dark:border-zinc-100 dark:bg-zinc-800"
-                            : "border-zinc-200 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-900"}`, "aria-pressed": selected, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: meta.label }), selected && (_jsx("span", { className: "rounded-full bg-zinc-900 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-white dark:bg-zinc-100 dark:text-zinc-900", children: saving === id ? "Saving…" : "Active" }))] }), _jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: meta.description })] }, id));
+                            : "border-zinc-200 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-900"}`, "aria-pressed": selected, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: meta.label }), selected && (_jsx("span", { className: "rounded-full bg-zinc-900 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-white dark:bg-zinc-100 dark:text-zinc-900", children: saving === id ? t("layout_selector.saving") : t("layout_selector.active") }))] }), _jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: meta.description })] }, id));
                 }) })] }));
 }

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-list-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"post-list-table.d.ts","sourceRoot":"","sources":["../../src/ui/post-list-table.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,qBAAqB,EAAc,MAAM,mBAAmB,CAAC;AAG3E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAsB,EACtB,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,kBAAkB,2CAmHpB"}
+{"version":3,"file":"post-list-table.d.ts","sourceRoot":"","sources":["../../src/ui/post-list-table.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,qBAAqB,EAAc,MAAM,mBAAmB,CAAC;AAO3E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAsB,EACtB,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,kBAAkB,2CAmHpB"}

package/dist/ui/post-list-table.js

@@ -10,11 +10,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // hazo_theme's CSS variables.
 import { useMemo, useState } from "react";
 import { formatPostDate } from "../lib/dates.js";
+import en from "../locales/en.json" with { type: "json" };
+import { createPackageT } from "hazo_core/i18n";
+const t = createPackageT("hazo_blog", en);
 const STATUS_FILTERS = [
-    { label: "All", value: "all" },
-    { label: "Draft", value: "draft" },
-    { label: "Published", value: "published" },
-    { label: "Scheduled", value: "scheduled" },
+    { label: t("post_list_table.filter_all"), value: "all" },
+    { label: t("post_list_table.filter_draft"), value: "draft" },
+    { label: t("post_list_table.filter_published"), value: "published" },
+    { label: t("post_list_table.filter_scheduled"), value: "scheduled" },
 ];
 const STATUS_PILL_CLASS = {
     draft: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300",
@@ -37,7 +40,7 @@ export function PostListTable({ posts, blogBasePath = "/blog", onEdit, onDelete,
             return post.title.toLowerCase().includes(q) || post.slug.toLowerCase().includes(q);
         });
     }, [posts, query, statusFilter]);
-    return (_jsxs("div", { className: `space-y-3 ${className ?? ""}`, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search title or slug\u2026", className: "w-full max-w-xs rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-900 outline-none focus:ring-2 focus:ring-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: STATUS_FILTERS.map((f) => (_jsx("button", { type: "button", onClick: () => setStatusFilter(f.value), className: `rounded-full border px-3 py-1 text-xs font-medium transition-colors ${statusFilter === f.value
+    return (_jsxs("div", { className: `space-y-3 ${className ?? ""}`, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: t("post_list_table.search_placeholder"), className: "w-full max-w-xs rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-900 outline-none focus:ring-2 focus:ring-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: STATUS_FILTERS.map((f) => (_jsx("button", { type: "button", onClick: () => setStatusFilter(f.value), className: `rounded-full border px-3 py-1 text-xs font-medium transition-colors ${statusFilter === f.value
                                 ? "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-800 dark:text-zinc-300 dark:hover:bg-zinc-800"}`, children: f.label }, f.value))) })] }), _jsx("div", { className: "overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-800", children: _jsxs("table", { className: "w-full min-w-[720px] border-collapse text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-zinc-50 dark:bg-zinc-900", children: [_jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-left font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: "Title" }), _jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-left font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: "Status" }), _jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-left font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: "Category" }), _jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-left font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: "Published" }), _jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-right font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: "\u00A0" })] }) }), _jsx("tbody", { children: filtered.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: 5, className: "px-3 py-8 text-center text-zinc-400", children: "No posts found." }) })) : (filtered.map((post) => (_jsxs("tr", { className: "odd:bg-white even:bg-zinc-50 dark:odd:bg-zinc-950 dark:even:bg-zinc-900/50", children: [_jsx("td", { className: "max-w-xs truncate border-b border-zinc-100 px-3 py-2 dark:border-zinc-800", children: _jsx("a", { href: `${blogBasePath.replace(/\/$/, "")}/${post.slug}`, target: "_blank", rel: "noopener noreferrer", className: "font-medium text-zinc-900 hover:underline dark:text-zinc-100", children: post.title || "(untitled)" }) }), _jsx("td", { className: "border-b border-zinc-100 px-3 py-2 dark:border-zinc-800", children: _jsx(StatusPill, { status: post.status }) }), _jsx("td", { className: "border-b border-zinc-100 px-3 py-2 text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: post.category?.name ?? "—" }), _jsx("td", { className: "whitespace-nowrap border-b border-zinc-100 px-3 py-2 text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: formatPostDate(post.publish_date) || "—" }), _jsxs("td", { className: "whitespace-nowrap border-b border-zinc-100 px-3 py-2 text-right dark:border-zinc-800", children: [_jsx("button", { type: "button", onClick: () => onEdit(post), className: "mr-2 rounded-md border border-zinc-200 px-2.5 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800", children: "Edit" }), _jsx("button", { type: "button", onClick: () => void onDelete(post), className: "rounded-md border border-red-200 px-2.5 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:border-red-900 dark:text-red-400 dark:hover:bg-red-950", children: "Delete" })] })] }, post.id)))) })] }) })] }));
+                                : "border-zinc-200 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-800"}`, children: f.label }, f.value))) })] }), _jsx("div", { className: "overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-800", children: _jsxs("table", { className: "w-full min-w-[720px] border-collapse text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-zinc-50 dark:bg-zinc-900", children: [_jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-left font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: t("post_list_table.col_title") }), _jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-left font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: t("post_list_table.col_status") }), _jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-left font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: t("post_list_table.col_category") }), _jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-left font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: t("post_list_table.col_published") }), _jsx("th", { className: "border-b border-zinc-200 px-3 py-2 text-right font-semibold text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: "\u00A0" })] }) }), _jsx("tbody", { children: filtered.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: 5, className: "px-3 py-8 text-center text-zinc-400", children: t("post_list_table.no_posts_found") }) })) : (filtered.map((post) => (_jsxs("tr", { className: "odd:bg-white even:bg-zinc-50 dark:odd:bg-zinc-950 dark:even:bg-zinc-900/50", children: [_jsx("td", { className: "max-w-xs truncate border-b border-zinc-100 px-3 py-2 dark:border-zinc-800", children: _jsx("a", { href: `${blogBasePath.replace(/\/$/, "")}/${post.slug}`, target: "_blank", rel: "noopener noreferrer", className: "font-medium text-zinc-900 hover:underline dark:text-zinc-100", children: post.title || t("post_list_table.untitled") }) }), _jsx("td", { className: "border-b border-zinc-100 px-3 py-2 dark:border-zinc-800", children: _jsx(StatusPill, { status: post.status }) }), _jsx("td", { className: "border-b border-zinc-100 px-3 py-2 text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: post.category?.name ?? "—" }), _jsx("td", { className: "whitespace-nowrap border-b border-zinc-100 px-3 py-2 text-zinc-600 dark:border-zinc-800 dark:text-zinc-300", children: formatPostDate(post.publish_date) || "—" }), _jsxs("td", { className: "whitespace-nowrap border-b border-zinc-100 px-3 py-2 text-right dark:border-zinc-800", children: [_jsx("button", { type: "button", onClick: () => onEdit(post), className: "mr-2 rounded-md border border-zinc-200 px-2.5 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800", children: t("post_list_table.edit") }), _jsx("button", { type: "button", onClick: () => void onDelete(post), className: "rounded-md border border-red-200 px-2.5 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:border-red-900 dark:text-red-400 dark:hover:bg-red-950", children: t("post_list_table.delete") })] })] }, post.id)))) })] }) })] }));
 }

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":"AAYA,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,13 @@
+"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";
+import en from "../locales/en.json" with { type: "json" };
+import { createPackageT } from "hazo_core/i18n";
+const t = createPackageT("hazo_blog", en);
+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: t("post_preview.heading") }), _jsxs("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: [t("post_preview.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: t("post_preview.loading") }) })), _jsx("iframe", { src: url, title: t("post_preview.iframe_title"), 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.3.0",
   "description": "SEO-optimized blogging package: posts, categories, tags, MDX content, and GA4/GSC/Bing-ready SEO.",
   "type": "module",
   "module": "./dist/index.js",
@@ -52,16 +52,16 @@
     "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_files": "^3.3.0",
-    "hazo_theme": "^1.3.1",
-    "hazo_ui": "^6.11.2",
-    "hazo_images": "^1.10.0",
+    "hazo_core": "^2.4.0",
+    "hazo_connect": "^4.3.0",
+    "hazo_api": "^2.8.0",
+    "hazo_files": "^3.4.0",
+    "hazo_theme": "^1.4.0",
+    "hazo_ui": "^6.12.0",
+    "hazo_images": "^1.11.0",
     "hazo_jobs": "^0.19.0",
-    "hazo_auth": "^10.18.4",
-    "hazo_i18n": "^0.3.0",
+    "hazo_auth": "^10.19.0",
+    "hazo_i18n": "^0.5.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "next": "^14.0.0 || ^16.0.0"
@@ -99,11 +99,11 @@
     "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_files": "^3.3.0",
-    "hazo_ui": "^6.11.2",
+    "hazo_core": "^2.4.0",
+    "hazo_connect": "^4.3.0",
+    "hazo_api": "^2.8.0",
+    "hazo_files": "^3.4.0",
+    "hazo_ui": "^6.12.0",
     "tailwindcss": "^4.2.4",
     "@tailwindcss/postcss": "^4.2.4",
     "postcss": "^8.4.49"