@rimelight/cms 0.0.2 → 0.0.3

package/src/admin/pages/pages-index.astro

@@ -0,0 +1,146 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
+import RLABadge from "@rimelight/ui/components/badge/RLABadge.astro";
+import RLATable from "@rimelight/ui/components/table/RLATable.astro";
+import type { TableColumn } from "@rimelight/ui/components/table/table.ts";
+import { db } from "virtual:rimelight-cms/db";
+import { pages } from "../../schema/pages.ts";
+import { desc, isNull } from "drizzle-orm";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+
+let pagesList: any[] = [];
+if (db) {
+  try {
+    pagesList = await db
+      .select()
+      .from(pages)
+      .where(isNull(pages.deletedAt))
+      .orderBy(desc(pages.createdAt));
+  } catch (err) {
+    console.warn("Failed to fetch pages:", err);
+  }
+}
+
+const formattedPages = pagesList.map((page) => {
+  const titleVal =
+    typeof page.title === "object" && page.title !== null
+      ? (page.title as Record<string, string>).en || ""
+      : String(page.title || "");
+  return {
+    id: page.id,
+    title: titleVal,
+    slug: page.slug,
+    type: page.type || "page",
+    status: page.publishedVersionId ? "published" : "draft",
+    publishedVersionId: page.publishedVersionId,
+    createdAt: page.createdAt
+  };
+});
+
+const columns: TableColumn[] = [
+  { id: "title", accessorKey: "title", header: "Title", enableSorting: true },
+  { id: "slug", accessorKey: "slug", header: "Slug", enableSorting: true },
+  { id: "type", accessorKey: "type", header: "Type", enableSorting: true },
+  { id: "status", accessorKey: "status", header: "Status", enableSorting: true },
+  { id: "actions", header: "Actions", enableSorting: false, meta: { class: { th: "text-right", td: "text-right" } } }
+];
+---
+
+<CMSDashboardLayout title="Pages" description="Manage CMS pages" activeSection="pages">
+  <Fragment slot="toolbar-right">
+    <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/pages/new")} variant="solid" color="success" leadingIcon="i-lucide-plus">
+      Create Page
+    </RLAButton>
+  </Fragment>
+
+  <RLATable
+    columns={columns}
+    data={formattedPages}
+    searchable
+    searchPlaceholder="Search pages..."
+    showColumnsToggle
+    hoverable
+    striped
+    class="w-full"
+  >
+    {formattedPages.map((page) => (
+      <tr class="hover:bg-muted/20 transition-colors" data-slot="tr" data-row-id={page.id}>
+        <td class="p-3.5 text-sm font-medium text-highlighted" data-col-id="title" data-slot="td">
+          {page.title}
+        </td>
+        <td class="p-3.5 text-sm text-muted font-mono text-xs" data-col-id="slug" data-slot="td">
+          {page.slug}
+        </td>
+        <td class="p-3.5" data-col-id="type" data-slot="td">
+          <RLABadge variant="soft" color="blue" size="xs">
+            {page.type}
+          </RLABadge>
+        </td>
+        <td class="p-3.5" data-col-id="status" data-slot="td">
+          {page.status === "published" ? (
+            <RLABadge variant="soft" color="green" size="xs">Published</RLABadge>
+          ) : (
+            <RLABadge variant="soft" color="yellow" size="xs">Draft</RLABadge>
+          )}
+        </td>
+        <td class="p-3.5 text-right whitespace-nowrap" data-col-id="actions" data-slot="td">
+          <div class="flex items-center justify-end gap-2">
+            <RLAButton
+              href={getRelativeLocaleUrl(currentLocale, `/cms/pages/${page.id}/edit`)}
+              variant="ghost"
+              color="primary"
+              size="xs"
+            >
+              Edit
+            </RLAButton>
+            <RLAButton
+              href={getRelativeLocaleUrl(currentLocale, `/cms/pages/${page.id}/preview`)}
+              variant="ghost"
+              color="neutral"
+              size="xs"
+            >
+              Preview
+            </RLAButton>
+            <RLAButton
+              variant="ghost"
+              color="error"
+              size="xs"
+              class="delete-page-btn"
+              data-page-id={page.id}
+            >
+              Delete
+            </RLAButton>
+          </div>
+        </td>
+      </tr>
+    ))}
+  </RLATable>
+
+  <script>
+    document.querySelectorAll(".delete-page-btn").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        const pageId = (btn as HTMLElement).dataset.pageId;
+        if (!pageId) return;
+        if (!confirm("Are you sure you want to delete this page?")) return;
+
+        try {
+          const res = await fetch(`/api/cms/pages/${pageId}`, {
+            method: "DELETE"
+          });
+          if (res.ok) {
+            window.location.reload();
+          } else {
+            alert("Failed to delete page");
+          }
+        } catch {
+          alert("Error deleting page");
+        }
+      });
+    });
+  </script>
+</CMSDashboardLayout>

