@canvas-digital/blog-sdk 2.0.0

package/README.md

@@ -0,0 +1,110 @@
+# @canvas-digital/blog-sdk
+
+Customer-facing SDK only. Install in **your** React / Next.js app and pass `email` +
+`apiKey` (+ optional `domain`). Those values are sent as **request headers** on every API call.
+
+**Not included:** Super admin. Platform operators add domains / issue keys only from the
+Blog Platform console (your own app + backend) — never via this npm package.
+
+| Surface | Who | How |
+|---------|-----|-----|
+| Super admin | You (platform) | Platform web app only — add domain, email, issue keys, manage blogs |
+| `mode="admin"` | Customer | SDK — `email` + admin `apiKey` headers |
+| `mode="user"` | Visitors | SDK — `email` + public `apiKey` (+ optional `domain`) headers |
+
+## Install
+
+```bash
+npm install @canvas-digital/blog-sdk
+```
+
+In your app entry (required for Admin / Yoast SEO styles):
+
+```tsx
+import "@canvas-digital/blog-sdk/style.css";
+import { BlogPlatform } from "@canvas-digital/blog-sdk";
+```
+
+## API endpoints (local)
+
+| | URL |
+|--|-----|
+| API base URL | http://localhost:8000 |
+| API v1 | http://localhost:8000/api/v1 |
+| Swagger UI | http://localhost:8000/docs |
+| ReDoc | http://localhost:8000/redoc |
+| Health | http://localhost:8000/health |
+
+Every SDK request sends:
+
+```http
+email: admin@example.com
+apiKey: bp_public_...   # or admin key
+domain: example.com     # optional
+```
+
+## Host app / package `.env` (API base URL)
+
+This package includes root `.env.example`. On a new machine:
+
+```bash
+cp .env.example .env
+```
+
+```bash
+# Platform API v1 (not the customer website)
+VITE_BLOG_API_URL=http://localhost:8000/api/v1
+```
+
+`email`, `apiKey`, and optional `domain` are **props** on `BlogPlatform`, not env vars in this package.
+
+## Usage in your React app
+
+```tsx
+import { BlogPlatform } from "@canvas-digital/blog-sdk";
+
+<BlogPlatform
+  mode="user"
+  email="admin@example.com"
+  apiKey="bp_public_..."
+  domain="example.com"
+  branding={{ name: "My Blog" }}
+/>
+
+<BlogPlatform
+  mode="admin"
+  email="admin@example.com"
+  apiKey="bp_admin_..."
+/>
+```
+
+### Required props
+
+| Prop | Meaning |
+|------|---------|
+| `mode` | `"user"` or `"admin"` |
+| `email` | Sent as `email` header |
+| `apiKey` | Sent as `apiKey` header |
+
+### Optional props
+
+| Prop | Meaning |
+|------|---------|
+| `domain` | Sent as `domain` header (and `X-Client-Domain`) |
+| `branding` | name, logo, colors, css |
+| `theme` | user UI layout/colors |
+| `adminTheme` | admin UI theme |
+| `timeoutMs` | request timeout |
+| `apiUrl` | override env API base URL (usually omit) |
+| `className` | wrapper class |
+
+## Develop this package
+
+```bash
+git pull
+cp .env.example .env   # once per machine
+npm install
+npm test
+npm run build
+npm run dev            # playground reads root .env
+```

package/dist/BlogPlatform.d.ts

