@rimelight/cms 0.0.1 → 0.0.3

package/src/admin/pages/assets.astro

@@ -0,0 +1,424 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLABadge from "@rimelight/ui/components/badge/RLABadge.astro";
+import RLAIcon from "@rimelight/ui/components/icon/RLAIcon.astro";
+import RLAInput from "@rimelight/ui/components/input/RLAInput.astro";
+import { getR2Bucket, listR2Files } from "../../storage/index";
+import { storageConfig } from "virtual:rimelight-cms/storage";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+const bindingName = storageConfig?.binding ?? "BLOB";
+const bucket = await getR2Bucket(Astro.locals, bindingName);
+
+let initialFiles: any[] = [];
+let errorMsg: string | null = null;
+
+if (bucket) {
+  try {
+    const apiBasePath = getRelativeLocaleUrl(currentLocale, "/cms/api/media/file");
+    const result = await listR2Files(bucket, {
+      prefix: storageConfig?.prefix ?? "media/",
+      publicUrl: storageConfig?.publicUrl,
+      apiBasePath
+    });
+    initialFiles = result.files;
+  } catch (err: any) {
+    errorMsg = err.message || "Failed to query R2 bucket";
+  }
+} else {
+  errorMsg = `Storage binding "${bindingName}" is not available in runtime environment. Ensure R2 bucket is configured in wrangler.jsonc.`;
+}
+
+const apiEndpoint = getRelativeLocaleUrl(currentLocale, "/cms/api/media");
+
+function formatFileSize(bytes?: number): string {
+  if (!bytes || bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
+}
+
+function formatDate(dateStr?: string): string {
+  if (!dateStr) return "-";
+  try {
+    const d = new Date(dateStr);
+    return d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+  } catch {
+    return dateStr;
+  }
+}
+---
+
+<CMSDashboardLayout title="Assets" description="Cloudflare R2 media library and file storage" activeSection="assets">
+  <Fragment slot="toolbar-right">
+    <label class="cursor-pointer inline-flex">
+      <input type="file" id="media-upload-input" class="hidden" multiple />
+      <span class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md transition-colors shadow-sm">
+        <RLAIcon name="i-lucide-upload" class="size-4" />
+        <span>Upload Asset</span>
+      </span>
+    </label>
+  </Fragment>
+
+  <div class="flex flex-col gap-6" id="assets-page-root" data-api-endpoint={apiEndpoint}>
+    <!-- Toolbar: Search & Filters -->
+    <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4">
+      <div class="flex items-center gap-3 flex-1 max-w-md">
+        <RLAInput id="media-search-input" placeholder="Search assets by name or key..." leadingIcon="i-lucide-search" class="w-full" />
+      </div>
+
+      <div class="flex items-center gap-1.5 overflow-x-auto pb-1 sm:pb-0" id="media-type-filters">
+        <button type="button" data-filter="all" class="px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-white transition-colors filter-btn">
+          All
+        </button>
+        <button type="button" data-filter="image" class="px-3 py-1.5 rounded-md text-xs font-medium bg-muted text-muted-foreground hover:text-highlighted transition-colors filter-btn">
+          Images
+        </button>
+        <button type="button" data-filter="video" class="px-3 py-1.5 rounded-md text-xs font-medium bg-muted text-muted-foreground hover:text-highlighted transition-colors filter-btn">
+          Videos
+        </button>
+        <button type="button" data-filter="audio" class="px-3 py-1.5 rounded-md text-xs font-medium bg-muted text-muted-foreground hover:text-highlighted transition-colors filter-btn">
+          Audio
+        </button>
+        <button type="button" data-filter="document" class="px-3 py-1.5 rounded-md text-xs font-medium bg-muted text-muted-foreground hover:text-highlighted transition-colors filter-btn">
+          Documents
+        </button>
+      </div>
+    </div>
+
+    <!-- Drag & Drop Zone -->
+    <div
+      id="media-dropzone"
+      class="border-2 border-dashed border-default hover:border-primary/60 rounded-xl p-8 flex flex-col items-center justify-center text-center gap-3 transition-colors bg-default/40 group cursor-pointer"
+    >
+      <div class="size-12 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
+        <RLAIcon name="i-lucide-cloud-upload" class="size-6 text-primary" />
+      </div>
+      <div>
+        <p class="font-medium text-sm text-highlighted">Drag and drop files here, or click to browse</p>
+        <p class="text-xs text-muted mt-1">Supports images, videos, audio, and documents up to R2 bucket limit</p>
+      </div>
+      <div id="upload-status-indicator" class="hidden text-xs font-medium text-primary flex items-center gap-2 mt-2">
+        <span class="size-2 rounded-full bg-primary animate-ping"></span>
+        <span>Uploading files to R2...</span>
+      </div>
+    </div>
+
+    <!-- Storage Bucket Status Banner if not connected -->
+    {errorMsg && (
+      <div class="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-4 flex items-start gap-3 text-sm text-yellow-200">
+        <RLAIcon name="i-lucide-alert-triangle" class="size-5 text-yellow-400 shrink-0 mt-0.5" />
+        <div class="flex flex-col gap-1">
+          <span class="font-semibold text-yellow-300">R2 Storage Binding Notice</span>
+          <span class="text-xs text-yellow-200/80">{errorMsg}</span>
+        </div>
+      </div>
+    )}
+
+    <!-- Empty State -->
+    <div id="media-empty-state" class={initialFiles.length === 0 ? "flex flex-col items-center justify-center p-12 text-center" : "hidden flex-col items-center justify-center p-12 text-center"}>
+      <RLAIcon name="i-lucide-folder-open" class="size-12 text-muted mb-3" />
+      <h3 class="font-medium text-highlighted text-base">No assets found</h3>
+      <p class="text-xs text-muted mt-1 max-w-sm">Upload files using the button above or drag and drop files into the upload area.</p>
+    </div>
+
+    <!-- Assets Grid -->
+    <div id="media-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {initialFiles.map((asset) => (
+        <div
+          class="border border-default rounded-lg bg-default overflow-hidden flex flex-col hover:border-primary/50 transition-all group asset-card"
+          data-key={asset.key}
+          data-name={asset.name}
+          data-type={asset.mimeType}
+          data-url={asset.url}
+        >
+          <div class="h-40 bg-muted/30 flex items-center justify-center relative overflow-hidden">
+            {asset.mimeType.startsWith("image/") ? (
+              <img src={asset.url} alt={asset.name} class="size-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            ) : asset.mimeType.startsWith("video/") ? (
+              <div class="flex flex-col items-center gap-2 text-primary">
+                <RLAIcon name="i-lucide-film" class="size-10 text-primary" />
+                <span class="text-[10px] uppercase font-mono tracking-wider">Video</span>
+              </div>
+            ) : asset.mimeType.startsWith("audio/") ? (
+              <div class="flex flex-col items-center gap-2 text-primary">
+                <RLAIcon name="i-lucide-music" class="size-10 text-primary" />
+                <span class="text-[10px] uppercase font-mono tracking-wider">Audio</span>
+              </div>
+            ) : (
+              <div class="flex flex-col items-center gap-2 text-muted">
+                <RLAIcon name="i-lucide-file-text" class="size-10 text-muted" />
+                <span class="text-[10px] uppercase font-mono tracking-wider">Document</span>
+              </div>
+            )}
+
+            <RLABadge variant="solid" color="neutral" size="xs" class="absolute top-2 right-2 uppercase font-mono text-[10px] backdrop-blur-md bg-default/80">
+              {asset.mimeType.split("/")[1] || "FILE"}
+            </RLABadge>
+          </div>
+
+          <div class="p-4 flex flex-col gap-1 flex-1">
+            <p class="font-medium text-sm text-highlighted truncate" title={asset.name}>{asset.name}</p>
+            <div class="flex items-center justify-between text-xs text-muted mt-1">
+              <span>{formatFileSize(asset.size)}</span>
+              <span>{formatDate(asset.uploadedAt)}</span>
+            </div>
+
+            <div class="flex items-center justify-between gap-2 mt-4 pt-3 border-t border-default/50">
+              <button
+                type="button"
+                class="copy-url-btn text-xs font-medium text-muted hover:text-highlighted flex items-center gap-1.5 transition-colors"
+                data-url={asset.url}
+              >
+                <RLAIcon name="i-lucide-copy" class="size-3.5" />
+                <span>Copy URL</span>
+              </button>
+
+              <button
+                type="button"
+                class="delete-asset-btn text-xs font-medium text-error hover:text-error/80 flex items-center gap-1 transition-colors"
+                data-key={asset.key}
+              >
+                <RLAIcon name="i-lucide-trash-2" class="size-3.5" />
+                <span>Delete</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</CMSDashboardLayout>
+
+<script>
+  (function () {
+    const root = document.getElementById("assets-page-root");
+    if (!root) return;
+
+    const apiEndpoint = root.dataset.apiEndpoint || "/cms/api/media";
+    const uploadInput = document.getElementById("media-upload-input") as HTMLInputElement | null;
+    const dropzone = document.getElementById("media-dropzone");
+    const indicator = document.getElementById("upload-status-indicator");
+    const searchInput = document.getElementById("media-search-input") as HTMLInputElement | null;
+    const filterBtns = document.querySelectorAll(".filter-btn");
+    const mediaGrid = document.getElementById("media-grid");
+    const emptyState = document.getElementById("media-empty-state");
+
+    let currentFilter = "all";
+    let searchQuery = "";
+
+    // Trigger input on dropzone click
+    dropzone?.addEventListener("click", () => {
+      uploadInput?.click();
+    });
+
+    // Handle drag and drop
+    dropzone?.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      dropzone.classList.add("border-primary", "bg-primary/5");
+    });
+
+    dropzone?.addEventListener("dragleave", () => {
+      dropzone.classList.remove("border-primary", "bg-primary/5");
+    });
+
+    dropzone?.addEventListener("drop", (e) => {
+      e.preventDefault();
+      dropzone.classList.remove("border-primary", "bg-primary/5");
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+        uploadFiles(e.dataTransfer.files);
+      }
+    });
+
+    uploadInput?.addEventListener("change", (e) => {
+      const files = (e.target as HTMLInputElement).files;
+      if (files && files.length > 0) {
+        uploadFiles(files);
+      }
+    });
+
+    async function uploadFiles(fileList: FileList) {
+      if (!indicator) return;
+      indicator.classList.remove("hidden");
+
+      for (let i = 0; i < fileList.length; i++) {
+        const file = fileList[i];
+        if (!file) continue;
+        const formData = new FormData();
+        formData.append("file", file);
+
+        try {
+          const res = await fetch(apiEndpoint, {
+            method: "POST",
+            body: formData
+          });
+          const json = await res.json();
+          if (json.success && json.data?.file) {
+            appendAssetCard(json.data.file);
+          } else {
+            alert(json.error || "Failed to upload file");
+          }
+        } catch (err: any) {
+          alert(err.message || "Upload error");
+        }
+      }
+
+      indicator.classList.add("hidden");
+      if (uploadInput) uploadInput.value = "";
+      filterCards();
+    }
+
+    function appendAssetCard(asset: any) {
+      if (!mediaGrid) return;
+      const isImg = asset.mimeType?.startsWith("image/");
+      const isVid = asset.mimeType?.startsWith("video/");
+      const isAud = asset.mimeType?.startsWith("audio/");
+
+      const card = document.createElement("div");
+      card.className = "border border-default rounded-lg bg-default overflow-hidden flex flex-col hover:border-primary/50 transition-all group asset-card animate-in fade-in";
+      card.dataset.key = asset.key;
+      card.dataset.name = asset.name;
+      card.dataset.type = asset.mimeType;
+      card.dataset.url = asset.url;
+
+      card.innerHTML = `
+        <div class="h-40 bg-muted/30 flex items-center justify-center relative overflow-hidden">
+          ${isImg ? `<img src="${asset.url}" alt="${asset.name}" class="size-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />` :
+            isVid ? `<div class="flex flex-col items-center gap-2 text-primary"><span class="size-10 text-primary">🎬</span><span class="text-[10px] uppercase font-mono tracking-wider">Video</span></div>` :
+            isAud ? `<div class="flex flex-col items-center gap-2 text-primary"><span class="size-10 text-primary">🎵</span><span class="text-[10px] uppercase font-mono tracking-wider">Audio</span></div>` :
+            `<div class="flex flex-col items-center gap-2 text-muted"><span class="size-10 text-muted">📄</span><span class="text-[10px] uppercase font-mono tracking-wider">Document</span></div>`}
+          <span class="absolute top-2 right-2 uppercase font-mono text-[10px] backdrop-blur-md bg-default/80 px-2 py-0.5 rounded text-highlighted">
+            ${asset.mimeType?.split("/")[1] || "FILE"}
+          </span>
+        </div>
+        <div class="p-4 flex flex-col gap-1 flex-1">
+          <p class="font-medium text-sm text-highlighted truncate" title="${asset.name}">${asset.name}</p>
+          <div class="flex items-center justify-between text-xs text-muted mt-1">
+            <span>${formatBytes(asset.size)}</span>
+            <span>Just now</span>
+          </div>
+          <div class="flex items-center justify-between gap-2 mt-4 pt-3 border-t border-default/50">
+            <button type="button" class="copy-url-btn text-xs font-medium text-muted hover:text-highlighted flex items-center gap-1.5 transition-colors" data-url="${asset.url}">
+              <span>Copy URL</span>
+            </button>
+            <button type="button" class="delete-asset-btn text-xs font-medium text-error hover:text-error/80 flex items-center gap-1 transition-colors" data-key="${asset.key}">
+              <span>Delete</span>
+            </button>
+          </div>
+        </div>
+      `;
+
+      mediaGrid.prepend(card);
+      bindCardEvents(card);
+    }
+
+    function bindCardEvents(parent: HTMLElement | Document) {
+      parent.querySelectorAll(".copy-url-btn").forEach((btn) => {
+        btn.addEventListener("click", async (e) => {
+          e.stopPropagation();
+          const url = (btn as HTMLElement).dataset.url;
+          if (url) {
+            const fullUrl = url.startsWith("http") ? url : window.location.origin + url;
+            await navigator.clipboard.writeText(fullUrl);
+            const originalText = btn.querySelector("span")?.textContent || "Copy URL";
+            const span = btn.querySelector("span");
+            if (span) span.textContent = "Copied!";
+            setTimeout(() => {
+              if (span) span.textContent = originalText;
+            }, 2000);
+          }
+        });
+      });
+
+      parent.querySelectorAll(".delete-asset-btn").forEach((btn) => {
+        btn.addEventListener("click", async (e) => {
+          e.stopPropagation();
+          const key = (btn as HTMLElement).dataset.key;
+          if (!key) return;
+          if (!confirm(`Are you sure you want to delete this file from R2 storage?\nKey: ${key}`)) return;
+
+          try {
+            const res = await fetch(`${apiEndpoint}?key=${encodeURIComponent(key)}`, {
+              method: "DELETE"
+            });
+            const json = await res.json();
+            if (json.success) {
+              const card = btn.closest(".asset-card");
+              card?.remove();
+              filterCards();
+            } else {
+              alert(json.error || "Failed to delete asset");
+            }
+          } catch (err: any) {
+            alert(err.message || "Failed to delete file");
+          }
+        });
+      });
+    }
+
+    bindCardEvents(document);
+
+    // Search and filter handling
+    function filterCards() {
+      const cards = document.querySelectorAll<HTMLElement>(".asset-card");
+      let visibleCount = 0;
+
+      cards.forEach((card) => {
+        const name = (card.dataset.name || "").toLowerCase();
+        const key = (card.dataset.key || "").toLowerCase();
+        const type = (card.dataset.type || "").toLowerCase();
+
+        const matchesSearch = !searchQuery || name.includes(searchQuery) || key.includes(searchQuery);
+        let matchesFilter = true;
+
+        if (currentFilter === "image") matchesFilter = type.startsWith("image/");
+        else if (currentFilter === "video") matchesFilter = type.startsWith("video/");
+        else if (currentFilter === "audio") matchesFilter = type.startsWith("audio/");
+        else if (currentFilter === "document") matchesFilter = type.includes("pdf") || type.includes("text") || type.includes("doc");
+
+        if (matchesSearch && matchesFilter) {
+          card.classList.remove("hidden");
+          visibleCount++;
+        } else {
+          card.classList.add("hidden");
+        }
+      });
+
+      if (emptyState) {
+        emptyState.classList.toggle("hidden", visibleCount > 0);
+        emptyState.classList.toggle("flex", visibleCount === 0);
+      }
+    }
+
+    searchInput?.addEventListener("input", (e) => {
+      searchQuery = (e.target as HTMLInputElement).value.toLowerCase().trim();
+      filterCards();
+    });
+
+    filterBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        filterBtns.forEach((b) => {
+          b.classList.remove("bg-primary", "text-white");
+          b.classList.add("bg-muted", "text-muted-foreground");
+        });
+        btn.classList.remove("bg-muted", "text-muted-foreground");
+        btn.classList.add("bg-primary", "text-white");
+
+        currentFilter = (btn as HTMLElement).dataset.filter || "all";
+        filterCards();
+      });
+    });
+
+    function formatBytes(bytes: number): string {
+      if (!bytes || bytes === 0) return "0 B";
+      const k = 1024;
+      const sizes = ["B", "KB", "MB", "GB"];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+    }
+  })();
+</script>

package/src/admin/pages/byline-schema.astro

@@ -0,0 +1,62 @@
+---
+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 RLAIcon from "@rimelight/ui/components/icon/RLAIcon.astro";
+
+export const prerender = false;
+
+const schemaFields = [
+  { key: "displayName", label: "Display Name", type: "string", required: true, description: "Primary author attribution name" },
+  { key: "avatarUrl", label: "Avatar Image", type: "image", required: false, description: "Author headshot or logo URL" },
+  { key: "role", label: "Role / Job Title", type: "string", required: false, description: "e.g. Lead Designer, Staff Writer" },
+  { key: "bio", label: "Biography", type: "rich_text", required: false, description: "Short author profile description" },
+  { key: "socialLinks", label: "Social Links", type: "array", required: false, description: "Twitter, GitHub, LinkedIn, Website URLs" },
+  { key: "organization", label: "Organization", type: "relation", required: false, description: "Associated company or team entity" },
+];
+---
+
+<CMSDashboardLayout title="Byline Schema" description="Configure author attribution fields and metadata requirements" activeSection="byline-schema">
+  <Fragment slot="toolbar-right">
+    <RLAButton variant="solid" color="primary" leadingIcon="i-lucide-save">
+      Save Schema
+    </RLAButton>
+  </Fragment>
+
+  <div class="border border-default rounded-lg bg-default divide-y divide-default">
+    <div class="p-6 flex items-center justify-between">
+      <div>
+        <h3 class="font-semibold text-highlighted text-base">Attribution Fields</h3>
+        <p class="text-sm text-muted">Fields available across all author byline entities</p>
+      </div>
+      <RLAButton variant="outline" color="neutral" size="sm" leadingIcon="i-lucide-plus">
+        Add Custom Field
+      </RLAButton>
+    </div>
+
+    {schemaFields.map((field) => (
+      <div class="p-4 sm:p-6 flex items-center justify-between gap-4 hover:bg-muted/10 transition-colors">
+        <div class="flex items-center gap-4 min-w-0">
+          <RLAIcon name="i-lucide-grip-vertical" class="size-4 text-muted shrink-0 cursor-grab" />
+          <div class="flex flex-col truncate">
+            <div class="flex items-center gap-2">
+              <span class="font-medium text-highlighted text-sm">{field.label}</span>
+              <span class="font-mono text-xs text-muted">({field.key})</span>
+              {field.required && (
+                <RLABadge variant="soft" color="error" size="xs">Required</RLABadge>
+              )}
+            </div>
+            <span class="text-xs text-muted truncate mt-0.5">{field.description}</span>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-3 shrink-0">
+          <RLABadge variant="soft" color="neutral" size="xs" class="font-mono">
+            {field.type}
+          </RLABadge>
+          <RLAButton variant="ghost" color="neutral" size="xs" leadingIcon="i-lucide-settings-2" aria-label="Configure field" />
+        </div>
+      </div>
+    ))}
+  </div>
+</CMSDashboardLayout>

package/src/admin/pages/bylines.astro

@@ -0,0 +1,16 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import { RimelightBylinesManager } from "../../client/components";
+
+export const prerender = false;
+---
+
+<CMSDashboardLayout
+  title="Bylines"
+  description="Manage author profiles and multi-author attributions"
+  activeSection="bylines"
+>
+  <div class="w-full">
+    <RimelightBylinesManager client:only="solid" />
+  </div>
+</CMSDashboardLayout>

package/src/admin/pages/categories.astro

@@ -0,0 +1,21 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import { RimelightTaxonomyMasterDetail } from "../../client/components";
+
+export const prerender = false;
+---
+
+<CMSDashboardLayout
+  title="Categories"
+  description="Manage hierarchical categories for content organization"
+  activeSection="categories"
+>
+  <div class="w-full">
+    <RimelightTaxonomyMasterDetail
+      client:only="solid"
+      taxonomy="category"
+      title="Categories"
+      description="Organize your content into hierarchical topics and sections."
+    />
+  </div>
+</CMSDashboardLayout>

package/src/admin/pages/content-types.astro

@@ -0,0 +1,55 @@
+---
+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 RLAIcon from "@rimelight/ui/components/icon/RLAIcon.astro";
+
+export const prerender = false;
+
+const contentTypes = [
+  { id: "page", name: "Page", slug: "pages", icon: "i-lucide-file-text", description: "Standard standalone marketing and dynamic landing pages", count: 12, system: true },
+  { id: "blog", name: "Blog Post", slug: "blog", icon: "i-lucide-newspaper", description: "Articles and editorial news posts with bylines and dates", count: 8, system: false },
+  { id: "doc", name: "Documentation", slug: "docs", icon: "i-lucide-book-open", description: "Hierarchical product documentation and API references", count: 24, system: false },
+  { id: "legal", name: "Legal Document", slug: "legal", icon: "i-lucide-scale", description: "Version-controlled Terms of Service, Privacy Policies", count: 4, system: false },
+];
+---
+
+<CMSDashboardLayout title="Content Types" description="Define schemas, block rules, and collection models" activeSection="content-types">
+  <Fragment slot="toolbar-right">
+    <RLAButton variant="solid" color="success" leadingIcon="i-lucide-plus">
+      Create Content Type
+    </RLAButton>
+  </Fragment>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    {contentTypes.map((ct) => (
+      <div class="border border-default rounded-lg bg-default p-6 flex flex-col justify-between hover:border-primary/50 transition-colors">
+        <div class="flex flex-col gap-3">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <div class="size-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
+                <RLAIcon name={ct.icon} class="size-5 text-primary" />
+              </div>
+              <div>
+                <h3 class="font-semibold text-highlighted text-base">{ct.name}</h3>
+                <span class="font-mono text-xs text-muted">/{ct.slug}</span>
+              </div>
+            </div>
+            <RLABadge variant="soft" color={ct.system ? "neutral" : "primary"} size="xs">
+              {ct.system ? "System" : "Custom"}
+            </RLABadge>
+          </div>
+          <p class="text-sm text-muted">{ct.description}</p>
+        </div>
+
+        <div class="flex items-center justify-between mt-6 pt-4 border-t border-default/50 text-sm">
+          <span class="text-xs text-muted">{ct.count} entries</span>
+          <div class="flex items-center gap-2">
+            <RLAButton variant="ghost" color="primary" size="xs">Edit Schema</RLAButton>
+            <RLAButton variant="ghost" color="neutral" size="xs">Permissions</RLAButton>
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+</CMSDashboardLayout>

package/src/admin/pages/dashboard.astro

@@ -0,0 +1,61 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLACard from "@rimelight/ui/components/card/RLACard.astro";
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+---
+
+<CMSDashboardLayout title="CMS Admin" description="Content Management System administration" activeSection="dashboard">
+  <Fragment slot="toolbar-left">
+    <RLAButton variant="ghost" color="neutral" size="sm" leadingIcon="i-lucide-calendar">
+      Overview
+    </RLAButton>
+  </Fragment>
+  <Fragment slot="toolbar-right">
+    <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/templates/new")} variant="solid" color="primary" size="sm" leadingIcon="i-lucide-plus">
+      Create Template
+    </RLAButton>
+  </Fragment>
+
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+    <RLACard title="Pages" description="Create and edit pages">
+      <div class="mt-4">
+        <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/pages")} variant="ghost" color="primary" trailingIcon="i-lucide-arrow-right">
+          Manage Pages
+        </RLAButton>
+      </div>
+    </RLACard>
+    <RLACard title="Categories & Tags" description="Organize your content structure">
+      <div class="mt-4 flex gap-2">
+        <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/categories")} variant="ghost" color="primary">
+          Categories
+        </RLAButton>
+        <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/tags")} variant="ghost" color="primary">
+          Tags
+        </RLAButton>
+      </div>
+    </RLACard>
+    <RLACard title="Bylines" description="Manage author attribution">
+      <div class="mt-4">
+        <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/bylines")} variant="ghost" color="primary" trailingIcon="i-lucide-arrow-right">
+          Manage Bylines
+        </RLAButton>
+      </div>
+    </RLACard>
+  </div>
+
+  <RLACard title="Quick Actions">
+    <div class="flex flex-wrap gap-4 mt-2">
+      <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/pages/new")} variant="solid" color="primary" leadingIcon="i-lucide-plus">
+        Create Page
+      </RLAButton>
+      <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/templates/new")} variant="outline" color="neutral" leadingIcon="i-lucide-plus">
+        Create Template
+      </RLAButton>
+    </div>
+  </RLACard>
+</CMSDashboardLayout>