package/src/admin/pages/pages-new.astro

@@ -0,0 +1,130 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
+import RLAInput from "@rimelight/ui/components/input/RLAInput.astro";
+import RLASelect from "@rimelight/ui/components/select/RLASelect.astro";
+import { db } from "virtual:rimelight-cms/db";
+import { pageTemplates } from "../../schema/page_templates.ts";
+import { desc } from "drizzle-orm";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+
+let templates: any[] = [];
+if (db) {
+  try {
+    templates = await db
+      .select()
+      .from(pageTemplates)
+      .orderBy(desc(pageTemplates.createdAt));
+  } catch (err) {
+    console.warn("Failed to fetch templates:", err);
+  }
+}
+
+const url = new URL(Astro.request.url);
+const selectedTemplateId = url.searchParams.get("templateId") || "";
+const selectedTemplate = templates.find((t: any) => t.id === selectedTemplateId);
+
+const templateOptions = [
+  { label: "Blank Page", value: "" },
+  ...templates.map((t: any) => ({
+    label: `${typeof t.title === "object" ? t.title.en || t.title : t.title} (${t.pageType})`,
+    value: t.id
+  }))
+];
+---
+
+<CMSDashboardLayout title="Create Page" description="Create a new CMS page" activeSection="pages">
+  <div class="max-w-3xl mx-auto space-y-6">
+    <form id="page-form" class="bg-elevated/40 border border-default p-6 rounded-2xl shadow space-y-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label class="block text-sm font-medium text-highlighted mb-2">Slug</label>
+          <RLAInput name="slug" required />
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-highlighted mb-2">Type</label>
+          <RLASelect
+            name="type"
+            placeholder="Select page type..."
+            value={selectedTemplate?.pageType || "blog"}
+            items={[
+              { label: "Blog Post", value: "blog" },
+              { label: "Wiki Page", value: "wiki" },
+              { label: "Documentation", value: "doc" },
+              { label: "Announcement", value: "announcement" }
+            ]}
+            required
+          />
+        </div>
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Title</label>
+        <RLAInput name="title" required />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Template</label>
+        <RLASelect
+          name="templateId"
+          placeholder="Select template..."
+          value={selectedTemplateId}
+          items={templateOptions}
+        />
+      </div>
+
+      <div class="border-t border-default pt-6 flex items-center justify-end gap-3">
+        <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/pages")} variant="outline" color="neutral" size="sm">
+          Cancel
+        </RLAButton>
+        <RLAButton variant="solid" color="primary" size="sm" leadingIcon="i-lucide-plus" type="submit">
+          Create & Edit
+        </RLAButton>
+      </div>
+    </form>
+  </div>
+
+  <script is:inline define:vars={{ currentLocale }}>
+    const form = document.getElementById('page-form');
+    
+    form?.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const formData = new FormData(form);
+      const rawTmplId = formData.get('templateId');
+      const templateId =
+        rawTmplId && rawTmplId !== 'null' && String(rawTmplId).trim() !== ''
+          ? String(rawTmplId).trim()
+          : null;
+
+      const data = {
+        slug: formData.get('slug'),
+        type: formData.get('type'),
+        title: formData.get('title'),
+        templateId
+      };
+
+      try {
+        const response = await fetch('/api/cms/pages', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+          const result = (await response.json());
+          window.location.href = `/${currentLocale}/cms/pages/${result.page.id}/edit`;
+        } else {
+          const errorData = (await response.json().catch(() => ({})));
+          alert(`Failed to create page: ${errorData.error || 'Unknown error'}`);
+        }
+      } catch {
+        alert('Error creating page: Network error');
+      }
+    });
+  </script>
+</CMSDashboardLayout>