@@ -0,0 +1,40 @@
+import type { AdminTheme, Branding as AdminBranding } from "./types/admin";
+import type { BlogTheme, Branding } from "./types/user";
+export type BlogPlatformMode = "user" | "admin";
+export type BlogPlatformProps = {
+    /**
+     * `"user"` — published blogs only (public API key).
+     * `"admin"` — full CRUD (admin API key).
+     */
+    mode: BlogPlatformMode;
+    /**
+     * Optional customer website domain — sent as the `domain` request header.
+     */
+    domain?: string;
+    /** API key — sent as the `apiKey` request header. */
+    apiKey: string;
+    /**
+     * Account email — sent as the `email` request header with `apiKey`.
+     * Required for both user and admin modes.
+     */
+    email: string;
+    /**
+     * Optional override for the platform API base URL.
+     * Prefer setting this in the host app `.env` instead:
+     * `VITE_BLOG_API_URL` or `NEXT_PUBLIC_BLOG_API_URL`
+     */
+    apiUrl?: string;
+    timeoutMs?: number;
+    theme?: BlogTheme;
+    branding?: Branding & AdminBranding;
+    adminTheme?: AdminTheme;
+    className?: string;
+};
+/**
+ * Drop into any React / Next.js app after `npm install @canvas-digital/blog-sdk`.
+ *
+ * - `email` + `apiKey` (+ optional `domain`) are sent as request headers
+ * - API base URL comes from your app `.env` (`VITE_BLOG_API_URL` / `NEXT_PUBLIC_BLOG_API_URL`)
+ */
+export declare function BlogPlatform({ mode, domain, apiKey: apiKeyProp, email: emailProp, apiUrl: apiUrlOverride, timeoutMs, theme, branding, adminTheme, className, }: BlogPlatformProps): import("react").JSX.Element;
+//# sourceMappingURL=BlogPlatform.d.ts.map

package/dist/BlogPlatform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogPlatform.d.ts","sourceRoot":"","sources":["../app/BlogPlatform.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IACpC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,cAAc,EACtB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,+BAwDnB"}

package/dist/BlogPlatform.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BlogAdmin } from "./pages/admin";
+import { UserBlogPage } from "./pages/user";
+import { normalizeDomain, resolveBlogApiUrl } from "./utils/env";
+/**
+ * Drop into any React / Next.js app after `npm install @canvas-digital/blog-sdk`.
+ *
+ * - `email` + `apiKey` (+ optional `domain`) are sent as request headers
+ * - API base URL comes from your app `.env` (`VITE_BLOG_API_URL` / `NEXT_PUBLIC_BLOG_API_URL`)
+ */
+export function BlogPlatform({ mode, domain, apiKey: apiKeyProp, email: emailProp, apiUrl: apiUrlOverride, timeoutMs, theme, branding, adminTheme, className, }) {
+    const clientDomain = normalizeDomain(domain);
+    const apiUrl = resolveBlogApiUrl(apiUrlOverride);
+    const apiKey = apiKeyProp.trim();
+    const email = emailProp?.trim() ?? "";
+    if (!apiKey || !email) {
+        return (_jsxs("div", { className: className, role: "alert", children: ["Provide ", _jsx("code", { children: "mode" }), ", ", _jsx("code", { children: "email" }), ", and ", _jsx("code", { children: "apiKey" }), " ", "(sent as request headers). ", _jsx("code", { children: "domain" }), " is optional."] }));
+    }
+    if (!apiUrl) {
+        return (_jsxs("div", { className: className, role: "alert", children: ["Set the Blog API base URL in your app ", _jsx("code", { children: ".env" }), " as", " ", _jsx("code", { children: "VITE_BLOG_API_URL" }), " or ", _jsx("code", { children: "NEXT_PUBLIC_BLOG_API_URL" }), " ", "(e.g. ", _jsx("code", { children: "https://api.yourplatform.com/api/v1" }), ")."] }));
+    }
+    if (mode === "admin") {
+        return (_jsx(BlogAdmin, { className: className, config: {
+                apiUrl,
+                adminApiKey: apiKey,
+                email,
+                domain: clientDomain || undefined,
+                timeoutMs,
+            }, theme: adminTheme, branding: branding }));
+    }
+    return (_jsx(UserBlogPage, { className: className, config: {
+            apiUrl,
+            publicApiKey: apiKey,
+            email,
+            domain: clientDomain || undefined,
+            timeoutMs,
+        }, theme: theme, branding: branding }));
+}

package/dist/admin/components/BlogAdmin.d.ts

@@ -0,0 +1,10 @@
+import type { AdminSdkConfig, AdminTheme, Branding } from "../types";
+export type AdminView = "posts" | "editor" | "categories" | "tags" | "media";
+export type BlogAdminProps = {
+    config: AdminSdkConfig;
+    theme?: AdminTheme;
+    branding?: Branding;
+    className?: string;
+};
+export declare function BlogAdmin({ config, theme, branding, className }: BlogAdminProps): import("react").JSX.Element;
+//# sourceMappingURL=BlogAdmin.d.ts.map

package/dist/admin/components/BlogAdmin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogAdmin.d.ts","sourceRoot":"","sources":["../../../app/admin/components/BlogAdmin.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAQ,QAAQ,EAAE,MAAM,UAAU,CAAC;AAO3E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE7E,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,+BA0E/E"}

package/dist/admin/components/BlogAdmin.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { BlogAdminClient } from "../../client";
+import { cx, themeVars, buttonStyle } from "../theme";
+import { CategoryManager } from "./CategoryManager";
+import { MediaManager } from "./MediaManager";
+import { PostEditor } from "./PostEditor";
+import { PostList } from "./PostList";
+import { TagManager } from "./TagManager";
+export function BlogAdmin({ config, theme, branding, className }) {
+    const client = useMemo(() => new BlogAdminClient(config), [config.apiUrl, config.adminApiKey, config.timeoutMs]);
+    const [view, setView] = useState("posts");
+    const [editingId, setEditingId] = useState(undefined);
+    const openEditor = (blog) => {
+        setEditingId(blog?.id);
+        setView("editor");
+    };
+    return (_jsxs("section", { className: cx("bp-admin", branding?.className, className), style: {
+            ...themeVars(theme, branding),
+            border: "1px solid var(--bp-color-border)",
+            borderRadius: "var(--bp-radius)",
+            padding: "1.25rem",
+            minHeight: 480,
+        }, children: [branding?.css ? _jsx("style", { children: branding.css }) : null, _jsxs("header", { className: "bp-admin__header", style: { display: "flex", gap: "0.75rem", alignItems: "center", marginBottom: "1rem" }, children: [branding?.logo ? (_jsx("img", { src: branding.logo, alt: branding.name ?? "Blog admin", style: { height: 32 } })) : null, _jsx("h1", { className: "bp-admin__brand", style: { fontFamily: "var(--bp-font-heading)", margin: 0, fontSize: "1.25rem" }, children: branding?.name ?? "Blog Management" })] }), _jsx("nav", { className: "bp-admin__nav", style: { display: "flex", gap: "0.5rem", marginBottom: "1.25rem", flexWrap: "wrap" }, children: [
+                    ["posts", "Posts"],
+                    ["categories", "Categories"],
+                    ["tags", "Tags"],
+                    ["media", "Media"],
+                ].map(([id, label]) => (_jsx("button", { type: "button", style: buttonStyle(view === id || (view === "editor" && id === "posts") ? "primary" : "ghost"), onClick: () => {
+                        setView(id);
+                        setEditingId(undefined);
+                    }, children: label }, id))) }), view === "posts" ? (_jsx(PostList, { client: client, onCreate: () => openEditor(), onEdit: openEditor })) : null, view === "editor" ? (_jsx(PostEditor, { client: client, blogId: editingId, onDone: () => {
+                    setEditingId(undefined);
+                    setView("posts");
+                } })) : null, view === "categories" ? _jsx(CategoryManager, { client: client }) : null, view === "tags" ? _jsx(TagManager, { client: client }) : null, view === "media" ? _jsx(MediaManager, { client: client }) : null] }));
+}

package/dist/admin/components/CategoryManager.d.ts