package/src/admin/pages/pages-preview.astro

@@ -0,0 +1,111 @@
+---
+import PageRenderer from "../../astro/PageRenderer.astro";
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
+import { db } from "virtual:rimelight-cms/db";
+import { pages, pageDrafts } from "../../schema";
+import { eq } from "drizzle-orm";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+import { verifyPreviewToken } from "../../core/preview.ts";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+const id = Astro.params.id;
+
+if (!id) {
+  return Astro.redirect(getRelativeLocaleUrl(currentLocale, "/cms/pages"));
+}
+
+const token = Astro.url.searchParams.get("token");
+const secret = process.env.BETTER_AUTH_SECRET || "rimelight-preview-secret-key";
+if (token) {
+  await verifyPreviewToken(id, token, secret);
+}
+
+let page: any = null;
+let draft: any = null;
+
+if (db) {
+  try {
+    const pageResult = await db.select().from(pages).where(eq(pages.id, id as any)).limit(1);
+    page = pageResult[0] || null;
+    if (page) {
+      const draftResult = await db.select().from(pageDrafts).where(eq(pageDrafts.pageId, id as any)).limit(1);
+      draft = draftResult[0] || null;
+    }
+  } catch (err) {
+    console.warn("Failed to load page for preview:", err);
+  }
+}
+
+if (!page) {
+  return Astro.redirect(getRelativeLocaleUrl(currentLocale, "/cms/pages"));
+}
+
+const parseContent = (c: any) => (typeof c === "string" ? JSON.parse(c) : c);
+const content = draft?.content ? parseContent(draft.content) : parseContent(page.content);
+
+const titleVal =
+  typeof page.title === "object" && page.title !== null
+    ? (page.title as Record<string, string>)[currentLocale] || (page.title as Record<string, string>).en || ""
+    : String(page.title || "");
+---
+
+<CMSDashboardLayout title={`Preview: ${titleVal}`} description="Preview CMS page" activeSection="pages">
+  <Fragment slot="toolbar-right">
+    <div class="flex items-center gap-2">
+      <button
+        id="share-preview-btn"
+        type="button"
+        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-primary bg-primary/10 border border-primary/20 rounded-md hover:bg-primary/20 transition-colors cursor-pointer"
+      >
+        <span class="i-lucide-share-2 size-3.5"></span>
+        <span id="share-btn-text">Share Preview Link</span>
+      </button>
+
+      <RLAButton href={getRelativeLocaleUrl(currentLocale, `/cms/pages/${id}/edit`)} variant="outline" color="neutral" size="sm" leadingIcon="i-lucide-arrow-left">
+        Back to Editor
+      </RLAButton>
+    </div>
+  </Fragment>
+
+  <div class="max-w-4xl mx-auto space-y-6">
+    <div class="bg-primary/10 border border-primary/20 p-4 rounded-lg flex items-center justify-between">
+      <p class="text-sm text-primary font-medium">Live Preview Mode — displaying current draft</p>
+      <span class="text-xs px-2.5 py-0.5 bg-primary/20 text-primary rounded-full font-mono">Draft</span>
+    </div>
+
+    <div class="bg-elevated/40 rounded-xl shadow-sm border border-default p-8">
+      <h1 class="text-3xl font-bold text-highlighted mb-6">{titleVal}</h1>
+      <PageRenderer 
+        blocks={content?.blocks || []} 
+        locale={currentLocale}
+        class="prose prose-lg max-w-none"
+      />
+    </div>
+  </div>
+
+  <script is:inline define:vars={{ pageId: id }}>
+    const shareBtn = document.getElementById("share-preview-btn");
+    const shareText = document.getElementById("share-btn-text");
+
+    shareBtn?.addEventListener("click", async () => {
+      if (shareText) shareText.textContent = "Generating...";
+      try {
+        const res = await fetch(`/api/cms/pages/${pageId}/preview-token`, { method: "POST" });
+        if (!res.ok) throw new Error("Failed to generate token");
+        const data = await res.json();
+        const fullUrl = `${window.location.origin}${data.previewUrl}`;
+        await navigator.clipboard.writeText(fullUrl);
+        if (shareText) shareText.textContent = "Copied to Clipboard!";
+        setTimeout(() => {
+          if (shareText) shareText.textContent = "Share Preview Link";
+        }, 3000);
+      } catch {
+        alert("Could not generate preview link");
+        if (shareText) shareText.textContent = "Share Preview Link";
+      }
+    });
+  </script>
+</CMSDashboardLayout>