@@ -0,0 +1,5 @@
+import type { BlogAdminClient } from "../../client";
+export declare function CategoryManager({ client }: {
+    client: BlogAdminClient;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CategoryManager.d.ts.map

package/dist/admin/components/CategoryManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryManager.d.ts","sourceRoot":"","sources":["../../../app/admin/components/CategoryManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAOpD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,+BA+EtE"}

package/dist/admin/components/CategoryManager.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useAsync } from "../hooks/useAsync";
+import { slugify } from "../../client";
+import { buttonStyle } from "../theme";
+import { EmptyState, ErrorState, Field, LoadingState } from "./internal/States";
+export function CategoryManager({ client }) {
+    const state = useAsync(() => client.getCategories(), [client], (data) => data.length === 0);
+    const [name, setName] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+    const submit = async () => {
+        if (!name.trim()) {
+            return;
+        }
+        setBusy(true);
+        setError("");
+        try {
+            await client.createCategory({ name: name.trim(), slug: slugify(name) || undefined });
+            setName("");
+            state.reload();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unable to save category");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("section", { className: "bp-category-manager", children: [_jsx("h2", { children: "Categories" }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", marginBottom: "1rem" }, children: [_jsx(Field, { label: "Name", children: _jsx("input", { value: name, onChange: (event) => setName(event.target.value) }) }), _jsx("button", { type: "button", style: buttonStyle(), onClick: submit, disabled: busy, children: "Add" })] }), error ? _jsx(ErrorState, { message: error }) : null, state.status === "loading" ? _jsx(LoadingState, {}) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? _jsx(EmptyState, { label: "No categories yet." }) : null, state.status === "success" ? (_jsx("ul", { style: { listStyle: "none", padding: 0 }, children: state.data.map((category) => (_jsxs("li", { style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        gap: "1rem",
+                        padding: "0.6rem 0",
+                        borderBottom: "1px solid var(--bp-color-border)",
+                    }, children: [_jsxs("span", { children: [category.name, " ", _jsxs("small", { children: ["(", category.slug, ")"] })] }), _jsx("button", { type: "button", style: buttonStyle("danger"), onClick: async () => {
+                                if (!window.confirm(`Delete ${category.name}?`)) {
+                                    return;
+                                }
+                                await client.deleteCategory(category.id);
+                                state.reload();
+                            }, children: "Delete" })] }, category.id))) })) : null] }));
+}

package/dist/admin/components/MediaManager.d.ts

@@ -0,0 +1,7 @@
+import type { BlogAdminClient } from "../../client";
+import type { MediaAsset } from "../types";
+export declare function MediaManager({ client, onSelect, }: {
+    client: BlogAdminClient;
+    onSelect?: (asset: MediaAsset) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=MediaManager.d.ts.map

package/dist/admin/components/MediaManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaManager.d.ts","sourceRoot":"","sources":["../../../app/admin/components/MediaManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC,+BAmFA"}

package/dist/admin/components/MediaManager.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useAsync } from "../hooks/useAsync";
+import { buttonStyle } from "../theme";
+import { EmptyState, ErrorState, LoadingState } from "./internal/States";
+export function MediaManager({ client, onSelect, }) {
+    const state = useAsync(() => client.listMediaAssets({ page: 1, page_size: 50 }), [client], (data) => data.length === 0);
+    const [error, setError] = useState("");
+    return (_jsxs("section", { className: "bp-media-manager", children: [_jsx("h2", { children: "Media" }), _jsx("input", { type: "file", accept: "image/*,video/mp4,application/pdf", onChange: async (event) => {
+                    const file = event.target.files?.[0];
+                    event.target.value = "";
+                    if (!file) {
+                        return;
+                    }
+                    setError("");
+                    try {
+                        await client.uploadMedia(file);
+                        state.reload();
+                    }
+                    catch (err) {
+                        setError(err instanceof Error ? err.message : "Upload failed");
+                    }
+                } }), error ? _jsx(ErrorState, { message: error }) : null, state.status === "loading" ? _jsx(LoadingState, { label: "Loading media..." }) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? _jsx(EmptyState, { label: "No media uploaded." }) : null, state.status === "success" ? (_jsx("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
+                    gap: "0.75rem",
+                    marginTop: "1rem",
+                }, children: state.data.map((asset) => (_jsxs("article", { style: {
+                        border: "1px solid var(--bp-color-border)",
+                        borderRadius: "var(--bp-radius)",
+                        overflow: "hidden",
+                        background: "var(--bp-color-surface)",
+                    }, children: [asset.mime_type?.startsWith("image/") ? (_jsx("img", { src: asset.url, alt: asset.original_filename ?? asset.filename, style: { width: "100%", height: 120, objectFit: "cover" } })) : (_jsx("div", { style: { padding: "1rem" }, children: asset.original_filename ?? asset.filename })), _jsxs("div", { style: { padding: "0.6rem", display: "grid", gap: "0.35rem" }, children: [_jsx("small", { children: asset.original_filename ?? asset.filename }), onSelect ? (_jsx("button", { type: "button", style: buttonStyle(), onClick: () => onSelect(asset), children: "Use" })) : null, _jsx("button", { type: "button", style: buttonStyle("danger"), onClick: async () => {
+                                        await client.deleteMedia(asset.id);
+                                        state.reload();
+                                    }, children: "Delete" })] })] }, asset.id))) })) : null] }));
+}

package/dist/admin/components/PostEditor.d.ts

@@ -0,0 +1,7 @@
+import type { BlogAdminClient } from "../../client";
+export declare function PostEditor({ client, blogId, onDone, }: {
+    client: BlogAdminClient;
+    blogId?: string;
+    onDone: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PostEditor.d.ts.map

package/dist/admin/components/PostEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostEditor.d.ts","sourceRoot":"","sources":["../../../app/admin/components/PostEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AA4CpD,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,+BAiPA"}

package/dist/admin/components/PostEditor.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { slugify } from "../../client";
+import { buttonStyle } from "../theme";
+import { RichTextEditor } from "./editor/RichTextEditor";
+import { ErrorState, Field } from "./internal/States";
+const emptyForm = {
+    title: "",
+    slug: "",
+    excerpt: "",
+    content: "",
+    featured_image: "",
+    category_id: "",
+    status: "draft",
+    seo_title: "",
+    seo_description: "",
+    seo_keywords: "",
+    scheduled_at: "",
+};
+function toDatetimeLocal(value) {
+    if (!value) {
+        return "";
+    }
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return value.slice(0, 16);
+    }
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function toIsoDatetime(value) {
+    if (!value) {
+        return undefined;
+    }
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return value;
+    }
+    return date.toISOString();
+}
+export function PostEditor({ client, blogId, onDone, }) {
+    const [form, setForm] = useState(emptyForm);
+    const [categories, setCategories] = useState([]);
+    const [tags, setTags] = useState([]);
+    const [selectedTags, setSelectedTags] = useState([]);
+    const [error, setError] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [slugLocked, setSlugLocked] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        Promise.all([client.getCategories().catch(() => []), client.getTags().catch(() => [])]).then(([nextCategories, nextTags]) => {
+            if (!cancelled) {
+                setCategories(nextCategories);
+                setTags(nextTags);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    useEffect(() => {
+        if (!blogId) {
+            setForm(emptyForm);
+            setSelectedTags([]);
+            setSlugLocked(false);
+            return;
+        }
+        let cancelled = false;
+        client
+            .getBlog(blogId)
+            .then((blog) => {
+            if (cancelled) {
+                return;
+            }
+            setSlugLocked(true);
+            setForm({
+                title: blog.title,
+                slug: blog.slug,
+                excerpt: blog.excerpt ?? "",
+                content: blog.content,
+                featured_image: blog.featured_image ?? "",
+                category_id: blog.category_id ?? "",
+                status: blog.status ?? "draft",
+                seo_title: blog.seo_title ?? "",
+                seo_description: blog.seo_description ?? "",
+                seo_keywords: blog.seo_keywords ?? "",
+                scheduled_at: toDatetimeLocal(blog.scheduled_at),
+            });
+            setSelectedTags(blog.tags?.map((tag) => tag.id) ?? []);
+        })
+            .catch((err) => {
+            setError(err instanceof Error ? err.message : "Unable to load post");
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [blogId, client]);
+    const update = (patch) => {
+        setForm((current) => ({ ...current, ...patch }));
+    };
+    const persist = async (nextStatus) => {
+        if (!form.title.trim() || !form.content.trim()) {
+            setError("Title and content are required.");
+            return;
+        }
+        setBusy(true);
+        setError("");
+        const scheduledAt = toIsoDatetime(form.scheduled_at);
+        const payload = {
+            title: form.title.trim(),
+            content: form.content,
+            slug: form.slug.trim() || undefined,
+            excerpt: form.excerpt || undefined,
+            featured_image: form.featured_image || undefined,
+            category_id: form.category_id || undefined,
+            tag_ids: selectedTags,
+            status: nextStatus === "scheduled" || nextStatus === "published" || nextStatus === "archived"
+                ? "draft"
+                : nextStatus ?? form.status ?? "draft",
+            seo_title: form.seo_title || undefined,
+            seo_description: form.seo_description || undefined,
+            seo_keywords: form.seo_keywords || undefined,
+            scheduled_at: scheduledAt,
+        };
+        try {
+            const saved = blogId
+                ? await client.updateBlog(blogId, payload)
+                : await client.createBlog(payload);
+            if (nextStatus === "published") {
+                await client.publishBlog(saved.id);
+            }
+            if (nextStatus === "scheduled" && scheduledAt) {
+                await client.scheduleBlog(saved.id, scheduledAt);
+            }
+            if (nextStatus === "archived") {
+                await client.archiveBlog(saved.id);
+            }
+            onDone();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unable to save post");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("section", { className: "bp-post-editor", children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "1rem" }, children: [_jsx("h2", { style: { margin: 0 }, children: blogId ? "Edit post" : "Create post" }), _jsx("button", { type: "button", style: buttonStyle("ghost"), onClick: onDone, children: "Back" })] }), error ? _jsx(ErrorState, { message: error }) : null, _jsx(Field, { label: "Title", children: _jsx("input", { value: form.title, onChange: (event) => {
+                        const title = event.target.value;
+                        update({
+                            title,
+                            slug: slugLocked ? form.slug : slugify(title),
+                        });
+                    } }) }), _jsx(Field, { label: "Slug (optional \u2014 generated by API if empty)", children: _jsx("input", { value: form.slug, onChange: (event) => {
+                        setSlugLocked(true);
+                        update({ slug: event.target.value });
+                    } }) }), _jsx(Field, { label: "Excerpt", children: _jsx("textarea", { value: form.excerpt, onChange: (event) => update({ excerpt: event.target.value }), rows: 3 }) }), _jsx(Field, { label: "Featured image URL", children: _jsx("input", { value: form.featured_image, onChange: (event) => update({ featured_image: event.target.value }) }) }), _jsx(Field, { label: "Category", children: _jsxs("select", { value: form.category_id, onChange: (event) => update({ category_id: event.target.value }), children: [_jsx("option", { value: "", children: "None" }), categories.map((category) => (_jsx("option", { value: category.id, children: category.name }, category.id)))] }) }), tags.length > 0 ? (_jsx(Field, { label: "Tags", children: _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: tags.map((tag) => {
+                        const checked = selectedTags.includes(tag.id);
+                        return (_jsxs("label", { style: { display: "flex", gap: "0.3rem" }, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: () => setSelectedTags((current) => checked ? current.filter((id) => id !== tag.id) : [...current, tag.id]) }), tag.name] }, tag.id));
+                    }) }) })) : null, _jsx(Field, { label: "Content", children: _jsx(RichTextEditor, { value: form.content, onChange: (content) => update({ content }) }) }), _jsxs("details", { children: [_jsx("summary", { children: "SEO" }), _jsx(Field, { label: "SEO title", children: _jsx("input", { value: form.seo_title, onChange: (event) => update({ seo_title: event.target.value }) }) }), _jsx(Field, { label: "SEO description", children: _jsx("textarea", { value: form.seo_description, onChange: (event) => update({ seo_description: event.target.value }) }) }), _jsx(Field, { label: "SEO keywords", children: _jsx("input", { value: form.seo_keywords, onChange: (event) => update({ seo_keywords: event.target.value }) }) })] }), _jsx(Field, { label: "Schedule at", children: _jsx("input", { type: "datetime-local", value: form.scheduled_at, onChange: (event) => update({ scheduled_at: event.target.value }) }) }), _jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", marginTop: "1rem" }, children: [_jsx("button", { type: "button", style: buttonStyle("ghost"), disabled: busy, onClick: () => persist("draft"), children: "Save draft" }), _jsx("button", { type: "button", style: buttonStyle(), disabled: busy, onClick: () => persist("published"), children: "Publish" }), _jsx("button", { type: "button", style: buttonStyle("ghost"), disabled: busy || !form.scheduled_at, onClick: () => persist("scheduled"), children: "Schedule" }), blogId ? (_jsx("button", { type: "button", style: buttonStyle("danger"), disabled: busy, onClick: () => persist("archived"), children: "Archive" })) : null] })] }));
+}