package/src/admin/pages/pages-review.astro

@@ -0,0 +1,236 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
+import RLABadge from "@rimelight/ui/components/badge/RLABadge.astro";
+import { db } from "virtual:rimelight-cms/db";
+import { pages, pageDrafts, pageVersions } from "../../schema";
+import { eq, desc } from "drizzle-orm";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+import { diffPageSnapshots } from "../../core/diff.ts";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+const id = Astro.params.id;
+
+if (!id) {
+  return Astro.redirect(getRelativeLocaleUrl(currentLocale, "/cms/pages"));
+}
+
+let page: any = null;
+let draft: any = null;
+let versions: any[] = [];
+
+if (db) {
+  try {
+    const pageResult = await db.select().from(pages).where(eq(pages.id, id as any)).limit(1);
+    page = pageResult[0] || null;
+    if (page) {
+      const draftResult = await db.select().from(pageDrafts).where(eq(pageDrafts.pageId, id as any)).limit(1);
+      draft = draftResult[0] || null;
+      versions = await db
+        .select()
+        .from(pageVersions)
+        .where(eq(pageVersions.pageId, id as any))
+        .orderBy(desc(pageVersions.versionNumber))
+        .limit(10);
+    }
+  } catch (err) {
+    console.warn("Failed to load review data:", err);
+  }
+}
+
+if (!page) {
+  return Astro.redirect(getRelativeLocaleUrl(currentLocale, "/cms/pages"));
+}
+
+const parseJson = (val: any) => (typeof val === "string" ? JSON.parse(val) : val);
+const publishedSnapshot = { ...page, content: parseJson(page.content) };
+const draftSnapshot = draft ? { ...page, content: parseJson(draft.content) } : publishedSnapshot;
+
+const diffResult = diffPageSnapshots(publishedSnapshot, draftSnapshot);
+
+const titleVal =
+  typeof page.title === "object" && page.title !== null
+    ? (page.title as Record<string, string>)[currentLocale] || (page.title as Record<string, string>).en || ""
+    : String(page.title || "");
+---
+
+<CMSDashboardLayout title={`Review & Diffs: ${titleVal}`} description="Review content changes and block diffs" activeSection="pages">
+  <Fragment slot="toolbar-right">
+    <div class="flex items-center gap-2">
+      <RLAButton href={getRelativeLocaleUrl(currentLocale, `/cms/pages/${id}/preview`)} variant="outline" color="neutral" size="sm" leadingIcon="i-lucide-eye">
+        Live Preview
+      </RLAButton>
+      <button
+        id="approve-publish-btn"
+        type="button"
+        class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-md hover:bg-emerald-700 transition-colors shadow-sm cursor-pointer disabled:opacity-50"
+      >
+        <span class="i-lucide-check-circle size-4"></span>
+        <span id="approve-btn-text">Approve & Publish</span>
+      </button>
+    </div>
+  </Fragment>
+
+  <div class="max-w-4xl mx-auto space-y-8 pb-12">
+    <!-- Diff Summary Statistics -->
+    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+      <div class="bg-elevated/40 p-4 rounded-xl border border-default shadow-sm text-center">
+        <p class="text-xs font-semibold text-emerald-500 uppercase">Blocks Added</p>
+        <p class="text-3xl font-bold text-emerald-500 mt-1">+{diffResult.summary.addedCount}</p>
+      </div>
+      <div class="bg-elevated/40 p-4 rounded-xl border border-default shadow-sm text-center">
+        <p class="text-xs font-semibold text-error-500 uppercase">Blocks Removed</p>
+        <p class="text-3xl font-bold text-error-500 mt-1">-{diffResult.summary.removedCount}</p>
+      </div>
+      <div class="bg-elevated/40 p-4 rounded-xl border border-default shadow-sm text-center">
+        <p class="text-xs font-semibold text-warning-500 uppercase">Blocks Modified</p>
+        <p class="text-3xl font-bold text-warning-500 mt-1">~{diffResult.summary.modifiedCount}</p>
+      </div>
+      <div class="bg-elevated/40 p-4 rounded-xl border border-default shadow-sm text-center">
+        <p class="text-xs font-semibold text-muted uppercase">Unchanged</p>
+        <p class="text-3xl font-bold text-highlighted mt-1">{diffResult.summary.unchangedCount}</p>
+      </div>
+    </div>
+
+    <!-- Metadata Diffs -->
+    {diffResult.metaChanges.length > 0 && (
+      <div class="bg-elevated/40 rounded-xl shadow-sm border border-default p-6">
+        <h2 class="text-lg font-semibold text-highlighted mb-4">Metadata Changes</h2>
+        <div class="divide-y divide-default">
+          {diffResult.metaChanges.map((change) => (
+            <div class="py-3 flex items-start justify-between">
+              <span class="text-sm font-mono text-highlighted font-semibold">{change.field}</span>
+              <div class="text-sm text-right space-y-1">
+                <p class="text-error-500 line-through font-mono text-xs">{JSON.stringify(change.oldValue)}</p>
+                <p class="text-emerald-500 font-mono text-xs">{JSON.stringify(change.newValue)}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )}
+
+    <!-- Block-by-Block Visual Diff -->
+    <div class="bg-elevated/40 rounded-xl shadow-sm border border-default p-6 space-y-4">
+      <div class="flex items-center justify-between border-b border-default pb-4">
+        <div>
+          <h2 class="text-lg font-semibold text-highlighted">Block-Level Comparison</h2>
+          <p class="text-sm text-muted">Visual breakdown comparing published content vs working draft</p>
+        </div>
+        <RLABadge variant="soft" color="primary" size="sm">Smart Diff</RLABadge>
+      </div>
+
+      <div class="space-y-3">
+        {diffResult.blocks.map((blockDiff) => (
+          <div class={`p-4 rounded-lg border text-sm ${
+            blockDiff.status === 'added' ? 'bg-emerald-950/20 border-emerald-800/40' :
+            blockDiff.status === 'removed' ? 'bg-error-950/20 border-error-800/40' :
+            blockDiff.status === 'modified' ? 'bg-warning-950/20 border-warning-800/40' :
+            'bg-elevated/20 border-default opacity-75'
+          }`}>
+            <div class="flex items-center justify-between mb-2">
+              <div class="flex items-center gap-2">
+                <span class={`text-xs px-2 py-0.5 rounded font-mono font-semibold uppercase ${
+                  blockDiff.status === 'added' ? 'bg-emerald-500/20 text-emerald-400' :
+                  blockDiff.status === 'removed' ? 'bg-error-500/20 text-error-400' :
+                  blockDiff.status === 'modified' ? 'bg-warning-500/20 text-warning-400' :
+                  'bg-muted text-muted'
+                }`}>
+                  {blockDiff.status}
+                </span>
+                <span class="font-semibold text-highlighted">{blockDiff.type}</span>
+              </div>
+              <span class="text-xs font-mono text-muted">{blockDiff.blockId.slice(0, 8)}...</span>
+            </div>
+
+            {blockDiff.fieldChanges && blockDiff.fieldChanges.length > 0 ? (
+              <div class="space-y-2 mt-2 pt-2 border-t border-warning-500/30">
+                {blockDiff.fieldChanges.map((change) => (
+                  <div class="text-xs font-mono">
+                    <span class="font-bold text-highlighted">{change.field}:</span>
+                    <div class="grid grid-cols-2 gap-2 mt-1">
+                      <div class="p-2 bg-error-950/30 text-error-400 rounded break-words">
+                        - {JSON.stringify(change.oldValue)}
+                      </div>
+                      <div class="p-2 bg-emerald-950/30 text-emerald-400 rounded break-words">
+                        + {JSON.stringify(change.newValue)}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p class="text-xs text-muted font-mono">
+                {JSON.stringify((blockDiff.newBlock || blockDiff.oldBlock)?.props || {})}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <!-- Version History List -->
+    <div class="bg-elevated/40 rounded-xl shadow-sm border border-default p-6">
+      <h2 class="text-lg font-semibold text-highlighted mb-4">Version History & Snapshots</h2>
+      <div class="space-y-2">
+        {versions.map((v) => (
+          <div class="flex items-center justify-between p-3 rounded-lg border border-default hover:bg-elevated/50 transition-colors">
+            <div class="flex items-center gap-3">
+              <span class="text-xs font-mono px-2 py-1 bg-elevated text-highlighted rounded font-semibold border border-default">
+                v{v.versionNumber}
+              </span>
+              <div>
+                <p class="text-sm font-medium text-highlighted">{v.changeSummary || "Snapshot"}</p>
+                <p class="text-xs text-muted">{new Date(v.createdAt).toLocaleString()}</p>
+              </div>
+            </div>
+            <span class={`text-xs px-2 py-0.5 rounded font-mono ${
+              v.status === 'published' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-muted text-muted'
+            }`}>
+              {v.status}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+
+  <script is:inline define:vars={{ pageId: id, draftContent: draftSnapshot.content }}>
+    const approveBtn = document.getElementById("approve-publish-btn");
+    const btnText = document.getElementById("approve-btn-text");
+
+    approveBtn?.addEventListener("click", async () => {
+      if (!confirm("Are you sure you want to approve and publish these changes?")) return;
+
+      if (approveBtn) approveBtn.disabled = true;
+      if (btnText) btnText.textContent = "Publishing...";
+
+      try {
+        const res = await fetch(`/api/cms/pages/${pageId}/publish`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            content: draftContent,
+            changeSummary: "Approved via CMS Review"
+          })
+        });
+
+        if (!res.ok) {
+          const err = await res.json();
+          alert(err.error || "Failed to publish version");
+        } else {
+          if (btnText) btnText.textContent = "Published!";
+          setTimeout(() => {
+            window.location.reload();
+          }, 1500);
+        }
+      } catch (err) {
+        alert("Failed to publish version");
+      } finally {
+        if (approveBtn) approveBtn.disabled = false;
+      }
+    });
+  </script>
+</CMSDashboardLayout>