package/dist/admin/components/PostList.d.ts

@@ -0,0 +1,8 @@
+import type { BlogAdminClient } from "../../client";
+import type { Blog } from "../types";
+export declare function PostList({ client, onCreate, onEdit, }: {
+    client: BlogAdminClient;
+    onCreate: () => void;
+    onEdit: (blog: Blog) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PostList.d.ts.map

package/dist/admin/components/PostList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostList.d.ts","sourceRoot":"","sources":["../../../app/admin/components/PostList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,KAAK,EAAE,IAAI,EAAc,MAAM,UAAU,CAAC;AAGjD,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,QAAQ,EACR,MAAM,GACP,EAAE;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9B,+BA8GA"}

package/dist/admin/components/PostList.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useAsync } from "../hooks/useAsync";
+import { buttonStyle } from "../theme";
+import { EmptyState, ErrorState, LoadingState } from "./internal/States";
+export function PostList({ client, onCreate, onEdit, }) {
+    const [search, setSearch] = useState("");
+    const [status, setStatus] = useState("");
+    const [page, setPage] = useState(1);
+    const state = useAsync(() => client.getBlogs({
+        page,
+        page_size: 20,
+        search: search || undefined,
+        status: status || undefined,
+    }), [client, page, search, status], (data) => data.items.length === 0);
+    return (_jsxs("section", { className: "bp-post-list", children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: "1rem", marginBottom: "1rem" }, children: [_jsx("h2", { style: { margin: 0 }, children: "Posts" }), _jsx("button", { type: "button", style: buttonStyle(), onClick: onCreate, children: "New post" })] }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", marginBottom: "1rem" }, children: [_jsx("input", { placeholder: "Search", value: search, onChange: (event) => {
+                            setPage(1);
+                            setSearch(event.target.value);
+                        } }), _jsxs("select", { value: status, onChange: (event) => {
+                            setPage(1);
+                            setStatus(event.target.value);
+                        }, children: [_jsx("option", { value: "", children: "All statuses" }), _jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "scheduled", children: "Scheduled" }), _jsx("option", { value: "published", children: "Published" }), _jsx("option", { value: "archived", children: "Archived" })] }), _jsx("button", { type: "button", style: buttonStyle("ghost"), onClick: () => state.reload(), children: "Refresh" })] }), state.status === "loading" ? _jsx(LoadingState, { label: "Loading Blog Admin..." }) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? _jsx(EmptyState, { label: "No posts yet." }) : null, state.status === "success" ? (_jsx(_Fragment, { children: _jsxs("table", { className: "bp-post-list__table", style: { width: "100%", borderCollapse: "collapse" }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { align: "left", children: "Title" }), _jsx("th", { align: "left", children: "Status" }), _jsx("th", { align: "left", children: "Slug" }), _jsx("th", { align: "left", children: "Actions" })] }) }), _jsx("tbody", { children: state.data.items.map((blog) => (_jsxs("tr", { children: [_jsx("td", { children: blog.title }), _jsx("td", { children: blog.status }), _jsx("td", { children: blog.slug }), _jsx("td", { children: _jsxs("div", { style: { display: "flex", gap: "0.35rem", flexWrap: "wrap" }, children: [_jsx("button", { type: "button", style: buttonStyle("ghost"), onClick: () => onEdit(blog), children: "Edit" }), _jsx("button", { type: "button", style: buttonStyle(), onClick: async () => {
+                                                        await client.publishBlog(blog.id);
+                                                        state.reload();
+                                                    }, children: "Publish" }), _jsx("button", { type: "button", style: buttonStyle("danger"), onClick: async () => {
+                                                        if (!window.confirm(`Delete ${blog.title}?`)) {
+                                                            return;
+                                                        }
+                                                        await client.deleteBlog(blog.id);
+                                                        state.reload();
+                                                    }, children: "Delete" })] }) })] }, blog.id))) })] }) })) : null] }));
+}

package/dist/admin/components/TagManager.d.ts

@@ -0,0 +1,5 @@
+import type { BlogAdminClient } from "../../client";
+export declare function TagManager({ client }: {
+    client: BlogAdminClient;
+}): import("react").JSX.Element;
+//# sourceMappingURL=TagManager.d.ts.map

package/dist/admin/components/TagManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagManager.d.ts","sourceRoot":"","sources":["../../../app/admin/components/TagManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAOpD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,+BA2EjE"}

package/dist/admin/components/TagManager.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useAsync } from "../hooks/useAsync";
+import { slugify } from "../../client";
+import { buttonStyle } from "../theme";
+import { EmptyState, ErrorState, Field, LoadingState } from "./internal/States";
+export function TagManager({ client }) {
+    const state = useAsync(() => client.getTags(), [client], (data) => data.length === 0);
+    const [name, setName] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+    const submit = async () => {
+        if (!name.trim()) {
+            return;
+        }
+        setBusy(true);
+        setError("");
+        try {
+            await client.createTag({ name: name.trim(), slug: slugify(name) || undefined });
+            setName("");
+            state.reload();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unable to save tag");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("section", { className: "bp-tag-manager", children: [_jsx("h2", { children: "Tags" }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "end", marginBottom: "1rem" }, children: [_jsx(Field, { label: "Name", children: _jsx("input", { value: name, onChange: (event) => setName(event.target.value) }) }), _jsx("button", { type: "button", style: buttonStyle(), onClick: submit, disabled: busy, children: "Add" })] }), error ? _jsx(ErrorState, { message: error }) : null, state.status === "loading" ? _jsx(LoadingState, {}) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? _jsx(EmptyState, { label: "No tags yet." }) : null, state.status === "success" ? (_jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: state.data.map((tag) => (_jsxs("span", { style: {
+                        display: "inline-flex",
+                        gap: "0.4rem",
+                        alignItems: "center",
+                        border: "1px solid var(--bp-color-border)",
+                        borderRadius: "999px",
+                        padding: "0.25rem 0.6rem",
+                    }, children: [tag.name, _jsx("button", { type: "button", style: buttonStyle("danger"), onClick: async () => {
+                                await client.deleteTag(tag.id);
+                                state.reload();
+                            }, children: "x" })] }, tag.id))) })) : null] }));
+}